@vygruppen/spor-react 12.2.0 → 12.3.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress, defineRecipe, chakra, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group as Group$1, Badge as Badge$1, Code as Code$1, Clipboard as Clipboard$1, IconButton as IconButton$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, ClientOnly as ClientOnly$1, Field as Field$1, defineSlotRecipe, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, Drawer as Drawer$1, Grid, GridItem, usePopoverContext, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, Fieldset as Fieldset$1, InputElement, Input as Input$1, List as List$1, ListItem, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, Switch as Switch$1, Textarea as Textarea$1, FieldLabel as FieldLabel$1, RadioCard as RadioCard$1, Separator as Separator$1, Link, Center, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, VisuallyHidden, defineConfig, useCheckbox, ChakraProvider, Toaster as Toaster$1, Toast, Icon } from '@chakra-ui/react';
+import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress, defineRecipe, chakra, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group as Group$1, Badge as Badge$1, Code as Code$1, Clipboard as Clipboard$1, IconButton as IconButton$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, ClientOnly as ClientOnly$1, Field, defineStyle, defineSlotRecipe, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, Drawer as Drawer$1, Grid, GridItem, usePopoverContext, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCard, Fieldset as Fieldset$1, Input as Input$1, InputElement, List as List$1, ListItem, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, Switch as Switch$1, Textarea as Textarea$1, RadioCard as RadioCard$1, Separator as Separator$1, Link, Center, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, VisuallyHidden, defineConfig, ChakraProvider, Toaster as Toaster$1, Toast, Icon } from '@chakra-ui/react';
 export { Box, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, Collapsible, Container, Em, Flex, For, FormatByte, FormatNumber, Grid, GridItem, HStack, Image, Kbd, LocaleProvider, Portal, Show, SimpleGrid, Spacer, Span, Stack, TableBody, TableCaption, TableCell, TableColumn, TableColumnHeader, TableFooter, TableHeader, TableRoot, TableRow, VStack, VisuallyHidden, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useToken } from '@chakra-ui/react';
 import { DropdownDownFill24Icon, CopyOutline18Icon, CheckmarkFill18Icon, CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, DropdownDownFill18Icon, ServiceFill24Icon, WarningFill24Icon, DropdownRightFill18Icon, CalendarOutline24Icon, ArrowLeftFill24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill24Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, LinkOutOutline24Icon, QuestionFill24Icon, ErrorOutline24Icon, SuccessFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, DropdownLeftFill18Icon, SuccessFill18Icon } from '@vygruppen/spor-icon-react';
 import * as React28 from 'react';
@@ -1378,25 +1378,94 @@ var ColorModeButton = React28.forwardRef(function ColorModeButton2(props, ref) {
     }
   ) });
 });
