@guardian/stand 0.0.74 → 0.0.76

package/dist/SearchInput.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_searchInput = require("./styleD/build/typescript/component/searchInput.cjs");
+const require_SearchInput = require("./components/SearchInput/SearchInput.cjs");
+exports.SearchInput = require_SearchInput.SearchInput;
+exports.componentSearchInput = require_searchInput.componentSearchInput;

package/dist/SearchInput.d.cts

@@ -0,0 +1,5 @@
+import { ComponentSearchInput, componentSearchInput } from "./styleD/build/typescript/component/searchInput.cjs";
+import { PartialSearchInputTheme } from "./components/SearchInput/styles.cjs";
+import { SearchInputProps } from "./components/SearchInput/types.cjs";
+import { SearchInput } from "./components/SearchInput/SearchInput.cjs";
+export { type ComponentSearchInput, SearchInput, type SearchInputProps, type PartialSearchInputTheme as SearchInputTheme, componentSearchInput };

package/dist/SearchInput.d.ts

@@ -0,0 +1,5 @@
+import { ComponentSearchInput, componentSearchInput } from "./styleD/build/typescript/component/searchInput.js";
+import { PartialSearchInputTheme } from "./components/SearchInput/styles.js";
+import { SearchInputProps } from "./components/SearchInput/types.js";
+import { SearchInput } from "./components/SearchInput/SearchInput.js";
+export { type ComponentSearchInput, SearchInput, type SearchInputProps, type PartialSearchInputTheme as SearchInputTheme, componentSearchInput };

package/dist/SearchInput.js

@@ -0,0 +1,3 @@
+import { componentSearchInput } from "./styleD/build/typescript/component/searchInput.js";
+import { SearchInput } from "./components/SearchInput/SearchInput.js";
+export { SearchInput, componentSearchInput };

package/dist/components/AlertBanner/AlertBanner.cjs

@@ -24,7 +24,7 @@ function AlertBanner({ level, showIcon = false, icon, closeButtonProps, children
 			css: require_styles.alertBannerContentStyles(mergedTheme),
 			children: [showIcon && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
 				size: "md",
-				fill: mergedTheme.shared.content.icon.color,
+				fill: mergedTheme[level].icon.color,
 				children: determinedIcon
 			}), children]
 		}), closeButtonProps && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_IconButton.IconButton, {

package/dist/components/AlertBanner/AlertBanner.js

@@ -24,7 +24,7 @@ function AlertBanner({ level, showIcon = false, icon, closeButtonProps, children
 			css: alertBannerContentStyles(mergedTheme),
 			children: [showIcon && /* @__PURE__ */ jsx(Icon, {
 				size: "md",
-				fill: mergedTheme.shared.content.icon.color,
+				fill: mergedTheme[level].icon.color,
 				children: determinedIcon
 			}), children]
 		}), closeButtonProps && /* @__PURE__ */ jsx(IconButton, {

package/dist/components/Form/types.cjs

@@ -6,6 +6,7 @@ let react_aria_components = require("react-aria-components");
 */
 const ALLOWED_FORM_CONTAINERS = [
 	react_aria_components.TextField,
+	react_aria_components.SearchField,
 	react_aria_components.Select,
 	react_aria_components.RadioGroup,
 	react_aria_components.CheckboxGroup,

package/dist/components/Form/types.js

@@ -1,4 +1,4 @@
-import { CheckboxGroup, DatePicker, RadioGroup, Select, TextField } from "react-aria-components";
+import { CheckboxGroup, DatePicker, RadioGroup, SearchField, Select, TextField } from "react-aria-components";
 //#region src/components/Form/types.ts
 /**
 * The React Aria form container components FormInputContainer supports.
@@ -6,6 +6,7 @@ import { CheckboxGroup, DatePicker, RadioGroup, Select, TextField } from "react-
 */
 const ALLOWED_FORM_CONTAINERS = [
 	TextField,
+	SearchField,
 	Select,
 	RadioGroup,
 	CheckboxGroup,

package/dist/components/SearchInput/SearchInput.cjs

@@ -0,0 +1,33 @@
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_Icon = require("../Icon/Icon.cjs");
+const require_Form = require("../Form/Form.cjs");
+const require_styles = require("./styles.cjs");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
+//#region src/components/SearchInput/SearchInput.tsx
+const increaseIconSize = (s) => {
+	if (s === "sm") return "md";
+	return "lg";
+};
+function SearchInput({ size = "md", isInvalid = false, theme = {}, placeholder, ...props }) {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultSearchInputTheme, theme);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Form.FormInputContainer, {
+		as: react_aria_components.SearchField,
+		size,
+		isInvalid,
+		...props,
+		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+			css: require_styles.searchInputStyles(mergedTheme, {
+				size,
+				isInvalid
+			}),
+			children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+				size: increaseIconSize(size),
+				symbol: "search",
+				className: "search-icon"
+			}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Input, { placeholder })]
+		})
+	});
+}
+//#endregion
+exports.SearchInput = SearchInput;

