@guardian/stand 0.0.53 → 0.0.55

package/dist/components/TagPicker/styles.js

@@ -1,6 +1,5 @@
 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 { componentTagPicker } from "../../styleD/build/typescript/component/tagPicker.js";
 import { css } from "@emotion/react";
 //#region src/components/TagPicker/styles.ts
@@ -15,13 +14,27 @@ const autocompleteInputStyles = (hasIcon, partialTheme = {}) => {
 		border-color: ${theme.input.borderColor};
 		border-width: ${theme.input.borderWidth};
 		border-style: ${theme.input.borderStyle};
+		border-radius: ${theme.input.borderRadius};
+
 		${hasIcon && `
 		padding-right: calc(${theme.icon.paddingX} + ${theme.icon.size} + ${theme.icon.paddingX});
 		min-height: calc(${theme.icon.size});
 		`}
 
+		&[data-hovered] {
+			background-color: ${theme.input.hover.backgroundColor};
+		}
+
+		&[data-focus-visible] {
+			outline: ${theme.input.focused.outline};
+			outline-offset: ${theme.input.focused.outlineOffset};
+		}
+
 		&[data-disabled] {
-			background-color: ${theme.input.disabledBackgroundColor};
+			cursor: ${theme.input.disabled.cursor};
+			background-color: ${theme.input.disabled.backgroundColor};
+			color: ${theme.input.disabled.color};
+			border: ${theme.input.disabled.border};
 		}
 	`;
 };
@@ -59,137 +72,6 @@ const listboxInfoStyles = (partialTheme = {}) => {
 		padding: ${theme.listbox.item.paddingY} ${theme.listbox.item.paddingX};
 	`;
 };
