flipper-ui 0.39.13 → 0.39.15

package/core/data-display/list-item-dark/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { MouseEvent } from 'react';
+export interface ListItemDarkProps {
+    id?: string;
+    name?: string;
+    href?: string;
+    className?: string;
+    icon?: JSX.Element;
+    actions?: JSX.Element;
+    title?: string | JSX.Element;
+    selected?: boolean;
+    disabled?: boolean;
+    dense?: boolean;
+    expanded?: boolean;
+    'data-testid'?: string;
+    onClick?: (event?: MouseEvent<HTMLDivElement>) => void;
+}
+declare const ListItemDark: ({ id, name, href, icon, title, dense, actions, selected, disabled, className, expanded, onClick, ...otherProps }: ListItemDarkProps) => React.JSX.Element;
+export default ListItemDark;

package/core/data-display/list-item-dark/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _Typography2 = _interopRequireDefault(require("@mui/material/Typography"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
+var _tooltip = _interopRequireDefault(require("../../feedback/tooltip"));
+var _styles = require("./styles");
+var _excluded = ["id", "name", "href", "icon", "title", "dense", "actions", "selected", "disabled", "className", "expanded", "onClick"];
+var ListItemDark = function ListItemDark(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    href = _ref.href,
+    icon = _ref.icon,
+    title = _ref.title,
+    dense = _ref.dense,
+    actions = _ref.actions,
+    selected = _ref.selected,
+    disabled = _ref.disabled,
+    className = _ref.className,
+    _ref$expanded = _ref.expanded,
+    expanded = _ref$expanded === void 0 ? true : _ref$expanded,
+    onClick = _ref.onClick,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var handleClick = function handleClick(event) {
+    var opensNewTab = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+    if (href && opensNewTab) return;
+    if (href) event.preventDefault();
+    onClick === null || onClick === void 0 || onClick(event);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    disablePadding: true,
+    id: id,
+    className: className
+  }, /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    key: name,
+    placement: "right",
+    enterDelay: 500,
+    title: expanded ? '' : title
+  }, /*#__PURE__*/_react["default"].createElement(_styles.ItemButton, (0, _extends2["default"])({}, href ? {
+    component: 'a',
+    href: href
+  } : {}, {
+    dense: dense,
+    expanded: expanded,
+    selected: selected,
+    disabled: disabled,
+    "data-name": name,
+    "data-testid": otherProps['data-testid'],
+    onClick: handleClick
+  }), icon && /*#__PURE__*/_react["default"].createElement(_styles.IconSlot, {
+    dense: dense
+  }, icon), (title || actions) && /*#__PURE__*/_react["default"].createElement(_styles.ItemLabel, {
+    expanded: expanded,
+    "aria-hidden": !expanded
+  }, title && /*#__PURE__*/_react["default"].createElement(_Typography2["default"], {
+    flex: "1 0 0",
+    variant: "body2",
+    fontSize: "13.5px",
+    lineHeight: "13.5px",
+    fontWeight: selected ? 500 : 400,
+    sx: {
+      minWidth: 0,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }, title), actions && /*#__PURE__*/_react["default"].createElement(_styles.FavoriteActions, {
+    className: "list-item-dark-actions"
+  }, actions)))));
+};
+var _default = exports["default"] = ListItemDark;

package/core/data-display/list-item-dark/list-item-dark.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/core/data-display/list-item-dark/styles.d.ts

@@ -0,0 +1,27 @@
+interface IRootProps {
+    selected?: boolean;
+    dense?: boolean;
+    expanded?: boolean;
+}
+export declare const FavoriteActions: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ItemLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    expanded?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ItemButton: import("@emotion/styled").StyledComponent<import("@mui/material/ListItemButton").ListItemButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "disabled" | "children" | "style" | "className" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "alignItems" | "dense" | "selected" | "disableGutters" | "divider"> & {
+    theme?: import("@emotion/react").Theme;
+} & IRootProps, {}, {}>;
+export declare const IconSlot: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    dense?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export {};

package/core/data-display/list-item-dark/styles.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ItemLabel = exports.ItemButton = exports.IconSlot = exports.FavoriteActions = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _ListItemButton = _interopRequireDefault(require("@mui/material/ListItemButton"));
+var _styles = require("@mui/material/styles");
+var _theme = require("../../../theme");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _theme$colors = _theme.theme.colors,
+  neutral = _theme$colors.neutral,
+  orange = _theme$colors.orange;
+var FavoriteActions = exports.FavoriteActions = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: inline-flex;\n    align-items: center;\n    gap: 2px;\n    margin-left: auto;\n    opacity: 0;\n    transition: opacity 120ms ease;\n"])));
+var ItemLabel = exports.ItemLabel = (0, _styled["default"])('div', {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'expanded';
+  }
+})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    max-width: ", ";\n    margin-left: ", ";\n    opacity: ", ";\n    transition:\n        max-width 225ms cubic-bezier(0.4, 0, 0.6, 1),\n        margin-left 225ms cubic-bezier(0.4, 0, 0.6, 1),\n        opacity 195ms cubic-bezier(0.4, 0, 0.6, 1);\n"])), function (props) {
+  return props.expanded === false ? '0px' : '200px';
+}, function (props) {
+  return props.expanded === false ? '0px' : '12px';
+}, function (props) {
+  return props.expanded === false ? 0 : 1;
+});
+var ItemButton = exports.ItemButton = (0, _styled["default"])(_ListItemButton["default"], {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'expanded';
+  }
+})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        display: flex;\n        align-items: center;\n        justify-content: ", ";\n        width: 100%;\n        border-radius: 4px;\n        padding: ", ";\n        border-left: 3px solid\n            ", ";\n        background-color: ", ";\n        color: ", ";\n        font-weight: ", ";\n        overflow: hidden;\n        white-space: nowrap;\n        transition:\n            background-color 120ms ease,\n            color 120ms ease;\n    }\n\n    & svg {\n        width: 18px;\n        height: 18px;\n        flex-shrink: 0;\n        color: inherit;\n    }\n\n    & svg path,\n    & svg circle,\n    & svg rect {\n        fill: currentColor;\n    }\n\n    &:hover .list-item-dark-actions,\n    &:focus-within .list-item-dark-actions {\n        opacity: 1;\n    }\n\n    &&:hover {\n        background-color: ", ";\n        color: ", ";\n    }\n\n    &&.Mui-disabled {\n        opacity: 0.5;\n    }\n\n    &&.Mui-focusVisible {\n        outline: 2px solid ", ";\n        outline-offset: -2px;\n    }\n"])), function (props) {
+  return props.expanded ? 'flex-start' : 'center';
+}, function (props) {
+  return props.dense ? '8px 12px' : '12px';
+}, function (props) {
+  return props.selected ? orange[600] : 'transparent';
+}, function (props) {
+  return props.selected ? (0, _styles.alpha)(neutral[50], 0.12) : 'transparent';
+}, function (props) {
+  return props.selected ? neutral[50] : (0, _styles.alpha)(neutral[50], 0.7);
+}, function (props) {
+  return props.selected ? 500 : 400;
+}, function (props) {
+  return props.selected ? (0, _styles.alpha)(neutral[50], 0.12) : (0, _styles.alpha)(neutral[50], 0.06);
+}, neutral[50], (0, _styles.alpha)(orange[600], 0.6));
+var IconSlot = exports.IconSlot = _styled["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: ", ";\n    height: ", ";\n    color: inherit;\n\n    & > svg {\n        width: 100%;\n        height: 100%;\n    }\n"])), function (props) {
+  return props.dense ? '14px' : '18px';
+}, function (props) {
+  return props.dense ? '14px' : '18px';
+});

