@guardian/stand 0.0.73 → 0.0.75

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

@@ -53,8 +53,8 @@ interface MenuItemProps$1 extends DefaultProps<MenuItemTheme, MenuItemProps['cla
    */
   size?: MenuPopoverProps['size'];
 }
-type MenuSeparatorProps = DefaultProps<MenuSeparatorTheme, SeparatorProps['className']>;
-interface MenuPopoverProps extends DefaultProps<MenuPopoverTheme, PopoverProps['className']>, PopoverProps {
+export type MenuSeparatorProps = DefaultProps<MenuSeparatorTheme, SeparatorProps['className']>;
+export interface MenuPopoverProps extends DefaultProps<MenuPopoverTheme, PopoverProps['className']>, PopoverProps {
   /**
    * Size variant of the Popover, this doesn't need to be passed if the Popover is a child of Menu, as it will inherit the size of the Menu.
    */
@@ -62,4 +62,4 @@ interface MenuPopoverProps extends DefaultProps<MenuPopoverTheme, PopoverProps['
 }
 type MenuTriggerProps$1 = MenuTriggerProps;
 //#endregion
-export { MenuItemProps$1 as MenuItemProps, MenuPopoverProps, MenuProps$1 as MenuProps, MenuSectionProps$1 as MenuSectionProps, MenuSeparatorProps, MenuTriggerProps$1 as MenuTriggerProps };
+export { MenuItemProps$1 as MenuItemProps, MenuProps$1 as MenuProps, MenuSectionProps$1 as MenuSectionProps, MenuTriggerProps$1 as MenuTriggerProps };

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

@@ -53,8 +53,8 @@ interface MenuItemProps$1 extends DefaultProps<MenuItemTheme, MenuItemProps['cla
    */
   size?: MenuPopoverProps['size'];
 }
-type MenuSeparatorProps = DefaultProps<MenuSeparatorTheme, SeparatorProps['className']>;
-interface MenuPopoverProps extends DefaultProps<MenuPopoverTheme, PopoverProps['className']>, PopoverProps {
+export type MenuSeparatorProps = DefaultProps<MenuSeparatorTheme, SeparatorProps['className']>;
+export interface MenuPopoverProps extends DefaultProps<MenuPopoverTheme, PopoverProps['className']>, PopoverProps {
   /**
    * Size variant of the Popover, this doesn't need to be passed if the Popover is a child of Menu, as it will inherit the size of the Menu.
    */
@@ -62,4 +62,4 @@ interface MenuPopoverProps extends DefaultProps<MenuPopoverTheme, PopoverProps['
 }
 type MenuTriggerProps$1 = MenuTriggerProps;
 //#endregion
-export { MenuItemProps$1 as MenuItemProps, MenuPopoverProps, MenuProps$1 as MenuProps, MenuSectionProps$1 as MenuSectionProps, MenuSeparatorProps, MenuTriggerProps$1 as MenuTriggerProps };
+export { MenuItemProps$1 as MenuItemProps, MenuProps$1 as MenuProps, MenuSectionProps$1 as MenuSectionProps, MenuTriggerProps$1 as MenuTriggerProps };

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

@@ -1,8 +1,8 @@
 import { DialogButtonsProps, DialogContentProps, DialogDismissProps, DialogHeaderProps, DialogProps, DialogTriggerProps, ModalProps } from "./types.cjs";
 import React from "react";
 //#region src/components/Modal/Modal.d.ts
-declare const Modal: ({ theme, children, cssOverrides, ...props }: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-declare const DialogTrigger: (props: DialogTriggerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ theme, children, cssOverrides, ...props }: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DialogTrigger: (props: DialogTriggerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 interface DialogCompound {
   (props: DialogProps): React.ReactElement;
   Header: (props: DialogHeaderProps) => React.ReactElement;
@@ -10,6 +10,5 @@ interface DialogCompound {
   Content: (props: DialogContentProps) => React.ReactElement;
   Dismiss: (props: DialogDismissProps) => React.ReactElement;
 }
-declare const Dialog: DialogCompound;
-//#endregion
-export { Dialog, DialogTrigger, Modal };
+export declare const Dialog: DialogCompound;
+//#endregion

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

@@ -1,8 +1,8 @@
 import { DialogButtonsProps, DialogContentProps, DialogDismissProps, DialogHeaderProps, DialogProps, DialogTriggerProps, ModalProps } from "./types.js";
 import React from "react";
 //#region src/components/Modal/Modal.d.ts
-declare const Modal: ({ theme, children, cssOverrides, ...props }: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-declare const DialogTrigger: (props: DialogTriggerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ theme, children, cssOverrides, ...props }: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DialogTrigger: (props: DialogTriggerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 interface DialogCompound {
   (props: DialogProps): React.ReactElement;
   Header: (props: DialogHeaderProps) => React.ReactElement;
@@ -10,6 +10,5 @@ interface DialogCompound {
   Content: (props: DialogContentProps) => React.ReactElement;
   Dismiss: (props: DialogDismissProps) => React.ReactElement;
 }
-declare const Dialog: DialogCompound;
-//#endregion
-export { Dialog, DialogTrigger, Modal };
+export declare const Dialog: DialogCompound;
+//#endregion

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

@@ -2,8 +2,7 @@ import { DeepPartial, Prettify } from "../../util/types.cjs";
 import { ComponentModal } from "../../styleD/build/typescript/component/modal.cjs";
 import { SerializedStyles } from "@emotion/react";
 //#region src/components/Modal/styles.d.ts
-type ModalTheme = Prettify<Pick<ComponentModal, 'modal' | 'overlay'>>;
-type PartialModalTheme = Prettify<DeepPartial<ModalTheme>>;
-type DialogTheme = Prettify<ComponentModal['dialog']>;
-//#endregion
-export { DialogTheme, ModalTheme, PartialModalTheme };
+export type ModalTheme = Prettify<Pick<ComponentModal, 'modal' | 'overlay'>>;
+export type PartialModalTheme = Prettify<DeepPartial<ModalTheme>>;
+export type DialogTheme = Prettify<ComponentModal['dialog']>;
+//#endregion

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

@@ -2,8 +2,7 @@ import { DeepPartial, Prettify } from "../../util/types.js";
 import { ComponentModal } from "../../styleD/build/typescript/component/modal.js";
 import { SerializedStyles } from "@emotion/react";
 //#region src/components/Modal/styles.d.ts
-type ModalTheme = Prettify<Pick<ComponentModal, 'modal' | 'overlay'>>;
-type PartialModalTheme = Prettify<DeepPartial<ModalTheme>>;
-type DialogTheme = Prettify<ComponentModal['dialog']>;
-//#endregion
-export { DialogTheme, ModalTheme, PartialModalTheme };
+export type ModalTheme = Prettify<Pick<ComponentModal, 'modal' | 'overlay'>>;
+export type PartialModalTheme = Prettify<DeepPartial<ModalTheme>>;
+export type DialogTheme = Prettify<ComponentModal['dialog']>;
+//#endregion

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

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

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

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

package/dist/components/Pagination/Pagination.d.cts

@@ -1,5 +1,4 @@
 import { PaginationProps } from "./types.cjs";
 //#region src/components/Pagination/Pagination.d.ts
-declare const Pagination: ({ currentPage, totalItems, pageSize, onPageChange, siblingCount, boundaryCount, showSummary, renderSummary, collapseBelow, labels, theme, cssOverrides, className }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//#endregion
-export { Pagination };
+export declare const Pagination: ({ currentPage, totalItems, pageSize, onPageChange, siblingCount, boundaryCount, showSummary, renderSummary, collapseBelow, labels, theme, cssOverrides, className }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion

package/dist/components/Pagination/Pagination.d.ts

@@ -1,5 +1,4 @@
 import { PaginationProps } from "./types.js";
 //#region src/components/Pagination/Pagination.d.ts
-declare const Pagination: ({ currentPage, totalItems, pageSize, onPageChange, siblingCount, boundaryCount, showSummary, renderSummary, collapseBelow, labels, theme, cssOverrides, className }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//#endregion
-export { Pagination };
+export declare const Pagination: ({ currentPage, totalItems, pageSize, onPageChange, siblingCount, boundaryCount, showSummary, renderSummary, collapseBelow, labels, theme, cssOverrides, className }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion

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

@@ -2,7 +2,6 @@ import { DeepPartial, Prettify } from "../../util/types.cjs";
 import { ComponentPagination } from "../../styleD/build/typescript/component/pagination.cjs";
 import { SerializedStyles } from "@emotion/react";
 //#region src/components/Pagination/styles.d.ts
-type PaginationTheme = Prettify<ComponentPagination>;
-type PartialPaginationTheme = Prettify<DeepPartial<PaginationTheme>>;
-//#endregion
-export { PaginationTheme, PartialPaginationTheme };
+export type PaginationTheme = Prettify<ComponentPagination>;
+export type PartialPaginationTheme = Prettify<DeepPartial<PaginationTheme>>;
+//#endregion

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

@@ -2,7 +2,6 @@ import { DeepPartial, Prettify } from "../../util/types.js";
 import { ComponentPagination } from "../../styleD/build/typescript/component/pagination.js";
 import { SerializedStyles } from "@emotion/react";
 //#region src/components/Pagination/styles.d.ts
-type PaginationTheme = Prettify<ComponentPagination>;
-type PartialPaginationTheme = Prettify<DeepPartial<PaginationTheme>>;
-//#endregion
-export { PaginationTheme, PartialPaginationTheme };
+export type PaginationTheme = Prettify<ComponentPagination>;
+export type PartialPaginationTheme = Prettify<DeepPartial<PaginationTheme>>;
+//#endregion

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

@@ -3,7 +3,7 @@ import { Breakpoint } from "../../styleD/utils/semantic/mq.cjs";
 import { PaginationTheme } from "./styles.cjs";
 import { ReactNode } from "react";
 //#region src/components/Pagination/types.d.ts
-interface PaginationSummaryInfo {
+export interface PaginationSummaryInfo {
   /** The currently active page (1-based). */
   currentPage: number;
   /** Total number of pages. */
@@ -17,7 +17,7 @@ interface PaginationSummaryInfo {
   /** 1-based index of the last item on the current page. */
   endItem: number;
 }
-interface PaginationLabels {
+export interface PaginationLabels {
   /** Accessible label for the surrounding `nav` element. */
   nav?: string;
   /** Accessible label for the previous-page button. */
@@ -29,7 +29,7 @@ interface PaginationLabels {
   /** Text shown in the compact (collapsed) view below the `collapseBelow` breakpoint. */
   status?: (currentPage: number, totalPages: number) => string;
 }
-type PaginationProps = DefaultProps<PaginationTheme> & {
+export type PaginationProps = DefaultProps<PaginationTheme> & {
   /** The currently active page (1-based). */
   currentPage: number;
   /** Total number of items across all pages. */
@@ -55,5 +55,4 @@ type PaginationProps = DefaultProps<PaginationTheme> & {
   /** Overrides for the accessible labels. */
   labels?: PaginationLabels;
 };
-//#endregion
-export { PaginationLabels, PaginationProps, PaginationSummaryInfo };
+//#endregion

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

@@ -3,7 +3,7 @@ import { Breakpoint } from "../../styleD/utils/semantic/mq.js";
 import { PaginationTheme } from "./styles.js";
 import { ReactNode } from "react";
 //#region src/components/Pagination/types.d.ts
-interface PaginationSummaryInfo {
+export interface PaginationSummaryInfo {
   /** The currently active page (1-based). */
   currentPage: number;
   /** Total number of pages. */
@@ -17,7 +17,7 @@ interface PaginationSummaryInfo {
   /** 1-based index of the last item on the current page. */
   endItem: number;
 }
-interface PaginationLabels {
+export interface PaginationLabels {
   /** Accessible label for the surrounding `nav` element. */
   nav?: string;
   /** Accessible label for the previous-page button. */
@@ -29,7 +29,7 @@ interface PaginationLabels {
   /** Text shown in the compact (collapsed) view below the `collapseBelow` breakpoint. */
   status?: (currentPage: number, totalPages: number) => string;
 }
-type PaginationProps = DefaultProps<PaginationTheme> & {
+export type PaginationProps = DefaultProps<PaginationTheme> & {
   /** The currently active page (1-based). */
   currentPage: number;
   /** Total number of items across all pages. */
@@ -55,5 +55,4 @@ type PaginationProps = DefaultProps<PaginationTheme> & {
   /** Overrides for the accessible labels. */
   labels?: PaginationLabels;
 };
-//#endregion
-export { PaginationLabels, PaginationProps, PaginationSummaryInfo };
+//#endregion

package/dist/components/RadioGroup/RadioGroup.d.cts

@@ -1,6 +1,5 @@
 import { RadioGroupProps, RadioProps } from "./types.cjs";
 //#region src/components/RadioGroup/RadioGroup.d.ts
-declare function RadioGroup({ size, orientation, isInvalid, theme, children, ...props }: RadioGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function Radio({ theme, size, children, isInvalid, ...props }: RadioProps): import("@emotion/react/jsx-runtime").JSX.Element;
-//#endregion
-export { Radio, RadioGroup };
+export declare function RadioGroup({ size, orientation, isInvalid, theme, children, ...props }: RadioGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Radio({ theme, size, children, isInvalid, ...props }: RadioProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -1,6 +1,5 @@
 import { RadioGroupProps, RadioProps } from "./types.js";
 //#region src/components/RadioGroup/RadioGroup.d.ts
-declare function RadioGroup({ size, orientation, isInvalid, theme, children, ...props }: RadioGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function Radio({ theme, size, children, isInvalid, ...props }: RadioProps): import("@emotion/react/jsx-runtime").JSX.Element;
-//#endregion
-export { Radio, RadioGroup };
+export declare function RadioGroup({ size, orientation, isInvalid, theme, children, ...props }: RadioGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Radio({ theme, size, children, isInvalid, ...props }: RadioProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion

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

@@ -3,6 +3,5 @@ import { ComponentRadioGroup } from "../../styleD/build/typescript/component/rad
 import "./types.cjs";
 import { SerializedStyles } from "@emotion/react";
 //#region src/components/RadioGroup/styles.d.ts
-type RadioGroupTheme = Prettify<ComponentRadioGroup>;
-//#endregion
-export { RadioGroupTheme };
+export type RadioGroupTheme = Prettify<ComponentRadioGroup>;
+//#endregion

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

@@ -3,6 +3,5 @@ import { ComponentRadioGroup } from "../../styleD/build/typescript/component/rad
 import "./types.js";
 import { SerializedStyles } from "@emotion/react";
 //#region src/components/RadioGroup/styles.d.ts
-type RadioGroupTheme = Prettify<ComponentRadioGroup>;
-//#endregion
-export { RadioGroupTheme };
+export type RadioGroupTheme = Prettify<ComponentRadioGroup>;
+//#endregion

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/components/Select/Select.d.cts

@@ -1,6 +1,5 @@
 import { OptionProps, SelectProps } from "./types.cjs";
 //#region src/components/Select/Select.d.ts
-declare function Option({ children, theme, id, ...props }: OptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function Select({ size, isInvalid, theme, placement, shouldFlip, children, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
-//#endregion
-export { Option, Select };
+export declare function Option({ children, theme, id, ...props }: OptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Select({ size, isInvalid, theme, placement, shouldFlip, children, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion

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

@@ -1,6 +1,5 @@
 import { OptionProps, SelectProps } from "./types.js";
 //#region src/components/Select/Select.d.ts
-declare function Option({ children, theme, id, ...props }: OptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function Select({ size, isInvalid, theme, placement, shouldFlip, children, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
-//#endregion
-export { Option, Select };
+export declare function Option({ children, theme, id, ...props }: OptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Select({ size, isInvalid, theme, placement, shouldFlip, children, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion

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

@@ -3,7 +3,6 @@ import { ComponentSelect } from "../../styleD/build/typescript/component/select.
 import "./types.cjs";
 import { SerializedStyles } from "@emotion/react";
 //#region src/components/Select/styles.d.ts
-type SelectTheme = Prettify<ComponentSelect>;
-type PartialSelectTheme = Prettify<DeepPartial<SelectTheme>>;
-//#endregion
-export { PartialSelectTheme, SelectTheme };
+export type SelectTheme = Prettify<ComponentSelect>;
+export type PartialSelectTheme = Prettify<DeepPartial<SelectTheme>>;
+//#endregion