@canonical/react-components 2.7.9 → 2.8.1

package/dist/components/SidePanel/SidePanel.d.ts

@@ -0,0 +1,55 @@
+import { FC, PropsWithChildren, ReactNode } from "react";
+import { type ContentProps } from "./common/Content";
+import { type FooterProps } from "./common/Footer";
+import { type HeaderProps } from "./common/Header";
+import { type HeaderControlsProps } from "./common/HeaderControls";
+import { type HeaderTitleProps } from "./common/HeaderTitle";
+import { type StickyProps } from "./common/Sticky";
+import "./SidePanel.scss";
+/**
+ * The props for the SidePanelComponent component.
+ */
+export type Props = {
+    /**
+     * The content of the side panel.
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes to apply.
+     */
+    className?: string;
+    /**
+     * Whether the side panel has an error. This will show an error message in the panel instead of rendering the children.
+     */
+    hasError?: boolean;
+    /**
+     * Whether the side panel is currently loading. This will show a spinner in the panel instead of rendering the children.
+     */
+    loading?: boolean;
+    /**
+     * Whether the side panel is an overlay with background or should allow seeing the content below it.
+     */
+    overlay?: boolean;
+    /**
+     * The ID of the parent element to which the side panel will be appended
+     */
+    parentId?: string;
+    /**
+     * Whether the side panel should be pinned. When pinned, it will remain visible alongside the main content.
+     */
+    pinned?: boolean;
+    /**
+     * Width of the side panel, available options are wide and narrow and the default.
+     */
+    width?: "wide" | "narrow" | "";
+};
+type SidePanelComponents = FC<Props> & {
+    Header: FC<PropsWithChildren & HeaderProps>;
+    HeaderTitle: FC<PropsWithChildren & HeaderTitleProps>;
+    HeaderControls: FC<PropsWithChildren & HeaderControlsProps>;
+    Sticky: FC<PropsWithChildren & StickyProps>;
+    Content: FC<PropsWithChildren & ContentProps>;
+    Footer: FC<PropsWithChildren & FooterProps>;
+};
+declare const SidePanel: SidePanelComponents;
+export default SidePanel;

package/dist/components/SidePanel/SidePanel.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactDom = require("react-dom");
+var _Content = _interopRequireDefault(require("./common/Content"));
+var _Footer = _interopRequireDefault(require("./common/Footer"));
+var _Header = _interopRequireDefault(require("./common/Header"));
+var _HeaderControls = _interopRequireDefault(require("./common/HeaderControls"));
+var _HeaderTitle = _interopRequireDefault(require("./common/HeaderTitle"));
+var _Sticky = _interopRequireDefault(require("./common/Sticky"));
+var _AppAside = _interopRequireDefault(require("../ApplicationLayout/AppAside"));
+var _Spinner = _interopRequireDefault(require("../Spinner"));
+require("./SidePanel.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * The props for the SidePanelComponent component.
+ */
+
+/**
+This is a [React](https://reactjs.org/) component for the Vanilla application layout [Side Panel](https://vanillaframework.io/docs/layouts/application#panels).
+
+The sidepanel component should be used to show additional information relating to the main content on the page. It is using a composable structure with building blocks:
+
+* **SidePanel.Header:** Defines the header of the side panel, which can include a title and controls.
+
+* **SidePanel.HeaderTitle:** To show the title of the side panel as heading.
+
+* **SidePanel.HeaderControls:** To show controls in the header, such as buttons or icons for actions like closing the panel.
+
+* **SidePanel.Sticky:** Can be wrapped around the header or footer to make them sticky when scrolling.
+
+* **SidePanel.Content:** To show the main content of the side panel.
+
+* **SidePanel.Footer:** To show additional information or actions at the bottom of the side panel.
+
+## Example
+
+Usage of the composable structure:
+
+```jsx
+<SidePanel className="u-no-padding--top u-no-padding--bottom">
+  <SidePanel.Sticky>
+    <SidePanel.Header>
+      <SidePanel.HeaderTitle>Edit panel</SidePanel.HeaderTitle>
+    </SidePanel.Header>
+  </SidePanel.Sticky>
+  <SidePanel.Content className="u-no-padding">
+    <p>Here be dragons!</p>
+  </SidePanel.Content>
+  <SidePanel.Sticky position="bottom">
+    <SidePanel.Footer className="u-align--right">
+      <Button appearance="base">Cancel</Button>
+      <ActionButton appearance="positive">Save changes</ActionButton>
+    </SidePanel.Footer>
+  </SidePanel.Sticky>
+</SidePanel>
+```
+*/
+const SidePanelComponent = _ref => {
+  let {
+    children,
+    className,
+    hasError = false,
+    loading = false,
+    overlay,
+    pinned,
+    width = "",
+    parentId = "l-application"
+  } = _ref;
+  const container = document.getElementById(parentId) || document.body;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(_AppAside.default, {
+    className: (0, _classnames.default)("side-panel", className, {
+      "is-overlay": overlay
+    }),
+    "aria-label": "Side panel",
+    pinned: pinned,
+    narrow: width === "narrow",
+    wide: width === "wide"
+  }, loading ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "loading"
+  }, /*#__PURE__*/_react.default.createElement(_Spinner.default, null)) : hasError ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "error"
+  }, "Loading failed") : children), container));
+};
+const SidePanel = SidePanelComponent;
+SidePanel.Header = _Header.default;
+SidePanel.HeaderTitle = _HeaderTitle.default;
+SidePanel.HeaderControls = _HeaderControls.default;
+SidePanel.Sticky = _Sticky.default;
+SidePanel.Content = _Content.default;
+SidePanel.Footer = _Footer.default;
+var _default = exports.default = SidePanel;

