@kystverket/styrbord 1.15.3 → 1.17.0

package/dist/src/components/designsystemet/Avatar/Avatar.d.ts

@@ -17,6 +17,10 @@ export type AvatarProps = MergeRight<DsAvatarProps, (AriaLabel | AriaHidden) & {
      * Tooltip text to display on hover.
      */
     tooltip?: string;
+    /**
+     * When true, overlays a checkmark on the avatar with a subtle dimming effect.
+     */
+    checked?: boolean;
 }>;
 export declare const Avatar: FC<AvatarProps>;
 export {};

package/dist/src/components/designsystemet/Avatar/Avatar.stories.d.ts

@@ -13,4 +13,5 @@ export declare const ShapeVariants: Story;
 export declare const WithImage: Story;
 export declare const InDropdown: Story;
 export declare const WithTooltip: Story;
+export declare const Checked: Story;
 export declare const AsLink: Story;

package/dist/src/components/designsystemet/Checkbox/Checkbox.stories.d.ts

@@ -43,14 +43,14 @@ export declare const Disabled: {
         disabled: boolean;
         id?: string | undefined | undefined;
         children?: React.ReactNode;
-        className?: string | undefined | undefined;
-        width?: number | string | undefined | undefined;
         form?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         slot?: string | undefined | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined | undefined;
         pattern?: string | undefined | undefined;
+        className?: string | undefined | undefined;
+        width?: number | string | undefined | undefined;
+        color?: string | undefined | undefined;
         'data-color'?: import("@digdir/designsystemet-react/colors").Color | undefined;
         'data-size'?: import("@digdir/designsystemet-react").Size | undefined;
         defaultChecked?: boolean | undefined | undefined;
@@ -360,14 +360,14 @@ export declare const Disabled: {
         disabled: boolean;
         id?: string | undefined | undefined;
         children?: React.ReactNode;
-        className?: string | undefined | undefined;
-        width?: number | string | undefined | undefined;
         form?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         slot?: string | undefined | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined | undefined;
         pattern?: string | undefined | undefined;
+        className?: string | undefined | undefined;
+        width?: number | string | undefined | undefined;
+        color?: string | undefined | undefined;
         'data-color'?: import("@digdir/designsystemet-react/colors").Color | undefined;
         'data-size'?: import("@digdir/designsystemet-react").Size | undefined;
         defaultChecked?: boolean | undefined | undefined;
@@ -677,14 +677,14 @@ export declare const Disabled: {
         disabled: boolean;
         id?: string | undefined | undefined;
         children?: React.ReactNode;
-        className?: string | undefined | undefined;
-        width?: number | string | undefined | undefined;
         form?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         slot?: string | undefined | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined | undefined;
         pattern?: string | undefined | undefined;
+        className?: string | undefined | undefined;
+        width?: number | string | undefined | undefined;
+        color?: string | undefined | undefined;
         'data-color'?: import("@digdir/designsystemet-react/colors").Color | undefined;
         'data-size'?: import("@digdir/designsystemet-react").Size | undefined;
         defaultChecked?: boolean | undefined | undefined;

package/dist/src/components/designsystemet/Paragraph/Paragraph.d.ts

@@ -0,0 +1,10 @@
+import { ParagraphProps as DsParagraphProps } from '@digdir/designsystemet-react';
+export type ParagraphProps = DsParagraphProps & {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** @deprecated Use `fontWeight="medium"` instead. */
+    strong?: boolean;
+    weight?: 'regular' | 'medium' | 'semibold';
+    'data-color-subtle'?: boolean;
+};
+export declare const Paragraph: ({ size, strong, weight, "data-color-subtle": colorSubtle, className, children, ...props }: ParagraphProps) => React.JSX.Element;
+export default Paragraph;

package/dist/src/components/designsystemet/Paragraph/typography.paragraph.stories.d.ts

@@ -0,0 +1,24 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ size, strong, weight, "data-color-subtle": colorSubtle, className, children, ...props }: import("~/main").ParagraphProps) => React.JSX.Element;
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn, context: import("storybook/internal/csf").StoryContext) => React.JSX.Element)[];
+    tags: string[];
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+        };
+        weight: {
+            control: "select";
+            options: (string | undefined)[];
+        };
+        'data-color-subtle': {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Preview: Story;
+export declare const Examples: Story;

package/dist/src/components/designsystemet/Text/Text.d.ts

@@ -0,0 +1,13 @@
+import { type ParagraphProps } from '../Paragraph/Paragraph';
+import { HTMLAttributes } from 'react';
+export declare const colorValues: readonly ["primary", "accent", "neutral", "extra1", "extra2", "success", "danger", "info", "warning", "focus", "hav", "stein", "gress", "sol", "lyng", "himmel", "sand", "fyr", "dyphav", "skog"];
+export declare const textWrapValues: readonly ["wrap", "balance", "pretty", "nowrap"];
+export declare const textTransformValues: readonly ["none", "capitalize", "uppercase", "lowercase"];
+export declare const textAlignValues: readonly ["left", "center", "right", "justify"];
+export type TextProps = Pick<ParagraphProps, 'weight' | 'data-color-subtle' | 'data-size' | 'size'> & Omit<HTMLAttributes<HTMLSpanElement>, 'color'> & {
+    ['data-color']?: (typeof colorValues)[number];
+    wrap?: (typeof textWrapValues)[number];
+    transform?: (typeof textTransformValues)[number];
+    align?: (typeof textAlignValues)[number];
+};
+export declare const Text: ({ weight, "data-color-subtle": colorSubtle, ["data-color"]: color, wrap, transform, align, className, style, children, ...props }: TextProps) => React.JSX.Element;

package/dist/src/components/designsystemet/Text/Text.stories.d.ts

@@ -0,0 +1,89 @@
+import type { StoryFn, StoryObj } from '@storybook/react-vite';
+import { Text, TextProps } from '~/main';
+declare const meta: {
+    title: string;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    component: ({ weight, "data-color-subtle": colorSubtle, ["data-color"]: color, wrap, transform, align, className, style, children, ...props }: TextProps) => React.JSX.Element;
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn, context: import("storybook/internal/csf").StoryContext) => React.JSX.Element)[];
+    tags: string[];
+    argTypes: {
+        'data-size': {
+            control: "select";
+            options: string[];
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        weight: {
+            control: "select";
+            options: (string | undefined)[];
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        "data-color": {
+            control: "select";
+            options: ("info" | "warning" | "hav" | "stein" | "gress" | "sol" | "lyng" | "himmel" | "sand" | "fyr" | "dyphav" | "skog" | "primary" | "accent" | "neutral" | "extra1" | "extra2" | "success" | "danger" | "focus" | undefined)[];
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        'data-color-subtle': {
+            control: "boolean";
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        wrap: {
+            control: "select";
+            options: ("wrap" | "nowrap" | "balance" | "pretty" | undefined)[];
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        transform: {
+            control: "select";
+            options: ("none" | "capitalize" | "lowercase" | "uppercase" | undefined)[];
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        align: {
+            control: "select";
+            options: ("center" | "justify" | "left" | "right" | undefined)[];
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Preview: Story;
+export declare const Sizes: StoryFn<typeof Text>;
+export declare const Weights: StoryFn<typeof Text>;
+export declare const Colors: StoryFn<typeof Text>;
+export declare const TextWrap: StoryFn<typeof Text>;
+export declare const TextTransform: StoryFn<typeof Text>;
+export declare const TextAlign: StoryFn<typeof Text>;
+export declare const Examples: StoryFn<typeof Text>;

package/dist/src/components/kystverket/{DateTimePicker → DateAndTimePickers/DateTimePicker}/DateTimePicker.d.ts

@@ -1,4 +1,4 @@
-import { InputSize } from '~/utils/input/input';
+import { InputSize } from '~/main';
 export interface DateTimePickerProps {
     className?: string;
     optional?: boolean | string | undefined;
@@ -14,5 +14,6 @@ export interface DateTimePickerProps {
     maxDate?: Date;
     size?: InputSize;
     disabled?: boolean;
+    readOnly?: boolean;
 }
 export declare const DateTimePicker: ({ size, className, label, loading, required, optional, onChange, value, minDate, maxDate, ...props }: DateTimePickerProps) => React.JSX.Element;

package/dist/src/components/kystverket/{DateTimePicker → DateAndTimePickers/DateTimePicker}/DateTimePicker.stories.d.ts

@@ -1,5 +1,6 @@
 import type { StoryObj } from '@storybook/react-vite';
 import { DateTimePickerProps } from './DateTimePicker';
+import { InputSize } from '~/utils/input/input';
 declare const meta: {
     title: string;
     component: (props: DateTimePickerProps) => React.JSX.Element;
@@ -16,11 +17,17 @@ declare const meta: {
         onChange?: ((date: Date | undefined) => void) | undefined;
         minDate?: Date | undefined;
         maxDate?: Date | undefined;
-        size?: import("../../../main").InputSize | undefined;
+        size?: InputSize | undefined;
         disabled?: boolean | undefined;
+        readOnly?: boolean | undefined;
     }>) => React.JSX.Element))[];
     tags: string[];
-    argTypes: {};
+    argTypes: {
+        size: {
+            control: "select";
+            options: InputSize[];
+        };
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -35,3 +42,4 @@ export declare const WithMinDate: Story;
 export declare const WithMaxDate: Story;
 export declare const WithMinAndMaxDate: Story;
 export declare const Disabled: Story;
+export declare const ReadOnly: Story;

package/dist/src/components/kystverket/{Datepicker → DateAndTimePickers/Datepicker}/Datepicker.d.ts

@@ -3,8 +3,8 @@ export interface DatepickerProps {
     className?: string;
     loading?: boolean;
     size?: InputSize;
-    optional?: boolean | string | undefined;
-    required?: boolean | string | undefined;
+    optional?: boolean | string;
+    required?: boolean | string;
     label: string;
     description?: string;
     error?: string;
@@ -14,5 +14,6 @@ export interface DatepickerProps {
     minDate?: Date;
     maxDate?: Date;
     disabled?: boolean;
+    readOnly?: boolean;
 }
 export declare const Datepicker: ({ size, className, label, loading, required, optional, onChange, value, minDate, maxDate, ...props }: DatepickerProps) => React.JSX.Element;

package/dist/src/components/kystverket/{Datepicker → DateAndTimePickers/Datepicker}/Datepicker.stories.d.ts

@@ -1,14 +1,15 @@
 import type { StoryObj } from '@storybook/react-vite';
 import { DatepickerProps } from './Datepicker';
+import { InputSize } from '~/utils/input/input';
 declare const meta: {
     title: string;
     component: (props: DatepickerProps) => React.JSX.Element;
     decorators: (((Story: import("storybook/internal/csf").PartialStoryFn, context: import("storybook/internal/csf").StoryContext) => React.JSX.Element) | ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
         className?: string | undefined;
         loading?: boolean | undefined;
-        size?: import("../../../main").InputSize | undefined;
-        optional?: boolean | string | undefined | undefined;
-        required?: boolean | string | undefined | undefined;
+        size?: InputSize | undefined;
+        optional?: boolean | string | undefined;
+        required?: boolean | string | undefined;
         label: string;
         description?: string | undefined;
         error?: string | undefined;
@@ -18,9 +19,15 @@ declare const meta: {
         minDate?: Date | undefined;
         maxDate?: Date | undefined;
         disabled?: boolean | undefined;
+        readOnly?: boolean | undefined;
     }>) => React.JSX.Element))[];
     tags: string[];
-    argTypes: {};
+    argTypes: {
+        size: {
+            control: "select";
+            options: InputSize[];
+        };
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -35,3 +42,4 @@ export declare const WithMinDate: Story;
 export declare const WithMaxDate: Story;
 export declare const WithMinAndMaxDate: Story;
 export declare const Disabled: Story;
+export declare const ReadOnly: Story;

package/dist/src/components/kystverket/DateAndTimePickers/TimePicker/TimePicker.d.ts

@@ -0,0 +1,19 @@
+import { InputSize } from '~/main';
+export interface TimePickerProps {
+    className?: string;
+    loading?: boolean;
+    size?: InputSize;
+    optional?: boolean | string;
+    required?: boolean | string;
+    label: string;
+    description?: string;
+    error?: string;
+    onBlur?: () => void;
+    value: Date | undefined;
+    onChange?: (date: Date | undefined) => void;
+    minTime?: Date;
+    maxTime?: Date;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+export declare const TimePicker: ({ size, className, label, loading, required, optional, onChange, value, minTime, maxTime, ...props }: TimePickerProps) => React.JSX.Element;

package/dist/src/components/kystverket/DateAndTimePickers/TimePicker/TimePicker.stories.d.ts

@@ -0,0 +1,42 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { TimePickerProps } from './TimePicker';
+import { InputSize } from '~/utils/input/input';
+declare const meta: {
+    title: string;
+    component: (props: TimePickerProps) => React.JSX.Element;
+    decorators: (((Story: import("storybook/internal/csf").PartialStoryFn, context: import("storybook/internal/csf").StoryContext) => React.JSX.Element) | ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        className?: string | undefined;
+        loading?: boolean | undefined;
+        size?: InputSize | undefined;
+        optional?: boolean | string | undefined;
+        required?: boolean | string | undefined;
+        label: string;
+        description?: string | undefined;
+        error?: string | undefined;
+        onBlur?: (() => void) | undefined;
+        value: Date | undefined;
+        onChange?: ((date: Date | undefined) => void) | undefined;
+        minTime?: Date | undefined;
+        maxTime?: Date | undefined;
+        disabled?: boolean | undefined;
+        readOnly?: boolean | undefined;
+    }>) => React.JSX.Element))[];
+    tags: string[];
+    argTypes: {
+        size: {
+            control: "select";
+            options: InputSize[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithoutDescription: Story;
+export declare const WithValue: Story;
+export declare const Optional: Story;
+export declare const OptionalText: Story;
+export declare const Required: Story;
+export declare const WithError: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;

package/dist/src/components/kystverket/FileUploader/FileUploader.stories.d.ts

@@ -6,7 +6,7 @@ declare const meta: {
     component: (props: FileUploaderProps) => React.JSX.Element;
     decorators: (((Story: import("storybook/internal/csf").PartialStoryFn, context: import("storybook/internal/csf").StoryContext) => React.JSX.Element) | ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
         label: string;
-        description?: React.ReactNode | string[];
+        description?: string[] | React.ReactNode;
         error?: string | null | undefined;
         multiple?: boolean | undefined;
         files: FileInfo[];

package/dist/src/components/kystverket/Icon/icon.types.d.ts

@@ -1,2 +1,2 @@
-export declare const iconIdList: readonly ["add_box", "add_location_alt", "add_location", "add_notes", "add", "adjust", "air", "alternate_email", "anchor", "apps", "archive", "arrow_back", "arrow_downward", "arrow_forward", "arrow_right_alt", "arrow_upward", "article", "assignment", "attach_email", "attach_file", "autorenew", "backspace", "backup", "book_4", "bottom_panel_close", "bottom_panel_open", "cached", "calendar_month", "change_history", "chat_add_on", "chat_bubble", "chat", "check_circle", "check", "chevron_left", "chevron_right", "circle", "close", "cloud_alert", "cloud_done", "code_blocks", "comment", "compare_arrows", "compare", "content_copy", "conversation", "copy_all", "cycle", "dark_mode", "data_table", "delete_history", "delete", "description", "difference", "directions_boat", "directory_sync", "distance", "document_search", "domain", "download", "drafts", "edit_document", "edit_location_alt", "edit_location", "edit_square", "edit", "error", "event", "explore_nearby", "explore", "export_notes", "exposure_zero", "favorite", "file_map_stack", "file_map", "file_save", "folder_check_2", "folder_match", "folder_off", "folder_open", "folder_supervised", "folder", "format_align_center", "format_align_justify", "format_align_left", "format_align_right", "format_bold", "format_italic", "format_list_bulleted", "format_list_numbered", "format_size", "forum", "forward_to_inbox", "forward", "globe_uk", "groups", "history_off", "history_toggle_off", "history", "image", "inbox", "info_i", "info", "keep_off", "keep", "keyboard_arrow_down", "keyboard_arrow_up", "language", "layers", "left_panel_close", "left_panel_open", "light_mode", "lightbulb", "link", "location_chip", "lock", "login", "logout", "mail_shield", "mail", "manage_history", "manage_search", "map_pin_heart", "map", "mark_as_unread", "mark_chat_read", "mark_chat_unread", "mark_email_read", "mark_email_unread", "match_case", "menu_open", "menu", "mode_cool", "more_vert", "move_to_inbox", "move", "note_stack_add", "note_stack", "notification_add", "numbers", "open_in_new", "pan_zoom", "pending_actions", "person_add", "person_pin_circle", "person_pin", "person", "photo_camera", "picture_as_pdf", "pin_drop", "pin_history", "question_exchange", "radio_button_checked", "radio_button_unchecked", "redo", "reply_all", "reply", "right_panel_close", "right_panel_open", "sailing", "save", "send_and_archive", "send", "settings_input_antenna", "settings", "severe_cold", "sort", "source_environment", "splitscreen_landscape", "stacked_email", "stylus", "sync", "text_compare", "text_snippet", "timeline", "top_panel_close", "top_panel_open", "tsunami", "undo", "unknown_document", "upload", "vertical_align_bottom", "vertical_align_top", "video_library", "videocam", "view_list", "visibility", "vital_signs", "warning", "water", "waves", "zoom_in_map", "zoom_out_map"];
+export declare const iconIdList: readonly ["add_box", "add_location_alt", "add_location", "add_notes", "add", "adjust", "air", "alternate_email", "anchor", "apps", "archive", "arrow_back", "arrow_downward", "arrow_forward", "arrow_right_alt", "arrow_upward", "article", "assignment", "attach_email", "attach_file", "autorenew", "backspace", "backup", "book_4", "bottom_panel_close", "bottom_panel_open", "cached", "calendar_month", "change_history", "chat_add_on", "chat_bubble", "chat", "check_circle", "check", "chevron_left", "chevron_right", "circle", "close", "cloud_alert", "cloud_done", "code_blocks", "comment", "compare_arrows", "compare", "content_copy", "conversation", "copy_all", "cycle", "dark_mode", "data_table", "delete_history", "delete", "description", "difference", "directions_boat", "directory_sync", "distance", "document_search", "domain", "download", "drafts", "edit_document", "edit_location_alt", "edit_location", "edit_square", "edit", "error", "event", "explore_nearby", "explore", "export_notes", "exposure_zero", "favorite", "file_map_stack", "file_map", "file_save", "folder_check_2", "folder_match", "folder_off", "folder_open", "folder_supervised", "folder", "format_align_center", "format_align_justify", "format_align_left", "format_align_right", "format_bold", "format_italic", "format_list_bulleted", "format_list_numbered", "format_size", "forum", "forward_to_inbox", "forward", "globe_uk", "groups", "history_off", "history_toggle_off", "history", "image", "inbox", "info_i", "info", "keep_off", "keep", "keyboard_arrow_down", "keyboard_arrow_up", "language", "layers", "left_panel_close", "left_panel_open", "light_mode", "lightbulb", "link", "location_chip", "lock", "login", "logout", "mail_shield", "mail", "manage_history", "manage_search", "map_pin_heart", "map", "mark_as_unread", "mark_chat_read", "mark_chat_unread", "mark_email_read", "mark_email_unread", "match_case", "menu_open", "menu", "mode_cool", "more_vert", "move_to_inbox", "move", "note_stack_add", "note_stack", "notification_add", "numbers", "open_in_new", "pan_zoom", "pending_actions", "person_add", "person_pin_circle", "person_pin", "person", "photo_camera", "picture_as_pdf", "pin_drop", "pin_history", "question_exchange", "radio_button_checked", "radio_button_unchecked", "redo", "reply_all", "reply", "right_panel_close", "right_panel_open", "sailing", "save", "schedule", "send_and_archive", "send", "settings_input_antenna", "settings", "severe_cold", "sort", "source_environment", "splitscreen_landscape", "stacked_email", "stylus", "sync", "text_compare", "text_snippet", "timeline", "top_panel_close", "top_panel_open", "tsunami", "undo", "unknown_document", "upload", "vertical_align_bottom", "vertical_align_top", "video_library", "videocam", "view_list", "visibility", "vital_signs", "warning", "water", "waves", "zoom_in_map", "zoom_out_map"];
 export type IconId = (typeof iconIdList)[number];

package/dist/src/components/kystverket/SideSheet/Layout/SideSheetLayout.d.ts

@@ -3,7 +3,7 @@ import type { SideSheetLayoutProps } from '~/components/kystverket/SideSheet/Sid
 export declare const SideSheetLayoutContext: React.Context<boolean>;
 export declare function useSideSheetLayoutContext(): boolean;
 /**
- * Required wrapper when using `pinnable` or `mode="push"`.
+ * Required wrapper when using `pinnable` or `defaultPinned`.
  *
  * Renders as a flex container so that a pinned SideSheet takes a fixed width
  * and the remaining content fills the rest of the row.
@@ -15,4 +15,4 @@ export declare function useSideSheetLayoutContext(): boolean;
  * </SideSheet.Layout>
  * ```
  */
-export declare function SideSheetLayout({ children, className, style }: SideSheetLayoutProps): React.JSX.Element;
+export declare function SideSheetLayout({ children, className, style }: Readonly<SideSheetLayoutProps>): React.JSX.Element;

package/dist/src/components/kystverket/SideSheet/SideSheet.stories.d.ts

@@ -1,4 +1,5 @@
 import type { StoryFn } from '@storybook/react-vite';
+import { SideSheetButtons } from '~/components/kystverket/SideSheet/Buttons/SideSheetButtons';
 import { SideSheet } from '~/main';
 declare const _default: {
     title: string;
@@ -6,7 +7,7 @@ declare const _default: {
         ref?: React.Ref<HTMLElement>;
     }) => React.JSX.Element) & {
         Layout: typeof import("./Layout/SideSheetLayout").SideSheetLayout;
-        Buttons: typeof import("./Buttons/SideSheetButtons").SideSheetButtons;
+        Buttons: typeof SideSheetButtons;
     };
     tags: string[];
     parameters: {
@@ -15,8 +16,33 @@ declare const _default: {
             source: {
                 type: string;
             };
+            description: {
+                component: string;
+            };
         };
     };
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        open?: boolean | undefined;
+        onClose?: (() => void) | undefined;
+        placement?: import("~/main").SideSheetPlacement | undefined;
+        size?: import("~/main").SideSheetSize | undefined;
+        pinnable?: boolean | undefined;
+        pinned?: boolean | undefined;
+        onPinnedChange?: ((pinned: boolean) => void) | undefined;
+        defaultPinned?: boolean | undefined;
+        backdrop?: boolean | undefined;
+        title?: React.ReactNode;
+        showCloseButton?: boolean | undefined;
+        showBackButton?: boolean | undefined;
+        onBack?: (() => void) | undefined;
+        headerAction?: React.ReactNode;
+        headerDivider?: boolean | undefined;
+        footerDivider?: boolean | undefined;
+        children?: React.ReactNode;
+        className?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        ref?: React.Ref<HTMLElement> | undefined;
+    }>) => React.JSX.Element)[];
 };
 export default _default;
 export declare const Default: StoryFn<typeof SideSheet>;
@@ -32,3 +58,4 @@ export declare const PinnedWithContent: StoryFn<typeof SideSheet>;
 export declare const NoBackdrop: StoryFn<typeof SideSheet>;
 export declare const TwoSheets: StoryFn<typeof SideSheet>;
 export declare const WithTabs: StoryFn<typeof SideSheet>;
+export declare const WithTopbarAndFooter: StoryFn<typeof SideSheet>;

package/dist/src/components/kystverket/SideSheet/SideSheet.types.d.ts

@@ -1,22 +1,11 @@
 import { CSSProperties, ReactNode } from 'react';
 export type SideSheetSize = 'sm' | 'md' | 'lg' | '33%' | '40%' | '50%' | '66%';
 export type SideSheetPlacement = 'left' | 'right';
-/**
- * - `overlay`: sheet slides over content (default). Can be pinned by the user via `pinnable`.
- * - `push`: sheet starts pinned and reflowing content inside `<SideSheet.Layout>`.
- */
-export type SideSheetMode = 'overlay' | 'push';
-export type SideSheetHeadingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface SideSheetProps {
     open?: boolean;
     onClose?: () => void;
     placement?: SideSheetPlacement;
     size?: SideSheetSize;
-    /**
-     * overlay: sheet floats over content (default).
-     * push: sheet starts pinned/expanded, reflowing content inside `<SideSheet.Layout>`.
-     */
-    mode?: SideSheetMode;
     /**
      * Show a pin button in the header that lets the user toggle overlay/push.
      * Default: `false`.
@@ -30,8 +19,9 @@ export interface SideSheetProps {
     /** Called when the user toggles the pin button. */
     onPinnedChange?: (pinned: boolean) => void;
     /**
-     * Default pinned state for uncontrolled usage. Defaults to `true` when `mode='push'`,
-     * `false` otherwise.
+     * Default pinned state for uncontrolled usage. `true` starts the sheet pinned/expanded,
+     * reflowing content inside `<SideSheet.Layout>` (push mode). Default: `false` (overlay).
+     * BEWARE: On phone it always starts unpinned regardless of this.
      */
     defaultPinned?: boolean;
     /**
@@ -39,10 +29,11 @@ export interface SideSheetProps {
      * Default: `true` (only applies in overlay/non-pinned state).
      */
     backdrop?: boolean;
-    /** Sheet heading text. */
+    /**
+     * Sheet heading. pass a string, or your own `<Heading>` (e.g.
+     * `<Heading data-size="xs">Title</Heading>`) to control its size and level.
+     */
     title?: ReactNode;
-    /** Font size of the heading. Default: `'xs'`. */
-    headingSize?: SideSheetHeadingSize;
     /** Show the close (×) button. Default: `true`. */
     showCloseButton?: boolean;
     /** Show a back (←) button in the header. Default: `false`. */

package/dist/src/components/kystverket/Typography/typography.accent.stories.d.ts

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ strong, size, className, children }: import("./typography").AccentTypographyProps) => React.JSX.Element;
+    component: ({ strong, weight, size, className, children }: import("./typography").AccentTypographyProps) => React.JSX.Element;
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn, context: import("storybook/internal/csf").StoryContext) => React.JSX.Element)[];
     tags: string[];
     argTypes: {};

package/dist/src/components/kystverket/Typography/typography.d.ts

@@ -1,26 +1,29 @@
 import { ReactNode } from 'react';
+import { TypographyWeight } from './typography.util';
+import { ParagraphProps } from '~/components/designsystemet/Paragraph/Paragraph';
 export interface TypographyProps {
     className?: string;
     children?: ReactNode | undefined;
 }
-export type BodyTypographyProps = TypographyProps & {
-    size?: 'sm' | 'md' | 'lg' | 'xl';
-    strong?: boolean;
-    inline?: boolean;
-};
+export type BodyTypographyProps = ParagraphProps;
 export type AccentTypographyProps = TypographyProps & {
     size?: 'sm' | 'md';
+    /** @deprecated Use `weight="medium"` instead. */
     strong?: boolean;
+    weight?: TypographyWeight;
 };
 export type LabelTypographyProps = TypographyProps & {
     size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** @deprecated Use `weight="medium"` instead. */
     strong?: boolean;
+    weight?: TypographyWeight;
     inline?: boolean;
 };
-export declare const Body: ({ inline, strong, size, className, children }: BodyTypographyProps) => React.JSX.Element;
-export declare const Accent: ({ strong, size, className, children }: AccentTypographyProps) => React.JSX.Element;
+/** @deprecated Replaced by Paragraph, and extended props in Text component*/
+export declare const Body: ({ size, strong, weight, "data-color-subtle": colorSubtle, className, children, ...props }: ParagraphProps) => React.JSX.Element;
+export declare const Accent: ({ strong, weight, size, className, children }: AccentTypographyProps) => React.JSX.Element;
 export declare const Typography: {
-    Body: ({ inline, strong, size, className, children }: BodyTypographyProps) => React.JSX.Element;
-    Accent: ({ strong, size, className, children }: AccentTypographyProps) => React.JSX.Element;
-    Label: ({ strong, size, className, children, inline }: LabelTypographyProps) => React.JSX.Element;
+    Body: ({ size, strong, weight, "data-color-subtle": colorSubtle, className, children, ...props }: ParagraphProps) => React.JSX.Element;
+    Accent: ({ strong, weight, size, className, children }: AccentTypographyProps) => React.JSX.Element;
+    Label: ({ strong, weight, size, className, children, inline }: LabelTypographyProps) => React.JSX.Element;
 };

package/dist/src/components/kystverket/Typography/typography.label.stories.d.ts

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ strong, size, className, children, inline }: import("./typography").LabelTypographyProps) => React.JSX.Element;
+    component: ({ strong, weight, size, className, children, inline }: import("./typography").LabelTypographyProps) => React.JSX.Element;
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn, context: import("storybook/internal/csf").StoryContext) => React.JSX.Element)[];
     tags: string[];
     argTypes: {};

package/dist/src/components/kystverket/Typography/typography.util.d.ts

@@ -1,14 +1,17 @@
 export type TypographyPrefix = 'body' | 'accent' | 'label';
 export type AllSizes = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export type TypographyColor = 'accent' | 'neutral';
+export type TypographyWeight = 'regular' | 'medium' | 'semibold';
 type BuildTypographyProps = {
     type: TypographyPrefix;
     size?: AllSizes;
+    /** @deprecated Use `weight="medium"` instead. */
     strong?: boolean;
+    weight?: TypographyWeight;
     inline?: boolean;
     color?: TypographyColor;
     margin?: boolean;
     className?: string;
 };
-export declare const buildTypographyClasses: ({ type, size, strong, inline, className, }: BuildTypographyProps) => string;
+export declare const buildTypographyClasses: ({ type, size, strong, weight, inline, className, }: BuildTypographyProps) => string;
 export {};

package/dist/src/hooks/useBodyScrollLock.d.ts

@@ -0,0 +1 @@
+export declare function useBodyScrollLock(locked: boolean): void;