@digdir/designsystemet-react 1.20.0 → 1.21.0

package/dist/cjs/components/suggestion/suggestion.cjs

@@ -0,0 +1,114 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_use_merge_refs = require("../../utilities/hooks/use-merge-refs/use-merge-refs.cjs");
+require("../../utilities/hooks/index.cjs");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/suggestion/suggestion.tsx
+const text = (el) => el.textContent?.trim() || "";
+const sanitizeItems = (values = []) => typeof values === "string" ? [{
+	label: values,
+	value: values
+}] : !Array.isArray(values) ? [values] : values.map((value) => typeof value === "string" ? {
+	label: value,
+	value
+} : value);
+const nextItems = (data, prev, multiple) => {
+	const item = {
+		label: text(data),
+		value: data.value
+	};
+	if (!multiple) return data.isConnected ? void 0 : item;
+	return data.isConnected ? sanitizeItems(prev).filter(({ value }) => value !== item.value) : [...sanitizeItems(prev), item];
+};
+const defaultFilter = ({ label, input }) => label.toLowerCase().includes(input.value.trim().toLowerCase());
+const Suggestion = (0, react.forwardRef)(function Suggestion({ children, className, creatable = false, defaultSelected, filter = true, multiple = false, name, onBeforeMatch, onSelectedChange, renderSelected = ({ label }) => label, selected, ...rest }, ref) {
+	const dsSuggestionRef = (0, react.useRef)(null);
+	const genId = (0, react.useId)();
+	const selectId = rest.id ? `${rest.id}-select` : genId;
+	const isControlled = selected !== void 0;
+	const mergedRefs = require_use_merge_refs.useMergeRefs([ref, dsSuggestionRef]);
+	const [defaultItems, setDefaultItems] = (0, react.useState)(sanitizeItems(defaultSelected));
+	const selectedItems = selected ? sanitizeItems(selected) : defaultItems;
+	const onSelectedChangeRef = (0, react.useRef)(onSelectedChange);
+	const selectedItemsRef = (0, react.useRef)(selectedItems);
+	(0, react.useEffect)(() => {
+		onSelectedChangeRef.current = onSelectedChange;
+	}, [onSelectedChange]);
+	(0, react.useEffect)(() => {
+		selectedItemsRef.current = selectedItems;
+	}, [selectedItems]);
+	/**
+	* Listerners and handling of adding/removing
+	*/
+	(0, react.useEffect)(() => {
+		const combobox = dsSuggestionRef.current;
+		const beforeChange = (event) => {
+			event.preventDefault();
+			const multiple = combobox?.multiple;
+			const data = event.detail;
+			const nextItem = nextItems(data, selectedItemsRef.current, multiple);
+			onSelectedChangeRef.current?.(nextItem || null);
+			if (!isControlled) setDefaultItems(sanitizeItems(nextItem));
+		};
+		combobox?.addEventListener("comboboxbeforeselect", beforeChange);
+		return () => combobox?.removeEventListener("comboboxbeforeselect", beforeChange);
+	}, [isControlled]);
+	(0, react.useEffect)(() => {
+		const combobox = dsSuggestionRef.current;
+		const beforeMatch = (e) => onBeforeMatch?.(e);
+		combobox?.addEventListener("comboboxbeforematch", beforeMatch);
+		return () => combobox?.removeEventListener("comboboxbeforematch", beforeMatch);
+	}, [onBeforeMatch]);
+	const handleFilter = (0, react.useCallback)(() => {
+		const { control: input, options = [] } = dsSuggestionRef?.current || {};
+		const filterFn = filter === true ? defaultFilter : filter;
+		let disabled = 0;
+		let index = 0;
+		for (const option of Array.from(options)) if (!option.hasAttribute("data-empty")) {
+			if (filterFn && input) option.disabled = !filterFn({
+				index,
+				input,
+				label: option.label,
+				optionElement: option,
+				text: option.text,
+				value: option.value
+			}) && Boolean(++disabled);
+			index++;
+		}
+	}, [filter]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SuggestionContext.Provider, {
+		value: {
+			handleFilter,
+			dsSuggestionRef
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ds-suggestion", {
+			"data-multiple": multiple || void 0,
+			"data-creatable": creatable || void 0,
+			class: (0, clsx_lite.default)("ds-suggestion", className),
+			ref: mergedRefs,
+			suppressHydrationWarning: true,
+			...rest,
+			children: [
+				selectedItems.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("data", {
+					value: item.value,
+					suppressHydrationWarning: true,
+					children: renderSelected(item)
+				}, item.value)),
+				children,
+				!!name && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+					name,
+					multiple: true,
+					hidden: true,
+					id: selectId
+				})
+			]
+		})
+	});
+});
+const SuggestionContext = (0, react.createContext)({ handleFilter: () => void 0 });
+//#endregion
+exports.Suggestion = Suggestion;
+exports.SuggestionContext = SuggestionContext;

