@ornikar/bumper 2.2.1-canary.431a0c996598cbee4e3c07f6b9886d37d2a76679.0 → 2.2.1-canary.807c44961b602a3d69cc09c68bd5036b2794e70a.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/bumper",
-  "version": "2.2.1-canary.431a0c996598cbee4e3c07f6b9886d37d2a76679.0",
+  "version": "2.2.1-canary.807c44961b602a3d69cc09c68bd5036b2794e70a.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/bumper",
@@ -28,17 +28,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.0",
-    "@tamagui/animations-css": "1.135.6",
-    "@tamagui/animations-react-native": "1.135.6",
-    "@tamagui/core": "1.135.6",
-    "@tamagui/portal": "1.135.6",
-    "@tamagui/toast": "1.135.6",
-    "burnt": "0.12.2",
-    "react-native-safe-area-context": "4.12.0"
+    "@tamagui/core": "1.135.6"
   },
   "peerDependencies": {
     "@storybook/addons": ">=7.6.20",
-    "expo": "*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-native": ">=0.76.9"
@@ -59,8 +52,7 @@
     "@types/react": "18.3.27",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-native": "0.76.9",
-    "react-native-reanimated": "3.18.0"
+    "react-native": "0.76.9"
   },
   "expo": {},
   "exports": {

package/src/index.ts

@@ -19,8 +19,3 @@ export type { SwitchBreakpointsProps } from './components/breakpoints/SwitchBrea
 export { SwitchBreakpoints } from './components/breakpoints/SwitchBreakpoins';
 export type { ValueForBreakpoint } from './components/breakpoints/utils/breakpointsUtils';
 export { getValueForBreakpoint } from './components/breakpoints/utils/breakpointsUtils';
-
-// Toast
-export { SafeToastViewport as ToastViewport } from './components/toast/SafeToastViewport';
-export { ToastProvider } from './components/toast/ToastProvider';
-export { useToast } from './components/toast/useToast';

package/src/tamagui.config.ts

@@ -1,6 +1,4 @@
 import { createTamagui, createTokens } from '@tamagui/core';
-import { Platform } from 'react-native';
-import { nativeAnimations, webAnimations } from './animations';
 import { light } from './themes/light';
 import { BreakpointNameEnum, breakpoints } from './themes/utils/breakpoints';
 import { fonts } from './tokens/fonts';
@@ -35,7 +33,6 @@ export const config = createTamagui({
     autocompleteSpecificTokens: true,
     debug: false,
   },
-  animations: Platform.OS === 'web' ? webAnimations : nativeAnimations,
 });
 
 type Conf = typeof config;

package/dist/definitions/animations.d.ts

@@ -1,22 +0,0 @@
-export declare const nativeAnimations: import("@tamagui/web").AnimationDriver<{
-    fast: {
-        damping: number;
-        mass: number;
-        stiffness: number;
-    };
-    medium: {
-        damping: number;
-        mass: number;
-        stiffness: number;
-    };
-    slow: {
-        damping: number;
-        stiffness: number;
-    };
-}>;
-export declare const webAnimations: import("@tamagui/web").AnimationDriver<{
-    fast: string;
-    medium: string;
-    slow: string;
-}>;
-//# sourceMappingURL=animations.d.ts.map

package/dist/definitions/animations.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"animations.d.ts","sourceRoot":"","sources":["../../src/animations.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;EAe3B,CAAC;AAEH,eAAO,MAAM,aAAa;;;;EAIxB,CAAC"}

package/dist/definitions/components/toast/SafeToastViewport.d.ts

@@ -1,9 +0,0 @@
-import type { ToastViewportProps } from '@tamagui/toast';
-import type { ReactNode } from 'react';
-export interface SafeToastViewportProps {
-    name?: ToastViewportProps['name'];
-    position?: 'top' | 'bottom';
-    portalToRoot?: boolean;
-}
-export declare function SafeToastViewport({ name, position, portalToRoot }: SafeToastViewportProps): ReactNode;
-//# sourceMappingURL=SafeToastViewport.d.ts.map

