@trackunit/react-form-wizard 2.6.49 → 2.6.51-alpha-7317206cecd.0

package/index.cjs.js

@@ -58,17 +58,19 @@ const setupLibraryTranslations = () => {
     i18nLibraryTranslation.registerTranslations(translations);
 };
 
-const cvaFillSection = cssClassVarianceUtilities.cvaMerge(["flex-grow", "p-0"]);
-const cvaSidebar = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "flex-rows",
-    "overflow-x-auto",
-    "h-full",
-    "bg-white",
-    "border-r",
-    "border-neutral-200",
-    "@3xl:flex-col",
-]);
+const cvaFillSection = cssClassVarianceUtilities.cva({ base: ["flex-grow", "p-0"] });
+const cvaSidebar = cssClassVarianceUtilities.cva({
+    base: [
+        "flex",
+        "flex-rows",
+        "overflow-x-auto",
+        "h-full",
+        "bg-white",
+        "border-r",
+        "border-neutral-200",
+        "@3xl:flex-col",
+    ],
+});
 
 /**
  * Displays the sidebar with steps for the wizard.
@@ -78,7 +80,8 @@ function FormWizardSidebar({ "data-testid": dataTestId, children, className }) {
     return (jsxRuntime.jsxs("aside", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [children, jsxRuntime.jsx("div", { className: cvaFillSection() })] }));
 }
 
-const cvaFormWizardSidebarStep = cssClassVarianceUtilities.cvaMerge(["p-2", "hover:bg-neutral-200", "transition", "border-b", "border-neutral-200", "shrink-0"], {
+const cvaFormWizardSidebarStep = cssClassVarianceUtilities.cva({
+    base: ["p-2", "hover:bg-neutral-200", "transition", "border-b", "border-neutral-200", "shrink-0"],
     variants: {
         state: {
             ready: "",
@@ -97,7 +100,8 @@ const cvaFormWizardSidebarStep = cssClassVarianceUtilities.cvaMerge(["p-2", "hov
         isSubStep: false,
     },
 });
-const cvaSectionHeaderContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-2", "p-2", "rounded"], {
+const cvaSectionHeaderContainer = cssClassVarianceUtilities.cva({
+    base: ["flex", "items-center", "gap-2", "p-2", "rounded"],
     variants: {
         state: {
             ready: "",
@@ -115,10 +119,11 @@ const cvaSectionHeaderContainer = cssClassVarianceUtilities.cvaMerge(["flex", "i
         cursor: "default",
     },
 });
-const cvaHeader = cssClassVarianceUtilities.cvaMerge(["text-md"]);
-const cvaSubtitle = cssClassVarianceUtilities.cvaMerge(["text-xs", "text-neutral-500", "hidden", "@3xl:block"]);
-const cvaStepNumberContainer = cssClassVarianceUtilities.cvaMerge(["flex", "size-5", "shrink-0", "items-center", "justify-center"]);
-const cvaStepNumber = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "text-xs", "font-bold", "items-center", "size-4", "bg-neutral-100", "rounded-full"], {
+const cvaHeader = cssClassVarianceUtilities.cva({ base: ["text-md"] });
+const cvaSubtitle = cssClassVarianceUtilities.cva({ base: ["text-xs", "text-neutral-500", "hidden", "@3xl:block"] });
+const cvaStepNumberContainer = cssClassVarianceUtilities.cva({ base: ["flex", "size-5", "shrink-0", "items-center", "justify-center"] });
+const cvaStepNumber = cssClassVarianceUtilities.cva({
+    base: ["flex", "justify-center", "text-xs", "font-bold", "items-center", "size-4", "bg-neutral-100", "rounded-full"],
     variants: {
         state: {
             ready: "",
@@ -143,7 +148,7 @@ const cvaStepNumber = cssClassVarianceUtilities.cvaMerge(["flex", "justify-cente
         state: "ready",
     },
 });
-const cvaTitleAndDescription = cssClassVarianceUtilities.cvaMerge(["justify-center", "flex-1", "flex-col", "@3xl:flex"]); //use same container breakpoint as cvaWizardContainer so it collapses at the same time
+const cvaTitleAndDescription = cssClassVarianceUtilities.cva({ base: ["justify-center", "flex-1", "flex-col", "@3xl:flex"] }); //use same container breakpoint as cvaWizardContainer so it collapses at the same time
 
 const getStateIcon = (state) => {
     switch (state) {
@@ -164,18 +169,20 @@ const FormWizardSidebarStep = ({ stepNumber, state, basePath, title, subTitle, p
     return (jsxRuntime.jsx(reactRouter.Link, { className: cvaFormWizardSidebarStep({ state, isSubStep }), "data-testid": dataTestId ?? `form-wizard-sidebar-step-${path}`, onClick: onClickNavigate, params: (prev) => ({ ...prev, stepPath: path }), search: (prev) => ({ ...prev }), to: basePath, children: jsxRuntime.jsxs("div", { className: cvaSectionHeaderContainer({ state }), children: [jsxRuntime.jsx("div", { className: cvaStepNumberContainer(), children: stateIcon ?? (jsxRuntime.jsx("span", { className: cvaStepNumber({ state, isSubStep }), "data-testid": isSubStep ? `form-wizard-sidebar-substep` : `form-wizard-sidebar-step-number-${stepNumber}`, children: stepNumber })) }), jsxRuntime.jsxs("div", { className: cvaTitleAndDescription(), children: [jsxRuntime.jsx("h3", { className: cvaHeader(), children: title }), subTitle ? jsxRuntime.jsx("p", { className: cvaSubtitle(), children: subTitle }) : null] })] }) }));
 };
 
-const cvaFooterContainer = cssClassVarianceUtilities.cvaMerge([
-    "flex-grow-0",
-    "flex",
-    "justify-between",
-    "items-center",
-    "h-min",
-    "p-responsive-space",
-    "border-t",
-    "gap-responsive-space",
-    "bg-neutral-50",
-]);
-const cvaNavigationContainer = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2"]);
+const cvaFooterContainer = cssClassVarianceUtilities.cva({
+    base: [
+        "flex-grow-0",
+        "flex",
+        "justify-between",
+        "items-center",
+        "h-min",
+        "p-responsive-space",
+        "border-t",
+        "gap-responsive-space",
+        "bg-neutral-50",
+    ],
+});
+const cvaNavigationContainer = cssClassVarianceUtilities.cva({ base: ["flex", "gap-2"] });
 
 /**
  * The footer component for the FormWizard.
@@ -186,13 +193,9 @@ const FormWizardFooter = ({ disablePrimaryAction = false, loading = false, onCli
     return (jsxRuntime.jsxs("div", { className: cvaFooterContainer(), children: [jsxRuntime.jsx(reactComponents.Button, { "data-testid": "wizard-cancel", onClick: onClickCancel, variant: "ghost-neutral", children: t("wizard.defaults.cancel") }), jsxRuntime.jsxs("div", { className: cvaNavigationContainer(), children: [onClickBack ? (jsxRuntime.jsx(reactComponents.Button, { "data-testid": "wizard-back", onClick: onClickBack, variant: "secondary", children: t("wizard.defaults.back") })) : null, jsxRuntime.jsx(reactComponents.Button, { "data-testid": "wizard-next", disabled: disablePrimaryAction, loading: loading, type: "submit", children: primaryActionLabel ? primaryActionLabel : t("wizard.defaults.next") })] })] }));
 };
 
-const cvaFormWizardHeader = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "flex-col",
-    "p-responsive-space",
-    "border-b-neutral-200",
-    "border-b",
-]);
+const cvaFormWizardHeader = cssClassVarianceUtilities.cva({
+    base: ["flex", "flex-col", "p-responsive-space", "border-b-neutral-200", "border-b"],
+});
 
 /**
  * The header component for the FormWizard.
@@ -202,8 +205,12 @@ const FormWizardHeader = ({ title, description, className, "data-testid": dataTe
     return (jsxRuntime.jsxs("div", { className: cvaFormWizardHeader({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Heading, { variant: "secondary", children: title }), description !== undefined ? (jsxRuntime.jsx(reactComponents.Heading, { subtle: true, variant: "subtitle", children: description })) : null] }));
 };
 
-const cvaFormWizardComponentContainer = cssClassVarianceUtilities.cvaMerge(["p-responsive-space", "overflow-y-auto", "bg-neutral-50"]);
-const cvaFormWizardComponentStepForm = cssClassVarianceUtilities.cvaMerge(["grid-rows-min-fr-min", "grid", "h-full", "overflow-hidden"]);
+const cvaFormWizardComponentContainer = cssClassVarianceUtilities.cva({
+    base: ["p-responsive-space", "overflow-y-auto", "bg-neutral-50"],
+});
+const cvaFormWizardComponentStepForm = cssClassVarianceUtilities.cva({
+    base: ["grid-rows-min-fr-min", "grid", "h-full", "overflow-hidden"],
+});
 
 /**
  * A wrapper component used by the FormWizard component to render each step.
@@ -337,16 +344,18 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
                 disablePrimaryAction: isSubmitting || primaryActionDisabledByStep })] }, String(stepKey)));
 };
 
-const cvaFormWizardContainer = cssClassVarianceUtilities.cvaMerge(["h-full"]);
-const cvaFormWizardLayout = cssClassVarianceUtilities.cvaMerge([
-    "grid",
-    "h-full",
-    "grid-rows-min-fr",
-    "@3xl:grid-rows-1",
-    "@3xl:grid-cols-[240px_1fr]", //use same breakpoint for wizardSidebarSection so it collapses at the same time
-    "@4xl:grid-cols-[320px_1fr]",
-]);
-const cvaStepContainer = cssClassVarianceUtilities.cvaMerge(["h-full", "grid", "bg-white", "overflow-hidden"]);
+const cvaFormWizardContainer = cssClassVarianceUtilities.cva({ base: ["h-full"] });
+const cvaFormWizardLayout = cssClassVarianceUtilities.cva({
+    base: [
+        "grid",
+        "h-full",
+        "grid-rows-min-fr",
+        "@3xl:grid-rows-1",
+        "@3xl:grid-cols-[240px_1fr]", //use same breakpoint for wizardSidebarSection so it collapses at the same time
+        "@4xl:grid-cols-[320px_1fr]",
+    ],
+});
+const cvaStepContainer = cssClassVarianceUtilities.cva({ base: ["h-full", "grid", "bg-white", "overflow-hidden"] });
 
 /**
  * The `<FormWizard>` component renders multi-step forms with a sidebar navigation.

package/index.esm.js

@@ -3,7 +3,7 @@ import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-l
 import { Link, useNavigate, useParams } from '@tanstack/react-router';
 import { objectKeys, doNothing, objectFromEntries, objectEntries } from '@trackunit/shared-utils';
 import { useState, useEffect, useCallback, useMemo } from 'react';
-import { cvaMerge } from '@trackunit/css-class-variance-utilities';
+import { cva } from '@trackunit/css-class-variance-utilities';
 import { Icon, Button, Heading } from '@trackunit/react-components';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm, useWatch, FormProvider } from 'react-hook-form';
@@ -56,17 +56,19 @@ const setupLibraryTranslations = () => {
     registerTranslations(translations);
 };
 
-const cvaFillSection = cvaMerge(["flex-grow", "p-0"]);
-const cvaSidebar = cvaMerge([
-    "flex",
-    "flex-rows",
-    "overflow-x-auto",
-    "h-full",
-    "bg-white",
-    "border-r",
-    "border-neutral-200",
-    "@3xl:flex-col",
-]);
+const cvaFillSection = cva({ base: ["flex-grow", "p-0"] });
+const cvaSidebar = cva({
+    base: [
+        "flex",
+        "flex-rows",
+        "overflow-x-auto",
+        "h-full",
+        "bg-white",
+        "border-r",
+        "border-neutral-200",
+        "@3xl:flex-col",
+    ],
+});
 
 /**
  * Displays the sidebar with steps for the wizard.
@@ -76,7 +78,8 @@ function FormWizardSidebar({ "data-testid": dataTestId, children, className }) {
     return (jsxs("aside", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [children, jsx("div", { className: cvaFillSection() })] }));
 }
 
-const cvaFormWizardSidebarStep = cvaMerge(["p-2", "hover:bg-neutral-200", "transition", "border-b", "border-neutral-200", "shrink-0"], {
+const cvaFormWizardSidebarStep = cva({
+    base: ["p-2", "hover:bg-neutral-200", "transition", "border-b", "border-neutral-200", "shrink-0"],
     variants: {
         state: {
             ready: "",
@@ -95,7 +98,8 @@ const cvaFormWizardSidebarStep = cvaMerge(["p-2", "hover:bg-neutral-200", "trans
         isSubStep: false,
     },
 });
-const cvaSectionHeaderContainer = cvaMerge(["flex", "items-center", "gap-2", "p-2", "rounded"], {
+const cvaSectionHeaderContainer = cva({
+    base: ["flex", "items-center", "gap-2", "p-2", "rounded"],
     variants: {
         state: {
             ready: "",
@@ -113,10 +117,11 @@ const cvaSectionHeaderContainer = cvaMerge(["flex", "items-center", "gap-2", "p-
         cursor: "default",
     },
 });
-const cvaHeader = cvaMerge(["text-md"]);
-const cvaSubtitle = cvaMerge(["text-xs", "text-neutral-500", "hidden", "@3xl:block"]);
-const cvaStepNumberContainer = cvaMerge(["flex", "size-5", "shrink-0", "items-center", "justify-center"]);
-const cvaStepNumber = cvaMerge(["flex", "justify-center", "text-xs", "font-bold", "items-center", "size-4", "bg-neutral-100", "rounded-full"], {
+const cvaHeader = cva({ base: ["text-md"] });
+const cvaSubtitle = cva({ base: ["text-xs", "text-neutral-500", "hidden", "@3xl:block"] });
+const cvaStepNumberContainer = cva({ base: ["flex", "size-5", "shrink-0", "items-center", "justify-center"] });
+const cvaStepNumber = cva({
+    base: ["flex", "justify-center", "text-xs", "font-bold", "items-center", "size-4", "bg-neutral-100", "rounded-full"],
     variants: {
         state: {
             ready: "",
@@ -141,7 +146,7 @@ const cvaStepNumber = cvaMerge(["flex", "justify-center", "text-xs", "font-bold"
         state: "ready",
     },
 });
-const cvaTitleAndDescription = cvaMerge(["justify-center", "flex-1", "flex-col", "@3xl:flex"]); //use same container breakpoint as cvaWizardContainer so it collapses at the same time
+const cvaTitleAndDescription = cva({ base: ["justify-center", "flex-1", "flex-col", "@3xl:flex"] }); //use same container breakpoint as cvaWizardContainer so it collapses at the same time
 
 const getStateIcon = (state) => {
     switch (state) {
@@ -162,18 +167,20 @@ const FormWizardSidebarStep = ({ stepNumber, state, basePath, title, subTitle, p
     return (jsx(Link, { className: cvaFormWizardSidebarStep({ state, isSubStep }), "data-testid": dataTestId ?? `form-wizard-sidebar-step-${path}`, onClick: onClickNavigate, params: (prev) => ({ ...prev, stepPath: path }), search: (prev) => ({ ...prev }), to: basePath, children: jsxs("div", { className: cvaSectionHeaderContainer({ state }), children: [jsx("div", { className: cvaStepNumberContainer(), children: stateIcon ?? (jsx("span", { className: cvaStepNumber({ state, isSubStep }), "data-testid": isSubStep ? `form-wizard-sidebar-substep` : `form-wizard-sidebar-step-number-${stepNumber}`, children: stepNumber })) }), jsxs("div", { className: cvaTitleAndDescription(), children: [jsx("h3", { className: cvaHeader(), children: title }), subTitle ? jsx("p", { className: cvaSubtitle(), children: subTitle }) : null] })] }) }));
 };
 
-const cvaFooterContainer = cvaMerge([
-    "flex-grow-0",
-    "flex",
-    "justify-between",
-    "items-center",
-    "h-min",
-    "p-responsive-space",
-    "border-t",
-    "gap-responsive-space",
-    "bg-neutral-50",
-]);
-const cvaNavigationContainer = cvaMerge(["flex", "gap-2"]);
+const cvaFooterContainer = cva({
+    base: [
+        "flex-grow-0",
+        "flex",
+        "justify-between",
+        "items-center",
+        "h-min",
+        "p-responsive-space",
+        "border-t",
+        "gap-responsive-space",
+        "bg-neutral-50",
+    ],
+});
+const cvaNavigationContainer = cva({ base: ["flex", "gap-2"] });
 
 /**
  * The footer component for the FormWizard.
@@ -184,13 +191,9 @@ const FormWizardFooter = ({ disablePrimaryAction = false, loading = false, onCli
     return (jsxs("div", { className: cvaFooterContainer(), children: [jsx(Button, { "data-testid": "wizard-cancel", onClick: onClickCancel, variant: "ghost-neutral", children: t("wizard.defaults.cancel") }), jsxs("div", { className: cvaNavigationContainer(), children: [onClickBack ? (jsx(Button, { "data-testid": "wizard-back", onClick: onClickBack, variant: "secondary", children: t("wizard.defaults.back") })) : null, jsx(Button, { "data-testid": "wizard-next", disabled: disablePrimaryAction, loading: loading, type: "submit", children: primaryActionLabel ? primaryActionLabel : t("wizard.defaults.next") })] })] }));
 };
 
-const cvaFormWizardHeader = cvaMerge([
-    "flex",
-    "flex-col",
-    "p-responsive-space",
-    "border-b-neutral-200",
-    "border-b",
-]);
+const cvaFormWizardHeader = cva({
+    base: ["flex", "flex-col", "p-responsive-space", "border-b-neutral-200", "border-b"],
+});
 
 /**
  * The header component for the FormWizard.
@@ -200,8 +203,12 @@ const FormWizardHeader = ({ title, description, className, "data-testid": dataTe
     return (jsxs("div", { className: cvaFormWizardHeader({ className }), "data-testid": dataTestId, children: [jsx(Heading, { variant: "secondary", children: title }), description !== undefined ? (jsx(Heading, { subtle: true, variant: "subtitle", children: description })) : null] }));
 };
 
-const cvaFormWizardComponentContainer = cvaMerge(["p-responsive-space", "overflow-y-auto", "bg-neutral-50"]);
-const cvaFormWizardComponentStepForm = cvaMerge(["grid-rows-min-fr-min", "grid", "h-full", "overflow-hidden"]);
+const cvaFormWizardComponentContainer = cva({
+    base: ["p-responsive-space", "overflow-y-auto", "bg-neutral-50"],
+});
+const cvaFormWizardComponentStepForm = cva({
+    base: ["grid-rows-min-fr-min", "grid", "h-full", "overflow-hidden"],
+});
 
 /**
  * A wrapper component used by the FormWizard component to render each step.
@@ -335,16 +342,18 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
                 disablePrimaryAction: isSubmitting || primaryActionDisabledByStep })] }, String(stepKey)));
 };
 
-const cvaFormWizardContainer = cvaMerge(["h-full"]);
-const cvaFormWizardLayout = cvaMerge([
-    "grid",
-    "h-full",
-    "grid-rows-min-fr",
-    "@3xl:grid-rows-1",
-    "@3xl:grid-cols-[240px_1fr]", //use same breakpoint for wizardSidebarSection so it collapses at the same time
-    "@4xl:grid-cols-[320px_1fr]",
-]);
-const cvaStepContainer = cvaMerge(["h-full", "grid", "bg-white", "overflow-hidden"]);
+const cvaFormWizardContainer = cva({ base: ["h-full"] });
+const cvaFormWizardLayout = cva({
+    base: [
+        "grid",
+        "h-full",
+        "grid-rows-min-fr",
+        "@3xl:grid-rows-1",
+        "@3xl:grid-cols-[240px_1fr]", //use same breakpoint for wizardSidebarSection so it collapses at the same time
+        "@4xl:grid-cols-[320px_1fr]",
+    ],
+});
+const cvaStepContainer = cva({ base: ["h-full", "grid", "bg-white", "overflow-hidden"] });
 
 /**
  * The `<FormWizard>` component renders multi-step forms with a sidebar navigation.

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@trackunit/react-form-wizard",
-  "version": "2.6.49",
+  "version": "2.6.51-alpha-7317206cecd.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
     "zod": "^3.25.76",
     "@hookform/resolvers": "^3.3.4",
     "@tanstack/router-core": "1.114.29",
-    "@trackunit/shared-utils": "1.16.32",
-    "@trackunit/css-class-variance-utilities": "1.14.29",
-    "@trackunit/react-components": "2.13.0",
-    "@trackunit/i18n-library-translation": "2.4.41"
+    "@trackunit/shared-utils": "1.16.34-alpha-7317206cecd.0",
+    "@trackunit/css-class-variance-utilities": "2.0.1-alpha-7317206cecd.0",
+    "@trackunit/react-components": "2.13.2-alpha-7317206cecd.0",
+    "@trackunit/i18n-library-translation": "2.4.43-alpha-7317206cecd.0"
   },
   "engines": {
     "node": ">=24.x",

package/src/FormWizard/FormWizard.variants.d.ts

@@ -1,3 +1,18 @@
-export declare const cvaFormWizardContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaFormWizardLayout: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaStepContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaFormWizardContainer: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaFormWizardLayout: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaStepContainer: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;

package/src/FormWizardFooter/FormWizardFooter.variants.d.ts

@@ -1,2 +1,12 @@
-export declare const cvaFooterContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaNavigationContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaFooterContainer: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaNavigationContainer: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;

package/src/FormWizardHeader/FormWizardHeader.variants.d.ts

@@ -1 +1,6 @@
-export declare const cvaFormWizardHeader: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaFormWizardHeader: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;

package/src/FormWizardSidebar/FormWizardSidebar.variants.d.ts

@@ -1,2 +1,12 @@
-export declare const cvaFillSection: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaSidebar: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaFillSection: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaSidebar: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;

package/src/FormWizardSidebarStep/FormWizardSidebarStep.variants.d.ts

@@ -1,16 +1,175 @@
-export declare const cvaFormWizardSidebarStep: (props?: ({
-    state?: "active" | "done" | "invalid" | "disabled" | "ready" | null | undefined;
-    isSubStep?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const cvaSectionHeaderContainer: (props?: ({
-    state?: "active" | "done" | "invalid" | "disabled" | "ready" | null | undefined;
-    cursor?: "default" | "withCursor" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const cvaHeader: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaSubtitle: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaStepNumberContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaStepNumber: (props?: ({
-    state?: "active" | "done" | "invalid" | "disabled" | "ready" | null | undefined;
-    isSubStep?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const cvaTitleAndDescription: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaFormWizardSidebarStep: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        state: {
+            ready: string;
+            active: string;
+            done: string;
+            invalid: string;
+            disabled: string;
+        };
+        isSubStep: {
+            true: string;
+            false: string;
+        };
+    };
+    defaultVariants: {
+        state: "ready";
+        isSubStep: false;
+    };
+}, "defaultVariants"> & {
+    variants: {
+        state: {
+            ready: string;
+            active: string;
+            done: string;
+            invalid: string;
+            disabled: string;
+        };
+        isSubStep: {
+            true: string;
+            false: string;
+        };
+    };
+    defaultVariants: Omit<{}, "state" | "isSubStep"> & {
+        state: "ready";
+        isSubStep: false;
+    };
+}, {
+    state: {
+        ready: string;
+        active: string;
+        done: string;
+        invalid: string;
+        disabled: string;
+    };
+    isSubStep: {
+        true: string;
+        false: string;
+    };
+}>;
+export declare const cvaSectionHeaderContainer: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        state: {
+            ready: string;
+            active: string;
+            done: string;
+            invalid: string;
+            disabled: string;
+        };
+        cursor: {
+            withCursor: string;
+            default: string;
+        };
+    };
+    defaultVariants: {
+        cursor: "default";
+    };
+}, "defaultVariants"> & {
+    variants: {
+        state: {
+            ready: string;
+            active: string;
+            done: string;
+            invalid: string;
+            disabled: string;
+        };
+        cursor: {
+            withCursor: string;
+            default: string;
+        };
+    };
+    defaultVariants: Omit<{}, "cursor"> & {
+        cursor: "default";
+    };
+}, {
+    state: {
+        ready: string;
+        active: string;
+        done: string;
+        invalid: string;
+        disabled: string;
+    };
+    cursor: {
+        withCursor: string;
+        default: string;
+    };
+}>;
+export declare const cvaHeader: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaSubtitle: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaStepNumberContainer: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaStepNumber: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        state: {
+            ready: string;
+            active: string;
+            done: string;
+            invalid: string;
+            disabled: string;
+        };
+        isSubStep: {
+            true: string;
+            false: string;
+        };
+    };
+    compoundVariants: {
+        state: "active";
+        isSubStep: true;
+        className: "border border-neutral-400 bg-white";
+    }[];
+    defaultVariants: {
+        state: "ready";
+    };
+}, "defaultVariants"> & {
+    variants: {
+        state: {
+            ready: string;
+            active: string;
+            done: string;
+            invalid: string;
+            disabled: string;
+        };
+        isSubStep: {
+            true: string;
+            false: string;
+        };
+    };
+    defaultVariants: Omit<{}, "state"> & {
+        state: "ready";
+    };
+}, {
+    state: {
+        ready: string;
+        active: string;
+        done: string;
+        invalid: string;
+        disabled: string;
+    };
+    isSubStep: {
+        true: string;
+        false: string;
+    };
+}>;
+export declare const cvaTitleAndDescription: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;

package/src/FormWizardStepWrapper/FormWizardStepWrapper.variants.d.ts

@@ -1,2 +1,12 @@
-export declare const cvaFormWizardComponentContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaFormWizardComponentStepForm: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaFormWizardComponentContainer: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaFormWizardComponentStepForm: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;