@storybook/components 6.5.0-alpha.44 → 6.5.0-alpha.45

package/dist/esm/{syntaxhighlighter-9779b0b7.js → syntaxhighlighter-d559b1c8.js}

@@ -50,7 +50,7 @@ import "core-js/modules/es.set.js";
 import "core-js/modules/es.string.trim.js";
 import "core-js/modules/esnext.global-this.js";
 import "core-js/modules/es.object.entries.js";
-import { _ as _objectWithoutPropertiesLoose, a as _extends, c as commonjsGlobal, m as memoize, d as dedent, b as __awaiter, S as ScrollArea, e as __rest, A as ActionBar, w as window_1 } from './index-37675b63.js';
+import { _ as _objectWithoutPropertiesLoose, a as _extends, c as commonjsGlobal, m as memoize, d as dedent, b as __awaiter, S as ScrollArea, e as __rest, A as ActionBar, w as window_1 } from './index-be4edbbc.js';
 import React__default, { useState } from 'react';
 import { logger } from '@storybook/client-logger';
 import { styled } from '@storybook/theming';
@@ -84,8 +84,8 @@ function jsx(Prism) {
     spread = re(spread).source;
     Prism.languages.jsx = Prism.languages.extend('markup', javascript);
     Prism.languages.jsx.tag.pattern = re(/<\/?(?:[\w.:-]+(?:<S>+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|<BRACES>))?|<SPREAD>))*<S>*\/?)?>/.source);
