diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..9498e50bca478ef0f2ba7e5825a2b5c01a58d1cb
--- /dev/null
+++ b/.DS_Store
@@ -0,0 +1 @@
+Bud1%distdsclbooldsclbool @� @� @� @E%DSDB`� @� @� @
\ No newline at end of file
diff --git a/dist/.DS_Store b/dist/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..b8839b6ad5b219f828ebdc79e70432f348afdc98
--- /dev/null
+++ b/dist/.DS_Store
@@ -0,0 +1 @@
+Bud1%esmdsclboolclbool @� @� @� @E%DSDB`� @� @� @
\ No newline at end of file
diff --git a/dist/Tool.d.ts b/dist/Tool.d.ts
deleted file mode 100644
index 25cff36a9453c06fc761c0e97ebaabfe0e391a8f..0000000000000000000000000000000000000000
--- a/dist/Tool.d.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { ThemeVars } from '@storybook/theming';
-import { API } from '@storybook/api';
-declare const modes: readonly ["light", "dark"];
-declare type Mode = typeof modes[number];
-interface DarkModeStore {
-    /** The class target in the preview iframe */
-    classTarget: string;
-    /** The current mode the storybook is set to */
-    current: Mode;
-    /** The dark theme for storybook */
-    dark: ThemeVars;
-    /** The dark class name for the preview iframe */
-    darkClass: string;
-    /** The light theme for storybook */
-    light: ThemeVars;
-    /** The light class name for the preview iframe */
-    lightClass: string;
-    /** Apply mode to iframe */
-    stylePreview: boolean;
-}
-export declare const prefersDark: any;
-/** Persist the dark mode settings in localStorage */
-export declare const updateStore: (newStore: DarkModeStore) => void;
-/** Update changed dark mode settings and persist to localStorage  */
-export declare const store: (userTheme?: Partial<DarkModeStore>) => DarkModeStore;
-interface DarkModeProps {
-    /** The storybook API */
-    api: API;
-}
-/** A toolbar icon to toggle between dark and light themes in storybook */
-export declare const DarkMode: ({ api }: DarkModeProps) => JSX.Element;
-export default DarkMode;
diff --git a/dist/Tool.js b/dist/Tool.js
deleted file mode 100644
index bf5ee8e3987023f091ef889e7282b22ddfaaa6fe..0000000000000000000000000000000000000000
--- a/dist/Tool.js
+++ /dev/null
@@ -1,210 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-var React = __importStar(require("react"));
-var global_1 = __importDefault(require("global"));
-var theming_1 = require("@storybook/theming");
-var components_1 = require("@storybook/components");
-var core_events_1 = require("@storybook/core-events");
-var api_1 = require("@storybook/api");
-var fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
-var constants_1 = require("./constants");
-var Sun_1 = __importDefault(require("./icons/Sun"));
-var Moon_1 = __importDefault(require("./icons/Moon"));
-var document = global_1["default"].document, window = global_1["default"].window;
-var modes = ['light', 'dark'];
-var STORAGE_KEY = 'sb-addon-themes-3';
-exports.prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
-var defaultParams = {
-    classTarget: 'body',
-    dark: theming_1.themes.dark,
-    darkClass: 'dark',
-    light: theming_1.themes.light,
-    lightClass: 'light',
-    stylePreview: false
-};
-/** Persist the dark mode settings in localStorage */
-exports.updateStore = function (newStore) {
-    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(newStore));
-};
-/** Add the light/dark class to an element */
-var toggleDarkClass = function (el, _a) {
-    var current = _a.current, _b = _a.darkClass, darkClass = _b === void 0 ? defaultParams.darkClass : _b, _c = _a.lightClass, lightClass = _c === void 0 ? defaultParams.lightClass : _c;
-    if (current === 'dark') {
-        el.classList.add(darkClass);
-        el.classList.remove(lightClass);
-    }
-    else {
-        el.classList.add(lightClass);
-        el.classList.remove(darkClass);
-    }
-};
-/** Update the preview iframe class */
-var updatePreview = function (store) {
-    var _a, _b;
-    var iframe = document.getElementById('storybook-preview-iframe');
-    if (!iframe) {
-        return;
-    }
-    var iframeDocument = iframe.contentDocument || ((_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.document);
-    var target = (_b = iframeDocument) === null || _b === void 0 ? void 0 : _b.querySelector(store.classTarget);
-    if (!target) {
-        return;
-    }
-    toggleDarkClass(target, store);
-};
-/** Update the manager iframe class */
-var updateManager = function (store) {
-    var manager = document.querySelector('body');
-    if (!manager) {
-        return;
-    }
-    toggleDarkClass(manager, store);
-};
-/** Update changed dark mode settings and persist to localStorage  */
-exports.store = function (userTheme) {
-    if (userTheme === void 0) { userTheme = {}; }
-    var storedItem = window.localStorage.getItem(STORAGE_KEY);
-    if (typeof storedItem === 'string') {
-        var stored = JSON.parse(storedItem);
-        if (userTheme) {
-            if (userTheme.dark && !fast_deep_equal_1["default"](stored.dark, userTheme.dark)) {
-                stored.dark = userTheme.dark;
-                exports.updateStore(stored);
-            }
-            if (userTheme.light && !fast_deep_equal_1["default"](stored.light, userTheme.light)) {
-                stored.light = userTheme.light;
-                exports.updateStore(stored);
-            }
-        }
-        return stored;
-    }
-    return __assign(__assign({}, defaultParams), userTheme);
-};
-/** A toolbar icon to toggle between dark and light themes in storybook */
-exports.DarkMode = function (_a) {
-    var api = _a.api;
-    var _b = __read(React.useState(exports.prefersDark.matches), 2), isDark = _b[0], setDark = _b[1];
-    var darkModeParams = api_1.useParameter('darkMode', {});
-    var defaultMode = darkModeParams.current, stylePreview = darkModeParams.stylePreview, params = __rest(darkModeParams, ["current", "stylePreview"]);
-    var channel = api.getChannel();
-    // Save custom themes on init
-    var initialMode = React.useMemo(function () { return exports.store(params).current; }, [params]);
-    /** Set the theme in storybook, update the local state, and emit an event */
-    var setMode = React.useCallback(function (mode) {
-        var currentStore = exports.store();
-        api.setOptions({ theme: currentStore[mode] });
-        setDark(mode === 'dark');
-        api.getChannel().emit(constants_1.DARK_MODE_EVENT_NAME, mode === 'dark');
-        updateManager(currentStore);
-        if (stylePreview) {
-            updatePreview(currentStore);
-        }
-    }, [api, stylePreview]);
-    /** Update the theme settings in localStorage, react, and storybook */
-    var updateMode = React.useCallback(function (mode) {
-        var currentStore = exports.store();
-        var current = mode || (currentStore.current === 'dark' ? 'light' : 'dark');
-        exports.updateStore(__assign(__assign({}, currentStore), { current: current }));
-        setMode(current);
-    }, [setMode]);
-    /** Update the theme based on the color preference */
-    function prefersDarkUpdate(event) {
-        updateMode(event.matches ? 'dark' : 'light');
-    }
-    /** Render the current theme */
-    var renderTheme = React.useCallback(function () {
-        var _a = exports.store().current, current = _a === void 0 ? 'light' : _a;
-        setMode(current);
-    }, [setMode]);
-    /** When storybook params change update the stored themes */
-    React.useEffect(function () {
-        var currentStore = exports.store();
-        // Ensure we use the stores `current` value first to persist
-        // themeing between page loads and story changes.
-        exports.updateStore(__assign(__assign(__assign({}, currentStore), darkModeParams), { current: currentStore.current || darkModeParams.current }));
-        renderTheme();
-    }, [darkModeParams, renderTheme]);
-    React.useEffect(function () {
-        channel.on(core_events_1.STORY_CHANGED, renderTheme);
-        channel.on(core_events_1.SET_STORIES, renderTheme);
-        channel.on(core_events_1.DOCS_RENDERED, renderTheme);
-        exports.prefersDark.addListener(prefersDarkUpdate);
-        return function () {
-            channel.removeListener(core_events_1.STORY_CHANGED, renderTheme);
-            channel.removeListener(core_events_1.SET_STORIES, renderTheme);
-            channel.removeListener(core_events_1.DOCS_RENDERED, renderTheme);
-            exports.prefersDark.removeListener(prefersDarkUpdate);
-        };
-    });
-    React.useEffect(function () {
-        channel.on(constants_1.UPDATE_DARK_MODE_EVENT_NAME, updateMode);
-        return function () {
-            channel.removeListener(constants_1.UPDATE_DARK_MODE_EVENT_NAME, updateMode);
-        };
-    });
-    // Storybook's first render doesn't have the global user params loaded so we
-    // need the effect to run whenever defaultMode is updated
-    React.useEffect(function () {
-        // If a users has set the mode this is respected
-        if (initialMode) {
-            return;
-        }
-        if (defaultMode) {
-            updateMode(defaultMode);
-        }
-        else if (exports.prefersDark.matches) {
-            updateMode('dark');
-        }
-    }, [defaultMode, updateMode, initialMode]);
-    return (React.createElement(components_1.IconButton, { key: "dark-mode", active: isDark, title: isDark ? 'Change theme to light mode' : 'Change theme to dark mode', onClick: function () { return updateMode(); } }, isDark ? React.createElement(Sun_1["default"], null) : React.createElement(Moon_1["default"], null)));
-};
-exports["default"] = exports.DarkMode;
-//# sourceMappingURL=Tool.js.map
\ No newline at end of file
diff --git a/dist/Tool.js.map b/dist/Tool.js.map
deleted file mode 100644
index f4f789f40361ef65b0611663190e3415e75cce0e..0000000000000000000000000000000000000000
--- a/dist/Tool.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"Tool.js","sourceRoot":"","sources":["../src/Tool.tsx"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/dist/cjs/Tool.js b/dist/cjs/Tool.js
new file mode 100644
index 0000000000000000000000000000000000000000..5bae4af75581444ff8e1902d7180dfd170f467dc
--- /dev/null
+++ b/dist/cjs/Tool.js
@@ -0,0 +1,277 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateStore = exports.store = exports.prefersDark = exports["default"] = exports.DarkMode = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _global = _interopRequireDefault(require("global"));
+
+var _theming = require("@storybook/theming");
+
+var _components = require("@storybook/components");
+
+var _coreEvents = require("@storybook/core-events");
+
+var _api = require("@storybook/api");
+
+var _fastDeepEqual = _interopRequireDefault(require("fast-deep-equal"));
+
+var _constants = require("./constants");
+
+var _Sun = _interopRequireDefault(require("./icons/Sun"));
+
+var _Moon = _interopRequireDefault(require("./icons/Moon"));
+
+var _excluded = ["current", "stylePreview"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var document = _global["default"].document,
+    window = _global["default"].window;
+var modes = ['light', 'dark'];
+var STORAGE_KEY = 'sb-addon-themes-3';
+var prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+exports.prefersDark = prefersDark;
+var defaultParams = {
+  classTarget: 'body',
+  dark: _theming.themes.dark,
+  darkClass: 'dark',
+  light: _theming.themes.light,
+  lightClass: 'light',
+  stylePreview: false
+};
+/** Persist the dark mode settings in localStorage */
+
+var updateStore = function updateStore(newStore) {
+  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(newStore));
+};
+/** Add the light/dark class to an element */
+
+
+exports.updateStore = updateStore;
+
+var toggleDarkClass = function toggleDarkClass(el, _ref) {
+  var current = _ref.current,
+      _ref$darkClass = _ref.darkClass,
+      darkClass = _ref$darkClass === void 0 ? defaultParams.darkClass : _ref$darkClass,
+      _ref$lightClass = _ref.lightClass,
+      lightClass = _ref$lightClass === void 0 ? defaultParams.lightClass : _ref$lightClass;
+
+  if (current === 'dark') {
+    el.classList.add(darkClass);
+    el.classList.remove(lightClass);
+  } else {
+    el.classList.add(lightClass);
+    el.classList.remove(darkClass);
+  }
+};
+/** Update the preview iframe class */
+
+
+var updatePreview = function updatePreview(store) {
+  var _iframe$contentWindow;
+
+  var iframe = document.getElementById('storybook-preview-iframe');
+
+  if (!iframe) {
+    return;
+  }
+
+  var iframeDocument = iframe.contentDocument || ((_iframe$contentWindow = iframe.contentWindow) === null || _iframe$contentWindow === void 0 ? void 0 : _iframe$contentWindow.document);
+  var target = iframeDocument === null || iframeDocument === void 0 ? void 0 : iframeDocument.querySelector(store.classTarget);
+
+  if (!target) {
+    return;
+  }
+
+  toggleDarkClass(target, store);
+};
+/** Update the manager iframe class */
+
+
+var updateManager = function updateManager(store) {
+  var manager = document.querySelector('body');
+
+  if (!manager) {
+    return;
+  }
+
+  toggleDarkClass(manager, store);
+};
+/** Update changed dark mode settings and persist to localStorage  */
+
+
+var store = function store() {
+  var userTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var storedItem = window.localStorage.getItem(STORAGE_KEY);
+
+  if (typeof storedItem === 'string') {
+    var stored = JSON.parse(storedItem);
+
+    if (userTheme) {
+      if (userTheme.dark && !(0, _fastDeepEqual["default"])(stored.dark, userTheme.dark)) {
+        stored.dark = userTheme.dark;
+        updateStore(stored);
+      }
+
+      if (userTheme.light && !(0, _fastDeepEqual["default"])(stored.light, userTheme.light)) {
+        stored.light = userTheme.light;
+        updateStore(stored);
+      }
+    }
+
+    return stored;
+  }
+
+  return _objectSpread(_objectSpread({}, defaultParams), userTheme);
+};
+
+exports.store = store;
+
+/** A toolbar icon to toggle between dark and light themes in storybook */
+var DarkMode = function DarkMode(_ref2) {
+  var api = _ref2.api;
+
+  var _React$useState = React.useState(prefersDark.matches),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isDark = _React$useState2[0],
+      setDark = _React$useState2[1];
+
+  var darkModeParams = (0, _api.useParameter)('darkMode', {});
+
+  var defaultMode = darkModeParams.current,
+      stylePreview = darkModeParams.stylePreview,
+      params = _objectWithoutProperties(darkModeParams, _excluded);
+
+  var channel = api.getChannel(); // Save custom themes on init
+
+  var initialMode = React.useMemo(function () {
+    return store(params).current;
+  }, [params]);
+  /** Set the theme in storybook, update the local state, and emit an event */
+
+  var setMode = React.useCallback(function (mode) {
+    var currentStore = store();
+    api.setOptions({
+      theme: currentStore[mode]
+    });
+    setDark(mode === 'dark');
+    api.getChannel().emit(_constants.DARK_MODE_EVENT_NAME, mode === 'dark');
+    updateManager(currentStore);
+
+    if (stylePreview) {
+      updatePreview(currentStore);
+    }
+  }, [api, stylePreview]);
+  /** Update the theme settings in localStorage, react, and storybook */
+
+  var updateMode = React.useCallback(function (mode) {
+    var currentStore = store();
+    var current = mode || (currentStore.current === 'dark' ? 'light' : 'dark');
+    updateStore(_objectSpread(_objectSpread({}, currentStore), {}, {
+      current: current
+    }));
+    setMode(current);
+  }, [setMode]);
+  /** Update the theme based on the color preference */
+
+  function prefersDarkUpdate(event) {
+    updateMode(event.matches ? 'dark' : 'light');
+  }
+  /** Render the current theme */
+
+
+  var renderTheme = React.useCallback(function () {
+    var _store = store(),
+        _store$current = _store.current,
+        current = _store$current === void 0 ? 'light' : _store$current;
+
+    setMode(current);
+  }, [setMode]);
+  /** When storybook params change update the stored themes */
+
+  React.useEffect(function () {
+    var currentStore = store(); // Ensure we use the stores `current` value first to persist
+    // themeing between page loads and story changes.
+
+    updateStore(_objectSpread(_objectSpread(_objectSpread({}, currentStore), darkModeParams), {}, {
+      current: currentStore.current || darkModeParams.current
+    }));
+    renderTheme();
+  }, [darkModeParams, renderTheme]);
+  React.useEffect(function () {
+    channel.on(_coreEvents.STORY_CHANGED, renderTheme);
+    channel.on(_coreEvents.SET_STORIES, renderTheme);
+    channel.on(_coreEvents.DOCS_RENDERED, renderTheme);
+    prefersDark.addListener(prefersDarkUpdate);
+    return function () {
+      channel.removeListener(_coreEvents.STORY_CHANGED, renderTheme);
+      channel.removeListener(_coreEvents.SET_STORIES, renderTheme);
+      channel.removeListener(_coreEvents.DOCS_RENDERED, renderTheme);
+      prefersDark.removeListener(prefersDarkUpdate);
+    };
+  });
+  React.useEffect(function () {
+    channel.on(_constants.UPDATE_DARK_MODE_EVENT_NAME, updateMode);
+    return function () {
+      channel.removeListener(_constants.UPDATE_DARK_MODE_EVENT_NAME, updateMode);
+    };
+  }); // Storybook's first render doesn't have the global user params loaded so we
+  // need the effect to run whenever defaultMode is updated
+
+  React.useEffect(function () {
+    // If a users has set the mode this is respected
+    if (initialMode) {
+      return;
+    }
+
+    if (defaultMode) {
+      updateMode(defaultMode);
+    } else if (prefersDark.matches) {
+      updateMode('dark');
+    }
+  }, [defaultMode, updateMode, initialMode]);
+  return /*#__PURE__*/React.createElement(_components.IconButton, {
+    key: "dark-mode",
+    active: isDark,
+    title: isDark ? 'Change theme to light mode' : 'Change theme to dark mode',
+    onClick: function onClick() {
+      return updateMode();
+    }
+  }, isDark ? /*#__PURE__*/React.createElement(_Sun["default"], null) : /*#__PURE__*/React.createElement(_Moon["default"], null));
+};
+
+exports.DarkMode = DarkMode;
+var _default = DarkMode;
+exports["default"] = _default;
\ No newline at end of file
diff --git a/dist/cjs/constants.js b/dist/cjs/constants.js
new file mode 100644
index 0000000000000000000000000000000000000000..b4d2aa8db372fc3c9be570092e45288a1fba9953
--- /dev/null
+++ b/dist/cjs/constants.js
@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UPDATE_DARK_MODE_EVENT_NAME = exports.DARK_MODE_EVENT_NAME = void 0;
+var DARK_MODE_EVENT_NAME = 'DARK_MODE';
+exports.DARK_MODE_EVENT_NAME = DARK_MODE_EVENT_NAME;
+var UPDATE_DARK_MODE_EVENT_NAME = 'UPDATE_DARK_MODE';
+exports.UPDATE_DARK_MODE_EVENT_NAME = UPDATE_DARK_MODE_EVENT_NAME;
\ No newline at end of file
diff --git a/dist/cjs/icons/Moon.js b/dist/cjs/icons/Moon.js
new file mode 100644
index 0000000000000000000000000000000000000000..ee3fcfba5321c8d44908dc4ba408659a992b070e
--- /dev/null
+++ b/dist/cjs/icons/Moon.js
@@ -0,0 +1,33 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Moon = function Moon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    version: "1.1",
+    id: "Capa_1",
+    x: "0px",
+    y: "0px",
+    viewBox: "0 0 438.277 438.277",
+    style: {
+      fill: 'currentColor',
+      height: 13
+    }
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M428.756,300.104c-0.664-3.81-2.334-7.047-4.996-9.713c-5.9-5.903-12.752-7.142-20.554-3.716   c-20.937,9.708-42.641,14.558-65.097,14.558c-28.171,0-54.152-6.94-77.943-20.838c-23.791-13.894-42.631-32.736-56.525-56.53   c-13.899-23.793-20.844-49.773-20.844-77.945c0-21.888,4.333-42.683,12.991-62.384c8.66-19.7,21.176-36.973,37.543-51.82   c6.283-5.898,7.713-12.752,4.287-20.557c-3.236-7.801-9.041-11.511-17.415-11.132c-29.121,1.141-56.72,7.664-82.797,19.556   C111.33,31.478,88.917,47.13,70.168,66.548c-18.747,19.414-33.595,42.399-44.54,68.95c-10.942,26.553-16.416,54.39-16.416,83.511   c0,29.694,5.806,58.054,17.416,85.082c11.613,27.028,27.218,50.344,46.824,69.949c19.604,19.599,42.92,35.207,69.951,46.822   c27.028,11.607,55.384,17.415,85.075,17.415c42.64,0,81.987-11.563,118.054-34.69c36.069-23.124,63.05-54.006,80.944-92.645   C429,307.519,429.427,303.906,428.756,300.104z M306.565,384.168c-24.646,11.711-50.676,17.562-78.087,17.562   c-24.743,0-48.39-4.853-70.947-14.558c-22.554-9.705-41.971-22.695-58.246-38.972c-16.271-16.272-29.259-35.686-38.97-58.241   c-9.707-22.556-14.561-46.203-14.561-70.948c0-40.922,12.135-77.466,36.403-109.636c24.266-32.165,55.531-53.959,93.788-65.379   c-19.795,31.405-29.694,65.379-29.694,101.926c0,34.644,8.564,66.715,25.697,96.223c17.128,29.499,40.446,52.811,69.95,69.948   c29.499,17.129,61.565,25.694,96.211,25.694c10.656,0,21.129-0.855,31.408-2.57C352.199,356.155,331.21,372.472,306.565,384.168z"
+  }));
+};
+
+var _default = Moon;
+exports["default"] = _default;
\ No newline at end of file
diff --git a/dist/cjs/icons/Sun.js b/dist/cjs/icons/Sun.js
new file mode 100644
index 0000000000000000000000000000000000000000..861be7ddf1831c8cf307eebc3bd325a8dddf511a
--- /dev/null
+++ b/dist/cjs/icons/Sun.js
@@ -0,0 +1,47 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Sun = function Sun() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    version: "1.1",
+    viewBox: "0 0 129 129",
+    enableBackground: "new 0 0 129 129",
+    style: {
+      fill: 'currentColor'
+    }
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+    d: "m64.5,92.6c15.5,0 28-12.6 28-28s-12.6-28-28-28-28,12.6-28,28 12.5,28 28,28zm0-47.9c11,0 19.9,8.9 19.9,19.9 0,11-8.9,19.9-19.9,19.9s-19.9-8.9-19.9-19.9c0-11 8.9-19.9 19.9-19.9z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m68.6,23.6v-12.9c0-2.3-1.8-4.1-4.1-4.1s-4.1,1.8-4.1,4.1v12.9c0,2.3 1.8,4.1 4.1,4.1s4.1-1.8 4.1-4.1z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m60.4,105.6v12.9c0,2.3 1.8,4.1 4.1,4.1s4.1-1.8 4.1-4.1v-12.9c0-2.3-1.8-4.1-4.1-4.1s-4.1,1.8-4.1,4.1z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m96.4,38.5l9.1-9.1c1.6-1.6 1.6-4.2 0-5.8-1.6-1.6-4.2-1.6-5.8,0l-9.1,9.1c-1.6,1.6-1.6,4.2 0,5.8 0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m23.5,105.6c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l9.1-9.1c1.6-1.6 1.6-4.2 0-5.8-1.6-1.6-4.2-1.6-5.8,0l-9.1,9.1c-1.6,1.6-1.6,4.2 0,5.8z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m122.5,64.6c0-2.3-1.8-4.1-4.1-4.1h-12.9c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.8,4.1 4.1,4.1h12.9c2.2,1.42109e-14 4.1-1.8 4.1-4.1z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m10.6,68.7h12.9c2.3,0 4.1-1.8 4.1-4.1 0-2.3-1.8-4.1-4.1-4.1h-12.9c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.9,4.1 4.1,4.1z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m102.6,106.8c1,0 2.1-0.4 2.9-1.2 1.6-1.6 1.6-4.2 0-5.8l-9.1-9.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l9.1,9.1c0.8,0.8 1.9,1.2 2.9,1.2z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m38.4,38.5c1.6-1.6 1.6-4.2 0-5.8l-9.1-9.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l9.1,9.1c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2z"
+  })));
+};
+
+var _default = Sun;
+exports["default"] = _default;
\ No newline at end of file
diff --git a/dist/cjs/index.js b/dist/cjs/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..56dd2536be089d793f4e9a5858dcea96040f6e6a
--- /dev/null
+++ b/dist/cjs/index.js
@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useDarkMode: true
+};
+exports.useDarkMode = useDarkMode;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addons = require("@storybook/addons");
+
+var _constants = require("./constants");
+
+Object.keys(_constants).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _constants[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _constants[key];
+    }
+  });
+});
+
+var _Tool = require("./Tool");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/**
+ * Returns the current state of storybook's dark-mode
+ */
+function useDarkMode() {
+  var _React$useState = _react["default"].useState((0, _Tool.store)().current === 'dark'),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isDark = _React$useState2[0],
+      setDark = _React$useState2[1];
+
+  _react["default"].useEffect(function () {
+    var chan = _addons.addons.getChannel();
+
+    chan.on(_constants.DARK_MODE_EVENT_NAME, setDark);
+    return function () {
+      return chan.off(_constants.DARK_MODE_EVENT_NAME, setDark);
+    };
+  }, []);
+
+  return isDark;
+}
\ No newline at end of file
diff --git a/dist/cjs/preset/manager.js b/dist/cjs/preset/manager.js
new file mode 100644
index 0000000000000000000000000000000000000000..dd898ce2a2e28976350432e983a7ff4d22ac1fdb
--- /dev/null
+++ b/dist/cjs/preset/manager.js
@@ -0,0 +1,44 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+var _addons = require("@storybook/addons");
+
+var _theming = require("@storybook/theming");
+
+var React = _interopRequireWildcard(require("react"));
+
+var _Tool = _interopRequireWildcard(require("../Tool"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var currentStore = (0, _Tool.store)();
+var currentTheme = currentStore.current || _Tool.prefersDark.matches && 'dark' || 'light';
+
+_addons.addons.setConfig({
+  theme: _objectSpread(_objectSpread({}, _theming.themes[currentTheme]), currentStore[currentTheme])
+});
+
+_addons.addons.register('storybook/dark-mode', function (api) {
+  _addons.addons.add('storybook/dark-mode', {
+    title: 'dark mode',
+    type: _addons.types.TOOL,
+    match: function match(_ref) {
+      var viewMode = _ref.viewMode;
+      return viewMode === 'story' || viewMode === 'docs';
+    },
+    render: function render() {
+      return /*#__PURE__*/React.createElement(_Tool["default"], {
+        api: api
+      });
+    }
+  });
+});
\ No newline at end of file
diff --git a/dist/constants.d.ts b/dist/constants.d.ts
deleted file mode 100644
index d99a4c01e11694476d50fbd723932eee020f688d..0000000000000000000000000000000000000000
--- a/dist/constants.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export declare const DARK_MODE_EVENT_NAME = "DARK_MODE";
-export declare const UPDATE_DARK_MODE_EVENT_NAME = "UPDATE_DARK_MODE";
diff --git a/dist/constants.js b/dist/constants.js
deleted file mode 100644
index 553148ff5cc6fbee6fe7e9a02e323d3f88d3ac80..0000000000000000000000000000000000000000
--- a/dist/constants.js
+++ /dev/null
@@ -1,5 +0,0 @@
-"use strict";
-exports.__esModule = true;
-exports.DARK_MODE_EVENT_NAME = 'DARK_MODE';
-exports.UPDATE_DARK_MODE_EVENT_NAME = 'UPDATE_DARK_MODE';
-//# sourceMappingURL=constants.js.map
\ No newline at end of file
diff --git a/dist/constants.js.map b/dist/constants.js.map
deleted file mode 100644
index 5a8c44c98f7e881234bb34329f742ffc6e2444e2..0000000000000000000000000000000000000000
--- a/dist/constants.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":";;AAAa,QAAA,oBAAoB,GAAG,WAAW,CAAC;AACnC,QAAA,2BAA2B,GAAG,kBAAkB,CAAC"}
\ No newline at end of file
diff --git a/dist/esm/Tool.js b/dist/esm/Tool.js
new file mode 100644
index 0000000000000000000000000000000000000000..871d2f1f646bbb715ae0f8f96737bdcfd59a9afc
--- /dev/null
+++ b/dist/esm/Tool.js
@@ -0,0 +1,243 @@
+var _excluded = ["current", "stylePreview"];
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import * as React from 'react';
+import global from 'global';
+import { themes } from '@storybook/theming';
+import { IconButton } from '@storybook/components';
+import { STORY_CHANGED, SET_STORIES, DOCS_RENDERED } from '@storybook/core-events';
+import { useParameter } from '@storybook/api';
+import equal from 'fast-deep-equal';
+import { DARK_MODE_EVENT_NAME, UPDATE_DARK_MODE_EVENT_NAME } from './constants';
+import Sun from './icons/Sun';
+import Moon from './icons/Moon';
+var document = global.document,
+    window = global.window;
+var modes = ['light', 'dark'];
+var STORAGE_KEY = 'sb-addon-themes-3';
+export var prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+var defaultParams = {
+  classTarget: 'body',
+  dark: themes.dark,
+  darkClass: 'dark',
+  light: themes.light,
+  lightClass: 'light',
+  stylePreview: false
+};
+/** Persist the dark mode settings in localStorage */
+
+export var updateStore = function updateStore(newStore) {
+  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(newStore));
+};
+/** Add the light/dark class to an element */
+
+var toggleDarkClass = function toggleDarkClass(el, _ref) {
+  var current = _ref.current,
+      _ref$darkClass = _ref.darkClass,
+      darkClass = _ref$darkClass === void 0 ? defaultParams.darkClass : _ref$darkClass,
+      _ref$lightClass = _ref.lightClass,
+      lightClass = _ref$lightClass === void 0 ? defaultParams.lightClass : _ref$lightClass;
+
+  if (current === 'dark') {
+    el.classList.add(darkClass);
+    el.classList.remove(lightClass);
+  } else {
+    el.classList.add(lightClass);
+    el.classList.remove(darkClass);
+  }
+};
+/** Update the preview iframe class */
+
+
+var updatePreview = function updatePreview(store) {
+  var _iframe$contentWindow;
+
+  var iframe = document.getElementById('storybook-preview-iframe');
+
+  if (!iframe) {
+    return;
+  }
+
+  var iframeDocument = iframe.contentDocument || ((_iframe$contentWindow = iframe.contentWindow) === null || _iframe$contentWindow === void 0 ? void 0 : _iframe$contentWindow.document);
+  var target = iframeDocument === null || iframeDocument === void 0 ? void 0 : iframeDocument.querySelector(store.classTarget);
+
+  if (!target) {
+    return;
+  }
+
+  toggleDarkClass(target, store);
+};
+/** Update the manager iframe class */
+
+
+var updateManager = function updateManager(store) {
+  var manager = document.querySelector('body');
+
+  if (!manager) {
+    return;
+  }
+
+  toggleDarkClass(manager, store);
+};
+/** Update changed dark mode settings and persist to localStorage  */
+
+
+export var store = function store() {
+  var userTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var storedItem = window.localStorage.getItem(STORAGE_KEY);
+
+  if (typeof storedItem === 'string') {
+    var stored = JSON.parse(storedItem);
+
+    if (userTheme) {
+      if (userTheme.dark && !equal(stored.dark, userTheme.dark)) {
+        stored.dark = userTheme.dark;
+        updateStore(stored);
+      }
+
+      if (userTheme.light && !equal(stored.light, userTheme.light)) {
+        stored.light = userTheme.light;
+        updateStore(stored);
+      }
+    }
+
+    return stored;
+  }
+
+  return _objectSpread(_objectSpread({}, defaultParams), userTheme);
+};
+
+/** A toolbar icon to toggle between dark and light themes in storybook */
+export var DarkMode = function DarkMode(_ref2) {
+  var api = _ref2.api;
+
+  var _React$useState = React.useState(prefersDark.matches),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isDark = _React$useState2[0],
+      setDark = _React$useState2[1];
+
+  var darkModeParams = useParameter('darkMode', {});
+
+  var defaultMode = darkModeParams.current,
+      stylePreview = darkModeParams.stylePreview,
+      params = _objectWithoutProperties(darkModeParams, _excluded);
+
+  var channel = api.getChannel(); // Save custom themes on init
+
+  var initialMode = React.useMemo(function () {
+    return store(params).current;
+  }, [params]);
+  /** Set the theme in storybook, update the local state, and emit an event */
+
+  var setMode = React.useCallback(function (mode) {
+    var currentStore = store();
+    api.setOptions({
+      theme: currentStore[mode]
+    });
+    setDark(mode === 'dark');
+    api.getChannel().emit(DARK_MODE_EVENT_NAME, mode === 'dark');
+    updateManager(currentStore);
+
+    if (stylePreview) {
+      updatePreview(currentStore);
+    }
+  }, [api, stylePreview]);
+  /** Update the theme settings in localStorage, react, and storybook */
+
+  var updateMode = React.useCallback(function (mode) {
+    var currentStore = store();
+    var current = mode || (currentStore.current === 'dark' ? 'light' : 'dark');
+    updateStore(_objectSpread(_objectSpread({}, currentStore), {}, {
+      current: current
+    }));
+    setMode(current);
+  }, [setMode]);
+  /** Update the theme based on the color preference */
+
+  function prefersDarkUpdate(event) {
+    updateMode(event.matches ? 'dark' : 'light');
+  }
+  /** Render the current theme */
+
+
+  var renderTheme = React.useCallback(function () {
+    var _store = store(),
+        _store$current = _store.current,
+        current = _store$current === void 0 ? 'light' : _store$current;
+
+    setMode(current);
+  }, [setMode]);
+  /** When storybook params change update the stored themes */
+
+  React.useEffect(function () {
+    var currentStore = store(); // Ensure we use the stores `current` value first to persist
+    // themeing between page loads and story changes.
+
+    updateStore(_objectSpread(_objectSpread(_objectSpread({}, currentStore), darkModeParams), {}, {
+      current: currentStore.current || darkModeParams.current
+    }));
+    renderTheme();
+  }, [darkModeParams, renderTheme]);
+  React.useEffect(function () {
+    channel.on(STORY_CHANGED, renderTheme);
+    channel.on(SET_STORIES, renderTheme);
+    channel.on(DOCS_RENDERED, renderTheme);
+    prefersDark.addListener(prefersDarkUpdate);
+    return function () {
+      channel.removeListener(STORY_CHANGED, renderTheme);
+      channel.removeListener(SET_STORIES, renderTheme);
+      channel.removeListener(DOCS_RENDERED, renderTheme);
+      prefersDark.removeListener(prefersDarkUpdate);
+    };
+  });
+  React.useEffect(function () {
+    channel.on(UPDATE_DARK_MODE_EVENT_NAME, updateMode);
+    return function () {
+      channel.removeListener(UPDATE_DARK_MODE_EVENT_NAME, updateMode);
+    };
+  }); // Storybook's first render doesn't have the global user params loaded so we
+  // need the effect to run whenever defaultMode is updated
+
+  React.useEffect(function () {
+    // If a users has set the mode this is respected
+    if (initialMode) {
+      return;
+    }
+
+    if (defaultMode) {
+      updateMode(defaultMode);
+    } else if (prefersDark.matches) {
+      updateMode('dark');
+    }
+  }, [defaultMode, updateMode, initialMode]);
+  return /*#__PURE__*/React.createElement(IconButton, {
+    key: "dark-mode",
+    active: isDark,
+    title: isDark ? 'Change theme to light mode' : 'Change theme to dark mode',
+    onClick: function onClick() {
+      return updateMode();
+    }
+  }, isDark ? /*#__PURE__*/React.createElement(Sun, null) : /*#__PURE__*/React.createElement(Moon, null));
+};
+export default DarkMode;
\ No newline at end of file
diff --git a/dist/esm/constants.js b/dist/esm/constants.js
new file mode 100644
index 0000000000000000000000000000000000000000..2c708393610703e02a6a6f0c2630454e7b9fe039
--- /dev/null
+++ b/dist/esm/constants.js
@@ -0,0 +1,2 @@
+export var DARK_MODE_EVENT_NAME = 'DARK_MODE';
+export var UPDATE_DARK_MODE_EVENT_NAME = 'UPDATE_DARK_MODE';
\ No newline at end of file
diff --git a/dist/esm/icons/Moon.js b/dist/esm/icons/Moon.js
new file mode 100644
index 0000000000000000000000000000000000000000..5623d260765502e321d1925dbbfce800204e1a87
--- /dev/null
+++ b/dist/esm/icons/Moon.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+var Moon = function Moon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    version: "1.1",
+    id: "Capa_1",
+    x: "0px",
+    y: "0px",
+    viewBox: "0 0 438.277 438.277",
+    style: {
+      fill: 'currentColor',
+      height: 13
+    }
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M428.756,300.104c-0.664-3.81-2.334-7.047-4.996-9.713c-5.9-5.903-12.752-7.142-20.554-3.716   c-20.937,9.708-42.641,14.558-65.097,14.558c-28.171,0-54.152-6.94-77.943-20.838c-23.791-13.894-42.631-32.736-56.525-56.53   c-13.899-23.793-20.844-49.773-20.844-77.945c0-21.888,4.333-42.683,12.991-62.384c8.66-19.7,21.176-36.973,37.543-51.82   c6.283-5.898,7.713-12.752,4.287-20.557c-3.236-7.801-9.041-11.511-17.415-11.132c-29.121,1.141-56.72,7.664-82.797,19.556   C111.33,31.478,88.917,47.13,70.168,66.548c-18.747,19.414-33.595,42.399-44.54,68.95c-10.942,26.553-16.416,54.39-16.416,83.511   c0,29.694,5.806,58.054,17.416,85.082c11.613,27.028,27.218,50.344,46.824,69.949c19.604,19.599,42.92,35.207,69.951,46.822   c27.028,11.607,55.384,17.415,85.075,17.415c42.64,0,81.987-11.563,118.054-34.69c36.069-23.124,63.05-54.006,80.944-92.645   C429,307.519,429.427,303.906,428.756,300.104z M306.565,384.168c-24.646,11.711-50.676,17.562-78.087,17.562   c-24.743,0-48.39-4.853-70.947-14.558c-22.554-9.705-41.971-22.695-58.246-38.972c-16.271-16.272-29.259-35.686-38.97-58.241   c-9.707-22.556-14.561-46.203-14.561-70.948c0-40.922,12.135-77.466,36.403-109.636c24.266-32.165,55.531-53.959,93.788-65.379   c-19.795,31.405-29.694,65.379-29.694,101.926c0,34.644,8.564,66.715,25.697,96.223c17.128,29.499,40.446,52.811,69.95,69.948   c29.499,17.129,61.565,25.694,96.211,25.694c10.656,0,21.129-0.855,31.408-2.57C352.199,356.155,331.21,372.472,306.565,384.168z"
+  }));
+};
+
+export default Moon;
\ No newline at end of file
diff --git a/dist/esm/icons/Sun.js b/dist/esm/icons/Sun.js
new file mode 100644
index 0000000000000000000000000000000000000000..979adaa1ad1f375c205b9e62be61af508c6bd1e6
--- /dev/null
+++ b/dist/esm/icons/Sun.js
@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+var Sun = function Sun() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    version: "1.1",
+    viewBox: "0 0 129 129",
+    enableBackground: "new 0 0 129 129",
+    style: {
+      fill: 'currentColor'
+    }
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+    d: "m64.5,92.6c15.5,0 28-12.6 28-28s-12.6-28-28-28-28,12.6-28,28 12.5,28 28,28zm0-47.9c11,0 19.9,8.9 19.9,19.9 0,11-8.9,19.9-19.9,19.9s-19.9-8.9-19.9-19.9c0-11 8.9-19.9 19.9-19.9z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m68.6,23.6v-12.9c0-2.3-1.8-4.1-4.1-4.1s-4.1,1.8-4.1,4.1v12.9c0,2.3 1.8,4.1 4.1,4.1s4.1-1.8 4.1-4.1z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m60.4,105.6v12.9c0,2.3 1.8,4.1 4.1,4.1s4.1-1.8 4.1-4.1v-12.9c0-2.3-1.8-4.1-4.1-4.1s-4.1,1.8-4.1,4.1z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m96.4,38.5l9.1-9.1c1.6-1.6 1.6-4.2 0-5.8-1.6-1.6-4.2-1.6-5.8,0l-9.1,9.1c-1.6,1.6-1.6,4.2 0,5.8 0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m23.5,105.6c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l9.1-9.1c1.6-1.6 1.6-4.2 0-5.8-1.6-1.6-4.2-1.6-5.8,0l-9.1,9.1c-1.6,1.6-1.6,4.2 0,5.8z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m122.5,64.6c0-2.3-1.8-4.1-4.1-4.1h-12.9c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.8,4.1 4.1,4.1h12.9c2.2,1.42109e-14 4.1-1.8 4.1-4.1z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m10.6,68.7h12.9c2.3,0 4.1-1.8 4.1-4.1 0-2.3-1.8-4.1-4.1-4.1h-12.9c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.9,4.1 4.1,4.1z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m102.6,106.8c1,0 2.1-0.4 2.9-1.2 1.6-1.6 1.6-4.2 0-5.8l-9.1-9.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l9.1,9.1c0.8,0.8 1.9,1.2 2.9,1.2z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m38.4,38.5c1.6-1.6 1.6-4.2 0-5.8l-9.1-9.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l9.1,9.1c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2z"
+  })));
+};
+
+export default Sun;
\ No newline at end of file
diff --git a/dist/esm/index.js b/dist/esm/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e37b689a90b468ee352ab895852411dbacf14a88
--- /dev/null
+++ b/dist/esm/index.js
@@ -0,0 +1,36 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React from 'react';
+import { addons } from '@storybook/addons';
+import { DARK_MODE_EVENT_NAME } from './constants';
+import { store } from './Tool';
+/**
+ * Returns the current state of storybook's dark-mode
+ */
+
+export function useDarkMode() {
+  var _React$useState = React.useState(store().current === 'dark'),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isDark = _React$useState2[0],
+      setDark = _React$useState2[1];
+
+  React.useEffect(function () {
+    var chan = addons.getChannel();
+    chan.on(DARK_MODE_EVENT_NAME, setDark);
+    return function () {
+      return chan.off(DARK_MODE_EVENT_NAME, setDark);
+    };
+  }, []);
+  return isDark;
+}
+export * from './constants';
\ No newline at end of file
diff --git a/dist/esm/preset/manager.js b/dist/esm/preset/manager.js
new file mode 100644
index 0000000000000000000000000000000000000000..9021609530676322bb836236d754827a90bc8d47
--- /dev/null
+++ b/dist/esm/preset/manager.js
@@ -0,0 +1,30 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { addons, types } from '@storybook/addons';
+import { themes } from '@storybook/theming';
+import * as React from 'react';
+import Tool, { prefersDark, store } from '../Tool';
+var currentStore = store();
+var currentTheme = currentStore.current || prefersDark.matches && 'dark' || 'light';
+addons.setConfig({
+  theme: _objectSpread(_objectSpread({}, themes[currentTheme]), currentStore[currentTheme])
+});
+addons.register('storybook/dark-mode', function (api) {
+  addons.add('storybook/dark-mode', {
+    title: 'dark mode',
+    type: types.TOOL,
+    match: function match(_ref) {
+      var viewMode = _ref.viewMode;
+      return viewMode === 'story' || viewMode === 'docs';
+    },
+    render: function render() {
+      return /*#__PURE__*/React.createElement(Tool, {
+        api: api
+      });
+    }
+  });
+});
\ No newline at end of file
diff --git a/dist/icons/Moon.d.ts b/dist/icons/Moon.d.ts
deleted file mode 100644
index 4ce905f3a24f35f653ef2ab199a1f6805393d4a8..0000000000000000000000000000000000000000
--- a/dist/icons/Moon.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-declare const Moon: () => JSX.Element;
-export default Moon;
diff --git a/dist/icons/Moon.js b/dist/icons/Moon.js
deleted file mode 100644
index 997d9c6033e1a25073e1f9744a164109b27e9f42..0000000000000000000000000000000000000000
--- a/dist/icons/Moon.js
+++ /dev/null
@@ -1,17 +0,0 @@
-"use strict";
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-exports.__esModule = true;
-var React = __importStar(require("react"));
-var Moon = function () { return (React.createElement("svg", { version: "1.1", id: "Capa_1", x: "0px", y: "0px", viewBox: "0 0 438.277 438.277", style: {
-        fill: 'currentColor',
-        height: 13
-    } },
-    React.createElement("path", { d: "M428.756,300.104c-0.664-3.81-2.334-7.047-4.996-9.713c-5.9-5.903-12.752-7.142-20.554-3.716   c-20.937,9.708-42.641,14.558-65.097,14.558c-28.171,0-54.152-6.94-77.943-20.838c-23.791-13.894-42.631-32.736-56.525-56.53   c-13.899-23.793-20.844-49.773-20.844-77.945c0-21.888,4.333-42.683,12.991-62.384c8.66-19.7,21.176-36.973,37.543-51.82   c6.283-5.898,7.713-12.752,4.287-20.557c-3.236-7.801-9.041-11.511-17.415-11.132c-29.121,1.141-56.72,7.664-82.797,19.556   C111.33,31.478,88.917,47.13,70.168,66.548c-18.747,19.414-33.595,42.399-44.54,68.95c-10.942,26.553-16.416,54.39-16.416,83.511   c0,29.694,5.806,58.054,17.416,85.082c11.613,27.028,27.218,50.344,46.824,69.949c19.604,19.599,42.92,35.207,69.951,46.822   c27.028,11.607,55.384,17.415,85.075,17.415c42.64,0,81.987-11.563,118.054-34.69c36.069-23.124,63.05-54.006,80.944-92.645   C429,307.519,429.427,303.906,428.756,300.104z M306.565,384.168c-24.646,11.711-50.676,17.562-78.087,17.562   c-24.743,0-48.39-4.853-70.947-14.558c-22.554-9.705-41.971-22.695-58.246-38.972c-16.271-16.272-29.259-35.686-38.97-58.241   c-9.707-22.556-14.561-46.203-14.561-70.948c0-40.922,12.135-77.466,36.403-109.636c24.266-32.165,55.531-53.959,93.788-65.379   c-19.795,31.405-29.694,65.379-29.694,101.926c0,34.644,8.564,66.715,25.697,96.223c17.128,29.499,40.446,52.811,69.95,69.948   c29.499,17.129,61.565,25.694,96.211,25.694c10.656,0,21.129-0.855,31.408-2.57C352.199,356.155,331.21,372.472,306.565,384.168z" }))); };
-exports["default"] = Moon;
-//# sourceMappingURL=Moon.js.map
\ No newline at end of file
diff --git a/dist/icons/Moon.js.map b/dist/icons/Moon.js.map
deleted file mode 100644
index 0b618f4412076a2d728933100a67c97f886b817a..0000000000000000000000000000000000000000
--- a/dist/icons/Moon.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"Moon.js","sourceRoot":"","sources":["../../src/icons/Moon.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,2CAA+B;AAE/B,IAAM,IAAI,GAAG,cAAM,OAAA,CACjB,6BACE,OAAO,EAAC,KAAK,EACb,EAAE,EAAC,QAAQ,EACX,CAAC,EAAC,KAAK,EACP,CAAC,EAAC,KAAK,EACP,OAAO,EAAC,qBAAqB,EAC7B,KAAK,EAAE;QACL,IAAI,EAAE,cAAc;QACpB,MAAM,EAAE,EAAE;KACX;IAED,8BAAM,CAAC,EAAC,w5CAAw5C,GAAG,CAC/5C,CACP,EAdkB,CAclB,CAAC;AAEF,qBAAe,IAAI,CAAC"}
\ No newline at end of file
diff --git a/dist/icons/Sun.d.ts b/dist/icons/Sun.d.ts
deleted file mode 100644
index c789f659b28ee5d71b7857043e7e62e664ac58bb..0000000000000000000000000000000000000000
--- a/dist/icons/Sun.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-declare const Sun: () => JSX.Element;
-export default Sun;
diff --git a/dist/icons/Sun.js b/dist/icons/Sun.js
deleted file mode 100644
index aa79b712c572f7749f37a9b908390e17d5a7c071..0000000000000000000000000000000000000000
--- a/dist/icons/Sun.js
+++ /dev/null
@@ -1,25 +0,0 @@
-"use strict";
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-exports.__esModule = true;
-var React = __importStar(require("react"));
-var Sun = function () { return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", viewBox: "0 0 129 129", enableBackground: "new 0 0 129 129", style: {
-        fill: 'currentColor'
-    } },
-    React.createElement("g", null,
-        React.createElement("path", { d: "m64.5,92.6c15.5,0 28-12.6 28-28s-12.6-28-28-28-28,12.6-28,28 12.5,28 28,28zm0-47.9c11,0 19.9,8.9 19.9,19.9 0,11-8.9,19.9-19.9,19.9s-19.9-8.9-19.9-19.9c0-11 8.9-19.9 19.9-19.9z" }),
-        React.createElement("path", { d: "m68.6,23.6v-12.9c0-2.3-1.8-4.1-4.1-4.1s-4.1,1.8-4.1,4.1v12.9c0,2.3 1.8,4.1 4.1,4.1s4.1-1.8 4.1-4.1z" }),
-        React.createElement("path", { d: "m60.4,105.6v12.9c0,2.3 1.8,4.1 4.1,4.1s4.1-1.8 4.1-4.1v-12.9c0-2.3-1.8-4.1-4.1-4.1s-4.1,1.8-4.1,4.1z" }),
-        React.createElement("path", { d: "m96.4,38.5l9.1-9.1c1.6-1.6 1.6-4.2 0-5.8-1.6-1.6-4.2-1.6-5.8,0l-9.1,9.1c-1.6,1.6-1.6,4.2 0,5.8 0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2z" }),
-        React.createElement("path", { d: "m23.5,105.6c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l9.1-9.1c1.6-1.6 1.6-4.2 0-5.8-1.6-1.6-4.2-1.6-5.8,0l-9.1,9.1c-1.6,1.6-1.6,4.2 0,5.8z" }),
-        React.createElement("path", { d: "m122.5,64.6c0-2.3-1.8-4.1-4.1-4.1h-12.9c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.8,4.1 4.1,4.1h12.9c2.2,1.42109e-14 4.1-1.8 4.1-4.1z" }),
-        React.createElement("path", { d: "m10.6,68.7h12.9c2.3,0 4.1-1.8 4.1-4.1 0-2.3-1.8-4.1-4.1-4.1h-12.9c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.9,4.1 4.1,4.1z" }),
-        React.createElement("path", { d: "m102.6,106.8c1,0 2.1-0.4 2.9-1.2 1.6-1.6 1.6-4.2 0-5.8l-9.1-9.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l9.1,9.1c0.8,0.8 1.9,1.2 2.9,1.2z" }),
-        React.createElement("path", { d: "m38.4,38.5c1.6-1.6 1.6-4.2 0-5.8l-9.1-9.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l9.1,9.1c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2z" })))); };
-exports["default"] = Sun;
-//# sourceMappingURL=Sun.js.map
\ No newline at end of file
diff --git a/dist/icons/Sun.js.map b/dist/icons/Sun.js.map
deleted file mode 100644
index 3b000c2b60ccc4351b981e850bdefdd807684a1b..0000000000000000000000000000000000000000
--- a/dist/icons/Sun.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"Sun.js","sourceRoot":"","sources":["../../src/icons/Sun.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,2CAA+B;AAE/B,IAAM,GAAG,GAAG,cAAM,OAAA,CAChB,6BACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,KAAK,EACb,OAAO,EAAC,aAAa,EACrB,gBAAgB,EAAC,iBAAiB,EAClC,KAAK,EAAE;QACL,IAAI,EAAE,cAAc;KACrB;IAED;QACE,8BAAM,CAAC,EAAC,iLAAiL,GAAG;QAC5L,8BAAM,CAAC,EAAC,qGAAqG,GAAG;QAChH,8BAAM,CAAC,EAAC,sGAAsG,GAAG;QACjH,8BAAM,CAAC,EAAC,yIAAyI,GAAG;QACpJ,8BAAM,CAAC,EAAC,8IAA8I,GAAG;QACzJ,8BAAM,CAAC,EAAC,4HAA4H,GAAG;QACvI,8BAAM,CAAC,EAAC,iHAAiH,GAAG;QAC5H,8BAAM,CAAC,EAAC,+IAA+I,GAAG;QAC1J,8BAAM,CAAC,EAAC,yIAAyI,GAAG,CAClJ,CACA,CACP,EAtBiB,CAsBjB,CAAC;AAEF,qBAAe,GAAG,CAAC"}
\ No newline at end of file
diff --git a/dist/index.d.ts b/dist/index.d.ts
deleted file mode 100644
index a9ddf09ec08a28642974562aeea7017921a3d0db..0000000000000000000000000000000000000000
--- a/dist/index.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-/**
- * Returns the current state of storybook's dark-mode
- */
-export declare function useDarkMode(): boolean;
-export * from './constants';
diff --git a/dist/index.js b/dist/index.js
deleted file mode 100644
index 809927e151a165ee6c31227d678d3acebf56c958..0000000000000000000000000000000000000000
--- a/dist/index.js
+++ /dev/null
@@ -1,43 +0,0 @@
-"use strict";
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-var react_1 = __importDefault(require("react"));
-var addons_1 = require("@storybook/addons");
-var constants_1 = require("./constants");
-var Tool_1 = require("./Tool");
-/**
- * Returns the current state of storybook's dark-mode
- */
-function useDarkMode() {
-    var _a = __read(react_1["default"].useState(Tool_1.store().current === 'dark'), 2), isDark = _a[0], setDark = _a[1];
-    react_1["default"].useEffect(function () {
-        var chan = addons_1.addons.getChannel();
-        chan.on(constants_1.DARK_MODE_EVENT_NAME, setDark);
-        return function () { return chan.off(constants_1.DARK_MODE_EVENT_NAME, setDark); };
-    }, []);
-    return isDark;
-}
-exports.useDarkMode = useDarkMode;
-__export(require("./constants"));
-//# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/dist/index.js.map b/dist/index.js.map
deleted file mode 100644
index 4b6d2e9dce2b72f1fe011f55924840ab51fc2c90..0000000000000000000000000000000000000000
--- a/dist/index.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,4CAAyC;AACzC,yCAAmD;AACnD,+BAA+B;AAE/B;;GAEG;AACH,SAAgB,WAAW;IACnB,IAAA,8EAA8D,EAA7D,cAAM,EAAE,eAAqD,CAAC;IAErE,kBAAK,CAAC,SAAS,CAAC;QACd,IAAM,IAAI,GAAG,eAAM,CAAC,UAAU,EAAE,CAAC;QACjC,IAAI,CAAC,EAAE,CAAC,gCAAoB,EAAE,OAAO,CAAC,CAAC;QACvC,OAAO,cAAM,OAAA,IAAI,CAAC,GAAG,CAAC,gCAAoB,EAAE,OAAO,CAAC,EAAvC,CAAuC,CAAC;IACvD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,MAAM,CAAC;AAChB,CAAC;AAVD,kCAUC;AAED,iCAA4B"}
\ No newline at end of file
diff --git a/dist/register.d.ts b/dist/register.d.ts
deleted file mode 100644
index cb0ff5c3b541f646105198ee23ac0fc3d805023e..0000000000000000000000000000000000000000
--- a/dist/register.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {};
diff --git a/dist/register.js b/dist/register.js
deleted file mode 100644
index e79e7865c581ccb98063f00fcee94e9fee5c5f8e..0000000000000000000000000000000000000000
--- a/dist/register.js
+++ /dev/null
@@ -1,41 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-exports.__esModule = true;
-var addons_1 = require("@storybook/addons");
-var theming_1 = require("@storybook/theming");
-var React = __importStar(require("react"));
-var Tool_1 = __importStar(require("./Tool"));
-var currentStore = Tool_1.store();
-var currentTheme = currentStore.current || (Tool_1.prefersDark.matches && 'dark') || 'light';
-addons_1.addons.setConfig({
-    theme: __assign(__assign({}, theming_1.themes[currentTheme]), currentStore[currentTheme])
-});
-addons_1.addons.register('storybook/dark-mode', function (api) {
-    addons_1.addons.add('storybook/dark-mode', {
-        title: 'dark mode',
-        type: addons_1.types.TOOL,
-        match: function (_a) {
-            var viewMode = _a.viewMode;
-            return viewMode === 'story' || viewMode === 'docs';
-        },
-        render: function () { return React.createElement(Tool_1["default"], { api: api }); }
-    });
-});
-//# sourceMappingURL=register.js.map
\ No newline at end of file
diff --git a/dist/register.js.map b/dist/register.js.map
deleted file mode 100644
index 95e2ddd38bfc317d87914b22e2980664c29773f0..0000000000000000000000000000000000000000
--- a/dist/register.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"register.js","sourceRoot":"","sources":["../src/register.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,4CAAkD;AAClD,8CAA4C;AAC5C,2CAA+B;AAE/B,6CAAkD;AAElD,IAAM,YAAY,GAAG,YAAK,EAAE,CAAC;AAC7B,IAAM,YAAY,GAChB,YAAY,CAAC,OAAO,IAAI,CAAC,kBAAW,CAAC,OAAO,IAAI,MAAM,CAAC,IAAI,OAAO,CAAC;AAErE,eAAM,CAAC,SAAS,CAAC;IACf,KAAK,wBACA,gBAAM,CAAC,YAAY,CAAC,GACpB,YAAY,CAAC,YAAY,CAAC,CAC9B;CACF,CAAC,CAAC;AAEH,eAAM,CAAC,QAAQ,CAAC,qBAAqB,EAAE,UAAA,GAAG;IACxC,eAAM,CAAC,GAAG,CAAC,qBAAqB,EAAE;QAChC,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,cAAK,CAAC,IAAI;QAChB,KAAK,EAAE,UAAC,EAAY;gBAAV,sBAAQ;YAAO,OAAA,QAAQ,KAAK,OAAO,IAAI,QAAQ,KAAK,MAAM;QAA3C,CAA2C;QACpE,MAAM,EAAE,cAAM,OAAA,oBAAC,iBAAI,IAAC,GAAG,EAAE,GAAG,GAAI,EAAlB,CAAkB;KACjC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
\ No newline at end of file
diff --git a/dist/ts/Tool.d.ts b/dist/ts/Tool.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e0ef6609246356c794bfb634b241e792f0c98286
--- /dev/null
+++ b/dist/ts/Tool.d.ts
@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { ThemeVars } from '@storybook/theming';
+import { API } from '@storybook/api';
+declare const modes: readonly ["light", "dark"];
+declare type Mode = typeof modes[number];
+interface DarkModeStore {
+    /** The class target in the preview iframe */
+    classTarget: string;
+    /** The current mode the storybook is set to */
+    current: Mode;
+    /** The dark theme for storybook */
+    dark: ThemeVars;
+    /** The dark class name for the preview iframe */
+    darkClass: string;
+    /** The light theme for storybook */
+    light: ThemeVars;
+    /** The light class name for the preview iframe */
+    lightClass: string;
+    /** Apply mode to iframe */
+    stylePreview: boolean;
+}
+export declare const prefersDark: any;
+/** Persist the dark mode settings in localStorage */
+export declare const updateStore: (newStore: DarkModeStore) => void;
+/** Update changed dark mode settings and persist to localStorage  */
+export declare const store: (userTheme?: Partial<DarkModeStore>) => DarkModeStore;
+interface DarkModeProps {
+    /** The storybook API */
+    api: API;
+}
+/** A toolbar icon to toggle between dark and light themes in storybook */
+export declare const DarkMode: ({ api }: DarkModeProps) => JSX.Element;
+export default DarkMode;
diff --git a/dist/ts/constants.d.ts b/dist/ts/constants.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d99a4c01e11694476d50fbd723932eee020f688d
--- /dev/null
+++ b/dist/ts/constants.d.ts
@@ -0,0 +1,2 @@
+export declare const DARK_MODE_EVENT_NAME = "DARK_MODE";
+export declare const UPDATE_DARK_MODE_EVENT_NAME = "UPDATE_DARK_MODE";
diff --git a/dist/ts/icons/Moon.d.ts b/dist/ts/icons/Moon.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d73570197172695cba02e42325fdfe453cf421fa
--- /dev/null
+++ b/dist/ts/icons/Moon.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Moon: () => JSX.Element;
+export default Moon;
diff --git a/dist/ts/icons/Sun.d.ts b/dist/ts/icons/Sun.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..736a6f2b096a0e19958745b713fe5b878de8cc68
--- /dev/null
+++ b/dist/ts/icons/Sun.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Sun: () => JSX.Element;
+export default Sun;
diff --git a/dist/ts/index.d.ts b/dist/ts/index.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a9ddf09ec08a28642974562aeea7017921a3d0db
--- /dev/null
+++ b/dist/ts/index.d.ts
@@ -0,0 +1,5 @@
+/**
+ * Returns the current state of storybook's dark-mode
+ */
+export declare function useDarkMode(): boolean;
+export * from './constants';
diff --git a/dist/ts/preset/manager.d.ts b/dist/ts/preset/manager.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cb0ff5c3b541f646105198ee23ac0fc3d805023e
--- /dev/null
+++ b/dist/ts/preset/manager.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/package.json b/package.json
index 0d12a293abf8298d428bbf106663bfb41f242a0a..57a58dedcd15f391b7f8ca1ae54698ec3c8edcc0 100644
--- a/package.json
+++ b/package.json
@@ -2,12 +2,13 @@
   "name": "storybook-dark-mode",
   "version": "1.1.2",
   "description": "Toggle between light and dark mode in Storybook",
-  "main": "dist/index.js",
-  "source": "index.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/ts/index.d.ts",
   "files": [
     "src",
     "dist",
-    "register.js"
+    "preset.js"
   ],
   "author": {
     "name": "Andrew Lisowski",
diff --git a/preset.js b/preset.js
new file mode 100644
index 0000000000000000000000000000000000000000..5d73b0704f2a4499686fd8201174a9e25e2ee54b
--- /dev/null
+++ b/preset.js
@@ -0,0 +1,7 @@
+function managerEntries(entry = []) {
+  return [...entry, require.resolve('./dist/esm/preset/manager')];
+}
+
+module.exports = {
+  managerEntries
+};
diff --git a/register.js b/register.js
deleted file mode 100644
index fe7ac6e736822276796790be926d68b25354fd44..0000000000000000000000000000000000000000
--- a/register.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// NOTE: loading addons using this file is deprecated!
-// please use manager.js and preview.js files instead
-require('./dist/register');
diff --git a/src/preset/manager.tsx b/src/preset/manager.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3bbacbf577306f26b7760a4b1e547192530d2dc8
--- /dev/null
+++ b/src/preset/manager.tsx
@@ -0,0 +1,25 @@
+import { addons, types } from '@storybook/addons';
+import { themes } from '@storybook/theming';
+import * as React from 'react';
+
+import Tool, { prefersDark, store } from '../Tool';
+
+const currentStore = store();
+const currentTheme =
+  currentStore.current || (prefersDark.matches && 'dark') || 'light';
+
+addons.setConfig({
+  theme: {
+    ...themes[currentTheme],
+    ...currentStore[currentTheme]
+  }
+});
+
+addons.register('storybook/dark-mode', api => {
+  addons.add('storybook/dark-mode', {
+    title: 'dark mode',
+    type: types.TOOL,
+    match: ({ viewMode }) => viewMode === 'story' || viewMode === 'docs',
+    render: () => <Tool api={api} />
+  });
+});
diff --git a/src/register.tsx b/src/register.tsx
deleted file mode 100644
index a59fc5fc07f80fa9069f239dee1210fa7e3740b9..0000000000000000000000000000000000000000
--- a/src/register.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { addons, types } from '@storybook/addons';
-import { themes } from '@storybook/theming';
-import * as React from 'react';
-
-import Tool, { prefersDark, store } from './Tool';
-
-const currentStore = store();
-const currentTheme =
-  currentStore.current || (prefersDark.matches && 'dark') || 'light';
-
-addons.setConfig({
-  theme: {
-    ...themes[currentTheme],
-    ...currentStore[currentTheme]
-  }
-});
-
-addons.register('storybook/dark-mode', api => {
-  addons.add('storybook/dark-mode', {
-    title: 'dark mode',
-    type: types.TOOL,
-    match: ({ viewMode }) => viewMode === 'story' || viewMode === 'docs',
-    render: () => <Tool api={api} />
-  });
-});