package/dist/cjs/components/suggestion/suggestion.d.cts

@@ -0,0 +1,113 @@
+
+import { DSSuggestionElement } from "@digdir/designsystemet-web";
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/suggestion/suggestion.d.ts
+type SuggestionItem = {
+  label: string;
+  value: string;
+};
+type EventBeforeMatch = Omit<CustomEvent<HTMLOptionElement | undefined>, 'currentTarget'> & {
+  currentTarget: DSSuggestionElement;
+};
+type Filter = (args: {
+  /**
+   * Index of the `option`
+   */
+  index: number;
+  /**
+   * Label content of the `option`
+   */
+  label: string;
+  /**
+   * Text content of the `option`
+   */
+  text: string;
+  /**
+   * Value of the `option`
+   */
+  value: string;
+  /**
+   * The DOM element of the `option`
+   */
+  optionElement: HTMLOptionElement;
+  /**
+   * The DOM element of the `input`
+   */
+  input: HTMLInputElement;
+}) => boolean;
+type SuggestionValue<T extends {
+  multiple: boolean;
+}> = T['multiple'] extends true ? Array<string | SuggestionItem> : string | SuggestionItem;
+type SuggestionBaseProps = {
+  /**
+   * Filter options; boolean or a custom callback.
+   *
+   * See {@link Filter} for the callback signature.
+   *
+   * @default true
+   */
+  filter?: boolean | Filter;
+  /**
+   * Allows the user to create new items
+   *
+   * @default false
+   */
+  creatable?: boolean;
+  /**
+   * Callback when matching input value against options
+   */
+  onBeforeMatch?: (event: EventBeforeMatch) => void;
+  /**
+   * The name of the associated form control
+   *
+   * @default undefined
+   */
+  name?: string;
+  /**
+   * Change how the selected options are rendered inside the `Chip`.
+   *
+   * @default ({ label }) => label
+   */
+  renderSelected?: (args: {
+    label: string;
+    value: string;
+  }) => ReactNode;
+} & Omit<HTMLAttributes<DSSuggestionElement>, 'defaultValue'>;
+type SuggestionValueProps<T extends {
+  multiple: boolean;
+}> = {
+  /**
+   * Allows the user to select multiple items
+   *
+   * @default false
+   */
+  multiple?: T['multiple'];
+  /**
+   * The selected item of the Suggestion.
+   *
+   * If `label` and `value` are the same, each item can be a `string`. Otherwise, each item must be a `SuggestionItem`.
+   *
+   * Using this makes the component controlled and it must be used in combination with `onSelectedChange`.
+   */
+  selected?: SuggestionValue<T> | null;
+  /**
+   * Default selected item when uncontrolled
+   */
+  defaultSelected?: SuggestionValue<T>;
+  /**
+   * Callback when selected items changes
+   */
+  onSelectedChange?: (value: T['multiple'] extends true ? SuggestionItem[] : SuggestionItem | null) => void;
+};
+type SuggestionSingleProps = SuggestionBaseProps & SuggestionValueProps<{
+  multiple: false;
+}>;
+type SuggestionMultipleProps = SuggestionBaseProps & SuggestionValueProps<{
+  multiple: true;
+}> & {
+  multiple: true;
+};
+type SuggestionProps = SuggestionSingleProps | SuggestionMultipleProps;
+declare const Suggestion: import("react").ForwardRefExoticComponent<SuggestionProps & import("react").RefAttributes<DSSuggestionElement>>;
+//#endregion
+export { Suggestion, SuggestionItem, SuggestionMultipleProps, SuggestionProps, SuggestionSingleProps };

package/dist/cjs/components/switch/switch.cjs