package/dist/components/SearchInput/SearchInput.d.cts

@@ -0,0 +1,4 @@
+import { SearchInputProps } from "./types.cjs";
+//#region src/components/SearchInput/SearchInput.d.ts
+export declare function SearchInput({ size, isInvalid, theme, placeholder, ...props }: SearchInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion

package/dist/components/SearchInput/SearchInput.d.ts

@@ -0,0 +1,4 @@
+import { SearchInputProps } from "./types.js";
+//#region src/components/SearchInput/SearchInput.d.ts
+export declare function SearchInput({ size, isInvalid, theme, placeholder, ...props }: SearchInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion

package/dist/components/SearchInput/SearchInput.js

@@ -0,0 +1,33 @@
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { Icon } from "../Icon/Icon.js";
+import { FormInputContainer } from "../Form/Form.js";
+import { defaultSearchInputTheme, searchInputStyles } from "./styles.js";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { Input, SearchField } from "react-aria-components";
+//#region src/components/SearchInput/SearchInput.tsx
+const increaseIconSize = (s) => {
+	if (s === "sm") return "md";
+	return "lg";
+};
+function SearchInput({ size = "md", isInvalid = false, theme = {}, placeholder, ...props }) {
+	const mergedTheme = mergeDeep(defaultSearchInputTheme, theme);
+	return /* @__PURE__ */ jsx(FormInputContainer, {
+		as: SearchField,
+		size,
+		isInvalid,
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			css: searchInputStyles(mergedTheme, {
+				size,
+				isInvalid
+			}),
+			children: [/* @__PURE__ */ jsx(Icon, {
+				size: increaseIconSize(size),
+				symbol: "search",
+				className: "search-icon"
+			}), /* @__PURE__ */ jsx(Input, { placeholder })]
+		})
+	});
+}
+//#endregion
+export { SearchInput };

package/dist/components/SearchInput/styles.cjs

