@simplybusiness/mobius 4.8.6 → 4.8.8

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

@@ -0,0 +1,2 @@
+import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
+export type ForwardedRefComponent<T, RT> = ForwardRefExoticComponent<PropsWithoutRef<T> & RefAttributes<RT>>;

package/dist/cjs/types/dom.d.ts

@@ -0,0 +1,3 @@
+export interface DOMProps {
+    id?: string | undefined;
+}

package/dist/cjs/types/events.d.ts

@@ -0,0 +1,45 @@
+import type { ClipboardEvent, CompositionEvent, FocusEvent, KeyboardEvent } from "react";
+export interface KeyboardEvents {
+    /** Event called when the value changes (mandatory for controlled components) */
+    onKeyUp?: (e: KeyboardEvent) => void;
+    /** Event called when the value changes (mandatory for controlled components) */
+    onKeyDown?: (e: KeyboardEvent) => void;
+}
+export interface ClipboardEvents {
+    /** Fired when the user initiates a copy action through the browser's user interface. */
+    onCopy?: (e: ClipboardEvent) => void;
+    /** Fired when the user initiates a cut action through the browser's user interface. */
+    onCut?: (e: ClipboardEvent) => void;
+    /** Fired when the user initiates a paste action through the browser's user interface. */
+    onPaste?: (e: ClipboardEvent) => void;
+}
+export interface CompositionEvents {
+    /** Fired when a text composition system such as an input method editor completes or cancels the current composition session. */
+    onCompositionEnd?: (e: CompositionEvent) => void;
+    /** Fired when a text composition system such as an input method editor starts a new composition session. */
+    onCompositionStart?: (e: CompositionEvent) => void;
+    /** Fired when a new character is received in the context of a text composition session controlled by a text composition system such as an input method editor. */
+    onCompositionUpdate?: (e: CompositionEvent) => void;
+}
+export interface FocusEvents {
+    /** Fired when an element has lost focus. */
+    onBlur?: (e: FocusEvent) => void;
+    /** Fired when an element has gained focus. */
+    onFocus?: (e: FocusEvent) => void;
+}
+export interface InputEvents {
+    /** Event called when the value changes (mandatory for controlled components) */
+    onChange?: (value: string) => void;
+}
+export type HTMLElementEvent<T extends HTMLElement> = Event & {
+    target: T;
+};
+export type ValidationState = "valid" | "invalid";
+export interface Validation {
+    /** Whether user input is required on the input before form submission. */
+    isRequired?: boolean;
+    /** Whether the input value is invalid. */
+    isInvalid?: boolean;
+    /** @deprecated Use `isInvalid` instead. */
+    validationState?: ValidationState;
+}

package/dist/cjs/types/icon.d.ts

@@ -0,0 +1,9 @@
+export type IconDefinition = {
+    iconName: string;
+    width: number;
+    height: number;
+    svgPathData: string;
+    iconType: "stroke" | "fill";
+    strokeWidth?: number;
+    fill?: string | undefined;
+};

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

@@ -0,0 +1,5 @@
+export * from "./components";
+export * from "./dom";
+export * from "./events";
+export * from "./icon";
+export * from "./size";

package/dist/cjs/types/size.d.ts

@@ -0,0 +1 @@
+export type SizeType = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";

package/dist/cjs/utils/StoryContainer.d.ts

@@ -0,0 +1 @@
+export declare const StoryContainer: (props: Record<string, unknown>) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/utils/StoryContainer.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "StoryContainer", {
+    enumerable: true,
+    get: function() {
+        return StoryContainer;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const css = `
+  :root {
+    --story-container-width: auto;
+  }
+
+  @media (min-width: 641px) {
+    :root {
+      --story-container-width: var(--size-inner-container);
+    }
+  }
+
+  .story-container {
+    width: var(--story-container-width);
+  }
+`;
+const StoryContainer = (props)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("style", {
+                children: css
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "story-container",
+                ...props
+            })
+        ]
+    });
+
+//# sourceMappingURL=StoryContainer.js.map

package/dist/cjs/utils/StoryContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/StoryContainer.tsx"],"sourcesContent":["const css = `\n  :root {\n    --story-container-width: auto;\n  }\n\n  @media (min-width: 641px) {\n    :root {\n      --story-container-width: var(--size-inner-container);\n    }\n  }\n\n  .story-container {\n    width: var(--story-container-width);\n  }\n`;\n\nexport const StoryContainer = (props: Record<string, unknown>) => (\n  <>\n    <style>{css}</style>\n    <div className=\"story-container\" {...props} />\n  </>\n);\n"],"names":["StoryContainer","css","props","style","div","className"],"mappings":";;;;+BAgBaA;;;eAAAA;;;;AAhBb,MAAMC,MAAM,CAAC;;;;;;;;;;;;;;AAcb,CAAC;AAEM,MAAMD,iBAAiB,CAACE,sBAC7B;;0BACE,qBAACC;0BAAOF;;0BACR,qBAACG;gBAAIC,WAAU;gBAAmB,GAAGH,KAAK"}

package/dist/cjs/utils/changeCSS.d.ts

@@ -0,0 +1 @@
+export declare const changeCSS: (cssUrl: string) => void;

package/dist/cjs/utils/excludeControls.d.ts

@@ -0,0 +1 @@
+export declare const excludeControls: (...args: string[]) => {};

package/dist/cjs/utils/excludeControls.test.d.ts

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

package/dist/cjs/utils/excludeControls.test.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const excludeControls_1 = require("./excludeControls");
+describe("excludeControls", () => {
+    describe("given a list of props", () => {
+        it("returns an object where each prop has an entry with disabled params", () => {
+            const props = ["className", "elementType"];
+            const actual = (0, excludeControls_1.excludeControls)(...props);
+            const expected = {
+                elementType: {
+                    table: {
+                        disable: true,
+                    },
+                },
+                className: {
+                    table: {
+                        disable: true,
+                    },
+                },
+            };
+            expect(actual).toEqual(expected);
+        });
+    });
+});
+//# sourceMappingURL=excludeControls.test.js.map

package/dist/cjs/utils/excludeControls.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"excludeControls.test.js","sourceRoot":"","sources":["../../../src/utils/excludeControls.test.ts"],"names":[],"mappings":";;AAAA,uDAAoD;AAEpD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;QACrC,EAAE,CAAC,qEAAqE,EAAE,GAAG,EAAE;YAC7E,MAAM,KAAK,GAAG,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;YAE3C,MAAM,MAAM,GAAG,IAAA,iCAAe,EAAC,GAAG,KAAK,CAAC,CAAC;YAEzC,MAAM,QAAQ,GAAG;gBACf,WAAW,EAAE;oBACX,KAAK,EAAE;wBACL,OAAO,EAAE,IAAI;qBACd;iBACF;gBACD,SAAS,EAAE;oBACT,KAAK,EAAE;wBACL,OAAO,EAAE,IAAI;qBACd;iBACF;aACF,CAAC;YAEF,MAAM,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/cjs/utils/getPaddingValue.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getPaddingValue", {
+    enumerable: true,
+    get: function() {
+        return getPaddingValue;
+    }
+});
+const getPaddingValue = (padding)=>{
+    if (typeof padding === "string") {
+        return `var(--size-${padding})`;
+    }
+    if (typeof padding === "number") {
+        return `${padding}px`;
+    }
+    return undefined;
+};
+
+//# sourceMappingURL=getPaddingValue.js.map

package/dist/cjs/utils/getPaddingValue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/getPaddingValue.ts"],"sourcesContent":["import { BoxPaddingType } from \"../components/Box/types\";\n\nexport const getPaddingValue = (\n  padding: BoxPaddingType | undefined,\n): string | undefined => {\n  if (typeof padding === \"string\") {\n    return `var(--size-${padding})`;\n  }\n\n  if (typeof padding === \"number\") {\n    return `${padding}px`;\n  }\n\n  return undefined;\n};\n"],"names":["getPaddingValue","padding","undefined"],"mappings":";;;;+BAEaA;;;eAAAA;;;AAAN,MAAMA,kBAAkB,CAC7BC;IAEA,IAAI,OAAOA,YAAY,UAAU;QAC/B,OAAO,CAAC,WAAW,EAAEA,QAAQ,CAAC,CAAC;IACjC;IAEA,IAAI,OAAOA,YAAY,UAAU;QAC/B,OAAO,CAAC,EAAEA,QAAQ,EAAE,CAAC;IACvB;IAEA,OAAOC;AACT"}