@@ -0,0 +1,40 @@
+'use client';
+const require_label = require("../label/label.cjs");
+const require_input = require("../input/input.cjs");
+const require_index = require("../field/index.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/switch/switch.tsx
+/**
+* Switch used to toggle options.
+*
+* @example
+* <Switch label="I agree" value="agree" />
+*/
+const Switch = (0, react.forwardRef)(function Switch({ "data-size": size, children, className, description, label, position, style, variant, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index.Field, {
+		className,
+		"data-position": position,
+		"data-size": size,
+		"data-variant": variant,
+		style,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
+				type: "checkbox",
+				role: "switch",
+				ref,
+				...rest
+			}),
+			!!label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_label.Label, {
+				weight: "regular",
+				children: label
+			}),
+			!!description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-field": "description",
+				children: description
+			})
+		]
+	});
+});
+//#endregion
+exports.Switch = Switch;

package/dist/cjs/components/switch/switch.d.cts

@@ -0,0 +1,45 @@
+
+import { DefaultProps, LabelRequired } from "../../types.cjs";
+import { MergeRight } from "../../utilities/types.cjs";
+import "../../utilities/index.cjs";
+import { FieldProps } from "../field/field.cjs";
+import "../field/index.cjs";
+import { InputProps } from "../input/input.cjs";
+import { InputHTMLAttributes, ReactNode } from "react";
+//#region src/components/switch/switch.d.ts
+type SwitchProps = MergeRight<DefaultProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>, {
+  /**
+   * Optional aria-label
+   */
+  'aria-label'?: string;
+  /**
+   * Switch label
+   */
+  label?: ReactNode;
+  /**
+   * Description for field
+   */
+  description?: ReactNode;
+  /**
+   * Value of the `input` element
+   */
+  value?: InputProps['value'];
+  /**
+   * Position of switch
+   * @default start
+   */
+  position?: FieldProps['position'];
+  /**
+   * If outline, the switch will have a border.
+   */
+  variant?: 'outline';
+} & LabelRequired>;
+/**
+ * Switch used to toggle options.
+ *
+ * @example
+ * <Switch label="I agree" value="agree" />
+ */
+declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Switch, SwitchProps };

package/dist/cjs/components/table/index.cjs

@@ -0,0 +1,57 @@
+'use client';
+const require_table = require("./table.cjs");
+const require_table_body = require("./table-body.cjs");
+const require_table_cell = require("./table-cell.cjs");
+const require_table_foot = require("./table-foot.cjs");
+const require_table_head = require("./table-head.cjs");
+const require_table_header_cell = require("./table-header-cell.cjs");
+const require_table_row = require("./table-row.cjs");
+//#region src/components/table/index.ts
+/**
+* Table component, used to display tabular data. Renders a native HTML table element.
+*
+* @example
+* <Table>
+*   <Table.Head>
+*     <Table.Row>
+*       <Table.HeaderCell>Name</Table.HeaderCell>
+*       <Table.HeaderCell>Age</Table.HeaderCell>
+*     </Table.Row>
+*   </Table.Head>
+*   <Table.Body>
+*     <Table.Row>
+*       <Table.Cell>John</Table.Cell>
+*       <Table.Cell>25</Table.Cell>
+*     </Table.Row>
+*   </Table.Body>
+*   <Table.Foot>
+*     <Table.Row>
+*       <Table.Cell>Total</Table.Cell>
+*       <Table.Cell>2</Table.Cell>
+*     </Table.Row>
+*   </Table.Foot>
+* </Table>
+*/
+const TableComponent = Object.assign(require_table.Table, {
+	Head: require_table_head.TableHead,
+	Body: require_table_body.TableBody,
+	Row: require_table_row.TableRow,
+	Cell: require_table_cell.TableCell,
+	HeaderCell: require_table_header_cell.TableHeaderCell,
+	Foot: require_table_foot.TableFoot
+});
+TableComponent.displayName = "Table";
+TableComponent.Head.displayName = "Table.Head";
+TableComponent.Body.displayName = "Table.Body";
+TableComponent.Row.displayName = "Table.Row";
+TableComponent.Cell.displayName = "Table.Cell";
+TableComponent.HeaderCell.displayName = "Table.HeaderCell";
+TableComponent.Foot.displayName = "Table.Foot";
+//#endregion
+exports.Table = TableComponent;
+exports.TableBody = require_table_body.TableBody;
+exports.TableCell = require_table_cell.TableCell;
+exports.TableFoot = require_table_foot.TableFoot;
+exports.TableHead = require_table_head.TableHead;
+exports.TableHeaderCell = require_table_header_cell.TableHeaderCell;
+exports.TableRow = require_table_row.TableRow;

package/dist/cjs/components/table/index.d.cts

