@guardian/stand 0.0.50 → 0.0.52

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

@@ -0,0 +1,20 @@
+import { DeepPartial, DefaultProps, DefaultPropsWithChildren } from "../../util/types.cjs";
+import { IconButtonProps } from "../IconButton/types.cjs";
+import { TypographyProps } from "../Typography/types.cjs";
+import { DialogTheme, ModalTheme } from "./styles.cjs";
+import { DialogProps, DialogTriggerProps, ModalOverlayProps } from "react-aria-components";
+
+//#region src/components/Modal/types.d.ts
+type ModalProps = DefaultProps<ModalTheme, ModalOverlayProps['className']> & ModalOverlayProps;
+type DialogProps$1 = DefaultProps<DialogTheme['container'], DialogProps['className']> & DialogProps;
+type DialogHeaderProps = Omit<TypographyProps, 'theme'> & {
+  theme?: DeepPartial<DialogTheme['title']>;
+};
+type DialogButtonsProps = DefaultPropsWithChildren<DialogTheme['ctas']>;
+type DialogContentProps = DefaultPropsWithChildren<DialogTheme['children']>;
+type DialogDismissProps = Omit<IconButtonProps, 'theme'> & {
+  theme?: DeepPartial<DialogTheme['dismiss']>;
+};
+type DialogTriggerProps$1 = DialogTriggerProps;
+//#endregion
+export { DialogButtonsProps, DialogContentProps, DialogDismissProps, DialogHeaderProps, DialogProps$1 as DialogProps, DialogTriggerProps$1 as DialogTriggerProps, ModalProps };

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

@@ -0,0 +1,20 @@
+import { DeepPartial, DefaultProps, DefaultPropsWithChildren } from "../../util/types.js";
+import { IconButtonProps } from "../IconButton/types.js";
+import { TypographyProps } from "../Typography/types.js";
+import { DialogTheme, ModalTheme } from "./styles.js";
+import { DialogProps, DialogTriggerProps, ModalOverlayProps } from "react-aria-components";
+
+//#region src/components/Modal/types.d.ts
+type ModalProps = DefaultProps<ModalTheme, ModalOverlayProps['className']> & ModalOverlayProps;
+type DialogProps$1 = DefaultProps<DialogTheme['container'], DialogProps['className']> & DialogProps;
+type DialogHeaderProps = Omit<TypographyProps, 'theme'> & {
+  theme?: DeepPartial<DialogTheme['title']>;
+};
+type DialogButtonsProps = DefaultPropsWithChildren<DialogTheme['ctas']>;
+type DialogContentProps = DefaultPropsWithChildren<DialogTheme['children']>;
+type DialogDismissProps = Omit<IconButtonProps, 'theme'> & {
+  theme?: DeepPartial<DialogTheme['dismiss']>;
+};
+type DialogTriggerProps$1 = DialogTriggerProps;
+//#endregion
+export { DialogButtonsProps, DialogContentProps, DialogDismissProps, DialogHeaderProps, DialogProps$1 as DialogProps, DialogTriggerProps$1 as DialogTriggerProps, ModalProps };

package/dist/components/Select/Select.cjs

@@ -34,7 +34,7 @@ function ListBox({ children, theme = {} }) {
 		children: items
 	});
 }
