@jobber/components-native 0.74.1-node22-3bf0edd.11 → 0.75.1

package/dist/types/src/ActionLabel/ActionLabel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TextAlign, TextColor } from "../Typography";
 export type ActionLabelVariation = Extract<TextColor, "interactive" | "destructive" | "learning" | "subtle" | "onPrimary">;
 type ActionLabelType = "default" | "cardTitle";

package/dist/types/src/ActivityIndicator/ActivityIndicator.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ActivityIndicatorProps } from "react-native";
 export declare function JobberActivityIndicator(props: ActivityIndicatorProps): JSX.Element;

package/dist/types/src/AtlantisContext/AtlantisContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface AtlantisContextProps {
     /**
      * The date format Atlantis components would use

package/dist/types/src/AutoLink/AutoLink.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { AutoLinkProps } from "./types";
 export declare function AutoLink({ children: text, bottomTabsVisible, selectable, ...rest }: AutoLinkProps): JSX.Element;

package/dist/types/src/AutoLink/components/ComposeTextWithLinks/ComposeTextWithLinks.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ComposeTextWithLinksProps } from "../../types";
 export declare function ComposeTextWithLinks({ part, index, match, bottomTabsVisible, selectable, }: ComposeTextWithLinksProps): JSX.Element;

package/dist/types/src/AutoLink/components/Link/Link.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface LinkProps {
     readonly children: string;
     readonly onPress: () => void;

package/dist/types/src/Banner/Banner.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { BannerProps } from "./types";
 export declare function Banner({ action, details, text, type, children, icon, }: BannerProps): JSX.Element;

package/dist/types/src/Banner/components/BannerIcon/BannerIcon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconNames } from "@jobber/design";
 import { BannerTypes } from "../../types";
 export interface BannerIconProps {

package/dist/types/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconColorNames, IconNames } from "@jobber/design";
 import { TextAlign } from "../../../Typography";
 export interface BottomSheetOptionProps {

package/dist/types/src/Button/Button.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconNames } from "@jobber/design";
 import { XOR } from "ts-xor";
 import { ButtonSize, ButtonType, ButtonVariation } from "./types";

package/dist/types/src/ButtonGroup/ButtonGroup.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonGroupActionElement } from "./types";
 export interface ButtonGroupProps {
     readonly children: ButtonGroupActionElement | ButtonGroupActionElement[];

package/dist/types/src/ButtonGroup/ButtonGroupAction.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconColorNames, IconNames } from "@jobber/design";
 import { ButtonType, ButtonVariation } from "../Button";
 export interface ButtonGroupActionProps {

package/dist/types/src/Checkbox/Checkbox.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { XOR } from "ts-xor";
 interface CommonCheckboxProps {
     /**

package/dist/types/src/Checkbox/CheckboxGroup.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { XOR } from "ts-xor";
 import { CheckboxProps } from "./Checkbox";
 import { CheckboxElement, CheckboxGroupState } from "./types";

package/dist/types/src/Chip/Chip.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AccessibilityRole } from "react-native";
 import { IconNames } from "@jobber/design";
 export type AccentType = "client" | "invoice" | "job" | "request" | "quote";

package/dist/types/src/ContentOverlay/ContentOverlay.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
+import { Modalize } from "react-native-modalize";
 import { ContentOverlayProps } from "./types";
 export declare const ContentOverlay: React.ForwardRefExoticComponent<ContentOverlayProps & React.RefAttributes<{
-    open?: ((dest?: import("react-native-modalize/lib/options").TOpen | undefined) => void) | undefined;
-    close?: ((dest?: import("react-native-modalize/lib/options").TClose | undefined) => void) | undefined;
+    open?: Modalize["open"];
+    close?: Modalize["close"];
 } | undefined>>;

package/dist/types/src/Divider/Divider.d.ts

@@ -1,12 +1,20 @@
-/// <reference types="react" />
-import { styles } from "./Divider.style";
 interface DividerProps {
     /**
      * The weight of the divider.
      *
      * @default "base"
      */
-    readonly size?: keyof typeof styles;
+    readonly size?: "base" | "large" | "larger" | "largest";
+    /**
+     * The direction of the divider
+     *
+     * @default "horizontal"
+     */
+    readonly direction?: "horizontal" | "vertical";
+    /**
+     * Used to locate this view in end-to-end tests.
+     */
+    readonly testID?: string;
 }