-    Prism.languages.jsx.tag.inside['tag'].pattern = /^<\/?[^\s>\/]*/i;
-    Prism.languages.jsx.tag.inside['attr-value'].pattern = /=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/i;
+    Prism.languages.jsx.tag.inside['tag'].pattern = /^<\/?[^\s>\/]*/;
+    Prism.languages.jsx.tag.inside['attr-value'].pattern = /=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/;
     Prism.languages.jsx.tag.inside['tag'].inside['class-name'] = /^[A-Z]\w*(?:\.[A-Z]\w*)*$/;
     Prism.languages.jsx.tag.inside['comment'] = javascript['comment'];
     Prism.languages.insertBefore('inside', 'attr-name', {
@@ -98,14 +98,14 @@ function jsx(Prism) {
       script: {
         // Allow for two levels of nesting
         pattern: re(/=<BRACES>/.source),
+        alias: 'language-javascript',
         inside: {
           'script-punctuation': {
             pattern: /^=(?=\{)/,
             alias: 'punctuation'
           },
           rest: Prism.languages.jsx
-        },
-        alias: 'language-javascript'
+        }
       }
     }, Prism.languages.jsx.tag); // The following will handle plain text inside tags
 
@@ -262,7 +262,7 @@ function bash(Prism) {
         }
       }, /\$(?:\w+|[#?*!@$])/],
       // Escape sequences from echo and printf's manuals, and escaped quotes.
-      entity: /\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|x[0-9a-fA-F]{1,2}|u[0-9a-fA-F]{4}|U[0-9a-fA-F]{8})/
+      entity: /\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|U[0-9a-fA-F]{8}|u[0-9a-fA-F]{4}|x[0-9a-fA-F]{1,2})/
     };
     Prism.languages.bash = {
       shebang: {
@@ -348,22 +348,22 @@ function bash(Prism) {
       },
       variable: insideString.variable,
       function: {
-        pattern: /(^|[\s;|&]|[<>]\()(?:add|apropos|apt|aptitude|apt-cache|apt-get|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|composer|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,
+        pattern: /(^|[\s;|&]|[<>]\()(?:add|apropos|apt|apt-cache|apt-get|aptitude|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|composer|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|docker|docker-compose|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|node|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|podman|podman-compose|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vcpkg|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,
         lookbehind: true
       },
       keyword: {
-        pattern: /(^|[\s;|&]|[<>]\()(?:if|then|else|elif|fi|for|while|in|case|esac|function|select|do|done|until)(?=$|[)\s;|&])/,
+        pattern: /(^|[\s;|&]|[<>]\()(?:case|do|done|elif|else|esac|fi|for|function|if|in|select|then|until|while)(?=$|[)\s;|&])/,
         lookbehind: true
       },
       // https://www.gnu.org/software/bash/manual/html_node/Shell-Builtin-Commands.html
       builtin: {
-        pattern: /(^|[\s;|&]|[<>]\()(?:\.|:|break|cd|continue|eval|exec|exit|export|getopts|hash|pwd|readonly|return|shift|test|times|trap|umask|unset|alias|bind|builtin|caller|command|declare|echo|enable|help|let|local|logout|mapfile|printf|read|readarray|source|type|typeset|ulimit|unalias|set|shopt)(?=$|[)\s;|&])/,
+        pattern: /(^|[\s;|&]|[<>]\()(?:\.|:|alias|bind|break|builtin|caller|cd|command|continue|declare|echo|enable|eval|exec|exit|export|getopts|hash|help|let|local|logout|mapfile|printf|pwd|read|readarray|readonly|return|set|shift|shopt|source|test|times|trap|type|typeset|ulimit|umask|unalias|unset)(?=$|[)\s;|&])/,
         lookbehind: true,
         // Alias added to make those easier to distinguish from strings.
         alias: 'class-name'
       },
       boolean: {
-        pattern: /(^|[\s;|&]|[<>]\()(?:true|false)(?=$|[)\s;|&])/,
+        pattern: /(^|[\s;|&]|[<>]\()(?:false|true)(?=$|[)\s;|&])/,
         lookbehind: true
       },
       'file-descriptor': {
@@ -493,7 +493,7 @@ function jsExtras(Prism) {
       'known-class-name': [{
         // standard built-ins
         // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects
-        pattern: /\b(?:(?:(?:Uint|Int)(?:8|16|32)|Uint8Clamped|Float(?:32|64))?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|(?:Weak)?(?:Set|Map)|WebAssembly)\b/,
+        pattern: /\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,
         alias: 'class-name'
       }, {
         // errors
@@ -533,7 +533,7 @@ function jsExtras(Prism) {
       pattern: /\b(?:as|default|export|from|import)\b/,
       alias: 'module'
     }, {
-      pattern: /\b(?:await|break|catch|continue|do|else|for|finally|if|return|switch|throw|try|while|yield)\b/,
+      pattern: /\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,
       alias: 'control-flow'
     }, {
       pattern: /\bnull\b/,
@@ -563,7 +563,7 @@ function jsExtras(Prism) {
       },
       dom: {
         // this contains only a few commonly used DOM variables
-        pattern: /\b(?:document|location|navigator|performance|(?:local|session)Storage|window)\b/,
+        pattern: /\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,
         alias: 'variable'
       },
       console: {
@@ -617,7 +617,7 @@ function json(Prism) {
     number: /-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,
     punctuation: /[{}[\],]/,
     operator: /:/,
-    boolean: /\b(?:true|false)\b/,
+    boolean: /\b(?:false|true)\b/,
     null: {
       pattern: /\bnull\b/,
       alias: 'keyword'
@@ -651,18 +651,18 @@ function graphql(Prism) {
       greedy: true
     },
     number: /(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,
-    boolean: /\b(?:true|false)\b/,
+    boolean: /\b(?:false|true)\b/,
     variable: /\$[a-z_]\w*/i,
     directive: {
       pattern: /@[a-z_]\w*/i,
       alias: 'function'
     },
     'attr-name': {
-      pattern: /[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,
+      pattern: /\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,
       greedy: true
     },
     'atom-input': {
-      pattern: /[A-Z]\w*Input(?=!?.*$)/m,
+      pattern: /\b[A-Z]\w*Input\b/,
       alias: 'class-name'
     },
     scalar: /\b(?:Boolean|Float|ID|Int|String)\b/,
@@ -1065,7 +1065,7 @@ function markdown(Prism) {
         greedy: true,
         inside: {
           punctuation: /^---|---$/,
-          'font-matter': {
+          'front-matter': {
             pattern: /\S+(?:\s+\S+)*/,
             alias: ['yaml', 'language-yaml'],
             inside: Prism.languages.yaml
@@ -1503,7 +1503,7 @@ function yaml(Prism) {
         alias: 'number'
       },
       boolean: {
-        pattern: createValuePattern(/true|false/.source, 'i'),
+        pattern: createValuePattern(/false|true/.source, 'i'),
         lookbehind: true,
         alias: 'important'
       },
@@ -1544,14 +1544,15 @@ function typescript(Prism) {
         inside: null // see below
 
       },
-      builtin: /\b(?:string|Function|any|number|boolean|Array|symbol|console|Promise|unknown|never)\b/
+      builtin: /\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/
     }); // The keywords TypeScript adds to JavaScript
 
-    Prism.languages.typescript.keyword.push(/\b(?:abstract|as|declare|implements|is|keyof|readonly|require)\b/, // keywords that have to be followed by an identifier
+    Prism.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/, // keywords that have to be followed by an identifier
     /\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/, // This is for `import type *, {}`
     /\btype\b(?=\s*(?:[\{*]|$))/); // doesn't work with TS because TS is too complex
 
-    delete Prism.languages.typescript['parameter']; // a version of typescript specifically for highlighting types
+    delete Prism.languages.typescript['parameter'];
+    delete Prism.languages.typescript['literal-property']; // a version of typescript specifically for highlighting types
 
     var typeInside = Prism.languages.extend('typescript', {});
     delete typeInside['class-name'];
@@ -1599,7 +1600,10 @@ function tsx(Prism) {
 
   (function (Prism) {
     var typescript = Prism.util.clone(Prism.languages.typescript);
-    Prism.languages.tsx = Prism.languages.extend('jsx', typescript); // This will prevent collisions between TSX tags and TS generic types.
+    Prism.languages.tsx = Prism.languages.extend('jsx', typescript); // doesn't work with TS because TS is too complex
+
+    delete Prism.languages.tsx['parameter'];
+    delete Prism.languages.tsx['literal-property']; // This will prevent collisions between TSX tags and TS generic types.
     // Idea by https://github.com/karlhorky
     // Discussion: https://github.com/PrismJS/prism/issues/2594#issuecomment-710666928
 
@@ -3993,7 +3997,7 @@ var prismCore = {
 
   var Prism = function (_self) {
     // Private helper vars
-    var lang = /\blang(?:uage)?-([\w-]+)\b/i;
+    var lang = /(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i;
     var uniqueId = 0; // The grammar object for plaintext
 
     var plainTextGrammar = {};
@@ -4020,6 +4024,28 @@ var prismCore = {
        * @public
        */
       manual: _self.Prism && _self.Prism.manual,
+
+      /**
+       * By default, if Prism is in a web worker, it assumes that it is in a worker it created itself, so it uses
+       * `addEventListener` to communicate with its parent instance. However, if you're using Prism manually in your
+       * own worker, you don't want it to do this.
+       *
+       * By setting this value to `true`, Prism will not add its own listeners to the worker.
+       *
+       * You obviously have to change this value before Prism executes. To do this, you can add an
+       * empty Prism object into the global scope before loading the Prism script like this:
+       *
+       * ```js
+       * window.Prism = window.Prism || {};
+       * Prism.disableWorkerMessageHandler = true;
+       * // Load Prism's script
+       * ```
+       *
+       * @default false
+       * @type {boolean}
+       * @memberof Prism
+       * @public
+       */
       disableWorkerMessageHandler: _self.Prism && _self.Prism.disableWorkerMessageHandler,
 
       /**
@@ -4152,17 +4178,35 @@ var prismCore = {
          * @returns {string}
          */
         getLanguage: function getLanguage(element) {
-          while (element && !lang.test(element.className)) {
-            element = element.parentElement;
-          }
+          while (element) {
+            var m = lang.exec(element.className);
+
+            if (m) {
+              return m[1].toLowerCase();
+            }
 
-          if (element) {
-            return (element.className.match(lang) || [, 'none'])[1].toLowerCase();
+            element = element.parentElement;
           }
 
           return 'none';
         },
 
+        /**
+         * Sets the Prism `language-xxxx` class of the given element.
+         *
+         * @param {Element} element
+         * @param {string} language
+         * @returns {void}
+         */
+        setLanguage: function setLanguage(element, language) {
+          // remove all `language-xxxx` classes
+          // (this might leave behind a leading space)
+          element.className = element.className.replace(RegExp(lang, 'gi'), ''); // add the new `language-xxxx` class
+          // (using `classList` will automatically clean up spaces for us)
+
+          element.classList.add('language-' + language);
+        },
+
         /**
          * Returns the script element that is currently executing.
          *
@@ -4526,12 +4570,13 @@ var prismCore = {
 
         var grammar = _.languages[language]; // Set language on the element, if not present
 
-        element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language; // Set language on the parent, for styling
+        _.util.setLanguage(element, language); // Set language on the parent, for styling
+
 
         var parent = element.parentElement;
 
         if (parent && parent.nodeName.toLowerCase() === 'pre') {
-          parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
+          _.util.setLanguage(parent, language);
         }
 
         var code = element.textContent;
@@ -4625,6 +4670,10 @@ var prismCore = {
 
         _.hooks.run('before-tokenize', env);
 
+        if (!env.grammar) {
+          throw new Error('The language "' + env.language + '" has no grammar.');
+        }
+
         env.tokens = _.tokenize(env.code, env.grammar);
 
         _.hooks.run('after-tokenize', env);
@@ -4935,7 +4984,7 @@ var prismCore = {
             if (greedy) {
               match = matchPattern(pattern, pos, text, lookbehind);
 
-              if (!match) {
+              if (!match || match.index >= text.length) {
                 break;
               }
 
@@ -5266,14 +5315,14 @@ function clike$1(Prism) {
       greedy: true
     },
     'class-name': {
-      pattern: /(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,
+      pattern: /(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,
       lookbehind: true,
       inside: {
         punctuation: /[.\\]/
       }
     },
-    keyword: /\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,
-    boolean: /\b(?:true|false)\b/,
+    keyword: /\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,
+    boolean: /\b(?:false|true)\b/,
     function: /\b\w+(?=\()/,
     number: /\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,
     operator: /[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,
@@ -5288,7 +5337,7 @@ javascript.aliases = ['js'];
 function javascript(Prism) {
   Prism.languages.javascript = Prism.languages.extend('clike', {
     'class-name': [Prism.languages.clike['class-name'], {
-      pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:prototype|constructor))/,
+      pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,
       lookbehind: true
     }],
     keyword: [{
@@ -5300,10 +5349,19 @@ function javascript(Prism) {
     }],
     // Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444)
     function: /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,
-    number: /\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,
+    number: {
+      pattern: RegExp(/(^|[^\w$])/.source + '(?:' + ( // constant
+      /NaN|Infinity/.source + '|' + // binary integer
+      /0[bB][01]+(?:_[01]+)*n?/.source + '|' + // octal integer
+      /0[oO][0-7]+(?:_[0-7]+)*n?/.source + '|' + // hexadecimal integer
+      /0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source + '|' + // decimal bigint
+      /\d+(?:_\d+)*n/.source + '|' + // decimal number (integer or float) but no bigint
+      /(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source) + ')' + /(?![\w$])/.source),
+      lookbehind: true
+    },
     operator: /--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/
   });
-  Prism.languages.javascript['class-name'][0].pattern = /(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/;
+  Prism.languages.javascript['class-name'][0].pattern = /(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/;
   Prism.languages.insertBefore('javascript', 'keyword', {
     regex: {
       // eslint-disable-next-line regexp/no-dupe-characters-character-class
@@ -5372,6 +5430,19 @@ function javascript(Prism) {
         },
         string: /[\s\S]+/
       }
+    },
+    'string-property': {
+      pattern: /((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,
+      lookbehind: true,
+      greedy: true,
+      alias: 'property'
+    }
+  });
+  Prism.languages.insertBefore('javascript', 'operator', {
+    'literal-property': {
+      pattern: /((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,
+      lookbehind: true,
+      alias: 'property'
     }
   });
 

package/dist/modern/{Color-4e20b6d9.js → Color-39554c21.js}

@@ -1,4 +1,4 @@
-import { x as _root, y as isObject_1, z as isSymbol_1, W as WithTooltip, T as TooltipNote, F as Form, I as Icons, B as getControlId, e as __rest } from './index-1368aba1.js';
+import { x as _root, y as isObject_1, z as isSymbol_1, W as WithTooltip, T as TooltipNote, F as Form, I as Icons, B as getControlId, e as __rest } from './index-8859409f.js';
 import React__default, { useRef, useMemo, useEffect, useState, useCallback, useLayoutEffect } from 'react';
 import { styled } from '@storybook/theming';
 import '@storybook/csf';

package/dist/modern/{OverlayScrollbars-36a63f08.js → OverlayScrollbars-9e76c3f3.js}

@@ -1,4 +1,4 @@
-import { c as commonjsGlobal, e as __rest } from './index-1368aba1.js';
+import { c as commonjsGlobal, e as __rest } from './index-8859409f.js';
 import React__default, { useRef, useEffect } from 'react';
 import '@storybook/theming';
 import '@storybook/csf';

package/dist/modern/{WithTooltip-37c63930.js → WithTooltip-01d94d19.js}

@@ -1,4 +1,4 @@
-import { f as basePlacements, t as top, l as left, g as bottom, r as right, h as end, v as viewport, s as start, p as popper, i as clippingParents, j as reference, k as variationPlacements, n as placements, o as auto, q as modifierPhases, u as _inheritsLoose, a as _extends, _ as _objectWithoutPropertiesLoose, m as memoize, e as __rest, w as window_1 } from './index-1368aba1.js';
+import { f as basePlacements, t as top, l as left, g as bottom, r as right, h as end, v as viewport, s as start, p as popper, i as clippingParents, j as reference, k as variationPlacements, n as placements, o as auto, q as modifierPhases, u as _inheritsLoose, a as _extends, _ as _objectWithoutPropertiesLoose, m as memoize, e as __rest, w as window_1 } from './index-8859409f.js';
 import * as React from 'react';
 import React__default, { Component, useState, useCallback, useEffect } from 'react';
 import { styled, lighten, darken } from '@storybook/theming';

package/dist/modern/{index-1368aba1.js → index-8859409f.js}

@@ -294,7 +294,7 @@ var curriedOpacify=/*#__PURE__*/curry/* ::<number | string, string, string> */(o
  *   background: "rgba(255,0,0,0.3)";
  * }
  */function transparentize(amount,color){if(color==='transparent')return color;var parsedColor=parseToRgb(color);var alpha=typeof parsedColor.alpha==='number'?parsedColor.alpha:1;var colorWithAlpha=_extends({},parsedColor,{alpha:guard(0,1,+(alpha*100-parseFloat(amount)*100).toFixed(2)/100)});return rgba(colorWithAlpha);}// prettier-ignore
-var curriedTransparentize=/*#__PURE__*/curry/* ::<number | string, string, string> */(transparentize);var curriedTransparentize$1=curriedTransparentize;const headerCommon=({theme})=>({margin:'20px 0 8px',padding:0,cursor:'text',position:'relative',color:theme.color.defaultText,'&:first-of-type':{marginTop:0,paddingTop:0},'&:hover a.anchor':{textDecoration:'none'},'& tt, & code':{fontSize:'inherit'}});const codeCommon=({theme})=>({lineHeight:1,margin:'0 2px',padding:'3px 5px',whiteSpace:'nowrap',borderRadius:3,fontSize:theme.typography.size.s2-1,border:theme.base==='light'?`1px solid ${theme.color.mediumlight}`:`1px solid ${theme.color.darker}`,color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.3,theme.color.defaultText),backgroundColor:theme.base==='light'?theme.color.lighter:theme.color.border});const withReset=({theme})=>({fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s3,margin:0,WebkitFontSmoothing:'antialiased',MozOsxFontSmoothing:'grayscale',WebkitTapHighlightColor:'rgba(0, 0, 0, 0)',WebkitOverflowScrolling:'touch'});const withMargin={margin:'16px 0'};const Link$1=_a=>{var{href:input,children}=_a,props=__rest(_a,["href","children"]);const isStorybookPath=/^\//.test(input);const isAnchorUrl=/^#.*/.test(input);const href=isStorybookPath?`?path=${input}`:input;const target=isAnchorUrl?'_self':'_top';return React__default.createElement("a",Object.assign({href:href,target:target},props),children);};const A$2=styled(Link$1)(withReset,({theme})=>({fontSize:'inherit',lineHeight:'24px',color:theme.color.secondary,textDecoration:'none','&.absent':{color:'#cc0000'},'&.anchor':{display:'block',paddingLeft:30,marginLeft:-30,cursor:'pointer',position:'absolute',top:0,left:0,bottom:0}}));const Blockquote=styled.blockquote(withReset,withMargin,({theme})=>({borderLeft:`4px solid ${theme.color.medium}`,padding:'0 15px',color:theme.color.dark,'& > :first-of-type':{marginTop:0},'& > :last-child':{marginBottom:0}}));const Wrapper$8=styled.div(withReset,({theme})=>({backgroundColor:theme.base==='light'?'rgba(0,0,0,.01)':'rgba(255,255,255,.01)',borderRadius:theme.appBorderRadius,border:`1px dashed ${theme.appBorderColor}`,display:'flex',alignItems:'center',justifyContent:'center',padding:20,margin:'25px 0 40px',color:curriedTransparentize$1(0.3,theme.color.defaultText),fontSize:theme.typography.size.s2}));const EmptyBlock=props=>React__default.createElement(Wrapper$8,Object.assign({},props,{className:"docblock-emptyblock"}));const LazySyntaxHighlighter=lazy(()=>import('./syntaxhighlighter-7918e0a9.js'));const SyntaxHighlighter=props=>React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazySyntaxHighlighter,Object.assign({},props)));const StyledSyntaxHighlighter=styled(SyntaxHighlighter)(({theme})=>({// DocBlocks-specific styling and overrides
+var curriedTransparentize=/*#__PURE__*/curry/* ::<number | string, string, string> */(transparentize);var curriedTransparentize$1=curriedTransparentize;const headerCommon=({theme})=>({margin:'20px 0 8px',padding:0,cursor:'text',position:'relative',color:theme.color.defaultText,'&:first-of-type':{marginTop:0,paddingTop:0},'&:hover a.anchor':{textDecoration:'none'},'& tt, & code':{fontSize:'inherit'}});const codeCommon=({theme})=>({lineHeight:1,margin:'0 2px',padding:'3px 5px',whiteSpace:'nowrap',borderRadius:3,fontSize:theme.typography.size.s2-1,border:theme.base==='light'?`1px solid ${theme.color.mediumlight}`:`1px solid ${theme.color.darker}`,color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.3,theme.color.defaultText),backgroundColor:theme.base==='light'?theme.color.lighter:theme.color.border});const withReset=({theme})=>({fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s3,margin:0,WebkitFontSmoothing:'antialiased',MozOsxFontSmoothing:'grayscale',WebkitTapHighlightColor:'rgba(0, 0, 0, 0)',WebkitOverflowScrolling:'touch'});const withMargin={margin:'16px 0'};const Link$1=_a=>{var{href:input,children}=_a,props=__rest(_a,["href","children"]);const isStorybookPath=/^\//.test(input);const isAnchorUrl=/^#.*/.test(input);const href=isStorybookPath?`?path=${input}`:input;const target=isAnchorUrl?'_self':'_top';return React__default.createElement("a",Object.assign({href:href,target:target},props),children);};const A$2=styled(Link$1)(withReset,({theme})=>({fontSize:'inherit',lineHeight:'24px',color:theme.color.secondary,textDecoration:'none','&.absent':{color:'#cc0000'},'&.anchor':{display:'block',paddingLeft:30,marginLeft:-30,cursor:'pointer',position:'absolute',top:0,left:0,bottom:0}}));const Blockquote=styled.blockquote(withReset,withMargin,({theme})=>({borderLeft:`4px solid ${theme.color.medium}`,padding:'0 15px',color:theme.color.dark,'& > :first-of-type':{marginTop:0},'& > :last-child':{marginBottom:0}}));const Wrapper$8=styled.div(withReset,({theme})=>({backgroundColor:theme.base==='light'?'rgba(0,0,0,.01)':'rgba(255,255,255,.01)',borderRadius:theme.appBorderRadius,border:`1px dashed ${theme.appBorderColor}`,display:'flex',alignItems:'center',justifyContent:'center',padding:20,margin:'25px 0 40px',color:curriedTransparentize$1(0.3,theme.color.defaultText),fontSize:theme.typography.size.s2}));const EmptyBlock=props=>React__default.createElement(Wrapper$8,Object.assign({},props,{className:"docblock-emptyblock"}));const LazySyntaxHighlighter=lazy(()=>import('./syntaxhighlighter-a031426a.js'));const SyntaxHighlighter=props=>React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazySyntaxHighlighter,Object.assign({},props)));const StyledSyntaxHighlighter=styled(SyntaxHighlighter)(({theme})=>({// DocBlocks-specific styling and overrides
 fontSize:`${theme.typography.size.s2-1}px`,lineHeight:'19px',margin:'25px 0 40px',borderRadius:theme.appBorderRadius,boxShadow:theme.base==='light'?'rgba(0, 0, 0, 0.10) 0 1px 3px 0':'rgba(0, 0, 0, 0.20) 0 2px 5px 0','pre.prismjs':{padding:20,background:'inherit'}}));var SourceError;(function(SourceError){SourceError["NO_STORY"]="There\u2019s no story here.";SourceError["SOURCE_UNAVAILABLE"]="Oh no! The source is not available.";})(SourceError||(SourceError={}));const SourceSkeletonWrapper=styled.div(({theme})=>({background:theme.background.content,borderRadius:theme.appBorderRadius,border:`1px solid ${theme.appBorderColor}`,boxShadow:theme.base==='light'?'rgba(0, 0, 0, 0.10) 0 1px 3px 0':'rgba(0, 0, 0, 0.20) 0 2px 5px 0',margin:'25px 0 40px',padding:'20px 20px 20px 22px'}));const SourceSkeletonPlaceholder=styled.div(({theme})=>({animation:`${theme.animation.glow} 1.5s ease-in-out infinite`,background:theme.appBorderColor,height:17,marginTop:1,width:'60%','&:first-child':{margin:0}}));const SourceSkeleton=()=>React__default.createElement(SourceSkeletonWrapper,null,React__default.createElement(SourceSkeletonPlaceholder,null),React__default.createElement(SourceSkeletonPlaceholder,{style:{width:'80%'}}),React__default.createElement(SourceSkeletonPlaceholder,{style:{width:'30%'}}),React__default.createElement(SourceSkeletonPlaceholder,{style:{width:'80%'}}));/**
  * Syntax-highlighted source code for a component (or anything!)
  */const Source=props=>{const{isLoading,error}=props;if(isLoading){return React__default.createElement(SourceSkeleton,null);}if(error){return React__default.createElement(EmptyBlock,null,error);}const _a=props,{language,code,dark,format}=_a,rest=__rest(_a,["language","code","dark","format"]);const syntaxHighlighter=React__default.createElement(StyledSyntaxHighlighter,Object.assign({bordered:true,copyable:true,format:format,language:language,className:"docblock-source"},rest),code);if(typeof dark==='undefined'){return syntaxHighlighter;}const overrideTheme=dark?themes.dark:themes.light;return React__default.createElement(ThemeProvider,{theme:convert(overrideTheme)},syntaxHighlighter);};Source.defaultProps={format:false};const isReactChildString=child=>typeof child==='string';const isInlineCodeRegex=/[\n\r]/g;const DefaultCodeBlock=styled.code(({theme})=>({// from reset
@@ -310,7 +310,7 @@ const icons={mobile:'M648 64h-272c-66.274 0-120 53.726-120 120v656c0 66.274 53.7
 shapeRendering:'inherit',transform:'translate3d(0,0,0)'},({inline})=>inline?{display:'inline-block'}:{display:'block'});Svg.displayName='Svg';const Path=styled.path({fill:'currentColor'});// TODO: if we can resize the 1024 to 20, we can remove the size attributes
 const Icons=memo(_a=>{var{icon,symbol}=_a,props=__rest(_a,["icon","symbol"]);return React__default.createElement(Svg,Object.assign({viewBox:"0 0 1024 1024"},props),symbol?React__default.createElement("use",{xlinkHref:`#icon--${symbol}`}):React__default.createElement(Path,{d:icons[icon]}));});const Symbols=memo(({icons:keys=Object.keys(icons)})=>React__default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",style:{position:'absolute',width:0,height:0},"data-chromatic":"ignore"},keys.map(key=>React__default.createElement("symbol",{id:`icon--${key}`,key:key},React__default.createElement(Path,{d:icons[key]})))));// Cmd/Ctrl/Shift/Alt + Click should trigger default browser behavior. Same applies to non-left clicks
 const LEFT_BUTTON=0;const isPlainLeftClick=e=>e.button===LEFT_BUTTON&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey;const cancelled=(e,cb)=>{if(isPlainLeftClick(e)){e.preventDefault();cb(e);}};const LinkInner=styled.span(({withArrow})=>withArrow?{'> svg:last-of-type':{height:'0.7em',width:'0.7em',marginRight:0,marginLeft:'0.25em',bottom:'auto',verticalAlign:'inherit'}}:{},({containsIcon})=>containsIcon?{svg:{height:'1em',width:'1em',verticalAlign:'middle',position:'relative',bottom:0,marginRight:0}}:{});const A$1=styled.a(({theme})=>({display:'inline-block',transition:'all 150ms ease-out',textDecoration:'none',color:theme.color.secondary,'&:hover, &:focus':{cursor:'pointer',color:curriedDarken$1(0.07,theme.color.secondary),'svg path':{fill:curriedDarken$1(0.07,theme.color.secondary)}},'&:active':{color:curriedDarken$1(0.1,theme.color.secondary),'svg path':{fill:curriedDarken$1(0.1,theme.color.secondary)}},svg:{display:'inline-block',height:'1em',width:'1em',verticalAlign:'text-top',position:'relative',bottom:'-0.125em',marginRight:'0.4em','& path':{fill:theme.color.secondary}}}),({theme,secondary,tertiary})=>{let colors;if(secondary){colors=[theme.color.mediumdark,theme.color.dark,theme.color.darker];}if(tertiary){colors=[theme.color.dark,theme.color.darkest,theme.color.mediumdark];}return colors?{color:colors[0],'svg path':{fill:colors[0]},'&:hover':{color:colors[1],'svg path':{fill:colors[1]}},'&:active':{color:colors[2],'svg path':{fill:colors[2]}}}:{};},({nochrome})=>nochrome?{color:'inherit','&:hover, &:active':{color:'inherit',textDecoration:'underline'}}:{},({theme,inverse})=>inverse?{color:theme.color.lightest,'svg path':{fill:theme.color.lightest},'&:hover':{color:theme.color.lighter,'svg path':{fill:theme.color.lighter}},'&:active':{color:theme.color.light,'svg path':{fill:theme.color.light}}}:{},({isButton})=>isButton?{border:0,borderRadius:0,background:'none',padding:0,fontSize:'inherit'}:{});const Link=_a=>{var{cancel,children,onClick,withArrow,containsIcon,className}=_a,rest=__rest(_a,["cancel","children","onClick","withArrow","containsIcon","className"]);return React__default.createElement(A$1,Object.assign({},rest,{onClick:onClick&&cancel?e=>cancelled(e,onClick):onClick,className:className}),React__default.createElement(LinkInner,{withArrow:withArrow,containsIcon:containsIcon},children,withArrow&&React__default.createElement(Icons,{icon:"arrowright"})));};Link.defaultProps={cancel:true,className:undefined,style:undefined,onClick:undefined,withArrow:false,containsIcon:false};const DocumentWrapper=styled.div(({theme})=>({fontSize:`${theme.typography.size.s2}px`,lineHeight:'1.6',h1:{fontSize:`${theme.typography.size.l1}px`,fontWeight:theme.typography.weight.black},h2:{fontSize:`${theme.typography.size.m2}px`,borderBottom:`1px solid ${theme.appBorderColor}`},h3:{fontSize:`${theme.typography.size.m1}px`},h4:{fontSize:`${theme.typography.size.s3}px`},h5:{fontSize:`${theme.typography.size.s2}px`},h6:{fontSize:`${theme.typography.size.s2}px`,color:theme.color.dark},'pre:not(.prismjs)':{background:'transparent',border:'none',borderRadius:0,padding:0,margin:0},'pre pre, pre.prismjs':{padding:15,margin:0,whiteSpace:'pre-wrap',color:'inherit',fontSize:'13px',lineHeight:'19px'},'pre pre code, pre.prismjs code':{color:'inherit',fontSize:'inherit'},'pre code':{margin:0,padding:0,whiteSpace:'pre',border:'none',background:'transparent'},'pre code, pre tt':{backgroundColor:'transparent',border:'none'},/* GitHub inspired Markdown styles loosely from https://gist.github.com/tuzz/3331384 */'body > *:first-of-type':{marginTop:'0 !important'},'body > *:last-child':{marginBottom:'0 !important'},a:{color:theme.color.secondary,textDecoration:'none'},'a.absent':{color:'#cc0000'},'a.anchor':{display:'block',paddingLeft:30,marginLeft:-30,cursor:'pointer',position:'absolute',top:0,left:0,bottom:0},'h1, h2, h3, h4, h5, h6':{margin:'20px 0 10px',padding:0,cursor:'text',position:'relative','&:first-of-type':{marginTop:0,paddingTop:0},'&:hover a.anchor':{textDecoration:'none'},'& tt, & code':{fontSize:'inherit'}},'h1:first-of-type + h2':{marginTop:0,paddingTop:0},'p, blockquote, ul, ol, dl, li, table, pre':{margin:'15px 0'},hr:{border:'0 none',borderTop:`1px solid ${theme.appBorderColor}`,height:4,padding:0},'body > h1:first-of-type, body > h2:first-of-type, body > h3:first-of-type, body > h4:first-of-type, body > h5:first-of-type, body > h6:first-of-type':{marginTop:0,paddingTop:0},'body > h1:first-of-type + h2':{marginTop:0,paddingTop:0},'a:first-of-type h1, a:first-of-type h2, a:first-of-type h3, a:first-of-type h4, a:first-of-type h5, a:first-of-type h6':{marginTop:0,paddingTop:0},'h1 p, h2 p, h3 p, h4 p, h5 p, h6 p':{marginTop:0},'li p.first':{display:'inline-block'},'ul, ol':{paddingLeft:30,'& :first-of-type':{marginTop:0},'& :last-child':{marginBottom:0}},dl:{padding:0},'dl dt':{fontSize:'14px',fontWeight:'bold',fontStyle:'italic',margin:'0 0 15px',padding:'0 15px','&:first-of-type':{padding:0},'& > :first-of-type':{marginTop:0},'& > :last-child':{marginBottom:0}},blockquote:{borderLeft:`4px solid ${theme.color.medium}`,padding:'0 15px',color:theme.color.dark,'& > :first-of-type':{marginTop:0},'& > :last-child':{marginBottom:0}},table:{padding:0,borderCollapse:'collapse','& tr':{borderTop:`1px solid ${theme.appBorderColor}`,backgroundColor:'white',margin:0,padding:0,'& th':{fontWeight:'bold',border:`1px solid ${theme.appBorderColor}`,textAlign:'left',margin:0,padding:'6px 13px'},'& td':{border:`1px solid ${theme.appBorderColor}`,textAlign:'left',margin:0,padding:'6px 13px'},'&:nth-of-type(2n)':{backgroundColor:theme.color.lighter},'& th :first-of-type, & td :first-of-type':{marginTop:0},'& th :last-child, & td :last-child':{marginBottom:0}}},img:{maxWidth:'100%'},'span.frame':{display:'block',overflow:'hidden','& > span':{border:`1px solid ${theme.color.medium}`,display:'block',float:'left',overflow:'hidden',margin:'13px 0 0',padding:7,width:'auto'},'& span img':{display:'block',float:'left'},'& span span':{clear:'both',color:theme.color.darkest,display:'block',padding:'5px 0 0'}},'span.align-center':{display:'block',overflow:'hidden',clear:'both','& > span':{display:'block',overflow:'hidden',margin:'13px auto 0',textAlign:'center'},'& span img':{margin:'0 auto',textAlign:'center'}},'span.align-right':{display:'block',overflow:'hidden',clear:'both','& > span':{display:'block',overflow:'hidden',margin:'13px 0 0',textAlign:'right'},'& span img':{margin:0,textAlign:'right'}},'span.float-left':{display:'block',marginRight:13,overflow:'hidden',float:'left','& span':{margin:'13px 0 0'}},'span.float-right':{display:'block',marginLeft:13,overflow:'hidden',float:'right','& > span':{display:'block',overflow:'hidden',margin:'13px auto 0',textAlign:'right'}},'code, tt':{margin:'0 2px',padding:'0 5px',whiteSpace:'nowrap',border:`1px solid ${theme.color.mediumlight}`,backgroundColor:theme.color.lighter,borderRadius:3,color:theme.base==='dark'&&theme.color.darkest}}));const Container$1=styled.div(({theme})=>({position:'absolute',bottom:0,right:0,maxWidth:'100%',display:'flex',background:theme.background.content,zIndex:1}));const ActionButton=styled.button(({theme})=>({margin:0,border:'0 none',padding:'4px 10px',cursor:'pointer',display:'flex',alignItems:'center',color:theme.color.defaultText,background:theme.background.content,fontSize:12,lineHeight:'16px',fontFamily:theme.typography.fonts.base,fontWeight:theme.typography.weight.bold,borderTop:`1px solid ${theme.appBorderColor}`,borderLeft:`1px solid ${theme.appBorderColor}`,marginLeft:-1,borderRadius:`4px 0 0 0`,'&:not(:last-child)':{borderRight:`1px solid ${theme.appBorderColor}`},'& + *':{borderLeft:`1px solid ${theme.appBorderColor}`,borderRadius:0},'&:focus':{boxShadow:`${theme.color.secondary} 0 -3px 0 0 inset`,outline:'0 none'}}),({disabled})=>disabled&&{cursor:'not-allowed',opacity:0.5});ActionButton.displayName='ActionButton';const ActionBar=_a=>{var{actionItems}=_a,props=__rest(_a,["actionItems"]);return React__default.createElement(Container$1,Object.assign({},props),actionItems.map(({title,className,onClick,disabled},index)=>// eslint-disable-next-line react/no-array-index-key
-React__default.createElement(ActionButton,{key:index,className:className,onClick:onClick,disabled:disabled},title)));};const toNumber=input=>typeof input==='number'?input:Number(input);const Container=styled.div(({theme,col,row=1})=>col?{display:'inline-block',verticalAlign:'inherit','& > *':{marginLeft:col*theme.layoutMargin,verticalAlign:'inherit'},[`& > *:first-child${ignoreSsrWarning$1}`]:{marginLeft:0}}:{'& > *':{marginTop:row*theme.layoutMargin},[`& > *:first-child${ignoreSsrWarning$1}`]:{marginTop:0}},({theme,outer,col,row})=>{switch(true){case!!(outer&&col):{return{marginLeft:outer*theme.layoutMargin,marginRight:outer*theme.layoutMargin};}case!!(outer&&row):{return{marginTop:outer*theme.layoutMargin,marginBottom:outer*theme.layoutMargin};}default:{return{};}}});const Spaced=_a=>{var{col,row,outer,children}=_a,rest=__rest(_a,["col","row","outer","children"]);const outerAmount=toNumber(typeof outer==='number'||!outer?outer:col||row);return React__default.createElement(Container,Object.assign({col:col,row:row,outer:outerAmount},rest),children);};const Title$3=styled.div(({theme})=>({fontWeight:theme.typography.weight.bold}));const Desc$1=styled.div();const Message$1=styled.div(({theme})=>({padding:30,textAlign:'center',color:theme.color.defaultText,fontSize:theme.typography.size.s2-1}));const Placeholder=_a=>{var{children}=_a,props=__rest(_a,["children"]);const[title,desc]=Children.toArray(children);return React__default.createElement(Message$1,Object.assign({},props),React__default.createElement(Title$3,null,title),desc&&React__default.createElement(Desc$1,null,desc));};const GlobalScrollAreaStyles=lazy(()=>import('./GlobalScrollAreaStyles-8793ce4a.js'));const OverlayScrollbars=lazy(()=>import('./OverlayScrollbars-36a63f08.js'));const Scroller=_a=>{var props=__rest(_a,["horizontal","vertical"]);return React__default.createElement(Suspense,{fallback:React__default.createElement("div",Object.assign({},props))},React__default.createElement(GlobalScrollAreaStyles,null),React__default.createElement(OverlayScrollbars,Object.assign({options:{scrollbars:{autoHide:'leave'}}},props)));};const ScrollArea=styled(Scroller)(({vertical})=>!vertical?{overflowY:'hidden'}:{overflowY:'auto',height:'100%'},({horizontal})=>!horizontal?{overflowX:'hidden'}:{overflowX:'auto',width:'100%'});ScrollArea.defaultProps={horizontal:false,vertical:false};var commonjsGlobal=typeof globalThis!=='undefined'?globalThis:typeof window!=='undefined'?window:typeof global!=='undefined'?global:typeof self!=='undefined'?self:{};function getAugmentedNamespace(n){if(n.__esModule)return n;var a=Object.defineProperty({},'__esModule',{value:true});Object.keys(n).forEach(function(k){var d=Object.getOwnPropertyDescriptor(n,k);Object.defineProperty(a,k,d.get?d:{enumerable:true,get:function(){return n[k];}});});return a;}function commonjsRequire(path){throw new Error('Could not dynamically require "'+path+'". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');}var win;if(typeof window!=="undefined"){win=window;}else if(typeof commonjsGlobal!=="undefined"){win=commonjsGlobal;}else if(typeof self!=="undefined"){win=self;}else{win={};}var window_1=win;const{window:globalWindow$2}=window_1;function browserSupportsCssZoom(){try{return globalWindow$2.document.implementation.createHTMLDocument('').body.style.zoom!==undefined;}catch(error){return false;}}const ZoomElementWrapper=styled.div(({scale=1,height})=>browserSupportsCssZoom()?{'> *':{zoom:1/scale}}:{height:height+50,transformOrigin:'top left',transform:`scale(${1/scale})`});function ZoomElement({scale,children}){const componentWrapperRef=useRef(null);const[height,setHeight]=useState(0);useEffect(()=>{if(componentWrapperRef.current){setHeight(componentWrapperRef.current.getBoundingClientRect().height);}},[scale,componentWrapperRef.current]);return React__default.createElement(ZoomElementWrapper,{scale:scale,height:height},React__default.createElement("div",{ref:componentWrapperRef,className:"innerZoomElementWrapper"},children));}class ZoomIFrame extends Component{constructor(){super(...arguments);this.iframe=null;}componentDidMount(){const{iFrameRef}=this.props;this.iframe=iFrameRef.current;}shouldComponentUpdate(nextProps){const{scale,active}=this.props;if(scale!==nextProps.scale){this.setIframeInnerZoom(nextProps.scale);}if(active!==nextProps.active){this.iframe.setAttribute('data-is-storybook',nextProps.active?'true':'false');}// this component renders an iframe, which gets updates via post-messages
+React__default.createElement(ActionButton,{key:index,className:className,onClick:onClick,disabled:disabled},title)));};const toNumber=input=>typeof input==='number'?input:Number(input);const Container=styled.div(({theme,col,row=1})=>col?{display:'inline-block',verticalAlign:'inherit','& > *':{marginLeft:col*theme.layoutMargin,verticalAlign:'inherit'},[`& > *:first-child${ignoreSsrWarning$1}`]:{marginLeft:0}}:{'& > *':{marginTop:row*theme.layoutMargin},[`& > *:first-child${ignoreSsrWarning$1}`]:{marginTop:0}},({theme,outer,col,row})=>{switch(true){case!!(outer&&col):{return{marginLeft:outer*theme.layoutMargin,marginRight:outer*theme.layoutMargin};}case!!(outer&&row):{return{marginTop:outer*theme.layoutMargin,marginBottom:outer*theme.layoutMargin};}default:{return{};}}});const Spaced=_a=>{var{col,row,outer,children}=_a,rest=__rest(_a,["col","row","outer","children"]);const outerAmount=toNumber(typeof outer==='number'||!outer?outer:col||row);return React__default.createElement(Container,Object.assign({col:col,row:row,outer:outerAmount},rest),children);};const Title$3=styled.div(({theme})=>({fontWeight:theme.typography.weight.bold}));const Desc$1=styled.div();const Message$1=styled.div(({theme})=>({padding:30,textAlign:'center',color:theme.color.defaultText,fontSize:theme.typography.size.s2-1}));const Placeholder=_a=>{var{children}=_a,props=__rest(_a,["children"]);const[title,desc]=Children.toArray(children);return React__default.createElement(Message$1,Object.assign({},props),React__default.createElement(Title$3,null,title),desc&&React__default.createElement(Desc$1,null,desc));};const GlobalScrollAreaStyles=lazy(()=>import('./GlobalScrollAreaStyles-8793ce4a.js'));const OverlayScrollbars=lazy(()=>import('./OverlayScrollbars-9e76c3f3.js'));const Scroller=_a=>{var props=__rest(_a,["horizontal","vertical"]);return React__default.createElement(Suspense,{fallback:React__default.createElement("div",Object.assign({},props))},React__default.createElement(GlobalScrollAreaStyles,null),React__default.createElement(OverlayScrollbars,Object.assign({options:{scrollbars:{autoHide:'leave'}}},props)));};const ScrollArea=styled(Scroller)(({vertical})=>!vertical?{overflowY:'hidden'}:{overflowY:'auto',height:'100%'},({horizontal})=>!horizontal?{overflowX:'hidden'}:{overflowX:'auto',width:'100%'});ScrollArea.defaultProps={horizontal:false,vertical:false};var commonjsGlobal=typeof globalThis!=='undefined'?globalThis:typeof window!=='undefined'?window:typeof global!=='undefined'?global:typeof self!=='undefined'?self:{};function getAugmentedNamespace(n){if(n.__esModule)return n;var a=Object.defineProperty({},'__esModule',{value:true});Object.keys(n).forEach(function(k){var d=Object.getOwnPropertyDescriptor(n,k);Object.defineProperty(a,k,d.get?d:{enumerable:true,get:function(){return n[k];}});});return a;}function commonjsRequire(path){throw new Error('Could not dynamically require "'+path+'". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');}var win;if(typeof window!=="undefined"){win=window;}else if(typeof commonjsGlobal!=="undefined"){win=commonjsGlobal;}else if(typeof self!=="undefined"){win=self;}else{win={};}var window_1=win;const{window:globalWindow$2}=window_1;function browserSupportsCssZoom(){try{return globalWindow$2.document.implementation.createHTMLDocument('').body.style.zoom!==undefined;}catch(error){return false;}}const ZoomElementWrapper=styled.div(({scale=1,height})=>browserSupportsCssZoom()?{'> *':{zoom:1/scale}}:{height:height+50,transformOrigin:'top left',transform:`scale(${1/scale})`});function ZoomElement({scale,children}){const componentWrapperRef=useRef(null);const[height,setHeight]=useState(0);useEffect(()=>{if(componentWrapperRef.current){setHeight(componentWrapperRef.current.getBoundingClientRect().height);}},[scale,componentWrapperRef.current]);return React__default.createElement(ZoomElementWrapper,{scale:scale,height:height},React__default.createElement("div",{ref:componentWrapperRef,className:"innerZoomElementWrapper"},children));}class ZoomIFrame extends Component{constructor(){super(...arguments);this.iframe=null;}componentDidMount(){const{iFrameRef}=this.props;this.iframe=iFrameRef.current;}shouldComponentUpdate(nextProps){const{scale,active}=this.props;if(scale!==nextProps.scale){this.setIframeInnerZoom(nextProps.scale);}if(active!==nextProps.active){this.iframe.setAttribute('data-is-storybook',nextProps.active?'true':'false');}// this component renders an iframe, which gets updates via post-messages
 // never update this component, it will cause the iframe to refresh
 return false;}setIframeInnerZoom(scale){try{if(browserSupportsCssZoom()){Object.assign(this.iframe.contentDocument.body.style,{zoom:1/scale});}else{Object.assign(this.iframe.contentDocument.body.style,{width:`${scale*100}%`,height:`${scale*100}%`,transform:`scale(${1/scale})`,transformOrigin:'top left'});}}catch(e){this.setIframeZoom(scale);}}setIframeZoom(scale){Object.assign(this.iframe.style,{width:`${scale*100}%`,height:`${scale*100}%`,transform:`scale(${1/scale})`,transformOrigin:'top left'});}render(){const{children}=this.props;return children;}}const Zoom$1={Element:ZoomElement,IFrame:ZoomIFrame};const ButtonWrapper=styled.button(({small,theme})=>({border:0,borderRadius:'3em',cursor:'pointer',display:'inline-block',overflow:'hidden',padding:small?'8px 16px':'13px 20px',position:'relative',textAlign:'center',textDecoration:'none',transition:'all 150ms ease-out',transform:'translate3d(0,0,0)',verticalAlign:'top',whiteSpace:'nowrap',userSelect:'none',opacity:1,margin:0,background:'transparent',fontSize:`${small?theme.typography.size.s1:theme.typography.size.s2-1}px`,fontWeight:theme.typography.weight.bold,lineHeight:'1',svg:{display:'inline-block',height:small?14:16,width:small?14:16,verticalAlign:'top',marginRight:small?4:6,marginTop:small?-1:-2,marginBottom:small?-1:-2,/* Necessary for js mouse events to not glitch out when hovering on svgs */pointerEvents:'none',path:{fill:'currentColor'}}}),({disabled})=>disabled?{cursor:'not-allowed !important',opacity:0.5,'&:hover':{transform:'none'}}:{},({containsIcon,small})=>containsIcon?Object.assign({svg:{display:'block',margin:0}},small?{padding:9}:{padding:12}):{},({theme,primary,secondary,gray})=>{let color;if(gray){color=theme.color.medium;}else if(secondary){color=theme.color.secondary;}else if(primary){color=theme.color.primary;}return color?{background:color,color:gray?theme.color.darkest:theme.color.lightest,'&:hover':{background:curriedDarken$1(0.05,color)},'&:active':{boxShadow:'rgba(0, 0, 0, 0.1) 0 0 0 3em inset'},'&:focus':{boxShadow:`${rgba(color,1)} 0 1px 9px 2px`,outline:'none'},'&:focus:hover':{boxShadow:`${rgba(color,0.2)} 0 8px 18px 0px`}}:{};},({theme,tertiary,inForm,small})=>tertiary?Object.assign(Object.assign({background:theme.base==='light'?curriedDarken$1(0.02,theme.input.background):curriedLighten$1(0.02,theme.input.background),color:theme.input.color,boxShadow:`${theme.input.border} 0 0 0 1px inset`,borderRadius:theme.input.borderRadius},inForm&&small?{padding:'10px 16px'}:{}),{'&:hover':Object.assign({background:theme.base==='light'?curriedDarken$1(0.05,theme.input.background):curriedLighten$1(0.05,theme.input.background)},inForm?{}:{boxShadow:'rgba(0,0,0,.2) 0 2px 6px 0, rgba(0,0,0,.1) 0 0 0 1px inset'}),'&:active':{background:theme.input.background},'&:focus':{boxShadow:`${rgba(theme.color.secondary,1)} 0 0 0 1px inset`,outline:'none'}}):{},({theme,outline})=>outline?{boxShadow:`${curriedTransparentize$1(0.8,theme.color.defaultText)} 0 0 0 1px inset`,color:curriedTransparentize$1(0.3,theme.color.defaultText),background:'transparent','&:hover, &:focus':{boxShadow:`${curriedTransparentize$1(0.5,theme.color.defaultText)} 0 0 0 1px inset`,outline:'none'},'&:active':{boxShadow:`${curriedTransparentize$1(0.5,theme.color.defaultText)} 0 0 0 2px inset`,color:curriedTransparentize$1(0,theme.color.defaultText)}}:{},({theme,outline,primary})=>{const color=theme.color.primary;return outline&&primary?{boxShadow:`${color} 0 0 0 1px inset`,color,'svg path':{fill:color},'&:hover':{boxShadow:`${color} 0 0 0 1px inset`,background:'transparent'},'&:active':{background:color,boxShadow:`${color} 0 0 0 1px inset`,color:theme.color.tertiary},'&:focus':{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,0.4)} 0 1px 9px 2px`,outline:'none'},'&:focus:hover':{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,0.2)} 0 8px 18px 0px`}}:{};},({theme,outline,primary,secondary})=>{let color;if(secondary){color=theme.color.secondary;}else if(primary){color=theme.color.primary;}return outline&&color?{boxShadow:`${color} 0 0 0 1px inset`,color,'svg path':{fill:color},'&:hover':{boxShadow:`${color} 0 0 0 1px inset`,background:'transparent'},'&:active':{background:color,boxShadow:`${color} 0 0 0 1px inset`,color:theme.color.tertiary},'&:focus':{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,0.4)} 0 1px 9px 2px`,outline:'none'},'&:focus:hover':{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,0.2)} 0 8px 18px 0px`}}:{};});const ButtonLink=ButtonWrapper.withComponent('a');const Button$2=Object.assign(forwardRef((_a,ref)=>{var{isLink,children}=_a,props=__rest(_a,["isLink","children"]);if(isLink){return React__default.createElement(ButtonLink,Object.assign({},props,{ref:ref}),children);}return React__default.createElement(ButtonWrapper,Object.assign({},props,{ref:ref}),children);}),{defaultProps:{isLink:false}});const Wrapper$7=styled.label(({theme})=>({display:'flex',borderBottom:`1px solid ${theme.appBorderColor}`,margin:'0 15px',padding:'8px 0','&:last-child':{marginBottom:'3rem'}}));const Label$4=styled.span(({theme})=>({minWidth:100,fontWeight:theme.typography.weight.bold,marginRight:15,display:'flex',justifyContent:'flex-start',alignItems:'center',lineHeight:'16px'}));const Field=_a=>{var{label,children}=_a,props=__rest(_a,["label","children"]);return React__default.createElement(Wrapper$7,Object.assign({},props),label?React__default.createElement(Label$4,null,React__default.createElement("span",null,label)):null,children);};Field.defaultProps={label:undefined};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 index$1=useLayoutEffect;var useLatest=function useLatest(value){var ref=useRef(value);index$1(function(){ref.current=value;});return ref;};var updateRef=function updateRef(ref,value){if(typeof ref==='function'){ref(value);return;}ref.current=value;};var useComposedRef=function useComposedRef(libRef,userRef){var prevUserRef=useRef();return useCallback(function(instance){libRef.current=instance;if(prevUserRef.current){updateRef(prevUserRef.current,null);}prevUserRef.current=userRef;if(!userRef){return;}updateRef(userRef,instance);},[userRef]);};var HIDDEN_TEXTAREA_STYLE={'min-height':'0','max-height':'none',height:'0',visibility:'hidden',overflow:'hidden',position:'absolute','z-index':'-1000',top:'0',right:'0'};var forceHiddenStyles=function forceHiddenStyles(node){Object.keys(HIDDEN_TEXTAREA_STYLE).forEach(function(key){node.style.setProperty(key,HIDDEN_TEXTAREA_STYLE[key],'important');});};//   export type CalculatedNodeHeights = [height: number, rowHeight: number];
 // https://github.com/microsoft/TypeScript/issues/28259
@@ -325,7 +325,7 @@ if(boxSizing===''){return null;}// IE (Edge has already correct behaviour) retur
 if(isIE&&boxSizing==='border-box'){sizingStyle.width=parseFloat(sizingStyle.width)+parseFloat(sizingStyle.borderRightWidth)+parseFloat(sizingStyle.borderLeftWidth)+parseFloat(sizingStyle.paddingRight)+parseFloat(sizingStyle.paddingLeft)+'px';}var paddingSize=parseFloat(sizingStyle.paddingBottom)+parseFloat(sizingStyle.paddingTop);var borderSize=parseFloat(sizingStyle.borderBottomWidth)+parseFloat(sizingStyle.borderTopWidth);return{sizingStyle:sizingStyle,paddingSize:paddingSize,borderSize:borderSize};};var useWindowResizeListener=function useWindowResizeListener(listener){var latestListener=useLatest(listener);useLayoutEffect(function(){var handler=function handler(event){latestListener.current(event);};window.addEventListener('resize',handler);return function(){window.removeEventListener('resize',handler);};},[]);};var TextareaAutosize=function TextareaAutosize(_ref,userRef){var cacheMeasurements=_ref.cacheMeasurements,maxRows=_ref.maxRows,minRows=_ref.minRows,_ref$onChange=_ref.onChange,onChange=_ref$onChange===void 0?noop$2:_ref$onChange,_ref$onHeightChange=_ref.onHeightChange,onHeightChange=_ref$onHeightChange===void 0?noop$2:_ref$onHeightChange,props=_objectWithoutPropertiesLoose(_ref,["cacheMeasurements","maxRows","minRows","onChange","onHeightChange"]);if(process.env.NODE_ENV!=='production'&&props.style){if('maxHeight'in props.style){throw new Error('Using `style.maxHeight` for <TextareaAutosize/> is not supported. Please use `maxRows`.');}if('minHeight'in props.style){throw new Error('Using `style.minHeight` for <TextareaAutosize/> is not supported. Please use `minRows`.');}}var isControlled=props.value!==undefined;var libRef=useRef(null);var ref=useComposedRef(libRef,userRef);var heightRef=useRef(0);var measurementsCacheRef=useRef();var resizeTextarea=function resizeTextarea(){var node=libRef.current;var nodeSizingData=cacheMeasurements&&measurementsCacheRef.current?measurementsCacheRef.current:getSizingData(node);if(!nodeSizingData){return;}measurementsCacheRef.current=nodeSizingData;var _calculateNodeHeight=calculateNodeHeight(nodeSizingData,node.value||node.placeholder||'x',minRows,maxRows),height=_calculateNodeHeight[0],rowHeight=_calculateNodeHeight[1];if(heightRef.current!==height){heightRef.current=height;node.style.setProperty('height',height+"px",'important');onHeightChange(height,{rowHeight:rowHeight});}};var handleChange=function handleChange(event){if(!isControlled){resizeTextarea();}onChange(event);};{useLayoutEffect(resizeTextarea);useWindowResizeListener(resizeTextarea);}return/*#__PURE__*/createElement("textarea",_extends({},props,{onChange:handleChange,ref:ref}));};var index=/* #__PURE__ */forwardRef(TextareaAutosize);const TextareaAutoResize=index;const styleResets$1={// resets
 appearance:'none',border:'0 none',boxSizing:'inherit',display:' block',margin:' 0',background:'transparent',padding:0,fontSize:'inherit',position:'relative'};const styles=({theme})=>Object.assign(Object.assign({},styleResets$1),{transition:'box-shadow 200ms ease-out, opacity 200ms ease-out',color:theme.input.color||'inherit',background:theme.input.background,boxShadow:`${theme.input.border} 0 0 0 1px inset`,borderRadius:theme.input.borderRadius,fontSize:theme.typography.size.s2-1,lineHeight:'20px',padding:'6px 10px','&:focus':{boxShadow:`${theme.color.secondary} 0 0 0 1px inset`,outline:'none'},'&[disabled]':{cursor:'not-allowed',opacity:0.5},'&:-webkit-autofill':{WebkitBoxShadow:`0 0 0 3em ${theme.color.lightest} inset`},'::placeholder':{color:theme.color.mediumdark}});const sizes=({size})=>{switch(size){case'100%':{return{width:'100%'};}case'flex':{return{flex:1};}case'auto':default:{return{display:'inline'};}}};const alignment=({align})=>{switch(align){case'end':{return{textAlign:'right'};}case'center':{return{textAlign:'center'};}case'start':default:{return{textAlign:'left'};}}};const validation=({valid,theme})=>{switch(valid){case'valid':{return{boxShadow:`${theme.color.positive} 0 0 0 1px inset !important`};}case'error':{return{boxShadow:`${theme.color.negative} 0 0 0 1px inset !important`};}case'warn':{return{boxShadow:`${theme.color.warning} 0 0 0 1px inset`};}case undefined:case null:default:{return{};}}};const Input$1=Object.assign(styled(forwardRef((_a,ref)=>{var props=__rest(_a,["size","valid","align"]);return React__default.createElement("input",Object.assign({},props,{ref:ref}));}))(styles,sizes,alignment,validation,{minHeight:32}),{displayName:'Input'});const Select=Object.assign(styled(forwardRef((_a,ref)=>{var props=__rest(_a,["size","valid","align"]);return React__default.createElement("select",Object.assign({},props,{ref:ref}));}))(styles,sizes,validation,{height:32,userSelect:'none',paddingRight:20,appearance:'menulist'}),{displayName:'Select'});const Textarea=Object.assign(styled(forwardRef((_a,ref)=>{var props=__rest(_a,["size","valid","align"]);return React__default.createElement(TextareaAutoResize,Object.assign({},props,{ref:ref}));}))(styles,sizes,alignment,validation,({height=400})=>({overflow:'visible',maxHeight:height})),{displayName:'Textarea'});const ButtonStyled=styled(forwardRef((_a,ref)=>{var props=__rest(_a,["size","valid","align"]);return React__default.createElement(Button$2,Object.assign({},props,{ref:ref}));}))(sizes,validation,{// Custom styling for color widget nested in buttons
 userSelect:'none',overflow:'visible',zIndex:2,// overrides the default hover from Button
-'&:hover':{transform:'none'}});const Button$1=Object.assign(forwardRef((props,ref)=>React__default.createElement(ButtonStyled,Object.assign({},props,{tertiary:true,small:true,inForm:true},{ref:ref}))),{displayName:'Button'});const Form=Object.assign(styled.form({boxSizing:'border-box',width:'100%'}),{Field,Input:Input$1,Select,Textarea,Button:Button$1});const LazyWithTooltip=lazy(()=>import('./WithTooltip-37c63930.js').then(mod=>({default:mod.WithTooltip})));const WithTooltip=props=>React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyWithTooltip,Object.assign({},props)));const LazyWithTooltipPure=lazy(()=>import('./WithTooltip-37c63930.js').then(mod=>({default:mod.WithTooltipPure})));const WithTooltipPure=props=>React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyWithTooltipPure,Object.assign({},props)));const Title$2=styled.div(({theme})=>({fontWeight:theme.typography.weight.black}));const Desc=styled.span();const Links=styled.div(({theme})=>({marginTop:8,textAlign:'center','> *':{margin:'0 8px',fontWeight:theme.typography.weight.black}}));const Message=styled.div(({theme})=>({color:theme.textColor,lineHeight:'18px'}));const MessageWrapper=styled.div({padding:15,width:280,boxSizing:'border-box'});const TooltipMessage=({title,desc,links})=>{return React__default.createElement(MessageWrapper,null,React__default.createElement(Message,null,title&&React__default.createElement(Title$2,null,title),desc&&React__default.createElement(Desc,null,desc)),links&&React__default.createElement(Links,null,links.map(_a=>{var{title:linkTitle}=_a,other=__rest(_a,["title"]);return React__default.createElement(Link,Object.assign({},other,{key:linkTitle}),linkTitle);})));};TooltipMessage.defaultProps={title:null,desc:null,links:null};const Note=styled.div(({theme})=>({padding:'2px 6px',lineHeight:'16px',fontSize:10,fontWeight:theme.typography.weight.bold,color:theme.color.lightest,boxShadow:'0 0 5px 0 rgba(0, 0, 0, 0.3)',borderRadius:4,whiteSpace:'nowrap',pointerEvents:'none',zIndex:-1,background:theme.base==='light'?'rgba(60, 60, 60, 0.9)':'rgba(20, 20, 20, 0.85)',margin:6}));const TooltipNote=_a=>{var{note}=_a,props=__rest(_a,["note"]);return React__default.createElement(Note,Object.assign({},props),note);};var memoizerific={exports:{}};(function(module,exports){(function(f){{module.exports=f();}})(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof commonjsRequire=="function"&&commonjsRequire;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f;}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e);},l,l.exports,e,t,n,r);}return n[o].exports;}var i=typeof commonjsRequire=="function"&&commonjsRequire;for(var o=0;o<r.length;o++)s(r[o]);return s;}({1:[function(_dereq_,module,exports){module.exports=function(forceSimilar){if(typeof Map!=='function'||forceSimilar){var Similar=_dereq_('./similar');return new Similar();}else{return new Map();}};},{"./similar":2}],2:[function(_dereq_,module,exports){function Similar(){this.list=[];this.lastItem=undefined;this.size=0;return this;}Similar.prototype.get=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){return this.lastItem.val;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];return this.list[index].val;}return undefined;};Similar.prototype.set=function(key,val){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){this.lastItem.val=val;return this;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];this.list[index].val=val;return this;}this.lastItem={key:key,val:val};this.list.push(this.lastItem);this.size++;return this;};Similar.prototype.delete=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){this.lastItem=undefined;}index=this.indexOf(key);if(index>=0){this.size--;return this.list.splice(index,1)[0];}return undefined;};// important that has() doesn't use get() in case an existing key has a falsy value, in which case has() would return false
+'&:hover':{transform:'none'}});const Button$1=Object.assign(forwardRef((props,ref)=>React__default.createElement(ButtonStyled,Object.assign({},props,{tertiary:true,small:true,inForm:true},{ref:ref}))),{displayName:'Button'});const Form=Object.assign(styled.form({boxSizing:'border-box',width:'100%'}),{Field,Input:Input$1,Select,Textarea,Button:Button$1});const LazyWithTooltip=lazy(()=>import('./WithTooltip-01d94d19.js').then(mod=>({default:mod.WithTooltip})));const WithTooltip=props=>React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyWithTooltip,Object.assign({},props)));const LazyWithTooltipPure=lazy(()=>import('./WithTooltip-01d94d19.js').then(mod=>({default:mod.WithTooltipPure})));const WithTooltipPure=props=>React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyWithTooltipPure,Object.assign({},props)));const Title$2=styled.div(({theme})=>({fontWeight:theme.typography.weight.black}));const Desc=styled.span();const Links=styled.div(({theme})=>({marginTop:8,textAlign:'center','> *':{margin:'0 8px',fontWeight:theme.typography.weight.black}}));const Message=styled.div(({theme})=>({color:theme.textColor,lineHeight:'18px'}));const MessageWrapper=styled.div({padding:15,width:280,boxSizing:'border-box'});const TooltipMessage=({title,desc,links})=>{return React__default.createElement(MessageWrapper,null,React__default.createElement(Message,null,title&&React__default.createElement(Title$2,null,title),desc&&React__default.createElement(Desc,null,desc)),links&&React__default.createElement(Links,null,links.map(_a=>{var{title:linkTitle}=_a,other=__rest(_a,["title"]);return React__default.createElement(Link,Object.assign({},other,{key:linkTitle}),linkTitle);})));};TooltipMessage.defaultProps={title:null,desc:null,links:null};const Note=styled.div(({theme})=>({padding:'2px 6px',lineHeight:'16px',fontSize:10,fontWeight:theme.typography.weight.bold,color:theme.color.lightest,boxShadow:'0 0 5px 0 rgba(0, 0, 0, 0.3)',borderRadius:4,whiteSpace:'nowrap',pointerEvents:'none',zIndex:-1,background:theme.base==='light'?'rgba(60, 60, 60, 0.9)':'rgba(20, 20, 20, 0.85)',margin:6}));const TooltipNote=_a=>{var{note}=_a,props=__rest(_a,["note"]);return React__default.createElement(Note,Object.assign({},props),note);};var memoizerific={exports:{}};(function(module,exports){(function(f){{module.exports=f();}})(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof commonjsRequire=="function"&&commonjsRequire;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f;}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e);},l,l.exports,e,t,n,r);}return n[o].exports;}var i=typeof commonjsRequire=="function"&&commonjsRequire;for(var o=0;o<r.length;o++)s(r[o]);return s;}({1:[function(_dereq_,module,exports){module.exports=function(forceSimilar){if(typeof Map!=='function'||forceSimilar){var Similar=_dereq_('./similar');return new Similar();}else{return new Map();}};},{"./similar":2}],2:[function(_dereq_,module,exports){function Similar(){this.list=[];this.lastItem=undefined;this.size=0;return this;}Similar.prototype.get=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){return this.lastItem.val;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];return this.list[index].val;}return undefined;};Similar.prototype.set=function(key,val){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){this.lastItem.val=val;return this;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];this.list[index].val=val;return this;}this.lastItem={key:key,val:val};this.list.push(this.lastItem);this.size++;return this;};Similar.prototype.delete=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){this.lastItem=undefined;}index=this.indexOf(key);if(index>=0){this.size--;return this.list.splice(index,1)[0];}return undefined;};// important that has() doesn't use get() in case an existing key has a falsy value, in which case has() would return false
 Similar.prototype.has=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){return true;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];return true;}return false;};Similar.prototype.forEach=function(callback,thisArg){var i;for(i=0;i<this.size;i++){callback.call(thisArg||this,this.list[i].val,this.list[i].key,this);}};Similar.prototype.indexOf=function(key){var i;for(i=0;i<this.size;i++){if(this.isEqual(this.list[i].key,key)){return i;}}return-1;};// check if the numbers are equal, or whether they are both precisely NaN (isNaN returns true for all non-numbers)
 Similar.prototype.isEqual=function(val1,val2){return val1===val2||val1!==val1&&val2!==val2;};module.exports=Similar;},{}],3:[function(_dereq_,module,exports){var MapOrSimilar=_dereq_('map-or-similar');module.exports=function(limit){var cache=new MapOrSimilar(undefined==='true'),lru=[];return function(fn){var memoizerific=function(){var currentCache=cache,newMap,fnResult,argsLengthMinusOne=arguments.length-1,lruPath=Array(argsLengthMinusOne+1),isMemoized=true,i;if((memoizerific.numArgs||memoizerific.numArgs===0)&&memoizerific.numArgs!==argsLengthMinusOne+1){throw new Error('Memoizerific functions should always be called with the same number of arguments');}// loop through each argument to traverse the map tree
 for(i=0;i<argsLengthMinusOne;i++){lruPath[i]={cacheItem:currentCache,arg:arguments[i]};// climb through the hierarchical map tree until the second-last argument has been found, or an argument is missing.
@@ -466,7 +466,7 @@ if(CONFIG_TYPE!=='DEVELOPMENT'||!EventSource)return undefined;const eventSource=
  * items. The preview also shows the source for the component
  * as a drop-down.
  */const Preview=_a=>{var{isLoading,isColumn,columns,children,withSource,withToolbar=false,isExpanded=false,additionalActions,className}=_a,props=__rest(_a,["isLoading","isColumn","columns","children","withSource","withToolbar","isExpanded","additionalActions","className"]);const[expanded,setExpanded]=useState(isExpanded);const{source,actionItem}=getSource(withSource,expanded,setExpanded);const[scale,setScale]=useState(1);const previewClasses=[className].concat(['sbdocs','sbdocs-preview']);const defaultActionItems=withSource?[actionItem]:[];const[additionalActionItems,setAdditionalActionItems]=useState(additionalActions?[...additionalActions]:[]);const actionItems=[...defaultActionItems,...additionalActionItems];// @ts-ignore
-const layout=getLayout(Children.count(children)===1?[children]:children);const{window:globalWindow}=window_1;const copyToClipboard=useCallback(text=>__awaiter(void 0,void 0,void 0,function*(){const{createCopyToClipboardFunction}=yield import('./syntaxhighlighter-7918e0a9.js');createCopyToClipboardFunction();}),[]);const onCopyCapture=e=>{e.preventDefault();if(additionalActionItems.filter(item=>item.title==='Copied').length===0){copyToClipboard(source.props.code).then(()=>{setAdditionalActionItems([...additionalActionItems,{title:'Copied',onClick:()=>{}}]);globalWindow.setTimeout(()=>setAdditionalActionItems(additionalActionItems.filter(item=>item.title!=='Copied')),1500);});}};return React__default.createElement(PreviewContainer,Object.assign({},{withSource,withToolbar},props,{className:previewClasses.join(' ')}),withToolbar&&React__default.createElement(PositionedToolbar,{isLoading:isLoading,border:true,zoom:z=>setScale(scale*z),resetZoom:()=>setScale(1),storyId:getStoryId(children),baseUrl:"./iframe.html"}),React__default.createElement(ZoomContext.Provider,{value:{scale}},React__default.createElement(Relative,{className:"docs-story",onCopyCapture:withSource&&onCopyCapture},React__default.createElement(ChildrenContainer,{isColumn:isColumn||!Array.isArray(children),columns:columns,layout:layout},React__default.createElement(Zoom$1.Element,{scale:scale},Array.isArray(children)?// eslint-disable-next-line react/no-array-index-key
+const layout=getLayout(Children.count(children)===1?[children]:children);const{window:globalWindow}=window_1;const copyToClipboard=useCallback(text=>__awaiter(void 0,void 0,void 0,function*(){const{createCopyToClipboardFunction}=yield import('./syntaxhighlighter-a031426a.js');createCopyToClipboardFunction();}),[]);const onCopyCapture=e=>{e.preventDefault();if(additionalActionItems.filter(item=>item.title==='Copied').length===0){copyToClipboard(source.props.code).then(()=>{setAdditionalActionItems([...additionalActionItems,{title:'Copied',onClick:()=>{}}]);globalWindow.setTimeout(()=>setAdditionalActionItems(additionalActionItems.filter(item=>item.title!=='Copied')),1500);});}};return React__default.createElement(PreviewContainer,Object.assign({},{withSource,withToolbar},props,{className:previewClasses.join(' ')}),withToolbar&&React__default.createElement(PositionedToolbar,{isLoading:isLoading,border:true,zoom:z=>setScale(scale*z),resetZoom:()=>setScale(1),storyId:getStoryId(children),baseUrl:"./iframe.html"}),React__default.createElement(ZoomContext.Provider,{value:{scale}},React__default.createElement(Relative,{className:"docs-story",onCopyCapture:withSource&&onCopyCapture},React__default.createElement(ChildrenContainer,{isColumn:isColumn||!Array.isArray(children),columns:columns,layout:layout},React__default.createElement(Zoom$1.Element,{scale:scale},Array.isArray(children)?// eslint-disable-next-line react/no-array-index-key
 children.map((child,i)=>React__default.createElement("div",{key:i},child)):React__default.createElement("div",null,children))),React__default.createElement(ActionBar,{actionItems:actionItems}))),withSource&&expanded&&source);};const StyledPreview=styled(Preview)(()=>({'.docs-story':{paddingTop:32,paddingBottom:40}}));const PreviewSkeleton=()=>React__default.createElement(StyledPreview,{isLoading:true,withToolbar:true},React__default.createElement(StorySkeleton,null));/**
  * A specialized version of `_.map` for arrays without support for iteratee
  * shorthands.
@@ -2100,7 +2100,7 @@ JsonTree.defaultProps={rootName:'root',isCollapsed:(keyPath,deep)=>deep!==-1,get
             ${curriedLighten$1(0.02,theme.input.background)} ${(value-min)/(max-min)*100}%, 
             ${curriedLighten$1(0.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,color:'transparent',width:'100%',height:'6px',cursor:'pointer'},'&::-ms-fill-lower':{borderRadius:6},'&::-ms-fill-upper':{borderRadius:6},'&::-ms-thumb':{width:16,height:16,background:`${theme.input.background}`,border:`1px solid ${rgba(theme.appBorderColor,0.2)}`,borderRadius:50,cursor:'grab',marginTop:0},'@supports (-ms-ime-align:auto)':{'input[type=range]':{margin:'0'}}}));const RangeLabel=styled.span({paddingLeft:5,paddingRight:5,fontSize:12,whiteSpace:'nowrap',fontFeatureSettings:'tnum',fontVariantNumeric:'tabular-nums'});const RangeWrapper=styled.div({display:'flex',alignItems:'center',width:'100%'});function getNumberOfDecimalPlaces(number){const match=number.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return!match?0:Math.max(0,// Number of digits right of decimal point.
 (match[1]?match[1].length:0)-(// Adjust for scientific notation.
-match[2]?+match[2]:0));}const RangeControl=({name,value,onChange,min=0,max=100,step=1,onBlur,onFocus})=>{const handleChange=event=>{onChange(parse$1(event.target.value));};const hasValue=value!==undefined;const numberOFDecimalsPlaces=useMemo(()=>getNumberOfDecimalPlaces(step),[step]);return React__default.createElement(RangeWrapper,null,React__default.createElement(RangeLabel,null,min),React__default.createElement(RangeInput,Object.assign({id:getControlId(name),type:"range",onChange:handleChange},{name,value,min,max,step,onFocus,onBlur})),React__default.createElement(RangeLabel,null,`${hasValue?value.toFixed(numberOFDecimalsPlaces):'--'}`," / ",max));};const Wrapper$1=styled.label({display:'flex'});const TextControl=({name,value,onChange,onFocus,onBlur})=>{const handleChange=event=>{onChange(event.target.value);};const[forceVisible,setForceVisible]=useState(false);const onForceVisible=useCallback(()=>{onChange('');setForceVisible(true);},[setForceVisible]);if(value===undefined){return React__default.createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");}const isValid=typeof value==='string';return React__default.createElement(Wrapper$1,null,React__default.createElement(Form.Textarea,Object.assign({id:getControlId(name),onChange:handleChange,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:'error'},{name,value:isValid?value:'',onFocus,onBlur})));};const FileInput=styled(Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(url=>{if(url.startsWith('blob:')){URL.revokeObjectURL(url);}});}const FilesControl=({onChange,name,accept='image/*',value})=>{function handleFileChange(e){if(!e.target.files){return;}const fileUrls=Array.from(e.target.files).map(file=>URL.createObjectURL(file));onChange(fileUrls);revokeOldUrls(value);}return React__default.createElement(FileInput,{id:getControlId(name),type:"file",name:name,multiple:true,onChange:handleFileChange,accept:accept,size:"flex"});};const LazyColorControl=lazy(()=>import('./Color-4e20b6d9.js'));const ColorControl=props=>React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyColorControl,Object.assign({},props)));const Controls={array:ObjectControl,object:ObjectControl,boolean:BooleanControl,color:ColorControl,date:DateControl,number:NumberControl,check:OptionsControl,'inline-check':OptionsControl,radio:OptionsControl,'inline-radio':OptionsControl,select:OptionsControl,'multi-select':OptionsControl,range:RangeControl,text:TextControl,file:FilesControl};const NoControl=()=>React__default.createElement(React__default.Fragment,null,"-");const ArgControl=({row,arg,updateArgs})=>{const{key,control}=row;const[isFocused,setFocused]=useState(false);// box because arg can be a fn (e.g. actions) and useState calls fn's
+match[2]?+match[2]:0));}const RangeControl=({name,value,onChange,min=0,max=100,step=1,onBlur,onFocus})=>{const handleChange=event=>{onChange(parse$1(event.target.value));};const hasValue=value!==undefined;const numberOFDecimalsPlaces=useMemo(()=>getNumberOfDecimalPlaces(step),[step]);return React__default.createElement(RangeWrapper,null,React__default.createElement(RangeLabel,null,min),React__default.createElement(RangeInput,Object.assign({id:getControlId(name),type:"range",onChange:handleChange},{name,value,min,max,step,onFocus,onBlur})),React__default.createElement(RangeLabel,null,`${hasValue?value.toFixed(numberOFDecimalsPlaces):'--'}`," / ",max));};const Wrapper$1=styled.label({display:'flex'});const TextControl=({name,value,onChange,onFocus,onBlur})=>{const handleChange=event=>{onChange(event.target.value);};const[forceVisible,setForceVisible]=useState(false);const onForceVisible=useCallback(()=>{onChange('');setForceVisible(true);},[setForceVisible]);if(value===undefined){return React__default.createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");}const isValid=typeof value==='string';return React__default.createElement(Wrapper$1,null,React__default.createElement(Form.Textarea,Object.assign({id:getControlId(name),onChange:handleChange,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:'error'},{name,value:isValid?value:'',onFocus,onBlur})));};const FileInput=styled(Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(url=>{if(url.startsWith('blob:')){URL.revokeObjectURL(url);}});}const FilesControl=({onChange,name,accept='image/*',value})=>{function handleFileChange(e){if(!e.target.files){return;}const fileUrls=Array.from(e.target.files).map(file=>URL.createObjectURL(file));onChange(fileUrls);revokeOldUrls(value);}return React__default.createElement(FileInput,{id:getControlId(name),type:"file",name:name,multiple:true,onChange:handleFileChange,accept:accept,size:"flex"});};const LazyColorControl=lazy(()=>import('./Color-39554c21.js'));const ColorControl=props=>React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyColorControl,Object.assign({},props)));const Controls={array:ObjectControl,object:ObjectControl,boolean:BooleanControl,color:ColorControl,date:DateControl,number:NumberControl,check:OptionsControl,'inline-check':OptionsControl,radio:OptionsControl,'inline-radio':OptionsControl,select:OptionsControl,'multi-select':OptionsControl,range:RangeControl,text:TextControl,file:FilesControl};const NoControl=()=>React__default.createElement(React__default.Fragment,null,"-");const ArgControl=({row,arg,updateArgs})=>{const{key,control}=row;const[isFocused,setFocused]=useState(false);// box because arg can be a fn (e.g. actions) and useState calls fn's
 const[boxedValue,setBoxedValue]=useState({value:arg});useEffect(()=>{if(!isFocused)setBoxedValue({value:arg});},[isFocused,arg]);const onChange=useCallback(argVal=>{setBoxedValue({value:argVal});updateArgs({[key]:argVal});return argVal;},[updateArgs,key]);const onBlur=useCallback(()=>setFocused(false),[]);const onFocus=useCallback(()=>setFocused(true),[]);if(!control||control.disable)return React__default.createElement(NoControl,null);// row.name is a display name and not a suitable DOM input id or name - i might contain whitespace etc.
 // row.key is a hash key and therefore a much safer choice
 const props={name:key,argType:row,value:boxedValue.value,onChange,onBlur,onFocus};const Control=Controls[control.type]||NoControl;return React__default.createElement(Control,Object.assign({},props,control,{controlType:control.type}));};const Name=styled.span({fontWeight:'bold'});const Required=styled.span(({theme})=>({color:theme.color.negative,fontFamily:theme.typography.fonts.mono,cursor:'help'}));const Description=styled.div(({theme})=>({'&&':{p:{margin:'0 0 10px 0'},a:{color:theme.color.secondary}},code:Object.assign(Object.assign({},codeCommon({theme})),{fontSize:12,fontFamily:theme.typography.fonts.mono}),'& code':{margin:0,display:'inline-block'},'& pre > code':{whiteSpace:'pre-wrap'}}));const Type=styled.div(({theme,hasDescription})=>({color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.2,theme.color.defaultText),marginTop:hasDescription?4:0}));const TypeWithJsDoc=styled.div(({theme,hasDescription})=>({color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.2,theme.color.defaultText),marginTop:hasDescription?12:0,marginBottom:12}));const StyledTd$1=styled.td(({theme,expandable})=>({paddingLeft:expandable?'40px !important':'20px !important'}));const ArgRow=props=>{var _a;const{row,updateArgs,compact,expandable,initialExpandedArgs}=props;const{name,description}=row;const table=row.table||{};const type=table.type||row.type;const defaultValue=table.defaultValue||row.defaultValue;const required=(_a=row.type)===null||_a===void 0?void 0:_a.required;const hasDescription=description!=null&&description!=='';return React__default.createElement("tr",null,React__default.createElement(StyledTd$1,{expandable:expandable},React__default.createElement(Name,null,name),required?React__default.createElement(Required,{title:"Required"},"*"):null),compact?null:React__default.createElement("td",null,hasDescription&&React__default.createElement(Description,null,React__default.createElement(Markdown,null,description)),table.jsDocTags!=null?React__default.createElement(React__default.Fragment,null,React__default.createElement(TypeWithJsDoc,{hasDescription:hasDescription},React__default.createElement(ArgValue,{value:type,initialExpandedArgs:initialExpandedArgs})),React__default.createElement(ArgJsDoc,{tags:table.jsDocTags})):React__default.createElement(Type,{hasDescription:hasDescription},React__default.createElement(ArgValue,{value:type,initialExpandedArgs:initialExpandedArgs}))),compact?null:React__default.createElement("td",null,React__default.createElement(ArgValue,{value:defaultValue,initialExpandedArgs:initialExpandedArgs})),updateArgs?React__default.createElement("td",null,React__default.createElement(ArgControl,Object.assign({},props))):null);};const ExpanderIcon=styled(Icons)(({theme})=>({marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:theme.base==='light'?curriedTransparentize$1(0.25,theme.color.defaultText):curriedTransparentize$1(0.3,theme.color.defaultText),border:'none',display:'inline-block'}));const FlexWrapper=styled.span(({theme})=>({display:'flex',lineHeight:'20px',alignItems:'center'}));const Section=styled.td(({theme})=>({position:'relative',letterSpacing:'0.35em',textTransform:'uppercase',fontWeight:theme.typography.weight.black,fontSize:theme.typography.size.s1-1,color:theme.base==='light'?curriedTransparentize$1(0.4,theme.color.defaultText):curriedTransparentize$1(0.6,theme.color.defaultText),background:`${theme.background.app} !important`,'& ~ td':{background:`${theme.background.app} !important`}}));const Subsection=styled.td(({theme})=>({position:'relative',fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s2-1,background:theme.background.content}));const StyledTd=styled.td(({theme})=>({position:'relative'}));const StyledTr=styled.tr(({theme})=>({'&:hover > td':{backgroundColor:`${theme.background.hoverable} !important`,boxShadow:`${theme.color.mediumlight} 0 - 1px 0 0 inset`,cursor:'row-resize'}}));const ClickIntercept=styled.button(()=>({// reset button style

package/dist/modern/index.js

@@ -1,5 +1,5 @@
 import 'react';
-export { E as A, A as ActionBar, ao as AddonPanel, aF as ArgsTable, aD as ArgsTableError, a3 as Badge, am as Bar, G as Blockquote, aV as BooleanControl, aa as Button, H as Code, aU as ColorControl, aQ as ColorItem, aR as ColorPalette, K as DL, aW as DateControl, au as Description, J as Div, ax as DocsContent, az as DocsPageWrapper, ay as DocsWrapper, a5 as DocumentWrapper, b2 as FilesControl, an as FlexBar, F as Form, L as H1, M as H2, N as H3, O as H4, P as H5, Q as H6, R as HR, aO as IFrame, ai as IconButton, aT as IconGallery, aS as IconItem, I as Icons, U as Img, V as LI, a4 as Link, as as Loader, aH as NoControlsWarning, aZ as NumberControl, X as OL, a$ as ObjectControl, a_ as OptionsControl, Y as P, a8 as Placeholder, Z as Pre, aA as Preview, aB as PreviewSkeleton, b0 as RangeControl, S as ScrollArea, ak as Separator, aJ as Source, aI as SourceError, a7 as Spaced, $ as Span, aM as Story, aL as StoryError, aN as StorySkeleton, ar as StorybookIcon, aq as StorybookLogo, aK as StyledSyntaxHighlighter, aw as Subtitle, ap as Symbols, a6 as SyntaxHighlighter, a1 as TT, ag as TabBar, aj as TabButton, ah as TabWrapper, aG as TabbedArgsTable, a0 as Table, aC as TableWrapper, ae as Tabs, af as TabsState, b1 as TextControl, av as Title, ad as TooltipLinkList, ac as TooltipMessage, T as TooltipNote, aP as Typeset, a2 as UL, W as WithTooltip, ab as WithTooltipPure, a9 as Zoom, aE as argsTableLoadingData, C as components, aY as format, at as getStoryHref, al as interleaveSeparators, b3 as nameSpaceClassNames, aX as parse, D as resetComponents } from './index-1368aba1.js';
+export { E as A, A as ActionBar, ao as AddonPanel, aF as ArgsTable, aD as ArgsTableError, a3 as Badge, am as Bar, G as Blockquote, aV as BooleanControl, aa as Button, H as Code, aU as ColorControl, aQ as ColorItem, aR as ColorPalette, K as DL, aW as DateControl, au as Description, J as Div, ax as DocsContent, az as DocsPageWrapper, ay as DocsWrapper, a5 as DocumentWrapper, b2 as FilesControl, an as FlexBar, F as Form, L as H1, M as H2, N as H3, O as H4, P as H5, Q as H6, R as HR, aO as IFrame, ai as IconButton, aT as IconGallery, aS as IconItem, I as Icons, U as Img, V as LI, a4 as Link, as as Loader, aH as NoControlsWarning, aZ as NumberControl, X as OL, a$ as ObjectControl, a_ as OptionsControl, Y as P, a8 as Placeholder, Z as Pre, aA as Preview, aB as PreviewSkeleton, b0 as RangeControl, S as ScrollArea, ak as Separator, aJ as Source, aI as SourceError, a7 as Spaced, $ as Span, aM as Story, aL as StoryError, aN as StorySkeleton, ar as StorybookIcon, aq as StorybookLogo, aK as StyledSyntaxHighlighter, aw as Subtitle, ap as Symbols, a6 as SyntaxHighlighter, a1 as TT, ag as TabBar, aj as TabButton, ah as TabWrapper, aG as TabbedArgsTable, a0 as Table, aC as TableWrapper, ae as Tabs, af as TabsState, b1 as TextControl, av as Title, ad as TooltipLinkList, ac as TooltipMessage, T as TooltipNote, aP as Typeset, a2 as UL, W as WithTooltip, ab as WithTooltipPure, a9 as Zoom, aE as argsTableLoadingData, C as components, aY as format, at as getStoryHref, al as interleaveSeparators, b3 as nameSpaceClassNames, aX as parse, D as resetComponents } from './index-8859409f.js';
 import '@storybook/theming';
 import '@storybook/csf';
 import '@storybook/client-logger';