@guardian/stand 0.0.40 → 0.0.42

package/dist/components/TagPicker/TagTable.js

@@ -1,91 +1,226 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-import { useState, useRef, useEffect } from 'react';
-import { useDragAndDrop, Table, TableHeader, Column, TableBody, Row, Cell, Button } from 'react-aria-components';
-import { tagTableHeadingStyles, tagTableDragButtonStyles, tagTableCellStyles, tagTableRemoveButtonStyles, tagTableAddButtonStyles, tagTableRowStyles, tagTableStyles, tagTableTypeBadgeStyles } from './styles.js';
-
+import { tagTableAddButtonStyles, tagTableCellStyles, tagTableDragButtonStyles, tagTableHeadingStyles, tagTableRemoveButtonStyles, tagTableRowStyles, tagTableStyles, tagTableTypeBadgeStyles } from "./styles.js";
+import { useEffect, useRef, useState } from "react";
+import { css } from "@emotion/react";
+import { jsx as jsx$1, jsxs } from "@emotion/react/jsx-runtime";
+import { Button, Cell, Column, Row, Table, TableBody, TableHeader, useDragAndDrop } from "react-aria-components";
+//#region src/components/TagPicker/TagTable.tsx
 const rowToTag = (row) => "tag" in row ? row.tag : row;
 const TypeBadge = (type, theme) => {
-  return jsx("span", { css: tagTableTypeBadgeStyles(theme), children: type });
+	return /* @__PURE__ */ jsx$1("span", {
+		css: tagTableTypeBadgeStyles(theme),
+		children: type
+	});
 };
 const defaultCanRemove = () => true;
