@immich/ui 0.43.0 → 0.45.0

package/dist/common/context.svelte.d.ts

@@ -7,6 +7,6 @@ export declare const getFieldContext: () => {
     color: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "muted";
     invalid: boolean;
     readOnly: boolean;
-    required: boolean;
+    required: boolean | "indicator";
     disabled: boolean;
 };

package/dist/components/AnnouncementBanner/AnnouncementBanner.svelte

@@ -29,13 +29,13 @@
         false: '',
       },
       color: {
-        primary: 'bg-primary/20 text-primary dark:bg-primary/25',
-        secondary: 'bg-dark/20 text-dark dark:bg-dark/25',
+        primary: 'bg-primary-100 text-primary dark:bg-primary-900',
+        secondary: 'text-dark dark:bg-dark/25 bg-gray-200',
         muted: 'bg-subtle text-subtle dark:bg-subtle',
-        info: 'bg-info/20 text-info dark:bg-info/25',
-        warning: 'bg-warning/20 text-warning dark:bg-warning/25',
-        danger: 'bg-danger/20 text-danger dark:bg-danger/25',
-        success: 'bg-success/20 text-success dark:bg-success/25',
+        info: 'bg-info-100 text-info dark:bg-info-900',
+        warning: 'bg-warning-100 text-warning dark:bg-warning-900',
+        danger: 'bg-danger-100 text-danger dark:bg-danger-900',
+        success: 'bg-success-100 text-success dark:bg-success-900',
       },
     },
   });

package/dist/components/Badge/Badge.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import { styleVariants } from '../../styles.js';
+  import type { Color, Shape, Size } from '../../types.js';
+  import { cleanClass } from '../../utilities/internal.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  type Props = {
+    size?: Size;
+    color?: Color;
+    shape?: Shape;
+    children?: Snippet;
+    class?: string;
+  } & Omit<HTMLAttributes<HTMLSpanElement>, 'color'>;
+
+  let {
+    size = 'medium',
+    class: className,
+    color = 'primary',
+    shape = 'semi-round',
+    children,
+    ...props
+  }: Props = $props();
+
+  const styles = tv({
+    base: 'border px-2 py-0.5',
+    variants: {
+      shape: styleVariants.shape,
+      color: {
+        primary: 'bg-primary-200 text-primary-950 dark:text-primary-50 dark:bg-primary-800',
+        secondary: 'bg-neutral-200 text-neutral-950 dark:bg-neutral-800 dark:text-neutral-50',
+        success: 'bg-success-200 text-success-950 dark:text-success-50 dark:bg-success-800',
+        danger: 'bg-danger-200 text-danger-950 dark:text-danger-50 dark:bg-danger-800',
+        warning: 'bg-warning-200 text-warning-950 dark:text-warning-50 dark:bg-warning-800',
+        info: 'bg-info-200 text-info-950 dark:text-info-50 dark:bg-info-800',
+      },
+      textSize: styleVariants.textSize,
+      paddingSize: {
+        tiny: 'px-1 py-0.5',
+        small: 'px-2 py-0.5',
+        medium: 'px-2 py-0.5',
+        large: 'px-2 py-1.5',
+        giant: 'px-3 py-1',
+      },
+      roundedSize: {
+        tiny: 'rounded-sm',
+        small: 'rounded-sm',
+        medium: 'rounded-sm',
+        large: 'rounded-md',
+        giant: 'rounded-md',
+      },
+    },
+  });
+</script>
+
+<span
+  {...props}
+  class={cleanClass(
+    className,
+    styles({
+      color,
+      textSize: size,
+      paddingSize: size,
+      shape,
+      roundedSize: shape === 'semi-round' ? size : undefined,
+    }),
+  )}>{@render children?.()}</span
+>

package/dist/components/Badge/Badge.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Color, Shape, Size } from '../../types.js';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    size?: Size;
+    color?: Color;
+    shape?: Shape;
+    children?: Snippet;
+    class?: string;
+} & Omit<HTMLAttributes<HTMLSpanElement>, 'color'>;
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/Card/Card.svelte

