@guardian/stand 0.0.4 → 0.0.6

package/dist/components/tag-picker/TagTable.cjs

@@ -0,0 +1,203 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react$1 = require('@emotion/react');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var styles = require('./styles.cjs');
+
+const rowToTag = (row) => "tag" in row ? row.tag : row;
+const TypeBadge = (type, theme) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { css: styles.tagTableTypeBadgeStyles(theme), children: type });
+};
+const defaultCanRemove = () => true;
+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] = react.useState(() => [...rows]);
+  const localRowsRef = react.useRef(localRows);
+  localRowsRef.current = localRows;
+  react.useEffect(() => {
+    setLocalRows([...rows]);
+  }, [rows]);
+  const filtered = localRows.filter(filterRows);
+  const { dragAndDropHooks } = reactAriaComponents.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__ */ jsxRuntime.jsxs("div", { css: cssOverrides, children: [
+    heading && /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.tagTableHeadingStyles(theme), children: heading }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      reactAriaComponents.Table,
+      {
+        css: styles.tagTableStyles(!!removeTag, theme),
+        "aria-label": "Tag Table",
+        "data-testid": dataTestId,
+        dragAndDropHooks: onReorder && dragAndDropHooks,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.TableHeader, { hidden: true, children: [
+            onReorder && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Column, {}),
+            showTagType && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Column, { children: "Type" }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Column, { isRowHeader: true, children: "Name" }),
+            showTagSectionName && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Column, { children: "Section" }),
+            removeTag && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Column, {}),
+            addTag && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Column, {})
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.TableBody, { items: filtered, dependencies: [localRows], children: (item) => /* @__PURE__ */ jsxRuntime.jsxs(
+            reactAriaComponents.Row,
+            {
+              id: rowToTag(item).id,
+              css: styles.tagTableRowStyles(canDrag, theme),
+              textValue: rowToTag(item).internalName,
+              children: [
+                onReorder && /* @__PURE__ */ jsxRuntime.jsx(
+                  reactAriaComponents.Cell,
+                  {
+                    css: [
+                      react$1.css`
+											width: 1%;
+										`
+                    ],
+                    children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Button, { slot: "drag", css: styles.tagTableDragButtonStyles, children: gripIcon })
+                  }
+                ),
+                showTagType && /* @__PURE__ */ jsxRuntime.jsx(
+                  reactAriaComponents.Cell,
+                  {
+                    css: [
+                      styles.tagTableCellStyles(theme),
+                      react$1.css`
+											position: relative;
+											width: 15%;
+										`
+                    ],
+                    children: TypeBadge(rowToTag(item).type)
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactAriaComponents.Cell,
+                  {
+                    css: [
+                      styles.tagTableCellStyles(theme),
+                      react$1.css`
+										width: 50%;
+									`
+                    ],
+                    "data-testid": `tags-table-item-${filtered.indexOf(item)}-name`,
+                    children: rowToTag(item).internalName
+                  }
+                ),
+                showTagSectionName && /* @__PURE__ */ jsxRuntime.jsx(
+                  reactAriaComponents.Cell,
+                  {
+                    css: [
+                      styles.tagTableCellStyles(theme),
+                      react$1.css`
+											width: 20%;
+										`
+                    ],
+                    children: rowToTag(item).section.name
+                  }
+                ),
+                removeTag && /* @__PURE__ */ jsxRuntime.jsx(
+                  reactAriaComponents.Cell,
+                  {
+                    css: [
+                      styles.tagTableCellStyles(theme),
+                      react$1.css`
+											text-align: center;
+											width: 10%;
+										`
+                    ],
+                    children: canRemove(item) && /* @__PURE__ */ jsxRuntime.jsx(
+                      reactAriaComponents.Button,
+                      {
+                        css: styles.tagTableRemoveButtonStyles,
+                        onPress: () => {
+                          removeTag(item);
+                        },
+                        "aria-label": `Remove ${rowToTag(item).internalName}`,
+                        children: removeIcon ?? "Remove"
+                      }
+                    )
+                  }
+                ),
+                addTag && /* @__PURE__ */ jsxRuntime.jsx(
+                  reactAriaComponents.Cell,
+                  {
+                    css: [
+                      styles.tagTableCellStyles(theme),
+                      react$1.css`
+											text-align: center;
+											width: 10%;
+										`
+                    ],
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      reactAriaComponents.Button,
+                      {
+                        css: styles.tagTableAddButtonStyles(theme),
+                        onPress: () => {
+                          addTag(item);
+                        },
+                        "aria-label": `Add ${rowToTag(item).internalName}`,
+                        children: "Add"
+                      }
+                    )
+                  }
+                )
+              ]
+            },
+            rowToTag(item).id
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+
+exports.TagTable = TagTable;

package/dist/components/tag-picker/TagTable.js

@@ -0,0 +1,91 @@
+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, tagTableStyles, tagTableRowStyles, tagTableDragButtonStyles, tagTableCellStyles, tagTableRemoveButtonStyles, tagTableAddButtonStyles, tagTableTypeBadgeStyles } from './styles.js';
+
+const rowToTag = (row) => "tag" in row ? row.tag : row;
+const TypeBadge = (type, theme) => {
+  return jsx("span", { css: tagTableTypeBadgeStyles(theme), children: type });
+};
+const defaultCanRemove = () => true;
+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).internalName, children: [onReorder && jsx(Cell, { css: [
+    css`
+											width: 1%;
+										`
+  ], children: jsx(Button, { slot: "drag", css: tagTableDragButtonStyles, children: gripIcon }) }), showTagType && jsx(Cell, { css: [
+    tagTableCellStyles(theme),
+    css`
+											position: relative;
+											width: 15%;
+										`
+  ], children: TypeBadge(rowToTag(item).type) }), jsx(Cell, { css: [
+    tagTableCellStyles(theme),
+    css`
+										width: 50%;
+									`
+  ], "data-testid": `tags-table-item-${filtered.indexOf(item)}-name`, children: rowToTag(item).internalName }), showTagSectionName && jsx(Cell, { css: [
+    tagTableCellStyles(theme),
+    css`
+											width: 20%;
+										`
+  ], children: rowToTag(item).section.name }), removeTag && jsx(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).internalName}`, children: removeIcon ?? "Remove" }) }), addTag && jsx(Cell, { css: [
+    tagTableCellStyles(theme),
+    css`
+											text-align: center;
+											width: 10%;
+										`
+  ], children: jsx(Button, { css: tagTableAddButtonStyles(theme), onPress: () => {
+    addTag(item);
+  }, "aria-label": `Add ${rowToTag(item).internalName}`, children: "Add" }) })] }, rowToTag(item).id) })] })] });
+}
+
+export { TagTable };

package/dist/components/tag-picker/styles.cjs

@@ -0,0 +1,198 @@
+'use strict';
+
+var react = require('@emotion/react');
+var tagAutocomplete = require('../../styleD/build/typescript/component/tagAutocomplete.cjs');
+var tagTable = require('../../styleD/build/typescript/component/tagTable.cjs');
+var util = require('../util.cjs');
+
+const tagAutocompleteInputStyles = (partialTheme = {}) => {
+  const theme = util.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
+  return react.css`
+		width: 100%;
+		box-sizing: border-box;
+		padding: ${theme.input.padding};
+		color: ${theme.input.color};
+		background-color: ${theme.input.backgroundColor};
+		border-color: ${theme.input.borderColor};
+		border-width: ${theme.input.borderWidth};
+		border-style: ${theme.input.borderStyle};
+
+		&[data-disabled] {
+			background-color: ${theme.input.disabledBackgroundColor};
+		}
+	`;
+};
+const listboxStyles = (partialTheme = {}) => {
+  const theme = util.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
+  return react.css`
+		padding: ${theme.listbox.paddingY} ${theme.listbox.paddingX};
+		max-height: 320px;
+		overflow-y: auto;
+		background-color: ${theme.listbox.backgroundColor};
+		border-color: ${theme.listbox.borderColor};
+		border-width: ${theme.listbox.borderWidth};
+		border-style: ${theme.listbox.borderStyle};
+	`;
+};
+const listboxItemStyles = (partialTheme = {}) => {
+  const theme = util.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
+  return react.css`
+		padding: ${theme.listbox.item.paddingY} ${theme.listbox.item.paddingX};
+		cursor: pointer;
+		&:hover {
+			background-color: ${theme.listbox.item.backgroundHoverColor};
+		}
+		&[data-focused] {
+			background-color: ${theme.listbox.item.backgroundFocusedColor};
+		}
+	`;
+};
+const listboxInfoStyles = (partialTheme = {}) => {
+  const theme = util.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
+  return react.css`
+		padding: ${theme.listbox.item.paddingY} ${theme.listbox.item.paddingX};
+	`;
+};
+const tagTableHeadingStyles = (partialTheme = {}) => {
+  const theme = util.mergeDeep(tagTable.componentTagTable, partialTheme);
+  return react.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 = util.mergeDeep(tagTable.componentTagTable, partialTheme);
+  return react.css`
+		padding: ${theme.cell.paddingY} ${theme.cell.paddingX};
+
+		: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, partialTheme = {}) => {
+  const theme = util.mergeDeep(tagTable.componentTagTable, partialTheme);
+  return 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;
+			}
+		}
+		${canDrag && `:first-of-type {
+                    background-color: ${theme.row.firstRowBackgroundColor};
+
+                    :hover {
+                        background-color: ${theme.row.firstRowBackgroundHoverColor};
+                    }
+                }`}
+	`;
+};
+const tagTableStyles = (canRemoveTag, partialTheme = {}) => {
+  const theme = util.mergeDeep(tagTable.componentTagTable, partialTheme);
+  return react.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 = react.css`
+	background: none;
+	border: none;
+	padding: 0;
+	:hover {
+		cursor: pointer;
+	}
+`;
+const tagTableAddButtonStyles = (partialTheme = {}) => {
+  const theme = util.mergeDeep(tagTable.componentTagTable, partialTheme);
+  return 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 = react.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 = util.mergeDeep(tagTable.componentTagTable, partialTheme);
+  return 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};
+	`;
+};
+
+exports.listboxInfoStyles = listboxInfoStyles;
+exports.listboxItemStyles = listboxItemStyles;
+exports.listboxStyles = listboxStyles;
+exports.tagAutocompleteInputStyles = tagAutocompleteInputStyles;
+exports.tagTableAddButtonStyles = tagTableAddButtonStyles;
+exports.tagTableCellStyles = tagTableCellStyles;
+exports.tagTableDragButtonStyles = tagTableDragButtonStyles;
+exports.tagTableHeadingStyles = tagTableHeadingStyles;
+exports.tagTableRemoveButtonStyles = tagTableRemoveButtonStyles;
+exports.tagTableRowStyles = tagTableRowStyles;
+exports.tagTableStyles = tagTableStyles;
+exports.tagTableTypeBadgeStyles = tagTableTypeBadgeStyles;

