flipper-ui 0.39.13 → 0.39.14

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { MouseEvent } from 'react';
+export interface ListItemDarkProps {
+    id?: string;
+    name?: string;
+    className?: string;
+    icon?: 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, className, icon, title, selected, disabled, dense, expanded, onClick, ...otherProps }: ListItemDarkProps) => React.JSX.Element;
+export default ListItemDark;

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

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+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 _styles = require("./styles");
+var _excluded = ["id", "name", "className", "icon", "title", "selected", "disabled", "dense", "expanded", "onClick"];
+var ListItemDark = function ListItemDark(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    className = _ref.className,
+    icon = _ref.icon,
+    title = _ref.title,
+    selected = _ref.selected,
+    disabled = _ref.disabled,
+    dense = _ref.dense,
+    _ref$expanded = _ref.expanded,
+    expanded = _ref$expanded === void 0 ? true : _ref$expanded,
+    onClick = _ref.onClick,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    disablePadding: true,
+    id: id,
+    className: className
+  }, /*#__PURE__*/_react["default"].createElement(_styles.ItemButton, {
+    selected: selected,
+    disabled: disabled,
+    dense: dense,
+    expanded: expanded,
+    "data-name": name,
+    "data-testid": otherProps['data-testid'],
+    onClick: onClick
+  }, icon && /*#__PURE__*/_react["default"].createElement(_styles.IconSlot, {
+    dense: dense
+  }, icon), title && /*#__PURE__*/_react["default"].createElement(_Typography2["default"], {
+    variant: "body2",
+    fontWeight: selected ? 500 : 400,
+    sx: {
+      flex: '1 0 0',
+      minWidth: 0,
+      opacity: expanded ? 1 : 0,
+      transition: 'opacity 195ms cubic-bezier(0.4, 0, 0.6, 1)',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }, title)));
+};
+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,17 @@
+interface IRootProps {
+    selected?: boolean;
+    dense?: boolean;
+    expanded?: boolean;
+}
+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,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ItemButton = exports.IconSlot = 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;
+var _theme$colors = _theme.theme.colors,
+  neutral = _theme$colors.neutral,
+  orange = _theme$colors.orange;
+var ItemButton = exports.ItemButton = (0, _styled["default"])(_ListItemButton["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        gap: 12px;\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    &&: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.dense ? '6px 12px' : '10px 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(_templateObject2 || (_templateObject2 = (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,23 @@
+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;
+    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, ...otherProps }: SidebarNewProps) => React.JSX.Element;
+export default SidebarNew;

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

@@ -0,0 +1,146 @@
+"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"];
+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,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    favoritesListExpanded = _useState2[0],
+    setFavoritesListExpanded = _useState2[1];
+  var hasFavorites = Boolean(favorites);
+  var showFavoritesArea = hasFavorites && expanded;
+  var showHeader = Boolean(logo) || hasFavorites || showButton;
+  var handleFavoritesListToggle = function handleFavoritesListToggle() {
+    return setFavoritesListExpanded(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,
+    "in": favoritesOpen,
+    timeout: "auto"
+  }, /*#__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.MainArea, 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 MainArea: 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.SidebarNewStorie = exports.MainArea = 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    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;\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 MainArea = exports.MainArea = _styled["default"].div(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex: 1 0 0;\n    flex-direction: column;\n    min-height: 0;\n    width: 100%;\n    padding: 8px 8px 16px;\n    overflow: auto;\n    box-sizing: border-box;\n"])));
+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

@@ -8,6 +8,7 @@ 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';

package/icons/mui/index.js

@@ -82,6 +82,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() {
@@ -956,6 +962,7 @@ var _ArrowBackIos = _interopRequireDefault(require("@mui/icons-material/ArrowBac
 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"));

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.14",
     "author": "NG",
     "license": "MIT",
     "main": "dist/index.js",