@superdispatch/ui-lab 0.42.0 → 0.44.0

package/dist-node/index.js

@@ -1102,7 +1102,108 @@ var FileListItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") FileListItem.displayName = "FileListItem";
 
-var _excluded$6 = ["color", "target", "rel"],
+var FlagListHeader = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "FlagList__FlagListHeader",
+  componentId: "SD__sc-te7hyy-0"
+})(["display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:12px 16px;background:", ";border:1px solid ", ";border-bottom:none;border-radius:4px 4px 0 0;", "{flex-direction:column;align-items:flex-start;}"], ui.ColorDynamic.Silver200, ui.ColorDynamic.Silver400, _ref => {
+  var {
+    theme
+  } = _ref;
+  return theme.breakpoints.down('xs');
+});
+var FlagListContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "FlagList__FlagListContainer",
+  componentId: "SD__sc-te7hyy-1"
+})(["display:flex;flex-direction:column;"]);
+var FlagList = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
+  var {
+    isStandalone = false,
+    title,
+    endAction,
+    children
+  } = _ref2;
+  return /*#__PURE__*/jsxRuntime.jsxs(FlagListContainer, {
+    "data-variant": isStandalone ? 'standalone' : 'with-header',
+    ref: ref,
+    children: [(title || endAction) && /*#__PURE__*/jsxRuntime.jsxs(FlagListHeader, {
+      children: [title, endAction]
+    }), children]
+  });
+});
+if (process.env.NODE_ENV !== "production") FlagList.displayName = "FlagList";
+
+var _excluded$6 = ["variant", "showHelpIcon", "endAction", "children"];
+var IconContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "FlagListItem__IconContainer",
+  componentId: "SD__sc-o5bqru-0"
+})(["padding:4px;border-radius:50%;background:", ";color:", ";transition:", ";& .MuiSvgIcon-root{font-size:16px;}"], ui.ColorDynamic.Silver200, ui.ColorDynamic.Blue300, _ref => {
+  var {
+    theme
+  } = _ref;
+  return theme.transitions.create(['color', 'background-color']);
+});
+var Content = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "FlagListItem__Content",
+  componentId: "SD__sc-o5bqru-1"
+})(["display:flex;align-items:center;gap:8px;"]);
+var EndActions = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "FlagListItem__EndActions",
+  componentId: "SD__sc-o5bqru-2"
+})(["display:flex;align-items:center;margin-left:auto;gap:8px;& > svg{font-size:16px;color:", ";}", "{margin-left:0;width:100%;}"], ui.ColorDynamic.Dark500, _ref2 => {
+  var {
+    theme
+  } = _ref2;
+  return theme.breakpoints.down('xs');
+});
+var BannerListItemDanger = /*#__PURE__*/styled.css(["& ", "{background:", ";color:", ";}&:hover{background:", ";}"], IconContainer, ui.ColorDynamic.Red50, ui.ColorDynamic.Red300, ui.ColorDynamic.Red50);
+var BannerListItemStandalone = /*#__PURE__*/styled.css(["background:", ";"], ui.ColorDynamic.Silver200);
+var BannerListContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "FlagListItem__BannerListContainer",
+  componentId: "SD__sc-o5bqru-3"
+})(["display:inline-flex;align-items:center;padding:8px 16px 8px 12px;border:1px solid ", ";background:", ";cursor:default;transition:", ";& + &{border-top:none;}&:last-child{border-radius:0 0 4px 4px;}&:hover{background:", ";& ", "{background:", ";}& ", " > svg{color:", ";}}[data-variant='standalone'] &:not(:hover){", "}", " ", "{flex-direction:column;align-items:flex-start;}"], ui.ColorDynamic.Silver400, ui.ColorDynamic.White, _ref3 => {
+  var {
+    theme
+  } = _ref3;
+  return theme.transitions.create(['color', 'background-color']);
+}, ui.ColorDynamic.Blue50, IconContainer, ui.ColorDynamic.White, EndActions, _ref4 => {
+  var {
+    $variant
+  } = _ref4;
+  return $variant === 'danger' ? ui.ColorDynamic.Red300 : ui.ColorDynamic.Blue300;
+}, BannerListItemStandalone, _ref5 => {
+  var {
+    $variant
+  } = _ref5;
+  return $variant === 'danger' ? BannerListItemDanger : null;
+}, _ref6 => {
+  var {
+    theme
+  } = _ref6;
+  return theme.breakpoints.down('xs');
+});
+var FlagListItem = /*#__PURE__*/react.forwardRef((_ref7, ref) => {
+  var {
+      variant = 'primary',
+      showHelpIcon,
+      endAction,
+      children
+    } = _ref7,
+    rest = _objectWithoutProperties(_ref7, _excluded$6);
+  return /*#__PURE__*/jsxRuntime.jsxs(BannerListContainer, _objectSpread(_objectSpread({}, rest), {}, {
+    ref: ref,
+    $variant: variant,
+    children: [/*#__PURE__*/jsxRuntime.jsxs(Content, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(IconContainer, {
+        children: variant === 'danger' ? /*#__PURE__*/jsxRuntime.jsx(icons.Error, {}) : variant === 'warning' ? /*#__PURE__*/jsxRuntime.jsx(icons.Warning, {}) : /*#__PURE__*/jsxRuntime.jsx(icons.Flag, {})
+      }), children]
+    }), /*#__PURE__*/jsxRuntime.jsxs(EndActions, {
+      children: [endAction, showHelpIcon && /*#__PURE__*/jsxRuntime.jsx(icons.Help, {})]
+    })]
+  }));
+});
+if (process.env.NODE_ENV !== "production") FlagListItem.displayName = "FlagListItem";
+
+var _excluded$7 = ["color", "target", "rel"],
   _excluded2$2 = ["children", "linkComponent"];
 var DefaultLinkComponent = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   var {
@@ -1110,7 +1211,7 @@ var DefaultLinkComponent = /*#__PURE__*/react.forwardRef((_ref, ref) => {
       target = '_blank',
       rel = 'noreferrer noopener'
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$6);
+    props = _objectWithoutProperties(_ref, _excluded$7);
   return /*#__PURE__*/jsxRuntime.jsx(core.Link, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     rel: rel,
@@ -1156,7 +1257,7 @@ function useNavbarContext() {
   return react.useContext(NavbarContext);
 }
 
-var _excluded$7 = ["active", "hasBadge"];
+var _excluded$8 = ["active", "hasBadge"];
 var StyledBottomNavigation = /*#__PURE__*/styled__default(core.BottomNavigation).withConfig({
   displayName: "NavbarBottomBar__StyledBottomNavigation",
   componentId: "SD__sc-9z6v3k-0"
@@ -1200,7 +1301,7 @@ function NavbarBottomBar(_ref) {
           active,
           hasBadge
         } = _ref2,
-        item = _objectWithoutProperties(_ref2, _excluded$7);
+        item = _objectWithoutProperties(_ref2, _excluded$8);
       return /*#__PURE__*/react.createElement(StyledBottomNavigationAction, _objectSpread(_objectSpread({}, item), {}, {
         key: item.value,
         icon: hasBadge ? /*#__PURE__*/jsxRuntime.jsxs(IconWrapper, {
@@ -1417,7 +1518,7 @@ function NavbarMenuItem(_ref5) {
     })
   });
 }
-var Content = /*#__PURE__*/styled__default.div.withConfig({
+var Content$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NavbarList__Content",
   componentId: "SD__sc-19zrmxc-5"
 })(["height:100%;min-height:50px;overflow-y:auto;overflow-x:hidden;&[aria-expanded='false']{", ",", "{display:none;}}&::-webkit-scrollbar{width:10px;height:10px;}&::-webkit-scrollbar-track{background-color:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:100vw;margin-bottom:100px;}"], NavbarBadge, NavbarLabel, ui.ColorDark.Silver500);
@@ -1455,7 +1556,7 @@ function NavbarList(_ref6) {
         },
         children: isMenuExpanded ? /*#__PURE__*/jsxRuntime.jsx(icons.MenuOpen, {}) : /*#__PURE__*/jsxRuntime.jsx(icons.Menu, {})
       })]
-    }), /*#__PURE__*/jsxRuntime.jsx(Content, {
+    }), /*#__PURE__*/jsxRuntime.jsx(Content$1, {
       "aria-expanded": isSidebarOpened,
       children: filteredItems.map(item => {
         var index = filteredItems.indexOf(item);
@@ -1560,7 +1661,7 @@ function Navbar(_ref) {
   });
 }
 
-var _excluded$8 = ["title", "subtitle", "children"];
+var _excluded$9 = ["title", "subtitle", "children"];
 var StyledTypography = /*#__PURE__*/styled__default(core.Typography).withConfig({
   displayName: "NavbarAvatar__StyledTypography",
   componentId: "SD__sc-19q2zd0-0"
@@ -1571,7 +1672,7 @@ function NavbarAvatar(_ref) {
       subtitle,
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$8);
+    props = _objectWithoutProperties(_ref, _excluded$9);
   var {
     isNavbarExpanded
   } = useNavbarContext();
@@ -1781,7 +1882,7 @@ var SidebarContainer = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SidebarContainer.displayName = "SidebarContainer";
 
-var _excluded$9 = ["onClick", "children"];
+var _excluded$a = ["onClick", "children"];
 function SidebarBackButton(_ref) {
   var {
       onClick: _onClick,
@@ -1789,7 +1890,7 @@ function SidebarBackButton(_ref) {
         fontSize: "small"
       })
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$9);
+    props = _objectWithoutProperties(_ref, _excluded$a);
   var isCollapsed = ui.useCollapseBreakpoint('sm');
   var {
     openSidebar
@@ -2169,6 +2270,8 @@ exports.DescriptionLineItem = DescriptionLineItem;
 exports.DottedLine = DottedLine;
 exports.FileDropZone = FileDropZone;
 exports.FileListItem = FileListItem;
+exports.FlagList = FlagList;
+exports.FlagListItem = FlagListItem;
 exports.LinkedText = LinkedText;
 exports.MultilineText = MultilineText;
 exports.Navbar = Navbar;