package/core/navigation/sidebar/styles.js

@@ -17,4 +17,4 @@ var Action = exports.Action = _styled["default"].div(_templateObject || (_templa
 var AnchorButton = exports.AnchorButton = (0, _styled["default"])(_button["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        max-width: ", "px;\n        border-radius: 4px;\n        box-shadow: none;\n        min-width: auto;\n        width: 100%;\n        background-color: transparent;\n    }\n\n    &:active {\n        box-shadow: none;\n    }\n\n    &:hover {\n        background-color: ", " !important;\n    }\n"])), function (props) {
   return props.minwidth;
 }, gray[300]);
-var SidebarStorie = exports.SidebarStorie = _styled["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    height: 500px;\n"])));
+var SidebarStorie = exports.SidebarStorie = _styled["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    position: relative;\n    height: 700px;\n    overflow: hidden;\n\n    .MuiDrawer-root,\n    .MuiDrawer-paper {\n        position: absolute !important;\n        top: 0 !important;\n        height: 100% !important;\n    }\n"])));

package/core/navigation/sidebar-new/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { DefaultProps } from '../../types';
+export interface SidebarNewProps extends DefaultProps {
+    open: boolean;
+    expanded?: boolean;
+    showButton?: boolean;
+    anchor?: 'top' | 'left' | 'bottom' | 'right';
+    variant?: 'persistent' | 'temporary' | 'permanent';
+    docked?: boolean;
+    maxWidth?: number | string;
+    minWidth?: number | string;
+    top?: number | string;
+    name?: string;
+    logo?: ReactNode;
+    favoritesTitle?: string;
+    favorites?: ReactNode;
+    favoritesOpen?: boolean;
+    onFavoritesToggle?: () => void;
+    favoritesListOpen?: boolean;
+    onFavoritesListToggle?: () => void;
+    onToggle: () => void;
+}
+declare const SidebarNew: ({ id, anchor, className, docked, expanded, margin, maxWidth, minWidth, top, open, padding, showButton, style, variant, onToggle, children, name, logo, favoritesTitle, favorites, favoritesOpen, onFavoritesToggle, favoritesListOpen, onFavoritesListToggle, ...otherProps }: SidebarNewProps) => React.JSX.Element;
+export default SidebarNew;

package/core/navigation/sidebar-new/index.js