package/dist/components/SidePanel/SidePanel.scss

@@ -0,0 +1,45 @@
+@import "vanilla-framework";
+
+.side-panel.is-overlay {
+  position: absolute;
+  right: 0;
+  z-index: 103 !important;
+}
+
+.side-panel {
+  background-color: $colors--theme--background-default;
+  height: 100dvh;
+  padding: 0 $sph--x-large;
+  padding-bottom: $spv--medium;
+  padding-top: $spv--small;
+
+  .error,
+  .loading {
+    padding-top: $spv--medium;
+  }
+
+  .p-panel__header {
+    padding: 0;
+  }
+
+  .panel-footer {
+    .rule {
+      margin-bottom: $spv--medium;
+    }
+  }
+
+  .sticky-wrapper {
+    background: $colors--theme--background-default;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  .sticky-wrapper--top {
+    top: 0;
+  }
+
+  .sticky-wrapper--bottom {
+    bottom: 0;
+  }
+}

package/dist/components/SidePanel/SidePanel.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SidePanel from "./SidePanel";
+declare const meta: Meta<typeof SidePanel>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Pinned: Story;
+export declare const Loading: Story;
+export declare const Error: Story;
+export declare const Narrow: Story;
+export declare const Wide: Story;

package/dist/components/SidePanel/SidePanel.stories.js

@@ -0,0 +1,176 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Wide = exports.Pinned = exports.Narrow = exports.Loading = exports.Error = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _SidePanel = _interopRequireDefault(require("./SidePanel"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Application = _interopRequireDefault(require("../ApplicationLayout/Application"));
+var _AppMain = _interopRequireDefault(require("../ApplicationLayout/AppMain"));
+var _index = require("../../index");
+var _Icon = _interopRequireDefault(require("../Icon"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const meta = {
+  component: _SidePanel.default,
+  tags: ["autodocs"],
+  decorators: [Story => {
+    const ref = (0, _react.useRef)(null);
+    (0, _react.useEffect)(() => {
+      const el = ref.current;
+      if (el) {
+        var _el$parentElement, _wrapper$parentElemen;
+        const wrapper = el === null || el === void 0 || (_el$parentElement = el.parentElement) === null || _el$parentElement === void 0 || (_el$parentElement = _el$parentElement.parentElement) === null || _el$parentElement === void 0 ? void 0 : _el$parentElement.parentElement;
+        const parent = wrapper === null || wrapper === void 0 || (_wrapper$parentElemen = wrapper.parentElement) === null || _wrapper$parentElemen === void 0 || (_wrapper$parentElemen = _wrapper$parentElemen.parentElement) === null || _wrapper$parentElemen === void 0 ? void 0 : _wrapper$parentElemen.parentElement;
+        if (wrapper) {
+          wrapper.style.setProperty("border", "0", "important");
+        }
+        if (parent) {
+          parent.style.margin = "0";
+          parent.style.padding = "0";
+        }
+      }
+    }, []);
+    document.body.style.padding = "0";
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref
+    }, /*#__PURE__*/_react.default.createElement(Story, null));
+  }]
+};
+var _default = exports.default = meta;
+const StoryExample = args => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+
+  // Multiple stories get rendered on the docs page, ensure the ids are not colliding
+  const id = (0, _react.useId)();
+  const parentId = args.parentId + id;
+  const openPanel = () => {
+    setIsOpen(true);
+  };
+  const closePanel = () => {
+    setIsOpen(false);
+  };
+
+  // Delay opening the panel, so the l-application container is ready to receive it
+  (0, _react.useEffect)(() => void setTimeout(openPanel, 100), []);
+  return /*#__PURE__*/_react.default.createElement(_Application.default, {
+    id: parentId
+  }, /*#__PURE__*/_react.default.createElement(_AppMain.default, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: openPanel,
+    style: {
+      margin: "1rem"
+    }
+  }, "Open side panel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: closePanel,
+    style: {
+      margin: "1rem"
+    }
+  }, "Close side panel")), isOpen && /*#__PURE__*/_react.default.createElement(_SidePanel.default, {
+    overlay: args.overlay,
+    loading: args.loading,
+    hasError: args.hasError,
+    parentId: parentId,
+    pinned: args.pinned,
+    width: args.width,
+    className: "u-no-padding--top u-no-padding--bottom"
+  }, /*#__PURE__*/_react.default.createElement(_SidePanel.default.Sticky, null, /*#__PURE__*/_react.default.createElement(_SidePanel.default.Header, null, /*#__PURE__*/_react.default.createElement(_SidePanel.default.HeaderTitle, null, "Edit panel"), /*#__PURE__*/_react.default.createElement(_SidePanel.default.HeaderControls, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    appearance: "base",
+    className: "u-no-margin--bottom",
+    hasIcon: true,
+    onClick: closePanel,
+    "aria-label": "Close"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "close"
+  }))))), /*#__PURE__*/_react.default.createElement(_SidePanel.default.Content, {
+    className: "u-no-padding"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Here be dragons!"), /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius mi eu pretium vulputate. Nunc commodo sit amet nibh quis rhoncus. Aliquam rhoncus porttitor semper. Aenean faucibus consectetur neque in sodales. Sed cursus mauris id ex sollicitudin sodales. Quisque molestie rutrum odio, ornare pharetra ligula. Pellentesque ornare tristique feugiat. In a augue neque. Aenean eget arcu quis lacus tempus posuere in sit amet dui. Suspendisse faucibus sapien nisl, nec laoreet sem convallis nec."), /*#__PURE__*/_react.default.createElement("p", null, "Vestibulum sed placerat lorem. Nam luctus ex id nisi luctus, id vestibulum sem bibendum. Vivamus turpis sem, pellentesque fermentum malesuada eu, faucibus porta libero. Duis eget venenatis odio. Etiam sed volutpat magna, non tempus erat. Nunc id tortor ac quam consectetur dapibus ac ut tellus. Pellentesque ut tellus venenatis elit vehicula condimentum eget quis lorem. Ut non consectetur est, a fringilla ipsum. Nunc vitae ligula ipsum. Etiam suscipit, libero ut lacinia viverra, nunc urna consequat ex, vel eleifend eros mauris vitae ipsum. Pellentesque sed dictum augue. Ut sit amet ullamcorper mauris. Nunc congue orci mollis purus sodales facilisis ac ut arcu. Maecenas feugiat sapien ac massa mollis sodales. Donec vitae turpis eu nisi laoreet pulvinar quis at nisl. Integer volutpat, metus eget elementum dictum, lacus sapien viverra felis, consequat fermentum nisl mi ac dui."), /*#__PURE__*/_react.default.createElement("p", null, "Nullam nulla turpis, dignissim vel dapibus ut, volutpat ac dui. Donec vel elementum lacus. Mauris maximus nec felis at faucibus. Nunc faucibus gravida velit, id blandit lectus tincidunt ac. Vestibulum orci diam, elementum in congue eu, placerat id risus. Sed tempor tempus tellus, vitae iaculis turpis fringilla nec. Phasellus imperdiet facilisis velit, sit amet lobortis odio dignissim ut."), /*#__PURE__*/_react.default.createElement("p", null, "Nam placerat urna vitae ligula hendrerit, ac tincidunt lorem maximus. Mauris eu odio nisi. Nulla facilisi. Sed egestas elit sed velit rutrum, sit amet bibendum metus hendrerit. Pellentesque luctus placerat tellus, eu bibendum justo. Cras eget leo ac ex volutpat gravida. Duis vitae mollis ante. Duis a congue nunc. Aenean aliquet, sapien quis tincidunt tincidunt, odio eros consectetur lacus, vel finibus mauris tortor id velit. Donec tincidunt vitae purus eu interdum. Pellentesque scelerisque dui viverra ex ullamcorper volutpat. Vestibulum lacinia vitae arcu volutpat porta. Etiam et cursus nulla, id aliquet felis. Nam ultricies, urna id mattis pretium, velit erat viverra elit, eu maximus diam eros id nisi."), /*#__PURE__*/_react.default.createElement("p", null, "Nullam eget nisl lectus. Pellentesque eu mauris ut tortor malesuada sagittis. Cras dictum cursus est non ultricies. Duis mollis non neque at commodo. Nunc feugiat justo et consequat aliquam. Ut consectetur libero eu erat feugiat finibus. Duis varius convallis quam eu sagittis. Maecenas ac est arcu. Suspendisse at enim eget nibh ultricies dictum. Etiam aliquet tellus vel felis malesuada laoreet.")), /*#__PURE__*/_react.default.createElement(_SidePanel.default.Sticky, {
+    position: "bottom"
+  }, /*#__PURE__*/_react.default.createElement(_SidePanel.default.Footer, {
+    className: "u-align--right"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    appearance: "base",
+    onClick: closePanel
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_index.ActionButton, {
+    appearance: "positive"
+  }, "Save changes")))));
+};
+const Default = exports.Default = {
+  args: {
+    className: "",
+    hasError: false,
+    parentId: "l-application-default",
+    pinned: false,
+    loading: false,
+    overlay: true,
+    width: ""
+  },
+  render: StoryExample
+};
+const Pinned = exports.Pinned = {
+  args: {
+    className: "",
+    hasError: false,
+    parentId: "l-application-pinned",
+    pinned: true,
+    loading: false,
+    overlay: false,
+    width: ""
+  },
+  render: StoryExample,
+  parameters: {
+    docs: {
+      disable: true
+    }
+  }
+};
+const Loading = exports.Loading = {
+  args: {
+    className: "",
+    hasError: false,
+    parentId: "l-application-loading",
+    pinned: false,
+    loading: true,
+    overlay: true,
+    width: ""
+  },
+  render: StoryExample
+};
+const Error = exports.Error = {
+  args: {
+    className: "",
+    hasError: true,
+    parentId: "l-application-error",
+    pinned: false,
+    loading: false,
+    overlay: true,
+    width: ""
+  },
+  render: StoryExample
+};
+const Narrow = exports.Narrow = {
+  args: {
+    className: "",
+    hasError: false,
+    parentId: "l-application-narrow",
+    pinned: false,
+    loading: false,
+    overlay: true,
+    width: "narrow"
+  },
+  render: StoryExample
+};
+const Wide = exports.Wide = {
+  args: {
+    className: "",
+    hasError: false,
+    parentId: "l-application-wide",
+    pinned: false,
+    loading: false,
+    overlay: true,
+    width: "wide"
+  },
+  render: StoryExample
+};

