@canonical/react-components 2.8.0 → 2.9.0

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

@@ -39,9 +39,9 @@ export type Props = {
      */
     pinned?: boolean;
     /**
-     * Whether the side panel should be wide.
+     * Width of the side panel, available options are wide and narrow and the default.
      */
-    wide?: boolean;
+    width?: "wide" | "narrow" | "";
 };
 type SidePanelComponents = FC<Props> & {
     Header: FC<PropsWithChildren & HeaderProps>;

package/dist/components/SidePanel/SidePanel.js

@@ -69,7 +69,7 @@ const SidePanelComponent = _ref => {
     loading = false,
     overlay,
     pinned,
-    wide,
+    width = "",
     parentId = "l-application"
   } = _ref;
   const container = document.getElementById(parentId) || document.body;
@@ -79,8 +79,8 @@ const SidePanelComponent = _ref => {
     }),
     "aria-label": "Side panel",
     pinned: pinned,
-    narrow: !wide,
-    wide: wide
+    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", {

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

@@ -7,4 +7,5 @@ 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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Wide = exports.Pinned = exports.Loading = exports.Error = exports.Default = void 0;
+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"));
@@ -25,7 +25,6 @@ const meta = {
         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;
-        console.log(wrapper);
         if (wrapper) {
           wrapper.style.setProperty("border", "0", "important");
         }
@@ -75,7 +74,7 @@ const StoryExample = args => {
     hasError: args.hasError,
     parentId: parentId,
     pinned: args.pinned,
-    wide: args.wide,
+    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",
@@ -106,7 +105,7 @@ const Default = exports.Default = {
     pinned: false,
     loading: false,
     overlay: true,
-    wide: false
+    width: ""
   },
   render: StoryExample
 };
@@ -118,7 +117,7 @@ const Pinned = exports.Pinned = {
     pinned: true,
     loading: false,
     overlay: false,
-    wide: false
+    width: ""
   },
   render: StoryExample,
   parameters: {
@@ -135,7 +134,7 @@ const Loading = exports.Loading = {
     pinned: false,
     loading: true,
     overlay: true,
-    wide: false
+    width: ""
   },
   render: StoryExample
 };
@@ -147,7 +146,19 @@ const Error = exports.Error = {
     pinned: false,
     loading: false,
     overlay: true,
-    wide: false
+    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
 };
@@ -159,7 +170,7 @@ const Wide = exports.Wide = {
     pinned: false,
     loading: false,
     overlay: true,
-    wide: true
+    width: "wide"
   },
   render: StoryExample
 };

package/dist/components/ThemeSwitcher/ThemeSwitcher.d.ts

@@ -0,0 +1,19 @@
+import type { FC } from "react";
+export declare const loadTheme: () => string;
+export declare const isDarkTheme: (theme: string) => boolean;
+export declare const applyTheme: (theme: string) => void;
+/**
+ * This is a [React](https://reactjs.org/) component for the [Vanilla framework](https://docs.vanillaframework.io).
+ *
+ * The ThemeSwitcher component allows users to switch between different themes: dark, light, and system. It saves the selected theme in local storage and applies it to the document body. You can use it in user settings.
+ *
+ * In your root component, call the exported functions `loadTheme` and `applyTheme`, such as in the example below:
+ * ```
+ * useEffect(() => {
+ *   const theme = loadTheme();
+ *   applyTheme(theme);
+ * }, []);
+ * ```
+ */
+declare const ThemeSwitcher: FC;
+export default ThemeSwitcher;

