@postenbring/hedwig-react 0.0.66 → 0.0.68

package/dist/_tsup-dts-rollup.d.mts

@@ -22,7 +22,7 @@ import { default as React_3 } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
-import type { SelectHTMLAttributes } from 'react';
+import { SelectHTMLAttributes } from 'react';
 import type { StoryObj } from '@storybook/react';
 import type { TextareaHTMLAttributes } from 'react';
 
@@ -130,15 +130,15 @@ export { AccordionProps as AccordionProps_alias_3 }
 
 export declare const AreYouSureDialog: Story_3;
 
-export declare const Article: Story_24;
+export declare const Article: Story_25;
 
-export declare const ArticleContent: Story_26;
+export declare const ArticleContent: Story_27;
 
 export declare const AsALink: Story_5;
 
-export declare const AsAReadMore: Story_21;
+export declare const AsAReadMore: Story_22;
 
-export declare const Attention: Story_20;
+export declare const Attention: Story_21;
 
 /**
  * Helper component to animate the height of the children when they change
@@ -209,7 +209,7 @@ export { BaseButton as BaseButton_alias_3 }
 
 export declare const BoundedCheckbox: Story_8;
 
-export declare const BoundedRadiobutton: Story_12;
+export declare const BoundedRadiobutton: Story_13;
 
 export declare const Box_alias_2: OverridableComponent<BoxProps, HTMLDivElement>;
 
@@ -315,9 +315,9 @@ export { BreadcrumbsProps as BreadcrumbsProps_alias_1 }
 export { BreadcrumbsProps as BreadcrumbsProps_alias_2 }
 export { BreadcrumbsProps as BreadcrumbsProps_alias_3 }
 
-declare type Breakpoints = "xsmall" | "small" | "medium" | "large" | "xlarge";
+declare type Breakpoints = "initial" | "small" | "medium" | "large" | "xlarge";
 
-export declare const ButtonAsLink: Story_17;
+export declare const ButtonAsLink: Story_18;
 
 declare type ButtonProps = ButtonPropsInternal & ({
     /**
@@ -546,7 +546,7 @@ export { CheckboxProps as CheckboxProps_alias_4 }
 
 export declare function CloseIcon(): JSX_2.Element;
 
-export declare const CompleteShowMoreShowLess: Story_23;
+export declare const CompleteShowMoreShowLess: Story_24;
 
 /**
  * Container is a layout component that is used to wrap content.
@@ -581,93 +581,137 @@ export { DarkBadge as DarkBadge_alias_1 }
 export { DarkBadge as DarkBadge_alias_2 }
 export { DarkBadge as DarkBadge_alias_3 }
 
-export declare const Darkmode: Story_26;
+export declare const Darkmode: Story_27;
 
-export declare const DarkmodeSmall: Story_26;
+export declare const DarkmodeSmall: Story_27;
+
+/**
+ * A basic implementation of a date picker
+ *
+ * This date picker is an implementation of native date picker, as you get
+ * with `<input type="date" />`, where the input field is dressed in Hedwig styling.
+ *
+ * Due to accessibility concerns you will only see the appropriate Hedwig calendar
+ * icon in Chrome. Firefox will show built in icon and Safari will show no icon.
+ * Not tested in Edge.
+ */
+declare const DatePicker: ForwardRefExoticComponent<Omit<InputGroupProps & InputHTMLAttributes<HTMLInputElement>, "children" | "type"> & {
+/**
+* Accessible title for the calendar button
+*
+* This button currently only shows in Chrome.
+*
+* @defaultValue "Åpne kalender"
+*/
+calendarButtonTitle?: string | undefined;
+} & RefAttributes<HTMLInputElement>>;
+export { DatePicker }
+export { DatePicker as DatePicker_alias_1 }
+export { DatePicker as DatePicker_alias_2 }
+export { DatePicker as DatePicker_alias_3 }
+export { DatePicker as DatePicker_alias_4 }
+
+declare type DatePickerProps = Omit<InputGroupProps & InputHTMLAttributes<HTMLInputElement>, "children" | "type"> & {
+    /**
+     * Accessible title for the calendar button
+     *
+     * This button currently only shows in Chrome.
+     *
+     * @defaultValue "Åpne kalender"
+     */
+    calendarButtonTitle?: string;
+};
+export { DatePickerProps }
+export { DatePickerProps as DatePickerProps_alias_1 }
+export { DatePickerProps as DatePickerProps_alias_2 }
+export { DatePickerProps as DatePickerProps_alias_3 }
+export { DatePickerProps as DatePickerProps_alias_4 }
 
 export declare const Default: Story_4;
 
 export declare const default_alias: Options | Options[] | ((overrideOptions: Options) => Options | Options[] | Promise<Options | Options[]>);
 
