@vygruppen/spor-react 2.4.2 → 2.5.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@2.4.2 build
+> @vygruppen/spor-react@2.5.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -10,12 +10,12 @@
 ESM Build start
 DTS Build start
 "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-C3DS6BFF.mjs".
-CJS dist/index.js 895.96 KB
-CJS ⚡️ Build success in 4923ms
-ESM dist/index.mjs                      2.08 KB
-ESM dist/CountryCodeSelect-FDAGWNSZ.mjs 351.67 KB
-ESM dist/chunk-C3DS6BFF.mjs             416.15 KB
-ESM ⚡️ Build success in 4924ms
-DTS ⚡️ Build success in 18562ms
-DTS dist/index.d.ts 261.82 KB
+"toTime" is imported from external module "@internationalized/date" but never used in "dist/chunk-7GRTZA6T.mjs".
+CJS dist/index.js 895.46 KB
+CJS ⚡️ Build success in 5694ms
+ESM dist/index.mjs                      2.06 KB
+ESM dist/CountryCodeSelect-ZTEYBERS.mjs 351.67 KB
+ESM dist/chunk-7GRTZA6T.mjs             415.76 KB
+ESM ⚡️ Build success in 5707ms
+DTS ⚡️ Build success in 21517ms
+DTS dist/index.d.ts 259.31 KB

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @vygruppen/spor-react
 
+## 2.5.0
+
+### Minor Changes
+
+- 042dba35: Make accordions and cards default to the sm size
+
+### Patch Changes
+
+- f9d6bd34: Combobox: Fix a bug where menuTrigger="focus" wouldn't work
+- 76914a15: Remove non-working Autosuggest component
+
+## 2.4.3
+
+### Patch Changes
+
+- 5640417f: Autosuggest: Fix a bug where the onSelectionChanged was called with no item on nested lists
+
 ## 2.4.2
 
 ### Patch Changes

package/dist/{CountryCodeSelect-FDAGWNSZ.mjs → CountryCodeSelect-ZTEYBERS.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, SelectItem } from './chunk-C3DS6BFF.mjs';
+import { createTexts, useTranslation, InfoSelect, SelectItem } from './chunk-7GRTZA6T.mjs';
 import React from 'react';
 
 // ../../node_modules/awesome-phonenumber/index-esm.mjs

package/dist/{chunk-C3DS6BFF.mjs → chunk-7GRTZA6T.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, useAsyncList, useComboBoxState, Item, useSelectState } from 'react-stately';
+import { useOverlayTriggerState, useTimeFieldState, useComboBoxState, Item, useSelectState } from 'react-stately';
 export { Item, Section } from 'react-stately';
 import { useSwipeable } from 'react-swipeable';
 import { Global, keyframes } from '@emotion/react';
