@comet/admin 9.0.0-beta.3 → 9.0.0-beta.5

package/lib/common/buttons/__stories__/Button.stories.js

@@ -0,0 +1,445 @@
+import { Add, ArrowRight, Favorite, Wrench } from "@comet/admin-icons";
+import { Box, Chip, Stack } from "@mui/material";
+import { Button } from "../Button";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var config = {
+  component: Button,
+  title: "components/common/buttons/Button"
+};
+export default config;
+export var Default = {
+  parameters: {
+    layout: "fullscreen"
+  },
+  args: {
+    variant: "primary",
+    responsive: false,
+    disabled: false,
+    startIcon: true,
+    endIcon: false
+  },
+  argTypes: {
+    variant: {
+      name: "Variant",
+      control: "select",
+      options: ["primary", "secondary", "outlined", "destructive", "success", "textLight", "textDark"]
+    },
+    responsive: {
+      name: "Responsive",
+      control: "boolean"
+    },
+    disabled: {
+      name: "Disabled",
+      control: "boolean"
+    },
+    startIcon: {
+      name: "Start Icon",
+      control: "boolean"
+    },
+    endIcon: {
+      name: "End Icon",
+      control: "boolean"
+    }
+  },
+  render: function render(_ref) {
+    var startIcon = _ref.startIcon,
+      endIcon = _ref.endIcon,
+      disabled = _ref.disabled,
+      variant = _ref.variant,
+      responsive = _ref.responsive;
+    var showDarkBackground = variant === "textLight";
+    return /*#__PURE__*/_jsx(Box, {
+      py: 10,
+      px: 8,
+      bgcolor: showDarkBackground ? "#333" : "transparent",
+      children: /*#__PURE__*/_jsx(Button, {
+        onClick: function onClick() {
+          alert("Button clicked");
+        },
+        startIcon: startIcon ? /*#__PURE__*/_jsx(Wrench, {}) : undefined,
+        endIcon: endIcon ? /*#__PURE__*/_jsx(Favorite, {}) : undefined,
+        disabled: disabled,
+        variant: variant,
+        responsive: responsive,
+        children: "This is a button"
+      })
+    });
+  }
+};
+export var AllVariants = {
+  render: function render() {
+    return /*#__PURE__*/_jsxs(Stack, {
+      spacing: 10,
+      children: [/*#__PURE__*/_jsxs(Stack, {
+        direction: "row",
+        alignItems: "center",
+        spacing: 8,
+        children: [/*#__PURE__*/_jsx(Button, {
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          startIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          endIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          endIcon: /*#__PURE__*/_jsx(Chip, {
+            label: "5"
+          }),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          startIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          endIcon: /*#__PURE__*/_jsx(Chip, {
+            label: "5"
+          }),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          endIcon: /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(ArrowRight, {}), /*#__PURE__*/_jsx(Chip, {
+              label: "5"
+            })]
+          }),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          children: /*#__PURE__*/_jsx(ArrowRight, {})
+        }), /*#__PURE__*/_jsx(Button, {
+          endIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          disabled: true,
+          children: "Button"
+        })]
+      }), /*#__PURE__*/_jsxs(Stack, {
+        direction: "row",
+        alignItems: "center",
+        spacing: 8,
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          startIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          endIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          endIcon: /*#__PURE__*/_jsx(Chip, {
+            label: "5"
+          }),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          startIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          endIcon: /*#__PURE__*/_jsx(Chip, {
+            label: "5"
+          }),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          endIcon: /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(ArrowRight, {}), /*#__PURE__*/_jsx(Chip, {
+              label: "5"
+            })]
+          }),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          children: /*#__PURE__*/_jsx(ArrowRight, {})
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          endIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          disabled: true,
+          children: "Button"
+        })]
+      }), /*#__PURE__*/_jsxs(Stack, {
+        direction: "row",
+        alignItems: "center",
+        spacing: 8,
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "outlined",
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "outlined",
+          startIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "outlined",
+          endIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "outlined",
+          endIcon: /*#__PURE__*/_jsx(Chip, {
+            label: "5"
+          }),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "outlined",
+          startIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          endIcon: /*#__PURE__*/_jsx(Chip, {
+            label: "5"
+          }),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "outlined",
+          endIcon: /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(ArrowRight, {}), /*#__PURE__*/_jsx(Chip, {
+              label: "5"
+            })]
+          }),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "outlined",
+          children: /*#__PURE__*/_jsx(ArrowRight, {})
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "outlined",
+          endIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          disabled: true,
+          children: "Button"
+        })]
+      }), /*#__PURE__*/_jsxs(Stack, {
+        direction: "row",
+        alignItems: "center",
+        spacing: 8,
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "destructive",
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "destructive",
+          startIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "destructive",
+          endIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "destructive",
+          endIcon: /*#__PURE__*/_jsx(Chip, {
+            label: "5"
+          }),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "destructive",
+          startIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          endIcon: /*#__PURE__*/_jsx(Chip, {
+            label: "5"
+          }),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "destructive",
+          endIcon: /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(ArrowRight, {}), /*#__PURE__*/_jsx(Chip, {
+              label: "5"
+            })]
+          }),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "destructive",
+          children: /*#__PURE__*/_jsx(ArrowRight, {})
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "destructive",
+          endIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          disabled: true,
+          children: "Button"
+        })]
+      }), /*#__PURE__*/_jsxs(Stack, {
+        direction: "row",
+        alignItems: "center",
+        spacing: 8,
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "success",
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "success",
+          startIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "success",
+          endIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "success",
+          endIcon: /*#__PURE__*/_jsx(Chip, {
+            label: "5"
+          }),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "success",
+          startIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          endIcon: /*#__PURE__*/_jsx(Chip, {
+            label: "5"
+          }),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "success",
+          endIcon: /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(ArrowRight, {}), /*#__PURE__*/_jsx(Chip, {
+              label: "5"
+            })]
+          }),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "success",
+          children: /*#__PURE__*/_jsx(ArrowRight, {})
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "success",
+          endIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          disabled: true,
+          children: "Button"
+        })]
+      }), /*#__PURE__*/_jsxs(Stack, {
+        direction: "row",
+        alignItems: "center",
+        spacing: 8,
+        paddingTop: 8,
+        paddingBottom: 8,
+        sx: {
+          backgroundColor: function backgroundColor(theme) {
+            return theme.palette.grey[800];
+          }
+        },
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "textLight",
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "textLight",
+          startIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "textLight",
+          endIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "textLight",
+          endIcon: /*#__PURE__*/_jsx(Chip, {
+            label: "5"
+          }),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "textLight",
+          startIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          endIcon: /*#__PURE__*/_jsx(Chip, {
+            label: "5"
+          }),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "textLight",
+          endIcon: /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(ArrowRight, {}), /*#__PURE__*/_jsx(Chip, {
+              label: "5"
+            })]
+          }),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "textLight",
+          children: /*#__PURE__*/_jsx(ArrowRight, {})
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "textLight",
+          endIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          disabled: true,
+          children: "Button"
+        })]
+      }), /*#__PURE__*/_jsxs(Stack, {
+        direction: "row",
+        alignItems: "center",
+        spacing: 8,
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "textDark",
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "textDark",
+          startIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "textDark",
+          endIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "textDark",
+          endIcon: /*#__PURE__*/_jsx(Chip, {
+            label: "5"
+          }),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "textDark",
+          startIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          endIcon: /*#__PURE__*/_jsx(Chip, {
+            label: "5"
+          }),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "textDark",
+          endIcon: /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(ArrowRight, {}), /*#__PURE__*/_jsx(Chip, {
+              label: "5"
+            })]
+          }),
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "textDark",
+          children: /*#__PURE__*/_jsx(ArrowRight, {})
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "textDark",
+          endIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+          disabled: true,
+          children: "Button"
+        })]
+      })]
+    });
+  }
+};
+export var Responsive = {
+  args: {
+    startIcon: true,
+    endIcon: false,
+    mobileIcon: "auto",
+    mobileBreakpoint: "sm",
+    disabled: false
+  },
+  argTypes: {
+    startIcon: {
+      name: "Start Icon",
+      control: "boolean"
+    },
+    endIcon: {
+      name: "End Icon",
+      control: "boolean"
+    },
+    mobileIcon: {
+      name: "Mobile Icon",
+      control: "select",
+      options: ["auto", "startIcon", "endIcon", "custom"]
+    },
+    mobileBreakpoint: {
+      name: "Mobile Breakpoint",
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "xl"]
+    },
+    disabled: {
+      name: "Disabled",
+      control: "boolean"
+    }
+  },
+  render: function render(_ref2) {
+    var startIcon = _ref2.startIcon,
+      endIcon = _ref2.endIcon,
+      mobileIcon = _ref2.mobileIcon,
+      mobileBreakpoint = _ref2.mobileBreakpoint,
+      disabled = _ref2.disabled;
+    var customMobileIcon = /*#__PURE__*/_jsx(Favorite, {});
+    return /*#__PURE__*/_jsx(Stack, {
+      direction: "row",
+      alignItems: "center",
+      spacing: 2,
+      children: /*#__PURE__*/_jsx(Button, {
+        responsive: true,
+        startIcon: startIcon ? /*#__PURE__*/_jsx(Wrench, {}) : undefined,
+        endIcon: endIcon ? /*#__PURE__*/_jsx(Add, {}) : undefined,
+        mobileIcon: mobileIcon === "custom" ? customMobileIcon : mobileIcon,
+        mobileBreakpoint: mobileBreakpoint,
+        disabled: disabled,
+        children: "This is a responsive button"
+      })
+    });
+  }
+};

