@vygruppen/spor-react 7.2.1 → 8.0.0

package/dist/index.js

@@ -237,8 +237,8 @@ function useTranslation() {
   };
   return { t: t2, language };
 }
-function createTexts(texts26) {
-  return texts26;
+function createTexts(texts27) {
+  return texts27;
 }
 exports.Language = void 0; var LanguageContext;
 var init_i18n = __esm({
@@ -1777,7 +1777,8 @@ var init_DatePicker = __esm({
               ...dialogProps,
               isOpen: state2.isOpen,
               onOpen: state2.open,
-              onClose: state2.close
+              onClose: state2.close,
+              flip: false
             },
             /* @__PURE__ */ React69__namespace.default.createElement(react.InputGroup, { ...groupProps, display: "inline-flex" }, /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React69__namespace.default.createElement(
               StyledField,
@@ -3098,7 +3099,14 @@ var init_ChoiceChip = __esm({
   "src/input/ChoiceChip.tsx"() {
     init_dist();
     exports.ChoiceChip = react.forwardRef((props, ref) => {
-      const { children, icon, size: size2 = "md", variant = "choice" } = props;
+      const {
+        children,
+        icon,
+        isDisabled,
+        size: size2 = "md",
+        chipType = "choice",
+        variant = "base"
+      } = props;
       const {
         state: state2,
         getInputProps,
@@ -3108,6 +3116,7 @@ var init_ChoiceChip = __esm({
       } = react.useCheckbox(props);
       const styles3 = react.useMultiStyleConfig("ChoiceChip", {
         size: size2,
+        chipType,
         variant,
         icon,
         hasLabel: Boolean(children)
@@ -3120,7 +3129,7 @@ var init_ChoiceChip = __esm({
           ...getRootProps(),
           "aria-label": String(children)
         },
-        /* @__PURE__ */ React69__namespace.default.createElement(react.chakra.input, { ...getInputProps({}, ref), id }),
+        /* @__PURE__ */ React69__namespace.default.createElement(react.chakra.input, { ...getInputProps({}, ref), id, disabled: isDisabled }),
         /* @__PURE__ */ React69__namespace.default.createElement(
           react.chakra.div,
           {
@@ -3133,8 +3142,8 @@ var init_ChoiceChip = __esm({
             "data-disabled": dataAttr(state2.isDisabled)
           },
           icon && /* @__PURE__ */ React69__namespace.default.createElement(react.chakra.span, { __css: styles3.icon }, state2.isChecked ? icon.checked : icon.default),
-          /* @__PURE__ */ React69__namespace.default.createElement(react.chakra.span, { __css: styles3.label, ...getCheckboxProps() }, variant !== "icon" && children),
-          variant === "filter" && state2.isChecked && /* @__PURE__ */ React69__namespace.default.createElement(sporIconReact.CloseOutline24Icon, { marginLeft: 1.5 })
+          /* @__PURE__ */ React69__namespace.default.createElement(react.chakra.span, { __css: styles3.label, ...getCheckboxProps() }, chipType !== "icon" && children),
+          chipType === "filter" && state2.isChecked && /* @__PURE__ */ React69__namespace.default.createElement(sporIconReact.CloseOutline24Icon, { marginLeft: 1.5 })
         )
       );
     });
@@ -3320,7 +3329,7 @@ var init_FormErrorMessage = __esm({
           position: "absolute",
           top: -0.5,
           left: 3,
-          zIndex: "popover",
+          zIndex: "dropdown",
           maxWidth: "50ch",
           ...errorMessageProps,
           ...boxProps
@@ -4894,62 +4903,107 @@ var init_modal = __esm({
     init_SimpleDrawer();
   }
 });
-exports.PopoverWizardBody = void 0; var StepIndicator, createRange, NextStepButton, texts21;
-var init_PopoverWizardBody = __esm({
-  "src/popover/PopoverWizardBody.tsx"() {
+var EXPIRATION_DELAY; exports.Nudge = void 0; var texts21;
+var init_Nudge = __esm({
+  "src/nudge/Nudge.tsx"() {
     init_src();
-    exports.PopoverWizardBody = ({ children }) => {
-      const [currentStep, setCurrentStep] = React69__namespace.useState(1);
-      const totalSteps = React69__namespace.Children.count(children);
-      const { isOpen } = react.usePopoverContext();
-      React69__namespace.useEffect(() => {
-        if (!isOpen && currentStep > 1) {
-          const id = setTimeout(() => setCurrentStep(1), 500);
-          return () => clearTimeout(id);
-        }
-      }, [isOpen, currentStep]);
-      return /* @__PURE__ */ React69__namespace.createElement(react.PopoverBody, null, /* @__PURE__ */ React69__namespace.createElement(exports.Stack, { spacing: 1.5 }, /* @__PURE__ */ React69__namespace.createElement(react.Box, null, React69__namespace.Children.toArray(children)[currentStep - 1]), /* @__PURE__ */ React69__namespace.createElement(react.Flex, { gap: 3 }, /* @__PURE__ */ React69__namespace.createElement(StepIndicator, { totalSteps, currentStep }), /* @__PURE__ */ React69__namespace.createElement(
-        NextStepButton,
-        {
-          isLastStep: totalSteps === currentStep,
-          onNext: () => setCurrentStep((prev) => prev + 1)
+    EXPIRATION_DELAY = 1e3 * 60 * 60 * 24 * 30;
+    exports.Nudge = ({
+      introducedDate,
+      name,
+      children,
+      content,
+      actions,
+      ...props
+    }) => {
+      const { t: t2 } = useTranslation();
+      if (new Date(introducedDate).getTime() + EXPIRATION_DELAY < Date.now()) {
+        if (process.env.NODE_ENV === "development") {
+          console.warn(
+            `The nudge ${name} has been used for longer than 30 days. Please remove it from the codebase.
+        
+        This is a development only warning, and will not be shown in production.`
+          );
         }
-      ))));
-    };
-    StepIndicator = ({ totalSteps, currentStep }) => {
-      const steps = createRange(1, totalSteps);
-      return /* @__PURE__ */ React69__namespace.createElement(react.Flex, { gap: 1, alignItems: "center" }, steps.map((step) => /* @__PURE__ */ React69__namespace.createElement(
-        react.Box,
+        return null;
+      }
+      return /* @__PURE__ */ React69__namespace.default.createElement(react.DarkMode, null, /* @__PURE__ */ React69__namespace.default.createElement(
+        react.Popover,
         {
-          key: step,
-          width: 1,
-          height: 1,
-          borderRadius: "50%",
-          transition: "medium",
-          transitionProperty: "background-color",
-          backgroundColor: step === currentStep ? "seaMist" : "greenHaze"
-        }
-      )));
+          arrowSize: 12,
+          arrowShadowColor: "none",
+          defaultIsOpen: true,
+          ...props
+        },
+        /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverAnchor, null, children),
+        /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverContent, { borderRadius: "sm" }, /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverArrow, null), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverCloseButton, null), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverBody, { margin: 1 }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { marginRight: 4 }, content), /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { marginTop: 1.5 }, actions ?? /* @__PURE__ */ React69__namespace.default.createElement(exports.ButtonGroup, null, /* @__PURE__ */ React69__namespace.default.createElement(exports.Button, { variant: "tertiary", size: "xs" }, t2(texts21.close)), /* @__PURE__ */ React69__namespace.default.createElement(exports.Button, { variant: "secondary", size: "xs", fontWeight: "bold" }, t2(texts21.showMe))))))
+      ));
     };
-    createRange = (start, end) => {
-      return new Array(end - start + 1).fill(null).map((_, i) => i + start);
+    texts21 = createTexts({
+      close: {
+        nb: "Lukk",
+        nn: "Lukk",
+        sv: "St\xE4ng",
+        en: "Close"
+      },
+      showMe: {
+        nb: "Vis meg",
+        nn: "Vis meg",
+        sv: "Visa mig",
+        en: "Show me"
+      }
+    });
+  }
+});
+exports.WizardNudge = void 0; var NextOrCloseButton, texts22;
+var init_WizardNudge = __esm({
+  "src/nudge/WizardNudge.tsx"() {
+    init_src();
+    exports.WizardNudge = ({
+      children,
+      name,
+      onClose,
+      content,
+      ...props
+    }) => {
+      const [currentStep, setCurrentStep] = React69.useState(1);
+      const totalSteps = content.length;
+      const isLastStep = totalSteps === currentStep;
+      const onNext = () => setCurrentStep((prev) => prev + 1);
+      return /* @__PURE__ */ React69__namespace.default.createElement(
+        exports.Nudge,
+        {
+          onClose,
+          name,
+          content: content[currentStep - 1],
+          actions: /* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { gap: 3, alignItems: "center" }, /* @__PURE__ */ React69__namespace.default.createElement(
+            exports.ProgressIndicator,
+            {
+              activeStep: currentStep,
+              numberOfSteps: totalSteps
+            }
+          ), /* @__PURE__ */ React69__namespace.default.createElement(react.Box, null, /* @__PURE__ */ React69__namespace.default.createElement(NextOrCloseButton, { isLastStep, onNext }))),
+          ...props
+        },
+        children
+      );
     };
-    NextStepButton = ({ isLastStep, onNext }) => {
+    NextOrCloseButton = ({ isLastStep, onNext }) => {
       const { onClose } = react.usePopoverContext();
       const { t: t2 } = useTranslation();
-      return /* @__PURE__ */ React69__namespace.createElement(
+      return /* @__PURE__ */ React69__namespace.default.createElement(
         exports.Button,
         {
           variant: "tertiary",
-          size: "sm",
-          color: "white",
-          leftIcon: isLastStep ? void 0 : /* @__PURE__ */ React69__namespace.createElement(sporIconReact.ArrowRightFill18Icon, null),
-          onClick: isLastStep ? onClose : onNext
+          size: "xs",
+          leftIcon: isLastStep ? void 0 : /* @__PURE__ */ React69__namespace.default.createElement(sporIconReact.ArrowRightFill18Icon, null),
+          onClick: isLastStep ? onClose : onNext,
+          width: "fit-content"
         },
-        t2(isLastStep ? texts21.finish : texts21.nextStep)
+        t2(isLastStep ? texts22.finish : texts22.nextStep)
       );
     };
-    texts21 = createTexts({
+    texts22 = createTexts({
       nextStep: {
         nb: "Neste",
         nn: "Neste",
@@ -4965,57 +5019,12 @@ var init_PopoverWizardBody = __esm({
     });
   }
 });
-exports.SimplePopover = void 0;
-var init_SimplePopover = __esm({
-  "src/popover/SimplePopover.tsx"() {
-    exports.SimplePopover = ({
-      children,
-      triggerElement,
-      onClose,
-      isOpen,
-      defaultIsOpen,
-      placement = "bottom",
-      size: size2 = "sm",
-      withCloseButton = false,
-      borderRadius,
-      ...props
-    }) => {
-      return /* @__PURE__ */ React69__namespace.default.createElement(react.DarkMode, null, /* @__PURE__ */ React69__namespace.default.createElement(
-        react.Popover,
-        {
-          onClose,
-          isOpen,
-          defaultIsOpen,
-          placement,
-          size: size2,
-          arrowSize: 12,
-          arrowShadowColor: "none",
-          ...props
-        },
-        triggerElement && /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverTrigger, null, triggerElement),
-        /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverContent, { borderRadius }, /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverArrow, null), withCloseButton && /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverCloseButton, null), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverBody, null, children))
-      ));
-    };
-  }
-});
-exports.WizardPopover = void 0;
-var init_WizardPopover = __esm({
-  "src/popover/WizardPopover.tsx"() {
-    init_PopoverWizardBody();
-    exports.WizardPopover = ({
-      children,
-      triggerElement,
-      withCloseButton = false
-    }) => {
-      return /* @__PURE__ */ React69__namespace.createElement(react.DarkMode, null, /* @__PURE__ */ React69__namespace.createElement(react.Popover, { size: "lg" }, /* @__PURE__ */ React69__namespace.createElement(react.PopoverTrigger, null, triggerElement), /* @__PURE__ */ React69__namespace.createElement(react.PopoverContent, null, /* @__PURE__ */ React69__namespace.createElement(react.PopoverArrow, null), withCloseButton && /* @__PURE__ */ React69__namespace.createElement(react.PopoverCloseButton, null), /* @__PURE__ */ React69__namespace.createElement(exports.PopoverWizardBody, null, children))));
-    };
-  }
-});
-var init_popover = __esm({
-  "src/popover/index.tsx"() {
-    init_PopoverWizardBody();
-    init_SimplePopover();
-    init_WizardPopover();
+
+// src/nudge/index.tsx
+var init_nudge = __esm({
+  "src/nudge/index.tsx"() {
+    init_Nudge();
+    init_WizardNudge();
   }
 });
 var ProgressDot;
@@ -5039,7 +5048,7 @@ var init_ProgressDot = __esm({
     };
   }
 });
-exports.ProgressIndicator = void 0; var texts22;
+exports.ProgressIndicator = void 0; var texts23;
 var init_ProgressIndicator = __esm({
   "src/progress-indicator/ProgressIndicator.tsx"() {
     init_src();
@@ -5058,12 +5067,19 @@ var init_ProgressIndicator = __esm({
           "aria-valuemin": 1,
           "aria-valuemax": numberOfSteps,
           "aria-valuenow": activeStep,
-          "aria-valuetext": t2(texts22.stepsOf(activeStep, numberOfSteps))
+          "aria-valuetext": t2(texts23.stepsOf(activeStep, numberOfSteps))
         },
-        /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { __css: style.container }, Array.from({ length: numberOfSteps }, (_, i) => /* @__PURE__ */ React69__namespace.default.createElement(ProgressDot, { "aria-value": i + 1, isActive: activeStep === i + 1 })))
+        /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { __css: style.container }, Array.from({ length: numberOfSteps }, (_, i) => /* @__PURE__ */ React69__namespace.default.createElement(
+          ProgressDot,
+          {
+            key: i,
+            "aria-value": i + 1,
+            isActive: activeStep === i + 1
+          }
+        )))
       );
     };
-    texts22 = createTexts({
+    texts23 = createTexts({
       stepsOf: (activeStep, numberOfSteps) => ({
         nb: `Steg ${activeStep} av ${numberOfSteps}`,
         nn: `Steg ${activeStep} av ${numberOfSteps}`,
@@ -5135,7 +5151,7 @@ var init_StepperContext = __esm({
     };
   }
 });
-exports.Stepper = void 0; var texts23;
+exports.Stepper = void 0; var texts24;
 var init_Stepper = __esm({
   "src/stepper/Stepper.tsx"() {
     init_stepper();
@@ -5178,7 +5194,7 @@ var init_Stepper = __esm({
           /* @__PURE__ */ React69__namespace.default.createElement(
             exports.IconButton,
             {
-              "aria-label": t2(texts23.back),
+              "aria-label": t2(texts24.back),
               icon: /* @__PURE__ */ React69__namespace.default.createElement(sporIconReact.ArrowLeftFill24Icon, null),
               variant: "ghost",
               size: "sm",
@@ -5193,7 +5209,7 @@ var init_Stepper = __esm({
             }
           ),
           shownHeading && /* @__PURE__ */ React69__namespace.default.createElement(exports.Text, { flex: 1, variant: "sm", as: headingLevel, sx: style.title }, shownHeading),
-          /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { sx: style.stepCounter }, t2(texts23.stepsOf(activeStep, numberOfSteps)))
+          /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { sx: style.stepCounter }, t2(texts24.stepsOf(activeStep, numberOfSteps)))
         )), /* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { justifyContent: "center", display: ["none", null, "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__namespace.default.createElement(
           exports.StepperStep,
           {
@@ -5207,7 +5223,7 @@ var init_Stepper = __esm({
         ))))
       ));
     };
-    texts23 = createTexts({
+    texts24 = createTexts({
       stepsOf: (activeStep, numberOfSteps) => ({
         nb: `Steg ${activeStep}/${numberOfSteps}`,
         nn: `Steg ${activeStep}/${numberOfSteps}`,
@@ -11166,43 +11182,367 @@ var init_foundations = __esm({
     init_styles();
   }
 });
-var focusVisibleStyles;
-var init_focus_util = __esm({
-  "src/theme/utils/focus-util.ts"() {
-    focusVisibleStyles = (props) => ({
-      _focusVisible: {
-        outlineWidth: "2px",
-        outlineColor: themeTools.mode("greenHaze", "azure")(props),
-        outlineStyle: "solid",
-        outlineOffset: "1px"
-      }
-    });
+function baseBackground(state2, props) {
+  switch (state2) {
+    case "active":
+      return {
+        backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props)
+      };
+    case "selected":
+      return {
+        backgroundColor: themeTools.mode("pine", "coralGreen")(props)
+      };
+    case "disabled":
+      return {
+        backgroundColor: themeTools.mode("silver", "whiteAlpha.100")(props)
+      };
+    case "hover":
+      return {
+        backgroundColor: "transparent"
+      };
+    default:
+      return {
+        backgroundColor: "transparent"
+      };
   }
-});
-var helpers, config3, accordion_default;
-var init_accordion2 = __esm({
-  "src/theme/components/accordion.ts"() {
-    init_dist4();
-    init_dist3();
+}
+function ghostBackground(state2, props) {
+  switch (state2) {
+    case "hover": {
+      return {
+        backgroundColor: themeTools.mode("seaMist", "whiteAlpha.100")(props)
+      };
+    }
+    case "active":
+      return {
+        backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props)
+      };
+    case "focus":
+      return {
+        backgroundColor: "transparent"
+      };
+    case "selected": {
+      return {
+        backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props)
+      };
+    }
+    case "default":
+    default:
+      return {
+        backgroundColor: "transparent"
+      };
+  }
+}
+function floatingBackground(state2, props) {
+  switch (state2) {
+    case "selected":
+      return {
+        backgroundColor: themeTools.mode("mint", "pine")(props)
+      };
+    case "active":
+      return {
+        backgroundColor: themeTools.mode(
+          "mint",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 30%)`
+        )(props)
+      };
+    case "hover":
+      return {
+        backgroundColor: themeTools.mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 20%)`
+        )(props)
+      };
+    case "focus":
+      return {
+        backgroundColor: themeTools.mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 40%)`
+        )(props)
+      };
+    case "default":
+    default:
+      return {
+        backgroundColor: themeTools.mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 10%)`
+        )(props)
+      };
+  }
+}
+function accentBackground(state2, props) {
+  switch (state2) {
+    case "selected":
+      return {
+        backgroundColor: themeTools.mode("primaryGreen", "coralGreen")(props)
+      };
+    case "active":
+      return {
+        backgroundColor: themeTools.mode("mint", "darkTeal")(props)
+      };
+    case "hover":
+      return {
+        backgroundColor: themeTools.mode("coralGreen", "greenHaze")(props)
+      };
+    case "focus":
+      return {
+        backgroundColor: themeTools.mode("greenHaze", "azure")(props)
+      };
+    case "default":
+    default:
+      return {
+        backgroundColor: themeTools.mode("seaMist", "pine")(props)
+      };
+  }
+}
+function brandBackground(state2, props) {
+  switch (state2) {
+    case "selected":
+    case "active":
+      return {
+        backgroundColor: themeTools.mode("greenHaze", "seaMist")(props)
+      };
+    case "hover":
+      return {
+        backgroundColor: themeTools.mode("darkTeal", "blueGreen")(props)
+      };
+    case "focus":
+    case "default":
+    default:
+      return {
+        backgroundColor: themeTools.mode("pine", "coralGreen")(props)
+      };
+  }
+}
+var init_background_utils = __esm({
+  "src/theme/utils/background-utils.ts"() {
     init_foundations();
-    init_box_shadow_utils();
-    init_focus_util();
-    helpers = createMultiStyleConfigHelpers(accordionAnatomy.keys);
-    config3 = helpers.defineMultiStyleConfig({
-      baseStyle: (props) => ({
-        container: {
-          border: "none",
-          borderRadius: "sm"
-        },
-        button: {
-          transitionProperty: "background-color, color, border-radius, box-shadow, opacity",
-          transitionDuration: "normal",
-          border: "none",
-          borderRadius: "sm",
-          borderColor: "osloGrey",
+  }
+});
+function baseBorder(state2, props) {
+  switch (state2) {
+    case "hover":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("darkGrey", "white")(props),
+          borderWidth: 2
+        })
+      };
+    case "focus": {
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("greenHaze", "azure")(props),
+          borderWidth: 2
+        })
+      };
+    }
+    case "disabled": {
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("platinum", "whiteAlpha.400")(props)
+        })
+      };
+    }
+    case "selected":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("greenHaze", "azure")(props)
+        })
+      };
+    case "invalid": {
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: "brightRed",
+          borderWidth: 2
+        })
+      };
+    }
+    case "default":
+    default:
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
+        })
+      };
+  }
+}
+function floatingBorder(state2, props) {
+  switch (state2) {
+    case "hover":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("grey.300", "white")(props)
+        })
+      };
+    case "selected":
+    case "focus":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("greenHaze", "azure")(props),
+          borderWidth: 2
+        })
+      };
+    case "active":
+    case "default":
+    default:
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("grey.200", "whiteAlpha.400")(props),
+          baseShadow: "sm"
+        })
+      };
+  }
+}
+function accentBorder(state2, props) {
+  switch (state2) {
+    case "selected":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("primaryGreen", "coralGreen")(props),
+          borderWidth: 2
+        })
+      };
+    case "active":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("mint", "darkTeal")(props),
+          borderWidth: 2
+        })
+      };
+    case "hover":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("coralGreen", "greenHaze")(props),
+          borderWidth: 2
+        })
+      };
+    case "focus":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("greenHaze", "azure")(props),
+          borderWidth: 2
+        })
+      };
+    case "default":
+    default:
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("seaMist", "pine")(props),
+          borderWidth: 2
+        })
+      };
+  }
+}
+function brandBorder(state2, props) {
+  switch (state2) {
+    case "selected":
+    case "active":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("greenHaze", "seaMist")(props),
+          borderWidth: 2
+        })
+      };
+    case "hover":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("darkTeal", "blueGreen")(props),
+          borderWidth: 2
+        })
+      };
+    case "focus":
+    case "default":
+    default:
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("pine", "coralGreen")(props),
+          borderWidth: 2
+        })
+      };
+  }
+}
+var init_border_utils = __esm({
+  "src/theme/utils/border-utils.ts"() {
+    init_box_shadow_utils();
+  }
+});
+var focusVisibleStyles;
+var init_focus_util = __esm({
+  "src/theme/utils/focus-util.ts"() {
+    focusVisibleStyles = (props) => ({
+      _focusVisible: {
+        outlineWidth: "2px",
+        outlineColor: themeTools.mode("greenHaze", "azure")(props),
+        outlineStyle: "solid",
+        outlineOffset: "1px"
+      }
+    });
+  }
+});
+function baseText(state2, props) {
+  switch (state2) {
+    case "selected":
+      return {
+        color: themeTools.mode("white", "darkTeal")(props)
+      };
+    case "disabled":
+      return {
+        color: themeTools.mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 40%)`
+        )(props)
+      };
+    default:
+      return {
+        color: themeTools.mode("darkGrey", "white")(props)
+      };
+  }
+}
+function accentText(state2, props) {
+  switch (state2) {
+    case "selected":
+      return {
+        color: themeTools.mode("white", "darkTeal")(props)
+      };
+    case "default":
+    default:
+      return {
+        color: themeTools.mode("darkTeal", "seaMist")(props)
+      };
+  }
+}
+var init_text_utils = __esm({
+  "src/theme/utils/text-utils.ts"() {
+    init_foundations();
+  }
+});
+
+// src/theme/components/accordion.ts
+var helpers, config3, accordion_default;
+var init_accordion2 = __esm({
+  "src/theme/components/accordion.ts"() {
+    init_dist4();
+    init_dist3();
+    init_background_utils();
+    init_border_utils();
+    init_focus_util();
+    init_text_utils();
+    helpers = createMultiStyleConfigHelpers(accordionAnatomy.keys);
+    config3 = helpers.defineMultiStyleConfig({
+      baseStyle: (props) => ({
+        container: {
+          border: "none",
+          borderRadius: "sm"
+        },
+        button: {
+          transitionProperty: "background-color, color, border-radius, box-shadow, opacity",
+          transitionDuration: "normal",
+          border: "none",
+          borderRadius: "sm",
+          borderColor: "osloGrey",
           display: "flex",
           justifyContent: "space-between",
-          color: themeTools.mode("darkGrey", "white")(props),
+          ...baseText("default", props),
           textAlign: "left",
           fontFamily: "body",
           fontWeight: "bold",
@@ -11221,70 +11561,50 @@ var init_accordion2 = __esm({
         }
       }),
       variants: {
-        list: (props) => ({
+        ghost: (props) => ({
           button: {
             boxShadow: "none",
             _hover: {
-              backgroundColor: themeTools.mode("seaMist", "pine")(props)
+              ...ghostBackground("hover", props)
             },
             _active: {
-              backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props)
+              ...ghostBackground("active", props)
             }
           }
         }),
-        outline: (props) => ({
+        base: (props) => ({
           container: {
-            boxShadow: getBoxShadowString({
-              borderColor: themeTools.mode(
-                colors.blackAlpha["400"],
-                colors.whiteAlpha["400"]
-              )(props)
-            })
+            ...baseBorder("default", props)
           },
           button: {
             _expanded: {
               borderBottomRadius: "none"
             },
             _hover: {
-              boxShadow: getBoxShadowString({
-                borderColor: themeTools.mode("darkGrey", "white")(props),
-                borderWidth: 2
-              })
+              ...baseBorder("hover", props)
             },
             _active: {
-              backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props),
-              boxShadow: getBoxShadowString({
-                borderColor: themeTools.mode("darkGrey", colors.whiteAlpha[400])(props)
-              })
+              ...baseBackground("active", props),
+              ...baseBorder("default", props)
             }
           }
         }),
-        card: (props) => ({
+        floating: (props) => ({
           container: {
-            backgroundColor: themeTools.mode("white", "whiteAlpha.100")(props),
-            boxShadow: getBoxShadowString({
-              baseShadow: themeTools.mode("sm", "none")(props),
-              borderColor: themeTools.mode("silver", "whiteAlpha.400")(props)
-            })
+            ...floatingBackground("default", props),
+            ...floatingBorder("default", props)
           },
           button: {
             _expanded: {
               borderBottomRadius: "none"
             },
             _hover: {
-              backgroundColor: themeTools.mode("seaMist", "whiteAlpha.200")(props),
-              boxShadow: getBoxShadowString({
-                borderColor: themeTools.mode("darkGrey", "white")(props),
-                borderWidth: 1
-              })
+              ...ghostBackground("hover", props),
+              ...floatingBorder("default", props)
             },
             _active: {
-              backgroundColor: themeTools.mode("mint", "inherit")(props),
-              boxShadow: getBoxShadowString({
-                baseShadow: "none",
-                borderWidth: 1,
-                borderColor: themeTools.mode("darkGrey", "whiteAlpha.400")(props)
-              })
+              ...ghostBackground("active", props),
+              ...floatingBorder("default", props)
             }
           }
         })
@@ -11328,7 +11648,7 @@ var init_accordion2 = __esm({
         }
       },
       defaultProps: {
-        variant: "list",
+        variant: "ghost",
         size: "sm"
       }
     });
@@ -11679,7 +11999,6 @@ var init_button2 = __esm({
           minHeight: 5,
           minWidth: 5,
           fontSize: "16px",
-          paddingX: 2,
           fontWeight: "normal"
         }
       },
@@ -11801,143 +12120,54 @@ var init_card2 = __esm({
               borderColor: colors.steel
             })
           };
-        case "grey":
-          return {
-            boxShadow: getBoxShadowString({
-              baseShadow,
-              borderColor: colors.osloGrey
-            })
-          };
-        default:
-          return {
-            backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[200]) ?? "silver",
-            boxShadow: getBoxShadowString({
-              baseShadow,
-              borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[400]) ?? colors.silver
-            })
-          };
-      }
-    };
-    getColorSchemeActiveProps = (props) => {
-      var _a6, _b5;
-      const { colorScheme, size: size2 } = props;
-      const baseShadow = size2 === "lg" ? "sm" : "none";
-      switch (colorScheme) {
-        case "white":
-          return {
-            backgroundColor: themeTools.mode("mint", "teal")(props),
-            boxShadow: getBoxShadowString({
-              baseShadow,
-              borderColor: colors.silver
-            })
-          };
-        case "grey":
-          return {
-            backgroundColor: "white",
-            boxShadow: getBoxShadowString({
-              baseShadow,
-              borderColor: colors.steel
-            })
-          };
-        default:
-          return {
-            backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[50]) ?? "lightGrey",
-            boxShadow: getBoxShadowString({
-              baseShadow,
-              borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[100]) ?? colors.silver
-            })
-          };
-      }
-    };
-  }
-});
-function baseBackground(state2, props) {
-  switch (state2) {
-    case "active":
-      return {
-        backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props)
-      };
-    case "selected":
-      return {
-        backgroundColor: themeTools.mode("pine", "coralGreen")(props)
-      };
-    case "disabled":
-      return {
-        backgroundColor: themeTools.mode("silver", "whiteAlpha.100")(props)
-      };
-    default:
-      return {
-        backgroundColor: "transparent"
-      };
-  }
-}
-function ghostBackground(state2, props) {
-  switch (state2) {
-    case "hover": {
-      return {
-        backgroundColor: themeTools.mode("seaMist", "whiteAlpha.100")(props)
-      };
-    }
-    case "active":
-      return {
-        backgroundColor: themeTools.mode("seaMist", "whiteAlpha.200")(props)
-      };
-    case "focus":
-      return {
-        backgroundColor: "transparent"
-      };
-    case "selected": {
-      return {
-        backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props)
-      };
-    }
-    case "default":
-    default:
-      return {
-        backgroundColor: "transparent"
-      };
-  }
-}
-function floatingBackground(state2, props) {
-  switch (state2) {
-    case "selected":
-      return {
-        backgroundColor: themeTools.mode("mint", "pine")(props)
-      };
-    case "active":
-      return {
-        backgroundColor: themeTools.mode(
-          "mint",
-          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 30%)`
-        )(props)
-      };
-    case "hover":
-      return {
-        backgroundColor: themeTools.mode(
-          "white",
-          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 20%)`
-        )(props)
-      };
-    case "focus":
-      return {
-        backgroundColor: themeTools.mode(
-          "white",
-          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 40%)`
-        )(props)
-      };
-    case "default":
-    default:
-      return {
-        backgroundColor: themeTools.mode(
-          "white",
-          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 10%)`
-        )(props)
-      };
-  }
-}
-var init_background_utils = __esm({
-  "src/theme/utils/background-utils.ts"() {
-    init_foundations();
+        case "grey":
+          return {
+            boxShadow: getBoxShadowString({
+              baseShadow,
+              borderColor: colors.osloGrey
+            })
+          };
+        default:
+          return {
+            backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[200]) ?? "silver",
+            boxShadow: getBoxShadowString({
+              baseShadow,
+              borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[400]) ?? colors.silver
+            })
+          };
+      }
+    };
+    getColorSchemeActiveProps = (props) => {
+      var _a6, _b5;
+      const { colorScheme, size: size2 } = props;
+      const baseShadow = size2 === "lg" ? "sm" : "none";
+      switch (colorScheme) {
+        case "white":
+          return {
+            backgroundColor: themeTools.mode("mint", "teal")(props),
+            boxShadow: getBoxShadowString({
+              baseShadow,
+              borderColor: colors.silver
+            })
+          };
+        case "grey":
+          return {
+            backgroundColor: "white",
+            boxShadow: getBoxShadowString({
+              baseShadow,
+              borderColor: colors.steel
+            })
+          };
+        default:
+          return {
+            backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[50]) ?? "lightGrey",
+            boxShadow: getBoxShadowString({
+              baseShadow,
+              borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[100]) ?? colors.silver
+            })
+          };
+      }
+    };
   }
 });
 var parts2, helpers3, config8, card_select_default;
@@ -12169,73 +12399,161 @@ var init_checkbox = __esm({
 var parts3, helpers5, config10, choice_chip_default;
 var init_choice_chip = __esm({
   "src/theme/components/choice-chip.ts"() {
-    init_box_shadow_utils();
     init_focus_util();
+    init_background_utils();
+    init_text_utils();
+    init_border_utils();
     parts3 = themeTools.anatomy("choice-chip").parts("container", "icon", "label");
     helpers5 = react.createMultiStyleConfigHelpers(parts3.keys);
     config10 = helpers5.defineMultiStyleConfig({
       baseStyle: (props) => ({
         container: {
-          backgroundColor: themeTools.mode("white", "transparent")(props),
-          boxShadow: getBoxShadowString({ borderColor: "celadon" }),
-          color: themeTools.mode("darkTeal", "white")(props),
           display: "inline-flex",
           alignItems: "center",
           fontSize: "16px",
           px: 1,
+          cursor: "pointer",
           _checked: {
-            color: "white",
-            background: "pine",
-            boxShadow: getBoxShadowString({ borderColor: "celadon" })
+            ...accentText("selected", props),
+            ...accentBackground("selected", props),
+            ...accentBorder("selected", props),
+            _hover: {
+              ...brandBackground("hover", props),
+              ...baseText("selected", props),
+              ...brandBorder("hover", props)
+            },
+            _active: {
+              ...baseText("selected", props),
+              ...brandBackground("active", props),
+              ...brandBorder("active", props)
+            }
           },
-          "input:focus-visible + &": focusVisibleStyles(props)._focusVisible,
-          "@media (hover:hover)": {
+          _disabled: {
+            cursor: "not-allowed",
+            boxShadow: "none",
+            ...baseText("disabled", props),
+            ...baseBackground("disabled", props),
             _hover: {
-              color: themeTools.mode("darkTeal", "white")(props),
-              boxShadow: getBoxShadowString({
-                borderColor: "greenHaze",
-                borderWidth: 2
-              }),
-              background: themeTools.mode("coralGreen", "whiteAlpha.200")(props),
-              cursor: "pointer"
+              ...baseBackground("disabled", props),
+              boxShadow: "none",
+              ...baseText("disabled", props)
+            },
+            _checked: {
+              cursor: "not-allowed",
+              boxShadow: "none",
+              ...baseText("disabled", props),
+              ...baseBackground("disabled", props),
+              _hover: {
+                ...baseBackground("disabled", props),
+                boxShadow: "none",
+                ...baseText("disabled", props)
+              }
             }
           },
-          _active: {
-            backgroundColor: themeTools.mode("mint", "whiteAlpha.300")(props),
-            boxShadow: getBoxShadowString({
-              borderColor: "pine"
-            })
-          }
+          "input:focus-visible + &": focusVisibleStyles(props)._focusVisible
         },
         icon: {
           mr: props.hasLabel ? 1 : 0
         }
       }),
+      variants: {
+        base: (props) => ({
+          container: {
+            ...baseBackground("default", props),
+            ...baseBorder("default", props),
+            ...baseText("default", props),
+            "@media (hover:hover)": {
+              _hover: {
+                ...baseText("default", props),
+                ...baseBorder("hover", props),
+                ...baseBackground("hover", props)
+              }
+            },
+            _active: {
+              ...baseBackground("active", props),
+              ...baseBorder("default", props)
+            }
+          }
+        }),
+        accent: (props) => ({
+          container: {
+            ...accentBackground("default", props),
+            ...accentText("default", props),
+            ...accentBorder("default", props),
+            "@media (hover:hover)": {
+              _hover: {
+                ...accentBackground("hover", props),
+                ...accentBorder("hover", props),
+                ...accentText("default", props)
+              }
+            },
+            _active: {
+              ...accentText("default", props),
+              ...accentBorder("active", props),
+              ...accentBackground("active", props)
+            }
+          },
+          _active: {
+            ...accentText("default", props),
+            ...accentBorder("active", props),
+            ...accentBackground("active", props)
+          }
+        }),
+        floating: (props) => ({
+          container: {
+            ...floatingBackground("default", props),
+            ...baseText("default", props),
+            ...floatingBorder("default", props),
+            _hover: {
+              ...floatingBackground("hover", props),
+              ...floatingBorder("hover", props),
+              ...baseText("default", props)
+            },
+            _active: {
+              ...floatingBackground("active", props),
+              ...floatingBorder("active", props),
+              ...baseText("default", props)
+            }
+          }
+        })
+      },
       sizes: {
         sm: {
           container: {
-            borderRadius: "15px",
+            borderRadius: "30px",
+            _checked: {
+              borderRadius: "9px"
+            },
             height: "30px",
             px: 1.5
           }
         },
         md: {
           container: {
-            borderRadius: "18px",
+            borderRadius: "30px",
+            _checked: {
+              borderRadius: "12px"
+            },
             height: "36px",
             px: 2
           }
         },
         lg: {
           container: {
-            borderRadius: "21px",
+            borderRadius: "30px",
+            _checked: {
+              borderRadius: "12px"
+            },
             height: "42px",
             px: 2
           }
         },
         xl: {
           container: {
-            borderRadius: "27px",
+            borderRadius: "30px",
+            _checked: {
+              borderRadius: "18px"
+            },
             height: "54px",
             px: 3
           }
@@ -12371,10 +12689,6 @@ var init_datepicker2 = __esm({
         },
         calendarTriggerButton: {
           backgroundColor: themeTools.mode("white", "night")(props),
-          boxShadow: getBoxShadowString({
-            borderColor: themeTools.mode("darkGrey", "white")(props),
-            borderWidth: 1
-          }),
           width: 8,
           display: "flex",
           alignItems: "center",
@@ -12932,84 +13246,6 @@ var init_form_label = __esm({
     form_label_default = config17;
   }
 });
-function baseBorder(state2, props) {
-  switch (state2) {
-    case "hover":
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: themeTools.mode("darkGrey", "white")(props),
-          borderWidth: 2
-        })
-      };
-    case "focus": {
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: themeTools.mode("greenHaze", "azure")(props),
-          borderWidth: 2
-        })
-      };
-    }
-    case "disabled": {
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: themeTools.mode("platinum", "whiteAlpha.400")(props)
-        })
-      };
-    }
-    case "selected":
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: themeTools.mode("greenHaze", "azure")(props)
-        })
-      };
-    case "invalid": {
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: "brightRed",
-          borderWidth: 2
-        })
-      };
-    }
-    case "default":
-    default:
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
-        })
-      };
-  }
-}
-function floatingBorder(state2, props) {
-  switch (state2) {
-    case "hover":
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: themeTools.mode("grey.300", "white")(props)
-        })
-      };
-    case "selected":
-    case "focus":
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: themeTools.mode("greenHaze", "azure")(props),
-          borderWidth: 2
-        })
-      };
-    case "active":
-    case "default":
-    default:
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: themeTools.mode("grey.200", "whiteAlpha.400")(props)
-        })
-      };
-  }
-}
-var init_border_utils = __esm({
-  "src/theme/utils/border-utils.ts"() {
-    init_box_shadow_utils();
-  }
-});
 
 // src/theme/utils/sr-utils.ts
 var srOnly2;
@@ -13976,7 +14212,7 @@ var init_modal2 = __esm({
   }
 });
 var $popperBg2, $arrowBg3, $arrowShadowColor2, helpers18, config27, popover_default;
-var init_popover2 = __esm({
+var init_popover = __esm({
   "src/theme/components/popover.ts"() {
     init_dist4();
     init_focus_util();
@@ -13990,7 +14226,7 @@ var init_popover2 = __esm({
           zIndex: "popover"
         },
         content: {
-          [$popperBg2.variable]: themeTools.mode(`colors.darkTeal`, `colors.pine`)(props),
+          [$popperBg2.variable]: `colors.darkTeal`,
           backgroundColor: $popperBg2.reference,
           [$arrowBg3.variable]: $popperBg2.reference,
           [$arrowShadowColor2.variable]: `colors.blackAlpha.300`,
@@ -14012,14 +14248,13 @@ var init_popover2 = __esm({
         closeButton: {
           position: "absolute",
           color: "white",
-          hover: "whiteAlpha.100",
           ...focusVisibleStyles(props),
           _active: {
             backgroundColor: "whiteAlpha.200"
           },
-          borderRadius: "xs",
-          top: 1,
-          insetEnd: 1,
+          borderRadius: "sm",
+          top: 2,
+          right: 2,
           width: 2,
           height: 2,
           padding: 1
@@ -15111,7 +15346,7 @@ var init_components = __esm({
     init_listbox();
     init_media_controller_button();
     init_modal2();
-    init_popover2();
+    init_popover();
     init_progress_indicator2();
     init_radio();
     init_select();
@@ -15229,7 +15464,7 @@ var init_theme = __esm({
     };
   }
 });
-var BaseToast, ToastIcon, getIcon3, texts24;
+var BaseToast, ToastIcon, getIcon3, texts25;
 var init_BaseToast = __esm({
   "src/toast/BaseToast.tsx"() {
     init_src();
@@ -15244,7 +15479,7 @@ var init_BaseToast = __esm({
         Icon,
         {
           flexShrink: 0,
-          "aria-label": t2(texts24[variant]),
+          "aria-label": t2(texts25[variant]),
           marginRight: 1,
           marginY: 1.5,
           color: "darkGrey"
@@ -15261,7 +15496,7 @@ var init_BaseToast = __esm({
           return sporIconReact.ErrorOutline24Icon;
       }
     };
-    texts24 = createTexts({
+    texts25 = createTexts({
       info: {
         nb: "Informasjon",
         nn: "Informasjon",
@@ -15299,7 +15534,7 @@ var init_ActionToast = __esm({
     };
   }
 });
-var ClosableToast, texts25;
+var ClosableToast, texts26;
 var init_ClosableToast = __esm({
   "src/toast/ClosableToast.tsx"() {
     init_src();
@@ -15317,13 +15552,13 @@ var init_ClosableToast = __esm({
         {
           sx: styles3.dismissButton,
           variant: "ghost",
-          "aria-label": t2(texts25.dismiss),
+          "aria-label": t2(texts26.dismiss),
           icon: /* @__PURE__ */ React69__namespace.default.createElement(sporIconReact.CloseFill18Icon, null),
           onClick: onClose
         }
       ));
     };
-    texts25 = createTexts({
+    texts26 = createTexts({
       dismiss: {
         nb: "Lukk",
         nn: "Lukk",
@@ -15390,6 +15625,45 @@ var init_toast2 = __esm({
     init_useToast();
   }
 });
+exports.Tooltip = void 0;
+var init_Tooltip = __esm({
+  "src/tooltip/Tooltip.tsx"() {
+    exports.Tooltip = ({
+      children,
+      content,
+      onClose,
+      isOpen,
+      defaultIsOpen,
+      placement = "bottom",
+      size: size2 = "sm",
+      withCloseButton = false,
+      ...props
+    }) => {
+      return /* @__PURE__ */ React69__namespace.default.createElement(react.DarkMode, null, /* @__PURE__ */ React69__namespace.default.createElement(
+        react.Popover,
+        {
+          onClose,
+          isOpen,
+          defaultIsOpen,
+          placement,
+          size: size2,
+          arrowSize: 12,
+          arrowShadowColor: "none",
+          ...props
+        },
+        /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverTrigger, null, children),
+        /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverContent, null, /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverArrow, null), withCloseButton && /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverCloseButton, null), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverBody, null, content))
+      ));
+    };
+  }
+});
+
+// src/tooltip/index.tsx
+var init_tooltip = __esm({
+  "src/tooltip/index.tsx"() {
+    init_Tooltip();
+  }
+});
 var init_transition = __esm({
   "src/transition/index.ts"() {
   }
@@ -15553,7 +15827,7 @@ var init_src = __esm({
     init_logo();
     init_media_controller();
     init_modal();
-    init_popover();
+    init_nudge();
     init_progress_indicator();
     init_provider();
     init_stepper();
@@ -15561,6 +15835,7 @@ var init_src = __esm({
     init_table();
     init_theme();
     init_toast2();
+    init_tooltip();
     init_transition();
     init_typography();
     init_util();
@@ -15688,42 +15963,6 @@ Object.defineProperty(exports, 'OrderedList', {
   enumerable: true,
   get: function () { return react.OrderedList; }
 });
-Object.defineProperty(exports, 'Popover', {
-  enumerable: true,
-  get: function () { return react.Popover; }
-});
-Object.defineProperty(exports, 'PopoverAnchor', {
-  enumerable: true,
-  get: function () { return react.PopoverAnchor; }
-});
-Object.defineProperty(exports, 'PopoverArrow', {
-  enumerable: true,
-  get: function () { return react.PopoverArrow; }
-});
-Object.defineProperty(exports, 'PopoverBody', {
-  enumerable: true,
-  get: function () { return react.PopoverBody; }
-});
-Object.defineProperty(exports, 'PopoverCloseButton', {
-  enumerable: true,
-  get: function () { return react.PopoverCloseButton; }
-});
-Object.defineProperty(exports, 'PopoverContent', {
-  enumerable: true,
-  get: function () { return react.PopoverContent; }
-});
-Object.defineProperty(exports, 'PopoverFooter', {
-  enumerable: true,
-  get: function () { return react.PopoverFooter; }
-});
-Object.defineProperty(exports, 'PopoverHeader', {
-  enumerable: true,
-  get: function () { return react.PopoverHeader; }
-});
-Object.defineProperty(exports, 'PopoverTrigger', {
-  enumerable: true,
-  get: function () { return react.PopoverTrigger; }
-});
 Object.defineProperty(exports, 'Portal', {
   enumerable: true,
   get: function () { return react.Portal; }