@guardian/stand 0.0.50 → 0.0.52

package/dist/components/UserMenu/PreferenceRadioGroup.js

@@ -1,6 +1,6 @@
 import { radioGroupLabelStyles, toggleButtonRowsGroupStyles, toggleButtonStackedGroupStyles, toggleButtonStyles } from "./styles.js";
 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 { ToggleButton, ToggleButtonGroup } from "react-aria-components";
 //#region src/components/UserMenu/PreferenceRadioGroup.tsx
 function PreferenceRadioGroup({ name, options, currentValue, changeValue, theme, format = "stack" }) {
@@ -8,10 +8,10 @@ function PreferenceRadioGroup({ name, options, currentValue, changeValue, theme,
 	const buttonStyle = format === "stack" ? toggleButtonStyles(theme) : [toggleButtonStyles(theme), css({ flexBasis: "30%" })];
 	const defaultOptionId = options.find((option) => option.isDefault)?.id;
 	const selectedKeys = currentValue ? [currentValue] : defaultOptionId ? [defaultOptionId] : [];
-	return /* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx$1("div", {
+	return /* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx("div", {
 		css: radioGroupLabelStyles(theme),
 		children: name
-	}), /* @__PURE__ */ jsx$1(ToggleButtonGroup, {
+	}), /* @__PURE__ */ jsx(ToggleButtonGroup, {
 		css: groupCss,
 		selectionMode: "single",
 		orientation: format === "stack" ? "vertical" : "horizontal",
@@ -24,10 +24,10 @@ function PreferenceRadioGroup({ name, options, currentValue, changeValue, theme,
 			id: option.id,
 			css: buttonStyle,
 			style: option.buttonStyle,
-			children: [/* @__PURE__ */ jsx$1("div", {
+			children: [/* @__PURE__ */ jsx("div", {
 				style: option.labelStyle,
 				children: option.label ?? option.id
-			}), /* @__PURE__ */ jsx$1("div", { children: option.description })]
+			}), /* @__PURE__ */ jsx("div", { children: option.description })]
 		}, index))
 	})] });
 }

package/dist/index.cjs

@@ -16,6 +16,7 @@ const require_grid = require("./styleD/build/typescript/component/grid.cjs");
 const require_form = require("./styleD/build/typescript/component/form.cjs");
 const require_inlineMessage = require("./styleD/build/typescript/component/inlineMessage.cjs");
 const require_menu = require("./styleD/build/typescript/component/menu.cjs");
+const require_modal = require("./styleD/build/typescript/component/modal.cjs");
 const require_layout = require("./styleD/build/typescript/component/layout.cjs");
 const require_link = require("./styleD/build/typescript/component/link.cjs");
 const require_radioGroup = require("./styleD/build/typescript/component/radioGroup.cjs");
@@ -57,6 +58,7 @@ exports.componentIntendedAudienceSignifier = require_intendedAudienceSignifier.c
 exports.componentLayout = require_layout.componentLayout;
 exports.componentLink = require_link.componentLink;
 exports.componentMenu = require_menu.componentMenu;
+exports.componentModal = require_modal.componentModal;
 exports.componentRadioGroup = require_radioGroup.componentRadioGroup;
 exports.componentSelect = require_select.componentSelect;
 exports.componentTagTable = require_tagTable.componentTagTable;

package/dist/index.d.cts

@@ -9,13 +9,14 @@ import { ComponentDatePicker, componentDatePicker } from "./styleD/build/typescr
 import { ComponentFavicon, componentFavicon } from "./styleD/build/typescript/component/favicon.cjs";
 import { SemanticBreakpoints, semanticBreakpoints } from "./styleD/build/typescript/semantic/breakpoints.cjs";
 import { ComponentGrid, componentGrid } from "./styleD/build/typescript/component/grid.cjs";
+import { SemanticTypography, semanticTypography } from "./styleD/build/typescript/semantic/typography.cjs";
+import { ComponentTypography, componentTypography } from "./styleD/build/typescript/component/typography.cjs";
 import { ComponentInlineMessage, componentInlineMessage } from "./styleD/build/typescript/component/inlineMessage.cjs";
 import { ComponentIntendedAudienceSignifier, componentIntendedAudienceSignifier } from "./styleD/build/typescript/component/intendedAudienceSignifier.cjs";
 import { ComponentLayout, componentLayout } from "./styleD/build/typescript/component/layout.cjs";