-export declare const Default_alias_1: Story_9;
+export declare const Default_alias_1: Story_10;
 
 export declare const default_alias_1: Meta<typeof AccordionComponent>;
 
-export declare const default_alias_10: Meta<typeof Fieldset>;
+export declare const default_alias_10: Meta<typeof ErrorMessage>;
 
-export declare const default_alias_11: Meta<typeof Input>;
+export declare const default_alias_11: Meta<typeof Fieldset>;
 
-export declare const default_alias_12: Meta<typeof Radiobutton>;
+export declare const default_alias_12: Meta<typeof Input>;
 
-export declare const default_alias_13: Meta<typeof RadioGroup>;
+export declare const default_alias_13: Meta<typeof Radiobutton>;
 
-export declare const default_alias_14: Meta<typeof Select>;
+export declare const default_alias_14: Meta<typeof RadioGroup>;
 
-export declare const default_alias_15: Meta<typeof Textarea>;
+export declare const default_alias_15: Meta<typeof Select>;
 
-export declare const default_alias_16: Meta<typeof Container>;
+export declare const default_alias_16: Meta<typeof Textarea>;
 
-export declare const default_alias_17: Meta<typeof Link>;
+export declare const default_alias_17: Meta<typeof Container>;
 
-export declare const default_alias_18: Meta<typeof LinkList>;
+export declare const default_alias_18: Meta<typeof Link>;
 
-export declare const default_alias_19: Meta<typeof UnorderedList>;
+export declare const default_alias_19: Meta<typeof LinkList>;
 
-export declare const Default_alias_2: Story_10;
+export declare const Default_alias_2: Story_11;
 
 export declare const default_alias_2: Meta<typeof Badge>;
 
-export declare const default_alias_20: Meta<typeof MessageComponent>;
+export declare const default_alias_20: Meta<typeof UnorderedList>;
 
-export declare const default_alias_21: Meta<typeof ModalComponent>;
+export declare const default_alias_21: Meta<typeof MessageComponent>;
 
-export declare const default_alias_22: Meta<typeof NavbarComponent>;
+export declare const default_alias_22: Meta<typeof ModalComponent>;
 
-export declare const default_alias_23: Meta<typeof ShowMoreButton>;
+export declare const default_alias_23: Meta<typeof NavbarComponent>;
 
-export declare const default_alias_24: Meta<typeof Skeleton>;
+export declare const default_alias_24: Meta<typeof ShowMoreButton>;
 
-export declare const default_alias_25: Meta<typeof StepIndicator>;
+export declare const default_alias_25: Meta<typeof Skeleton>;
 
-export declare const default_alias_26: Meta<typeof StyledHtml>;
+export declare const default_alias_26: Meta<typeof StepIndicator>;
 
-export declare const default_alias_27: Meta<typeof TabsComponent>;
+export declare const default_alias_27: Meta<typeof StyledHtml>;
 
-export declare const default_alias_28: Meta<typeof Text_2>;
+export declare const default_alias_28: Meta<typeof TabsComponent>;
 
-export declare const default_alias_29: Meta<typeof WarningBanner>;
+export declare const default_alias_29: Meta<typeof Text_2>;
 
-export declare const Default_alias_3: Story_14;
+export declare const Default_alias_3: Story_15;
 
 export declare const default_alias_3: Meta<typeof BoxComponent>;
 
-export declare const Default_alias_4: Story_16;
+export declare const default_alias_30: Meta<typeof WarningBanner>;
+
+export declare const Default_alias_4: Story_17;
 
 export declare const default_alias_4: Meta<typeof Breadcrumbs>;
 
-export declare const Default_alias_5: Story_22;
+export declare const Default_alias_5: Story_23;
 
 export declare const default_alias_5: Meta<typeof PrimaryButton>;
 