@@ -0,0 +1,157 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _Typography2 = _interopRequireDefault(require("@mui/material/Typography"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
+var _Drawer = _interopRequireDefault(require("@mui/material/Drawer"));
+var _styles = require("@mui/material/styles");
+var _mui = require("../../../icons/mui");
+var _styles2 = require("./styles");
+var _theme = require("../../../theme");
+var _excluded = ["id", "anchor", "className", "docked", "expanded", "margin", "maxWidth", "minWidth", "top", "open", "padding", "showButton", "style", "variant", "onToggle", "children", "name", "logo", "favoritesTitle", "favorites", "favoritesOpen", "onFavoritesToggle", "favoritesListOpen", "onFavoritesListToggle"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _theme$colors = _theme.theme.colors,
+  darkBlue = _theme$colors.darkBlue,
+  neutral = _theme$colors.neutral;
+var SidebarNew = function SidebarNew(_ref) {
+  var id = _ref.id,
+    _ref$anchor = _ref.anchor,
+    anchor = _ref$anchor === void 0 ? 'left' : _ref$anchor,
+    className = _ref.className,
+    _ref$docked = _ref.docked,
+    docked = _ref$docked === void 0 ? false : _ref$docked,
+    _ref$expanded = _ref.expanded,
+    expanded = _ref$expanded === void 0 ? true : _ref$expanded,
+    margin = _ref.margin,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? 248 : _ref$maxWidth,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? 60 : _ref$minWidth,
+    _ref$top = _ref.top,
+    top = _ref$top === void 0 ? 64 : _ref$top,
+    open = _ref.open,
+    padding = _ref.padding,
+    _ref$showButton = _ref.showButton,
+    showButton = _ref$showButton === void 0 ? true : _ref$showButton,
+    style = _ref.style,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'permanent' : _ref$variant,
+    onToggle = _ref.onToggle,
+    children = _ref.children,
+    name = _ref.name,
+    logo = _ref.logo,
+    _ref$favoritesTitle = _ref.favoritesTitle,
+    favoritesTitle = _ref$favoritesTitle === void 0 ? 'Favoritos' : _ref$favoritesTitle,
+    favorites = _ref.favorites,
+    _ref$favoritesOpen = _ref.favoritesOpen,
+    favoritesOpen = _ref$favoritesOpen === void 0 ? false : _ref$favoritesOpen,
+    onFavoritesToggle = _ref.onFavoritesToggle,
+    favoritesListOpen = _ref.favoritesListOpen,
+    onFavoritesListToggle = _ref.onFavoritesListToggle,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    internalListExpanded = _useState2[0],
+    setInternalListExpanded = _useState2[1];
+  var isListControlled = favoritesListOpen !== undefined;
+  var favoritesListExpanded = isListControlled ? favoritesListOpen : internalListExpanded;
+  var hasFavorites = Boolean(favorites);
+  var showFavoritesArea = hasFavorites && expanded;
+  var showHeader = Boolean(logo) || hasFavorites || showButton;
+  var handleFavoritesListToggle = function handleFavoritesListToggle() {
+    if (isListControlled) {
+      onFavoritesListToggle === null || onFavoritesListToggle === void 0 || onFavoritesListToggle();
+    } else {
+      setInternalListExpanded(function (prev) {
+        return !prev;
+      });
+    }
+  };
+  var width = expanded ? maxWidth : minWidth;
+  var widthTransition = "width ".concat(expanded ? 225 : 195, "ms cubic-bezier(0.4, 0, 0.6, 1)");
+  return /*#__PURE__*/_react["default"].createElement(_Drawer["default"], (0, _extends2["default"])({}, otherProps, {
+    id: id,
+    open: open,
+    anchor: anchor,
+    variant: variant,
+    className: className,
+    style: _objectSpread({
+      width: width,
+      padding: padding,
+      margin: margin,
+      top: top,
+      transition: widthTransition
+    }, style),
+    slotProps: {
+      paper: {
+        style: docked ? {
+          position: 'fixed',
+          left: '0px',
+          bottom: '0px',
+          top: 'inherit',
+          height: 'inherit'
+        } : {},
+        sx: {
+          display: 'flex',
+          flexDirection: 'column',
+          width: width,
+          overflowX: 'hidden',
+          transition: widthTransition,
+          backgroundColor: darkBlue[600],
+          color: (0, _styles.alpha)(neutral[50], 0.7),
+          borderRight: "1px solid ".concat((0, _styles.alpha)(neutral[50], 0.08))
+        }
+      }
+    }
+  }), showHeader && /*#__PURE__*/_react["default"].createElement(_styles2.Header, {
+    anchor: anchor
+  }, logo && /*#__PURE__*/_react["default"].createElement(_styles2.LogoContainer, {
+    expanded: expanded
+  }, logo), /*#__PURE__*/_react["default"].createElement(_styles2.HeaderActions, null, hasFavorites && /*#__PURE__*/_react["default"].createElement(_styles2.HeaderActionsItem, {
+    expanded: expanded
+  }, /*#__PURE__*/_react["default"].createElement(_styles2.HeaderIconButton, {
+    type: "button",
+    selected: favoritesOpen,
+    "data-testid": "sidebar-new-favorites-button",
+    "aria-pressed": favoritesOpen,
+    onClick: onFavoritesToggle
+  }, /*#__PURE__*/_react["default"].createElement(_mui.IconStar, null))), showButton && /*#__PURE__*/_react["default"].createElement(_styles2.HeaderIconButton, {
+    type: "button",
+    name: "button-".concat(name || 'sidebar-new'),
+    "data-testid": "sidebar-new-button",
+    onClick: onToggle
+  }, /*#__PURE__*/_react["default"].createElement(_mui.IconMenu, null)))), showFavoritesArea && /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
+    unmountOnExit: true,
+    timeout: "auto",
+    "in": favoritesOpen,
+    sx: {
+      flexShrink: 0
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_styles2.FavoritesSection, null, /*#__PURE__*/_react["default"].createElement(_styles2.FavoritesHeader, {
+    type: "button",
+    open: favoritesListExpanded,
+    "aria-expanded": favoritesListExpanded,
+    "data-testid": "sidebar-new-favorites-header",
+    onClick: handleFavoritesListToggle
+  }, /*#__PURE__*/_react["default"].createElement(_Typography2["default"], {
+    lineHeight: 1,
+    variant: "caption",
+    fontWeight: 500
+  }, favoritesTitle.toUpperCase()), /*#__PURE__*/_react["default"].createElement(_mui.IconExpandMore, null)), /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
+    "in": favoritesListExpanded,
+    timeout: "auto"
+  }, /*#__PURE__*/_react["default"].createElement("div", null, favorites))), /*#__PURE__*/_react["default"].createElement(_styles2.DividerWrapper, null, /*#__PURE__*/_react["default"].createElement(_styles2.Divider, null))), /*#__PURE__*/_react["default"].createElement(_styles2.SidebarScrollArea, null, children));
+};
+var _default = exports["default"] = SidebarNew;

package/core/navigation/sidebar-new/sidebar-new.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/core/navigation/sidebar-new/sidebar-new.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import SidebarNew from '.';
+declare const meta: Meta<typeof SidebarNew>;
+export default meta;
+type Story = StoryObj<typeof SidebarNew>;
+export declare const sidebarNew: Story;

package/core/navigation/sidebar-new/styles.d.ts

