@jobber/components 8.2.0 → 8.4.0

package/dist/docs/InputText/InputText.md

@@ -10,24 +10,23 @@ Use this to allow users to provide short answers.
 
 ```tsx
 import React, { useState } from "react";
-import type { InputTextRebuiltProps } from "@jobber/components/InputText";
+import type { InputTextProps } from "@jobber/components/InputText";
 import { InputText } from "@jobber/components/InputText";
 
-export const ControlledExample = ({
+export const InputTextBasicExample = ({
   onChange,
   ...props
-}: Partial<InputTextRebuiltProps>) => {
-  const [age, setAge] = useState("Veintisiete");
+}: Partial<InputTextProps>) => {
+  const [value, setValue] = useState(props.value ?? "");
 
   return (
     <InputText
-      version={2}
       name="age"
       placeholder="Age in words"
       {...props}
-      value={age}
+      value={value}
       onChange={newValue => {
-        setAge(newValue);
+        setValue(newValue);
         onChange?.(newValue);
       }}
     />
@@ -46,15 +45,29 @@ For web, you can set a minimum and maximum number of rows. See:
 [Web/rows example](/storybook/web/?path=/story/components-forms-and-inputs-inputtext--multiline).
 
 ```tsx
-import React from "react";
-import type { InputTextLegacyProps } from "@jobber/components/InputText";
+import React, { useState } from "react";
+import type { InputTextProps } from "@jobber/components/InputText";
 import { InputText } from "@jobber/components/InputText";
 
 export function InputTextMultilineExample(
-  props: Partial<Omit<InputTextLegacyProps, "multiline">>,
+  props: Partial<Omit<InputTextProps, "multiline">>,
 ) {
+  const [value, setValue] = useState<string>(props.value ?? "");
+
   return (
-    <InputText multiline={true} placeholder="Describe your age" {...props} />
+    <InputText
+      multiline={true}
+      placeholder="Describe your age"
+      {...props}
+      value={value}
+      onChange={(
+        newValue: string,
+        event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+      ) => {
+        setValue(newValue);
+        props.onChange?.(newValue, event);
+      }}
+    />
   );
 }
 ```
@@ -74,19 +87,41 @@ With clearer guidance around the purpose of inputs, the user is able to better
 focus on the task at hand.
 
 ```tsx
