@aivenio/aquarium 1.76.3 → 1.77.0

package/README.md

@@ -7,7 +7,9 @@ Implementation of Aiven Aquarium design system, released as an npm package. Quic
 - Aquarium design system implementation is exposed as React components via npm
 - [Tailwind](https://tailwindcss.com/) is used for styling
 
-## Installing into your app
+## Installation
+
+To install Aquarium to your app:
 
 - `npm install --save @aivenio/aquarium`
 - Make sure to add the correct fonts in your app. [Inter](https://fonts.google.com/specimen/Inter) for Aiven theme.
@@ -50,11 +52,11 @@ Implementation of Aiven Aquarium design system, released as an npm package. Quic
   };
   ```
 
-## Developing the Aquarium components
+## Development
 
 **Use npm 7!** With older npm versions, install peerDependencies manually. If you encounter "Cannot find module..." errors, try `rm -rf node_modules && npm i`. This seems to be a bug introduced in npm@7.
 
-### Environment setup
+### Prerequisites
 
 This project requires certain environment variables to be set before commands such as `npm run build` will work. Most can be copy/pasted with the help of your teammates, but you will need to generate a NPM token yourself in order.
 
@@ -66,40 +68,46 @@ This project requires certain environment variables to be set before commands su
 
   Note that any time a new shell instance is created (for example, when you restart your computer), you need to run `source .env` again, or the variables won't be set. Consider using a solution such as `autoenv` to automatically apply the `.env` file.
 
-- `npm ci` to install dependencies
-- `npm run build` to build the project
-- `npm start` to start Storybook
-
-After Figma has been edited, run:
-
-- `npm run figma -- sync` to fetch new tokens to `./tokens.json`
-- `npm run build` to re-create automatically generated files
-
-### Optional DX improvements
+#### Optional DX improvements
 
 - For VSCode
   - Install Tailwind CSS IntelliSense extension. See <https://github.com/tailwindlabs/tailwindcss-intellisense#recommended-vs-code-settings>
   - Install ESLint extension and optionally enable auto-format on save. See _"Step 4 — Formatting on Save"_ from <https://www.digitalocean.com/community/tutorials/linting-and-formatting-with-eslint-in-vs-code>
 
-### Running locally
+### Common commands
+
+- `npm ci` to install dependencies
+- `npm run build` to build the production build of the library
+- `npm start` to start Storybook
+
+### Developing in the context of your app
 
 To develop Aquarium components in the context of an application, it is easier to run a locally modified version of Aquarium in your application (e.g. Console).
 There are two ways to do this: [npm link](https://docs.npmjs.com/cli/v7/commands/npm-link), or copying the module into your app. This allows you to make changes to components and instantly see the change in the context of the app.
 
 #### npm link
 
+> ⚠️ TODO: This doesn't currently work out of the box. Revise the instructions
+
 1. In design-system directory, run `npm link`
-2. In design-system directory, run `npm link <path to app>/node_modules/react` to avoid running into conflict of having two react instances. This will otherwise break the rules of hooks and crash the app. More info on the issue [here](https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react). If the command fails with errors about peer dependencies, re-run the command, adding `--force` at the end.
+2. In design-system directory, run `npm link <path to your app>/node_modules/react` to avoid running into conflict of having two react instances. This will otherwise break the rules of hooks and crash the app. More info on the issue [here](https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react). If the command fails with errors about peer dependencies, re-run the command, adding `--force` at the end.
 3. In the app directory, run `npm link @aivenio/aquarium`
-4. Now `<app>/node_modules/@aivenio/aquarium` is a symlink to your local Aquarium directory.
+4. Now `<path to your app>/node_modules/@aivenio/aquarium` is a symlink to your local Aquarium directory.
 5. In design-system directory, run `npm run watch`
 6. Done! Now you should be able to develop DS locally, and changes are reflected to the application which depends on `@aivenio/aquarium`
 7. When you want to stop using the npm link, and go back to the regular imported version, in your app directory, run `npm unlink --no-save @aivenio/aquarium`, then `npm i` to reinstall the dependency.
 
 #### Copy module
 
-npm link can be tricky to get working. A simpler approach is to build the module and copy it into your application's `node-modules` directory:
-`npm run build:ds:module && cp -r dist <path to app>/node_modules/@aivenio/aquarium`
+npm link can be tricky to get working. A simpler approach is to build a production build of the DS and copy it into your application's `node-modules` directory. Remember to restart the build process of your app once DS has been built and copied over. Here's a snippet to do all that:
+
+```sh
+cd <path to ds> \
+  && npm run build \
+  && cd <path to your app> \
+  && rm -rf ./node_modules/@aivenio/aquarium/dist \
+  && cp -R <path to ds>/dist ./node_modules/@aivenio/aquarium # && <the dev/build command of your app>
+```
 
 ### Running tests
 

package/dist/src/molecules/Input/Input.d.ts

@@ -15,15 +15,16 @@ export declare type InputBaseProps = React.InputHTMLAttributes<HTMLInputElement>
      */
     endAdornment?: React.ReactElement;
 };
-declare type SearchInputProps = Omit<InputBaseProps, 'type'>;
-declare type InputBaseComponent<TProps extends InputBaseProps | SearchInputProps> = React.ForwardRefExoticComponent<React.RefAttributes<HTMLInputElement> & TProps> & {
+declare type SpecializedInputProps = Omit<InputBaseProps, 'type'>;
+declare type InputBaseComponent<TProps extends InputBaseProps | SpecializedInputProps> = React.ForwardRefExoticComponent<React.RefAttributes<HTMLInputElement> & TProps> & {
     Skeleton: React.FC;
 };
 declare const InputBase: InputBaseComponent<InputBaseProps>;
-declare const SearchInput: InputBaseComponent<SearchInputProps>;
+declare const SearchInput: InputBaseComponent<SpecializedInputProps>;
 export declare type InputProps = InputBaseProps & Omit<LabelControlProps, 'length'>;
 declare type InputComponent = React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>> & {
     Skeleton: React.FC;
 };
+declare const FileInput: InputComponent;
 declare const Input: InputComponent;
-export { Input, InputBase, SearchInput };
+export { FileInput, Input, InputBase, SearchInput };

package/dist/src/molecules/Input/Input.js

@@ -15,18 +15,22 @@ import omit from 'lodash/omit';
 import toString from 'lodash/toString';
 import { Skeleton } from '../../../src/molecules/Skeleton/Skeleton';
 import { getCommonInputStyles } from '../../../src/utils/constants';
-import { InputAdornment, ResetIcon, SearchIcon } from '../../../src/utils/form/InputAdornment/InputAdornment';
+import { InputAdornment, ResetIcon, SearchIcon, UploadIcon } from '../../../src/utils/form/InputAdornment/InputAdornment';
 import { getLabelControlProps, LabelControl } from '../../../src/utils/form/Label/Label';
 import { classNames, tw } from '../../../src/utils/tailwind';
 const createInput = (displayName, opts = {}) => {
     const InputComponent = forwardRef((_a, ref) => {
         var _b;
         var { maxLength, valid = true, required = false, endAdornment, disabled = false, readOnly = false, type } = _a, props = __rest(_a, ["maxLength", "valid", "required", "endAdornment", "disabled", "readOnly", "type"]);
-        const inputType = opts.isSearch ? 'search' : type;
+        const inputType = opts.isSearch ? 'search' : opts.isFile ? 'file' : type;
         const inputRef = React.useRef(null);
         useImperativeHandle(ref, () => inputRef.current);
-        const handleReset = () => {
+        const handleReset = (e) => {
             var _a;
+            if (opts.isFile) {
+                // In case of file input we want to stop the click from going through and triggering the input again
+                e.preventDefault();
+            }
             const el = inputRef.current;
             if (el) {
                 /*
@@ -43,11 +47,12 @@ const createInput = (displayName, opts = {}) => {
             }
         };
         return (React.createElement("span", { className: classNames('Aquarium-InputBase', tw('relative block')) },
-            opts.adornment && React.createElement(InputAdornment, { placement: "left" }, opts.adornment),
+            opts.adornment && (React.createElement(InputAdornment, { placement: "left", className: opts.isFile ? 'icon-stroke-2' : undefined }, opts.adornment)),
             React.createElement("input", Object.assign({ ref: inputRef, type: inputType }, props, { disabled: disabled, maxLength: maxLength, "aria-required": required, readOnly: readOnly, className: classNames({
                     '[&::-webkit-search-cancel-button]:appearance-none': opts.isSearch,
                     'pl-7': opts.adornment,
                     'pr-7': opts.canReset || endAdornment,
+                    'file:text-primary-intense file:typography-small-strong file:border-0 file:bg-transparent file:p-0 file:mr-4': opts.isFile,
                 }, getCommonInputStyles({ readOnly, valid }), props.className) })),
             opts.canReset && (props.value || ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value)) && (React.createElement(InputAdornment, null,
                 React.createElement("button", { "aria-label": "reset search", onClick: handleReset },
@@ -59,37 +64,48 @@ const createInput = (displayName, opts = {}) => {
     return InputComponent;
 };
 const InputBase = createInput('InputBase');
+const FileInputBase = createInput('FileInputBase', {
+    adornment: React.createElement(UploadIcon, null),
+    canReset: true,
+    isFile: true,
+});
 const SearchInput = createInput('SearchInput', {
     adornment: React.createElement(SearchIcon, null),
     canReset: true,
     isSearch: true,
 });
-const Input = React.forwardRef((inputProps, ref) => {
-    var _a, _b;
-    const { readOnly = false, value: valueProp, onChange: onChangeProp } = inputProps, props = __rest(inputProps, ["readOnly", "value", "onChange"]);
-    const isControlled = typeof valueProp !== 'undefined';
-    const [valueState, setValueState] = useState((_a = props.defaultValue) !== null && _a !== void 0 ? _a : '');
-    const value = isControlled ? valueProp : valueState;
-    const handleChange = useCallback((e) => {
-        const next = e.target.value;
-        if (!isControlled) {
-            setValueState(next);
-        }
-        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
-    }, [isControlled, onChangeProp]);
-    // we need a unique ID to be used for an accessible connection between the input and its error message
-    const defaultId = useId();
-    const id = (_b = props.id) !== null && _b !== void 0 ? _b : defaultId;
-    const errorMessageId = useId();
-    const errorProps = props.valid === false ? { 'aria-invalid': true, 'aria-describedby': errorMessageId } : {};
-    const _c = getLabelControlProps(inputProps), { 'data-testid': dataTestId } = _c, labelControlProps = __rest(_c, ['data-testid']);
-    const baseProps = omit(inputProps, Object.keys(labelControlProps).concat(isControlled ? ['defaultValue'] : ['value']));
-    return (React.createElement(LabelControl, Object.assign({ id: `${id}-label`, htmlFor: id, messageId: errorMessageId, length: value !== undefined ? toString(value).length : undefined }, labelControlProps, { className: "Aquarium-Input" }),
-        React.createElement(InputBase, Object.assign({ ref: ref }, baseProps, errorProps, { id: id, "data-testid": dataTestId, onChange: handleChange, disabled: props.disabled, maxLength: props.maxLength, required: props.required, valid: props.valid, readOnly: readOnly }))));
-});
-Input.displayName = 'Input'; // this will affect the Doc code preview in storybook to not show it as <No Display Name/> or <[object Object]/>.
+const createInputComponent = (displayName, options = {}) => {
+    const InputComponentBase = options.input || InputBase;
+    const InputComponent = React.forwardRef((inputProps, ref) => {
+        var _a, _b;
+        const { readOnly = false, value: valueProp, onChange: onChangeProp } = inputProps, props = __rest(inputProps, ["readOnly", "value", "onChange"]);
+        const isControlled = typeof valueProp !== 'undefined';
+        const [valueState, setValueState] = useState((_a = props.defaultValue) !== null && _a !== void 0 ? _a : '');
+        const value = isControlled ? valueProp : valueState;
+        const handleChange = useCallback((e) => {
+            const next = e.target.value;
+            if (!isControlled) {
+                setValueState(next);
+            }
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
+        }, [isControlled, onChangeProp]);
+        // we need a unique ID to be used for an accessible connection between the input and its error message
+        const defaultId = useId();
+        const id = (_b = props.id) !== null && _b !== void 0 ? _b : defaultId;
+        const errorMessageId = useId();
+        const errorProps = props.valid === false ? { 'aria-invalid': true, 'aria-describedby': errorMessageId } : {};
+        const _c = getLabelControlProps(inputProps), { 'data-testid': dataTestId } = _c, labelControlProps = __rest(_c, ['data-testid']);
+        const baseProps = omit(inputProps, Object.keys(labelControlProps).concat(isControlled ? ['defaultValue'] : ['value']));
+        return (React.createElement(LabelControl, Object.assign({ id: `${id}-label`, htmlFor: id, messageId: errorMessageId, length: value !== undefined ? toString(value).length : undefined }, labelControlProps, { className: "Aquarium-Input" }),
+            React.createElement(InputComponentBase, Object.assign({ ref: ref }, baseProps, errorProps, { id: id, "data-testid": dataTestId, onChange: handleChange, disabled: props.disabled, maxLength: props.maxLength, required: props.required, valid: props.valid, readOnly: readOnly }))));
+    });
+    InputComponent.displayName = displayName;
+    return InputComponent;
+};
+const FileInput = createInputComponent('FileInput', { input: FileInputBase });
+const Input = createInputComponent('Input', { input: InputBase });
 Input.Skeleton = () => (React.createElement(LabelControl.Skeleton, null,
     React.createElement(InputBase.Skeleton, null)));
 Input.Skeleton.displayName = 'Input.Skeleton'; // this will affect the Doc code preview in storybook to not show it as <No Display Name/> or <[object Object]/>.
-export { Input, InputBase, SearchInput };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW5wdXQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbW9sZWN1bGVzL0lucHV0L0lucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsVUFBVSxFQUFFLFdBQVcsRUFBRSxtQkFBbUIsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUM7QUFDdEYsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQzFDLE9BQU8sSUFBSSxNQUFNLGFBQWEsQ0FBQztBQUMvQixPQUFPLFFBQVEsTUFBTSxpQkFBaUIsQ0FBQztBQUV2QyxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFFM0QsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDM0QsT0FBTyxFQUFFLGNBQWMsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLE1BQU0sOENBQThDLENBQUM7QUFDckcsT0FBTyxFQUFFLG9CQUFvQixFQUFFLFlBQVksRUFBMEIsTUFBTSw0QkFBNEIsQ0FBQztBQUN4RyxPQUFPLEVBQUUsVUFBVSxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBaUNwRCxNQUFNLFdBQVcsR0FBRyxDQUNsQixXQUFtQixFQUNuQixPQUFxQixFQUFFLEVBQ0ssRUFBRTtJQUM5QixNQUFNLGNBQWMsR0FBRyxVQUFVLENBQy9CLENBQ0UsRUFTaUMsRUFDakMsR0FBRyxFQUNILEVBQUU7O1lBWEYsRUFDRSxTQUFTLEVBQ1QsS0FBSyxHQUFHLElBQUksRUFDWixRQUFRLEdBQUcsS0FBSyxFQUNoQixZQUFZLEVBQ1osUUFBUSxHQUFHLEtBQUssRUFDaEIsUUFBUSxHQUFHLEtBQUssRUFDaEIsSUFBSSxPQUUyQixFQUQ1QixLQUFLLGNBUlYsa0ZBU0MsQ0FEUztRQUlWLE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxRQUFRLENB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
+export { FileInput, Input, InputBase, SearchInput };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW5wdXQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbW9sZWN1bGVzL0lucHV0L0lucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsVUFBVSxFQUFFLFdBQVcsRUFBRSxtQkFBbUIsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUM7QUFDdEYsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQzFDLE9BQU8sSUFBSSxNQUFNLGFBQWEsQ0FBQztBQUMvQixPQUFPLFFBQVEsTUFBTSxpQkFBaUIsQ0FBQztBQUV2QyxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFFM0QsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDM0QsT0FBTyxFQUFFLGNBQWMsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFVBQVUsRUFBRSxNQUFNLDhDQUE4QyxDQUFDO0FBQ2pILE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxZQUFZLEVBQTBCLE1BQU0sNEJBQTRCLENBQUM7QUFDeEcsT0FBTyxFQUFFLFVBQVUsRUFBRSxFQUFFLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQW1DcEQsTUFBTSxXQUFXLEdBQUcsQ0FDbEIsV0FBbUIsRUFDbkIsT0FBcUIsRUFBRSxFQUNLLEVBQUU7SUFDOUIsTUFBTSxjQUFjLEdBQUcsVUFBVSxDQUMvQixDQUNFLEVBU2lDLEVBQ2pDLEdBQUcsRUFDSCxFQUFFOztZQVhGLEVBQ0UsU0FBUyxFQUNULEtBQUssR0FBRyxJQUFJLEVBQ1osUUFBUSxHQUFHLEtBQUssRUFDaEIsWUFBWSxFQUNaLFFBQVEsR0FBRyxLQUFLLEVBQ2hCLFFBQVEsR0FBRyxLQUFLLEVBQ2hCLElBQUksT0FFMkIsRUFENUIsS0FBSyxjQVJWLGtGQVNDLENBRFM7UUFJVixNQUFNLFNBQVMsR0FBRyxJQUFJLENB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

package/dist/src/utils/form/InputAdornment/InputAdornment.d.ts

@@ -10,5 +10,6 @@ declare type Props = Pick<IconProps, 'onClick'>;
 export declare const ValidIcon: React.FC<Props>;
 export declare const ErrorIcon: React.FC<Props>;
 export declare const SearchIcon: React.FC<Props>;
+export declare const UploadIcon: React.FC<Props>;
 export declare const ResetIcon: React.FC<Props>;
 export {};

package/dist/src/utils/form/InputAdornment/InputAdornment.js

@@ -5,6 +5,7 @@ import crossIcon from '../../../../src/icons/cross';
 import errorIcon from '../../../../src/icons/error';
 import searchIcon from '../../../../src/icons/search';
 import tickIcon from '../../../../src/icons/tick';
+import uploadIcon from '../../../../src/icons/upload';
 export const InputAdornment = ({ placement = 'right', className, dense, children, }) => {
     return (React.createElement("span", { className: classNames(className, 'absolute inset-y-0 grow-0 text-inactive flex items-center mx-3', {
             'right-0': placement === 'right',
@@ -17,5 +18,6 @@ export const InputAdornment = ({ placement = 'right', className, dense, children
 export const ValidIcon = ({ onClick }) => (React.createElement(Icon, { icon: tickIcon, color: "success-default", "data-testid": "icon-valid", onClick: onClick }));
 export const ErrorIcon = ({ onClick }) => (React.createElement(Icon, { icon: errorIcon, color: "danger-intense", "data-testid": "icon-invalid", onClick: onClick }));
 export const SearchIcon = ({ onClick }) => (React.createElement(Icon, { icon: searchIcon, color: "inactive", "data-testid": "icon-search", onClick: onClick }));
+export const UploadIcon = ({ onClick }) => (React.createElement(Icon, { icon: uploadIcon, color: "primary-intense", "data-testid": "icon-upload", onClick: onClick }));
 export const ResetIcon = ({ onClick }) => (React.createElement(Icon, { className: "hover:cursor-pointer", icon: crossIcon, color: "inactive", "data-testid": "icon-reset", onClick: onClick }));
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW5wdXRBZG9ybm1lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvdXRpbHMvZm9ybS9JbnB1dEFkb3JubWVudC9JbnB1dEFkb3JubWVudC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFrQixNQUFNLGVBQWUsQ0FBQztBQUM5RCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFFaEQsT0FBTyxTQUFTLE1BQU0saUJBQWlCLENBQUM7QUFDeEMsT0FBTyxTQUFTLE1BQU0saUJBQWlCLENBQUM7QUFDeEMsT0FBTyxVQUFVLE1BQU0sa0JBQWtCLENBQUM7QUFDMUMsT0FBTyxRQUFRLE1BQU0sZ0JBQWdCLENBQUM7QUFRdEMsTUFBTSxDQUFDLE1BQU0sY0FBYyxHQUFzRCxDQUFDLEVBQ2hGLFNBQVMsR0FBRyxPQUFPLEVBQ25CLFNBQVMsRUFDVCxLQUFLLEVBQ0wsUUFBUSxHQUNULEVBQUUsRUFBRTtJQUNILE9BQU8sQ0FDTCw4QkFDRSxTQUFTLEVBQUUsVUFBVSxDQUFDLFNBQVMsRUFBRSxnRUFBZ0UsRUFBRTtZQUNqRyxTQUFTLEVBQUUsU0FBUyxLQUFLLE9BQU87WUFDaEMsUUFBUSxFQUFFLFNBQVMsS0FBSyxNQUFNO1lBQzlCLGtCQUFrQixFQUFFLEtBQUs7WUFDekIsMkJBQTJCLEVBQUUsQ0FBQyxLQUFLO1NBQ3BDLENBQUM7UUFFRixvQkFBQyxPQUFPLElBQUMsR0FBRyxFQUFDLEdBQUcsRUFBQyxJQUFJLEVBQUMsTUFBTSxJQUN6QixRQUFRLENBQ0QsQ0FDTCxDQUNSLENBQUM7QUFDSixDQUFDLENBQUM7QUFJRixNQUFNLENBQUMsTUFBTSxTQUFTLEdBQW9CLENBQUMsRUFBRSxPQUFPLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FDekQsb0JBQUMsSUFBSSxJQUFDLElBQUksRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFDLGlCQUFpQixpQkFBYSxZQUFZLEVBQUMsT0FBTyxFQUFFLE9BQU8sR0FBSSxDQUM1RixDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFvQixDQUFDLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQ3pELG9CQUFDLElBQUksSUFBQyxJQUFJLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBQyxnQkFBZ0IsaUJBQWEsY0FBYyxFQUFDLE9BQU8sRUFBRSxPQUFPLEdBQUksQ0FDOUYsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBb0IsQ0FBQyxFQUFFLE9BQU8sRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUMxRCxvQkFBQyxJQUFJLElBQUMsSUFBSSxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUMsVUFBVSxpQkFBYSxhQUFhLEVBQUMsT0FBTyxFQUFFLE9BQU8sR0FBSSxDQUN4RixDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFvQixDQUFDLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQ3pELG9CQUFDLElBQUksSUFBQyxTQUFTLEVBQUMsc0JBQXNCLEVBQUMsSUFBSSxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUMsVUFBVSxpQkFBYSxZQUFZLEVBQUMsT0FBTyxFQUFFLE9BQU8sR0FBSSxDQUN2SCxDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW5wdXRBZG9ybm1lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvdXRpbHMvZm9ybS9JbnB1dEFkb3JubWVudC9JbnB1dEFkb3JubWVudC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFrQixNQUFNLGVBQWUsQ0FBQztBQUM5RCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFFaEQsT0FBTyxTQUFTLE1BQU0saUJBQWlCLENBQUM7QUFDeEMsT0FBTyxTQUFTLE1BQU0saUJBQWlCLENBQUM7QUFDeEMsT0FBTyxVQUFVLE1BQU0sa0JBQWtCLENBQUM7QUFDMUMsT0FBTyxRQUFRLE1BQU0sZ0JBQWdCLENBQUM7QUFDdEMsT0FBTyxVQUFVLE1BQU0sa0JBQWtCLENBQUM7QUFRMUMsTUFBTSxDQUFDLE1BQU0sY0FBYyxHQUFzRCxDQUFDLEVBQ2hGLFNBQVMsR0FBRyxPQUFPLEVBQ25CLFNBQVMsRUFDVCxLQUFLLEVBQ0wsUUFBUSxHQUNULEVBQUUsRUFBRTtJQUNILE9BQU8sQ0FDTCw4QkFDRSxTQUFTLEVBQUUsVUFBVSxDQUFDLFNBQVMsRUFBRSxnRUFBZ0UsRUFBRTtZQUNqRyxTQUFTLEVBQUUsU0FBUyxLQUFLLE9BQU87WUFDaEMsUUFBUSxFQUFFLFNBQVMsS0FBSyxNQUFNO1lBQzlCLGtCQUFrQixFQUFFLEtBQUs7WUFDekIsMkJBQTJCLEVBQUUsQ0FBQyxLQUFLO1NBQ3BDLENBQUM7UUFFRixvQkFBQyxPQUFPLElBQUMsR0FBRyxFQUFDLEdBQUcsRUFBQyxJQUFJLEVBQUMsTUFBTSxJQUN6QixRQUFRLENBQ0QsQ0FDTCxDQUNSLENBQUM7QUFDSixDQUFDLENBQUM7QUFJRixNQUFNLENBQUMsTUFBTSxTQUFTLEdBQW9CLENBQUMsRUFBRSxPQUFPLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FDekQsb0JBQUMsSUFBSSxJQUFDLElBQUksRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFDLGlCQUFpQixpQkFBYSxZQUFZLEVBQUMsT0FBTyxFQUFFLE9BQU8sR0FBSSxDQUM1RixDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFvQixDQUFDLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQ3pELG9CQUFDLElBQUksSUFBQyxJQUFJLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBQyxnQkFBZ0IsaUJBQWEsY0FBYyxFQUFDLE9BQU8sRUFBRSxPQUFPLEdBQUksQ0FDOUYsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBb0IsQ0FBQyxFQUFFLE9BQU8sRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUMxRCxvQkFBQyxJQUFJLElBQUMsSUFBSSxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUMsVUFBVSxpQkFBYSxhQUFhLEVBQUMsT0FBTyxFQUFFLE9BQU8sR0FBSSxDQUN4RixDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFvQixDQUFDLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQzFELG9CQUFDLElBQUksSUFBQyxJQUFJLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBQyxpQkFBaUIsaUJBQWEsYUFBYSxFQUFDLE9BQU8sRUFBRSxPQUFPLEdBQUksQ0FDL0YsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLFNBQVMsR0FBb0IsQ0FBQyxFQUFFLE9BQU8sRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUN6RCxvQkFBQyxJQUFJLElBQUMsU0FBUyxFQUFDLHNCQUFzQixFQUFDLElBQUksRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFDLFVBQVUsaUJBQWEsWUFBWSxFQUFDLE9BQU8sRUFBRSxPQUFPLEdBQUksQ0FDdkgsQ0FBQyJ9

package/dist/styles.css

@@ -3518,6 +3518,27 @@ input[type='number'].no-arrows {
 .aquarium-theme-dark .Aquarium-Card {
   --aquarium-background-color-primary-hover: color-mix(in srgb, var(--aquarium-colors-primary-100) 70%, transparent);
  }
+.file\:typography-small-strong::file-selector-button{
+  font: normal 500 14px/1.42 Inter;
+}
+.file\:mr-4::file-selector-button{
+  margin-right: 12px;
+}
+.file\:border-0::file-selector-button{
+  border-width: 0px;
+  border-width: var(--aquarium-border-width-0);
+}
+.file\:bg-transparent::file-selector-button{
+  background-color: transparent;
+  background-color: var(--aquarium-colors-transparent);
+}
+.file\:p-0::file-selector-button{
+  padding: 0px;
+}
+.file\:text-primary-intense::file-selector-button{
+  color: rgba(53,69,190,1);
+  color: var(--aquarium-text-color-primary-intense);
+}
 .placeholder\:text-inactive::-moz-placeholder{
   color: rgba(150,150,160,1);
   color: var(--aquarium-text-color-inactive);

package/dist/system.cjs

@@ -4227,6 +4227,7 @@ __export(system_exports, {
   EmptyState: () => EmptyState,
   EmptyStateLayout: () => EmptyStateLayout,
   ExternalLinkButton: () => ExternalLinkButton,
+  FileInput: () => FileInput,
   Flexbox: () => Flexbox,
   FlexboxItem: () => FlexboxItem,
   FormControl: () => FormControl,
@@ -4377,6 +4378,7 @@ __export(molecules_exports, {
   EmptyState: () => EmptyState,
   EmptyStateLayout: () => EmptyStateLayout,
   ExternalLinkButton: () => ExternalLinkButton,
+  FileInput: () => FileInput,
   Flexbox: () => Flexbox,
   FlexboxItem: () => FlexboxItem,
   GhostButton: () => GhostButton,
@@ -10443,6 +10445,7 @@ var import_cross5 = __toESM(require_cross());
 var import_error3 = __toESM(require_error());
 var import_search3 = __toESM(require_search());
 var import_tick4 = __toESM(require_tick());
+var import_upload2 = __toESM(require_upload());
 var InputAdornment = ({
   placement = "right",
   className,
@@ -10467,6 +10470,12 @@ var SearchIcon = ({ onClick }) => /* @__PURE__ */ import_react62.default.createE
   "data-testid": "icon-search",
   onClick
 });
+var UploadIcon = ({ onClick }) => /* @__PURE__ */ import_react62.default.createElement(Icon, {
+  icon: import_upload2.default,
+  color: "primary-intense",
+  "data-testid": "icon-upload",
+  onClick
+});
 var ResetIcon = ({ onClick }) => /* @__PURE__ */ import_react62.default.createElement(Icon, {
   className: "hover:cursor-pointer",
   icon: import_cross5.default,
@@ -10497,11 +10506,14 @@ var createInput = (displayName, opts = {}) => {
         "type"
       ]);
       var _a2;
-      const inputType = opts.isSearch ? "search" : type;
+      const inputType = opts.isSearch ? "search" : opts.isFile ? "file" : type;
       const inputRef = import_react63.default.useRef(null);
       (0, import_react63.useImperativeHandle)(ref, () => inputRef.current);
-      const handleReset = () => {
+      const handleReset = (e) => {
         var _a3;
+        if (opts.isFile) {
+          e.preventDefault();
+        }
         const el = inputRef.current;
         if (el) {
           const lastValue = el.value;
@@ -10514,7 +10526,8 @@ var createInput = (displayName, opts = {}) => {
       return /* @__PURE__ */ import_react63.default.createElement("span", {
         className: classNames("Aquarium-InputBase", tw("relative block"))
       }, opts.adornment && /* @__PURE__ */ import_react63.default.createElement(InputAdornment, {
-        placement: "left"
+        placement: "left",
+        className: opts.isFile ? "icon-stroke-2" : void 0
       }, opts.adornment), /* @__PURE__ */ import_react63.default.createElement("input", __spreadProps(__spreadValues({
         ref: inputRef,
         type: inputType
@@ -10527,7 +10540,8 @@ var createInput = (displayName, opts = {}) => {
           {
             "[&::-webkit-search-cancel-button]:appearance-none": opts.isSearch,
             "pl-7": opts.adornment,
-            "pr-7": opts.canReset || endAdornment
+            "pr-7": opts.canReset || endAdornment,
+            "file:text-primary-intense file:typography-small-strong file:border-0 file:bg-transparent file:p-0 file:mr-4": opts.isFile
           },
           getCommonInputStyles({ readOnly, valid }),
           props.className
@@ -10545,57 +10559,68 @@ var createInput = (displayName, opts = {}) => {
   return InputComponent;
 };
 var InputBase = createInput("InputBase");
+var FileInputBase = createInput("FileInputBase", {
+  adornment: /* @__PURE__ */ import_react63.default.createElement(UploadIcon, null),
+  canReset: true,
+  isFile: true
+});
 var SearchInput = createInput("SearchInput", {
   adornment: /* @__PURE__ */ import_react63.default.createElement(SearchIcon, null),
   canReset: true,
   isSearch: true
 });
-var Input2 = import_react63.default.forwardRef((inputProps, ref) => {
-  var _b, _c;
-  const _a = inputProps, { readOnly = false, value: valueProp, onChange: onChangeProp } = _a, props = __objRest(_a, ["readOnly", "value", "onChange"]);
-  const isControlled = typeof valueProp !== "undefined";
-  const [valueState, setValueState] = (0, import_react63.useState)((_b = props.defaultValue) != null ? _b : "");
-  const value = isControlled ? valueProp : valueState;
-  const handleChange = (0, import_react63.useCallback)(
-    (e) => {
-      const next = e.target.value;
-      if (!isControlled) {
-        setValueState(next);
-      }
-      onChangeProp == null ? void 0 : onChangeProp(e);
-    },
-    [isControlled, onChangeProp]
-  );
-  const defaultId = (0, import_utils9.useId)();
-  const id = (_c = props.id) != null ? _c : defaultId;
-  const errorMessageId = (0, import_utils9.useId)();
-  const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
-  const _d = getLabelControlProps(inputProps), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
-  const baseProps = (0, import_omit5.default)(
-    inputProps,
-    Object.keys(labelControlProps).concat(isControlled ? ["defaultValue"] : ["value"])
-  );
-  return /* @__PURE__ */ import_react63.default.createElement(LabelControl, __spreadProps(__spreadValues({
-    id: `${id}-label`,
-    htmlFor: id,
-    messageId: errorMessageId,
-    length: value !== void 0 ? (0, import_toString.default)(value).length : void 0
-  }, labelControlProps), {
-    className: "Aquarium-Input"
-  }), /* @__PURE__ */ import_react63.default.createElement(InputBase, __spreadProps(__spreadValues(__spreadValues({
-    ref
-  }, baseProps), errorProps), {
-    id,
-    "data-testid": dataTestId,
-    onChange: handleChange,
-    disabled: props.disabled,
-    maxLength: props.maxLength,
-    required: props.required,
-    valid: props.valid,
-    readOnly
-  })));
-});
-Input2.displayName = "Input";
+var createInputComponent = (displayName, options = {}) => {
+  const InputComponentBase = options.input || InputBase;
+  const InputComponent = import_react63.default.forwardRef((inputProps, ref) => {
+    var _b, _c;
+    const _a = inputProps, { readOnly = false, value: valueProp, onChange: onChangeProp } = _a, props = __objRest(_a, ["readOnly", "value", "onChange"]);
+    const isControlled = typeof valueProp !== "undefined";
+    const [valueState, setValueState] = (0, import_react63.useState)((_b = props.defaultValue) != null ? _b : "");
+    const value = isControlled ? valueProp : valueState;
+    const handleChange = (0, import_react63.useCallback)(
+      (e) => {
+        const next = e.target.value;
+        if (!isControlled) {
+          setValueState(next);
+        }
+        onChangeProp == null ? void 0 : onChangeProp(e);
+      },
+      [isControlled, onChangeProp]
+    );
+    const defaultId = (0, import_utils9.useId)();
+    const id = (_c = props.id) != null ? _c : defaultId;
+    const errorMessageId = (0, import_utils9.useId)();
+    const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
+    const _d = getLabelControlProps(inputProps), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
+    const baseProps = (0, import_omit5.default)(
+      inputProps,
+      Object.keys(labelControlProps).concat(isControlled ? ["defaultValue"] : ["value"])
+    );
+    return /* @__PURE__ */ import_react63.default.createElement(LabelControl, __spreadProps(__spreadValues({
+      id: `${id}-label`,
+      htmlFor: id,
+      messageId: errorMessageId,
+      length: value !== void 0 ? (0, import_toString.default)(value).length : void 0
+    }, labelControlProps), {
+      className: "Aquarium-Input"
+    }), /* @__PURE__ */ import_react63.default.createElement(InputComponentBase, __spreadProps(__spreadValues(__spreadValues({
+      ref
+    }, baseProps), errorProps), {
+      id,
+      "data-testid": dataTestId,
+      onChange: handleChange,
+      disabled: props.disabled,
+      maxLength: props.maxLength,
+      required: props.required,
+      valid: props.valid,
+      readOnly
+    })));
+  });
+  InputComponent.displayName = displayName;
+  return InputComponent;
+};
+var FileInput = createInputComponent("FileInput", { input: FileInputBase });
+var Input2 = createInputComponent("Input", { input: InputBase });
 Input2.Skeleton = () => /* @__PURE__ */ import_react63.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react63.default.createElement(InputBase.Skeleton, null));
 Input2.Skeleton.displayName = "Input.Skeleton";
 
@@ -16074,6 +16099,7 @@ var system_default = __spreadValues({}, molecules_exports);
   EmptyState,
   EmptyStateLayout,
   ExternalLinkButton,
+  FileInput,
   Flexbox,
   FlexboxItem,
   FormControl,