@vygruppen/spor-react 2.5.3 → 3.0.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@2.5.3 build
+> @vygruppen/spor-react@3.0.1 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,13 +9,13 @@
 CJS Build start
 ESM Build start
 DTS Build start
+"toTime" is imported from external module "@internationalized/date" but never used in "dist/chunk-B6U7OYV3.mjs".
 "toTime" is imported from external module "@internationalized/date" but never used in "dist/index.js".
-"toTime" is imported from external module "@internationalized/date" but never used in "dist/chunk-MMDKHHXP.mjs".
-CJS dist/index.js 896.32 KB
-CJS ⚡️ Build success in 4550ms
-ESM dist/index.mjs                      2.06 KB
-ESM dist/CountryCodeSelect-GJJH4VNO.mjs 351.67 KB
-ESM dist/chunk-MMDKHHXP.mjs             416.49 KB
-ESM ⚡️ Build success in 4552ms
-DTS ⚡️ Build success in 18294ms
-DTS dist/index.d.ts 259.41 KB
+ESM dist/index.mjs                      2.01 KB
+ESM dist/CountryCodeSelect-ZP44HPNI.mjs 351.65 KB
+ESM dist/chunk-B6U7OYV3.mjs             416.39 KB
+ESM ⚡️ Build success in 4795ms
+CJS dist/index.js 896.14 KB
+CJS ⚡️ Build success in 4796ms
+DTS ⚡️ Build success in 19473ms
+DTS dist/index.d.ts 259.11 KB

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @vygruppen/spor-react
 
+## 3.0.1
+
+### Patch Changes
+
+- 828e4f38: Fix a typing issue with Heading
+
+## 3.0.0
+
+### Major Changes
+
+- d0f0c5ff: Remove deprecated components SelectItem, SelectItemLabel and SelectItemDescription.
+
+  To migrate, use Item, ItemLabel and ItemDescription, respectively.
+
+- 6c1f3d08: Heading: Make `as` prop required
+
+  This is a breaking change. Previously, this defaulted to "h2". Go through all usages and add `as="h1"` or whatever is correct for your context.
+
+### Patch Changes
+
+- 08b926e3: DatePicker: Make it possible to override width of datepicker
+
 ## 2.5.3
 
 ### Patch Changes

package/dist/{CountryCodeSelect-GJJH4VNO.mjs → CountryCodeSelect-ZP44HPNI.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, SelectItem } from './chunk-MMDKHHXP.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-B6U7OYV3.mjs';
 import React from 'react';
 
 // ../../node_modules/awesome-phonenumber/index-esm.mjs
@@ -6621,7 +6621,7 @@ var CountryCodeSelect = (props) => {
       items: callingCodes,
       ...props
     },
-    (item) => /* @__PURE__ */ React.createElement(SelectItem, { key: item.key }, item.key)
+    (item) => /* @__PURE__ */ React.createElement(Item, { key: item.key }, item.key)
   );
 };
 var CountryCodeSelect_default = CountryCodeSelect;

package/dist/{chunk-MMDKHHXP.mjs → chunk-B6U7OYV3.mjs}