-import { SemanticTypography, semanticTypography } from "./styleD/build/typescript/semantic/typography.cjs";
-import { ComponentTypography, componentTypography } from "./styleD/build/typescript/component/typography.cjs";
 import { ComponentLink, componentLink } from "./styleD/build/typescript/component/link.cjs";
 import { ComponentMenu, componentMenu } from "./styleD/build/typescript/component/menu.cjs";
+import { ComponentModal, componentModal } from "./styleD/build/typescript/component/modal.cjs";
 import { ComponentRadioGroup, componentRadioGroup } from "./styleD/build/typescript/component/radioGroup.cjs";
 import { ComponentSelect, componentSelect } from "./styleD/build/typescript/component/select.cjs";
 import { ComponentAutocomplete, componentAutocomplete } from "./styleD/build/typescript/component/autocomplete.cjs";
@@ -35,4 +36,4 @@ import { SemanticSizing, semanticSizing } from "./styleD/build/typescript/semant
 import { SemanticShadow, semanticShadow } from "./styleD/build/typescript/semantic/shadow.cjs";
 import { SemanticRadius, semanticRadius } from "./styleD/build/typescript/semantic/radius.cjs";
 import { SemanticSpacing, semanticSpacing } from "./styleD/build/typescript/semantic/spacing.cjs";
-export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentRadioGroup, type ComponentSelect, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTopBar, type ComponentTypography, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTopBar, type ComponentTypography, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.d.ts

@@ -9,13 +9,14 @@ import { ComponentDatePicker, componentDatePicker } from "./styleD/build/typescr
 import { ComponentFavicon, componentFavicon } from "./styleD/build/typescript/component/favicon.js";
 import { SemanticBreakpoints, semanticBreakpoints } from "./styleD/build/typescript/semantic/breakpoints.js";
 import { ComponentGrid, componentGrid } from "./styleD/build/typescript/component/grid.js";
+import { SemanticTypography, semanticTypography } from "./styleD/build/typescript/semantic/typography.js";
+import { ComponentTypography, componentTypography } from "./styleD/build/typescript/component/typography.js";
 import { ComponentInlineMessage, componentInlineMessage } from "./styleD/build/typescript/component/inlineMessage.js";
 import { ComponentIntendedAudienceSignifier, componentIntendedAudienceSignifier } from "./styleD/build/typescript/component/intendedAudienceSignifier.js";
 import { ComponentLayout, componentLayout } from "./styleD/build/typescript/component/layout.js";
-import { SemanticTypography, semanticTypography } from "./styleD/build/typescript/semantic/typography.js";
-import { ComponentTypography, componentTypography } from "./styleD/build/typescript/component/typography.js";
 import { ComponentLink, componentLink } from "./styleD/build/typescript/component/link.js";
 import { ComponentMenu, componentMenu } from "./styleD/build/typescript/component/menu.js";
+import { ComponentModal, componentModal } from "./styleD/build/typescript/component/modal.js";
 import { ComponentRadioGroup, componentRadioGroup } from "./styleD/build/typescript/component/radioGroup.js";
 import { ComponentSelect, componentSelect } from "./styleD/build/typescript/component/select.js";
 import { ComponentAutocomplete, componentAutocomplete } from "./styleD/build/typescript/component/autocomplete.js";
@@ -35,4 +36,4 @@ import { SemanticSizing, semanticSizing } from "./styleD/build/typescript/semant
 import { SemanticShadow, semanticShadow } from "./styleD/build/typescript/semantic/shadow.js";
 import { SemanticRadius, semanticRadius } from "./styleD/build/typescript/semantic/radius.js";
 import { SemanticSpacing, semanticSpacing } from "./styleD/build/typescript/semantic/spacing.js";
-export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentRadioGroup, type ComponentSelect, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTopBar, type ComponentTypography, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTopBar, type ComponentTypography, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.js

@@ -15,6 +15,7 @@ import { componentGrid } from "./styleD/build/typescript/component/grid.js";
 import { componentForm } from "./styleD/build/typescript/component/form.js";
 import { componentInlineMessage } from "./styleD/build/typescript/component/inlineMessage.js";
 import { componentMenu } from "./styleD/build/typescript/component/menu.js";
+import { componentModal } from "./styleD/build/typescript/component/modal.js";
 import { componentLayout } from "./styleD/build/typescript/component/layout.js";
 import { componentLink } from "./styleD/build/typescript/component/link.js";
 import { componentRadioGroup } from "./styleD/build/typescript/component/radioGroup.js";