package/dist/definitions/components/toast/SafeToastViewport.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SafeToastViewport.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/SafeToastViewport.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,sBAAsB;IACrC,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,QAAgB,EAAE,YAAoB,EAAE,EAAE,sBAAsB,GAAG,SAAS,CAcrH"}

package/dist/definitions/components/toast/ToastProvider.d.ts

@@ -1,10 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ToastProps } from './types';
-export interface ToastProviderProps {
-    children: React.ReactNode;
-    position?: 'top' | 'bottom';
-    viewportName?: string;
-    ToastComponent: React.ComponentType<ToastProps>;
-}
-export declare function ToastProvider({ children, position, viewportName, ToastComponent, }: ToastProviderProps): ReactNode;
-//# sourceMappingURL=ToastProvider.d.ts.map

package/dist/definitions/components/toast/ToastProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/ToastProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACjD;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAgB,EAChB,YAAY,EACZ,cAAc,GACf,EAAE,kBAAkB,GAAG,SAAS,CAYhC"}

package/dist/definitions/components/toast/ToastRenderer.d.ts

@@ -1,8 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ToastProps } from './types';
-interface ToastRendererProps {
-    ToastComponent: React.ComponentType<ToastProps>;
-}
-export declare function ToastRenderer({ ToastComponent }: ToastRendererProps): ReactNode;
-export {};
-//# sourceMappingURL=ToastRenderer.d.ts.map

package/dist/definitions/components/toast/ToastRenderer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToastRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/ToastRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,UAAU,kBAAkB;IAC1B,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACjD;AAED,wBAAgB,aAAa,CAAC,EAAE,cAAc,EAAE,EAAE,kBAAkB,GAAG,SAAS,CAe/E"}

package/dist/definitions/components/toast/ToastStoreProvider.d.ts

@@ -1,11 +0,0 @@
-import type { PropsWithChildren, ReactNode } from 'react';
-import type { ToastOptions } from './types';
-interface ToastStore {
-    toasts: ToastOptions[];
-    addToast: (toast: ToastOptions) => void;
-    removeToast: (id: string) => void;
-}
-export declare function ToastStoreProvider({ children }: PropsWithChildren): ReactNode;
-export declare const useToastStore: () => ToastStore;
-export {};
-//# sourceMappingURL=ToastStoreProvider.d.ts.map

package/dist/definitions/components/toast/ToastStoreProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToastStoreProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/ToastStoreProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,UAAU,UAAU;IAClB,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAkBD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,GAAG,SAAS,CAM7E;AAED,eAAO,MAAM,aAAa,QAAO,UAMhC,CAAC"}

package/dist/definitions/components/toast/decorators/ToastProviderDecorator.d.ts

@@ -1,2 +0,0 @@
-export declare const ToastStoryDecorator: import("@storybook/preview-api/dist/addons").MakeDecoratorResult;
-//# sourceMappingURL=ToastProviderDecorator.d.ts.map

package/dist/definitions/components/toast/decorators/ToastProviderDecorator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToastProviderDecorator.d.ts","sourceRoot":"","sources":["../../../../../src/components/toast/decorators/ToastProviderDecorator.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,mBAAmB,kEAiB9B,CAAC"}

package/dist/definitions/components/toast/types.d.ts

@@ -1,8 +0,0 @@
-import type { CustomData } from '@tamagui/toast';
-export interface ToastOptions extends CustomData {
-    title: string;
-}
-export interface ToastProps extends ToastOptions {
-    hideToast: () => void;
-}
-//# sourceMappingURL=types.d.ts.map

package/dist/definitions/components/toast/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC9C,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,UAAW,SAAQ,YAAY;IAC9C,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB"}

package/dist/definitions/components/toast/useToast.d.ts

@@ -1,9 +0,0 @@
-import type { ToastOptions } from './types';
-interface UseToastReturn {
-    toasts: ToastOptions[];
-    showToast: (options: ToastOptions) => void;
-    hideToast: (id: string) => void;
-}
-export declare function useToast(): UseToastReturn;
-export {};
-//# sourceMappingURL=useToast.d.ts.map

package/dist/definitions/components/toast/useToast.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/useToast.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,UAAU,cAAc;IACtB,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED,wBAAgB,QAAQ,IAAI,cAAc,CAwBzC"}

