@guardian/stand 0.0.50 → 0.0.52

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

@@ -1,6 +1,6 @@
 import { DeepPartial } from "../../util/types.js";
-import { TagRow } from "./types.js";
 import { ComponentTagTable } from "../../styleD/build/typescript/component/tagTable.js";
+import { TagRow } from "./types.js";
 import { ReactElement } from "react";
 import { SerializedStyles } from "@emotion/react";
 
@@ -12,7 +12,7 @@ interface TagTableProps<R extends Row> {
   /** `rows` - The collection of rows */
   rows: R[];
   /** `filterRows` - Function to filter rows from `rows` prop from appearing in the table */
-  filterRows: (row: R) => boolean;
+  filterRows?: (row: R) => boolean;
   /** `heading` - The table heading */
   heading?: string;
   /** `showTagType` - Whether to show tags' type in table */
@@ -21,6 +21,8 @@ interface TagTableProps<R extends Row> {
   showTagSectionName?: boolean;
   /** `removeAction` - Function called when the Remove button is pressed on a row */
   removeAction?: (tag: R) => void;
+  /** `highlightFirstRow` - Whether to highlight the first row ("leading tag") */
+  highlightFirstRow?: boolean;
   /** `addAction` - Function called when the Add button is pressed on a row */
   addAction?: (tag: R) => void;
   /** `onReorder` - Function called when a re-ordering of rows through drag and drop is performed */
@@ -53,37 +55,13 @@ interface TagTableProps<R extends Row> {
  *
  * ## Usage
  *
- * *Example with TagAutocomplete and TagTable combined:*
+ * *Example with TagTable:*
  *
  * ```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;
- *     }
+ * import { TagTable } from '@guardian/stand';
  *
- *     // Simple filtering against exampleTags
- *     const filteredItems = exampleTags.filter((t) =>
- *       t.internalName.toLowerCase().includes(inputText.toLowerCase()),
- *     );
- *     return setOptions(filteredItems);
- *   };
-
+ *  // TagManagerObjectData is an internal type representing a Tag
+ * const Component = ({selectedTags}:{selectedTags:TagManagerObjectData[]}) => {
  *   return (
  *     <>
  *       <div
@@ -91,25 +69,10 @@ interface TagTableProps<R extends Row> {
  *             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} />
+ * 		<div>
+ * 			there are {selectedTags.length} tags.
+ * 		</div>
  *     </>
  *   );
  * };
@@ -129,6 +92,7 @@ declare function TagTable<R extends Row>({
   heading,
   showTagType,
   showTagSectionName,
+  highlightFirstRow,
   removeAction: removeTag,
   addAction: addTag,
   onReorder,

package/dist/components/TagPicker/TagTable.js

@@ -1,12 +1,12 @@
 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 { 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
 const rowToTag = (row) => "tag" in row ? row.tag : row;
 const TypeBadge = (type, theme) => {
-	return /* @__PURE__ */ jsx$1("span", {
+	return /* @__PURE__ */ jsx("span", {
 		css: tagTableTypeBadgeStyles(theme),
 		children: type
 	});
@@ -28,37 +28,13 @@ const defaultCanRemove = () => true;
 *
 * ## Usage
 *
-* *Example with TagAutocomplete and TagTable combined:*
+* *Example with TagTable:*
 *
 * ```tsx
-* import { TagAutocomplete, TagTable } from '@guardian/stand';
+* import { 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);
-*   };
-
+*  // TagManagerObjectData is an internal type representing a Tag
+* const Component = ({selectedTags}:{selectedTags:TagManagerObjectData[]}) => {
 *   return (
 *     <>
 *       <div
@@ -66,25 +42,10 @@ const defaultCanRemove = () => true;
 *             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} />
+* 		<div>
+* 			there are {selectedTags.length} tags.
+* 		</div>
 *     </>
 *   );
 * };
@@ -98,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, removeAction: removeTag, addAction: addTag, onReorder, canRemove = defaultCanRemove, "data-testid": dataTestId, removeIcon, gripIcon, theme, cssOverrides }) {
+function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName, highlightFirstRow = false, 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);
@@ -106,7 +67,7 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
 	useEffect(() => {
 		setLocalRows([...rows]);
 	}, [rows]);