@@ -0,0 +1,57 @@
+interface IHeader {
+    anchor?: 'top' | 'left' | 'bottom' | 'right';
+}
+interface ICollapsible {
+    expanded?: boolean;
+}
+interface IIconButton {
+    selected?: boolean;
+}
+interface IFavoritesHeader {
+    open?: boolean;
+}
+export declare const Header: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & IHeader, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const LogoContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & ICollapsible, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const HeaderActions: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const HeaderActionsItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & ICollapsible, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const HeaderIconButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & IIconButton, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const FavoritesSection: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FavoritesHeader: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & IFavoritesHeader, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const DividerWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Divider: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SidebarScrollArea: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SidebarNewStorie: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/core/navigation/sidebar-new/styles.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarScrollArea = exports.SidebarNewStorie = exports.LogoContainer = exports.HeaderIconButton = exports.HeaderActionsItem = exports.HeaderActions = exports.Header = exports.FavoritesSection = exports.FavoritesHeader = exports.DividerWrapper = exports.Divider = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _styles = require("@mui/material/styles");
+var _theme = require("../../../theme");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1;
+var _theme$colors = _theme.theme.colors,
+  neutral = _theme$colors.neutral,
+  orange = _theme$colors.orange;
+var Header = exports.Header = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: ", ";\n    width: 100%;\n    height: 56px;\n    flex-shrink: 0;\n    padding: 0 10px;\n    border-bottom: 1px solid ", ";\n    box-sizing: border-box;\n    overflow: hidden;\n"])), function (props) {
+  return props.anchor === 'right' ? 'row-reverse' : 'row';
+}, (0, _styles.alpha)(neutral[50], 0.08));
+var LogoContainer = exports.LogoContainer = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n    flex: ", ";\n    min-width: 0;\n    max-width: ", ";\n    margin-right: ", ";\n    overflow: hidden;\n    opacity: ", ";\n    transition:\n        max-width 225ms cubic-bezier(0.4, 0, 0.6, 1),\n        margin-right 225ms cubic-bezier(0.4, 0, 0.6, 1),\n        flex-basis 225ms cubic-bezier(0.4, 0, 0.6, 1),\n        opacity 195ms cubic-bezier(0.4, 0, 0.6, 1);\n"])), function (props) {
+  return props.expanded === false ? '0 0 0' : '1 1 auto';
+}, function (props) {
+  return props.expanded === false ? '0px' : 'none';
+}, function (props) {
+  return props.expanded === false ? '0px' : '8px';
+}, function (props) {
+  return props.expanded === false ? 0 : 1;
+});
+var HeaderActions = exports.HeaderActions = _styled["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n"])));
+var HeaderActionsItem = exports.HeaderActionsItem = _styled["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    display: inline-flex;\n    align-items: center;\n    overflow: hidden;\n    max-width: ", ";\n    margin-right: ", ";\n    opacity: ", ";\n    transition:\n        max-width 225ms cubic-bezier(0.4, 0, 0.6, 1),\n        margin-right 225ms cubic-bezier(0.4, 0, 0.6, 1),\n        opacity 195ms cubic-bezier(0.4, 0, 0.6, 1);\n"])), function (props) {
+  return props.expanded === false ? '0px' : '30px';
+}, function (props) {
+  return props.expanded === false ? '0px' : '8px';
+}, function (props) {
+  return props.expanded === false ? 0 : 1;
+});
+var HeaderIconButton = exports.HeaderIconButton = _styled["default"].button(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n    padding: 0;\n    border-radius: 6px;\n    border: 1px solid\n        ", ";\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n    transition:\n        background-color 120ms ease,\n        color 120ms ease,\n        border-color 120ms ease;\n\n    & svg {\n        font-size: 18px;\n    }\n\n    &:hover {\n        background-color: ", ";\n        color: ", ";\n    }\n\n    &:focus-visible {\n        outline: 2px solid ", ";\n        outline-offset: 1px;\n    }\n"])), function (props) {
+  return props.selected ? (0, _styles.alpha)(orange[600], 0.35) : (0, _styles.alpha)(neutral[50], 0.1);
+}, function (props) {
+  return props.selected ? (0, _styles.alpha)(orange[600], 0.14) : (0, _styles.alpha)(neutral[50], 0.06);
+}, function (props) {
+  return props.selected ? orange[600] : (0, _styles.alpha)(neutral[50], 0.7);
+}, function (props) {
+  return props.selected ? (0, _styles.alpha)(orange[600], 0.22) : (0, _styles.alpha)(neutral[50], 0.12);
+}, function (props) {
+  return props.selected ? orange[300] : neutral[50];
+}, (0, _styles.alpha)(orange[600], 0.6));
+var FavoritesSection = exports.FavoritesSection = _styled["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: column;\n    padding: 8px 8px 4px;\n    width: 100%;\n    box-sizing: border-box;\n"])));
+var FavoritesHeader = exports.FavoritesHeader = _styled["default"].button(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 6px;\n    width: 100%;\n    padding: 4px 8px;\n    border: 0;\n    background: transparent;\n    color: ", ";\n    cursor: pointer;\n    transition: color 120ms ease;\n\n    & svg {\n        font-size: 14px;\n        transition: transform 160ms ease;\n        transform: rotate(", "deg);\n    }\n\n    &:hover {\n        color: ", ";\n    }\n\n    &:focus-visible {\n        outline: 2px solid ", ";\n        outline-offset: 2px;\n    }\n"])), (0, _styles.alpha)(neutral[50], 0.55), function (props) {
+  return props.open ? 180 : 0;
+}, (0, _styles.alpha)(neutral[50], 0.85), (0, _styles.alpha)(orange[600], 0.6));
+var DividerWrapper = exports.DividerWrapper = _styled["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 12px;\n    padding: 6px 12px 0 12px;\n    box-sizing: border-box;\n"])));
+var Divider = exports.Divider = _styled["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    height: 1px;\n    background-color: ", ";\n"])), (0, _styles.alpha)(neutral[50], 0.06));
+var SidebarScrollArea = exports.SidebarScrollArea = _styled["default"].div(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    width: 100%;\n    min-height: 0;\n    max-height: 100%;\n    overflow-y: auto;\n    overflow-x: hidden;\n    scrollbar-width: thin;\n    scrollbar-color: ", " transparent;\n\n    &::-webkit-scrollbar {\n        width: 4px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background-color: ", ";\n        border-radius: 2px;\n    }\n\n    &::-webkit-scrollbar-thumb:hover {\n        background-color: ", ";\n    }\n"])), (0, _styles.alpha)(neutral[50], 0.2), (0, _styles.alpha)(neutral[50], 0.2), (0, _styles.alpha)(neutral[50], 0.35));
+var SidebarNewStorie = exports.SidebarNewStorie = _styled["default"].div(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2["default"])(["\n    position: relative;\n    height: 700px;\n    overflow: hidden;\n\n    .MuiDrawer-root,\n    .MuiDrawer-paper {\n        position: absolute !important;\n        top: 0 !important;\n        height: 100% !important;\n    }\n"])));