-export declare function Divider({ size }: DividerProps): JSX.Element;
+export declare function Divider({ size, direction, testID, }: DividerProps): JSX.Element;
 export {};

package/dist/types/src/Divider/{Divider.style.d.ts → DividerHorizontal.style.d.ts}

@@ -1,14 +1,19 @@
-export declare const styles: {
+export declare const horizontalStyles: {
     base: {
         height: number;
         margin: number;
-        borderBottomWidth: number;
+        width: "auto";
         borderBottomColor: string;
+        borderBottomWidth: number;
     };
     large: {
         borderBottomWidth: number;
         opacity: number;
     };
+    larger: {
+        borderBottomWidth: number;
+        opacity: number;
+    };
     largest: {
         borderBottomWidth: number;
         opacity: number;

package/dist/types/src/Divider/DividerVertical.style.d.ts

@@ -0,0 +1,24 @@
+export declare const verticalStyles: {
+    base: {
+        margin: number;
+        height: "100%";
+        width: number;
+        borderRightWidth: number;
+        borderRightColor: string;
+    };
+    large: {
+        borderRightWidth: number;
+        opacity: number;
+    };
+    larger: {
+        borderRightWidth: number;
+        opacity: number;
+    };
+    largest: {
+        borderRightWidth: number;
+        opacity: number;
+    };
+    vertical: {
+        borderRightColor: string;
+    };
+};

package/dist/types/src/EmptyState/EmptyState.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconColorNames, IconNames } from "@jobber/design";
 interface Action {
     label: string;

package/dist/types/src/ErrorMessageWrapper/context/ErrorMessageContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ErrorMessageContextProps } from "./types";
 export declare const ErrorMessageContext: import("react").Context<ErrorMessageContextProps>;
 export declare function useErrorMessageContext(): ErrorMessageContextProps;

package/dist/types/src/Form/Form.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FieldValues } from "react-hook-form";
 import { FormProps } from "./types";
 export declare function Form<T extends FieldValues, S>({ initialLoading, ...rest }: FormProps<T, S>): JSX.Element;

package/dist/types/src/Form/components/FormActionBar/FormActionBar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SecondaryActionProp } from "../../types";
 export interface FormActionBarProps {
     readonly keyboardHeight: number;

package/dist/types/src/Form/components/FormBody/FormBody.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormActionBarProps } from "../FormActionBar";
 interface FormBodyProps extends FormActionBarProps {
     readonly children: JSX.Element;

package/dist/types/src/Form/components/FormCache/FormCache.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FieldValues } from "react-hook-form";
 interface FormCacheProps<T extends FieldValues> {
     readonly localCacheId?: string | string[];

package/dist/types/src/Form/components/FormErrorBanner/FormErrorBanner.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { FormBannerErrors } from "../../types";
 export declare function FormErrorBanner({ networkError, bannerError, }: FormBannerErrors): JSX.Element;

package/dist/types/src/Form/components/FormMask/FormMask.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare function FormMask(): JSX.Element;

package/dist/types/src/Form/components/FormMessage/FormMessage.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-/// <reference types="react" />
 import { EmptyStateProps } from "../../../EmptyState";
 type FormMessageData = EmptyStateProps;
 /**

package/dist/types/src/Form/components/FormMessage/components/InternalFormMessage/InternalFormMessage.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { EmptyStateProps } from "../../../../../EmptyState";
 interface FormMessageProps {
     readonly data: EmptyStateProps;

package/dist/types/src/Form/components/FormMessageBanner/FormMessageBanner.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormBannerMessage } from "../../types";
 interface FormMessageBannerProps {
     readonly bannerMessages?: FormBannerMessage[];

package/dist/types/src/Form/components/FormSaveButton/FormSaveButton.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { FormSaveButtonProps } from "../../types";
 export declare function FormSaveButton({ primaryAction, loading, label, secondaryActions, setSecondaryActionLoading, onOpenBottomSheet, onCloseBottomSheet, }: FormSaveButtonProps): JSX.Element;

package/dist/types/src/Form/context/AtlantisFormContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AtlantisFormContextProps } from "./types";
 export declare const atlantisFormContextDefaultValues: {
     useConfirmBeforeBack: () => import("react").MutableRefObject<() => undefined>;

package/dist/types/src/FormatFile/FormatFile.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BottomSheetOptionsSuffix } from "./components/FormatFileBottomSheet";
 import { CreateThumbnail, File, FileUpload, FormattedFile } from "./types";
 export interface FormatFileProps<T> {

package/dist/types/src/FormatFile/components/ErrorIcon/ErrorIcon.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare function ErrorIcon(): JSX.Element;

package/dist/types/src/FormatFile/components/FileView/FileView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormattedFile } from "../../types";
 interface FileViewProps {
     readonly accessibilityLabel?: string;

package/dist/types/src/FormatFile/components/MediaView/MediaView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormattedFile } from "../../types";
 interface MediaViewProps {
     readonly accessibilityLabel?: string;

package/dist/types/src/FormatFile/components/ProgressBar/ProgressBar.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-/// <reference types="react" />
 import { StatusCode } from "../../types";
 interface ProgressBarProps {
     /**

package/dist/types/src/FormatFile/components/_mocks/mockFiles.d.ts

@@ -1,16 +1,16 @@
 import { File, FileUpload, StatusCode } from "../../types";
 export declare const FILE_UPLOAD_MOCK_FILE: ({ progress, status, }: {
     progress: number;
-    status?: StatusCode | undefined;
+    status?: StatusCode;
 }) => FileUpload;
 export declare const FILE_UPLOAD_MOCK_IMAGE: ({ progress, size, status, }: {
     progress: number;
-    size?: number | undefined;
-    status?: StatusCode | undefined;
+    size?: number;
+    status?: StatusCode;
 }) => FileUpload;
 export declare const FILE_UPLOAD_MOCK_PDF: ({ progress, status, }: {
     progress: number;
-    status?: StatusCode | undefined;
+    status?: StatusCode;
 }) => FileUpload;
 export declare const FILE_MOCK_PDF: File;
 export declare const FILE_MOCK_VIDEO: File;

package/dist/types/src/FormatFile/context/FormatFileContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AtlantisFormatFileContextProps } from "./types";
 export declare const formatFileContextDefaultValues: {
     useCreateThumbnail: () => {

package/dist/types/src/Glimmer/Glimmer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { sizeStyles } from "./Glimmer.size.style";
 import { shapeStyles } from "./Glimmer.shape.style";
 export type GlimmerShapes = keyof typeof shapeStyles;

package/dist/types/src/Heading/Heading.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TextAlign, TextColor, TruncateLength, TypographyProps } from "../Typography";
 type HeadingColor = Extract<TextColor, "text" | "subdued" | "heading">;
 export type HeadingLevel = "title" | "subtitle" | "heading" | "subHeading";

package/dist/types/src/Icon/Icon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconColorNames, IconNames, IconSizes } from "@jobber/design";
 export interface IconProps {
     /** The icon to show.  */

package/dist/types/src/InputCurrency/InputCurrency.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormatNumberOptions } from "react-intl";
 import { ControllerRenderProps, FieldValues } from "react-hook-form";
 import { InputTextProps } from "../InputText";

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { UseControllerProps } from "react-hook-form";
 import { XOR } from "ts-xor";
 import { Clearable } from "@jobber/hooks";

