@postenbring/hedwig-react 0.0.65 → 0.0.67

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,7 +315,9 @@ export { BreadcrumbsProps as BreadcrumbsProps_alias_1 }
 export { BreadcrumbsProps as BreadcrumbsProps_alias_2 }
 export { BreadcrumbsProps as BreadcrumbsProps_alias_3 }
 
-export declare const ButtonAsLink: Story_17;
+declare type Breakpoints = "initial" | "small" | "medium" | "large" | "xlarge";
+
+export declare const ButtonAsLink: Story_18;
 
 declare type ButtonProps = ButtonPropsInternal & ({
     /**
@@ -544,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.
@@ -579,95 +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;
 
-export declare const DefaulDisabled: Story_14;
+/**
+ * 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,27 +771,15 @@ 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;
     width?: number | string;
 }
 
-export declare const Disabled: Story_5;
-
-export declare const DisabledInput: Story_11;
-
-export declare const DisabledInputWithError: Story_11;
-
-export declare const DisabledOutline: Story_5;
-
-export declare const DisabledTextarea: Story_15;
-
-export declare const DisabledTextareaWithError: Story_15;
-
 declare function ErrorMessage({ children, id, className }: ErrorMessageProps): JSX_2.Element;
 export { ErrorMessage }
 export { ErrorMessage as ErrorMessage_alias_1 }
@@ -766,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 }
@@ -775,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;
@@ -851,9 +883,6 @@ declare interface FooterLinkSectionProps extends HTMLAttributes<HTMLDivElement>
  * Responsive sections of links. Will become an accordion on mobile.
  *
  * Use with `Footer.LinkSection` for each section.
- *
- * TODO:
- * - [ ] Decrease number of DOM elements rendered. We should not rely on conditional rendering as that will make server-side rendering harder.
  */
 declare const FooterLinkSections: ForwardRefExoticComponent<FooterLinkSectionsProps & RefAttributes<HTMLDivElement>>;
 export { FooterLinkSections }
@@ -895,7 +924,11 @@ 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;
 
 declare interface HeadingProps {
     variant: "h1-display" | "h1" | "h2" | "h3" | "h3-title";
@@ -904,15 +937,26 @@ 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;
 
-export declare const IconDisabled: Story_5;
-
-export declare const IconDisabledOutline: Story_5;
+/**
+ * 🚨 WORK IN PROGRESS 🚨
+ *
+ * TODO
+ * - [ ] Add more examples
+ * - [ ] Document usage
+ * - [ ] Document props
+ */
+declare const HStack: React_2.ForwardRefExoticComponent<Omit<StackProps, "direction"> & React_2.RefAttributes<HTMLDivElement>>;
+export { HStack }
+export { HStack as HStack_alias_1 }
+export { HStack as HStack_alias_2 }
+export { HStack as HStack_alias_3 }
+export { HStack as HStack_alias_4 }
 
 export declare const IconPrimary: Story_5;
 
@@ -943,7 +987,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 +1004,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 +1033,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 +1058,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 +1088,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 +1113,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 +1129,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.
@@ -1094,10 +1158,13 @@ export declare const MinAndMax: Story_28;
  something about the consequences.
  </p>
  </Modal.Content>
- <Modal.Footer style={{ display: "flex", gap: 16 }}>
+ <Modal.Footer>
+ <HStack gap="16" wrap>
+ <PrimaryButton onClick={onMainAction}>Main action</PrimaryButton>
  <PrimaryButton fill="outline" onClick={onClose}>
- Close
+ Cancel
  </PrimaryButton>
+ </HStack>
  </Modal.Footer>
  </Modal>
  </>
@@ -1149,7 +1216,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;
 
@@ -1302,13 +1369,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
@@ -1325,7 +1392,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,
@@ -1353,21 +1420,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;
 
@@ -1444,13 +1513,36 @@ 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_12;
+
+export declare const ReadonlyTextarea: Story_16;
 
-export declare const ReadonlyInputWithError: Story_11;
+export declare const ReadonlyTextareaWithError: Story_16;
 
-export declare const ReadonlyTextarea: Story_15;
+export declare type ResponsiveProp<T> = T | ResponsiveValues<T>;
 
-export declare const ReadonlyTextareaWithError: Story_15;
+export declare type ResponsiveSpacingSizes = keyof typeof responsiveSpacingSizes;
+
+declare const responsiveSpacingSizes: {
+    readonly "4-8": "4-8";
+    readonly "8-12": "8-12";
+    readonly "12-16": "12-16";
+    readonly "16-20": "16-20";
+    readonly "20-24": "20-24";
+    readonly "24-32": "24-32";
+    readonly "32-40": "32-40";
+    readonly "40-48": "40-48";
+    readonly "48-64": "48-64";
+    readonly "64-80": "64-80";
+    readonly "80-120": "80-120";
+    readonly "120-160": "120-160";
+};
+
+declare type ResponsiveValues<T> = {
+    [Breakpoint in Breakpoints]?: T;
+};
 
 export declare const Secondary: Story_5;
 
@@ -1462,14 +1554,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 }
@@ -1480,7 +1576,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.
@@ -1525,11 +1621,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;
 
@@ -1592,11 +1688,61 @@ 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_27;
+
+export declare const Solid: Story_18;
 
-export declare const Small: Story_26;
+export declare type SpacingSizes = keyof typeof spacingSizes;
 
-export declare const Solid: Story_17;
+declare const spacingSizes: {
+    readonly "4": "4";
+    readonly "8": "8";
+    readonly "12": "12";
+    readonly "16": "16";
+    readonly "20": "20";
+    readonly "24": "24";
+    readonly "32": "32";
+    readonly "40": "40";
+    readonly "48": "48";
+    readonly "64": "64";
+    readonly "80": "80";
+    readonly "120": "120";
+};
+
+/**
+ * 🚨 WORK IN PROGRESS 🚨
+ *
+ * TODO
+ * - [ ] Add more examples
+ * - [ ] Document usage
+ * - [ ] Document props
+ */
+declare const Stack: React_2.ForwardRefExoticComponent<StackProps & React_2.RefAttributes<HTMLDivElement>>;
+export { Stack }
+export { Stack as Stack_alias_1 }
+export { Stack as Stack_alias_2 }
+export { Stack as Stack_alias_3 }
+export { Stack as Stack_alias_4 }
+
+declare interface StackProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    children: React_2.ReactNode;
+    gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;
+    direction?: ResponsiveProp<React_2.CSSProperties["flexDirection"]>;
+    wrap?: ResponsiveProp<boolean>;
+    align?: ResponsiveProp<React_2.CSSProperties["alignItems"]>;
+    justify?: ResponsiveProp<React_2.CSSProperties["justifyContent"]>;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+}
+export { StackProps }
+export { StackProps as StackProps_alias_1 }
+export { StackProps as StackProps_alias_2 }
+export { StackProps as StackProps_alias_3 }
+export { StackProps as StackProps_alias_4 }
 
 /**
  * Indicate a step in a process.
@@ -1627,50 +1773,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>;
@@ -1681,7 +1829,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.
@@ -1720,13 +1868,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;
-
-declare const Tab: OverridableComponent<TabProps, HTMLButtonElement>;
-export { Tab }
-export { Tab as Tab_alias_1 }
-export { Tab as Tab_alias_2 }
-export { Tab as Tab_alias_3 }
+export declare const Success: Story_21;
 
 declare interface TabContentsProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactElement<TabsContentProps> | ReactElement<TabsContentProps>[];
@@ -1737,7 +1879,7 @@ export { TabContentsProps as TabContentsProps_alias_2 }
 export { TabContentsProps as TabContentsProps_alias_3 }
 
 declare interface TabListProps extends HTMLAttributes<HTMLDivElement> {
-    children: ReactElement<TabProps> | ReactElement<TabProps>[];
+    children: ReactElement<TabsTabProps> | ReactElement<TabsTabProps>[];
     /**
      * Direction of the tabs. Can either be vertical or horizontal.
      * Horizontal breaks on window width with fallback back to vertical
@@ -1749,18 +1891,6 @@ export { TabListProps as TabListProps_alias_1 }
 export { TabListProps as TabListProps_alias_2 }
 export { TabListProps as TabListProps_alias_3 }
 
-declare interface TabProps extends HTMLAttributes<HTMLButtonElement> {
-    children: ReactElement<HTMLElement> | string;
-    /**
-     * Identifier for the tab
-     */
-    tabId: string;
-}
-export { TabProps }
-export { TabProps as TabProps_alias_1 }
-export { TabProps as TabProps_alias_2 }
-export { TabProps as TabProps_alias_3 }
-
 export declare const Tabs_alias_3: OverridableComponent<TabsProps, HTMLDivElement>;
 
 declare const TabsComponent: {
@@ -1770,7 +1900,7 @@ declare const TabsComponent: {
     } & TabsProps & Omit<ComponentPropsWithRef<As>, keyof TabsProps>): ReactNode;
 } & Pick<FC, "displayName"> & {
     List: typeof TabsList;
-    Tab: typeof Tab;
+    Tab: typeof TabsTab;
     Contents: typeof TabsContents;
     Content: typeof TabsContent;
 };