+/**
+* ## TagTable
+*
+* *Status: Testing*
+*
+* Part of the overall TagPicker component, the TagTable provides an accessible
+* table for displaying tags, with options to add, remove, and reorder tags via drag and drop,
+* based on the [React Aria Table](https://react-spectrum.adobe.com/react-aria/Table) component.
+*
+* **Peer dependencies:**
+* - `react-aria-components`
+*
+* See the `peerDependencies` section of the `package.json` for compatible versions to install.
+*
+* ## Usage
+*
+* *Example with TagAutocomplete and TagTable combined:*
+*
+* ```tsx
+* import { TagAutocomplete, TagTable } from '@guardian/stand';
+*
+* const Component = () => {
+*   const [selectedTags, setSelectedTags] = useState<
+*     TagManagerObjectData[] // TagManagerObjectData is an internal type representing a Tag
+*   >([]);
+
+*   const [options, setOptions] = useState<TagManagerObjectData[]>([]);
+*   const [value, setValue] = useState('');
+*   const onChange = (inputText: string) => {
+*     setValue(inputText);
+*     if (inputText === '') {
+*       setOptions([]);
+*       return;
+*     }
+*
+*     if (inputText === '*') {
+*       setOptions(exampleTags); // exampleTags is an array of Tags
+*       return;
+*     }
+*
+*     // Simple filtering against exampleTags
+*     const filteredItems = exampleTags.filter((t) =>
+*       t.internalName.toLowerCase().includes(inputText.toLowerCase()),
+*     );
+*     return setOptions(filteredItems);
+*   };
+
+*   return (
+*     <>
+*       <div
+*         css={css`
+*             display: flex;
+*         `}
+*       >
+*         <TagAutocomplete
+*           onChange={onChange}
+*           options={options}
+*           label="Tags"
+*           addTag={(tag) =>
+*               setSelectedTags((tags) => {
+*                   return [...tags, tag];
+*               })
+*           }
+*           loading={false}
+*           placeholder={''}
+*           disabled={false}
+*           value={value}
+*         />
+*         <select>
+*            option>All tags</option>
+*         </select>
+*       </div>
+*       <TagTable rows={selectedTags} filterRows={() => true} />
+*     </>
+*   );
+* };
+* ```
+*
+* #### Props
+*
+* See {@link TagTableProps} for a full list of props and descriptions.
+*
+* #### Example
+*
+* This is currently still in testing phase, so a production implementation is not yet available.
+*/
 function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName, removeAction: removeTag, addAction: addTag, onReorder, canRemove = defaultCanRemove, "data-testid": dataTestId, removeIcon, gripIcon, theme, cssOverrides }) {
-  const canDrag = !!onReorder;
-  const [localRows, setLocalRows] = useState(() => [...rows]);
-  const localRowsRef = useRef(localRows);
-  localRowsRef.current = localRows;
-  useEffect(() => {
-    setLocalRows([...rows]);
-  }, [rows]);
-  const filtered = localRows.filter(filterRows);
-  const { dragAndDropHooks } = useDragAndDrop({
-    getItems: (_keys, items) => {
-      return items.map((item) => ({
-        "text/plain": rowToTag(item).id.toString()
-      }));
-    },
-    onReorder(e) {
-      const draggedElementKey = [...e.keys].at(0);
-      if (draggedElementKey === e.target.key) {
-        return;
-      }
-      const localList = [...localRows];
-      const draggedElementIndex = localList.findIndex((i) => rowToTag(i).id === draggedElementKey);
-      const draggedElement = localList.at(draggedElementIndex);
-      if (!draggedElement) {
-        return;
-      }
-      localList.splice(draggedElementIndex, 1);
-      const targetElementIndex = localList.findIndex((i) => rowToTag(i).id === e.target.key);
-      if (e.target.dropPosition === "before") {
-        localList.splice(targetElementIndex, 0, draggedElement);
-      } else if (e.target.dropPosition === "after") {
-        localList.splice(targetElementIndex + 1, 0, draggedElement);
-      }
-      setLocalRows(localList);
-      onReorder?.(localList);
-    }
-  });
-  if (filtered.length === 0) {
-    return null;
-  }
-  return jsxs("div", { css: cssOverrides, children: [heading && jsx("div", { css: tagTableHeadingStyles(theme), children: heading }), jsxs(Table, { css: tagTableStyles(!!removeTag, theme), "aria-label": "Tag Table", "data-testid": dataTestId, dragAndDropHooks: onReorder && dragAndDropHooks, children: [jsxs(TableHeader, { hidden: true, children: [onReorder && jsx(Column, {}), showTagType && jsx(Column, { children: "Type" }), jsx(Column, { isRowHeader: true, children: "Name" }), showTagSectionName && jsx(Column, { children: "Section" }), removeTag && jsx(Column, {}), addTag && jsx(Column, {})] }), jsx(TableBody, { items: filtered, dependencies: [localRows], children: (item) => jsxs(Row, { id: rowToTag(item).id, css: tagTableRowStyles(canDrag, theme), textValue: rowToTag(item).name, children: [onReorder && jsx(Cell, { css: [
-    css`
+	const canDrag = !!onReorder;
+	const [localRows, setLocalRows] = useState(() => [...rows]);
+	const localRowsRef = useRef(localRows);
+	localRowsRef.current = localRows;
+	useEffect(() => {
+		setLocalRows([...rows]);
+	}, [rows]);
+	const filtered = localRows.filter(filterRows);
+	const { dragAndDropHooks } = useDragAndDrop({
+		getItems: (_keys, items) => {
+			return items.map((item) => ({ "text/plain": rowToTag(item).id.toString() }));
+		},
+		onReorder(e) {
+			const draggedElementKey = [...e.keys].at(0);
+			if (draggedElementKey === e.target.key) return;
+			const localList = [...localRows];
+			const draggedElementIndex = localList.findIndex((i) => rowToTag(i).id === draggedElementKey);
+			const draggedElement = localList.at(draggedElementIndex);
+			if (!draggedElement) return;
+			localList.splice(draggedElementIndex, 1);
+			const targetElementIndex = localList.findIndex((i) => rowToTag(i).id === e.target.key);
+			if (e.target.dropPosition === "before") localList.splice(targetElementIndex, 0, draggedElement);
+			else if (e.target.dropPosition === "after") localList.splice(targetElementIndex + 1, 0, draggedElement);
+			setLocalRows(localList);
+			onReorder?.(localList);
+		}
+	});
+	if (filtered.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		css: cssOverrides,
+		children: [heading && /* @__PURE__ */ jsx$1("div", {
+			css: tagTableHeadingStyles(theme),
+			children: heading
+		}), /* @__PURE__ */ jsxs(Table, {
+			css: tagTableStyles(!!removeTag, theme),
+			"aria-label": "Tag Table",
+			"data-testid": dataTestId,
+			dragAndDropHooks: onReorder && dragAndDropHooks,
+			children: [/* @__PURE__ */ jsxs(TableHeader, {
+				hidden: true,
+				children: [
+					onReorder && /* @__PURE__ */ jsx$1(Column, {}),
+					showTagType && /* @__PURE__ */ jsx$1(Column, { children: "Type" }),
+					/* @__PURE__ */ jsx$1(Column, {
+						isRowHeader: true,
+						children: "Name"
+					}),
+					showTagSectionName && /* @__PURE__ */ jsx$1(Column, { children: "Section" }),
+					removeTag && /* @__PURE__ */ jsx$1(Column, {}),
+					addTag && /* @__PURE__ */ jsx$1(Column, {})
+				]
+			}), /* @__PURE__ */ jsx$1(TableBody, {
+				items: filtered,
+				dependencies: [localRows],
+				children: (item) => /* @__PURE__ */ jsxs(Row, {
+					id: rowToTag(item).id,
+					css: tagTableRowStyles(canDrag, theme),
+					textValue: rowToTag(item).name,
+					children: [
+						onReorder && /* @__PURE__ */ jsx$1(Cell, {
+							css: [css`
 											width: 1%;
-										`
-  ], children: jsx(Button, { slot: "drag", css: tagTableDragButtonStyles, children: gripIcon }) }), showTagType && jsx(Cell, { css: [
-    tagTableCellStyles(theme),
-    css`
+										`],
+							children: /* @__PURE__ */ jsx$1(Button, {
+								slot: "drag",
+								css: tagTableDragButtonStyles,
+								children: gripIcon
+							})
+						}),
+						showTagType && /* @__PURE__ */ jsx$1(Cell, {
+							css: [tagTableCellStyles(theme), css`
 											position: relative;
 											width: 15%;
-										`
-  ], children: TypeBadge(rowToTag(item).type) }), jsx(Cell, { css: [
-    tagTableCellStyles(theme),
-    css`
+										`],
+							children: TypeBadge(rowToTag(item).type)
+						}),
+						/* @__PURE__ */ jsx$1(Cell, {
+							css: [tagTableCellStyles(theme), css`
 										width: 50%;
-									`
-  ], "data-testid": `tags-table-item-${filtered.indexOf(item)}-name`, children: rowToTag(item).name }), showTagSectionName && jsx(Cell, { css: [
-    tagTableCellStyles(theme),
-    css`
+									`],
+							"data-testid": `tags-table-item-${filtered.indexOf(item)}-name`,
+							children: rowToTag(item).name
+						}),
+						showTagSectionName && /* @__PURE__ */ jsx$1(Cell, {
+							css: [tagTableCellStyles(theme), css`
 											width: 20%;
-										`
-  ], children: rowToTag(item).sectionName }), removeTag && jsx(Cell, { css: [
-    tagTableCellStyles(theme),
-    css`
+										`],
+							children: rowToTag(item).sectionName
+						}),
+						removeTag && /* @__PURE__ */ jsx$1(Cell, {
+							css: [tagTableCellStyles(theme), css`
 											text-align: center;
 											width: 10%;
-										`
-  ], children: canRemove(item) && jsx(Button, { css: tagTableRemoveButtonStyles, onPress: () => {
-    removeTag(item);
-  }, "aria-label": `Remove ${rowToTag(item).name}`, children: removeIcon ?? "Remove" }) }), addTag && jsx(Cell, { css: [
-    tagTableCellStyles(theme),
-    css`
+										`],
+							children: canRemove(item) && /* @__PURE__ */ jsx$1(Button, {
+								css: tagTableRemoveButtonStyles,
+								onPress: () => {
+									removeTag(item);
+								},
+								"aria-label": `Remove ${rowToTag(item).name}`,
+								children: removeIcon ?? "Remove"
+							})
+						}),
+						addTag && /* @__PURE__ */ jsx$1(Cell, {
+							css: [tagTableCellStyles(theme), css`
 											text-align: center;
 											width: 10%;
-										`
-  ], children: jsx(Button, { css: tagTableAddButtonStyles(theme), onPress: () => {
-    addTag(item);
-  }, "aria-label": `Add ${rowToTag(item).name}`, children: "Add" }) })] }, rowToTag(item).id) })] })] });
+										`],
+							children: /* @__PURE__ */ jsx$1(Button, {
+								css: tagTableAddButtonStyles(theme),
+								onPress: () => {
+									addTag(item);
+								},
+								"aria-label": `Add ${rowToTag(item).name}`,
+								children: "Add"
+							})
+						})
+					]
+				}, rowToTag(item).id)
+			})]
+		})]
+	});
 }