-export declare const Default_alias_6: Story_24;
+export declare const Default_alias_6: Story_25;
 
 export declare const default_alias_6: Meta<typeof CardComponent>;
 
-export declare const Default_alias_7: Story_25;
+export declare const Default_alias_7: Story_26;
 
 export declare const default_alias_7: Meta<typeof DescriptionList>;
 
-export declare const Default_alias_8: Story_26;
+export declare const Default_alias_8: Story_27;
 
 export declare const default_alias_8: Meta<typeof Checkbox>;
 
-export declare const Default_alias_9: Story_28;
+export declare const Default_alias_9: Story_29;
 
-export declare const default_alias_9: Meta<typeof ErrorMessage>;
+export declare const default_alias_9: Meta<typeof DatePicker>;
 
 export declare const DefaultOpen: Story;
 
-export declare const DefaultWithError: Story_14;
+export declare const DefaultWithError: Story_15;
 
 /**
  * Uses the HTML5 `<dl>` element
@@ -727,9 +771,9 @@ export declare const DetailedContentCheckbox: Story_8;
 
 export declare const DetailedContentCheckboxWithBoundingBox: Story_8;
 
-export declare const DetailedContentRadiobutton: Story_12;
+export declare const DetailedContentRadiobutton: Story_13;
 
-export declare const DetailedContentRadiobuttonWithBoundingBox: Story_12;
+export declare const DetailedContentRadiobuttonWithBoundingBox: Story_13;
 
 declare interface DimensionsFromWidthAndHeight {
     height?: number | string;
@@ -754,7 +798,7 @@ export { ErrorMessageProps as ErrorMessageProps_alias_2 }
 export { ErrorMessageProps as ErrorMessageProps_alias_3 }
 export { ErrorMessageProps as ErrorMessageProps_alias_4 }
 
-export declare const Expandable: Story_29;
+export declare const Expandable: Story_30;
 
 declare const Fieldset: ForwardRefExoticComponent<FieldsetProps & RefAttributes<HTMLFieldSetElement>>;
 export { Fieldset }
@@ -763,9 +807,9 @@ export { Fieldset as Fieldset_alias_2 }
 export { Fieldset as Fieldset_alias_3 }
 export { Fieldset as Fieldset_alias_4 }
 
-export declare const FieldsetErrorCheckboxes: Story_10;
+export declare const FieldsetErrorCheckboxes: Story_11;
 
-export declare const FieldsetErrorRadiobuttons: Story_10;
+export declare const FieldsetErrorRadiobuttons: Story_11;
 
 declare interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
     className?: string;
@@ -880,12 +924,120 @@ export { FooterProps as FooterProps_alias_1 }
 export { FooterProps as FooterProps_alias_2 }
 export { FooterProps as FooterProps_alias_3 }
 
-export declare const FormWithErrorsOnSubmit: Story_11;
+export declare const FormWithErrorsOnSubmit: Story_12;
 
 export declare function getResponsiveProps<T>(variable: `--hds-${string}`, inputValues?: ResponsiveProp<T>, valueTransformer?: (value: T) => string): Record<string, string>;
 
 export declare function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes): string;
 
+/**
+ * 🚧 A simple opionated abstraction over CSS Grid.
+ *
+ * The grid is always a 12 column grid.
+ *
+ * example
+ * ```tsx
+ * <Grid gap="12-16" span={{ small: 6 }}>
+ *   <div>6/12</div>
+ *   <div>6/12</div>
+ *   <Grid.Item span={{ small: 12 }}>12/12</Grid.Item>
+ *   <div>6/12</div>
+ *   <div>6/12</div>
+ * </Grid>
+ * ```
+ */
+export declare const Grid_alias_3: ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>>;
+
+declare const GridComponent: ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>> & {
+    Item: typeof GridItem;
+};
+export { GridComponent as Grid }
+export { GridComponent as Grid_alias_1 }
+export { GridComponent as Grid_alias_2 }
+export { GridComponent as Grid_alias_4 }
+
+/**
+ * 🚧 Grid.Item
+ *
+ * Use as the direct child of a `Grid` to override `span` and `center` for individual items.
+ */
+declare const GridItem: ForwardRefExoticComponent<GridItemProps & RefAttributes<HTMLDivElement>>;
+export { GridItem }
+export { GridItem as GridItem_alias_1 }
+export { GridItem as GridItem_alias_2 }
+export { GridItem as GridItem_alias_3 }
+export { GridItem as GridItem_alias_4 }
+
+declare interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * Column span for the grid item
+     *
+     * `default` is `12`
+     */
+    span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;
+    /**
+     * Center the grid item horizontally
+     *
+     * Offsets the start position of the grid item relative to it's span so that it appears centered.
+     *
+     * assumes a span of 2, 4, 6, 8, or 10
+     *
+     * a span of `12` is 100% width and centering has no effect
+     *
+     * `default` is `false`
+     */
+    center?: ResponsiveProp<boolean>;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+}
+export { GridItemProps }
+export { GridItemProps as GridItemProps_alias_1 }
+export { GridItemProps as GridItemProps_alias_2 }
+export { GridItemProps as GridItemProps_alias_3 }
+export { GridItemProps as GridItemProps_alias_4 }
+
+declare interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * Space between grid items. Both horizontal and vertical.
+     *
+     * Use the responsive shorthand `12-16` to jump a level at the `large` breakpoint.
+     *
+     * Or use the responsive object `{ initial: 40, large: 64 }` to set different values at different breakpoints.
+     */
+    gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;
+    /**
+     * Column span for the grid items
+     *
+     * `default` is `12`
+     */
+    span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;
+    /**
+     * Center grid items horizontally
+     *
+     * Offsets the start position of the grid items relative to their span so that it appears centered.
+     *
+     * assumes a span of 2, 4, 6, 8, or 10
+     *
+     * a span of `12` is 100% width and centering has no effect
+     *
+     * `default` is `false`
+     */
+    center?: ResponsiveProp<boolean>;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+}
+export { GridProps }
+export { GridProps as GridProps_alias_1 }
+export { GridProps as GridProps_alias_2 }
+export { GridProps as GridProps_alias_3 }
+export { GridProps as GridProps_alias_4 }
+
 declare interface HeadingProps {
     variant: "h1-display" | "h1" | "h2" | "h3" | "h3-title";
     as: React_3.ElementType;
@@ -893,11 +1045,11 @@ declare interface HeadingProps {
 
 export declare const Horizontal: Story_7;
 
-export declare const Horizontal_alias_1: Story_27;
+export declare const Horizontal_alias_1: Story_28;
 
 export declare const HorizontalLongContent: Story_7;
 
-export declare const HorizontalWithMiddleSelected: Story_27;
+export declare const HorizontalWithMiddleSelected: Story_28;
 
 /**
  * 🚨 WORK IN PROGRESS 🚨
@@ -943,7 +1095,12 @@ declare interface InputGroupProps {
     label: ReactNode;
     disabled?: boolean;
     readOnly?: boolean;
-    children: ReactNode;
+    /**
+     * `children` must be either a single input element or a render function.
+     *
+     * If you use a render function, make sure you spread the input props to the appropriate element.
+     */
+    children: Exclude<ReactNode, Iterable<ReactNode>> | ((inputProps: InputProps_2) => ReactNode);
 }
 export { InputGroupProps }
 export { InputGroupProps as InputGroupProps_alias_1 }
@@ -955,15 +1112,22 @@ export { InputProps as InputProps_alias_2 }
 export { InputProps as InputProps_alias_3 }
 export { InputProps as InputProps_alias_4 }
 
-export declare const Inverted: Story_17;
+declare interface InputProps_2 {
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean;
+    id?: string;
+    className?: string;
+}
+
+export declare const Inverted: Story_18;
 
 export declare const JustACheckbox: Story_8;
 
-export declare const JustARadiobutton: Story_12;
+export declare const JustARadiobutton: Story_13;
 
 export declare const JustOneItem: Story;
 
-export declare const LargeLegend: Story_10;
+export declare const LargeLegend: Story_11;
 
 export declare const Lighter: Story_2;
 
@@ -977,7 +1141,7 @@ export { Link as Link_alias_1 }
 export { Link as Link_alias_2 }
 export { Link as Link_alias_3 }
 
-export declare const LinkInDescription: Story_29;
+export declare const LinkInDescription: Story_30;
 
 /**
  * Show a list of links
@@ -1002,7 +1166,7 @@ export { LinkListProps as LinkListProps_alias_1 }
 export { LinkListProps as LinkListProps_alias_2 }
 export { LinkListProps as LinkListProps_alias_3 }
 
-export declare const LinkListStory: Story_18;
+export declare const LinkListStory: Story_19;
 
 declare interface LinkProps extends React_2.AnchorHTMLAttributes<HTMLAnchorElement> {
     /**
@@ -1032,9 +1196,9 @@ export { ListProps as ListProps_alias_1 }
 export { ListProps as ListProps_alias_2 }
 export { ListProps as ListProps_alias_3 }
 
-export declare const LoadingCards: Story_24;
+export declare const LoadingCards: Story_25;
 
-export declare const LongDescriptionOnly: Story_20;
+export declare const LongDescriptionOnly: Story_21;
 
 export declare const Main: {
     render: (args: ModalProps & RefAttributes<HTMLDialogElement>) => JSX_2.Element;
@@ -1057,7 +1221,11 @@ export { MessageComponent as Message }
 export { MessageComponent as Message_alias_1 }
 export { MessageComponent as Message_alias_2 }
 
-export declare const MessageDescription: OverridableComponent<object, HTMLParagraphElement>;
+declare const MessageDescription: OverridableComponent<object, HTMLParagraphElement>;
+export { MessageDescription }
+export { MessageDescription as MessageDescription_alias_1 }
+export { MessageDescription as MessageDescription_alias_2 }
+export { MessageDescription as MessageDescription_alias_3 }
 
 export declare type MessageProps = ({
     variant?: "success" | "attention" | "warning";
@@ -1069,9 +1237,13 @@ export declare type MessageProps = ({
     iconClassName?: string;
 }) & Omit<BoxProps, "variant">;
 
-export declare const MessageTitle: OverridableComponent<object, HTMLParagraphElement>;
+declare const MessageTitle: OverridableComponent<object, HTMLParagraphElement>;
+export { MessageTitle }
+export { MessageTitle as MessageTitle_alias_1 }
+export { MessageTitle as MessageTitle_alias_2 }
+export { MessageTitle as MessageTitle_alias_3 }
 
-export declare const MinAndMax: Story_28;
+export declare const MinAndMax: Story_29;
 
 /**
  * A modal dialog is a window that forces the user to interact with it before they can return to other parts of the application.
@@ -1152,7 +1324,7 @@ export { ModalProps as ModalProps_alias_1 }
 export { ModalProps as ModalProps_alias_2 }
 export { ModalProps as ModalProps_alias_3 }
 
-export declare const MuchContentBelow: Story_21;
+export declare const MuchContentBelow: Story_22;
 
 export declare const MultipleItems: Story;
 
@@ -1305,13 +1477,13 @@ export { NavbarProps as NavbarProps_alias_1 }
 export { NavbarProps as NavbarProps_alias_2 }
 export { NavbarProps as NavbarProps_alias_3 }
 
-export declare const NestedLists: Story_19;
+export declare const NestedLists: Story_20;
 
-export declare const Neutral: Story_20;
+export declare const Neutral: Story_21;
 
 export declare const NoIndent: Story;
 
-export declare const NoUnderline: Story_17;
+export declare const NoUnderline: Story_18;
 
 /**
  * An ordered list of simple items
@@ -1328,7 +1500,7 @@ export { OrderedList as OrderedList_alias_1 }
 export { OrderedList as OrderedList_alias_2 }
 export { OrderedList as OrderedList_alias_3 }
 
-export declare const OrderedListStory: Story_19;
+export declare const OrderedListStory: Story_20;
 
 /**
  * OverridableComponent makes the `as` prop available,
@@ -1356,21 +1528,23 @@ export declare const PlainCheckboxesWithError: Story_8;
 
 export declare const PlainCheckboxeWithError: Story_8;
 
-export declare const PlainInput: Story_11;
+export declare const PlainDatePicker: Story_9;
+
+export declare const PlainInput: Story_12;
 
-export declare const PlainInputWithError: Story_11;
+export declare const PlainInputWithError: Story_12;
 
-export declare const PlainRadiobuttons: Story_12;
+export declare const PlainRadiobuttons: Story_13;
 
-export declare const PlainRadiobuttonsWithError: Story_12;
+export declare const PlainRadiobuttonsWithError: Story_13;
 
-export declare const PlainRadioGroup: Story_13;
+export declare const PlainRadioGroup: Story_14;
 
-export declare const PlainTextarea: Story_15;
+export declare const PlainTextarea: Story_16;
 
-export declare const PlainTextareaWithError: Story_15;
+export declare const PlainTextareaWithError: Story_16;
 
-export declare const PostenBringSideBySide: Story_28;
+export declare const PostenBringSideBySide: Story_29;
 
 export declare const Primary: Story_5;
 
@@ -1447,13 +1621,13 @@ export { RadioGroupProps as RadioGroupProps_alias_2 }
 export { RadioGroupProps as RadioGroupProps_alias_3 }
 export { RadioGroupProps as RadioGroupProps_alias_4 }
 
-export declare const ReadonlyInput: Story_11;
+export declare const ReadonlyInput: Story_12;
 
-export declare const ReadonlyInputWithError: Story_11;
+export declare const ReadonlyInputWithError: Story_12;
 
-export declare const ReadonlyTextarea: Story_15;
+export declare const ReadonlyTextarea: Story_16;
 
-export declare const ReadonlyTextareaWithError: Story_15;
+export declare const ReadonlyTextareaWithError: Story_16;
 
 export declare type ResponsiveProp<T> = T | ResponsiveValues<T>;
 
@@ -1488,14 +1662,18 @@ export { SecondaryButton as SecondaryButton_alias_3 }
 
 export declare const SecondaryOutline: Story_5;
 
-declare const Select: ForwardRefExoticComponent<SelectProps & RefAttributes<HTMLSelectElement>>;
+declare const Select: ForwardRefExoticComponent<Omit<InputGroupProps & SelectHTMLAttributes<HTMLSelectElement>, "children" | "readOnly"> & {
+children: ReactNode;
+} & RefAttributes<HTMLSelectElement>>;
 export { Select }
 export { Select as Select_alias_1 }
 export { Select as Select_alias_2 }
 export { Select as Select_alias_3 }
 export { Select as Select_alias_4 }
 
-declare type SelectProps = Omit<InputGroupProps & SelectHTMLAttributes<HTMLSelectElement>, "readOnly">;
+declare type SelectProps = Omit<InputGroupProps & SelectHTMLAttributes<HTMLSelectElement>, "readOnly" | "children"> & {
+    children: ReactNode;
+};
 export { SelectProps }
 export { SelectProps as SelectProps_alias_1 }
 export { SelectProps as SelectProps_alias_2 }
@@ -1506,7 +1684,7 @@ export declare const ShareParcelModal: {
     render: (args: ModalProps & RefAttributes<HTMLDialogElement>) => JSX_2.Element;
 };
 
-export declare const ShowMore: Story_23;
+export declare const ShowMore: Story_24;
 
 /**
  * Simple button for triggering more content.
@@ -1551,11 +1729,11 @@ export { ShowMoreProps as ShowMoreProps_alias_1 }
 export { ShowMoreProps as ShowMoreProps_alias_2 }
 export { ShowMoreProps as ShowMoreProps_alias_3 }
 
-export declare const ShowMoreShowLess: Story_23;
+export declare const ShowMoreShowLess: Story_24;
 
-export declare const ShowMoreShowLessExpanded: Story_23;
+export declare const ShowMoreShowLessExpanded: Story_24;
 
-export declare const SimpleShowMoreShowLess: Story_23;
+export declare const SimpleShowMoreShowLess: Story_24;
 
 export declare const SingleAccordion: Story;
 
@@ -1618,11 +1796,11 @@ declare interface SkeletonPropsInner extends React_2.AnchorHTMLAttributes<HTMLDi
     children?: React_2.ReactNode;
 }
 
-export declare const Slim: Story_16;
+export declare const Slim: Story_17;
 
-export declare const Small: Story_26;
+export declare const Small: Story_27;
 
-export declare const Solid: Story_17;
+export declare const Solid: Story_18;
 
 export declare type SpacingSizes = keyof typeof spacingSizes;
 
@@ -1703,50 +1881,52 @@ declare interface StepIndicatorProps extends React.HTMLAttributes<HTMLDivElement
 
 declare type Story = StoryObj<typeof AccordionComponent>;
 
-declare type Story_10 = StoryObj<typeof Fieldset>;
+declare type Story_10 = StoryObj<typeof ErrorMessage>;
 
-declare type Story_11 = StoryObj<typeof Input>;
+declare type Story_11 = StoryObj<typeof Fieldset>;
 
-declare type Story_12 = StoryObj<typeof Radiobutton>;
+declare type Story_12 = StoryObj<typeof Input>;
 
-declare type Story_13 = StoryObj<typeof RadioGroup>;
+declare type Story_13 = StoryObj<typeof Radiobutton>;
 
-declare type Story_14 = StoryObj<typeof Select>;
+declare type Story_14 = StoryObj<typeof RadioGroup>;
 
-declare type Story_15 = StoryObj<typeof Textarea>;
+declare type Story_15 = StoryObj<typeof Select>;
 
-declare type Story_16 = StoryObj<typeof Container>;
+declare type Story_16 = StoryObj<typeof Textarea>;
 
-declare type Story_17 = StoryObj<typeof Link>;
+declare type Story_17 = StoryObj<typeof Container>;
 
-declare type Story_18 = StoryObj<typeof LinkList>;
+declare type Story_18 = StoryObj<typeof Link>;
 
-declare type Story_19 = StoryObj<typeof UnorderedList>;
+declare type Story_19 = StoryObj<typeof LinkList>;
 
 declare type Story_2 = StoryObj<typeof Badge>;
 
-declare type Story_20 = StoryObj<typeof MessageComponent>;
+declare type Story_20 = StoryObj<typeof UnorderedList>;
 
-declare type Story_21 = StoryObj<typeof ModalComponent>;
+declare type Story_21 = StoryObj<typeof MessageComponent>;
 
-declare type Story_22 = StoryObj<typeof NavbarComponent>;
+declare type Story_22 = StoryObj<typeof ModalComponent>;
 
-declare type Story_23 = StoryObj<typeof ShowMoreButton>;
+declare type Story_23 = StoryObj<typeof NavbarComponent>;
 
-declare type Story_24 = StoryObj<typeof Skeleton>;
+declare type Story_24 = StoryObj<typeof ShowMoreButton>;
 
-declare type Story_25 = StoryObj<typeof StepIndicator>;
+declare type Story_25 = StoryObj<typeof Skeleton>;
 
-declare type Story_26 = StoryObj<typeof StyledHtml>;
+declare type Story_26 = StoryObj<typeof StepIndicator>;
 
-declare type Story_27 = StoryObj<typeof TabsComponent>;
+declare type Story_27 = StoryObj<typeof StyledHtml>;
 
-declare type Story_28 = StoryObj<typeof Text_2>;
+declare type Story_28 = StoryObj<typeof TabsComponent>;
 
-declare type Story_29 = StoryObj<typeof WarningBanner>;
+declare type Story_29 = StoryObj<typeof Text_2>;
 
 declare type Story_3 = StoryObj<typeof BoxComponent>;
 
+declare type Story_30 = StoryObj<typeof WarningBanner>;
+
 declare type Story_4 = StoryObj<typeof Breadcrumbs>;
 
 declare type Story_5 = StoryObj<typeof PrimaryButton>;
@@ -1757,7 +1937,7 @@ declare type Story_7 = StoryObj<typeof DescriptionList>;
 
 declare type Story_8 = StoryObj<typeof Checkbox>;
 
-declare type Story_9 = StoryObj<typeof ErrorMessage>;
+declare type Story_9 = StoryObj<typeof DatePicker>;
 
 /**
  * A component for displaying dynamic content that you want to apply hedwig styling to.
@@ -1796,7 +1976,7 @@ export { StyledHtmlProps as StyledHtmlProps_alias_1 }
 export { StyledHtmlProps as StyledHtmlProps_alias_2 }
 export { StyledHtmlProps as StyledHtmlProps_alias_3 }
 
-export declare const Success: Story_20;
+export declare const Success: Story_21;
 
 declare interface TabContentsProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactElement<TabsContentProps> | ReactElement<TabsContentProps>[];
@@ -2112,11 +2292,11 @@ export { TextTechnicalTitle }
 export { TextTechnicalTitle as TextTechnicalTitle_alias_1 }
 export { TextTechnicalTitle as TextTechnicalTitle_alias_2 }
 
-export declare const Title: Story_25;
+export declare const Title: Story_26;
 
-export declare const TitleOnly: Story_20;
+export declare const TitleOnly: Story_21;
 
-export declare const TitleOnly_alias_1: Story_29;
+export declare const TitleOnly_alias_1: Story_30;
 
 declare type TitleProps = {
     /**
@@ -2131,14 +2311,14 @@ declare type TitleProps = {
     titleAs?: undefined;
 };
 
-export declare const TrackingNumberSearch: Story_11;
+export declare const TrackingNumberSearch: Story_12;
 
 /**
  * You should have at minimum two levels in your hierarchy to use breadcrumbs.
  */
 export declare const TwoElements: Story_4;
 
-export declare const Underline: Story_17;
+export declare const Underline: Story_18;
 
 /**
  * An unordered list of simple items, often text. You can nest other lists inside this component.
@@ -2155,7 +2335,7 @@ export { UnorderedList as UnorderedList_alias_1 }
 export { UnorderedList as UnorderedList_alias_2 }
 export { UnorderedList as UnorderedList_alias_3 }
 
-export declare const UnorderedListStory: Story_19;
+export declare const UnorderedListStory: Story_20;
 
 declare const useFieldsetContext: () => {
     hasError: boolean;
@@ -2166,6 +2346,8 @@ export { useFieldsetContext as useFieldsetContext_alias_2 }
 export { useFieldsetContext as useFieldsetContext_alias_3 }
 export { useFieldsetContext as useFieldsetContext_alias_4 }
 
+export declare function useHydrated(): boolean;
+
 /**
  * Merges an array of refs into a single memoized callback ref or `null`.
  * @see https://floating-ui.com/docs/useMergeRefs
@@ -2208,7 +2390,7 @@ declare type Variant = {
 
 export declare const Vertical: Story_7;
 
-export declare const Vertical_alias_1: Story_27;
+export declare const Vertical_alias_1: Story_28;
 
 /**
  * 🚨 WORK IN PROGRESS 🚨
@@ -2227,7 +2409,7 @@ export { VStack as VStack_alias_4 }
 
 export declare const Warning: Story_2;
 
-export declare const Warning_alias_1: Story_20;
+export declare const Warning_alias_1: Story_21;
 
 declare function WarningBadge(props: BadgeProps): JSX_2.Element;
 
@@ -2258,7 +2440,7 @@ export declare const WarningBox: Story_3;
 
 export declare const White: Story_2;
 
-export declare const White_alias_1: Story_14;
+export declare const White_alias_1: Story_15;
 
 declare function WhiteBadge(props: BadgeProps): JSX_2.Element;
 
@@ -2272,25 +2454,25 @@ export { WhiteBadge as WhiteBadge_alias_3 }
 
 export declare const WhiteBox: Story_3;
 
-export declare const WhiteInput: Story_11;
+export declare const WhiteInput: Story_12;
 
-export declare const WhiteInputWithError: Story_11;
+export declare const WhiteInputWithError: Story_12;
 
-export declare const WhiteReadonlyInput: Story_11;
+export declare const WhiteReadonlyInput: Story_12;
 
-export declare const WhiteReadonlyInputWithError: Story_11;
+export declare const WhiteReadonlyInputWithError: Story_12;
 
-export declare const WhiteReadonlyTextarea: Story_15;
+export declare const WhiteReadonlyTextarea: Story_16;
 
-export declare const WhiteReadonlyTextareaWithError: Story_15;
+export declare const WhiteReadonlyTextareaWithError: Story_16;
 
-export declare const WhiteTextarea: Story_15;
+export declare const WhiteTextarea: Story_16;
 
-export declare const WhiteTextareaWithError: Story_15;
+export declare const WhiteTextareaWithError: Story_16;
 
-export declare const WhiteWithError: Story_14;
+export declare const WhiteWithError: Story_15;
 
-export declare const WithBadgeInLabel: Story_25;
+export declare const WithBadgeInLabel: Story_26;
 
 export declare const WrappedInDivs: Story_7;