-function Select({ isInvalid, theme = {}, children, ...props }) {
+function Select({ isInvalid, theme = {}, placement, shouldFlip, children, ...props }) {
 	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultSelectTheme, theme);
 	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(require_Form.FormInputContainer, {
 		as: react_aria_components.Select,
@@ -49,6 +49,8 @@ function Select({ isInvalid, theme = {}, children, ...props }) {
 			})]
 		}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Popover, {
 			css: require_styles.popoverStyles(),
+			placement,
+			shouldFlip,
 			offset: mergedTheme.shared.offset,
 			containerPadding: mergedTheme.shared.containerPadding,
 			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ListBox, {

package/dist/components/Select/Select.d.cts

@@ -10,6 +10,8 @@ declare function Option({
 declare function Select({
   isInvalid,
   theme,
+  placement,
+  shouldFlip,
   children,
   ...props
 }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Select/Select.d.ts

@@ -10,6 +10,8 @@ declare function Option({
 declare function Select({
   isInvalid,
   theme,
+  placement,
+  shouldFlip,
   children,
   ...props
 }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Select/Select.js

@@ -32,7 +32,7 @@ function ListBox$1({ children, theme = {} }) {
 		children: items
 	});
 }
-function Select$1({ isInvalid, theme = {}, children, ...props }) {
+function Select$1({ isInvalid, theme = {}, placement, shouldFlip, children, ...props }) {
 	const mergedTheme = mergeDeep(defaultSelectTheme, theme);
 	return /* @__PURE__ */ jsxs(FormInputContainer, {
 		as: Select,
@@ -47,6 +47,8 @@ function Select$1({ isInvalid, theme = {}, children, ...props }) {
 			})]
 		}), /* @__PURE__ */ jsx(Popover, {
 			css: popoverStyles(),
+			placement,
+			shouldFlip,
 			offset: mergedTheme.shared.offset,
 			containerPadding: mergedTheme.shared.containerPadding,
 			children: /* @__PURE__ */ jsx(ListBox$1, {

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

@@ -1,10 +1,23 @@
 import { DefaultPropsWithChildren } from "../../util/types.cjs";
 import { FormInputContainerDefaultProps } from "../Form/types.cjs";
 import { SelectTheme } from "./styles.cjs";
-import { ListBoxItemProps, SelectProps } from "react-aria-components";
+import { ListBoxItemProps, PopoverProps, SelectProps } from "react-aria-components";
 
 //#region src/components/Select/types.d.ts
 interface OptionProps extends DefaultPropsWithChildren<SelectTheme, ListBoxItemProps['className'], string>, Omit<ListBoxItemProps, 'children'> {}
-type SelectProps$1 = FormInputContainerDefaultProps<SelectProps<object, 'single' | 'multiple'>, SelectTheme>;
+type SelectProps$1 = FormInputContainerDefaultProps<SelectProps<object, 'single' | 'multiple'> & {
+  /**
+   * The placement of the options container element with respect to select input.
+   * @default
+   * 'bottom'
+   */
+  placement?: PopoverProps['placement'];
+  /**
+   * Whether the element options container element flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.
+   * @default
+   * true
+   * */
+  shouldFlip?: PopoverProps['shouldFlip'];
+}, SelectTheme>;
 //#endregion
 export { OptionProps, SelectProps$1 as SelectProps };

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

@@ -1,10 +1,23 @@
 import { DefaultPropsWithChildren } from "../../util/types.js";
 import { FormInputContainerDefaultProps } from "../Form/types.js";
 import { SelectTheme } from "./styles.js";
-import { ListBoxItemProps, SelectProps } from "react-aria-components";
+import { ListBoxItemProps, PopoverProps, SelectProps } from "react-aria-components";
 
 //#region src/components/Select/types.d.ts
 interface OptionProps extends DefaultPropsWithChildren<SelectTheme, ListBoxItemProps['className'], string>, Omit<ListBoxItemProps, 'children'> {}
-type SelectProps$1 = FormInputContainerDefaultProps<SelectProps<object, 'single' | 'multiple'>, SelectTheme>;
+type SelectProps$1 = FormInputContainerDefaultProps<SelectProps<object, 'single' | 'multiple'> & {
+  /**
+   * The placement of the options container element with respect to select input.
+   * @default
+   * 'bottom'
+   */
+  placement?: PopoverProps['placement'];
+  /**
+   * Whether the element options container element flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.
+   * @default
+   * true
+   * */
+  shouldFlip?: PopoverProps['shouldFlip'];
+}, SelectTheme>;
 //#endregion
 export { OptionProps, SelectProps$1 as SelectProps };

package/dist/components/TagPicker/Autocomplete.cjs

@@ -1,3 +1,4 @@
+const require_Icon = require("../Icon/Icon.cjs");
 const require_styles = require("./styles.cjs");
 let react = require("react");
 let _emotion_react = require("@emotion/react");
@@ -87,10 +88,17 @@ let react_aria_components = require("react-aria-components");
 *
 * This is currently still in testing phase, so a production implementation is not yet available.
 */
-function Autocomplete({ addSelection, loading, onTextInputChange, options, label, placeholder, disabled, value, "data-testid": dataTestId, loadingIcon, theme, cssOverrides, addFirstOnEnter }) {
+function Autocomplete({ addSelection, loading, onTextInputChange, options, label, placeholder, disabled, value, "data-testid": dataTestId, loadingIcon, theme, cssOverrides, addFirstOnEnter, symbol, icon }) {
 	const [hoveredItemId, setHoveredItemId] = (0, react.useState)();
 	const [upOrDownKeyPressed, setUpOrDownKeyPressed] = (0, react.useState)(false);
 	const listBoxIsInUse = upOrDownKeyPressed || !!hoveredItemId;
+	const iconContent = icon ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+		css: require_styles.iconStyles(theme),
+		children: icon
+	}) : symbol ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+		symbol,
+		css: require_styles.iconStyles(theme)
+	}) : null;
 	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
 		css: [_emotion_react.css`
 					position: relative;
@@ -114,55 +122,59 @@ function Autocomplete({ addSelection, loading, onTextInputChange, options, label
 			allowsCustomValue: true,
 			menuTrigger: "focus",
 			shouldFocusWrap: true,
-			children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Input, {
-				css: require_styles.autocompleteInputStyles(theme),
-				placeholder,
-				disabled,
-				"data-testid": dataTestId,
-				onKeyDown: addFirstOnEnter ? (event) => {
-					if (event.key === "ArrowDown" || event.key === "ArrowUp") setUpOrDownKeyPressed(true);
-					if (event.key === "Enter") {
-						const [firstOption] = options;
-						if (firstOption && !listBoxIsInUse) addSelection(firstOption);
-					}
-				} : void 0
-			}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Popover, {
-				placement: "bottom",
-				css: _emotion_react.css`
+			children: [
+				/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Input, {
+					css: require_styles.autocompleteInputStyles(!!iconContent, theme),
+					placeholder,
+					disabled,
+					"data-testid": dataTestId,
+					onKeyDown: addFirstOnEnter ? (event) => {
+						if (event.key === "ArrowDown" || event.key === "ArrowUp") setUpOrDownKeyPressed(true);
+						if (event.key === "Enter") {
+							const [firstOption] = options;
+							if (firstOption && !listBoxIsInUse) addSelection(firstOption);
+						}
+					} : void 0
+				}),
+				/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Popover, {
+					placement: "bottom",
+					css: _emotion_react.css`
 						width: var(--trigger-width);
 					`,
-				offset: 0,
-				shouldFlip: false,
-				children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.ListBox, {
-					css: (value || options.length || loading) && require_styles.listboxStyles(theme),
-					autoFocus: "first",
-					renderEmptyState: () => value && !loading && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
-						css: require_styles.listboxInfoStyles(theme),
-						children: "No results"
-					}),
-					children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Collection, {
-						items: options,
-						children: (item) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.ListBoxItem, {
-							css: require_styles.listboxItemStyles(theme),
-							value: item,
-							onHoverChange: (isHovering) => {
-								setHoveredItemId((current) => {
-									if (isHovering) return item.id;
-									return current === item.id ? void 0 : current;
-								});
-							},
-							children: item.name
-						}, item.id)
-					}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.ListBoxLoadMoreItem, {
-						css: require_styles.listboxInfoStyles(theme),
-						isLoading: loading,
-						children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
-							"aria-label": "Loading",
-							children: loadingIcon ?? "Loading..."
-						})
-					})]
-				})
-			})]
+					offset: 0,
+					shouldFlip: false,
+					children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.ListBox, {
+						css: (value || options.length || loading) && require_styles.listboxStyles(theme),
+						autoFocus: "first",
+						renderEmptyState: () => value && !loading && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+							css: require_styles.listboxInfoStyles(theme),
+							children: "No results"
+						}),
+						children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Collection, {
+							items: options,
+							children: (item) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.ListBoxItem, {
+								css: require_styles.listboxItemStyles(theme),
+								value: item,
+								onHoverChange: (isHovering) => {
+									setHoveredItemId((current) => {
+										if (isHovering) return item.id;
+										return current === item.id ? void 0 : current;
+									});
+								},
+								children: item.name
+							}, item.id)
+						}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.ListBoxLoadMoreItem, {
+							css: require_styles.listboxInfoStyles(theme),
+							isLoading: loading,
+							children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
+								"aria-label": "Loading",
+								children: loadingIcon ?? "Loading..."
+							})
+						})]
+					})
+				}),
+				iconContent
+			]
 		})
 	});
 }

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

