@postenbring/hedwig-react 1.0.0 → 1.2.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,
@@ -1708,24 +1709,13 @@ var import_typed_classname32 = require("@postenbring/hedwig-css/typed-classname"
 // src/navbar/icons.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function CloseIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    "svg",
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, viewBox: "0 0 32 32", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "path",
     {
-      "aria-hidden": true,
-      xmlns: "http://www.w3.org/2000/svg",
-      width: 32,
-      height: 32,
-      viewBox: "0 0 32 32",
-      fill: "none",
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        "path",
-        {
-          d: "M17.5469 16.3333L22.375 11.5521L23.3594 10.5677C23.5 10.4271 23.5 10.1927 23.3594 10.0052L22.3281 8.97394C22.1406 8.83331 21.9062 8.83331 21.7656 8.97394L16 14.7864L10.1875 8.97394C10.0469 8.83331 9.8125 8.83331 9.625 8.97394L8.59375 10.0052C8.45312 10.1927 8.45312 10.4271 8.59375 10.5677L14.4062 16.3333L8.59375 22.1458C8.45312 22.2864 8.45312 22.5208 8.59375 22.7083L9.625 23.7396C9.8125 23.8802 10.0469 23.8802 10.1875 23.7396L16 17.9271L20.7812 22.7552L21.7656 23.7396C21.9062 23.8802 22.1406 23.8802 22.3281 23.7396L23.3594 22.7083C23.5 22.5208 23.5 22.2864 23.3594 22.1458L17.5469 16.3333Z",
-          fill: "black"
-        }
-      )
+      d: "M17.5469 16.3333L22.375 11.5521L23.3594 10.5677C23.5 10.4271 23.5 10.1927 23.3594 10.0052L22.3281 8.97394C22.1406 8.83331 21.9062 8.83331 21.7656 8.97394L16 14.7864L10.1875 8.97394C10.0469 8.83331 9.8125 8.83331 9.625 8.97394L8.59375 10.0052C8.45312 10.1927 8.45312 10.4271 8.59375 10.5677L14.4062 16.3333L8.59375 22.1458C8.45312 22.2864 8.45312 22.5208 8.59375 22.7083L9.625 23.7396C9.8125 23.8802 10.0469 23.8802 10.1875 23.7396L16 17.9271L20.7812 22.7552L21.7656 23.7396C21.9062 23.8802 22.1406 23.8802 22.3281 23.7396L23.3594 22.7083C23.5 22.5208 23.5 22.2864 23.3594 22.1458L17.5469 16.3333Z",
+      fill: "currentColor"
     }
-  );
+  ) });
 }
 function MenuIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
@@ -2061,11 +2051,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 +2100,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 +2144,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 +2171,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 +2194,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 +2224,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 +2250,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 +2288,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 +2310,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 +2319,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 +2341,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 +2357,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 +2376,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 +2397,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 +2416,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 +2434,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 +2459,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 +2477,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 +2493,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 +2515,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 +2532,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 +2557,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 +2651,7 @@ WarningBannerDescription.displayName = "WarningBannerDescription";
   Select,
   ShowMoreButton,
   Skeleton,
+  Spinner,
   Stack,
   StepIndicator,
   StyledHtml,