@@ -49,12 +49,12 @@
     base: 'flex w-full grow flex-col',
     variants: {
       color: {
-        primary: 'bg-primary/25 dark:bg-primary/25',
-        secondary: 'text-dark bg-gray-50 dark:bg-neutral-900 dark:text-white',
-        success: 'bg-success/15 dark:bg-success/30',
-        danger: 'bg-danger/15 dark:bg-danger/50',
-        warning: 'bg-warning/25 dark:bg-warning/50',
-        info: 'bg-info/25 dark:bg-info/50',
+        primary: 'bg-primary-100 dark:bg-primary-900',
+        secondary: 'text-dark bg-gray-100 dark:bg-neutral-900 dark:text-white',
+        success: 'bg-success-100 dark:bg-success-900',
+        danger: 'bg-danger-100 dark:bg-danger-900',
+        warning: 'bg-warning-100 dark:bg-warning-900',
+        info: 'bg-info-100 dark:bg-info-900',
       },
     },
   });

package/dist/components/Checkbox/Checkbox.svelte

@@ -81,7 +81,7 @@
 
 <div class="flex flex-col gap-1">
   {#if label}
-    <Label id={labelId} for={inputId} {label} {...labelProps} />
+    <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} />
     {#if description}
       <Text color="secondary" size="small" id={descriptionId}>{description}</Text>
     {/if}
@@ -100,7 +100,7 @@
     )}
     bind:checked
     disabled={disabled || readOnly}
-    {required}
+    required={!!required}
     aria-readonly={disabled || readOnly}
     aria-describedby={descriptionId}
     {...restProps}

package/dist/components/DatePicker/DatePicker.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import DatePickerInternal from '../../internal/DatePicker.svelte';
+  import type { DatePickerProps } from '../../types.js';
+  import { CalendarDate, type DateValue } from '@internationalized/date';
+  import { DateTime } from 'luxon';
+
+  let {
+    value = $bindable<DateTime | undefined>(undefined),
+    onChange,
+    minDate,
+    maxDate,
+    ...rest
+  }: DatePickerProps = $props();
+
+  // Note: DatePickerInternal/bits.ui uses DateValue, while this component uses DateTime from luxon
+
+  // Convert DateTime to DateValue
+  const toDateValue = (dateTime?: DateTime): DateValue | undefined => {
+    if (!dateTime) {
+      return;
+    }
+    return new CalendarDate(dateTime.year, dateTime.month, dateTime.day);
+  };
+
+  // Convert DateValue to DateTime
+  const toDateTime = (dateValue?: DateValue): DateTime | undefined => {
+    if (!dateValue) {
+      return;
+    }
+
+    return DateTime.fromObject({ year: dateValue.year, month: dateValue.month, day: dateValue.day });
+  };
+
+  const handleChange = (date: DateValue | undefined) => {
+    onChange?.(toDateTime(date));
+  };
+</script>
+
+<DatePickerInternal
+  bind:date={() => toDateValue(value), (dateValue) => (value = toDateTime(dateValue))}
+  minDate={toDateValue(minDate)}
+  maxDate={toDateValue(maxDate)}
+  onChange={handleChange}
+  {...rest}
+/>

