@postenbring/hedwig-react 0.0.76 → 0.0.77

package/dist/tabs/tabs-list.d.mts

@@ -1,4 +1,4 @@
+export { TabsListProps_alias_3 as TabsListProps } from '../_tsup-dts-rollup';
 export { TabsList_alias_3 as TabsList } from '../_tsup-dts-rollup';
-export { TabListProps_alias_3 as TabListProps } from '../_tsup-dts-rollup';
 export { TabsTabProps_alias_3 as TabsTabProps } from '../_tsup-dts-rollup';
 export { TabsTab_alias_3 as TabsTab } from '../_tsup-dts-rollup';

package/dist/tabs/tabs-list.d.ts

@@ -1,4 +1,4 @@
+export { TabsListProps_alias_3 as TabsListProps } from '../_tsup-dts-rollup';
 export { TabsList_alias_3 as TabsList } from '../_tsup-dts-rollup';
-export { TabListProps_alias_3 as TabListProps } from '../_tsup-dts-rollup';
 export { TabsTabProps_alias_3 as TabsTabProps } from '../_tsup-dts-rollup';
 export { TabsTab_alias_3 as TabsTab } from '../_tsup-dts-rollup';

package/dist/tabs/tabs-list.js

@@ -119,72 +119,74 @@ function useTabsContext() {
 
 // src/tabs/tabs-list.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function TabsList(_a) {
-  var _b = _a, { children, direction = "horizontal", className } = _b, rest = __objRest(_b, ["children", "direction", "className"]);
-  const { activeTabId } = useTabsContext();
-  const tabsListRef = (0, import_react3.useRef)(null);
-  const { width: tabsWidth } = useResize(tabsListRef);
-  const isClientSide = useHydrated();
-  const { innerWidth } = isClientSide ? window : { innerWidth: 1e3 };
-  const wideEnough = innerWidth >= tabsWidth;
-  const previousTabId = (0, import_react3.useRef)(activeTabId);
-  (0, import_react3.useEffect)(() => {
-    const tabList = tabsListRef.current;
-    const activeTab = tabList == null ? void 0 : tabList.querySelector(`[data-tabid="${activeTabId}"]`);
-    if (!activeTab || !tabList)
-      return;
-    const { offsetHeight: containerHeight, offsetWidth: containerWidth } = tabList;
-    const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = activeTab;
-    const height = offsetHeight / containerHeight;
-    const width = offsetWidth / containerWidth;
-    tabsListRef.current.style.setProperty("--_hds-tabs-marker-height", String(height));
-    tabsListRef.current.style.setProperty("--_hds-tabs-marker-width", String(width));
-    tabsListRef.current.style.setProperty("--_hds-tabs-marker-top", `${offsetTop}px`);
-    tabsListRef.current.style.setProperty("--_hds-tabs-marker-left", `${offsetLeft}px`);
-    if (previousTabId.current !== activeTabId) {
-      tabsListRef.current.style.setProperty(
-        "--_hds-tabs-marker-animated-color",
-        "var(--_hds-tabs-marker-color)"
-      );
-      tabsListRef.current.style.setProperty(
-        "--_hds-tabs-marker-border-fallback-color",
-        "transparent"
-      );
-    }
-    previousTabId.current = activeTabId;
-  }, [activeTabId, innerWidth]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    __spreadProps(__spreadValues({
-      className: (0, import_typed_classname.clsx)(
-        "hds-tabs__list",
-        direction === "horizontal" ? {
-          "hds-tabs__list--horizontal": wideEnough,
-          "hds-tabs__list--vertical": !wideEnough
-        } : {
-          "hds-tabs__list--vertical": true
-        },
-        className
-      ),
-      ref: tabsListRef,
-      role: "tablist"
-    }, rest), {
-      children
-    })
-  );
-}
+var TabsList = (0, import_react3.forwardRef)(
+  (_a) => {
+    var _b = _a, { children, direction = "horizontal", className } = _b, rest = __objRest(_b, ["children", "direction", "className"]);
+    const { activeTabId } = useTabsContext();
+    const tabsListRef = (0, import_react3.useRef)(null);
+    const { width: tabsWidth } = useResize(tabsListRef);
+    const isClientSide = useHydrated();
+    const { innerWidth } = isClientSide ? window : { innerWidth: 1e3 };
+    const wideEnough = innerWidth >= tabsWidth;
+    const previousTabId = (0, import_react3.useRef)(activeTabId);
+    (0, import_react3.useEffect)(() => {
+      const tabList = tabsListRef.current;
+      const activeTab = tabList == null ? void 0 : tabList.querySelector(`[data-tabid="${activeTabId}"]`);
+      if (!activeTab || !tabList)
+        return;
+      const { offsetHeight: containerHeight, offsetWidth: containerWidth } = tabList;
+      const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = activeTab;
+      const height = offsetHeight / containerHeight;
+      const width = offsetWidth / containerWidth;
+      tabsListRef.current.style.setProperty("--_hds-tabs-marker-height", String(height));
+      tabsListRef.current.style.setProperty("--_hds-tabs-marker-width", String(width));
+      tabsListRef.current.style.setProperty("--_hds-tabs-marker-top", `${offsetTop}px`);
+      tabsListRef.current.style.setProperty("--_hds-tabs-marker-left", `${offsetLeft}px`);
+      if (previousTabId.current !== activeTabId) {
+        tabsListRef.current.style.setProperty(
+          "--_hds-tabs-marker-animated-color",
+          "var(--_hds-tabs-marker-color)"
+        );
+        tabsListRef.current.style.setProperty(
+          "--_hds-tabs-marker-border-fallback-color",
+          "transparent"
+        );
+      }
+      previousTabId.current = activeTabId;
+    }, [activeTabId, innerWidth]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname.clsx)(
+          "hds-tabs__list",
+          direction === "horizontal" ? {
+            "hds-tabs__list--horizontal": wideEnough,
+            "hds-tabs__list--vertical": !wideEnough
+          } : {
+            "hds-tabs__list--vertical": true
+          },
+          className
+        ),
+        ref: tabsListRef,
+        role: "tablist"
+      }, rest), {
+        children
+      })
+    );
+  }
+);
 TabsList.displayName = "Tabs.List";
 var TabsTab = (0, import_react3.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "button", children, tabId, className, onClick } = _b, rest = __objRest(_b, ["as", "children", "tabId", "className", "onClick"]);
+    var _b = _a, { children, tabId, className, onClick } = _b, rest = __objRest(_b, ["children", "tabId", "className", "onClick"]);
     const context = useTabsContext();
     const toggleTab = (e) => {
       e.preventDefault();
       context.toggleActiveTabId(tabId);
-      onClick && onClick(e);
+      onClick == null ? void 0 : onClick(e);
     };
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      Component,
+      "button",
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname.clsx)(
           "hds-tabs__tab",
@@ -194,6 +196,7 @@ var TabsTab = (0, import_react3.forwardRef)(
         "data-tabid": tabId,
         onClick: toggleTab,
         ref,
+        type: "button",
         role: "tab"
       }, rest), {
         children

package/dist/tabs/tabs-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/tabs-list.tsx","../../src/utils.ts","../../src/tabs/context.ts"],"sourcesContent":["import type { HTMLAttributes, ReactElement, MouseEvent } from \"react\";\nimport { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { type OverridableComponent, useResize, useHydrated } from \"../utils\";\nimport { useTabsContext } from \"./context\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsTabProps> | ReactElement<TabsTabProps>[];\n\n  /**\n   * Direction of the tabs. Can either be vertical or horizontal.\n   * Horizontal breaks on window width with fallback back to vertical\n   */\n  direction?: \"vertical\" | \"horizontal\";\n}\n\nexport function TabsList({ children, direction = \"horizontal\", className, ...rest }: TabListProps) {\n  const { activeTabId } = useTabsContext();\n  const tabsListRef = useRef<HTMLDivElement>(null);\n  const { width: tabsWidth } = useResize(tabsListRef);\n\n  const isClientSide = useHydrated();\n  const { innerWidth } = isClientSide ? window : { innerWidth: 1000 };\n  const wideEnough = innerWidth >= tabsWidth;\n\n  const previousTabId = useRef(activeTabId);\n\n  // Marker animation\n  useEffect(() => {\n    const tabList = tabsListRef.current;\n    const activeTab = tabList?.querySelector(`[data-tabid=\"${activeTabId}\"]`);\n    if (!activeTab || !tabList) return;\n\n    const { offsetHeight: containerHeight, offsetWidth: containerWidth } = tabList;\n    const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = activeTab as HTMLElement;\n\n    // Calculate the height and width of the marker relative to the container\n    const height = offsetHeight / containerHeight;\n    const width = offsetWidth / containerWidth;\n\n    // NOTE: Doing a DOM manipulation here to set the CSS variables for the marker\n    // Not really the react idomatic way, but as long as it works we are able to skip some intermidiate `useState`\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-height\", String(height));\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-width\", String(width));\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-top\", `${offsetTop}px`);\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-left\", `${offsetLeft}px`);\n\n    // Start with border fallback, then switch to the animated marker when the user changes tabs\n    // This way the marker is placed immediately to the default tab, then animates smoothly to the next when selected\n    if (previousTabId.current !== activeTabId) {\n      tabsListRef.current.style.setProperty(\n        \"--_hds-tabs-marker-animated-color\",\n        \"var(--_hds-tabs-marker-color)\",\n      );\n      tabsListRef.current.style.setProperty(\n        \"--_hds-tabs-marker-border-fallback-color\",\n        \"transparent\",\n      );\n    }\n    previousTabId.current = activeTabId;\n  }, [activeTabId, innerWidth]);\n\n  return (\n    <div\n      className={clsx(\n        \"hds-tabs__list\",\n        direction === \"horizontal\"\n          ? {\n              \"hds-tabs__list--horizontal\": wideEnough,\n              \"hds-tabs__list--vertical\": !wideEnough,\n            }\n          : {\n              \"hds-tabs__list--vertical\": true,\n            },\n        className as undefined,\n      )}\n      ref={tabsListRef}\n      role=\"tablist\"\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nTabsList.displayName = \"Tabs.List\";\n\nexport interface TabsTabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactElement<HTMLElement> | string;\n\n  /**\n   * Identifier for the tab\n   */\n  tabId: string;\n}\n\nexport const TabsTab: OverridableComponent<TabsTabProps, HTMLButtonElement> = forwardRef(\n  ({ as: Component = \"button\", children, tabId, className, onClick, ...rest }, ref) => {\n    const context = useTabsContext();\n\n    const toggleTab = (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      context.toggleActiveTabId(tabId);\n      onClick && onClick(e);\n    };\n    return (\n      <Component\n        className={clsx(\n          \"hds-tabs__tab\",\n          { \"hds-tabs__tab--active\": context.activeTabId === tabId },\n          className as undefined,\n        )}\n        data-tabid={tabId}\n        onClick={toggleTab}\n        ref={ref}\n        role=\"tab\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n\nTabsTab.displayName = \"Tabs.Tab\";\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n  (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n  <As extends ElementType>(\n    props: {\n      /** Override html element */\n      as?: As;\n    } & ComponentProps &\n      Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n  ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n\nfunction subscribe() {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n  return () => {};\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n\n/**\n * Trap focus inside an element using the `inert` attribute.\n *\n * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.\n * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.\n *\n * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n * @see https://web.dev/articles/inert\n */\nexport function focusTrap(element: HTMLElement) {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element\n  if (element === document.body) return () => {};\n\n  let inertElements: HTMLElement[] = [];\n  for (let el: HTMLElement | null = element; el; el = el.parentElement) {\n    if (el === document.body) break;\n\n    for (const sibling of el.parentElement?.children ?? []) {\n      if (sibling === el) continue;\n      if (!(sibling instanceof HTMLElement)) continue;\n      if (sibling.hasAttribute(\"inert\")) continue;\n\n      sibling.setAttribute(\"inert\", \"true\");\n      inertElements.push(sibling);\n    }\n  }\n\n  return () => {\n    releaseFocusTrap(inertElements);\n    inertElements = [];\n  };\n}\n\n/**\n * Unset the `inert` attribute on all elements given\n */\nexport function releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n  for (const el of inertElements) {\n    el.removeAttribute(\"inert\");\n  }\n}\n","import { createContext, useContext } from \"react\";\n\nexport interface TabsContextProps {\n  activeTabId: string;\n  toggleActiveTabId: (tabId: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextProps | null>(null);\n\nexport function useTabsContext() {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error(\n      \"Tabs context required. Did you use `<Tabs.List />`, `<Tabs.Tab />`, or `<Tabs.Content />` outside of <Tabs/>?\",\n    );\n  }\n  return context;\n}\n"],"mappings":"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","names":["import_react","import_react"]}
+{"version":3,"sources":["../../src/tabs/tabs-list.tsx","../../src/utils.ts","../../src/tabs/context.ts"],"sourcesContent":["import type { HTMLAttributes, ReactElement, MouseEvent } from \"react\";\nimport { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { useResize, useHydrated } from \"../utils\";\nimport { useTabsContext } from \"./context\";\n\nexport interface TabsListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsTabProps> | ReactElement<TabsTabProps>[];\n\n  /**\n   * Direction of the tabs. Can either be vertical or horizontal.\n   * Horizontal breaks on window width with fallback back to vertical\n   *\n   * @default \"horizontal\"\n   */\n  direction?: \"vertical\" | \"horizontal\";\n}\n\nexport const TabsList = forwardRef<HTMLDivElement, TabsListProps>(\n  ({ children, direction = \"horizontal\", className, ...rest }) => {\n    const { activeTabId } = useTabsContext();\n    const tabsListRef = useRef<HTMLDivElement>(null);\n    const { width: tabsWidth } = useResize(tabsListRef);\n\n    const isClientSide = useHydrated();\n    const { innerWidth } = isClientSide ? window : { innerWidth: 1000 };\n    const wideEnough = innerWidth >= tabsWidth;\n\n    const previousTabId = useRef(activeTabId);\n\n    // Marker animation\n    useEffect(() => {\n      const tabList = tabsListRef.current;\n      const activeTab = tabList?.querySelector(`[data-tabid=\"${activeTabId}\"]`);\n      if (!activeTab || !tabList) return;\n\n      const { offsetHeight: containerHeight, offsetWidth: containerWidth } = tabList;\n      const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = activeTab as HTMLElement;\n\n      // Calculate the height and width of the marker relative to the container\n      const height = offsetHeight / containerHeight;\n      const width = offsetWidth / containerWidth;\n\n      // NOTE: Doing a DOM manipulation here to set the CSS variables for the marker\n      // Not really the react idomatic way, but as long as it works we are able to skip some intermidiate `useState`\n      tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-height\", String(height));\n      tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-width\", String(width));\n      tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-top\", `${offsetTop}px`);\n      tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-left\", `${offsetLeft}px`);\n\n      // Start with border fallback, then switch to the animated marker when the user changes tabs\n      // This way the marker is placed immediately to the default tab, then animates smoothly to the next when selected\n      if (previousTabId.current !== activeTabId) {\n        tabsListRef.current.style.setProperty(\n          \"--_hds-tabs-marker-animated-color\",\n          \"var(--_hds-tabs-marker-color)\",\n        );\n        tabsListRef.current.style.setProperty(\n          \"--_hds-tabs-marker-border-fallback-color\",\n          \"transparent\",\n        );\n      }\n      previousTabId.current = activeTabId;\n    }, [activeTabId, innerWidth]);\n\n    return (\n      <div\n        className={clsx(\n          \"hds-tabs__list\",\n          direction === \"horizontal\"\n            ? {\n                \"hds-tabs__list--horizontal\": wideEnough,\n                \"hds-tabs__list--vertical\": !wideEnough,\n              }\n            : {\n                \"hds-tabs__list--vertical\": true,\n              },\n          className as undefined,\n        )}\n        ref={tabsListRef}\n        role=\"tablist\"\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nTabsList.displayName = \"Tabs.List\";\n\nexport interface TabsTabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactElement<HTMLElement> | string;\n\n  /**\n   * Identifier for the tab\n   */\n  tabId: string;\n}\n\nexport const TabsTab = forwardRef<HTMLButtonElement, TabsTabProps>(\n  ({ children, tabId, className, onClick, ...rest }, ref) => {\n    const context = useTabsContext();\n\n    const toggleTab = (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      context.toggleActiveTabId(tabId);\n      onClick?.(e);\n    };\n    return (\n      <button\n        className={clsx(\n          \"hds-tabs__tab\",\n          { \"hds-tabs__tab--active\": context.activeTabId === tabId },\n          className as undefined,\n        )}\n        data-tabid={tabId}\n        onClick={toggleTab}\n        ref={ref}\n        type=\"button\"\n        role=\"tab\"\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\nTabsTab.displayName = \"Tabs.Tab\";\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n\nfunction subscribe() {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n  return () => {};\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n\n/**\n * Trap focus inside an element using the `inert` attribute.\n *\n * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.\n * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.\n *\n * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n * @see https://web.dev/articles/inert\n */\nexport function focusTrap(element: HTMLElement) {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element\n  if (element === document.body) return () => {};\n\n  let inertElements: HTMLElement[] = [];\n  for (let el: HTMLElement | null = element; el; el = el.parentElement) {\n    if (el === document.body) break;\n\n    for (const sibling of el.parentElement?.children ?? []) {\n      if (sibling === el) continue;\n      if (!(sibling instanceof HTMLElement)) continue;\n      if (sibling.hasAttribute(\"inert\")) continue;\n\n      sibling.setAttribute(\"inert\", \"true\");\n      inertElements.push(sibling);\n    }\n  }\n\n  return () => {\n    releaseFocusTrap(inertElements);\n    inertElements = [];\n  };\n}\n\n/**\n * Unset the `inert` attribute on all elements given\n */\nexport function releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n  for (const el of inertElements) {\n    el.removeAttribute(\"inert\");\n  }\n}\n","import { createContext, useContext } from \"react\";\n\nexport interface TabsContextProps {\n  activeTabId: string;\n  toggleActiveTabId: (tabId: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextProps | null>(null);\n\nexport function useTabsContext() {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error(\n      \"Tabs context required. Did you use `<Tabs.List />`, `<Tabs.Tab />`, or `<Tabs.Content />` outside of <Tabs/>?\",\n    );\n  }\n  return context;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,gBAA8C;AAC9C,6BAAqB;;;ACFrB,YAAuB;AACvB,mBAAiD;AA2B1C,SAAS,UACd,KACmC;AACnC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB,CAAC;AAC5C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAiB,CAAC;AAC9C,QAAM,mBAAe,0BAAY,MAAM;AAjCzC;AAkCI,SAAI,2BAAK,aAAY,MAAM;AACzB,gBAAS,sCAAK,YAAL,mBAAc,gBAAd,YAA6B,CAAC;AACvC,iBAAU,sCAAK,YAAL,mBAAc,iBAAd,YAA8B,CAAC;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,8BAAU,MAAM;AACd,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,iBAAiB,UAAU,YAAY;AAC9C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAC/C,aAAO,oBAAoB,UAAU,YAAY;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,KAAK,YAAY,CAAC;AACtB,8BAAU,MAAM;AACd,iBAAa;AAAA,EAEf,GAAG,CAAC,CAAC;AACL,SAAO,EAAE,OAAO,OAAO;AACzB;AAEA,SAAS,YAAY;AAEnB,SAAO,MAAM;AAAA,EAAC;AAChB;AAEO,SAAS,cAAc;AAC5B,SAAa;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;;;ACjEA,IAAAC,gBAA0C;AAOnC,IAAM,kBAAc,6BAAuC,IAAI;AAE/D,SAAS,iBAAiB;AAC/B,QAAM,cAAU,0BAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;;;AFiDM;AAhDC,IAAM,eAAW;AAAA,EACtB,CAAC,OAA+D;AAA/D,iBAAE,YAAU,YAAY,cAAc,UAnBzC,IAmBG,IAAoD,iBAApD,IAAoD,CAAlD,YAAU,aAA0B;AACrC,UAAM,EAAE,YAAY,IAAI,eAAe;AACvC,UAAM,kBAAc,sBAAuB,IAAI;AAC/C,UAAM,EAAE,OAAO,UAAU,IAAI,UAAU,WAAW;AAElD,UAAM,eAAe,YAAY;AACjC,UAAM,EAAE,WAAW,IAAI,eAAe,SAAS,EAAE,YAAY,IAAK;AAClE,UAAM,aAAa,cAAc;AAEjC,UAAM,oBAAgB,sBAAO,WAAW;AAGxC,iCAAU,MAAM;AACd,YAAM,UAAU,YAAY;AAC5B,YAAM,YAAY,mCAAS,cAAc,gBAAgB,WAAW;AACpE,UAAI,CAAC,aAAa,CAAC;AAAS;AAE5B,YAAM,EAAE,cAAc,iBAAiB,aAAa,eAAe,IAAI;AACvE,YAAM,EAAE,cAAc,aAAa,WAAW,WAAW,IAAI;AAG7D,YAAM,SAAS,eAAe;AAC9B,YAAM,QAAQ,cAAc;AAI5B,kBAAY,QAAQ,MAAM,YAAY,6BAA6B,OAAO,MAAM,CAAC;AACjF,kBAAY,QAAQ,MAAM,YAAY,4BAA4B,OAAO,KAAK,CAAC;AAC/E,kBAAY,QAAQ,MAAM,YAAY,0BAA0B,GAAG,SAAS,IAAI;AAChF,kBAAY,QAAQ,MAAM,YAAY,2BAA2B,GAAG,UAAU,IAAI;AAIlF,UAAI,cAAc,YAAY,aAAa;AACzC,oBAAY,QAAQ,MAAM;AAAA,UACxB;AAAA,UACA;AAAA,QACF;AACA,oBAAY,QAAQ,MAAM;AAAA,UACxB;AAAA,UACA;AAAA,QACF;AAAA,MACF;AACA,oBAAc,UAAU;AAAA,IAC1B,GAAG,CAAC,aAAa,UAAU,CAAC;AAE5B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,cAAc,eACV;AAAA,YACE,8BAA8B;AAAA,YAC9B,4BAA4B,CAAC;AAAA,UAC/B,IACA;AAAA,YACE,4BAA4B;AAAA,UAC9B;AAAA,UACJ;AAAA,QACF;AAAA,QACA,KAAK;AAAA,QACL,MAAK;AAAA,SACD,OAfL;AAAA,QAiBE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;AAWhB,IAAM,cAAU;AAAA,EACrB,CAAC,IAAkD,QAAQ;AAA1D,iBAAE,YAAU,OAAO,WAAW,QApGjC,IAoGG,IAA0C,iBAA1C,IAA0C,CAAxC,YAAU,SAAO,aAAW;AAC7B,UAAM,UAAU,eAAe;AAE/B,UAAM,YAAY,CAAC,MAAqC;AACtD,QAAE,eAAe;AACjB,cAAQ,kBAAkB,KAAK;AAC/B,yCAAU;AAAA,IACZ;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,EAAE,yBAAyB,QAAQ,gBAAgB,MAAM;AAAA,UACzD;AAAA,QACF;AAAA,QACA,cAAY;AAAA,QACZ,SAAS;AAAA,QACT;AAAA,QACA,MAAK;AAAA,QACL,MAAK;AAAA,SACD,OAXL;AAAA,QAaE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,QAAQ,cAAc;","names":["import_react","import_react"]}

package/dist/tabs/tabs-list.mjs

@@ -1,9 +1,9 @@
 import {
   TabsList,
   TabsTab
-} from "../chunk-SRLRTLHS.mjs";
+} from "../chunk-7JDEN3T6.mjs";
 import "../chunk-KQITCS3U.mjs";
-import "../chunk-JXA3B33M.mjs";
+import "../chunk-DEX36MFK.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   TabsList,

package/dist/tabs/tabs.js

@@ -54,6 +54,7 @@ __export(tabs_exports, {
 module.exports = __toCommonJS(tabs_exports);
 var import_react2 = require("react");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot = require("@radix-ui/react-slot");
 
 // src/tabs/context.ts
 var import_react = require("react");
@@ -63,8 +64,9 @@ var TabsContext = (0, import_react.createContext)(null);
 var import_jsx_runtime = require("react/jsx-runtime");
 var Tabs = (0, import_react2.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "div", defaultTab, children } = _b, rest = __objRest(_b, ["as", "defaultTab", "children"]);
+    var _b = _a, { asChild, defaultTab, children } = _b, rest = __objRest(_b, ["asChild", "defaultTab", "children"]);
     const [activeTabId, setActiveTabId] = (0, import_react2.useState)(defaultTab);
+    const Component = asChild ? import_react_slot.Slot : "div";
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname.clsx)("hds-tabs"), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContext.Provider, { value: { activeTabId, toggleActiveTabId: setActiveTabId }, children }) }));
   }
 );

package/dist/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/tabs.tsx","../../src/tabs/context.ts"],"sourcesContent":["import type { HTMLAttributes, ReactElement } from \"react\";\nimport { forwardRef, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\nimport { TabsContext } from \"./context\";\nimport type { TabContentsProps } from \"./tabs-content\";\nimport type { TabListProps } from \"./tabs-list\";\n\nexport interface TabsProps extends HTMLAttributes<HTMLElement> {\n  children: ReactElement<TabListProps | TabContentsProps>[] | ReactElement;\n\n  /**\n   * Define which tab to use as default. Must be one of the <Tab/>s identifier.\n   */\n  defaultTab: string;\n}\n\nexport const Tabs: OverridableComponent<TabsProps, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", defaultTab, children, ...rest }, ref) => {\n    const [activeTabId, setActiveTabId] = useState<string>(defaultTab);\n    return (\n      <Component className={clsx(\"hds-tabs\")} ref={ref} {...rest}>\n        <TabsContext.Provider value={{ activeTabId, toggleActiveTabId: setActiveTabId }}>\n          {children}\n        </TabsContext.Provider>\n      </Component>\n    );\n  },\n);\n\nTabs.displayName = \"Tabs\";\n","import { createContext, useContext } from \"react\";\n\nexport interface TabsContextProps {\n  activeTabId: string;\n  toggleActiveTabId: (tabId: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextProps | null>(null);\n\nexport function useTabsContext() {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error(\n      \"Tabs context required. Did you use `<Tabs.List />`, `<Tabs.Tab />`, or `<Tabs.Content />` outside of <Tabs/>?\",\n    );\n  }\n  return context;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,gBAAqC;AACrC,6BAAqB;;;ACFrB,mBAA0C;AAOnC,IAAM,kBAAc,4BAAuC,IAAI;;;ADe9D;AALD,IAAM,WAAwD;AAAA,EACnE,CAAC,IAA0D,QAAQ;AAAlE,iBAAE,MAAI,YAAY,OAAO,YAAY,SAlBxC,IAkBG,IAAkD,iBAAlD,IAAkD,CAAhD,MAAuB,cAAY;AACpC,UAAM,CAAC,aAAa,cAAc,QAAI,wBAAiB,UAAU;AACjE,WACE,4CAAC,0CAAU,eAAW,6BAAK,UAAU,GAAG,OAAc,OAArD,EACC,sDAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,aAAa,mBAAmB,eAAe,GAC3E,UACH,IACF;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;","names":["import_react"]}
+{"version":3,"sources":["../../src/tabs/tabs.tsx","../../src/tabs/context.ts"],"sourcesContent":["import type { HTMLAttributes, ReactElement } from \"react\";\nimport { forwardRef, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { TabsContext } from \"./context\";\nimport type { TabsContentsProps } from \"./tabs-content\";\nimport type { TabsListProps } from \"./tabs-list\";\n\nexport interface TabsProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsListProps | TabsContentsProps>[] | ReactElement;\n\n  /**\n   * Define which tab to use as default. Must be one of the <Tab/>s identifier.\n   */\n  defaultTab: string;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(\n  ({ asChild, defaultTab, children, ...rest }, ref) => {\n    const [activeTabId, setActiveTabId] = useState<string>(defaultTab);\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component className={clsx(\"hds-tabs\")} ref={ref} {...rest}>\n        <TabsContext.Provider value={{ activeTabId, toggleActiveTabId: setActiveTabId }}>\n          {children}\n        </TabsContext.Provider>\n      </Component>\n    );\n  },\n);\nTabs.displayName = \"Tabs\";\n","import { createContext, useContext } from \"react\";\n\nexport interface TabsContextProps {\n  activeTabId: string;\n  toggleActiveTabId: (tabId: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextProps | null>(null);\n\nexport function useTabsContext() {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error(\n      \"Tabs context required. Did you use `<Tabs.List />`, `<Tabs.Tab />`, or `<Tabs.Content />` outside of <Tabs/>?\",\n    );\n  }\n  return context;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,gBAAqC;AACrC,6BAAqB;AACrB,wBAAqB;;;ACHrB,mBAA0C;AAOnC,IAAM,kBAAc,4BAAuC,IAAI;;;ADuB9D;AAND,IAAM,WAAO;AAAA,EAClB,CAAC,IAA4C,QAAQ;AAApD,iBAAE,WAAS,YAAY,SAzB1B,IAyBG,IAAoC,iBAApC,IAAoC,CAAlC,WAAS,cAAY;AACtB,UAAM,CAAC,aAAa,cAAc,QAAI,wBAAiB,UAAU;AACjE,UAAM,YAAY,UAAU,yBAAO;AACnC,WACE,4CAAC,0CAAU,eAAW,6BAAK,UAAU,GAAG,OAAc,OAArD,EACC,sDAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,aAAa,mBAAmB,eAAe,GAC3E,UACH,IACF;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;","names":["import_react"]}

package/dist/tabs/tabs.mjs

@@ -1,6 +1,6 @@
 import {
   Tabs
-} from "../chunk-XVFQWVHO.mjs";
+} from "../chunk-3MQKXNZ6.mjs";
 import "../chunk-KQITCS3U.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {

package/dist/text/index.d.mts

@@ -1,15 +1,2 @@
 export { Text_alias_2 as Text } from '../_tsup-dts-rollup';
-export { TextH1Display_alias_2 as TextH1Display } from '../_tsup-dts-rollup';
-export { TextH1_alias_2 as TextH1 } from '../_tsup-dts-rollup';
-export { TextH2_alias_2 as TextH2 } from '../_tsup-dts-rollup';
-export { TextH3_alias_2 as TextH3 } from '../_tsup-dts-rollup';
-export { TextH3Title_alias_2 as TextH3Title } from '../_tsup-dts-rollup';
-export { TextBody_alias_2 as TextBody } from '../_tsup-dts-rollup';
-export { TextBodyTitle_alias_2 as TextBodyTitle } from '../_tsup-dts-rollup';
-export { TextBodySmall_alias_2 as TextBodySmall } from '../_tsup-dts-rollup';
-export { TextBodySmallTitle_alias_2 as TextBodySmallTitle } from '../_tsup-dts-rollup';
-export { TextTechnical_alias_2 as TextTechnical } from '../_tsup-dts-rollup';
-export { TextTechnicalTitle_alias_2 as TextTechnicalTitle } from '../_tsup-dts-rollup';
-export { TextCaption_alias_2 as TextCaption } from '../_tsup-dts-rollup';
-export { TextCaptionTitle_alias_2 as TextCaptionTitle } from '../_tsup-dts-rollup';
 export { TextProps_alias_2 as TextProps } from '../_tsup-dts-rollup';

package/dist/text/index.d.ts

@@ -1,15 +1,2 @@
 export { Text_alias_2 as Text } from '../_tsup-dts-rollup';
-export { TextH1Display_alias_2 as TextH1Display } from '../_tsup-dts-rollup';
-export { TextH1_alias_2 as TextH1 } from '../_tsup-dts-rollup';
-export { TextH2_alias_2 as TextH2 } from '../_tsup-dts-rollup';
-export { TextH3_alias_2 as TextH3 } from '../_tsup-dts-rollup';
-export { TextH3Title_alias_2 as TextH3Title } from '../_tsup-dts-rollup';
-export { TextBody_alias_2 as TextBody } from '../_tsup-dts-rollup';
-export { TextBodyTitle_alias_2 as TextBodyTitle } from '../_tsup-dts-rollup';
-export { TextBodySmall_alias_2 as TextBodySmall } from '../_tsup-dts-rollup';
-export { TextBodySmallTitle_alias_2 as TextBodySmallTitle } from '../_tsup-dts-rollup';
-export { TextTechnical_alias_2 as TextTechnical } from '../_tsup-dts-rollup';
-export { TextTechnicalTitle_alias_2 as TextTechnicalTitle } from '../_tsup-dts-rollup';
-export { TextCaption_alias_2 as TextCaption } from '../_tsup-dts-rollup';
-export { TextCaptionTitle_alias_2 as TextCaptionTitle } from '../_tsup-dts-rollup';
 export { TextProps_alias_2 as TextProps } from '../_tsup-dts-rollup';

package/dist/text/index.js

@@ -49,26 +49,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/text/index.tsx
 var text_exports = {};
 __export(text_exports, {
-  Text: () => Text,
-  TextBody: () => TextBody,
-  TextBodySmall: () => TextBodySmall,
-  TextBodySmallTitle: () => TextBodySmallTitle,
-  TextBodyTitle: () => TextBodyTitle,
-  TextCaption: () => TextCaption,
-  TextCaptionTitle: () => TextCaptionTitle,
-  TextH1: () => TextH1,
-  TextH1Display: () => TextH1Display,
-  TextH2: () => TextH2,
-  TextH3: () => TextH3,
-  TextH3Title: () => TextH3Title,
-  TextTechnical: () => TextTechnical,
-  TextTechnicalTitle: () => TextTechnicalTitle
+  Text: () => Text
 });
 module.exports = __toCommonJS(text_exports);
 
 // src/text/text.tsx
 var import_react = require("react");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot = require("@radix-ui/react-slot");
 var import_jsx_runtime = require("react/jsx-runtime");
 var defaultHTMLTag = {
   "h1-display": "h1",
@@ -88,7 +76,8 @@ var defaultHTMLTag = {
 var Text = (0, import_react.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
-      as,
+      as: Tag,
+      asChild,
       variant = "body",
       size = "fluid",
       _unstableSpacing: spacing,
@@ -96,13 +85,14 @@ var Text = (0, import_react.forwardRef)(
       className
     } = _b, rest = __objRest(_b, [
       "as",
+      "asChild",
       "variant",
       "size",
       "_unstableSpacing",
       "children",
       "className"
     ]);
-    const Component = as != null ? as : defaultHTMLTag[variant];
+    const Component = asChild ? import_react_slot.Slot : Tag != null ? Tag : defaultHTMLTag[variant];
     const sizeModifier = size !== "fluid" && variant !== "caption" && variant !== "caption-title" && size;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Component,
@@ -121,59 +111,8 @@ var Text = (0, import_react.forwardRef)(
   }
 );
 Text.displayName = "Text";
-
-// src/text/index.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var TextH1Display = textVariant("h1-display", "TextH1Display");
-var TextH1 = textVariant("h1", "TextH1");
-var TextH2 = textVariant("h2", "TextH2");
-var TextH3 = textVariant("h3", "TextH3");
-var TextH3Title = textVariant("h3-title", "TextH3Title");
-var TextBody = textVariant("body", "TextBody");
-var TextBodyTitle = textVariant("body-title", "TextBodyTitle");
-var TextBodySmall = textVariant("body-small", "TextBodySmall");
-var TextBodySmallTitle = textVariant("body-small-title", "TextBodySmallTitle");
-var TextTechnical = textVariant("technical", "TextTechnical");
-var TextTechnicalTitle = textVariant("technical-title", "TextTechnicalTitle");
-var TextCaption = textVariant("caption", "TextCaption");
-var TextCaptionTitle = textVariant("caption-title", "TextCaptionTitle");
-var variantToHtmlTag = {
-  "h1-display": "h1",
-  h1: "h1",
-  h2: "h2",
-  h3: "h3",
-  "h3-title": "h3",
-  body: "p",
-  "body-title": "p",
-  "body-small": "p",
-  "body-small-title": "p",
-  technical: "p",
-  "technical-title": "p",
-  caption: "p",
-  "caption-title": "p"
-};
-function textVariant(variant, displayName) {
-  function WrappedText(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, __spreadValues({ variant, as: variantToHtmlTag[variant != null ? variant : "body"] }, props));
-  }
-  WrappedText.displayName = displayName;
-  return WrappedText;
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Text,
-  TextBody,
-  TextBodySmall,
-  TextBodySmallTitle,
-  TextBodyTitle,
-  TextCaption,
-  TextCaptionTitle,
-  TextH1,
-  TextH1Display,
-  TextH2,
-  TextH3,
-  TextH3Title,
-  TextTechnical,
-  TextTechnicalTitle
+  Text
 });
 //# sourceMappingURL=index.js.map

package/dist/text/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/text/index.tsx","../../src/text/text.tsx"],"sourcesContent":["import type { TextProps } from \"./text\";\nimport { Text } from \"./text\";\n\nexport { Text };\nexport type * from \"./text\";\n\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextH1Display = textVariant(\"h1-display\", \"TextH1Display\");\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextH1 = textVariant(\"h1\", \"TextH1\");\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextH2 = textVariant(\"h2\", \"TextH2\");\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextH3 = textVariant(\"h3\", \"TextH3\");\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextH3Title = textVariant(\"h3-title\", \"TextH3Title\");\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextBody = textVariant(\"body\", \"TextBody\"); // Less weird\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextBodyTitle = textVariant(\"body-title\", \"TextBodyTitle\");\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextBodySmall = textVariant(\"body-small\", \"TextBodySmall\");\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextBodySmallTitle = textVariant(\"body-small-title\", \"TextBodySmallTitle\");\n/**\n * 🚨 Unstable alterentative: Named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextTechnical = textVariant(\"technical\", \"TextTechnical\");\n/**\n * 🚨 Unstable alterentative: Named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextTechnicalTitle = textVariant(\"technical-title\", \"TextTechnicalTitle\");\n/**\n * 🚨 Unstable alterentative: Named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextCaption = textVariant(\"caption\", \"TextCaption\");\n/**\n * 🚨 Unstable alterentative: Named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextCaptionTitle = textVariant(\"caption-title\", \"TextCaptionTitle\");\n\nconst variantToHtmlTag = {\n  \"h1-display\": \"h1\",\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  \"h3-title\": \"h3\",\n  body: \"p\",\n  \"body-title\": \"p\",\n  \"body-small\": \"p\",\n  \"body-small-title\": \"p\",\n  technical: \"p\",\n  \"technical-title\": \"p\",\n  caption: \"p\",\n  \"caption-title\": \"p\",\n} as const;\n\nfunction textVariant(\n  variant: TextProps[\"variant\"],\n  displayName: string,\n): React.FunctionComponent<Omit<TextProps, \"variant\">> {\n  function WrappedText(props: Omit<TextProps, \"variant\">) {\n    return <Text variant={variant} as={variantToHtmlTag[variant ?? \"body\"]} {...props} />;\n  }\n  WrappedText.displayName = displayName;\n\n  return WrappedText;\n}\n","import React, { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\ninterface HeadingProps {\n  variant: \"h1-display\" | \"h1\" | \"h2\" | \"h3\" | \"h3-title\";\n  as: React.ElementType;\n}\ninterface ParagraphProps {\n  variant?:\n    | \"body\"\n    | \"body-title\"\n    | \"body-small\"\n    | \"body-small-title\"\n    | \"technical\"\n    | \"technical-title\"\n    | \"caption\"\n    | \"caption-title\";\n}\n\nexport type TextProps = (HeadingProps | ParagraphProps) & {\n  children: React.ReactNode;\n\n  /**\n   * The font-size of the component. By default it's `fluid` which means it's smaller on mobile and larger on desktop.\n   *\n   * But you can lock it to either the min or the max size.\n   */\n  size?: \"min\" | \"max\" | \"fluid\";\n\n  /**\n   * 🚧 Experimental spacing\n   */\n  _unstableSpacing?: boolean;\n};\n\nconst defaultHTMLTag: Record<NonNullable<TextProps[\"variant\"]>, `h${1 | 2 | 3}` | \"p\"> = {\n  \"h1-display\": \"h1\",\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  \"h3-title\": \"h3\",\n  body: \"p\",\n  \"body-title\": \"p\",\n  \"body-small\": \"p\",\n  \"body-small-title\": \"p\",\n  technical: \"p\",\n  \"technical-title\": \"p\",\n  caption: \"p\",\n  \"caption-title\": \"p\",\n};\n\n/**\n * Text component\n *\n * If the variant is `h1-display`, `h1`, `h2`, `h3`, or `h3-title` the `as` prop is required.\n *\n * This to force the consumer to consider which semantic html element to use. E.g. `<h1>` or `<h2>`\n *\n * @example\n * ```tsx\n * <Text variant=\"h1-display\" as=\"h1\">Hello world</Text>\n * <Text variant=\"body\">\n *   This is a body text\n * </Text>\n * ```\n */\nexport const Text: OverridableComponent<TextProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as,\n      variant = \"body\",\n      size = \"fluid\",\n      _unstableSpacing: spacing,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const Component = as ?? defaultHTMLTag[variant];\n    const sizeModifier =\n      size !== \"fluid\" && variant !== \"caption\" && variant !== \"caption-title\" && size;\n    return (\n      <Component\n        className={clsx(\n          `hds-text-${variant}`,\n          sizeModifier && `hds-text--${sizeModifier}`,\n          spacing && \"hds-text--spacing\",\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nText.displayName = \"Text\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkC;AAClC,6BAAqB;AAmFf;AAhDN,IAAM,iBAAmF;AAAA,EACvF,cAAc;AAAA,EACd,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,cAAc;AAAA,EACd,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,iBAAiB;AACnB;AAiBO,IAAM,WAAwD;AAAA,EACnE,CACE,IASA,QACG;AAVH,iBACE;AAAA;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,IA3EN,IAqEI,IAOK,iBAPL,IAOK;AAAA,MANH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,kBAAM,eAAe,OAAO;AAC9C,UAAM,eACJ,SAAS,WAAW,YAAY,aAAa,YAAY,mBAAmB;AAC9E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT,YAAY,OAAO;AAAA,UACnB,gBAAgB,aAAa,YAAY;AAAA,UACzC,WAAW;AAAA,UACX;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;;;ADyBR,IAAAA,sBAAA;AA/GJ,IAAM,gBAAgB,YAAY,cAAc,eAAe;AAQ/D,IAAM,SAAS,YAAY,MAAM,QAAQ;AAQzC,IAAM,SAAS,YAAY,MAAM,QAAQ;AAQzC,IAAM,SAAS,YAAY,MAAM,QAAQ;AAQzC,IAAM,cAAc,YAAY,YAAY,aAAa;AAQzD,IAAM,WAAW,YAAY,QAAQ,UAAU;AAQ/C,IAAM,gBAAgB,YAAY,cAAc,eAAe;AAQ/D,IAAM,gBAAgB,YAAY,cAAc,eAAe;AAQ/D,IAAM,qBAAqB,YAAY,oBAAoB,oBAAoB;AAM/E,IAAM,gBAAgB,YAAY,aAAa,eAAe;AAM9D,IAAM,qBAAqB,YAAY,mBAAmB,oBAAoB;AAM9E,IAAM,cAAc,YAAY,WAAW,aAAa;AAMxD,IAAM,mBAAmB,YAAY,iBAAiB,kBAAkB;AAE/E,IAAM,mBAAmB;AAAA,EACvB,cAAc;AAAA,EACd,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,cAAc;AAAA,EACd,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,iBAAiB;AACnB;AAEA,SAAS,YACP,SACA,aACqD;AACrD,WAAS,YAAY,OAAmC;AACtD,WAAO,6CAAC,uBAAK,SAAkB,IAAI,iBAAiB,4BAAW,MAAM,KAAO,MAAO;AAAA,EACrF;AACA,cAAY,cAAc;AAE1B,SAAO;AACT;","names":["import_jsx_runtime"]}
+{"version":3,"sources":["../../src/text/index.tsx","../../src/text/text.tsx"],"sourcesContent":["import { Text } from \"./text\";\n\nexport { Text };\nexport type * from \"./text\";\n","/* eslint-disable @typescript-eslint/no-unsafe-assignment -- Typings for the differnt html elements */\n/* eslint-disable @typescript-eslint/no-explicit-any -- Typings for the differnt html elements */\n\nimport React, { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\ntype HeadingProps =\n  | {\n      variant: \"h1-display\" | \"h1\" | \"h2\" | \"h3\" | \"h3-title\";\n      asChild: true;\n      as?: never;\n    }\n  | {\n      variant: \"h1-display\" | \"h1\" | \"h2\" | \"h3\" | \"h3-title\";\n      as: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"span\" | \"div\" | \"label\" | \"p\";\n      asChild?: never;\n    };\n\ninterface ParagraphProps {\n  variant?:\n    | \"body\"\n    | \"body-title\"\n    | \"body-small\"\n    | \"body-small-title\"\n    | \"technical\"\n    | \"technical-title\"\n    | \"caption\"\n    | \"caption-title\";\n}\n\nexport type TextProps = {\n  children: React.ReactNode;\n\n  /**\n   * The font-size of the component. By default it's `fluid` which means it's smaller on mobile and larger on desktop.\n   *\n   * But you can lock it to either the min or the max size.\n   *\n   * @default \"fluid\"\n   */\n  size?: \"min\" | \"max\" | \"fluid\";\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n\n  /**\n   * Convienence prop to change the rendered element.\n   *\n   * Use {@link TextProps.asChild} if you need more control of the rendered element.\n   */\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"span\" | \"div\" | \"label\" | \"p\";\n\n  /**\n   * 🚧 Experimental spacing\n   */\n  _unstableSpacing?: boolean;\n} & (HeadingProps | ParagraphProps) &\n  React.HTMLAttributes<HTMLParagraphElement | HTMLHeadingElement>;\n\nconst defaultHTMLTag: Record<NonNullable<TextProps[\"variant\"]>, `h${1 | 2 | 3}` | \"p\"> = {\n  \"h1-display\": \"h1\",\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  \"h3-title\": \"h3\",\n  body: \"p\",\n  \"body-title\": \"p\",\n  \"body-small\": \"p\",\n  \"body-small-title\": \"p\",\n  technical: \"p\",\n  \"technical-title\": \"p\",\n  caption: \"p\",\n  \"caption-title\": \"p\",\n};\n\n/**\n * Text component\n *\n * If the variant is `h1-display`, `h1`, `h2`, `h3`, or `h3-title` the `as` or `asChild` prop is required.\n *\n * This is to force the consumer to consider which semantic html element to use. E.g. `<h1>` or `<h2>`\n *\n * @example\n * ```tsx\n * <Text variant=\"h1-display\" as=\"h1\">Hello world</Text>\n * <Text variant=\"body\">\n *   This is a body text\n * </Text>\n * ```\n */\nexport const Text = forwardRef<HTMLParagraphElement | HTMLHeadingElement, TextProps>(\n  (\n    {\n      as: Tag,\n      asChild,\n      variant = \"body\",\n      size = \"fluid\",\n      _unstableSpacing: spacing,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : Tag ?? defaultHTMLTag[variant];\n    const sizeModifier =\n      size !== \"fluid\" && variant !== \"caption\" && variant !== \"caption-title\" && size;\n    return (\n      <Component\n        className={clsx(\n          `hds-text-${variant}`,\n          sizeModifier && `hds-text--${sizeModifier}`,\n          spacing && \"hds-text--spacing\",\n          className as undefined,\n        )}\n        ref={ref as any}\n        {...(rest as any)}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nText.displayName = \"Text\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACGA,mBAAkC;AAClC,6BAAqB;AACrB,wBAAqB;AA4Gf;AAjDN,IAAM,iBAAmF;AAAA,EACvF,cAAc;AAAA,EACd,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,cAAc;AAAA,EACd,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,iBAAiB;AACnB;AAiBO,IAAM,WAAO;AAAA,EAClB,CACE,IAUA,QACG;AAXH,iBACE;AAAA,UAAI;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,IAxGN,IAiGI,IAQK,iBARL,IAQK;AAAA,MAPH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,UAAU,yBAAO,oBAAO,eAAe,OAAO;AAChE,UAAM,eACJ,SAAS,WAAW,YAAY,aAAa,YAAY,mBAAmB;AAC9E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT,YAAY,OAAO;AAAA,UACnB,gBAAgB,aAAa,YAAY;AAAA,UACzC,WAAW;AAAA,UACX;AAAA,QACF;AAAA,QACA;AAAA,SACK,OARN;AAAA,QAUE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;","names":[]}

package/dist/text/index.mjs

@@ -1,36 +1,9 @@
-import {
-  TextBody,
-  TextBodySmall,
-  TextBodySmallTitle,
-  TextBodyTitle,
-  TextCaption,
-  TextCaptionTitle,
-  TextH1,
-  TextH1Display,
-  TextH2,
-  TextH3,
-  TextH3Title,
-  TextTechnical,
-  TextTechnicalTitle
-} from "../chunk-FYNTNGIY.mjs";
+import "../chunk-CSXSUQ2M.mjs";
 import {
   Text
-} from "../chunk-57SSGJ4X.mjs";
+} from "../chunk-GGQB2WWD.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
-  Text,
-  TextBody,
-  TextBodySmall,
-  TextBodySmallTitle,
-  TextBodyTitle,
-  TextCaption,
-  TextCaptionTitle,
-  TextH1,
-  TextH1Display,
-  TextH2,
-  TextH3,
-  TextH3Title,
-  TextTechnical,
-  TextTechnicalTitle
+  Text
 };
 //# sourceMappingURL=index.mjs.map

package/dist/text/text.js

@@ -54,6 +54,7 @@ __export(text_exports, {
 module.exports = __toCommonJS(text_exports);
 var import_react = require("react");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot = require("@radix-ui/react-slot");
 var import_jsx_runtime = require("react/jsx-runtime");
 var defaultHTMLTag = {
   "h1-display": "h1",
@@ -73,7 +74,8 @@ var defaultHTMLTag = {
 var Text = (0, import_react.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
-      as,
+      as: Tag,
+      asChild,
       variant = "body",
       size = "fluid",
       _unstableSpacing: spacing,
@@ -81,13 +83,14 @@ var Text = (0, import_react.forwardRef)(
       className
     } = _b, rest = __objRest(_b, [
       "as",
+      "asChild",
       "variant",
       "size",
       "_unstableSpacing",
       "children",
       "className"
     ]);
-    const Component = as != null ? as : defaultHTMLTag[variant];
+    const Component = asChild ? import_react_slot.Slot : Tag != null ? Tag : defaultHTMLTag[variant];
     const sizeModifier = size !== "fluid" && variant !== "caption" && variant !== "caption-title" && size;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Component,

package/dist/text/text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/text/text.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\ninterface HeadingProps {\n  variant: \"h1-display\" | \"h1\" | \"h2\" | \"h3\" | \"h3-title\";\n  as: React.ElementType;\n}\ninterface ParagraphProps {\n  variant?:\n    | \"body\"\n    | \"body-title\"\n    | \"body-small\"\n    | \"body-small-title\"\n    | \"technical\"\n    | \"technical-title\"\n    | \"caption\"\n    | \"caption-title\";\n}\n\nexport type TextProps = (HeadingProps | ParagraphProps) & {\n  children: React.ReactNode;\n\n  /**\n   * The font-size of the component. By default it's `fluid` which means it's smaller on mobile and larger on desktop.\n   *\n   * But you can lock it to either the min or the max size.\n   */\n  size?: \"min\" | \"max\" | \"fluid\";\n\n  /**\n   * 🚧 Experimental spacing\n   */\n  _unstableSpacing?: boolean;\n};\n\nconst defaultHTMLTag: Record<NonNullable<TextProps[\"variant\"]>, `h${1 | 2 | 3}` | \"p\"> = {\n  \"h1-display\": \"h1\",\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  \"h3-title\": \"h3\",\n  body: \"p\",\n  \"body-title\": \"p\",\n  \"body-small\": \"p\",\n  \"body-small-title\": \"p\",\n  technical: \"p\",\n  \"technical-title\": \"p\",\n  caption: \"p\",\n  \"caption-title\": \"p\",\n};\n\n/**\n * Text component\n *\n * If the variant is `h1-display`, `h1`, `h2`, `h3`, or `h3-title` the `as` prop is required.\n *\n * This to force the consumer to consider which semantic html element to use. E.g. `<h1>` or `<h2>`\n *\n * @example\n * ```tsx\n * <Text variant=\"h1-display\" as=\"h1\">Hello world</Text>\n * <Text variant=\"body\">\n *   This is a body text\n * </Text>\n * ```\n */\nexport const Text: OverridableComponent<TextProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as,\n      variant = \"body\",\n      size = \"fluid\",\n      _unstableSpacing: spacing,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const Component = as ?? defaultHTMLTag[variant];\n    const sizeModifier =\n      size !== \"fluid\" && variant !== \"caption\" && variant !== \"caption-title\" && size;\n    return (\n      <Component\n        className={clsx(\n          `hds-text-${variant}`,\n          sizeModifier && `hds-text--${sizeModifier}`,\n          spacing && \"hds-text--spacing\",\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nText.displayName = \"Text\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkC;AAClC,6BAAqB;AAmFf;AAhDN,IAAM,iBAAmF;AAAA,EACvF,cAAc;AAAA,EACd,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,cAAc;AAAA,EACd,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,iBAAiB;AACnB;AAiBO,IAAM,WAAwD;AAAA,EACnE,CACE,IASA,QACG;AAVH,iBACE;AAAA;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,IA3EN,IAqEI,IAOK,iBAPL,IAOK;AAAA,MANH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,kBAAM,eAAe,OAAO;AAC9C,UAAM,eACJ,SAAS,WAAW,YAAY,aAAa,YAAY,mBAAmB;AAC9E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT,YAAY,OAAO;AAAA,UACnB,gBAAgB,aAAa,YAAY;AAAA,UACzC,WAAW;AAAA,UACX;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;","names":[]}
+{"version":3,"sources":["../../src/text/text.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-assignment -- Typings for the differnt html elements */\n/* eslint-disable @typescript-eslint/no-explicit-any -- Typings for the differnt html elements */\n\nimport React, { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\ntype HeadingProps =\n  | {\n      variant: \"h1-display\" | \"h1\" | \"h2\" | \"h3\" | \"h3-title\";\n      asChild: true;\n      as?: never;\n    }\n  | {\n      variant: \"h1-display\" | \"h1\" | \"h2\" | \"h3\" | \"h3-title\";\n      as: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"span\" | \"div\" | \"label\" | \"p\";\n      asChild?: never;\n    };\n\ninterface ParagraphProps {\n  variant?:\n    | \"body\"\n    | \"body-title\"\n    | \"body-small\"\n    | \"body-small-title\"\n    | \"technical\"\n    | \"technical-title\"\n    | \"caption\"\n    | \"caption-title\";\n}\n\nexport type TextProps = {\n  children: React.ReactNode;\n\n  /**\n   * The font-size of the component. By default it's `fluid` which means it's smaller on mobile and larger on desktop.\n   *\n   * But you can lock it to either the min or the max size.\n   *\n   * @default \"fluid\"\n   */\n  size?: \"min\" | \"max\" | \"fluid\";\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n\n  /**\n   * Convienence prop to change the rendered element.\n   *\n   * Use {@link TextProps.asChild} if you need more control of the rendered element.\n   */\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"span\" | \"div\" | \"label\" | \"p\";\n\n  /**\n   * 🚧 Experimental spacing\n   */\n  _unstableSpacing?: boolean;\n} & (HeadingProps | ParagraphProps) &\n  React.HTMLAttributes<HTMLParagraphElement | HTMLHeadingElement>;\n\nconst defaultHTMLTag: Record<NonNullable<TextProps[\"variant\"]>, `h${1 | 2 | 3}` | \"p\"> = {\n  \"h1-display\": \"h1\",\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  \"h3-title\": \"h3\",\n  body: \"p\",\n  \"body-title\": \"p\",\n  \"body-small\": \"p\",\n  \"body-small-title\": \"p\",\n  technical: \"p\",\n  \"technical-title\": \"p\",\n  caption: \"p\",\n  \"caption-title\": \"p\",\n};\n\n/**\n * Text component\n *\n * If the variant is `h1-display`, `h1`, `h2`, `h3`, or `h3-title` the `as` or `asChild` prop is required.\n *\n * This is to force the consumer to consider which semantic html element to use. E.g. `<h1>` or `<h2>`\n *\n * @example\n * ```tsx\n * <Text variant=\"h1-display\" as=\"h1\">Hello world</Text>\n * <Text variant=\"body\">\n *   This is a body text\n * </Text>\n * ```\n */\nexport const Text = forwardRef<HTMLParagraphElement | HTMLHeadingElement, TextProps>(\n  (\n    {\n      as: Tag,\n      asChild,\n      variant = \"body\",\n      size = \"fluid\",\n      _unstableSpacing: spacing,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : Tag ?? defaultHTMLTag[variant];\n    const sizeModifier =\n      size !== \"fluid\" && variant !== \"caption\" && variant !== \"caption-title\" && size;\n    return (\n      <Component\n        className={clsx(\n          `hds-text-${variant}`,\n          sizeModifier && `hds-text--${sizeModifier}`,\n          spacing && \"hds-text--spacing\",\n          className as undefined,\n        )}\n        ref={ref as any}\n        {...(rest as any)}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nText.displayName = \"Text\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAAkC;AAClC,6BAAqB;AACrB,wBAAqB;AA4Gf;AAjDN,IAAM,iBAAmF;AAAA,EACvF,cAAc;AAAA,EACd,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,cAAc;AAAA,EACd,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,iBAAiB;AACnB;AAiBO,IAAM,WAAO;AAAA,EAClB,CACE,IAUA,QACG;AAXH,iBACE;AAAA,UAAI;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,IAxGN,IAiGI,IAQK,iBARL,IAQK;AAAA,MAPH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,UAAU,yBAAO,oBAAO,eAAe,OAAO;AAChE,UAAM,eACJ,SAAS,WAAW,YAAY,aAAa,YAAY,mBAAmB;AAC9E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT,YAAY,OAAO;AAAA,UACnB,gBAAgB,aAAa,YAAY;AAAA,UACzC,WAAW;AAAA,UACX;AAAA,QACF;AAAA,QACA;AAAA,SACK,OARN;AAAA,QAUE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;","names":[]}

package/dist/text/text.mjs

@@ -1,6 +1,6 @@
 import {
   Text
-} from "../chunk-57SSGJ4X.mjs";
+} from "../chunk-GGQB2WWD.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   Text

package/dist/utilities/auto-animate-height.js

@@ -89,14 +89,12 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var AutoAnimateHeight = (0, import_react2.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
-      as: Component = "div",
       children,
       style,
       animationDuration = "quick",
       animationEasing = "normal",
       onTransitionEnd
     } = _b, rest = __objRest(_b, [
-      "as",
       "children",
       "style",
       "animationDuration",
@@ -153,7 +151,7 @@ var AutoAnimateHeight = (0, import_react2.forwardRef)(
       };
     }, [children]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      Component,
+      "div",
       __spreadProps(__spreadValues({
         ref: mergedRef,
         onTransitionEnd,