-	const filtered = localRows.filter(filterRows);
+	const filtered = filterRows ? localRows.filter(filterRows) : [...localRows];
 	const { dragAndDropHooks } = useDragAndDrop({
 		getItems: (_keys, items) => {
 			return items.map((item) => ({ "text/plain": rowToTag(item).id.toString() }));
@@ -129,7 +90,7 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
 	if (filtered.length === 0) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		css: cssOverrides,
-		children: [heading && /* @__PURE__ */ jsx$1("div", {
+		children: [heading && /* @__PURE__ */ jsx("div", {
 			css: tagTableHeadingStyles(theme),
 			children: heading
 		}), /* @__PURE__ */ jsxs(Table, {
@@ -140,60 +101,60 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
 			children: [/* @__PURE__ */ jsxs(TableHeader, {
 				hidden: true,
 				children: [
-					onReorder && /* @__PURE__ */ jsx$1(Column, {}),
-					showTagType && /* @__PURE__ */ jsx$1(Column, { children: "Type" }),
-					/* @__PURE__ */ jsx$1(Column, {
+					onReorder && /* @__PURE__ */ jsx(Column, {}),
+					showTagType && /* @__PURE__ */ jsx(Column, { children: "Type" }),
+					/* @__PURE__ */ jsx(Column, {
 						isRowHeader: true,
 						children: "Name"
 					}),
-					showTagSectionName && /* @__PURE__ */ jsx$1(Column, { children: "Section" }),
-					removeTag && /* @__PURE__ */ jsx$1(Column, {}),
-					addTag && /* @__PURE__ */ jsx$1(Column, {})
+					showTagSectionName && /* @__PURE__ */ jsx(Column, { children: "Section" }),
+					removeTag && /* @__PURE__ */ jsx(Column, {}),
+					addTag && /* @__PURE__ */ jsx(Column, {})
 				]
-			}), /* @__PURE__ */ jsx$1(TableBody, {
+			}), /* @__PURE__ */ jsx(TableBody, {
 				items: filtered,
 				dependencies: [localRows],
 				children: (item) => /* @__PURE__ */ jsxs(Row, {
 					id: rowToTag(item).id,
-					css: tagTableRowStyles(canDrag, theme),
+					css: tagTableRowStyles(canDrag, highlightFirstRow, theme),
 					textValue: rowToTag(item).name,
 					children: [
-						onReorder && /* @__PURE__ */ jsx$1(Cell, {
+						onReorder && /* @__PURE__ */ jsx(Cell, {
 							css: [css`
 											width: 1%;
 										`],
-							children: /* @__PURE__ */ jsx$1(Button, {
+							children: /* @__PURE__ */ jsx(Button, {
 								slot: "drag",
 								css: tagTableDragButtonStyles,
 								children: gripIcon
 							})
 						}),
-						showTagType && /* @__PURE__ */ jsx$1(Cell, {
+						showTagType && /* @__PURE__ */ jsx(Cell, {
 							css: [tagTableCellStyles(theme), css`
 											position: relative;
 											width: 15%;
 										`],
 							children: TypeBadge(rowToTag(item).type)
 						}),
-						/* @__PURE__ */ jsx$1(Cell, {
+						/* @__PURE__ */ jsx(Cell, {
 							css: [tagTableCellStyles(theme), css`
 										width: 50%;
 									`],
 							"data-testid": `tags-table-item-${filtered.indexOf(item)}-name`,
 							children: rowToTag(item).name
 						}),
-						showTagSectionName && /* @__PURE__ */ jsx$1(Cell, {
+						showTagSectionName && /* @__PURE__ */ jsx(Cell, {
 							css: [tagTableCellStyles(theme), css`
 											width: 20%;
 										`],
 							children: rowToTag(item).sectionName
 						}),
-						removeTag && /* @__PURE__ */ jsx$1(Cell, {
+						removeTag && /* @__PURE__ */ jsx(Cell, {
 							css: [tagTableCellStyles(theme), css`
 											text-align: center;
 											width: 10%;
 										`],
-							children: canRemove(item) && /* @__PURE__ */ jsx$1(Button, {
+							children: canRemove(item) && /* @__PURE__ */ jsx(Button, {
 								css: tagTableRemoveButtonStyles,
 								onPress: () => {
 									removeTag(item);
@@ -202,12 +163,12 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
 								children: removeIcon ?? "Remove"
 							})
 						}),
-						addTag && /* @__PURE__ */ jsx$1(Cell, {
+						addTag && /* @__PURE__ */ jsx(Cell, {
 							css: [tagTableCellStyles(theme), css`
 											text-align: center;
 											width: 10%;
 										`],
-							children: /* @__PURE__ */ jsx$1(Button, {
+							children: /* @__PURE__ */ jsx(Button, {
 								css: tagTableAddButtonStyles(theme),
 								onPress: () => {
 									addTag(item);

package/dist/components/TagPicker/styles.cjs

@@ -1,9 +1,10 @@
 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");
+const require_tagPicker = require("../../styleD/build/typescript/component/tagPicker.cjs");
 let _emotion_react = require("@emotion/react");
 //#region src/components/TagPicker/styles.ts
-const autocompleteInputStyles = (partialTheme = {}) => {
+const autocompleteInputStyles = (hasIcon, partialTheme = {}) => {
 	const theme = require_mergeDeep.mergeDeep(require_autocomplete.componentAutocomplete, partialTheme);
 	return _emotion_react.css`
 		width: 100%;
@@ -14,6 +15,10 @@ const autocompleteInputStyles = (partialTheme = {}) => {
 		border-color: ${theme.input.borderColor};
 		border-width: ${theme.input.borderWidth};
 		border-style: ${theme.input.borderStyle};
+		${hasIcon && `
+		padding-right: calc(${theme.icon.paddingX} + ${theme.icon.size} + ${theme.icon.paddingX});
+		min-height: calc(${theme.icon.size});
+		`}
 
 		&[data-disabled] {
 			background-color: ${theme.input.disabledBackgroundColor};
@@ -67,6 +72,7 @@ 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};
@@ -79,7 +85,7 @@ const tagTableCellStyles = (partialTheme = {}) => {
 		}
 	`;
 };
-const tagTableRowStyles = (canDrag, partialTheme = {}) => {
+const tagTableRowStyles = (canDrag, highlightFirstRow, partialTheme = {}) => {
 	const theme = require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme);
 	return _emotion_react.css`
 		background-color: ${theme.row.backgroundColor};
@@ -97,7 +103,7 @@ const tagTableRowStyles = (canDrag, partialTheme = {}) => {
 				opacity: 1;
 			}
 		}
-		${canDrag && `:first-of-type {
+		${highlightFirstRow && `:first-of-type {
                     background-color: ${theme.row.firstRowBackgroundColor};
 
                     :hover {
@@ -184,11 +190,66 @@ const tagTableTypeBadgeStyles = (partialTheme = {}) => {
 		font-weight: ${theme.typeBadge.fontWeight};
 	`;
 };
+const iconStyles = (partialTheme = {}) => {
+	const theme = require_mergeDeep.mergeDeep(require_autocomplete.componentAutocomplete, partialTheme);
+	return _emotion_react.css`
+		pointer-events: none;
+		position: absolute;
+		right: ${theme.icon.paddingX};
+		color: ${theme.icon.color};
+		top: 50%;
+		transform: translateY(-50%);
+		font-size: ${theme.icon.size};
+	`;
+};
+const tagPickerStyles = (partialTheme = {}) => {
+	const theme = require_mergeDeep.mergeDeep(require_tagPicker.componentTagPicker, partialTheme);
+	return _emotion_react.css`
+		display: flex;
+		flex-direction: column;
+		width: ${theme.shared.width};
+		gap: ${theme.shared.gap};
+	`;
+};
+const offlineSectionStyles = (partialTheme = {}) => {
+	return _emotion_react.css`
+		display: flex;
+		flex-direction: column;
+		gap: ${require_mergeDeep.mergeDeep(require_tagPicker.componentTagPicker, partialTheme).offlineSection.gap};
+	`;
+};
+const tagSearchWithFilterStyles = (partialTheme = {}) => {
+	return _emotion_react.css`
+		display: flex;
+		gap: ${require_mergeDeep.mergeDeep(require_tagPicker.componentTagPicker, partialTheme).shared.gap};
+	`;
+};
+const filterSelectCssOverrides = (partialTheme = {}) => {
+	return _emotion_react.css`
+		flex-basis: ${require_mergeDeep.mergeDeep(require_tagPicker.componentTagPicker, partialTheme).select.flexBasis};
+		display: flex;
+		button {
+			height: 100%;
+		}
+	`;
+};
+const modifyFilterSelectTheme = (selectTheme) => {
+	return require_mergeDeep.mergeDeep({ shared: {
+		width: void 0,
+		button: { marginTop: "0" }
+	} }, selectTheme);
+};
 //#endregion
 exports.autocompleteInputStyles = autocompleteInputStyles;
+exports.filterSelectCssOverrides = filterSelectCssOverrides;
+exports.iconStyles = iconStyles;
 exports.listboxInfoStyles = listboxInfoStyles;
 exports.listboxItemStyles = listboxItemStyles;
 exports.listboxStyles = listboxStyles;
+exports.modifyFilterSelectTheme = modifyFilterSelectTheme;
+exports.offlineSectionStyles = offlineSectionStyles;
+exports.tagPickerStyles = tagPickerStyles;
+exports.tagSearchWithFilterStyles = tagSearchWithFilterStyles;
 exports.tagTableAddButtonStyles = tagTableAddButtonStyles;
 exports.tagTableCellStyles = tagTableCellStyles;
 exports.tagTableDragButtonStyles = tagTableDragButtonStyles;

package/dist/components/TagPicker/styles.js

@@ -1,9 +1,10 @@
 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
-const autocompleteInputStyles = (partialTheme = {}) => {
+const autocompleteInputStyles = (hasIcon, partialTheme = {}) => {
 	const theme = mergeDeep(componentAutocomplete, partialTheme);
 	return css`
 		width: 100%;
@@ -14,6 +15,10 @@ const autocompleteInputStyles = (partialTheme = {}) => {
 		border-color: ${theme.input.borderColor};
 		border-width: ${theme.input.borderWidth};
 		border-style: ${theme.input.borderStyle};
+		${hasIcon && `
+		padding-right: calc(${theme.icon.paddingX} + ${theme.icon.size} + ${theme.icon.paddingX});
+		min-height: calc(${theme.icon.size});
+		`}
 
 		&[data-disabled] {
 			background-color: ${theme.input.disabledBackgroundColor};
@@ -67,6 +72,7 @@ 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};
@@ -79,7 +85,7 @@ const tagTableCellStyles = (partialTheme = {}) => {
 		}
 	`;
 };
-const tagTableRowStyles = (canDrag, partialTheme = {}) => {
+const tagTableRowStyles = (canDrag, highlightFirstRow, partialTheme = {}) => {
 	const theme = mergeDeep(componentTagTable, partialTheme);
 	return css`
 		background-color: ${theme.row.backgroundColor};
@@ -97,7 +103,7 @@ const tagTableRowStyles = (canDrag, partialTheme = {}) => {
 				opacity: 1;
 			}
 		}
-		${canDrag && `:first-of-type {
+		${highlightFirstRow && `:first-of-type {
                     background-color: ${theme.row.firstRowBackgroundColor};
 
                     :hover {
@@ -184,5 +190,54 @@ const tagTableTypeBadgeStyles = (partialTheme = {}) => {
 		font-weight: ${theme.typeBadge.fontWeight};
 	`;
 };
+const iconStyles = (partialTheme = {}) => {
+	const theme = mergeDeep(componentAutocomplete, partialTheme);
+	return css`
+		pointer-events: none;
+		position: absolute;
+		right: ${theme.icon.paddingX};
+		color: ${theme.icon.color};
+		top: 50%;
+		transform: translateY(-50%);
+		font-size: ${theme.icon.size};
+	`;
+};
+const tagPickerStyles = (partialTheme = {}) => {
+	const theme = mergeDeep(componentTagPicker, partialTheme);
+	return css`
+		display: flex;
+		flex-direction: column;
+		width: ${theme.shared.width};
+		gap: ${theme.shared.gap};
+	`;
+};
+const offlineSectionStyles = (partialTheme = {}) => {
+	return css`
+		display: flex;
+		flex-direction: column;
+		gap: ${mergeDeep(componentTagPicker, partialTheme).offlineSection.gap};
+	`;
+};
+const tagSearchWithFilterStyles = (partialTheme = {}) => {
+	return css`
+		display: flex;
+		gap: ${mergeDeep(componentTagPicker, partialTheme).shared.gap};
+	`;
+};
+const filterSelectCssOverrides = (partialTheme = {}) => {
+	return css`
+		flex-basis: ${mergeDeep(componentTagPicker, partialTheme).select.flexBasis};
+		display: flex;
+		button {
+			height: 100%;
+		}
+	`;
+};
+const modifyFilterSelectTheme = (selectTheme) => {
+	return mergeDeep({ shared: {
+		width: void 0,
+		button: { marginTop: "0" }
+	} }, selectTheme);
+};
 //#endregion
-export { autocompleteInputStyles, listboxInfoStyles, listboxItemStyles, listboxStyles, tagTableAddButtonStyles, tagTableCellStyles, tagTableDragButtonStyles, tagTableHeadingStyles, tagTableRemoveButtonStyles, tagTableRowStyles, tagTableStyles, tagTableTypeBadgeStyles };
+export { autocompleteInputStyles, filterSelectCssOverrides, iconStyles, listboxInfoStyles, listboxItemStyles, listboxStyles, modifyFilterSelectTheme, offlineSectionStyles, tagPickerStyles, tagSearchWithFilterStyles, tagTableAddButtonStyles, tagTableCellStyles, tagTableDragButtonStyles, tagTableHeadingStyles, tagTableRemoveButtonStyles, tagTableRowStyles, tagTableStyles, tagTableTypeBadgeStyles };

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

@@ -7,5 +7,9 @@ type TagRow = Tag & {
   type: string;
   sectionName: string;
 };
+interface FilterOption {
+  label: string;
+  filter: string;
+}
 //#endregion
-export { Tag, TagRow };
+export { FilterOption, TagRow };

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

@@ -7,5 +7,9 @@ type TagRow = Tag & {
   type: string;
   sectionName: string;
 };
+interface FilterOption {
+  label: string;
+  filter: string;
+}
 //#endregion
-export { Tag, TagRow };
+export { FilterOption, TagRow };

package/dist/components/Typography/Typography.cjs

@@ -1,12 +1,15 @@
 const require_mergeDeep = require("../../util/mergeDeep.cjs");
 const require_styles = require("./styles.cjs");
-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/Typography/Typography.tsx
 const Typography = ({ element = "span", variant = "bodyMd", children, cssOverrides, theme = {}, ...props }) => {
-	return (0, _emotion_react.jsx)(element, {
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Text, {
+		elementType: element,
 		css: [require_styles.typographyStyles(require_mergeDeep.mergeDeep(require_styles.defaultTypographyTheme, theme), { variant }), cssOverrides],
-		...props
-	}, children);
+		...props,
+		children
+	});
 };
 //#endregion
 exports.Typography = Typography;

package/dist/components/Typography/Typography.d.cts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TypographyProps } from "./types.cjs";
 
 //#region src/components/Typography/Typography.d.ts
@@ -9,9 +8,6 @@ declare const Typography: ({
   cssOverrides,
   theme,
   ...props
-}: TypographyProps) => import("react").DetailedReactHTMLElement<{
-  className?: string | undefined;
-  css: (import("@emotion/react").SerializedStyles | import("@emotion/react").SerializedStyles[] | undefined)[];
-}, HTMLElement>;
+}: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { Typography };

package/dist/components/Typography/Typography.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TypographyProps } from "./types.js";
 
 //#region src/components/Typography/Typography.d.ts
@@ -9,9 +8,6 @@ declare const Typography: ({
   cssOverrides,
   theme,
   ...props
-}: TypographyProps) => import("react").DetailedReactHTMLElement<{
-  className?: string | undefined;
-  css: (import("@emotion/react").SerializedStyles | import("@emotion/react").SerializedStyles[] | undefined)[];
-}, HTMLElement>;
+}: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { Typography };

package/dist/components/Typography/Typography.js

@@ -1,12 +1,15 @@
 import { mergeDeep } from "../../util/mergeDeep.js";
 import { defaultTypographyTheme, typographyStyles } from "./styles.js";
-import { jsx } from "@emotion/react";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { Text } from "react-aria-components";
 //#region src/components/Typography/Typography.tsx
 const Typography = ({ element = "span", variant = "bodyMd", children, cssOverrides, theme = {}, ...props }) => {
-	return jsx(element, {
+	return /* @__PURE__ */ jsx(Text, {
+		elementType: element,
 		css: [typographyStyles(mergeDeep(defaultTypographyTheme, theme), { variant }), cssOverrides],
-		...props
-	}, children);
+		...props,
+		children
+	});
 };
 //#endregion
 export { Typography };

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

@@ -1,10 +1,11 @@
-import { DefaultPropsWithChildren } from "../../util/types.cjs";
+import { DefaultProps } from "../../util/types.cjs";
 import { SemanticTypography } from "../../styleD/build/typescript/semantic/typography.cjs";
 import { TypographyTheme } from "./styles.cjs";
+import { TextProps } from "react-aria-components";
 
 //#region src/components/Typography/types.d.ts
 type TypographyVariant = keyof SemanticTypography;
-interface TypographyProps extends DefaultPropsWithChildren<TypographyTheme> {
+interface TypographyProps extends DefaultProps<TypographyTheme, TextProps['className']>, Omit<TextProps, 'elementType' | 'className'> {
   /**
    * HTML element to render with font applied to
    */

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

@@ -1,10 +1,11 @@
-import { DefaultPropsWithChildren } from "../../util/types.js";
+import { DefaultProps } from "../../util/types.js";
 import { SemanticTypography } from "../../styleD/build/typescript/semantic/typography.js";
 import { TypographyTheme } from "./styles.js";
+import { TextProps } from "react-aria-components";
 
 //#region src/components/Typography/types.d.ts
 type TypographyVariant = keyof SemanticTypography;
-interface TypographyProps extends DefaultPropsWithChildren<TypographyTheme> {
+interface TypographyProps extends DefaultProps<TypographyTheme, TextProps['className']>, Omit<TextProps, 'elementType' | 'className'> {
   /**
    * HTML element to render with font applied to
    */