-
+//#endregion
 export { TagTable };

package/dist/components/TagPicker/styles.cjs

@@ -1,13 +1,12 @@
-'use strict';
-
-var react = require('@emotion/react');
-var autocomplete = require('../../styleD/build/typescript/component/autocomplete.cjs');
-var tagTable = require('../../styleD/build/typescript/component/tagTable.cjs');
-var mergeDeep = require('../../util/mergeDeep.cjs');
-
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_autocomplete = require("../../styleD/build/typescript/component/autocomplete.cjs");
+const require_tagTable = require("../../styleD/build/typescript/component/tagTable.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/TagPicker/styles.ts
 const autocompleteInputStyles = (partialTheme = {}) => {
-  const theme = mergeDeep.mergeDeep(autocomplete.componentAutocomplete, partialTheme);
-  return react.css`
+	const theme = require_mergeDeep.mergeDeep(require_autocomplete.componentAutocomplete, partialTheme);
+	return _emotion_react.css`
 		width: 100%;
 		box-sizing: border-box;
 		padding: ${theme.input.padding};
@@ -23,8 +22,8 @@ const autocompleteInputStyles = (partialTheme = {}) => {
 	`;
 };
 const listboxStyles = (partialTheme = {}) => {
-  const theme = mergeDeep.mergeDeep(autocomplete.componentAutocomplete, partialTheme);
-  return react.css`
+	const theme = require_mergeDeep.mergeDeep(require_autocomplete.componentAutocomplete, partialTheme);
+	return _emotion_react.css`
 		padding: ${theme.listbox.paddingY} ${theme.listbox.paddingX};
 		max-height: 320px;
 		overflow-y: auto;
@@ -35,8 +34,8 @@ const listboxStyles = (partialTheme = {}) => {
 	`;
 };
 const listboxItemStyles = (partialTheme = {}) => {
-  const theme = mergeDeep.mergeDeep(autocomplete.componentAutocomplete, partialTheme);
-  return react.css`
+	const theme = require_mergeDeep.mergeDeep(require_autocomplete.componentAutocomplete, partialTheme);
+	return _emotion_react.css`
 		padding: ${theme.listbox.item.paddingY} ${theme.listbox.item.paddingX};
 		cursor: pointer;
 		color: ${theme.listbox.item.color};
@@ -51,14 +50,14 @@ const listboxItemStyles = (partialTheme = {}) => {
 	`;
 };
 const listboxInfoStyles = (partialTheme = {}) => {
-  const theme = mergeDeep.mergeDeep(autocomplete.componentAutocomplete, partialTheme);
-  return react.css`
+	const theme = require_mergeDeep.mergeDeep(require_autocomplete.componentAutocomplete, partialTheme);
+	return _emotion_react.css`
 		padding: ${theme.listbox.item.paddingY} ${theme.listbox.item.paddingX};
 	`;
 };
 const tagTableHeadingStyles = (partialTheme = {}) => {
-  const theme = mergeDeep.mergeDeep(tagTable.componentTagTable, partialTheme);
-  return react.css`
+	const theme = require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme);
+	return _emotion_react.css`
 		background-color: ${theme.heading.backgroundColor};
 		font-weight: ${theme.heading.fontWeight};
 		padding: ${theme.heading.paddingTop} ${theme.heading.paddingRight}
@@ -66,8 +65,8 @@ const tagTableHeadingStyles = (partialTheme = {}) => {
 	`;
 };
 const tagTableCellStyles = (partialTheme = {}) => {
-  const theme = mergeDeep.mergeDeep(tagTable.componentTagTable, partialTheme);
-  return react.css`
+	const theme = require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme);
+	return _emotion_react.css`
 		padding: ${theme.cell.paddingY} ${theme.cell.paddingX};
 
 		:first-of-type {
@@ -82,8 +81,8 @@ const tagTableCellStyles = (partialTheme = {}) => {
 	`;
 };
 const tagTableRowStyles = (canDrag, partialTheme = {}) => {
-  const theme = mergeDeep.mergeDeep(tagTable.componentTagTable, partialTheme);
-  return react.css`
+	const theme = require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme);
+	return _emotion_react.css`
 		background-color: ${theme.row.backgroundColor};
 		height: ${theme.row.height};
 		&:not(:last-child) {
@@ -109,8 +108,8 @@ const tagTableRowStyles = (canDrag, partialTheme = {}) => {
 	`;
 };
 const tagTableStyles = (canRemoveTag, partialTheme = {}) => {
-  const theme = mergeDeep.mergeDeep(tagTable.componentTagTable, partialTheme);
-  return react.css`
+	const theme = require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme);
+	return _emotion_react.css`
 		width: 100%;
 		border-collapse: collapse;
 
@@ -123,7 +122,7 @@ const tagTableStyles = (canRemoveTag, partialTheme = {}) => {
 		}
 	`;
 };
-const tagTableRemoveButtonStyles = react.css`
+const tagTableRemoveButtonStyles = _emotion_react.css`
 	background: none;
 	border: none;
 	padding: 0;
@@ -132,8 +131,8 @@ const tagTableRemoveButtonStyles = react.css`
 	}
 `;
 const tagTableAddButtonStyles = (partialTheme = {}) => {
-  const theme = mergeDeep.mergeDeep(tagTable.componentTagTable, partialTheme);
-  return react.css`
+	const theme = require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme);
+	return _emotion_react.css`
 		:hover {
 			cursor: pointer;
 			background-color: ${theme.addButton.backgroundHoverColor};
@@ -160,7 +159,7 @@ const tagTableAddButtonStyles = (partialTheme = {}) => {
 		display: inline-flex;
 	`;
 };
-const tagTableDragButtonStyles = react.css`
+const tagTableDragButtonStyles = _emotion_react.css`
 	background: none;
 	border: none;
 	padding: 0;
@@ -175,8 +174,8 @@ const tagTableDragButtonStyles = react.css`
 	}
 `;
 const tagTableTypeBadgeStyles = (partialTheme = {}) => {
-  const theme = mergeDeep.mergeDeep(tagTable.componentTagTable, partialTheme);
-  return react.css`
+	const theme = require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme);
+	return _emotion_react.css`
 		white-space: nowrap;
 		text-transform: uppercase;
 		color: ${theme.typeBadge.color};
@@ -186,7 +185,7 @@ const tagTableTypeBadgeStyles = (partialTheme = {}) => {
 		font-weight: ${theme.typeBadge.fontWeight};
 	`;
 };
-
+//#endregion
 exports.autocompleteInputStyles = autocompleteInputStyles;
 exports.listboxInfoStyles = listboxInfoStyles;
 exports.listboxItemStyles = listboxItemStyles;

package/dist/components/TagPicker/styles.js

@@ -1,11 +1,11 @@
-import { css } from '@emotion/react';
-import { componentAutocomplete } from '../../styleD/build/typescript/component/autocomplete.js';
-import { componentTagTable } from '../../styleD/build/typescript/component/tagTable.js';
-import { mergeDeep } from '../../util/mergeDeep.js';
-
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { componentAutocomplete } from "../../styleD/build/typescript/component/autocomplete.js";
+import { componentTagTable } from "../../styleD/build/typescript/component/tagTable.js";
+import { css } from "@emotion/react";
+//#region src/components/TagPicker/styles.ts
 const autocompleteInputStyles = (partialTheme = {}) => {
-  const theme = mergeDeep(componentAutocomplete, partialTheme);
-  return css`
+	const theme = mergeDeep(componentAutocomplete, partialTheme);
+	return css`
 		width: 100%;
 		box-sizing: border-box;
 		padding: ${theme.input.padding};
@@ -21,8 +21,8 @@ const autocompleteInputStyles = (partialTheme = {}) => {
 	`;
 };
 const listboxStyles = (partialTheme = {}) => {
-  const theme = mergeDeep(componentAutocomplete, partialTheme);
-  return css`
+	const theme = mergeDeep(componentAutocomplete, partialTheme);
+	return css`
 		padding: ${theme.listbox.paddingY} ${theme.listbox.paddingX};
 		max-height: 320px;
 		overflow-y: auto;
@@ -33,8 +33,8 @@ const listboxStyles = (partialTheme = {}) => {
 	`;
 };
 const listboxItemStyles = (partialTheme = {}) => {
-  const theme = mergeDeep(componentAutocomplete, partialTheme);
-  return css`
+	const theme = mergeDeep(componentAutocomplete, partialTheme);
+	return css`
 		padding: ${theme.listbox.item.paddingY} ${theme.listbox.item.paddingX};
 		cursor: pointer;
 		color: ${theme.listbox.item.color};
@@ -49,14 +49,14 @@ const listboxItemStyles = (partialTheme = {}) => {
 	`;
 };
 const listboxInfoStyles = (partialTheme = {}) => {
-  const theme = mergeDeep(componentAutocomplete, partialTheme);
-  return css`
+	const theme = mergeDeep(componentAutocomplete, partialTheme);
+	return css`
 		padding: ${theme.listbox.item.paddingY} ${theme.listbox.item.paddingX};
 	`;
 };
 const tagTableHeadingStyles = (partialTheme = {}) => {
-  const theme = mergeDeep(componentTagTable, partialTheme);
-  return css`
+	const theme = mergeDeep(componentTagTable, partialTheme);
+	return css`
 		background-color: ${theme.heading.backgroundColor};
 		font-weight: ${theme.heading.fontWeight};
 		padding: ${theme.heading.paddingTop} ${theme.heading.paddingRight}
@@ -64,8 +64,8 @@ const tagTableHeadingStyles = (partialTheme = {}) => {
 	`;
 };
 const tagTableCellStyles = (partialTheme = {}) => {
-  const theme = mergeDeep(componentTagTable, partialTheme);
-  return css`
+	const theme = mergeDeep(componentTagTable, partialTheme);
+	return css`
 		padding: ${theme.cell.paddingY} ${theme.cell.paddingX};
 
 		:first-of-type {
@@ -80,8 +80,8 @@ const tagTableCellStyles = (partialTheme = {}) => {
 	`;
 };
 const tagTableRowStyles = (canDrag, partialTheme = {}) => {
-  const theme = mergeDeep(componentTagTable, partialTheme);
-  return css`
+	const theme = mergeDeep(componentTagTable, partialTheme);
+	return css`
 		background-color: ${theme.row.backgroundColor};
 		height: ${theme.row.height};
 		&:not(:last-child) {
@@ -107,8 +107,8 @@ const tagTableRowStyles = (canDrag, partialTheme = {}) => {
 	`;
 };
 const tagTableStyles = (canRemoveTag, partialTheme = {}) => {
-  const theme = mergeDeep(componentTagTable, partialTheme);
-  return css`
+	const theme = mergeDeep(componentTagTable, partialTheme);
+	return css`
 		width: 100%;
 		border-collapse: collapse;
 
@@ -130,8 +130,8 @@ const tagTableRemoveButtonStyles = css`
 	}
 `;
 const tagTableAddButtonStyles = (partialTheme = {}) => {
-  const theme = mergeDeep(componentTagTable, partialTheme);
-  return css`
+	const theme = mergeDeep(componentTagTable, partialTheme);
+	return css`
 		:hover {
 			cursor: pointer;
 			background-color: ${theme.addButton.backgroundHoverColor};
@@ -173,8 +173,8 @@ const tagTableDragButtonStyles = css`
 	}
 `;
 const tagTableTypeBadgeStyles = (partialTheme = {}) => {
-  const theme = mergeDeep(componentTagTable, partialTheme);
-  return css`
+	const theme = mergeDeep(componentTagTable, partialTheme);
+	return css`
 		white-space: nowrap;
 		text-transform: uppercase;
 		color: ${theme.typeBadge.color};
@@ -184,5 +184,5 @@ const tagTableTypeBadgeStyles = (partialTheme = {}) => {
 		font-weight: ${theme.typeBadge.fontWeight};
 	`;
 };
-
+//#endregion
 export { autocompleteInputStyles, listboxInfoStyles, listboxItemStyles, listboxStyles, tagTableAddButtonStyles, tagTableCellStyles, tagTableDragButtonStyles, tagTableHeadingStyles, tagTableRemoveButtonStyles, tagTableRowStyles, tagTableStyles, tagTableTypeBadgeStyles };

package/dist/components/TagPicker/types.d.cts

@@ -0,0 +1,11 @@
+//#region src/components/TagPicker/types.d.ts
+type Tag = {
+  id: number;
+  name: string;
+};
+type TagRow = Tag & {
+  type: string;
+  sectionName: string;
+};
+//#endregion
+export { Tag, TagRow };

package/dist/components/TagPicker/types.d.ts

@@ -0,0 +1,11 @@
+//#region src/components/TagPicker/types.d.ts
+type Tag = {
+  id: number;
+  name: string;
+};
+type TagRow = Tag & {
+  type: string;
+  sectionName: string;
+};
+//#endregion
+export { Tag, TagRow };

package/dist/components/TextArea/TextArea.cjs

@@ -1,35 +1,25 @@
-'use strict';
-
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-var reactAriaComponents = require('react-aria-components');
-var mergeDeep = require('../../util/mergeDeep.cjs');
-var Form = require('../Form/Form.cjs');
-var styles = require('./styles.cjs');
-
-function TextArea({
-  size = "md",
-  isInvalid = false,
-  theme = {},
-  placeholder,
-  ...props
-}) {
-  const mergedTheme = mergeDeep.mergeDeep(styles.defaultTextAreaTheme, theme);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Form.FormInputContainer,
-    {
-      as: reactAriaComponents.TextField,
-      size,
-      isInvalid,
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        reactAriaComponents.TextArea,
-        {
-          placeholder,
-          css: styles.textAreaStyles(mergedTheme, { size, isInvalid })
-        }
-      )
-    }
-  );
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_Form = require("../Form/Form.cjs");
+const require_styles = require("./styles.cjs");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
+//#region src/components/TextArea/TextArea.tsx
+function TextArea({ size = "md", isInvalid = false, theme = {}, placeholder, ...props }) {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultTextAreaTheme, theme);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Form.FormInputContainer, {
+		as: react_aria_components.TextField,
+		size,
+		isInvalid,
+		...props,
+		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.TextArea, {
+			placeholder,
+			css: require_styles.textAreaStyles(mergedTheme, {
+				size,
+				isInvalid
+			})
+		})
+	});
 }
-
+//#endregion
 exports.TextArea = TextArea;

package/dist/components/TextArea/TextArea.d.cts

@@ -0,0 +1,12 @@
+import { TextAreaProps } from "./types.cjs";
+
+//#region src/components/TextArea/TextArea.d.ts
+declare function TextArea({
+  size,
+  isInvalid,
+  theme,
+  placeholder,
+  ...props
+}: TextAreaProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { TextArea };