package/src/animations.ts

@@ -1,25 +0,0 @@
-import { createAnimations as createWebAnimations } from '@tamagui/animations-css';
-import { createAnimations as createNativeAnimations } from '@tamagui/animations-react-native';
-
-export const nativeAnimations = createNativeAnimations({
-  fast: {
-    damping: 20,
-    mass: 1.2,
-    stiffness: 250,
-  },
-  medium: {
-    damping: 10,
-    mass: 0.9,
-    stiffness: 100,
-  },
-  slow: {
-    damping: 20,
-    stiffness: 60,
-  },
-});
-
-export const webAnimations = createWebAnimations({
-  fast: 'ease-in 150ms',
-  medium: 'ease-in 300ms',
-  slow: 'ease-in 450ms',
-});

package/src/components/toast/SafeToastViewport.tsx

@@ -1,26 +0,0 @@
-import { ToastViewport } from '@tamagui/toast';
-import type { ToastViewportProps } from '@tamagui/toast';
-import type { ReactNode } from 'react';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-export interface SafeToastViewportProps {
-  name?: ToastViewportProps['name'];
-  position?: 'top' | 'bottom';
-  portalToRoot?: boolean;
-}
-
-export function SafeToastViewport({ name, position = 'top', portalToRoot = false }: SafeToastViewportProps): ReactNode {
-  const { left, top, bottom, right } = useSafeAreaInsets();
-
-  return (
-    <ToastViewport
-      multipleToasts
-      portalToRoot={portalToRoot}
-      name={name}
-      top={position === 'top' ? top : undefined}
-      bottom={position === 'bottom' ? bottom : undefined}
-      left={left}
-      right={right}
-    />
-  );
-}

package/src/components/toast/Toast.stories.tsx

@@ -1,75 +0,0 @@
-import type { ComponentStory, Meta } from '@storybook/react';
-import { type ReactNode } from 'react';
-import { StorySection } from '../../story-components/StorySection';
-import { VStack } from '../primitives/Stacks';
-import { View } from '../primitives/View';
-import { Typography } from '../typography/Typograhy';
-import { ToastProvider } from './ToastProvider';
-import { ToastStoryDecorator } from './decorators/ToastProviderDecorator';
-import type { ToastProps } from './types';
-import { useToast } from './useToast';
-
-function ToastComponent(props: ToastProps) {
-  return (
-    <VStack
-      backgroundColor="$bg.highlight.default"
-      padding="$16"
-      borderRadius="$space.4"
-      height="$space.56"
-      justifyContent="center"
-    >
-      <Typography.Text variant="body-l" weight="bold">
-        {props.title}
-      </Typography.Text>
-      {props.description && <Typography.Text>{props.description}</Typography.Text>}
-    </VStack>
-  );
-}
-
-function ToastTrigger(): ReactNode {
-  const { showToast } = useToast();
-
-  const showExampleToast = () => {
-    showToast({
-      title: 'Example Toast',
-      description: 'This is an example of a toast message.',
-    });
-  };
-
-  const showExampleToast2 = () => {
-    showToast({
-      title: 'Example Toast 2',
-      description: 'This is an other example of a toast message.',
-    });
-  };
-  return (
-    <>
-      <View onPress={showExampleToast}>
-        <Typography.Text>Show Toast</Typography.Text>
-      </View>
-      <View onPress={showExampleToast2}>
-        <Typography.Text>Show Toast 2</Typography.Text>
-      </View>
-    </>
-  );
-}
-
-export default {
-  title: 'bumper/Toast',
-  component: ToastProvider,
-  decorators: [ToastStoryDecorator],
-} satisfies Meta<typeof ToastProvider>;
-
-export const ToastProviderStory: ComponentStory<typeof ToastProvider> = () => (
-  <StorySection.Demo>
-    <ToastTrigger />
-  </StorySection.Demo>
-);
-
-ToastProviderStory.storyName = 'Toast';
-ToastProviderStory.parameters = {
-  toast: {
-    position: 'top',
-    component: ToastComponent,
-  },
-};

package/src/components/toast/ToastProvider.tsx