@@ -1835,6 +1965,24 @@ export { TabsProps as TabsProps_alias_1 }
 export { TabsProps as TabsProps_alias_2 }
 export { TabsProps as TabsProps_alias_3 }
 
+declare const TabsTab: OverridableComponent<TabsTabProps, HTMLButtonElement>;
+export { TabsTab }
+export { TabsTab as TabsTab_alias_1 }
+export { TabsTab as TabsTab_alias_2 }
+export { TabsTab as TabsTab_alias_3 }
+
+declare interface TabsTabProps extends HTMLAttributes<HTMLButtonElement> {
+    children: ReactElement<HTMLElement> | string;
+    /**
+     * Identifier for the tab
+     */
+    tabId: string;
+}
+export { TabsTabProps }
+export { TabsTabProps as TabsTabProps_alias_1 }
+export { TabsTabProps as TabsTabProps_alias_2 }
+export { TabsTabProps as TabsTabProps_alias_3 }
+
 /**
  * Text component
  *
@@ -2036,11 +2184,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 = {
     /**
@@ -2055,14 +2203,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.
@@ -2079,7 +2227,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;
@@ -2090,6 +2238,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
@@ -2132,11 +2282,26 @@ 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 🚨
+ *
+ * TODO
+ * - [ ] Add more examples
+ * - [ ] Document usage
+ * - [ ] Document props
+ */
+declare const VStack: React_2.ForwardRefExoticComponent<Omit<StackProps, "direction"> & React_2.RefAttributes<HTMLDivElement>>;
+export { VStack }
+export { VStack as VStack_alias_1 }
+export { VStack as VStack_alias_2 }
+export { VStack as VStack_alias_3 }
+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;
 
@@ -2167,7 +2332,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;
 
@@ -2181,35 +2346,25 @@ export { WhiteBadge as WhiteBadge_alias_3 }
 
 export declare const WhiteBox: Story_3;
 
-export declare const WhiteDisabled: Story_14;
-
-export declare const WhiteDisabledInput: Story_11;
-
-export declare const WhiteDisabledInputWithError: Story_11;
-
-export declare const WhiteDisabledTextarea: Story_15;
-
-export declare const WhiteDisabledTextareaWithError: Story_15;
-
-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;