@vygruppen/spor-react 9.13.0 → 9.13.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@9.13.0 build
+> @vygruppen/spor-react@9.13.2 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -10,11 +10,11 @@
 ESM Build start
 DTS Build start
 ESM dist/index.mjs                      2.19 KB
-ESM dist/CountryCodeSelect-MMRSNFMQ.mjs 1.19 KB
-ESM dist/chunk-KJYJYQBK.mjs             413.29 KB
-ESM ⚡️ Build success in 2283ms
-CJS dist/index.js 526.21 KB
-CJS ⚡️ Build success in 2284ms
-DTS ⚡️ Build success in 13890ms
-DTS dist/index.d.ts  343.67 KB
-DTS dist/index.d.mts 343.67 KB
+ESM dist/CountryCodeSelect-QPCMMHSU.mjs 1.19 KB
+ESM dist/chunk-UOSLFTBE.mjs             414.14 KB
+ESM ⚡️ Build success in 2239ms
+CJS dist/index.js 527.19 KB
+CJS ⚡️ Build success in 2239ms
+DTS ⚡️ Build success in 15663ms
+DTS dist/index.d.ts  344.57 KB
+DTS dist/index.d.mts 344.57 KB

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @vygruppen/spor-react
 
+## 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
+
+- 366d1f9: Adds onChange and fixes bug on RadioCard
+
 ## 9.13.0
 
 ### Minor Changes

package/dist/{CountryCodeSelect-MMRSNFMQ.mjs → CountryCodeSelect-QPCMMHSU.mjs}

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

package/dist/{chunk-KJYJYQBK.mjs → chunk-UOSLFTBE.mjs}

@@ -1758,7 +1758,7 @@ var texts4 = createTexts({
     sv: "Landskod"
   }
 });
-var LazyCountryCodeSelect = React87__default.lazy(() => import('./CountryCodeSelect-MMRSNFMQ.mjs'));
+var LazyCountryCodeSelect = React87__default.lazy(() => import('./CountryCodeSelect-QPCMMHSU.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React87__default.createElement(Radio$1, { ...props, ref });
 });
@@ -1902,6 +1902,7 @@ var RadioCardGroup = ({
   direction: direction2 = "row",
   groupLabel,
   defaultValue,
+  onChange,
   ...props
 }) => {
   const [selectedValue, setSelectedValue] = useState(
@@ -1909,6 +1910,7 @@ var RadioCardGroup = ({
   );
   const handleChange = (value) => {
     setSelectedValue(value);
+    onChange && onChange(value);
   };
   return /* @__PURE__ */ React87__default.createElement(
     RadioCardGroupContext.Provider,
@@ -1921,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(
@@ -1948,50 +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;
-        nextRadioCard.focus();
-      }
-    };
-    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
+      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);
       }
-    ), /* @__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(
@@ -4361,7 +4373,8 @@ var FullScreenDrawer = ({
   leftButton = null,
   rightButton = /* @__PURE__ */ React87__default.createElement(DrawerCloseButton2, null),
   isOpen,
-  onClose
+  onClose,
+  body
 }) => {
   const [isContentBoxScrolled, setContentBoxScrolled] = useState(false);
   const onContentScroll = (e) => {
@@ -4392,7 +4405,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 = ({
@@ -4477,9 +4490,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 = ({
@@ -13267,18 +13281,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: {
@@ -13313,9 +13331,6 @@ var config33 = helpers24.defineMultiStyleConfig({
         _active: {
           ...baseBackground("active", props),
           ...baseBorder("active", props)
-        },
-        _focus: {
-          ...outlineBorder("focus", props)
         }
       },
       checked: {
@@ -13325,12 +13340,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"
         }
       }
     }),
@@ -13347,9 +13373,6 @@ var config33 = helpers24.defineMultiStyleConfig({
         _active: {
           ...floatingBackground("active", props),
           ...floatingBorder("active", props)
-        },
-        _focus: {
-          ...outlineBorder("focus", props)
         }
       },
       checked: {
@@ -13360,12 +13383,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"
         }
       }
     })

package/dist/index.d.mts

@@ -109,6 +109,7 @@ type RadioGroupContextProps = {
     onChange: (value: string) => void;
     variant?: "base" | "floating";
     defaultValue?: string;
+    value?: string;
 };
 declare const RadioCardGroupContext: React.Context<RadioGroupContextProps | null>;
 type RadioCardGroupProps = BoxProps & {
@@ -118,6 +119,7 @@ type RadioCardGroupProps = BoxProps & {
     direction?: "row" | "column";
     groupLabel?: string;
     defaultValue?: string;
+    onChange?: (value: string) => void;
 };
 declare const RadioCardGroup: React.FC<RadioCardGroupProps>;
 
@@ -1965,31 +1967,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
  *
@@ -2001,7 +1989,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 & {
     /**
@@ -5907,6 +5916,11 @@ declare const theme: {
         RadioCard: {
             baseStyle?: ((props: any) => {
                 container: {
+                    overflow: string;
+                    fontSize: string;
+                    display: string;
+                    cursor: string;
+                    borderRadius: string;
                     transitionProperty: string;
                     transitionDuration: string;
                     _disabled: {
@@ -5924,18 +5938,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;
@@ -5951,7 +5953,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?: {
@@ -5979,9 +5981,6 @@ declare const theme: {
                             outlineColor: string;
                             backgroundColor: string;
                         };
-                        _focus: {
-                            outlineColor: string;
-                        };
                         outlineWidth: string;
                         outlineColor: string;
                         outlineStyle: string;
@@ -6011,9 +6010,6 @@ declare const theme: {
                             outlineColor: string;
                             backgroundColor: string;
                         };
-                        _focus: {
-                            outlineColor: string;
-                        };
                         outline: string;
                         outlineColor: string;
                         backgroundColor: string;
@@ -6040,12 +6036,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) => {
@@ -6062,9 +6076,6 @@ declare const theme: {
                             outlineColor: string;
                             backgroundColor: string;
                         };
-                        _focus: {
-                            outlineColor: string;
-                        };
                         outline: string;
                         outlineColor: string;
                         backgroundColor: string;
@@ -6080,12 +6091,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;
@@ -6094,7 +6117,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) => {
@@ -9549,4 +9572,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 };