package/dist/types/src/InputFieldWrapper/components/ClearAction/ClearAction.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface ClearActionProps {
     /**
      * Press handler

package/dist/types/src/InputFieldWrapper/components/Prefix/Prefix.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StyleProp, TextStyle, ViewStyle } from "react-native";
 import { IconNames } from "@jobber/design";
 export interface PrefixLabelProps {

package/dist/types/src/InputFieldWrapper/components/Suffix/Suffix.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StyleProp, TextStyle } from "react-native";
 import { IconNames } from "@jobber/design";
 export interface SuffixLabelProps {

package/dist/types/src/InputSearch/components/FilterButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface FilterButtonProps {
     readonly accessibilityLabel: string;
     readonly onClick: () => void;

package/dist/types/src/InputText/context/InputAccessoriesContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputAccessoriesContextProps } from "./types";
 export declare const InputAccessoriesContext: import("react").Context<InputAccessoriesContextProps>;
 export declare function useInputAccessoriesContext(): InputAccessoriesContextProps;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { UseControllerProps } from "react-hook-form";
 import { XOR } from "ts-xor";
 import { Clearable } from "@jobber/hooks";

package/dist/types/src/Menu/Menu.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { MenuProps } from "./types";
 export declare function Menu({ menuOptions, customActivator }: MenuProps): JSX.Element;

package/dist/types/src/Menu/components/MenuOption/MenuOption.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { MenuOptionInternalProps } from "../../types";
 export declare function MenuOption({ label, icon, iconColor, textAlign, destructive, textTransform, onPress, setOpen, }: MenuOptionInternalProps): JSX.Element;

package/dist/types/src/Menu/components/Overlay/Overlay.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { OverlayProp } from "../../types";
 export declare function Overlay({ setOpen }: OverlayProp): JSX.Element;

package/dist/types/src/Menu/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconColorNames, IconNames } from "@jobber/design";
 import { TextAlign } from "../Typography";
 export interface MenuOptionProps {

package/dist/types/src/ProgressBar/ProgressBar.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ProgressBarProps } from "./types";
 export declare function ProgressBar({ loading, total, current, inProgress, reverseTheme, header, variation, size, }: ProgressBarProps): JSX.Element;

package/dist/types/src/ProgressBar/ProgressBarInner.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface ProgressBarInnerProps {
     readonly width: number;
     readonly animationDuration?: number;

package/dist/types/src/ProgressBar/ProgressBarStepped.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface ProgressBarSteppedProps {
     readonly total: number;
     readonly current: number;

package/dist/types/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SelectInternalPickerProps } from "../../types";
 type SelectDefaultPickerProps = SelectInternalPickerProps;
 export declare function SelectDefaultPicker({ children, options, disabled, onChange, }: SelectDefaultPickerProps): JSX.Element;

package/dist/types/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.ios.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SelectInternalPickerProps } from "../../types";
 type SelectDefaultPickerProps = SelectInternalPickerProps;
 export declare function SelectDefaultPicker({ children, options, onChange, }: SelectDefaultPickerProps): JSX.Element;

package/dist/types/src/Select/components/SelectInternalPicker/SelectInternalPicker.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { SelectInternalPickerProps } from "../../types";
 export declare function SelectInternalPicker({ children, options, disabled, onChange, }: SelectInternalPickerProps): JSX.Element;

package/dist/types/src/Select/components/SelectPressable/SelectPressable.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PressableProps } from "react-native";
 import { SelectInternalPickerProps } from "../../types";
 type SelectPressableProps = Pick<SelectInternalPickerProps, "children"> & Pick<PressableProps, "onPress">;

package/dist/types/src/StatusLabel/StatusLabel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type StatusType = "success" | "warning" | "critical" | "inactive" | "informative";
 export interface StatusLabelType {
     readonly statusLabel: string;

package/dist/types/src/Switch/Switch.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { XOR } from "ts-xor";
 import { BaseSwitchProps } from "./components/BaseSwitch";
 interface WithLabelProps extends BaseSwitchProps {

package/dist/types/src/Switch/components/BaseSwitch/BaseSwitch.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface BaseSwitchProps {
     /**
      * Value of the switch

package/dist/types/src/Text/Text.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TextAlign, TextVariation, TruncateLength, TypographyProps } from "../Typography";
 interface TextProps extends Pick<TypographyProps<"base">, "maxFontScaleSize" | "selectable"> {
     /**

package/dist/types/src/TextList/TextList.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Spacing } from "../Content";
 import { TextLevel } from "../Text";
 interface TextListProps {

package/dist/types/src/ThumbnailList/ThumbnailList.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ThumbnailListProps } from "./types";
 import { File } from "../FormatFile";
 export declare const filterImages: (files: File[]) => File[];

package/dist/types/src/Toast/Toast.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ToastPosition } from "react-native-toast-message";
 export interface JobberToastProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.74.1-node22-3bf0edd.11+3bf0eddd",
+  "version": "0.75.1",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -79,5 +79,5 @@
     "react-native-safe-area-context": "^4.5.2",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "3bf0eddd96dc11bb9646a691deaa3992b689e982"
+  "gitHead": "621a745c5403d89930eca6ab091bc64ad8c8f5e4"
 }

package/src/Divider/Divider.test.tsx

@@ -1,32 +1,71 @@
 import React from "react";
 import { render } from "@testing-library/react-native";
 import { Divider } from "./Divider";
-import { styles } from "./Divider.style";
+import { horizontalStyles } from "./DividerHorizontal.style";
+import { verticalStyles } from "./DividerVertical.style";
 
 const dividerTestId = "Divider";
 
 describe("Divider", () => {
-  it("renders a default Divider", () => {
-    const { getByTestId } = render(<Divider />);
-    const dividerStyle = getByTestId(dividerTestId).props.style;
-    expect(dividerStyle).toContainEqual(styles.base);
-    expect(dividerStyle).not.toContainEqual(styles.large);
-    expect(dividerStyle).not.toContainEqual(styles.largest);
+  it("uses the given testID", () => {
+    const dividerTestID = "divider-test";
+    const { getByTestId } = render(<Divider testID={dividerTestID} />);
+    expect(getByTestId(dividerTestID)).toBeDefined();
   });
 
-  it("renders a large Divider", () => {
-    const { getByTestId } = render(<Divider size="large" />);
-    const dividerStyle = getByTestId(dividerTestId).props.style;
-    expect(dividerStyle).toContainEqual(styles.base);
-    expect(dividerStyle).toContainEqual(styles.large);
-    expect(dividerStyle).not.toContainEqual(styles.largest);
+  describe("Horizontal", () => {
+    it("renders a default Divider", () => {
+      const { getByTestId } = render(<Divider />);
+      const dividerStyle = getByTestId(dividerTestId).props.style;
+      expect(dividerStyle).toContainEqual(horizontalStyles.base);
+      expect(dividerStyle).not.toContainEqual(horizontalStyles.large);
+      expect(dividerStyle).not.toContainEqual(horizontalStyles.largest);
+    });
+
+    it("renders a large Divider", () => {
+      const { getByTestId } = render(<Divider size="large" />);
+      const dividerStyle = getByTestId(dividerTestId).props.style;
+      expect(dividerStyle).toContainEqual(horizontalStyles.base);
+      expect(dividerStyle).toContainEqual(horizontalStyles.large);
+      expect(dividerStyle).not.toContainEqual(horizontalStyles.largest);
+    });
+
+    it("renders a largest Divider", () => {
+      const { getByTestId } = render(<Divider size="largest" />);
+      const dividerStyle = getByTestId(dividerTestId).props.style;
+      expect(dividerStyle).toContainEqual(horizontalStyles.base);
+      expect(dividerStyle).not.toContainEqual(horizontalStyles.large);
+      expect(dividerStyle).toContainEqual(horizontalStyles.largest);
+    });
   });
 
-  it("renders a largest Divider", () => {
-    const { getByTestId } = render(<Divider size="largest" />);
-    const dividerStyle = getByTestId(dividerTestId).props.style;
-    expect(dividerStyle).toContainEqual(styles.base);
-    expect(dividerStyle).not.toContainEqual(styles.large);
-    expect(dividerStyle).toContainEqual(styles.largest);
+  describe("Vertical", () => {
+    it("renders a default Divider", () => {
+      const { getByTestId } = render(<Divider direction="vertical" />);
+      const dividerStyle = getByTestId(dividerTestId).props.style;
+      expect(dividerStyle).toContainEqual(verticalStyles.base);
+      expect(dividerStyle).not.toContainEqual(verticalStyles.large);
+      expect(dividerStyle).not.toContainEqual(verticalStyles.largest);
+    });
+
+    it("renders a large Divider", () => {
+      const { getByTestId } = render(
+        <Divider direction="vertical" size="large" />,
+      );
+      const dividerStyle = getByTestId(dividerTestId).props.style;
+      expect(dividerStyle).toContainEqual(verticalStyles.base);
+      expect(dividerStyle).toContainEqual(verticalStyles.large);
+      expect(dividerStyle).not.toContainEqual(verticalStyles.largest);
+    });
+
+    it("renders a largest Divider", () => {
+      const { getByTestId } = render(
+        <Divider direction="vertical" size="largest" />,
+      );
+      const dividerStyle = getByTestId(dividerTestId).props.style;
+      expect(dividerStyle).toContainEqual(verticalStyles.base);
+      expect(dividerStyle).not.toContainEqual(verticalStyles.large);
+      expect(dividerStyle).toContainEqual(verticalStyles.largest);
+    });
   });
 });