package/lib/common/buttons/clearinput/ClearInputButton.js

@@ -23,7 +23,7 @@ var Root = createComponentSlot(ButtonBase)({
   slotName: "root"
 })(function (_ref) {
   var theme = _ref.theme;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        height: 100%;\n        width: 40px;\n        color: ", ";\n\n        ", ":last-child & {\n            margin-right: ", ";\n        }\n\n        ", ":first-child & {\n            margin-left: ", ";\n        }\n\n        &:disabled {\n            color: ", ";\n        }\n    "])), theme.palette.action.active, ".".concat(inputAdornmentClasses.positionEnd), theme.spacing(-2), ".".concat(inputAdornmentClasses.positionStart), theme.spacing(-2), theme.palette.action.disabled);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        height: 100%;\n        width: 40px;\n        color: ", ";\n\n        ", ":last-child & {\n            margin-right: ", ";\n        }\n\n        ", ":first-of-type & {\n            margin-left: ", ";\n        }\n\n        &:disabled {\n            color: ", ";\n        }\n    "])), theme.palette.action.active, ".".concat(inputAdornmentClasses.positionEnd), theme.spacing(-2), ".".concat(inputAdornmentClasses.positionStart), theme.spacing(-2), theme.palette.action.disabled);
 });
 
 /**

package/lib/common/buttons/delete/__stories__/DeleteButton.stories.js

@@ -1,7 +1,7 @@
 import { DeleteButton } from "../DeleteButton";
 var config = {
   component: DeleteButton,
-  title: "common/Buttons/DeleteButton"
+  title: "components/common/buttons/delete/DeleteButton"
 };
 export default config;
 export var DeleteButtonStory = {};

package/lib/common/toolbar/__stories__/DataGridToolbar.stories.js

@@ -0,0 +1,76 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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) { _defineProperty(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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Button, DataGridToolbar, FillSpace, GridColumnsButton, GridFilterButton, GridToolbarQuickFilter, StackLink, useDataGridRemote, usePersistentColumnState } from "@comet/admin";
+import { Add as AddIcon } from "@comet/admin-icons";
+import { DataGrid as DataGridCommunity } from "@mui/x-data-grid";
+import { DataGridPro } from "@mui/x-data-grid-pro";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var data = [{
+  id: "1f30a6a0-5b9d-4b25-8307-9e8b4a4d2b1c",
+  firstname: "Emily",
+  lastname: "Smith"
+}, {
+  id: "28b9bdf3-5646-4a22-9449-74112db67b5f",
+  firstname: "Daniel",
+  lastname: "Johnson"
+}, {
+  id: "e60900ec-3c69-4e67-8d78-83a10c7573d3",
+  firstname: "Sophia",
+  lastname: "Williams"
+}];
+var gridOptions = ["Community", "Pro"];
+export default {
+  title: "components/toolbar/DataGridToolbar",
+  argTypes: {
+    gridVersion: {
+      name: "Data Grid Version",
+      control: "select",
+      options: gridOptions
+    }
+  },
+  args: {
+    gridVersion: gridOptions[0]
+  }
+};
+export var _DataGridToolbar = {
+  render: function render(_ref) {
+    var gridVersion = _ref.gridVersion;
+    var dataGridProps = _objectSpread(_objectSpread({}, useDataGridRemote()), usePersistentColumnState("FooBar"));
+    var columns = [{
+      field: "firstname",
+      headerName: "First Name",
+      width: 150
+    }, {
+      field: "lastname",
+      headerName: "Last Name",
+      width: 150
+    }];
+    var ToolbarSlot = function ToolbarSlot() {
+      return /*#__PURE__*/_jsxs(DataGridToolbar, {
+        children: [/*#__PURE__*/_jsx(GridToolbarQuickFilter, {}), /*#__PURE__*/_jsx(GridFilterButton, {}), /*#__PURE__*/_jsx(GridColumnsButton, {}), /*#__PURE__*/_jsx(FillSpace, {}), /*#__PURE__*/_jsx(Button, {
+          responsive: true,
+          startIcon: /*#__PURE__*/_jsx(AddIcon, {}),
+          component: StackLink,
+          pageName: "add",
+          payload: "add",
+          children: "Add person"
+        })]
+      });
+    };
+    var DataGrid = gridVersion === "Community" ? DataGridCommunity : DataGridPro;
+    return /*#__PURE__*/_jsx(DataGrid, _objectSpread(_objectSpread({}, dataGridProps), {}, {
+      autoHeight: true,
+      columns: columns,
+      rows: data,
+      slots: {
+        toolbar: ToolbarSlot
+      },
+      showToolbar: true
+    }));
+  },
+  name: "DataGrid Toolbar"
+};