package/dist/cjs/utils/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./changeCSS";
+export * from "./excludeControls";
+export * from "./jestHTMLDialogPolyfill";
+export * from "./mergeRefs";
+export * from "./polyfill-tests";
+export * from "./sizeClasses";
+export * from "./spaceDelimitedList";
+export * from "./StoryContainer";

package/dist/cjs/utils/jestHTMLDialogPolyfill.d.ts

@@ -0,0 +1 @@
+export declare const jestHTMLDialogPolyfill: () => void;

package/dist/cjs/utils/mergeRefs.d.ts

@@ -0,0 +1,2 @@
+import type { MutableRefObject, LegacyRef, RefCallback } from "react";
+export declare function mergeRefs<T = any>(refs: Array<MutableRefObject<T> | LegacyRef<T>>): RefCallback<T>;

package/dist/cjs/utils/polyfill-tests.d.ts

@@ -0,0 +1 @@
+export declare const supportsDialog: () => boolean;

package/dist/cjs/utils/sizeClasses.d.ts

@@ -0,0 +1,16 @@
+import { SizeType } from "../types/size";
+export declare const sizeClasses: (size: SizeType | undefined) => {
+    "--is-xs"?: undefined;
+    "--is-sm"?: undefined;
+    "--is-md"?: undefined;
+    "--is-lg"?: undefined;
+    "--is-xl"?: undefined;
+    "--is-xxl"?: undefined;
+} | {
+    "--is-xs": boolean;
+    "--is-sm": boolean;
+    "--is-md": boolean;
+    "--is-lg": boolean;
+    "--is-xl": boolean;
+    "--is-xxl": boolean;
+};

package/dist/cjs/utils/sizeClasses.test.d.ts

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

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const sizeClasses_1 = require("./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 = (0, sizeClasses_1.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((0, sizeClasses_1.sizeClasses)(input)).toEqual({});
+        });
+    });
+});
+//# sourceMappingURL=sizeClasses.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sizeClasses.test.js","sourceRoot":"","sources":["../../../src/utils/sizeClasses.test.ts"],"names":[],"mappings":";;AAAA,+CAA4C;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,IAAA,yBAAW,EAAC,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,IAAA,yBAAW,EAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/cjs/utils/spaceDelimitedList.d.ts

@@ -0,0 +1 @@
+export declare function spaceDelimitedList(list: (string | null | undefined)[]): string | undefined;

package/dist/cjs/utils/spaceDelimitedList.test.d.ts

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

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const spaceDelimitedList_1 = require("./spaceDelimitedList");
+describe("spaceDelimitedList", () => {
+    it("returns undefined when given an empty list", () => {
+        expect((0, spaceDelimitedList_1.spaceDelimitedList)([])).toBeUndefined();
+    });
+    it("returns a string when given a non-empty list", () => {
+        expect((0, spaceDelimitedList_1.spaceDelimitedList)(["a", "b", "c"])).toBe("a b c");
+    });
+    it("returns a string when given a list with a single element", () => {
+        expect((0, spaceDelimitedList_1.spaceDelimitedList)(["a"])).toBe("a");
+    });
+    it("returns a undefined when given a list with a single null element", () => {
+        expect((0, spaceDelimitedList_1.spaceDelimitedList)([null])).toBeUndefined();
+    });
+    it("returns a undefined when given a list with a single undefined element", () => {
+        expect((0, spaceDelimitedList_1.spaceDelimitedList)([undefined])).toBeUndefined();
+    });
+    it("returns a undefined when given a list with a single empty string element", () => {
+        expect((0, spaceDelimitedList_1.spaceDelimitedList)([""])).toBeUndefined();
+    });
+    it("Removes any null or undefined values", () => {
+        expect((0, spaceDelimitedList_1.spaceDelimitedList)(["a", null, "b", undefined, "c"])).toBe("a b c");
+    });
+});
+//# sourceMappingURL=spaceDelimitedList.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spaceDelimitedList.test.js","sourceRoot":"","sources":["../../../src/utils/spaceDelimitedList.test.ts"],"names":[],"mappings":";;AAAA,6DAA0D;AAE1D,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,4CAA4C,EAAE,GAAG,EAAE;QACpD,MAAM,CAAC,IAAA,uCAAkB,EAAC,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;QACtD,MAAM,CAAC,IAAA,uCAAkB,EAAC,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,IAAA,uCAAkB,EAAC,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,IAAA,uCAAkB,EAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uEAAuE,EAAE,GAAG,EAAE;QAC/E,MAAM,CAAC,IAAA,uCAAkB,EAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0EAA0E,EAAE,GAAG,EAAE;QAClF,MAAM,CAAC,IAAA,uCAAkB,EAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,MAAM,CAAC,IAAA,uCAAkB,EAAC,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/esm/components/Alert/Alert.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { circleInfo, circleTick, error, warning } from "@simplybusiness/icons";
 import classNames from "classnames/dedupe";
-import { circleInfo, circleTick, warning, error } from "@simplybusiness/icons";
+import { forwardRef } from "react";
 import { Icon } from "../Icon";
 const Alert = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { elementType: Element = "div", variant = "info", show = true, header, children, ...otherProps } = props;