@@ -0,0 +1,87 @@
+const require_typography = require("../../styleD/utils/semantic/typography.cjs");
+const require_searchInput = require("../../styleD/build/typescript/component/searchInput.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/SearchInput/styles.ts
+const defaultSearchInputTheme = require_searchInput.componentSearchInput;
+const searchInputStyles = (theme, { size, isInvalid }) => {
+	return _emotion_react.css`
+		${require_typography.convertTypographyToEmotionStringStyle(theme[size].typography)}
+		background-color: ${theme.shared.backgroundColor};
+		border-radius: ${theme.shared.borderRadius};
+		border: ${theme.shared.border};
+		color: ${theme.shared.color};
+		cursor: ${theme.shared.cursor};
+		height: ${theme[size].height};
+		margin-top: ${theme.shared.marginTop};
+		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
+			${theme.shared.padding.bottom} ${theme.shared.padding.left};
+
+		display: inline-flex;
+		justify-content: flex-start;
+		align-items: center;
+
+		::placeholder {
+			color: ${theme.shared.placeholderColor};
+		}
+
+		& input {
+			${require_typography.convertTypographyToEmotionStringStyle(theme[size].typography)}
+			background-color: transparent;
+			border-radius: 0;
+			border: 0;
+			color: ${theme.shared.color};
+			cursor: ${theme.shared.cursor};
+			height: ${theme[size].height};
+			margin: 0;
+			padding: 0;
+			width: 100%;
+
+			::placeholder {
+				color: ${theme.shared.placeholderColor};
+			}
+
+			&[data-disabled] {
+				color: ${theme.shared.disabled.color};
+				cursor: ${theme.shared.disabled.cursor};
+
+				::placeholder {
+					color: ${theme.shared.disabled.color};
+				}
+			}
+
+			&[data-focused] {
+				outline: none;
+			}
+		}
+
+		& .search-icon {
+			margin-right: 8px;
+		}
+
+		&:focus-within {
+			outline: ${theme.shared.focused.outline};
+		}
+
+		${isInvalid && _emotion_react.css`
+				border: ${theme.shared.error.border};
+			`}
+
+		&:has(:disabled) {
+			background-color: ${theme.shared.disabled.backgroundColor};
+			border: ${theme.shared.disabled.border};
+			color: ${theme.shared.disabled.color};
+			cursor: ${theme.shared.disabled.cursor};
+
+			::placeholder {
+				color: ${theme.shared.disabled.color};
+			}
+
+			& svg {
+				stroke: ${theme.shared.disabled.color};
+			}
+		}
+	`;
+};
+//#endregion
+exports.defaultSearchInputTheme = defaultSearchInputTheme;
+exports.searchInputStyles = searchInputStyles;

package/dist/components/SearchInput/styles.d.cts

@@ -0,0 +1,8 @@
+import { DeepPartial, Prettify } from "../../util/types.cjs";
+import { ComponentSearchInput } from "../../styleD/build/typescript/component/searchInput.cjs";
+import "./types.cjs";
+import { SerializedStyles } from "@emotion/react";
+//#region src/components/SearchInput/styles.d.ts
+export type SearchInputTheme = Prettify<ComponentSearchInput>;
+export type PartialSearchInputTheme = Prettify<DeepPartial<ComponentSearchInput>>;
+//#endregion

package/dist/components/SearchInput/styles.d.ts

@@ -0,0 +1,8 @@
+import { DeepPartial, Prettify } from "../../util/types.js";
+import { ComponentSearchInput } from "../../styleD/build/typescript/component/searchInput.js";
+import "./types.js";
+import { SerializedStyles } from "@emotion/react";
+//#region src/components/SearchInput/styles.d.ts
+export type SearchInputTheme = Prettify<ComponentSearchInput>;
+export type PartialSearchInputTheme = Prettify<DeepPartial<ComponentSearchInput>>;
+//#endregion

package/dist/components/SearchInput/styles.js

@@ -0,0 +1,86 @@
+import { convertTypographyToEmotionStringStyle } from "../../styleD/utils/semantic/typography.js";
+import { componentSearchInput } from "../../styleD/build/typescript/component/searchInput.js";
+import { css } from "@emotion/react";
+//#region src/components/SearchInput/styles.ts
+const defaultSearchInputTheme = componentSearchInput;
+const searchInputStyles = (theme, { size, isInvalid }) => {
+	return css`
+		${convertTypographyToEmotionStringStyle(theme[size].typography)}
+		background-color: ${theme.shared.backgroundColor};
+		border-radius: ${theme.shared.borderRadius};
+		border: ${theme.shared.border};
+		color: ${theme.shared.color};
+		cursor: ${theme.shared.cursor};
+		height: ${theme[size].height};
+		margin-top: ${theme.shared.marginTop};
+		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
+			${theme.shared.padding.bottom} ${theme.shared.padding.left};
+
+		display: inline-flex;
+		justify-content: flex-start;
+		align-items: center;
+
+		::placeholder {
+			color: ${theme.shared.placeholderColor};
+		}
+
+		& input {
+			${convertTypographyToEmotionStringStyle(theme[size].typography)}
+			background-color: transparent;
+			border-radius: 0;
+			border: 0;
+			color: ${theme.shared.color};
+			cursor: ${theme.shared.cursor};
+			height: ${theme[size].height};
+			margin: 0;
+			padding: 0;
+			width: 100%;
+
+			::placeholder {
+				color: ${theme.shared.placeholderColor};
+			}
+
+			&[data-disabled] {
+				color: ${theme.shared.disabled.color};
+				cursor: ${theme.shared.disabled.cursor};
+
+				::placeholder {
+					color: ${theme.shared.disabled.color};
+				}
+			}
+
+			&[data-focused] {
+				outline: none;
+			}
+		}
+
+		& .search-icon {
+			margin-right: 8px;
+		}
+
+		&:focus-within {
+			outline: ${theme.shared.focused.outline};
+		}
+
+		${isInvalid && css`
+				border: ${theme.shared.error.border};
+			`}
+
+		&:has(:disabled) {
+			background-color: ${theme.shared.disabled.backgroundColor};
+			border: ${theme.shared.disabled.border};
+			color: ${theme.shared.disabled.color};
+			cursor: ${theme.shared.disabled.cursor};
+
+			::placeholder {
+				color: ${theme.shared.disabled.color};
+			}
+
+			& svg {
+				stroke: ${theme.shared.disabled.color};
+			}
+		}
+	`;
+};
+//#endregion
+export { defaultSearchInputTheme, searchInputStyles };

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

@@ -0,0 +1,9 @@
+import { FormInputContainerDefaultProps } from "../Form/types.cjs";
+import { SearchInputTheme } from "./styles.cjs";
+import { SearchFieldProps } from "react-aria-components";
+//#region src/components/SearchInput/types.d.ts
+export interface SearchInputProps extends FormInputContainerDefaultProps<SearchFieldProps, SearchInputTheme> {
+  /** Temporary text that occupies the text input when it is empty */
+  placeholder?: string;
+}
+//#endregion

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

@@ -0,0 +1,9 @@
+import { FormInputContainerDefaultProps } from "../Form/types.js";
+import { SearchInputTheme } from "./styles.js";
+import { SearchFieldProps } from "react-aria-components";
+//#region src/components/SearchInput/types.d.ts
+export interface SearchInputProps extends FormInputContainerDefaultProps<SearchFieldProps, SearchInputTheme> {
+  /** Temporary text that occupies the text input when it is empty */
+  placeholder?: string;
+}
+//#endregion

package/dist/index.cjs

@@ -28,6 +28,7 @@ const require_link = require("./styleD/build/typescript/component/link.cjs");
 const require_radioGroup = require("./styleD/build/typescript/component/radioGroup.cjs");
 const require_select = require("./styleD/build/typescript/component/select.cjs");
 const require_textArea = require("./styleD/build/typescript/component/textArea.cjs");
+const require_searchInput = require("./styleD/build/typescript/component/searchInput.cjs");
 const require_textInput = require("./styleD/build/typescript/component/textInput.cjs");
 const require_tooltip = require("./styleD/build/typescript/component/tooltip.cjs");
 const require_topBar = require("./styleD/build/typescript/component/topBar.cjs");
@@ -74,6 +75,7 @@ exports.componentMenu = require_menu.componentMenu;
 exports.componentModal = require_modal.componentModal;
 exports.componentPagination = require_pagination.componentPagination;
 exports.componentRadioGroup = require_radioGroup.componentRadioGroup;
+exports.componentSearchInput = require_searchInput.componentSearchInput;
 exports.componentSelect = require_select.componentSelect;
 exports.componentSidebarStepperNavigation = require_sidebarStepperNavigation.componentSidebarStepperNavigation;
 exports.componentTable = require_table.componentTable;

package/dist/index.d.cts

@@ -21,6 +21,7 @@ import { ComponentMenu, componentMenu } from "./styleD/build/typescript/componen
 import { ComponentModal, componentModal } from "./styleD/build/typescript/component/modal.cjs";
 import { ComponentPagination, componentPagination } from "./styleD/build/typescript/component/pagination.cjs";
 import { ComponentRadioGroup, componentRadioGroup } from "./styleD/build/typescript/component/radioGroup.cjs";
+import { ComponentSearchInput, componentSearchInput } from "./styleD/build/typescript/component/searchInput.cjs";
 import { ComponentSelect, componentSelect } from "./styleD/build/typescript/component/select.cjs";
 import { ComponentSidebarStepperNavigation, componentSidebarStepperNavigation } from "./styleD/build/typescript/component/sidebarStepperNavigation.cjs";
 import { ComponentTable, componentTable } from "./styleD/build/typescript/component/table.cjs";
@@ -47,4 +48,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 ComponentBadge, type ComponentButton, type ComponentButtonGroup, 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 ComponentPagination, type ComponentRadioGroup, type ComponentSelect, type ComponentSidebarStepperNavigation, type ComponentTable, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTextListInput, type ComponentTile, type ComponentToggleSwitch, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, 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, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentPagination, componentRadioGroup, componentSelect, componentSidebarStepperNavigation, componentTable, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTextListInput, componentTile, componentToggleSwitch, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, 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 ComponentBadge, type ComponentButton, type ComponentButtonGroup, 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 ComponentPagination, type ComponentRadioGroup, type ComponentSearchInput, type ComponentSelect, type ComponentSidebarStepperNavigation, type ComponentTable, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTextListInput, type ComponentTile, type ComponentToggleSwitch, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, 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, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentPagination, componentRadioGroup, componentSearchInput, componentSelect, componentSidebarStepperNavigation, componentTable, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTextListInput, componentTile, componentToggleSwitch, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.d.ts

@@ -21,6 +21,7 @@ import { ComponentMenu, componentMenu } from "./styleD/build/typescript/componen
 import { ComponentModal, componentModal } from "./styleD/build/typescript/component/modal.js";
 import { ComponentPagination, componentPagination } from "./styleD/build/typescript/component/pagination.js";
 import { ComponentRadioGroup, componentRadioGroup } from "./styleD/build/typescript/component/radioGroup.js";
+import { ComponentSearchInput, componentSearchInput } from "./styleD/build/typescript/component/searchInput.js";
 import { ComponentSelect, componentSelect } from "./styleD/build/typescript/component/select.js";
 import { ComponentSidebarStepperNavigation, componentSidebarStepperNavigation } from "./styleD/build/typescript/component/sidebarStepperNavigation.js";
 import { ComponentTable, componentTable } from "./styleD/build/typescript/component/table.js";
@@ -47,4 +48,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 ComponentBadge, type ComponentButton, type ComponentButtonGroup, 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 ComponentPagination, type ComponentRadioGroup, type ComponentSelect, type ComponentSidebarStepperNavigation, type ComponentTable, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTextListInput, type ComponentTile, type ComponentToggleSwitch, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, 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, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentPagination, componentRadioGroup, componentSelect, componentSidebarStepperNavigation, componentTable, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTextListInput, componentTile, componentToggleSwitch, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, 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 ComponentBadge, type ComponentButton, type ComponentButtonGroup, 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 ComponentPagination, type ComponentRadioGroup, type ComponentSearchInput, type ComponentSelect, type ComponentSidebarStepperNavigation, type ComponentTable, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTextListInput, type ComponentTile, type ComponentToggleSwitch, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, 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, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentPagination, componentRadioGroup, componentSearchInput, componentSelect, componentSidebarStepperNavigation, componentTable, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTextListInput, componentTile, componentToggleSwitch, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.js

@@ -27,6 +27,7 @@ import { componentLink } from "./styleD/build/typescript/component/link.js";
 import { componentRadioGroup } from "./styleD/build/typescript/component/radioGroup.js";
 import { componentSelect } from "./styleD/build/typescript/component/select.js";
 import { componentTextArea } from "./styleD/build/typescript/component/textArea.js";
+import { componentSearchInput } from "./styleD/build/typescript/component/searchInput.js";
 import { componentTextInput } from "./styleD/build/typescript/component/textInput.js";
 import { componentTooltip } from "./styleD/build/typescript/component/tooltip.js";
 import { componentTopBar } from "./styleD/build/typescript/component/topBar.js";
@@ -47,4 +48,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, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentPagination, componentRadioGroup, componentSelect, componentSidebarStepperNavigation, componentTable, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTextListInput, componentTile, componentToggleSwitch, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentPagination, componentRadioGroup, componentSearchInput, componentSelect, componentSidebarStepperNavigation, componentTable, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTextListInput, componentTile, componentToggleSwitch, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

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

@@ -23,9 +23,12 @@
 		0.875rem/1.3 'Open Sans';
 	--component-alert-banner-shared-content-typography-letter-spacing: 0rem;
 	--component-alert-banner-shared-content-typography-font-width: 95;
-	--component-alert-banner-shared-content-icon-color: #545454;
 	--component-alert-banner-information-background-color: #e8f0fb;
+	--component-alert-banner-information-icon-color: #00344e;
 	--component-alert-banner-success-background-color: #cde4c9;
+	--component-alert-banner-success-icon-color: #326528;
 	--component-alert-banner-warning-background-color: #ffedac;
+	--component-alert-banner-warning-icon-color: #433608;
 	--component-alert-banner-error-background-color: #f5c6c0;
+	--component-alert-banner-error-icon-color: #8c2113;
 }

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