package/dist/components/SidePanel/SidePanel.test.d.ts

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

package/dist/components/SidePanel/common/Content.d.ts

@@ -0,0 +1,7 @@
+import type { FC, PropsWithChildren } from "react";
+export interface ContentProps {
+    className?: string;
+    key?: string;
+}
+declare const Content: FC<PropsWithChildren & ContentProps>;
+export default Content;

package/dist/components/SidePanel/common/Content.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Content = _ref => {
+  let {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("p-panel__content", className)
+  }, children);
+};
+var _default = exports.default = Content;

package/dist/components/SidePanel/common/Footer.d.ts

@@ -0,0 +1,7 @@
+import type { FC, PropsWithChildren } from "react";
+export interface FooterProps {
+    className?: string;
+    key?: string;
+}
+declare const Footer: FC<PropsWithChildren & FooterProps>;
+export default Footer;

package/dist/components/SidePanel/common/Footer.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Footer = _ref => {
+  let {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("panel-footer", className),
+    id: "panel-footer"
+  }, /*#__PURE__*/_react.default.createElement("hr", {
+    className: "rule"
+  }), children);
+};
+var _default = exports.default = Footer;

package/dist/components/SidePanel/common/Header.d.ts

@@ -0,0 +1,7 @@
+import type { FC, PropsWithChildren } from "react";
+export interface HeaderProps {
+    className?: string;
+    key?: string;
+}
+declare const Header: FC<PropsWithChildren & HeaderProps>;
+export default Header;

