@jobber/components-native 0.113.4 → 0.113.6

package/dist/docs/Button/Button.md

@@ -388,7 +388,7 @@ A key distinction between subtle buttons and the other variations is that the
 primary/secondary/tertiary scale is styled differently, but the conceptual
 hierarchy is the same. Notably, the tertiary subtle button has a transparent
 background, allowing it to be *extra* subtle when placed overtop
-`surface--background` elements such as a Modal header.
+`surface--background` elements such as a Dialog header.
 
 ```tsx
 import React from "react";

package/dist/docs/Chip/Chip.md

@@ -22,7 +22,7 @@ export function ChipWithAvatarExample(
       <Chip.Prefix>
         <Avatar
           size="small"
-          imageUrl="https://images.unsplash.com/photo-1669475535925-a011d7c31d45?q=80&w=1886&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          src="https://images.unsplash.com/photo-1669475535925-a011d7c31d45?q=80&w=1886&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         />
       </Chip.Prefix>
       <Chip.Suffix>

package/dist/docs/Colors/Colors.md

@@ -156,7 +156,7 @@ application.
 #### Overlay
 
 Use to mask an area of the interface to promote focus to a foreground action,
-such as a [Modal](/components/Modal)'s appearance. Overlay includes built-in
+such as a [Dialog](/components/Dialog)'s appearance. Overlay includes built-in
 opacity values.
 
 #### Overlay--Dimmed

package/dist/docs/Icon/Icon.md

@@ -425,7 +425,9 @@ export function IconSizesExample() {
 |      | `future`         |
 |      | `history`        |
 |      | `import`         |
+|      | `maximize`       |
 |      | `merge`          |
+|      | `minimize`       |
 |      | `redo`           |
 |      | `search`         |
 |      | `sort`           |

package/dist/docs/InputNumber/InputNumber.md

@@ -339,17 +339,17 @@ the **Design** tab.
 | `Description`           | Helper text below the field                                          |
 | `Error`                 | Styled error message below the field                                 |
 
-## Composition
-
-The prop-driven component is sugar: it renders exactly the tree you would write
-by hand with `<InputNumber.Wrapper>` and the parts. To customize a single piece,
-compose the tree yourself and swap that one part — the other parts keep their
-defaults. The sugar does not merge consumer-provided parts into its render, so
-there is no per-slot precedence to reason about.
-
 `Wrapper` owns the field state and shares it with the parts through context, so
 every part must be rendered inside a `Wrapper` (a part used outside one throws).
 
+## Customize one part
+
+Pass the content parts you want — `Label`, `Affix`, `Stepper`, `Loading`,
+`Description`, `Error` — straight to `Wrapper`. It builds `Group`, `Input`, and
+`Footer` around them and places each part at the right depth, so you never
+reproduce the skeleton to change one piece. `Wrapper` renders only the parts you
+gave it: leave one out and it is not there.
+
 The example below replaces the default stepper icons with `+` / `−` and leaves
 everything else as the default:
 
@@ -361,25 +361,139 @@ export function InputNumberCompositionExample() {
   const [value, setValue] = useState<number | null>(3);
 
   return (
-    <InputNumber.Wrapper value={value} onValueCommitted={setValue}>
+    <InputNumber.Wrapper onValueCommitted={setValue} value={value}>
+      <InputNumber.Label>Quantity</InputNumber.Label>
+      <InputNumber.Stepper>
+        <InputNumber.Increment ariaLabel="Increase Quantity">
+          +
+        </InputNumber.Increment>
+        <InputNumber.Decrement ariaLabel="Decrease Quantity">
+          −
+        </InputNumber.Decrement>
+      </InputNumber.Stepper>
+    </InputNumber.Wrapper>
+  );
+}
+```
+
+### Omit a part
+
+A field with no stepper is the same composition minus the `Stepper`:
+
+```tsx
+import React, { useState } from "react";
+import { InputNumber } from "@jobber/components";
+
+export function InputNumberCompositionStepperlessExample() {
+  const [value, setValue] = useState<number | null>(15);
+
+  return (
+    <InputNumber.Wrapper
+      format={{ style: "unit", unit: "percent" }}
+      onValueCommitted={setValue}
+      value={value}
+    >
+      <InputNumber.Label>Tax rate</InputNumber.Label>
+    </InputNumber.Wrapper>
+  );
+}
+```
+
+### Show a part conditionally
+
+Presence is ordinary conditional JSX; there is no `show*` prop to reach for:
+
+```tsx
+import React, { useState } from "react";
+import { InputNumber } from "@jobber/components";
+
+export function InputNumberCompositionConditionalStepperExample() {
+  const [unitCost, setUnitCost] = useState<number | null>(0);
+  const [markup, setMarkup] = useState<number | null>(20);
+
+  return (
+    <>
+      <InputNumber
+        label="Unit cost"
+        onValueCommitted={setUnitCost}
+        prefix={{ label: "$" }}
+        value={unitCost}
+      />
+      <InputNumber.Wrapper onValueCommitted={setMarkup} value={markup}>
+        <InputNumber.Label>Markup</InputNumber.Label>
+        <InputNumber.Affix label="%" variation="suffix" />
+        {Boolean(unitCost) && <InputNumber.Stepper />}
+      </InputNumber.Wrapper>
+    </>
+  );
+}
+```
+
+### Below-field content
+
+`Description` and `Error` route into the footer row, which exists only while one
+of them is rendered. The two are never shown together: when both are present the
+error replaces the description, since a description hints at what the field
+wants and the error already restates it.
+
+```tsx
+import React, { useState } from "react";
+import { InputNumber } from "@jobber/components";
+
+export function InputNumberCompositionFooterExample() {
+  const [value, setValue] = useState<number | null>(50);
+  const error = (value ?? 0) > 99 ? "Enter a value between 1 and 99" : "";
+
+  return (
+    <InputNumber.Wrapper
+      invalid={Boolean(error)}
+      max={99}
+      min={1}
+      onValueChange={setValue}
+      value={value}
+    >
+      <InputNumber.Label>Quantity</InputNumber.Label>
+      <InputNumber.Description>Per visit</InputNumber.Description>
+      {error && <InputNumber.Error>{error}</InputNumber.Error>}
+    </InputNumber.Wrapper>
+  );
+}
+```
+
+## Custom layouts
+
+For an arrangement the standard skeleton does not produce, compose the
+structural parts (`Group`, `Input`, `Footer`) yourself. `Wrapper` then renders
+your tree exactly as written and adds nothing:
+
+```tsx
+import React, { useState } from "react";
+import { InputNumber } from "@jobber/components";
+
+export function InputNumberCompositionCustomLayoutExample() {
+  const [value, setValue] = useState<number | null>(3);
+
+  return (
+    <InputNumber.Wrapper inline onValueCommitted={setValue} value={value}>
       <InputNumber.Group>
+        <InputNumber.Decrement ariaLabel="Decrease quantity" />
         <InputNumber.Input>
           <InputNumber.Label>Quantity</InputNumber.Label>
-          <InputNumber.Stepper>
-            <InputNumber.Increment ariaLabel="Increase Quantity">
-              +
-            </InputNumber.Increment>
-            <InputNumber.Decrement ariaLabel="Decrease Quantity">
-              −
-            </InputNumber.Decrement>
-          </InputNumber.Stepper>
         </InputNumber.Input>
+        <InputNumber.Increment ariaLabel="Increase quantity" />
       </InputNumber.Group>
     </InputNumber.Wrapper>
   );
 }
 ```
 