package/dist/components/ThemeSwitcher/ThemeSwitcher.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loadTheme = exports.isDarkTheme = exports.default = exports.applyTheme = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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 LOCAL_STORAGE_KEY = "theme";
+const THEME_SYSTEM = "system";
+const THEME_DARK = "dark";
+const THEME_LIGHT = "light";
+const loadTheme = () => {
+  const saved = localStorage.getItem(LOCAL_STORAGE_KEY);
+  return saved || THEME_SYSTEM;
+};
+exports.loadTheme = loadTheme;
+const saveTheme = theme => {
+  localStorage.setItem(LOCAL_STORAGE_KEY, theme);
+};
+const isDarkTheme = theme => {
+  if (theme === THEME_SYSTEM) {
+    return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+  return theme === THEME_DARK;
+};
+exports.isDarkTheme = isDarkTheme;
+const applyTheme = theme => {
+  if (isDarkTheme(theme)) {
+    document.body.classList.add("is-dark");
+  } else {
+    document.body.classList.remove("is-dark");
+  }
+};
+
+/**
+ * This is a [React](https://reactjs.org/) component for the [Vanilla framework](https://docs.vanillaframework.io).
+ *
+ * The ThemeSwitcher component allows users to switch between different themes: dark, light, and system. It saves the selected theme in local storage and applies it to the document body. You can use it in user settings.
+ *
+ * In your root component, call the exported functions `loadTheme` and `applyTheme`, such as in the example below:
+ * ```
+ * useEffect(() => {
+ *   const theme = loadTheme();
+ *   applyTheme(theme);
+ * }, []);
+ * ```
+ */
+exports.applyTheme = applyTheme;
+const ThemeSwitcher = () => {
+  const [activeTheme, setActiveTheme] = (0, _react.useState)(loadTheme());
+  const themeButton = theme => {
+    return /*#__PURE__*/_react.default.createElement("button", {
+      className: "p-segmented-control__button",
+      type: "button",
+      "aria-selected": activeTheme === theme ? "true" : "false",
+      onClick: () => {
+        saveTheme(theme);
+        setActiveTheme(theme);
+        applyTheme(theme);
+      }
+    }, theme);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-segmented-control"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-segmented-control__list",
+    "aria-label": "Theme switcher"
+  }, themeButton(THEME_DARK), themeButton(THEME_LIGHT), themeButton(THEME_SYSTEM)));
+};
+var _default = exports.default = ThemeSwitcher;

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ThemeSwitcher from "./ThemeSwitcher";
+declare const meta: Meta<typeof ThemeSwitcher>;
+export default meta;
+type Story = StoryObj<typeof ThemeSwitcher>;
+export declare const Default: Story;

package/dist/components/ThemeSwitcher/ThemeSwitcher.stories.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _ThemeSwitcher = _interopRequireDefault(require("./ThemeSwitcher"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _ThemeSwitcher.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default"
+};

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

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

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

@@ -0,0 +1 @@
+export { default, loadTheme, isDarkTheme, applyTheme } from "./ThemeSwitcher";

package/dist/components/ThemeSwitcher/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "applyTheme", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.applyTheme;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.default;
+  }
+});
+Object.defineProperty(exports, "isDarkTheme", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.isDarkTheme;
+  }
+});
+Object.defineProperty(exports, "loadTheme", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.loadTheme;
+  }
+});
+var _ThemeSwitcher = _interopRequireWildcard(require("./ThemeSwitcher"));
+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; }

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

@@ -39,9 +39,9 @@ export type Props = {
      */
     pinned?: boolean;
     /**
-     * Whether the side panel should be wide.
+     * Width of the side panel, available options are wide and narrow and the default.
      */
-    wide?: boolean;
+    width?: "wide" | "narrow" | "";
 };
 type SidePanelComponents = FC<Props> & {
     Header: FC<PropsWithChildren & HeaderProps>;

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

@@ -63,7 +63,7 @@ var SidePanelComponent = _ref => {
     loading = false,
     overlay,
     pinned,
-    wide,
+    width = "",
     parentId = "l-application"
   } = _ref;
   var container = document.getElementById(parentId) || document.body;
@@ -73,8 +73,8 @@ var SidePanelComponent = _ref => {
     }),
     "aria-label": "Side panel",
     pinned: pinned,