package/dist/components/SidePanel/common/Header.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Header = _ref => {
+  let {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("p-panel__header", className)
+  }, children);
+};
+var _default = exports.default = Header;

package/dist/components/SidePanel/common/HeaderControls.d.ts

@@ -0,0 +1,7 @@
+import type { FC, PropsWithChildren } from "react";
+export interface HeaderControlsProps {
+    className?: string;
+    key?: string;
+}
+declare const HeaderControls: FC<PropsWithChildren & HeaderControlsProps>;
+export default HeaderControls;

package/dist/components/SidePanel/common/HeaderControls.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const HeaderControls = _ref => {
+  let {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("p-panel__controls", className)
+  }, children);
+};
+var _default = exports.default = HeaderControls;

package/dist/components/SidePanel/common/HeaderTitle.d.ts

@@ -0,0 +1,6 @@
+import type { FC, PropsWithChildren } from "react";
+export interface HeaderTitleProps {
+    className?: string;
+}
+declare const HeaderTitle: FC<PropsWithChildren & HeaderTitleProps>;
+export default HeaderTitle;

package/dist/components/SidePanel/common/HeaderTitle.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const HeaderTitle = _ref => {
+  let {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("h2", {
+    className: (0, _classnames.default)("p-panel__title", className)
+  }, children);
+};
+var _default = exports.default = HeaderTitle;

package/dist/components/SidePanel/common/Sticky.d.ts

@@ -0,0 +1,8 @@
+import type { FC, PropsWithChildren } from "react";
+export interface StickyProps {
+    className?: string;
+    position?: "top" | "bottom";
+    key?: string;
+}
+declare const Sticky: FC<PropsWithChildren & StickyProps>;
+export default Sticky;

package/dist/components/SidePanel/common/Sticky.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Sticky = _ref => {
+  let {
+    children,
+    className,
+    position = "top"
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("sticky-wrapper", className, {
+      "sticky-wrapper--top": position === "top",
+      "sticky-wrapper--bottom": position === "bottom"
+    })
+  }, children);
+};
+var _default = exports.default = Sticky;

package/dist/components/SidePanel/index.d.ts

@@ -0,0 +1 @@
+export { default, type Props as SidePanelProps } from "./SidePanel";

