@dxos/react-ui 0.6.13 → 0.6.14-main.69511f5

package/dist/types/src/components/ThemeProvider/ThemeProvider.d.ts

@@ -2,15 +2,14 @@ import React, { type PropsWithChildren } from 'react';
 import { type Density, type Elevation, type ThemeFunction } from '@dxos/react-ui-types';
 import { type TranslationsProviderProps } from './TranslationsProvider';
 export type ThemeMode = 'light' | 'dark';
-export interface ThemeContextValue {
+export type ThemeContextValue = {
     tx: ThemeFunction<any>;
     themeMode: ThemeMode;
     hasIosKeyboard: boolean;
-}
+};
 export type ThemeProviderProps = Omit<TranslationsProviderProps, 'children'> & Partial<ThemeContextValue> & PropsWithChildren<{
-    rootElevation?: Elevation;
     rootDensity?: Density;
+    rootElevation?: Elevation;
 }>;
-export declare const ThemeContext: React.Context<ThemeContextValue>;
-export declare const ThemeProvider: ({ children, fallback, resourceExtensions, appNs, tx, themeMode, rootElevation, rootDensity, }: ThemeProviderProps) => React.JSX.Element;
+export declare const ThemeProvider: ({ children, fallback, resourceExtensions, appNs, tx, themeMode, rootDensity, rootElevation, }: ThemeProviderProps) => React.JSX.Element;
 //# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/types/src/components/ThemeProvider/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../../src/components/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAiB,KAAK,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAEhF,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAExF,OAAO,EAAwB,KAAK,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAK9F,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzC,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACvB,SAAS,EAAE,SAAS,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,yBAAyB,EAAE,UAAU,CAAC,GAC1E,OAAO,CAAC,iBAAiB,CAAC,GAC1B,iBAAiB,CAAC;IAChB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC,CAAC;AAEL,eAAO,MAAM,YAAY,kCAIvB,CAAC;AAUH,eAAO,MAAM,aAAa,kGASvB,kBAAkB,sBAwBpB,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../../src/components/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAiB,KAAK,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAEhF,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAExF,OAAO,EAAwB,KAAK,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAK9F,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACvB,SAAS,EAAE,SAAS,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;CACzB,CAAC;AAOF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,yBAAyB,EAAE,UAAU,CAAC,GAC1E,OAAO,CAAC,iBAAiB,CAAC,GAC1B,iBAAiB,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B,CAAC,CAAC;AAEL,eAAO,MAAM,aAAa,kGASvB,kBAAkB,sBAwBpB,CAAC"}

package/dist/types/src/components/ThemeProvider/TranslationsProvider.d.ts

@@ -66,9 +66,9 @@ export declare const useTranslation: (ns?: string | string[] | readonly string[]
     findIndex(predicate: (value: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, index: number, obj: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]) => unknown, thisArg?: any): number;
     fill(value: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, start?: number, end?: number): import("react-i18next").UseTranslationResponse<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>;
     copyWithin(target: number, start: number, end?: number): import("react-i18next").UseTranslationResponse<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>;
-    entries(): IterableIterator<[number, boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>]>;
-    keys(): IterableIterator<number>;
-    values(): IterableIterator<boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>>;
+    entries(): ArrayIterator<[number, boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>]>;
+    keys(): ArrayIterator<number>;
+    values(): ArrayIterator<boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>>;
     includes(searchElement: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, fromIndex?: number): boolean;
     flatMap<U, This = undefined>(callback: (this: This, value: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, index: number, array: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]) => U | readonly U[], thisArg?: This | undefined): U[];
     flat<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[];
