@simplybusiness/mobius 4.8.6 → 4.8.8

package/dist/esm/utils/sizeClasses.test.js

@@ -0,0 +1,18 @@
+import { sizeClasses } from "./sizeClasses";
+describe("sizeClasses", () => {
+    describe("given the size is set", () => {
+        it.each(["xs", "sm", "md", "lg", "xl", "xxl"])("it should return CSS modifier-like class name --is-%s", size => {
+            const input = sizeClasses(size);
+            expect(input).toEqual(expect.objectContaining({
+                [`--is-${size}`]: true,
+            }));
+        });
+    });
+    describe("given the size is not set", () => {
+        it("should return null", () => {
+            const input = undefined;
+            expect(sizeClasses(input)).toEqual({});
+        });
+    });
+});
+//# sourceMappingURL=sizeClasses.test.js.map

package/dist/esm/utils/sizeClasses.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizeClasses.test.js","sourceRoot":"","sources":["../../../src/utils/sizeClasses.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;QACrC,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAC5C,uDAAuD,EACvD,IAAI,CAAC,EAAE;YACL,MAAM,KAAK,GAAG,WAAW,CAAC,IAAgB,CAAC,CAAC;YAE5C,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CACnB,MAAM,CAAC,gBAAgB,CAAC;gBACtB,CAAC,QAAQ,IAAI,EAAE,CAAC,EAAE,IAAI;aACvB,CAAC,CACH,CAAC;QACJ,CAAC,CACF,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,2BAA2B,EAAE,GAAG,EAAE;QACzC,EAAE,CAAC,oBAAoB,EAAE,GAAG,EAAE;YAC5B,MAAM,KAAK,GAAG,SAAS,CAAC;YAExB,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/esm/utils/spaceDelimitedList.test.js

@@ -0,0 +1,25 @@
+import { spaceDelimitedList } from "./spaceDelimitedList";
+describe("spaceDelimitedList", () => {
+    it("returns undefined when given an empty list", () => {
+        expect(spaceDelimitedList([])).toBeUndefined();
+    });
+    it("returns a string when given a non-empty list", () => {
+        expect(spaceDelimitedList(["a", "b", "c"])).toBe("a b c");
+    });
+    it("returns a string when given a list with a single element", () => {
+        expect(spaceDelimitedList(["a"])).toBe("a");
+    });
+    it("returns a undefined when given a list with a single null element", () => {
+        expect(spaceDelimitedList([null])).toBeUndefined();
+    });
+    it("returns a undefined when given a list with a single undefined element", () => {
+        expect(spaceDelimitedList([undefined])).toBeUndefined();
+    });
+    it("returns a undefined when given a list with a single empty string element", () => {
+        expect(spaceDelimitedList([""])).toBeUndefined();
+    });
+    it("Removes any null or undefined values", () => {
+        expect(spaceDelimitedList(["a", null, "b", undefined, "c"])).toBe("a b c");
+    });
+});
+//# sourceMappingURL=spaceDelimitedList.test.js.map

package/dist/esm/utils/spaceDelimitedList.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spaceDelimitedList.test.js","sourceRoot":"","sources":["../../../src/utils/spaceDelimitedList.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,4CAA4C,EAAE,GAAG,EAAE;QACpD,MAAM,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;QACtD,MAAM,CAAC,kBAAkB,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0DAA0D,EAAE,GAAG,EAAE;QAClE,MAAM,CAAC,kBAAkB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kEAAkE,EAAE,GAAG,EAAE;QAC1E,MAAM,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uEAAuE,EAAE,GAAG,EAAE;QAC/E,MAAM,CAAC,kBAAkB,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0EAA0E,EAAE,GAAG,EAAE;QAClF,MAAM,CAAC,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,MAAM,CAAC,kBAAkB,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC7E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/types/components/Alert/Alert.d.ts