package/dist/components/SidePanel/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _SidePanel.default;
+  }
+});
+var _SidePanel = _interopRequireDefault(require("./SidePanel"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/esm/components/SidePanel/SidePanel.d.ts

@@ -0,0 +1,55 @@
+import { FC, PropsWithChildren, ReactNode } from "react";
+import { type ContentProps } from "./common/Content";
+import { type FooterProps } from "./common/Footer";
+import { type HeaderProps } from "./common/Header";
+import { type HeaderControlsProps } from "./common/HeaderControls";
+import { type HeaderTitleProps } from "./common/HeaderTitle";
+import { type StickyProps } from "./common/Sticky";
+import "./SidePanel.scss";
+/**
+ * The props for the SidePanelComponent component.
+ */
+export type Props = {
+    /**
+     * The content of the side panel.
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes to apply.
+     */
+    className?: string;
+    /**
+     * Whether the side panel has an error. This will show an error message in the panel instead of rendering the children.
+     */
+    hasError?: boolean;
+    /**
+     * Whether the side panel is currently loading. This will show a spinner in the panel instead of rendering the children.
+     */
+    loading?: boolean;
+    /**
+     * Whether the side panel is an overlay with background or should allow seeing the content below it.
+     */
+    overlay?: boolean;
+    /**
+     * The ID of the parent element to which the side panel will be appended
+     */
+    parentId?: string;
+    /**
+     * Whether the side panel should be pinned. When pinned, it will remain visible alongside the main content.
+     */
+    pinned?: boolean;
+    /**
+     * Width of the side panel, available options are wide and narrow and the default.
+     */
+    width?: "wide" | "narrow" | "";
+};
+type SidePanelComponents = FC<Props> & {
+    Header: FC<PropsWithChildren & HeaderProps>;
+    HeaderTitle: FC<PropsWithChildren & HeaderTitleProps>;
+    HeaderControls: FC<PropsWithChildren & HeaderControlsProps>;
+    Sticky: FC<PropsWithChildren & StickyProps>;
+    Content: FC<PropsWithChildren & ContentProps>;
+    Footer: FC<PropsWithChildren & FooterProps>;
+};
+declare const SidePanel: SidePanelComponents;
+export default SidePanel;

package/dist/esm/components/SidePanel/SidePanel.js

@@ -0,0 +1,91 @@
+import React from "react";
+import classnames from "classnames";
+import { createPortal } from "react-dom";
+import Content from "./common/Content";
+import Footer from "./common/Footer";
+import Header from "./common/Header";
+import HeaderControls from "./common/HeaderControls";
+import HeaderTitle from "./common/HeaderTitle";
+import Sticky from "./common/Sticky";
+import AppAside from "../ApplicationLayout/AppAside";
+import Spinner from "../Spinner";
+import "./SidePanel.scss";
+
+/**
+ * The props for the SidePanelComponent component.
+ */
+
+/**
+This is a [React](https://reactjs.org/) component for the Vanilla application layout [Side Panel](https://vanillaframework.io/docs/layouts/application#panels).
+
+The sidepanel component should be used to show additional information relating to the main content on the page. It is using a composable structure with building blocks:
+
+* **SidePanel.Header:** Defines the header of the side panel, which can include a title and controls.
+
+* **SidePanel.HeaderTitle:** To show the title of the side panel as heading.
+
+* **SidePanel.HeaderControls:** To show controls in the header, such as buttons or icons for actions like closing the panel.
+
+* **SidePanel.Sticky:** Can be wrapped around the header or footer to make them sticky when scrolling.
+
+* **SidePanel.Content:** To show the main content of the side panel.
+
+* **SidePanel.Footer:** To show additional information or actions at the bottom of the side panel.
+
+## Example
+
+Usage of the composable structure:
+
+```jsx
+<SidePanel className="u-no-padding--top u-no-padding--bottom">
+  <SidePanel.Sticky>
+    <SidePanel.Header>
+      <SidePanel.HeaderTitle>Edit panel</SidePanel.HeaderTitle>
+    </SidePanel.Header>
+  </SidePanel.Sticky>
+  <SidePanel.Content className="u-no-padding">
+    <p>Here be dragons!</p>
+  </SidePanel.Content>
+  <SidePanel.Sticky position="bottom">
+    <SidePanel.Footer className="u-align--right">
+      <Button appearance="base">Cancel</Button>
+      <ActionButton appearance="positive">Save changes</ActionButton>
+    </SidePanel.Footer>
+  </SidePanel.Sticky>
+</SidePanel>
+```
+*/
+var SidePanelComponent = _ref => {
+  var {
+    children,
+    className,
+    hasError = false,
+    loading = false,
+    overlay,
+    pinned,
+    width = "",
+    parentId = "l-application"
+  } = _ref;
+  var container = document.getElementById(parentId) || document.body;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(AppAside, {
+    className: classnames("side-panel", className, {
+      "is-overlay": overlay
+    }),
+    "aria-label": "Side panel",
+    pinned: pinned,
+    narrow: width === "narrow",
+    wide: width === "wide"
+  }, loading ? /*#__PURE__*/React.createElement("div", {
+    className: "loading"
+  }, /*#__PURE__*/React.createElement(Spinner, null)) : hasError ? /*#__PURE__*/React.createElement("div", {
+    className: "error"
+  }, "Loading failed") : children), container));
+};
+var SidePanel = SidePanelComponent;
+SidePanel.Header = Header;
+SidePanel.HeaderTitle = HeaderTitle;
+SidePanel.HeaderControls = HeaderControls;
+SidePanel.Sticky = Sticky;
+SidePanel.Content = Content;
+SidePanel.Footer = Footer;
+export default SidePanel;

package/dist/esm/components/SidePanel/SidePanel.scss