-const tagTableHeadingStyles = (partialTheme = {}) => {
-	const theme = mergeDeep(componentTagTable, partialTheme);
-	return css`
-		background-color: ${theme.heading.backgroundColor};
-		font-weight: ${theme.heading.fontWeight};
-		padding: ${theme.heading.paddingTop} ${theme.heading.paddingRight}
-			${theme.heading.paddingBottom} ${theme.heading.paddingLeft};
-	`;
-};
-const tagTableCellStyles = (partialTheme = {}) => {
-	const theme = mergeDeep(componentTagTable, partialTheme);
-	return css`
-		padding: ${theme.cell.paddingY} ${theme.cell.paddingX};
-		vertical-align: middle;
-
-		:first-of-type {
-			padding-left: ${theme.cell.firstCellPaddingLeft};
-		}
-
-		:not(:last-child) {
-			border-right-width: ${theme.cell.borderBetweenCells.borderWidth};
-			border-right-style: ${theme.cell.borderBetweenCells.borderStyle};
-			border-right-color: ${theme.cell.borderBetweenCells.borderColor};
-		}
-	`;
-};
-const tagTableRowStyles = (canDrag, highlightFirstRow, partialTheme = {}) => {
-	const theme = mergeDeep(componentTagTable, partialTheme);
-	return css`
-		background-color: ${theme.row.backgroundColor};
-		height: ${theme.row.height};
-		&:not(:last-child) {
-			border-bottom-color: ${theme.row.borderBottom.borderColor};
-			border-bottom-style: ${theme.row.borderBottom.borderStyle};
-			border-bottom-width: ${theme.row.borderBottom.borderWidth};
-		}
-
-		:hover {
-			background-color: ${theme.row.backgroundHoverColor};
-			${canDrag ? "cursor: grab;" : null}
-			button[slot='drag'] {
-				opacity: 1;
-			}
-		}
-		${highlightFirstRow && `:first-of-type {
-                    background-color: ${theme.row.firstRowBackgroundColor};
-
-                    :hover {
-                        background-color: ${theme.row.firstRowBackgroundHoverColor};
-                    }
-                }`}
-	`;
-};
-const tagTableStyles = (canRemoveTag, partialTheme = {}) => {
-	const theme = mergeDeep(componentTagTable, partialTheme);
-	return css`
-		width: 100%;
-		border-collapse: collapse;
-
-		.react-aria-DropIndicator[data-drop-target] {
-			height: ${theme.row.height};
-
-			${canRemoveTag ? `&:first-child {
-						background-color: ${theme.row.firstRowBackgroundColor};
-					}` : ""}
-		}
-	`;
-};
-const tagTableRemoveButtonStyles = css`
-	background: none;
-	border: none;
-	padding: 0;
-	:hover {
-		cursor: pointer;
-	}
-`;
-const tagTableAddButtonStyles = (partialTheme = {}) => {
-	const theme = mergeDeep(componentTagTable, partialTheme);
-	return css`
-		:hover {
-			cursor: pointer;
-			background-color: ${theme.addButton.backgroundHoverColor};
-		}
-
-		color: ${theme.addButton.color};
-		-webkit-text-decoration: none;
-		text-decoration: none;
-		padding: ${theme.addButton.paddingY} ${theme.addButton.paddingX};
-		position: relative;
-		border: 0;
-		border-radius: 0;
-		cursor: pointer;
-		justify-content: center;
-		align-items: center;
-		font-weight: ${theme.addButton.fontWeight};
-		font-size: ${theme.addButton.fontSize};
-		height: 24px;
-		width: fit-content;
-		line-height: 1;
-		flex-direction: row;
-		gap: 8px;
-		background-color: ${theme.addButton.backgroundColor};
-		display: inline-flex;
-	`;
-};
-const tagTableDragButtonStyles = css`
-	background: none;
-	border: none;
-	padding: 0;
-	padding-left: 5px;
-	margin: 0;
-	display: flex;
-	align-items: center;
-	opacity: 0;
-
-	&:focus {
-		opacity: 1;
-	}
-`;
-const tagTableTypeBadgeStyles = (partialTheme = {}) => {
-	const theme = mergeDeep(componentTagTable, partialTheme);
-	return css`
-		white-space: nowrap;
-		text-transform: uppercase;
-		color: ${theme.typeBadge.color};
-		background-color: ${theme.typeBadge.backgroundColor};
-		padding: ${theme.typeBadge.paddingY} ${theme.typeBadge.paddingX};
-		font-size: ${theme.typeBadge.fontSize};
-		font-weight: ${theme.typeBadge.fontWeight};
-	`;
-};
 const iconStyles = (partialTheme = {}) => {
 	const theme = mergeDeep(componentAutocomplete, partialTheme);
 	return css`
@@ -219,9 +101,11 @@ const offlineSectionStyles = (partialTheme = {}) => {
 	`;
 };
 const tagSearchWithFilterStyles = (partialTheme = {}) => {
+	const theme = mergeDeep(componentTagPicker, partialTheme);
 	return css`
+		width: ${theme.search.width};
 		display: flex;
-		gap: ${mergeDeep(componentTagPicker, partialTheme).shared.gap};
+		gap: ${theme.shared.gap};
 	`;
 };
 const filterSelectCssOverrides = (partialTheme = {}) => {
@@ -240,4 +124,4 @@ const modifyFilterSelectTheme = (selectTheme) => {
 	} }, selectTheme);
 };
 //#endregion
-export { autocompleteInputStyles, filterSelectCssOverrides, iconStyles, listboxInfoStyles, listboxItemStyles, listboxStyles, modifyFilterSelectTheme, offlineSectionStyles, tagPickerStyles, tagSearchWithFilterStyles, tagTableAddButtonStyles, tagTableCellStyles, tagTableDragButtonStyles, tagTableHeadingStyles, tagTableRemoveButtonStyles, tagTableRowStyles, tagTableStyles, tagTableTypeBadgeStyles };
+export { autocompleteInputStyles, filterSelectCssOverrides, iconStyles, listboxInfoStyles, listboxItemStyles, listboxStyles, modifyFilterSelectTheme, offlineSectionStyles, tagPickerStyles, tagSearchWithFilterStyles };

package/dist/components/{TagPicker → TagTable}/TagTable.cjs

