@guardian/stand 0.0.19 → 0.0.21

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

@@ -2,10 +2,7 @@
 
 const componentSelect = {
   shared: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "0.25rem",
-    maxWidth: "333px",
+    maxWidth: "320px",
     width: "100%",
     hover: {
       backgroundColor: "#f6f6f6",
@@ -13,75 +10,59 @@ const componentSelect = {
     },
     pressed: {
       backgroundColor: "#ededed"
-    }
-  },
-  label: {
-    color: "#000000",
-    typography: {
-      font: "normal 700 1rem/1.15 Open Sans",
-      letterSpacing: "-0.03125rem",
-      fontWidth: 95
-    }
-  },
-  helpText: {
-    color: "#545454",
-    typography: {
-      font: "normal 460 0.875rem/1.3 Open Sans",
-      letterSpacing: "0rem",
-      fontWidth: 95
-    }
-  },
-  button: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginTop: "0.25rem",
-    backgroundColor: "#ffffff",
-    border: "0.0625rem solid #545454",
-    borderRadius: "0.25rem",
-    height: "2.5rem",
-    paddingLeft: "0.75rem",
-    paddingRight: "0.25rem",
-    color: "#545454",
-    typography: {
-      font: "normal 460 1rem/1.3 Open Sans",
-      letterSpacing: "0rem",
-      fontWidth: 95
-    },
-    focused: {
-      outline: "0.125rem solid #0072a9",
-      "outline-offset": "0.125rem"
     },
-    disabled: {
+    button: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginTop: "0.25rem",
       backgroundColor: "#ffffff",
-      cursor: "not-allowed",
-      color: "#999999",
-      border: "0.0625rem solid #dcdcdc"
+      border: "0.0625rem solid #545454",
+      borderRadius: "0.25rem",
+      height: "2.5rem",
+      paddingLeft: "0.75rem",
+      paddingRight: "0.25rem",
+      color: "#545454",
+      typography: {
+        font: "normal 460 1rem/1.3 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      },
+      focused: {
+        outline: "0.125rem solid #0072a9",
+        "outline-offset": "0.125rem"
+      },
+      disabled: {
+        backgroundColor: "#ffffff",
+        cursor: "not-allowed",
+        color: "#999999",
+        border: "0.0625rem solid #dcdcdc"
+      },
+      error: {
+        border: "0.0625rem solid #b42a19"
+      }
     },
-    error: {
-      border: "0.0625rem solid #b42a19"
-    }
-  },
-  option: {
-    paddingLeft: "1rem",
-    paddingRight: "1rem",
-    paddingTop: "0.75rem",
-    paddingBottom: "0.75rem",
-    focused: {
-      outline: "0.125rem solid #0072a9",
-      "outline-offset": "0",
-      backgroundColor: "inherit"
-    }
-  },
-  listBox: {
-    typography: {
-      font: "normal 460 1rem/1.3 Open Sans",
-      letterSpacing: "0rem",
-      fontWidth: 95
+    option: {
+      paddingLeft: "1rem",
+      paddingRight: "1rem",
+      paddingTop: "0.75rem",
+      paddingBottom: "0.75rem",
+      focused: {
+        outline: "0.125rem solid #0072a9",
+        "outline-offset": "0",
+        backgroundColor: "inherit"
+      }
     },
-    border: "0.0625rem solid #cccccc",
-    backgroundColor: "#ffffff",
-    shadow: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
+    listBox: {
+      typography: {
+        font: "normal 460 1rem/1.3 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      },
+      border: "0.0625rem solid #cccccc",
+      backgroundColor: "#ffffff",
+      shadow: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
+    }
   }
 };
 

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

@@ -1,9 +1,6 @@
 const componentSelect = {
   shared: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "0.25rem",
-    maxWidth: "333px",
+    maxWidth: "320px",
     width: "100%",
     hover: {
       backgroundColor: "#f6f6f6",
@@ -11,75 +8,59 @@ const componentSelect = {
     },
     pressed: {
       backgroundColor: "#ededed"
-    }
-  },
-  label: {
-    color: "#000000",
-    typography: {
-      font: "normal 700 1rem/1.15 Open Sans",
-      letterSpacing: "-0.03125rem",
-      fontWidth: 95
-    }
-  },
-  helpText: {
-    color: "#545454",
-    typography: {
-      font: "normal 460 0.875rem/1.3 Open Sans",
-      letterSpacing: "0rem",
-      fontWidth: 95
-    }
-  },
-  button: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginTop: "0.25rem",
-    backgroundColor: "#ffffff",
-    border: "0.0625rem solid #545454",
-    borderRadius: "0.25rem",
-    height: "2.5rem",
-    paddingLeft: "0.75rem",
-    paddingRight: "0.25rem",
-    color: "#545454",
-    typography: {
-      font: "normal 460 1rem/1.3 Open Sans",
-      letterSpacing: "0rem",
-      fontWidth: 95
-    },
-    focused: {
-      outline: "0.125rem solid #0072a9",
-      "outline-offset": "0.125rem"
     },
-    disabled: {
+    button: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginTop: "0.25rem",
       backgroundColor: "#ffffff",
-      cursor: "not-allowed",
-      color: "#999999",
-      border: "0.0625rem solid #dcdcdc"
+      border: "0.0625rem solid #545454",
+      borderRadius: "0.25rem",
+      height: "2.5rem",
+      paddingLeft: "0.75rem",
+      paddingRight: "0.25rem",
+      color: "#545454",
+      typography: {
+        font: "normal 460 1rem/1.3 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      },
+      focused: {
+        outline: "0.125rem solid #0072a9",
+        "outline-offset": "0.125rem"
+      },
+      disabled: {
+        backgroundColor: "#ffffff",
+        cursor: "not-allowed",
+        color: "#999999",
+        border: "0.0625rem solid #dcdcdc"
+      },
+      error: {
+        border: "0.0625rem solid #b42a19"
+      }
     },
-    error: {
-      border: "0.0625rem solid #b42a19"
-    }
-  },
-  option: {
-    paddingLeft: "1rem",
-    paddingRight: "1rem",
-    paddingTop: "0.75rem",
-    paddingBottom: "0.75rem",
-    focused: {
-      outline: "0.125rem solid #0072a9",
-      "outline-offset": "0",
-      backgroundColor: "inherit"
-    }
-  },
-  listBox: {
-    typography: {
-      font: "normal 460 1rem/1.3 Open Sans",
-      letterSpacing: "0rem",
-      fontWidth: 95
+    option: {
+      paddingLeft: "1rem",
+      paddingRight: "1rem",
+      paddingTop: "0.75rem",
+      paddingBottom: "0.75rem",
+      focused: {
+        outline: "0.125rem solid #0072a9",
+        "outline-offset": "0",
+        backgroundColor: "inherit"
+      }
     },
-    border: "0.0625rem solid #cccccc",
-    backgroundColor: "#ffffff",
-    shadow: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
+    listBox: {
+      typography: {
+        font: "normal 460 1rem/1.3 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      },
+      border: "0.0625rem solid #cccccc",
+      backgroundColor: "#ffffff",
+      shadow: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
+    }
   }
 };
 

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

@@ -0,0 +1,45 @@
+'use strict';
+
+const componentTextInput = {
+  shared: {
+    color: "#000000",
+    cursor: "text",
+    padding: {
+      top: "0",
+      right: "0.75rem",
+      bottom: "0",
+      left: "0.75rem"
+    },
+    "margin-top": "0.5rem",
+    "border-radius": "0.25rem",
+    border: "0.0625rem solid #545454",
+    "background-color": "#ffffff",
+    disabled: {
+      backgroundColor: "#ffffff",
+      cursor: "not-allowed",
+      color: "#999999",
+      border: "0.0625rem solid #dcdcdc"
+    },
+    error: {
+      border: "0.0625rem solid #b42a19"
+    }
+  },
+  sm: {
+    height: "2rem",
+    typography: {
+      font: "normal 460 0.875rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    }
+  },
+  md: {
+    height: "2.5rem",
+    typography: {
+      font: "normal 460 1rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    }
+  }
+};
+
+exports.componentTextInput = componentTextInput;

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

@@ -0,0 +1,43 @@
+const componentTextInput = {
+  shared: {
+    color: "#000000",
+    cursor: "text",
+    padding: {
+      top: "0",
+      right: "0.75rem",
+      bottom: "0",
+      left: "0.75rem"
+    },
+    "margin-top": "0.5rem",
+    "border-radius": "0.25rem",
+    border: "0.0625rem solid #545454",
+    "background-color": "#ffffff",
+    disabled: {
+      backgroundColor: "#ffffff",
+      cursor: "not-allowed",
+      color: "#999999",
+      border: "0.0625rem solid #dcdcdc"
+    },
+    error: {
+      border: "0.0625rem solid #b42a19"
+    }
+  },
+  sm: {
+    height: "2rem",
+    typography: {
+      font: "normal 460 0.875rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    }
+  },
+  md: {
+    height: "2.5rem",
+    typography: {
+      font: "normal 460 1rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    }
+  }
+};
+
+export { componentTextInput };

package/dist/text-input.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var TextInput = require('./components/text-input/TextInput.cjs');
+var textInput = require('./styleD/build/typescript/component/textInput.cjs');
+
+
+
+exports.TextInput = TextInput.TextInput;
+exports.componentTextInput = textInput.componentTextInput;

package/dist/text-input.js

@@ -0,0 +1,2 @@
+export { TextInput } from './components/text-input/TextInput.js';
+export { componentTextInput } from './styleD/build/typescript/component/textInput.js';

package/dist/types/TopBar.d.ts

@@ -23,6 +23,6 @@ export type { PartialTopBarNavigationTheme as TopBarNavigationTheme } from './co
 export { TopBarItem } from './components/topbar/topBarItem/TopBarItem';
 export type { TopBarItemProps } from './components/topbar/topBarItem/types';
 export type { PartialTopBarItemTheme as TopBarItemTheme } from './components/topbar/topBarItem/styles';
-export { TopBar } from './components/topbar/TopBar';
+export { TopBar, TopBarContainerLeft, TopBarContainerRight, } from './components/topbar/TopBar';
 export type { TopBarProps } from './components/topbar/types';
 export type { PartialTopBarTheme as TopBarTheme } from './components/topbar/styles';

package/dist/types/components/form/Form.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { AllowedContainer, FormInputContainerDefaultProps } from './types';
+export declare function FormInputContainer<C extends AllowedContainer>({ as: Component, size, label, description, error, isDisabled, theme, formInputContainerTheme, cssOverrides, children, ...props }: FormInputContainerDefaultProps<ComponentPropsWithRef<C>> & {
+    as: C;
+}): import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/types/components/form/styles.d.ts

@@ -0,0 +1,15 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentForm } from '../../styleD/build/typescript/component/form';
+import type { Prettify } from '../../util/types';
+export type FormInputContainerTheme = Prettify<ComponentForm['input']>;
+export declare const defaultFormInputContainerTheme: FormInputContainerTheme;
+export declare const formInputContainerStyles: (theme: FormInputContainerTheme, { size, }: {
+    size: keyof Omit<FormInputContainerTheme, 'shared'>;
+}) => SerializedStyles;
+export declare const formInputLabelStyles: (theme: FormInputContainerTheme, { isDisabled, size, }: {
+    size: keyof Omit<FormInputContainerTheme, 'shared'>;
+    isDisabled?: boolean | undefined;
+}) => SerializedStyles;
+export declare const formInputDescriptionStyles: (theme: FormInputContainerTheme, { isDisabled, }: {
+    isDisabled?: boolean | undefined;
+}) => SerializedStyles;

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

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import type { DeepPartial, DefaultProps } from '../../util/types';
+import type { FormInputContainerTheme } from './styles';
+export type FormInputContainerDefaultProps<ReactAriaInput extends {
+    className?: unknown;
+}, ComponentTheme = FormInputContainerTheme> = DefaultProps<ComponentTheme, ReactAriaInput['className']> & Omit<ReactAriaInput, 'children' | 'className'> & {
+    /**
+     * The size of the form input, 'md' (default) or 'sm'.
+     */
+    size?: keyof Omit<ComponentTheme, 'shared'>;
+    /**
+     * The label text for the form field
+     */
+    label?: string;
+    /**
+     * The description text for the form field
+     */
+    description?: string;
+    /**
+     * Validation error message
+     */
+    error?: string;
+    /**
+     * Theme overrides for the FormInputContainer container, label, and description styles.
+     * Use this when the component has its own `theme` prop for component-specific styles.
+     */
+    formInputContainerTheme?: DeepPartial<FormInputContainerTheme>;
+    /**
+     * The content of the form field (e.g. Input, Button, Popover) should always be plain React nodes.
+     * RAC render-prop children (present on Select etc.) are intentionally excluded to
+     * preserve React 18/19 compatibility where functions are not assignable to ReactNode.
+     */
+    children?: ReactNode;
+};
+/**
+ * The React Aria form container components FormInputContainer supports.
+ * Add new components here
+ */
+export declare const ALLOWED_FORM_CONTAINERS: readonly [(props: import("react-aria-components").TextFieldProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null, <T extends object = {}, M extends "single" | "multiple" = "single">(props: import("react-aria-components").SelectProps<T, M> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null];
+export type AllowedContainer = (typeof ALLOWED_FORM_CONTAINERS)[number];

package/dist/types/components/menu/styles.d.ts

@@ -13,7 +13,7 @@ export declare const menuSectionHeaderStyles: (theme: MenuSectionTheme, { size }
 export type MenuItemTheme = Prettify<ComponentMenu['menuItem']>;
 export type PartialMenuItemTheme = DeepPartial<MenuItemTheme>;
 export declare const defaultMenuItemTheme: MenuItemTheme;
-export declare const menuItemStyles: (theme: MenuItemTheme, { description }: Pick<MenuItemProps, 'description'>, isFocusVisible?: boolean) => SerializedStyles;
+export declare const menuItemStyles: (theme: MenuItemTheme, { description }: Pick<MenuItemProps, 'description'>) => SerializedStyles;
 export declare const menuItemIconStyles: (theme: MenuItemTheme, { size }: Required<Pick<MenuItemProps, 'size'>>) => SerializedStyles;
 export declare const menuItemLabelStyles: (theme: MenuItemTheme) => SerializedStyles;
 export declare const menuItemDescriptionStyles: (theme: MenuItemTheme) => SerializedStyles;

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

@@ -1,3 +1,3 @@
 import type { OptionProps, SelectProps } from './types';
 export declare function Option({ children, theme }: OptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function Select({ children, label, contextualHelpText, theme, cssOverrides, className, isInvalid, errorMessage, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Select({ isInvalid, theme, children, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/select/styles.d.ts

@@ -4,10 +4,7 @@ import type { DeepPartial, Prettify } from '../../util/types';
 export type SelectTheme = Prettify<ComponentSelect>;
 export type PartialSelectTheme = DeepPartial<SelectTheme>;
 export declare const defaultSelectTheme: SelectTheme;
-export declare const selectStyles: (theme: SelectTheme) => SerializedStyles;
 export declare const popoverStyles: (theme: SelectTheme) => SerializedStyles;
 export declare const listBoxItemStyles: (theme: SelectTheme) => SerializedStyles;
 export declare const listBoxStyles: (theme: SelectTheme) => SerializedStyles;
-export declare const labelStyles: (theme: SelectTheme) => SerializedStyles;
-export declare const helpTextStyles: (theme: SelectTheme) => SerializedStyles;
 export declare const buttonStyles: (theme: SelectTheme, isInvalid?: boolean) => SerializedStyles;

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

@@ -1,21 +1,9 @@
 import type { ListBoxItemProps as RACListBoxItemProps, ListBoxProps as RACListBoxProps, SelectProps as RACSelectProps } from 'react-aria-components';
 import type { DefaultPropsWithChildren } from '../../util/types';
+import type { FormInputContainerDefaultProps } from '../form/types';
 import type { SelectTheme } from './styles';
 export interface OptionProps extends DefaultPropsWithChildren<SelectTheme, RACListBoxItemProps['className']>, Omit<RACListBoxItemProps, 'children'> {
 }
 export interface ListBoxProps extends DefaultPropsWithChildren<SelectTheme, RACListBoxProps<object>['className']>, Omit<RACListBoxProps<object>, 'children'> {
 }
-export interface SelectProps extends DefaultPropsWithChildren<SelectTheme, RACSelectProps<object>['className']>, Omit<RACSelectProps<object>, 'children'> {
-    /**
-     * The label text of the select box
-     */
-    label: string;
-    /**
-     * Validation error message
-     */
-    errorMessage?: string;
-    /**
-     * Optional contextual help text
-     */
-    contextualHelpText?: string;
-}
+export type SelectProps = FormInputContainerDefaultProps<RACSelectProps<object, 'single' | 'multiple'>, SelectTheme>;

package/dist/types/components/text-input/TextInput.d.ts

@@ -0,0 +1,2 @@
+import type { TextInputProps } from './types';
+export declare function TextInput({ size, isInvalid, theme, ...props }: TextInputProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/text-input/sandbox.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName = "TextInput";
+export declare const componentTsx = "import { TextInput } from '@guardian/stand/text-input';\n\nexport const Component = () => (\n\t<>\n\t\t<TextInput\n\t\t\tlabel=\"Name\"\n\t\t\tdescription=\"This is a description for the text input.\"\n\t\t/>\n\n\t\t<TextInput\n\t\t\tsize=\"sm\"\n\t\t\tlabel=\"Username\"\n\t\t\tisInvalid\n\t\t\tdefaultValue=\"guardian_user\"\n\t\t\terror=\"Username is already taken\"\n\t\t/>\n\n\t\t<TextInput\n\t\t\tlabel=\"Password\"\n\t\t\tdescription=\"Showing a different type\"\n\t\t\ttype=\"password\"\n\t\t/>\n\n\t\t<TextInput label=\"Notes\" isDisabled defaultValue=\"Read only content\" />\n\t</>\n);\n";
+export declare const componentCss = "\n/* import the text input, form, inline message styles */\n@import '@guardian/stand/component/inlineMessage.css';\n@import '@guardian/stand/component/form.css';\n@import '@guardian/stand/component/textInput.css';\n\n/* inline message styles - error */\n.stand-inline-message {\n  display: var(--component-inline-message-shared-display);\n  align-items: var(--component-inline-message-shared-align-items);\n  gap: var(--component-inline-message-shared-gap);\n  font: var(--component-inline-message-shared-typography-font);\n  letter-spacing: var(\n    --component-inline-message-shared-typography-letter-spacing\n  );\n  font-variation-settings: \"wdth\"\n    var(--component-inline-message-shared-typography-font-width);\n}\n\n.stand-inline-message > .material-symbols {\n  font-size: var(--component-inline-message-shared-icon-size);\n}\n\n.stand-inline-message > svg {\n  width: var(--component-inline-message-shared-icon-size);\n  height: var(--component-inline-message-shared-icon-size);\n}\n\n.stand-inline-message-error {\n  color: var(--component-inline-message-error-color);\n  fill: var(--component-inline-message-error-color);\n}\n\n/* form input container styles */\n\n.stand-form-input-container {\n\tdisplay: var(--component-form-input-shared-container-display);\n\tflex-direction: var(--component-form-input-shared-container-flex-direction);\n\tgap: var(--component-form-input-shared-container-gap);\n\twidth: var(--component-form-input-shared-container-width);\n}\n\n.stand-form-input-container.sm {\n\tmax-width: var(--component-form-input-sm-container-max-width);\n}\n\n.stand-form-input-container.md {\n\tmax-width: var(--component-form-input-md-container-max-width);\n}\n\n.stand-form-input-container > label {\n\tcolor: var(--component-form-input-shared-label-color);\n\tfont: var(--component-form-input-md-label-typography-font);\n\tletter-spacing: var(--component-form-input-md-label-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-form-input-md-label-typography-font-width);\n}\n\n.stand-form-input-container[data-disabled] > label {\n\tcolor: var(--component-form-input-shared-label-disabled-color);\n}\n\n.stand-form-input-container > span.description {\n\tcolor: var(--component-form-input-shared-description-color);\n\tfont: var(--component-form-input-shared-description-typography-font);\n\tletter-spacing: var(--component-form-input-shared-description-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-form-input-shared-description-typography-font-width);\n}\n\n.stand-form-input-container[data-disabled] > span.description {\n\tcolor: var(--component-form-input-shared-description-disabled-color);\n}\n\n/* text input styles */\n\n.stand-text-input {\n\tbackground-color: var(--component-text-input-shared-background-color);\n\tborder-radius: var(--component-text-input-shared-border-radius);\n\tborder: var(--component-text-input-shared-border);\n\tcolor: var(--component-text-input-shared-color);\n\tcursor: var(--component-text-input-shared-cursor);\n\tmargin-top: var(--component-text-input-shared-margin-top);\n\tpadding-top: var(--component-text-input-shared-padding-top);\n\tpadding-right: var(--component-text-input-shared-padding-right);\n\tpadding-bottom: var(--component-text-input-shared-padding-bottom);\n\tpadding-left: var(--component-text-input-shared-padding-left);\n}\n\n.stand-text-input[disabled] {\n\tbackground-color: var(--component-text-input-shared-disabled-background-color);\n\tborder: var(--component-text-input-shared-disabled-border);\n\tcolor: var(--component-text-input-shared-disabled-color);\n\tcursor: var(--component-text-input-shared-disabled-cursor);\n}\n\n.stand-text-input[data-invalid] {\n\tborder: var(--component-text-input-shared-error-border);\n}\n\n.stand-text-input.md {\n\theight: var(--component-text-input-md-height);\n\tfont: var(--component-text-input-md-typography-font);\n\tletter-spacing: var(--component-text-input-md-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-text-input-md-typography-font-width);\n}\n\n.stand-text-input.sm {\n\theight: var(--component-text-input-sm-height);\n\tfont: var(--component-text-input-sm-typography-font);\n\tletter-spacing: var(--component-text-input-sm-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-text-input-sm-typography-font-width);\n}\n";
+export declare const componentHtml = "<div class=\"container flow-column\">\n\t<div class=\"stand-form-input-container md\">\n\t\t<label for=\"name\">Name</label>\n\t\t<span class=\"description\">This is a description for the text input.</span>\n\t\t<input id=\"name\" class=\"stand-text-input md\" type=\"text\" />\n\t</div>\n\t<div class=\"stand-form-input-container sm\">\n\t\t<label for=\"username\">Username</label>\n\t\t<input\n\t\t\tid=\"username\"\n\t\t\tclass=\"stand-text-input sm\"\n\t\t\ttype=\"text\"\n\t\t\tvalue=\"guardian_user\"\n\t\t\tdata-invalid\n\t\t/>\n\t\t<span class=\"stand-inline-message stand-inline-message-error\"><span class=\"material-symbols\">warning</span> Username is already taken</span>\n\t</div>\n\t<div class=\"stand-form-input-container md\">\n\t\t<label for=\"password\">Password</label>\n\t\t<span class=\"description\">Showing a different type</span>\n\t\t<input id=\"password\" class=\"stand-text-input md\" type=\"password\" />\n\t</div>\n\t<div class=\"stand-form-input-container md\" data-disabled>\n\t\t<label for=\"notes\">Notes</label>\n\t\t<input\n\t\t\tid=\"notes\"\n\t\t\tclass=\"stand-text-input md\"\n\t\t\ttype=\"text\"\n\t\t\tvalue=\"Read only content\"\n\t\t\tdisabled\n\t\t/>\n\t</div>\n</div>\n";
+export declare const componentJs = "\nimport { componentTextInput, componentForm, componentInlineMessage } from \"@guardian/stand\";\n\n// example of creating a stylesheet in js\nconst sheet = new CSSStyleSheet();\n\n// apply the rules to the sheet\nsheet.replaceSync(`\n/* inline message styles - error */\n.js-stand-inline-message {\n  display: ${componentInlineMessage.shared.display};\n  align-items: ${componentInlineMessage.shared['align-items']};\n  gap: ${componentInlineMessage.shared.gap};\n  font: ${componentInlineMessage.shared.typography.font};\n  letter-spacing: ${componentInlineMessage.shared.typography.letterSpacing};\n  font-variation-settings: \"wdth\" ${componentInlineMessage.shared.typography.fontWidth};\n}\n\n.js-stand-inline-message > .material-symbols {\n  font-size: ${componentInlineMessage.shared.icon.size};\n}\n\n.js-stand-inline-message > svg {\n  width: ${componentInlineMessage.shared.icon.size};\n  height: ${componentInlineMessage.shared.icon.size};\n}\n\n.js-stand-inline-message-error {\n  color: ${componentInlineMessage.error.color};\n  fill: ${componentInlineMessage.error.color};\n}\n\n/* form input container styles */\n\n.js-stand-form-input-container {\n\tdisplay: ${componentForm.input.shared.container.display};\n\tflex-direction: ${componentForm.input.shared.container['flex-direction']};\n\tgap: ${componentForm.input.shared.container.gap};\n\twidth: ${componentForm.input.shared.container.width};\n}\n\n.js-stand-form-input-container.sm {\n\tmax-width: ${componentForm.input.sm.container['max-width']};\n}\n\n.js-stand-form-input-container.md {\n\tmax-width: ${componentForm.input.md.container['max-width']};\n}\n\n.js-stand-form-input-container > label {\n\tcolor: ${componentForm.input.shared.label.color};\n\tfont: ${componentForm.input.md.label.typography.font};\n\tletter-spacing: ${componentForm.input.md.label.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.md.label.typography.fontWidth};\n}\n\n.js-stand-form-input-container[data-disabled] > label {\n\tcolor: ${componentForm.input.shared.label.disabled.color};\n}\n\n.js-stand-form-input-container > span.description {\n\tcolor: ${componentForm.input.shared.description.color};\n\tfont: ${componentForm.input.shared.description.typography.font};\n\tletter-spacing: ${componentForm.input.shared.description.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.shared.description.typography.fontWidth};\n}\n\n.js-stand-form-input-container[data-disabled] > span.description {\n\tcolor: ${componentForm.input.shared.description.disabled.color};\n}\n\n/* text input styles */\n\n.js-stand-text-input {\n\tbackground-color: ${componentTextInput.shared['background-color']};\n\tborder-radius: ${componentTextInput.shared['border-radius']};\n\tborder: ${componentTextInput.shared.border};\n\tcolor: ${componentTextInput.shared.color};\n\tcursor: ${componentTextInput.shared.cursor};\n\tmargin-top: ${componentTextInput.shared['margin-top']};\n\tpadding-top: ${componentTextInput.shared.padding.top};\n\tpadding-right: ${componentTextInput.shared.padding.right};\n\tpadding-bottom: ${componentTextInput.shared.padding.bottom};\n\tpadding-left: ${componentTextInput.shared.padding.left};\n}\n\n.js-stand-text-input[disabled] {\n\tbackground-color: ${componentTextInput.shared.disabled.backgroundColor};\n\tborder: ${componentTextInput.shared.disabled.border};\n\tcolor: ${componentTextInput.shared.disabled.color};\n\tcursor: ${componentTextInput.shared.disabled.cursor};\n}\n\n.js-stand-text-input[data-invalid] {\n\tborder: ${componentTextInput.shared.errorBorder};\n}\n\n.js-stand-text-input.md {\n\theight: ${componentTextInput.md.height};\n\tfont: ${componentTextInput.md.typography.font};\n\tletter-spacing: ${componentTextInput.md.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentTextInput.md.typography.fontWidth};\n}\n\n.js-stand-text-input.sm {\n\theight: ${componentTextInput.sm.height};\n\tfont: ${componentTextInput.sm.typography.font};\n\tletter-spacing: ${componentTextInput.sm.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentTextInput.sm.typography.fontWidth};\n}\n`);\n\n// update the document with the sheet\ndocument.adoptedStyleSheets.push(sheet);\n\n// modify the dom with the button components using the generated stylesheet\ndocument.getElementById(\"app\").innerHTML = `\n<div class=\"container flow-column\">\n\t<div class=\"js-stand-form-input-container md\">\n\t\t<label for=\"name\">Name</label>\n\t\t<span class=\"description\">This is a description for the text input.</span>\n\t\t<input id=\"name\" class=\"js-stand-text-input md\" type=\"text\" />\n\t</div>\n\t<div class=\"js-stand-form-input-container sm\">\n\t\t<label for=\"username\">Username</label>\n\t\t<input\n\t\t\tid=\"username\"\n\t\t\tclass=\"js-stand-text-input sm\"\n\t\t\ttype=\"text\"\n\t\t/>\n\t\t<span class=\"js-stand-inline-message js-stand-inline-message-error\"><span class=\"material-symbols\">warning</span> Username is already taken</span>\n\t</div>\n\t<div class=\"js-stand-form-input-container md\">\n\t\t<label for=\"password\">Password</label>\n\t\t<span class=\"description\">Showing a different type</span>\n\t\t<input id=\"password\" class=\"js-stand-text-input md\" type=\"password\" />\n\t</div>\n\t<div class=\"js-stand-form-input-container md\" data-disabled>\n\t\t<label for=\"notes\">Notes</label>\n\t\t<input\n\t\t\tid=\"notes\"\n\t\t\tclass=\"js-stand-text-input md\"\n\t\t\ttype=\"text\"\n\t\t\tvalue=\"Read only content\"\n\t\t\tdisabled\n\t\t />\n\t</div>\n</div>\n`;\n";

package/dist/types/components/text-input/styles.d.ts

@@ -0,0 +1,7 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentTextInput } from '../../styleD/build/typescript/component/textInput';
+import type { Prettify } from '../../util/types';
+import type { TextInputProps } from './types';
+export type TextInputTheme = Prettify<ComponentTextInput>;
+export declare const defaultTextInputTheme: TextInputTheme;
+export declare const textInputStyles: (theme: TextInputTheme, { size, isInvalid }: Required<Pick<TextInputProps, 'size' | 'isInvalid'>>) => SerializedStyles;

package/dist/types/components/text-input/types.d.ts

@@ -0,0 +1,4 @@
+import type { TextFieldProps as RACTextInputProps } from 'react-aria-components';
+import type { FormInputContainerDefaultProps } from '../form/types';
+import type { TextInputTheme } from './styles';
+export type TextInputProps = FormInputContainerDefaultProps<RACTextInputProps, TextInputTheme>;

package/dist/types/form.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Shared form components entry point
+ *
+ * If you only need the built CSS (./component/form.css),
+ * you don't need to install these.
+ */
+export { componentForm } from './styleD/build/typescript/component/form';
+export type { ComponentForm } from './styleD/build/typescript/component/form';

package/dist/types/index.d.ts

@@ -26,6 +26,8 @@ export { componentIcon } from './styleD/build/typescript/component/icon';
 export type { ComponentIcon } from './styleD/build/typescript/component/icon';
 export { componentFavicon } from './styleD/build/typescript/component/favicon';
 export type { ComponentFavicon } from './styleD/build/typescript/component/favicon';
+export { componentTextInput } from './styleD/build/typescript/component/textInput';
+export type { ComponentTextInput } from './styleD/build/typescript/component/textInput';
 export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage';
 export type { ComponentInlineMessage } from './styleD/build/typescript/component/inlineMessage';
 export { componentSelect } from './styleD/build/typescript/component/select';
@@ -34,6 +36,8 @@ export { componentMenu } from './styleD/build/typescript/component/menu';
 export type { ComponentMenu } from './styleD/build/typescript/component/menu';
 export { componentTopBar } from './styleD/build/typescript/component/TopBar';
 export type { ComponentTopBar } from './styleD/build/typescript/component/TopBar';
+export { componentForm } from './styleD/build/typescript/component/form';
+export type { ComponentForm } from './styleD/build/typescript/component/form';
 /**
  * style dictionary exports - base
  */

package/dist/types/menu.d.ts

@@ -7,7 +7,6 @@
  * - `react-dom`
  * - `typescript`
  * - `react-aria-components`
- * - `@react-aria/focus`
  *
  * See the `peerDependencies` section of package.json for compatible versions.
  *

package/dist/types/styleD/build/typescript/component/form.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentForm: {
+    input: {
+        shared: {
+            container: {
+                display: string;
+                'flex-direction': string;
+                gap: string;
+                width: string;
+            };
+            label: {
+                color: string;
+                disabled: {
+                    color: string;
+                };
+            };
+            description: {
+                color: string;
+                typography: {
+                    font: string;
+                    letterSpacing: string;
+                    fontWidth: number;
+                };
+                disabled: {
+                    color: string;
+                };
+            };
+        };
+        sm: {
+            container: {
+                'max-width': string;
+            };
+            label: {
+                typography: {
+                    font: string;
+                    letterSpacing: string;
+                    fontWidth: number;
+                };
+            };
+        };
+        md: {
+            container: {
+                'max-width': string;
+            };
+            label: {
+                typography: {
+                    font: string;
+                    letterSpacing: string;
+                    fontWidth: number;
+                };
+            };
+        };
+    };
+};
+export type ComponentForm = typeof componentForm;