@@ -0,0 +1,99 @@
+
+import { Table as Table$1, TableProps } from "./table.cjs";
+import { TableBody, TableBodyProps } from "./table-body.cjs";
+import { TableCell, TableCellProps } from "./table-cell.cjs";
+import { TableFoot, TableFootProps } from "./table-foot.cjs";
+import { TableHead, TableHeadProps } from "./table-head.cjs";
+import { TableHeaderCell, TableHeaderCellProps } from "./table-header-cell.cjs";
+import { TableRow, TableRowProps } from "./table-row.cjs";
+//#region src/components/table/index.d.ts
+type Table = typeof Table$1 & {
+  /**
+   * TableHead component, used to display the header of a table. Renders a native HTML thead element.
+   *
+   * @example
+   * <Table.Head>
+   *   <Table.Row>
+   *     <Table.HeaderCell>Name</Table.HeaderCell>
+   *     <Table.HeaderCell>Age</Table.HeaderCell>
+   *   </Table.Row>
+   * </Table.Head>
+   */
+  Head: typeof TableHead;
+  /**
+   * Table.Body component, used to display the body of a table. Renders a native HTML tbody element.
+   *
+   * @example
+   * <Table.Body>
+   *   <Table.Row>
+   *     <Table.Cell>John</Table.Cell>
+   *     <Table.Cell>25</Table.Cell>
+   *   </Table.Row>
+   * </Table.Body>
+   */
+  Body: typeof TableBody;
+  /**
+   * Table.Row component, used to display the rows of a table. Renders a native HTML tr element.
+   *
+   * @example
+   * <Table.Row>
+   *   <Table.Cell>John</Table.Cell>
+   *   <Table.Cell>25</Table.Cell>
+   * </Table.Row>
+   */
+  Row: typeof TableRow;
+  /**
+   * Table.Cell component, used to display the cells of a table. Renders a native HTML td element.
+   *
+   * @example
+   * <Table.Cell>John</Table.Cell>
+   */
+  Cell: typeof TableCell;
+  /**
+   * Table.HeaderCell component, used to display the header cells of a table. Renders a native HTML th element.
+   *
+   * @example
+   * <Table.HeaderCell>Name</Table.HeaderCell>
+   */
+  HeaderCell: typeof TableHeaderCell;
+  /**
+   * Table.Foot component, used to display the footer of a table. Renders a native HTML tfoot element.
+   *
+   * @example
+   * <Table.Foot>
+   *   <Table.Row>
+   *     <Table.Cell>Total</Table.Cell>
+   *     <Table.Cell>2</Table.Cell>
+   *   </Table.Row>
+   * </Table.Foot>
+   */
+  Foot: typeof TableFoot;
+};
+/**
+ * Table component, used to display tabular data. Renders a native HTML table element.
+ *
+ * @example
+ * <Table>
+ *   <Table.Head>
+ *     <Table.Row>
+ *       <Table.HeaderCell>Name</Table.HeaderCell>
+ *       <Table.HeaderCell>Age</Table.HeaderCell>
+ *     </Table.Row>
+ *   </Table.Head>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.Cell>John</Table.Cell>
+ *       <Table.Cell>25</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ *   <Table.Foot>
+ *     <Table.Row>
+ *       <Table.Cell>Total</Table.Cell>
+ *       <Table.Cell>2</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Foot>
+ * </Table>
+ */
+declare const TableComponent: Table;
+//#endregion
+export { TableComponent as Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, TableHeaderCell, type TableHeaderCellProps, type TableProps, TableRow, type TableRowProps };

package/dist/cjs/components/table/table-body.cjs

@@ -0,0 +1,23 @@
+'use client';
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/table/table-body.tsx
+/**
+* TableBody component, used to display the body of a table. Renders a native HTML tbody element.
+*
+* @example
+* <TableBody>
+*   <TableRow>
+*     <TableCell>John</TableCell>
+*     <TableCell>25</TableCell>
+*   </TableRow>
+* </TableBody>
+*/
+const TableBody = (0, react.forwardRef)(function TableBody(rest, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
+		ref,
+		...rest
+	});
+});
+//#endregion
+exports.TableBody = TableBody;

package/dist/cjs/components/table/table-body.d.cts

@@ -0,0 +1,18 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/table/table-body.d.ts
+type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
+/**
+ * TableBody component, used to display the body of a table. Renders a native HTML tbody element.
+ *
+ * @example
+ * <TableBody>
+ *   <TableRow>
+ *     <TableCell>John</TableCell>
+ *     <TableCell>25</TableCell>
+ *   </TableRow>
+ * </TableBody>
+ */
+declare const TableBody: import("react").ForwardRefExoticComponent<TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+//#endregion
+export { TableBody, TableBodyProps };