@@ -81,7 +81,7 @@ export declare const useTranslation: (ns?: string | string[] | readonly string[]
     toSpliced(start: number, deleteCount: number, ...items: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]): (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[];
     toSpliced(start: number, deleteCount?: number): (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[];
     with(index: number, value: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>): (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[];
-    [Symbol.iterator](): IterableIterator<boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>>;
+    [Symbol.iterator](): ArrayIterator<boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>>;
     [Symbol.unscopables]: {
         [x: number]: boolean | undefined;
         length?: boolean | undefined;

package/dist/types/src/components/Toast/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAEL,KAAK,kBAAkB,IAAI,2BAA2B,EAEtD,KAAK,kBAAkB,IAAI,2BAA2B,EAEtD,KAAK,UAAU,IAAI,uBAAuB,EAE1C,KAAK,eAAe,IAAI,wBAAwB,EAEhD,KAAK,qBAAqB,IAAI,8BAA8B,EAE5D,KAAK,gBAAgB,IAAI,yBAAyB,EAElD,KAAK,eAAe,IAAI,wBAAwB,EACjD,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAsC,MAAM,OAAO,CAAC;AAG9F,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAIlD,KAAK,kBAAkB,GAAG,2BAA2B,CAAC;AAItD,KAAK,kBAAkB,GAAG,eAAe,CAAC,2BAA2B,CAAC,CAAC;AASvE,KAAK,cAAc,GAAG,eAAe,CAAC,uBAAuB,CAAC,CAAC;AAa/D,KAAK,cAAc,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;AAQnF,KAAK,eAAe,GAAG,eAAe,CAAC,wBAAwB,CAAC,CAAC;AAUjE,KAAK,qBAAqB,GAAG,eAAe,CAAC,8BAA8B,CAAC,CAAC;AAY7E,KAAK,iBAAiB,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;AAUtF,KAAK,gBAAgB,GAAG,yBAAyB,CAAC;AAIlD,KAAK,eAAe,GAAG,wBAAwB,CAAC;AAIhD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;CAUjB,CAAC;AAEF,YAAY,EACV,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,GAChB,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAEL,KAAK,kBAAkB,IAAI,2BAA2B,EAEtD,KAAK,kBAAkB,IAAI,2BAA2B,EAEtD,KAAK,UAAU,IAAI,uBAAuB,EAE1C,KAAK,eAAe,IAAI,wBAAwB,EAEhD,KAAK,qBAAqB,IAAI,8BAA8B,EAE5D,KAAK,gBAAgB,IAAI,yBAAyB,EAElD,KAAK,eAAe,IAAI,wBAAwB,EACjD,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAsC,MAAM,OAAO,CAAC;AAG9F,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,KAAK,kBAAkB,GAAG,2BAA2B,CAAC;AAItD,KAAK,kBAAkB,GAAG,eAAe,CAAC,2BAA2B,CAAC,CAAC;AASvE,KAAK,cAAc,GAAG,eAAe,CAAC,uBAAuB,CAAC,CAAC;AAW/D,KAAK,cAAc,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;AAQnF,KAAK,eAAe,GAAG,eAAe,CAAC,wBAAwB,CAAC,CAAC;AAUjE,KAAK,qBAAqB,GAAG,eAAe,CAAC,8BAA8B,CAAC,CAAC;AAY7E,KAAK,iBAAiB,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;AAUtF,KAAK,gBAAgB,GAAG,yBAAyB,CAAC;AAIlD,KAAK,eAAe,GAAG,wBAAwB,CAAC;AAIhD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;CAUjB,CAAC;AAEF,YAAY,EACV,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,GAChB,CAAC"}

package/dist/types/src/components/Toast/Toast.stories.d.ts

@@ -13,7 +13,26 @@ type StorybookToastProps = Partial<{
 }>;
 declare const _default: {
     title: string;
-    component: (props: StorybookToastProps) => React.JSX.Element;
+    component: {
+        Provider: React.FunctionComponent<import("@radix-ui/react-toast").ToastProviderProps>;
+        Viewport: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-toast").ToastViewportProps, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & React.RefAttributes<HTMLOListElement>>;
+        Root: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-toast").ToastProps, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & React.RefAttributes<HTMLLIElement>>;
+        Body: React.ForwardRefExoticComponent<Omit<import("./Toast").ToastBodyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+        Title: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-toast").ToastTitleProps, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & React.RefAttributes<HTMLHeadingElement>>;
+        Description: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-toast").ToastDescriptionProps, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & React.RefAttributes<HTMLParagraphElement>>;
+        Actions: React.ForwardRefExoticComponent<Omit<import("./Toast").ToastActionsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+        Action: React.FunctionComponent<import("@radix-ui/react-toast").ToastActionProps>;
+        Close: React.FunctionComponent<import("@radix-ui/react-toast").ToastCloseProps>;
+    };
+    render: (props: StorybookToastProps) => React.JSX.Element;
     decorators: import("@storybook/react/*").Decorator[];
     parameters: {
         chromatic: {

package/dist/types/src/components/Toast/Toast.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toast/Toast.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAMxD,KAAK,kBAAkB,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,SAAS,CAAA;CAAE,CAAC;AAElE,KAAK,mBAAmB,GAAG,OAAO,CAAC;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,kBAAkB,EAAE,CAAC;IACrC,YAAY,EAAE,SAAS,CAAC;CACzB,CAAC,CAAC;;;uBAE4B,mBAAmB;;;;;;;;AAwBlD,wBAKE;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;CAWnB,CAAC"}
+{"version":3,"file":"Toast.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toast/Toast.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAMxD,KAAK,kBAAkB,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,SAAS,CAAA;CAAE,CAAC;AAElE,KAAK,mBAAmB,GAAG,OAAO,CAAC;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,kBAAkB,EAAE,CAAC;IACrC,YAAY,EAAE,SAAS,CAAC;CACzB,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;oBAE4B,mBAAmB;;;;;;;;AAwBlD,wBAME;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;CAWnB,CAAC"}

package/dist/types/src/components/Toolbar/Toolbar.d.ts

@@ -1,11 +1,12 @@
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import React from 'react';
 import { type ThemedClassName } from '../../util';
-import { type ButtonGroupProps, type ButtonProps, type ToggleGroupItemProps } from '../Buttons';
+import { type ButtonGroupProps, type ButtonProps, type ToggleGroupItemProps, type ToggleProps } from '../Buttons';
 import { type LinkProps } from '../Link';
 import { type SeparatorProps } from '../Separator';
 type ToolbarRootProps = ThemedClassName<ToolbarPrimitive.ToolbarProps>;
 type ToolbarButtonProps = ButtonProps;
+type ToolbarToggleProps = ToggleProps;
 type ToolbarLinkProps = LinkProps;
 type ToolbarToggleGroupProps = (Omit<ToolbarPrimitive.ToolbarToggleGroupSingleProps, 'className'> | Omit<ToolbarPrimitive.ToolbarToggleGroupMultipleProps, 'className'>) & ButtonGroupProps;
 type ToolbarToggleGroupItemProps = ToggleGroupItemProps;
@@ -16,6 +17,7 @@ export declare const Toolbar: {
     } & React.RefAttributes<HTMLDivElement>>;
     Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
     Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+    Toggle: React.ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
     ToggleGroup: React.ForwardRefExoticComponent<(Omit<Omit<ToolbarPrimitive.ToolbarToggleGroupSingleProps, "className"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
     } & {
@@ -38,5 +40,5 @@ export declare const Toolbar: {
     ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
     Separator: (props: SeparatorProps) => React.JSX.Element;
 };
-export type { ToolbarRootProps, ToolbarButtonProps, ToolbarLinkProps, ToolbarToggleGroupProps, ToolbarToggleGroupItemProps, ToolbarSeparatorProps, };
+export type { ToolbarRootProps, ToolbarButtonProps, ToolbarLinkProps, ToolbarToggleProps, ToolbarToggleGroupProps, ToolbarToggleGroupItemProps, ToolbarSeparatorProps, };
 //# sourceMappingURL=Toolbar.d.ts.map

package/dist/types/src/components/Toolbar/Toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,EAAuB,KAAK,gBAAgB,EAAE,KAAK,WAAW,EAAE,KAAK,oBAAoB,EAAE,MAAM,YAAY,CAAC;AACrH,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9D,KAAK,gBAAgB,GAAG,eAAe,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;AAWvE,KAAK,kBAAkB,GAAG,WAAW,CAAC;AAUtC,KAAK,gBAAgB,GAAG,SAAS,CAAC;AAUlC,KAAK,uBAAuB,GAAG,CAC3B,IAAI,CAAC,gBAAgB,CAAC,6BAA6B,EAAE,WAAW,CAAC,GACjE,IAAI,CAAC,gBAAgB,CAAC,+BAA+B,EAAE,WAAW,CAAC,CACtE,GACC,gBAAgB,CAAC;AAYnB,KAAK,2BAA2B,GAAG,oBAAoB,CAAC;AAYxD,KAAK,qBAAqB,GAAG,cAAc,CAAC;AAU5C,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;uBARa,cAAc;CAe9C,CAAC;AAEF,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,uBAAuB,EACvB,2BAA2B,EAC3B,qBAAqB,GACtB,CAAC"}
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,EAGL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAEhB,KAAK,oBAAoB,EACzB,KAAK,WAAW,EACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9D,KAAK,gBAAgB,GAAG,eAAe,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;AAWvE,KAAK,kBAAkB,GAAG,WAAW,CAAC;AAUtC,KAAK,kBAAkB,GAAG,WAAW,CAAC;AAUtC,KAAK,gBAAgB,GAAG,SAAS,CAAC;AAUlC,KAAK,uBAAuB,GAAG,CAC3B,IAAI,CAAC,gBAAgB,CAAC,6BAA6B,EAAE,WAAW,CAAC,GACjE,IAAI,CAAC,gBAAgB,CAAC,+BAA+B,EAAE,WAAW,CAAC,CACtE,GACC,gBAAgB,CAAC;AAYnB,KAAK,2BAA2B,GAAG,oBAAoB,CAAC;AAYxD,KAAK,qBAAqB,GAAG,cAAc,CAAC;AAU5C,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;uBARa,cAAc;CAgB9C,CAAC;AAEF,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,uBAAuB,EACvB,2BAA2B,EAC3B,qBAAqB,GACtB,CAAC"}

package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts

@@ -3,7 +3,36 @@ import React from 'react';
 type StorybookToolbarProps = {};
 declare const _default: {
     title: string;
-    component: (props: StorybookToolbarProps) => React.JSX.Element;
+    component: {
+        Root: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-toolbar").ToolbarProps, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & React.RefAttributes<HTMLDivElement>>;
+        Button: React.ForwardRefExoticComponent<Omit<import("../Buttons").ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+        Link: React.ForwardRefExoticComponent<Omit<import("..").LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+        Toggle: React.ForwardRefExoticComponent<Omit<import("../Buttons").ToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+        ToggleGroup: React.ForwardRefExoticComponent<(Omit<Omit<import("@radix-ui/react-toolbar").ToolbarToggleGroupSingleProps, "className"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+            ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+        } & {
+            asChild?: boolean;
+        }, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & {
+            elevation?: import("packages/ui/react-ui-types/dist/types/src").Elevation;
+            asChild?: boolean;
+        }, "ref"> | Omit<Omit<import("@radix-ui/react-toolbar").ToolbarToggleGroupMultipleProps, "className"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+            ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+        } & {
+            asChild?: boolean;
+        }, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & {
+            elevation?: import("packages/ui/react-ui-types/dist/types/src").Elevation;
+            asChild?: boolean;
+        }, "ref">) & React.RefAttributes<HTMLDivElement>>;
+        ToggleGroupItem: React.ForwardRefExoticComponent<Omit<import("../Buttons").ToggleGroupItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+        Separator: (props: import("..").SeparatorProps) => React.JSX.Element;
+    };
+    render: (props: StorybookToolbarProps) => React.JSX.Element;
     decorators: import("@storybook/react/*").Decorator[];
     parameters: {
         chromatic: {

package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Toolbar.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,KAAK,qBAAqB,GAAG,EAAE,CAAC;;;uBAEC,qBAAqB;;;;;;;;AAuDtD,wBAKE;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}
+{"version":3,"file":"Toolbar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Toolbar.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,KAAK,qBAAqB,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAEC,qBAAqB;;;;;;;;AAuDtD,wBAME;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}

package/dist/types/src/components/Tooltip/Tooltip.stories.d.ts

@@ -5,7 +5,19 @@ type StoryTooltipProps = {
 };
 declare const _default: {
     title: string;
-    component: ({ content }: StoryTooltipProps) => React.JSX.Element;
+    component: {
+        Provider: React.FunctionComponent<import("@radix-ui/react-tooltip").TooltipProviderProps>;
+        Root: React.FunctionComponent<import("@radix-ui/react-tooltip").TooltipProps>;
+        Portal: React.FC<import("@radix-ui/react-tooltip").TooltipPortalProps>;
+        Trigger: React.ForwardRefExoticComponent<import("@radix-ui/react-tooltip").TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+        Arrow: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tooltip").TooltipArrowProps, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & React.RefAttributes<SVGSVGElement>>;
+        Content: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tooltip").TooltipContentProps, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & React.RefAttributes<HTMLDivElement>>;
+    };
+    render: ({ content }: StoryTooltipProps) => React.JSX.Element;
     decorators: import("@storybook/react/*").Decorator[];
     parameters: {
         chromatic: {

package/dist/types/src/components/Tooltip/Tooltip.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;;;6BAEiC,iBAAiB;;;;;;;;AAcpD,wBAKE;AAEF,eAAO,MAAM,OAAO;;;;;;;;;CAOnB,CAAC"}
+{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;;;;;;;;;;;;;;;0BAEiC,iBAAiB;;;;;;;;AAcpD,wBAME;AAEF,eAAO,MAAM,OAAO;;;;;;;;;CAOnB,CAAC"}

package/dist/types/src/hooks/useThemeContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useThemeContext.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useThemeContext.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,eAAe,iDAAiC,CAAC"}
+{"version":3,"file":"useThemeContext.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useThemeContext.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,eAAe,iDAA6E,CAAC"}

package/dist/types/src/playground/Controls.stories.d.ts

@@ -1,8 +1,9 @@
 import '@dxos-theme';
 import React from 'react';
+export declare const Default: {};
 declare const _default: {
     title: string;
-    component: () => React.JSX.Element;
+    render: () => React.JSX.Element;
     decorators: import("@storybook/react/*").Decorator[];
     parameters: {
         chromatic: {
@@ -11,9 +12,4 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: {
-    render: ({ ...props }: {
-        [x: string]: any;
-    }) => React.JSX.Element;
-};
 //# sourceMappingURL=Controls.stories.d.ts.map

package/dist/types/src/playground/Controls.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.stories.d.ts","sourceRoot":"","sources":["../../../../src/playground/Controls.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAmB,MAAM,OAAO,CAAC;;;;;;;;;;;AA6ExC,wBAKE;AAEF,eAAO,MAAM,OAAO;;;;CAEnB,CAAC"}
+{"version":3,"file":"Controls.stories.d.ts","sourceRoot":"","sources":["../../../../src/playground/Controls.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAmB,MAAM,OAAO,CAAC;AA4ExC,eAAO,MAAM,OAAO,IAAK,CAAC;;;;;;;;;;;AAE1B,wBAKE"}

package/dist/types/src/playground/Surfaces.stories.d.ts

@@ -1,8 +1,12 @@
 import '@dxos-theme';
-import React from 'react';
+import React, { type PropsWithChildren } from 'react';
+type SurfaceLevel = 'base' | 'group' | 'chrome' | 'fixed' | 'input' | 'accent';
 declare const _default: {
     title: string;
-    component: () => React.JSX.Element;
+    component: ({ children, level }: PropsWithChildren & {
+        level: SurfaceLevel;
+    }) => React.JSX.Element;
+    render: () => React.JSX.Element;
     decorators: import("@storybook/react/*").Decorator[];
     parameters: {
         chromatic: {

package/dist/types/src/playground/Surfaces.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Surfaces.stories.d.ts","sourceRoot":"","sources":["../../../../src/playground/Surfaces.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAiC,MAAM,OAAO,CAAC;;;;;;;;;;;AAwDtD,wBAKE;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}
+{"version":3,"file":"Surfaces.stories.d.ts","sourceRoot":"","sources":["../../../../src/playground/Surfaces.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAgBtD,KAAK,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;;;qCAEzC,iBAAiB,GAAG;QAAE,KAAK,EAAE,YAAY,CAAA;KAAE;;;;;;;;;AAsCjF,wBAME;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}

package/dist/types/src/playground/Typography.stories.d.ts

@@ -2,7 +2,7 @@ import '@dxos-theme';
 import React from 'react';
 declare const _default: {
     title: string;
-    component: () => React.JSX.Element;
+    render: () => React.JSX.Element;
     decorators: import("@storybook/react/*").Decorator[];
     parameters: {
         chromatic: {

package/dist/types/src/testing/decorators/index.d.ts

@@ -1,2 +1,3 @@
 export * from './withTheme';
+export * from './withVariants';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/testing/decorators/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/testing/decorators/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/testing/decorators/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC"}

package/dist/types/src/testing/decorators/withVariants.d.ts

@@ -0,0 +1,13 @@
+import '@dxos-theme';
+import { type Decorator } from '@storybook/react';
+import { type Density, type Elevation } from '@dxos/react-ui-types';
+type Config = {
+    elevations?: {
+        elevation: Elevation;
+        surface?: string;
+    }[];
+    densities?: Density[];
+};
+export declare const withVariants: ({ elevations, densities, }?: Config) => Decorator;
+export {};
+//# sourceMappingURL=withVariants.d.ts.map

package/dist/types/src/testing/decorators/withVariants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withVariants.d.ts","sourceRoot":"","sources":["../../../../../src/testing/decorators/withVariants.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAIpE,KAAK,MAAM,GAAG;IACZ,UAAU,CAAC,EAAE;QAAE,SAAS,EAAE,SAAS,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC1D,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,YAAY,gCAOtB,MAAM,KAAQ,SAkBhB,CAAC"}

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.6.13",
+  "version": "0.6.14-main.69511f5",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
+  "sideEffects": true,
   "exports": {
     ".": {
+      "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
-      "types": "./dist/types/src/index.d.ts"
+      "node": "./dist/lib/node-esm/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -22,6 +24,7 @@
   ],
   "dependencies": {
     "@fluentui/react-tabster": "^9.19.0",
+    "@radix-ui/primitive": "^1.0.0",
     "@radix-ui/react-alert-dialog": "^1.0.3",
     "@radix-ui/react-avatar": "^1.0.2",
     "@radix-ui/react-checkbox": "^1.0.3",
@@ -30,9 +33,14 @@
     "@radix-ui/react-context": "^1.0.0",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dialog": "^1.0.3",
-    "@radix-ui/react-dropdown-menu": "2.0.7-rc.10",
-    "@radix-ui/react-popover": "1.0.8-rc.8",
+    "@radix-ui/react-dismissable-layer": "^1.1.1",
+    "@radix-ui/react-focus-guards": "^1.1.1",
+    "@radix-ui/react-focus-scope": "^1.1.0",
+    "@radix-ui/react-id": "^1.1.0",
+    "@radix-ui/react-menu": "^2.0.6",
     "@radix-ui/react-popper": "^1.1.2",
+    "@radix-ui/react-portal": "^1.1.2",
+    "@radix-ui/react-presence": "^1.1.1",
     "@radix-ui/react-primitive": "^1.0.2",
     "@radix-ui/react-scroll-area": "^1.0.3",
     "@radix-ui/react-select": "^1.2.1",
@@ -45,16 +53,19 @@
     "@radix-ui/react-toolbar": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@radix-ui/react-use-controllable-state": "^1.0.0",
+    "aria-hidden": "^1.2.4",
     "date-fns": "^3.3.1",
     "i18next": "^21.10.0",
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
-    "@dxos/react-hooks": "0.6.13",
-    "@dxos/log": "0.6.13",
-    "@dxos/react-ui-types": "0.6.13",
-    "@dxos/react-list": "0.6.13",
-    "@dxos/util": "0.6.13",
-    "@dxos/react-input": "0.6.13"
+    "react-remove-scroll": "^2.6.0",
+    "@dxos/debug": "0.6.14-main.69511f5",
+    "@dxos/log": "0.6.14-main.69511f5",
+    "@dxos/react-hooks": "0.6.14-main.69511f5",
+    "@dxos/react-input": "0.6.14-main.69511f5",
+    "@dxos/react-ui-types": "0.6.14-main.69511f5",
+    "@dxos/util": "0.6.14-main.69511f5",
+    "@dxos/react-list": "0.6.14-main.69511f5"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -65,16 +76,16 @@
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "^5.3.4",
-    "@dxos/react-ui-theme": "0.6.13",
-    "@dxos/random": "0.6.13",
-    "@dxos/util": "0.6.13"
+    "vite": "5.4.7",
+    "@dxos/random": "0.6.14-main.69511f5",
+    "@dxos/react-ui-theme": "0.6.14-main.69511f5",
+    "@dxos/util": "0.6.14-main.69511f5"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
-    "date-fns": "^3.3.1",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui-theme": "0.6.14-main.69511f5"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Avatars/Avatar.stories.tsx

@@ -57,8 +57,9 @@ const StorybookAvatar = (props: PropsWithChildren<StorybookAvatarProps>) => {
 };
 
 export default {
-  title: 'react-ui/Avatar',
-  component: StorybookAvatar,
+  title: 'ui/react-ui-core/Avatar',
+  component: Avatar,
+  render: StorybookAvatar,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Avatars/AvatarGroup.stories.tsx

@@ -44,8 +44,9 @@ const StorybookAvatarGroup = () => {
 };
 
 export default {
-  title: 'react-ui/Avatar Group',
-  component: StorybookAvatarGroup,
+  title: 'ui/react-ui-core/AvatarGroup',
+  component: AvatarGroup,
+  render: StorybookAvatarGroup,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -39,8 +39,9 @@ const StorybookBreadcrumb = () => {
 };
 
 export default {
-  title: 'react-ui/Breadcrumb',
-  component: StorybookBreadcrumb,
+  title: 'ui/react-ui-core/Breadcrumb',
+  component: Breadcrumb,
+  render: StorybookBreadcrumb,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Buttons/Button.stories.tsx

@@ -5,67 +5,17 @@
 import '@dxos-theme';
 
 import { CaretLeft, CaretRight } from '@phosphor-icons/react';
-import React, { type PropsWithChildren } from 'react';
-
-import { modalSurface, groupSurface, mx, surfaceElevation } from '@dxos/react-ui-theme';
+import React from 'react';
 
 import { Button, ButtonGroup, type ButtonProps } from './Button';
-import { withTheme } from '../../testing';
-import { DensityProvider } from '../DensityProvider';
-import { ElevationProvider } from '../ElevationProvider';
+import { withVariants, withTheme } from '../../testing';
 
-export default {
-  title: 'react-ui/Button',
-  component: Button,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
-
-const Container = ({ children }: PropsWithChildren<{}>) => (
-  <>
-    <div role='group' className={mx('flex flex-col gap-4 mbe-4 p-4')}>
-      <ElevationProvider elevation='base'>
-        <div className='flex gap-4'>{children}</div>
-        <DensityProvider density='fine'>
-          <div className='flex gap-4'>{children}</div>
-        </DensityProvider>
-      </ElevationProvider>
-    </div>
-    <div
-      role='group'
-      className={mx('flex flex-col gap-4 mbe-4 p-4 rounded-lg', groupSurface, surfaceElevation({ elevation: 'group' }))}
-    >
-      <ElevationProvider elevation='group'>
-        <div className='flex gap-4'>{children}</div>
-        <DensityProvider density='fine'>
-          <div className='flex gap-4'>{children}</div>
-        </DensityProvider>
-      </ElevationProvider>
-    </div>
-    <div
-      role='group'
-      className={mx(
-        'flex flex-col gap-4 mbe-4 p-4 rounded-lg',
-        modalSurface,
-        surfaceElevation({ elevation: 'chrome' }),
-      )}
-    >
-      <ElevationProvider elevation='chrome'>
-        <div className='flex gap-4'>{children}</div>
-        <DensityProvider density='fine'>
-          <div className='flex gap-4'>{children}</div>
-        </DensityProvider>
-      </ElevationProvider>
-    </div>
-  </>
-);
-
-export const Default = {
-  render: ({ children, ...args }: Omit<ButtonProps, 'ref'>) => (
-    <Container>
+const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
+  return (
+    <div>
       <Button {...args}>{children}</Button>
       <Button {...args} disabled>
-        Disabled
+        {children}
       </Button>
       {(args.variant === 'default' || args.variant === 'primary') && (
         <ButtonGroup>
@@ -77,15 +27,36 @@ export const Default = {
           </Button>
         </ButtonGroup>
       )}
-    </Container>
-  ),
-  args: { children: 'Hello', disabled: false, variant: 'default' },
+    </div>
+  );
 };
 
-export const Primary = { ...Default, args: { variant: 'primary', children: 'Hello' } };
+const defaults = { children: 'Test' };
 
-export const Destructive = { ...Default, args: { variant: 'destructive', children: 'Delete' } };
+export const Default = {
+  args: { ...defaults, variant: 'default' },
+};
+
+export const Primary = {
+  args: { ...defaults, variant: 'primary' },
+};
 
-export const Outline = { ...Default, args: { variant: 'outline', children: 'Hello' } };
+export const Destructive = {
+  args: { ...defaults, variant: 'destructive' },
+};
+
+export const Outline = {
+  args: { ...defaults, variant: 'outline' },
+};
 
-export const Ghost = { ...Default, args: { variant: 'ghost', children: 'Hello' } };
+export const Ghost = {
+  args: { ...defaults, variant: 'ghost' },
+};
+
+export default {
+  title: 'ui/react-ui-core/Button',
+  component: Button,
+  decorators: [withVariants(), withTheme],
+  render: DefaultStory,
+  parameters: { chromatic: { disableSnapshot: false } },
+};