package/dist/esm/components/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { circleInfo, circleTick, warning, error } from \"@simplybusiness/icons\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Icon } from \"../Icon\";\n\nexport type AlertElementType = HTMLDivElement;\n\nexport interface AlertProps extends DOMProps, RefAttributes<AlertElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: string | React.ElementType;\n  variant?: \"info\" | \"success\" | \"warning\" | \"error\";\n  show?: boolean;\n  header?: string;\n}\n\nexport type AlertRef = Ref<AlertElementType>;\n\nconst Alert: ForwardedRefComponent<AlertProps, AlertElementType> = forwardRef(\n  (props: AlertProps, ref: AlertRef) => {\n    const {\n      elementType: Element = \"div\",\n      variant = \"info\",\n      show = true,\n      header,\n      children,\n      ...otherProps\n    } = props;\n\n    if (!show) return null;\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Alert\",\n      {\n        \"--info\": variant === \"info\",\n        \"--success\": variant === \"success\",\n        \"--warning\": variant === \"warning\",\n        \"--error\": variant === \"error\",\n        \"--has-header\": header,\n      },\n      otherProps.className,\n    );\n    const icon = {\n      info: circleInfo,\n      success: circleTick,\n      warning,\n      error,\n    };\n\n    const headerClasses = classNames(\"mobius\", \"mobius/AlertHeader\");\n    const iconClasses = classNames(\"mobius\", \"mobius/AlertIcon\");\n    const contentClasses = classNames(\"mobius\", \"mobius/AlertContent\");\n\n    return (\n      <Element ref={ref} role=\"alert\" {...otherProps} className={classes}>\n        <span className={iconClasses}>\n          <Icon icon={icon[variant]} />\n        </span>\n        <div>\n          {header && <p className={headerClasses}>{header}</p>}\n          <div className={contentClasses}>{children}</div>\n        </div>\n      </Element>\n    );\n  },\n);\n\nAlert.displayName = \"Alert\";\nexport { Alert };\n"],"names":["forwardRef","classNames","circleInfo","circleTick","warning","error","Icon","Alert","props","ref","elementType","Element","variant","show","header","children","otherProps","classes","className","icon","info","success","headerClasses","iconClasses","contentClasses","role","span","div","p","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAC3C,SAASC,UAAU,EAAEC,UAAU,EAAEC,OAAO,EAAEC,KAAK,QAAQ,wBAAwB;AAG/E,SAASC,IAAI,QAAQ,UAAU;AAgB/B,MAAMC,sBAA6DP,WACjE,CAACQ,OAAmBC;IAClB,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,UAAU,MAAM,EAChBC,OAAO,IAAI,EACXC,MAAM,EACNC,QAAQ,EACR,GAAGC,YACJ,GAAGR;IAEJ,IAAI,CAACK,MAAM,OAAO;IAElB,MAAMI,UAAUhB,WACd,UACA,gBACA;QACE,UAAUW,YAAY;QACtB,aAAaA,YAAY;QACzB,aAAaA,YAAY;QACzB,WAAWA,YAAY;QACvB,gBAAgBE;IAClB,GACAE,WAAWE,SAAS;IAEtB,MAAMC,OAAO;QACXC,MAAMlB;QACNmB,SAASlB;QACTC;QACAC;IACF;IAEA,MAAMiB,gBAAgBrB,WAAW,UAAU;IAC3C,MAAMsB,cAActB,WAAW,UAAU;IACzC,MAAMuB,iBAAiBvB,WAAW,UAAU;IAE5C,qBACE,MAACU;QAAQF,KAAKA;QAAKgB,MAAK;QAAS,GAAGT,UAAU;QAAEE,WAAWD;;0BACzD,KAACS;gBAAKR,WAAWK;0BACf,cAAA,KAACjB;oBAAKa,MAAMA,IAAI,CAACP,QAAQ;;;0BAE3B,MAACe;;oBACEb,wBAAU,KAACc;wBAAEV,WAAWI;kCAAgBR;;kCACzC,KAACa;wBAAIT,WAAWM;kCAAiBT;;;;;;AAIzC;AAGFR,MAAMsB,WAAW,GAAG;AACpB,SAAStB,KAAK,GAAG"}
+{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { circleInfo, circleTick, error, warning } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport { ReactNode, Ref, RefAttributes, forwardRef } from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Icon } from \"../Icon\";\n\nexport type AlertElementType = HTMLDivElement;\n\nexport interface AlertProps extends DOMProps, RefAttributes<AlertElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: string | React.ElementType;\n  variant?: \"info\" | \"success\" | \"warning\" | \"error\";\n  show?: boolean;\n  header?: string;\n}\n\nexport type AlertRef = Ref<AlertElementType>;\n\nconst Alert: ForwardedRefComponent<AlertProps, AlertElementType> = forwardRef(\n  (props: AlertProps, ref: AlertRef) => {\n    const {\n      elementType: Element = \"div\",\n      variant = \"info\",\n      show = true,\n      header,\n      children,\n      ...otherProps\n    } = props;\n\n    if (!show) return null;\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Alert\",\n      {\n        \"--info\": variant === \"info\",\n        \"--success\": variant === \"success\",\n        \"--warning\": variant === \"warning\",\n        \"--error\": variant === \"error\",\n        \"--has-header\": header,\n      },\n      otherProps.className,\n    );\n    const icon = {\n      info: circleInfo,\n      success: circleTick,\n      warning,\n      error,\n    };\n\n    const headerClasses = classNames(\"mobius\", \"mobius/AlertHeader\");\n    const iconClasses = classNames(\"mobius\", \"mobius/AlertIcon\");\n    const contentClasses = classNames(\"mobius\", \"mobius/AlertContent\");\n\n    return (\n      <Element ref={ref} role=\"alert\" {...otherProps} className={classes}>\n        <span className={iconClasses}>\n          <Icon icon={icon[variant]} />\n        </span>\n        <div>\n          {header && <p className={headerClasses}>{header}</p>}\n          <div className={contentClasses}>{children}</div>\n        </div>\n      </Element>\n    );\n  },\n);\n\nAlert.displayName = \"Alert\";\nexport { Alert };\n"],"names":["circleInfo","circleTick","error","warning","classNames","forwardRef","Icon","Alert","props","ref","elementType","Element","variant","show","header","children","otherProps","classes","className","icon","info","success","headerClasses","iconClasses","contentClasses","role","span","div","p","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,UAAU,EAAEC,UAAU,EAAEC,KAAK,EAAEC,OAAO,QAAQ,wBAAwB;AAC/E,OAAOC,gBAAgB,oBAAoB;AAC3C,SAAwCC,UAAU,QAAQ,QAAQ;AAGlE,SAASC,IAAI,QAAQ,UAAU;AAgB/B,MAAMC,sBAA6DF,WACjE,CAACG,OAAmBC;IAClB,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,UAAU,MAAM,EAChBC,OAAO,IAAI,EACXC,MAAM,EACNC,QAAQ,EACR,GAAGC,YACJ,GAAGR;IAEJ,IAAI,CAACK,MAAM,OAAO;IAElB,MAAMI,UAAUb,WACd,UACA,gBACA;QACE,UAAUQ,YAAY;QACtB,aAAaA,YAAY;QACzB,aAAaA,YAAY;QACzB,WAAWA,YAAY;QACvB,gBAAgBE;IAClB,GACAE,WAAWE,SAAS;IAEtB,MAAMC,OAAO;QACXC,MAAMpB;QACNqB,SAASpB;QACTE;QACAD;IACF;IAEA,MAAMoB,gBAAgBlB,WAAW,UAAU;IAC3C,MAAMmB,cAAcnB,WAAW,UAAU;IACzC,MAAMoB,iBAAiBpB,WAAW,UAAU;IAE5C,qBACE,MAACO;QAAQF,KAAKA;QAAKgB,MAAK;QAAS,GAAGT,UAAU;QAAEE,WAAWD;;0BACzD,KAACS;gBAAKR,WAAWK;0BACf,cAAA,KAACjB;oBAAKa,MAAMA,IAAI,CAACP,QAAQ;;;0BAE3B,MAACe;;oBACEb,wBAAU,KAACc;wBAAEV,WAAWI;kCAAgBR;;kCACzC,KAACa;wBAAIT,WAAWM;kCAAiBT;;;;;;AAIzC;AAGFR,MAAMsB,WAAW,GAAG;AACpB,SAAStB,KAAK,GAAG"}

package/dist/esm/components/Button/Button.js