package/dist/components/DatePicker/DatePicker.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DatePickerProps } from '../../types.js';
+declare const DatePicker: import("svelte").Component<DatePickerProps, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/components/FormModal/FormModal.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import Button from '../Button/Button.svelte';
+  import Modal from '../Modal/Modal.svelte';
+  import ModalBody from '../Modal/ModalBody.svelte';
+  import ModalFooter from '../Modal/ModalFooter.svelte';
+  import HStack from '../Stack/HStack.svelte';
+  import { t } from '../../services/translation.svelte.js';
+  import type { Color } from '../../types.js';
+  import { generateId } from '../../utilities/internal.js';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    title: string;
+    icon?: string | boolean;
+    submitText?: string;
+    submitColor?: Color;
+    disabled?: boolean;
+    size?: 'small' | 'medium';
+    preventDefault?: boolean;
+    onClose: () => void;
+    onSubmit: (event: SubmitEvent) => void;
+    children: Snippet;
+  };
+
+  let {
+    title,
+    icon,
+    submitText = t('save'),
+    submitColor = 'primary',
+    disabled = false,
+    size = 'small',
+    preventDefault = true,
+    onClose = () => {},
+    onSubmit,
+    children,
+  }: Props = $props();
+
+  const onsubmit = (event: SubmitEvent) => {
+    if (preventDefault) {
+      event.preventDefault();
+    }
+
+    onSubmit(event);
+  };
+
+  const formId = generateId();
+</script>
+
+<Modal {title} {onClose} {size} {icon}>
+  <ModalBody>
+    <form {onsubmit} id={formId}>
+      {@render children()}
+    </form>
+  </ModalBody>
+  <ModalFooter>
+    <HStack fullWidth>
+      <Button shape="round" color="secondary" fullWidth onclick={onClose}>
+        {t('cancel')}
+      </Button>
+      <Button shape="round" type="submit" tabindex={1} color={submitColor} fullWidth {disabled} form={formId}>
+        {submitText}
+      </Button>
+    </HStack>
+  </ModalFooter>
+</Modal>

package/dist/components/FormModal/FormModal.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Color } from '../../types.js';
+import type { Snippet } from 'svelte';
+type Props = {
+    title: string;
+    icon?: string | boolean;
+    submitText?: string;
+    submitColor?: Color;
+    disabled?: boolean;
+    size?: 'small' | 'medium';
+    preventDefault?: boolean;
+    onClose: () => void;
+    onSubmit: (event: SubmitEvent) => void;
+    children: Snippet;
+};
+declare const FormModal: import("svelte").Component<Props, {}, "">;
+type FormModal = ReturnType<typeof FormModal>;
+export default FormModal;

package/dist/components/Input/Input.svelte