+Pick one path per `Wrapper`. Mixing structural parts with loose content parts
+throws, rather than guessing where the loose parts belong.
+
+The sugar does not merge consumer-provided parts into its render, so there is no
+per-slot precedence to reason about — children passed to `<InputNumber>` are
+ignored. Compose on `Wrapper` instead.
+
 ## Controlled usage
 
 The field is controlled: pass `value` (a `number`, or `null` for empty) and read

package/dist/docs/Spacing/Spacing.md

@@ -48,7 +48,7 @@ form elements.
 ### Large
 
 Use `large` spacing for higher-level "parent" containers.
-[Modal](/components/Modal) uses `large` spacing in its header and around the
+[Dialog](/components/Dialog) uses `large` spacing in its header and around the
 edges to give itself a bit more prominence as a standalone view, in a similar
 manner to [Page](/components/Page).
 

package/dist/docs/page-layouts/page-layouts.md

@@ -43,6 +43,35 @@ More complex full-page scaffolding can be found on the [Scaffolding](../scaffold
   </Stack>
 ```
 
+```tsx
+<Stack>
+    <Heading level={2}>Stack Dialog Layouts</Heading>
+    <Text>Stacks are a great way to layout content in a dialog format. They are responsive and easy to read.</Text>
+    <Dialog>
+      <Dialog.Trigger>
+        <Button label="Open Dialog" />
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <Dialog.Header>
+          <Dialog.Title>Dialog Layout</Dialog.Title>
+          <Dialog.Close />
+        </Dialog.Header>
+        <Dialog.Body>
+          <Stack>
+            <Text>A dialog with a header, body text, and footer</Text>
+            <Text>And they're all stacked vertically with equal spacing</Text>
+          </Stack>
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Dialog.Actions
+            primary={<Dialog.Close render={<Button label="Close the Dialog" />} />}
+          />
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog>
+  </Stack>
+```
+
 ```tsx
 <Stack>
     <Heading level={1}>Cluster</Heading>

package/dist/docs/settings/settings.md

@@ -26,7 +26,7 @@ Most settings can be managed with the
 [FeatureSwitch](../components/FeatureSwitch) component, which allows:
 
 * turning functionality on and off
-* editing aspects of the feature via a [Modal](../components/Modal)
+* editing aspects of the feature via a [Dialog](../components/Dialog)
 * if the page supports it, live updates to the setting
 
 ### Grouping settings
@@ -37,7 +37,7 @@ Use a [Card](../Card/Card.md) to group related settings together.
 
 The [FeatureSwitch](../components/FeatureSwitch) component is a good starting
 point for most settings. If the setting is more complex, you can trigger a
-[Modal](../components/Modal) to edit the setting.
+[Dialog](../components/Dialog) to edit the setting.
 
 For cases where you don't need the full functionality of the `FeatureSwitch`,
 you can either opt out of props like `onSwitch` or `onEdit`, or compose a layout
@@ -49,7 +49,7 @@ of the pieces you do need.
 
 * [FeatureSwitch](../components/FeatureSwitch)
 * [Card](../Card/Card.md)
-* [Modal](../components/Modal)
+* [Dialog](../components/Dialog)
 * [Switch](../Switch/Switch.md)
 
 ## Principles

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

@@ -5,22 +5,13 @@ before generating any Atlantis code.
 
 ***
 
-## Always use version= for migrated components
-
-The following components have a v2 implementation. **Always pass
-`version={2}`**. Never generate v1 usage for these components — v1 is
-deprecated.
-
-| Component | Import                                             | v2 prop                                           |
-| --------- | -------------------------------------------------- | ------------------------------------------------- |
-| Modal     | `import { Modal } from "@jobber/components/Modal"` | `version={2}` — uses `Modal.Provider` composition |
-
 ## Deprecated components — do not use
 
-| Deprecated            | Replacement                                            | Notes                                    |
-| --------------------- | ------------------------------------------------------ | ---------------------------------------- |
-| `MultiSelect`         | `Autocomplete` with `multiple` prop, or `FilterPicker` | Fully deprecated, no longer supported.   |
-| `Chips` (dismissible) | `Autocomplete` with `multiple` prop                    | Dismissible Chips variant is deprecated. |
+| Deprecated            | Replacement                                            | Notes                                                                                                                                                  |
+| --------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `Modal`               | `Dialog`                                               | Includes `Modal.Provider` and the `Modal.*` subcomponents. See [migrating to Dialog](/components/Dialog/implement#component-view-migrating-to-dialog). |
+| `MultiSelect`         | `Autocomplete` with `multiple` prop, or `FilterPicker` | Fully deprecated, no longer supported.                                                                                                                 |
+| `Chips` (dismissible) | `Autocomplete` with `multiple` prop                    | Dismissible Chips variant is deprecated.                                                                                                               |
 
 ### Deprecated props on still-supported components
 
@@ -74,7 +65,7 @@ parent reads its compound children to wire up state, accessibility, and styling.
 
 | Component               | Subcomponents                                                                                                                                                                                                                                                                                | Usage                                                                                                                                                                                                                                                                                                                        |
 | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Modal` v2              | `Modal.Provider`, `Modal.Activator`, `Modal.Content`, `Modal.Header`, `Modal.Actions`                                                                                                                                                                                                        | Wrap with `Modal.Provider`. `Modal.Header` and `Modal.Actions` must be **direct children** of `Modal.Content` for sticky behavior to work. Use `Modal.Activator` to control focus return when the trigger element unmounts.                                                                                                  |
+| `Dialog`                | `Dialog.Trigger`, `Dialog.Content`, `Dialog.Header`, `Dialog.Title`, `Dialog.Close`, `Dialog.Body`, `Dialog.Footer`, `Dialog.Actions`, `Dialog.ScrollArea`                                                                                                                                   | `Dialog` > `Dialog.Trigger` + `Dialog.Content` containing `Dialog.Header` (with `Dialog.Title` and `Dialog.Close`), `Dialog.Body`, and `Dialog.Footer` (wrapping `Dialog.Actions`). `Dialog.Header` and `Dialog.Footer` are layout-only slots. Use `finalFocus` to control focus return when the trigger unmounts.           |
 | `Banner`                | `Banner.Provider`, `Banner.Content`, `Banner.Icon`, `Banner.DismissButton`, `Banner.Action`                                                                                                                                                                                                  | Either the simple `<Banner type="...">children</Banner>` form, or the Provider form: `Banner.Provider` > `Banner.Content` (+ optional `Banner.Icon` / `Banner.Action` / `Banner.DismissButton`).                                                                                                                             |
 | `Card`                  | `Card.Header`, `Card.Body`                                                                                                                                                                                                                                                                   | `Card` > `Card.Header` + `Card.Body`. The legacy `header` string/element prop still works for simple cases. Use composition for any header that needs richer markup.                                                                                                                                                         |
 | `FilterPicker`          | `FilterPicker.Activator`, `FilterPicker.Option`, `FilterPicker.Action`                                                                                                                                                                                                                       | `FilterPicker` > optional `FilterPicker.Activator`, one or more `FilterPicker.Option`, optional `FilterPicker.Action`. Omitting `FilterPicker.Activator` renders the default activator.                                                                                                                                      |
@@ -100,10 +91,9 @@ parent reads its compound children to wire up state, accessibility, and styling.
   returns a translated label per state (e.g. `"Next page"`, `"Previous page"`).
 * **`RadioGroup` options whose `children` aren't text** must provide
   `aria-label` on the option so it has an accessible name.
-* **`Modal` v2 without a `Modal.Header` title** must set either
-  `modalLabelledBy` (id of an existing element) or `ariaLabel` on the modal so
-  the dialog has an accessible name. A `Modal.Header` title takes precedence
-  over `ariaLabel` when both are provided.
+* **`Dialog` must include a `Dialog.Title`** so the dialog has an accessible
+  name. `Dialog.Title` is wired to `aria-labelledby` automatically, and
+  `Dialog.Body` to `aria-describedby` — do not wire these by hand.
 
 ## UNSAFE\_ props
 
@@ -123,12 +113,14 @@ prefer design tokens inside any custom styles you do write. See
 * If using two cards next to each other horizontally, ensure they have a gap
   between them
 
-### Modal
+### Dialog
 
-* When using a modal as part of an app, always wrap the inner content of the
-  modal in the Content component, this is what gives it the padding the form
-  needs from the edges of the modal.
-* Content will also provide the gap necessary between fields
+* Use `Dialog` for overlay content. `Modal` is deprecated — do not generate new
+  `Modal` or `Modal.Provider` usage.
+* Put the dialog's inner content in `Dialog.Body`, which supplies the padding
+  from the edges of the dialog and the gap between fields.
+* Put action buttons in a `Dialog.Actions` inside a `Dialog.Footer` rather than
+  placing bare buttons in the body.
 
 ### Color
 

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.113.4",
+    "version": "0.113.6",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -67,13 +67,13 @@
         "react-intl": "^7.1.11",
         "react-native-keyboard-controller": "^1.20.7",
         "react-native-toast-message": "^2.1.6",
-        "react-native-uuid": "^1.4.9",
+        "react-native-uuid": "^2.0.4",
         "ts-xor": "^1.1.0"
     },
     "devDependencies": {
         "@babel/runtime": "^7.29.2",
         "@gorhom/bottom-sheet": "^5.2.8",
-        "@jobber/design": "0.111.0",
+        "@jobber/design": "0.112.0",
         "@jobber/hooks": "2.21.1",
         "@react-native-community/datetimepicker": "^8.4.5",
         "@react-native/babel-preset": "^0.82.1",
@@ -86,7 +86,6 @@
         "@types/lodash.debounce": "^4.0.7",
         "@types/lodash.identity": "^3.0.7",
         "@types/node": "^22.19.17",
-        "@types/react-native-uuid": "^1.4.0",
         "@types/react-test-renderer": "19.1.0",
         "date-fns": "^2.30.0",
         "date-fns-tz": "^2.0.0",
@@ -124,5 +123,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "b151fce2d669e8b85cea91becf7d9aacee827c3e"
+    "gitHead": "e730613f3ba3851d31e78cbae08a8b832a1605d5"
 }

package/dist/src/ActivityIndicator/ActivityIndicator.js

@@ -79,9 +79,9 @@ export function ActivityIndicator({ size = "base", accessibilityLabel, style, te
         accessibilityLabel: resolvedLabel,
     };
     if (reducedMotion) {
-        return (React.createElement(ReducedMotionRing, { pixelSize: pixelSize, strokeWidth: strokeWidth, ringColor: themeTokens["color-icon"], style: style, testID: testID, a11yProps: a11yProps }));
+        return (React.createElement(ReducedMotionRing, { pixelSize: pixelSize, strokeWidth: strokeWidth, ringColor: themeTokens["color-text--secondary"], style: style, testID: testID, a11yProps: a11yProps }));
     }
-    return (React.createElement(FullMotionRing, { size: resolvedSize, pixelSize: pixelSize, strokeWidth: strokeWidth, arcColor: themeTokens["color-icon"], trackColor: themeTokens["color-surface--active"], style: style, testID: testID, a11yProps: a11yProps }));
+    return (React.createElement(FullMotionRing, { size: resolvedSize, pixelSize: pixelSize, strokeWidth: strokeWidth, arcColor: themeTokens["color-text--secondary"], trackColor: themeTokens["color-surface--active"], style: style, testID: testID, a11yProps: a11yProps }));
 }
 function FullMotionRing({ size, pixelSize, strokeWidth, arcColor, trackColor, style, testID, a11yProps, }) {
     const motion = MOTION_BY_SIZE[size];

package/dist/src/AutoLink/hooks/useTokenGenerator.js

@@ -1,8 +1,8 @@
 import { useState } from "react";
-import { v1 } from "react-native-uuid";
+import uuid from "react-native-uuid";
 export function useTokenGenerator() {
     let counter = 0;
-    const [identifier] = useState(v1());
+    const [identifier] = useState(uuid.v1());
     return [
         () => `@__ELEMENT-${identifier}-${counter++}__@`,
         new RegExp(`(@__ELEMENT-${identifier}-\\d+__@)`, "g"),

package/dist/src/ErrorMessageWrapper/ErrorMessageWrapper.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from "react";
 import { View } from "react-native";
-import { v4 } from "react-native-uuid";
+import uuid from "react-native-uuid";
 import { useErrorMessageContext } from "./context";
 import { useStyles } from "./ErrorMessageWrapper.style";
 import { Icon } from "../Icon";
@@ -16,7 +16,7 @@ export function ErrorMessageWrapper({ message, wrapFor = "default", children, })
     const register = errorMessageContext === null || errorMessageContext === void 0 ? void 0 : errorMessageContext.register;
     const unregister = errorMessageContext === null || errorMessageContext === void 0 ? void 0 : errorMessageContext.unregister;
     const a11yMessageRef = useRef(null);
-    const { current: uuid } = useRef(v4());
+    const { current: id } = useRef(uuid.v4());
     const hasErrorMessage = Boolean(message);
     const styles = useStyles();
     const wrapForStyle = {
@@ -25,12 +25,12 @@ export function ErrorMessageWrapper({ message, wrapFor = "default", children, })
     };
     useEffect(() => {
         if (register) {
-            register({ id: uuid, ref: a11yMessageRef, hasErrorMessage });
+            register({ id, ref: a11yMessageRef, hasErrorMessage });
         }
         if (unregister) {
-            return () => unregister(uuid);
+            return () => unregister(id);
         }
-    }, [uuid, hasErrorMessage, register, unregister]);
+    }, [id, hasErrorMessage, register, unregister]);
     return (React.createElement(View, { style: [styles.wrapper] },
         hasErrorMessage && (React.createElement(View, { ref: a11yMessageRef, accessible: true, accessibilityRole: "text", accessibilityLabel: message, pointerEvents: "none", style: styles.screenReaderMessage })),
         children,

package/dist/src/FormatFile/components/_mocks/mockFiles.js

@@ -1,11 +1,11 @@
-import { v4 } from "react-native-uuid";
+import uuid from "react-native-uuid";
 import { StatusCode } from "../../types";
 export const FILE_UPLOAD_MOCK_FILE = ({ progress, status = StatusCode.InProgress, }) => ({
     batchContext: {
         batchCount: 1,
         batchId: "FILES",
     },
-    uuid: v4(),
+    uuid: uuid.v4(),
     key: "path/test.txt",
     name: "test.txt",
     size: 1,
@@ -21,7 +21,7 @@ export const FILE_UPLOAD_MOCK_IMAGE = ({ progress, size, status = StatusCode.InP
         batchCount: 1,
         batchId: "IMAGES",
     },
-    uuid: v4(),
+    uuid: uuid.v4(),
     key: "path/test.png",
     name: "test.png",
     size: size || 1,
@@ -37,7 +37,7 @@ export const FILE_UPLOAD_MOCK_PDF = ({ progress, status = StatusCode.InProgress,
         batchCount: 1,
         batchId: "FILES",
     },
-    uuid: v4(),
+    uuid: uuid.v4(),
     key: "path/test.pdf",
     name: "test.pdf",
     size: 1,

package/dist/src/InputText/context/InputAccessoriesProvider.js

@@ -1,10 +1,10 @@
 import React, { useEffect, useRef, useState } from "react";
 import { InputAccessoryView, Keyboard, Platform, Button as RNButton, View, useColorScheme, } from "react-native";
-import { v4 } from "react-native-uuid";
+import uuid from "react-native-uuid";
 import { InputAccessoriesContext } from "./InputAccessoriesContext";
 import { useStyles } from "./InputAccessoriesProvider.style";
 export function InputAccessoriesProvider({ children, }) {
-    const inputAccessoryID = useRef(v4()).current;
+    const inputAccessoryID = useRef(uuid.v4()).current;
     const { focusedInput, setFocusedInput, canFocusNext, canFocusPrevious, elements, setElements, previousKey, nextKey, } = useInputAccessoriesProviderState();
     const colorScheme = useColorScheme();
     const styles = useStyles();

package/dist/src/hooks/useFormController.js

@@ -1,4 +1,4 @@
-import { v1 } from "react-native-uuid";
+import uuid from "react-native-uuid";
 import { get, useController, useForm, useFormContext } from "react-hook-form";
 import { useState } from "react";
 export function useFormController({ name, value, validations, }) {
@@ -23,7 +23,7 @@ export function useFormController({ name, value, validations, }) {
     return { error, field };
 }
 function useControlName(name) {
-    const [identifier] = useState(v1());
+    const [identifier] = useState(uuid.v1());
     const prefix = `generatedName--${identifier}`;
     return `${name || prefix}`;
 }