@@ -0,0 +1,45 @@
+@import "vanilla-framework";
+
+.side-panel.is-overlay {
+  position: absolute;
+  right: 0;
+  z-index: 103 !important;
+}
+
+.side-panel {
+  background-color: $colors--theme--background-default;
+  height: 100dvh;
+  padding: 0 $sph--x-large;
+  padding-bottom: $spv--medium;
+  padding-top: $spv--small;
+
+  .error,
+  .loading {
+    padding-top: $spv--medium;
+  }
+
+  .p-panel__header {
+    padding: 0;
+  }
+
+  .panel-footer {
+    .rule {
+      margin-bottom: $spv--medium;
+    }
+  }
+
+  .sticky-wrapper {
+    background: $colors--theme--background-default;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  .sticky-wrapper--top {
+    top: 0;
+  }
+
+  .sticky-wrapper--bottom {
+    bottom: 0;
+  }
+}

package/dist/esm/components/SidePanel/SidePanel.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SidePanel from "./SidePanel";
+declare const meta: Meta<typeof SidePanel>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Pinned: Story;
+export declare const Loading: Story;
+export declare const Error: Story;
+export declare const Narrow: Story;
+export declare const Wide: Story;

package/dist/esm/components/SidePanel/SidePanel.stories.js

@@ -0,0 +1,167 @@
+import React, { useEffect, useId, useRef, useState } from "react";
+import SidePanel from "./SidePanel";
+import Button from "../Button";
+import Application from "../ApplicationLayout/Application";
+import AppMain from "../ApplicationLayout/AppMain";
+import { ActionButton } from "../../index";
+import Icon from "../Icon";
+var meta = {
+  component: SidePanel,
+  tags: ["autodocs"],
+  decorators: [Story => {
+    var ref = useRef(null);
+    useEffect(() => {
+      var el = ref.current;
+      if (el) {
+        var _el$parentElement, _wrapper$parentElemen;
+        var wrapper = el === null || el === void 0 || (_el$parentElement = el.parentElement) === null || _el$parentElement === void 0 || (_el$parentElement = _el$parentElement.parentElement) === null || _el$parentElement === void 0 ? void 0 : _el$parentElement.parentElement;
+        var parent = wrapper === null || wrapper === void 0 || (_wrapper$parentElemen = wrapper.parentElement) === null || _wrapper$parentElemen === void 0 || (_wrapper$parentElemen = _wrapper$parentElemen.parentElement) === null || _wrapper$parentElemen === void 0 ? void 0 : _wrapper$parentElemen.parentElement;
+        if (wrapper) {
+          wrapper.style.setProperty("border", "0", "important");
+        }
+        if (parent) {
+          parent.style.margin = "0";
+          parent.style.padding = "0";
+        }
+      }
+    }, []);
+    document.body.style.padding = "0";
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, /*#__PURE__*/React.createElement(Story, null));
+  }]
+};
+export default meta;
+var StoryExample = args => {
+  var [isOpen, setIsOpen] = useState(false);
+
+  // Multiple stories get rendered on the docs page, ensure the ids are not colliding
+  var id = useId();
+  var parentId = args.parentId + id;
+  var openPanel = () => {
+    setIsOpen(true);
+  };
+  var closePanel = () => {
+    setIsOpen(false);
+  };
+
+  // Delay opening the panel, so the l-application container is ready to receive it
+  useEffect(() => void setTimeout(openPanel, 100), []);
+  return /*#__PURE__*/React.createElement(Application, {
+    id: parentId
+  }, /*#__PURE__*/React.createElement(AppMain, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: openPanel,
+    style: {
+      margin: "1rem"
+    }
+  }, "Open side panel"), /*#__PURE__*/React.createElement(Button, {
+    onClick: closePanel,
+    style: {
+      margin: "1rem"
+    }
+  }, "Close side panel")), isOpen && /*#__PURE__*/React.createElement(SidePanel, {
+    overlay: args.overlay,
+    loading: args.loading,
+    hasError: args.hasError,
+    parentId: parentId,
+    pinned: args.pinned,
+    width: args.width,
+    className: "u-no-padding--top u-no-padding--bottom"
+  }, /*#__PURE__*/React.createElement(SidePanel.Sticky, null, /*#__PURE__*/React.createElement(SidePanel.Header, null, /*#__PURE__*/React.createElement(SidePanel.HeaderTitle, null, "Edit panel"), /*#__PURE__*/React.createElement(SidePanel.HeaderControls, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "base",
+    className: "u-no-margin--bottom",
+    hasIcon: true,
+    onClick: closePanel,
+    "aria-label": "Close"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "close"
+  }))))), /*#__PURE__*/React.createElement(SidePanel.Content, {
+    className: "u-no-padding"
+  }, /*#__PURE__*/React.createElement("p", null, "Here be dragons!"), /*#__PURE__*/React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius mi eu pretium vulputate. Nunc commodo sit amet nibh quis rhoncus. Aliquam rhoncus porttitor semper. Aenean faucibus consectetur neque in sodales. Sed cursus mauris id ex sollicitudin sodales. Quisque molestie rutrum odio, ornare pharetra ligula. Pellentesque ornare tristique feugiat. In a augue neque. Aenean eget arcu quis lacus tempus posuere in sit amet dui. Suspendisse faucibus sapien nisl, nec laoreet sem convallis nec."), /*#__PURE__*/React.createElement("p", null, "Vestibulum sed placerat lorem. Nam luctus ex id nisi luctus, id vestibulum sem bibendum. Vivamus turpis sem, pellentesque fermentum malesuada eu, faucibus porta libero. Duis eget venenatis odio. Etiam sed volutpat magna, non tempus erat. Nunc id tortor ac quam consectetur dapibus ac ut tellus. Pellentesque ut tellus venenatis elit vehicula condimentum eget quis lorem. Ut non consectetur est, a fringilla ipsum. Nunc vitae ligula ipsum. Etiam suscipit, libero ut lacinia viverra, nunc urna consequat ex, vel eleifend eros mauris vitae ipsum. Pellentesque sed dictum augue. Ut sit amet ullamcorper mauris. Nunc congue orci mollis purus sodales facilisis ac ut arcu. Maecenas feugiat sapien ac massa mollis sodales. Donec vitae turpis eu nisi laoreet pulvinar quis at nisl. Integer volutpat, metus eget elementum dictum, lacus sapien viverra felis, consequat fermentum nisl mi ac dui."), /*#__PURE__*/React.createElement("p", null, "Nullam nulla turpis, dignissim vel dapibus ut, volutpat ac dui. Donec vel elementum lacus. Mauris maximus nec felis at faucibus. Nunc faucibus gravida velit, id blandit lectus tincidunt ac. Vestibulum orci diam, elementum in congue eu, placerat id risus. Sed tempor tempus tellus, vitae iaculis turpis fringilla nec. Phasellus imperdiet facilisis velit, sit amet lobortis odio dignissim ut."), /*#__PURE__*/React.createElement("p", null, "Nam placerat urna vitae ligula hendrerit, ac tincidunt lorem maximus. Mauris eu odio nisi. Nulla facilisi. Sed egestas elit sed velit rutrum, sit amet bibendum metus hendrerit. Pellentesque luctus placerat tellus, eu bibendum justo. Cras eget leo ac ex volutpat gravida. Duis vitae mollis ante. Duis a congue nunc. Aenean aliquet, sapien quis tincidunt tincidunt, odio eros consectetur lacus, vel finibus mauris tortor id velit. Donec tincidunt vitae purus eu interdum. Pellentesque scelerisque dui viverra ex ullamcorper volutpat. Vestibulum lacinia vitae arcu volutpat porta. Etiam et cursus nulla, id aliquet felis. Nam ultricies, urna id mattis pretium, velit erat viverra elit, eu maximus diam eros id nisi."), /*#__PURE__*/React.createElement("p", null, "Nullam eget nisl lectus. Pellentesque eu mauris ut tortor malesuada sagittis. Cras dictum cursus est non ultricies. Duis mollis non neque at commodo. Nunc feugiat justo et consequat aliquam. Ut consectetur libero eu erat feugiat finibus. Duis varius convallis quam eu sagittis. Maecenas ac est arcu. Suspendisse at enim eget nibh ultricies dictum. Etiam aliquet tellus vel felis malesuada laoreet.")), /*#__PURE__*/React.createElement(SidePanel.Sticky, {
+    position: "bottom"
+  }, /*#__PURE__*/React.createElement(SidePanel.Footer, {
+    className: "u-align--right"
+  }, /*#__PURE__*/React.createElement(Button, {
+    appearance: "base",
+    onClick: closePanel
+  }, "Cancel"), /*#__PURE__*/React.createElement(ActionButton, {
+    appearance: "positive"
+  }, "Save changes")))));
+};
+export var Default = {
+  args: {
+    className: "",
+    hasError: false,
+    parentId: "l-application-default",
+    pinned: false,
+    loading: false,
+    overlay: true,
+    width: ""
+  },
+  render: StoryExample
+};
+export var Pinned = {
+  args: {
+    className: "",
+    hasError: false,
+    parentId: "l-application-pinned",
+    pinned: true,
+    loading: false,
+    overlay: false,
+    width: ""
+  },
+  render: StoryExample,
+  parameters: {
+    docs: {
+      disable: true
+    }
+  }
+};
+export var Loading = {
+  args: {
+    className: "",
+    hasError: false,
+    parentId: "l-application-loading",
+    pinned: false,
+    loading: true,
+    overlay: true,
+    width: ""
+  },
+  render: StoryExample
+};
+export var Error = {
+  args: {
+    className: "",
+    hasError: true,
+    parentId: "l-application-error",
+    pinned: false,
+    loading: false,
+    overlay: true,
+    width: ""
+  },
+  render: StoryExample
+};
+export var Narrow = {
+  args: {
+    className: "",
+    hasError: false,
+    parentId: "l-application-narrow",
+    pinned: false,
+    loading: false,
+    overlay: true,
+    width: "narrow"
+  },
+  render: StoryExample
+};
+export var Wide = {
+  args: {
+    className: "",
+    hasError: false,
+    parentId: "l-application-wide",
+    pinned: false,
+    loading: false,
+    overlay: true,
+    width: "wide"
+  },
+  render: StoryExample
+};