@@ -1,7 +1,8 @@
 import { DeepPartial } from "../../util/types.cjs";
+import { IconProps } from "../Icon/types.cjs";
 import { ComponentAutocomplete } from "../../styleD/build/typescript/component/autocomplete.cjs";
 import { SerializedStyles } from "@emotion/react";
-import { ReactElement } from "react";
+import { ReactElement, ReactNode } from "react";
 
 //#region src/components/TagPicker/Autocomplete.d.ts
 type AutocompleteOption = {
@@ -33,6 +34,13 @@ interface AutocompleteProps<T extends AutocompleteOption = AutocompleteOption> {
   theme?: DeepPartial<ComponentAutocomplete>;
   /** `cssOverrides` - Escape hatch for styling that doesn't fall into the theme */
   cssOverrides?: SerializedStyles;
+  /** An icon to render to the right of the input */
+  icon?: ReactNode;
+  /**
+   * Alternative to using the `icon` prop for rendering a Material Symbol icons on the right of the input
+   * you can use the `symbol` prop to specify the icon by its symbol name.
+   */
+  symbol?: IconProps['symbol'];
 }
 /**
  * ## Autocomplete
@@ -130,7 +138,9 @@ declare function Autocomplete<T extends AutocompleteOption = AutocompleteOption>
   loadingIcon,
   theme,
   cssOverrides,
-  addFirstOnEnter
+  addFirstOnEnter,
+  symbol,
+  icon
 }: AutocompleteProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { Autocomplete };

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

@@ -1,6 +1,7 @@
 import { DeepPartial } from "../../util/types.js";
+import { IconProps } from "../Icon/types.js";
 import { ComponentAutocomplete } from "../../styleD/build/typescript/component/autocomplete.js";
-import { ReactElement } from "react";
+import { ReactElement, ReactNode } from "react";
 import { SerializedStyles } from "@emotion/react";
 
 //#region src/components/TagPicker/Autocomplete.d.ts
@@ -33,6 +34,13 @@ interface AutocompleteProps<T extends AutocompleteOption = AutocompleteOption> {
   theme?: DeepPartial<ComponentAutocomplete>;
   /** `cssOverrides` - Escape hatch for styling that doesn't fall into the theme */
   cssOverrides?: SerializedStyles;
+  /** An icon to render to the right of the input */
+  icon?: ReactNode;
+  /**
+   * Alternative to using the `icon` prop for rendering a Material Symbol icons on the right of the input
+   * you can use the `symbol` prop to specify the icon by its symbol name.
+   */
+  symbol?: IconProps['symbol'];
 }
 /**
  * ## Autocomplete
@@ -130,7 +138,9 @@ declare function Autocomplete<T extends AutocompleteOption = AutocompleteOption>
   loadingIcon,
   theme,
   cssOverrides,
-  addFirstOnEnter
+  addFirstOnEnter,
+  symbol,
+  icon
 }: AutocompleteProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { Autocomplete };

package/dist/components/TagPicker/Autocomplete.js

@@ -1,7 +1,8 @@
-import { autocompleteInputStyles, listboxInfoStyles, listboxItemStyles, listboxStyles } from "./styles.js";
+import { Icon } from "../Icon/Icon.js";
+import { autocompleteInputStyles, iconStyles, listboxInfoStyles, listboxItemStyles, listboxStyles } from "./styles.js";
 import { useState } from "react";
 import { css } from "@emotion/react";
-import { jsx as jsx$1, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { Collection, ComboBox, Input, ListBox, ListBoxItem, ListBoxLoadMoreItem, Popover } from "react-aria-components";
 //#region src/components/TagPicker/Autocomplete.tsx
 /**
@@ -87,11 +88,18 @@ import { Collection, ComboBox, Input, ListBox, ListBoxItem, ListBoxLoadMoreItem,
 *
 * This is currently still in testing phase, so a production implementation is not yet available.
 */
