@postenbring/hedwig-react 1.0.0 → 1.1.0

package/dist/index.js

@@ -123,6 +123,7 @@ __export(src_exports, {
   Select: () => Select,
   ShowMoreButton: () => ShowMoreButton,
   Skeleton: () => Skeleton,
+  Spinner: () => Spinner,
   Stack: () => Stack,
   StepIndicator: () => StepIndicator,
   StyledHtml: () => StyledHtml,
@@ -2061,11 +2062,37 @@ var Skeleton = (0, import_react38.forwardRef)(
 );
 Skeleton.displayName = "Skeleton";
 
-// src/step-indicator/step-indicator.tsx
-var import_typed_classname36 = require("@postenbring/hedwig-css/typed-classname");
+// src/spinner/spinner.tsx
 var import_react39 = require("react");
+var import_typed_classname36 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var StepIndicator = (0, import_react39.forwardRef)(
+var Spinner = (0, import_react39.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { size = "medium", title = "", delay = false, className, style: _style } = _b, rest = __objRest(_b, ["size", "title", "delay", "className", "style"]);
+    const style = __spreadValues(__spreadValues({}, _style), typeof delay === "string" && { "--hds-spinner-delay": delay });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      "div",
+      __spreadValues({
+        title,
+        style,
+        className: (0, import_typed_classname36.clsx)(
+          "hds-spinner",
+          `hds-spinner--${size}`,
+          delay && "hds-spinner--delay",
+          className
+        ),
+        ref
+      }, rest)
+    );
+  }
+);
+Spinner.displayName = "Spinner";
+
+// src/step-indicator/step-indicator.tsx
+var import_typed_classname37 = require("@postenbring/hedwig-css/typed-classname");
+var import_react40 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var StepIndicator = (0, import_react40.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       activeStep,
@@ -2084,27 +2111,27 @@ var StepIndicator = (0, import_react39.forwardRef)(
       "title",
       "titleAs"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       "div",
       __spreadProps(__spreadValues({
         ref,
-        className: (0, import_typed_classname36.clsx)("hds-step-indicator", className),
+        className: (0, import_typed_classname37.clsx)("hds-step-indicator", className),
         lang
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: (0, import_typed_classname36.clsx)("hds-step-indicator__header"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: (0, import_typed_classname36.clsx)("hds-step-indicator__left-label"), children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: (0, import_typed_classname37.clsx)("hds-step-indicator__header"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: (0, import_typed_classname37.clsx)("hds-step-indicator__left-label"), children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: (0, import_typed_classname36.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: (0, import_typed_classname37.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             "div",
             {
-              className: (0, import_typed_classname36.clsx)("hds-step-indicator__step"),
+              className: (0, import_typed_classname37.clsx)("hds-step-indicator__step"),
               "data-state": getStepState(i + 1, activeStep)
             },
             i
           )) }),
-          title ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TitleComponent, { className: (0, import_typed_classname36.clsx)("hds-step-indicator__title"), children: title }) : null
+          title ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TitleComponent, { className: (0, import_typed_classname37.clsx)("hds-step-indicator__title"), children: title }) : null
         ]
       })
     );
@@ -2128,18 +2155,18 @@ function getStepState(renderedStep, activeStep) {
 }
 
 // src/styled-html/styled-html.tsx
-var import_react40 = require("react");
-var import_typed_classname37 = require("@postenbring/hedwig-css/typed-classname");
+var import_react41 = require("react");
+var import_typed_classname38 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot16 = require("@radix-ui/react-slot");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var StyledHtml = (0, import_react40.forwardRef)(
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var StyledHtml = (0, import_react41.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, children, size, unstable_darkmode: darkmode = false, className } = _b, rest = __objRest(_b, ["asChild", "children", "size", "unstable_darkmode", "className"]);
     const Component = asChild ? import_react_slot16.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname37.clsx)(
+        className: (0, import_typed_classname38.clsx)(
           `hds-styled-html`,
           size === "small" && "hds-styled-html--small",
           darkmode && "hds-styled-html--darkmode",
@@ -2155,20 +2182,20 @@ var StyledHtml = (0, import_react40.forwardRef)(
 StyledHtml.displayName = "StyledHtml";
 
 // src/table/table.tsx
-var import_typed_classname38 = require("@postenbring/hedwig-css/typed-classname");
-var import_react41 = require("react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var Table = (0, import_react41.forwardRef)(
+var import_typed_classname39 = require("@postenbring/hedwig-css/typed-classname");
+var import_react42 = require("react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var Table = (0, import_react42.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, size, caption, description } = _b, rest = __objRest(_b, ["children", "className", "size", "caption", "description"]);
-    const descriptionId = (0, import_react41.useId)();
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    const descriptionId = (0, import_react42.useId)();
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
         "table",
         __spreadProps(__spreadValues({
           "aria-describedby": description ? descriptionId : void 0,
           ref,
-          className: (0, import_typed_classname38.clsx)(
+          className: (0, import_typed_classname39.clsx)(
             "hds-table",
             {
               "hds-table--compressed": size === "compressed",
@@ -2178,27 +2205,27 @@ var Table = (0, import_react41.forwardRef)(
           )
         }, rest), {
           children: [
-            caption ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("caption", { children: caption }) : null,
+            caption ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("caption", { children: caption }) : null,
             children
           ]
         })
       ),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: (0, import_typed_classname38.clsx)("hds-table-description"), id: descriptionId, children: description }) : null
+      description ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: (0, import_typed_classname39.clsx)("hds-table-description"), id: descriptionId, children: description }) : null
     ] });
   }
 );
 Table.displayName = "Table";
 
 // src/tabs/tabs.tsx