package/dist/esm/components/SidePanel/SidePanel.test.d.ts

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

package/dist/esm/components/SidePanel/common/Content.d.ts

@@ -0,0 +1,7 @@
+import type { FC, PropsWithChildren } from "react";
+export interface ContentProps {
+    className?: string;
+    key?: string;
+}
+declare const Content: FC<PropsWithChildren & ContentProps>;
+export default Content;

package/dist/esm/components/SidePanel/common/Content.js

@@ -0,0 +1,12 @@
+import React from "react";
+import classnames from "classnames";
+var Content = _ref => {
+  var {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames("p-panel__content", className)
+  }, children);
+};
+export default Content;

package/dist/esm/components/SidePanel/common/Footer.d.ts

@@ -0,0 +1,7 @@
+import type { FC, PropsWithChildren } from "react";
+export interface FooterProps {
+    className?: string;
+    key?: string;
+}
+declare const Footer: FC<PropsWithChildren & FooterProps>;
+export default Footer;

package/dist/esm/components/SidePanel/common/Footer.js

@@ -0,0 +1,15 @@
+import React from "react";
+import classnames from "classnames";
+var Footer = _ref => {
+  var {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames("panel-footer", className),
+    id: "panel-footer"
+  }, /*#__PURE__*/React.createElement("hr", {
+    className: "rule"
+  }), children);
+};
+export default Footer;

package/dist/esm/components/SidePanel/common/Header.d.ts

@@ -0,0 +1,7 @@
+import type { FC, PropsWithChildren } from "react";
+export interface HeaderProps {
+    className?: string;
+    key?: string;
+}
+declare const Header: FC<PropsWithChildren & HeaderProps>;
+export default Header;

package/dist/esm/components/SidePanel/common/Header.js

@@ -0,0 +1,12 @@
+import React from "react";
+import classnames from "classnames";
+var Header = _ref => {
+  var {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames("p-panel__header", className)
+  }, children);
+};
+export default Header;

package/dist/esm/components/SidePanel/common/HeaderControls.d.ts

@@ -0,0 +1,7 @@
+import type { FC, PropsWithChildren } from "react";
+export interface HeaderControlsProps {
+    className?: string;
+    key?: string;
+}
+declare const HeaderControls: FC<PropsWithChildren & HeaderControlsProps>;
+export default HeaderControls;

package/dist/esm/components/SidePanel/common/HeaderControls.js

@@ -0,0 +1,12 @@
+import React from "react";
+import classnames from "classnames";
+var HeaderControls = _ref => {
+  var {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames("p-panel__controls", className)
+  }, children);
+};
+export default HeaderControls;

package/dist/esm/components/SidePanel/common/HeaderTitle.d.ts

@@ -0,0 +1,6 @@
+import type { FC, PropsWithChildren } from "react";
+export interface HeaderTitleProps {
+    className?: string;
+}
+declare const HeaderTitle: FC<PropsWithChildren & HeaderTitleProps>;
+export default HeaderTitle;

package/dist/esm/components/SidePanel/common/HeaderTitle.js