package/dist/components/tag-picker/styles.js

@@ -0,0 +1,185 @@
+import { css } from '@emotion/react';
+import { componentTagAutocomplete } from '../../styleD/build/typescript/component/tagAutocomplete.js';
+import { componentTagTable } from '../../styleD/build/typescript/component/tagTable.js';
+import { mergeDeep } from '../util.js';
+
+const tagAutocompleteInputStyles = (partialTheme = {}) => {
+  const theme = mergeDeep(componentTagAutocomplete, partialTheme);
+  return css`
+		width: 100%;
+		box-sizing: border-box;
+		padding: ${theme.input.padding};
+		color: ${theme.input.color};
+		background-color: ${theme.input.backgroundColor};
+		border-color: ${theme.input.borderColor};
+		border-width: ${theme.input.borderWidth};
+		border-style: ${theme.input.borderStyle};
+
+		&[data-disabled] {
+			background-color: ${theme.input.disabledBackgroundColor};
+		}
+	`;
+};
+const listboxStyles = (partialTheme = {}) => {
+  const theme = mergeDeep(componentTagAutocomplete, partialTheme);
+  return css`
+		padding: ${theme.listbox.paddingY} ${theme.listbox.paddingX};
+		max-height: 320px;
+		overflow-y: auto;
+		background-color: ${theme.listbox.backgroundColor};
+		border-color: ${theme.listbox.borderColor};
+		border-width: ${theme.listbox.borderWidth};
+		border-style: ${theme.listbox.borderStyle};
+	`;
+};
+const listboxItemStyles = (partialTheme = {}) => {
+  const theme = mergeDeep(componentTagAutocomplete, partialTheme);
+  return css`
+		padding: ${theme.listbox.item.paddingY} ${theme.listbox.item.paddingX};
+		cursor: pointer;
+		&:hover {
+			background-color: ${theme.listbox.item.backgroundHoverColor};
+		}
+		&[data-focused] {
+			background-color: ${theme.listbox.item.backgroundFocusedColor};
+		}
+	`;
+};
+const listboxInfoStyles = (partialTheme = {}) => {
+  const theme = mergeDeep(componentTagAutocomplete, partialTheme);
+  return css`
+		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};
+
+		: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, 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;
+			}
+		}
+		${canDrag && `: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};
+	`;
+};
+
+export { listboxInfoStyles, listboxItemStyles, listboxStyles, tagAutocompleteInputStyles, tagTableAddButtonStyles, tagTableCellStyles, tagTableDragButtonStyles, tagTableHeadingStyles, tagTableRemoveButtonStyles, tagTableRowStyles, tagTableStyles, tagTableTypeBadgeStyles };

package/dist/components/util.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+const isObject = (obj) => obj && typeof obj === "object";
+function mergeDeep(obj1, obj2) {
+  return [obj1, obj2].reduce((prev, obj) => {
+    Object.keys(obj).forEach((key) => {
+      const pVal = prev[key];
+      const oVal = obj[key];
+      if (isObject(pVal) && isObject(oVal)) {
+        prev[key] = mergeDeep(pVal, oVal);
+      } else {
+        prev[key] = oVal;
+      }
+    });
+    return prev;
+  }, {});
+}
+
+exports.mergeDeep = mergeDeep;