-var import_react45 = require("react");
-var import_typed_classname41 = require("@postenbring/hedwig-css/typed-classname");
+var import_react46 = require("react");
+var import_typed_classname42 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot18 = require("@radix-ui/react-slot");
 
 // src/tabs/context.ts
-var import_react42 = require("react");
-var TabsContext = (0, import_react42.createContext)(null);
+var import_react43 = require("react");
+var TabsContext = (0, import_react43.createContext)(null);
 function useTabsContext() {
-  const context = (0, import_react42.useContext)(TabsContext);
+  const context = (0, import_react43.useContext)(TabsContext);
   if (!context) {
     throw new Error(
       "Tabs context required. Did you use `<Tabs.List />`, `<Tabs.Tab />`, or `<Tabs.Content />` outside of <Tabs/>?"
@@ -2208,25 +2235,25 @@ function useTabsContext() {
 }
 
 // src/tabs/tabs-content.tsx
-var import_react43 = require("react");
-var import_typed_classname39 = require("@postenbring/hedwig-css/typed-classname");
+var import_react44 = require("react");
+var import_typed_classname40 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot17 = require("@radix-ui/react-slot");
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var TabsContents = (0, import_react43.forwardRef)(
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var TabsContents = (0, import_react44.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, children } = _b, rest = __objRest(_b, ["asChild", "children"]);
     const Component = asChild ? import_react_slot17.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Component, __spreadProps(__spreadValues({ ref, className: (0, import_typed_classname39.clsx)("hds-tabs__contents") }, rest), { children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Component, __spreadProps(__spreadValues({ ref, className: (0, import_typed_classname40.clsx)("hds-tabs__contents") }, rest), { children }));
   }
 );
 TabsContents.displayName = "Tabs.Contents";
-var TabsContent = (0, import_react43.forwardRef)(
+var TabsContent = (0, import_react44.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, forTabId, children } = _b, rest = __objRest(_b, ["asChild", "forTabId", "children"]);
     const context = useTabsContext();
     const Component = asChild ? import_react_slot17.Slot : "div";
     if (context.activeTabId === forTabId) {
-      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Component, __spreadProps(__spreadValues({}, rest), { ref, children }));
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Component, __spreadProps(__spreadValues({}, rest), { ref, children }));
     }
     return null;
   }
@@ -2234,21 +2261,21 @@ var TabsContent = (0, import_react43.forwardRef)(
 TabsContent.displayName = "Tabs.Content";
 
 // src/tabs/tabs-list.tsx
-var import_react44 = require("react");
-var import_typed_classname40 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var TabsList = (0, import_react44.forwardRef)(
+var import_react45 = require("react");
+var import_typed_classname41 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var TabsList = (0, import_react45.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, direction = "horizontal", className } = _b, rest = __objRest(_b, ["children", "direction", "className"]);
     const { activeTabId } = useTabsContext();
-    const tabsListRef = (0, import_react44.useRef)(null);
+    const tabsListRef = (0, import_react45.useRef)(null);
     const mergedRef = useMergeRefs([tabsListRef, ref]);
     const { width: tabsWidth } = useResize(tabsListRef);
     const isClientSide = useHydrated();
     const { innerWidth } = isClientSide ? window : { innerWidth: 1e3 };
     const wideEnough = innerWidth >= tabsWidth;
-    const previousTabId = (0, import_react44.useRef)(activeTabId);
-    (0, import_react44.useEffect)(() => {
+    const previousTabId = (0, import_react45.useRef)(activeTabId);
+    (0, import_react45.useEffect)(() => {
       const tabList = tabsListRef.current;
       const activeTab = tabList == null ? void 0 : tabList.querySelector(`[data-tabid="${activeTabId}"]`);
       if (!activeTab || !tabList) return;
@@ -2272,10 +2299,10 @@ var TabsList = (0, import_react44.forwardRef)(
       }
       previousTabId.current = activeTabId;
     }, [activeTabId, innerWidth]);
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "div",
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname40.clsx)(
+        className: (0, import_typed_classname41.clsx)(
           "hds-tabs__list",
           direction === "horizontal" ? {
             "hds-tabs__list--horizontal": wideEnough,
@@ -2294,7 +2321,7 @@ var TabsList = (0, import_react44.forwardRef)(
   }
 );
 TabsList.displayName = "Tabs.List";
-var TabsTab = (0, import_react44.forwardRef)(
+var TabsTab = (0, import_react45.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, tabId, className, onClick } = _b, rest = __objRest(_b, ["children", "tabId", "className", "onClick"]);
     const context = useTabsContext();
@@ -2303,10 +2330,10 @@ var TabsTab = (0, import_react44.forwardRef)(
       context.toggleActiveTabId(tabId);
       onClick == null ? void 0 : onClick(e);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "button",
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname40.clsx)(
+        className: (0, import_typed_classname41.clsx)(
           "hds-tabs__tab",
           { "hds-tabs__tab--active": context.activeTabId === tabId },
           className
@@ -2325,13 +2352,13 @@ var TabsTab = (0, import_react44.forwardRef)(
 TabsTab.displayName = "Tabs.Tab";
 
 // src/tabs/tabs.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var Tabs = (0, import_react45.forwardRef)(
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var Tabs = (0, import_react46.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, defaultTab, children } = _b, rest = __objRest(_b, ["asChild", "defaultTab", "children"]);
-    const [activeTabId, setActiveTabId] = (0, import_react45.useState)(defaultTab);
+    const [activeTabId, setActiveTabId] = (0, import_react46.useState)(defaultTab);
     const Component = asChild ? import_react_slot18.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname41.clsx)("hds-tabs"), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TabsContext.Provider, { value: { activeTabId, toggleActiveTabId: setActiveTabId }, children }) }));
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname42.clsx)("hds-tabs"), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TabsContext.Provider, { value: { activeTabId, toggleActiveTabId: setActiveTabId }, children }) }));
   }
 );
 Tabs.displayName = "Tabs";