@@ -4,18 +4,16 @@ import { forwardRef } from "react";
 import classNames from "classnames/dedupe";
 import { Loading } from "./Loading";
 import { 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";
 const Button = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { children, elementType: Component = "button", isDisabled, isLoading, isSuccess, variant = "primary", size = "md", // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onPress, // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onClick, ...otherProps } = 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)=>{
         if (type === "inverse") {

package/dist/esm/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Loading } from \"./Loading\";\nimport { UseButtonProps, useButton } from \"../../hooks/useButton\";\n\nlet HAS_DEPRECATION_WARNING_SHOWN = false;\n\nexport const VARIANT_DEPRECATION_WARNING =\n  \"Deprecated <Button> variants detected. For `inverse`, please use `basic`, for `inverse-ghost` - `secondary` instead.\";\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant =\n  | \"primary\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"inverse\"\n  | \"inverse-ghost\"\n  | \"basic\"\n  | \"link\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends UseButtonProps,\n    DOMProps,\n    RefAttributes<ButtonElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Shortlist of styles */\n  variant?: Variant;\n  size?: Size;\n  /** Display loading spinner */\n  isLoading?: boolean;\n  /** Display success style */\n  isSuccess?: boolean;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  children?: ReactNode;\n}\n\nexport type ButtonRef = Ref<ButtonElementType>;\n\nconst Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =\n  forwardRef((props: ButtonProps, ref: ButtonRef) => {\n    const {\n      children,\n      elementType: Component = \"button\",\n      isDisabled,\n      isLoading,\n      isSuccess,\n      variant = \"primary\",\n      size = \"md\",\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onPress,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onClick,\n      ...otherProps\n    } = props;\n    const { buttonProps } = useButton(props);\n\n    if (\n      (variant === \"inverse\" || variant === \"inverse-ghost\") &&\n      !HAS_DEPRECATION_WARNING_SHOWN\n    ) {\n      // eslint-disable-next-line no-console\n      console.warn(VARIANT_DEPRECATION_WARNING);\n      HAS_DEPRECATION_WARNING_SHOWN = true;\n    }\n\n    // Map deprecated variants to alternative ones\n    const getVariant = (type: Variant) => {\n      if (type === \"inverse\") {\n        return \"basic\";\n      }\n\n      if (type === \"inverse-ghost\") {\n        return \"secondary\";\n      }\n\n      return variant;\n    };\n\n    const buttonVariant = getVariant(variant);\n\n    // Reshape class name and apply to outer element\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Button\",\n      `--variant-${buttonVariant}`,\n      `--size-${size}`,\n      {\n        \"--is-disabled\": isDisabled,\n        \"--is-loading\": isLoading,\n        \"--is-success\": isSuccess && !isLoading,\n      },\n      otherProps.className,\n    );\n    otherProps.className = classes;\n\n    return (\n      <Component ref={ref} {...buttonProps} {...otherProps}>\n        {isLoading ? <Loading /> : children && children}\n      </Component>\n    );\n  });\n\nButton.displayName = \"Button\";\nexport { Button };\n"],"names":["forwardRef","classNames","Loading","useButton","HAS_DEPRECATION_WARNING_SHOWN","VARIANT_DEPRECATION_WARNING","Button","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","onPress","onClick","otherProps","buttonProps","console","warn","getVariant","type","buttonVariant","classes","className","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,OAAO,QAAQ,YAAY;AACpC,SAAyBC,SAAS,QAAQ,wBAAwB;AAElE,IAAIC,gCAAgC;AAEpC,OAAO,MAAMC,8BACX,uHAAuH;AAkCzH,MAAMC,uBACJN,WAAW,CAACO,OAAoBC;IAC9B,MAAM,EACJC,QAAQ,EACRC,aAAaC,YAAY,QAAQ,EACjCC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,UAAU,SAAS,EACnBC,OAAO,IAAI,EACX,6DAA6D;IAC7DC,OAAO,EACP,6DAA6D;IAC7DC,OAAO,EACP,GAAGC,YACJ,GAAGZ;IACJ,MAAM,EAAEa,WAAW,EAAE,GAAGjB,UAAUI;IAElC,IACE,AAACQ,CAAAA,YAAY,aAAaA,YAAY,eAAc,KACpD,CAACX,+BACD;QACA,sCAAsC;QACtCiB,QAAQC,IAAI,CAACjB;QACbD,gCAAgC;IAClC;IAEA,8CAA8C;IAC9C,MAAMmB,aAAa,CAACC;QAClB,IAAIA,SAAS,WAAW;YACtB,OAAO;QACT;QAEA,IAAIA,SAAS,iBAAiB;YAC5B,OAAO;QACT;QAEA,OAAOT;IACT;IAEA,MAAMU,gBAAgBF,WAAWR;IAEjC,gDAAgD;IAChD,MAAMW,UAAUzB,WACd,UACA,iBACA,CAAC,UAAU,EAAEwB,cAAc,CAAC,EAC5B,CAAC,OAAO,EAAET,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAM,WAAWQ,SAAS;IAEtBR,WAAWQ,SAAS,GAAGD;IAEvB,qBACE,KAACf;QAAUH,KAAKA;QAAM,GAAGY,WAAW;QAAG,GAAGD,UAAU;kBACjDN,0BAAY,KAACX,eAAaO,YAAYA;;AAG7C;AAEFH,OAAOsB,WAAW,GAAG;AACrB,SAAStB,MAAM,GAAG"}
+{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Loading } from \"./Loading\";\nimport { UseButtonProps, useButton } from \"../../hooks/useButton\";\nimport { useDeprecationWarning } from \"../../hooks\";\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant =\n  | \"primary\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"inverse\"\n  | \"inverse-ghost\"\n  | \"basic\"\n  | \"link\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends UseButtonProps,\n    DOMProps,\n    RefAttributes<ButtonElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Shortlist of styles */\n  variant?: Variant;\n  size?: Size;\n  /** Display loading spinner */\n  isLoading?: boolean;\n  /** Display success style */\n  isSuccess?: boolean;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  children?: ReactNode;\n}\n\nexport type ButtonRef = Ref<ButtonElementType>;\n\nconst Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =\n  forwardRef((props: ButtonProps, ref: ButtonRef) => {\n    const {\n      children,\n      elementType: Component = \"button\",\n      isDisabled,\n      isLoading,\n      isSuccess,\n      variant = \"primary\",\n      size = \"md\",\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onPress,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onClick,\n      ...otherProps\n    } = props;\n    const { buttonProps } = useButton(props);\n\n    useDeprecationWarning({\n      \"variant 'inverse'\": variant === \"inverse\",\n      \"variant 'inverse-ghost'\": variant === \"inverse-ghost\",\n    });\n\n    // Map deprecated variants to alternative ones\n    const getVariant = (type: Variant) => {\n      if (type === \"inverse\") {\n        return \"basic\";\n      }\n\n      if (type === \"inverse-ghost\") {\n        return \"secondary\";\n      }\n\n      return variant;\n    };\n\n    const buttonVariant = getVariant(variant);\n\n    // Reshape class name and apply to outer element\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Button\",\n      `--variant-${buttonVariant}`,\n      `--size-${size}`,\n      {\n        \"--is-disabled\": isDisabled,\n        \"--is-loading\": isLoading,\n        \"--is-success\": isSuccess && !isLoading,\n      },\n      otherProps.className,\n    );\n    otherProps.className = classes;\n\n    return (\n      <Component ref={ref} {...buttonProps} {...otherProps}>\n        {isLoading ? <Loading /> : children && children}\n      </Component>\n    );\n  });\n\nButton.displayName = \"Button\";\nexport { Button };\n"],"names":["forwardRef","classNames","Loading","useButton","useDeprecationWarning","Button","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","onPress","onClick","otherProps","buttonProps","getVariant","type","buttonVariant","classes","className","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,OAAO,QAAQ,YAAY;AACpC,SAAyBC,SAAS,QAAQ,wBAAwB;AAClE,SAASC,qBAAqB,QAAQ,cAAc;AAkCpD,MAAMC,uBACJL,WAAW,CAACM,OAAoBC;IAC9B,MAAM,EACJC,QAAQ,EACRC,aAAaC,YAAY,QAAQ,EACjCC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,UAAU,SAAS,EACnBC,OAAO,IAAI,EACX,6DAA6D;IAC7DC,OAAO,EACP,6DAA6D;IAC7DC,OAAO,EACP,GAAGC,YACJ,GAAGZ;IACJ,MAAM,EAAEa,WAAW,EAAE,GAAGhB,UAAUG;IAElCF,sBAAsB;QACpB,qBAAqBU,YAAY;QACjC,2BAA2BA,YAAY;IACzC;IAEA,8CAA8C;IAC9C,MAAMM,aAAa,CAACC;QAClB,IAAIA,SAAS,WAAW;YACtB,OAAO;QACT;QAEA,IAAIA,SAAS,iBAAiB;YAC5B,OAAO;QACT;QAEA,OAAOP;IACT;IAEA,MAAMQ,gBAAgBF,WAAWN;IAEjC,gDAAgD;IAChD,MAAMS,UAAUtB,WACd,UACA,iBACA,CAAC,UAAU,EAAEqB,cAAc,CAAC,EAC5B,CAAC,OAAO,EAAEP,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAM,WAAWM,SAAS;IAEtBN,WAAWM,SAAS,GAAGD;IAEvB,qBACE,KAACb;QAAUH,KAAKA;QAAM,GAAGY,WAAW;QAAG,GAAGD,UAAU;kBACjDN,0BAAY,KAACV,eAAaM,YAAYA;;AAG7C;AAEFH,OAAOoB,WAAW,GAAG;AACrB,SAASpB,MAAM,GAAG"}

package/dist/esm/components/Checkbox/Checkbox.js

@@ -4,20 +4,23 @@ import { forwardRef, useRef, useState, useId } from "react";
 import classNames from "classnames/dedupe";
 import { ErrorMessage } from "../ErrorMessage";
 import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
+import { useValidationClasses } from "../../hooks";
 export const Checkbox = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { id, label, isDisabled, isRequired, validationState, onChange, className, errorMessage, defaultSelected = false, isReadOnly, value, ["aria-describedby"]: ariaDescribedBy, ...rest } = props;
+    const { id, label, isDisabled, isRequired, validationState, isInvalid, onChange, className, errorMessage, defaultSelected = false, isReadOnly, value, ["aria-describedby"]: ariaDescribedBy, ...rest } = props;
     const [selected, setSelected] = useState(defaultSelected);
     const fallbackRef = useRef(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
-    }, className);
+    }, validationClasses, className);
     // Append an additional wrapper class name to differenitate from input
     const wrapperClasses = classNames("mobius", "mobius/Checkbox", checkboxClasses);
     const inputClasses = classNames("mobius/CheckboxInput", checkboxClasses);