@@ -1,33 +0,0 @@
-import { PortalProvider } from '@tamagui/portal';
-import { ToastProvider as TamaguiToastProvider } from '@tamagui/toast';
-import type { ReactNode } from 'react';
-import { SafeToastViewport } from './SafeToastViewport';
-import { ToastRenderer } from './ToastRenderer';
-import { ToastStoreProvider } from './ToastStoreProvider';
-import type { ToastProps } from './types';
-
-export interface ToastProviderProps {
-  children: React.ReactNode;
-  position?: 'top' | 'bottom';
-  viewportName?: string;
-  ToastComponent: React.ComponentType<ToastProps>;
-}
-
-export function ToastProvider({
-  children,
-  position = 'top',
-  viewportName,
-  ToastComponent,
-}: ToastProviderProps): ReactNode {
-  return (
-    <PortalProvider>
-      <TamaguiToastProvider swipeDirection="horizontal">
-        <ToastStoreProvider>
-          {children}
-          <SafeToastViewport portalToRoot name={viewportName} position={position} />
-          <ToastRenderer ToastComponent={ToastComponent} />
-        </ToastStoreProvider>
-      </TamaguiToastProvider>
-    </PortalProvider>
-  );
-}

package/src/components/toast/ToastRenderer.tsx

@@ -1,26 +0,0 @@
-import { Toast } from '@tamagui/toast';
-import type { ReactNode } from 'react';
-import { useCallback } from 'react';
-import type { ToastProps } from './types';
-import { useToast } from './useToast';
-
-interface ToastRendererProps {
-  ToastComponent: React.ComponentType<ToastProps>;
-}
-
-export function ToastRenderer({ ToastComponent }: ToastRendererProps): ReactNode {
-  const { toasts, hideToast: removeToast } = useToast();
-
-  const hideToast = useCallback(
-    (id: string) => () => {
-      removeToast(id);
-    },
-    [removeToast],
-  );
-
-  return toasts.map((toast) => (
-    <Toast key={toast.id} id={toast.id} duration={toast.timeout} viewportName={toast.viewportName}>
-      <ToastComponent {...toast} hideToast={hideToast(toast.id)} />
-    </Toast>
-  ));
-}

package/src/components/toast/ToastStoreProvider.tsx

@@ -1,41 +0,0 @@
-import type { PropsWithChildren, ReactNode } from 'react';
-import { createContext, useCallback, useContext, useMemo, useState } from 'react';
-import type { ToastOptions } from './types';
-
-interface ToastStore {
-  toasts: ToastOptions[];
-  addToast: (toast: ToastOptions) => void;
-  removeToast: (id: string) => void;
-}
-
-const useToastState = (): ToastStore => {
-  const [toasts, setToasts] = useState<ToastOptions[]>([]);
-
-  const removeToast = useCallback((id: string) => {
-    setToasts((prevToasts) => prevToasts.filter((t) => t.id !== id));
-  }, []);
-
-  const addToast = useCallback((toast: ToastOptions) => {
-    setToasts((prevToasts) => [...prevToasts, toast]);
-  }, []);
-
-  return { toasts, addToast, removeToast };
-};
-
-const ToastStoreContext = createContext<ToastStore | undefined>(undefined);
-
-export function ToastStoreProvider({ children }: PropsWithChildren): ReactNode {
-  const { toasts, addToast, removeToast } = useToastState();
-
-  const value = useMemo(() => ({ toasts, addToast, removeToast }), [toasts, addToast, removeToast]);
-
-  return <ToastStoreContext.Provider value={value}>{children}</ToastStoreContext.Provider>;
-}
-
-export const useToastStore = (): ToastStore => {
-  const context = useContext(ToastStoreContext);
-  if (!context) {
-    throw new Error('useToastStore must be used within a ToastStoreProvider');
-  }
-  return context;
-};

package/src/components/toast/__snapshots__/Toast.stories.tsx.snap

