@vygruppen/spor-react 10.1.0 → 10.3.0

package/dist/index.d.ts

@@ -1104,7 +1104,7 @@ type InfoSelectProps<T extends object> = {
  */
 declare function InfoSelect<T extends object>({ placeholder, onChange, value, isLabelSrOnly, defaultValue, variant, ...props }: InfoSelectProps<T>): React.JSX.Element;
 
-type InputProps = Omit<InputProps$1, "variant" | "size"> & {
+type InputProps = Omit<InputProps$1, "size"> & {
     /** The input's label */
     label: string;
     /** Icon that shows up to the left */
@@ -1126,6 +1126,12 @@ type InputProps = Omit<InputProps$1, "variant" | "size"> & {
  * ```tsx
  * <Input label="E-mail" leftIcon={<EmailOutline24Icon />} />
  * ```
+ *
+ * Input has two variants base, and floating.
+ *
+ * ```tsx
+ * <Input label="E-mail" leftIcon={<EmailOutline24Icon />} variant="floating" />
+ * ```
  */
 declare const Input: _chakra_ui_system_dist_system_types.ComponentWithAs<"input", InputProps>;
 
@@ -1264,6 +1270,11 @@ type NumericStepperProps = {
     stepSize?: number;
     /** Whether to show the number input when value is zero  */
     showZero?: boolean;
+    /** Name added to the aria-label of subtract and add buttons. */
+    ariaLabelContext?: {
+        singular: string;
+        plural: string;
+    };
 } & Omit<BoxProps, "onChange">;
 /** A simple stepper component for integer values
  *
@@ -1289,7 +1300,7 @@ type NumericStepperProps = {
  * </FormControl>
  * ```
  */
-declare function NumericStepper({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, withInput, stepSize, showZero, ...boxProps }: NumericStepperProps): React.JSX.Element;
+declare function NumericStepper({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, withInput, stepSize, showZero, ariaLabelContext, ...boxProps }: NumericStepperProps): React.JSX.Element;
 
 type PasswordInputProps = InputProps;
 declare const PasswordInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"input", InputProps>;
@@ -4333,94 +4344,6 @@ declare const theme: {
         Input: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 field: {
-                    _hover: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    } | {
-                        outline: string;
-                        outlineColor: string;
-                    };
-                    _active: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                        backgroundColor: string;
-                    } | {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    };
-                    _focusVisible: {
-                        outlineOffset: number;
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                    };
-                    _disabled: {
-                        pointerEvents: string;
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                        backgroundColor: string;
-                    } | {
-                        pointerEvents: string;
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    };
-                    _invalid: {
-                        _hover: {
-                            outlineWidth: string;
-                            outlineColor: string;
-                            outlineStyle: string;
-                            outlineOffset: string;
-                        } | {
-                            outline: string;
-                            outlineColor: string;
-                        };
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    } | {
-                        _hover: {
-                            outlineWidth: string;
-                            outlineColor: string;
-                            outlineStyle: string;
-                            outlineOffset: string;
-                        } | {
-                            outline: string;
-                            outlineColor: string;
-                        };
-                        outline: string;
-                        outlineColor: string;
-                    };
-                    " + label": {
-                        fontSize: ("mobile.sm" | "desktop.sm")[];
-                        top: string;
-                        left: any;
-                        zIndex: number;
-                        position: string;
-                        marginY: number;
-                        transition: string;
-                        transformOrigin: string;
-                        cursor: string;
-                    };
-                    "&:not(:placeholder-shown)": {
-                        paddingTop: string;
-                        "& + label": {
-                            transform: string;
-                        };
-                    };
-                    outlineWidth: string;
-                    outlineColor: string;
-                    outlineStyle: string;
-                    outlineOffset: string;
-                    backgroundColor: string;
                     appearance: string;
                     width: string;
                     outline: string;
@@ -4432,7 +4355,6 @@ declare const theme: {
                     paddingX: number;
                     height: number;
                     fontSize: string;
-                } | {
                     _hover: {
                         outlineWidth: string;
                         outlineColor: string;
@@ -4516,19 +4438,6 @@ declare const theme: {
                             transform: string;
                         };
                     };
-                    outline: string;
-                    outlineColor: string;
-                    backgroundColor: string;
-                    appearance: string;
-                    width: string;
-                    border: number;
-                    borderRadius: string;
-                    transitionProperty: string;
-                    transitionDuration: string;
-                    position: string;
-                    paddingX: number;
-                    height: number;
-                    fontSize: string;
                 };
                 element: {
                     height: string;
@@ -4545,13 +4454,46 @@ declare const theme: {
                 }>;
             } | undefined;
             variants?: {
-                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("group" | "element" | "addon" | "field")[];
-                }>;
+                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    field: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
+                    };
+                };
+                floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    field: {
+                        _hover: {
+                            backgroundColor: string;
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        _selected: {
+                            backgroundColor: string;
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
+                        boxShadow: string;
+                    };
+                };
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: string | number | undefined;
+                variant?: "base" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("group" | "element" | "addon" | "field")[];
@@ -5648,94 +5590,6 @@ declare const theme: {
                     appearance: string;
                     paddingTop: string;
                     "option, optgroup": {};
-                    _hover: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    } | {
-                        outline: string;
-                        outlineColor: string;
-                    };
-                    _active: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                        backgroundColor: string;
-                    } | {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    };
-                    _focusVisible: {
-                        outlineOffset: number;
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                    };
-                    _disabled: {
-                        pointerEvents: string;
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                        backgroundColor: string;
-                    } | {
-                        pointerEvents: string;
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    };
-                    _invalid: {
-                        _hover: {
-                            outlineWidth: string;
-                            outlineColor: string;
-                            outlineStyle: string;
-                            outlineOffset: string;
-                        } | {
-                            outline: string;
-                            outlineColor: string;
-                        };
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    } | {
-                        _hover: {
-                            outlineWidth: string;
-                            outlineColor: string;
-                            outlineStyle: string;
-                            outlineOffset: string;
-                        } | {
-                            outline: string;
-                            outlineColor: string;
-                        };
-                        outline: string;
-                        outlineColor: string;
-                    };
-                    " + label": {
-                        fontSize: ("mobile.sm" | "desktop.sm")[];
-                        top: string;
-                        left: any;
-                        zIndex: number;
-                        position: string;
-                        marginY: number;
-                        transition: string;
-                        transformOrigin: string;
-                        cursor: string;
-                    };
-                    "&:not(:placeholder-shown)": {
-                        paddingTop: string;
-                        "& + label": {
-                            transform: string;
-                        };
-                    };
-                    outlineWidth: string;
-                    outlineColor: string;
-                    outlineStyle: string;
-                    outlineOffset: string;
-                    backgroundColor: string;
                     width: string;
                     outline: string;
                     border: number;
@@ -5746,10 +5600,6 @@ declare const theme: {
                     paddingX: number;
                     height: number;
                     fontSize: string;
-                } | {
-                    appearance: string;
-                    paddingTop: string;
-                    "option, optgroup": {};
                     _hover: {
                         outlineWidth: string;
                         outlineColor: string;
@@ -5833,18 +5683,6 @@ declare const theme: {
                             transform: string;
                         };
                     };
-                    outline: string;
-                    outlineColor: string;
-                    backgroundColor: string;
-                    width: string;
-                    border: number;
-                    borderRadius: string;
-                    transitionProperty: string;
-                    transitionDuration: string;
-                    position: string;
-                    paddingX: number;
-                    height: number;
-                    fontSize: string;
                 };
                 icon: {
                     width: number;
@@ -6490,88 +6328,6 @@ declare const theme: {
                         transform: string;
                     };
                 };
-                _hover: {
-                    outlineWidth: string;
-                    outlineColor: string;
-                    outlineStyle: string;
-                    outlineOffset: string;
-                } | {
-                    outline: string;
-                    outlineColor: string;
-                };
-                _active: {
-                    outlineWidth: string;
-                    outlineColor: string;
-                    outlineStyle: string;
-                    outlineOffset: string;
-                    backgroundColor: string;
-                } | {
-                    outline: string;
-                    outlineColor: string;
-                    backgroundColor: string;
-                };
-                _focusVisible: {
-                    outlineOffset: number;
-                    outlineWidth: string;
-                    outlineColor: string;
-                    outlineStyle: string;
-                };
-                _disabled: {
-                    pointerEvents: string;
-                    outlineWidth: string;
-                    outlineColor: string;
-                    outlineStyle: string;
-                    outlineOffset: string;
-                    backgroundColor: string;
-                } | {
-                    pointerEvents: string;
-                    outline: string;
-                    outlineColor: string;
-                    backgroundColor: string;
-                };
-                _invalid: {
-                    _hover: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    } | {
-                        outline: string;
-                        outlineColor: string;
-                    };
-                    outlineWidth: string;
-                    outlineColor: string;
-                    outlineStyle: string;
-                    outlineOffset: string;
-                } | {
-                    _hover: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    } | {
-                        outline: string;
-                        outlineColor: string;
-                    };
-                    outline: string;
-                    outlineColor: string;
-                };
-                " + label": {
-                    fontSize: ("mobile.sm" | "desktop.sm")[];
-                    top: string;
-                    left: any;
-                    zIndex: number;
-                    position: string;
-                    marginY: number;
-                    transition: string;
-                    transformOrigin: string;
-                    cursor: string;
-                };
-                outlineWidth: string;
-                outlineColor: string;
-                outlineStyle: string;
-                outlineOffset: string;
-                backgroundColor: string;
                 width: string;
                 outline: string;
                 border: number;