@@ -7,9 +7,9 @@
 	--component-badge-shared-align-items: center;
 	--component-badge-shared-justify-content: center;
 	--component-badge-size-md-padding-top: 4px;
-	--component-badge-size-md-padding-right: 12px;
+	--component-badge-size-md-padding-right: 10px;
 	--component-badge-size-md-padding-bottom: 4px;
-	--component-badge-size-md-padding-left: 12px;
+	--component-badge-size-md-padding-left: 10px;
 	--component-badge-size-md-weight-strong-typography-font: normal 700 1rem/1.15
 		'Open Sans';
 	--component-badge-size-md-weight-strong-typography-letter-spacing: -0.03125rem;

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

@@ -0,0 +1,34 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-search-input-shared-color: #000000;
+	--component-search-input-shared-cursor: text;
+	--component-search-input-shared-padding-top: 0;
+	--component-search-input-shared-padding-right: 0.75rem;
+	--component-search-input-shared-padding-bottom: 0;
+	--component-search-input-shared-padding-left: 0.75rem;
+	--component-search-input-shared-margin-top: 0.25rem; /** spacing between the input itself and the previous element (label or description) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 8px, then margin-top should be 4px */
+	--component-search-input-shared-border-radius: 0.25rem;
+	--component-search-input-shared-border: 0.0625rem solid #545454;
+	--component-search-input-shared-background-color: #ffffff;
+	--component-search-input-shared-placeholder-color: #545454;
+	--component-search-input-shared-disabled-background-color: #ffffff;
+	--component-search-input-shared-disabled-cursor: not-allowed;
+	--component-search-input-shared-disabled-color: #999999;
+	--component-search-input-shared-disabled-border: 0.0625rem solid #dcdcdc;
+	--component-search-input-shared-focused-outline: 0.125rem auto #0072a9;
+	--component-search-input-shared-error-border: 0.0625rem solid #b42a19;
+	--component-search-input-sm-height: 2rem;
+	--component-search-input-sm-icon-margin-right: 6px;
+	--component-search-input-sm-typography-font: normal 460 0.875rem/1.3
+		'Open Sans';
+	--component-search-input-sm-typography-letter-spacing: 0rem;
+	--component-search-input-sm-typography-font-width: 95;
+	--component-search-input-md-height: 2.5rem;
+	--component-search-input-md-icon-margin-right: 8px;
+	--component-search-input-md-typography-font: normal 460 1rem/1.3 'Open Sans';
+	--component-search-input-md-typography-letter-spacing: 0rem;
+	--component-search-input-md-typography-font-width: 95;
+}

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

