@genspectrum/dashboard-components 0.2.0 → 0.3.1

package/dist/style.css

@@ -975,39 +975,6 @@ html {
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }
-.container {
-  width: 100%;
-}
-@media (min-width: 640px) {
-
-  .container {
-    max-width: 640px;
-  }
-}
-@media (min-width: 768px) {
-
-  .container {
-    max-width: 768px;
-  }
-}
-@media (min-width: 1024px) {
-
-  .container {
-    max-width: 1024px;
-  }
-}
-@media (min-width: 1280px) {
-
-  .container {
-    max-width: 1280px;
-  }
-}
-@media (min-width: 1536px) {
-
-  .container {
-    max-width: 1536px;
-  }
-}
 .alert {
   display: grid;
   width: 100%;
@@ -1110,6 +1077,12 @@ html {
   .btn:disabled {
   pointer-events: none;
 }
+.btn-circle {
+  height: 3rem;
+  width: 3rem;
+  border-radius: 9999px;
+  padding: 0px;
+}
 :where(.btn:is(input[type="checkbox"])),
 :where(.btn:is(input[type="radio"])) {
   width: auto;
@@ -1262,16 +1235,14 @@ html {
     --glass-border-opacity: 15%;
   }
 
-  .btn-outline.btn-primary:hover {
-    --tw-text-opacity: 1;
-    color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
+  .btn-ghost:hover {
+    border-color: transparent;
   }
 
-  @supports (color: color-mix(in oklab, black, black)) {
+  @supports (color: oklch(0% 0 0)) {
 
-    .btn-outline.btn-primary:hover {
-      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
+    .btn-ghost:hover {
+      background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
     }
   }
 
@@ -1484,6 +1455,69 @@ html {
 :where(.menu li) .badge {
   justify-self: end;
 }
+.modal {
+  pointer-events: none;
+  position: fixed;
+  inset: 0px;
+  margin: 0px;
+  display: grid;
+  height: 100%;
+  max-height: none;
+  width: 100%;
+  max-width: none;
+  justify-items: center;
+  padding: 0px;
+  opacity: 0;
+  overscroll-behavior: contain;
+  z-index: 999;
+  background-color: transparent;
+  color: inherit;
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  transition-property: transform, opacity, visibility;
+  overflow-y: hidden;
+}
+:where(.modal) {
+  align-items: center;
+}
+.modal-box {
+  max-height: calc(100vh - 5em);
+  grid-column-start: 1;
+  grid-row-start: 1;
+  width: 91.666667%;
+  max-width: 32rem;
+  --tw-scale-x: .9;
+  --tw-scale-y: .9;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  border-bottom-right-radius: var(--rounded-box, 1rem);
+  border-bottom-left-radius: var(--rounded-box, 1rem);
+  border-top-left-radius: var(--rounded-box, 1rem);
+  border-top-right-radius: var(--rounded-box, 1rem);
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
+  padding: 1.5rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  transition-duration: 200ms;
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.modal-open,
+.modal:target,
+.modal-toggle:checked + .modal,
+.modal[open] {
+  pointer-events: auto;
+  visibility: visible;
+  opacity: 1;
+}
+:root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])) {
+  overflow: hidden;
+  scrollbar-gutter: stable;
+}
 .radio {
   flex-shrink: 0;
   --chkbg: var(--bc);
@@ -1681,34 +1715,12 @@ input.tab:checked + .tab-content,
     background-color: var(--btn-color, var(--fallback-b2));
     border-color: var(--btn-color, var(--fallback-b2));
   }
-
-  .btn-primary {
-    --btn-color: var(--fallback-p);
-  }
-}
-@supports (color: color-mix(in oklab, black, black)) {
-
-  .btn-outline.btn-primary.btn-active {
-    background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-    border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-  }
 }
 .btn:focus-visible {
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
 }
-.btn-primary {
-  --tw-text-opacity: 1;
-  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
-  outline-color: var(--fallback-p,oklch(var(--p)/1));
-}
-@supports (color: oklch(0% 0 0)) {
-
-  .btn-primary {
-    --btn-color: var(--p);
-  }
-}
 .btn.glass {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
@@ -1719,13 +1731,19 @@ input.tab:checked + .tab-content,
   --glass-opacity: 25%;
   --glass-border-opacity: 15%;
 }
-.btn-outline.btn-primary {
-  --tw-text-opacity: 1;
-  color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
+.btn-ghost {
+  border-width: 1px;
+  border-color: transparent;
+  background-color: transparent;
+  color: currentColor;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  outline-color: currentColor;
 }
-.btn-outline.btn-primary.btn-active {
-  --tw-text-opacity: 1;
-  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
+.btn-ghost.btn-active {
+  border-color: transparent;
+  background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
 }
 .btn.btn-disabled,
   .btn[disabled],
@@ -2040,6 +2058,29 @@ input.tab:checked + .tab-content,
   border-color: currentColor;
   opacity: 0.6;
 }
+.modal:not(dialog:not(.modal-open)),
+  .modal::backdrop {
+  background-color: #0006;
+  animation: modal-pop 0.2s ease-out;
+}
+.modal-backdrop {
+  z-index: -1;
+  grid-column-start: 1;
+  grid-row-start: 1;
+  display: grid;
+  align-self: stretch;
+  justify-self: stretch;
+  color: transparent;
+}
+.modal-open .modal-box,
+.modal-toggle:checked + .modal .modal-box,
+.modal:target .modal-box,
+.modal[open] .modal-box {
+  --tw-translate-y: 0px;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 @keyframes modal-pop {
 
   0% {
@@ -2525,6 +2566,18 @@ input.tab:checked + .tab-content,
   border-radius: 9999px;
   padding: 0px;
 }
+.btn-circle:where(.btn-md) {
+  height: 3rem;
+  width: 3rem;
+  border-radius: 9999px;
+  padding: 0px;
+}
+.btn-circle:where(.btn-lg) {
+  height: 4rem;
+  width: 4rem;
+  border-radius: 9999px;
+  padding: 0px;
+}
 .join.join-vertical {
   flex-direction: column;
 }
@@ -2639,6 +2692,42 @@ input.tab:checked + .tab-content,
   margin-bottom: 0px;
   margin-inline-start: -1px;
 }
+.modal-top :where(.modal-box) {
+  width: 100%;
+  max-width: none;
+  --tw-translate-y: -2.5rem;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  border-bottom-right-radius: var(--rounded-box, 1rem);
+  border-bottom-left-radius: var(--rounded-box, 1rem);
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+.modal-middle :where(.modal-box) {
+  width: 91.666667%;
+  max-width: 32rem;
+  --tw-translate-y: 0px;
+  --tw-scale-x: .9;
+  --tw-scale-y: .9;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  border-top-left-radius: var(--rounded-box, 1rem);
+  border-top-right-radius: var(--rounded-box, 1rem);
+  border-bottom-right-radius: var(--rounded-box, 1rem);
+  border-bottom-left-radius: var(--rounded-box, 1rem);
+}
+.modal-bottom :where(.modal-box) {
+  width: 100%;
+  max-width: none;
+  --tw-translate-y: 2.5rem;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  border-top-left-radius: var(--rounded-box, 1rem);
+  border-top-right-radius: var(--rounded-box, 1rem);
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
 .steps-horizontal .step {
   grid-template-rows: 40px 1fr;
   grid-template-columns: auto;
@@ -2764,9 +2853,15 @@ input.tab:checked + .tab-content,
 .relative {
   position: relative;
 }
+.right-2 {
+  right: 0.5rem;
+}
 .right-6 {
   right: 1.5rem;
 }
+.top-2 {
+  top: 0.5rem;
+}
 .top-8 {
   top: 2rem;
 }
@@ -2800,9 +2895,6 @@ input.tab:checked + .tab-content,
 .me-1 {
   margin-inline-end: 0.25rem;
 }
-.ml-1 {
-  margin-left: 0.25rem;
-}
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -3003,6 +3095,10 @@ input.tab:checked + .tab-content,
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
 .text-justify {
   text-align: justify;
 }
@@ -3083,6 +3179,10 @@ input.tab:checked + .tab-content,
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
+.hover\:text-gray-300:hover {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
 .hover\:text-gray-700:hover {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.2.0",
+    "version": "0.3.1",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -101,7 +101,6 @@
         "postcss": "^8.4.38",
         "prettier": "^3.2.5",
         "react": "^18.3.1",
-        "release-please": "^16.10.2",
         "storybook": "^8.0.9",
         "storybook-addon-fetch-mock": "^2.0.0",
         "tailwindcss": "^3.4.3",

package/src/constants.ts

@@ -1,4 +1,4 @@
-export const LAPIS_URL = 'https://s1.int.genspectrum.org/open';
+export const LAPIS_URL = 'https://lapis.cov-spectrum.org/open/v2/';
 
 export const AGGREGATED_ENDPOINT = `${LAPIS_URL}/sample/aggregated`;
 export const NUCLEOTIDE_MUTATIONS_ENDPOINT = `${LAPIS_URL}/sample/nucleotideMutations`;

package/src/lapisApi/lapisApi.ts

@@ -3,11 +3,35 @@ import {
     aggregatedResponse,
     insertionsResponse,
     type LapisBaseRequest,
+    lapisError,
     type MutationsRequest,
     mutationsResponse,
+    problemDetail,
+    type ProblemDetail,
 } from './lapisTypes';
 import { type SequenceType } from '../types';
 
+export class UnknownLapisError extends Error {
+    constructor(
+        message: string,
+        public readonly status: number,
+    ) {
+        super(message);
+        this.name = 'UnknownLapisError';
+    }
+}
+
+export class LapisError extends Error {
+    constructor(
+        message: string,
+        public readonly status: number,
+        public readonly problemDetail: ProblemDetail,
+    ) {
+        super(message);
+        this.name = 'LapisError';
+    }
+}
+
 export async function fetchAggregated(lapisUrl: string, body: LapisBaseRequest, signal?: AbortSignal) {
     const response = await fetch(aggregatedEndpoint(lapisUrl), {
         method: 'POST',
@@ -79,9 +103,29 @@ export async function fetchReferenceGenome(lapisUrl: string, signal?: AbortSigna
 const handleErrors = async (response: Response) => {
     if (!response.ok) {
         if (response.status >= 400 && response.status < 500) {
-            throw new Error(`${response.statusText}: ${JSON.stringify(await response.json())}`);
+            const json = await response.json();
+
+            const lapisErrorResult = lapisError.safeParse(json);
+            if (lapisErrorResult.success) {
+                throw new LapisError(
+                    response.statusText + lapisErrorResult.data.error.detail,
+                    response.status,
+                    lapisErrorResult.data.error,
+                );
+            }
+
+            const problemDetailResult = problemDetail.safeParse(json);
+            if (problemDetailResult.success) {
+                throw new LapisError(
+                    response.statusText + problemDetailResult.data.detail,
+                    response.status,
+                    problemDetailResult.data,
+                );
+            }
+
+            throw new UnknownLapisError(`${response.statusText}: ${JSON.stringify(json)}`, response.status);
         }
-        throw new Error(`${response.statusText}: ${response.status}`);
+        throw new UnknownLapisError(`${response.statusText}: ${response.status}`, response.status);
     }
 };
 

package/src/lapisApi/lapisTypes.ts

@@ -49,3 +49,17 @@ function makeLapisResponse<T extends ZodTypeAny>(data: T) {
         data,
     });
 }
+
+export const problemDetail = z.object({
+    title: z.string().optional(),
+    status: z.number(),
+    detail: z.string().optional(),
+    type: z.string(),
+    instance: z.string().optional(),
+});
+
+export type ProblemDetail = z.infer<typeof problemDetail>;
+
+export const lapisError = z.object({
+    error: problemDetail,
+});

package/src/preact/aggregatedData/aggregate.stories.tsx

@@ -10,7 +10,8 @@ const meta: Meta<AggregateProps> = {
     component: Aggregate,
     argTypes: {
         fields: [{ control: 'object' }],
-        size: [{ control: 'object' }],
+        width: { control: 'text' },
+        height: { control: 'text' },
         headline: { control: 'text' },
     },
     parameters: {
@@ -49,7 +50,8 @@ export const Default: StoryObj<AggregateProps> = {
         filter: {
             country: 'USA',
         },
-        size: { width: '100%', height: '70vh' },
+        width: '100%',
+        height: '700px',
         headline: 'Aggregate',
     },
 };

package/src/preact/aggregatedData/aggregate.tsx

@@ -12,14 +12,15 @@ import Headline from '../components/headline';
 import Info from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
-import { ResizeContainer, type Size } from '../components/resize-container';
+import { ResizeContainer } from '../components/resize-container';
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
 
 export type View = 'table';
 
 export type AggregateProps = {
-    size?: Size;
+    width: string;
+    height: string;
     headline?: string;
 } & AggregateInnerProps;
 
@@ -31,16 +32,17 @@ export interface AggregateInnerProps {
 
 export const Aggregate: FunctionComponent<AggregateProps> = ({
     views,
-    size,
+    width,
+    height,
     headline = 'Mutations',
     filter,
     fields,
 }) => {
-    const defaultSize = { height: '600px', width: '100%' };
+    const size = { height, width };
 
     return (
-        <ErrorBoundary size={size} defaultSize={defaultSize} headline={headline}>
-            <ResizeContainer size={size} defaultSize={defaultSize}>
+        <ErrorBoundary size={size} headline={headline}>
+            <ResizeContainer size={size}>
                 <Headline heading={headline}>
                     <AggregateInner fields={fields} filter={filter} views={views} />
                 </Headline>

package/src/preact/components/error-boundary.stories.tsx

@@ -12,22 +12,20 @@ const meta: Meta = {
         defaultSize: { control: 'object' },
         headline: { control: 'text' },
     },
+    args: {
+        size: { height: '600px', width: '100%' },
+        headline: 'Some headline',
+    },
 };
 
 export default meta;
 
 export const ErrorBoundaryWithoutErrorStory: StoryObj = {
     render: (args) => (
-        <ErrorBoundary size={args.size} defaultSize={args.defaultSize} headline={args.headline}>
+        <ErrorBoundary size={args.size} headline={args.headline}>
             <div>Some content</div>
         </ErrorBoundary>
     ),
-    args: {
-        size: { height: '600px', width: '100%' },
-        defaultSize: { height: '600px', width: '100%' },
-        headline: 'Some headline',
-    },
-
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
         const content = canvas.getByText('Some content', { exact: false });
@@ -38,16 +36,10 @@ export const ErrorBoundaryWithoutErrorStory: StoryObj = {
 
 export const ErrorBoundaryWithErrorStory: StoryObj = {
     render: (args) => (
-        <ErrorBoundary size={args.size} defaultSize={args.defaultSize} headline={args.headline}>
+        <ErrorBoundary size={args.size} headline={args.headline}>
             <ContentThatThrowsError />
         </ErrorBoundary>
     ),
-    args: {
-        size: { height: '600px', width: '100%' },
-        defaultSize: { height: '600px', width: '100%' },
-        headline: 'Some headline',
-    },
-
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
         const content = canvas.queryByText('Some content.', { exact: false });

package/src/preact/components/error-boundary.tsx

@@ -5,21 +5,12 @@ import { ErrorDisplay } from './error-display';
 import { ResizeContainer, type Size } from './resize-container';
 import Headline from '../components/headline';
 
-export const ErrorBoundary: FunctionComponent<{ size?: Size; defaultSize: Size; headline?: string }> = ({
-    size,
-    defaultSize,
-    headline,
-    children,
-}) => {
+export const ErrorBoundary: FunctionComponent<{ size: Size; headline?: string }> = ({ size, headline, children }) => {
     const [internalError] = useErrorBoundary();
 
-    if (internalError) {
-        console.error(internalError);
-    }
-
     if (internalError) {
         return (
-            <ResizeContainer defaultSize={defaultSize} size={size}>
+            <ResizeContainer size={size}>
                 <Headline heading={headline}>
                     <ErrorDisplay error={internalError} />
                 </Headline>

package/src/preact/components/error-display.stories.tsx

@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
-import { expect, waitFor, within } from '@storybook/test';
+import { expect, userEvent, waitFor, within } from '@storybook/test';
 
 import { ErrorDisplay, UserFacingError } from './error-display';
 import { ResizeContainer } from './resize-container';
@@ -14,7 +14,7 @@ export default meta;
 
 export const ErrorStory: StoryObj = {
     render: () => (
-        <ResizeContainer defaultSize={{ height: '600px', width: '100%' }}>
+        <ResizeContainer size={{ height: '600px', width: '100%' }}>
             <ErrorDisplay error={new Error('some message')} />
         </ResizeContainer>
     ),
@@ -29,15 +29,22 @@ export const ErrorStory: StoryObj = {
 
 export const UserFacingErrorStory: StoryObj = {
     render: () => (
-        <ResizeContainer defaultSize={{ height: '600px', width: '100%' }}>
-            <ErrorDisplay error={new UserFacingError('some message')} />
+        <ResizeContainer size={{ height: '600px', width: '100%' }}>
+            <ErrorDisplay error={new UserFacingError('Error Title', 'some message')} />
         </ResizeContainer>
     ),
 
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
         const error = canvas.getByText('Oops! Something went wrong.', { exact: false });
+        const detailMessage = () => canvas.getByText('some message');
         await waitFor(() => expect(error).toBeInTheDocument());
-        await waitFor(() => expect(canvas.getByText('some message')).toBeInTheDocument());
+        await waitFor(() => {
+            expect(detailMessage()).not.toBeVisible();
+        });
+        await userEvent.click(canvas.getByText('Show details.'));
+        await waitFor(() => {
+            expect(detailMessage()).toBeVisible();
+        });
     },
 };

package/src/preact/components/error-display.tsx

@@ -1,18 +1,52 @@
 import { type FunctionComponent } from 'preact';
+import { useRef } from 'preact/hooks';
 
 export class UserFacingError extends Error {
-    constructor(message: string) {
+    constructor(
+        public readonly headline: string,
+        message: string,
+    ) {
         super(message);
         this.name = 'UserFacingError';
     }
 }
 
 export const ErrorDisplay: FunctionComponent<{ error: Error }> = ({ error }) => {
+    console.error(error);
+
+    const ref = useRef<HTMLDialogElement>(null);
+
     return (
         <div className='h-full w-full rounded-md border-2 border-gray-100 p-2 flex items-center justify-center flex-col'>
             <div className='text-red-700 font-bold'>Error</div>
-            <div>Oops! Something went wrong.</div>
-            {error instanceof UserFacingError && <div className='text-sm text-gray-600'>{error.message}</div>}
+            <div>
+                Oops! Something went wrong.
+                {error instanceof UserFacingError && (
+                    <>
+                        {' '}
+                        <button
+                            className='text-sm text-gray-600 hover:text-gray-300'
+                            onClick={() => ref.current?.showModal()}
+                        >
+                            Show details.
+                        </button>
+                        <dialog ref={ref} class='modal'>
+                            <div class='modal-box'>
+                                <form method='dialog'>
+                                    <button className='btn btn-sm btn-circle btn-ghost absolute right-2 top-2'>
+                                        ✕
+                                    </button>
+                                </form>
+                                <h1 class='text-lg'>{error.headline}</h1>
+                                <p class='py-4'>{error.message}</p>
+                            </div>
+                            <form method='dialog' class='modal-backdrop'>
+                                <button>close</button>
+                            </form>
+                        </dialog>
+                    </>
+                )}
+            </div>
         </div>
     );
 };

package/src/preact/components/loading-display.stories.tsx

@@ -13,7 +13,7 @@ export default meta;
 
 export const LoadingStory: StoryObj = {
     render: () => (
-        <ResizeContainer defaultSize={{ height: '600px', width: '100%' }}>
+        <ResizeContainer size={{ height: '600px', width: '100%' }}>
             <LoadingDisplay />
         </ResizeContainer>
     ),