@@ -1,6 +1,6 @@
-import { Ref, RefAttributes, ReactNode } from "react";
-import { DOMProps } from "../../types/dom";
+import { ReactNode, Ref, RefAttributes } from "react";
 import { ForwardedRefComponent } from "../../types/components";
+import { DOMProps } from "../../types/dom";
 export type AlertElementType = HTMLDivElement;
 export interface AlertProps extends DOMProps, RefAttributes<AlertElementType> {
     children?: ReactNode;

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

@@ -2,7 +2,6 @@ import { Ref, RefAttributes, ReactNode } from "react";
 import { DOMProps } from "../../types/dom";
 import { ForwardedRefComponent } from "../../types/components";
 import { UseButtonProps } from "../../hooks/useButton";
-export declare const VARIANT_DEPRECATION_WARNING = "Deprecated <Button> variants detected. For `inverse`, please use `basic`, for `inverse-ghost` - `secondary` instead.";
 export type ButtonElementType = HTMLButtonElement;
 export type Variant = "primary" | "secondary" | "ghost" | "inverse" | "inverse-ghost" | "basic" | "link";
 export type Size = "sm" | "md" | "lg";

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

@@ -1,8 +1,9 @@
 import { ChangeEvent, ReactNode, Ref, RefAttributes } from "react";
 import { DOMProps } from "../../types/dom";
+import { Validation } from "../../types";
 export type CheckboxElementType = HTMLInputElement;
 export type CheckboxRef = Ref<CheckboxElementType>;
-export interface CheckboxProps extends DOMProps, RefAttributes<CheckboxElementType> {
+export interface CheckboxProps extends DOMProps, Validation, RefAttributes<CheckboxElementType> {
     className?: string;
     label?: ReactNode;
     errorMessage?: string;
@@ -11,7 +12,6 @@ export interface CheckboxProps extends DOMProps, RefAttributes<CheckboxElementTy
     isDisabled?: boolean;
     onChange?: (event: ChangeEvent<CheckboxElementType>) => void;
     defaultSelected?: boolean;
-    validationState?: "valid" | "invalid";
     isReadOnly?: boolean;
     isRequired?: boolean;
     "aria-errormessage"?: string;
@@ -33,7 +33,7 @@ export interface CheckboxProps extends DOMProps, RefAttributes<CheckboxElementTy
     setSelected?: React.Dispatch<React.SetStateAction<string>>;
 }
 export type CheckboxGroupElementType = HTMLDivElement;
-interface CheckboxGroupPropsInternal extends DOMProps, RefAttributes<CheckboxGroupElementType> {
+interface CheckboxGroupPropsInternal extends DOMProps, Validation, RefAttributes<CheckboxGroupElementType> {
     children: ReactNode;
     className?: string;
     orientation?: "horizontal" | "vertical";
@@ -42,7 +42,6 @@ interface CheckboxGroupPropsInternal extends DOMProps, RefAttributes<CheckboxGro
     onChange?: (values: string[]) => void;
     "aria-labelledby"?: string;
     "aria-describedby"?: string;
-    validationState?: "valid" | "invalid";
     isRequired?: boolean;
     isDisabled?: boolean;
     isReadOnly?: boolean;

package/dist/types/components/NumberField/NumberField.d.ts

@@ -2,12 +2,12 @@ import { ChangeEvent, Ref, RefAttributes } from "react";
 import { DOMProps } from "../../types/dom";
 import { UseLabelProps } from "../../hooks";
 import { ForwardedRefComponent } from "../../types/components";
+import { Validation } from "../../types";
 export type NumberFieldElementType = HTMLInputElement;
-export interface NumberFieldProps extends DOMProps, UseLabelProps, RefAttributes<NumberFieldElementType> {
+export interface NumberFieldProps extends DOMProps, Validation, UseLabelProps, RefAttributes<NumberFieldElementType> {
     id?: string;
     /** Custom class name for setting specific CSS */
     className?: string;
-    validationState?: "valid" | "invalid" | undefined;
     /** The smallest value allowed for the input. */
     minValue?: number;
     /** The largest value allowed for the input. */

package/dist/types/components/Radio/RadioGroup.d.ts

@@ -2,8 +2,9 @@ import { ReactNode, Ref, RefAttributes } from "react";
 import { DOMProps } from "../../types/dom";
 import { ForwardedRefComponent } from "../../types/components";
 import { HTMLElementEvent } from "../../types/events";
+import { Validation } from "../../types";
 export type RadioGroupElementType = HTMLDivElement;
-export interface RadioGroupProps extends DOMProps, RefAttributes<RadioGroupElementType> {
+export interface RadioGroupProps extends DOMProps, Validation, RefAttributes<RadioGroupElementType> {
     children: ReactNode;
     className?: string;
     orientation?: "horizontal" | "vertical";
@@ -13,7 +14,6 @@ export interface RadioGroupProps extends DOMProps, RefAttributes<RadioGroupEleme
     "aria-labelledby"?: string;
     "aria-errormessage"?: string;
     "aria-describedby"?: string;
-    validationState?: "valid" | "invalid";
     isRequired?: boolean;
     isDisabled?: boolean;
     isReadOnly?: boolean;

package/dist/types/components/TextArea/TextArea.d.ts

@@ -6,7 +6,6 @@ export type TextAreaElementType = HTMLTextAreaElement;
 export interface TextAreaProps extends UseTextFieldProps, DOMProps, RefAttributes<TextAreaElementType> {
     className?: string;
     errorMessage?: string;
-    validationState?: "valid" | "invalid";
 }
 export type TextAreaRef = Ref<TextAreaElementType>;
 declare const TextArea: ForwardedRefComponent<TextAreaProps, TextAreaElementType>;

package/dist/types/hooks/index.d.ts

@@ -1,9 +1,11 @@
 export * from "./useBodyScrollLock";
 export * from "./useBreakpoint";
 export * from "./useButton";
+export * from "./useDeprecationWarning";
 export * from "./useDialog";
 export * from "./useDialogPolyfill";
 export * from "./useLabel";
 export * from "./useOnClickOutside";
 export * from "./useTextField";
+export * from "./useValidationClasses";
 export * from "./useWindowEvent";

package/dist/types/hooks/useDeprecationWarning/index.d.ts

@@ -0,0 +1 @@
+export * from "./useDeprecationWarning";

package/dist/types/hooks/useDeprecationWarning/useDeprecationWarning.d.ts

@@ -0,0 +1,2 @@
+export type UseDeprecationWarningProps = Record<string, unknown>;
+export declare const useDeprecationWarning: (props: UseDeprecationWarningProps) => void;

package/dist/types/hooks/useDeprecationWarning/useDeprecationWarning.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/hooks/useTextField/types.d.ts

@@ -1,14 +1,13 @@
 import { InputHTMLAttributes } from "react";
 import { UseLabelProps, UseLabelReturn } from "../useLabel/useLabel";
-import { FocusEvents } from "../../types";
-export type UseTextFieldProps = UseLabelProps & FocusEvents & Pick<InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "value" | "onChange" | "autoComplete" | "maxLength" | "minLength" | "name" | "placeholder" | "inputMode" | "type" | "pattern" | "onCopy" | "onCut" | "onPaste" | "onCompositionEnd" | "onCompositionStart" | "onCompositionUpdate" | "onSelect" | "onBeforeInput" | "onInput"> & {
+import { FocusEvents, Validation } from "../../types";
+export type UseTextFieldProps = UseLabelProps & FocusEvents & Validation & Pick<InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "value" | "onChange" | "autoComplete" | "maxLength" | "minLength" | "name" | "placeholder" | "inputMode" | "type" | "pattern" | "onCopy" | "onCut" | "onPaste" | "onCompositionEnd" | "onCompositionStart" | "onCompositionUpdate" | "onSelect" | "onBeforeInput" | "onInput"> & {
     inputElementType?: "input" | "textarea" | undefined;
     defaultValue?: string | undefined;
     value?: string | undefined;
     isDisabled?: boolean | undefined;
     isReadOnly?: boolean | undefined;
     isRequired?: boolean | undefined;
-    validationState?: "valid" | "invalid" | undefined;
     description?: string | undefined;
     errorMessage?: string | undefined;
     "aria-describedby"?: string | undefined;

package/dist/types/hooks/useValidationClasses/index.d.ts

@@ -0,0 +1 @@
+export * from "./useValidationClasses";

package/dist/types/hooks/useValidationClasses/useValidationClasses.d.ts

@@ -0,0 +1,3 @@
+import { Validation } from "../../types";
+export type GetValidationClassesProps = Pick<Validation, "validationState" | "isInvalid">;
+export declare const useValidationClasses: (props: GetValidationClassesProps) => "--is-invalid" | "--is-valid" | "";

package/dist/types/hooks/useValidationClasses/useValidationClasses.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "4.8.6",
+  "version": "4.8.8",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -86,7 +86,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.12",
-    "@simplybusiness/icons": "^4.7.0",
+    "@simplybusiness/icons": "^4.7.1",
     "classnames": "^2.5.1",
     "dialog-polyfill": "^0.5.6",
     "lodash.debounce": "^4.0.8",

package/src/components/Accordion/Accordion.stories.tsx

@@ -48,8 +48,8 @@ export const StartExpanded: StoryType = {
     </Accordion>
   ),
   args: {
-    showText: "See more",
-    hideText: "See less",
+    showText: "How to sign a Premium Credit Agreement (PCL)",
+    hideText: "How to sign a Premium Credit Agreement (PCL)",
     headerPosition: "top",
     startOpen: true,
   },

package/src/components/Alert/Alert.tsx

@@ -1,8 +1,8 @@
-import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
+import { circleInfo, circleTick, error, warning } from "@simplybusiness/icons";
 import classNames from "classnames/dedupe";
-import { circleInfo, circleTick, warning, error } from "@simplybusiness/icons";
-import { DOMProps } from "../../types/dom";
+import { ReactNode, Ref, RefAttributes, forwardRef } from "react";
 import { ForwardedRefComponent } from "../../types/components";
+import { DOMProps } from "../../types/dom";
 import { Icon } from "../Icon";
 
 export type AlertElementType = HTMLDivElement;

package/src/components/Button/Button.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { chevronDown } from "@simplybusiness/icons";
 import { Icon } from "../Icon";
-import { Button, VARIANT_DEPRECATION_WARNING } from ".";
+import { Button } from ".";
 
 const CLASS_NAME = "mobius/Button";
 
@@ -120,7 +120,9 @@ describe("Button", () => {
     it("warns the user", () => {
       const warn = jest.spyOn(console, "warn");
       render(<Button variant="inverse" />);
-      expect(warn).toHaveBeenCalledWith(VARIANT_DEPRECATION_WARNING);
+      expect(warn).toHaveBeenCalledWith(
+        "Deprecation warning: Mobius no longer supports the prop 'variant 'inverse''. Please refer to the documentation for more information.",
+      );
     });
 
     it("maps 'inverse' to 'basic'", () => {

package/src/components/Button/Button.tsx

@@ -6,11 +6,7 @@ import { DOMProps } from "../../types/dom";
 import { ForwardedRefComponent } from "../../types/components";
 import { Loading } from "./Loading";
 import { UseButtonProps, useButton } from "../../hooks/useButton";
-
-let HAS_DEPRECATION_WARNING_SHOWN = false;
-
-export const VARIANT_DEPRECATION_WARNING =
-  "Deprecated <Button> variants detected. For `inverse`, please use `basic`, for `inverse-ghost` - `secondary` instead.";
+import { useDeprecationWarning } from "../../hooks";
 
 export type ButtonElementType = HTMLButtonElement;
 
@@ -62,14 +58,10 @@ const Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =
     } = props;
     const { buttonProps } = useButton(props);
 
-    if (
-      (variant === "inverse" || variant === "inverse-ghost") &&
-      !HAS_DEPRECATION_WARNING_SHOWN
-    ) {
-      // eslint-disable-next-line no-console
-      console.warn(VARIANT_DEPRECATION_WARNING);
-      HAS_DEPRECATION_WARNING_SHOWN = true;
-    }
+    useDeprecationWarning({
+      "variant 'inverse'": variant === "inverse",
+      "variant 'inverse-ghost'": variant === "inverse-ghost",
+    });
 
     // Map deprecated variants to alternative ones
     const getVariant = (type: Variant) => {

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -9,15 +9,6 @@ const meta: Meta<typeof Checkbox> = {
   title: "Forms/Checkbox",
   component: Checkbox,
   argTypes: {
-    validationState: {
-      options: ["valid", "invalid", "neither"],
-      control: { type: "radio" },
-      mapping: {
-        valid: "valid",
-        invalid: "invalid",
-        neither: "",
-      },
-    },
     label: {
       control: { type: "text" },
     },
@@ -29,6 +20,7 @@ const meta: Meta<typeof Checkbox> = {
       "defaultSelected",
       "value",
       "groupDisabled",
+      "validationState",
     ),
   },
   decorators: [
@@ -71,7 +63,7 @@ export const Valid: StoryType = {
     value: "agree",
     isDisabled: false,
     errorMessage: "",
-    validationState: "valid",
+    isInvalid: false,
     defaultSelected: false,
     isRequired: false,
   },
@@ -83,7 +75,7 @@ export const Invalid: StoryType = {
     label: "I agree",
     value: "agree",
     isDisabled: false,
-    validationState: "invalid",
+    isInvalid: true,
     errorMessage: "This is an error message",
     defaultSelected: false,
     isRequired: false,

package/src/components/Checkbox/Checkbox.test.tsx

@@ -167,7 +167,7 @@ describe("Checkbox", () => {
       const optionText = "Agree";
 
       const { getByLabelText } = render(
-        <Checkbox label={optionText} validationState="valid" value="value" />,
+        <Checkbox label={optionText} isInvalid={false} value="value" />,
       );
 
       const option = getByLabelText(optionText);
@@ -181,7 +181,7 @@ describe("Checkbox", () => {
       const { getByLabelText } = render(
         <Checkbox
           label={optionText}
-          validationState="invalid"
+          isInvalid
           errorMessage="There is a problem"
           value="value"
         />,
@@ -260,7 +260,7 @@ describe("Checkbox", () => {
       const optionText = "Agree";
 
       const { getByLabelText } = render(
-        <Checkbox label={optionText} value="value" validationState="invalid" />,
+        <Checkbox label={optionText} value="value" isInvalid />,
       );
 
       const option = getByLabelText(optionText);

package/src/components/Checkbox/Checkbox.tsx

@@ -14,6 +14,7 @@ import { ErrorMessage } from "../ErrorMessage";
 import { ForwardedRefComponent } from "../../types/components";
 import { CheckboxElementType, CheckboxProps, CheckboxRef } from "./types";
 import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
+import { useValidationClasses } from "../../hooks";
 
 export const Checkbox: ForwardedRefComponent<
   CheckboxProps,
@@ -25,6 +26,7 @@ export const Checkbox: ForwardedRefComponent<
     isDisabled,
     isRequired,
     validationState,
+    isInvalid,
     onChange,
     className,
     errorMessage,
@@ -38,15 +40,18 @@ export const Checkbox: ForwardedRefComponent<
   const fallbackRef = useRef<HTMLInputElement>(null);
   const refObj = ref || fallbackRef;
   const inputId = useId();
+  const validationClasses = useValidationClasses({
+    validationState,
+    isInvalid,
+  });
   const checkboxClasses = classNames(
     {
       "--is-disabled": isDisabled,
       "--is-selected": selected,
-      "--is-valid": validationState === "valid",
-      "--is-invalid": validationState === "invalid",
       "--is-required": typeof isRequired === "boolean" && isRequired,
       "--is-optional": typeof isRequired === "boolean" && !isRequired,
     },
+    validationClasses,
     className,
   );
   // Append an additional wrapper class name to differenitate from input
@@ -94,7 +99,7 @@ export const Checkbox: ForwardedRefComponent<
         <input
           aria-describedby={describedBy}
           aria-errormessage={shouldErrorMessageShow}
-          aria-invalid={validationState === "invalid"}
+          aria-invalid={isInvalid}
           readOnly={isReadOnly}
           disabled={isDisabled}
           ref={refObj}

package/src/components/Checkbox/CheckboxGroup.stories.tsx

@@ -9,16 +9,13 @@ const meta: Meta<typeof CheckboxGroup> = {
   title: "Forms/CheckboxGroup",
   component: CheckboxGroup,
   argTypes: {
-    validationState: {
-      options: ["valid", "invalid", "neither"],
-      control: { type: "radio" },
-      mapping: {
-        valid: "valid",
-        invalid: "invalid",
-        neither: "",
-      },
-    },
-    ...excludeControls("isRequired", "isReadOnly", "defaultValue", "value"),
+    ...excludeControls(
+      "isRequired",
+      "isReadOnly",
+      "defaultValue",
+      "value",
+      "validationState",
+    ),
   },
   decorators: [
     Story => (
@@ -96,7 +93,7 @@ export const Valid: StoryType = {
     label: "Value",
     errorMessage: "",
     isDisabled: false,
-    validationState: "valid",
+    isInvalid: false,
     orientation: "vertical",
     isRequired: false,
   },
@@ -114,7 +111,7 @@ export const Invalid: StoryType = {
     label: "Value",
     errorMessage: "This field is required",
     isDisabled: false,
-    validationState: "invalid",
+    isInvalid: true,
     orientation: "vertical",
     isRequired: false,
   },

package/src/components/Checkbox/CheckboxGroup.test.tsx

@@ -379,7 +379,7 @@ describe("CheckboxGroup", () => {
       const optionText = "Agree";
 
       const { getByLabelText } = render(
-        <CheckboxGroup validationState="valid">
+        <CheckboxGroup isInvalid={false}>
           <Checkbox label={optionText} value="value" />
         </CheckboxGroup>,
       );
@@ -393,10 +393,7 @@ describe("CheckboxGroup", () => {
       const optionText = "Agree";
 
       const { getByLabelText } = render(
-        <CheckboxGroup
-          validationState="invalid"
-          errorMessage="There is a problem"
-        >
+        <CheckboxGroup isInvalid errorMessage="There is a problem">
           <Checkbox label={optionText} value="value" />,
         </CheckboxGroup>,
       );

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -22,6 +22,7 @@ import {
 import { Label } from "../Label";
 import { ErrorMessage } from "../ErrorMessage";
 import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
+import { useValidationClasses } from "../../hooks";
 
 export const CheckboxGroup: ForwardedRefComponent<
   CheckboxGroupProps,
@@ -32,6 +33,7 @@ export const CheckboxGroup: ForwardedRefComponent<
     isDisabled = false,
     isRequired,
     validationState,
+    isInvalid,
     orientation = "vertical",
     onChange,
     className,
@@ -54,11 +56,16 @@ export const CheckboxGroup: ForwardedRefComponent<
       "--is-optional": typeof isRequired === "boolean" && !isRequired,
     },
   );
-  const labelClasses = classNames({
-    "--is-valid": validationState === "valid",
-    "--is-invalid": validationState === "invalid",
-    "--is-disabled": isDisabled,
+  const validationClasses = useValidationClasses({
+    validationState,
+    isInvalid,
   });
+  const labelClasses = classNames(
+    {
+      "--is-disabled": isDisabled,
+    },
+    validationClasses,
+  );
   const errorMessageId = useId();
   const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
   const describedBy = spaceDelimitedList([
@@ -112,7 +119,7 @@ export const CheckboxGroup: ForwardedRefComponent<
               isDisabled,
               isRequired,
               isReadOnly,
-              validationState,
+              isInvalid,
               defaultSelected: selected.includes(child.props.value),
               onChange: handleChange,
               "aria-describedby": describedBy,

package/src/components/Checkbox/types.ts

@@ -1,11 +1,13 @@
 import { ChangeEvent, ReactNode, Ref, RefAttributes } from "react";
 import { DOMProps } from "../../types/dom";
+import { Validation } from "../../types";
 
 export type CheckboxElementType = HTMLInputElement;
 export type CheckboxRef = Ref<CheckboxElementType>;
 
 export interface CheckboxProps
   extends DOMProps,
+    Validation,
     RefAttributes<CheckboxElementType> {
   className?: string;
   // The content to display as the label.
@@ -18,8 +20,6 @@ export interface CheckboxProps
   onChange?: (event: ChangeEvent<CheckboxElementType>) => void;
   // The default value (uncontrolled).
   defaultSelected?: boolean;
-  // Whether the input should display its "valid" or "invalid" visual styling.
-  validationState?: "valid" | "invalid";
   // Whether the input can be selected but not changed by the user.
   isReadOnly?: boolean;
   // Whether user input is required on the input before form submission.
@@ -47,6 +47,7 @@ export interface CheckboxProps
 export type CheckboxGroupElementType = HTMLDivElement;
 interface CheckboxGroupPropsInternal
   extends DOMProps,
+    Validation,
     RefAttributes<CheckboxGroupElementType> {
   children: ReactNode;
   className?: string;
@@ -63,8 +64,6 @@ interface CheckboxGroupPropsInternal
   // "aria-errormessage"?: string;
   // Identifies the element (or elements) that describes the object.
   "aria-describedby"?: string;
-  // Whether the input should display its "valid" or "invalid" visual styling.
-  validationState?: "valid" | "invalid";
   // Whether user input is required on the input before form submission.
   isRequired?: boolean;
   // Whether the input is disabled.

package/src/components/Modal/Modal.tsx

@@ -7,6 +7,7 @@ import { ModalProps } from "./types";
 import { mergeRefs } from "../../utils";
 import { ModalContext } from "./ModalContext";
 import { useDialog } from "../../hooks";
+import { useDeprecationWarning } from "../../hooks/useDeprecationWarning";
 
 export type ModalElementType = HTMLDialogElement;
 export type ModalRef = Ref<ModalElementType>;
@@ -30,22 +31,14 @@ const Modal = forwardRef((props: ModalProps, ref: ModalRef) => {
     shouldFocusAfterRender,
     parentSelector,
   } = props;
-  const hasWarnedAboutMissingLabels = useRef<boolean>(false);
-  // Handle deprecated props
-  if (!hasWarnedAboutMissingLabels.current) {
-    if (
-      size ||
-      appElement ||
-      preventCloseOnEsc ||
-      shouldFocusAfterRender ||
-      parentSelector
-    ) {
-      console.warn(
-        `Deprecation warning: Mobius Modal no longer supports the following props: size, appElement, preventCloseOnEsc, shouldFocusAfterRender and parentSelector.`,
-      );
-      hasWarnedAboutMissingLabels.current = true;
-    }
-  }
+
+  useDeprecationWarning({
+    size,
+    appElement,
+    preventCloseOnEsc,
+    shouldFocusAfterRender,
+    parentSelector,
+  });
 
   const shouldTransition = supportsDialog();
   const dialogRef = useRef<HTMLDialogElement | null>(null);