-    narrow: !wide,
-    wide: wide
+    narrow: width === "narrow",
+    wide: width === "wide"
   }, loading ? /*#__PURE__*/React.createElement("div", {
     className: "loading"
   }, /*#__PURE__*/React.createElement(Spinner, null)) : hasError ? /*#__PURE__*/React.createElement("div", {

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

@@ -7,4 +7,5 @@ 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

@@ -16,7 +16,6 @@ var meta = {
         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;
-        console.log(wrapper);
         if (wrapper) {
           wrapper.style.setProperty("border", "0", "important");
         }
@@ -66,7 +65,7 @@ var StoryExample = args => {
     hasError: args.hasError,
     parentId: parentId,
     pinned: args.pinned,
-    wide: args.wide,
+    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",
@@ -97,7 +96,7 @@ export var Default = {
     pinned: false,
     loading: false,
     overlay: true,
-    wide: false
+    width: ""
   },
   render: StoryExample
 };
@@ -109,7 +108,7 @@ export var Pinned = {
     pinned: true,
     loading: false,
     overlay: false,
-    wide: false
+    width: ""
   },
   render: StoryExample,
   parameters: {
@@ -126,7 +125,7 @@ export var Loading = {
     pinned: false,
     loading: true,
     overlay: true,
-    wide: false
+    width: ""
   },
   render: StoryExample
 };
@@ -138,7 +137,19 @@ export var Error = {
     pinned: false,
     loading: false,
     overlay: true,
-    wide: false
+    width: ""
+  },
+  render: StoryExample
+};
+export var Narrow = {
+  args: {
+    className: "",
+    hasError: false,
+    parentId: "l-application-narrow",
+    pinned: false,
+    loading: false,
+    overlay: true,
+    width: "narrow"
   },
   render: StoryExample
 };
@@ -150,7 +161,7 @@ export var Wide = {
     pinned: false,
     loading: false,
     overlay: true,
-    wide: true
+    width: "wide"
   },
   render: StoryExample
 };

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

@@ -0,0 +1,19 @@
+import type { FC } from "react";
+export declare const loadTheme: () => string;
+export declare const isDarkTheme: (theme: string) => boolean;
+export declare const applyTheme: (theme: string) => void;
+/**
+ * This is a [React](https://reactjs.org/) component for the [Vanilla framework](https://docs.vanillaframework.io).
+ *
+ * The ThemeSwitcher component allows users to switch between different themes: dark, light, and system. It saves the selected theme in local storage and applies it to the document body. You can use it in user settings.
+ *
+ * In your root component, call the exported functions `loadTheme` and `applyTheme`, such as in the example below:
+ * ```
+ * useEffect(() => {
+ *   const theme = loadTheme();
+ *   applyTheme(theme);
+ * }, []);
+ * ```
+ */
+declare const ThemeSwitcher: FC;
+export default ThemeSwitcher;

package/dist/esm/components/ThemeSwitcher/ThemeSwitcher.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { useState } from "react";
+var LOCAL_STORAGE_KEY = "theme";
+var THEME_SYSTEM = "system";
+var THEME_DARK = "dark";
+var THEME_LIGHT = "light";
+export var loadTheme = () => {
+  var saved = localStorage.getItem(LOCAL_STORAGE_KEY);
+  return saved || THEME_SYSTEM;
+};
+var saveTheme = theme => {
+  localStorage.setItem(LOCAL_STORAGE_KEY, theme);
+};
+export var isDarkTheme = theme => {
+  if (theme === THEME_SYSTEM) {
+    return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+  return theme === THEME_DARK;
+};
+export var applyTheme = theme => {
+  if (isDarkTheme(theme)) {
+    document.body.classList.add("is-dark");
+  } else {
+    document.body.classList.remove("is-dark");
+  }
+};
+
+/**
+ * This is a [React](https://reactjs.org/) component for the [Vanilla framework](https://docs.vanillaframework.io).
+ *
+ * The ThemeSwitcher component allows users to switch between different themes: dark, light, and system. It saves the selected theme in local storage and applies it to the document body. You can use it in user settings.
+ *
+ * In your root component, call the exported functions `loadTheme` and `applyTheme`, such as in the example below:
+ * ```
+ * useEffect(() => {
+ *   const theme = loadTheme();
+ *   applyTheme(theme);
+ * }, []);
+ * ```
+ */
+var ThemeSwitcher = () => {
+  var [activeTheme, setActiveTheme] = useState(loadTheme());
+  var themeButton = theme => {
+    return /*#__PURE__*/React.createElement("button", {
+      className: "p-segmented-control__button",
+      type: "button",
+      "aria-selected": activeTheme === theme ? "true" : "false",
+      onClick: () => {
+        saveTheme(theme);
+        setActiveTheme(theme);
+        applyTheme(theme);
+      }
+    }, theme);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "p-segmented-control"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "p-segmented-control__list",
+    "aria-label": "Theme switcher"
+  }, themeButton(THEME_DARK), themeButton(THEME_LIGHT), themeButton(THEME_SYSTEM)));
+};
+export default ThemeSwitcher;

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ThemeSwitcher from "./ThemeSwitcher";
+declare const meta: Meta<typeof ThemeSwitcher>;
+export default meta;
+type Story = StoryObj<typeof ThemeSwitcher>;
+export declare const Default: Story;

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

@@ -0,0 +1,9 @@
+import ThemeSwitcher from "./ThemeSwitcher";
+var meta = {
+  component: ThemeSwitcher,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  name: "Default"
+};

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

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

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

@@ -0,0 +1 @@
+export { default, loadTheme, isDarkTheme, applyTheme } from "./ThemeSwitcher";

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