@@ -56,7 +59,7 @@ export const Checkbox = /*#__PURE__*/ forwardRef((props, ref)=>{
                     /*#__PURE__*/ _jsx("input", {
                         "aria-describedby": describedBy,
                         "aria-errormessage": shouldErrorMessageShow,
-                        "aria-invalid": validationState === "invalid",
+                        "aria-invalid": isInvalid,
                         readOnly: isReadOnly,
                         disabled: isDisabled,
                         ref: refObj,

package/dist/esm/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  ChangeEvent,\n  forwardRef,\n  useRef,\n  useState,\n  KeyboardEvent,\n  MouseEvent,\n  useId,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { CheckboxElementType, CheckboxProps, CheckboxRef } from \"./types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\n\nexport const Checkbox: ForwardedRefComponent<\n  CheckboxProps,\n  CheckboxElementType\n> = forwardRef((props: CheckboxProps, ref: CheckboxRef) => {\n  const {\n    id,\n    label,\n    isDisabled,\n    isRequired,\n    validationState,\n    onChange,\n    className,\n    errorMessage,\n    defaultSelected = false,\n    isReadOnly,\n    value,\n    [\"aria-describedby\"]: ariaDescribedBy,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<boolean>(defaultSelected);\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const refObj = ref || fallbackRef;\n  const inputId = useId();\n  const checkboxClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": selected,\n      \"--is-valid\": validationState === \"valid\",\n      \"--is-invalid\": validationState === \"invalid\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n    className,\n  );\n  // Append an additional wrapper class name to differenitate from input\n  const wrapperClasses = classNames(\n    \"mobius\",\n    \"mobius/Checkbox\",\n    checkboxClasses,\n  );\n  const inputClasses = classNames(\"mobius/CheckboxInput\", checkboxClasses);\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n  const labelId = useId();\n\n  const toggleState = () => {\n    setSelected(!selected);\n  };\n\n  const handleClick = (event: MouseEvent<CheckboxElementType>) => {\n    const isMouseEvent = event.clientX;\n\n    if (isMouseEvent) {\n      toggleState();\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Space\") {\n      toggleState();\n    }\n  };\n\n  return (\n    <>\n      <label id={labelId} className={wrapperClasses}>\n        <input\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={validationState === \"invalid\"}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          ref={refObj}\n          className={inputClasses}\n          onClick={handleClick}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          type=\"checkbox\"\n          defaultChecked={defaultSelected}\n          required={isRequired}\n          id={id || inputId}\n          value={value}\n          {...rest}\n        />\n        <span className=\"mobius/CheckboxLabel\">{label}</span>\n      </label>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </>\n  );\n});\n"],"names":["forwardRef","useRef","useState","useId","classNames","ErrorMessage","spaceDelimitedList","Checkbox","props","ref","id","label","isDisabled","isRequired","validationState","onChange","className","errorMessage","defaultSelected","isReadOnly","value","ariaDescribedBy","rest","selected","setSelected","fallbackRef","refObj","inputId","checkboxClasses","wrapperClasses","inputClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","labelId","toggleState","handleClick","event","isMouseEvent","clientX","handleChange","handleKeyDown","code","input","aria-describedby","aria-errormessage","aria-invalid","readOnly","disabled","onClick","onKeyDown","type","defaultChecked","required","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,MAAM,EACNC,QAAQ,EAGRC,KAAK,QACA,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAC3C,SAASC,YAAY,QAAQ,kBAAkB;AAG/C,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE,OAAO,MAAMC,yBAGTP,WAAW,CAACQ,OAAsBC;IACpC,MAAM,EACJC,EAAE,EACFC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,KAAK,EACL,CAAC,mBAAmB,EAAEC,eAAe,EACrC,GAAGC,MACJ,GAAGd;IACJ,MAAM,CAACe,UAAUC,YAAY,GAAGtB,SAAkBgB;IAClD,MAAMO,cAAcxB,OAAyB;IAC7C,MAAMyB,SAASjB,OAAOgB;IACtB,MAAME,UAAUxB;IAChB,MAAMyB,kBAAkBxB,WACtB;QACE,iBAAiBQ;QACjB,iBAAiBW;QACjB,cAAcT,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiB,OAAOD,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAG;IAEF,sEAAsE;IACtE,MAAMa,iBAAiBzB,WACrB,UACA,mBACAwB;IAEF,MAAME,eAAe1B,WAAW,wBAAwBwB;IACxD,MAAMG,iBAAiB5B;IACvB,MAAM6B,yBAAyBf,eAAec,iBAAiBE;IAC/D,MAAMC,cAAc5B,mBAAmB;QACrC0B;QACAX;KACD;IACD,MAAMc,UAAUhC;IAEhB,MAAMiC,cAAc;QAClBZ,YAAY,CAACD;IACf;IAEA,MAAMc,cAAc,CAACC;QACnB,MAAMC,eAAeD,MAAME,OAAO;QAElC,IAAID,cAAc;YAChBH;QACF;IACF;IAEA,MAAMK,eAAe,CAACH;QACpB,IAAIvB,UAAU;YACZA,SAASuB;QACX;IACF;IAEA,MAAMI,gBAAgB,CAACJ;QACrB,IAAIA,MAAMK,IAAI,KAAK,SAAS;YAC1BP;QACF;IACF;IAEA,qBACE;;0BACE,MAACzB;gBAAMD,IAAIyB;gBAASnB,WAAWa;;kCAC7B,KAACe;wBACCC,oBAAkBX;wBAClBY,qBAAmBd;wBACnBe,gBAAcjC,oBAAoB;wBAClCkC,UAAU7B;wBACV8B,UAAUrC;wBACVH,KAAKiB;wBACLV,WAAWc;wBACXoB,SAASb;wBACTtB,UAAU0B;wBACVU,WAAWT;wBACXU,MAAK;wBACLC,gBAAgBnC;wBAChBoC,UAAUzC;wBACVH,IAAIA,MAAMiB;wBACVP,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,KAACiC;wBAAKvC,WAAU;kCAAwBL;;;;0BAE1C,KAACN;gBAAaK,IAAIqB;gBAAgBd,cAAcA;;;;AAGtD,GAAG"}
+{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  ChangeEvent,\n  forwardRef,\n  useRef,\n  useState,\n  KeyboardEvent,\n  MouseEvent,\n  useId,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { CheckboxElementType, CheckboxProps, CheckboxRef } from \"./types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useValidationClasses } from \"../../hooks\";\n\nexport const Checkbox: ForwardedRefComponent<\n  CheckboxProps,\n  CheckboxElementType\n> = forwardRef((props: CheckboxProps, ref: CheckboxRef) => {\n  const {\n    id,\n    label,\n    isDisabled,\n    isRequired,\n    validationState,\n    isInvalid,\n    onChange,\n    className,\n    errorMessage,\n    defaultSelected = false,\n    isReadOnly,\n    value,\n    [\"aria-describedby\"]: ariaDescribedBy,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<boolean>(defaultSelected);\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const refObj = ref || fallbackRef;\n  const inputId = useId();\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const checkboxClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": selected,\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n    validationClasses,\n    className,\n  );\n  // Append an additional wrapper class name to differenitate from input\n  const wrapperClasses = classNames(\n    \"mobius\",\n    \"mobius/Checkbox\",\n    checkboxClasses,\n  );\n  const inputClasses = classNames(\"mobius/CheckboxInput\", checkboxClasses);\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n  const labelId = useId();\n\n  const toggleState = () => {\n    setSelected(!selected);\n  };\n\n  const handleClick = (event: MouseEvent<CheckboxElementType>) => {\n    const isMouseEvent = event.clientX;\n\n    if (isMouseEvent) {\n      toggleState();\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Space\") {\n      toggleState();\n    }\n  };\n\n  return (\n    <>\n      <label id={labelId} className={wrapperClasses}>\n        <input\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={isInvalid}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          ref={refObj}\n          className={inputClasses}\n          onClick={handleClick}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          type=\"checkbox\"\n          defaultChecked={defaultSelected}\n          required={isRequired}\n          id={id || inputId}\n          value={value}\n          {...rest}\n        />\n        <span className=\"mobius/CheckboxLabel\">{label}</span>\n      </label>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </>\n  );\n});\n"],"names":["forwardRef","useRef","useState","useId","classNames","ErrorMessage","spaceDelimitedList","useValidationClasses","Checkbox","props","ref","id","label","isDisabled","isRequired","validationState","isInvalid","onChange","className","errorMessage","defaultSelected","isReadOnly","value","ariaDescribedBy","rest","selected","setSelected","fallbackRef","refObj","inputId","validationClasses","checkboxClasses","wrapperClasses","inputClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","labelId","toggleState","handleClick","event","isMouseEvent","clientX","handleChange","handleKeyDown","code","input","aria-describedby","aria-errormessage","aria-invalid","readOnly","disabled","onClick","onKeyDown","type","defaultChecked","required","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,MAAM,EACNC,QAAQ,EAGRC,KAAK,QACA,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAC3C,SAASC,YAAY,QAAQ,kBAAkB;AAG/C,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,oBAAoB,QAAQ,cAAc;AAEnD,OAAO,MAAMC,yBAGTR,WAAW,CAACS,OAAsBC;IACpC,MAAM,EACJC,EAAE,EACFC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,KAAK,EACL,CAAC,mBAAmB,EAAEC,eAAe,EACrC,GAAGC,MACJ,GAAGf;IACJ,MAAM,CAACgB,UAAUC,YAAY,GAAGxB,SAAkBkB;IAClD,MAAMO,cAAc1B,OAAyB;IAC7C,MAAM2B,SAASlB,OAAOiB;IACtB,MAAME,UAAU1B;IAChB,MAAM2B,oBAAoBvB,qBAAqB;QAC7CQ;QACAC;IACF;IACA,MAAMe,kBAAkB3B,WACtB;QACE,iBAAiBS;QACjB,iBAAiBY;QACjB,iBAAiB,OAAOX,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAgB,mBACAZ;IAEF,sEAAsE;IACtE,MAAMc,iBAAiB5B,WACrB,UACA,mBACA2B;IAEF,MAAME,eAAe7B,WAAW,wBAAwB2B;IACxD,MAAMG,iBAAiB/B;IACvB,MAAMgC,yBAAyBhB,eAAee,iBAAiBE;IAC/D,MAAMC,cAAc/B,mBAAmB;QACrC6B;QACAZ;KACD;IACD,MAAMe,UAAUnC;IAEhB,MAAMoC,cAAc;QAClBb,YAAY,CAACD;IACf;IAEA,MAAMe,cAAc,CAACC;QACnB,MAAMC,eAAeD,MAAME,OAAO;QAElC,IAAID,cAAc;YAChBH;QACF;IACF;IAEA,MAAMK,eAAe,CAACH;QACpB,IAAIxB,UAAU;YACZA,SAASwB;QACX;IACF;IAEA,MAAMI,gBAAgB,CAACJ;QACrB,IAAIA,MAAMK,IAAI,KAAK,SAAS;YAC1BP;QACF;IACF;IAEA,qBACE;;0BACE,MAAC3B;gBAAMD,IAAI2B;gBAASpB,WAAWc;;kCAC7B,KAACe;wBACCC,oBAAkBX;wBAClBY,qBAAmBd;wBACnBe,gBAAclC;wBACdmC,UAAU9B;wBACV+B,UAAUvC;wBACVH,KAAKkB;wBACLV,WAAWe;wBACXoB,SAASb;wBACTvB,UAAU2B;wBACVU,WAAWT;wBACXU,MAAK;wBACLC,gBAAgBpC;wBAChBqC,UAAU3C;wBACVH,IAAIA,MAAMkB;wBACVP,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,KAACkC;wBAAKxC,WAAU;kCAAwBN;;;;0BAE1C,KAACP;gBAAaM,IAAIuB;gBAAgBf,cAAcA;;;;AAGtD,GAAG"}

package/dist/esm/components/Checkbox/CheckboxGroup.js

@@ -5,8 +5,9 @@ import classNames from "classnames/dedupe";
 import { Label } from "../Label";
 import { ErrorMessage } from "../ErrorMessage";
 import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
+import { useValidationClasses } from "../../hooks";
 export const CheckboxGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { label, isDisabled = false, isRequired, validationState, orientation = "vertical", onChange, className, errorMessage, children, defaultValue = [], isReadOnly, itemsPerRow, ...rest } = props;
+    const { label, isDisabled = false, isRequired, validationState, isInvalid, orientation = "vertical", onChange, className, errorMessage, children, defaultValue = [], isReadOnly, itemsPerRow, ...rest } = props;
     const [selected, setSelected] = useState(defaultValue);
     const checkboxGroupClasses = classNames("mobius", "mobius/CheckboxGroup", className, {
         "--is-horizontal": orientation === "horizontal",
@@ -14,11 +15,13 @@ export const CheckboxGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
         "--is-required": typeof isRequired === "boolean" && isRequired,
         "--is-optional": typeof isRequired === "boolean" && !isRequired
     });
+    const validationClasses = useValidationClasses({
+        validationState,
+        isInvalid
+    });
     const labelClasses = classNames({
-        "--is-valid": validationState === "valid",
-        "--is-invalid": validationState === "invalid",
         "--is-disabled": isDisabled
-    });
+    }, validationClasses);
     const errorMessageId = useId();
     const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
     const describedBy = spaceDelimitedList([
@@ -70,7 +73,7 @@ export const CheckboxGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
                             isDisabled,
                             isRequired,
                             isReadOnly,
-                            validationState,
+                            isInvalid,
                             defaultSelected: selected.includes(child.props.value),
                             onChange: handleChange,
                             "aria-describedby": describedBy

package/dist/esm/components/Checkbox/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  forwardRef,\n  ReactElement,\n  cloneElement,\n  isValidElement,\n  useId,\n  ChangeEvent,\n  useState,\n  useEffect,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport {\n  CheckboxElementType,\n  CheckboxGroupElementType,\n  CheckboxGroupProps,\n  CheckboxGroupRef,\n} from \"./types\";\nimport { Label } from \"../Label\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\n\nexport const CheckboxGroup: ForwardedRefComponent<\n  CheckboxGroupProps,\n  CheckboxGroupElementType\n> = forwardRef((props: CheckboxGroupProps, ref: CheckboxGroupRef) => {\n  const {\n    label,\n    isDisabled = false,\n    isRequired,\n    validationState,\n    orientation = \"vertical\",\n    onChange,\n    className,\n    errorMessage,\n    children,\n    defaultValue = [],\n    isReadOnly,\n    itemsPerRow,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<string[]>(defaultValue);\n  const checkboxGroupClasses = classNames(\n    \"mobius\",\n    \"mobius/CheckboxGroup\",\n    className,\n    {\n      \"--is-horizontal\": orientation === \"horizontal\",\n      \"--is-vertical\": orientation === \"vertical\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n  );\n  const labelClasses = classNames({\n    \"--is-valid\": validationState === \"valid\",\n    \"--is-invalid\": validationState === \"invalid\",\n    \"--is-disabled\": isDisabled,\n  });\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    const {\n      target: { value, checked },\n    } = event;\n\n    if (!checked) {\n      setSelected(selected.filter(item => item !== value));\n    }\n\n    if (checked) {\n      setSelected([...selected, value]);\n    }\n  };\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(selected);\n    }\n  }, [selected, onChange]);\n\n  return (\n    <div\n      {...rest}\n      aria-labelledby={props[\"aria-labelledby\"] || labelId}\n      ref={ref}\n      className={checkboxGroupClasses}\n      role=\"group\"\n      style={\n        {\n          \"--checkbox-items-per-row\": itemsPerRow || Children.count(children),\n        } as React.CSSProperties\n      }\n    >\n      {label && (\n        <Label elementType=\"span\" id={labelId} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius/CheckboxWrapper\">\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            return cloneElement(child as ReactElement, {\n              isDisabled,\n              isRequired,\n              isReadOnly,\n              validationState,\n              defaultSelected: selected.includes(child.props.value),\n              onChange: handleChange,\n              \"aria-describedby\": describedBy,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      {errorMessage && (\n        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n      )}\n    </div>\n  );\n});\n"],"names":["Children","forwardRef","cloneElement","isValidElement","useId","useState","useEffect","classNames","Label","ErrorMessage","spaceDelimitedList","CheckboxGroup","props","ref","label","isDisabled","isRequired","validationState","orientation","onChange","className","errorMessage","children","defaultValue","isReadOnly","itemsPerRow","rest","selected","setSelected","checkboxGroupClasses","labelClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","labelId","handleChange","event","target","value","checked","filter","item","div","aria-labelledby","role","style","count","elementType","id","map","child","defaultSelected","includes"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,SACEA,QAAQ,EACRC,UAAU,EAEVC,YAAY,EACZC,cAAc,EACdC,KAAK,EAELC,QAAQ,EACRC,SAAS,QACJ,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAQ3C,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE,OAAO,MAAMC,8BAGTV,WAAW,CAACW,OAA2BC;IACzC,MAAM,EACJC,KAAK,EACLC,aAAa,KAAK,EAClBC,UAAU,EACVC,eAAe,EACfC,cAAc,UAAU,EACxBC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,QAAQ,EACRC,eAAe,EAAE,EACjBC,UAAU,EACVC,WAAW,EACX,GAAGC,MACJ,GAAGd;IACJ,MAAM,CAACe,UAAUC,YAAY,GAAGvB,SAAmBkB;IACnD,MAAMM,uBAAuBtB,WAC3B,UACA,wBACAa,WACA;QACE,mBAAmBF,gBAAgB;QACnC,iBAAiBA,gBAAgB;QACjC,iBAAiB,OAAOF,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEF,MAAMc,eAAevB,WAAW;QAC9B,cAAcU,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiBF;IACnB;IACA,MAAMgB,iBAAiB3B;IACvB,MAAM4B,yBAAyBX,eAAeU,iBAAiBE;IAC/D,MAAMC,cAAcxB,mBAAmB;QACrCsB;QACApB,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAMuB,UAAU/B;IAEhB,MAAMgC,eAAe,CAACC;QACpB,MAAM,EACJC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,EAAE,EAC3B,GAAGH;QAEJ,IAAI,CAACG,SAAS;YACZZ,YAAYD,SAASc,MAAM,CAACC,CAAAA,OAAQA,SAASH;QAC/C;QAEA,IAAIC,SAAS;YACXZ,YAAY;mBAAID;gBAAUY;aAAM;QAClC;IACF;IAEAjC,UAAU;QACR,IAAIa,UAAU;YACZA,SAASQ;QACX;IACF,GAAG;QAACA;QAAUR;KAAS;IAEvB,qBACE,MAACwB;QACE,GAAGjB,IAAI;QACRkB,mBAAiBhC,KAAK,CAAC,kBAAkB,IAAIuB;QAC7CtB,KAAKA;QACLO,WAAWS;QACXgB,MAAK;QACLC,OACE;YACE,4BAA4BrB,eAAezB,SAAS+C,KAAK,CAACzB;QAC5D;;YAGDR,uBACC,KAACN;gBAAMwC,aAAY;gBAAOC,IAAId;gBAASf,WAAWU;0BAC/ChB;;0BAGL,KAAC6B;gBAAIvB,WAAU;0BACZpB,SAASkD,GAAG,CAAC5B,UAAU6B,CAAAA;oBACtB,kBAAIhD,eAAegD,QAAQ;wBACzB,qBAAOjD,aAAaiD,OAAuB;4BACzCpC;4BACAC;4BACAQ;4BACAP;4BACAmC,iBAAiBzB,SAAS0B,QAAQ,CAACF,MAAMvC,KAAK,CAAC2B,KAAK;4BACpDpB,UAAUiB;4BACV,oBAAoBF;wBACtB;oBACF;oBAEA,OAAOiB;gBACT;;YAED9B,8BACC,KAACZ;gBAAawC,IAAIlB;gBAAgBV,cAAcA;;;;AAIxD,GAAG"}
+{"version":3,"sources":["../../../../src/components/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  forwardRef,\n  ReactElement,\n  cloneElement,\n  isValidElement,\n  useId,\n  ChangeEvent,\n  useState,\n  useEffect,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport {\n  CheckboxElementType,\n  CheckboxGroupElementType,\n  CheckboxGroupProps,\n  CheckboxGroupRef,\n} from \"./types\";\nimport { Label } from \"../Label\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useValidationClasses } from \"../../hooks\";\n\nexport const CheckboxGroup: ForwardedRefComponent<\n  CheckboxGroupProps,\n  CheckboxGroupElementType\n> = forwardRef((props: CheckboxGroupProps, ref: CheckboxGroupRef) => {\n  const {\n    label,\n    isDisabled = false,\n    isRequired,\n    validationState,\n    isInvalid,\n    orientation = \"vertical\",\n    onChange,\n    className,\n    errorMessage,\n    children,\n    defaultValue = [],\n    isReadOnly,\n    itemsPerRow,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<string[]>(defaultValue);\n  const checkboxGroupClasses = classNames(\n    \"mobius\",\n    \"mobius/CheckboxGroup\",\n    className,\n    {\n      \"--is-horizontal\": orientation === \"horizontal\",\n      \"--is-vertical\": orientation === \"vertical\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n  );\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const labelClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    const {\n      target: { value, checked },\n    } = event;\n\n    if (!checked) {\n      setSelected(selected.filter(item => item !== value));\n    }\n\n    if (checked) {\n      setSelected([...selected, value]);\n    }\n  };\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(selected);\n    }\n  }, [selected, onChange]);\n\n  return (\n    <div\n      {...rest}\n      aria-labelledby={props[\"aria-labelledby\"] || labelId}\n      ref={ref}\n      className={checkboxGroupClasses}\n      role=\"group\"\n      style={\n        {\n          \"--checkbox-items-per-row\": itemsPerRow || Children.count(children),\n        } as React.CSSProperties\n      }\n    >\n      {label && (\n        <Label elementType=\"span\" id={labelId} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius/CheckboxWrapper\">\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            return cloneElement(child as ReactElement, {\n              isDisabled,\n              isRequired,\n              isReadOnly,\n              isInvalid,\n              defaultSelected: selected.includes(child.props.value),\n              onChange: handleChange,\n              \"aria-describedby\": describedBy,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      {errorMessage && (\n        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n      )}\n    </div>\n  );\n});\n"],"names":["Children","forwardRef","cloneElement","isValidElement","useId","useState","useEffect","classNames","Label","ErrorMessage","spaceDelimitedList","useValidationClasses","CheckboxGroup","props","ref","label","isDisabled","isRequired","validationState","isInvalid","orientation","onChange","className","errorMessage","children","defaultValue","isReadOnly","itemsPerRow","rest","selected","setSelected","checkboxGroupClasses","validationClasses","labelClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","labelId","handleChange","event","target","value","checked","filter","item","div","aria-labelledby","role","style","count","elementType","id","map","child","defaultSelected","includes"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,SACEA,QAAQ,EACRC,UAAU,EAEVC,YAAY,EACZC,cAAc,EACdC,KAAK,EAELC,QAAQ,EACRC,SAAS,QACJ,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAQ3C,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,oBAAoB,QAAQ,cAAc;AAEnD,OAAO,MAAMC,8BAGTX,WAAW,CAACY,OAA2BC;IACzC,MAAM,EACJC,KAAK,EACLC,aAAa,KAAK,EAClBC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,cAAc,UAAU,EACxBC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,QAAQ,EACRC,eAAe,EAAE,EACjBC,UAAU,EACVC,WAAW,EACX,GAAGC,MACJ,GAAGf;IACJ,MAAM,CAACgB,UAAUC,YAAY,GAAGzB,SAAmBoB;IACnD,MAAMM,uBAAuBxB,WAC3B,UACA,wBACAe,WACA;QACE,mBAAmBF,gBAAgB;QACnC,iBAAiBA,gBAAgB;QACjC,iBAAiB,OAAOH,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEF,MAAMe,oBAAoBrB,qBAAqB;QAC7CO;QACAC;IACF;IACA,MAAMc,eAAe1B,WACnB;QACE,iBAAiBS;IACnB,GACAgB;IAEF,MAAME,iBAAiB9B;IACvB,MAAM+B,yBAAyBZ,eAAeW,iBAAiBE;IAC/D,MAAMC,cAAc3B,mBAAmB;QACrCyB;QACAtB,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAMyB,UAAUlC;IAEhB,MAAMmC,eAAe,CAACC;QACpB,MAAM,EACJC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,EAAE,EAC3B,GAAGH;QAEJ,IAAI,CAACG,SAAS;YACZb,YAAYD,SAASe,MAAM,CAACC,CAAAA,OAAQA,SAASH;QAC/C;QAEA,IAAIC,SAAS;YACXb,YAAY;mBAAID;gBAAUa;aAAM;QAClC;IACF;IAEApC,UAAU;QACR,IAAIe,UAAU;YACZA,SAASQ;QACX;IACF,GAAG;QAACA;QAAUR;KAAS;IAEvB,qBACE,MAACyB;QACE,GAAGlB,IAAI;QACRmB,mBAAiBlC,KAAK,CAAC,kBAAkB,IAAIyB;QAC7CxB,KAAKA;QACLQ,WAAWS;QACXiB,MAAK;QACLC,OACE;YACE,4BAA4BtB,eAAe3B,SAASkD,KAAK,CAAC1B;QAC5D;;YAGDT,uBACC,KAACP;gBAAM2C,aAAY;gBAAOC,IAAId;gBAAShB,WAAWW;0BAC/ClB;;0BAGL,KAAC+B;gBAAIxB,WAAU;0BACZtB,SAASqD,GAAG,CAAC7B,UAAU8B,CAAAA;oBACtB,kBAAInD,eAAemD,QAAQ;wBACzB,qBAAOpD,aAAaoD,OAAuB;4BACzCtC;4BACAC;4BACAS;4BACAP;4BACAoC,iBAAiB1B,SAAS2B,QAAQ,CAACF,MAAMzC,KAAK,CAAC6B,KAAK;4BACpDrB,UAAUkB;4BACV,oBAAoBF;wBACtB;oBACF;oBAEA,OAAOiB;gBACT;;YAED/B,8BACC,KAACd;gBAAa2C,IAAIlB;gBAAgBX,cAAcA;;;;AAIxD,GAAG"}

package/dist/esm/components/Checkbox/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/types.ts"],"sourcesContent":["import { ChangeEvent, ReactNode, Ref, RefAttributes } from \"react\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport type CheckboxElementType = HTMLInputElement;\nexport type CheckboxRef = Ref<CheckboxElementType>;\n\nexport interface CheckboxProps\n  extends DOMProps,\n    RefAttributes<CheckboxElementType> {\n  className?: string;\n  // The content to display as the label.\n  label?: ReactNode;\n  errorMessage?: string;\n  /** The current value (controlled). */\n  value?: string;\n  // Whether the input is disabled.\n  isDisabled?: boolean;\n  onChange?: (event: ChangeEvent<CheckboxElementType>) => void;\n  // The default value (uncontrolled).\n  defaultSelected?: boolean;\n  // Whether the input should display its \"valid\" or \"invalid\" visual styling.\n  validationState?: \"valid\" | \"invalid\";\n  // Whether the input can be selected but not changed by the user.\n  isReadOnly?: boolean;\n  // Whether user input is required on the input before form submission.\n  isRequired?: boolean;\n  // Identifies the element that provides an error message for the object.\n  \"aria-errormessage\"?: string;\n  /**\n   * Identifies the element (or elements) that describes the object.\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * **Internal:** Do not use\n   */\n  groupDisabled?: boolean;\n  /**\n   * **Internal:** Do not use\n   */\n  selected?: string;\n  /**\n   * **Internal:** Do not use\n   */\n  setSelected?: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport type CheckboxGroupElementType = HTMLDivElement;\ninterface CheckboxGroupPropsInternal\n  extends DOMProps,\n    RefAttributes<CheckboxGroupElementType> {\n  children: ReactNode;\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  // Defines number of items to be displayed on a single row when used with orientation=\"horizontal\". Defaults to number of items in the group.\n  itemsPerRow?: number;\n  errorMessage?: string;\n  onChange?: (values: string[]) => void;\n  // Defines a string value that labels the current element.\n  // \"aria-label\"?: string;\n  // Identifies the element (or elements) that labels the current element.\n  \"aria-labelledby\"?: string;\n  // Identifies the element that provides an error message for the object.\n  // \"aria-errormessage\"?: string;\n  // Identifies the element (or elements) that describes the object.\n  \"aria-describedby\"?: string;\n  // Whether the input should display its \"valid\" or \"invalid\" visual styling.\n  validationState?: \"valid\" | \"invalid\";\n  // Whether user input is required on the input before form submission.\n  isRequired?: boolean;\n  // Whether the input is disabled.\n  isDisabled?: boolean;\n  // Whether the input can be selected but not changed by the user.\n  isReadOnly?: boolean;\n  // The default value (uncontrolled).\n  defaultValue?: string[];\n  // The content to display as the label.\n  label?: ReactNode;\n  /**\n   * The value of the radio button, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).\n   */\n  value?: string;\n}\n\ninterface HorizontalCheckboxGroupProps extends CheckboxGroupPropsInternal {\n  orientation?: \"horizontal\";\n  itemsPerRow: number;\n}\n\ninterface VerticalCheckboxGroupProps extends CheckboxGroupPropsInternal {\n  orientation?: \"vertical\";\n  itemsPerRow?: never;\n}\n\nexport type CheckboxGroupProps =\n  | HorizontalCheckboxGroupProps\n  | VerticalCheckboxGroupProps;\n\nexport type CheckboxGroupRef = Ref<CheckboxGroupElementType>;\n"],"names":[],"rangeMappings":"","mappings":"AAkGA,WAA6D"}
+{"version":3,"sources":["../../../../src/components/Checkbox/types.ts"],"sourcesContent":["import { ChangeEvent, ReactNode, Ref, RefAttributes } from \"react\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Validation } from \"../../types\";\n\nexport type CheckboxElementType = HTMLInputElement;\nexport type CheckboxRef = Ref<CheckboxElementType>;\n\nexport interface CheckboxProps\n  extends DOMProps,\n    Validation,\n    RefAttributes<CheckboxElementType> {\n  className?: string;\n  // The content to display as the label.\n  label?: ReactNode;\n  errorMessage?: string;\n  /** The current value (controlled). */\n  value?: string;\n  // Whether the input is disabled.\n  isDisabled?: boolean;\n  onChange?: (event: ChangeEvent<CheckboxElementType>) => void;\n  // The default value (uncontrolled).\n  defaultSelected?: boolean;\n  // Whether the input can be selected but not changed by the user.\n  isReadOnly?: boolean;\n  // Whether user input is required on the input before form submission.\n  isRequired?: boolean;\n  // Identifies the element that provides an error message for the object.\n  \"aria-errormessage\"?: string;\n  /**\n   * Identifies the element (or elements) that describes the object.\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * **Internal:** Do not use\n   */\n  groupDisabled?: boolean;\n  /**\n   * **Internal:** Do not use\n   */\n  selected?: string;\n  /**\n   * **Internal:** Do not use\n   */\n  setSelected?: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport type CheckboxGroupElementType = HTMLDivElement;\ninterface CheckboxGroupPropsInternal\n  extends DOMProps,\n    Validation,\n    RefAttributes<CheckboxGroupElementType> {\n  children: ReactNode;\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  // Defines number of items to be displayed on a single row when used with orientation=\"horizontal\". Defaults to number of items in the group.\n  itemsPerRow?: number;\n  errorMessage?: string;\n  onChange?: (values: string[]) => void;\n  // Defines a string value that labels the current element.\n  // \"aria-label\"?: string;\n  // Identifies the element (or elements) that labels the current element.\n  \"aria-labelledby\"?: string;\n  // Identifies the element that provides an error message for the object.\n  // \"aria-errormessage\"?: string;\n  // Identifies the element (or elements) that describes the object.\n  \"aria-describedby\"?: string;\n  // Whether user input is required on the input before form submission.\n  isRequired?: boolean;\n  // Whether the input is disabled.\n  isDisabled?: boolean;\n  // Whether the input can be selected but not changed by the user.\n  isReadOnly?: boolean;\n  // The default value (uncontrolled).\n  defaultValue?: string[];\n  // The content to display as the label.\n  label?: ReactNode;\n  /**\n   * The value of the radio button, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).\n   */\n  value?: string;\n}\n\ninterface HorizontalCheckboxGroupProps extends CheckboxGroupPropsInternal {\n  orientation?: \"horizontal\";\n  itemsPerRow: number;\n}\n\ninterface VerticalCheckboxGroupProps extends CheckboxGroupPropsInternal {\n  orientation?: \"vertical\";\n  itemsPerRow?: never;\n}\n\nexport type CheckboxGroupProps =\n  | HorizontalCheckboxGroupProps\n  | VerticalCheckboxGroupProps;\n\nexport type CheckboxGroupRef = Ref<CheckboxGroupElementType>;\n"],"names":[],"rangeMappings":"","mappings":"AAiGA,WAA6D"}