@@ -27,14 +27,25 @@ const componentAlertBanner = {
 				font: "normal 460 0.875rem/1.3 Open Sans",
 				letterSpacing: "0rem",
 				fontWidth: 95
-			},
-			icon: { color: "#545454" }
+			}
 		}
 	},
-	information: { backgroundColor: "#e8f0fb" },
-	success: { backgroundColor: "#cde4c9" },
-	warning: { backgroundColor: "#ffedac" },
-	error: { backgroundColor: "#f5c6c0" }
+	information: {
+		backgroundColor: "#e8f0fb",
+		icon: { color: "#00344e" }
+	},
+	success: {
+		backgroundColor: "#cde4c9",
+		icon: { color: "#326528" }
+	},
+	warning: {
+		backgroundColor: "#ffedac",
+		icon: { color: "#433608" }
+	},
+	error: {
+		backgroundColor: "#f5c6c0",
+		icon: { color: "#8c2113" }
+	}
 };
 //#endregion
 exports.componentAlertBanner = componentAlertBanner;

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

@@ -28,22 +28,31 @@ export declare const componentAlertBanner: {
         letterSpacing: string;
         fontWidth: number;
       };
-      icon: {
-        color: string;
-      };
     };
   };
   information: {
     backgroundColor: string;
+    icon: {
+      color: string;
+    };
   };
   success: {
     backgroundColor: string;
+    icon: {
+      color: string;
+    };
   };
   warning: {
     backgroundColor: string;
+    icon: {
+      color: string;
+    };
   };
   error: {
     backgroundColor: string;
+    icon: {
+      color: string;
+    };
   };
 };
 export type ComponentAlertBanner = typeof componentAlertBanner;

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

