@vygruppen/spor-react 9.13.1 → 9.13.3

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@9.13.1 build
+> @vygruppen/spor-react@9.13.3 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,12 +9,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.js 526.31 KB
-CJS ⚡️ Build success in 2183ms
 ESM dist/index.mjs                      2.19 KB
-ESM dist/CountryCodeSelect-XKJDLCJZ.mjs 1.19 KB
-ESM dist/chunk-NMEIV2NI.mjs             413.37 KB
-ESM ⚡️ Build success in 2183ms
-DTS ⚡️ Build success in 13025ms
-DTS dist/index.d.ts  343.71 KB
-DTS dist/index.d.mts 343.71 KB
+ESM dist/chunk-Y56HXMZC.mjs             414.22 KB
+ESM dist/CountryCodeSelect-7VDV2T5R.mjs 1.19 KB
+ESM ⚡️ Build success in 2170ms
+CJS dist/index.js 527.27 KB
+CJS ⚡️ Build success in 2171ms
+DTS ⚡️ Build success in 16058ms
+DTS dist/index.d.ts  345.58 KB
+DTS dist/index.d.mts 345.58 KB

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @vygruppen/spor-react
 
+## 9.13.3
+
+### Patch Changes
+
+- bec48fc: Add font-family to global CSS file
+- e606bf3: RadioCardGroup & RadioCard: Add documentation for props
+
+## 9.13.2
+
+### Patch Changes
+
+- 59c1cc8: RadioCard: Fix accessibility features
+- 4aa7c96: Added body prop for FullScreenDrawer and SimpleDrawer for accessability reasons
+
 ## 9.13.1
 
 ### Patch Changes

package/dist/{CountryCodeSelect-XKJDLCJZ.mjs → CountryCodeSelect-7VDV2T5R.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-NMEIV2NI.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-Y56HXMZC.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-NMEIV2NI.mjs → chunk-Y56HXMZC.mjs}

@@ -1758,7 +1758,7 @@ var texts4 = createTexts({
     sv: "Landskod"
   }
 });
-var LazyCountryCodeSelect = React87__default.lazy(() => import('./CountryCodeSelect-XKJDLCJZ.mjs'));
+var LazyCountryCodeSelect = React87__default.lazy(() => import('./CountryCodeSelect-7VDV2T5R.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React87__default.createElement(Radio$1, { ...props, ref });
 });
@@ -1923,25 +1923,13 @@ var RadioCardGroup = ({
         defaultValue: defaultValue || ""
       }
     },