-import React from "react";
-import type { InputTextLegacyProps } from "@jobber/components/InputText";
+import React, { useState } from "react";
+import type { InputTextProps } from "@jobber/components/InputText";
 import { InputText } from "@jobber/components/InputText";
 import { Content } from "@jobber/components/Content";
 
 export function InputTextPrefixSuffixExample(
-  props: Partial<Omit<InputTextLegacyProps, "multiline" | "rows">>,
+  props: Partial<Omit<InputTextProps, "multiline" | "rows">>,
 ) {
+  const [invoiceTotal, setInvoiceTotal] = useState<string>(
+    props.value ?? "1,000,000",
+  );
+  const [search, setSearch] = useState<string>(props.value ?? "");
+
+  const handleChange = (
+    newValue: string,
+    event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    setInvoiceTotal(newValue);
+    props.onChange?.(newValue, event);
+  };
+
+  const handleSearchChange = (
+    newValue: string,
+    event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    setSearch(newValue);
+    props.onChange?.(newValue, event);
+  };
+
   return (
     <Content>
       <InputText
-        defaultValue="1,000,000"
         placeholder="Invoice Total"
+        value={invoiceTotal}
+        onChange={handleChange}
         prefix={{ label: "$", icon: "invoice" }}
         suffix={{ label: ".00" }}
         {...props}
@@ -94,6 +129,8 @@ export function InputTextPrefixSuffixExample(
       <InputText
         placeholder="Search"
         prefix={{ icon: "search" }}
+        value={search}
+        onChange={handleSearchChange}
         suffix={{
           icon: "cross",
           ariaLabel: "clear search",
@@ -118,33 +155,37 @@ Follow the
 for guidance on writing helpful error messages.
 
 ```tsx
-import React from "react";
-import type { InputTextLegacyProps } from "@jobber/components/InputText";
+import React, { useState } from "react";
+import type { InputTextProps } from "@jobber/components/InputText";
 import { InputText } from "@jobber/components/InputText";
 
 export function InputTextValidationExample(
-  props: Partial<Omit<InputTextLegacyProps, "multiline" | "rows">>,
+  props: Partial<Omit<InputTextProps, "multiline" | "rows">>,
 ) {
+  const [value, setValue] = useState("");
+  const [error, setError] = useState<string | undefined>();
+
+  function handleChange(newValue: string) {
+    setValue(newValue);
+
+    if (!newValue) {
+      setError("You have to tell us your age");
+    } else if (!isNaN(Number(newValue))) {
+      setError("Type your age in words please.");
+    } else if (newValue.length >= 10) {
+      setError("That seems too old.");
+    } else {
+      setError(undefined);
+    }
+  }
+
   return (
     <InputText
       placeholder="What's your age"
-      validations={{
-        required: {
-          value: true,
-          message: "You have to tell us your age",
-        },
-        validate: val => {
-          if (val.length > 0 && !isNaN(val)) {
-            return "Type your age in words please.";
-          }
-
-          if (val.length >= 10) {
-            return "That seems too old.";
-          }
-
-          return true;
-        },
-      }}
+      value={value}
+      onChange={handleChange}
+      invalid={!!error}
+      error={error}
       {...props}
     />
   );
@@ -157,11 +198,11 @@ export function InputTextValidationExample(
 
 ```tsx
 import React from "react";
-import type { InputTextLegacyProps } from "@jobber/components/InputText";
+import type { InputTextProps } from "@jobber/components/InputText";
 import { InputText } from "@jobber/components/InputText";
 
 export function InputTextDisabledExample(
-  props: Partial<Omit<InputTextLegacyProps, "multiline" | "rows">>,
+  props: Partial<Omit<InputTextProps, "multiline" | "rows">>,
 ) {
   return (
     <InputText
@@ -182,11 +223,11 @@ See:
 
 ```tsx
 import React from "react";
-import type { InputTextLegacyProps } from "@jobber/components/InputText";
 import { InputText } from "@jobber/components/InputText";
+import type { InputTextProps } from "@jobber/components/InputText";
 
 export function InputTextInvalidExample(
-  props: Partial<Omit<InputTextLegacyProps, "multiline" | "rows">>,
+  props: Partial<Omit<InputTextProps, "multiline" | "rows">>,
 ) {
   return (
     <InputText placeholder="Email" value="atlantis" invalid={true} {...props} />
@@ -201,14 +242,16 @@ You can use `FormFieldLabel` to provide a label outside of the input. The
 appears when a value is provided.
 
 ```tsx
-import React from "react";
-import type { InputTextLegacyProps } from "@jobber/components/InputText";
+import React, { useState } from "react";
+import type { InputTextProps } from "@jobber/components/InputText";
 import { InputText } from "@jobber/components/InputText";
 import { FormFieldLabel } from "@jobber/components/FormField";
 
 export function InputTextExternalLabelExample(
-  props: Partial<Omit<InputTextLegacyProps, "multiline" | "rows">>,
+  props: Partial<Omit<InputTextProps, "multiline" | "rows">>,
 ) {
+  const [value, setValue] = useState<string>(props.value ?? "");
+
   return (
     <div style={{ width: "100%" }}>
       <FormFieldLabel external={true} htmlFor="ext-input">
@@ -220,6 +263,14 @@ export function InputTextExternalLabelExample(
         clearable="always"
         showMiniLabel={false}
         {...props}
+        value={value}
+        onChange={(
+          newValue: string,
+          event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+        ) => {
+          setValue(newValue);
+          props.onChange?.(newValue, event);
+        }}
       />
     </div>
   );
@@ -231,92 +282,87 @@ export function InputTextExternalLabelExample(
 Determine what default keyboard appears on mobile.
 
 ```tsx
-import React from "react";
-import type { InputTextLegacyProps } from "@jobber/components/InputText";
+import React, { useState } from "react";
+import type { InputTextProps } from "@jobber/components/InputText";
 import { InputText } from "@jobber/components/InputText";
 
 export function InputTextKeyboardExample(
-  props: Partial<Omit<InputTextLegacyProps, "multiline" | "rows">>,
+  props: Partial<Omit<InputTextProps, "multiline" | "rows">>,
 ) {
+  const [value, setValue] = useState<string>(props.value ?? "");
+
   return (
-    <InputText placeholder="Describe your age" keyboard="numeric" {...props} />
+    <InputText
+      placeholder="Describe your age"
+      inputMode="numeric"
+      {...props}
+      value={value}
+      onChange={(
+        newValue: string,
+        event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+      ) => {
+        setValue(newValue);
+        props.onChange?.(newValue, event);
+      }}
+    />
   );
 }
 ```
 
 
-## Configuration
-
-### react-hook-form
-
-Atlantis utilizes [React Hook Form](https://react-hook-form.com/) to handle
-`input` and `form` validation. This means that the
-[React Hook Form validation options](https://react-hook-form.com/api#register)
-are available out of the box.
-
-This includes, but is not limited to:
-
-* `required` - A Boolean which, if true, indicates that the input must have a
-  value.
-* `maxLength` - The maximum length of the value to accept for this input.
-* `minLength` - The minimum length of the value to accept for this input.
-* `pattern` - The regex pattern for the input.
-* `validate` - You can pass a callback function as the argument to validate, or
-  you can pass an object of callback functions to validate all of them.
-
-### Using onValidation (Web)
-
-If you need to capture the error message and render it outside of the component.
-Read the [InputValidation](../InputValidation/InputValidation.md) documentation.
-
-### Version 2 Shim (Experimental)
-
-If you need to use the version 2 shim, you can pass `version={2}` to the
-`InputText` and provide the required props. Due to issues with typescript
-[see](https://github.com/microsoft/TypeScript/issues/32447) the aria attributes
-(and other props separated by `-`) are not typed correctly. This means that the
-shim will not enforce the version to be set to `2` when using these props. As a
-result version 1 usages will have these props appear in the intellisense but
-they will not do anything.
-
-
 ## Props
 
 ### Web
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
+| `value` | `string` | Yes | — | The current value of the input. |
 | `align` | `"center" | "right"` | No | — | Determines the alignment of the text inside the input. |
-| `autocomplete` | `AutocompleteTypes | boolean` | No | — | Determines if browser form autocomplete is enabled. Note that "one-time-code" is experimental and should not be used ... |
-| `autofocus` | `boolean` | No | — | Determines if the input should be auto-focused, using the HTML attribute |
-| `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value.  You should always use `while-editing` if you want the input t... |
-| `defaultValue` | `Date | string` | No | — | Initial value of the input. Only use this when you need to pre-populate the field with a data that is not controlled ... |
+| `aria-activedescendant` | `string` | No | — | ID of the currently active descendant element. Used for composite widgets like combobox or listbox. @see {@link https... |
+| `aria-autocomplete` | `"both" | "inline" | "list" | "none"` | No | — | Indicates the type of autocomplete interaction. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-autocomplete} |
+| `aria-controls` | `string` | No | — | Indicates the element that controls the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-controls} |
+| `aria-describedby` | `string` | No | — | Identifies the element (or elements) that describes the object. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-... |
+| `aria-details` | `string` | No | — | Identifies the element (or elements) that provide a detailed, extended description. @see {@link https://www.w3.org/TR... |
+| `aria-expanded` | `Booleanish` | No | — | Indicates whether the element is expanded or collapsed. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-expanded} |
+| `aria-label` | `string` | No | — | Defines a string value that labels the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-label} |
+| `aria-labelledby` | `string` | No | — | Identifies the element (or elements) that labels the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/... |
+| `aria-required` | `Booleanish` | No | — | Indicates that user input is required before form submission. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-re... |
+| `autoComplete` | `string` | No | — | Autocomplete behavior for the input (React casing, string values only). Use standard HTML autocomplete values or "on"... |
+| `autoFocus` | `boolean` | No | — | Whether the input should be auto-focused (React casing). |
+| `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value. |
 | `description` | `ReactNode` | No | — | Further description of the input, can be used for a hint. |
-| `disabled` | `boolean` | No | — | Disable the input |
-| `id` | `string` | No | — | A unique identifier for the input. |
-| `inline` | `boolean` | No | — | Adjusts the form field to go inline with a content. This also silences the given `validations` prop. You'd have to us... |
-| `inputRef` | `RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>` | No | — |  |
+| `disabled` | `boolean` | No | — | Whether the input is disabled. |
+| `error` | `string` | No | — | Error message to display. This also highlights the field red. |
+| `id` | `string` | No | — | The unique identifier for the input element. |
+| `inline` | `boolean` | No | — | Adjusts the form field to go inline with content. |
+| `inputMode` | `"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"` | No | — | Input mode hint for virtual keyboards. |
 | `invalid` | `boolean` | No | — | Highlights the field red to indicate an error. |
-| `keyboard` | `"decimal" | "numeric"` | No | — | Determines what kind of keyboard appears on mobile web. |
-| `loading` | `boolean` | No | — | Show a spinner to indicate loading |
-| `maxLength` | `number` | No | — | Maximum character length for an input. This also changes the width to roughly the same size as the max length. This i... |
+| `loading` | `boolean` | No | — | Show a spinner to indicate loading. |
+| `maxLength` | `number` | No | — | Maximum number of characters allowed in the input. |
 | `multiline` | `boolean` | No | — | Use this when you're expecting a long answer. |
-| `name` | `string` | No | — | Name of the input. |
-| `onBlur` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Blur callback. |
-| `onChange` | `(newValue: string | number | boolean | Date, event?: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void` | No | — | onChange handler that provides the new value (or event) @param newValue @param event |
-| `onEnter` | `(event: KeyboardEvent<Element>) => void` | No | — | A callback to handle "Enter" keypress. This will only run if Enter is the only key. Will not run if Shift or Control ... |
-| `onFocus` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Focus callback. |
-| `onValidation` | `(message: string) => void` | No | — | Callback to get the the status and message when validating a field @param message |
+| `name` | `string` | No | — | The name attribute for the input element. |
+| `onBlur` | `(event: FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void` | No | — | Blur event handler. |
+| `onChange` | `(newValue: string, event?: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void` | No | — | Custom onChange handler that provides the new value as the first argument. |
+| `onClick` | `(event: MouseEvent<HTMLInputElement | HTMLTextAreaElement, MouseEvent>) => void` | No | — | Click event handler. |
+| `onEnter` | `(event: KeyboardEvent<Element>) => void` | No | — | @deprecated Use `onKeyDown` or `onKeyUp` instead. |
+| `onFocus` | `(event: FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void` | No | — | Focus event handler. |
+| `onKeyDown` | `(event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void` | No | — | Key down event handler. |
+| `onKeyUp` | `(event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void` | No | — | Key up event handler. |
+| `onMouseDown` | `(event: MouseEvent<HTMLInputElement | HTMLTextAreaElement, MouseEvent>) => void` | No | — | Mouse down event handler. |
+| `onMouseUp` | `(event: MouseEvent<HTMLInputElement | HTMLTextAreaElement, MouseEvent>) => void` | No | — | Mouse up event handler. |
+| `onPointerDown` | `(event: PointerEvent<HTMLInputElement | HTMLTextAreaElement>) => void` | No | — | Pointer down event handler. |
+| `onPointerUp` | `(event: PointerEvent<HTMLInputElement | HTMLTextAreaElement>) => void` | No | — | Pointer up event handler. |
+| `pattern` | `string` | No | — | Validation pattern (regex) for the input. |
 | `placeholder` | `string` | No | — | Text that appears inside the input when empty and floats above the value as a mini label once the user enters a value... |
-| `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field |
-| `readonly` | `boolean` | No | — | Prevents users from editing the value. |
-| `ref` | `Ref<InputTextRef>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
+| `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field. |
+| `readOnly` | `boolean` | No | — | Whether the input is read-only (HTML standard casing). |
+| `ref` | `Ref<HTMLInputElement | HTMLTextAreaElement>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
+| `required` | `boolean` | No | — | Whether the input is required before form submission. |
+| `role` | `string` | No | — | Role attribute for accessibility. |
 | `rows` | `RowRange | number` | No | — | Specifies the visible height of a long answer form field. Can be in the form of a single number to set a static heigh... |
-| `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
+| `showMiniLabel` | `boolean` | No | `true` | When false, the placeholder text only serves as a standard placeholder and disappears when the user types, instead of... |
 | `size` | `"large" | "small"` | No | — | Adjusts the interface to either have small or large spacing. |
-| `suffix` | `{ onClick: () => void; readonly ariaLabel: string; readonly icon: IconNames; readonly label?: string; } | { onClick?: never; ariaLabel?: never; readonly label?: string; readonly icon?: IconNames; }` | No | — | Adds a suffix label and icon with an optional action to the field |
+| `suffix` | `{ onClick: () => void; readonly ariaLabel: string; readonly icon: IconNames; readonly label?: string; } | { onClick?: never; ariaLabel?: never; readonly label?: string; readonly icon?: IconNames; }` | No | — | Adds a suffix label and icon with an optional action to the field. |
+| `tabIndex` | `number` | No | — | Tab index for keyboard navigation. |
 | `toolbar` | `ReactNode` | No | — | Toolbar to render content below the input. |
 | `toolbarVisibility` | `"always" | "while-editing"` | No | — | Determines the visibility of the toolbar. |
-| `validations` | `RegisterOptions` | No | — | Show an error message above the field. This also highlights the the field red if an error message shows up. |
-| `value` | `Date | number | string` | No | — | Set the component to the given value. |
-| `version` | `1` | No | — | Experimental: Determine which version of the FormField to use. Right now this isn't used but it will be used in the f... |

package/dist/docs/Menu/Menu.md

@@ -502,7 +502,7 @@ and should not be used for new implementations.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `name` | `IconNames` | Yes | — | The icon to show. |
-| `color` | `"task" | "text" | "warning" | "icon" | "disabled" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
+| `color` | `"task" | "text" | "warning" | "icon" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | "destructive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
 | `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
 | `size` | `"base" | "large" | "small"` | No | `base` | Changes the size to small or large. |
 | `testID` | `string` | No | — | Used to locate this view in end-to-end tests |

package/dist/docs/Modal/Modal.md

@@ -195,7 +195,7 @@ function ModalWithCustomFocus() {
       {!hideActivator && <Button label="Open Modal" onClick={() => setShowModal(true)} />}
       <Modal.Provider open={true} onRequestClose={() => setShowModal(false)}>
         <Modal.Activator>
-          <InputText placeholder="Modal will return focus here" />
+          <InputText placeholder="Modal will return focus here"  value="" />
       </Modal.Activator>
       <Modal.Content>
         <Modal.Header title="Modal Title" />

package/dist/docs/Spinner/Spinner.md

@@ -1,5 +1,13 @@
 # Spinner
 
+> **Deprecated.** Use
+> [ActivityIndicator](../ActivityIndicator/ActivityIndicator.md) for new work.
+> `ActivityIndicator` is the supported indeterminate loading indicator going
+> forward — it offers the same semantic with a cleaner prop surface, a polite
+> `role="status"`, theme-adaptive tokens, Material-style three-layer
+> animation, and a `prefers-reduced-motion` fallback. `Spinner` continues to
+> work unchanged for existing call sites.
+
 Spinner is used to indicate the loading of content where the actual amount of
 loading time or progress is unknown.
 
@@ -32,7 +40,7 @@ If the amount of progress or loading time is known, use
 process.
 
 To indicate loading content in mobile applications, refer to
-[ActivityIndicator](/components/ActivityIndicator).
+[ActivityIndicator](../ActivityIndicator/ActivityIndicator.md).
 
 
 ## Props

package/dist/docs/Stack/Stack.md

@@ -190,6 +190,6 @@ and screen reader compatibility.
 | `id` | `string` | No | — | Standard HTML id attribute. |
 | `recursive` | `boolean` | No | — | Whether to recursively apply the stack spacing to all the children, not just the top-level. |
 | `role` | `AriaRole` | No | — | Standard HTML role attribute. |
-| `splitAfter` | `1 | 2 | 5 | 3 | 4 | 6 | 11 | 7 | 8 | 9 | 10 | 12 | 13 | 14 | 15` | No | — | Setting this will push the stack down to the bottom of the parent container, after the number of children provided (1... |
+| `splitAfter` | `1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15` | No | — | Setting this will push the stack down to the bottom of the parent container, after the number of children provided (1... |
 | `UNSAFE_className` | `{ container?: string; }` | No | — | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |
 | `UNSAFE_style` | `{ container?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |

package/dist/docs/index.md

@@ -1,3 +1,4 @@
+[ActivityIndicator](./ActivityIndicator/ActivityIndicator.md)
 [AnimatedPresence](./AnimatedPresence/AnimatedPresence.md)
 [AnimatedSwitcher](./AnimatedSwitcher/AnimatedSwitcher.md)
 [Animation](./Animation/Animation.md)

package/dist/docs/usage-guidelines/usage-guidelines.md

@@ -14,8 +14,6 @@ deprecated.
 | Component    | Import                                                           | v2 prop                                           |
 | ------------ | ---------------------------------------------------------------- | ------------------------------------------------- |
 | Autocomplete | `import { Autocomplete } from "@jobber/components/Autocomplete"` | `version={2}` — fully controlled, async support   |
-| InputNumber  | `import { InputNumber } from "@jobber/components/InputNumber"`   | `version={2}`                                     |
-| InputText    | `import { InputText } from "@jobber/components/InputText"`       | `version={2}`                                     |
 | Modal        | `import { Modal } from "@jobber/components/Modal"`               | `version={2}` — uses `Modal.Provider` composition |
 
 ## Deprecated components — do not use

package/dist/index.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
+var ActivityIndicator = require('./ActivityIndicator-cjs.js');
 var AnimatedPresence = require('./AnimatedPresence-cjs.js');
 var AnimatedSwitcher = require('./AnimatedSwitcher-cjs.js');
 var AtlantisContext = require('./AtlantisContext-cjs.js');
@@ -61,7 +62,7 @@ var InputGroup = require('./InputGroup-cjs.js');
 var InputNumber = require('./InputNumber-cjs.js');
 var InputPassword = require('./InputPassword-cjs.js');
 var InputPhoneNumber = require('./InputPhoneNumber-cjs.js');
-var InputText_index = require('./InputText/index.cjs');
+var InputText = require('./InputText-cjs.js');
 var InputTime = require('./InputTime-cjs.js');
 var InputValidation = require('./InputValidation-cjs.js');
 var LightBox = require('./LightBox-cjs.js');
@@ -93,6 +94,7 @@ var Tiles = require('./Tiles-cjs.js');
 var showToast = require('./showToast-cjs.js');
 var Tooltip = require('./Tooltip-cjs.js');
 var Typography = require('./Typography-cjs.js');
+require('classnames');
 require('framer-motion');
 require('@jobber/design');
 require('./_commonjsHelpers-cjs.js');
@@ -110,7 +112,6 @@ require('./index.esm-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
 require('./floating-ui.react-dom-cjs.js');
-require('classnames');
 require('./maxHeight-cjs.js');
 require('./tslib.es6-cjs.js');
 require('react-hook-form');
@@ -205,6 +206,7 @@ function isNormalClick(evt) {
         !evt.altKey);
 }
 
+exports.ActivityIndicator = ActivityIndicator.ActivityIndicator;
 exports.AnimatedPresence = AnimatedPresence.AnimatedPresence;
 exports.AnimatedSwitcher = AnimatedSwitcher.AnimatedSwitcher;
 exports.AtlantisContext = AtlantisContext.AtlantisContext;
@@ -300,7 +302,7 @@ exports.InputGroup = InputGroup.InputGroup;
 exports.InputNumber = InputNumber.InputNumber;
 exports.InputPassword = InputPassword.InputPassword;
 exports.InputPhoneNumber = InputPhoneNumber.InputPhoneNumber;
-exports.InputText = InputText_index.InputText;
+exports.InputText = InputText.InputText;
 exports.InputTime = InputTime.InputTime;
 exports.InputValidation = InputValidation.InputValidation;
 exports.LightBox = LightBox.LightBox;

package/dist/index.d.mts

@@ -1,3 +1,4 @@
+export * from "./ActivityIndicator";
 export * from "./AnimatedPresence";
 export * from "./AnimatedSwitcher";
 export * from "./AtlantisContext";

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./ActivityIndicator";
 export * from "./AnimatedPresence";
 export * from "./AnimatedSwitcher";
 export * from "./AtlantisContext";

package/dist/index.mjs

@@ -1,3 +1,4 @@
+export { A as ActivityIndicator } from './ActivityIndicator-es.js';
 export { A as AnimatedPresence } from './AnimatedPresence-es.js';
 export { A as AnimatedSwitcher } from './AnimatedSwitcher-es.js';
 export { A as AtlantisContext, a as atlantisContextDefaultValues, u as useAtlantisContext } from './AtlantisContext-es.js';
@@ -59,7 +60,7 @@ export { I as InputGroup } from './InputGroup-es.js';
 export { I as InputNumber } from './InputNumber-es.js';
 export { I as InputPassword } from './InputPassword-es.js';
 export { I as InputPhoneNumber } from './InputPhoneNumber-es.js';
-export { InputText } from './InputText/index.mjs';
+export { I as InputText } from './InputText-es.js';
 export { I as InputTime } from './InputTime-es.js';
 export { I as InputValidation } from './InputValidation-es.js';
 export { L as LightBox, u as useLightBoxContext } from './LightBox-es.js';
@@ -91,6 +92,7 @@ export { T as Tiles } from './Tiles-es.js';
 export { T as Toast, s as showToast } from './showToast-es.js';
 export { T as Tooltip } from './Tooltip-es.js';
 export { T as Typography } from './Typography-es.js';
+import 'classnames';
 import 'framer-motion';
 import '@jobber/design';
 import './_commonjsHelpers-es.js';
@@ -108,7 +110,6 @@ import './index.esm-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
 import './floating-ui.react-dom-es.js';
-import 'classnames';
 import './maxHeight-es.js';
 import './tslib.es6-es.js';
 import 'react-hook-form';