@@ -1,146 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`bumper/Toast Toast 1`] = `
-<RNCSafeAreaProvider
-  onInsetsChange={[Function]}
-  style={
-    [
-      {
-        "flex": 1,
-      },
-      undefined,
-    ]
-  }
->
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
-    style={
-      [
-        {
-          "flex": 1,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View
-      style={
-        {
-          "flexDirection": "column",
-          "paddingBottom": 12,
-          "paddingLeft": 4,
-          "paddingRight": 4,
-          "paddingTop": 4,
-        }
-      }
-    >
-      <Text
-        style={
-          {
-            "fontFamily": "GTStandardSemibold",
-            "fontSize": 38,
-            "letterSpacing": 0,
-            "lineHeight": 48,
-            "marginBottom": 4,
-          }
-        }
-        suppressHighlighting={true}
-      >
-        Demo
-      </Text>
-      <View
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-      >
-        <Text
-          style={
-            {
-              "fontFamily": "GTStandard",
-            }
-          }
-          suppressHighlighting={true}
-        >
-          Show Toast
-        </Text>
-      </View>
-      <View
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-      >
-        <Text
-          style={
-            {
-              "fontFamily": "GTStandard",
-            }
-          }
-          suppressHighlighting={true}
-        >
-          Show Toast 2
-        </Text>
-      </View>
-    </View>
-    <View
-      pointerEvents="box-none"
-      style={
-        {
-          "bottom": 0,
-          "left": 0,
-          "maxWidth": "100%",
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-          "zIndex": 9007199254740991,
-        }
-      }
-    >
-      <View
-        aria-label="Notifications (F8)"
-        pointerEvents="box-none"
-        role="region"
-        style={
-          {
-            "bottom": 0,
-            "flexDirection": "column",
-            "left": 0,
-            "maxWidth": "100%",
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "zIndex": 100000,
-          }
-        }
-        tabIndex={-1}
-      >
-        <View
-          focusable={false}
-          pointerEvents="box-none"
-          style={
-            {
-              "flexDirection": "column",
-              "left": 0,
-              "maxWidth": "100%",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            }
-          }
-        />
-      </View>
-    </View>
-  </RNCSafeAreaProvider>
-</RNCSafeAreaProvider>
-`;

package/src/components/toast/__snapshots_web__/Toast.stories.tsx.snap

@@ -1,81 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`bumper/Toast Toast 1`] = `
-<DocumentFragment>
-  <div
-    class="css-view-175oi2r r-flex-13awgt0"
-  >
-    <span
-      class=""
-      style="display: contents;"
-    >
-      <span
-        class=" "
-        style="display: contents;"
-      >
-        <span
-          class=" t_light is_Theme"
-          style="display: contents;"
-        >
-          <div
-            class="css-view-175oi2r r-flex-13awgt0"
-          >
-            <div
-              class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _paddingTop-t-space-4 _paddingBottom-t-space-12 _paddingRight-t-space-4 _paddingLeft-t-space-4"
-            >
-              <span
-                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-t-space-4 _marginLeft-0px _fontFamily-f-family _fontSize-f-size-head100347201 _lineHeight-f-lineHeigh1544154440 _letterSpacing-f-letterSpa1195674547 _fontWeight-f-weight-se1074390495"
-                data-disable-theme="true"
-              >
-                Demo
-              </span>
-              <div
-                class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0"
-              >
-                <span
-                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
-                  data-disable-theme="true"
-                >
-                  Show Toast
-                </span>
-              </div>
-              <div
-                class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0"
-              >
-                <span
-                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
-                  data-disable-theme="true"
-                >
-                  Show Toast 2
-                </span>
-              </div>
-            </div>
-            <span
-              style="z-index: 9007199254740991; position: fixed; inset: 0; contain: strict; pointer-events: none;"
-            >
-              <div
-                aria-label="Notifications (F8)"
-                class="is_ViewportWrapper _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-fixed _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _pointerEvents-box-none _top-0px _bottom-0px _left-0px _right-0px _maxWidth-10037 _zIndex-100000"
-                role="region"
-                tabindex="-1"
-              >
-                <div
-                  class="is_ToastViewport _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-fixed _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _pointerEvents-box-none _maxWidth-10037 _top-0px _left-0px _right-0px"
-                  tabindex="-1"
-                >
-                  <div
-                    style="display: contents;"
-                  />
-                </div>
-              </div>
-            </span>
-            <div
-              style="display: contents;"
-            />
-          </div>
-        </span>
-      </span>
-    </span>
-  </div>
-</DocumentFragment>
-`;