package/lib/common/toolbar/__stories__/Toolbar.stories.js

@@ -0,0 +1,82 @@
+import { Button, FillSpace, HelpDialogButton, Stack, StackLink, StackPage, StackSwitch, Toolbar, ToolbarActions, ToolbarAutomaticTitleItem, ToolbarBackButton, ToolbarItem } from "@comet/admin";
+import { ArrowRight, Save } from "@comet/admin-icons";
+import { Box, Chip, Typography } from "@mui/material";
+import { FormattedMessage } from "react-intl";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function StackWrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_jsx(Stack, {
+    topLevelTitle: "Stack Root",
+    children: /*#__PURE__*/_jsxs(StackSwitch, {
+      initialPage: "root",
+      children: [/*#__PURE__*/_jsxs(StackPage, {
+        name: "root",
+        children: [children, /*#__PURE__*/_jsx(StackLink, {
+          pageName: "detail",
+          payload: "x",
+          children: "Go to detail page"
+        })]
+      }), /*#__PURE__*/_jsx(StackPage, {
+        name: "detail",
+        title: " Stack Detail",
+        children: children
+      })]
+    })
+  });
+}
+function Story() {
+  return /*#__PURE__*/_jsxs(Toolbar, {
+    children: [/*#__PURE__*/_jsx(ToolbarBackButton, {}), /*#__PURE__*/_jsx(ToolbarAutomaticTitleItem, {}), /*#__PURE__*/_jsx(ToolbarItem, {
+      children: /*#__PURE__*/_jsx(Chip, {
+        label: "Chip text"
+      })
+    }), /*#__PURE__*/_jsx(FillSpace, {}), /*#__PURE__*/_jsxs(ToolbarActions, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        responsive: true,
+        startIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+        variant: "outlined",
+        children: "Secondary button"
+      }), /*#__PURE__*/_jsx(Button, {
+        responsive: true,
+        startIcon: /*#__PURE__*/_jsx(Save, {}),
+        children: "Primary button"
+      })]
+    })]
+  });
+}
+export default {
+  title: "components/toolbar/Toolbar"
+};
+export var _Toolbar = function _Toolbar() {
+  return /*#__PURE__*/_jsx(StackWrapper, {
+    children: /*#__PURE__*/_jsx(Story, {})
+  });
+};
+export var ToolbarWithHelp = function ToolbarWithHelp() {
+  return /*#__PURE__*/_jsx(Toolbar, {
+    scopeIndicator: /*#__PURE__*/_jsx(Chip, {
+      label: "Global"
+    }),
+    topBarActions: /*#__PURE__*/_jsx(HelpDialogButton, {
+      dialogTitle: /*#__PURE__*/_jsx(FormattedMessage, {
+        id: "story.toolbar.helpDialog.title",
+        defaultMessage: "Help"
+      }),
+      dialogDescription: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Box, {
+          sx: {
+            width: 150,
+            height: 150
+          },
+          component: "img",
+          src: "https://picsum.photos/id/35/300/300"
+        }), /*#__PURE__*/_jsx(Typography, {
+          children: "This is some helpful text inside the help dialog."
+        })]
+      })
+    }),
+    children: /*#__PURE__*/_jsx(ToolbarItem, {
+      children: "Some title"
+    })
+  });
+};