@@ -1523,7 +1523,7 @@ var Stack = forwardRef(
 
 // src/card/Card.tsx
 var Card = forwardRef(
-  ({ size: size2 = "lg", colorScheme = "white", children, ...props }, ref) => {
+  ({ size: size2 = "sm", colorScheme = "white", children, ...props }, ref) => {
     const styles2 = useStyleConfig("Card", {
       colorScheme,
       size: size2
@@ -4019,40 +4019,6 @@ var AttachedInputs = ({
     }
   );
 };
-function Autosuggest({
-  label,
-  fetcher,
-  children,
-  onSelectionChange,
-  ...props
-}) {
-  const list2 = useAsyncList({
-    async load({ filterText }) {
-      return {
-        items: await fetcher(filterText)
-      };
-    }
-  });
-  const handleSelectionChange = (key) => {
-    if (!onSelectionChange) {
-      return;
-    }
-    return onSelectionChange(list2.getItem(key));
-  };
-  return /* @__PURE__ */ React49__default.createElement(
-    Combobox,
-    {
-      label,
-      items: list2.items,
-      inputValue: list2.filterText,
-      onInputChange: list2.setFilterText,
-      onSelectionChange: handleSelectionChange,
-      isLoading: list2.isLoading,
-      ...props
-    },
-    children
-  );
-}
 var Dialog = ({ title, children, ...props }) => {
   const ref = useRef(null);
   const { dialogProps, titleProps } = useDialog(props, ref);
@@ -4238,23 +4204,26 @@ function Combobox({
   marginTop,
   marginX,
   marginY,
+  marginRight,
+  marginLeft,
   paddingBottom,
   paddingRight,
   paddingTop,
   paddingLeft,
   paddingX,
   paddingY,
-  onFocus,
+  emptyContent,
   ...rest
 }) {
   const { contains: contains2 } = useFilter({ sensitivity: "base" });
-  const state2 = useComboBoxState({
-    ...rest,
-    defaultFilter: contains2
-  });
   const inputRef = useRef(null);
   const listBoxRef = useRef(null);
   const popoverRef = useRef(null);
+  const state2 = useComboBoxState({
+    ...rest,
+    defaultFilter: contains2,
+    allowsEmptyCollection: Boolean(emptyContent)
+  });
   const {
     inputProps: { size: size2, ...inputProps },
     listBoxProps
@@ -4267,19 +4236,20 @@ function Combobox({
     },
     state2
   );
-  return /* @__PURE__ */ React49__default.createElement(FormControl, null, /* @__PURE__ */ React49__default.createElement(
+  return /* @__PURE__ */ React49__default.createElement(React49__default.Fragment, null, /* @__PURE__ */ React49__default.createElement(
     Input,
     {
       ...inputProps,
       ref: inputRef,
       label,
-      onFocus,
       borderBottomLeftRadius: state2.isOpen ? 0 : borderBottomLeftRadius,
       borderBottomRightRadius: state2.isOpen ? 0 : borderBottomRightRadius,
       borderTopLeftRadius,
       borderTopRightRadius,
       marginBottom,
       marginTop,
+      marginRight,
+      marginLeft,
       marginX,
       marginY,
       paddingBottom,
@@ -4317,7 +4287,7 @@ function Combobox({
         ...listBoxProps,
         state: state2,
         listBoxRef,
-        borderBottomRadius: "sm"
+        emptyContent
       },
       rest.children
     )
@@ -4404,6 +4374,7 @@ function ListBox({
       sx: styles2.container,
       "aria-busy": isLoading
     },
+    state2.collection.size === 0 && props.emptyContent,
     Array.from(state2.collection).map(
       (item) => item.type === "section" ? /* @__PURE__ */ React49__default.createElement(ListBoxSection, { key: item.key, section: item, state: state2 }) : /* @__PURE__ */ React49__default.createElement(Option, { key: item.key, item, state: state2 })
     )
@@ -4456,18 +4427,18 @@ function ListBoxSection({ section, state: state2 }) {
     heading: section.rendered,
     "aria-label": section["aria-label"]
   });
-  const isFirstSection = section.key !== state2.collection.getFirstKey();
-  const titleBackgroundColor = useColorModeValue("platinum", "dimGrey");
+  const isFirstSection = section.key === state2.collection.getFirstKey();
   const titleColor = useColorModeValue("darkGrey", "white");
   return /* @__PURE__ */ React49__default.createElement(ListItem, { ...itemProps }, section.rendered && /* @__PURE__ */ React49__default.createElement(
     Box,
     {
-      textStyle: "xs",
-      backgroundColor: titleBackgroundColor,
+      fontSize: "mobile.xs",
       color: titleColor,
       paddingX: 3,
       paddingY: 1,
-      marginTop: isFirstSection ? 0 : 0,
+      marginTop: isFirstSection ? 0 : 3,
+      textTransform: "uppercase",
+      fontWeight: "bold",
       ...headingProps
     },
     section.rendered
@@ -4551,7 +4522,7 @@ var texts10 = createTexts({
   }
 });
 var Input = forwardRef(
-  ({ label, leftIcon, rightIcon, id, ...props }, ref) => {
+  ({ label, leftIcon, rightIcon, id, size: size2, ...props }, ref) => {
     const formControlProps = useFormControlContext();
     const fallbackId = `input-${useId()}`;
     const inputId = id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
@@ -4566,7 +4537,7 @@ var Input = forwardRef(
         ref,
         placeholder: " "
       }
-    ), /* @__PURE__ */ React49__default.createElement(FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label), rightIcon && /* @__PURE__ */ React49__default.createElement(InputRightElement, null, rightIcon));
+    ), /* @__PURE__ */ React49__default.createElement(FormLabel, { htmlFor: inputId }, label), rightIcon && /* @__PURE__ */ React49__default.createElement(InputRightElement, null, rightIcon));
   }
 );
 var InputLeftElement2 = forwardRef(
@@ -4816,7 +4787,7 @@ var texts11 = createTexts({
   }
 });
 var PasswordInput = forwardRef(
-  ({ leftIcon, id, label, ...props }, ref) => {
+  ({ leftIcon, id, label, size: size2, ...props }, ref) => {
     const { isOpen: isShowingPassword, onToggle } = useDisclosure();
     const { t: t2 } = useTranslation();
     const formControlProps = useFormControlContext();
@@ -4929,7 +4900,7 @@ var texts13 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-FDAGWNSZ.mjs'));
+var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-ZTEYBERS.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(Radio$1, { ...props, ref });
 });
@@ -10976,7 +10947,7 @@ var config3 = helpers.defineMultiStyleConfig({
   },
   defaultProps: {
     variant: "list",
-    size: "md"
+    size: "sm"
   }
 });
 var accordion_default = config3;
@@ -13040,19 +13011,27 @@ var config24 = helpers15.defineMultiStyleConfig({
       overflowY: "auto",
       maxHeight: "50vh",
       width: "100%",
-      listStyle: "none"
+      listStyle: "none",
+      borderBottomRadius: "sm"
     },
     item: {
-      paddingX: 3,
-      paddingY: 2,
+      paddingX: 2,
+      paddingY: 1,
+      marginY: 1,
+      marginX: 1,
+      borderRadius: "sm",
       color: mode("darkGrey", "white")(props),
       _hover: {
-        background: mode("mint", "darkTeal")(props),
+        backgroundColor: mode("seaMist", "darkTeal")(props),
+        outline: "none"
+      },
+      _active: {
+        backgroundColor: mode("mint", "darkTeal")(props),
         outline: "none"
       },
       _focus: {
         outline: "none",
-        backgroundColor: mode("mint", "darkTeal")(props)
+        backgroundColor: mode("seaMist", "darkTeal")(props)
       },
       _selected: {
         backgroundColor: mode("pine", "pine")(props),
@@ -14557,4 +14536,4 @@ var getToastComponent = (opts) => {
   return ({ id }) => /* @__PURE__ */ React49__default.createElement(BaseToast, { id, variant: opts.variant }, opts.text);
 };
 
-export { Accordion, AttachedInputs, Autosuggest, 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, 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 };

package/dist/index.d.ts

@@ -397,10 +397,10 @@ type CardProps = Exclude<BoxProps, "size"> & {
  * </Card>
  * ```
  *
- * There are lots of color schemes available. You can also set the size as either `sm` or `lg`. The default is `lg`.
+ * There are lots of color schemes available. You can also set the size as either `sm` or `lg`. The default is `sm`.
  *
  * ```tsx
- * <Card colorScheme="orange" size="sm">
+ * <Card colorScheme="orange" size="lg">
  *   A smaller card
  * </Card>
  * ```
@@ -607,87 +607,6 @@ type AttachedInputsProps = FlexProps;
  */
 declare const AttachedInputs: ({ flexDirection, ...rest }: AttachedInputsProps) => React__default.JSX.Element;
 
-type AutosuggestProps<T> = {
-    /** The label of the search field */
-    label: string;
-    /**
-     * The function responsible for fetching new suggestion items, based on the query.
-     *
-     * This will typically be an API call to a backend service.
-     *
-     * @example
-     * ```tsx
-     * const fetcher = async (query?: string) => {
-     *   const response = await fetch(`https://some.api.com/filter=${query}`);
-     *   const json = await response.json();
-     *   return json;
-     * };
-     * ```
-     * */
-    fetcher: (query?: string) => Promise<Iterable<T>>;
-    /**
-     * A render function that receives each item, and returns the UI for each item in the list.
-     *
-     * @example
-     * ```tsx
-     * <Autosuggest {...otherProps}>
-     *  {(user) => (
-     *    <Item key={user.id} textValue={user.fullName}>
-     *       <ItemLabel>{user.fullName}</ItemLabel>
-     *       <ItemDescription>{user.asl}</ItemDescription>
-     *    </Item>
-     *  )}
-     * </Autosuggest>
-     * ```
-     *
-     * You technically don't need to use the `<SelectItemLabel />` and `<SelectItemDescription />` components, but they are recommended to improve the accessibility of the search results. You can style them however you want, so there should never be a reason not to include at least the `<SelectItemLabel />` component. But who's judging?
-     * */
-    children: ComboboxProps<T>["children"];
-    /**
-     * Callback for when the selection changes. Returns the entire item.
-     */
-    onSelectionChange?: (item: T) => void;
-    /** The selected item key (controlled) */
-    selectedKey?: ComboboxProps<T>["selectedKey"];
-    /** What should open the menu.
-     *
-     * Defaults to "input"
-     */
-    menuTrigger?: ComboboxProps<T>["menuTrigger"];
-} & Pick<InputProps, "marginTop" | "marginBottom" | "marginY" | "marginX" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingY" | "paddingX" | "leftIcon" | "rightIcon" | "borderTopRightRadius" | "borderTopLeftRadius" | "borderBottomRightRadius" | "borderBottomLeftRadius" | "onFocus">;
-/**
- * A component that provides an autocomplete search field with suggestions.
- *
- * This component requires a `fetcher` prop, which is a function that receives a query string, and returns a list of items that match the query.
- *
- * @example
- * ```tsx
- * const fetcher = async (query?: string) => {
- *   const response = await fetch(`https://some.api.vy.no/filter=${query}`);
- *   const json = await response.json();
- *   return json;
- * };
- *
- * const Example = () => {
- *   return (
- *     <Autosuggest
- *       label="Search for users"
- *       fetcher={fetcher}
- *       onSelectionChange={(item) => console.log(item)}
- *     >
- *       {(user) => (
- *         <Item key={user.id} textValue={user.fullName}>
- *           <ItemLabel>{user.fullName}</ItemLabel>
- *           <ItemDescription>{user.asl}</ItemDescription>
- *         </Item>
- *       )}
- *     </Autosuggest>
- *   );
- * };
- * ```
- */
-declare function Autosuggest<T extends object>({ label, fetcher, children, onSelectionChange, ...props }: AutosuggestProps<T>): React__default.JSX.Element;
-
 type CardSelectProps = BoxProps & {
     /** The design of the trigger button.
      *
@@ -823,7 +742,9 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
     label: string;
     /** Whether or not the combobox is waiting for new suggestions */
     isLoading?: boolean;
-} & Pick<InputProps, "marginTop" | "marginBottom" | "marginY" | "marginX" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingY" | "paddingX" | "leftIcon" | "rightIcon" | "borderTopRightRadius" | "borderTopLeftRadius" | "borderBottomRightRadius" | "borderBottomLeftRadius" | "onFocus">;
+    /** Optional UI to show when there are no matching items */
+    emptyContent?: React__default.ReactNode;
+} & Pick<InputProps, "marginTop" | "marginBottom" | "marginRight" | "marginLeft" | "marginY" | "marginX" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingY" | "paddingX" | "leftIcon" | "rightIcon" | "borderTopRightRadius" | "borderTopLeftRadius" | "borderBottomRightRadius" | "borderBottomLeftRadius" | "onFocus">;
 /**
  * A combobox is a combination of an input and a list of suggestions.
  *
@@ -847,7 +768,7 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
  * </Combobox>
  * ```
  */
-declare function Combobox<T extends object>({ label, isLoading, leftIcon, rightIcon, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius, marginBottom, marginTop, marginX, marginY, paddingBottom, paddingRight, paddingTop, paddingLeft, paddingX, paddingY, onFocus, ...rest }: ComboboxProps<T>): React__default.JSX.Element;
+declare function Combobox<T extends object>({ label, isLoading, leftIcon, rightIcon, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius, marginBottom, marginTop, marginX, marginY, marginRight, marginLeft, paddingBottom, paddingRight, paddingTop, paddingLeft, paddingX, paddingY, emptyContent, ...rest }: ComboboxProps<T>): React__default.JSX.Element;
 
 type FormControlProps = FormControlProps$1;
 declare const FormControl: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", FormControlProps$1>;
@@ -1023,7 +944,7 @@ type InfoSelectProps<T extends object> = {
  */
 declare function InfoSelect<T extends object>({ placeholder, width, height, onChange, value, isLabelSrOnly, defaultValue, ...props }: InfoSelectProps<T>): React__default.JSX.Element;
 
-type InputProps = Exclude<InputProps$1, "variant" | "size"> & {
+type InputProps = Omit<InputProps$1, "variant" | "size"> & {
     /** The input's label */
     label: string;
     /** Icon that shows up to the left */
@@ -1090,6 +1011,8 @@ type ListBoxProps<T> = AriaListBoxProps<T> & Omit<BoxProps, "filter" | "autoFocu
     isLoading?: boolean;
     /** The state of the listbox, provided externally somehow. */
     state: ListState<T> | SelectState<T>;
+    /** UI to render if the collection is empty */
+    emptyContent?: React__default.ReactNode;
 };
 /**
  * A component that renders a list box with selectable options.
@@ -3728,13 +3651,21 @@ declare const theme: {
                     maxHeight: string;
                     width: string;
                     listStyle: string;
+                    borderBottomRadius: string;
                 };
                 item: {
                     paddingX: number;
                     paddingY: number;
+                    marginY: number;
+                    marginX: number;
+                    borderRadius: string;
                     color: string;
                     _hover: {
-                        background: string;
+                        backgroundColor: string;
+                        outline: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
                         outline: string;
                     };
                     _focus: {
@@ -7077,4 +7008,4 @@ type TextProps = Omit<TextProps$1, "textStyle"> & {
  */
 declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", TextProps>;
 
-export { Accordion, AccordionProps, AttachedInputs, Autosuggest, 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, 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 };

package/dist/index.js

@@ -1075,7 +1075,7 @@ var init_Card = __esm({
   "src/card/Card.tsx"() {
     init_layout();
     exports.Card = react.forwardRef(
-      ({ size: size2 = "lg", colorScheme = "white", children, ...props }, ref) => {
+      ({ size: size2 = "sm", colorScheme = "white", children, ...props }, ref) => {
         const styles2 = react.useStyleConfig("Card", {
           colorScheme,
           size: size2
@@ -3750,45 +3750,6 @@ var init_AttachedInputs = __esm({
     };
   }
 });
-function Autosuggest({
-  label,
-  fetcher,
-  children,
-  onSelectionChange,
-  ...props
-}) {
-  const list2 = reactStately.useAsyncList({
-    async load({ filterText }) {
-      return {
-        items: await fetcher(filterText)
-      };
-    }
-  });
-  const handleSelectionChange = (key) => {
-    if (!onSelectionChange) {
-      return;
-    }
-    return onSelectionChange(list2.getItem(key));
-  };
-  return /* @__PURE__ */ React49__namespace.default.createElement(
-    Combobox,
-    {
-      label,
-      items: list2.items,
-      inputValue: list2.filterText,
-      onInputChange: list2.setFilterText,
-      onSelectionChange: handleSelectionChange,
-      isLoading: list2.isLoading,
-      ...props
-    },
-    children
-  );
-}
-var init_Autosuggest = __esm({
-  "src/input/Autosuggest.tsx"() {
-    init_src();
-  }
-});
 var Dialog;
 var init_Dialog = __esm({
   "src/input/Dialog.tsx"() {
@@ -4753,23 +4714,26 @@ function Combobox({
   marginTop,
   marginX,
   marginY,
+  marginRight,
+  marginLeft,
   paddingBottom,
   paddingRight,
   paddingTop,
   paddingLeft,
   paddingX,
   paddingY,
-  onFocus,
+  emptyContent,
   ...rest
 }) {
   const { contains: contains2 } = reactAria.useFilter({ sensitivity: "base" });
-  const state2 = reactStately.useComboBoxState({
-    ...rest,
-    defaultFilter: contains2
-  });
   const inputRef = React49.useRef(null);
   const listBoxRef = React49.useRef(null);
   const popoverRef = React49.useRef(null);
+  const state2 = reactStately.useComboBoxState({
+    ...rest,
+    defaultFilter: contains2,
+    allowsEmptyCollection: Boolean(emptyContent)
+  });
   const {
     inputProps: { size: size2, ...inputProps },
     listBoxProps
@@ -4782,19 +4746,20 @@ function Combobox({
     },
     state2
   );
-  return /* @__PURE__ */ React49__namespace.default.createElement(exports.FormControl, null, /* @__PURE__ */ React49__namespace.default.createElement(
+  return /* @__PURE__ */ React49__namespace.default.createElement(React49__namespace.default.Fragment, null, /* @__PURE__ */ React49__namespace.default.createElement(
     exports.Input,
     {
       ...inputProps,
       ref: inputRef,
       label,
-      onFocus,
       borderBottomLeftRadius: state2.isOpen ? 0 : borderBottomLeftRadius,
       borderBottomRightRadius: state2.isOpen ? 0 : borderBottomRightRadius,
       borderTopLeftRadius,
       borderTopRightRadius,
       marginBottom,
       marginTop,
+      marginRight,
+      marginLeft,
       marginX,
       marginY,
       paddingBottom,
@@ -4832,7 +4797,7 @@ function Combobox({
         ...listBoxProps,
         state: state2,
         listBoxRef,
-        borderBottomRadius: "sm"
+        emptyContent
       },
       rest.children
     )
@@ -4939,6 +4904,7 @@ function ListBox({
       sx: styles2.container,
       "aria-busy": isLoading
     },
+    state2.collection.size === 0 && props.emptyContent,
     Array.from(state2.collection).map(
       (item) => item.type === "section" ? /* @__PURE__ */ React49__namespace.default.createElement(ListBoxSection, { key: item.key, section: item, state: state2 }) : /* @__PURE__ */ React49__namespace.default.createElement(Option, { key: item.key, item, state: state2 })
     )
@@ -4982,18 +4948,18 @@ function ListBoxSection({ section, state: state2 }) {
     heading: section.rendered,
     "aria-label": section["aria-label"]
   });
-  const isFirstSection = section.key !== state2.collection.getFirstKey();
-  const titleBackgroundColor = react.useColorModeValue("platinum", "dimGrey");
+  const isFirstSection = section.key === state2.collection.getFirstKey();
   const titleColor = react.useColorModeValue("darkGrey", "white");
   return /* @__PURE__ */ React49__namespace.default.createElement(react.ListItem, { ...itemProps }, section.rendered && /* @__PURE__ */ React49__namespace.default.createElement(
     react.Box,
     {
-      textStyle: "xs",
-      backgroundColor: titleBackgroundColor,
+      fontSize: "mobile.xs",
       color: titleColor,
       paddingX: 3,
       paddingY: 1,
-      marginTop: isFirstSection ? 0 : 0,
+      marginTop: isFirstSection ? 0 : 3,
+      textTransform: "uppercase",
+      fontWeight: "bold",
       ...headingProps
     },
     section.rendered
@@ -5101,7 +5067,7 @@ exports.Input = void 0;
 var init_Input = __esm({
   "src/input/Input.tsx"() {
     exports.Input = react.forwardRef(
-      ({ label, leftIcon, rightIcon, id, ...props }, ref) => {
+      ({ label, leftIcon, rightIcon, id, size: size2, ...props }, ref) => {
         const formControlProps = react.useFormControlContext();
         const fallbackId = `input-${React49.useId()}`;
         const inputId = id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
@@ -5116,7 +5082,7 @@ var init_Input = __esm({
             ref,
             placeholder: " "
           }
-        ), /* @__PURE__ */ React49__namespace.default.createElement(react.FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label), rightIcon && /* @__PURE__ */ React49__namespace.default.createElement(react.InputRightElement, null, rightIcon));
+        ), /* @__PURE__ */ React49__namespace.default.createElement(react.FormLabel, { htmlFor: inputId }, label), rightIcon && /* @__PURE__ */ React49__namespace.default.createElement(react.InputRightElement, null, rightIcon));
       }
     );
   }
@@ -5412,7 +5378,7 @@ var init_PasswordInput = __esm({
     init_input();
     init_src();
     exports.PasswordInput = react.forwardRef(
-      ({ leftIcon, id, label, ...props }, ref) => {
+      ({ leftIcon, id, label, size: size2, ...props }, ref) => {
         const { isOpen: isShowingPassword, onToggle } = react.useDisclosure();
         const { t: t2 } = useTranslation();
         const formControlProps = react.useFormControlContext();
@@ -12348,7 +12314,6 @@ var init_Textarea = __esm({
 var init_input = __esm({
   "src/input/index.tsx"() {
     init_AttachedInputs();
-    init_Autosuggest();
     init_CardSelect();
     init_Checkbox();
     init_CheckboxGroup();
@@ -18983,7 +18948,7 @@ var init_accordion2 = __esm({
       },
       defaultProps: {
         variant: "list",
-        size: "md"
+        size: "sm"
       }
     });
     accordion_default = config3;
@@ -21190,19 +21155,27 @@ var init_listbox = __esm({
           overflowY: "auto",
           maxHeight: "50vh",
           width: "100%",
-          listStyle: "none"
+          listStyle: "none",
+          borderBottomRadius: "sm"
         },
         item: {
-          paddingX: 3,
-          paddingY: 2,
+          paddingX: 2,
+          paddingY: 1,
+          marginY: 1,
+          marginX: 1,
+          borderRadius: "sm",
           color: themeTools.mode("darkGrey", "white")(props),
           _hover: {
-            background: themeTools.mode("mint", "darkTeal")(props),
+            backgroundColor: themeTools.mode("seaMist", "darkTeal")(props),
+            outline: "none"
+          },
+          _active: {
+            backgroundColor: themeTools.mode("mint", "darkTeal")(props),
             outline: "none"
           },
           _focus: {
             outline: "none",
-            backgroundColor: themeTools.mode("mint", "darkTeal")(props)
+            backgroundColor: themeTools.mode("seaMist", "darkTeal")(props)
           },
           _selected: {
             backgroundColor: themeTools.mode("pine", "pine")(props),
@@ -23261,7 +23234,6 @@ Object.defineProperty(exports, 'Section', {
   get: function () { return reactStately.Section; }
 });
 exports.tokens = tokens10__namespace;
-exports.Autosuggest = Autosuggest;
 exports.Combobox = Combobox;
 exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Autosuggest, 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-C3DS6BFF.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, 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-7GRTZA6T.mjs';

package/package.json

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

package/src/card/Card.tsx

@@ -25,10 +25,10 @@ export type CardProps = Exclude<BoxProps, "size"> & {
  * </Card>
  * ```
  *
- * There are lots of color schemes available. You can also set the size as either `sm` or `lg`. The default is `lg`.
+ * There are lots of color schemes available. You can also set the size as either `sm` or `lg`. The default is `sm`.
  *
  * ```tsx
- * <Card colorScheme="orange" size="sm">
+ * <Card colorScheme="orange" size="lg">
  *   A smaller card
  * </Card>
  * ```
@@ -45,7 +45,7 @@ export type CardProps = Exclude<BoxProps, "size"> & {
  * ```
  */
 export const Card = forwardRef<CardProps, As>(
-  ({ size = "lg", colorScheme = "white", children, ...props }, ref) => {
+  ({ size = "sm", colorScheme = "white", children, ...props }, ref) => {
     const styles = useStyleConfig("Card", {
       colorScheme,
       size,

package/src/input/Combobox.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import { AriaComboBoxProps, useComboBox, useFilter } from "react-aria";
 import { useComboBoxState } from "react-stately";
-import { ColorSpinner, FormControl, Input, InputProps, ListBox } from "..";
+import { ColorSpinner, Input, InputProps, ListBox } from "..";
 import { Popover } from "./Popover";
 
 export type ComboboxProps<T> = AriaComboBoxProps<T> & {
@@ -9,10 +9,14 @@ export type ComboboxProps<T> = AriaComboBoxProps<T> & {
   label: string;
   /** Whether or not the combobox is waiting for new suggestions */
   isLoading?: boolean;
+  /** Optional UI to show when there are no matching items */
+  emptyContent?: React.ReactNode;
 } & Pick<
     InputProps,
     | "marginTop"
     | "marginBottom"
+    | "marginRight"
+    | "marginLeft"
     | "marginY"
     | "marginX"
     | "paddingTop"
@@ -65,25 +69,29 @@ export function Combobox<T extends object>({
   marginTop,
   marginX,
   marginY,
+  marginRight,
+  marginLeft,
   paddingBottom,
   paddingRight,
   paddingTop,
   paddingLeft,
   paddingX,
   paddingY,
-  onFocus,
+  emptyContent,
   ...rest
 }: ComboboxProps<T>) {
   const { contains } = useFilter({ sensitivity: "base" });
-  const state = useComboBoxState({
-    ...rest,
-    defaultFilter: contains,
-  });
 
   const inputRef = useRef(null);
   const listBoxRef = useRef(null);
   const popoverRef = useRef(null);
 
+  const state = useComboBoxState({
+    ...rest,
+    defaultFilter: contains,
+    allowsEmptyCollection: Boolean(emptyContent),
+  });
+
   const {
     inputProps: { size, ...inputProps },
     listBoxProps,
@@ -98,18 +106,19 @@ export function Combobox<T extends object>({
   );
 
   return (
-    <FormControl>
+    <>
       <Input
         {...inputProps}
         ref={inputRef}
         label={label}
-        onFocus={onFocus}
         borderBottomLeftRadius={state.isOpen ? 0 : borderBottomLeftRadius}
         borderBottomRightRadius={state.isOpen ? 0 : borderBottomRightRadius}
         borderTopLeftRadius={borderTopLeftRadius}
         borderTopRightRadius={borderTopRightRadius}
         marginBottom={marginBottom}
         marginTop={marginTop}
+        marginRight={marginRight}
+        marginLeft={marginLeft}
         marginX={marginX}
         marginY={marginY}
         paddingBottom={paddingBottom}
@@ -147,12 +156,12 @@ export function Combobox<T extends object>({
             {...listBoxProps}
             state={state}
             listBoxRef={listBoxRef}
-            borderBottomRadius="sm"
+            emptyContent={emptyContent}
           >
             {rest.children}
           </ListBox>
         </Popover>
       )}
-    </FormControl>
+    </>
   );
 }

package/src/input/Input.tsx

@@ -10,7 +10,7 @@ import {
 } from "@chakra-ui/react";
 import React, { useId } from "react";
 
-export type InputProps = Exclude<ChakraInputProps, "variant" | "size"> & {
+export type InputProps = Omit<ChakraInputProps, "variant" | "size"> & {
   /** The input's label */
   label: string;
   /** Icon that shows up to the left */
@@ -34,7 +34,7 @@ export type InputProps = Exclude<ChakraInputProps, "variant" | "size"> & {
  * ```
  */
 export const Input = forwardRef<InputProps, "input">(
-  ({ label, leftIcon, rightIcon, id, ...props }, ref) => {
+  ({ label, leftIcon, rightIcon, id, size, ...props }, ref) => {
     const formControlProps = useFormControlContext();
     const fallbackId = `input-${useId()}`;
     const inputId = id ?? formControlProps?.id ?? fallbackId;
@@ -50,9 +50,7 @@ export const Input = forwardRef<InputProps, "input">(
           ref={ref}
           placeholder=" " // This is needed to make the label work as expected
         />
-        <FormLabel htmlFor={inputId} pointerEvents="none">
-          {label}
-        </FormLabel>
+        <FormLabel htmlFor={inputId}>{label}</FormLabel>
         {rightIcon && <InputRightElement>{rightIcon}</InputRightElement>}
       </InputGroup>
     );

package/src/input/ListBox.tsx

@@ -28,6 +28,8 @@ type ListBoxProps<T> = AriaListBoxProps<T> &
     isLoading?: boolean;
     /** The state of the listbox, provided externally somehow. */
     state: ListState<T> | SelectState<T>;
+    /** UI to render if the collection is empty */
+    emptyContent?: React.ReactNode;
   };
 
 /**
@@ -80,6 +82,7 @@ export function ListBox<T extends object>({
       sx={styles.container}
       aria-busy={isLoading}
     >
+      {state.collection.size === 0 && props.emptyContent}
       {Array.from(state.collection).map((item) =>
         item.type === "section" ? (
           <ListBoxSection key={item.key} section={item} state={state} />
@@ -184,19 +187,19 @@ function ListBoxSection({ section, state }: ListBoxSectionProps) {
     "aria-label": section["aria-label"],
   });
 
-  const isFirstSection = section.key !== state.collection.getFirstKey();
-  const titleBackgroundColor = useColorModeValue("platinum", "dimGrey");
+  const isFirstSection = section.key === state.collection.getFirstKey();
   const titleColor = useColorModeValue("darkGrey", "white");
   return (
     <ListItem {...itemProps}>
       {section.rendered && (
         <Box
-          textStyle="xs"
-          backgroundColor={titleBackgroundColor}
+          fontSize="mobile.xs"
           color={titleColor}
           paddingX={3}
           paddingY={1}
-          marginTop={isFirstSection ? 0 : 0}
+          marginTop={isFirstSection ? 0 : 3}
+          textTransform="uppercase"
+          fontWeight="bold"
           {...headingProps}
         >
           {section.rendered}

package/src/input/PasswordInput.tsx

@@ -17,7 +17,7 @@ import { createTexts, useTranslation } from "..";
 
 export type PasswordInputProps = InputProps;
 export const PasswordInput = forwardRef<PasswordInputProps, "input">(
-  ({ leftIcon, id, label, ...props }, ref) => {
+  ({ leftIcon, id, label, size, ...props }, ref) => {
     const { isOpen: isShowingPassword, onToggle } = useDisclosure();
     const { t } = useTranslation();
     const formControlProps = useFormControlContext();

package/src/input/index.tsx

@@ -1,7 +1,6 @@
 export { FormHelperText, InputGroup } from "@chakra-ui/react";
 export type { InputGroupProps } from "@chakra-ui/react";
 export * from "./AttachedInputs";
-export * from "./Autosuggest";
 export * from "./CardSelect";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";

package/src/theme/components/accordion.ts

@@ -136,7 +136,7 @@ const config = helpers.defineMultiStyleConfig({
   },
   defaultProps: {
     variant: "list",
-    size: "md",
+    size: "sm",
   },
 });
 

package/src/theme/components/listbox.ts

@@ -20,18 +20,26 @@ const config = helpers.defineMultiStyleConfig({
       maxHeight: "50vh",
       width: "100%",
       listStyle: "none",
+      borderBottomRadius: "sm",
     },
     item: {
-      paddingX: 3,
-      paddingY: 2,
+      paddingX: 2,
+      paddingY: 1,
+      marginY: 1,
+      marginX: 1,
+      borderRadius: "sm",
       color: mode("darkGrey", "white")(props),
       _hover: {
-        background: mode("mint", "darkTeal")(props),
+        backgroundColor: mode("seaMist", "darkTeal")(props),
+        outline: "none",
+      },
+      _active: {
+        backgroundColor: mode("mint", "darkTeal")(props),
         outline: "none",
       },
       _focus: {
         outline: "none",
-        backgroundColor: mode("mint", "darkTeal")(props),
+        backgroundColor: mode("seaMist", "darkTeal")(props),
       },
       _selected: {
         backgroundColor: mode("pine", "pine")(props),

package/src/input/Autosuggest.tsx

@@ -1,136 +0,0 @@
-import React from "react";
-import { useAsyncList } from "react-stately";
-import { Combobox, ComboboxProps, InputProps } from "../";
-
-type AutosuggestProps<T> = {
-  /** The label of the search field */
-  label: string;
-  /**
-   * The function responsible for fetching new suggestion items, based on the query.
-   *
-   * This will typically be an API call to a backend service.
-   *
-   * @example
-   * ```tsx
-   * const fetcher = async (query?: string) => {
-   *   const response = await fetch(`https://some.api.com/filter=${query}`);
-   *   const json = await response.json();
-   *   return json;
-   * };
-   * ```
-   * */
-  fetcher: (query?: string) => Promise<Iterable<T>>;
-  /**
-   * A render function that receives each item, and returns the UI for each item in the list.
-   *
-   * @example
-   * ```tsx
-   * <Autosuggest {...otherProps}>
-   *  {(user) => (
-   *    <Item key={user.id} textValue={user.fullName}>
-   *       <ItemLabel>{user.fullName}</ItemLabel>
-   *       <ItemDescription>{user.asl}</ItemDescription>
-   *    </Item>
-   *  )}
-   * </Autosuggest>
-   * ```
-   *
-   * You technically don't need to use the `<SelectItemLabel />` and `<SelectItemDescription />` components, but they are recommended to improve the accessibility of the search results. You can style them however you want, so there should never be a reason not to include at least the `<SelectItemLabel />` component. But who's judging?
-   * */
-  children: ComboboxProps<T>["children"];
-  /**
-   * Callback for when the selection changes. Returns the entire item.
-   */
-  onSelectionChange?: (item: T) => void;
-  /** The selected item key (controlled) */
-  selectedKey?: ComboboxProps<T>["selectedKey"];
-  /** What should open the menu.
-   *
-   * Defaults to "input"
-   */
-  menuTrigger?: ComboboxProps<T>["menuTrigger"];
-} & Pick<
-  InputProps,
-  | "marginTop"
-  | "marginBottom"
-  | "marginY"
-  | "marginX"
-  | "paddingTop"
-  | "paddingBottom"
-  | "paddingLeft"
-  | "paddingRight"
-  | "paddingY"
-  | "paddingX"
-  | "leftIcon"
-  | "rightIcon"
-  | "borderTopRightRadius"
-  | "borderTopLeftRadius"
-  | "borderBottomRightRadius"
-  | "borderBottomLeftRadius"
-  | "onFocus"
->;
-/**
- * A component that provides an autocomplete search field with suggestions.
- *
- * This component requires a `fetcher` prop, which is a function that receives a query string, and returns a list of items that match the query.
- *
- * @example
- * ```tsx
- * const fetcher = async (query?: string) => {
- *   const response = await fetch(`https://some.api.vy.no/filter=${query}`);
- *   const json = await response.json();
- *   return json;
- * };
- *
- * const Example = () => {
- *   return (
- *     <Autosuggest
- *       label="Search for users"
- *       fetcher={fetcher}
- *       onSelectionChange={(item) => console.log(item)}
- *     >
- *       {(user) => (
- *         <Item key={user.id} textValue={user.fullName}>
- *           <ItemLabel>{user.fullName}</ItemLabel>
- *           <ItemDescription>{user.asl}</ItemDescription>
- *         </Item>
- *       )}
- *     </Autosuggest>
- *   );
- * };
- * ```
- */
-export function Autosuggest<T extends object>({
-  label,
-  fetcher,
-  children,
-  onSelectionChange,
-  ...props
-}: AutosuggestProps<T>) {
-  const list = useAsyncList<T>({
-    async load({ filterText }) {
-      return {
-        items: await fetcher(filterText),
-      };
-    },
-  });
-  const handleSelectionChange = (key: React.Key) => {
-    if (!onSelectionChange) {
-      return;
-    }
-    return onSelectionChange(list.getItem(key));
-  };
-  return (
-    <Combobox
-      label={label}
-      items={list.items}
-      inputValue={list.filterText}
-      onInputChange={list.setFilterText}
-      onSelectionChange={handleSelectionChange}
-      isLoading={list.isLoading}
-      {...props}
-    >
-      {children}
-    </Combobox>
-  );
-}