@storybook/components 6.5.0-alpha.2 → 6.5.0-alpha.20

package/dist/cjs/blocks/Story.js

@@ -29,6 +29,8 @@ exports.StorySkeleton = exports.Story = exports.StoryError = void 0;
 
 require("core-js/modules/es.array.concat.js");
 
+var _global = _interopRequireDefault(require("global"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _IFrame = require("./IFrame");
@@ -39,15 +41,20 @@ var _ZoomContext = require("./ZoomContext");
 
 var _ = require("..");
 
+var _getStoryHref = require("../utils/getStoryHref");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 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; }
 
-var BASE_URL = 'iframe.html';
+var PREVIEW_URL = _global.default.PREVIEW_URL;
+var BASE_URL = PREVIEW_URL || 'iframe.html';
 var StoryError;
 /** error message for Story with null storyFn
  * if the story id exists, it must be pointing to a non-existing story
@@ -89,7 +96,9 @@ var IFrameStory = function IFrameStory(_ref2) {
       key: "iframe",
       id: "iframe--".concat(id),
       title: title,
-      src: "".concat(BASE_URL, "?id=").concat(id, "&viewMode=story"),
+      src: (0, _getStoryHref.getStoryHref)(BASE_URL, id, {
+        viewMode: 'story'
+      }),
       allowFullScreen: true,
       scale: scale,
       style: {

package/dist/cjs/blocks/Toolbar.js

@@ -2,8 +2,6 @@
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-require("core-js/modules/es.object.keys.js");
-
 require("core-js/modules/es.symbol.js");
 
 require("core-js/modules/es.weak-map.js");
@@ -27,10 +25,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Toolbar = void 0;
 
-require("core-js/modules/es.array.concat.js");
-
 require("core-js/modules/es.array.map.js");
 
+require("core-js/modules/es.object.keys.js");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _theming = require("@storybook/theming");
@@ -41,6 +39,8 @@ var _icon = require("../icon/icon");
 
 var _button = require("../bar/button");
 
+var _getStoryHref = require("../utils/getStoryHref");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
@@ -87,7 +87,7 @@ var Eject = function Eject(_ref2) {
       storyId = _ref2.storyId;
   return /*#__PURE__*/_react.default.createElement(_button.IconButton, {
     key: "opener",
-    href: "".concat(baseUrl, "?id=").concat(storyId),
+    href: (0, _getStoryHref.getStoryHref)(baseUrl, storyId),
     target: "_blank",
     title: "Open canvas in new tab"
   }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {

package/dist/cjs/controls/Number.js

@@ -121,6 +121,13 @@ var NumberControl = function NumberControl(_ref) {
   (0, _react.useEffect)(function () {
     if (forceVisible && htmlElRef.current) htmlElRef.current.select();
   }, [forceVisible]);
+  (0, _react.useEffect)(function () {
+    var newInputValue = typeof value === 'number' ? value : '';
+
+    if (inputValue !== newInputValue) {
+      setInputValue(value);
+    }
+  }, [value]);
 
   if (!forceVisible && value === undefined) {
     return /*#__PURE__*/_react.default.createElement(_form.Form.Button, {

package/dist/cjs/index.js

@@ -37,7 +37,8 @@ var _exportNames = {
   Symbols: true,
   StorybookLogo: true,
   StorybookIcon: true,
-  Loader: true
+  Loader: true,
+  getStoryHref: true
 };
 Object.defineProperty(exports, "components", {
   enumerable: true,
@@ -237,6 +238,12 @@ Object.defineProperty(exports, "Loader", {
     return _Loader.Loader;
   }
 });
+Object.defineProperty(exports, "getStoryHref", {
+  enumerable: true,
+  get: function get() {
+    return _getStoryHref.getStoryHref;
+  }
+});
 exports.resetComponents = void 0;
 
 require("core-js/modules/web.dom-collections.for-each.js");
@@ -337,6 +344,8 @@ Object.keys(_controls).forEach(function (key) {
 
 var _Loader = require("./Loader/Loader");
 
+var _getStoryHref = require("./utils/getStoryHref");
+
 // Typography
 // UI
 // Forms
@@ -344,6 +353,7 @@ var _Loader = require("./Loader/Loader");
 // Toolbar and subcomponents
 // Doc blocks
 // Loader
+// Utils
 var resetComponents = {};
 exports.resetComponents = resetComponents;
 Object.keys(_DocumentFormatting.components).forEach(function (key) {

package/dist/cjs/utils/getStoryHref.js

@@ -0,0 +1,71 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.array.from.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStoryHref = void 0;
+
+require("core-js/modules/es.string.split.js");
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.object.assign.js");
+
+require("core-js/modules/es.array.concat.js");
+
+var _qs = _interopRequireDefault(require("qs"));
+
+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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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; }
+
+var getStoryHref = function getStoryHref(baseUrl, storyId) {
+  var additionalParams = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+  var _baseUrl$split = baseUrl.split('?'),
+      _baseUrl$split2 = _slicedToArray(_baseUrl$split, 2),
+      url = _baseUrl$split2[0],
+      paramsStr = _baseUrl$split2[1];
+
+  var params = paramsStr ? Object.assign({}, _qs.default.parse(paramsStr), additionalParams, {
+    id: storyId
+  }) : Object.assign({}, additionalParams, {
+    id: storyId
+  });
+  return "".concat(url).concat(_qs.default.stringify(params, {
+    addQueryPrefix: true,
+    encode: false
+  }));
+};
+
+exports.getStoryHref = getStoryHref;

package/dist/esm/blocks/Story.js

@@ -5,12 +5,15 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.symbol.js";
+import global from 'global';
 import React, { createElement, Fragment } from 'react';
 import { IFrame } from './IFrame';
 import { EmptyBlock } from './EmptyBlock';
 import { ZoomContext } from './ZoomContext';
 import { Loader } from '..';
-var BASE_URL = 'iframe.html';
+import { getStoryHref } from '../utils/getStoryHref';
+var PREVIEW_URL = global.PREVIEW_URL;
+var BASE_URL = PREVIEW_URL || 'iframe.html';
 export var StoryError;
 /** error message for Story with null storyFn
  * if the story id exists, it must be pointing to a non-existing story
@@ -50,7 +53,9 @@ var IFrameStory = function IFrameStory(_ref2) {
       key: "iframe",
       id: "iframe--".concat(id),
       title: title,
-      src: "".concat(BASE_URL, "?id=").concat(id, "&viewMode=story"),
+      src: getStoryHref(BASE_URL, id, {
+        viewMode: 'story'
+      }),
       allowFullScreen: true,
       scale: scale,
       style: {

package/dist/esm/blocks/Toolbar.js

@@ -1,16 +1,17 @@
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+
 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; }
 
-import "core-js/modules/es.array.concat.js";
-import "core-js/modules/es.array.map.js";
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.symbol.js";
 import React, { Fragment } from 'react';
 import { styled } from '@storybook/theming';
 import { FlexBar } from '../bar/bar';
 import { Icons } from '../icon/icon';
 import { IconButton, IconButtonSkeleton } from '../bar/button';
+import { getStoryHref } from '../utils/getStoryHref';
 
 var Zoom = function Zoom(_ref) {
   var zoom = _ref.zoom,
@@ -50,7 +51,7 @@ var Eject = function Eject(_ref2) {
       storyId = _ref2.storyId;
   return /*#__PURE__*/React.createElement(IconButton, {
     key: "opener",
-    href: "".concat(baseUrl, "?id=").concat(storyId),
+    href: getStoryHref(baseUrl, storyId),
     target: "_blank",
     title: "Open canvas in new tab"
   }, /*#__PURE__*/React.createElement(Icons, {

package/dist/esm/controls/Number.js

@@ -81,6 +81,13 @@ export var NumberControl = function NumberControl(_ref) {
   useEffect(function () {
     if (forceVisible && htmlElRef.current) htmlElRef.current.select();
   }, [forceVisible]);
+  useEffect(function () {
+    var newInputValue = typeof value === 'number' ? value : '';
+
+    if (inputValue !== newInputValue) {
+      setInputValue(value);
+    }
+  }, [value]);
 
   if (!forceVisible && value === undefined) {
     return /*#__PURE__*/React.createElement(Form.Button, {

package/dist/esm/index.js

@@ -36,7 +36,9 @@ export { StorybookIcon } from './brand/StorybookIcon'; // Doc blocks
 export * from './blocks';
 export * from './controls'; // Loader
 
-export { Loader } from './Loader/Loader';
+export { Loader } from './Loader/Loader'; // Utils
+
+export { getStoryHref } from './utils/getStoryHref';
 export * from './typography/DocumentFormatting';
 export { rawComponents as components };
 var resetComponents = {};

package/dist/esm/utils/getStoryHref.js

@@ -0,0 +1,46 @@
+import "core-js/modules/es.string.split.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.object.assign.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.array.from.js";
+
+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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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 qs from 'qs';
+export var getStoryHref = function getStoryHref(baseUrl, storyId) {
+  var additionalParams = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+  var _baseUrl$split = baseUrl.split('?'),
+      _baseUrl$split2 = _slicedToArray(_baseUrl$split, 2),
+      url = _baseUrl$split2[0],
+      paramsStr = _baseUrl$split2[1];
+
+  var params = paramsStr ? Object.assign({}, qs.parse(paramsStr), additionalParams, {
+    id: storyId
+  }) : Object.assign({}, additionalParams, {
+    id: storyId
+  });
+  return "".concat(url).concat(qs.stringify(params, {
+    addQueryPrefix: true,
+    encode: false
+  }));
+};

package/dist/modern/blocks/Story.js

@@ -1,11 +1,16 @@
 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; }
 
+import global from 'global';
 import React, { createElement, Fragment } from 'react';
 import { IFrame } from './IFrame';
 import { EmptyBlock } from './EmptyBlock';
 import { ZoomContext } from './ZoomContext';
 import { Loader } from '..';
-const BASE_URL = 'iframe.html';
+import { getStoryHref } from '../utils/getStoryHref';
+const {
+  PREVIEW_URL
+} = global;
+const BASE_URL = PREVIEW_URL || 'iframe.html';
 export let StoryError;
 /** error message for Story with null storyFn
  * if the story id exists, it must be pointing to a non-existing story
@@ -42,7 +47,9 @@ const IFrameStory = ({
     key: "iframe",
     id: `iframe--${id}`,
     title: title,
-    src: `${BASE_URL}?id=${id}&viewMode=story`,
+    src: getStoryHref(BASE_URL, id, {
+      viewMode: 'story'
+    }),
     allowFullScreen: true,
     scale: scale,
     style: {

package/dist/modern/blocks/Toolbar.js

@@ -5,6 +5,7 @@ import { styled } from '@storybook/theming';
 import { FlexBar } from '../bar/bar';
 import { Icons } from '../icon/icon';
 import { IconButton, IconButtonSkeleton } from '../bar/button';
+import { getStoryHref } from '../utils/getStoryHref';
 
 const Zoom = ({
   zoom,
@@ -43,7 +44,7 @@ const Eject = ({
   storyId
 }) => /*#__PURE__*/React.createElement(IconButton, {
   key: "opener",
-  href: `${baseUrl}?id=${storyId}`,
+  href: getStoryHref(baseUrl, storyId),
   target: "_blank",
   title: "Open canvas in new tab"
 }, /*#__PURE__*/React.createElement(Icons, {

package/dist/modern/controls/Number.js

@@ -43,6 +43,13 @@ export const NumberControl = ({
   useEffect(() => {
     if (forceVisible && htmlElRef.current) htmlElRef.current.select();
   }, [forceVisible]);
+  useEffect(() => {
+    const newInputValue = typeof value === 'number' ? value : '';
+
+    if (inputValue !== newInputValue) {
+      setInputValue(value);
+    }
+  }, [value]);
 
   if (!forceVisible && value === undefined) {
     return /*#__PURE__*/React.createElement(Form.Button, {

package/dist/modern/index.js

@@ -33,7 +33,9 @@ export { StorybookIcon } from './brand/StorybookIcon'; // Doc blocks
 export * from './blocks';
 export * from './controls'; // Loader
 
-export { Loader } from './Loader/Loader';
+export { Loader } from './Loader/Loader'; // Utils
+
+export { getStoryHref } from './utils/getStoryHref';
 export * from './typography/DocumentFormatting';
 export { rawComponents as components };
 const resetComponents = {};

package/dist/modern/utils/getStoryHref.js

@@ -0,0 +1,13 @@
+import qs from 'qs';
+export const getStoryHref = (baseUrl, storyId, additionalParams = {}) => {
+  const [url, paramsStr] = baseUrl.split('?');
+  const params = paramsStr ? Object.assign({}, qs.parse(paramsStr), additionalParams, {
+    id: storyId
+  }) : Object.assign({}, additionalParams, {
+    id: storyId
+  });
+  return `${url}${qs.stringify(params, {
+    addQueryPrefix: true,
+    encode: false
+  })}`;
+};

package/dist/ts3.4/index.d.ts

@@ -28,6 +28,7 @@ export { StorybookIcon } from './brand/StorybookIcon';
 export * from './blocks';
 export * from './controls';
 export { Loader } from './Loader/Loader';
+export { getStoryHref } from './utils/getStoryHref';
 export * from './typography/DocumentFormatting';
 export { rawComponents as components };
 declare const resetComponents: Record<string, ElementType>;

package/dist/ts3.4/utils/getStoryHref.d.ts

@@ -0,0 +1 @@
+export declare const getStoryHref: (baseUrl: string, storyId: string, additionalParams?: Record<string, string>) => string;

package/dist/ts3.9/index.d.ts

@@ -28,6 +28,7 @@ export { StorybookIcon } from './brand/StorybookIcon';
 export * from './blocks';
 export * from './controls';
 export { Loader } from './Loader/Loader';
+export { getStoryHref } from './utils/getStoryHref';
 export * from './typography/DocumentFormatting';
 export { rawComponents as components };
 declare const resetComponents: Record<string, ElementType>;

package/dist/ts3.9/utils/getStoryHref.d.ts

@@ -0,0 +1 @@
+export declare const getStoryHref: (baseUrl: string, storyId: string, additionalParams?: Record<string, string>) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "6.5.0-alpha.2",
+  "version": "6.5.0-alpha.20",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -41,9 +41,9 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.6.0",
-    "@storybook/client-logger": "6.5.0-alpha.2",
+    "@storybook/client-logger": "6.5.0-alpha.20",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/theming": "6.5.0-alpha.2",
+    "@storybook/theming": "6.5.0-alpha.20",
     "@types/color-convert": "^2.0.0",
     "@types/overlayscrollbars": "^1.12.0",
     "@types/react-syntax-highlighter": "11.0.5",
@@ -57,9 +57,10 @@
     "overlayscrollbars": "^1.13.1",
     "polished": "^4.0.5",
     "prop-types": "^15.7.2",
+    "qs": "^6.10.0",
     "react-colorful": "^5.1.2",
     "react-popper-tooltip": "^3.1.1",
-    "react-syntax-highlighter": "^13.5.3",
+    "react-syntax-highlighter": "^15.4.5",
     "react-textarea-autosize": "^8.3.0",
     "regenerator-runtime": "^0.13.7",
     "ts-dedent": "^2.0.0",
@@ -76,6 +77,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ca9d89393f36d156e34819fe120eb7e6819245f4",
+  "gitHead": "8b9f966f4378d540c767bdbeb1840f910ebc3375",
   "sbmodern": "dist/modern/index.js"
 }