@@ -3,7 +3,7 @@ let react = require("react");
 let _emotion_react = require("@emotion/react");
 let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
 let react_aria_components = require("react-aria-components");
-//#region src/components/TagPicker/TagTable.tsx
+//#region src/components/TagTable/TagTable.tsx
 const rowToTag = (row) => "tag" in row ? row.tag : row;
 const TypeBadge = (type, theme) => {
 	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
@@ -59,7 +59,7 @@ const defaultCanRemove = () => true;
 *
 * This is currently still in testing phase, so a production implementation is not yet available.
 */
-function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName, highlightFirstRow = false, removeAction: removeTag, addAction: addTag, onReorder, canRemove = defaultCanRemove, "data-testid": dataTestId, removeIcon, gripIcon, theme, cssOverrides }) {
+function TagTable({ rows, filterRows, heading, subHeading, showTagType, showTagSectionName, highlightFirstRow = false, removeAction: removeTag, addAction: addTag, onReorder, canRemove = defaultCanRemove, "data-testid": dataTestId, removeIcon, gripIcon = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", { children: "⣿" }), renderCustomControl, renderWhenEmpty, headerContent, theme, cssOverrides }) {
 	const canDrag = !!onReorder;
 	const [localRows, setLocalRows] = (0, react.useState)(() => [...rows]);
 	const localRowsRef = (0, react.useRef)(localRows);
@@ -87,14 +87,23 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
 			onReorder?.(localList);
 		}
 	});
-	if (filtered.length === 0) return null;
+	if (filtered.length === 0 && !renderWhenEmpty) return null;
 	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
 		css: cssOverrides,
-		children: [heading && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
-			css: require_styles.tagTableHeadingStyles(theme),
-			children: heading
+		children: [(!!heading || !!subHeading || !!headerContent) && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+			css: require_styles.tagTableHeaderStyles(theme),
+			children: [(!!heading || !!subHeading) && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+				css: require_styles.tagTableHeaderTextStyles(theme),
+				children: [heading && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
+					css: require_styles.tagTableHeadingStyles(theme),
+					children: heading
+				}), subHeading && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
+					css: require_styles.tagTableSubHeadingStyles(theme),
+					children: subHeading
+				})]
+			}), headerContent]
 		}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.Table, {
-			css: require_styles.tagTableStyles(!!removeTag, theme),
+			css: require_styles.tagTableStyles(!!highlightFirstRow, theme),
 			"aria-label": "Tag Table",
 			"data-testid": dataTestId,
 			dragAndDropHooks: onReorder && dragAndDropHooks,
@@ -107,6 +116,7 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
 						isRowHeader: true,
 						children: "Name"
 					}),
+					renderCustomControl && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Column, {}),
 					showTagSectionName && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Column, { children: "Section" }),
 					removeTag && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Column, {}),
 					addTag && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Column, {})
@@ -122,6 +132,7 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
 						onReorder && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Cell, {
 							css: [_emotion_react.css`
 											width: 1%;
+											vertical-align: middle;
 										`],
 							children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Button, {
 								slot: "drag",
@@ -143,6 +154,13 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
 							"data-testid": `tags-table-item-${filtered.indexOf(item)}-name`,
 							children: rowToTag(item).name
 						}),