@@ -0,0 +1,12 @@
+import React from "react";
+import classnames from "classnames";
+var HeaderTitle = _ref => {
+  var {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/React.createElement("h2", {
+    className: classnames("p-panel__title", className)
+  }, children);
+};
+export default HeaderTitle;

package/dist/esm/components/SidePanel/common/Sticky.d.ts

@@ -0,0 +1,8 @@
+import type { FC, PropsWithChildren } from "react";
+export interface StickyProps {
+    className?: string;
+    position?: "top" | "bottom";
+    key?: string;
+}
+declare const Sticky: FC<PropsWithChildren & StickyProps>;
+export default Sticky;

package/dist/esm/components/SidePanel/common/Sticky.js

@@ -0,0 +1,16 @@
+import React from "react";
+import classnames from "classnames";
+var Sticky = _ref => {
+  var {
+    children,
+    className,
+    position = "top"
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames("sticky-wrapper", className, {
+      "sticky-wrapper--top": position === "top",
+      "sticky-wrapper--bottom": position === "bottom"
+    })
+  }, children);
+};
+export default Sticky;

package/dist/esm/components/SidePanel/index.d.ts

@@ -0,0 +1 @@
+export { default, type Props as SidePanelProps } from "./SidePanel";

package/dist/esm/components/SidePanel/index.js

@@ -0,0 +1 @@
+export { default } from "./SidePanel";

package/dist/esm/index.d.ts

@@ -51,6 +51,7 @@ export { default as SideNavigation } from "./components/SideNavigation";
 export { default as SideNavigationItem } from "./components/SideNavigation/SideNavigationItem";
 export { default as SideNavigationLink } from "./components/SideNavigation/SideNavigationLink";
 export { default as SideNavigationText } from "./components/SideNavigation/SideNavigationText";
+export { default as SidePanel } from "./components/SidePanel";
 export { default as SkipLink } from "./components/SkipLink";
 export { default as Slider } from "./components/Slider";
 export { default as Switch } from "./components/Switch";
@@ -120,6 +121,7 @@ export type { SideNavigationProps } from "./components/SideNavigation";
 export type { SideNavigationItemProps } from "./components/SideNavigation/SideNavigationItem";
 export type { SideNavigationLinkProps } from "./components/SideNavigation/SideNavigationLink";
 export type { SideNavigationTextProps } from "./components/SideNavigation/SideNavigationText";
+export type { SidePanelProps } from "./components/SidePanel";
 export type { SkipLinkProps } from "./components/SkipLink";
 export type { SliderProps } from "./components/Slider";
 export type { SpinnerProps } from "./components/Spinner";

package/dist/esm/index.js

@@ -51,6 +51,7 @@ export { default as SideNavigation } from "./components/SideNavigation";
 export { default as SideNavigationItem } from "./components/SideNavigation/SideNavigationItem";
 export { default as SideNavigationLink } from "./components/SideNavigation/SideNavigationLink";
 export { default as SideNavigationText } from "./components/SideNavigation/SideNavigationText";
+export { default as SidePanel } from "./components/SidePanel";
 export { default as SkipLink } from "./components/SkipLink";
 export { default as Slider } from "./components/Slider";
 export { default as Switch } from "./components/Switch";

package/dist/index.d.ts

@@ -51,6 +51,7 @@ export { default as SideNavigation } from "./components/SideNavigation";
 export { default as SideNavigationItem } from "./components/SideNavigation/SideNavigationItem";
 export { default as SideNavigationLink } from "./components/SideNavigation/SideNavigationLink";
 export { default as SideNavigationText } from "./components/SideNavigation/SideNavigationText";
+export { default as SidePanel } from "./components/SidePanel";
 export { default as SkipLink } from "./components/SkipLink";
 export { default as Slider } from "./components/Slider";
 export { default as Switch } from "./components/Switch";
@@ -120,6 +121,7 @@ export type { SideNavigationProps } from "./components/SideNavigation";
 export type { SideNavigationItemProps } from "./components/SideNavigation/SideNavigationItem";
 export type { SideNavigationLinkProps } from "./components/SideNavigation/SideNavigationLink";
 export type { SideNavigationTextProps } from "./components/SideNavigation/SideNavigationText";
+export type { SidePanelProps } from "./components/SidePanel";
 export type { SkipLinkProps } from "./components/SkipLink";
 export type { SliderProps } from "./components/Slider";
 export type { SpinnerProps } from "./components/Spinner";

package/dist/index.js

@@ -70,6 +70,7 @@ var _exportNames = {
   SideNavigationItem: true,
   SideNavigationLink: true,
   SideNavigationText: true,
+  SidePanel: true,
   SkipLink: true,
   Slider: true,
   Switch: true,
@@ -447,6 +448,12 @@ Object.defineProperty(exports, "SideNavigationText", {
     return _SideNavigationText.default;
   }
 });
+Object.defineProperty(exports, "SidePanel", {
+  enumerable: true,
+  get: function () {
+    return _SidePanel.default;
+  }
+});
 Object.defineProperty(exports, "SkipLink", {
   enumerable: true,
   get: function () {
@@ -769,6 +776,7 @@ var _SideNavigation = _interopRequireDefault(require("./components/SideNavigatio
 var _SideNavigationItem = _interopRequireDefault(require("./components/SideNavigation/SideNavigationItem"));
 var _SideNavigationLink = _interopRequireDefault(require("./components/SideNavigation/SideNavigationLink"));
 var _SideNavigationText = _interopRequireDefault(require("./components/SideNavigation/SideNavigationText"));
+var _SidePanel = _interopRequireDefault(require("./components/SidePanel"));
 var _SkipLink = _interopRequireDefault(require("./components/SkipLink"));
 var _Slider = _interopRequireDefault(require("./components/Slider"));
 var _Switch = _interopRequireDefault(require("./components/Switch"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.7.9",
+  "version": "2.8.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {