@digdir/designsystemet-react 1.20.0 → 1.20.1

package/dist/esm/components/textarea/textarea.js

@@ -1,16 +1,20 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import cl from 'clsx/lite';
-import { forwardRef } from 'react';
-
+import cl from "clsx/lite";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/textarea/textarea.tsx
 /**
- * Native HTML textarea element.
- *
- * @example
- * <Textarea />
- */
+* Native HTML textarea element.
+*
+* @example
+* <Textarea />
+*/
 const Textarea = forwardRef(function Textarea({ className, ...rest }, ref) {
-    return (jsx("textarea", { className: cl('ds-input', className), ref: ref, ...rest }));
+	return /* @__PURE__ */ jsx("textarea", {
+		className: cl("ds-input", className),
+		ref,
+		...rest
+	});
 });
-
+//#endregion
 export { Textarea };

package/dist/esm/components/textfield/textfield.d.ts

@@ -0,0 +1,78 @@
+
+import { DefaultProps, LabelRequired } from "../../types.js";
+import { FieldCounterProps } from "../field/field-counter.js";
+import "../field/index.js";
+import { InputProps } from "../input/input.js";
+import { TextareaProps } from "../textarea/textarea.js";
+import { ReactNode } from "react";
+//#region src/components/textfield/textfield.d.ts
+type InputProps_ = Omit<InputProps, 'prefix' | 'className' | 'style' | 'type'>;
+type TextareaProps_ = Omit<TextareaProps, 'prefix' | 'className' | 'style'>;
+type SharedTextfieldProps = {
+  /**
+   * Classname on the wrapper element `Field`
+   */
+  className?: InputProps['className'];
+  /**
+   * Style on the wrapper element `Field`
+   * @default undefined
+   */
+  style?: InputProps['style'];
+  /**
+   * Label
+   */
+  label?: ReactNode;
+  /**
+   * Description
+   */
+  description?: ReactNode;
+  /**
+   * Prefix
+   */
+  prefix?: string;
+  /**
+   * Suffix
+   */
+  suffix?: string;
+  /**
+   * Error message for field
+   */
+  error?: ReactNode;
+  /**
+   * Uses `Field.Counter` to display a character counter
+   * Pass a number to set a limit, or an object to configure the counter
+   */
+  counter?: FieldCounterProps | number;
+} & LabelRequired & DefaultProps;
+type TextfieldTextareaProps = {
+  /**
+   * Use to render a `Textarea` instead of `Input` for multiline support
+   **/
+  multiline: true;
+  type?: never;
+} & TextareaProps_;
+type TextfieldInputProps = {
+  /**
+   * Use to render a `Textarea` instead of `Input` for multiline support
+   **/
+  multiline?: false;
+  /**
+   * Supported `input` types
+   *
+   * @default 'text'
+   * */
+  type?: Exclude<InputProps['type'], 'radio' | 'checkbox'>;
+} & InputProps_;
+type TextfieldProps = SharedTextfieldProps & (TextfieldTextareaProps | TextfieldInputProps);
+/**
+ *  Composed text input component using `Field`
+ *
+ * `classname` & `style` are passed to the wrapper elements.
+ *
+ * Rest props are passed to the `Input` or `Textarea` component.
+ * @example
+ * <Textfield label="Textfield label">
+ */
+declare const Textfield: import("react").ForwardRefExoticComponent<TextfieldProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+//#endregion
+export { Textfield, TextfieldProps };

package/dist/esm/components/textfield/textfield.js

@@ -1,25 +1,49 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Field as FieldComponent } from '../field/index.js';
-import { Input } from '../input/input.js';
-import { Label } from '../label/label.js';
-import { Textarea } from '../textarea/textarea.js';
-import { ValidationMessage } from '../validation-message/validation-message.js';
-import { FieldDescription } from '../field/field-description.js';
-import { FieldAffixes, FieldAffix } from '../field/field-affix.js';
-
+import { Label } from "../label/label.js";
+import { ValidationMessage } from "../validation-message/validation-message.js";
+import { Input } from "../input/input.js";
+import { FieldAffix, FieldAffixes } from "../field/field-affix.js";
+import { FieldDescription } from "../field/field-description.js";
+import { Field as FieldComponent } from "../field/index.js";
+import { Textarea } from "../textarea/textarea.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/textfield/textfield.tsx
 /**
- *  Composed text input component using `Field`
- *
- * `classname` & `style` are passed to the wrapper elements.
- *
- * Rest props are passed to the `Input` or `Textarea` component.
- * @example
- * <Textfield label="Textfield label">
- */
-const Textfield = forwardRef(function Textfield({ label, description, error, multiline, prefix, suffix, 'data-color': color, 'data-size': size, counter, style, className, ...rest }, ref) {
-    return (jsxs(FieldComponent, { className: className, "data-color": color, "data-size": size, style: style, children: [!!label && jsx(Label, { children: label }), !!description && jsx(FieldDescription, { children: description }), jsxs(FieldAffixes, { children: [prefix === undefined || jsx(FieldAffix, { children: prefix }), multiline === true ? (jsx(Textarea, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })) : (jsx(Input, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })), suffix === undefined || jsx(FieldAffix, { children: suffix })] }), !!counter && (jsx(FieldComponent.Counter, { ...(typeof counter === 'number' ? { limit: counter } : counter) })), !!error && jsx(ValidationMessage, { children: error })] }));
+*  Composed text input component using `Field`
+*
+* `classname` & `style` are passed to the wrapper elements.
+*
+* Rest props are passed to the `Input` or `Textarea` component.
+* @example
+* <Textfield label="Textfield label">
+*/
+const Textfield = forwardRef(function Textfield({ label, description, error, multiline, prefix, suffix, "data-color": color, "data-size": size, counter, style, className, ...rest }, ref) {
+	return /* @__PURE__ */ jsxs(FieldComponent, {
+		className,
+		"data-color": color,
+		"data-size": size,
+		style,
+		children: [
+			!!label && /* @__PURE__ */ jsx(Label, { children: label }),
+			!!description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
+			/* @__PURE__ */ jsxs(FieldAffixes, { children: [
+				prefix === void 0 || /* @__PURE__ */ jsx(FieldAffix, { children: prefix }),
+				multiline === true ? /* @__PURE__ */ jsx(Textarea, {
+					ref,
+					"aria-invalid": Boolean(error) || void 0,
+					...rest
+				}) : /* @__PURE__ */ jsx(Input, {
+					ref,
+					"aria-invalid": Boolean(error) || void 0,
+					...rest
+				}),
+				suffix === void 0 || /* @__PURE__ */ jsx(FieldAffix, { children: suffix })
+			] }),
+			!!counter && /* @__PURE__ */ jsx(FieldComponent.Counter, { ...typeof counter === "number" ? { limit: counter } : counter }),
+			!!error && /* @__PURE__ */ jsx(ValidationMessage, { children: error })
+		]
+	});
 });
-
+//#endregion
 export { Textfield };

package/dist/esm/components/toggle-group/index.d.ts

@@ -0,0 +1,25 @@
+
+import { ToggleGroup as ToggleGroup$1, ToggleGroupProps } from "./toggle-group.js";
+import { ToggleGroupItem, ToggleGroupItemProps } from "./toggle-group-item.js";
+//#region src/components/toggle-group/index.d.ts
+type ToggleGroup = typeof ToggleGroup$1 & {
+  /**
+   * A single item in a ToggleGroup.
+   * @example
+   * <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+   */
+  Item: typeof ToggleGroupItem;
+};
+/**
+ * Display a group of buttons that can be toggled between.
+ *
+ * @example
+ * <ToggleGroup aria-label="Label" onChange={(value) => console.log(value)}>
+ *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
+ * </ToggleGroup>
+ */
+declare const ToggleGroupComponent: ToggleGroup;
+//#endregion
+export { ToggleGroupComponent as ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps };

package/dist/esm/components/toggle-group/index.js

@@ -1,20 +1,18 @@
 'use client';
-import { ToggleGroup } from './toggle-group.js';
-import { ToggleGroupItem } from './toggle-group-item.js';
-
+import { ToggleGroup } from "./toggle-group.js";
+import { ToggleGroupItem } from "./toggle-group-item.js";
+//#region src/components/toggle-group/index.ts
 /**
- * Display a group of buttons that can be toggled between.
- *
- * @example
- * <ToggleGroup aria-label="Label" onChange={(value) => console.log(value)}>
- *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
- *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
- *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
- * </ToggleGroup>
- */
-const ToggleGroupComponent = Object.assign(ToggleGroup, {
-    Item: ToggleGroupItem,
-});
-ToggleGroupComponent.Item.displayName = 'ToggleGroup.Item';
-
+* Display a group of buttons that can be toggled between.
+*
+* @example
+* <ToggleGroup aria-label="Label" onChange={(value) => console.log(value)}>
+*   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+*   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
+*   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
+* </ToggleGroup>
+*/
+const ToggleGroupComponent = Object.assign(ToggleGroup, { Item: ToggleGroupItem });
+ToggleGroupComponent.Item.displayName = "ToggleGroup.Item";
+//#endregion
 export { ToggleGroupComponent as ToggleGroup, ToggleGroupItem };

package/dist/esm/components/toggle-group/toggle-group-item.d.ts

@@ -0,0 +1,33 @@
+
+import { DefaultProps } from "../../types.js";
+import { InputHTMLAttributes, LabelHTMLAttributes } from "react";
+//#region src/components/toggle-group/toggle-group-item.d.ts
+type ToggleGroupItemProps = {
+  /**
+   * The value of the ToggleGroupItem.
+   * Generates a random value if not set.
+   **/
+  value?: string;
+  /**
+   * @deprecated Icon prop is deprecated
+   **/
+  icon?: boolean;
+} & DefaultProps & LabelHTMLAttributes<HTMLLabelElement> & Pick<InputHTMLAttributes<HTMLInputElement>, 'formAction' | 'formEncType' | 'formTarget' | 'formMethod' | 'required' | 'formNoValidate' | 'value' | 'disabled' | 'readOnly'>;
+/**
+ * A single item in a ToggleGroup.
+ * @example
+ * <ToggleGroupItem value='1'>Toggle 1</ToggleGroupItem>
+ */
+declare const ToggleGroupItem: import("react").ForwardRefExoticComponent<{
+  /**
+   * The value of the ToggleGroupItem.
+   * Generates a random value if not set.
+   **/
+  value?: string;
+  /**
+   * @deprecated Icon prop is deprecated
+   **/
+  icon?: boolean;
+} & DefaultProps & LabelHTMLAttributes<HTMLLabelElement> & Pick<InputHTMLAttributes<HTMLInputElement>, "value" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "readOnly" | "required"> & import("react").RefAttributes<HTMLLabelElement>>;
+//#endregion
+export { ToggleGroupItem, ToggleGroupItemProps };

package/dist/esm/components/toggle-group/toggle-group-item.js

@@ -1,21 +1,44 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import cl from 'clsx/lite';
-import { forwardRef, useId, useContext } from 'react';
-import { ToggleGroupContext } from './toggle-group.js';
-
+import { ToggleGroupContext } from "./toggle-group.js";
+import cl from "clsx/lite";
+import { forwardRef, useContext, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/toggle-group/toggle-group-item.tsx
 /**
- * A single item in a ToggleGroup.
- * @example
- * <ToggleGroupItem value='1'>Toggle 1</ToggleGroupItem>
- */
+* A single item in a ToggleGroup.
+* @example
+* <ToggleGroupItem value='1'>Toggle 1</ToggleGroupItem>
+*/
 const ToggleGroupItem = forwardRef(function ToggleGroupItem({ className, children, icon, value: rawValue, ...rest }, ref) {
-    const genValue = useId();
-    const toggleGroup = useContext(ToggleGroupContext);
-    const value = rawValue ?? genValue;
-    const active = toggleGroup.value === value;
-    const { 'aria-disabled': ariaDisabled, disabled, readOnly, form, formAction, formEncType, formMethod, formNoValidate, formTarget, required, ...labelProps } = rest;
-    return (jsxs("label", { ref: ref, ...labelProps, className: cl('ds-button', className), "data-variant": 'tertiary', "aria-disabled": ariaDisabled ?? disabled, children: [jsx("input", { "aria-disabled": ariaDisabled, checked: active, disabled: disabled, readOnly: readOnly, form: form, formAction: formAction, formEncType: formEncType, formMethod: formMethod, formNoValidate: formNoValidate, formTarget: formTarget, name: toggleGroup.name, onChange: () => toggleGroup.onChange?.(value), required: required, type: 'radio', value: value }), children] }));
+	const genValue = useId();
+	const toggleGroup = useContext(ToggleGroupContext);
+	const value = rawValue ?? genValue;
+	const active = toggleGroup.value === value;
+	const { "aria-disabled": ariaDisabled, disabled, readOnly, form, formAction, formEncType, formMethod, formNoValidate, formTarget, required, ...labelProps } = rest;
+	return /* @__PURE__ */ jsxs("label", {
+		ref,
+		...labelProps,
+		className: cl("ds-button", className),
+		"data-variant": "tertiary",
+		"aria-disabled": ariaDisabled ?? disabled,
+		children: [/* @__PURE__ */ jsx("input", {
+			"aria-disabled": ariaDisabled,
+			checked: active,
+			disabled,
+			readOnly,
+			form,
+			formAction,
+			formEncType,
+			formMethod,
+			formNoValidate,
+			formTarget,
+			name: toggleGroup.name,
+			onChange: () => toggleGroup.onChange?.(value),
+			required,
+			type: "radio",
+			value
+		}), children]
+	});
 });
-
+//#endregion
 export { ToggleGroupItem };

package/dist/esm/components/toggle-group/toggle-group.d.ts

@@ -0,0 +1,58 @@
+
+import { DefaultProps } from "../../types.js";
+import { MergeRight } from "../../utilities/types.js";
+import "../../utilities/index.js";
+import { HTMLAttributes } from "react";
+//#region src/components/toggle-group/toggle-group.d.ts
+type ToggleGroupProps = MergeRight<DefaultProps & Omit<HTMLAttributes<HTMLFieldSetElement>, 'value' | 'onChange' | 'aria-label' | 'aria-labelledby'>, {
+  /**
+   * Specify which variant to use
+   * @default 'primary'
+   */
+  variant?: 'primary' | 'secondary';
+  /**
+   * Controlled state for `ToggleGroup` component.
+   */
+  value?: string;
+  /**
+   * Default value.
+   */
+  defaultValue?: string;
+  /**
+   * Callback with selected `ToggleGroupItem` `value`
+   */
+  onChange?: (value: string) => void;
+  /**
+   * Form element name
+   */
+  name?: string;
+} & ({
+  /**
+   * Toggle group label for accessibility
+   * @deprecated Use aria-label or aria-labelledby instead.
+   */
+  'data-toggle-group'?: string;
+  'aria-label'?: never;
+  'aria-labelledby'?: never;
+} | {
+  'data-toggle-group'?: never;
+  'aria-labelledby'?: never;
+  'aria-label': string;
+} | {
+  'data-toggle-group'?: never;
+  'aria-labelledby': string;
+  'aria-label'?: never;
+})>;
+/**
+ * Display a group of buttons that can be toggled between.
+ *
+ * @example
+ * <ToggleGroup aria-label="Label" onChange={(value) => console.log(value)}>
+ *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
+ * </ToggleGroup>
+ */
+declare const ToggleGroup: import("react").ForwardRefExoticComponent<ToggleGroupProps & import("react").RefAttributes<HTMLFieldSetElement>>;
+//#endregion
+export { ToggleGroup, ToggleGroupProps };

package/dist/esm/components/toggle-group/toggle-group.js

@@ -1,39 +1,50 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import cl from 'clsx/lite';
-import { createContext, forwardRef, useId, useState } from 'react';
-
+import cl from "clsx/lite";
+import { createContext, forwardRef, useId, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/toggle-group/toggle-group.tsx
 const ToggleGroupContext = createContext({});
 /**
- * Display a group of buttons that can be toggled between.
- *
- * @example
- * <ToggleGroup aria-label="Label" onChange={(value) => console.log(value)}>
- *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
- *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
- *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
- * </ToggleGroup>
- */
-const ToggleGroup = forwardRef(function ToggleGroup({ 'data-toggle-group': label, children, className, defaultValue, name, onChange, value, variant, ...rest }, ref) {
-    const nameId = useId();
-    const isControlled = value !== undefined;
-    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
-    let onValueChange = onChange;
-    if (!isControlled) {
-        onValueChange = (newValue) => {
-            setUncontrolledValue(newValue);
-            onChange?.(newValue);
-        };
-        value = uncontrolledValue;
-    }
-    return (jsx(ToggleGroupContext.Provider, { value: {
-            defaultValue,
-            name: name ?? `togglegroup-name-${nameId}`,
-            onChange: onValueChange,
-            value,
-            variant,
-        }, children: jsx("fieldset", { "aria-label": label, className: cl('ds-toggle-group', className), "data-variant": variant, focusgroup: 'radiogroup', ref: ref, suppressHydrationWarning // Since @digdir/designsystemet-web adds attributes
-            : true, ...rest, children: children }) }));
+* Display a group of buttons that can be toggled between.
+*
+* @example
+* <ToggleGroup aria-label="Label" onChange={(value) => console.log(value)}>
+*   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+*   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
+*   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
+* </ToggleGroup>
+*/
+const ToggleGroup = forwardRef(function ToggleGroup({ "data-toggle-group": label, children, className, defaultValue, name, onChange, value, variant, ...rest }, ref) {
+	const nameId = useId();
+	const isControlled = value !== void 0;
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	let onValueChange = onChange;
+	if (!isControlled) {
+		onValueChange = (newValue) => {
+			setUncontrolledValue(newValue);
+			onChange?.(newValue);
+		};
+		value = uncontrolledValue;
+	}
+	return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
+		value: {
+			defaultValue,
+			name: name ?? `togglegroup-name-${nameId}`,
+			onChange: onValueChange,
+			value,
+			variant
+		},
+		children: /* @__PURE__ */ jsx("fieldset", {
+			"aria-label": label,
+			className: cl("ds-toggle-group", className),
+			"data-variant": variant,
+			focusgroup: "radiogroup",
+			ref,
+			suppressHydrationWarning: true,
+			...rest,
+			children
+		})
+	});
 });
-
+//#endregion
 export { ToggleGroup, ToggleGroupContext };

package/dist/esm/components/tooltip/tooltip.d.ts

@@ -0,0 +1,94 @@
+
+import { DefaultProps, Placement } from "../../types.js";
+import { MergeRight } from "../../utilities/types.js";
+import "../../utilities/index.js";
+import "@digdir/designsystemet-web";
+import { HTMLAttributes, ReactElement, RefAttributes } from "react";
+//#region src/components/tooltip/tooltip.d.ts
+type TooltipProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDivElement>, {
+  /**
+   * The element or string that triggers the tooltip.
+   *
+   * @note If it is a string, it will be wrapped in a span.
+   * @note If it is an element, it needs to be able to receive a ref.
+   */
+  children: (ReactElement & RefAttributes<HTMLElement>) | string;
+  /**
+   * Content of the tooltip
+   **/
+  content: string;
+  /**
+   * Placement of the tooltip on the trigger.
+   * @default 'top'
+   */
+  placement?: Placement;
+  /**
+   * Whether to enable auto placement.
+   * @default true
+   */
+  autoPlacement?: boolean;
+  /**
+   * Whether the tooltip is open or not.
+   * This overrides the internal state of the tooltip.
+   *
+   * @deprecated This should not be used on Tooltip. Use a Popover instead
+   * @TODO Look at this prop
+   */
+  open?: boolean;
+  /**
+   * @deprecated This prop has no effect. The tooltip will be set as `aria-description`
+   * if the component already contains accessible text, and `aria-label` otherwise.
+   */
+  type?: 'describedby' | 'labelledby';
+}>;
+/**
+ * Tooltip component that displays a small piece of information when hovering or focusing on an element.
+ *
+ * @example
+ * <Tooltip content='This is a tooltip'>
+ *  <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @example
+ * <Tooltip content='This is a tooltip'>
+ *  Hover me
+ * </Tooltip>
+ */
+declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "children" | "content" | "type" | "placement" | "open" | "autoPlacement"> & {
+  /**
+   * The element or string that triggers the tooltip.
+   *
+   * @note If it is a string, it will be wrapped in a span.
+   * @note If it is an element, it needs to be able to receive a ref.
+   */
+  children: (ReactElement & RefAttributes<HTMLElement>) | string;
+  /**
+   * Content of the tooltip
+   **/
+  content: string;
+  /**
+   * Placement of the tooltip on the trigger.
+   * @default 'top'
+   */
+  placement?: Placement;
+  /**
+   * Whether to enable auto placement.
+   * @default true
+   */
+  autoPlacement?: boolean;
+  /**
+   * Whether the tooltip is open or not.
+   * This overrides the internal state of the tooltip.
+   *
+   * @deprecated This should not be used on Tooltip. Use a Popover instead
+   * @TODO Look at this prop
+   */
+  open?: boolean;
+  /**
+   * @deprecated This prop has no effect. The tooltip will be set as `aria-description`
+   * if the component already contains accessible text, and `aria-label` otherwise.
+   */
+  type?: "describedby" | "labelledby";
+} & RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Tooltip, TooltipProps };

package/dist/esm/components/tooltip/tooltip.js

@@ -1,27 +1,36 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
-import '@digdir/designsystemet-web';
-import { forwardRef } from 'react';
-
+import "@digdir/designsystemet-web";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/components/tooltip/tooltip.tsx
 /**
- * Tooltip component that displays a small piece of information when hovering or focusing on an element.
- *
- * @example
- * <Tooltip content='This is a tooltip'>
- *  <button>Hover me</button>
- * </Tooltip>
- *
- * @example
- * <Tooltip content='This is a tooltip'>
- *  Hover me
- * </Tooltip>
- */
-const Tooltip = forwardRef(function Tooltip({ content, placement = 'top', autoPlacement = true, ...rest }, ref) {
-    /* check if children is a string */
-    const isString = typeof rest.children === 'string';
-    return (jsx(Slot, { "data-tooltip": content, "data-placement": placement, "data-autoplacement": autoPlacement, suppressHydrationWarning // Since data-tooltip adds aria-label/aria-description
-        : true, ref: ref, ...rest, children: isString ? jsx("span", { tabIndex: 0, children: rest.children }) : rest.children }));
+* Tooltip component that displays a small piece of information when hovering or focusing on an element.
+*
+* @example
+* <Tooltip content='This is a tooltip'>
+*  <button>Hover me</button>
+* </Tooltip>
+*
+* @example
+* <Tooltip content='This is a tooltip'>
+*  Hover me
+* </Tooltip>
+*/
+const Tooltip = forwardRef(function Tooltip({ content, placement = "top", autoPlacement = true, ...rest }, ref) {
+	const isString = typeof rest.children === "string";
+	return /* @__PURE__ */ jsx(Slot, {
+		"data-tooltip": content,
+		"data-placement": placement,
+		"data-autoplacement": autoPlacement,
+		suppressHydrationWarning: true,
+		ref,
+		...rest,
+		children: isString ? /* @__PURE__ */ jsx("span", {
+			tabIndex: 0,
+			children: rest.children
+		}) : rest.children
+	});
 });
-
+//#endregion
 export { Tooltip };