@@ -28,22 +28,31 @@ export declare const componentAlertBanner: {
         letterSpacing: string;
         fontWidth: number;
       };
-      icon: {
-        color: string;
-      };
     };
   };
   information: {
     backgroundColor: string;
+    icon: {
+      color: string;
+    };
   };
   success: {
     backgroundColor: string;
+    icon: {
+      color: string;
+    };
   };
   warning: {
     backgroundColor: string;
+    icon: {
+      color: string;
+    };
   };
   error: {
     backgroundColor: string;
+    icon: {
+      color: string;
+    };
   };
 };
 export type ComponentAlertBanner = typeof componentAlertBanner;

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

@@ -27,14 +27,25 @@ const componentAlertBanner = {
 				font: "normal 460 0.875rem/1.3 Open Sans",
 				letterSpacing: "0rem",
 				fontWidth: 95
-			},
-			icon: { color: "#545454" }
+			}
 		}
 	},
-	information: { backgroundColor: "#e8f0fb" },
-	success: { backgroundColor: "#cde4c9" },
-	warning: { backgroundColor: "#ffedac" },
-	error: { backgroundColor: "#f5c6c0" }
+	information: {
+		backgroundColor: "#e8f0fb",
+		icon: { color: "#00344e" }
+	},
+	success: {
+		backgroundColor: "#cde4c9",
+		icon: { color: "#326528" }
+	},
+	warning: {
+		backgroundColor: "#ffedac",
+		icon: { color: "#433608" }
+	},
+	error: {
+		backgroundColor: "#f5c6c0",
+		icon: { color: "#8c2113" }
+	}
 };
 //#endregion
 export { componentAlertBanner };

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

