@webiny/admin-ui 0.0.0-unstable.2aaa1916d9

package/Input/Input.mdx

@@ -0,0 +1,178 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as InputStories from './Input.stories';
+
+<Meta of={InputStories} />
+
+# Input
+
+The Input component is a form control that allows users to enter and edit text. It supports various types of input (text, number, email, etc.), can be customized with icons, and includes built-in validation support.
+
+## Usage
+
+<Canvas of={InputStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+
+import { Input } from "@webiny/admin-ui";
+
+const InputExample = () => {
+    const [value, setValue] = useState("");
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleValidation = () => {
+        if (!value.trim()) {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else if (value.trim().length < 3) {
+            setValidation({ isValid: false, message: "Must be at least 3 characters long" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <div>
+            <Input
+                type="text"
+                label="Full Name"
+                description="Enter your full name as it appears on your ID"
+                note="This will be used for official documentation"
+                placeholder="Enter your full name"
+                required={true}
+                value={value}
+                validation={validation}
+                onChange={newValue => setValue(newValue)}
+                onBlur={handleValidation}
+                onEnter={handleValidation}
+            />
+        </div>
+    );
+};
+
+export default InputExample;
+
+` } }
+    additionalActions={[
+        {
+            title: 'Open in GitHub',
+            onClick: () => {
+                window.open(
+                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Input/Input.tsx',
+                    '_blank'
+                );
+            },
+        }
+    ]}
+/>
+
+<Controls of={InputStories.Documentation}/>
+
+```jsx
+import React, { useState } from "react";
+
+import { Input } from "@webiny/admin-ui";
+
+const InputExample = () => {
+    const [value, setValue] = useState("");
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleValidation = () => {
+        if (!value.trim()) {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else if (value.trim().length < 3) {
+            setValidation({ isValid: false, message: "Must be at least 3 characters long" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <div>
+            <Input
+                type="text"
+                label="Full Name"
+                description="Enter your full name as it appears on your ID"
+                note="This will be used for official documentation"
+                placeholder="Enter your full name"
+                required={true}
+                value={value}
+                validation={validation}
+                onChange={newValue => setValue(newValue)}
+                onBlur={handleValidation}
+                onEnter={handleValidation}
+            />
+        </div>
+    );
+};
+
+export default InputExample;
+```
+
+## Examples
+
+### With Validate Function
+The Input component supports validation using the validation prop, as shown in the example above.
+For more complex or reusable validation scenarios, you can use the validate prop, which accepts a custom validation function.
+Try entering **exists@** in the input box to see it in action, and click on **Show code** to view the validation function.
+
+<Canvas of={InputStories.WithValidateFunction} source={ { code: `
+import React, { useState } from "react";
+
+import { Input } from "@webiny/admin-ui";
+
+const EmailInput = () => {
+    const [value, setValue] = useState("");
+    const [validation, setValidation] = useState({ isValid: true, message: undefined });
+
+    const validate = async () => {
+        // Simulate API call delay
+        await new Promise(resolve => setTimeout(resolve, 500));
+
+        // Example validation: check if email already exists
+        if (value.includes("exists@")) {
+            setValidation({ isValid: false, message: "This email is already registered" });
+        } else {
+            setValidation({ isValid: true, message: undefined });
+        }
+    };
+
+    return (
+        <Input
+            type="email"
+            label="Email"
+            placeholder="Enter your email"
+            value={value}
+            onChange={newValue => setValue(newValue)}
+            validate={validate}
+            validation={validation}
+        />
+    );
+};` } }
+/>
+
+## Anatomy
+
+### Input Anatomy
+<img src="/images/storybook/input/anatomy.png" alt="Input Anatomy"/>
+
+### Styles
+<img src="/images/storybook/input/styles.png" alt="Styles"/>
+
+### Field Size
+<img src="/images/storybook/input/field-size.png" alt="Field Size"/>
+
+### States and Styles
+<img src="/images/storybook/input/states-and-styles.png" alt="States and Styles"/>
+
+### Label Anatomy
+<img src="/images/storybook/input/label-anatomy.png" alt="Label Anatomy"/>
+
+### Label Properties
+<img src="/images/storybook/input/label-properties.png" alt="Label Properties"/>
+
+### Label Options
+<img src="/images/storybook/input/label-options.png" alt="Label Options"/>
+
+## Usage
+
+### Used in forms
+<img src="/images/storybook/input/used-in-forms.png" alt="Used in forms"/>

package/Input/Input.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Input } from "./";
+declare const meta: Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof Input>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const WithLabelRequired: Story;
+export declare const WithDescription: Story;
+export declare const WithNotes: Story;
+export declare const WithErrors: Story;
+export declare const Disabled: Story;
+export declare const WithValidateFunction: Story;
+export declare const FullExample: Story;
+export declare const Documentation: Story;

package/Input/Input.stories.js

@@ -0,0 +1,247 @@
+import React, { useState } from "react";
+import { Input } from "./";
+const meta = {
+  title: "Components/Form/Input",
+  component: Input,
+  argTypes: {
+    onChange: {
+      action: "onChange"
+    },
+    type: {
+      control: "select",
+      options: ["text", "number", "email", "password", "tel", "url", "search", "date", "datetime-local", "month", "week", "time", "color", "file", "checkbox", "radio", "range", "hidden", "button", "submit", "reset", "image"],
+      defaultValue: "text"
+    },
+    disabled: {
+      control: "boolean",
+      defaultValue: false
+    }
+  },
+  parameters: {
+    layout: "padded"
+  }
+};
+export default meta;
+export const Default = {};
+export const WithLabel = {
+  args: {
+    label: "Any field label"
+  }
+};
+export const WithLabelRequired = {
+  args: {
+    label: "Any field label",
+    required: true
+  }
+};
+export const WithDescription = {
+  args: {
+    description: "Provide the required information for processing your request."
+  }
+};
+export const WithNotes = {
+  args: {
+    note: "Note: Ensure your selection or input is accurate before proceeding."
+  }
+};
+export const WithErrors = {
+  args: {
+    validation: {
+      isValid: false,
+      message: "This field is required."
+    }
+  }
+};
+export const Disabled = {
+  args: {
+    label: "Any field label",
+    disabled: true
+  }
+};
+export const WithValidateFunction = {
+  render: args => {
+    const [value, setValue] = useState("");
+    const [validation, setValidation] = useState({
+      isValid: true,
+      message: undefined
+    });
+    const validate = async () => {
+      // Simulate API call delay
+      await new Promise(resolve => setTimeout(resolve, 500));
+
+      // Example validation: check if email already exists
+      if (value.includes("exists@")) {
+        setValidation({
+          isValid: false,
+          message: "This email is already registered"
+        });
+      } else {
+        setValidation({
+          isValid: true,
+          message: undefined
+        });
+      }
+    };
+    return /*#__PURE__*/React.createElement(Input, Object.assign({}, args, {
+      type: "email",
+      label: "Email",
+      placeholder: "Enter your email",
+      value: value,
+      onChange: newValue => setValue(newValue),
+      validate: validate,
+      validation: validation
+    }));
+  }
+};
+export const FullExample = {
+  args: {
+    ...Default.args,
+    label: "Any field label",
+    required: true,
+    description: "Provide the required information for processing your request.",
+    note: "Note: Ensure your selection or input is accurate before proceeding.",
+    validation: {
+      isValid: false,
+      message: "This field is required."
+    }
+  }
+};
+export const Documentation = {
+  render: args => {
+    const [value, setValue] = useState("");
+    const [validation, setValidation] = useState({
+      isValid: true,
+      message: ""
+    });
+    const handleValidation = () => {
+      if (args.required && !value.trim()) {
+        setValidation({
+          isValid: false,
+          message: "This field is required"
+        });
+      } else if (args.minLength && value.trim().length < args.minLength) {
+        setValidation({
+          isValid: false,
+          message: `Must be at least ${args.minLength} characters long`
+        });
+      } else {
+        setValidation({
+          isValid: true,
+          message: ""
+        });
+      }
+    };
+    return /*#__PURE__*/React.createElement(Input, Object.assign({}, args, {
+      value: value,
+      onChange: newValue => setValue(newValue),
+      validation: validation,
+      onBlur: handleValidation,
+      onEnter: handleValidation
+    }));
+  },
+  args: {
+    type: "text",
+    size: "lg",
+    variant: "primary",
+    label: "Full Name",
+    description: "Enter your full name as it appears on your ID",
+    note: "This will be used for official documentation",
+    placeholder: "Enter your full name",
+    required: true,
+    disabled: false,
+    startIcon: undefined,
+    endIcon: undefined,
+    minLength: 3,
+    maxLength: undefined,
+    onChange: undefined,
+    onBlur: undefined,
+    onEnter: undefined,
+    validation: undefined,
+    validate: undefined
+  },
+  argTypes: {
+    type: {
+      description: "HTML input type attribute",
+      control: "select",
+      options: ["text", "number", "email", "password", "tel", "url", "search", "date", "datetime-local", "month", "week", "time", "color", "file"],
+      defaultValue: "text"
+    },
+    size: {
+      description: "Input field size",
+      control: "select",
+      options: ["md", "lg", "xl"],
+      defaultValue: "lg"
+    },
+    variant: {
+      description: "Input field style variant",
+      control: "select",
+      options: ["primary", "secondary", "ghost", "ghost-negative"],
+      defaultValue: "primary"
+    },
+    label: {
+      description: "Label text displayed above the input",
+      control: "text"
+    },
+    description: {
+      description: "Helper text displayed below the label",
+      control: "text"
+    },
+    note: {
+      description: "Additional note displayed below the input",
+      control: "text"
+    },
+    placeholder: {
+      description: "Placeholder text shown when input is empty",
+      control: "text"
+    },
+    required: {
+      description: "Makes the input field required",
+      control: "boolean",
+      defaultValue: true
+    },
+    disabled: {
+      description: "Disables the input field",
+      control: "boolean",
+      defaultValue: false
+    },
+    startIcon: {
+      description: "Icon displayed at the start of the input",
+      control: "none"
+    },
+    endIcon: {
+      description: "Icon displayed at the end of the input",
+      control: "none"
+    },
+    minLength: {
+      description: "Minimum number of characters required",
+      control: "number",
+      defaultValue: 3
+    },
+    maxLength: {
+      description: "Maximum number of characters allowed. To apply this maxLength, update the code similarly to how it's done for minLength. Refer to the minLength example above for guidance.",
+      control: "number"
+    },
+    validation: {
+      description: "Validation state and error message. Please refer to the example code for details on usage.",
+      control: "none"
+    },
+    validate: {
+      description: "Custom validation function",
+      control: "none"
+    },
+    onChange: {
+      description: "Callback function when input value changes",
+      control: "none"
+    },
+    onBlur: {
+      description: "Callback function when input loses focus",
+      control: "none"
+    },
+    onEnter: {
+      description: "Callback function when Enter key is pressed",
+      control: "none"
+    }
+  } // Removed forwardEventOnChange and inputRef
+};
+
+//# sourceMappingURL=Input.stories.js.map

package/Input/Input.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","Input","meta","title","component","argTypes","onChange","action","type","control","options","defaultValue","disabled","parameters","layout","Default","WithLabel","args","label","WithLabelRequired","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","WithValidateFunction","render","value","setValue","setValidation","undefined","validate","Promise","resolve","setTimeout","includes","createElement","Object","assign","placeholder","newValue","FullExample","Documentation","handleValidation","trim","minLength","length","onBlur","onEnter","size","variant","startIcon","endIcon","maxLength"],"sources":["Input.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Input } from \"~/Input\";\n\nconst meta: Meta<typeof Input> = {\n    title: \"Components/Form/Input\",\n    component: Input,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        type: {\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\",\n                \"checkbox\",\n                \"radio\",\n                \"range\",\n                \"hidden\",\n                \"button\",\n                \"submit\",\n                \"reset\",\n                \"image\"\n            ],\n            defaultValue: \"text\"\n        },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Input>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const WithValidateFunction: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            // Simulate API call delay\n            await new Promise(resolve => setTimeout(resolve, 500));\n\n            // Example validation: check if email already exists\n            if (value.includes(\"exists@\")) {\n                setValidation({ isValid: false, message: \"This email is already registered\" });\n            } else {\n                setValidation({ isValid: true, message: undefined });\n            }\n        };\n\n        return (\n            <Input\n                {...args}\n                type=\"email\"\n                label=\"Email\"\n                placeholder=\"Enter your email\"\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validate={validate}\n                validation={validation}\n            />\n        );\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        const handleValidation = () => {\n            if (args.required && !value.trim()) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else if (args.minLength && value.trim().length < args.minLength) {\n                setValidation({\n                    isValid: false,\n                    message: `Must be at least ${args.minLength} characters long`\n                });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        return (\n            <Input\n                {...args}\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validation={validation}\n                onBlur={handleValidation}\n                onEnter={handleValidation}\n            />\n        );\n    },\n    args: {\n        type: \"text\",\n        size: \"lg\",\n        variant: \"primary\",\n        label: \"Full Name\",\n        description: \"Enter your full name as it appears on your ID\",\n        note: \"This will be used for official documentation\",\n        placeholder: \"Enter your full name\",\n        required: true,\n        disabled: false,\n        startIcon: undefined,\n        endIcon: undefined,\n        minLength: 3,\n        maxLength: undefined,\n        onChange: undefined,\n        onBlur: undefined,\n        onEnter: undefined,\n        validation: undefined,\n        validate: undefined\n    },\n    argTypes: {\n        type: {\n            description: \"HTML input type attribute\",\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\"\n            ],\n            defaultValue: \"text\"\n        },\n        size: {\n            description: \"Input field size\",\n            control: \"select\",\n            options: [\"md\", \"lg\", \"xl\"],\n            defaultValue: \"lg\"\n        },\n        variant: {\n            description: \"Input field style variant\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        label: {\n            description: \"Label text displayed above the input\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Helper text displayed below the label\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note displayed below the input\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text shown when input is empty\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the input field required\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the input field\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        startIcon: {\n            description: \"Icon displayed at the start of the input\",\n            control: \"none\"\n        },\n        endIcon: {\n            description: \"Icon displayed at the end of the input\",\n            control: \"none\"\n        },\n        minLength: {\n            description: \"Minimum number of characters required\",\n            control: \"number\",\n            defaultValue: 3\n        },\n        maxLength: {\n            description:\n                \"Maximum number of characters allowed. To apply this maxLength, update the code similarly to how it's done for minLength. Refer to the minLength example above for guidance.\",\n            control: \"number\"\n        },\n        validation: {\n            description:\n                \"Validation state and error message. Please refer to the example code for details on usage.\",\n            control: \"none\"\n        },\n        validate: {\n            description: \"Custom validation function\",\n            control: \"none\"\n        },\n        onChange: {\n            description: \"Callback function when input value changes\",\n            control: \"none\"\n        },\n        onBlur: {\n            description: \"Callback function when input loses focus\",\n            control: \"none\"\n        },\n        onEnter: {\n            description: \"Callback function when Enter key is pressed\",\n            control: \"none\"\n        }\n    } // Removed forwardEventOnChange and inputRef\n};\n"],"mappings":"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","ignoreList":[]}

package/Input/InputPrimitive.d.ts

@@ -0,0 +1,78 @@
+import * as React from "react";
+import type { Icon as BaseIcon } from "../Icon";
+import { type VariantProps } from "../utils";
+interface InputIconProps extends React.HTMLAttributes<HTMLDivElement> {
+    icon: React.ReactElement;
+    inputSize?: VariantProps<typeof inputVariants>["size"];
+}
+declare const InputIcon: ({ icon, inputSize, className }: InputIconProps) => React.JSX.Element;
+/**
+ * Input
+ *
+ * We support both `disabled` and `data-disabled` as well as `focused` and `data-focused` variants
+ * because these variants can be used by both input and div elements. The last one is used by `MultiAutocomplete` component,
+ * where the `inputVariants` is used to style a div that wraps multiple elements (input, Tags, icons, etc.)
+ */
+declare const inputVariants: (props?: ({
+    size?: "md" | "lg" | "xl" | null | undefined;
+    variant?: "primary" | "secondary" | "ghost" | "ghost-negative" | null | undefined;
+    invalid?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type InputPrimitiveProps<TValue = any> = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> & VariantProps<typeof inputVariants> & {
+    /**
+     * Icon to be displayed at the start of the input field.
+     */
+    startIcon?: React.ReactElement<typeof BaseIcon> | React.ReactElement;
+    /**
+     * Icon to be displayed at the end of the input field.
+     */
+    endIcon?: React.ReactElement<typeof BaseIcon> | React.ReactElement;
+    /**
+     * Maximum length of the input field.
+     */
+    maxLength?: React.InputHTMLAttributes<HTMLInputElement>["size"];
+    /**
+     * Reference to the input element.
+     */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * If true, it will pass the native `event` to the `onChange` callback
+     */
+    forwardEventOnChange?: boolean;
+    /**
+     * Callback function to be called when the Enter key is pressed.
+     */
+    onEnter?: InputPrimitiveProps["onKeyDown"];
+    /**
+     * Callback function to be called when the Esc key is pressed.
+     */
+    onEscape?: InputPrimitiveProps["onKeyDown"];
+    /**
+     * A callback that is executed each time a value is changed.
+     */
+    onChange?: (value: TValue) => void;
+    /**
+     * If true, will select the value in the input on focus.
+     */
+    autoSelect?: boolean;
+};
+declare const InputPrimitive: (({ autoSelect, className, disabled, endIcon, forwardEventOnChange, inputRef, invalid, maxLength, onChange: originalOnChange, onEnter, onEscape, onKeyDown: originalOnKeyDown, onFocus: originalOnFocus, size, startIcon, value, variant, ...props }: InputPrimitiveProps) => React.JSX.Element) & {
+    original: ({ autoSelect, className, disabled, endIcon, forwardEventOnChange, inputRef, invalid, maxLength, onChange: originalOnChange, onEnter, onEscape, onKeyDown: originalOnKeyDown, onFocus: originalOnFocus, size, startIcon, value, variant, ...props }: InputPrimitiveProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ autoSelect, className, disabled, endIcon, forwardEventOnChange, inputRef, invalid, maxLength, onChange: originalOnChange, onEnter, onEscape, onKeyDown: originalOnKeyDown, onFocus: originalOnFocus, size, startIcon, value, variant, ...props }: InputPrimitiveProps) => React.JSX.Element) & {
+        original: ({ autoSelect, className, disabled, endIcon, forwardEventOnChange, inputRef, invalid, maxLength, onChange: originalOnChange, onEnter, onEscape, onKeyDown: originalOnKeyDown, onFocus: originalOnFocus, size, startIcon, value, variant, ...props }: InputPrimitiveProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ autoSelect, className, disabled, endIcon, forwardEventOnChange, inputRef, invalid, maxLength, onChange: originalOnChange, onEnter, onEscape, onKeyDown: originalOnKeyDown, onFocus: originalOnFocus, size, startIcon, value, variant, ...props }: InputPrimitiveProps) => React.JSX.Element) & {
+        original: ({ autoSelect, className, disabled, endIcon, forwardEventOnChange, inputRef, invalid, maxLength, onChange: originalOnChange, onEnter, onEscape, onKeyDown: originalOnKeyDown, onFocus: originalOnFocus, size, startIcon, value, variant, ...props }: InputPrimitiveProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { InputIcon, InputPrimitive, inputVariants, type InputIconProps, type InputPrimitiveProps };