@guardian/stand 0.0.53 → 0.0.55

package/dist/components/TagTable/styles.js

@@ -0,0 +1,160 @@
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { componentTagTable } from "../../styleD/build/typescript/component/tagTable.js";
+import { css } from "@emotion/react";
+//#region src/components/TagTable/styles.ts
+const tagTableHeaderStyles = (partialTheme = {}) => {
+	const theme = mergeDeep(componentTagTable, partialTheme);
+	return 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 css`
+		display: flex;
+		flex-direction: column;
+		gap: ${mergeDeep(componentTagTable, partialTheme).header.gap};
+	`;
+};
+const tagTableHeadingStyles = (partialTheme = {}) => {
+	const theme = mergeDeep(componentTagTable, partialTheme);
+	return css`
+		font-weight: ${theme.heading.fontWeight};
+		font-size: ${theme.heading.fontSize};
+	`;
+};
+const tagTableSubHeadingStyles = (partialTheme = {}) => {
+	const theme = mergeDeep(componentTagTable, partialTheme);
+	return css`
+		font-weight: ${theme.subHeading.fontWeight};
+		font-size: ${theme.subHeading.fontSize};
+	`;
+};
+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 = (highlightFirstRow, partialTheme = {}) => {
+	const theme = mergeDeep(componentTagTable, partialTheme);
+	return 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 = 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: 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};
+	`;
+};
+//#endregion
+export { tagTableAddButtonStyles, tagTableCellStyles, tagTableDragButtonStyles, tagTableHeaderStyles, tagTableHeaderTextStyles, tagTableHeadingStyles, tagTableRemoveButtonStyles, tagTableRowStyles, tagTableStyles, tagTableSubHeadingStyles, tagTableTypeBadgeStyles };

package/dist/styleD/build/css/base/colors.css

@@ -47,7 +47,7 @@
 	--base-colors-cyan-500: #2e8bb8;
 	--base-colors-cyan-600: #5ca5c8;
 	--base-colors-cyan-700: #8abed7;
-	--base-colors-cyan-800: #b8d8e7;
+	--base-colors-cyan-800: #c5dfec;
 	--base-colors-cyan-900: #e6f1f6;
 	--base-colors-teal-50: #050e0f;
 	--base-colors-teal-100: #0e2729;

package/dist/styleD/build/css/component/autocomplete.css

@@ -5,17 +5,24 @@
 :root {
 	--component-autocomplete-input-color: #000000;
 	--component-autocomplete-input-background-color: #ffffff;
-	--component-autocomplete-input-disabled-background-color: #dcdcdc;
-	--component-autocomplete-input-border-width: 1px;
+	--component-autocomplete-input-border-width: 0.0625rem;
 	--component-autocomplete-input-border-style: solid;
-	--component-autocomplete-input-border-color: #8d8d8d;
-	--component-autocomplete-input-padding: 11px;
+	--component-autocomplete-input-border-color: #545454;
+	--component-autocomplete-input-padding: 0.75rem;
+	--component-autocomplete-input-border-radius: 0.25rem;
+	--component-autocomplete-input-hover-background-color: #f6f6f6;
+	--component-autocomplete-input-focused-outline: 0.125rem solid #0072a9;
+	--component-autocomplete-input-focused-outline-offset: 0.125rem;
+	--component-autocomplete-input-disabled-background-color: #ffffff;
+	--component-autocomplete-input-disabled-cursor: not-allowed;
+	--component-autocomplete-input-disabled-color: #999999;
+	--component-autocomplete-input-disabled-border: 0.0625rem solid #dcdcdc;
 	--component-autocomplete-icon-size: 20px;
 	--component-autocomplete-icon-padding-x: 4px;
 	--component-autocomplete-icon-color: #bababa;
-	--component-autocomplete-listbox-border-width: 1px;
+	--component-autocomplete-listbox-border-width: 0.0625rem;
 	--component-autocomplete-listbox-border-style: solid;
-	--component-autocomplete-listbox-border-color: #8d8d8d;
+	--component-autocomplete-listbox-border-color: #545454;
 	--component-autocomplete-listbox-padding-y: 8px;
 	--component-autocomplete-listbox-padding-x: 0px;
 	--component-autocomplete-listbox-background-color: #ffffff;

package/dist/styleD/build/css/component/avatar.css

@@ -19,7 +19,7 @@
 	--component-avatar-shared-color-red-hover-background: #eea198;
 	--component-avatar-shared-color-red-active-background: #e87c6f;
 	--component-avatar-shared-color-cyan-text: #00344e;
-	--component-avatar-shared-color-cyan-background: #b8d8e7;
+	--component-avatar-shared-color-cyan-background: #c5dfec;
 	--component-avatar-shared-color-cyan-border: unset;
 	--component-avatar-shared-color-cyan-hover-background: #8abed7;
 	--component-avatar-shared-color-cyan-active-background: #5ca5c8;

package/dist/styleD/build/css/component/datePicker.css

@@ -89,7 +89,7 @@
 	--component-date-picker-calendar-header-shared-button-aspect-ratio: 1;
 	--component-date-picker-calendar-header-shared-button-hovered-background-color: #f6f6f6;
 	--component-date-picker-calendar-header-shared-button-pressed-background-color: #ededed;
-	--component-date-picker-calendar-header-shared-button-selected-background-color: #b8d8e7;
+	--component-date-picker-calendar-header-shared-button-selected-background-color: #c5dfec;
 	--component-date-picker-calendar-header-shared-button-focus-visible-outline: 0.125rem
 		solid #0072a9;
 	--component-date-picker-calendar-header-shared-button-disabled-cursor: not-allowed;
@@ -112,7 +112,7 @@
 	--component-date-picker-calendar-cell-shared-outside-month-display: none;
 	--component-date-picker-calendar-cell-shared-hovered-background-color: #f6f6f6;
 	--component-date-picker-calendar-cell-shared-pressed-background-color: #ededed;
-	--component-date-picker-calendar-cell-shared-selected-background-color: #b8d8e7;
+	--component-date-picker-calendar-cell-shared-selected-background-color: #c5dfec;
 	--component-date-picker-calendar-cell-shared-focus-visible-outline: 0.125rem
 		solid #0072a9;
 	--component-date-picker-calendar-cell-shared-disabled-cursor: not-allowed;

package/dist/styleD/build/css/component/tagPicker.css

@@ -5,6 +5,7 @@
 :root {
 	--component-tag-picker-shared-width: 100%;
 	--component-tag-picker-shared-gap: 15px;
+	--component-tag-picker-search-width: 100%;
 	--component-tag-picker-select-flex-basis: 25%;
 	--component-tag-picker-offline-section-justify-content: flex-start;
 	--component-tag-picker-offline-section-gap: 4px;

package/dist/styleD/build/css/component/tagTable.css

@@ -3,12 +3,16 @@
  */
 
 :root {
-	--component-tag-table-heading-background-color: #dcdcdc;
+	--component-tag-table-header-background-color: #dcdcdc;
+	--component-tag-table-header-padding-top: 3px;
+	--component-tag-table-header-padding-right: 5px;
+	--component-tag-table-header-padding-bottom: 3px;
+	--component-tag-table-header-padding-left: 12px;
+	--component-tag-table-header-gap: 4px;
 	--component-tag-table-heading-font-weight: 700;
-	--component-tag-table-heading-padding-top: 3px;
-	--component-tag-table-heading-padding-right: 5px;
-	--component-tag-table-heading-padding-bottom: 3px;
-	--component-tag-table-heading-padding-left: 12px;
+	--component-tag-table-heading-font-size: 14px;
+	--component-tag-table-sub-heading-font-weight: 400;
+	--component-tag-table-sub-heading-font-size: 12px;
 	--component-tag-table-cell-padding-x: 5px;
 	--component-tag-table-cell-padding-y: 3px;
 	--component-tag-table-cell-first-cell-padding-left: 12px;

package/dist/styleD/build/css/semantic/colors.css

@@ -60,7 +60,7 @@
 	--semantic-colors-fill-green-weak: #cde4c9;
 	--semantic-colors-fill-blue-weak: #c5d9f4;
 	--semantic-colors-fill-red-weak: #f5c6c0;
-	--semantic-colors-fill-cyan-weak: #b8d8e7;
+	--semantic-colors-fill-cyan-weak: #c5dfec;
 	--semantic-colors-fill-teal-weak: #c5dfe1;
 	--semantic-colors-fill-cool-purple-weak: #dbdff7;
 	--semantic-colors-fill-warm-purple-weak: #dac3e8;
@@ -68,6 +68,11 @@
 	--semantic-colors-fill-orange-weak: #fcddc6;
 	--semantic-colors-fill-yellow-weak: #fbeebf;
 	--semantic-colors-fill-selected: #005d8b;
+	--semantic-colors-fill-selected-weak: #c5dfec;
+	--semantic-colors-fill-selected-hover-weak: #c5dfec;
+	--semantic-colors-fill-selected-pressed-weak: #8abed7;
+	--semantic-colors-fill-selected-hover-strong: #8abed7;
+	--semantic-colors-fill-selected-pressed-strong: #5ca5c8;
 	--semantic-colors-fill-draft-strong: #f1c21b;
 	--semantic-colors-fill-live-weak: #aed2a6;
 	--semantic-colors-fill-warning-weak: #fbeebf;

package/dist/styleD/build/css/semantic/sizing.css

@@ -19,4 +19,5 @@
 	--semantic-sizing-sidebar-lg-px: 280px;
 	--semantic-sizing-layout-max-width-px: 1584px;
 	--semantic-sizing-input-max-width-px: 450px;
+	--semantic-sizing-floating-ui-max-width-px: 200px;
 }

package/dist/styleD/build/typescript/base/colors.cjs

@@ -54,7 +54,7 @@ const baseColors = {
 		"500": "#2e8bb8",
 		"600": "#5ca5c8",
 		"700": "#8abed7",
-		"800": "#b8d8e7",
+		"800": "#c5dfec",
 		"900": "#e6f1f6"
 	},
 	teal: {

package/dist/styleD/build/typescript/base/colors.d.cts

@@ -54,7 +54,7 @@ declare const baseColors: {
     readonly '500': "#2e8bb8";
     readonly '600': "#5ca5c8";
     readonly '700': "#8abed7";
-    readonly '800': "#b8d8e7";
+    readonly '800': "#c5dfec";
     readonly '900': "#e6f1f6";
   };
   readonly teal: {

package/dist/styleD/build/typescript/base/colors.d.ts

@@ -54,7 +54,7 @@ declare const baseColors: {
     readonly '500': "#2e8bb8";
     readonly '600': "#5ca5c8";
     readonly '700': "#8abed7";
-    readonly '800': "#b8d8e7";
+    readonly '800': "#c5dfec";
     readonly '900': "#e6f1f6";
   };
   readonly teal: {

package/dist/styleD/build/typescript/base/colors.js

@@ -54,7 +54,7 @@ const baseColors = {
 		"500": "#2e8bb8",
 		"600": "#5ca5c8",
 		"700": "#8abed7",
-		"800": "#b8d8e7",
+		"800": "#c5dfec",
 		"900": "#e6f1f6"
 	},
 	teal: {

package/dist/styleD/build/typescript/component/autocomplete.cjs

@@ -6,11 +6,22 @@ const componentAutocomplete = {
 	input: {
 		color: "#000000",
 		backgroundColor: "#ffffff",
-		disabledBackgroundColor: "#dcdcdc",
-		borderWidth: "1px",
+		borderWidth: "0.0625rem",
 		borderStyle: "solid",
-		borderColor: "#8d8d8d",
-		padding: "11px"
+		borderColor: "#545454",
+		padding: "0.75rem",
+		borderRadius: "0.25rem",
+		hover: { backgroundColor: "#f6f6f6" },
+		focused: {
+			outline: "0.125rem solid #0072a9",
+			outlineOffset: "0.125rem"
+		},
+		disabled: {
+			backgroundColor: "#ffffff",
+			cursor: "not-allowed",
+			color: "#999999",
+			border: "0.0625rem solid #dcdcdc"
+		}
 	},
 	icon: {
 		size: "20px",
@@ -18,9 +29,9 @@ const componentAutocomplete = {
 		color: "#bababa"
 	},
 	listbox: {
-		borderWidth: "1px",
+		borderWidth: "0.0625rem",
 		borderStyle: "solid",
-		borderColor: "#8d8d8d",
+		borderColor: "#545454",
 		paddingY: "8px",
 		paddingX: "0px",
 		backgroundColor: "#ffffff",

package/dist/styleD/build/typescript/component/autocomplete.d.cts

@@ -6,11 +6,24 @@ declare const componentAutocomplete: {
   input: {
     color: string;
     backgroundColor: string;
-    disabledBackgroundColor: string;
     borderWidth: string;
     borderStyle: string;
     borderColor: string;
     padding: string;
+    borderRadius: string;
+    hover: {
+      backgroundColor: string;
+    };
+    focused: {
+      outline: string;
+      outlineOffset: string;
+    };
+    disabled: {
+      backgroundColor: string;
+      cursor: string;
+      color: string;
+      border: string;
+    };
   };
   icon: {
     size: string;

package/dist/styleD/build/typescript/component/autocomplete.d.ts

@@ -6,11 +6,24 @@ declare const componentAutocomplete: {
   input: {
     color: string;
     backgroundColor: string;
-    disabledBackgroundColor: string;
     borderWidth: string;
     borderStyle: string;
     borderColor: string;
     padding: string;
+    borderRadius: string;
+    hover: {
+      backgroundColor: string;
+    };
+    focused: {
+      outline: string;
+      outlineOffset: string;
+    };
+    disabled: {
+      backgroundColor: string;
+      cursor: string;
+      color: string;
+      border: string;
+    };
   };
   icon: {
     size: string;

package/dist/styleD/build/typescript/component/autocomplete.js

@@ -6,11 +6,22 @@ const componentAutocomplete = {
 	input: {
 		color: "#000000",
 		backgroundColor: "#ffffff",
-		disabledBackgroundColor: "#dcdcdc",
-		borderWidth: "1px",
+		borderWidth: "0.0625rem",
 		borderStyle: "solid",
-		borderColor: "#8d8d8d",
-		padding: "11px"
+		borderColor: "#545454",
+		padding: "0.75rem",
+		borderRadius: "0.25rem",
+		hover: { backgroundColor: "#f6f6f6" },
+		focused: {
+			outline: "0.125rem solid #0072a9",
+			outlineOffset: "0.125rem"
+		},
+		disabled: {
+			backgroundColor: "#ffffff",
+			cursor: "not-allowed",
+			color: "#999999",
+			border: "0.0625rem solid #dcdcdc"
+		}
 	},
 	icon: {
 		size: "20px",
@@ -18,9 +29,9 @@ const componentAutocomplete = {
 		color: "#bababa"
 	},
 	listbox: {
-		borderWidth: "1px",
+		borderWidth: "0.0625rem",
 		borderStyle: "solid",
-		borderColor: "#8d8d8d",
+		borderColor: "#545454",
 		paddingY: "8px",
 		paddingX: "0px",
 		backgroundColor: "#ffffff",

package/dist/styleD/build/typescript/component/avatar.cjs

@@ -28,7 +28,7 @@ const componentAvatar = {
 			},
 			cyan: {
 				text: "#00344e",
-				background: "#b8d8e7",
+				background: "#c5dfec",
 				border: "unset",
 				hover: { background: "#8abed7" },
 				active: { background: "#5ca5c8" }

package/dist/styleD/build/typescript/component/avatar.js

@@ -28,7 +28,7 @@ const componentAvatar = {
 			},
 			cyan: {
 				text: "#00344e",
-				background: "#b8d8e7",
+				background: "#c5dfec",
 				border: "unset",
 				hover: { background: "#8abed7" },
 				active: { background: "#5ca5c8" }

package/dist/styleD/build/typescript/component/datePicker.cjs

@@ -104,7 +104,7 @@ const componentDatePicker = {
 				aspectRatio: "1",
 				hovered: { backgroundColor: "#f6f6f6" },
 				pressed: { backgroundColor: "#ededed" },
-				selected: { backgroundColor: "#b8d8e7" },
+				selected: { backgroundColor: "#c5dfec" },
 				focusVisible: { outline: "0.125rem solid #0072a9" },
 				disabled: {
 					cursor: "not-allowed",
@@ -136,7 +136,7 @@ const componentDatePicker = {
 			outsideMonth: { display: "none" },
 			hovered: { backgroundColor: "#f6f6f6" },
 			pressed: { backgroundColor: "#ededed" },
-			selected: { backgroundColor: "#b8d8e7" },
+			selected: { backgroundColor: "#c5dfec" },
 			focusVisible: { outline: "0.125rem solid #0072a9" },
 			disabled: {
 				cursor: "not-allowed",

package/dist/styleD/build/typescript/component/datePicker.js

@@ -104,7 +104,7 @@ const componentDatePicker = {
 				aspectRatio: "1",
 				hovered: { backgroundColor: "#f6f6f6" },
 				pressed: { backgroundColor: "#ededed" },
-				selected: { backgroundColor: "#b8d8e7" },
+				selected: { backgroundColor: "#c5dfec" },
 				focusVisible: { outline: "0.125rem solid #0072a9" },
 				disabled: {
 					cursor: "not-allowed",
@@ -136,7 +136,7 @@ const componentDatePicker = {
 			outsideMonth: { display: "none" },
 			hovered: { backgroundColor: "#f6f6f6" },
 			pressed: { backgroundColor: "#ededed" },
-			selected: { backgroundColor: "#b8d8e7" },
+			selected: { backgroundColor: "#c5dfec" },
 			focusVisible: { outline: "0.125rem solid #0072a9" },
 			disabled: {
 				cursor: "not-allowed",

package/dist/styleD/build/typescript/component/intendedAudienceSignifier.cjs

@@ -25,10 +25,7 @@ const componentIntendedAudienceSignifier = {
 		size: "10px"
 	},
 	color: "#545454",
-	typography: {
-		font: "normal 460 0.75rem/1.3 Open Sans",
-		lineHeight: "1"
-	}
+	typography: { lineHeight: "1" }
 };
 //#endregion
 exports.componentIntendedAudienceSignifier = componentIntendedAudienceSignifier;

package/dist/styleD/build/typescript/component/intendedAudienceSignifier.d.cts

@@ -26,7 +26,6 @@ declare const componentIntendedAudienceSignifier: {
   };
   color: string;
   typography: {
-    font: string;
     lineHeight: string;
   };
 };

package/dist/styleD/build/typescript/component/intendedAudienceSignifier.d.ts

@@ -26,7 +26,6 @@ declare const componentIntendedAudienceSignifier: {
   };
   color: string;
   typography: {
-    font: string;
     lineHeight: string;
   };
 };

package/dist/styleD/build/typescript/component/intendedAudienceSignifier.js

@@ -25,10 +25,7 @@ const componentIntendedAudienceSignifier = {
 		size: "10px"
 	},
 	color: "#545454",
-	typography: {
-		font: "normal 460 0.75rem/1.3 Open Sans",
-		lineHeight: "1"
-	}
+	typography: { lineHeight: "1" }
 };
 //#endregion
 export { componentIntendedAudienceSignifier };

package/dist/styleD/build/typescript/component/tagPicker.cjs

@@ -7,6 +7,7 @@ const componentTagPicker = {
 		width: "100%",
 		gap: "15px"
 	},
+	search: { width: "100%" },
 	select: { flexBasis: "25%" },
 	offlineSection: {
 		justifyContent: "flex-start",

package/dist/styleD/build/typescript/component/tagPicker.d.cts

@@ -7,6 +7,9 @@ declare const componentTagPicker: {
     width: string;
     gap: string;
   };
+  search: {
+    width: string;
+  };
   select: {
     flexBasis: string;
   };

package/dist/styleD/build/typescript/component/tagPicker.d.ts

@@ -7,6 +7,9 @@ declare const componentTagPicker: {
     width: string;
     gap: string;
   };
+  search: {
+    width: string;
+  };
   select: {
     flexBasis: string;
   };

package/dist/styleD/build/typescript/component/tagPicker.js

@@ -7,6 +7,7 @@ const componentTagPicker = {
 		width: "100%",
 		gap: "15px"
 	},
+	search: { width: "100%" },
 	select: { flexBasis: "25%" },
 	offlineSection: {
 		justifyContent: "flex-start",

package/dist/styleD/build/typescript/component/tagTable.cjs

@@ -3,13 +3,21 @@
 * Do not edit directly, this file was auto-generated.
 */
 const componentTagTable = {
-	heading: {
+	header: {
 		backgroundColor: "#dcdcdc",
-		fontWeight: 700,
 		paddingTop: "3px",
 		paddingRight: "5px",
 		paddingBottom: "3px",
-		paddingLeft: "12px"
+		paddingLeft: "12px",
+		gap: "4px"
+	},
+	heading: {
+		fontWeight: 700,
+		fontSize: "14px"
+	},
+	subHeading: {
+		fontWeight: 400,
+		fontSize: "12px"
 	},
 	cell: {
 		paddingX: "5px",

package/dist/styleD/build/typescript/component/tagTable.d.cts

@@ -3,13 +3,21 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const componentTagTable: {
-  heading: {
+  header: {
     backgroundColor: string;
-    fontWeight: number;
     paddingTop: string;
     paddingRight: string;
     paddingBottom: string;
     paddingLeft: string;
+    gap: string;
+  };
+  heading: {
+    fontWeight: number;
+    fontSize: string;
+  };
+  subHeading: {
+    fontWeight: number;
+    fontSize: string;
   };
   cell: {
     paddingX: string;