+						renderCustomControl && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Cell, {
+							css: [require_styles.tagTableCellStyles(theme), _emotion_react.css`
+											text-align: center;
+											width: 10%;
+										`],
+							children: renderCustomControl(item)
+						}),
 						showTagSectionName && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Cell, {
 							css: [require_styles.tagTableCellStyles(theme), _emotion_react.css`
 											width: 20%;

package/dist/components/{TagPicker → TagTable}/TagTable.d.cts

@@ -1,10 +1,10 @@
 import { DeepPartial } from "../../util/types.cjs";
 import { ComponentTagTable } from "../../styleD/build/typescript/component/tagTable.cjs";
-import { TagRow } from "./types.cjs";
+import { TagRow } from "../TagPicker/types.cjs";
 import { SerializedStyles } from "@emotion/react";
-import { ReactElement } from "react";
+import { ReactElement, ReactNode } from "react";
 
-//#region src/components/TagPicker/TagTable.d.ts
+//#region src/components/TagTable/TagTable.d.ts
 type Row = TagRow | {
   tag: TagRow;
 };
@@ -13,8 +13,12 @@ interface TagTableProps<R extends Row> {
   rows: R[];
   /** `filterRows` - Function to filter rows from `rows` prop from appearing in the table */
   filterRows?: (row: R) => boolean;
+  /** `renderWhenEmpty` - Whether to render the header and the empty table if there are no rows to display after filtering */
+  renderWhenEmpty?: boolean;
   /** `heading` - The table heading */
-  heading?: string;
+  heading?: ReactNode;
+  /** `subHeading` - The table subHeading */
+  subHeading?: string;
   /** `showTagType` - Whether to show tags' type in table */
   showTagType?: boolean;
   /** `showTagSectionName` - Whether to show tags' section name in table */
@@ -34,6 +38,12 @@ interface TagTableProps<R extends Row> {
   removeIcon?: ReactElement;
   /** `gripIcon` - Icon to indicate that a row can be dragged, used in the accessible drag button */
   gripIcon?: ReactElement;
+  /** `renderCustomControl` - Function to render a custom component in the tag row */
+  renderCustomControl?: (tag: R) => ReactNode;
+  /** `customActionDescription` - a string of the verb describing what the custom action does eg "Flag" */
+  customActionDescription?: string;
+  /** `headerContent` - the content to render in the table's header. */
+  headerContent?: ReactNode;
   /** `theme` - Used to customise the look and feel of the TagTable component */
   theme?: DeepPartial<ComponentTagTable>;
   /** `cssOverrides` - Escape hatch for styling that doesn't fall into the theme */
@@ -90,6 +100,7 @@ declare function TagTable<R extends Row>({
   rows,
   filterRows,
   heading,
+  subHeading,
   showTagType,
   showTagSectionName,
   highlightFirstRow,
@@ -100,6 +111,9 @@ declare function TagTable<R extends Row>({
   'data-testid': dataTestId,
   removeIcon,
   gripIcon,
+  renderCustomControl,
+  renderWhenEmpty,
+  headerContent,
   theme,
   cssOverrides
 }: TagTableProps<R>): import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/components/{TagPicker → TagTable}/TagTable.d.ts

@@ -1,10 +1,10 @@
 import { DeepPartial } from "../../util/types.js";
 import { ComponentTagTable } from "../../styleD/build/typescript/component/tagTable.js";
-import { TagRow } from "./types.js";
-import { ReactElement } from "react";
+import { TagRow } from "../TagPicker/types.js";
+import { ReactElement, ReactNode } from "react";
 import { SerializedStyles } from "@emotion/react";
 
-//#region src/components/TagPicker/TagTable.d.ts
+//#region src/components/TagTable/TagTable.d.ts
 type Row = TagRow | {
   tag: TagRow;
 };
@@ -13,8 +13,12 @@ interface TagTableProps<R extends Row> {
   rows: R[];
   /** `filterRows` - Function to filter rows from `rows` prop from appearing in the table */
   filterRows?: (row: R) => boolean;
+  /** `renderWhenEmpty` - Whether to render the header and the empty table if there are no rows to display after filtering */
+  renderWhenEmpty?: boolean;
   /** `heading` - The table heading */
-  heading?: string;
+  heading?: ReactNode;
+  /** `subHeading` - The table subHeading */
+  subHeading?: string;
   /** `showTagType` - Whether to show tags' type in table */
   showTagType?: boolean;
   /** `showTagSectionName` - Whether to show tags' section name in table */
@@ -34,6 +38,12 @@ interface TagTableProps<R extends Row> {
   removeIcon?: ReactElement;
   /** `gripIcon` - Icon to indicate that a row can be dragged, used in the accessible drag button */
   gripIcon?: ReactElement;
+  /** `renderCustomControl` - Function to render a custom component in the tag row */
+  renderCustomControl?: (tag: R) => ReactNode;
+  /** `customActionDescription` - a string of the verb describing what the custom action does eg "Flag" */
+  customActionDescription?: string;
+  /** `headerContent` - the content to render in the table's header. */
+  headerContent?: ReactNode;
   /** `theme` - Used to customise the look and feel of the TagTable component */
   theme?: DeepPartial<ComponentTagTable>;
   /** `cssOverrides` - Escape hatch for styling that doesn't fall into the theme */
@@ -90,6 +100,7 @@ declare function TagTable<R extends Row>({
   rows,
   filterRows,
   heading,
+  subHeading,
   showTagType,
   showTagSectionName,
   highlightFirstRow,
@@ -100,6 +111,9 @@ declare function TagTable<R extends Row>({
   'data-testid': dataTestId,
   removeIcon,
   gripIcon,
+  renderCustomControl,
+  renderWhenEmpty,
+  headerContent,
   theme,
   cssOverrides
 }: TagTableProps<R>): import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/components/{TagPicker → TagTable}/TagTable.js

@@ -1,9 +1,9 @@
-import { tagTableAddButtonStyles, tagTableCellStyles, tagTableDragButtonStyles, tagTableHeadingStyles, tagTableRemoveButtonStyles, tagTableRowStyles, tagTableStyles, tagTableTypeBadgeStyles } from "./styles.js";
+import { tagTableAddButtonStyles, tagTableCellStyles, tagTableDragButtonStyles, tagTableHeaderStyles, tagTableHeaderTextStyles, tagTableHeadingStyles, tagTableRemoveButtonStyles, tagTableRowStyles, tagTableStyles, tagTableSubHeadingStyles, tagTableTypeBadgeStyles } from "./styles.js";
 import { useEffect, useRef, useState } from "react";
 import { css } from "@emotion/react";
 import { jsx, 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
+//#region src/components/TagTable/TagTable.tsx
 const rowToTag = (row) => "tag" in row ? row.tag : row;
 const TypeBadge = (type, theme) => {
 	return /* @__PURE__ */ jsx("span", {
@@ -59,7 +59,7 @@ const defaultCanRemove = () => true;
 *
 * This is currently still in testing phase, so a production implementation is not yet available.
 */
-function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName, highlightFirstRow = false, removeAction: removeTag, addAction: addTag, onReorder, canRemove = defaultCanRemove, "data-testid": dataTestId, removeIcon, gripIcon, theme, cssOverrides }) {
+function TagTable({ rows, filterRows, heading, subHeading, showTagType, showTagSectionName, highlightFirstRow = false, removeAction: removeTag, addAction: addTag, onReorder, canRemove = defaultCanRemove, "data-testid": dataTestId, removeIcon, gripIcon = /* @__PURE__ */ jsx("span", { children: "⣿" }), renderCustomControl, renderWhenEmpty, headerContent, theme, cssOverrides }) {
 	const canDrag = !!onReorder;
 	const [localRows, setLocalRows] = useState(() => [...rows]);
 	const localRowsRef = useRef(localRows);
@@ -87,14 +87,23 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
 			onReorder?.(localList);
 		}
 	});
-	if (filtered.length === 0) return null;
+	if (filtered.length === 0 && !renderWhenEmpty) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		css: cssOverrides,
-		children: [heading && /* @__PURE__ */ jsx("div", {
-			css: tagTableHeadingStyles(theme),
-			children: heading
+		children: [(!!heading || !!subHeading || !!headerContent) && /* @__PURE__ */ jsxs("div", {
+			css: tagTableHeaderStyles(theme),
+			children: [(!!heading || !!subHeading) && /* @__PURE__ */ jsxs("div", {
+				css: tagTableHeaderTextStyles(theme),
+				children: [heading && /* @__PURE__ */ jsx("span", {
+					css: tagTableHeadingStyles(theme),
+					children: heading
+				}), subHeading && /* @__PURE__ */ jsx("span", {
+					css: tagTableSubHeadingStyles(theme),
+					children: subHeading
+				})]
+			}), headerContent]
 		}), /* @__PURE__ */ jsxs(Table, {
-			css: tagTableStyles(!!removeTag, theme),
+			css: tagTableStyles(!!highlightFirstRow, theme),
 			"aria-label": "Tag Table",
 			"data-testid": dataTestId,
 			dragAndDropHooks: onReorder && dragAndDropHooks,
@@ -107,6 +116,7 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
 						isRowHeader: true,
 						children: "Name"
 					}),
+					renderCustomControl && /* @__PURE__ */ jsx(Column, {}),
 					showTagSectionName && /* @__PURE__ */ jsx(Column, { children: "Section" }),
 					removeTag && /* @__PURE__ */ jsx(Column, {}),
 					addTag && /* @__PURE__ */ jsx(Column, {})
@@ -122,6 +132,7 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
 						onReorder && /* @__PURE__ */ jsx(Cell, {
 							css: [css`
 											width: 1%;
+											vertical-align: middle;
 										`],
 							children: /* @__PURE__ */ jsx(Button, {
 								slot: "drag",
@@ -143,6 +154,13 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
 							"data-testid": `tags-table-item-${filtered.indexOf(item)}-name`,
 							children: rowToTag(item).name
 						}),
+						renderCustomControl && /* @__PURE__ */ jsx(Cell, {
+							css: [tagTableCellStyles(theme), css`
+											text-align: center;
+											width: 10%;
+										`],
+							children: renderCustomControl(item)
+						}),
 						showTagSectionName && /* @__PURE__ */ jsx(Cell, {
 							css: [tagTableCellStyles(theme), css`
 											width: 20%;

package/dist/components/TagTable/styles.cjs

@@ -0,0 +1,170 @@
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_tagTable = require("../../styleD/build/typescript/component/tagTable.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/TagTable/styles.ts
+const tagTableHeaderStyles = (partialTheme = {}) => {
+	const theme = require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme);
+	return _emotion_react.css`
+		background-color: ${theme.header.backgroundColor};
+		padding: ${theme.header.paddingTop} ${theme.header.paddingRight}
+			${theme.header.paddingBottom} ${theme.header.paddingLeft};
+		display: flex;
+		gap: ${theme.header.gap};
+		justify-content: space-between;
+		align-items: center;
+	`;
+};
+const tagTableHeaderTextStyles = (partialTheme = {}) => {
+	return _emotion_react.css`
+		display: flex;
+		flex-direction: column;
+		gap: ${require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme).header.gap};
+	`;
+};
+const tagTableHeadingStyles = (partialTheme = {}) => {
+	const theme = require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme);
+	return _emotion_react.css`
+		font-weight: ${theme.heading.fontWeight};
+		font-size: ${theme.heading.fontSize};
+	`;
+};
+const tagTableSubHeadingStyles = (partialTheme = {}) => {
+	const theme = require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme);
+	return _emotion_react.css`
+		font-weight: ${theme.subHeading.fontWeight};
+		font-size: ${theme.subHeading.fontSize};
+	`;
+};
+const tagTableCellStyles = (partialTheme = {}) => {
+	const theme = require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme);
+	return _emotion_react.css`
+		padding: ${theme.cell.paddingY} ${theme.cell.paddingX};
+		vertical-align: middle;
+
+		:first-of-type {
+			padding-left: ${theme.cell.firstCellPaddingLeft};
+		}
+
+		:not(:last-child) {
+			border-right-width: ${theme.cell.borderBetweenCells.borderWidth};
+			border-right-style: ${theme.cell.borderBetweenCells.borderStyle};
+			border-right-color: ${theme.cell.borderBetweenCells.borderColor};
+		}
+	`;
+};
+const tagTableRowStyles = (canDrag, highlightFirstRow, partialTheme = {}) => {
+	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) {
+			border-bottom-color: ${theme.row.borderBottom.borderColor};
+			border-bottom-style: ${theme.row.borderBottom.borderStyle};
+			border-bottom-width: ${theme.row.borderBottom.borderWidth};
+		}
+
+		:hover {
+			background-color: ${theme.row.backgroundHoverColor};
+			${canDrag ? "cursor: grab;" : null}
+			button[slot='drag'] {
+				opacity: 1;
+			}
+		}
+		${highlightFirstRow && `:first-of-type {
+                    background-color: ${theme.row.firstRowBackgroundColor};
+
+                    :hover {
+                        background-color: ${theme.row.firstRowBackgroundHoverColor};
+                    }
+                }`}
+	`;
+};
+const tagTableStyles = (highlightFirstRow, partialTheme = {}) => {
+	const theme = require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme);
+	return _emotion_react.css`
+		width: 100%;
+		border-collapse: collapse;
+
+		.react-aria-DropIndicator[data-drop-target] {
+			height: ${theme.row.height};
+
+			${highlightFirstRow ? `&:first-child {
+						background-color: ${theme.row.firstRowBackgroundColor};
+					}` : ""}
+		}
+	`;
+};
+const tagTableRemoveButtonStyles = _emotion_react.css`
+	background: none;
+	border: none;
+	padding: 0;
+	:hover {
+		cursor: pointer;
+	}
+`;
+const tagTableAddButtonStyles = (partialTheme = {}) => {
+	const theme = require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme);
+	return _emotion_react.css`
+		:hover {
+			cursor: pointer;
+			background-color: ${theme.addButton.backgroundHoverColor};
+		}
+
+		color: ${theme.addButton.color};
+		-webkit-text-decoration: none;
+		text-decoration: none;
+		padding: ${theme.addButton.paddingY} ${theme.addButton.paddingX};
+		position: relative;
+		border: 0;
+		border-radius: 0;
+		cursor: pointer;
+		justify-content: center;
+		align-items: center;
+		font-weight: ${theme.addButton.fontWeight};
+		font-size: ${theme.addButton.fontSize};
+		height: 24px;
+		width: fit-content;
+		line-height: 1;
+		flex-direction: row;
+		gap: 8px;
+		background-color: ${theme.addButton.backgroundColor};
+		display: inline-flex;
+	`;
+};
+const tagTableDragButtonStyles = _emotion_react.css`
+	background: none;
+	border: none;
+	padding: 5px;
+	margin: 0;
+	display: flex;
+	align-items: center;
+	opacity: 0;
+
+	&:focus {
+		opacity: 1;
+	}
+`;
+const tagTableTypeBadgeStyles = (partialTheme = {}) => {
+	const theme = require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme);
+	return _emotion_react.css`
+		white-space: nowrap;
+		text-transform: uppercase;
+		color: ${theme.typeBadge.color};
+		background-color: ${theme.typeBadge.backgroundColor};
+		padding: ${theme.typeBadge.paddingY} ${theme.typeBadge.paddingX};
+		font-size: ${theme.typeBadge.fontSize};
+		font-weight: ${theme.typeBadge.fontWeight};
+	`;
+};
+//#endregion
+exports.tagTableAddButtonStyles = tagTableAddButtonStyles;
+exports.tagTableCellStyles = tagTableCellStyles;
+exports.tagTableDragButtonStyles = tagTableDragButtonStyles;
+exports.tagTableHeaderStyles = tagTableHeaderStyles;
+exports.tagTableHeaderTextStyles = tagTableHeaderTextStyles;
+exports.tagTableHeadingStyles = tagTableHeadingStyles;
+exports.tagTableRemoveButtonStyles = tagTableRemoveButtonStyles;
+exports.tagTableRowStyles = tagTableRowStyles;
+exports.tagTableStyles = tagTableStyles;
+exports.tagTableSubHeadingStyles = tagTableSubHeadingStyles;
+exports.tagTableTypeBadgeStyles = tagTableTypeBadgeStyles;