@@ -2341,10 +2368,10 @@ Tabs.Contents = TabsContents;
 Tabs.Content = TabsContent;
 
 // src/text/text.tsx
-var import_react46 = require("react");
-var import_typed_classname42 = require("@postenbring/hedwig-css/typed-classname");
+var import_react47 = require("react");
+var import_typed_classname43 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot19 = require("@radix-ui/react-slot");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var defaultHTMLTag = {
   "h1-display": "h1",
   h1: "h1",
@@ -2360,7 +2387,7 @@ var defaultHTMLTag = {
   caption: "p",
   "caption-title": "p"
 };
-var Text = (0, import_react46.forwardRef)(
+var Text = (0, import_react47.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as: Tag,
@@ -2381,10 +2408,10 @@ var Text = (0, import_react46.forwardRef)(
     ]);
     const Component = asChild ? import_react_slot19.Slot : Tag != null ? Tag : defaultHTMLTag[variant];
     const sizeModifier = size !== "fluid" && variant !== "caption" && variant !== "caption-title" && size;
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname42.clsx)(
+        className: (0, import_typed_classname43.clsx)(
           `hds-text-${variant}`,
           sizeModifier && `hds-text--${sizeModifier}`,
           spacing && "hds-text--spacing",
@@ -2400,9 +2427,9 @@ var Text = (0, import_react46.forwardRef)(
 Text.displayName = "Text";
 
 // src/utils/auto-animate-height.tsx
-var import_react47 = require("react");
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var AutoAnimateHeight = (0, import_react47.forwardRef)(
+var import_react48 = require("react");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var AutoAnimateHeight = (0, import_react48.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -2418,16 +2445,16 @@ var AutoAnimateHeight = (0, import_react47.forwardRef)(
       "onTransitionEnd"
     ]);
     var _a2, _b2;
-    const rootRef = (0, import_react47.useRef)(null);
+    const rootRef = (0, import_react48.useRef)(null);
     const mergedRef = useMergeRefs([rootRef, ref]);
-    const measurementRef = (0, import_react47.useRef)(null);
-    const [height, setHeight] = (0, import_react47.useState)(
+    const measurementRef = (0, import_react48.useRef)(null);
+    const [height, setHeight] = (0, import_react48.useState)(
       void 0
     );
-    const [clonedChildren, setClonedChildren] = (0, import_react47.useState)(
-      () => (0, import_react47.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children }), {})
+    const [clonedChildren, setClonedChildren] = (0, import_react48.useState)(
+      () => (0, import_react48.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, { children }), {})
     );
-    (0, import_react47.useEffect)(() => {
+    (0, import_react48.useEffect)(() => {
       var _a3;
       if (!rootRef.current) return;
       if (!measurementRef.current) return;
@@ -2443,7 +2470,7 @@ var AutoAnimateHeight = (0, import_react47.forwardRef)(
       });
       resizeObserver.observe(currentMeasurement);
       setHeight({ height: newHeight, shouldAnimate: true });
-      const nextClonedChildren = (0, import_react47.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children }), {});
+      const nextClonedChildren = (0, import_react48.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, { children }), {});
       if (newHeight >= ((_a3 = height == null ? void 0 : height.height) != null ? _a3 : 0)) {
         setClonedChildren(nextClonedChildren);
         return () => {
@@ -2461,7 +2488,7 @@ var AutoAnimateHeight = (0, import_react47.forwardRef)(
         currentRoot.removeEventListener("transitionend", onTransitionEndHandler);
       };
     }, [children]);
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
       "div",
       __spreadProps(__spreadValues({
         ref: mergedRef,
@@ -2477,7 +2504,7 @@ var AutoAnimateHeight = (0, import_react47.forwardRef)(
         }, style)
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             "div",
             {
               "aria-hidden": true,
@@ -2499,16 +2526,16 @@ var AutoAnimateHeight = (0, import_react47.forwardRef)(
 AutoAnimateHeight.displayName = "AutoAnimateHeight";
 
 // src/warning-banner/warning-banner.tsx
-var import_react48 = require("react");
-var import_typed_classname43 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var WarningBanner = (0, import_react48.forwardRef)(
+var import_react49 = require("react");
+var import_typed_classname44 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var WarningBanner = (0, import_react49.forwardRef)(
   (_a, ref) => {
     var _b = _a, { title, description, className } = _b, rest = __objRest(_b, ["title", "description", "className"]);
-    const descriptionId = (0, import_react48.useId)();
+    const descriptionId = (0, import_react49.useId)();
     const expandable = !!description;
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname43.clsx)("hds-warning-banner", className), ref, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname44.clsx)("hds-warning-banner", className), ref, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         WarningBannerTitle,
         {
           variant: expandable ? "expandable" : "default",
@@ -2516,22 +2543,22 @@ var WarningBanner = (0, import_react48.forwardRef)(
           children: title
         }
       ),
-      expandable ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(WarningBannerDescription, { id: descriptionId, children: description }) : null
+      expandable ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(WarningBannerDescription, { id: descriptionId, children: description }) : null
     ] }));
   }
 );
 WarningBanner.displayName = "WarningBanner";
-var WarningBannerTitle = (0, import_react48.forwardRef)((_a, ref) => {
+var WarningBannerTitle = (0, import_react49.forwardRef)((_a, ref) => {
   var _b = _a, { variant, descriptionId, children, className } = _b, rest = __objRest(_b, ["variant", "descriptionId", "children", "className"]);
-  const [open, setOpen] = (0, import_react48.useState)(false);
+  const [open, setOpen] = (0, import_react49.useState)(false);
   if (variant === "expandable") {
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       "button",
       __spreadProps(__spreadValues({}, rest), {
         "aria-expanded": open,
         "aria-controls": descriptionId,
         "data-state": open ? "open" : "closed",
-        className: (0, import_typed_classname43.clsx)(
+        className: (0, import_typed_classname44.clsx)(
           "hds-warning-banner__title",
           "hds-warning-banner__title-trigger",
           className
@@ -2541,28 +2568,28 @@ var WarningBannerTitle = (0, import_react48.forwardRef)((_a, ref) => {
         },
         ref,
         type: "button",
-        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children })
       })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     "p",
     __spreadProps(__spreadValues({}, rest), {
-      className: (0, import_typed_classname43.clsx)("hds-warning-banner__title", className),
+      className: (0, import_typed_classname44.clsx)("hds-warning-banner__title", className),
       ref,
       children
     })
   );
 });
 WarningBannerTitle.displayName = "WarningBannerTitle";
-var WarningBannerDescription = (0, import_react48.forwardRef)(
+var WarningBannerDescription = (0, import_react49.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className, id } = _b, rest = __objRest(_b, ["className", "id"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       "p",
       __spreadValues({
         id,
-        className: (0, import_typed_classname43.clsx)("hds-warning-banner__description", className),
+        className: (0, import_typed_classname44.clsx)("hds-warning-banner__description", className),
         ref
       }, rest)
     );
@@ -2635,6 +2662,7 @@ WarningBannerDescription.displayName = "WarningBannerDescription";
   Select,
   ShowMoreButton,
   Skeleton,
+  Spinner,
   Stack,
   StepIndicator,
   StyledHtml,