-var Field = React28.forwardRef(
+var FloatingLabel = forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(Field.Label, { ref, ...props, css: floatingLabelStyles })
+);
+FloatingLabel.displayName = "FloatingLabel";
+var floatingLabelStyles = defineStyle({
+  paddingX: 3,
+  fontWeight: "normal",
+  fontSize: ["mobile.xs", "desktop.xs"],
+  color: "text",
+  pointerEvents: "none",
+  zIndex: "docked",
+  _disabled: {
+    opacity: 0.4
+  },
+  pos: "absolute",
+  top: "0.3rem",
+  transition: "position",
+  _peerPlaceholderShown: {
+    /* For when input is not in focus */
+    top: "0.9rem",
+    color: "text",
+    fontSize: ["mobile.sm", "desktop.sm"]
+  },
+  _peerFocusVisible: {
+    /* For when input is in focus */
+    fontSize: ["mobile.xs", "desktop.xs"],
+    color: "text",
+    top: "0.3rem"
+  }
+});
+var Label = (props) => /* @__PURE__ */ jsx(Field.Label, { ...props, css: labelStyles });
+var labelStyles = defineStyle({
+  fontWeight: "normal",
+  paddingBottom: 1,
+  paddingX: 1,
+  fontSize: ["mobile.xs", "desktop.xs"],
+  color: "text",
+  pointerEvents: "none",
+  zIndex: "docked",
+  _disabled: {
+    opacity: 0.4
+  }
+});
+var Field3 = React28.forwardRef(
   (props, ref) => {
-    const { label, children, helperText, errorText, ...rest } = props;
-    const recipe = useSlotRecipe({ key: "field" });
-    const styles = recipe({ label, helperText, errorText });
-    return /* @__PURE__ */ jsxs(Field$1.Root, { ref, ...rest, css: styles.root, children: [
+    const {
+      label,
       children,
-      helperText && /* @__PURE__ */ jsx(Field$1.HelperText, { children: helperText }),
-      label && /* @__PURE__ */ jsx(Field$1.Label, { css: styles.label, children: label }),
-      errorText && /* @__PURE__ */ jsx(Field$1.ErrorText, { children: errorText })
+      helperText,
+      errorText,
+      floatingLabel = false,
+      disabled,
+      invalid,
+      readOnly,
+      required,
+      direction,
+      ...rest
+    } = props;
+    const recipe = useSlotRecipe({ key: "field" });
+    const styles = recipe();
+    return /* @__PURE__ */ jsxs(Stack, { gap: "2", ref, ...rest, width: "100%", children: [
+      /* @__PURE__ */ jsxs(
+        Field.Root,
+        {
+          disabled,
+          invalid,
+          readOnly,
+          required,
+          css: styles.root,
+          direction,
+          children: [
+            label && !floatingLabel && /* @__PURE__ */ jsx(Label, { children: label }),
+            children,
+            label && floatingLabel && /* @__PURE__ */ jsx(FloatingLabel, { children: label }),
+            errorText && /* @__PURE__ */ jsx(Field.ErrorText, { children: errorText })
+          ]
+        }
+      ),
+      helperText && /* @__PURE__ */ jsx(Text3, { fontSize: "sm", color: "text.tertiary", children: helperText })
     ] });
   }
 );
-Field.displayName = "Field";
+Field3.displayName = "Field";
 var FieldErrorText = React28.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(Field$1.ErrorText, { ref, children: props.children });
+  return /* @__PURE__ */ jsx(Field.ErrorText, { ref, children: props.children });
 });
 FieldErrorText.displayName = "FieldErrorText";
-var FieldLabel = Field$1.Label;
+var FieldLabel = Field.Label;
 var accordionAnatomy = createAnatomy("accordion").parts(
   "root",
   "itemTrigger",
@@ -1637,6 +1706,15 @@ var datepickerAnatomy = createAnatomy("datepicker").parts(
   "box",
   "rangeCalendarPopover"
 );
+var checkboxCardAnatomy = createAnatomy("checkbox-card", [
+  "root",
+  "control",
+  "label",
+  "description",
+  "addon",
+  "indicator",
+  "content"
+]);
 
 // src/theme/slot-recipes/datepicker.ts
 var datePickerSlotRecipe = defineSlotRecipe({
@@ -2348,18 +2426,20 @@ var StyledField = forwardRef(
 var DatePicker = forwardRef(
   ({
     variant,
-    errorMessage,
+    errorText,
     minHeight,
     showYearNavigation,
     withPortal = true,
     width = "auto",
+    invalid = false,
+    helperText,
     ...props
   }, externalRef) => {
     const chakraFieldProps = useFieldContext();
     const state = useDatePickerState({
       ...props,
       shouldCloseOnSelect: true,
-      errorMessage,
+      errorMessage: errorText,
       isRequired: props.isRequired ?? (chakraFieldProps == null ? void 0 : chakraFieldProps.required),
       validationState: (chakraFieldProps == null ? void 0 : chakraFieldProps.invalid) ? "invalid" : "valid"
     });
@@ -2398,12 +2478,14 @@ var DatePicker = forwardRef(
         width,
         children: /* @__PURE__ */ jsxs(Popover$1.Root, { ...dialogProps, children: [
           /* @__PURE__ */ jsx(
-            Field,
+            Field3,
             {
               display: "inline-flex",
               id: inputGroupId,
               "aria-labelledby": labelId,
-              errorText: errorMessage,
+              errorText,
+              invalid,
+              helperText,
               children: /* @__PURE__ */ jsx(PopoverAnchor, { children: /* @__PURE__ */ jsxs(
                 StyledField,
                 {
@@ -2483,13 +2565,18 @@ function DateRangePicker({
   startName,
   endName,
   withPortal = true,
+  errorText,
+  helperText,
+  invalid,
   ...props
 }) {
   const fieldContextPRops = useFieldContext();
   const state = useDateRangePickerState({
     ...props,
     shouldCloseOnSelect: true,
-    isRequired: props.isRequired ?? (fieldContextPRops == null ? void 0 : fieldContextPRops.required),
+    isInvalid: invalid,
+    errorMessage: errorText,
+    isRequired: props.required ?? (fieldContextPRops == null ? void 0 : fieldContextPRops.required),
     validationState: (fieldContextPRops == null ? void 0 : fieldContextPRops.invalid) ? "invalid" : "valid"
   });
   const ref = useRef(null);
@@ -2516,54 +2603,65 @@ function DateRangePicker({
   return /* @__PURE__ */ jsx(I18nProvider, { locale, children: /* @__PURE__ */ jsxs(Box, { position: "relative", display: "inline-flex", flexDirection: "column", children: [
     props.label && /* @__PURE__ */ jsx("label", { ...labelProps, htmlFor: datePickerId, children: props.label }),
     /* @__PURE__ */ jsxs(Popover$1.Root, { ...dialogProps, children: [
-      /* @__PURE__ */ jsx(Field, { width: "auto", display: "inline-flex", id: datePickerId, children: /* @__PURE__ */ jsx(PopoverAnchor, { children: /* @__PURE__ */ jsxs(
-        StyledField,
+      /* @__PURE__ */ jsx(
+        Field3,
         {
-          alignItems: "center",
-          paddingX: 3,
-          variant,
-          onClick: onFieldClick,
-          minHeight,
-          children: [
-            variant && /* @__PURE__ */ jsx(Popover$1.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
-              CalendarTriggerButton,
-              {
-                variant,
-                ref,
-                ...buttonProps
-              }
-            ) }),
-            /* @__PURE__ */ jsx(
-              DateField,
-              {
-                ...startFieldProps,
-                name: startName,
-                label: props.startLabel,
-                labelProps
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                as: "span",
-                "aria-hidden": "true",
-                paddingRight: "2",
-                paddingLeft: "2",
-                children: "\u2013"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              DateField,
-              {
-                ...endFieldProps,
-                name: endName,
-                label: props.endLabel,
-                labelProps
-              }
-            )
-          ]
+          width: "auto",
+          display: "inline-flex",
+          id: datePickerId,
+          errorText,
+          helperText,
+          invalid,
+          children: /* @__PURE__ */ jsx(PopoverAnchor, { children: /* @__PURE__ */ jsxs(
+            StyledField,
+            {
+              alignItems: "center",
+              paddingX: 3,
+              variant,
+              onClick: onFieldClick,
+              minHeight,
+              children: [
+                variant && /* @__PURE__ */ jsx(Popover$1.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  CalendarTriggerButton,
+                  {
+                    variant,
+                    ref,
+                    ...buttonProps
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  DateField,
+                  {
+                    ...startFieldProps,
+                    name: startName,
+                    label: props.startLabel,
+                    labelProps
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    as: "span",
+                    "aria-hidden": "true",
+                    paddingRight: "2",
+                    paddingLeft: "2",
+                    children: "\u2013"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  DateField,
+                  {
+                    ...endFieldProps,
+                    name: endName,
+                    label: props.endLabel,
+                    labelProps
+                  }
+                )
+              ]
+            }
+          ) })
         }
-      ) }) }),
+      ),
       state.isOpen && withPortal && /* @__PURE__ */ jsx(Portal, { children: popoverContent }),
       state.isOpen && !withPortal && popoverContent
     ] })
@@ -2610,7 +2708,7 @@ var TimePicker = ({
   name,
   ...boxProps
 }) => {
-  const { disabled: fieldDisabled, invalid: fieldInvalid } = useFieldContext4() ?? {};
+  const { disabled: fieldDisabled, invalid: fieldInvalid } = useFieldContext() ?? {};
   const isDisabled = isDisabledExternally ?? fieldDisabled ?? false;
   const { t } = useTranslation();
   const locale = useCurrentLocale();
@@ -2657,7 +2755,7 @@ var TimePicker = ({
   const ariaLabel = `${inputLabel} \u2013 ${t(
     texts11.selectedTimeIs(`${(dateTime == null ? void 0 : dateTime.hour) ?? 0} ${(dateTime == null ? void 0 : dateTime.minute) ?? 0}`)
   )}`;
-  return /* @__PURE__ */ jsx(Field, { as: "time", ...boxProps, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Field3, { as: "time", ...boxProps, children: /* @__PURE__ */ jsxs(
     StyledField,
     {
       width: "fit-content",
@@ -2737,9 +2835,6 @@ var texts11 = createTexts({
     sv: "minuter"
   }
 });
-function useFieldContext4() {
-  throw new Error("Function not implemented.");
-}
 var DialogContent = React28.forwardRef((props, ref) => {
   const {
     children,
@@ -2971,184 +3066,28 @@ var CheckboxGroup = forwardRef(
   }
 );
 CheckboxGroup.displayName = "CheckboxGroup";
-var choiceChipRecipe = defineRecipe({
-  base: {
-    display: "inline-flex",
-    alignItems: "center",
-    boxAlign: "center",
-    fontSize: "xs",
-    cursor: "pointer",
-    transitionProperty: "all",
-    borderRadius: "xl",
-    transitionDuration: "fast",
-    height: 6,
-    paddingInlineStart: "2",
-    paddingInlineEnd: "2",
-    outline: "1px solid",
-    outlineColor: "base.outline",
-    _checked: {
-      backgroundColor: "brand.surface",
-      borderRadius: "sm",
-      outline: "none",
-      color: "brand.text",
-      _hover: {
-        backgroundColor: "brand.surface.hover",
-        _active: {
-          backgroundColor: "brand.surface.active"
-        }
-      }
-    },
-    _focusVisible: {
-      outline: "2px solid",
-      outlineColor: "outline.focus",
-      outlineOffset: "1px"
-    },
-    _disabled: {
-      pointerEvents: "none",
-      boxShadow: "none",
-      backgroundColor: "surface.disabled",
-      color: "text.disabled",
-      outline: "none",
-      _hover: {
-        backgroundColor: "core.surface.disabled",
-        boxShadow: "none",
-        color: "core.text.disabled"
-      },
-      _checked: {
-        cursor: "not-allowed",
-        boxShadow: "none",
-        color: "core.text.disabled",
-        backgroundColor: "core.surface.disabled",
-        _hover: {
-          backgroundColor: "core.surface.disabled",
-          boxShadow: "none",
-          color: "core.text.disabled"
-        }
-      }
-    }
-  },
-  variants: {
-    variant: {
-      core: {
-        color: "core.text",
-        outlineColor: "core.outline",
-        _hover: {
-          outline: "2px solid",
-          outlineColor: "core.outline.hover",
-          _active: {
-            outline: "1px solid",
-            outlineColor: "core.outline",
-            backgroundColor: "core.surface.active"
-          }
-        }
-      },
-      accent: {
-        backgroundColor: "accent.surface",
-        color: "accent.text",
-        outline: "none",
-        _hover: {
-          backgroundColor: "accent.surface.hover",
-          _active: {
-            backgroundColor: "accent.surface.active"
-          }
-        }
-      },
-      floating: {
-        backgroundColor: "floating.surface",
-        outline: "1px solid",
-        outlineColor: "floating.outline",
-        color: "floating.text",
-        boxShadow: "sm",
-        _hover: {
-          backgroundColor: "floating.surface.hover",
-          outline: "1px solid",
-          outlineColor: "floating.outline.hover",
-          _active: {
-            backgroundColor: "floating.surface.active",
-            outline: "1px solid",
-            outlineColor: "floating.outline"
-          }
-        }
-      }
-    },
-    size: {
-      xs: {
-        _checked: {
-          borderRadius: "0.563rem"
-        },
-        height: 5,
-        paddingX: 1.5
-      },
-      sm: {
-        _checked: {
-          borderRadius: "sm"
-        },
-        height: 6,
-        paddingX: 2
-      },
-      md: {
-        _checked: {
-          borderRadius: "sm"
-        },
-        height: 7,
-        paddingX: 2
-      },
-      lg: {
-        _checked: {
-          borderRadius: "md"
+var ChoiceChip = forwardRef(
+  ({ children, icon, onCheckedChange, ...rootProps }, ref) => {
+    return /* @__PURE__ */ jsx(
+      CheckboxCard.Root,
+      {
+        ...rootProps,
+        ...onCheckedChange && {
+          onCheckedChange: (details) => onCheckedChange(!!details.checked)
         },
-        height: 8,
-        paddingX: 3
+        children: /* @__PURE__ */ jsx(CheckboxCard.Context, { children: ({ checked }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(CheckboxCard.HiddenInput, { ref }),
+          /* @__PURE__ */ jsx(CheckboxCard.Control, { children: /* @__PURE__ */ jsx(CheckboxCard.Content, { children: /* @__PURE__ */ jsxs(CheckboxCard.Label, { children: [
+            icon && /* @__PURE__ */ jsx(Span, { width: "24px", children: checked ? icon.checked : icon.default }),
+            rootProps.chipType !== "icon" && children,
+            rootProps.chipType === "filter" && checked && /* @__PURE__ */ jsx(CloseOutline24Icon, {})
+          ] }) }) })
+        ] }) })
       }
-    }
+    );
   }
-});
-var ChoiceChipStyledDiv = chakra("div", choiceChipRecipe);
-var ChoiceChip = ({
-  children,
-  icon,
-  size = "sm",
-  chipType = "choice",
-  variant = "core",
-  ...props
-}) => {
-  const {
-    getControlProps,
-    disabled,
-    getLabelProps,
-    getHiddenInputProps,
-    setChecked,
-    checked
-  } = useCheckbox(props);
-  return /* @__PURE__ */ jsxs(
-    chakra.label,
-    {
-      ...getLabelProps(),
-      "aria-label": props["aria-label"] ?? String(children),
-      children: [
-        /* @__PURE__ */ jsx(
-          chakra.input,
-          {
-            ...getHiddenInputProps(),
-            disabled,
-            defaultChecked: checked,
-            value: checked ? "on" : "off",
-            type: "checkbox",
-            "aria-checked": checked,
-            onClick: () => {
-              setChecked(!checked);
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxs(ChoiceChipStyledDiv, { ...getControlProps(), size, variant, children: [
-          icon && /* @__PURE__ */ jsx(Span, { children: checked ? icon.checked : icon.default }),
-          chipType !== "icon" && /* @__PURE__ */ jsx(Span, { children }),
-          chipType === "filter" && checked && /* @__PURE__ */ jsx(CloseOutline24Icon, { marginLeft: 1.5 })
-        ] })
-      ]
-    }
-  );
-};
+);
+ChoiceChip.displayName = "ChoiceChip";
 var Popover = forwardRef(
   ({
     children,
@@ -3279,6 +3218,11 @@ var Combobox = forwardRef(
           "aria-haspopup": "listbox",
           ref: inputRef,
           role: "combobox",
+          errorText: props.errorText,
+          helperText: props.helperText,
+          required: props.required,
+          disabled: props.disabled,
+          invalid: props.invalid,
           label,
           variant,
           "aria-expanded": state.isOpen,
@@ -3453,36 +3397,6 @@ var inputRecipe = defineRecipe({
     variant: "core"
   }
 });
-var InputGroup = React28.forwardRef(
-  (props, ref) => {
-    const {
-      startElement,
-      startElementProps,
-      endElement,
-      endElementProps,
-      label,
-      children,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ jsxs(Group$1, { ref, ...rest, children: [
-      startElement && /* @__PURE__ */ jsx(
-        InputElement,
-        {
-          pointerEvents: "none",
-          paddingX: 2,
-          ...startElementProps,
-          children: startElement
-        }
-      ),
-      React28.cloneElement(children, {
-        ...children.props
-      }),
-      label && /* @__PURE__ */ jsx(FieldLabel, { left: startElement ? 4 : "0", right: endElement ? 4 : 0, children: label }),
-      endElement && /* @__PURE__ */ jsx(InputElement, { placement: "end", paddingX: 2, ...endElementProps, children: endElement })
-    ] });
-  }
-);
-InputGroup.displayName = "InputGroup";
 var StyledInput = chakra(Input$1, inputRecipe);
 var Input = forwardRef(
   ({
@@ -3494,29 +3408,40 @@ var Input = forwardRef(
     errorText,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx(Field, { invalid, helperText, errorText, children: /* @__PURE__ */ jsx(
-      InputGroup,
+    return /* @__PURE__ */ jsxs(
+      Field3,
       {
-        endElement: endElement && endElement,
-        startElement: startElement && startElement,
-        width: "100%",
-        position: "relative",
-        label,
-        children: /* @__PURE__ */ jsx(
-          StyledInput,
-          {
-            "data-attachable": true,
-            ref,
-            className: "peer",
-            overflow: "hidden",
-            paddingLeft: startElement ? "2.6rem" : void 0,
-            paddingRight: endElement ? "2.6rem" : void 0,
-            placeholder: "",
-            ...props
-          }
-        )
+        invalid,
+        helperText,
+        errorText,
+        label: (
+          // Render startElement invisibly to align label text with input content when an icon is present
+          /* @__PURE__ */ jsxs(Flex, { children: [
+            /* @__PURE__ */ jsx(Box, { visibility: "hidden", children: startElement }),
+            label
+          ] })
+        ),
+        floatingLabel: true,
+        children: [
+          startElement && /* @__PURE__ */ jsx(InputElement, { pointerEvents: "none", paddingX: 2, children: startElement }),
+          /* @__PURE__ */ jsx(
+            StyledInput,
+            {
+              "data-attachable": true,
+              ref,
+              focusVisibleRing: "outside",
+              overflow: "hidden",
+              paddingLeft: startElement ? "2.6rem" : void 0,
+              paddingRight: endElement ? "2.6rem" : void 0,
+              ...props,
+              className: `peer ${props.className}`,
+              placeholder: ""
+            }
+          ),
+          endElement && /* @__PURE__ */ jsx(InputElement, { placement: "end", paddingX: 2, children: endElement })
+        ]
       }
-    ) });
+    );
   }
 );
 Input.displayName = "Input";
@@ -3821,46 +3746,66 @@ var NativeSelect = React28.forwardRef(function NativeSelect2(props, ref) {
     label,
     invalid,
     disabled,
+    required,
+    helperText,
+    errorText,
     ...rest
   } = props;
   const recipe = useSlotRecipe({ recipe: nativeSelectSlotRecipe });
   const styles = recipe({ variant });
-  return /* @__PURE__ */ jsx(Field, { label, invalid, disabled, children: /* @__PURE__ */ jsxs(
-    NativeSelect$1.Root,
+  return /* @__PURE__ */ jsx(
+    Field3,
     {
-      ref,
-      css: styles.root,
-      "aria-disabled": disabled,
-      children: [
-        /* @__PURE__ */ jsx(
-          NativeSelect$1.Field,
-          {
-            css: styles.field,
-            "aria-invalid": invalid,
-            ...rest,
-            children
-          }
-        ),
-        /* @__PURE__ */ jsx(NativeSelect$1.Indicator, { css: styles.icon, children: /* @__PURE__ */ jsx(DropdownDownFill18Icon, {}) })
-      ]
+      label,
+      invalid,
+      disabled,
+      required,
+      helperText,
+      errorText,
+      floatingLabel: true,
+      children: /* @__PURE__ */ jsxs(
+        NativeSelect$1.Root,
+        {
+          ref,
+          css: styles.root,
+          "aria-disabled": disabled,
+          children: [
+            /* @__PURE__ */ jsx(
+              NativeSelect$1.Field,
+              {
+                css: styles.field,
+                "aria-invalid": invalid,
+                ...rest,
+                children
+              }
+            ),
+            /* @__PURE__ */ jsx(NativeSelect$1.Indicator, { css: styles.icon, children: /* @__PURE__ */ jsx(DropdownDownFill18Icon, {}) })
+          ]
+        }
+      )
     }
-  ) });
+  );
 });
 var numericStepperRecipe = defineSlotRecipe({
   slots: numericStepperAnatomy.keys(),
   className: "spor-numeric-stepper",
   base: {
     root: {
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center"
+      "& > div": {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center"
+      }
     },
     input: {
       fontSize: "sm",
       fontWeight: "bold",
       marginX: 0.5,
+      padding: 0,
       paddingX: 0.5,
       borderRadius: "xs",
+      outline: "none",
+      height: "auto",
       textAlign: "center",
       transitionProperty: "common",
       transitionDuration: "fast",
@@ -3904,8 +3849,8 @@ var numericStepperRecipe = defineSlotRecipe({
     }
   }
 });
-var NumericStepper = React28__default.forwardRef(
-  ({
+var NumericStepper = React28__default.forwardRef((props) => {
+  const {
     name: nameProp,
     id: idProp,
     value: valueProp,
@@ -3917,99 +3862,99 @@ var NumericStepper = React28__default.forwardRef(
     withInput = true,
     stepSize = 1,
     showZero = false,
-    ariaLabelContext = { singular: "", plural: "" }
-  }) => {
-    const addButtonRef = useRef(null);
-    const { t } = useTranslation();
-    const recipe = useSlotRecipe({ recipe: numericStepperRecipe });
-    const styles = recipe();
-    const [value, onChange] = useControllableState({
-      value: valueProp,
-      onChange: onChangeProp,
-      defaultValue
-    });
-    const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
-    const focusOnAddButton = () => {
-      var _a5;
-      (_a5 = addButtonRef.current) == null ? void 0 : _a5.focus();
-    };
-    return /* @__PURE__ */ jsxs(Field, { css: styles.root, flexDirection: "row", width: "auto", children: [
-      /* @__PURE__ */ jsx(
-        VerySmallButton,
-        {
-          icon: /* @__PURE__ */ jsx(SubtractIcon, { stepLabel: clampedStepSize }),
-          "aria-label": t(
-            texts13.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",
-          disabled,
-          id: value <= minValue ? void 0 : idProp
-        }
-      ),
-      withInput ? /* @__PURE__ */ jsx(
-        chakra.input,
-        {
-          min: minValue,
-          max: maxValue,
-          name: nameProp,
-          value,
-          disabled,
-          id: !showZero && value === 0 ? void 0 : idProp,
-          css: styles.input,
-          width: `${Math.max(value.toString().length + 1, 3)}ch`,
-          visibility: !showZero && value === 0 ? "hidden" : "visible",
-          "aria-live": "assertive",
-          "aria-label": ariaLabelContext.plural === "" ? "" : t(texts13.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();
-            }
+    ariaLabelContext = { singular: "", plural: "" },
+    ...rest
+  } = props;
+  const addButtonRef = useRef(null);
+  const { t } = useTranslation();
+  const recipe = useSlotRecipe({ recipe: numericStepperRecipe });
+  const styles = recipe();
+  const [value, onChange] = useControllableState({
+    value: valueProp,
+    onChange: onChangeProp,
+    defaultValue
+  });
+  const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
+  const focusOnAddButton = () => {
+    var _a5;
+    (_a5 = addButtonRef.current) == null ? void 0 : _a5.focus();
+  };
+  return /* @__PURE__ */ jsxs(Field3, { css: styles.root, width: "auto", ...rest, children: [
+    /* @__PURE__ */ jsx(
+      VerySmallButton,
+      {
+        icon: /* @__PURE__ */ jsx(SubtractIcon, { stepLabel: clampedStepSize }),
+        "aria-label": t(
+          texts13.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",
+        disabled,
+        id: value <= minValue ? void 0 : idProp
+      }
+    ),
+    withInput ? /* @__PURE__ */ jsx(
+      Input$1,
+      {
+        min: minValue,
+        max: maxValue,
+        name: nameProp,
+        value,
+        disabled,
+        id: !showZero && value === 0 ? void 0 : idProp,
+        css: styles.input,
+        width: `${Math.max(value.toString().length + 1, 3)}ch`,
+        visibility: !showZero && value === 0 ? "hidden" : "visible",
+        "aria-live": "assertive",
+        "aria-label": ariaLabelContext.plural === "" ? "" : t(texts13.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__ */ jsx(
-        chakra.text,
-        {
-          css: styles,
-          visibility: !showZero && value === 0 ? "hidden" : "visible",
-          "aria-live": "assertive",
-          "aria-label": ariaLabelContext.plural === "" ? "" : t(texts13.currentNumberAriaLabel(ariaLabelContext.plural)),
-          children: value
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        VerySmallButton,
-        {
-          ref: addButtonRef,
-          icon: /* @__PURE__ */ jsx(AddIcon, { stepLabel: clampedStepSize }),
-          "aria-label": t(
-            texts13.incrementButtonAriaLabel(
-              clampedStepSize,
-              stepSize === 1 ? ariaLabelContext.singular : ariaLabelContext.plural
-            )
-          ),
-          onClick: () => onChange(Math.min(value + clampedStepSize, maxValue)),
-          visibility: value >= maxValue ? "hidden" : "visible",
-          disabled,
-          id: value >= maxValue ? void 0 : idProp
-        }
-      )
-    ] });
-  }
-);
+      }
+    ) : /* @__PURE__ */ jsx(
+      chakra.text,
+      {
+        css: styles,
+        visibility: !showZero && value === 0 ? "hidden" : "visible",
+        "aria-live": "assertive",
+        "aria-label": ariaLabelContext.plural === "" ? "" : t(texts13.currentNumberAriaLabel(ariaLabelContext.plural)),
+        children: value
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      VerySmallButton,
+      {
+        ref: addButtonRef,
+        icon: /* @__PURE__ */ jsx(AddIcon, { stepLabel: clampedStepSize }),
+        "aria-label": t(
+          texts13.incrementButtonAriaLabel(
+            clampedStepSize,
+            stepSize === 1 ? ariaLabelContext.singular : ariaLabelContext.plural
+          )
+        ),
+        onClick: () => onChange(Math.min(value + clampedStepSize, maxValue)),
+        visibility: value >= maxValue ? "hidden" : "visible",
+        disabled,
+        id: value >= maxValue ? void 0 : idProp
+      }
+    )
+  ] });
+});
 NumericStepper.displayName = "NumericStepper";
 var VerySmallButton = React28__default.forwardRef((props, ref) => {
   const recipe = useSlotRecipe({ recipe: numericStepperRecipe });
@@ -4375,10 +4320,19 @@ var texts17 = createTexts({
 });
 var Select = React28.forwardRef(
   (props, ref) => {
-    const { variant = "core", children, positioning, label, ...rest } = props;
+    const {
+      variant = "core",
+      children,
+      positioning,
+      label,
+      errorText,
+      invalid,
+      helperText,
+      ...rest
+    } = props;
     const recipe = useSlotRecipe({ key: "select" });
     const styles = recipe({ variant });
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(Field3, { errorText, invalid, helperText, children: /* @__PURE__ */ jsxs(
       Select$1.Root,
       {
         ...rest,
@@ -4393,7 +4347,7 @@ var Select = React28.forwardRef(
           /* @__PURE__ */ jsx(SelectContent, { css: styles.selectContent, children })
         ]
       }
-    );
+    ) });
   }
 );
 Select.displayName = "Select";
@@ -4472,23 +4426,40 @@ var SelectLabel = Select$1.Label;
 var SelectItemText = Select$1.ItemText;
 var SelectRoot = Select$1.Root;
 var Switch = forwardRef((props) => {
-  const { rootRef, size = "md", label, ...rest } = props;
+  const {
+    rootRef,
+    size = "md",
+    label,
+    invalid,
+    errorText,
+    helperText,
+    ...rest
+  } = props;
   const recipe = useSlotRecipe({ key: "switch" });
   const styles = recipe({ size });
-  return /* @__PURE__ */ jsx(Field, { style: { width: "auto" }, children: /* @__PURE__ */ jsxs(
-    Switch$1.Root,
+  return /* @__PURE__ */ jsx(
+    Field3,
     {
-      ref: rootRef,
-      ...rest,
-      checked: props.checked,
-      css: styles.root,
-      children: [
-        /* @__PURE__ */ jsx(Switch$1.Label, { children: label }),
-        /* @__PURE__ */ jsx(Switch$1.HiddenInput, {}),
-        /* @__PURE__ */ jsx(Switch$1.Control, { css: styles.control, children: /* @__PURE__ */ jsx(Switch$1.Thumb, {}) })
-      ]
+      style: { width: "auto" },
+      invalid,
+      errorText,
+      helperText,
+      children: /* @__PURE__ */ jsxs(
+        Switch$1.Root,
+        {
+          ref: rootRef,
+          ...rest,
+          checked: props.checked,
+          css: styles.root,
+          children: [
+            /* @__PURE__ */ jsx(Switch$1.Label, { children: label }),
+            /* @__PURE__ */ jsx(Switch$1.HiddenInput, {}),
+            /* @__PURE__ */ jsx(Switch$1.Control, { css: styles.control, children: /* @__PURE__ */ jsx(Switch$1.Thumb, {}) })
+          ]
+        }
+      )
     }
-  ) });
+  );
 });
 Switch.displayName = "Switch";
 var useLabelHeight = (label) => {
@@ -4520,7 +4491,7 @@ var Textarea = forwardRef(
     const recipe = useRecipe({ key: "textarea" });
     const styles = recipe({ variant });
     const { labelRef, labelHeight } = useLabelHeight(label);
-    return /* @__PURE__ */ jsxs(Field, { ...fieldProps, position: "relative", children: [
+    return /* @__PURE__ */ jsxs(Field3, { ...fieldProps, position: "relative", children: [
       /* @__PURE__ */ jsx(
         Textarea$1,
         {
@@ -4532,7 +4503,7 @@ var Textarea = forwardRef(
           placeholder: " "
         }
       ),
-      /* @__PURE__ */ jsx(FieldLabel$1, { ref: labelRef, children: label })
+      /* @__PURE__ */ jsx(FloatingLabel, { ref: labelRef, children: label })
     ] });
   }
 );
@@ -7497,6 +7468,170 @@ var checkboxSlotRecipe = defineSlotRecipe({
     }
   }
 });
+var choiceChipSlotRecipe = defineSlotRecipe({
+  slots: checkboxCardAnatomy.keys(),
+  className: "chakra-checkbox-card",
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      boxAlign: "center",
+      fontSize: "xs",
+      cursor: "pointer",
+      transitionProperty: "all",
+      borderRadius: "xl",
+      transitionDuration: "fast",
+      paddingInlineStart: "2",
+      paddingInlineEnd: "2",
+      outline: "1px solid",
+      outlineColor: "base.outline",
+      _checked: {
+        backgroundColor: "brand.surface",
+        borderRadius: "sm",
+        outline: "none",
+        color: "brand.text",
+        _hover: {
+          backgroundColor: "brand.surface.hover",
+          _active: {
+            backgroundColor: "brand.surface.active"
+          }
+        }
+      },
+      _focusVisible: {
+        outline: "2px solid",
+        outlineColor: "outline.focus",
+        outlineOffset: "1px"
+      },
+      _disabled: {
+        pointerEvents: "none",
+        boxShadow: "none",
+        backgroundColor: "surface.disabled",
+        color: "text.disabled",
+        outline: "none",
+        _hover: {
+          backgroundColor: "core.surface.disabled",
+          boxShadow: "none",
+          color: "core.text.disabled"
+        },
+        _checked: {
+          cursor: "not-allowed",
+          boxShadow: "none",
+          color: "core.text.disabled",
+          backgroundColor: "core.surface.disabled",
+          _hover: {
+            backgroundColor: "core.surface.disabled",
+            boxShadow: "none",
+            color: "core.text.disabled"
+          }
+        }
+      }
+    },
+    label: {
+      display: "flex",
+      alignItems: "center",
+      fontSize: "xs"
+    }
+  },
+  variants: {
+    size: {
+      xs: {
+        root: {
+          _checked: {
+            borderRadius: "0.563rem"
+          },
+          height: 5,
+          paddingX: 1.5
+        }
+      },
+      sm: {
+        root: {
+          _checked: {
+            borderRadius: "sm"
+          },
+          height: 6,
+          paddingX: 2
+        }
+      },
+      md: {
+        root: {
+          _checked: {
+            borderRadius: "sm"
+          },
+          height: 7,
+          paddingX: 2
+        }
+      },
+      lg: {
+        root: {
+          _checked: {
+            borderRadius: "md"
+          },
+          height: 8,
+          paddingX: 3
+        }
+      }
+    },
+    variant: {
+      core: {
+        root: {
+          color: "core.text",
+          outlineColor: "core.outline",
+          _hover: {
+            outline: "2px solid",
+            outlineColor: "core.outline.hover",
+            _active: {
+              outline: "1px solid",
+              outlineColor: "core.outline",
+              backgroundColor: "core.surface.active"
+            }
+          }
+        }
+      },
+      accent: {
+        root: {
+          backgroundColor: "accent.surface",
+          color: "accent.text",
+          outline: "none",
+          _hover: {
+            backgroundColor: "accent.surface.hover",
+            _active: {
+              backgroundColor: "accent.surface.active"
+            }
+          }
+        }
+      },
+      floating: {
+        root: {
+          backgroundColor: "floating.surface",
+          outline: "1px solid",
+          outlineColor: "floating.outline",
+          color: "floating.text",
+          boxShadow: "sm",
+          _hover: {
+            backgroundColor: "floating.surface.hover",
+            outline: "1px solid",
+            outlineColor: "floating.outline.hover",
+            _active: {
+              backgroundColor: "floating.surface.active",
+              outline: "1px solid",
+              outlineColor: "floating.outline"
+            }
+          }
+        }
+      }
+    },
+    chipType: {
+      icon: {},
+      choice: {},
+      filter: {}
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "core",
+    chipType: "choice"
+  }
+});
 var dialogSlotRecipe = defineSlotRecipe({
   slots: dialogAnatomy.keys(),
   className: "spor-dialog",
@@ -7919,33 +8054,6 @@ var fieldSlotRecipe = defineSlotRecipe({
       position: "relative",
       flexDirection: "column"
     },
-    label: {
-      /* For when input is filled */
-      pos: "absolute",
-      paddingX: 3,
-      top: "0.3rem",
-      fontWeight: "normal",
-      fontSize: ["mobile.xs", "desktop.xs"],
-      color: "text",
-      pointerEvents: "none",
-      transition: "position",
-      zIndex: "docked",
-      _peerPlaceholderShown: {
-        /* For when input is not in focus */
-        top: "0.9rem",
-        color: "text",
-        fontSize: ["mobile.sm", "desktop.sm"]
-      },
-      _peerFocusVisible: {
-        /* For when input is in focus */
-        fontSize: ["mobile.xs", "desktop.xs"],
-        color: "text",
-        top: "0.3rem"
-      },
-      _disabled: {
-        opacity: 0.4
-      }
-    },
     requiredIndicator: {
       marginStart: 1,
       color: "brightRed"
@@ -7965,7 +8073,7 @@ var fieldSlotRecipe = defineSlotRecipe({
       textStyle: "xs",
       width: "fit-content",
       position: "absolute",
-      bottom: -4,
+      bottom: -5,
       left: 3,
       zIndex: "dropdown",
       maxWidth: "50ch",
@@ -9211,6 +9319,10 @@ var selectSlotRecipe = defineSlotRecipe({
       },
       _open: {
         borderBottomRadius: 0
+      },
+      _invalid: {
+        outline: "2px solid",
+        outlineColor: "outline.error"
       }
     },
     itemText: {
@@ -9245,10 +9357,6 @@ var selectSlotRecipe = defineSlotRecipe({
           _active: {
             backgroundColor: "brand.surface.active"
           },
-          _invalid: {
-            outline: "2px solid",
-            outlineColor: "outline.error"
-          },
           _disabled: {
             pointerEvents: "none",
             color: "text.disabled",
@@ -9819,7 +9927,8 @@ var slotRecipes = {
   table: tableSlotRecipe,
   tabs: tabsSlotRecipe,
   travelTag: travelTagSlotRecipe,
-  toast: toastSlotRecipe
+  toast: toastSlotRecipe,
+  checkboxCard: choiceChipSlotRecipe
 };
 var animations = defineTokens.animations({
   spin: {
@@ -10637,6 +10746,6 @@ var themes = {
 };
 var system = themes["VyDigital" /* VyDigital */];
 
-export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, AttachedInputs, Badge, Brand, Breadcrumb, Button, ButtonGroup, CardSelect, CardSelectContent, CardSelectTrigger, CargonetLogo, Checkbox, CheckboxGroup, ChoiceChip, Clipboard, ClipboardButton, CloseButton, CloseDrawerLine, Code, ColorInlineLoader, ColorModeButton, ColorModeIcon, ColorModeProvider, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, Expandable, ExpandableAlert, ExpandableItem, Field, FieldErrorText, FieldLabel, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FloatingActionButton, Heading, IconButton, InfoTag, Input, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, List, ListBox, ListIndicator, ListItem2 as ListItem, NativeSelect, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, NudgeTrigger, NudgeWizardStep, NumericStepper, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover2 as Popover, PopoverContent, PopoverTrigger, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, SearchInput, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, StaticCard, Stepper, StepperStep, SvgBox, Switch, Table, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Text3 as Text, TextLink, Textarea, TimePicker, TravelTag, VyLogo, VyLogoPride, createTexts, createToast, fontFaces, slugify, system, themes, useColorMode, useColorModeValue, useTranslation };
+export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, AttachedInputs, Badge, Brand, Breadcrumb, Button, ButtonGroup, CardSelect, CardSelectContent, CardSelectTrigger, CargonetLogo, Checkbox, CheckboxGroup, ChoiceChip, Clipboard, ClipboardButton, CloseButton, CloseDrawerLine, Code, ColorInlineLoader, ColorModeButton, ColorModeIcon, ColorModeProvider, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, Expandable, ExpandableAlert, ExpandableItem, Field3 as Field, FieldErrorText, FieldLabel, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FloatingActionButton, Heading, IconButton, InfoTag, Input, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, List, ListBox, ListIndicator, ListItem2 as ListItem, NativeSelect, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, NudgeTrigger, NudgeWizardStep, NumericStepper, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover2 as Popover, PopoverContent, PopoverTrigger, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, SearchInput, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, StaticCard, Stepper, StepperStep, SvgBox, Switch, Table, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Text3 as Text, TextLink, Textarea, TimePicker, TravelTag, VyLogo, VyLogoPride, createTexts, createToast, fontFaces, slugify, system, themes, useColorMode, useColorModeValue, useTranslation };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map