@@ -35,4 +36,4 @@ import { semanticSizing } from "./styleD/build/typescript/semantic/sizing.js";
 import { semanticShadow } from "./styleD/build/typescript/semantic/shadow.js";
 import { semanticRadius } from "./styleD/build/typescript/semantic/radius.js";
 import { semanticSpacing } from "./styleD/build/typescript/semantic/spacing.js";
-export { baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

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

@@ -10,6 +10,9 @@
 	--component-autocomplete-input-border-style: solid;
 	--component-autocomplete-input-border-color: #8d8d8d;
 	--component-autocomplete-input-padding: 11px;
+	--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-style: solid;
 	--component-autocomplete-listbox-border-color: #8d8d8d;

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

@@ -0,0 +1,51 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-modal-overlay-position: absolute;
+	--component-modal-overlay-top: 0;
+	--component-modal-overlay-left: 0;
+	--component-modal-overlay-width: 100%;
+	--component-modal-overlay-height: 100%;
+	--component-modal-overlay-background-color: rgba(0, 0, 0, 0.4);
+	--component-modal-overlay-overflow: clip;
+	--component-modal-overlay-z-index: 100;
+	--component-modal-modal-position: sticky;
+	--component-modal-modal-max-height: 90%;
+	--component-modal-modal-top: 50%;
+	--component-modal-modal-margin-left: 50svw;
+	--component-modal-modal-translate: -50% -50%;
+	--component-modal-modal-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
+	--component-modal-modal-border-radius: 0.5rem;
+	--component-modal-modal-width: max-content;
+	--component-modal-modal-max-width: min(484px, 90svw);
+	--component-modal-modal-background-color: #ffffff;
+	--component-modal-modal-padding-top: 1rem;
+	--component-modal-modal-padding-bottom: 2rem;
+	--component-modal-modal-padding-left: 2rem;
+	--component-modal-modal-padding-right: 2rem;
+	--component-modal-dialog-container-display: grid;
+	--component-modal-dialog-container-grid-template-areas: 'dismiss' 'title'
+		'children' 'ctas';
+	--component-modal-dialog-container-grid-template-columns: 1fr;
+	--component-modal-dialog-container-grid-template-rows: auto auto 1fr auto;
+	--component-modal-dialog-dismiss-grid-area: dismiss;
+	--component-modal-dialog-dismiss-margin-left: auto;
+	--component-modal-dialog-dismiss-margin-bottom: 1rem;
+	--component-modal-dialog-dismiss-border: none;
+	--component-modal-dialog-dismiss-height: 1rem;
+	--component-modal-dialog-dismiss-width: 1rem;
+	--component-modal-dialog-dismiss-hovered-background: none;
+	--component-modal-dialog-dismiss-hovered-border: none;
+	--component-modal-dialog-title-grid-area: title;
+	--component-modal-dialog-title-margin-bottom: 1rem;
+	--component-modal-dialog-children-grid-area: children;
+	--component-modal-dialog-children-margin-bottom: 2.5rem;
+	--component-modal-dialog-ctas-grid-area: ctas;
+	--component-modal-dialog-ctas-display: flex;
+	--component-modal-dialog-ctas-flex-direction: column;
+	--component-modal-dialog-ctas-gap: 1rem;
+	--component-modal-dialog-ctas-justify-content: flex-end;
+	--component-modal-dialog-ctas-md-flex-direction: row;
+}

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

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-tag-picker-shared-width: 100%;
+	--component-tag-picker-shared-gap: 15px;
+	--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

@@ -26,8 +26,8 @@
 	--component-tag-table-add-button-color: #ffffff;
 	--component-tag-table-add-button-padding-x: 10px;
 	--component-tag-table-add-button-padding-y: 0px;
-	--component-tag-table-add-button-background-color: #8d8d8d;
-	--component-tag-table-add-button-background-hover-color: #545454;
+	--component-tag-table-add-button-background-color: #545454;
+	--component-tag-table-add-button-background-hover-color: #333333;
 	--component-tag-table-add-button-font-weight: 400;
 	--component-tag-table-add-button-font-size: 13px;
 	--component-tag-table-type-badge-color: #000000;

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

@@ -12,6 +12,11 @@ const componentAutocomplete = {
 		borderColor: "#8d8d8d",
 		padding: "11px"
 	},