package/icons/mui/index.d.ts

@@ -2,19 +2,23 @@ export { default as IconAccessible } from '@mui/icons-material/Accessible';
 export { default as IconAdd } from '@mui/icons-material/Add';
 export { default as IconAccountCircle } from '@mui/icons-material/AccountCircle';
 export { default as IconAddCircleOutline } from '@mui/icons-material/AddCircleOutline';
+export { default as IconAir } from '@mui/icons-material/Air';
 export { default as IconAllInbox } from '@mui/icons-material/AllInbox';
 export { default as IconArrowBack } from '@mui/icons-material/ArrowBack';
 export { default as IconArrowBackIos } from '@mui/icons-material/ArrowBackIos';
 export { default as IconAssignment } from '@mui/icons-material/Assignment';
 export { default as IconAssignmentInd } from '@mui/icons-material/AssignmentInd';
 export { default as IconAudiotrack } from '@mui/icons-material/Audiotrack';
+export { default as IconAutoAwesome } from '@mui/icons-material/AutoAwesome';
 export { default as IconArrowDownward } from '@mui/icons-material/ArrowDownward';
 export { default as IconArrowDropDown } from '@mui/icons-material/ArrowDropDown';
 export { default as IconArrowUpward } from '@mui/icons-material/ArrowUpward';
 export { default as IconBackHand } from '@mui/icons-material/BackHand';
 export { default as IconBallot } from '@mui/icons-material/Ballot';
+export { default as IconBiotechOutlined } from '@mui/icons-material/BiotechOutlined';
 export { default as IconBiotechSharp } from '@mui/icons-material/BiotechSharp';
 export { default as IconBlock } from '@mui/icons-material/Block';
+export { default as IconBloodtypeOutlined } from '@mui/icons-material/BloodtypeOutlined';
 export { default as IconBorderColor } from '@mui/icons-material/BorderColor';
 export { default as IconBuild } from '@mui/icons-material/Build';
 export { default as IconBusiness } from '@mui/icons-material/Business';
@@ -68,7 +72,9 @@ export { default as IconFormatListBulleted } from '@mui/icons-material/FormatLis
 export { default as IconForumOutlined } from '@mui/icons-material/ForumOutlined';
 export { default as IconFullscreenRounded } from '@mui/icons-material/FullscreenRounded';
 export { default as IconGridView } from '@mui/icons-material/GridViewRounded';
+export { default as IconHeadphones } from '@mui/icons-material/Headphones';
 export { default as IconHeadset } from '@mui/icons-material/Headset';
+export { default as IconHearing } from '@mui/icons-material/Hearing';
 export { default as IconHelp } from '@mui/icons-material/Help';
 export { default as IconHelpOutline } from '@mui/icons-material/HelpOutline';
 export { default as IconHistory } from '@mui/icons-material/History';
@@ -76,6 +82,7 @@ export { default as IconHome } from '@mui/icons-material/Home';
 export { default as IconHomeWorkOutlined } from '@mui/icons-material/HomeWorkOutlined';
 export { default as IconHourglassFull } from '@mui/icons-material/HourglassFull';
 export { default as IconVote } from '@mui/icons-material/HowToVote';
+export { default as IconImageOutlined } from '@mui/icons-material/ImageOutlined';
 export { default as IconImportantDevices } from '@mui/icons-material/ImportantDevices';
 export { default as IconInfo } from '@mui/icons-material/Info';
 export { default as IconInfoOutlined } from '@mui/icons-material/InfoOutlined';
@@ -92,6 +99,7 @@ export { default as IconLock } from '@mui/icons-material/Lock';
 export { default as IconLockOpen } from '@mui/icons-material/LockOpen';
 export { default as IconLockOutlined } from '@mui/icons-material/LockOutlined';
 export { default as IconLocalHospital } from '@mui/icons-material/LocalHospital';
+export { default as IconMedicalServicesOutlined } from '@mui/icons-material/MedicalServicesOutlined';
 export { default as IconMenu } from '@mui/icons-material/Menu';
 export { default as IconMonitorHeart } from '@mui/icons-material/MonitorHeart';
 export { default as IconMoreHoriz } from '@mui/icons-material/MoreHoriz';
@@ -116,6 +124,7 @@ export { default as IconPrint } from '@mui/icons-material/Print';
 export { default as IconPriorityHigh } from '@mui/icons-material/PriorityHigh';
 export { default as IconRecentActors } from '@mui/icons-material/RecentActors';
 export { default as IconRemoveCircleOutline } from '@mui/icons-material/RemoveCircleOutline';
+export { default as IconRemoveRedEyeOutlined } from '@mui/icons-material/RemoveRedEyeOutlined';
 export { default as IconRepeat } from '@mui/icons-material/Repeat';
 export { default as IconReplay } from '@mui/icons-material/Replay';
 export { default as IconReport } from '@mui/icons-material/Report';
@@ -127,6 +136,7 @@ export { default as IconRoomOutlined } from '@mui/icons-material/RoomOutlined';
 export { default as IconSave } from '@mui/icons-material/Save';
 export { default as IconSaveAlt } from '@mui/icons-material/SaveAlt';
 export { default as IconSchedule } from '@mui/icons-material/Schedule';
+export { default as IconScienceOutlined } from '@mui/icons-material/ScienceOutlined';
 export { default as IconSearch } from '@mui/icons-material/Search';
 export { default as IconSentimentNeutral } from '@mui/icons-material/SentimentNeutral';
 export { default as IconSentimentSatisfied } from '@mui/icons-material/SentimentSatisfied';
@@ -147,11 +157,14 @@ export { default as IconTimeline } from '@mui/icons-material/Timeline';
 export { default as IconToday } from '@mui/icons-material/Today';
 export { default as IconTokenRounded } from '@mui/icons-material/TokenRounded';
 export { default as IconUpdate } from '@mui/icons-material/Update';