@@ -12,9 +12,9 @@ const componentBadge = {
 		md: {
 			padding: {
 				top: "4px",
-				right: "12px",
+				right: "10px",
 				bottom: "4px",
-				left: "12px"
+				left: "10px"
 			},
 			weight: {
 				strong: { typography: {

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

@@ -12,9 +12,9 @@ const componentBadge = {
 		md: {
 			padding: {
 				top: "4px",
-				right: "12px",
+				right: "10px",
 				bottom: "4px",
-				left: "12px"
+				left: "10px"
 			},
 			weight: {
 				strong: { typography: {

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

@@ -0,0 +1,49 @@
+//#region src/styleD/build/typescript/component/searchInput.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentSearchInput = {
+	shared: {
+		color: "#000000",
+		cursor: "text",
+		padding: {
+			top: "0",
+			right: "0.75rem",
+			bottom: "0",
+			left: "0.75rem"
+		},
+		marginTop: "0.25rem",
+		borderRadius: "0.25rem",
+		border: "0.0625rem solid #545454",
+		backgroundColor: "#ffffff",
+		placeholderColor: "#545454",
+		disabled: {
+			backgroundColor: "#ffffff",
+			cursor: "not-allowed",
+			color: "#999999",
+			border: "0.0625rem solid #dcdcdc"
+		},
+		focused: { outline: "0.125rem auto #0072a9" },
+		error: { border: "0.0625rem solid #b42a19" }
+	},
+	sm: {
+		height: "2rem",
+		iconMarginRight: "6px",
+		typography: {
+			font: "normal 460 0.875rem/1.3 Open Sans",
+			letterSpacing: "0rem",
+			fontWidth: 95
+		}
+	},
+	md: {
+		height: "2.5rem",
+		iconMarginRight: "8px",
+		typography: {
+			font: "normal 460 1rem/1.3 Open Sans",
+			letterSpacing: "0rem",
+			fontWidth: 95
+		}
+	}
+};
+//#endregion
+exports.componentSearchInput = componentSearchInput;

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

@@ -0,0 +1,53 @@
+//#region src/styleD/build/typescript/component/searchInput.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentSearchInput: {
+  shared: {
+    color: string;
+    cursor: string;
+    padding: {
+      top: string;
+      right: string;
+      bottom: string;
+      left: string;
+    };
+    marginTop: string;
+    borderRadius: string;
+    border: string;
+    backgroundColor: string;
+    placeholderColor: string;
+    disabled: {
+      backgroundColor: string;
+      cursor: string;
+      color: string;
+      border: string;
+    };
+    focused: {
+      outline: string;
+    };
+    error: {
+      border: string;
+    };
+  };
+  sm: {
+    height: string;
+    iconMarginRight: string;
+    typography: {
+      font: string;
+      letterSpacing: string;
+      fontWidth: number;
+    };
+  };
+  md: {
+    height: string;
+    iconMarginRight: string;
+    typography: {
+      font: string;
+      letterSpacing: string;
+      fontWidth: number;
+    };
+  };
+};
+export type ComponentSearchInput = typeof componentSearchInput;
+//#endregion

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

@@ -0,0 +1,53 @@
+//#region src/styleD/build/typescript/component/searchInput.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentSearchInput: {
+  shared: {
+    color: string;
+    cursor: string;
+    padding: {
+      top: string;
+      right: string;
+      bottom: string;
+      left: string;
+    };
+    marginTop: string;
+    borderRadius: string;
+    border: string;
+    backgroundColor: string;
+    placeholderColor: string;
+    disabled: {
+      backgroundColor: string;
+      cursor: string;
+      color: string;
+      border: string;
+    };
+    focused: {
+      outline: string;
+    };
+    error: {
+      border: string;
+    };
+  };
+  sm: {
+    height: string;
+    iconMarginRight: string;
+    typography: {
+      font: string;
+      letterSpacing: string;
+      fontWidth: number;
+    };
+  };
+  md: {
+    height: string;
+    iconMarginRight: string;
+    typography: {
+      font: string;
+      letterSpacing: string;
+      fontWidth: number;
+    };
+  };
+};
+export type ComponentSearchInput = typeof componentSearchInput;
+//#endregion

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

@@ -0,0 +1,49 @@
+//#region src/styleD/build/typescript/component/searchInput.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentSearchInput = {
+	shared: {
+		color: "#000000",
+		cursor: "text",
+		padding: {
+			top: "0",
+			right: "0.75rem",
+			bottom: "0",
+			left: "0.75rem"
+		},
+		marginTop: "0.25rem",
+		borderRadius: "0.25rem",
+		border: "0.0625rem solid #545454",
+		backgroundColor: "#ffffff",
+		placeholderColor: "#545454",
+		disabled: {
+			backgroundColor: "#ffffff",
+			cursor: "not-allowed",
+			color: "#999999",
+			border: "0.0625rem solid #dcdcdc"
+		},
+		focused: { outline: "0.125rem auto #0072a9" },
+		error: { border: "0.0625rem solid #b42a19" }
+	},
+	sm: {
+		height: "2rem",
+		iconMarginRight: "6px",
+		typography: {
+			font: "normal 460 0.875rem/1.3 Open Sans",
+			letterSpacing: "0rem",
+			fontWidth: 95
+		}
+	},
+	md: {
+		height: "2.5rem",
+		iconMarginRight: "8px",
+		typography: {
+			font: "normal 460 1rem/1.3 Open Sans",
+			letterSpacing: "0rem",
+			fontWidth: 95
+		}
+	}
+};
+//#endregion
+export { componentSearchInput };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.74",
+  "version": "0.0.76",
   "repository": {
     "url": "https://github.com/guardian/stand"
   },
@@ -197,6 +197,16 @@
         "default": "./dist/Select.cjs"
       }
     },
+    "./SearchInput": {
+      "import": {
+        "types": "./dist/SearchInput.d.ts",
+        "default": "./dist/SearchInput.js"
+      },
+      "require": {
+        "types": "./dist/SearchInput.d.cts",
+        "default": "./dist/SearchInput.cjs"
+      }
+    },
     "./TextInput": {
       "import": {
         "types": "./dist/TextInput.d.ts",
@@ -472,6 +482,7 @@
     "./component/form.css": "./dist/styleD/build/css/component/form.css",
     "./component/inlineMessage.css": "./dist/styleD/build/css/component/inlineMessage.css",
     "./component/select.css": "./dist/styleD/build/css/component/select.css",
+    "./component/searchInput.css": "./dist/styleD/build/css/component/searchInput.css",
     "./component/textInput.css": "./dist/styleD/build/css/component/textInput.css",
     "./component/radioGroup.css": "./dist/styleD/build/css/component/radioGroup.css",
     "./component/checkbox.css": "./dist/styleD/build/css/component/checkbox.css",
@@ -566,6 +577,9 @@
       "Select": [
         "./dist/Select.d.ts"
       ],
+      "SearchInput": [
+        "./dist/SearchInput.d.ts"
+      ],
       "TextInput": [
         "./dist/TextInput.d.ts"
       ],