+	icon: {
+		size: "20px",
+		paddingX: "4px",
+		color: "#bababa"
+	},
 	listbox: {
 		borderWidth: "1px",
 		borderStyle: "solid",

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

@@ -12,6 +12,11 @@ declare const componentAutocomplete: {
     borderColor: string;
     padding: string;
   };
+  icon: {
+    size: string;
+    paddingX: string;
+    color: string;
+  };
   listbox: {
     borderWidth: string;
     borderStyle: string;

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

@@ -12,6 +12,11 @@ declare const componentAutocomplete: {
     borderColor: string;
     padding: string;
   };
+  icon: {
+    size: string;
+    paddingX: string;
+    color: string;
+  };
   listbox: {
     borderWidth: string;
     borderStyle: string;

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

@@ -12,6 +12,11 @@ const componentAutocomplete = {
 		borderColor: "#8d8d8d",
 		padding: "11px"
 	},
+	icon: {
+		size: "20px",
+		paddingX: "4px",
+		color: "#bababa"
+	},
 	listbox: {
 		borderWidth: "1px",
 		borderStyle: "solid",

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,72 @@
+//#region src/styleD/build/typescript/component/modal.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentModal = {
+	overlay: {
+		position: "absolute",
+		top: 0,
+		left: 0,
+		width: "100%",
+		height: "100%",
+		backgroundColor: "#00000066",
+		overflow: "clip",
+		zIndex: 100
+	},
+	modal: {
+		position: "sticky",
+		maxHeight: "90%",
+		top: "50%",
+		marginLeft: "50svw",
+		translate: "-50% -50%",
+		boxShadow: "0 2px 6px 0 rgba(0, 0, 0, 0.30)",
+		borderRadius: "0.5rem",
+		width: "max-content",
+		maxWidth: "min(484px, 90svw)",
+		backgroundColor: "#ffffff",
+		padding: {
+			top: "1rem",
+			bottom: "2rem",
+			left: "2rem",
+			right: "2rem"
+		}
+	},
+	dialog: {
+		container: {
+			display: "grid",
+			gridTemplateAreas: "'dismiss' 'title' 'children' 'ctas'",
+			gridTemplateColumns: "1fr",
+			gridTemplateRows: "auto auto 1fr auto"
+		},
+		dismiss: {
+			gridArea: "dismiss",
+			marginLeft: "auto",
+			marginBottom: "1rem",
+			border: "none",
+			height: "1rem",
+			width: "1rem",
+			hovered: {
+				background: "none",
+				border: "none"
+			}
+		},
+		title: {
+			gridArea: "title",
+			marginBottom: "1rem"
+		},
+		children: {
+			gridArea: "children",
+			marginBottom: "2.5rem"
+		},
+		ctas: {
+			gridArea: "ctas",
+			display: "flex",
+			flexDirection: "column",
+			gap: "1rem",
+			justifyContent: "flex-end",
+			md: { flexDirection: "row" }
+		}
+	}
+};
+//#endregion
+exports.componentModal = componentModal;

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

@@ -0,0 +1,75 @@
+//#region src/styleD/build/typescript/component/modal.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentModal: {
+  overlay: {
+    position: string;
+    top: number;
+    left: number;
+    width: string;
+    height: string;
+    backgroundColor: string;
+    overflow: string;
+    zIndex: number;
+  };
+  modal: {
+    position: string;
+    maxHeight: string;
+    top: string;
+    marginLeft: string;
+    translate: string;
+    boxShadow: string;
+    borderRadius: string;
+    width: string;
+    maxWidth: string;
+    backgroundColor: string;
+    padding: {
+      top: string;
+      bottom: string;
+      left: string;
+      right: string;
+    };
+  };
+  dialog: {
+    container: {
+      display: string;
+      gridTemplateAreas: string;
+      gridTemplateColumns: string;
+      gridTemplateRows: string;
+    };
+    dismiss: {
+      gridArea: string;
+      marginLeft: string;
+      marginBottom: string;
+      border: string;
+      height: string;
+      width: string;
+      hovered: {
+        background: string;
+        border: string;
+      };
+    };
+    title: {
+      gridArea: string;
+      marginBottom: string;
+    };
+    children: {
+      gridArea: string;
+      marginBottom: string;
+    };
+    ctas: {
+      gridArea: string;
+      display: string;
+      flexDirection: string;
+      gap: string;
+      justifyContent: string;
+      md: {
+        flexDirection: string;
+      };
+    };
+  };
+};
+type ComponentModal = typeof componentModal;
+//#endregion
+export { ComponentModal, componentModal };

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

@@ -0,0 +1,75 @@
+//#region src/styleD/build/typescript/component/modal.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentModal: {
+  overlay: {
+    position: string;
+    top: number;
+    left: number;
+    width: string;
+    height: string;
+    backgroundColor: string;
+    overflow: string;
+    zIndex: number;
+  };
+  modal: {
+    position: string;
+    maxHeight: string;
+    top: string;
+    marginLeft: string;
+    translate: string;
+    boxShadow: string;
+    borderRadius: string;
+    width: string;
+    maxWidth: string;
+    backgroundColor: string;
+    padding: {
+      top: string;
+      bottom: string;
+      left: string;
+      right: string;
+    };
+  };
+  dialog: {
+    container: {
+      display: string;
+      gridTemplateAreas: string;
+      gridTemplateColumns: string;
+      gridTemplateRows: string;
+    };
+    dismiss: {
+      gridArea: string;
+      marginLeft: string;
+      marginBottom: string;
+      border: string;
+      height: string;
+      width: string;
+      hovered: {
+        background: string;
+        border: string;
+      };
+    };
+    title: {
+      gridArea: string;
+      marginBottom: string;
+    };
+    children: {
+      gridArea: string;
+      marginBottom: string;
+    };
+    ctas: {
+      gridArea: string;
+      display: string;
+      flexDirection: string;
+      gap: string;
+      justifyContent: string;
+      md: {
+        flexDirection: string;
+      };
+    };
+  };
+};
+type ComponentModal = typeof componentModal;
+//#endregion
+export { ComponentModal, componentModal };

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

@@ -0,0 +1,72 @@
+//#region src/styleD/build/typescript/component/modal.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentModal = {
+	overlay: {
+		position: "absolute",
+		top: 0,
+		left: 0,
+		width: "100%",
+		height: "100%",
+		backgroundColor: "#00000066",
+		overflow: "clip",
+		zIndex: 100
+	},
+	modal: {
+		position: "sticky",
+		maxHeight: "90%",
+		top: "50%",
+		marginLeft: "50svw",
+		translate: "-50% -50%",
+		boxShadow: "0 2px 6px 0 rgba(0, 0, 0, 0.30)",
+		borderRadius: "0.5rem",
+		width: "max-content",
+		maxWidth: "min(484px, 90svw)",
+		backgroundColor: "#ffffff",
+		padding: {
+			top: "1rem",
+			bottom: "2rem",
+			left: "2rem",
+			right: "2rem"
+		}
+	},
+	dialog: {
+		container: {
+			display: "grid",
+			gridTemplateAreas: "'dismiss' 'title' 'children' 'ctas'",
+			gridTemplateColumns: "1fr",
+			gridTemplateRows: "auto auto 1fr auto"
+		},
+		dismiss: {
+			gridArea: "dismiss",
+			marginLeft: "auto",
+			marginBottom: "1rem",
+			border: "none",
+			height: "1rem",
+			width: "1rem",
+			hovered: {
+				background: "none",
+				border: "none"
+			}
+		},
+		title: {
+			gridArea: "title",
+			marginBottom: "1rem"
+		},
+		children: {
+			gridArea: "children",
+			marginBottom: "2.5rem"
+		},
+		ctas: {
+			gridArea: "ctas",
+			display: "flex",
+			flexDirection: "column",
+			gap: "1rem",
+			justifyContent: "flex-end",
+			md: { flexDirection: "row" }
+		}
+	}
+};
+//#endregion
+export { componentModal };

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

@@ -0,0 +1,17 @@
+//#region src/styleD/build/typescript/component/tagPicker.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentTagPicker = {
+	shared: {
+		width: "100%",
+		gap: "15px"
+	},
+	select: { flexBasis: "25%" },
+	offlineSection: {
+		justifyContent: "flex-start",
+		gap: "4px"
+	}
+};
+//#endregion
+exports.componentTagPicker = componentTagPicker;

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

@@ -0,0 +1,20 @@
+//#region src/styleD/build/typescript/component/tagPicker.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentTagPicker: {
+  shared: {
+    width: string;
+    gap: string;
+  };
+  select: {
+    flexBasis: string;
+  };
+  offlineSection: {
+    justifyContent: string;
+    gap: string;
+  };
+};
+type ComponentTagPicker = typeof componentTagPicker;
+//#endregion
+export { ComponentTagPicker, componentTagPicker };