@@ -6582,19 +6338,6 @@ declare const theme: {
                 paddingX: number;
                 height: number;
                 fontSize: string;
-            } | {
-                minHeight: string;
-                verticalAlign: string;
-                appearance: string;
-                paddingTop: number;
-                "&:not(:placeholder-shown)": {
-                    "&:has(+ label)": {
-                        paddingTop: number;
-                    };
-                    "& + label": {
-                        transform: string;
-                    };
-                };
                 _hover: {
                     outlineWidth: string;
                     outlineColor: string;
@@ -6672,18 +6415,6 @@ declare const theme: {
                     transformOrigin: string;
                     cursor: string;
                 };
-                outline: string;
-                outlineColor: string;
-                backgroundColor: string;
-                width: string;
-                border: number;
-                borderRadius: string;
-                transitionProperty: string;
-                transitionDuration: string;
-                position: string;
-                paddingX: number;
-                height: number;
-                fontSize: string;
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;

package/dist/index.js

@@ -1654,8 +1654,10 @@ function NumericStepper({
   withInput = true,
   stepSize = 1,
   showZero = false,
+  ariaLabelContext = { singular: "", plural: "" },
   ...boxProps
 }) {
+  const addButtonRef = React85.useRef(null);
   const { t: t2 } = useTranslation();
   const styles3 = react.useMultiStyleConfig("NumericStepper", {});
   const [value, onChange] = react.useControllableState({
@@ -1665,12 +1667,26 @@ function NumericStepper({
   });
   const formControlProps = react.useFormControl({ id: idProp, isDisabled });
   const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
+  const focusOnAddButton = () => {
+    var _a6;
+    (_a6 = addButtonRef.current) == null ? void 0 : _a6.focus();
+  };
   return /* @__PURE__ */ React85__namespace.default.createElement(react.Flex, { __css: styles3.container, ...boxProps }, /* @__PURE__ */ React85__namespace.default.createElement(
     VerySmallButton,
     {
       icon: /* @__PURE__ */ React85__namespace.default.createElement(SubtractIcon, { stepLabel: clampedStepSize }),
-      "aria-label": t2(texts2.decrementButtonAriaLabel(clampedStepSize)),
-      onClick: () => onChange(Math.max(value - clampedStepSize, minValue)),
+      "aria-label": t2(
+        texts2.decrementButtonAriaLabel(
+          clampedStepSize,
+          stepSize == 1 ? ariaLabelContext.singular : ariaLabelContext.plural
+        )
+      ),
+      onClick: () => {
+        onChange(Math.max(value - clampedStepSize, minValue));
+        if (Math.max(value - clampedStepSize, minValue) <= minValue) {
+          focusOnAddButton();
+        }
+      },
       visibility: value <= minValue ? "hidden" : "visible",
       isDisabled: formControlProps.disabled,
       id: value <= minValue ? void 0 : formControlProps.id
@@ -1689,13 +1705,16 @@ function NumericStepper({
       width: `${Math.max(value.toString().length + 1, 3)}ch`,
       visibility: !showZero && value === 0 ? "hidden" : "visible",
       "aria-live": "assertive",
-      "aria-label": value.toString(),
+      "aria-label": ariaLabelContext.plural !== "" ? t2(texts2.currentNumberAriaLabel(ariaLabelContext.plural)) : "",
       onChange: (e) => {
         const numericInput = Number(e.target.value);
         if (Number.isNaN(numericInput)) {
           return;
         }
         onChange(Math.max(Math.min(numericInput, maxValue), minValue));
+        if (!showZero && Math.max(Math.min(numericInput, maxValue), minValue) === 0) {
+          focusOnAddButton();
+        }
       }
     }
   ) : /* @__PURE__ */ React85__namespace.default.createElement(
@@ -1703,14 +1722,21 @@ function NumericStepper({
     {
       sx: styles3.text,
       visibility: !showZero && value === 0 ? "hidden" : "visible",
-      "aria-label": value.toString()
+      "aria-live": "assertive",
+      "aria-label": ariaLabelContext.plural !== "" ? t2(texts2.currentNumberAriaLabel(ariaLabelContext.plural)) : ""
     },
     value
   ), /* @__PURE__ */ React85__namespace.default.createElement(
     VerySmallButton,
     {
+      ref: addButtonRef,
       icon: /* @__PURE__ */ React85__namespace.default.createElement(AddIcon, { stepLabel: clampedStepSize }),
-      "aria-label": t2(texts2.incrementButtonAriaLabel(clampedStepSize)),
+      "aria-label": t2(
+        texts2.incrementButtonAriaLabel(
+          clampedStepSize,
+          stepSize == 1 ? ariaLabelContext.singular : ariaLabelContext.plural
+        )
+      ),
       onClick: () => onChange(Math.min(value + clampedStepSize, maxValue)),
       visibility: value >= maxValue ? "hidden" : "visible",
       isDisabled: formControlProps.disabled,
@@ -1722,10 +1748,19 @@ var VerySmallButton, SubtractIcon, AddIcon, texts2;
 var init_NumericStepper = __esm({
   "src/input/NumericStepper.tsx"() {
     init_src();
-    VerySmallButton = (props) => {
+    VerySmallButton = React85__namespace.default.forwardRef((props, ref) => {
       const styles3 = react.useMultiStyleConfig("NumericStepper", {});
-      return /* @__PURE__ */ React85__namespace.default.createElement(exports.IconButton, { variant: "primary", size: "xs", sx: styles3.button, ...props });
-    };
+      return /* @__PURE__ */ React85__namespace.default.createElement(
+        exports.IconButton,
+        {
+          variant: "primary",
+          size: "xs",
+          sx: styles3.button,
+          ref,
+          ...props
+        }
+      );
+    });
     SubtractIcon = ({ stepLabel, ...props }) => /* @__PURE__ */ React85__namespace.default.createElement(React85__namespace.default.Fragment, null, /* @__PURE__ */ React85__namespace.default.createElement(
       react.Box,
       {
@@ -1782,20 +1817,28 @@ var init_NumericStepper = __esm({
       )
     ), stepLabel > 1 && /* @__PURE__ */ React85__namespace.default.createElement(react.chakra.span, { paddingRight: "1" }, stepLabel.toString()));
     texts2 = createTexts({
-      decrementButtonAriaLabel(stepSize) {
+      currentNumberAriaLabel(ariaContext) {
         return {
-          nb: `Trekk fra ${stepSize}`,
-          en: `Subtract ${stepSize}`,
-          nn: `Trekk fr\xE5 ${stepSize}`,
-          sv: `Subtrahera ${stepSize}`
+          nb: `Valgt antall ${ariaContext}`,
+          en: `Chosen number of ${ariaContext}`,
+          nn: `Valgt antall ${ariaContext}`,
+          sv: `Valgt antall ${ariaContext}`
         };
       },
-      incrementButtonAriaLabel(stepSize) {
+      decrementButtonAriaLabel(stepSize, ariaContext) {
         return {
-          nb: `Legg til ${stepSize}`,
-          en: `Add ${stepSize}`,
-          nn: `Legg til ${stepSize}`,
-          sv: `L\xE4gg till ${stepSize}`
+          nb: `Trekk fra ${stepSize} ${ariaContext}`,
+          en: `Subtract ${stepSize} ${ariaContext}`,
+          nn: `Trekk fr\xE5 ${stepSize} ${ariaContext}`,
+          sv: `Subtrahera ${stepSize} ${ariaContext}`
+        };
+      },
+      incrementButtonAriaLabel(stepSize, ariaContext) {
+        return {
+          nb: `Legg til ${stepSize} ${ariaContext}`,
+          en: `Add ${stepSize} ${ariaContext}`,
+          nn: `Legg til ${stepSize} ${ariaContext}`,
+          sv: `L\xE4gg till ${stepSize} ${ariaContext}`
         };
       }
     });
@@ -5132,7 +5175,7 @@ var init_ModalHeader = __esm({
           fontSize: size2 === "lg" ? ["mobile.lg", "desktop.lg"] : ["mobile.md", "desktop.md"],
           textAlign: size2 === "lg" ? "center" : "left"
         };
-        return /* @__PURE__ */ React85__namespace.default.createElement(react.ModalHeader, { ...props, ref, ...styles3 });
+        return /* @__PURE__ */ React85__namespace.default.createElement(react.ModalHeader, { as: "h1", ...props, ref, ...styles3 });
       }
     );
   }
@@ -14050,6 +14093,7 @@ var init_input2 = __esm({
     init_base_utils();
     init_focus_utils();
     init_surface_utils();
+    init_floating_utils();
     helpers14 = react.createMultiStyleConfigHelpers(inputAnatomy.keys);
     config21 = helpers14.defineMultiStyleConfig({
       baseStyle: (props) => ({
@@ -14065,8 +14109,6 @@ var init_input2 = __esm({
           paddingX: 3,
           height: 8,
           fontSize: "mobile.md",
-          ...baseBackground("default", props),
-          ...baseBorder("default", props),
           _hover: {
             ...baseBorder("hover", props)
           },
@@ -14115,7 +14157,37 @@ var init_input2 = __esm({
             ...baseText("disabled", props)
           }
         }
-      })
+      }),
+      variants: {
+        base: (props) => ({
+          field: {
+            ...baseBackground("default", props),
+            ...baseBorder("default", props)
+          }
+        }),
+        floating: (props) => ({
+          field: {
+            boxShadow: "sm",
+            ...floatingBackground("default", props),
+            ...floatingBorder("default", props),
+            _hover: {
+              ...floatingBorder("hover", props),
+              ...floatingBackground("hover", props)
+            },
+            _active: {
+              ...floatingBorder("active", props),
+              ...floatingBackground("active", props)
+            },
+            _selected: {
+              ...floatingBorder("selected", props),
+              ...floatingBackground("selected", props)
+            }
+          }
+        })
+      },
+      defaultProps: {
+        variant: "base"
+      }
     });
     input_default = config21;
   }

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, 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, FullScreenDrawer, 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, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-MLRF67YM.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, 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, FullScreenDrawer, 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, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-5HRYDWQ5.mjs';