storybook 10.1.0-beta.1 → 10.1.0-beta.3

package/dist/manager/globals-runtime.js

@@ -7493,7 +7493,7 @@ var import_react4, tags, styled, init_emotion_styled_browser_esm = __esm({
 });
 
 // src/theming/base.ts
-var color, background, typography, init_base = __esm({
+var color, background, typography, tokens, init_base = __esm({
   "src/theming/base.ts"() {
     "use strict";
     color = {
@@ -7522,7 +7522,7 @@ var color, background, typography, init_base = __esm({
       darker: "#454C54",
       darkest: "#2E3338",
       // For borders
-      border: "hsla(212, 50%, 30%, 0.15)",
+      border: "hsl(212 50% 30% / 0.15)",
       // Status
       positive: "#66BF3C",
       warning: "#E69D00",
@@ -7589,6 +7589,69 @@ var color, background, typography, init_base = __esm({
         l3: 48,
         code: 90
       }
+    }, tokens = {
+      light: {
+        fgColor: {
+          default: color.darkest,
+          muted: color.dark,
+          accent: color.secondary,
+          inverse: color.lightest,
+          // TODO: add 'disabled'
+          positive: "#427C27",
+          warning: "#7A4100",
+          negative: "#C23400",
+          critical: "#FFFFFF"
+        },
+        bgColor: {
+          default: color.lightest,
+          muted: background.app,
+          // TODO: add 'accent'? white or blue?
+          positive: "#F1FFEB",
+          warning: "#FFF7EB",
+          negative: "#FFF0EB",
+          critical: "#D13800"
+        },
+        borderColor: {
+          default: color.border,
+          muted: "hsl(0 0% 0% / 0.1)",
+          inverse: "hsl(0 0% 100% / 0.1)",
+          positive: "#BFE7AC",
+          warning: "#FFCE85",
+          negative: "#FFC3AD",
+          critical: "hsl(16 100% 100% / 0)"
+        }
+      },
+      dark: {
+        fgColor: {
+          default: "#C9CCCF",
+          muted: "#95999D",
+          accent: "#479DFF",
+          inverse: "#1B1C1D",
+          // TODO: add 'disabled'
+          positive: "#86CE64",
+          warning: "#FFAD33",
+          negative: "#FF6933",
+          critical: "#FF6933"
+        },
+        bgColor: {
+          default: "#222325",
+          muted: "#1B1C1D",
+          // TODO: add 'accent'? white or blue?
+          positive: "hsl(101 100% 100% / 0)",
+          warning: "hsl(101 100% 100% / 0)",
+          negative: "hsl(101 100% 100% / 0)",
+          critical: "hsl(101 100% 100% / 0)"
+        },
+        borderColor: {
+          default: "hsl(0 0% 100% / 0.1)",
+          muted: "hsl(0 0% 100% / 0.5)",
+          inverse: "hsl(0 0% 0% / 0.1)",
+          positive: "hsl(101 52% 64% / 0.15)",
+          warning: "hsl(36 100% 64% / 0.15)",
+          negative: "hsl(16 100% 64% / 0.15)",
+          critical: "#FF6933"
+        }
+      }
     };
   }
 });
@@ -7856,7 +7919,7 @@ var theme, dark_default, init_dark = __esm({
       appContentBg: "#222325",
       appHoverBg: "#233952",
       appPreviewBg: color.lightest,
-      appBorderColor: "rgba(255,255,255,.1)",
+      appBorderColor: "hsl(0 0% 100% / 0.1)",
       appBorderRadius: 4,
       // Fonts
       fontBase: typography.fonts.base,
@@ -7872,11 +7935,11 @@ var theme, dark_default, init_dark = __esm({
       barBg: "#222325",
       // Form colors
       buttonBg: "#1B1C1D",
-      buttonBorder: "hsl(0 0 100 / 0.1)",
+      buttonBorder: "hsl(0 0% 100% / 0.1)",
       booleanBg: "#1B1C1D",
       booleanSelectedBg: "#292B2E",
       inputBg: "#1B1C1D",
-      inputBorder: "hsl(0 0 100 / 0.1)",
+      inputBorder: "hsl(0 0% 100% / 0.1)",
       inputTextColor: "#C9CCCF",
       inputBorderRadius: 4
     }, dark_default = theme;
@@ -8602,11 +8665,17 @@ var themesBase, preferredColorScheme, themes, create, init_create = __esm({
     }, preferredColorScheme = getPreferredColorScheme(), themes = {
       ...themesBase,
       normal: themesBase[preferredColorScheme]
-    }, create = (vars = { base: preferredColorScheme }, rest) => {
+    }, create = (vars = {
+      base: preferredColorScheme
+    }, rest) => {
       let inherit = {
+        // We always inherit the preferred color scheme.
         ...themes[preferredColorScheme],
+        // And then the declared theme base if it exists.
         ...themes[vars.base] || {},
+        // And then the actual theme content.
         ...vars,
+        // If no theme base was declared, we declare the preferred color scheme as the base.
         base: themes[vars.base] ? vars.base : preferredColorScheme
       };
       return {
@@ -8913,6 +8982,7 @@ var lightSyntaxColors, darkSyntaxColors, createColors, convert, init_convert = _
       return {
         ...rest,
         base,
+        ...base === "dark" ? tokens.dark : tokens.light,
         color: createColors(inherit),
         background: {
           app: appBg,
@@ -8967,13 +9037,13 @@ var lightSyntaxColors, darkSyntaxColors, createColors, convert, init_convert = _
           target: brandTarget
         },
         code: create2({
-          colors: base === "light" ? lightSyntaxColors : darkSyntaxColors,
+          colors: base === "dark" ? darkSyntaxColors : lightSyntaxColors,
           mono: fontCode
         }),
         // Addon actions theme
         // API example https://github.com/storybookjs/react-inspector/blob/master/src/styles/themes/chromeLight.tsx
         addonActionsTheme: {
-          ...base === "light" ? chromeLight : chromeDark,
+          ...base === "dark" ? chromeDark : chromeLight,
           BASE_FONT_FAMILY: fontCode,
           BASE_FONT_SIZE: typography.size.s2 - 1,
           BASE_LINE_HEIGHT: "18px",
@@ -9104,6 +9174,7 @@ __export(theming_exports, {
   lighten: () => lightenColor,
   styled: () => styled,
   themes: () => themes,
+  tokens: () => tokens,
   typography: () => typography,
   useTheme: () => useTheme,
   withTheme: () => withTheme
@@ -9964,15 +10035,15 @@ var require_jsx = __commonJS({
         );
         var stringifyToken = function(token2) {
           return token2 ? typeof token2 == "string" ? token2 : typeof token2.content == "string" ? token2.content : token2.content.map(stringifyToken).join("") : "";
-        }, walkTokens = function(tokens) {
-          for (var openedTags = [], i2 = 0; i2 < tokens.length; i2++) {
-            var token2 = tokens[i2], notTagNorBrace = !1;
+        }, walkTokens = function(tokens2) {
+          for (var openedTags = [], i2 = 0; i2 < tokens2.length; i2++) {
+            var token2 = tokens2[i2], notTagNorBrace = !1;
             if (typeof token2 != "string" && (token2.type === "tag" && token2.content[0] && token2.content[0].type === "tag" ? token2.content[0].content[0].content === "</" ? openedTags.length > 0 && openedTags[openedTags.length - 1].tagName === stringifyToken(token2.content[0].content[1]) && openedTags.pop() : token2.content[token2.content.length - 1].content === "/>" || openedTags.push({
               tagName: stringifyToken(token2.content[0].content[1]),
               openedBraces: 0
             }) : openedTags.length > 0 && token2.type === "punctuation" && token2.content === "{" ? openedTags[openedTags.length - 1].openedBraces++ : openedTags.length > 0 && openedTags[openedTags.length - 1].openedBraces > 0 && token2.type === "punctuation" && token2.content === "}" ? openedTags[openedTags.length - 1].openedBraces-- : notTagNorBrace = !0), (notTagNorBrace || typeof token2 == "string") && openedTags.length > 0 && openedTags[openedTags.length - 1].openedBraces === 0) {
               var plainText = stringifyToken(token2);
-              i2 < tokens.length - 1 && (typeof tokens[i2 + 1] == "string" || tokens[i2 + 1].type === "plain-text") && (plainText += stringifyToken(tokens[i2 + 1]), tokens.splice(i2 + 1, 1)), i2 > 0 && (typeof tokens[i2 - 1] == "string" || tokens[i2 - 1].type === "plain-text") && (plainText = stringifyToken(tokens[i2 - 1]) + plainText, tokens.splice(i2 - 1, 1), i2--), tokens[i2] = new Prism2.Token(
+              i2 < tokens2.length - 1 && (typeof tokens2[i2 + 1] == "string" || tokens2[i2 + 1].type === "plain-text") && (plainText += stringifyToken(tokens2[i2 + 1]), tokens2.splice(i2 + 1, 1)), i2 > 0 && (typeof tokens2[i2 - 1] == "string" || tokens2[i2 - 1].type === "plain-text") && (plainText = stringifyToken(tokens2[i2 - 1]) + plainText, tokens2.splice(i2 - 1, 1), i2--), tokens2[i2] = new Prism2.Token(
                 "plain-text",
                 plainText,
                 null,
@@ -10260,10 +10331,10 @@ var require_markdown = __commonJS({
         }), Prism2.hooks.add("after-tokenize", function(env) {
           if (env.language !== "markdown" && env.language !== "md")
             return;
-          function walkTokens(tokens) {
-            if (!(!tokens || typeof tokens == "string"))
-              for (var i2 = 0, l2 = tokens.length; i2 < l2; i2++) {
-                var token2 = tokens[i2];
+          function walkTokens(tokens2) {
+            if (!(!tokens2 || typeof tokens2 == "string"))
+              for (var i2 = 0, l2 = tokens2.length; i2 < l2; i2++) {
+                var token2 = tokens2[i2];
                 if (token2.type !== "code") {
                   walkTokens(token2.content);
                   continue;
@@ -12289,8 +12360,8 @@ var require_prism_core = __commonJS({
          * @memberof Prism
          */
         util: {
-          encode: function encode2(tokens) {
-            return tokens instanceof Token ? new Token(tokens.type, encode2(tokens.content), tokens.alias) : Array.isArray(tokens) ? tokens.map(encode2) : tokens.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/\u00a0/g, " ");
+          encode: function encode2(tokens2) {
+            return tokens2 instanceof Token ? new Token(tokens2.type, encode2(tokens2.content), tokens2.alias) : Array.isArray(tokens2) ? tokens2.map(encode2) : tokens2.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/\u00a0/g, " ");
           },
           /**
            * Returns the name of the type of the given value.
@@ -13190,8 +13261,8 @@ var require_core = __commonJS({
         value = result[index4], result[index4] = refract.Token.stringify(value, language, result);
       return result;
     }
-    function encode2(tokens) {
-      return tokens;
+    function encode2(tokens2) {
+      return tokens2;
     }
     function attributes(attrs) {
       var key;
@@ -15757,7 +15828,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       function rgb2(m3) {
         return callback("rgb", m3), "";
       }
-      var tokens = [{
+      var tokens2 = [{
         pattern: /^\x08+/,
         sub: remove2
       }, {
@@ -15822,8 +15893,8 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       }
       var results1 = [], _text = text, length2 = _text.length;
       outer: for (; length2 > 0; ) {
-        for (var i2 = 0, o2 = 0, len = tokens.length; o2 < len; i2 = ++o2) {
-          var handler = tokens[i2];
+        for (var i2 = 0, o2 = 0, len = tokens2.length; o2 < len; i2 = ++o2) {
+          var handler = tokens2[i2];
           if (process2(handler, i2), text.length !== length2) {
             length2 = text.length;
             continue outer;
@@ -31892,32 +31963,33 @@ var BadgeWrapper = styled.div(
     switch (status) {
       case "critical":
         return {
-          color: theme3.color.critical,
-          background: theme3.background.critical
+          color: theme3.fgColor.critical,
+          background: theme3.bgColor.critical,
+          boxShadow: `inset 0 0 0 1px ${theme3.borderColor.critical}`
         };
       case "negative":
         return {
-          color: theme3.color.negativeText,
-          background: theme3.background.negative,
-          boxShadow: theme3.base === "light" ? `inset 0 0 0 1px ${curriedTransparentize$1(0.9, theme3.color.negativeText)}` : "none"
+          color: theme3.fgColor.negative,
+          background: theme3.bgColor.negative,
+          boxShadow: `inset 0 0 0 1px ${theme3.borderColor.negative}`
         };
       case "warning":
         return {
-          color: theme3.color.warningText,
-          background: theme3.background.warning,
-          boxShadow: theme3.base === "light" ? `inset 0 0 0 1px ${curriedTransparentize$1(0.9, theme3.color.warningText)}` : "none"
+          color: theme3.fgColor.warning,
+          background: theme3.bgColor.warning,
+          boxShadow: `inset 0 0 0 1px ${theme3.borderColor.warning}`
         };
       case "neutral":
         return {
-          color: theme3.textMutedColor,
-          background: theme3.base === "light" ? theme3.background.app : theme3.barBg,
+          color: theme3.fgColor.muted,
+          background: theme3.base === "dark" ? theme3.barBg : theme3.background.app,
           boxShadow: `inset 0 0 0 1px ${curriedTransparentize$1(0.8, theme3.textMutedColor)}`
         };
       case "positive":
         return {
-          color: theme3.color.positiveText,
-          background: theme3.background.positive,
-          boxShadow: theme3.base === "light" ? `inset 0 0 0 1px ${curriedTransparentize$1(0.9, theme3.color.positiveText)}` : "none"
+          color: theme3.fgColor.positive,
+          background: theme3.bgColor.positive,
+          boxShadow: `inset 0 0 0 1px ${theme3.borderColor.positive}`
         };
       case "active":
         return {
@@ -40618,11 +40690,11 @@ var Markers;
 })(Markers = Markers || (Markers = {}));
 
 // ../node_modules/comment-parser/es6/stringifier/index.js
-function join(tokens) {
-  return tokens.start + tokens.delimiter + tokens.postDelimiter + tokens.tag + tokens.postTag + tokens.type + tokens.postType + tokens.name + tokens.postName + tokens.description + tokens.end + tokens.lineEnd;
+function join(tokens2) {
+  return tokens2.start + tokens2.delimiter + tokens2.postDelimiter + tokens2.tag + tokens2.postTag + tokens2.type + tokens2.postType + tokens2.name + tokens2.postName + tokens2.description + tokens2.end + tokens2.lineEnd;
 }
 function getStringifier() {
-  return (block) => block.source.map(({ tokens }) => join(tokens)).join(`
+  return (block) => block.source.map(({ tokens: tokens2 }) => join(tokens2)).join(`
 `);
 }
 
@@ -61021,7 +61093,7 @@ init_dist();
 var import_memoizerific8 = __toESM(require_memoizerific(), 1), import_semver = __toESM(require_semver2(), 1);
 
 // src/manager-api/version.ts
-var version = "10.1.0-beta.1";
+var version = "10.1.0-beta.3";
 
 // src/manager-api/modules/versions.ts
 var { VERSIONCHECK } = scope, getVersionCheckData = (0, import_memoizerific8.default)(1)(() => {
@@ -61054,15 +61126,12 @@ var { VERSIONCHECK } = scope, getVersionCheckData = (0, import_memoizerific8.def
     },
     // TODO: Move this to it's own "info" module later
     getDocsUrl: ({ asset, subpath = asset, versioned, renderer, ref = "ui" }) => {
-      let {
-        versions: { latest, current }
-      } = store2.getState(), url = `https://storybook.js.org/${asset ? "docs-assets" : "docs"}/`;
-      if (asset && current?.version)
-        url += `${import_semver.default.major(current.version)}.${import_semver.default.minor(current.version)}/`;
-      else if (versioned && current?.version && latest?.version) {
-        let versionDiff = import_semver.default.diff(latest.version, current.version);
-        versionDiff === "patch" || versionDiff === null || // assume latest version when current version is a 0.0.0 canary
-        import_semver.default.satisfies(current.version, "0.0.0", { includePrerelease: !0 }) || (url += `${import_semver.default.major(current.version)}.${import_semver.default.minor(current.version)}/`);
+      let { versions } = store2.getState(), latestVersion = versions.latest?.version, currentVersion = versions.current?.version, activeVersion = currentVersion?.startsWith("0.0.0") && latestVersion || currentVersion, url = `https://storybook.js.org/${asset ? "docs-assets" : "docs"}/`;
+      if (asset && activeVersion)
+        url += `${import_semver.default.major(activeVersion)}.${import_semver.default.minor(activeVersion)}/`;
+      else if (versioned && activeVersion && latestVersion) {
+        let versionDiff = import_semver.default.diff(latestVersion, activeVersion);
+        versionDiff === "patch" || versionDiff === null || (url += `${import_semver.default.major(activeVersion)}.${import_semver.default.minor(activeVersion)}/`);
       }
       let [cleanedSubpath, hash4] = subpath?.split("#") || [];
       if (cleanedSubpath && (url += asset ? cleanedSubpath : `${cleanedSubpath}/`), renderer && typeof scope.STORYBOOK_RENDERER < "u") {
@@ -63349,7 +63418,7 @@ function parseNumberSkeletonFromString(skeleton) {
     throw new Error("Number skeleton cannot be empty");
   for (var stringTokens = skeleton.split(WHITE_SPACE_REGEX).filter(function(x2) {
     return x2.length > 0;
-  }), tokens = [], _i = 0, stringTokens_1 = stringTokens; _i < stringTokens_1.length; _i++) {
+  }), tokens2 = [], _i = 0, stringTokens_1 = stringTokens; _i < stringTokens_1.length; _i++) {
     var stringToken = stringTokens_1[_i], stemAndOptions = stringToken.split("/");
     if (stemAndOptions.length === 0)
       throw new Error("Invalid number skeleton");
@@ -63358,9 +63427,9 @@ function parseNumberSkeletonFromString(skeleton) {
       if (option.length === 0)
         throw new Error("Invalid number skeleton");
     }
-    tokens.push({ stem, options });
+    tokens2.push({ stem, options });
   }
-  return tokens;
+  return tokens2;
 }
 function icuUnitToEcma(unit) {
   return unit.replace(/^(.*?)-/, "");
@@ -63430,8 +63499,8 @@ function parseNotationOptions(opt) {
   var result = {}, signOpts = parseSign(opt);
   return signOpts || result;
 }
-function parseNumberSkeleton(tokens) {
-  for (var result = {}, _i = 0, tokens_1 = tokens; _i < tokens_1.length; _i++) {
+function parseNumberSkeleton(tokens2) {
+  for (var result = {}, _i = 0, tokens_1 = tokens2; _i < tokens_1.length; _i++) {
     var token2 = tokens_1[_i];
     switch (token2.stem) {
       case "percent":
@@ -65444,18 +65513,18 @@ var IDENTIFIER_PREFIX_RE_1, Parser = (
         err: null
       };
     }, Parser2.prototype.parseNumberSkeletonFromString = function(skeleton, location4) {
-      var tokens = [];
+      var tokens2 = [];
       try {
-        tokens = parseNumberSkeletonFromString(skeleton);
+        tokens2 = parseNumberSkeletonFromString(skeleton);
       } catch {
         return this.error(ErrorKind.INVALID_NUMBER_SKELETON, location4);
       }
       return {
         val: {
           type: SKELETON_TYPE.number,
-          tokens,
+          tokens: tokens2,
           location: location4,
-          parsedOptions: this.shouldParseSkeletons ? parseNumberSkeleton(tokens) : {}
+          parsedOptions: this.shouldParseSkeletons ? parseNumberSkeleton(tokens2) : {}
         },
         err: null
       };
@@ -68837,26 +68906,28 @@ var import_react112 = __toESM(require_react(), 1);
 init_theming();
 var Input = styled.input(({ theme: theme3 }) => ({
   appearance: "none",
+  backgroundColor: theme3.input.background,
+  border: `1px solid ${theme3.base === "dark" ? "hsl(0 0 100 / 0.4)" : "hsl(0 0 0 / 0.44)"}`,
+  borderRadius: 2,
   display: "grid",
-  placeContent: "center",
-  width: 14,
-  height: 14,
   flexShrink: 0,
+  height: 14,
   margin: 0,
-  border: `1px solid ${theme3.input.border}`,
-  borderRadius: 2,
-  backgroundColor: theme3.input.background,
+  placeContent: "center",
   transition: "background-color 0.1s",
+  width: 14,
   "&:enabled": {
     cursor: "pointer"
   },
   "&:disabled": {
-    backgroundColor: theme3.base === "light" ? color.light : "transparent"
+    backgroundColor: "transparent",
+    borderColor: theme3.input.border
   },
   "&:disabled:checked, &:disabled:indeterminate": {
-    backgroundColor: theme3.base === "light" ? color.mediumdark : theme3.color.dark
+    backgroundColor: theme3.base === "dark" ? color.dark : theme3.color.mediumdark
   },
   "&:checked, &:indeterminate": {
+    border: "none",
     backgroundColor: color.secondary
   },
   "&:checked::before": {
@@ -69006,27 +69077,30 @@ var import_react116 = __toESM(require_react(), 1);
 init_theming();
 var Input4 = styled.input(({ theme: theme3 }) => ({
   appearance: "none",
+  backgroundColor: theme3.input.background,
+  border: `1px solid ${theme3.base === "dark" ? "hsl(0 0 100 / 0.4)" : "hsl(0 0 0 / 0.44)"}`,
+  borderRadius: 8,
   display: "grid",
-  placeContent: "center",
-  width: 16,
-  height: 16,
   flexShrink: 0,
+  height: 16,
   margin: -1,
-  border: `1px solid ${theme3.input.border}`,
-  borderRadius: 8,
-  backgroundColor: theme3.input.background,
+  placeContent: "center",
   transition: "background-color 0.1s",
+  width: 16,
   "&:enabled": {
     cursor: "pointer"
   },
   "&:disabled": {
-    backgroundColor: theme3.base === "light" ? color.light : "transparent"
+    backgroundColor: "transparent",
+    borderColor: theme3.input.border
   },
   "&:disabled:checked": {
-    backgroundColor: theme3.base === "light" ? color.light : theme3.color.mediumdark
+    backgroundColor: theme3.base === "dark" ? color.dark : theme3.color.mediumdark,
+    borderColor: theme3.base === "dark" ? color.dark : theme3.color.mediumdark
   },
   "&:checked": {
     backgroundColor: color.secondary,
+    borderColor: color.secondary,
     boxShadow: `inset 0 0 0 2px ${theme3.input.background}`
   },
   "&:enabled:focus-visible": {