@superdispatch/ui-lab 0.44.0 → 0.44.1

package/dist-node/index.js

@@ -1145,11 +1145,15 @@ var IconContainer = /*#__PURE__*/styled__default.div.withConfig({
 var Content = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "FlagListItem__Content",
   componentId: "SD__sc-o5bqru-1"
-})(["display:flex;align-items:center;gap:8px;"]);
+})(["display:flex;align-items:center;width:100%;gap:8px;"]);
+var HelpIcon = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "FlagListItem__HelpIcon",
+  componentId: "SD__sc-o5bqru-2"
+})(["margin-left:auto;& > svg{font-size:16px;color:", ";}"], ui.ColorDynamic.Dark500);
 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 => {
+  componentId: "SD__sc-o5bqru-3"
+})(["display:flex;align-items:center;margin-left:auto;gap:8px;", "{margin-left:0;width:100%;}"], _ref2 => {
   var {
     theme
   } = _ref2;
@@ -1159,13 +1163,13 @@ var BannerListItemDanger = /*#__PURE__*/styled.css(["& ", "{background:", ";colo
 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 => {
+  componentId: "SD__sc-o5bqru-4"
+})(["display:flex;align-items:center;gap:8px;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 => {
+}, ui.ColorDynamic.Blue50, IconContainer, ui.ColorDynamic.White, HelpIcon, _ref4 => {
   var {
     $variant
   } = _ref4;
@@ -1195,9 +1199,11 @@ var FlagListItem = /*#__PURE__*/react.forwardRef((_ref7, ref) => {
     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, {})]
+      }), children, /*#__PURE__*/jsxRuntime.jsx(HelpIcon, {
+        children: showHelpIcon && /*#__PURE__*/jsxRuntime.jsx(icons.Help, {})
+      })]
+    }), endAction && /*#__PURE__*/jsxRuntime.jsx(EndActions, {
+      children: endAction
     })]
   }));
 });