+export { default as IconVerifiedOutlined } from '@mui/icons-material/VerifiedOutlined';
 export { default as IconVisibility } from '@mui/icons-material/Visibility';
 export { default as IconVisibilityOff } from '@mui/icons-material/VisibilityOff';
+export { default as IconVisibilityOutlined } from '@mui/icons-material/VisibilityOutlined';
 export { default as IconVpnKey } from '@mui/icons-material/VpnKey';
 export { default as IconWarning } from '@mui/icons-material/Warning';
 export { default as IconWarningOutlined } from '@mui/icons-material/WarningAmberOutlined';
 export { default as IconWaterDrop } from '@mui/icons-material/WaterDrop';
+export { default as IconWaterDropOutlined } from '@mui/icons-material/WaterDropOutlined';
 export { default as IconWebhook } from '@mui/icons-material/Webhook';
 export { default as IconWifiOff } from '@mui/icons-material/WifiOff';

package/icons/mui/index.js

@@ -28,6 +28,12 @@ Object.defineProperty(exports, "IconAddCircleOutline", {
     return _AddCircleOutline["default"];
   }
 });
+Object.defineProperty(exports, "IconAir", {
+  enumerable: true,
+  get: function get() {
+    return _Air["default"];
+  }
+});
 Object.defineProperty(exports, "IconAllInbox", {
   enumerable: true,
   get: function get() {
@@ -82,6 +88,12 @@ Object.defineProperty(exports, "IconAudiotrack", {
     return _Audiotrack["default"];
   }
 });
+Object.defineProperty(exports, "IconAutoAwesome", {
+  enumerable: true,
+  get: function get() {
+    return _AutoAwesome["default"];
+  }
+});
 Object.defineProperty(exports, "IconBackHand", {
   enumerable: true,
   get: function get() {
@@ -94,6 +106,12 @@ Object.defineProperty(exports, "IconBallot", {
     return _Ballot["default"];
   }
 });
+Object.defineProperty(exports, "IconBiotechOutlined", {
+  enumerable: true,
+  get: function get() {
+    return _BiotechOutlined["default"];
+  }
+});
 Object.defineProperty(exports, "IconBiotechSharp", {
   enumerable: true,
   get: function get() {
@@ -106,6 +124,12 @@ Object.defineProperty(exports, "IconBlock", {
     return _Block["default"];
   }
 });
+Object.defineProperty(exports, "IconBloodtypeOutlined", {
+  enumerable: true,
+  get: function get() {
+    return _BloodtypeOutlined["default"];
+  }
+});
 Object.defineProperty(exports, "IconBorderColor", {
   enumerable: true,
   get: function get() {
@@ -424,12 +448,24 @@ Object.defineProperty(exports, "IconGridView", {
     return _GridViewRounded["default"];
   }
 });
+Object.defineProperty(exports, "IconHeadphones", {
+  enumerable: true,
+  get: function get() {
+    return _Headphones["default"];
+  }
+});
 Object.defineProperty(exports, "IconHeadset", {
   enumerable: true,
   get: function get() {
     return _Headset["default"];
   }
 });
+Object.defineProperty(exports, "IconHearing", {
+  enumerable: true,
+  get: function get() {
+    return _Hearing["default"];
+  }
+});
 Object.defineProperty(exports, "IconHelp", {
   enumerable: true,
   get: function get() {
@@ -466,6 +502,12 @@ Object.defineProperty(exports, "IconHourglassFull", {
     return _HourglassFull["default"];
   }
 });
+Object.defineProperty(exports, "IconImageOutlined", {
+  enumerable: true,
+  get: function get() {
+    return _ImageOutlined["default"];
+  }
+});
 Object.defineProperty(exports, "IconImportantDevices", {
   enumerable: true,
   get: function get() {
@@ -562,6 +604,12 @@ Object.defineProperty(exports, "IconLockOutlined", {
     return _LockOutlined["default"];
   }
 });
+Object.defineProperty(exports, "IconMedicalServicesOutlined", {
+  enumerable: true,
+  get: function get() {
+    return _MedicalServicesOutlined["default"];
+  }
+});
 Object.defineProperty(exports, "IconMenu", {
   enumerable: true,
   get: function get() {
@@ -706,6 +754,12 @@ Object.defineProperty(exports, "IconRemoveCircleOutline", {
     return _RemoveCircleOutline["default"];
   }
 });
+Object.defineProperty(exports, "IconRemoveRedEyeOutlined", {
+  enumerable: true,
+  get: function get() {
+    return _RemoveRedEyeOutlined["default"];
+  }
+});
 Object.defineProperty(exports, "IconRepeat", {
   enumerable: true,
   get: function get() {
@@ -772,6 +826,12 @@ Object.defineProperty(exports, "IconSchedule", {
     return _Schedule["default"];
   }
 });
+Object.defineProperty(exports, "IconScienceOutlined", {
+  enumerable: true,
+  get: function get() {
+    return _ScienceOutlined["default"];
+  }
+});
 Object.defineProperty(exports, "IconSearch", {
   enumerable: true,
   get: function get() {
@@ -892,6 +952,12 @@ Object.defineProperty(exports, "IconUpdate", {
     return _Update["default"];
   }
 });
+Object.defineProperty(exports, "IconVerifiedOutlined", {
+  enumerable: true,
+  get: function get() {
+    return _VerifiedOutlined["default"];
+  }
+});
 Object.defineProperty(exports, "IconVisibility", {
   enumerable: true,
   get: function get() {
@@ -904,6 +970,12 @@ Object.defineProperty(exports, "IconVisibilityOff", {
     return _VisibilityOff["default"];
   }
 });
+Object.defineProperty(exports, "IconVisibilityOutlined", {
+  enumerable: true,
+  get: function get() {
+    return _VisibilityOutlined["default"];
+  }
+});
 Object.defineProperty(exports, "IconVote", {
   enumerable: true,
   get: function get() {
@@ -934,6 +1006,12 @@ Object.defineProperty(exports, "IconWaterDrop", {
     return _WaterDrop["default"];
   }
 });
+Object.defineProperty(exports, "IconWaterDropOutlined", {
+  enumerable: true,
+  get: function get() {
+    return _WaterDropOutlined["default"];
+  }
+});
 Object.defineProperty(exports, "IconWebhook", {
   enumerable: true,
   get: function get() {
@@ -950,19 +1028,23 @@ var _Accessible = _interopRequireDefault(require("@mui/icons-material/Accessible
 var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
 var _AccountCircle = _interopRequireDefault(require("@mui/icons-material/AccountCircle"));
 var _AddCircleOutline = _interopRequireDefault(require("@mui/icons-material/AddCircleOutline"));
+var _Air = _interopRequireDefault(require("@mui/icons-material/Air"));
 var _AllInbox = _interopRequireDefault(require("@mui/icons-material/AllInbox"));
 var _ArrowBack = _interopRequireDefault(require("@mui/icons-material/ArrowBack"));
 var _ArrowBackIos = _interopRequireDefault(require("@mui/icons-material/ArrowBackIos"));
 var _Assignment = _interopRequireDefault(require("@mui/icons-material/Assignment"));
 var _AssignmentInd = _interopRequireDefault(require("@mui/icons-material/AssignmentInd"));
 var _Audiotrack = _interopRequireDefault(require("@mui/icons-material/Audiotrack"));
+var _AutoAwesome = _interopRequireDefault(require("@mui/icons-material/AutoAwesome"));
 var _ArrowDownward = _interopRequireDefault(require("@mui/icons-material/ArrowDownward"));
 var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
 var _ArrowUpward = _interopRequireDefault(require("@mui/icons-material/ArrowUpward"));
 var _BackHand = _interopRequireDefault(require("@mui/icons-material/BackHand"));
 var _Ballot = _interopRequireDefault(require("@mui/icons-material/Ballot"));
+var _BiotechOutlined = _interopRequireDefault(require("@mui/icons-material/BiotechOutlined"));
 var _BiotechSharp = _interopRequireDefault(require("@mui/icons-material/BiotechSharp"));
 var _Block = _interopRequireDefault(require("@mui/icons-material/Block"));
+var _BloodtypeOutlined = _interopRequireDefault(require("@mui/icons-material/BloodtypeOutlined"));
 var _BorderColor = _interopRequireDefault(require("@mui/icons-material/BorderColor"));
 var _Build = _interopRequireDefault(require("@mui/icons-material/Build"));
 var _Business = _interopRequireDefault(require("@mui/icons-material/Business"));
@@ -1016,7 +1098,9 @@ var _FormatListBulleted = _interopRequireDefault(require("@mui/icons-material/Fo
 var _ForumOutlined = _interopRequireDefault(require("@mui/icons-material/ForumOutlined"));
 var _FullscreenRounded = _interopRequireDefault(require("@mui/icons-material/FullscreenRounded"));
 var _GridViewRounded = _interopRequireDefault(require("@mui/icons-material/GridViewRounded"));
+var _Headphones = _interopRequireDefault(require("@mui/icons-material/Headphones"));
 var _Headset = _interopRequireDefault(require("@mui/icons-material/Headset"));
+var _Hearing = _interopRequireDefault(require("@mui/icons-material/Hearing"));
 var _Help = _interopRequireDefault(require("@mui/icons-material/Help"));
 var _HelpOutline = _interopRequireDefault(require("@mui/icons-material/HelpOutline"));
 var _History = _interopRequireDefault(require("@mui/icons-material/History"));
@@ -1024,6 +1108,7 @@ var _Home = _interopRequireDefault(require("@mui/icons-material/Home"));
 var _HomeWorkOutlined = _interopRequireDefault(require("@mui/icons-material/HomeWorkOutlined"));
 var _HourglassFull = _interopRequireDefault(require("@mui/icons-material/HourglassFull"));
 var _HowToVote = _interopRequireDefault(require("@mui/icons-material/HowToVote"));
+var _ImageOutlined = _interopRequireDefault(require("@mui/icons-material/ImageOutlined"));
 var _ImportantDevices = _interopRequireDefault(require("@mui/icons-material/ImportantDevices"));
 var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
 var _InfoOutlined = _interopRequireDefault(require("@mui/icons-material/InfoOutlined"));
@@ -1040,6 +1125,7 @@ var _Lock = _interopRequireDefault(require("@mui/icons-material/Lock"));
 var _LockOpen = _interopRequireDefault(require("@mui/icons-material/LockOpen"));
 var _LockOutlined = _interopRequireDefault(require("@mui/icons-material/LockOutlined"));
 var _LocalHospital = _interopRequireDefault(require("@mui/icons-material/LocalHospital"));
+var _MedicalServicesOutlined = _interopRequireDefault(require("@mui/icons-material/MedicalServicesOutlined"));
 var _Menu = _interopRequireDefault(require("@mui/icons-material/Menu"));
 var _MonitorHeart = _interopRequireDefault(require("@mui/icons-material/MonitorHeart"));
 var _MoreHoriz = _interopRequireDefault(require("@mui/icons-material/MoreHoriz"));
@@ -1064,6 +1150,7 @@ var _Print = _interopRequireDefault(require("@mui/icons-material/Print"));
 var _PriorityHigh = _interopRequireDefault(require("@mui/icons-material/PriorityHigh"));
 var _RecentActors = _interopRequireDefault(require("@mui/icons-material/RecentActors"));
 var _RemoveCircleOutline = _interopRequireDefault(require("@mui/icons-material/RemoveCircleOutline"));
+var _RemoveRedEyeOutlined = _interopRequireDefault(require("@mui/icons-material/RemoveRedEyeOutlined"));
 var _Repeat = _interopRequireDefault(require("@mui/icons-material/Repeat"));
 var _Replay = _interopRequireDefault(require("@mui/icons-material/Replay"));
 var _Report = _interopRequireDefault(require("@mui/icons-material/Report"));
@@ -1075,6 +1162,7 @@ var _RoomOutlined = _interopRequireDefault(require("@mui/icons-material/RoomOutl
 var _Save = _interopRequireDefault(require("@mui/icons-material/Save"));
 var _SaveAlt = _interopRequireDefault(require("@mui/icons-material/SaveAlt"));
 var _Schedule = _interopRequireDefault(require("@mui/icons-material/Schedule"));
+var _ScienceOutlined = _interopRequireDefault(require("@mui/icons-material/ScienceOutlined"));
 var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
 var _SentimentNeutral = _interopRequireDefault(require("@mui/icons-material/SentimentNeutral"));
 var _SentimentSatisfied = _interopRequireDefault(require("@mui/icons-material/SentimentSatisfied"));
@@ -1095,11 +1183,14 @@ var _Timeline = _interopRequireDefault(require("@mui/icons-material/Timeline"));
 var _Today = _interopRequireDefault(require("@mui/icons-material/Today"));
 var _TokenRounded = _interopRequireDefault(require("@mui/icons-material/TokenRounded"));
 var _Update = _interopRequireDefault(require("@mui/icons-material/Update"));
+var _VerifiedOutlined = _interopRequireDefault(require("@mui/icons-material/VerifiedOutlined"));
 var _Visibility = _interopRequireDefault(require("@mui/icons-material/Visibility"));
 var _VisibilityOff = _interopRequireDefault(require("@mui/icons-material/VisibilityOff"));
+var _VisibilityOutlined = _interopRequireDefault(require("@mui/icons-material/VisibilityOutlined"));
 var _VpnKey = _interopRequireDefault(require("@mui/icons-material/VpnKey"));
 var _Warning = _interopRequireDefault(require("@mui/icons-material/Warning"));
 var _WarningAmberOutlined = _interopRequireDefault(require("@mui/icons-material/WarningAmberOutlined"));
 var _WaterDrop = _interopRequireDefault(require("@mui/icons-material/WaterDrop"));
+var _WaterDropOutlined = _interopRequireDefault(require("@mui/icons-material/WaterDropOutlined"));
 var _Webhook = _interopRequireDefault(require("@mui/icons-material/Webhook"));
 var _WifiOff = _interopRequireDefault(require("@mui/icons-material/WifiOff"));

package/index.d.ts

@@ -13,6 +13,7 @@ export { default as FabV2 } from './core/data-display/fab-v2';
 export { default as Line } from './core/data-display/line';
 export { default as List } from './core/data-display/list';
 export { default as ListItem } from './core/data-display/list-item';
+export { default as ListItemDark } from './core/data-display/list-item-dark';
 export { default as MenuItem } from './core/data-display/menu-item';
 export { default as PasswordVisibility } from './core/data-display/password-visibility';
 export { default as Table } from './core/data-display/table';
@@ -54,6 +55,7 @@ export { default as Breadcrumbs } from './core/navigation/breadcrumbs';
 export { default as Drawer } from './core/navigation/drawer';
 export { default as Menu } from './core/navigation/menu';
 export { default as Sidebar } from './core/navigation/sidebar';
+export { default as SidebarNew } from './core/navigation/sidebar-new';
 export { default as Stepper } from './core/navigation/stepper';
 export { default as Tab } from './core/navigation/tab';
 export { default as Tabs } from './core/navigation/tabs';

package/index.js

@@ -17,6 +17,7 @@ var _exportNames = {
   Line: true,
   List: true,
   ListItem: true,
+  ListItemDark: true,
   MenuItem: true,
   PasswordVisibility: true,
   Table: true,
@@ -58,6 +59,7 @@ var _exportNames = {
   Drawer: true,
   Menu: true,
   Sidebar: true,
+  SidebarNew: true,
   Stepper: true,
   Tab: true,
   Tabs: true,
@@ -244,6 +246,12 @@ Object.defineProperty(exports, "ListItem", {
     return _listItem["default"];
   }
 });
+Object.defineProperty(exports, "ListItemDark", {
+  enumerable: true,
+  get: function get() {
+    return _listItemDark["default"];
+  }
+});
 Object.defineProperty(exports, "Loading", {
   enumerable: true,
   get: function get() {
@@ -328,6 +336,12 @@ Object.defineProperty(exports, "Sidebar", {
     return _sidebar["default"];
   }
 });
+Object.defineProperty(exports, "SidebarNew", {
+  enumerable: true,
+  get: function get() {
+    return _sidebarNew["default"];
+  }
+});
 Object.defineProperty(exports, "Skeleton", {
   enumerable: true,
   get: function get() {
@@ -502,6 +516,7 @@ var _fabV = _interopRequireDefault(require("./core/data-display/fab-v2"));
 var _line = _interopRequireDefault(require("./core/data-display/line"));
 var _list = _interopRequireDefault(require("./core/data-display/list"));
 var _listItem = _interopRequireDefault(require("./core/data-display/list-item"));
+var _listItemDark = _interopRequireDefault(require("./core/data-display/list-item-dark"));
 var _menuItem = _interopRequireDefault(require("./core/data-display/menu-item"));
 var _passwordVisibility = _interopRequireDefault(require("./core/data-display/password-visibility"));
 var _table = _interopRequireDefault(require("./core/data-display/table"));
@@ -543,6 +558,7 @@ var _breadcrumbs = _interopRequireDefault(require("./core/navigation/breadcrumbs
 var _drawer = _interopRequireDefault(require("./core/navigation/drawer"));
 var _menu = _interopRequireDefault(require("./core/navigation/menu"));
 var _sidebar = _interopRequireDefault(require("./core/navigation/sidebar"));
+var _sidebarNew = _interopRequireDefault(require("./core/navigation/sidebar-new"));
 var _stepper = _interopRequireDefault(require("./core/navigation/stepper"));
 var _tab = _interopRequireDefault(require("./core/navigation/tab"));
 var _tabs = _interopRequireDefault(require("./core/navigation/tabs"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.39.13",
+    "version": "0.39.15",
     "author": "NG",
     "license": "MIT",
     "main": "dist/index.js",