@@ -12,7 +12,7 @@ import { usePopover, Overlay, DismissButton, useOverlayTrigger, useButton, usePr
 import { motion } from 'framer-motion';
 import { DateFormatter, parseTime, createCalendar, Time, toCalendarDate, toCalendarDateTime, toCalendar, getMinimumDayInMonth, getMinimumMonthInYear, today, startOfWeek, startOfMonth, endOfWeek, endOfMonth, isSameDay, getDayOfWeek, maxDate, minDate, isEqualDay, getWeeksInMonth, getLocalTimeZone, GregorianCalendar, now, startOfYear, isSameMonth, isToday } from '@internationalized/date';
 export { Time } from '@internationalized/date';
-import { useOverlayTriggerState, useTimeFieldState, useComboBoxState, Item, useSelectState } from 'react-stately';
+import { useOverlayTriggerState, Item, useTimeFieldState, useComboBoxState, useSelectState } from 'react-stately';
 export { Item, Section } from 'react-stately';
 import { useSwipeable } from 'react-swipeable';
 import { Global, keyframes } from '@emotion/react';
@@ -3227,8 +3227,8 @@ var Badge = forwardRef(
 );
 var Code = forwardRef((props, ref) => /* @__PURE__ */ React49__default.createElement(Code$1, { ...props, ref }));
 var Heading = ({
+  as,
   variant = "xl-display",
-  as = "h2",
   ...props
 }) => {
   return /* @__PURE__ */ React49__default.createElement(Text, { as, textStyle: variant, ...props });
@@ -3579,7 +3579,7 @@ function DateField(props) {
   });
   const ref = useRef(null);
   const { fieldProps, labelProps } = useDateField(props, state2, ref);
-  return /* @__PURE__ */ React49__default.createElement(Box, { minWidth: "6rem" }, props.label && /* @__PURE__ */ React49__default.createElement(FormLabel, { ...props.labelProps, ...labelProps, sx: styles2.inputLabel }, props.label), /* @__PURE__ */ React49__default.createElement(Flex, { ...fieldProps, ref }, state2.segments.map((segment, i) => /* @__PURE__ */ React49__default.createElement(DateTimeSegment, { key: i, segment, state: state2 }))), /* @__PURE__ */ React49__default.createElement("input", { type: "hidden", value: (_a6 = state2.value) == null ? void 0 : _a6.toString(), name: props.name }));
+  return /* @__PURE__ */ React49__default.createElement(Box, { minWidth: "6rem", width: "100%" }, props.label && /* @__PURE__ */ React49__default.createElement(FormLabel, { ...props.labelProps, ...labelProps, sx: styles2.inputLabel }, props.label), /* @__PURE__ */ React49__default.createElement(Flex, { ...fieldProps, ref }, state2.segments.map((segment, i) => /* @__PURE__ */ React49__default.createElement(DateTimeSegment, { key: i, segment, state: state2 }))), /* @__PURE__ */ React49__default.createElement("input", { type: "hidden", value: (_a6 = state2.value) == null ? void 0 : _a6.toString(), name: props.name }));
 }
 var StyledField = forwardRef(
   ({ children, variant, ...otherProps }, ref) => {
@@ -3606,6 +3606,7 @@ function DatePicker({
   errorMessage,
   minHeight,
   showYearNavigation,
+  width = "auto",
   ...props
 }) {
   const formControlProps = useFormControlContext();
@@ -3641,26 +3642,26 @@ function DatePicker({
   };
   const hasTrigger = responsiveVariant === "with-trigger";
   const styles2 = useMultiStyleConfig("Datepicker", {});
-  return /* @__PURE__ */ React49__default.createElement(I18nProvider, { locale }, /* @__PURE__ */ React49__default.createElement(Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, /* @__PURE__ */ React49__default.createElement(
-    Popover,
+  return /* @__PURE__ */ React49__default.createElement(I18nProvider, { locale }, /* @__PURE__ */ React49__default.createElement(
+    Box,
     {
-      ...dialogProps,
-      isOpen: state2.isOpen,
-      onClose: () => state2.setOpen(false),
-      onOpen: () => state2.setOpen(true),
-      closeOnBlur: true,
-      closeOnEsc: true,
-      returnFocusOnClose: true
+      position: "relative",
+      display: "inline-flex",
+      flexDirection: "column",
+      width
     },
     /* @__PURE__ */ React49__default.createElement(
-      InputGroup,
+      Popover,
       {
-        ...groupProps,
-        ref,
-        width: "auto",
-        display: "inline-flex"
-      },
-      /* @__PURE__ */ React49__default.createElement(PopoverAnchor, null, /* @__PURE__ */ React49__default.createElement(
+        ...dialogProps,
+        isOpen: state2.isOpen,
+        onClose: () => state2.setOpen(false),
+        onOpen: () => state2.setOpen(true),
+        closeOnBlur: true,
+        closeOnEsc: true,
+        returnFocusOnClose: true
+      },
+      /* @__PURE__ */ React49__default.createElement(InputGroup, { ...groupProps, ref, display: "inline-flex" }, /* @__PURE__ */ React49__default.createElement(PopoverAnchor, null, /* @__PURE__ */ React49__default.createElement(
         StyledField,
         {
           variant: responsiveVariant,
@@ -3679,27 +3680,26 @@ function DatePicker({
             ...fieldProps
           }
         )
-      )),
-      hasTrigger && /* @__PURE__ */ React49__default.createElement(CalendarTriggerButton, { ...buttonProps })
-    ),
-    /* @__PURE__ */ React49__default.createElement(FormErrorMessage, { ...errorMessageProps }, errorMessage),
-    state2.isOpen && !props.isDisabled && /* @__PURE__ */ React49__default.createElement(Portal, null, /* @__PURE__ */ React49__default.createElement(
-      PopoverContent,
-      {
-        color: "darkGrey",
-        boxShadow: "md",
-        sx: styles2.calendar
-      },
-      /* @__PURE__ */ React49__default.createElement(PopoverArrow, { sx: styles2.arrow }),
-      /* @__PURE__ */ React49__default.createElement(PopoverBody, null, /* @__PURE__ */ React49__default.createElement(
-        Calendar,
+      )), hasTrigger && /* @__PURE__ */ React49__default.createElement(CalendarTriggerButton, { ...buttonProps })),
+      /* @__PURE__ */ React49__default.createElement(FormErrorMessage, { ...errorMessageProps }, errorMessage),
+      state2.isOpen && !props.isDisabled && /* @__PURE__ */ React49__default.createElement(Portal, null, /* @__PURE__ */ React49__default.createElement(
+        PopoverContent,
         {
-          ...calendarProps,
-          showYearNavigation
-        }
+          color: "darkGrey",
+          boxShadow: "md",
+          sx: styles2.calendar
+        },
+        /* @__PURE__ */ React49__default.createElement(PopoverArrow, { sx: styles2.arrow }),
+        /* @__PURE__ */ React49__default.createElement(PopoverBody, null, /* @__PURE__ */ React49__default.createElement(
+          Calendar,
+          {
+            ...calendarProps,
+            showYearNavigation
+          }
+        ))
       ))
-    ))
-  )));
+    )
+  ));
 }
 function RangeCalendar(props) {
   const locale = useCurrentLocale();
@@ -4383,7 +4383,6 @@ var Arrow = (props) => {
 var FormLabel3 = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(FormLabel, { ...props, ref });
 });
-var SelectItem = Item;
 function ListBox({
   isLoading,
   listBoxRef,
@@ -4413,13 +4412,11 @@ function ItemLabel({ children }) {
   const styles2 = useMultiStyleConfig("ListBox", {});
   return /* @__PURE__ */ React49__default.createElement(Box, { ...labelProps, sx: styles2.label }, children);
 }
-var SelectItemLabel = ItemLabel;
 function ItemDescription({ children }) {
   let { descriptionProps } = useOptionContext();
   const styles2 = useMultiStyleConfig("ListBox", {});
   return /* @__PURE__ */ React49__default.createElement(Box, { ...descriptionProps, sx: styles2.description }, children);
 }
-var SelectItemDescription = ItemDescription;
 function Option({ item, state: state2 }) {
   const ref = useRef(null);
   const {
@@ -4883,7 +4880,7 @@ var PhoneNumberInput = forwardRef(
             height: "100%",
             value: "+47"
           },
-          /* @__PURE__ */ React49__default.createElement(SelectItem, { key: "+47" }, "+47")
+          /* @__PURE__ */ React49__default.createElement(Item, { key: "+47" }, "+47")
         )
       },
       /* @__PURE__ */ React49__default.createElement(
@@ -4928,7 +4925,7 @@ var texts13 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-GJJH4VNO.mjs'));
+var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-ZP44HPNI.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(Radio$1, { ...props, ref });
 });
@@ -14565,4 +14562,4 @@ var getToastComponent = (opts) => {
   return ({ id }) => /* @__PURE__ */ React49__default.createElement(BaseToast, { id, variant: opts.variant }, opts.text);
 };
 
-export { Accordion, AttachedInputs, Badge, Button, ButtonGroup, Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel3 as FormLabel, Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, SearchInput, SelectItem, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, TravelTag, VyLogo, WizardPopover, createTexts, fontFaces, theme, useToast, useTranslation };
+export { Accordion, AttachedInputs, Badge, Button, ButtonGroup, Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel3 as FormLabel, Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, SearchInput, SimpleDrawer, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, TravelTag, VyLogo, WizardPopover, createTexts, fontFaces, theme, useToast, useTranslation };

package/dist/index.d.ts

@@ -10,7 +10,6 @@ import { DateValue } from '@internationalized/date';
 export { Time } from '@internationalized/date';
 import { AriaDatePickerProps, AriaDateRangePickerProps, AriaPositionProps, AriaComboBoxProps, AriaListBoxProps } from 'react-aria';
 import { TimeValue } from '@react-types/datepicker';
-import * as react_stately from 'react-stately';
 import { ListState, SelectState } from 'react-stately';
 export { Item, Section } from 'react-stately';
 import * as _chakra_ui_theme_tools_dist_component from '@chakra-ui/theme-tools/dist/component';
@@ -418,7 +417,7 @@ type CardProps = Exclude<BoxProps, "size"> & {
  */
 declare const Card: _chakra_ui_system_dist_system_types.ComponentWithAs<As, CardProps>;
 
-type DatePickerProps = AriaDatePickerProps<DateValue> & Pick<BoxProps, "minHeight"> & {
+type DatePickerProps = AriaDatePickerProps<DateValue> & Pick<BoxProps, "minHeight" | "width"> & {
     variant: ResponsiveValue<"simple" | "with-trigger">;
     name?: string;
     showYearNavigation?: boolean;
@@ -432,7 +431,7 @@ type DatePickerProps = AriaDatePickerProps<DateValue> & Pick<BoxProps, "minHeigh
  * <DatePicker label="Dato" variant="simple" />
  * ```
  */
-declare function DatePicker({ variant, errorMessage, minHeight, showYearNavigation, ...props }: DatePickerProps): React__default.JSX.Element;
+declare function DatePicker({ variant, errorMessage, minHeight, showYearNavigation, width, ...props }: DatePickerProps): React__default.JSX.Element;
 
 type DateRangePickerProps = AriaDateRangePickerProps<DateValue> & Pick<BoxProps, "minHeight"> & {
     startLabel?: string;
@@ -600,7 +599,7 @@ type AttachedInputsProps = FlexProps;
  * <AttachedInputs>
  *   <Input />
  *   <NativeSelect>
- *     <SelectItem />
+ *     <Item />
  *   </NativeSelect>
  * </AttachedInputs>
  * ```
@@ -811,16 +810,16 @@ declare const FormLabel: _chakra_ui_system_dist_system_types.ComponentWithAs<"la
 
 type InfoSelectProps<T extends object> = {
     /**
-     * Either a render function accepting an item, and returning a <SelectItem />,
-     * or a list of <SelectItem />s.
+     * Either a render function accepting an item, and returning a <Item />,
+     * or a list of <Item />s.
      *
      * Render function example:
      * ```tsx
      * <Select items={items}>
      *   {(item) => (
-     *     <SelectItem key={item.value} value={item.value}>
+     *     <Item key={item.value} value={item.value}>
      *       {item.label}
-     *     </SelectItem>
+     *     </Item>
      *   )}
      * </Select>
      * ```
@@ -828,12 +827,12 @@ type InfoSelectProps<T extends object> = {
      * For this to work, the members in `items` need either a `key`
      * or an `id` property.
      *
-     * List of <SelectItem />s example:
+     * List of <Item />s example:
      * ```tsx
      * <Select label="Choose a color">
-     *   <SelectItem>Green</SelectItem>
-     *   <SelectItem>Blue</SelectItem>
-     *   <SelectItem>Yellow</SelectItem>
+     *   <Item>Green</Item>
+     *   <Item>Blue</Item>
+     *   <Item>Yellow</Item>
      * </Select>
      * ```
      **/
@@ -897,9 +896,9 @@ type InfoSelectProps<T extends object> = {
      *
      * ```tsx
      * <Select label="Choose a color" disabledKeys={["blue", "yellow"]}>
-     *   <SelectItem key="green">Green</SelectItem>
-     *   <SelectItem key="blue">Blue</SelectItem>
-     *   <SelectItem key="yellow">Yellow</SelectItem>
+     *   <Item key="green">Green</Item>
+     *   <Item key="blue">Blue</Item>
+     *   <Item key="yellow">Yellow</Item>
      * </Select>
      * ```
      **/
@@ -1001,9 +1000,6 @@ declare const InputLeftElement: _chakra_ui_system_dist_system_types.ComponentWit
  */
 declare const InputRightElement: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", InputElementProps$1>;
 
-/** @deprecated use Item instead */
-declare const SelectItem: <T>(props: react_stately.ItemProps<T>) => JSX.Element;
-
 type ListBoxProps<T> = AriaListBoxProps<T> & Omit<BoxProps, "filter" | "autoFocus" | "children"> & {
     /** External reference to the ListBox itself */
     listBoxRef: React__default.RefObject<HTMLUListElement>;
@@ -1058,8 +1054,6 @@ declare function ListBox<T extends object>({ isLoading, listBoxRef, state, maxWi
 declare function ItemLabel({ children }: {
     children: React__default.ReactNode;
 }): React__default.JSX.Element;
-/** @deprecated use ItemLabel instead */
-declare const SelectItemLabel: typeof ItemLabel;
 /**
  * Renders a description for an Item.
  *
@@ -1068,8 +1062,6 @@ declare const SelectItemLabel: typeof ItemLabel;
 declare function ItemDescription({ children }: {
     children: React__default.ReactNode;
 }): React__default.JSX.Element;
-/** @deprecated Use ItemDescription instead */
-declare const SelectItemDescription: typeof ItemDescription;
 
 type NativeSelectProps = Exclude<SelectProps, "colorScheme" | "variant" | "size"> & {
     label?: string;
@@ -6974,26 +6966,29 @@ type CodeProps = CodeProps$1 & {
 declare const Code: _chakra_ui_system_dist_system_types.ComponentWithAs<As, CodeProps>;
 
 type TextStyles = keyof typeof tokens__default.font.style;
-type HeadingProps = Exclude<HeadingProps$1, "textStyle"> & {
+type HeadingProps = Omit<HeadingProps$1, "textStyle" | "as"> & {
+    /** The heading level, e.g. h1, h2, h3... **/
+    as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
     /** The size and style of the heading */
     variant?: TextStyles;
 };
 /**
  * Create your own fancy headings with this component.
  *
- * You can specify the variant, which is one of "xs", "sm", "md", "lg", "xl-sans", "xs-serif" and "2xl". The default is "xl-sans".
+ * You have to specify what level of heading you want, depending on the context you are using the heading in.
+ * You do this with the `as` prop. The options are h1, h2, h3, h4, h5 and h6.
  *
  * ```tsx
- * <Heading variant="2xl">Look at me!</Heading>
+ * <Heading as="h1">Page heading</Heading>
  * ```
  *
- * You can also specify what level of heading you want. You do this with the `as` prop. The default is "h2".
+ * You can specify the variant, which is one of "xs", "sm", "md", "lg", "xl-sans", "xs-serif" and "2xl". The default is "xl-sans".
  *
  * ```tsx
- * <Heading as="h1">Page heading</Heading>
+ * <Heading as="h1" variant="2xl">Look at me!</Heading>
  * ```
  */
-declare const Heading: ({ variant, as, ...props }: any) => React__default.JSX.Element;
+declare const Heading: ({ as, variant, ...props }: HeadingProps) => React__default.JSX.Element;
 
 type TextProps = Omit<TextProps$1, "textStyle"> & {
     /** The size and style of the text.
@@ -7010,4 +7005,4 @@ type TextProps = Omit<TextProps$1, "textStyle"> & {
  */
 declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", TextProps>;
 
-export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, NumericStepper, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, PopoverWizardProps, ProgressBar, ProgressLoader, Radio, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SelectItem, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimpleDrawerProps, SimplePopover, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardPopover, WizardPopoverProps, createTexts, fontFaces, theme, useToast, useTranslation };
+export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, NumericStepper, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, PopoverWizardProps, ProgressBar, ProgressLoader, Radio, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, SimplePopover, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardPopover, WizardPopoverProps, createTexts, fontFaces, theme, useToast, useTranslation };

package/dist/index.js

@@ -2826,8 +2826,8 @@ exports.Heading = void 0;
 var init_Heading = __esm({
   "src/typography/Heading.tsx"() {
     exports.Heading = ({
+      as,
       variant = "xl-display",
-      as = "h2",
       ...props
     }) => {
       return /* @__PURE__ */ React49__namespace.default.createElement(react.Text, { as, textStyle: variant, ...props });
@@ -3241,7 +3241,7 @@ function DateField(props) {
   });
   const ref = React49.useRef(null);
   const { fieldProps, labelProps } = reactAria.useDateField(props, state2, ref);
-  return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { minWidth: "6rem" }, props.label && /* @__PURE__ */ React49__namespace.default.createElement(react.FormLabel, { ...props.labelProps, ...labelProps, sx: styles2.inputLabel }, props.label), /* @__PURE__ */ React49__namespace.default.createElement(react.Flex, { ...fieldProps, ref }, state2.segments.map((segment, i) => /* @__PURE__ */ React49__namespace.default.createElement(DateTimeSegment, { key: i, segment, state: state2 }))), /* @__PURE__ */ React49__namespace.default.createElement("input", { type: "hidden", value: (_a6 = state2.value) == null ? void 0 : _a6.toString(), name: props.name }));
+  return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { minWidth: "6rem", width: "100%" }, props.label && /* @__PURE__ */ React49__namespace.default.createElement(react.FormLabel, { ...props.labelProps, ...labelProps, sx: styles2.inputLabel }, props.label), /* @__PURE__ */ React49__namespace.default.createElement(react.Flex, { ...fieldProps, ref }, state2.segments.map((segment, i) => /* @__PURE__ */ React49__namespace.default.createElement(DateTimeSegment, { key: i, segment, state: state2 }))), /* @__PURE__ */ React49__namespace.default.createElement("input", { type: "hidden", value: (_a6 = state2.value) == null ? void 0 : _a6.toString(), name: props.name }));
 }
 var init_DateField = __esm({
   "src/datepicker/DateField.tsx"() {
@@ -3278,6 +3278,7 @@ function DatePicker({
   errorMessage,
   minHeight,
   showYearNavigation,
+  width = "auto",
   ...props
 }) {
   const formControlProps = react.useFormControlContext();
@@ -3313,26 +3314,26 @@ function DatePicker({
   };
   const hasTrigger = responsiveVariant === "with-trigger";
   const styles2 = react.useMultiStyleConfig("Datepicker", {});
-  return /* @__PURE__ */ React49__namespace.default.createElement(reactAria.I18nProvider, { locale }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, /* @__PURE__ */ React49__namespace.default.createElement(
-    react.Popover,
+  return /* @__PURE__ */ React49__namespace.default.createElement(reactAria.I18nProvider, { locale }, /* @__PURE__ */ React49__namespace.default.createElement(
+    react.Box,
     {
-      ...dialogProps,
-      isOpen: state2.isOpen,
-      onClose: () => state2.setOpen(false),
-      onOpen: () => state2.setOpen(true),
-      closeOnBlur: true,
-      closeOnEsc: true,
-      returnFocusOnClose: true
+      position: "relative",
+      display: "inline-flex",
+      flexDirection: "column",
+      width
     },
     /* @__PURE__ */ React49__namespace.default.createElement(
-      react.InputGroup,
+      react.Popover,
       {
-        ...groupProps,
-        ref,
-        width: "auto",
-        display: "inline-flex"
-      },
-      /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React49__namespace.default.createElement(
+        ...dialogProps,
+        isOpen: state2.isOpen,
+        onClose: () => state2.setOpen(false),
+        onOpen: () => state2.setOpen(true),
+        closeOnBlur: true,
+        closeOnEsc: true,
+        returnFocusOnClose: true
+      },
+      /* @__PURE__ */ React49__namespace.default.createElement(react.InputGroup, { ...groupProps, ref, display: "inline-flex" }, /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React49__namespace.default.createElement(
         StyledField,
         {
           variant: responsiveVariant,
@@ -3351,27 +3352,26 @@ function DatePicker({
             ...fieldProps
           }
         )
-      )),
-      hasTrigger && /* @__PURE__ */ React49__namespace.default.createElement(CalendarTriggerButton, { ...buttonProps })
-    ),
-    /* @__PURE__ */ React49__namespace.default.createElement(exports.FormErrorMessage, { ...errorMessageProps }, errorMessage),
-    state2.isOpen && !props.isDisabled && /* @__PURE__ */ React49__namespace.default.createElement(react.Portal, null, /* @__PURE__ */ React49__namespace.default.createElement(
-      react.PopoverContent,
-      {
-        color: "darkGrey",
-        boxShadow: "md",
-        sx: styles2.calendar
-      },
-      /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverArrow, { sx: styles2.arrow }),
-      /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React49__namespace.default.createElement(
-        Calendar,
+      )), hasTrigger && /* @__PURE__ */ React49__namespace.default.createElement(CalendarTriggerButton, { ...buttonProps })),
+      /* @__PURE__ */ React49__namespace.default.createElement(exports.FormErrorMessage, { ...errorMessageProps }, errorMessage),
+      state2.isOpen && !props.isDisabled && /* @__PURE__ */ React49__namespace.default.createElement(react.Portal, null, /* @__PURE__ */ React49__namespace.default.createElement(
+        react.PopoverContent,
         {
-          ...calendarProps,
-          showYearNavigation
-        }
+          color: "darkGrey",
+          boxShadow: "md",
+          sx: styles2.calendar
+        },
+        /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverArrow, { sx: styles2.arrow }),
+        /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React49__namespace.default.createElement(
+          Calendar,
+          {
+            ...calendarProps,
+            showYearNavigation
+          }
+        ))
       ))
-    ))
-  )));
+    )
+  ));
 }
 var init_DatePicker = __esm({
   "src/datepicker/DatePicker.tsx"() {
@@ -4996,12 +4996,9 @@ function ListBoxSection({ section, state: state2 }) {
     (item) => /* @__PURE__ */ React49__namespace.default.createElement(Option, { key: item.key, item, state: state2 })
   )));
 }
-exports.SelectItem = void 0; exports.SelectItemLabel = void 0; exports.SelectItemDescription = void 0; var OptionContext, useOptionContext;
+var OptionContext, useOptionContext;
 var init_ListBox = __esm({
   "src/input/ListBox.tsx"() {
-    exports.SelectItem = reactStately.Item;
-    exports.SelectItemLabel = ItemLabel;
-    exports.SelectItemDescription = ItemDescription;
     OptionContext = React49__namespace.default.createContext({
       labelProps: {},
       descriptionProps: {}
@@ -12090,7 +12087,7 @@ var init_CountryCodeSelect = __esm({
           items: callingCodes,
           ...props
         },
-        (item) => /* @__PURE__ */ React49__namespace.default.createElement(exports.SelectItem, { key: item.key }, item.key)
+        (item) => /* @__PURE__ */ React49__namespace.default.createElement(reactStately.Item, { key: item.key }, item.key)
       );
     };
     CountryCodeSelect_default = CountryCodeSelect;
@@ -12132,7 +12129,7 @@ var init_PhoneNumberInput = __esm({
                 height: "100%",
                 value: "+47"
               },
-              /* @__PURE__ */ React49__namespace.default.createElement(exports.SelectItem, { key: "+47" }, "+47")
+              /* @__PURE__ */ React49__namespace.default.createElement(reactStately.Item, { key: "+47" }, "+47")
             )
           },
           /* @__PURE__ */ React49__namespace.default.createElement(

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SelectItem, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-MMDKHHXP.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-B6U7OYV3.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "2.5.3",
+  "version": "3.0.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/datepicker/DateField.tsx

@@ -34,7 +34,7 @@ export function DateField(props: DateFieldProps) {
   const { fieldProps, labelProps } = useDateField(props, state, ref);
 
   return (
-    <Box minWidth="6rem">
+    <Box minWidth="6rem" width="100%">
       {props.label && (
         <FormLabel {...props.labelProps} {...labelProps} sx={styles.inputLabel}>
           {props.label}

package/src/datepicker/DatePicker.tsx

@@ -26,7 +26,7 @@ import { StyledField } from "./StyledField";
 import { useCurrentLocale } from "./utils";
 
 type DatePickerProps = AriaDatePickerProps<DateValue> &
-  Pick<BoxProps, "minHeight"> & {
+  Pick<BoxProps, "minHeight" | "width"> & {
     variant: ResponsiveValue<"simple" | "with-trigger">;
     name?: string;
     showYearNavigation?: boolean;
@@ -45,6 +45,7 @@ export function DatePicker({
   errorMessage,
   minHeight,
   showYearNavigation,
+  width = "auto",
   ...props
 }: DatePickerProps) {
   const formControlProps = useFormControlContext();
@@ -92,7 +93,12 @@ export function DatePicker({
 
   return (
     <I18nProvider locale={locale}>
-      <Box position="relative" display="inline-flex" flexDirection="column">
+      <Box
+        position="relative"
+        display="inline-flex"
+        flexDirection="column"
+        width={width}
+      >
         <Popover
           {...dialogProps}
           isOpen={state.isOpen}
@@ -102,12 +108,7 @@ export function DatePicker({
           closeOnEsc
           returnFocusOnClose
         >
-          <InputGroup
-            {...groupProps}
-            ref={ref}
-            width="auto"
-            display="inline-flex"
-          >
+          <InputGroup {...groupProps} ref={ref} display="inline-flex">
             <PopoverAnchor>
               <StyledField
                 variant={responsiveVariant}

package/src/input/AttachedInputs.tsx

@@ -9,7 +9,7 @@ type AttachedInputsProps = FlexProps;
  * <AttachedInputs>
  *   <Input />
  *   <NativeSelect>
- *     <SelectItem />
+ *     <Item />
  *   </NativeSelect>
  * </AttachedInputs>
  * ```

package/src/input/CountryCodeSelect.tsx

@@ -1,11 +1,5 @@
 import React from "react";
-import {
-  BoxProps,
-  InfoSelect,
-  SelectItem,
-  createTexts,
-  useTranslation,
-} from "..";
+import { BoxProps, InfoSelect, Item, createTexts, useTranslation } from "..";
 
 import { getSupportedCallingCodes } from "awesome-phonenumber";
 
@@ -43,7 +37,7 @@ export const CountryCodeSelect = (props: CountryCodeSelectProps) => {
       items={callingCodes as any}
       {...props}
     >
-      {(item) => <SelectItem key={item.key}>{item.key}</SelectItem>}
+      {(item) => <Item key={item.key}>{item.key}</Item>}
     </InfoSelect>
   );
 };

package/src/input/InfoSelect.tsx

@@ -18,16 +18,16 @@ import { Popover } from "./Popover";
 
 type InfoSelectProps<T extends object> = {
   /**
-   * Either a render function accepting an item, and returning a <SelectItem />,
-   * or a list of <SelectItem />s.
+   * Either a render function accepting an item, and returning a <Item />,
+   * or a list of <Item />s.
    *
    * Render function example:
    * ```tsx
    * <Select items={items}>
    *   {(item) => (
-   *     <SelectItem key={item.value} value={item.value}>
+   *     <Item key={item.value} value={item.value}>
    *       {item.label}
-   *     </SelectItem>
+   *     </Item>
    *   )}
    * </Select>
    * ```
@@ -35,12 +35,12 @@ type InfoSelectProps<T extends object> = {
    * For this to work, the members in `items` need either a `key`
    * or an `id` property.
    *
-   * List of <SelectItem />s example:
+   * List of <Item />s example:
    * ```tsx
    * <Select label="Choose a color">
-   *   <SelectItem>Green</SelectItem>
-   *   <SelectItem>Blue</SelectItem>
-   *   <SelectItem>Yellow</SelectItem>
+   *   <Item>Green</Item>
+   *   <Item>Blue</Item>
+   *   <Item>Yellow</Item>
    * </Select>
    * ```
    **/
@@ -104,9 +104,9 @@ type InfoSelectProps<T extends object> = {
    *
    * ```tsx
    * <Select label="Choose a color" disabledKeys={["blue", "yellow"]}>
-   *   <SelectItem key="green">Green</SelectItem>
-   *   <SelectItem key="blue">Blue</SelectItem>
-   *   <SelectItem key="yellow">Yellow</SelectItem>
+   *   <Item key="green">Green</Item>
+   *   <Item key="blue">Blue</Item>
+   *   <Item key="yellow">Yellow</Item>
    * </Select>
    * ```
    **/

package/src/input/ListBox.tsx

@@ -14,10 +14,8 @@ import {
   useListBoxSection,
   useOption,
 } from "react-aria";
-import { Item, type ListState, type SelectState } from "react-stately";
+import { type ListState, type SelectState } from "react-stately";
 
-/** @deprecated use Item instead */
-export const SelectItem = Item;
 export { Item, Section } from "react-stately";
 
 type ListBoxProps<T> = AriaListBoxProps<T> &
@@ -111,8 +109,6 @@ export function ItemLabel({ children }: { children: React.ReactNode }) {
     </Box>
   );
 }
-/** @deprecated use ItemLabel instead */
-export const SelectItemLabel = ItemLabel;
 
 /**
  * Renders a description for an Item.
@@ -128,8 +124,6 @@ export function ItemDescription({ children }: { children: React.ReactNode }) {
     </Box>
   );
 }
-/** @deprecated Use ItemDescription instead */
-export const SelectItemDescription = ItemDescription;
 
 type OptionProps = {
   item: Node<unknown>;

package/src/input/PhoneNumberInput.tsx

@@ -5,7 +5,7 @@ import {
   useControllableState,
 } from "@chakra-ui/react";
 import React, { Suspense } from "react";
-import { InfoSelect, Input, SelectItem, createTexts, useTranslation } from "..";
+import { InfoSelect, Input, Item, createTexts, useTranslation } from "..";
 import { AttachedInputs } from "./AttachedInputs";
 
 type CountryCodeAndPhoneNumber = {
@@ -65,7 +65,7 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
               height="100%"
               value="+47"
             >
-              <SelectItem key="+47">+47</SelectItem>
+              <Item key="+47">+47</Item>
             </InfoSelect>
           }
         >

package/src/typography/Heading.tsx

@@ -4,29 +4,32 @@ import React from "react";
 
 type TextStyles = keyof typeof tokens.font.style;
 
-export type HeadingProps = Exclude<ChakraHeadingProps, "textStyle"> & {
+export type HeadingProps = Omit<ChakraHeadingProps, "textStyle" | "as"> & {
+  /** The heading level, e.g. h1, h2, h3... **/
+  as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
   /** The size and style of the heading */
   variant?: TextStyles;
 };
 /**
  * Create your own fancy headings with this component.
  *
- * You can specify the variant, which is one of "xs", "sm", "md", "lg", "xl-sans", "xs-serif" and "2xl". The default is "xl-sans".
+ * You have to specify what level of heading you want, depending on the context you are using the heading in.
+ * You do this with the `as` prop. The options are h1, h2, h3, h4, h5 and h6.
  *
  * ```tsx
- * <Heading variant="2xl">Look at me!</Heading>
+ * <Heading as="h1">Page heading</Heading>
  * ```
  *
- * You can also specify what level of heading you want. You do this with the `as` prop. The default is "h2".
+ * You can specify the variant, which is one of "xs", "sm", "md", "lg", "xl-sans", "xs-serif" and "2xl". The default is "xl-sans".
  *
  * ```tsx
- * <Heading as="h1">Page heading</Heading>
+ * <Heading as="h1" variant="2xl">Look at me!</Heading>
  * ```
  */
 export const Heading = ({
+  as,
   variant = "xl-display",
-  as = "h2",
   ...props
-}: any) => {
+}: HeadingProps) => {
   return <Text as={as} textStyle={variant} {...props} />;
 };