package/dist/cjs/components/table/table-cell.cjs

@@ -0,0 +1,18 @@
+'use client';
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/table/table-cell.tsx
+/**
+* TableCell component, used to display the cells of a table. Renders a native HTML td element.
+*
+* @example
+* <TableCell>John</TableCell>
+*/
+const TableCell = (0, react.forwardRef)(function TableCell(rest, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+		ref,
+		...rest
+	});
+});
+//#endregion
+exports.TableCell = TableCell;

package/dist/cjs/components/table/table-cell.d.cts

@@ -0,0 +1,13 @@
+
+import { TdHTMLAttributes } from "react";
+//#region src/components/table/table-cell.d.ts
+type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>;
+/**
+ * TableCell component, used to display the cells of a table. Renders a native HTML td element.
+ *
+ * @example
+ * <TableCell>John</TableCell>
+ */
+declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+//#endregion
+export { TableCell, TableCellProps };

package/dist/cjs/components/table/table-foot.cjs

@@ -0,0 +1,23 @@
+'use client';
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/table/table-foot.tsx
+/**
+* TableFoot component, used to display the footer of a table. Renders a native HTML tfoot element.
+*
+* @example
+* <TableFoot>
+*   <TableRow>
+*     <TableCell>Total</TableCell>
+*     <TableCell>2</TableCell>
+*   </TableRow>
+* </TableFoot>
+*/
+const TableFoot = (0, react.forwardRef)(function TableFoot(rest, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tfoot", {
+		ref,
+		...rest
+	});
+});
+//#endregion
+exports.TableFoot = TableFoot;

package/dist/cjs/components/table/table-foot.d.cts

@@ -0,0 +1,18 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/table/table-foot.d.ts
+type TableFootProps = HTMLAttributes<HTMLTableSectionElement>;
+/**
+ * TableFoot component, used to display the footer of a table. Renders a native HTML tfoot element.
+ *
+ * @example
+ * <TableFoot>
+ *   <TableRow>
+ *     <TableCell>Total</TableCell>
+ *     <TableCell>2</TableCell>
+ *   </TableRow>
+ * </TableFoot>
+ */
+declare const TableFoot: import("react").ForwardRefExoticComponent<TableFootProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+//#endregion
+export { TableFoot, TableFootProps };

package/dist/cjs/components/table/table-head.cjs

@@ -0,0 +1,23 @@
+'use client';
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/table/table-head.tsx
+/**
+* TableHead component, used to display the header of a table. Renders a native HTML thead element.
+*
+* @example
+* <TableHead>
+*   <TableRow>
+*     <TableHeaderCell>Name</TableHeaderCell>
+*     <TableHeaderCell>Age</TableHeaderCell>
+*   </TableRow>
+* </TableHead>
+*/
+const TableHead = (0, react.forwardRef)(function TableHead(rest, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+		ref,
+		...rest
+	});
+});
+//#endregion
+exports.TableHead = TableHead;

package/dist/cjs/components/table/table-head.d.cts

@@ -0,0 +1,18 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/table/table-head.d.ts
+type TableHeadProps = HTMLAttributes<HTMLTableSectionElement>;
+/**
+ * TableHead component, used to display the header of a table. Renders a native HTML thead element.
+ *
+ * @example
+ * <TableHead>
+ *   <TableRow>
+ *     <TableHeaderCell>Name</TableHeaderCell>
+ *     <TableHeaderCell>Age</TableHeaderCell>
+ *   </TableRow>
+ * </TableHead>
+ */
+declare const TableHead: import("react").ForwardRefExoticComponent<TableHeadProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+//#endregion
+export { TableHead, TableHeadProps };

package/dist/cjs/components/table/table-header-cell.cjs

@@ -0,0 +1,23 @@
+'use client';
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/table/table-header-cell.tsx
+/**
+* TableHeaderCell component, used to display the header cells of a table. Renders a native HTML th element.
+*
+* @example
+* <TableHeaderCell>Name</TableHeaderCell>
+*/
+const TableHeaderCell = (0, react.forwardRef)(function TableHeaderCell({ sort, children, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+		"aria-sort": sort,
+		ref,
+		...rest,
+		children: sort ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			children
+		}) : children
+	});
+});
+//#endregion
+exports.TableHeaderCell = TableHeaderCell;