@atlaskit/storybook-addon-design-system 0.7.1 → 1.0.0

package/CHANGELOG.md

@@ -1,53 +1,94 @@
 # @atlaskit/storybook-addon-design-system
 
+## 1.0.0
+
+### Major Changes
+
+- [#121263](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/121263)
+  [`9b5e0cb70a67b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9b5e0cb70a67b) -
+  @atlaskit/storybook-addon-design-system has migrated to Storybook 8.0. Use the previous version if
+  your project is still on v6 or v7.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.8.0
+
+### Minor Changes
+
+- [#94453](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94453)
+  [`8b0ba81b30b3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8b0ba81b30b3) -
+  Add support for React 18 in non-strict mode.
+
 ## 0.7.1
 
 ### Patch Changes
 
-- [#93943](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/93943) [`611f5e98470c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/611f5e98470c) - Removes fallback colors from styles
+- [#93943](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/93943)
+  [`611f5e98470c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/611f5e98470c) -
+  Removes fallback colors from styles
 
 ## 0.7.0
 
 ### Minor Changes
 
-- [#94436](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94436) [`c652e1c27a4d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c652e1c27a4d) - Updates the default theme to 'auto' to ensure tokens are always applied. "Unthemed" or "No theme" is now considered an unsafe appearance.
+- [#94436](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94436)
+  [`c652e1c27a4d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c652e1c27a4d) -
+  Updates the default theme to 'auto' to ensure tokens are always applied. "Unthemed" or "No theme"
+  is now considered an unsafe appearance.
 
-  If you prefer to use a different theme, you can still override the default theme by setting the `adeTheme.defaultValue: 'none'` as mentioned in [the documentation](https://staging.atlassian.design/components/storybook-addon-design-system/code#storybook-v7-and-above).
+  If you prefer to use a different theme, you can still override the default theme by setting the
+  `adeTheme.defaultValue: 'none'` as mentioned in
+  [the documentation](https://staging.atlassian.design/components/storybook-addon-design-system/code#storybook-v7-and-above).
 
 ## 0.6.0
 
 ### Minor Changes
 
-- [#77691](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77691) [`14d18ea34852`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/14d18ea34852) - - Enables new `typography` and `shape` themes
+- [#77691](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77691)
+  [`14d18ea34852`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/14d18ea34852) - -
+  Enables new `typography` and `shape` themes
   - Sets the color theme to `auto` by default
 
 ## 0.5.2
 
 ### Patch Changes
 
-- [#32935](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32935) [`b1bdec7cce2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1bdec7cce2) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
+- [#32935](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32935)
+  [`b1bdec7cce2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1bdec7cce2) - Internal
+  change to enforce token usage for spacing properties. There is no expected visual or behaviour
+  change.
 
 ## 0.5.1
 
 ### Patch Changes
 
-- [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793) [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+- [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793)
+  [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure
+  legacy types are published for TS 4.5-4.8
 
 ## 0.5.0
 
 ### Minor Changes
 
-- [#33632](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33632) [`389ab86b2a3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/389ab86b2a3) - Adding spacing tokens to storybook addon so that users spacing tokens appear in storybook
+- [#33632](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33632)
+  [`389ab86b2a3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/389ab86b2a3) - Adding
+  spacing tokens to storybook addon so that users spacing tokens appear in storybook
 
 ### Patch Changes
 
-- [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649) [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+- [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649)
+  [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade
+  Typescript from `4.5.5` to `4.9.5`
 
 ## 0.4.0
 
 ### Minor Changes
 
-- [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258) [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
+- [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258)
+  [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip
+  minor dependency bump
 
 ### Patch Changes
 
@@ -57,7 +98,9 @@
 
 ### Patch Changes
 
-- [#27634](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27634) [`718d5ad3044`](https://bitbucket.org/atlassian/atlassian-frontend/commits/718d5ad3044) - Updates to support the new `@atlaskit/tokens` theming API.
+- [#27634](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27634)
+  [`718d5ad3044`](https://bitbucket.org/atlassian/atlassian-frontend/commits/718d5ad3044) - Updates
+  to support the new `@atlaskit/tokens` theming API.
 - Updated dependencies
 
 ## 0.3.8
@@ -76,7 +119,9 @@
 
 ### Patch Changes
 
-- [#27629](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27629) [`f824dcfff6e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f824dcfff6e) - Internal changes to satisfy various lint warnings & errors
+- [#27629](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27629)
+  [`f824dcfff6e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f824dcfff6e) - Internal
+  changes to satisfy various lint warnings & errors
 
 ## 0.3.5
 
@@ -88,31 +133,42 @@
 
 ### Patch Changes
 
-- [#26467](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26467) [`43464a5fb17`](https://bitbucket.org/atlassian/atlassian-frontend/commits/43464a5fb17) - Update split and stack theme settings to use tilde selectors
+- [#26467](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26467)
+  [`43464a5fb17`](https://bitbucket.org/atlassian/atlassian-frontend/commits/43464a5fb17) - Update
+  split and stack theme settings to use tilde selectors
 
 ## 0.3.3
 
 ### Patch Changes
 
-- [#26303](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26303) [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
+- [#26303](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26303)
+  [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op
+  change to introduce spacing tokens to design system components.
 
 ## 0.3.2
 
 ### Patch Changes
 
-- [#24660](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24660) [`d4be43fdc44`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d4be43fdc44) - Set the innerText in our hack correctly - oops!
+- [#24660](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24660)
+  [`d4be43fdc44`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d4be43fdc44) - Set the
+  innerText in our hack correctly - oops!
 
 ## 0.3.1
 
 ### Patch Changes
 
-- [#24626](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24626) [`6dd7050ad7a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6dd7050ad7a) - Reimplement the style tag hack required for enabling split & stack view in the Storybook addon
+- [#24626](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24626)
+  [`6dd7050ad7a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6dd7050ad7a) -
+  Reimplement the style tag hack required for enabling split & stack view in the Storybook addon
 
 ## 0.3.0
 
 ### Minor Changes
 
-- [#21484](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/21484) [`6c65a3147c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c65a3147c1) - Removes root selector hack from lightmode, this is no longer necessary since the default theme no longer enables tokens by default
+- [#21484](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/21484)
+  [`6c65a3147c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c65a3147c1) - Removes
+  root selector hack from lightmode, this is no longer necessary since the default theme no longer
+  enables tokens by default
 
 ### Patch Changes
 
@@ -122,7 +178,10 @@
 
 ### Patch Changes
 
-- [#21487](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/21487) [`4942487a9f6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4942487a9f6) - Fixes internal representation of CSS entrypoints for themes. This is an internal change only and does not effect public APIs.
+- [#21487](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/21487)
+  [`4942487a9f6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4942487a9f6) - Fixes
+  internal representation of CSS entrypoints for themes. This is an internal change only and does
+  not effect public APIs.
 
 ## 0.2.5
 
@@ -158,16 +217,23 @@
 
 ### Minor Changes
 
-- [#18080](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/18080) [`068c9a0b770`](https://bitbucket.org/atlassian/atlassian-frontend/commits/068c9a0b770) - Refactors the storybook addon into a "tool addon"
+- [#18080](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/18080)
+  [`068c9a0b770`](https://bitbucket.org/atlassian/atlassian-frontend/commits/068c9a0b770) -
+  Refactors the storybook addon into a "tool addon"
 
 ## 0.1.1
 
 ### Patch Changes
 
-- [#18020](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/18020) [`32f8832d6c5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/32f8832d6c5) - Temporarily disable css imports to side-step recent changes to the monorepo which trigged a bug
+- [#18020](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/18020)
+  [`32f8832d6c5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/32f8832d6c5) -
+  Temporarily disable css imports to side-step recent changes to the monorepo which trigged a bug
 
 ## 0.1.0
 
 ### Minor Changes
 
-- [#17460](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/17460) [`ddbec37a16c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ddbec37a16c) - Initial release of the design system storybook addon package. Intended to be a generic package for all storybook releated DS tooling
+- [#17460](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/17460)
+  [`ddbec37a16c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ddbec37a16c) - Initial
+  release of the design system storybook addon package. Intended to be a generic package for all
+  storybook releated DS tooling

package/constellation/index/props.mdx

@@ -1,4 +1,5 @@
-After installing the package, register the addon with your Storybook configuration in the `.storybook/main.js` file.
+After installing the package, register the addon with your Storybook configuration in the
+`.storybook/main.js` file.
 
 ```diff
 module.exports = {
@@ -10,7 +11,8 @@ module.exports = {
 
 ## Storybook v6 and below
 
-Add the decorator to `.storybook/preview.js`, which is responsible for applying the logic which has the ability to modify the DOM of your stories.
+Add the decorator to `.storybook/preview.js`, which is responsible for applying the logic which has
+the ability to modify the DOM of your stories.
 
 ```diff
 + import { withDesignTokens } from '@atlaskit/storybook-addon-design-system';
@@ -25,9 +27,12 @@ const { addDecorator } = require('@storybook/react');
 For Storybook version 7, the following changes are necessary:
 
 1. Initialising the `globalTypes.adsTheme` property in the global context
-2. Disable the [built in `backgrounds` add on](https://storybook.js.org/docs/essentials/backgrounds#disable-backgrounds), as it conflicts with the ADS theming
+2. Disable the
+   [built in `backgrounds` add on](https://storybook.js.org/docs/essentials/backgrounds#disable-backgrounds),
+   as it conflicts with the ADS theming
 
-Both of these can be done in [the `preview` file](https://storybook.js.org/docs/configure#configure-story-rendering):
+Both of these can be done in
+[the `preview` file](https://storybook.js.org/docs/configure#configure-story-rendering):
 
 ```diff
 + import { withDesignTokens } from '@atlaskit/storybook-addon-design-system';

package/constellation/index/usage.mdx

@@ -2,12 +2,15 @@
 order: 0
 ---
 
-The Design System Storybook Addon allows you to test your UI components in various themes, directly in Storybook.
-It allows you to visualize and compare component appearances across different themes, ensuring correct and consistent design token application.
+The Design System Storybook Addon allows you to test your UI components in various themes, directly
+in Storybook. It allows you to visualize and compare component appearances across different themes,
+ensuring correct and consistent design token application.
 
 ![Design tokens storybook addon screenshot](../images/storybook-addon.png 'Design tokens storybook addon screenshot')
 
 ## Features
 
-- **Theme Testing:** Test UI components in multiple themes to ensure they look good across various styles and branding choices.
-- **Split View:** The split view functionality allows you compare components side-by-side in different themes.
+- **Theme Testing:** Test UI components in multiple themes to ensure they look good across various
+  styles and branding choices.
+- **Split View:** The split view functionality allows you compare components side-by-side in
+  different themes.

package/dist/cjs/decorator.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireWildcard(require("react"));
+var _previewApi = require("@storybook/preview-api");
+var _tokens = require("@atlaskit/tokens");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var splitColumnStyles = {
+  position: 'absolute',
+  boxSizing: 'border-box',
+  width: '50vw',
+  height: '100vh',
+  overflow: 'auto',
+  padding: '10px',
+  background: (0, _tokens.token)('elevation.surface'),
+  color: (0, _tokens.token)('color.text')
+};
+var stackColumnStyles = {
+  position: 'absolute',
+  boxSizing: 'border-box',
+  width: '100%',
+  height: '50%',
+  overflow: 'auto',
+  padding: '10px',
+  background: (0, _tokens.token)('elevation.surface'),
+  color: (0, _tokens.token)('color.text')
+};
+var withDesignTokens = function withDesignTokens(StoryFn, context) {
+  var theme = context.globals.adsTheme || 'auto';
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _previewApi.useEffect)(function () {
+    (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.t0 = theme;
+            _context.next = _context.t0 === 'light' ? 3 : _context.t0 === 'dark' ? 3 : _context.t0 === 'auto' ? 3 : _context.t0 === 'split' ? 6 : _context.t0 === 'stack' ? 6 : _context.t0 === 'none' ? 10 : 14;
+            break;
+          case 3:
+            _context.next = 5;
+            return (0, _tokens.setGlobalTheme)({
+              colorMode: theme,
+              spacing: 'spacing',
+              shape: 'shape',
+              typography: 'typography-minor3'
+            });
+          case 5:
+            return _context.abrupt("break", 15);
+          case 6:
+            _context.next = 8;
+            return (0, _tokens.setGlobalTheme)({
+              colorMode: 'light',
+              spacing: 'spacing',
+              shape: 'shape',
+              typography: 'typography-minor3'
+            });
+          case 8:
+            document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
+              var clone = el.cloneNode(true);
+              clone.setAttribute('data-theme', clone.getAttribute('data-theme') + '-clone');
+              // HACK: re-target theme selectors to split div containers
+              clone.textContent = clone.textContent.replace(/html\[/g, '[');
+              document.head.append(clone);
+            });
+            return _context.abrupt("break", 15);
+          case 10:
+            delete document.documentElement.dataset.theme;
+            delete document.documentElement.dataset.colorMode;
+            document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
+              return el.remove();
+            });
+            return _context.abrupt("break", 15);
+          case 14:
+            return _context.abrupt("break", 15);
+          case 15:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }))();
+  }, [context.id, theme]);
+  function renderStory() {
+    var story = StoryFn(_objectSpread(_objectSpread({}, context), {}, {
+      globals: _objectSpread(_objectSpread({}, context.globals), {}, {
+        adsTheme: theme
+      })
+    }));
+    if (theme === 'split' || theme === 'stack') {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        "data-theme": "light:light",
+        "data-color-mode": "light"
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: theme === 'split' ? _objectSpread(_objectSpread({}, splitColumnStyles), {}, {
+          inset: '0px 50vw 0px 0px'
+        }) : _objectSpread(_objectSpread({}, stackColumnStyles), {}, {
+          inset: '0px 0px 50% 0px'
+        })
+      }, story), /*#__PURE__*/_react.default.createElement("div", {
+        "data-theme": "dark:dark",
+        "data-color-mode": "dark"
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: theme === 'split' ? _objectSpread(_objectSpread({}, splitColumnStyles), {}, {
+          inset: '0px 0px 0px 50vw'
+        }) : _objectSpread(_objectSpread({}, stackColumnStyles), {}, {
+          inset: '50% 0px 0px 0px'
+        })
+      }, story));
+    }
+    return /*#__PURE__*/_react.default.createElement("div", null, story);
+  }
+  return renderStory();
+};
+var _default = exports.default = withDesignTokens;

package/dist/cjs/index.js

@@ -3,10 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "withDesignTokens", {
-  enumerable: true,
-  get: function get() {
-    return _tokens.withDesignTokens;
-  }
-});
-var _tokens = require("./tokens");
+exports.default = void 0;
+// eslint-disable-next-line import/no-anonymous-default-export
+var _default = exports.default = {};

package/dist/cjs/manager.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _managerApi = require("@storybook/manager-api");
+var _constants = require("./constants");
+var _tool = _interopRequireDefault(require("./tool"));
+_managerApi.addons.register(_constants.ADDON_ID, function () {
+  _managerApi.addons.add(_constants.TOOL_ID, {
+    type: _managerApi.types.TOOL,
+    title: _constants.TITLE,
+    match: function match(_ref) {
+      var viewMode = _ref.viewMode;
+      return !!(viewMode && viewMode.match(/^(story|docs)$/));
+    },
+    render: _tool.default
+  });
+});

package/dist/cjs/preset.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.webpack = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var webpack = exports.webpack = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(config) {
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          return _context.abrupt("return", config);
+        case 1:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function webpack(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();

package/dist/cjs/preview.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _decorator = _interopRequireDefault(require("./decorator"));
+/**
+ * A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators
+ * in order to augment stories:
+ * - with extra rendering
+ * - gather details about how a story is rendered
+ *
+ * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.
+ *
+ * https://storybook.js.org/docs/react/writing-stories/decorators
+ */
+
+var preview = {
+  decorators: [_decorator.default],
+  globals: {
+    adsTheme: 'auto'
+  }
+};
+var _default = exports.default = preview;

package/dist/cjs/{tokens/components/tool.js → tool.js}

@@ -8,35 +8,36 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _api = require("@storybook/api");
 var _components = require("@storybook/components");
-var _constants = require("../constants");
+var _icons = require("@storybook/icons");
+var _managerApi = require("@storybook/manager-api");
+var _constants = require("./constants");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
 var themeOptions = [{
   id: 'auto',
   title: 'Same as system',
-  icon: 'mirror'
+  icon: /*#__PURE__*/_react.default.createElement(_icons.MirrorIcon, null)
 }, {
   id: 'light',
   title: 'Light theme',
-  icon: 'circlehollow'
+  icon: /*#__PURE__*/_react.default.createElement(_icons.CircleHollowIcon, null)
 }, {
   id: 'dark',
   title: 'Dark theme',
-  icon: 'circle'
+  icon: /*#__PURE__*/_react.default.createElement(_icons.CircleIcon, null)
 }, {
   id: 'split',
   title: 'Side by side',
-  icon: 'sidebar'
+  icon: /*#__PURE__*/_react.default.createElement(_icons.SidebarIcon, null)
 }, {
   id: 'stack',
   title: 'Stacked',
-  icon: 'bottombar'
+  icon: /*#__PURE__*/_react.default.createElement(_icons.BottomBarIcon, null)
 }, {
   id: 'none',
   title: 'Disable (Unsafe)',
-  icon: 'cross'
+  icon: /*#__PURE__*/_react.default.createElement(_icons.CrossIcon, null)
 }];
 
 /**
@@ -50,7 +51,7 @@ var Tool = function Tool() {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isVisible = _useState2[0],
     setIsVisible = _useState2[1];
-  var _useGlobals = (0, _api.useGlobals)(),
+  var _useGlobals = (0, _managerApi.useGlobals)(),
     _useGlobals2 = (0, _slicedToArray2.default)(_useGlobals, 2),
     adsTheme = _useGlobals2[0].adsTheme,
     updateGlobals = _useGlobals2[1];
@@ -61,9 +62,10 @@ var Tool = function Tool() {
   }, [updateGlobals]);
   return /*#__PURE__*/_react.default.createElement(_components.WithTooltip, {
     placement: "top",
-    trigger: "click",
-    closeOnClick: true,
-    onVisibilityChange: setIsVisible,
+    trigger: "click"
+    // closeOnClick
+    ,
+    onVisibleChange: setIsVisible,
     tooltip: function tooltip(_ref) {
       var onHide = _ref.onHide;
       return /*#__PURE__*/_react.default.createElement(_components.TooltipLinkList, {
@@ -75,12 +77,7 @@ var Tool = function Tool() {
             id: id,
             title: title,
             active: adsTheme === id,
-            right: /*#__PURE__*/_react.default.createElement(_components.Icons, {
-              style: {
-                opacity: 1
-              },
-              icon: icon
-            }),
+            icon: icon,
             onClick: function onClick() {
               setTheme(id);
               onHide();
@@ -93,11 +90,9 @@ var Tool = function Tool() {
     key: _constants.TOOL_ID,
     active: isVisible,
     title: "Apply ADS themes to your story"
-  }, /*#__PURE__*/_react.default.createElement(_components.Icons, {
-    icon: ((_themeOptions$find = themeOptions.find(function (_ref3) {
-      var id = _ref3.id;
-      return id === adsTheme;
-    })) === null || _themeOptions$find === void 0 ? void 0 : _themeOptions$find.icon) || 'circlehollow'
-  }), '\xa0ADS Theme'));
+  }, (_themeOptions$find = themeOptions.find(function (_ref3) {
+    var id = _ref3.id;
+    return adsTheme === id;
+  })) === null || _themeOptions$find === void 0 ? void 0 : _themeOptions$find.icon, '\xa0ADS Theme'));
 };
 var _default = exports.default = Tool;