@jobber/components 8.5.0 → 8.5.1-JOB-166462-d4f731c.8

package/dist/FormField/FormFieldTypes.d.ts

@@ -100,13 +100,6 @@ export interface CommonFormFieldProps {
      * set it to `always`.
      */
     readonly clearable?: Clearable;
-    /**
-     * Experimental:
-     * Determine which version of the FormField to use.
-     * Right now this isn't used but it will be used in the future
-     * to allow us to release new versions of our form inputs without breaking existing functionality.
-     */
-    version?: 1;
 }
 export interface FormFieldProps extends CommonFormFieldProps {
     actionsRef?: RefObject<FieldActionsRef | null>;

package/dist/InputDate/InputDate.types.d.ts

@@ -1,6 +1,6 @@
 import type { FormFieldProps } from "../FormField";
 import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
-export interface InputDateProps extends Omit<HTMLInputBaseProps, "maxLength">, FocusEvents<HTMLInputElement | HTMLTextAreaElement>, KeyboardEvents<HTMLInputElement | HTMLTextAreaElement>, Omit<RebuiltInputCommonProps, "clearable" | "prefix" | "suffix" | "showMiniLabel" | "version"> {
+export interface InputDateProps extends Omit<HTMLInputBaseProps, "maxLength">, FocusEvents<HTMLInputElement | HTMLTextAreaElement>, KeyboardEvents<HTMLInputElement | HTMLTextAreaElement>, Omit<RebuiltInputCommonProps, "clearable" | "prefix" | "suffix" | "showMiniLabel"> {
     /**
      * A Date object value
      * (e.g., `new Date("11/11/2011")`)

package/dist/InputEmail/InputEmail.types.d.ts

@@ -1,6 +1,6 @@
 import type { FormFieldProps } from "../FormField";
 import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, MouseEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
-export interface InputEmailProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, Omit<RebuiltInputCommonProps, "showMiniLabel" | "version"> {
+export interface InputEmailProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, Omit<RebuiltInputCommonProps, "showMiniLabel"> {
     /**
      * The current value of the input.
      */

package/dist/InputNumber/InputNumber.types.d.ts

@@ -1,6 +1,6 @@
 import type React from "react";
 import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, MouseEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
-export interface InputNumberProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, Omit<RebuiltInputCommonProps, "clearable" | "suffix" | "prefix" | "version"> {
+export interface InputNumberProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, Omit<RebuiltInputCommonProps, "clearable" | "suffix" | "prefix"> {
     readonly defaultValue?: number;
     readonly formatOptions?: Intl.NumberFormatOptions;
     readonly maxValue?: number;

package/dist/InputPhoneNumber/InputPhoneNumber.types.d.ts

@@ -1,7 +1,7 @@
 import type { InputMaskProps } from "./InputMask";
 import type { FormFieldProps } from "../FormField";
 import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, MouseEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
-export interface InputPhoneNumberProps extends Omit<HTMLInputBaseProps, "type" | "maxLength" | "minLength">, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, Omit<RebuiltInputCommonProps, "showMiniLabel" | "version"> {
+export interface InputPhoneNumberProps extends Omit<HTMLInputBaseProps, "type" | "maxLength" | "minLength">, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, Omit<RebuiltInputCommonProps, "showMiniLabel"> {
     /**
      * The current value of the input.
      */

package/dist/InputText/InputText.types.d.ts

@@ -15,11 +15,7 @@ interface InputLengthConstraint {
      */
     readonly maxLength?: number;
 }
-/**
- * Experimental version 2 of the InputText component.
- * Do not use unless you have talked with Atlantis first.
- */
-export interface InputTextProps extends HTMLInputBaseProps, MouseEvents<HTMLInputElement | HTMLTextAreaElement>, FocusEvents<HTMLInputElement | HTMLTextAreaElement>, KeyboardEvents<HTMLInputElement | HTMLTextAreaElement>, Omit<RebuiltInputCommonProps, "version">, InputLengthConstraint {
+export interface InputTextProps extends HTMLInputBaseProps, MouseEvents<HTMLInputElement | HTMLTextAreaElement>, FocusEvents<HTMLInputElement | HTMLTextAreaElement>, KeyboardEvents<HTMLInputElement | HTMLTextAreaElement>, RebuiltInputCommonProps, InputLengthConstraint {
     /**
      * When false, the placeholder text only serves as a standard placeholder and
      * disappears when the user types, instead of floating above the value as a

package/dist/InputTime/InputTime.types.d.ts

@@ -1,7 +1,7 @@
 import type { Ref } from "react";
 import type { FormFieldProps } from "../FormField";
 import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, MouseEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
-export interface InputTimeProps extends Omit<HTMLInputBaseProps, "maxLength">, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, Omit<RebuiltInputCommonProps, "showMiniLabel" | "version">, Pick<InputTimeProps, "value" | "onChange"> {
+export interface InputTimeProps extends Omit<HTMLInputBaseProps, "maxLength">, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, Omit<RebuiltInputCommonProps, "showMiniLabel">, Pick<InputTimeProps, "value" | "onChange"> {
     /**
      * Maximum numerical or date value.
      */

package/dist/LightBox/LightBox.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { LightBoxNavigationProps, LightBoxProps } from "./LightBox.types";
+import type { LightBoxNavigationProps, LightBoxProps, LightBoxThumbnailBarProps, LightBoxThumbnailImageProps, LightBoxThumbnailProps } from "./LightBox.types";
 import { LightBoxProvider } from "./LightBoxContext";
 export declare function LightBoxContent(): React.JSX.Element;
 /**
@@ -75,7 +75,25 @@ declare function LightBoxCaption(): React.JSX.Element | null;
 /**
  * Scrollable thumbnail strip. Only renders when there are two or more images.
  */
-declare function LightBoxThumbnails(): React.JSX.Element | null;
+declare function LightBoxThumbnails(): React.JSX.Element;
+/**
+ * Scrollable container for the thumbnail strip. Owns the scroll chrome and
+ * box-sizing, and only renders when there are two or more images.
+ *
+ * Pass one `LightBox.Thumbnail` per image as `children` to own the thumbnail
+ * loop.
+ */
+declare function LightBoxThumbnailBar({ children, className, }: LightBoxThumbnailBarProps): React.JSX.Element | null;
+/**
+ * A selectable thumbnail cell identified by its `index`. Owns the selected
+ * styling, click-to-navigate behaviour, and renders consumer-provided
+ * `children` (typically a `LightBox.ThumbnailImage`).
+ */
+declare function LightBoxThumbnail({ index, children, className, }: LightBoxThumbnailProps): React.JSX.Element;
+/**
+ * A thumbnail using our default styling.
+ */
+declare function LightBoxThumbnailImage({ src, alt, className, }: LightBoxThumbnailImageProps): React.JSX.Element;
 /**
  * LightBox displays images in a fullscreen overlay.
  *
@@ -128,5 +146,8 @@ declare namespace LightBox {
     var Navigation: typeof LightBoxNavigation;
     var Caption: typeof LightBoxCaption;
     var Thumbnails: typeof LightBoxThumbnails;
+    var ThumbnailBar: typeof LightBoxThumbnailBar;
+    var Thumbnail: typeof LightBoxThumbnail;
+    var ThumbnailImage: typeof LightBoxThumbnailImage;
 }
 export { LightBox };

package/dist/LightBox/LightBox.types.d.ts

@@ -92,3 +92,44 @@ export interface LightBoxNavigationProps {
      */
     readonly nextButtonClassName?: string;
 }
+export interface LightBoxThumbnailBarProps {
+    /**
+     * The thumbnails to render inside the scrollable bar, typically one
+     * `LightBox.Thumbnail` per image.
+     */
+    readonly children: ReactNode;
+    /**
+     * Additional class name to apply to the thumbnail bar wrapper.
+     */
+    readonly className?: string;
+}
+export interface LightBoxThumbnailProps {
+    /**
+     * The index of the image this thumbnail represents. Used to derive the
+     * selected state and to navigate to the image when activated.
+     */
+    readonly index: number;
+    /**
+     * The content rendered inside the selectable thumbnail cell, typically a
+     * `LightBox.ThumbnailImage`.
+     */
+    readonly children: ReactNode;
+    /**
+     * Additional class name to apply to the thumbnail cell.
+     */
+    readonly className?: string;
+}
+export interface LightBoxThumbnailImageProps {
+    /**
+     * The image source to render.
+     */
+    readonly src: string;
+    /**
+     * The alternative text for the image.
+     */
+    readonly alt: string;
+    /**
+     * Additional class name to apply to the image.
+     */
+    readonly className?: string;
+}

package/dist/LightBox-cjs.js

@@ -305,13 +305,40 @@ function LightBoxCaption() {
  * Scrollable thumbnail strip. Only renders when there are two or more images.
  */
 function LightBoxThumbnails() {
-    const { images, currentImageIndex, boxSizing, selectedThumbnailRef, handleThumbnailClick, } = useLightBoxContext();
+    const { images } = useLightBoxContext();
+    return (React.createElement(LightBoxThumbnailBar, null, images.map((image, index) => (React.createElement(LightBoxThumbnail, { key: index, index: index },
+        React.createElement(LightBoxThumbnailImage, { src: image.url, alt: image.alt || image.title || "" }))))));
+}
+/**
+ * Scrollable container for the thumbnail strip. Owns the scroll chrome and
+ * box-sizing, and only renders when there are two or more images.
+ *
+ * Pass one `LightBox.Thumbnail` per image as `children` to own the thumbnail
+ * loop.
+ */
+function LightBoxThumbnailBar({ children, className, }) {
+    const { images, boxSizing } = useLightBoxContext();
     if (images.length <= 1)
         return null;
-    return (React.createElement("div", { className: styles.thumbnailBar, style: { "--lightbox--box-sizing": boxSizing }, "data-testid": "ATL-Thumbnail-Bar" }, images.map((image, index) => (React.createElement("div", { key: index, className: classnames(styles.thumbnail, {
-            [styles.selected]: index === currentImageIndex,
-        }), onClick: () => handleThumbnailClick(index), ref: index === currentImageIndex ? selectedThumbnailRef : null },
-        React.createElement("img", { key: index, src: image.url, alt: image.alt || image.title || "", className: styles.thumbnailImage }))))));
+    return (React.createElement("div", { className: classnames(styles.thumbnailBar, className), style: { "--lightbox--box-sizing": boxSizing }, "data-testid": "ATL-Thumbnail-Bar" }, children));
+}
+/**
+ * A selectable thumbnail cell identified by its `index`. Owns the selected
+ * styling, click-to-navigate behaviour, and renders consumer-provided
+ * `children` (typically a `LightBox.ThumbnailImage`).
+ */
+function LightBoxThumbnail({ index, children, className, }) {
+    const { currentImageIndex, selectedThumbnailRef, handleThumbnailClick } = useLightBoxContext();
+    const selected = index === currentImageIndex;
+    return (React.createElement("div", { className: classnames(styles.thumbnail, className, {
+            [styles.selected]: selected,
+        }), onClick: () => handleThumbnailClick(index), ref: selected ? selectedThumbnailRef : null }, children));
+}
+/**
+ * A thumbnail using our default styling.
+ */
+function LightBoxThumbnailImage({ src, alt, className, }) {
+    return (React.createElement("img", { src: src, alt: alt, className: classnames(styles.thumbnailImage, className) }));
 }
 /**
  * LightBox displays images in a fullscreen overlay.
@@ -367,6 +394,9 @@ LightBox.Slides = LightBoxSlides;
 LightBox.Navigation = LightBoxNavigation;
 LightBox.Caption = LightBoxCaption;
 LightBox.Thumbnails = LightBoxThumbnails;
+LightBox.ThumbnailBar = LightBoxThumbnailBar;
+LightBox.Thumbnail = LightBoxThumbnail;
+LightBox.ThumbnailImage = LightBoxThumbnailImage;
 
 exports.LightBox = LightBox;
 exports.useLightBoxContext = useLightBoxContext;

package/dist/LightBox-es.js

@@ -303,13 +303,40 @@ function LightBoxCaption() {
  * Scrollable thumbnail strip. Only renders when there are two or more images.
  */
 function LightBoxThumbnails() {
-    const { images, currentImageIndex, boxSizing, selectedThumbnailRef, handleThumbnailClick, } = useLightBoxContext();
+    const { images } = useLightBoxContext();
+    return (React__default.createElement(LightBoxThumbnailBar, null, images.map((image, index) => (React__default.createElement(LightBoxThumbnail, { key: index, index: index },
+        React__default.createElement(LightBoxThumbnailImage, { src: image.url, alt: image.alt || image.title || "" }))))));
+}
+/**
+ * Scrollable container for the thumbnail strip. Owns the scroll chrome and
+ * box-sizing, and only renders when there are two or more images.
+ *
+ * Pass one `LightBox.Thumbnail` per image as `children` to own the thumbnail
+ * loop.
+ */
+function LightBoxThumbnailBar({ children, className, }) {
+    const { images, boxSizing } = useLightBoxContext();
     if (images.length <= 1)
         return null;
-    return (React__default.createElement("div", { className: styles.thumbnailBar, style: { "--lightbox--box-sizing": boxSizing }, "data-testid": "ATL-Thumbnail-Bar" }, images.map((image, index) => (React__default.createElement("div", { key: index, className: classnames(styles.thumbnail, {
-            [styles.selected]: index === currentImageIndex,
-        }), onClick: () => handleThumbnailClick(index), ref: index === currentImageIndex ? selectedThumbnailRef : null },
-        React__default.createElement("img", { key: index, src: image.url, alt: image.alt || image.title || "", className: styles.thumbnailImage }))))));
+    return (React__default.createElement("div", { className: classnames(styles.thumbnailBar, className), style: { "--lightbox--box-sizing": boxSizing }, "data-testid": "ATL-Thumbnail-Bar" }, children));
+}
+/**
+ * A selectable thumbnail cell identified by its `index`. Owns the selected
+ * styling, click-to-navigate behaviour, and renders consumer-provided
+ * `children` (typically a `LightBox.ThumbnailImage`).
+ */
+function LightBoxThumbnail({ index, children, className, }) {
+    const { currentImageIndex, selectedThumbnailRef, handleThumbnailClick } = useLightBoxContext();
+    const selected = index === currentImageIndex;
+    return (React__default.createElement("div", { className: classnames(styles.thumbnail, className, {
+            [styles.selected]: selected,
+        }), onClick: () => handleThumbnailClick(index), ref: selected ? selectedThumbnailRef : null }, children));
+}
+/**
+ * A thumbnail using our default styling.
+ */
+function LightBoxThumbnailImage({ src, alt, className, }) {
+    return (React__default.createElement("img", { src: src, alt: alt, className: classnames(styles.thumbnailImage, className) }));
 }
 /**
  * LightBox displays images in a fullscreen overlay.
@@ -365,5 +392,8 @@ LightBox.Slides = LightBoxSlides;
 LightBox.Navigation = LightBoxNavigation;
 LightBox.Caption = LightBoxCaption;
 LightBox.Thumbnails = LightBoxThumbnails;
+LightBox.ThumbnailBar = LightBoxThumbnailBar;
+LightBox.Thumbnail = LightBoxThumbnail;
+LightBox.ThumbnailImage = LightBoxThumbnailImage;
 
 export { LightBox as L, useLightBoxContext as u };

package/dist/Select/OptionGroup.d.ts

@@ -10,7 +10,7 @@ export interface OptionGroupProps {
      * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
      *
      * Additional details: The provided class names are applied to the root `<optgroup>` element.
-     * Only effective when `Select` version={2} is used with `UNSAFE_experimentalStyles`.
+     * Only effective when `Select` is used with `UNSAFE_experimentalStyles`.
      */
     readonly UNSAFE_className?: string;
     /**
@@ -19,7 +19,7 @@ export interface OptionGroupProps {
      * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
      *
      * Additional details: Styles are applied directly to the root `<optgroup>` element via
-     * `UNSAFE_style.container`. Only effective when `Select` version={2} is used with
+     * `UNSAFE_style.container`. Only effective when `Select` is used with
      * `UNSAFE_experimentalStyles`.
      */
     readonly UNSAFE_style?: {

package/dist/Select/Select.types.d.ts

@@ -1,7 +1,7 @@
 import type { Ref } from "react";
 import type { FormFieldProps } from "../FormField";
 import type { FocusEvents, HTMLInputBaseProps, RebuiltInputCommonProps } from "../sharedHelpers/types";
-export interface SelectProps extends Omit<HTMLInputBaseProps, "readOnly" | "maxLength">, FocusEvents<HTMLSelectElement>, Omit<RebuiltInputCommonProps, "clearable" | "prefix" | "suffix" | "align" | "showMiniLabel" | "version">, Pick<FormFieldProps, "prefix" | "suffix" | "align" | "children"> {
+export interface SelectProps extends Omit<HTMLInputBaseProps, "readOnly" | "maxLength">, FocusEvents<HTMLSelectElement>, Omit<RebuiltInputCommonProps, "clearable" | "prefix" | "suffix" | "align" | "showMiniLabel">, Pick<FormFieldProps, "prefix" | "suffix" | "align" | "children"> {
     readonly value?: string | number;
     onChange?(newValue?: string | number): void;
     readonly inputRef?: Ref<HTMLSelectElement>;

package/dist/docs/FormField/FormField.md

@@ -89,5 +89,4 @@ export function SpecialInput(props) {
 | `type` | `FormFieldTypes` | No | — | Determines what kind of form field should the component give you. |
 | `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... |
 | `wrapperRef` | `RefObject<HTMLDivElement>` | No | — |  |

package/dist/docs/InputPassword/InputPassword.md

@@ -49,4 +49,3 @@ refer to [InputText](../InputText/InputText.md).
 | `size` | `"large" | "small"` | No | — | Adjusts the interface to either have small or large spacing. |
 | `validations` | `RegisterOptions` | No | — | Show an error message above the field. This also highlights the the field red if an error message shows up. |
 | `value` | `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/LightBox/LightBox.md

@@ -43,6 +43,10 @@ LightBox exposes its internal building blocks as subcomponents:
 `LightBox.Navigation`, `LightBox.Caption`, and `LightBox.Thumbnails`. This gives
 you more control over the LightBox's appearance and behaviour.
 
+The thumbnail strip is itself composed of smaller subcomponents you can use
+directly: `LightBox.ThumbnailBar`, `LightBox.Thumbnail`, and
+`LightBox.ThumbnailImage`. See [Custom thumbnails](#custom-thumbnails) below.
+
 Here's a basic example of how the non-composable LightBox is used:
 
 ```tsx
@@ -157,6 +161,33 @@ function CustomControls() {
 }
 ```
 
+### Custom thumbnails
+
+`LightBox.Thumbnails` renders the default thumbnail strip and requires no
+configuration. When you need to control how each thumbnail renders, compose the
+thumbnail subcomponents yourself:
+
+```tsx
+import { LightBox, useLightBoxContext } from "@jobber/components";
+
+function CustomThumbnails() {
+  const { images } = useLightBoxContext();
+
+  return (
+    <LightBox.ThumbnailBar>
+      {images.map((image, index) => (
+        <LightBox.Thumbnail key={index} index={index}>
+          <LightBox.ThumbnailImage
+            src={image.url}
+            alt={image.alt ?? image.title ?? ""}
+          />
+        </LightBox.Thumbnail>
+      ))}
+    </LightBox.ThumbnailBar>
+  );
+}
+```
+
 ## Testing
 
 When using Jest to test LightBox implementations, you will need to include this
@@ -223,3 +254,26 @@ window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `className` | `string` | No | — |  |
+
+#### LightBox.Thumbnail
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | Yes | — | The content rendered inside the selectable thumbnail cell, typically a `LightBox.ThumbnailImage`. |
+| `index` | `number` | Yes | — | The index of the image this thumbnail represents. Used to derive the selected state and to navigate to the image when... |
+| `className` | `string` | No | — | Additional class name to apply to the thumbnail cell. |
+
+#### LightBox.ThumbnailBar
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | Yes | — | The thumbnails to render inside the scrollable bar, typically one `LightBox.Thumbnail` per image. |
+| `className` | `string` | No | — | Additional class name to apply to the thumbnail bar wrapper. |
+
+#### LightBox.ThumbnailImage
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `alt` | `string` | Yes | — | The alternative text for the image. |
+| `src` | `string` | Yes | — | The image source to render. |
+| `className` | `string` | No | — | Additional class name to apply to the image. |

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

@@ -24,13 +24,12 @@ deprecated.
 
 ### Deprecated props on still-supported components
 
-| Component                              | Deprecated prop         | Replacement                                                                                    |
-| -------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------- |
-| `Button`                               | `to`                    | Use `url` for anchor links.                                                                    |
-| `Card`                                 | `title`                 | Use the `header` prop, or compose with `Card.Header` and `Card.Body`.                          |
-| `Toast`                                | `action`, `actionLabel` | Both will be removed in the next major version. Trigger follow-up work from outside the toast. |
-| Text inputs (`InputText` v2 etc.)      | `onEnter`               | Use `onKeyDown` or `onKeyUp` and check the key.                                                |
-| `FormField` (`maxLength` on v1 inputs) | `maxLength`             | Flagged in source as flawed; only kept for v1 backwards compatibility.                         |
+| Component                 | Deprecated prop         | Replacement                                                                                    |
+| ------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------- |
+| `Button`                  | `to`                    | Use `url` for anchor links.                                                                    |
+| `Card`                    | `title`                 | Use the `header` prop, or compose with `Card.Header` and `Card.Body`.                          |
+| `Toast`                   | `action`, `actionLabel` | Both will be removed in the next major version. Trigger follow-up work from outside the toast. |
+| Text inputs (`InputText`) | `onEnter`               | Use `onKeyDown` or `onKeyUp` and check the key.                                                |
 
 ## Import pattern
 
@@ -67,34 +66,6 @@ custom properties from `@jobber/design`. Tokens are included in:
 }
 ```
 
-## Form composition
-
-v2 inputs are thin wrappers over native HTML inputs. They have no internal form
-state, no built-in validation orchestration, and no React Hook Form dependency —
-they behave like `<input>` elements with Atlantis styling. Compose them inside a
-plain `<form>` and manage state and submission yourself (or with the form
-library of your choice).
-
-```tsx
-<form onSubmit={handleSubmit}>
-  <Content>
-    <InputText version={2} name="name" placeholder="Name" />
-    <InputEmail version={2} name="email" placeholder="Email" />
-    <Button type="submit" label="Save" />
-  </Content>
-</form>
-```
-
-Do not wrap v2 inputs in the Atlantis `Form` or `FormField` components — those
-are legacy helpers tied to v1 inputs and React Hook Form. Mixing them with v2
-inputs will not give you v2's controlled API and is not supported.
-
-### Validation on v2 inputs
-
-v2 inputs do not run validation themselves. To show an error state, drive it
-from your own state and pass `invalid` (boolean) and/or `error` (string message)
-on the input.
-
 ## Compound components — use the documented composition
 
 Many components expose dot-notation subcomponents that must be used together.

package/dist/sharedHelpers/types.d.ts

@@ -243,10 +243,6 @@ export interface RebuiltInputCommonProps {
      * Further description of the input, can be used for a hint.
      */
     readonly description?: ReactNode;
-    /**
-     * Version 2 is highly experimental. Avoid using it unless you have talked with Atlantis first.
-     */
-    readonly version: 2;
 }
 /** Represents a day of the week as a number where 0 = Sunday, 1 = Monday, etc. */
 export type DayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;

package/dist/utils/meta/meta.json

@@ -141,6 +141,9 @@
     "LightBox.Overlay",
     "LightBox.Provider",
     "LightBox.Slides",
+    "LightBox.Thumbnail",
+    "LightBox.ThumbnailBar",
+    "LightBox.ThumbnailImage",
     "LightBox.Thumbnails",
     "LightBox.Toolbar",
     "Link",
@@ -229,4 +232,4 @@
     "Tooltip",
     "Typography"
   ]
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.5.0",
+  "version": "8.5.1-JOB-166462-d4f731c.8+d4f731c4",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -568,5 +568,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "472d98075bdd3372f54004b48df2569c2354b7d3"
+  "gitHead": "d4f731c4c9f9e661c9a852e129bf4eec14935810"
 }