-function Autocomplete({ addSelection, loading, onTextInputChange, options, label, placeholder, disabled, value, "data-testid": dataTestId, loadingIcon, theme, cssOverrides, addFirstOnEnter }) {
+function Autocomplete({ addSelection, loading, onTextInputChange, options, label, placeholder, disabled, value, "data-testid": dataTestId, loadingIcon, theme, cssOverrides, addFirstOnEnter, symbol, icon }) {
 	const [hoveredItemId, setHoveredItemId] = useState();
 	const [upOrDownKeyPressed, setUpOrDownKeyPressed] = useState(false);
 	const listBoxIsInUse = upOrDownKeyPressed || !!hoveredItemId;
-	return /* @__PURE__ */ jsx$1("div", {
+	const iconContent = icon ? /* @__PURE__ */ jsx(Icon, {
+		css: iconStyles(theme),
+		children: icon
+	}) : symbol ? /* @__PURE__ */ jsx(Icon, {
+		symbol,
+		css: iconStyles(theme)
+	}) : null;
+	return /* @__PURE__ */ jsx("div", {
 		css: [css`
 					position: relative;
 				`, cssOverrides],
@@ -114,55 +122,59 @@ function Autocomplete({ addSelection, loading, onTextInputChange, options, label
 			allowsCustomValue: true,
 			menuTrigger: "focus",
 			shouldFocusWrap: true,
-			children: [/* @__PURE__ */ jsx$1(Input, {
-				css: autocompleteInputStyles(theme),
-				placeholder,
-				disabled,
-				"data-testid": dataTestId,
-				onKeyDown: addFirstOnEnter ? (event) => {
-					if (event.key === "ArrowDown" || event.key === "ArrowUp") setUpOrDownKeyPressed(true);
-					if (event.key === "Enter") {
-						const [firstOption] = options;
-						if (firstOption && !listBoxIsInUse) addSelection(firstOption);
-					}
-				} : void 0
-			}), /* @__PURE__ */ jsx$1(Popover, {
-				placement: "bottom",
-				css: css`
+			children: [
+				/* @__PURE__ */ jsx(Input, {
+					css: autocompleteInputStyles(!!iconContent, theme),
+					placeholder,
+					disabled,
+					"data-testid": dataTestId,
+					onKeyDown: addFirstOnEnter ? (event) => {
+						if (event.key === "ArrowDown" || event.key === "ArrowUp") setUpOrDownKeyPressed(true);
+						if (event.key === "Enter") {
+							const [firstOption] = options;
+							if (firstOption && !listBoxIsInUse) addSelection(firstOption);
+						}
+					} : void 0
+				}),
+				/* @__PURE__ */ jsx(Popover, {
+					placement: "bottom",
+					css: css`
 						width: var(--trigger-width);
 					`,
-				offset: 0,
-				shouldFlip: false,
-				children: /* @__PURE__ */ jsxs(ListBox, {
-					css: (value || options.length || loading) && listboxStyles(theme),
-					autoFocus: "first",
-					renderEmptyState: () => value && !loading && /* @__PURE__ */ jsx$1("div", {
-						css: listboxInfoStyles(theme),
-						children: "No results"
-					}),
-					children: [/* @__PURE__ */ jsx$1(Collection, {
-						items: options,
-						children: (item) => /* @__PURE__ */ jsx$1(ListBoxItem, {
-							css: listboxItemStyles(theme),
-							value: item,
-							onHoverChange: (isHovering) => {
-								setHoveredItemId((current) => {
-									if (isHovering) return item.id;
-									return current === item.id ? void 0 : current;
-								});
-							},
-							children: item.name
-						}, item.id)
-					}), /* @__PURE__ */ jsx$1(ListBoxLoadMoreItem, {
-						css: listboxInfoStyles(theme),
-						isLoading: loading,
-						children: /* @__PURE__ */ jsx$1("span", {
-							"aria-label": "Loading",
-							children: loadingIcon ?? "Loading..."
-						})
-					})]
-				})
-			})]
+					offset: 0,
+					shouldFlip: false,
+					children: /* @__PURE__ */ jsxs(ListBox, {
+						css: (value || options.length || loading) && listboxStyles(theme),
+						autoFocus: "first",
+						renderEmptyState: () => value && !loading && /* @__PURE__ */ jsx("div", {
+							css: listboxInfoStyles(theme),
+							children: "No results"
+						}),
+						children: [/* @__PURE__ */ jsx(Collection, {
+							items: options,
+							children: (item) => /* @__PURE__ */ jsx(ListBoxItem, {
+								css: listboxItemStyles(theme),
+								value: item,
+								onHoverChange: (isHovering) => {
+									setHoveredItemId((current) => {
+										if (isHovering) return item.id;
+										return current === item.id ? void 0 : current;
+									});
+								},
+								children: item.name
+							}, item.id)
+						}), /* @__PURE__ */ jsx(ListBoxLoadMoreItem, {
+							css: listboxInfoStyles(theme),
+							isLoading: loading,
+							children: /* @__PURE__ */ jsx("span", {
+								"aria-label": "Loading",
+								children: loadingIcon ?? "Loading..."
+							})
+						})]
+					})
+				}),
+				iconContent
+			]
 		})
 	});
 }

package/dist/components/TagPicker/TagPicker.cjs

@@ -0,0 +1,105 @@
+const require_Button = require("../Button/Button.cjs");
+const require_InlineMessage = require("../InlineMessage/InlineMessage.cjs");
+const require_styles = require("./styles.cjs");
+const require_TagTable = require("./TagTable.cjs");
+const require_TagSearchWithFilters = require("./TagSearchWithFilters.cjs");
+let _emotion_react = require("@emotion/react");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+//#region src/components/TagPicker/TagPicker.tsx
+/**
+* ## TagPicker
+*
+* *Status: Testing*
+*
+* **Peer dependencies:**
+* - `react-aria-components`
+*
+* See the `peerDependencies` section of the `package.json` for compatible versions to install.
+*
+*
+* #### Props
+*
+* See {@link TagPickerProps} 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 TagPicker({ addTag, loading, offline = false, onReorder, onSearch, options, proposedTags, readOnly = false, removeTag, retryConnection, tags, canRemove, filterRows, filterOptions, offlineBackupTags, highlightLeadingTag, searchPlaceholder = "Search for tags", searchLabel = "Search for tags", removeIcon, searchIcon, showTagType, showTagSectionName, theme, tagTableTheme, proposedTagTableTheme, autoCompleteTheme, selectTheme, cssOverrides }) {
+	const selectedTagIds = tags.map(({ id }) => id);
+	const proposedTagsWithoutSelected = proposedTags.filter(({ id }) => !selectedTagIds.includes(id));
+	const backupTagsWithoutSelected = offlineBackupTags?.filter(({ id }) => !selectedTagIds.includes(id)) ?? [];
+	const showBackupListWhenOffline = !readOnly && offlineBackupTags && backupTagsWithoutSelected.length > 0;
+	const optionsWithoutSelected = options.filter(({ id }) => !selectedTagIds.includes(id));
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+		css: [require_styles.tagPickerStyles(theme), cssOverrides],
+		children: [
+			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_TagSearchWithFilters.TagSearchWithFilters, {
+				icon: searchIcon,
+				onSearch,
+				addSelection: addTag,
+				options: optionsWithoutSelected,
+				loading,
+				filterOptions,
+				disabled: readOnly || offline,
+				label: searchLabel,
+				placeholder: searchPlaceholder,
+				"data-testid": "tag-picker-search-input",
+				symbol: "search",
+				theme,
+				autoCompleteTheme,
+				selectTheme
+			}),
+			offline && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+				css: require_styles.offlineSectionStyles(theme),
+				children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(require_InlineMessage.InlineMessage, {
+					level: "error",
+					children: [
+						"Unfortunately, we can't fetch tag information.",
+						" ",
+						showBackupListWhenOffline && "Choose from the following tags",
+						showBackupListWhenOffline && retryConnection && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(_emotion_react_jsx_runtime.Fragment, { children: " or " }),
+						retryConnection && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Button.Button, {
+							size: "xs",
+							variant: "secondary",
+							onClick: () => retryConnection(),
+							children: "Retry"
+						})
+					]
+				}), showBackupListWhenOffline && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(_emotion_react_jsx_runtime.Fragment, { children: backupTagsWithoutSelected.map((tag, index) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Button.Button, {
+					onClick: () => addTag(tag),
+					variant: "tertiary",
+					size: "sm",
+					cssOverrides: (0, _emotion_react.css)({ justifyContent: theme?.offlineSection?.justifyContent ?? "flex-start" }),
+					"aria-label": `Add ${tag.name}`,
+					children: tag.name
+				}, index)) })]
+			}),
+			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_TagTable.TagTable, {
+				rows: tags,
+				canRemove,
+				removeAction: readOnly ? void 0 : removeTag,
+				filterRows,
+				onReorder: readOnly ? void 0 : onReorder,
+				"data-testid": "selected-tags-table",
+				highlightFirstRow: highlightLeadingTag,
+				showTagType,
+				showTagSectionName,
+				removeIcon,
+				theme: tagTableTheme
+			}),
+			!readOnly && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_TagTable.TagTable, {
+				heading: "Proposed Tags",
+				theme: proposedTagTableTheme,
+				filterRows,
+				showTagType,
+				showTagSectionName,
+				rows: proposedTagsWithoutSelected,
+				addAction: addTag,
+				"data-testid": "proposed-tags-table"
+			})
+		]
+	});
+}
+//#endregion
+exports.TagPicker = TagPicker;