@@ -0,0 +1 @@
+export { default, loadTheme, isDarkTheme, applyTheme } from "./ThemeSwitcher";

package/dist/esm/index.d.ts

@@ -66,6 +66,7 @@ export { default as TableHeader } from "./components/TableHeader";
 export { default as TableRow } from "./components/TableRow";
 export { default as Tabs } from "./components/Tabs";
 export { default as Textarea } from "./components/Textarea";
+export { default as ThemeSwitcher, loadTheme, isDarkTheme, applyTheme, } from "./components/ThemeSwitcher";
 export { ToastNotification, ToastNotificationList, ToastNotificationProvider, useToastNotification, } from "./components/Notifications";
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";

package/dist/esm/index.js

@@ -66,6 +66,7 @@ export { default as TableHeader } from "./components/TableHeader";
 export { default as TableRow } from "./components/TableRow";
 export { default as Tabs } from "./components/Tabs";
 export { default as Textarea } from "./components/Textarea";
+export { default as ThemeSwitcher, loadTheme, isDarkTheme, applyTheme } from "./components/ThemeSwitcher";
 export { ToastNotification, ToastNotificationList, ToastNotificationProvider, useToastNotification } from "./components/Notifications";
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";

package/dist/index.d.ts

@@ -66,6 +66,7 @@ export { default as TableHeader } from "./components/TableHeader";
 export { default as TableRow } from "./components/TableRow";
 export { default as Tabs } from "./components/Tabs";
 export { default as Textarea } from "./components/Textarea";
+export { default as ThemeSwitcher, loadTheme, isDarkTheme, applyTheme, } from "./components/ThemeSwitcher";
 export { ToastNotification, ToastNotificationList, ToastNotificationProvider, useToastNotification, } from "./components/Notifications";
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";

package/dist/index.js

@@ -87,6 +87,10 @@ var _exportNames = {
   TableRow: true,
   Tabs: true,
   Textarea: true,
+  ThemeSwitcher: true,
+  loadTheme: true,
+  isDarkTheme: true,
+  applyTheme: true,
   Tooltip: true,
   TablePagination: true,
   TablePaginationControls: true,
@@ -568,6 +572,12 @@ Object.defineProperty(exports, "Theme", {
     return _enums.Theme;
   }
 });
+Object.defineProperty(exports, "ThemeSwitcher", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.default;
+  }
+});
 Object.defineProperty(exports, "ToastNotification", {
   enumerable: true,
   get: function () {
@@ -592,6 +602,12 @@ Object.defineProperty(exports, "Tooltip", {
     return _Tooltip.default;
   }
 });
+Object.defineProperty(exports, "applyTheme", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.applyTheme;
+  }
+});
 Object.defineProperty(exports, "createEventQueue", {
   enumerable: true,
   get: function () {
@@ -610,6 +626,12 @@ Object.defineProperty(exports, "info", {
     return _NotificationProvider.info;
   }
 });
+Object.defineProperty(exports, "isDarkTheme", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.isDarkTheme;
+  }
+});
 Object.defineProperty(exports, "isNavigationAnchor", {
   enumerable: true,
   get: function () {
@@ -622,6 +644,12 @@ Object.defineProperty(exports, "isNavigationButton", {
     return _utils.isNavigationButton;
   }
 });
+Object.defineProperty(exports, "loadTheme", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.loadTheme;
+  }
+});
 Object.defineProperty(exports, "queue", {
   enumerable: true,
   get: function () {
@@ -791,6 +819,7 @@ var _TableHeader = _interopRequireDefault(require("./components/TableHeader"));
 var _TableRow = _interopRequireDefault(require("./components/TableRow"));
 var _Tabs = _interopRequireDefault(require("./components/Tabs"));
 var _Textarea = _interopRequireDefault(require("./components/Textarea"));
+var _ThemeSwitcher = _interopRequireWildcard(require("./components/ThemeSwitcher"));
 var _Tooltip = _interopRequireDefault(require("./components/Tooltip"));
 var _TablePagination = _interopRequireDefault(require("./components/TablePagination"));
 var _TablePaginationControls = _interopRequireDefault(require("./components/TablePagination/TablePaginationControls"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -93,7 +93,7 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.7.3",
     "typescript-eslint": "8.24.1",
-    "vanilla-framework": "4.25.0",
+    "vanilla-framework": "4.26.0",
     "wait-on": "8.0.2",
     "webpack": "5.98.0"
   },