storybook 10.2.0-beta.2 → 10.2.0-beta.4

package/dist/csf/index.d.ts

@@ -1,3 +1,4 @@
+import React$1, { ComponentProps } from 'react';
 import { StorybookTypes, Renderer as Renderer$1, ProjectAnnotations as ProjectAnnotations$1, NormalizedProjectAnnotations, ComponentAnnotations as ComponentAnnotations$1, StoryAnnotations as StoryAnnotations$1, ComposedStoryFn, TestFunction as TestFunction$1 } from 'storybook/internal/types';
 import { AddonTypes as AddonTypes$1, StoryContext as StoryContext$1 } from 'storybook/internal/csf';
 
@@ -358,6 +359,333 @@ type UnionToIntersection<Union> = (
 		? Intersection
 		: never;
 
+interface ComponentSelector {
+    __emotion_styles: any;
+}
+
+/**
+ * @desc Utility type for getting props type of React component.
+ * It takes `defaultProps` into an account - making props with defaults optional.
+ */
+type PropsOf<C extends keyof ReactJSX.IntrinsicElements | React.JSXElementConstructor<any>> = ReactJSX.LibraryManagedAttributes<C, React.ComponentProps<C>>;
+
+interface Theme {
+}
+
+type IsPreReact19$1 = 2 extends Parameters<React.FunctionComponent<any>>['length'] ? true : false;
+/** @ts-ignore */
+type ReactJSXElement = true extends IsPreReact19$1 ? JSX.Element : React.JSX.Element;
+/** @ts-ignore */
+type ReactJSXElementClass = true extends IsPreReact19$1 ? JSX.ElementClass : React.JSX.ElementClass;
+/** @ts-ignore */
+type ReactJSXElementAttributesProperty = true extends IsPreReact19$1 ? JSX.ElementAttributesProperty : React.JSX.ElementAttributesProperty;
+/** @ts-ignore */
+type ReactJSXElementChildrenAttribute = true extends IsPreReact19$1 ? JSX.ElementChildrenAttribute : React.JSX.ElementChildrenAttribute;
+/** @ts-ignore */
+type ReactJSXLibraryManagedAttributes<C, P> = true extends IsPreReact19$1 ? JSX.LibraryManagedAttributes<C, P> : React.JSX.LibraryManagedAttributes<C, P>;
+/** @ts-ignore */
+type ReactJSXIntrinsicAttributes = true extends IsPreReact19$1 ? JSX.IntrinsicAttributes : React.JSX.IntrinsicAttributes;
+/** @ts-ignore */
+type ReactJSXIntrinsicClassAttributes<T> = true extends IsPreReact19$1 ? JSX.IntrinsicClassAttributes<T> : React.JSX.IntrinsicClassAttributes<T>;
+/** @ts-ignore */
+type ReactJSXIntrinsicElements$1 = true extends IsPreReact19$1 ? JSX.IntrinsicElements : React.JSX.IntrinsicElements;
+/** @ts-ignore */
+type ReactJSXElementType = true extends IsPreReact19$1 ? string | React.JSXElementConstructor<any> : React.JSX.ElementType;
+declare namespace ReactJSX {
+    type ElementType = ReactJSXElementType;
+    interface Element extends ReactJSXElement {
+    }
+    interface ElementClass extends ReactJSXElementClass {
+    }
+    interface ElementAttributesProperty extends ReactJSXElementAttributesProperty {
+    }
+    interface ElementChildrenAttribute extends ReactJSXElementChildrenAttribute {
+    }
+    type LibraryManagedAttributes<C, P> = ReactJSXLibraryManagedAttributes<C, P>;
+    interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {
+    }
+    interface IntrinsicClassAttributes<T> extends ReactJSXIntrinsicClassAttributes<T> {
+    }
+    type IntrinsicElements = ReactJSXIntrinsicElements$1;
+}
+
+type IsPreReact19 = 2 extends Parameters<React.FunctionComponent<any>>['length'] ? true : false;
+/** @ts-ignore */
+type ReactJSXIntrinsicElements = true extends IsPreReact19 ? JSX.IntrinsicElements : React.JSX.IntrinsicElements;
+
+/**
+ * @typeparam ComponentProps  Props which will be included when withComponent is called
+ * @typeparam SpecificComponentProps  Props which will *not* be included when withComponent is called
+ */
+interface StyledComponent<ComponentProps extends {}, SpecificComponentProps extends {} = {}, JSXProps extends {} = {}> extends React.FC<ComponentProps & SpecificComponentProps & JSXProps>, ComponentSelector {
+    withComponent<C extends React.ComponentClass<React.ComponentProps<C>>>(component: C): StyledComponent<ComponentProps & PropsOf<C>, {}, {
+        ref?: React.Ref<InstanceType<C>>;
+    }>;
+    withComponent<C extends React.ComponentType<React.ComponentProps<C>>>(component: C): StyledComponent<ComponentProps & PropsOf<C>>;
+    withComponent<Tag extends keyof ReactJSXIntrinsicElements>(tag: Tag): StyledComponent<ComponentProps, ReactJSXIntrinsicElements[Tag]>;
+}
+
+type IconType = keyof typeof icons;
+declare const Svg: StyledComponent<{
+    theme?: Theme;
+    as?: React$1.ElementType;
+}, React$1.SVGProps<SVGSVGElement>, {}>;
+interface IconsProps extends ComponentProps<typeof Svg> {
+    icon: IconType;
+    useSymbol?: boolean;
+    onClick?: () => void;
+    __suppressDeprecationWarning?: boolean;
+}
+declare const icons: {
+    readonly user: "UserIcon";
+    readonly useralt: "UserAltIcon";
+    readonly useradd: "UserAddIcon";
+    readonly users: "UsersIcon";
+    readonly profile: "ProfileIcon";
+    readonly facehappy: "FaceHappyIcon";
+    readonly faceneutral: "FaceNeutralIcon";
+    readonly facesad: "FaceSadIcon";
+    readonly accessibility: "AccessibilityIcon";
+    readonly accessibilityalt: "AccessibilityAltIcon";
+    readonly arrowup: "ChevronUpIcon";
+    readonly arrowdown: "ChevronDownIcon";
+    readonly arrowleft: "ChevronLeftIcon";
+    readonly arrowright: "ChevronRightIcon";
+    readonly arrowupalt: "ArrowUpIcon";
+    readonly arrowdownalt: "ArrowDownIcon";
+    readonly arrowleftalt: "ArrowLeftIcon";
+    readonly arrowrightalt: "ArrowRightIcon";
+    readonly expandalt: "ExpandAltIcon";
+    readonly collapse: "CollapseIcon";
+    readonly expand: "ExpandIcon";
+    readonly unfold: "UnfoldIcon";
+    readonly transfer: "TransferIcon";
+    readonly redirect: "RedirectIcon";
+    readonly undo: "UndoIcon";
+    readonly reply: "ReplyIcon";
+    readonly sync: "SyncIcon";
+    readonly upload: "UploadIcon";
+    readonly download: "DownloadIcon";
+    readonly back: "BackIcon";
+    readonly proceed: "ProceedIcon";
+    readonly refresh: "RefreshIcon";
+    readonly globe: "GlobeIcon";
+    readonly compass: "CompassIcon";
+    readonly location: "LocationIcon";
+    readonly pin: "PinIcon";
+    readonly time: "TimeIcon";
+    readonly dashboard: "DashboardIcon";
+    readonly timer: "TimerIcon";
+    readonly home: "HomeIcon";
+    readonly admin: "AdminIcon";
+    readonly info: "InfoIcon";
+    readonly question: "QuestionIcon";
+    readonly support: "SupportIcon";
+    readonly alert: "AlertIcon";
+    readonly email: "EmailIcon";
+    readonly phone: "PhoneIcon";
+    readonly link: "LinkIcon";
+    readonly unlink: "LinkBrokenIcon";
+    readonly bell: "BellIcon";
+    readonly rss: "RSSIcon";
+    readonly sharealt: "ShareAltIcon";
+    readonly share: "ShareIcon";
+    readonly circle: "CircleIcon";
+    readonly circlehollow: "CircleHollowIcon";
+    readonly bookmarkhollow: "BookmarkHollowIcon";
+    readonly bookmark: "BookmarkIcon";
+    readonly hearthollow: "HeartHollowIcon";
+    readonly heart: "HeartIcon";
+    readonly starhollow: "StarHollowIcon";
+    readonly star: "StarIcon";
+    readonly certificate: "CertificateIcon";
+    readonly verified: "VerifiedIcon";
+    readonly thumbsup: "ThumbsUpIcon";
+    readonly shield: "ShieldIcon";
+    readonly basket: "BasketIcon";
+    readonly beaker: "BeakerIcon";
+    readonly hourglass: "HourglassIcon";
+    readonly flag: "FlagIcon";
+    readonly cloudhollow: "CloudHollowIcon";
+    readonly edit: "EditIcon";
+    readonly cog: "CogIcon";
+    readonly nut: "NutIcon";
+    readonly wrench: "WrenchIcon";
+    readonly ellipsis: "EllipsisIcon";
+    readonly check: "CheckIcon";
+    readonly form: "FormIcon";
+    readonly batchdeny: "BatchDenyIcon";
+    readonly batchaccept: "BatchAcceptIcon";
+    readonly controls: "ControlsIcon";
+    readonly plus: "PlusIcon";
+    readonly closeAlt: "CloseAltIcon";
+    readonly cross: "CrossIcon";
+    readonly trash: "TrashIcon";
+    readonly pinalt: "PinAltIcon";
+    readonly unpin: "UnpinIcon";
+    readonly add: "AddIcon";
+    readonly subtract: "SubtractIcon";
+    readonly close: "CloseIcon";
+    readonly delete: "DeleteIcon";
+    readonly passed: "PassedIcon";
+    readonly changed: "ChangedIcon";
+    readonly failed: "FailedIcon";
+    readonly clear: "ClearIcon";
+    readonly comment: "CommentIcon";
+    readonly commentadd: "CommentAddIcon";
+    readonly requestchange: "RequestChangeIcon";
+    readonly comments: "CommentsIcon";
+    readonly lock: "LockIcon";
+    readonly unlock: "UnlockIcon";
+    readonly key: "KeyIcon";
+    readonly outbox: "OutboxIcon";
+    readonly credit: "CreditIcon";
+    readonly button: "ButtonIcon";
+    readonly type: "TypeIcon";
+    readonly pointerdefault: "PointerDefaultIcon";
+    readonly pointerhand: "PointerHandIcon";
+    readonly browser: "BrowserIcon";
+    readonly tablet: "TabletIcon";
+    readonly mobile: "MobileIcon";
+    readonly watch: "WatchIcon";
+    readonly sidebar: "SidebarIcon";
+    readonly sidebaralt: "SidebarAltIcon";
+    readonly sidebaralttoggle: "SidebarAltToggleIcon";
+    readonly sidebartoggle: "SidebarToggleIcon";
+    readonly bottombar: "BottomBarIcon";
+    readonly bottombartoggle: "BottomBarToggleIcon";
+    readonly cpu: "CPUIcon";
+    readonly database: "DatabaseIcon";
+    readonly memory: "MemoryIcon";
+    readonly structure: "StructureIcon";
+    readonly box: "BoxIcon";
+    readonly power: "PowerIcon";
+    readonly photo: "PhotoIcon";
+    readonly component: "ComponentIcon";
+    readonly grid: "GridIcon";
+    readonly outline: "OutlineIcon";
+    readonly photodrag: "PhotoDragIcon";
+    readonly search: "SearchIcon";
+    readonly zoom: "ZoomIcon";
+    readonly zoomout: "ZoomOutIcon";
+    readonly zoomreset: "ZoomResetIcon";
+    readonly eye: "EyeIcon";
+    readonly eyeclose: "EyeCloseIcon";
+    readonly lightning: "LightningIcon";
+    readonly lightningoff: "LightningOffIcon";
+    readonly contrast: "ContrastIcon";
+    readonly switchalt: "SwitchAltIcon";
+    readonly mirror: "MirrorIcon";
+    readonly grow: "GrowIcon";
+    readonly paintbrush: "PaintBrushIcon";
+    readonly ruler: "RulerIcon";
+    readonly stop: "StopIcon";
+    readonly camera: "CameraIcon";
+    readonly video: "VideoIcon";
+    readonly speaker: "SpeakerIcon";
+    readonly play: "PlayIcon";
+    readonly playback: "PlayBackIcon";
+    readonly playnext: "PlayNextIcon";
+    readonly rewind: "RewindIcon";
+    readonly fastforward: "FastForwardIcon";
+    readonly stopalt: "StopAltIcon";
+    readonly sidebyside: "SideBySideIcon";
+    readonly stacked: "StackedIcon";
+    readonly sun: "SunIcon";
+    readonly moon: "MoonIcon";
+    readonly book: "BookIcon";
+    readonly document: "DocumentIcon";
+    readonly copy: "CopyIcon";
+    readonly category: "CategoryIcon";
+    readonly folder: "FolderIcon";
+    readonly print: "PrintIcon";
+    readonly graphline: "GraphLineIcon";
+    readonly calendar: "CalendarIcon";
+    readonly graphbar: "GraphBarIcon";
+    readonly menu: "MenuIcon";
+    readonly menualt: "MenuIcon";
+    readonly filter: "FilterIcon";
+    readonly docchart: "DocChartIcon";
+    readonly doclist: "DocListIcon";
+    readonly markup: "MarkupIcon";
+    readonly bold: "BoldIcon";
+    readonly paperclip: "PaperClipIcon";
+    readonly listordered: "ListOrderedIcon";
+    readonly listunordered: "ListUnorderedIcon";
+    readonly paragraph: "ParagraphIcon";
+    readonly markdown: "MarkdownIcon";
+    readonly repository: "RepoIcon";
+    readonly commit: "CommitIcon";
+    readonly branch: "BranchIcon";
+    readonly pullrequest: "PullRequestIcon";
+    readonly merge: "MergeIcon";
+    readonly apple: "AppleIcon";
+    readonly linux: "LinuxIcon";
+    readonly ubuntu: "UbuntuIcon";
+    readonly windows: "WindowsIcon";
+    readonly storybook: "StorybookIcon";
+    readonly azuredevops: "AzureDevOpsIcon";
+    readonly bitbucket: "BitbucketIcon";
+    readonly chrome: "ChromeIcon";
+    readonly chromatic: "ChromaticIcon";
+    readonly componentdriven: "ComponentDrivenIcon";
+    readonly discord: "DiscordIcon";
+    readonly facebook: "FacebookIcon";
+    readonly figma: "FigmaIcon";
+    readonly gdrive: "GDriveIcon";
+    readonly github: "GithubIcon";
+    readonly gitlab: "GitlabIcon";
+    readonly google: "GoogleIcon";
+    readonly graphql: "GraphqlIcon";
+    readonly medium: "MediumIcon";
+    readonly redux: "ReduxIcon";
+    readonly twitter: "TwitterIcon";
+    readonly youtube: "YoutubeIcon";
+    readonly vscode: "VSCodeIcon";
+};
+
+type ToolbarShortcutType = 'next' | 'previous' | 'reset';
+type ToolbarItemType = 'item' | 'reset';
+interface ToolbarShortcutConfig {
+    label: string;
+    keys: string[];
+}
+type ToolbarShortcuts = Record<ToolbarShortcutType, ToolbarShortcutConfig>;
+interface ToolbarItem {
+    value?: string;
+    icon?: IconsProps['icon'];
+    right?: string;
+    title?: string;
+    hideIcon?: boolean;
+    type?: ToolbarItemType;
+}
+interface NormalizedToolbarConfig {
+    /** The label to show for this toolbar item */
+    title?: string;
+    /** Choose an icon to show for this toolbar item */
+    icon?: IconsProps['icon'];
+    /** Set to true to prevent default update of icon to match any present selected items icon */
+    preventDynamicIcon?: boolean;
+    items: ToolbarItem[];
+    shortcuts?: ToolbarShortcuts;
+    /** Change title based on selected value */
+    dynamicTitle?: boolean;
+}
+type ToolbarConfig = Omit<NormalizedToolbarConfig, 'items'> & {
+    items: (string | ToolbarItem)[];
+};
+type ToolbarArgType = {
+    name?: string;
+    description?: string;
+    defaultValue?: any;
+    toolbar?: ToolbarConfig;
+    /**
+     * @deprecated This loose index signature has been added for compatibility with InputType, and
+     *   will be removed in Storybook 11
+     */
+    [key: string]: any;
+};
+
 interface SBBaseType {
     required?: boolean;
     raw?: string;
@@ -703,7 +1031,7 @@ interface StoryIdentifier {
     story: StoryName;
     tags: Tag[];
 }
-interface Parameters {
+interface Parameters$1 {
     [name: string]: any;
 }
 interface StrictParameters {
@@ -829,10 +1157,7 @@ interface Globals {
     [name: string]: any;
 }
 interface GlobalTypes {
-    [name: string]: InputType;
-}
-interface StrictGlobalTypes {
-    [name: string]: StrictInputType;
+    [name: string]: ToolbarArgType;
 }
 /**
  * AddonTypes allows addons to extend the type system with additional args, parameters, and globals.
@@ -875,7 +1200,7 @@ interface StoryContextForEnhancers<TRenderer extends Renderer = Renderer, TArgs
     subcomponents?: Record<string, (TRenderer & {
         T: any;
     })['component']>;
-    parameters: Parameters;
+    parameters: Parameters$1;
     initialArgs: TArgs;
     argTypes: StrictArgTypes<TArgs>;
 }
@@ -943,7 +1268,7 @@ interface BaseAnnotations<TRenderer extends Renderer = Renderer, TArgs = Args> {
      *
      * @see [Parameters](https://storybook.js.org/docs/writing-stories/parameters)
      */
-    parameters?: Parameters & (TRenderer['csf4'] extends true ? CoreTypes['parameters'] & TRenderer['parameters'] : unknown);
+    parameters?: Parameters$1 & (TRenderer['csf4'] extends true ? CoreTypes['parameters'] & TRenderer['parameters'] : unknown);
     /**
      * Dynamic data that are provided (and possibly updated by) Storybook and its addons.
      *
@@ -1195,4 +1520,4 @@ declare const parseKind: (kind: string, { rootSeparator, groupSeparator }: Separ
 /** Combine a set of project / meta / story tags, removing duplicates and handling negations. */
 declare const combineTags: (...tags: string[]) => string[];
 
-export { type AddonTypes, type AfterEach, type AnnotatedStoryFn, type AnyFramework, type ArgTypes, type ArgTypesEnhancer, type Args, type ArgsEnhancer, type ArgsFromMeta, type ArgsStoryFn, type BaseAnnotations, type BeforeAll, type BeforeEach, type Canvas, type CleanupCallback, type ComponentAnnotations, type ComponentId, type ComponentTitle, type Conditional, type CoreTypes, type DecoratorApplicator, type DecoratorFunction, type GlobalTypes, type Globals, type IncludeExcludeOptions, type InferTypes, type InputType, type LegacyAnnotatedStoryFn, type LegacyStoryAnnotationsOrFn, type LegacyStoryFn, type LoaderFunction, type Meta, type Parameters, type PartialStoryFn, type PlayFunction, type PlayFunctionContext, type Preview, type PreviewAddon, type ProjectAnnotations, type Renderer, type SBArrayType, type SBEnumType, type SBIntersectionType, type SBLiteralType, type SBNodeType, type SBObjectType, type SBOtherType, type SBScalarType, type SBTupleType, type SBType, type SBUnionType, type SeparatorOptions, type StepFunction, type StepLabel, type StepRunner, type Story, type StoryAnnotations, type StoryAnnotationsOrFn, type StoryContext, type StoryContextForEnhancers, type StoryContextForLoaders, type StoryContextUpdate, type StoryFn, type StoryId, type StoryIdentifier, type StoryKind, type StoryName, type StrictArgTypes, type StrictArgs, type StrictGlobalTypes, type StrictInputType, type StrictParameters, type Tag, type TestFunction, type ViewMode, combineTags, definePreview, definePreviewAddon, getCoreAnnotations, getStoryChildren, includeConditionalArg, isExportStory, isMeta, isPreview, isStory, parseKind, sanitize, storyNameFromExport, toId, toTestId };
+export { type ActionsTypes, type AddonTypes, type AfterEach, type AnnotatedStoryFn, type AnyFramework, type ArgTypes, type ArgTypesEnhancer, type Args, type ArgsEnhancer, type ArgsFromMeta, type ArgsStoryFn, type BackgroundTypes, type BackgroundsGlobals, type BaseAnnotations, type BeforeAll, type BeforeEach, type Canvas, type CleanupCallback, type ComponentAnnotations, type ComponentId, type ComponentTitle, type Conditional, type ControlsTypes, type CoreTypes, type DecoratorApplicator, type DecoratorFunction, type GlobalTypes, type Globals, type HighlightTypes, type IncludeExcludeOptions, type InferTypes, type InputType, type LegacyAnnotatedStoryFn, type LegacyStoryAnnotationsOrFn, type LegacyStoryFn, type LoaderFunction, type MeasureTypes, type Meta, type OutlineTypes, type Parameters$1 as Parameters, type PartialStoryFn, type PlayFunction, type PlayFunctionContext, type Preview, type PreviewAddon, type ProjectAnnotations, type Renderer, type SBArrayType, type SBEnumType, type SBIntersectionType, type SBLiteralType, type SBNodeType, type SBObjectType, type SBOtherType, type SBScalarType, type SBTupleType, type SBType, type SBUnionType, type SeparatorOptions, type StepFunction, type StepLabel, type StepRunner, type Story, type StoryAnnotations, type StoryAnnotationsOrFn, type StoryContext, type StoryContextForEnhancers, type StoryContextForLoaders, type StoryContextUpdate, type StoryFn, type StoryId, type StoryIdentifier, type StoryKind, type StoryName, type StrictArgTypes, type StrictArgs, type StrictInputType, type StrictParameters, type Tag, type TestFunction, type TestTypes, type ViewMode, type ViewportGlobals, type ViewportTypes, combineTags, definePreview, definePreviewAddon, getCoreAnnotations, getStoryChildren, includeConditionalArg, isExportStory, isMeta, isPreview, isStory, parseKind, sanitize, storyNameFromExport, toId, toTestId };

package/dist/csf/index.js

@@ -10,7 +10,7 @@ import {
   mountDestructured,
   normalizeArrays,
   normalizeProjectAnnotations
-} from "../_browser-chunks/chunk-QOXZ7W26.js";
+} from "../_browser-chunks/chunk-2N4WE3KZ.js";
 import "../_browser-chunks/chunk-MEXTPDJG.js";
 import {
   Tag

package/dist/csf-tools/index.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_dxneh53ovgi from 'node:url';
-import CJS_COMPAT_NODE_PATH_dxneh53ovgi from 'node:path';
-import CJS_COMPAT_NODE_MODULE_dxneh53ovgi from "node:module";
+import CJS_COMPAT_NODE_URL_96u9uvlttj6 from 'node:url';
+import CJS_COMPAT_NODE_PATH_96u9uvlttj6 from 'node:path';
+import CJS_COMPAT_NODE_MODULE_96u9uvlttj6 from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_dxneh53ovgi.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_dxneh53ovgi.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_dxneh53ovgi.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_96u9uvlttj6.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_96u9uvlttj6.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_96u9uvlttj6.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -39,9 +39,9 @@ import {
   vitestTransform,
   writeConfig,
   writeCsf
-} from "../_node-chunks/chunk-CQFU5LUX.js";
-import "../_node-chunks/chunk-7UVJF2ZL.js";
-import "../_node-chunks/chunk-ZYMMEEUR.js";
+} from "../_node-chunks/chunk-C2PW44X2.js";
+import "../_node-chunks/chunk-UJMJ7W5H.js";
+import "../_node-chunks/chunk-5BZY2EBX.js";
 export {
   BadMetaError,
   ConfigFile,

package/dist/manager/globals-runtime.js

@@ -8101,19 +8101,19 @@ function _wrapNativeSuper(t) {
     if (typeof t2 != "function") throw new TypeError("Super expression must either be null or a function");
     if (r2 !== void 0) {
       if (r2.has(t2)) return r2.get(t2);
-      r2.set(t2, Wrapper8);
+      r2.set(t2, Wrapper9);
     }
-    function Wrapper8() {
+    function Wrapper9() {
       return _construct(t2, arguments, _getPrototypeOf(this).constructor);
     }
-    return Wrapper8.prototype = Object.create(t2.prototype, {
+    return Wrapper9.prototype = Object.create(t2.prototype, {
       constructor: {
-        value: Wrapper8,
+        value: Wrapper9,
         enumerable: !1,
         writable: !0,
         configurable: !0
       }
-    }), _setPrototypeOf(Wrapper8, t2);
+    }), _setPrototypeOf(Wrapper9, t2);
   }, _wrapNativeSuper(t);
 }
 var init_wrapNativeSuper = __esm({
@@ -31239,7 +31239,7 @@ __export(WithTooltip_exports, {
   WithTooltip: () => WithToolTipState,
   WithTooltipPure: () => DeprecatedPure
 });
-var import_react158, import_react_dom7, import_memoizerific10, document12, match2, ArrowSpacing, Arrow, Wrapper4, Tooltip3, TargetContainer, TargetSvgContainer, WithTooltipPure, WithToolTipState, DeprecatedPure, DeprecatedState, init_WithTooltip = __esm({
+var import_react158, import_react_dom7, import_memoizerific10, document12, match2, ArrowSpacing, Arrow, Wrapper5, Tooltip3, TargetContainer, TargetSvgContainer, WithTooltipPure, WithToolTipState, DeprecatedPure, DeprecatedState, init_WithTooltip = __esm({
   "src/components/components/tooltip/WithTooltip.tsx"() {
     "use strict";
     import_react158 = __toESM(require_react(), 1), import_react_dom7 = __toESM(require_react_dom(), 1);
@@ -31304,7 +31304,7 @@ var import_react158, import_react_dom7, import_memoizerific10, document12, match
           "transparent"
         )
       })
-    ), Wrapper4 = styled.div(
+    ), Wrapper5 = styled.div(
       ({ hidden }) => ({
         display: hidden ? "none" : "inline-block",
         zIndex: 2147483647,
@@ -31329,7 +31329,7 @@ var import_react158, import_react_dom7, import_memoizerific10, document12, match
         color: color2,
         withArrows,
         ...props
-      }, ref) => import_react158.default.createElement(Wrapper4, { "data-testid": "tooltip", hasChrome, ref, ...props, color: color2 }, hasChrome && withArrows && import_react158.default.createElement(Arrow, { placement, ...arrowProps, color: color2 }), children)
+      }, ref) => import_react158.default.createElement(Wrapper5, { "data-testid": "tooltip", hasChrome, ref, ...props, color: color2 }, hasChrome && withArrows && import_react158.default.createElement(Arrow, { placement, ...arrowProps, color: color2 }), children)
     );
     Tooltip3.displayName = "Tooltip";
     TargetContainer = styled.div`
@@ -62174,7 +62174,7 @@ init_dist();
 var import_memoizerific8 = __toESM(require_memoizerific(), 1), import_semver = __toESM(require_semver2(), 1);
 
 // src/manager-api/version.ts
-var version = "10.2.0-beta.2";
+var version = "10.2.0-beta.4";
 
 // src/manager-api/modules/versions.ts
 var { VERSIONCHECK } = scope, getVersionCheckData = (0, import_memoizerific8.default)(1)(() => {
@@ -71398,7 +71398,7 @@ var sizes = (({ size }) => {
   appearance: "none",
   border: "0 none",
   boxSizing: "inherit",
-  display: " block",
+  display: "block",
   margin: " 0",
   background: "transparent",
   padding: 0,
@@ -71439,13 +71439,46 @@ var sizes = (({ size }) => {
 }));
 
 // src/components/components/Form/Input.tsx
-var Input2 = Object.assign(
+var Wrapper3 = styled.div({
+  position: "relative",
+  width: "100%"
+}), Mask = styled.div(
+  ({ theme: theme3 }) => ({
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    display: "flex",
+    alignItems: "center",
+    pointerEvents: "none",
+    overflow: "hidden",
+    color: theme3.textMutedColor,
+    "span:first-of-type": {
+      opacity: 0
+    }
+  }),
+  (props) => {
+    let { fontSize, lineHeight, padding } = styles3(props);
+    return { fontSize, lineHeight, padding };
+  }
+), Input2 = Object.assign(
   styled(
-    (0, import_react115.forwardRef)(function({ size, valid, align: align2, ...props }, ref) {
-      return import_react114.default.createElement("input", { ...props, ref });
+    (0, import_react115.forwardRef)(function({ size, valid, align: align2, value, suffix, ...props }, ref) {
+      let suffixId = $bdb11010cef70236$export$f680877a34711e37();
+      return import_react114.default.createElement(Wrapper3, null, import_react114.default.createElement(
+        "input",
+        {
+          ...props,
+          value,
+          ref,
+          "aria-describedby": suffix ? suffixId : void 0
+        }
+      ), suffix && import_react114.default.createElement(Mask, { "aria-hidden": !0 }, import_react114.default.createElement("span", null, value), import_react114.default.createElement("span", { id: suffixId }, suffix)));
     })
   )(styles3, sizes, alignment, validation, {
-    minHeight: 32
+    minHeight: 32,
+    width: "100%"
   }),
   {
     displayName: "Input"
@@ -71535,7 +71568,7 @@ var BaseSelect = styled.select(sizes, ({ theme: theme3 }) => ({
   },
   "&::picker(select)": {
     appearance: "base-select",
-    border: "1px solid #e4e4e7",
+    border: `1px solid ${theme3.input.border}`,
     padding: 4,
     marginTop: 4,
     background: theme3.base === "light" ? lightenColor(theme3.background.app) : theme3.background.app,
@@ -71799,7 +71832,7 @@ var Form2 = Object.assign(
 // src/components/components/Popover/Popover.tsx
 var import_react122 = __toESM(require_react(), 1);
 init_theming();
-var Wrapper3 = styled.div(
+var Wrapper4 = styled.div(
   ({ hasCloseButton, padding }) => ({
     display: "inline-block",
     position: "relative",
@@ -71842,7 +71875,7 @@ var Wrapper3 = styled.div(
     padding = 8,
     ...props
   }, ref) => import_react122.default.createElement(
-    Wrapper3,
+    Wrapper4,
     {
       bgColor: color2,
       hasChrome,
@@ -72620,8 +72653,8 @@ function $f39a9eba43920ace$export$8dc98ba7eadeaa56(props) {
   }, children);
 }
 function $f39a9eba43920ace$export$86427a43e3e48ebb(fn4) {
-  let Wrapper8 = (props, ref) => (0, import_react126.useContext)($f39a9eba43920ace$export$94b6d0abf7d33e8c) ? null : fn4(props, ref);
-  return Wrapper8.displayName = fn4.displayName || fn4.name, (0, import_react126.forwardRef)(Wrapper8);
+  let Wrapper9 = (props, ref) => (0, import_react126.useContext)($f39a9eba43920ace$export$94b6d0abf7d33e8c) ? null : fn4(props, ref);
+  return Wrapper9.displayName = fn4.displayName || fn4.name, (0, import_react126.forwardRef)(Wrapper9);
 }
 function $f39a9eba43920ace$export$b5d7cc18bb8d2b59() {
   return (0, import_react126.useContext)($f39a9eba43920ace$export$94b6d0abf7d33e8c);
@@ -76118,7 +76151,7 @@ TabButton.displayName = "TabButton";
 // src/components/components/Tabs/EmptyTabContent.tsx
 var import_react165 = __toESM(require_react(), 1);
 init_theming();
-var Wrapper5 = styled.div(({ theme: theme3 }) => ({
+var Wrapper6 = styled.div(({ theme: theme3 }) => ({
   height: "100%",
   display: "flex",
   padding: 30,
@@ -76144,7 +76177,7 @@ var Wrapper5 = styled.div(({ theme: theme3 }) => ({
   fontSize: theme3.typography.size.s2 - 1,
   textAlign: "center",
   color: theme3.textMutedColor
-})), EmptyTabContent = ({ title, description, footer }) => import_react165.default.createElement(Wrapper5, null, import_react165.default.createElement(Content2, null, import_react165.default.createElement(Title5, null, title), description && import_react165.default.createElement(Description2, null, description)), footer && import_react165.default.createElement(Footer, null, footer));
+})), EmptyTabContent = ({ title, description, footer }) => import_react165.default.createElement(Wrapper6, null, import_react165.default.createElement(Content2, null, import_react165.default.createElement(Title5, null, title), description && import_react165.default.createElement(Description2, null, description)), footer && import_react165.default.createElement(Footer, null, footer));
 
 // src/components/components/Tabs/Tabs.helpers.tsx
 var import_react166 = __toESM(require_react(), 1);
@@ -76292,7 +76325,7 @@ function useList(list) {
 }
 
 // src/components/components/Tabs/Tabs.tsx
-var ignoreSsrWarning2 = "/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */", Wrapper6 = styled.div(
+var ignoreSsrWarning2 = "/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */", Wrapper7 = styled.div(
   ({ theme: theme3, bordered }) => bordered ? {
     backgroundClip: "padding-box",
     border: `1px solid ${theme3.appBorderColor}`,
@@ -76398,7 +76431,7 @@ var TabErrorBoundary = class extends import_react168.Component {
     ), { visibleList, tabBarRef, tabRefs, AddonTab } = useList(list), EmptyContent = emptyState ?? import_react168.default.createElement(EmptyTabContent, { title: "Nothing found" });
     return !showToolsWhenEmpty && list.length === 0 ? EmptyContent : (
       // @ts-expect-error (non strict)
-      import_react168.default.createElement(Wrapper6, { "data-deprecated": "Tabs", absolute, bordered, id: htmlId }, import_react168.default.createElement(FlexBar, { scrollable: !1, border: !0, backgroundColor }, import_react168.default.createElement(TabBar, { style: { whiteSpace: "normal" }, ref: tabBarRef, role: "tablist" }, visibleList.map(({ title, id, active, color: color2 }, index4) => {
+      import_react168.default.createElement(Wrapper7, { "data-deprecated": "Tabs", absolute, bordered, id: htmlId }, import_react168.default.createElement(FlexBar, { scrollable: !1, border: !0, backgroundColor }, import_react168.default.createElement(TabBar, { style: { whiteSpace: "normal" }, ref: tabBarRef, role: "tablist" }, visibleList.map(({ title, id, active, color: color2 }, index4) => {
         let indexId = `index-${index4}`;
         return import_react168.default.createElement(
           TabButton,
@@ -77729,7 +77762,7 @@ var XMLNS = "http://www.w3.org/2000/svg", rotate = keyframes({
   "100%": {
     transform: "rotate(360deg)"
   }
-}), Wrapper7 = styled.div(({ size }) => ({
+}), Wrapper8 = styled.div(({ size }) => ({
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
@@ -77772,7 +77805,7 @@ var XMLNS = "http://www.w3.org/2000/svg", rotate = keyframes({
   width = 1.5,
   children = null,
   ...props
-}) => typeof percentage == "number" ? import_react188.default.createElement(Wrapper7, { size, ...props }, children, import_react188.default.createElement(Circle, { size, width, xmlns: XMLNS }, import_react188.default.createElement("circle", null)), running && import_react188.default.createElement(Circle, { size, width, xmlns: XMLNS, spinner: !0 }, import_react188.default.createElement("circle", { strokeDashoffset: Math.PI * (size - Math.ceil(width)) * (1 - percentage / 100) })), import_react188.default.createElement(Circle, { size, width, xmlns: XMLNS, progress: !0 }, import_react188.default.createElement("circle", { strokeDashoffset: Math.PI * (size - Math.ceil(width)) * (1 - percentage / 100) }))) : import_react188.default.createElement(Wrapper7, { size, ...props }, children);
+}) => typeof percentage == "number" ? import_react188.default.createElement(Wrapper8, { size, ...props }, children, import_react188.default.createElement(Circle, { size, width, xmlns: XMLNS }, import_react188.default.createElement("circle", null)), running && import_react188.default.createElement(Circle, { size, width, xmlns: XMLNS, spinner: !0 }, import_react188.default.createElement("circle", { strokeDashoffset: Math.PI * (size - Math.ceil(width)) * (1 - percentage / 100) })), import_react188.default.createElement(Circle, { size, width, xmlns: XMLNS, progress: !0 }, import_react188.default.createElement("circle", { strokeDashoffset: Math.PI * (size - Math.ceil(width)) * (1 - percentage / 100) }))) : import_react188.default.createElement(Wrapper8, { size, ...props }, children);
 
 // src/components/components/utils/getStoryHref.ts
 init_client_logger();