@raspberrypifoundation/design-system-react 2.7.1 → 2.7.2

package/dist/types/src/components/Form/SelectInput/index.d.ts

@@ -1,31 +1,6 @@
-export function SelectInput({ id, label, name, options, disabled, error, fullWidth, hint, onChange, placeholder, value, }: {
-    id: any;
-    label: any;
-    name: any;
-    options: any;
-    disabled?: boolean | undefined;
-    error?: string | undefined;
-    fullWidth?: boolean | undefined;
-    hint?: string | undefined;
-    onChange?: (() => void) | undefined;
-    placeholder?: string | undefined;
-    value?: string | undefined;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace SelectInput {
-    namespace propTypes {
-        let disabled: PropTypes.Requireable<boolean>;
-        let error: PropTypes.Requireable<string>;
-        let fullWidth: PropTypes.Requireable<boolean>;
-        let hint: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
-        let label: PropTypes.Validator<NonNullable<NonNullable<string | object | null | undefined>>>;
-        let id: PropTypes.Validator<string>;
-        let name: PropTypes.Validator<string>;
-        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        let options: PropTypes.Validator<any[]>;
-        let placeholder: PropTypes.Requireable<string>;
-        let value: PropTypes.Requireable<string>;
-    }
-}
+import "@/components/MaterialSymbols";
+import "./SelectInput.scss";
+import type { SelectInputProps } from "./SelectInput.types";
+export declare const SelectInput: ({ id, label, name, options, disabled, error, fullWidth, hint, onChange, placeholder, value, }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
 export default SelectInput;
-import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/Form/SelectInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/SelectInput/index.jsx"],"names":[],"mappings":"AAOO;;;;;;;;;;;;4CA4CN;;;;;;;;;;;;;;;;;sBAlDqB,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/SelectInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAC;AAItC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,eAAO,MAAM,WAAW,GAAI,+FAYzB,gBAAgB,4CA+BlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/types/src/components/Form/TextInput/TextInput.spec.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.spec.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/TextInput/TextInput.spec.jsx"],"names":[],"mappings":""}
+{"version":3,"file":"TextInput.spec.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/TextInput/TextInput.spec.tsx"],"names":[],"mappings":""}

package/dist/types/src/components/Form/TextInput/TextInput.types.d.ts

@@ -0,0 +1,21 @@
+export type TextInputProps = {
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Whether the input is full width */
+    fullWidth?: boolean;
+    /** The text content of the label hint */
+    hint?: string;
+    /** The input label text content */
+    label: string;
+    /** The text input field ID */
+    id: string;
+    /** Name attribute for the text input */
+    name: string;
+    /** Callback function when text input state changes */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Value attribute for the text input */
+    value: string;
+};
+//# sourceMappingURL=TextInput.types.d.ts.map

package/dist/types/src/components/Form/TextInput/TextInput.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/TextInput/TextInput.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG;IAC3B,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAChE,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}

package/dist/types/src/components/Form/TextInput/index.d.ts

@@ -1,27 +1,6 @@
-export function TextInput({ id, label, name, value, disabled, error, fullWidth, hint, onChange, }: {
-    id: any;
-    label: any;
-    name: any;
-    value: any;
-    disabled?: boolean | undefined;
-    error?: string | undefined;
-    fullWidth?: boolean | undefined;
-    hint?: string | undefined;
-    onChange?: (() => void) | undefined;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace TextInput {
-    namespace propTypes {
-        let disabled: PropTypes.Requireable<boolean>;
-        let error: PropTypes.Requireable<string>;
-        let fullWidth: PropTypes.Requireable<boolean>;
-        let hint: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
-        let label: PropTypes.Validator<NonNullable<NonNullable<string | object | null | undefined>>>;
-        let id: PropTypes.Validator<string>;
-        let name: PropTypes.Validator<string>;
-        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        let value: PropTypes.Validator<string>;
-    }
-}
+import "@/components/MaterialSymbols";
+import "./TextInput.scss";
+import type { TextInputProps } from "./TextInput.types";
+export declare const TextInput: ({ id, label, name, value, disabled, error, fullWidth, hint, onChange, }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
 export default TextInput;
-import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/Form/TextInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/TextInput/index.jsx"],"names":[],"mappings":"AAOO;;;;;;;;;;4CA+BN;;;;;;;;;;;;;;;sBArCqB,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/TextInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAC;AAItC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,eAAO,MAAM,SAAS,GAAI,yEAUvB,cAAc,4CAqBhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/types/src/components/Form/TextareaInput/TextareaInput.spec.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaInput.spec.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/TextareaInput/TextareaInput.spec.jsx"],"names":[],"mappings":""}
+{"version":3,"file":"TextareaInput.spec.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/TextareaInput/TextareaInput.spec.tsx"],"names":[],"mappings":""}

package/dist/types/src/components/Form/TextareaInput/TextareaInput.types.d.ts

@@ -0,0 +1,23 @@
+export type TextareaInputProps = {
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether the input is read-only */
+    readOnly?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Whether the input is full width */
+    fullWidth?: boolean;
+    /** The text content of the label hint */
+    hint?: string;
+    /** The input label text content */
+    label: string;
+    /** The textarea input field ID */
+    id: string;
+    /** Name attribute for the textarea input */
+    name: string;
+    /** Callback function when textarea input state changes */
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    /** Value attribute for the textarea input */
+    value: string;
+};
+//# sourceMappingURL=TextareaInput.types.d.ts.map

package/dist/types/src/components/Form/TextareaInput/TextareaInput.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaInput.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/TextareaInput/TextareaInput.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;IACnE,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}

package/dist/types/src/components/Form/TextareaInput/index.d.ts

@@ -1,29 +1,5 @@
-export function TextareaInput({ id, label, name, value, disabled, readOnly, error, fullWidth, hint, onChange, }: {
-    id: any;
-    label: any;
-    name: any;
-    value: any;
-    disabled?: boolean | undefined;
-    readOnly?: boolean | undefined;
-    error?: string | undefined;
-    fullWidth?: boolean | undefined;
-    hint?: string | undefined;
-    onChange?: (() => void) | undefined;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace TextareaInput {
-    namespace propTypes {
-        let disabled: PropTypes.Requireable<boolean>;
-        let readOnly: PropTypes.Requireable<boolean>;
-        let error: PropTypes.Requireable<string>;
-        let fullWidth: PropTypes.Requireable<boolean>;
-        let hint: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
-        let label: PropTypes.Validator<NonNullable<NonNullable<string | object | null | undefined>>>;
-        let id: PropTypes.Validator<string>;
-        let name: PropTypes.Validator<string>;
-        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        let value: PropTypes.Validator<string>;
-    }
-}
+import "./TextareaInput.scss";
+import type { TextareaInputProps } from "./TextareaInput.types";
+export declare const TextareaInput: ({ id, label, name, value, disabled, readOnly, error, fullWidth, hint, onChange, }: TextareaInputProps) => import("react/jsx-runtime").JSX.Element;
 export default TextareaInput;
-import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/Form/TextareaInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/TextareaInput/index.jsx"],"names":[],"mappings":"AAOO;;;;;;;;;;;4CAkCN;;;;;;;;;;;;;;;;sBAxCqB,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/TextareaInput/index.tsx"],"names":[],"mappings":"AAEA,OAAO,sBAAsB,CAAC;AAG9B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,eAAO,MAAM,aAAa,GAAI,mFAW3B,kBAAkB,4CAsBpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/types/src/stories/forms/Fieldset.stories.d.ts

@@ -1,57 +1,19 @@
-export default options;
-export namespace Default {
-    let args: {};
-    function render({ checkboxes, ...args }: {
-        [x: string]: any;
-        checkboxes: any;
-    }): import("react/jsx-runtime").JSX.Element;
-}
-export namespace Error {
-    export namespace args_1 {
-        let errorText: string;
-    }
-    export { args_1 as args };
-}
-export namespace Disabled {
-    export namespace args_2 {
-        let disabled: boolean;
-    }
-    export { args_2 as args };
-}
-export namespace ErrorAndFullWidth {
-    export namespace args_3 {
-        export let fullWidth: boolean;
-        let errorText_1: string;
-        export { errorText_1 as errorText };
-    }
-    export { args_3 as args };
-}
-export namespace DisabledAndFullWidth {
-    export namespace args_4 {
-        let fullWidth_1: boolean;
-        export { fullWidth_1 as fullWidth };
-        let disabled_1: boolean;
-        export { disabled_1 as disabled };
-    }
-    export { args_4 as args };
-}
-declare namespace options {
-    export let title: string;
-    export { Fieldset as component };
-    export let tags: string[];
-    export namespace args_5 {
-        let disabled_2: boolean;
-        export { disabled_2 as disabled };
-        let errorText_2: string;
-        export { errorText_2 as errorText };
-        let fullWidth_2: boolean;
-        export { fullWidth_2 as fullWidth };
-        export let legendText: string;
-        export let legendHintText: string;
-        export let checkboxes: {
-            label: string;
-        }[];
-    }
-    export { args_5 as args };
+import type { Meta, StoryObj } from "@storybook/react";
+import type { FieldSetProps } from "components/Form/Fieldset/FieldSet.types";
+interface FieldsetStoryArgs extends FieldSetProps {
+    checkboxes: Array<{
+        label: string;
+    }>;
 }
+declare const meta: Meta<FieldsetStoryArgs>;
+export default meta;
+type Story = StoryObj<FieldsetStoryArgs>;
+/**
+ * A Fieldset element to contain a group of checkboxes or radio buttons. The error is displayed below the fieldset.
+ */
+export declare const Default: Story;
+export declare const Error: Story;
+export declare const Disabled: Story;
+export declare const ErrorAndFullWidth: Story;
+export declare const DisabledAndFullWidth: Story;
 //# sourceMappingURL=Fieldset.stories.d.ts.map

package/dist/types/src/stories/forms/Fieldset.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.stories.d.ts","sourceRoot":"","sources":["../../../../../src/stories/forms/Fieldset.stories.jsx"],"names":[],"mappings":";;;IAwBU;;;gDAQP"}
+{"version":3,"file":"Fieldset.stories.d.ts","sourceRoot":"","sources":["../../../../../src/stories/forms/Fieldset.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAI7E,UAAU,iBAAkB,SAAQ,aAAa;IAC/C,UAAU,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACtC;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAgBjC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAmBzC;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAMlC,CAAC"}

package/dist/types/src/stories/forms/InputLabel.stories.d.ts

@@ -1,25 +1,14 @@
-export default options;
-export namespace Default {
-    let args: {};
-}
-export namespace Disabled {
-    export namespace args_1 {
-        let disabled: boolean;
-    }
-    export { args_1 as args };
-}
-declare namespace options {
-    export let title: string;
-    export { InputLabel as component };
-    export let tags: string[];
-    export namespace args_2 {
-        export let label: string;
-        export let inputFieldId: string;
-        let disabled_1: boolean;
-        export { disabled_1 as disabled };
-        export let hint: string;
-    }
-    export { args_2 as args };
-    export function render(args: any): import("react/jsx-runtime").JSX.Element;
-}
+import type { Meta, StoryObj } from "@storybook/react";
+import { InputLabel } from "../../components/Form/InputLabel";
+declare const meta: Meta<typeof InputLabel>;
+export default meta;
+type Story = StoryObj<typeof InputLabel>;
+/**
+ * The label used with all HTML inputs, including both the label itself and a hint
+ */
+export declare const Default: Story;
+/**
+ * disabled makes the input greyed out
+ */
+export declare const Disabled: Story;
 //# sourceMappingURL=InputLabel.stories.d.ts.map

package/dist/types/src/stories/forms/InputLabel.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputLabel.stories.d.ts","sourceRoot":"","sources":["../../../../../src/stories/forms/InputLabel.stories.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;IAYU,2EAEP"}
+{"version":3,"file":"InputLabel.stories.d.ts","sourceRoot":"","sources":["../../../../../src/stories/forms/InputLabel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAE9D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAajC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAoC,CAAC"}

package/dist/types/src/stories/forms/RadioInput.stories.d.ts

@@ -1,51 +1,29 @@
-export default options;
-export namespace Default {
-    let args: {};
-}
-export namespace FullWidth {
-    export namespace args_1 {
-        let fullWidth: boolean;
-    }
-    export { args_1 as args };
-}
-export namespace Disabled {
-    export namespace args_2 {
-        let disabled: boolean;
-    }
-    export { args_2 as args };
-}
-export namespace Checked {
-    export namespace args_3 {
-        let isChecked: boolean;
-    }
-    export { args_3 as args };
-}
-export namespace DisabledAndFullWidth {
-    export namespace args_4 {
-        let disabled_1: boolean;
-        export { disabled_1 as disabled };
-        let fullWidth_1: boolean;
-        export { fullWidth_1 as fullWidth };
-    }
-    export { args_4 as args };
-}
-declare namespace options {
-    export let title: string;
-    export { RadioInput as component };
-    export let tags: string[];
-    export namespace args_5 {
-        export let id: string;
-        export let name: string;
-        let disabled_2: boolean;
-        export { disabled_2 as disabled };
-        let fullWidth_2: boolean;
-        export { fullWidth_2 as fullWidth };
-        export let label: string;
-        let isChecked_1: boolean;
-        export { isChecked_1 as isChecked };
-        export let value: string;
-    }
-    export { args_5 as args };
-    export function render(args: any): import("react/jsx-runtime").JSX.Element;
+import type { Meta, StoryObj } from "@storybook/react";
+import type { RadioInputProps } from "components/Form/RadioInput/RadioInput.types";
+interface RadioInputStoryArgs extends RadioInputProps {
+    isChecked: boolean;
 }
+declare const meta: Meta<RadioInputStoryArgs>;
+export default meta;
+type Story = StoryObj<RadioInputStoryArgs>;
+/**
+ * Radioinput let users select an item.
+ */
+export declare const Default: Story;
+/**
+ * fullWidth makes the input stretch across the available space
+ */
+export declare const FullWidth: Story;
+/**
+ * disabled makes the input greyed out
+ */
+export declare const Disabled: Story;
+/**
+ * isChecked makes the input checked
+ */
+export declare const Checked: Story;
+/**
+ * disabled and fullWidth makes the input greyed out and stretch across the available space
+ */
+export declare const DisabledAndFullWidth: Story;
 //# sourceMappingURL=RadioInput.stories.d.ts.map

package/dist/types/src/stories/forms/RadioInput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/stories/forms/RadioInput.stories.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgBU,2EAQP"}
+{"version":3,"file":"RadioInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/stories/forms/RadioInput.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAC;AAGnF,UAAU,mBAAoB,SAAQ,eAAe;IACnD,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,mBAAmB,CAsBnC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC;AAE3C;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAKlC,CAAC"}

package/dist/types/src/stories/forms/SelectInput.stories.d.ts

@@ -1,52 +1,26 @@
-export default options;
-export namespace Default {
-    let args: {};
-}
-export namespace NoOptionSelected {
-    export namespace args_1 {
-        let value: string;
-    }
-    export { args_1 as args };
-}
-export namespace WithPlaceholder {
-    export namespace args_2 {
-        let value_1: string;
-        export { value_1 as value };
-        export let placeholder: string;
-    }
-    export { args_2 as args };
-}
-export namespace Error {
-    export namespace args_3 {
-        let error: string;
-    }
-    export { args_3 as args };
-}
-export namespace FullWidth {
-    export namespace args_4 {
-        let fullWidth: boolean;
-    }
-    export { args_4 as args };
-}
-declare namespace options {
-    export let title: string;
-    export { SelectInput as component };
-    export let tags: string[];
-    export namespace args_5 {
-        export let name: string;
-        export let id: string;
-        export let disabled: boolean;
-        let fullWidth_1: boolean;
-        export { fullWidth_1 as fullWidth };
-        export let hint: string;
-        export let label: string;
-        export let options: {
-            key: string;
-            value: string;
-        }[];
-        let value_2: string;
-        export { value_2 as value };
-    }
-    export { args_5 as args };
-}
+import type { Meta, StoryObj } from "@storybook/react";
+import { SelectInput } from "../../components/Form/SelectInput";
+declare const meta: Meta<typeof SelectInput>;
+export default meta;
+type Story = StoryObj<typeof SelectInput>;
+/**
+ * Select inputs let users make a choice from a drop down of options.
+ */
+export declare const Default: Story;
+/**
+ * When there is no provided value
+ */
+export declare const NoOptionSelected: Story;
+/**
+ * When there is no provided value, but placeholder text is provided
+ */
+export declare const WithPlaceholder: Story;
+/**
+ * Providing an error string highlights an issue with the field
+ */
+export declare const Error: Story;
+/**
+ * fullWidth makes the input stretch across the available space
+ */
+export declare const FullWidth: Story;
 //# sourceMappingURL=SelectInput.stories.d.ts.map

package/dist/types/src/stories/forms/SelectInput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/stories/forms/SelectInput.stories.jsx"],"names":[],"mappings":""}
+{"version":3,"file":"SelectInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/stories/forms/SelectInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAEhE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAkBlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAI9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC"}

package/dist/types/src/stories/forms/TextInput.stories.d.ts

@@ -1,37 +1,18 @@
-export default options;
-export namespace Default {
-    let args: {};
-}
-export namespace Error {
-    export namespace args_1 {
-        let error: string;
-        let value: string;
-    }
-    export { args_1 as args };
-}
-export namespace FullWidth {
-    export namespace args_2 {
-        let fullWidth: boolean;
-    }
-    export { args_2 as args };
-}
-declare namespace options {
-    export let title: string;
-    export { TextInput as component };
-    export let tags: string[];
-    export namespace args_3 {
-        export let id: string;
-        export let name: string;
-        export let disabled: boolean;
-        let error_1: null;
-        export { error_1 as error };
-        let fullWidth_1: boolean;
-        export { fullWidth_1 as fullWidth };
-        export let hint: string;
-        export let label: string;
-        let value_1: string;
-        export { value_1 as value };
-    }
-    export { args_3 as args };
-}
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextInput } from "../../components/Form/TextInput";
+declare const meta: Meta<typeof TextInput>;
+export default meta;
+type Story = StoryObj<typeof TextInput>;
+/**
+ * Text inputs are a primary way of receiving text input from users.
+ */
+export declare const Default: Story;
+/**
+ * Providing an error string highlights an issue with the field
+ */
+export declare const Error: Story;
+/**
+ * fullWidth makes the input stretch across the available space
+ */
+export declare const FullWidth: Story;
 //# sourceMappingURL=TextInput.stories.d.ts.map

package/dist/types/src/stories/forms/TextInput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/stories/forms/TextInput.stories.jsx"],"names":[],"mappings":""}
+{"version":3,"file":"TextInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/stories/forms/TextInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAE5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAchC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC"}

package/dist/types/src/stories/forms/TextareaInput.stories.d.ts

@@ -1,52 +1,26 @@
-export default options;
-export namespace Default {
-    let args: {};
-}
-export namespace Error {
-    export namespace args_1 {
-        let error: string;
-        let value: string;
-    }
-    export { args_1 as args };
-}
-export namespace FullWidth {
-    export namespace args_2 {
-        let fullWidth: boolean;
-    }
-    export { args_2 as args };
-}
-export namespace Disabled {
-    export namespace args_3 {
-        let disabled: boolean;
-    }
-    export { args_3 as args };
-}
-export namespace ReadOnly {
-    export namespace args_4 {
-        let readOnly: boolean;
-    }
-    export { args_4 as args };
-}
-declare namespace options {
-    export let title: string;
-    export { TextareaInput as component };
-    export let tags: string[];
-    export namespace args_5 {
-        export let id: string;
-        export let name: string;
-        let disabled_1: boolean;
-        export { disabled_1 as disabled };
-        let readOnly_1: boolean;
-        export { readOnly_1 as readOnly };
-        let error_1: null;
-        export { error_1 as error };
-        let fullWidth_1: boolean;
-        export { fullWidth_1 as fullWidth };
-        export let hint: string;
-        export let label: string;
-        let value_1: string;
-        export { value_1 as value };
-    }
-    export { args_5 as args };
-}
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextareaInput } from "../../components/Form/TextareaInput";
+declare const meta: Meta<typeof TextareaInput>;
+export default meta;
+type Story = StoryObj<typeof TextareaInput>;
+/**
+ * Text inputs are a primary way of receiving text input from users.
+ */
+export declare const Default: Story;
+/**
+ * Providing an error string highlights an issue with the field
+ */
+export declare const Error: Story;
+/**
+ * fullWidth makes the input stretch across the available space
+ */
+export declare const FullWidth: Story;
+/**
+ * disabled makes the input greyed out
+ */
+export declare const Disabled: Story;
+/**
+ * readOnly makes the input greyed out
+ */
+export declare const ReadOnly: Story;
 //# sourceMappingURL=TextareaInput.stories.d.ts.map

package/dist/types/src/stories/forms/TextareaInput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/stories/forms/TextareaInput.stories.jsx"],"names":[],"mappings":""}
+{"version":3,"file":"TextareaInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/stories/forms/TextareaInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAEpE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAepC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAE5C;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raspberrypifoundation/design-system-react",
-  "version": "2.7.1",
+  "version": "2.7.2",
   "type": "module",
   "main": "./dist/design-system-react.umd.cjs",
   "module": "./dist/design-system-react.js",
@@ -60,6 +60,7 @@
     "@types/node": "^24.3.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@types/testing-library__jest-dom": "^6.0.0",
     "@typescript-eslint/eslint-plugin": "^8.41.0",
     "@typescript-eslint/parser": "^8.41.0",
     "@vitejs/plugin-react": "^4.3.4",