-    /* @__PURE__ */ React87__default.createElement(
-      Stack$1,
-      {
-        as: "fieldset",
-        direction: direction2,
-        "aria-labelledby": groupLabel || name,
-        role: "radiogroup",
-        tabIndex: 0,
-        ...props
-      },
-      groupLabel && /* @__PURE__ */ React87__default.createElement(FormLabel, { as: "legend", id: groupLabel }, groupLabel),
-      children
-    )
+    /* @__PURE__ */ React87__default.createElement(Stack$1, { as: "fieldset", direction: direction2, ...props }, groupLabel && /* @__PURE__ */ React87__default.createElement(FormLabel, { as: "legend", id: groupLabel }, groupLabel), children)
   );
 };
 
 // src/layout/RadioCard.tsx
 var RadioCard = forwardRef(
-  ({ children, value = "base", isDisabled, ...props }, ref) => {
+  ({ children, value, isDisabled, ...props }, ref) => {
     const context = useContext(RadioCardGroupContext);
     if (!context) {
       throw new Error(
@@ -1950,52 +1938,72 @@ var RadioCard = forwardRef(
     }
     const { name, selectedValue, onChange, variant } = context;
     const styles3 = useMultiStyleConfig("RadioCard", { variant });
+    const [isKeyboardUser, setKeyboardUser] = useState(false);
+    const [isFocused, setFocus] = useState(false);
     const isChecked = selectedValue === value;
-    const radioCardId = `radio-card-${useId()}`;
     useEffect(() => {
-      if (isChecked && typeof ref !== "function" && (ref == null ? void 0 : ref.current)) {
-        ref.current.focus();
-      }
-    }, [isChecked]);
-    const handleKeyDown = (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        onChange(value);
-      }
-      if (event.key === "ArrowRight" || event.key === "ArrowDown" || event.key === "ArrowLeft" || event.key === "ArrowUp") {
-        const nextRadioCard = event.currentTarget.nextElementSibling;
-        if (nextRadioCard) {
-          nextRadioCard.focus();
+      const handleMouseDown = () => setKeyboardUser(false);
+      const handleKeyDown = (event) => {
+        if (event.key === " ") {
+          setFocus(false);
+        } else {
+          setKeyboardUser(true);
         }
+      };
+      window.addEventListener("mousedown", handleMouseDown);
+      window.addEventListener("keydown", handleKeyDown);
+      return () => {
+        window.removeEventListener("mousedown", handleMouseDown);
+        window.removeEventListener("keydown", handleKeyDown);
+      };
+    }, []);
+    useEffect(() => {
+      if (isKeyboardUser && isChecked) {
+        setFocus(true);
+      } else {
+        setFocus(false);
       }
-    };
-    return /* @__PURE__ */ React87__default.createElement(Box, { as: "label", "aria-label": String(children), onKeyDown: handleKeyDown }, /* @__PURE__ */ React87__default.createElement(
-      chakra.input,
-      {
-        type: "radio",
-        id: radioCardId,
-        ref,
-        value,
-        name,
-        checked: isChecked,
-        onChange: () => onChange(value),
-        disabled: isDisabled,
-        __css: styles3.radioInput
-      }
-    ), /* @__PURE__ */ React87__default.createElement(
+    }, [isKeyboardUser, isChecked]);
+    const inputId = `radio-card-${useId()}`;
+    return /* @__PURE__ */ React87__default.createElement(
       Box,
       {
-        ...props,
-        tabIndex: 0,
-        ref,
-        role: "radio",
-        "aria-checked": isChecked,
-        "aria-labelledby": radioCardId,
-        __css: { ...styles3.container, ...isChecked && styles3.checked },
-        "data-checked": isChecked,
-        "data-disabled": isDisabled
+        onFocus: () => isKeyboardUser && setFocus(true),
+        onBlur: () => setFocus(false)
       },
-      children
-    ));
+      /* @__PURE__ */ React87__default.createElement(
+        chakra.input,
+        {
+          type: "radio",
+          id: inputId,
+          name,
+          ref,
+          checked: isChecked,
+          onChange: () => onChange(value),
+          disabled: isDisabled,
+          __css: styles3.radioInput
+        }
+      ),
+      /* @__PURE__ */ React87__default.createElement(
+        Box,
+        {
+          as: "label",
+          name,
+          htmlFor: inputId,
+          "aria-checked": isChecked,
+          "data-checked": isChecked,
+          "data-disabled": isDisabled,
+          ...props,
+          __css: {
+            ...styles3.container,
+            ...isChecked && styles3.checked,
+            ...isFocused && !isChecked && styles3.focused,
+            ...isChecked && isFocused && styles3.focusedChecked
+          }
+        },
+        children
+      )
+    );
   }
 );
 var StaticCard = forwardRef(
@@ -2507,7 +2515,8 @@ var Button2 = forwardRef((props, ref) => {
       "aria-label": ariaLabel,
       "aria-busy": isLoading,
       disabled: isDisabled || isLoading,
-      position: "relative"
+      position: "relative",
+      fontFamily: "Vy Sans"
     },
     isLoading && /* @__PURE__ */ React87__default.createElement(Center, { position: "absolute", right: 0, left: 0, top: 1, bottom: 0 }, /* @__PURE__ */ React87__default.createElement(
       ColorInlineLoader,
@@ -4365,7 +4374,8 @@ var FullScreenDrawer = ({
   leftButton = null,
   rightButton = /* @__PURE__ */ React87__default.createElement(DrawerCloseButton2, null),
   isOpen,
-  onClose
+  onClose,
+  body
 }) => {
   const [isContentBoxScrolled, setContentBoxScrolled] = useState(false);
   const onContentScroll = (e) => {
@@ -4396,7 +4406,7 @@ var FullScreenDrawer = ({
         rightButton
       }
     ),
-    /* @__PURE__ */ React87__default.createElement(DrawerBody, { overflow: "auto", onScroll: onContentScroll }, children)
+    /* @__PURE__ */ React87__default.createElement(DrawerBody, { overflow: "auto", onScroll: onContentScroll, ...body }, children)
   ));
 };
 var DrawerTopMenu = ({
@@ -4481,9 +4491,10 @@ var SimpleDrawer = ({
   placement,
   children,
   title,
+  body,
   ...props
 }) => {
-  return /* @__PURE__ */ React87__default.createElement(Drawer, { placement, ...props }, /* @__PURE__ */ React87__default.createElement(DrawerOverlay, null), /* @__PURE__ */ React87__default.createElement(DrawerContent, null, /* @__PURE__ */ React87__default.createElement(DrawerCloseButton, null), title && /* @__PURE__ */ React87__default.createElement(ModalHeader, null, title), /* @__PURE__ */ React87__default.createElement(DrawerBody, null, children)));
+  return /* @__PURE__ */ React87__default.createElement(Drawer, { placement, ...props }, /* @__PURE__ */ React87__default.createElement(DrawerOverlay, null), /* @__PURE__ */ React87__default.createElement(DrawerContent, null, /* @__PURE__ */ React87__default.createElement(DrawerCloseButton, null), title && /* @__PURE__ */ React87__default.createElement(ModalHeader, null, title), /* @__PURE__ */ React87__default.createElement(DrawerBody, { ...body }, children)));
 };
 var EXPIRATION_DELAY = 1e3 * 60 * 60 * 24 * 30;
 var Nudge = ({
@@ -13271,18 +13282,22 @@ function outlineBorder(state2, props) {
 }
 
 // src/theme/components/radio-card.ts
-var parts17 = anatomy$1("radio-card").parts("container", "checked", "radioInput");
+var parts17 = anatomy$1("radio-card").parts(
+  "container",
+  "checked",
+  "radioInput",
+  "focused",
+  "focusedChecked"
+);
 var helpers24 = createMultiStyleConfigHelpers$1(parts17.keys);
 var config33 = helpers24.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
-      border: "none",
       overflow: "hidden",
       fontSize: "inherit",
       display: "block",
       cursor: "pointer",
       borderRadius: "sm",
-      ...focusVisibleStyles(props),
       transitionProperty: "common",
       transitionDuration: "fast",
       _disabled: {
@@ -13317,9 +13332,6 @@ var config33 = helpers24.defineMultiStyleConfig({
         _active: {
           ...baseBackground("active", props),
           ...baseBorder("active", props)
-        },
-        _focus: {
-          ...outlineBorder("focus", props)
         }
       },
       checked: {
@@ -13329,12 +13341,23 @@ var config33 = helpers24.defineMultiStyleConfig({
         _active: {
           ...baseBackground("active", props),
           ...baseBorder("active", props)
-        },
-        _focus: {
-          outline: "4px solid",
-          outlineStyle: "double",
-          ...outlineBorder("focus", props),
-          outlineOffset: "-1px"
+        }
+      },
+      focusedChecked: {
+        outline: "4px solid",
+        outlineStyle: "double",
+        ...outlineBorder("focus", props),
+        outlineOffset: "-1px"
+      },
+      focused: {
+        outline: "2px solid",
+        ...outlineBorder("focus", props),
+        outlineOffset: "1px",
+        boxShadow: `inset 0 0 0 1px rgba(0, 0, 0, 0.40)`,
+        _hover: {
+          ...baseBorder("hover", props),
+          boxShadow: "none",
+          outlineOffset: "0px"
         }
       }
     }),
@@ -13351,9 +13374,6 @@ var config33 = helpers24.defineMultiStyleConfig({
         _active: {
           ...floatingBackground("active", props),
           ...floatingBorder("active", props)
-        },
-        _focus: {
-          ...outlineBorder("focus", props)
         }
       },
       checked: {
@@ -13364,12 +13384,23 @@ var config33 = helpers24.defineMultiStyleConfig({
         _active: {
           ...floatingBackground("active", props),
           ...floatingBorder("active", props)
-        },
-        _focus: {
-          outline: "4px solid",
-          outlineStyle: "double",
-          ...outlineBorder("focus", props),
-          outlineOffset: "-1px"
+        }
+      },
+      focusedChecked: {
+        outline: "4px solid",
+        outlineStyle: "double",
+        ...outlineBorder("focus", props),
+        outlineOffset: "-1px"
+      },
+      focused: {
+        outline: "2px solid",
+        ...outlineBorder("focus", props),
+        outlineOffset: "1px",
+        boxShadow: `inset 0 0 0 1px rgba(0, 0, 0, 0.10)`,
+        _hover: {
+          ...floatingBorder("hover", props),
+          boxShadow: "md",
+          outlineOffset: "0px"
         }
       }
     })
@@ -14197,6 +14228,9 @@ var fontFaces = `
   font-weight: 400;
   font-display: swap
 }
+  body {
+    font-family: "Vy Sans", sans-serif;
+  }
 `;
 
 // src/theme/index.ts

package/dist/index.d.mts

@@ -88,13 +88,19 @@ declare const Stack: _chakra_ui_system_dist_system_types.ComponentWithAs<"div",
  * @see Docs https://spor.vy.no/components/radiocard
  */
 type RadioCardProps = BoxProps & {
+    /** The value that will be passed to the `RadioCardGroup`'s `onChange` function if this `RadioCard` is selected.. */
     value: string;
+    /** The content of the RadioCard. */
     children: React.ReactNode;
+    /** Determines if the RadioCard is disabled. */
     isDisabled?: boolean;
 };
 declare const RadioCard: _chakra_ui_system_dist_system_types.ComponentWithAs<_chakra_ui_system_dist_system_types.As, BoxProps & {
+    /** The value that will be passed to the `RadioCardGroup`'s `onChange` function if this `RadioCard` is selected.. */
     value: string;
+    /** The content of the RadioCard. */
     children: React.ReactNode;
+    /** Determines if the RadioCard is disabled. */
     isDisabled?: boolean | undefined;
 }>;
 
@@ -109,15 +115,23 @@ type RadioGroupContextProps = {
     onChange: (value: string) => void;
     variant?: "base" | "floating";
     defaultValue?: string;
+    value?: string;
 };
 declare const RadioCardGroupContext: React.Context<RadioGroupContextProps | null>;
 type RadioCardGroupProps = BoxProps & {
+    /** A string that will be assigned as the name attribute to all RadioCard components within the group. */
     name: string;
+    /** The RadioCard components that make up the group. */
     children: React.ReactNode;
+    /** Optional. Determines the style of the RadioCard. Can be either "base" or "floating". */
     variant?: "base" | "floating";
+    /** Optional. Determines the direction of the group. Can be either "row" or "column". */
     direction?: "row" | "column";
+    /** Optional. A label for the group. */
     groupLabel?: string;
+    /** Optional. The default value of the RadioCard group. */
     defaultValue?: string;
+    /** Optional. A function that will be called when the selected value changes. The function receives the value of the selected RadioCard. */
     onChange?: (value: string) => void;
 };
 declare const RadioCardGroup: React.FC<RadioCardGroupProps>;
@@ -1966,31 +1980,17 @@ type DrawerProps = DrawerProps$1;
 declare const Drawer: (props: DrawerProps) => React.JSX.Element;
 declare const DrawerContent: _chakra_ui_system_dist_system_types.ComponentWithAs<any, DrawerContentProps>;
 
-type DrawerPlacement = "top" | "right" | "bottom" | "left";
-type FullScreenDrawerProps = {
-    /** The content inside the drawer */
-    children: React.ReactNode;
-    /** The title in the middle of the top menu */
-    title?: String;
-    /** Determines which side the drawer slides from */
-    placement?: DrawerPlacement;
-    /** A React component that will be placed to the left in the modal header */
-    leftButton?: React.ReactNode;
-    /** A React component that will be placed to the right in the modal header */
-    rightButton?: React.ReactNode;
-    /** Determines if the drawer is open or closed */
-    isOpen: boolean;
-    /** Function that will be called when the drawer closes */
-    onClose: () => void;
+type DrawerBodyProps = {
+    id?: string;
 };
-declare const FullScreenDrawer: ({ children, title, placement, leftButton, rightButton, isOpen, onClose, }: FullScreenDrawerProps) => React.JSX.Element;
-
 type SimpleDrawerProps = {
     children: React.ReactNode;
     title?: React.ReactNode;
     placement: "top" | "right" | "bottom" | "left";
     isOpen: boolean;
     onClose: () => void;
+    /** Props for drawer body */
+    body?: DrawerBodyProps;
 };
 /** A very basic drawer component that's easy to use
  *
@@ -2002,7 +2002,28 @@ type SimpleDrawerProps = {
  *
  * For more advanced use cases, see the [Drawer](./Drawer.tsx) component.
  */
-declare const SimpleDrawer: ({ placement, children, title, ...props }: SimpleDrawerProps) => React.JSX.Element;
+declare const SimpleDrawer: ({ placement, children, title, body, ...props }: SimpleDrawerProps) => React.JSX.Element;
+
+type DrawerPlacement = "top" | "right" | "bottom" | "left";
+type FullScreenDrawerProps = {
+    /** The content inside the drawer */
+    children: React.ReactNode;
+    /** The title in the middle of the top menu */
+    title?: String;
+    /** Determines which side the drawer slides from */
+    placement?: DrawerPlacement;
+    /** A React component that will be placed to the left in the modal header */
+    leftButton?: React.ReactNode;
+    /** A React component that will be placed to the right in the modal header */
+    rightButton?: React.ReactNode;
+    /** Determines if the drawer is open or closed */
+    isOpen: boolean;
+    /** Function that will be called when the drawer closes */
+    onClose: () => void;
+    /** Props for drawer body */
+    body?: DrawerBodyProps;
+};
+declare const FullScreenDrawer: ({ children, title, placement, leftButton, rightButton, isOpen, onClose, body, }: FullScreenDrawerProps) => React.JSX.Element;
 
 type TooltipProps = PopoverProps & {
     /**
@@ -5908,6 +5929,11 @@ declare const theme: {
         RadioCard: {
             baseStyle?: ((props: any) => {
                 container: {
+                    overflow: string;
+                    fontSize: string;
+                    display: string;
+                    cursor: string;
+                    borderRadius: string;
                     transitionProperty: string;
                     transitionDuration: string;
                     _disabled: {
@@ -5925,18 +5951,6 @@ declare const theme: {
                         backgroundColor: string;
                         pointerEvents: string;
                     };
-                    _focusVisible: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    };
-                    border: string;
-                    overflow: string;
-                    fontSize: string;
-                    display: string;
-                    cursor: string;
-                    borderRadius: string;
                 };
                 checked: {
                     backgroundColor: string;
@@ -5952,7 +5966,7 @@ declare const theme: {
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("container" | "checked" | "radioInput")[];
+                    keys: ("container" | "checked" | "radioInput" | "focused" | "focusedChecked")[];
                 }>;
             } | undefined;
             variants?: {
@@ -5980,9 +5994,6 @@ declare const theme: {
                             outlineColor: string;
                             backgroundColor: string;
                         };
-                        _focus: {
-                            outlineColor: string;
-                        };
                         outlineWidth: string;
                         outlineColor: string;
                         outlineStyle: string;
@@ -6012,9 +6023,6 @@ declare const theme: {
                             outlineColor: string;
                             backgroundColor: string;
                         };
-                        _focus: {
-                            outlineColor: string;
-                        };
                         outline: string;
                         outlineColor: string;
                         backgroundColor: string;
@@ -6041,12 +6049,30 @@ declare const theme: {
                             outlineColor: string;
                             backgroundColor: string;
                         };
-                        _focus: {
+                    };
+                    focusedChecked: {
+                        outlineOffset: string;
+                        outlineColor: string;
+                        outline: string;
+                        outlineStyle: string;
+                    };
+                    focused: {
+                        outlineOffset: string;
+                        boxShadow: string;
+                        _hover: {
+                            boxShadow: string;
                             outlineOffset: string;
+                            outlineWidth: string;
                             outlineColor: string;
-                            outline: string;
                             outlineStyle: string;
+                        } | {
+                            boxShadow: string;
+                            outlineOffset: string;
+                            outline: string;
+                            outlineColor: string;
                         };
+                        outlineColor: string;
+                        outline: string;
                     };
                 };
                 floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -6063,9 +6089,6 @@ declare const theme: {
                             outlineColor: string;
                             backgroundColor: string;
                         };
-                        _focus: {
-                            outlineColor: string;
-                        };
                         outline: string;
                         outlineColor: string;
                         backgroundColor: string;
@@ -6081,12 +6104,24 @@ declare const theme: {
                             outlineColor: string;
                             backgroundColor: string;
                         };
-                        _focus: {
+                    };
+                    focusedChecked: {
+                        outlineOffset: string;
+                        outlineColor: string;
+                        outline: string;
+                        outlineStyle: string;
+                    };
+                    focused: {
+                        outlineOffset: string;
+                        boxShadow: string;
+                        _hover: {
+                            boxShadow: string;
                             outlineOffset: string;
-                            outlineColor: string;
                             outline: string;
-                            outlineStyle: string;
+                            outlineColor: string;
                         };
+                        outlineColor: string;
+                        outline: string;
                     };
                 };
             } | undefined;
@@ -6095,7 +6130,7 @@ declare const theme: {
                 variant?: "base" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
-            parts: ("container" | "checked" | "radioInput")[];
+            parts: ("container" | "checked" | "radioInput" | "focused" | "focusedChecked")[];
         };
         Radio: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -9550,4 +9585,4 @@ declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", Tex
  **/
 declare function slugify(text: string | string[], maxLength?: number): string;
 
-export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, 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, FullScreenDrawer, 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, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, TogglePride, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoDefault, VyLogoDefaultProps, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, usePride, useToast, useTranslation };
+export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, 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, DrawerBodyProps, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, 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, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, TogglePride, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoDefault, VyLogoDefaultProps, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, usePride, useToast, useTranslation };