@@ -25,7 +25,7 @@
   const { label, description, readOnly, required, invalid, disabled, ...labelProps } = $derived(getFieldContext());
 
   const iconStyles = tv({
-    base: 'flex flex-shrink-0 items-center justify-center',
+    base: 'flex shrink-0 items-center justify-center',
     variants: {
       size: {
         tiny: 'w-6',
@@ -38,25 +38,19 @@
   });
 
   const containerStyles = tv({
-    base: 'flex w-full items-center bg-gray-200 outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-400 dark:bg-gray-600 dark:disabled:bg-gray-800 dark:disabled:text-gray-200',
+    base: cleanClass(styleVariants.inputContainerCommon, 'mt-0.5 flex w-full items-center'),
     variants: {
       shape: styleVariants.shape,
-      roundedSize: {
-        tiny: 'rounded-xl',
-        small: 'rounded-xl',
-        medium: 'rounded-2xl',
-        large: 'rounded-2xl',
-        giant: 'rounded-2xl',
-      },
+      roundedSize: styleVariants.inputRoundedSize,
       invalid: {
-        true: 'border-danger/80 border',
+        true: 'focus-within:ring-danger dark:focus-within:ring-danger dark:ring-danger-300 ring-danger-300 ring-1',
         false: '',
       },
     },
   });
 
   const inputStyles = tv({
-    base: 'flex-1 bg-transparent py-3 outline-none disabled:cursor-not-allowed',
+    base: cleanClass(styleVariants.inputCommon, 'flex-1 py-2'),
     variants: {
       textSize: styleVariants.textSize,
       leadingPadding: {
@@ -67,6 +61,13 @@
         base: 'pr-4',
         icon: 'pr-0',
       },
+      roundedSize: {
+        tiny: 'rounded-lg',
+        small: 'rounded-lg',
+        medium: 'rounded-lg',
+        large: 'rounded-lg',
+        giant: 'rounded-lg',
+      },
     },
   });
 
@@ -87,11 +88,18 @@
 
 <div class="flex w-full flex-col gap-1" bind:this={containerRef}>
   {#if label}
-    <Label id={labelId} for={inputId} {label} {...labelProps} />
+    <Label
+      id={labelId}
+      for={inputId}
+      {label}
+      requiredIndicator={required === 'indicator'}
+      {...labelProps}
+      class="font-medium"
+    />
   {/if}
 
   {#if description}
-    <Text color="secondary" size="small" id={descriptionId}>{description}</Text>
+    <Text color="muted" size="small" id={descriptionId} class="mb-1">{description}</Text>
   {/if}
 
   <div
@@ -117,8 +125,8 @@
     <input
       id={inputId}
       aria-labelledby={label && labelId}
-      {required}
-      aria-required={required}
+      required={!!required}
+      aria-required={!!required}
       {disabled}
       aria-disabled={disabled}
       aria-describedby={descriptionId}
@@ -129,6 +137,7 @@
         textSize: size,
         leadingPadding: leadingIcon ? 'icon' : 'base',
         trailingPadding: trailingIcon || trailingText ? 'icon' : 'base',
+        roundedSize: shape === 'semi-round' ? size : undefined,
       })}
       bind:this={ref}
       bind:value

package/dist/components/Label/Label.svelte

@@ -4,7 +4,7 @@
   import { cleanClass } from '../../utilities/internal.js';
   import { tv } from 'tailwind-variants';
 
-  const { label, size, color, class: className, children, ...restProps }: LabelProps = $props();
+  const { label, size, color, class: className, children, requiredIndicator, ...restProps }: LabelProps = $props();
 
   const styles = tv({
     base: '',
@@ -15,7 +15,13 @@
   });
 </script>
 
-<label class={cleanClass(styles({ size, color }), className)} {...restProps}>
-  {#if label}{label}{/if}
-  {@render children?.()}
-</label>
+<div class="inline-block">
+  <label class={cleanClass(styles({ size, color }), className)} {...restProps}>
+    {#if label}{label}{/if}
+    {@render children?.()}
+  </label>
+
+  {#if requiredIndicator}
+    <span aria-hidden="true" class="text-danger">*</span>
+  {/if}
+</div>

package/dist/components/Switch/Switch.svelte

@@ -41,13 +41,13 @@
     base: 'h-8 w-13 rounded-full border-2',
     variants: {
       fillColor: {
-        default: 'border-gray-400 bg-gray-300 dark:border-gray-500 dark:bg-gray-400',
-        primary: 'bg-primary/50 dark:bg-primary border-transparent',
-        secondary: 'bg-dark/50 border-transparent',
-        success: 'bg-success/50 border-transparent',
-        danger: 'bg-danger/50 border-transparent',
-        warning: 'bg-warning/50 border-transparent',
-        info: 'bg-info/50 border-transparent',
+        default: 'border-gray-400 bg-gray-200 dark:border-gray-500 dark:bg-gray-800',
+        primary: 'bg-primary-200 dark:bg-primary-800 border-transparent',
+        secondary: 'border-transparent bg-neutral-300 dark:bg-neutral-700',
+        success: 'bg-success-200 dark:bg-success-800 border-transparent',
+        danger: 'bg-danger-200 dark:bg-danger-800 border-transparent',
+        warning: 'bg-warning-200 dark:bg-warning-800 border-transparent',
+        info: 'bg-info-200 dark:bg-info-800 border-transparent',
       },
     },
   });
@@ -60,8 +60,8 @@
         false: 'translate-x-2 rtl:-translate-x-2',
       },
       fillColor: {
-        default: 'bg-gray-400 dark:bg-gray-500',
-        primary: 'bg-[#4250af]',
+        default: 'bg-gray-600 dark:bg-gray-500',
+        primary: 'bg-primary',
         secondary: 'bg-dark',
         success: 'bg-success',
         danger: 'bg-danger',
@@ -81,7 +81,7 @@
   bind:ref
   id={inputId}
   disabled={disabled || readOnly}
-  {required}
+  required={!!required}
   class={cleanClass(label && 'w-full', className)}
   aria-readonly={readOnly}
   aria-labelledby={labelId}
@@ -93,7 +93,7 @@
       <div class={cleanClass(label && 'flex items-center justify-between gap-1')}>
         {#if label}
           <div class="text-start">
-            <Label id={labelId} for={inputId} {label} {...labelProps} />
+            <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} />
             {#if description}
               <Text color="secondary" size="small" id={descriptionId}>{description}</Text>
             {/if}

package/dist/components/Textarea/Textarea.svelte

@@ -66,7 +66,7 @@
 
 <div class="flex w-full flex-col gap-1" bind:this={containerRef}>
   {#if label}
-    <Label id={labelId} for={inputId} {label} {...labelProps} />
+    <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} />
   {/if}
 
   {#if description}
@@ -78,8 +78,8 @@
       oninput={onInput}
       id={inputId}
       aria-labelledby={label && labelId}
-      {required}
-      aria-required={required}
+      required={!!required}
+      aria-required={!!required}
       {disabled}
       aria-disabled={disabled}
       aria-describedby={descriptionId}

package/dist/components/Toast/ToastContainer.svelte

@@ -9,15 +9,23 @@
     color = 'primary',
     shape = 'semi-round',
     size = 'medium',
-    variant = 'filled',
     class: className,
     children,
     ...restProps
   }: ToastContainerProps = $props();
 
   const containerStyles = tv({
-    base: 'bg-light text-dark overflow-hidden shadow-xs transition-all',
+    base: 'bg-light text-dark overflow-hidden py-1.5 shadow-xs transition-all',
     variants: {
+      color: {
+        primary: 'bg-primary-100 dark:bg-primary-900',
+        secondary: 'bg-neutral-100 dark:bg-neutral-900',
+        muted: 'bg-subtle dark:bg-subtle',
+        info: 'bg-info-100 dark:bg-info-900',
+        warning: 'bg-warning-100 dark:bg-warning-900',
+        danger: 'bg-danger-100 dark:bg-danger-900',
+        success: 'bg-success-100 dark:bg-success-900',
+      },
       shape: styleVariants.shape,
       size: {
         tiny: 'w-64',
@@ -27,16 +35,6 @@
         giant: 'w-lg',
         full: 'w-full',
       },
-
-      border: styleVariants.border,
-      borderColor: {
-        primary: 'border-primary/25',
-        secondary: 'border-dark/25',
-        success: 'border-success/25',
-        danger: 'border-danger/25',
-        warning: 'border-warning/25',
-        info: 'border-info/25',
-      },
       roundedSize: {
         tiny: 'rounded-lg',
         small: 'rounded-lg',
@@ -46,29 +44,6 @@
       },
     },
   });
-
-  const container2Styles = tv({
-    base: 'py-1.5',
-    variants: {
-      filled: {
-        primary: 'bg-primary/15 dark:bg-primary/25',
-        secondary: 'bg-dark/15 dark:bg-dark/25',
-        muted: 'bg-subtle dark:bg-subtle',
-        info: 'bg-info/15 dark:bg-info/25',
-        warning: 'bg-warning/15 dark:bg-warning/25',
-        danger: 'bg-danger/15 dark:bg-danger/25',
-        success: 'bg-success/15 dark:bg-success/25',
-      },
-      outline: {
-        primary: 'bg-primary/2 text-primary dark:bg-primary/5',
-        secondary: 'bg-dark/2 text-dark dark:bg-dark/5',
-        success: 'bg-success/2 text-success dark:bg-success/5',
-        danger: 'bg-danger/2 text-danger dark:bg-danger/5',
-        warning: 'bg-warning/2 text-warning dark:bg-warning/5',
-        info: 'bg-info/2 text-info dark:bg-info/5',
-      },
-    },
-  });
 </script>
 
 <div
@@ -78,20 +53,12 @@
     containerStyles({
       shape,
       size,
+      color,
       roundedSize: shape === 'semi-round' ? 'medium' : undefined,
-      border: variant === 'outline',
-      borderColor: variant === 'outline' ? color : undefined,
     }),
     className,
   )}
   {...restProps}
 >
-  <div
-    class={container2Styles({
-      outline: variant === 'outline' ? color : undefined,
-      filled: variant === 'filled' ? color : undefined,
-    })}
-  >
-    {@render children?.()}
-  </div>
+  {@render children?.()}
 </div>

package/dist/components/Toast/ToastContent.svelte

@@ -9,15 +9,7 @@
   import { type Snippet } from 'svelte';
   import { tv } from 'tailwind-variants';
 
-  let {
-    color = 'primary',
-    variant = 'filled',
-    icon: iconOverride,
-    title,
-    description,
-    onClose,
-    children,
-  }: ToastContentProps = $props();
+  let { color = 'primary', icon: iconOverride, title, description, onClose, children }: ToastContentProps = $props();
 
   const icon = $derived(
     resolveIcon({
@@ -49,7 +41,7 @@
 <div class="flex items-center px-2">
   <div class="flex items-center">
     {#if icon}
-      <Icon {icon} class={iconStyles({ color: variant === 'filled' ? color : undefined })} />
+      <Icon {icon} class={iconStyles({ color })} />
     {/if}
   </div>
   <div class="flex grow justify-between">
@@ -63,7 +55,7 @@
     </div>
     {#if onClose}
       <div class="flex items-center">
-        <CloseButton color={variant === 'filled' ? 'secondary' : color} variant="ghost" onclick={onClose} />
+        <CloseButton color="secondary" variant="ghost" onclick={onClose} />
       </div>
     {/if}
   </div>

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export { default as AppShell } from './components/AppShell/AppShell.svelte';
 export { default as AppShellHeader } from './components/AppShell/AppShellHeader.svelte';
 export { default as AppShellSidebar } from './components/AppShell/AppShellSidebar.svelte';
 export { default as Avatar } from './components/Avatar/Avatar.svelte';
+export { default as Badge } from './components/Badge/Badge.svelte';
 export { default as Button } from './components/Button/Button.svelte';
 export { default as Card } from './components/Card/Card.svelte';
 export { default as CardBody } from './components/Card/CardBody.svelte';
@@ -30,8 +31,10 @@ export { default as CodeBlock } from './components/CodeBlock/CodeBlock.svelte';
 export { default as CommandPaletteContext } from './components/CommandPalette/CommandPaletteContext.svelte';
 export { default as ConfirmModal } from './components/ConfirmModal/ConfirmModal.svelte';
 export { default as Container } from './components/Container/Container.svelte';
+export { default as DatePicker } from './components/DatePicker/DatePicker.svelte';
 export { default as Field } from './components/Field/Field.svelte';
 export { default as FormatBytes } from './components/FormatBytes/FormatBytes.svelte';
+export { default as FormModal } from './components/FormModal/FormModal.svelte';
 export { default as Heading } from './components/Heading/Heading.svelte';
 export { default as HelperText } from './components/HelperText/HelperText.svelte';
 export { default as Icon } from './components/Icon/Icon.svelte';

package/dist/index.js

@@ -18,6 +18,7 @@ export { default as AppShell } from './components/AppShell/AppShell.svelte';
 export { default as AppShellHeader } from './components/AppShell/AppShellHeader.svelte';
 export { default as AppShellSidebar } from './components/AppShell/AppShellSidebar.svelte';
 export { default as Avatar } from './components/Avatar/Avatar.svelte';
+export { default as Badge } from './components/Badge/Badge.svelte';
 export { default as Button } from './components/Button/Button.svelte';
 export { default as Card } from './components/Card/Card.svelte';
 export { default as CardBody } from './components/Card/CardBody.svelte';
@@ -32,8 +33,10 @@ export { default as CodeBlock } from './components/CodeBlock/CodeBlock.svelte';
 export { default as CommandPaletteContext } from './components/CommandPalette/CommandPaletteContext.svelte';
 export { default as ConfirmModal } from './components/ConfirmModal/ConfirmModal.svelte';
 export { default as Container } from './components/Container/Container.svelte';
+export { default as DatePicker } from './components/DatePicker/DatePicker.svelte';
 export { default as Field } from './components/Field/Field.svelte';
 export { default as FormatBytes } from './components/FormatBytes/FormatBytes.svelte';
+export { default as FormModal } from './components/FormModal/FormModal.svelte';
 export { default as Heading } from './components/Heading/Heading.svelte';
 export { default as HelperText } from './components/HelperText/HelperText.svelte';
 export { default as Icon } from './components/Icon/Icon.svelte';