@povio/ui 2.3.2 → 3.0.0

package/dist/components/overlays/Tooltip/tooltip.cva.js

@@ -1,32 +1,44 @@
-import { cva } from "class-variance-authority";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 //#region src/components/overlays/Tooltip/tooltip.cva.ts
-var tooltipCva = cva(["group max-w-64 rounded-tooltip-rounding-default px-tooltip-side-default py-tooltip-height-default shadow-2"], {
-	variants: { color: {
-		default: ["bg-interactive-contained-secondary-idle"],
-		error: ["w-max bg-elevation-fill-error-1"]
-	} },
-	defaultVariants: { color: "default" }
+var tooltipDefinition = UIOverrides.defineConfig({
+	base: ["group max-w-64 rounded-tooltip-rounding-default px-tooltip-side-default py-tooltip-height-default shadow-2"],
+	config: {
+		variants: { color: {
+			default: ["bg-interactive-contained-secondary-idle"],
+			error: ["w-max bg-elevation-fill-error-1"]
+		} },
+		defaultVariants: { color: "default" }
+	}
 });
-var tooltipPointerHorizontalCva = cva(["h-2-5 w-5 group-placement-left:hidden group-placement-right:hidden group-placement-top:rotate-180"], {
-	variants: { color: {
-		default: ["text-interactive-contained-secondary-idle"],
-		error: ["text-elevation-fill-error-1"]
-	} },
-	defaultVariants: { color: "default" }
+var tooltipPointerHorizontalDefinition = UIOverrides.defineConfig({
+	base: ["h-2-5 w-5 group-placement-left:hidden group-placement-right:hidden group-placement-top:rotate-180"],
+	config: {
+		variants: { color: {
+			default: ["text-interactive-contained-secondary-idle"],
+			error: ["text-elevation-fill-error-1"]
+		} },
+		defaultVariants: { color: "default" }
+	}
 });
-var tooltipPointerVerticalCva = cva(["h-5 w-2-5 group-placement-bottom:hidden group-placement-top:hidden group-placement-left:rotate-180"], {
-	variants: { color: {
-		default: ["text-interactive-contained-secondary-idle"],
-		error: ["text-elevation-fill-error-1"]
-	} },
-	defaultVariants: { color: "default" }
+var tooltipPointerVerticalDefinition = UIOverrides.defineConfig({
+	base: ["h-5 w-2-5 group-placement-bottom:hidden group-placement-top:hidden group-placement-left:rotate-180"],
+	config: {
+		variants: { color: {
+			default: ["text-interactive-contained-secondary-idle"],
+			error: ["text-elevation-fill-error-1"]
+		} },
+		defaultVariants: { color: "default" }
+	}
 });
-var tooltipTextCva = cva([], {
-	variants: { color: {
-		default: ["text-interactive-contained-secondary-on-idle"],
-		error: ["text-text-error-inverted-1"]
-	} },
-	defaultVariants: { color: "default" }
+var tooltipTextDefinition = UIOverrides.defineConfig({
+	base: [],
+	config: {
+		variants: { color: {
+			default: ["text-interactive-contained-secondary-on-idle"],
+			error: ["text-text-error-inverted-1"]
+		} },
+		defaultVariants: { color: "default" }
+	}
 });
 //#endregion
-export { tooltipCva, tooltipPointerHorizontalCva, tooltipPointerVerticalCva, tooltipTextCva };
+export { tooltipDefinition, tooltipPointerHorizontalDefinition, tooltipPointerVerticalDefinition, tooltipTextDefinition };

package/dist/components/segment/Segment.js

@@ -1,6 +1,6 @@
-import { UIStyle } from "../../config/uiStyle.context.js";
+import { UIOverrides } from "../../config/uiOverrides.context.js";
 import { FormField } from "../inputs/FormField/FormField.js";
-import { segmentCva } from "./segment.cva.js";
+import { segmentDefinition } from "./segment.cva.js";
 import { SegmentItem } from "./SegmentItem.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -20,7 +20,7 @@ var SegmentBase = ({ className, items, error, onChange, value, defaultValue, seg
 	const buttonGroupRef = useRef(null);
 	const state = useToggleGroupState(props);
 	const { groupProps } = useToggleButtonGroup(props, state, buttonGroupRef);
-	const segmentCva$1 = UIStyle.useCva("segment.cva", segmentCva);
+	const segmentCva = UIOverrides.useCva("segment.cva", segmentDefinition);
 	const formFieldProps = {
 		error,
 		label: "",
@@ -42,7 +42,7 @@ var SegmentBase = ({ className, items, error, onChange, value, defaultValue, seg
 			...groupProps,
 			ref: buttonGroupRef,
 			onSelectionChange,
-			className: segmentCva$1({
+			className: segmentCva({
 				...props,
 				className
 			}),

package/dist/components/segment/SegmentItem.js

@@ -1,17 +1,17 @@
-import { UIStyle } from "../../config/uiStyle.context.js";
+import { UIOverrides } from "../../config/uiOverrides.context.js";
 import { Typography } from "../text/Typography/Typography.js";
-import { segmentItemCva } from "./segment.cva.js";
+import { segmentItemDefinition } from "./segment.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ToggleButton } from "react-aria-components";
 //#region src/components/segment/SegmentItem.tsx
 var SegmentItem = ({ label, icon, id, isDisabled, className, ...props }) => {
 	const IconComponent = icon;
 	const iconOnly = !!(icon && !label);
-	const segmentItemCva$1 = UIStyle.useCva("segment.itemCva", segmentItemCva);
+	const segmentItemCva = UIOverrides.useCva("segment.itemCva", segmentItemDefinition);
 	return /* @__PURE__ */ jsxs(ToggleButton, {
 		...props,
 		id,
-		className: segmentItemCva$1({
+		className: segmentItemCva({
 			iconOnly,
 			className
 		}),

package/dist/components/segment/segment.cva.d.ts

@@ -1,9 +1,20 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const segmentCva: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
-export interface SegmentVariantProps extends VariantProps<typeof segmentCva> {
+import { UIOverrides } from '../../config/uiOverrides.context';
+export declare const segmentDefinition: {
+    base: string[];
+    config?: import("../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+};
+export type SegmentConfig = NonNullable<typeof segmentDefinition.config>;
+export interface SegmentVariantProps extends UIOverrides.VariantProps<SegmentConfig> {
 }
-export declare const segmentItemCva: (props?: ({
-    iconOnly?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface SegmentItemVariantProps extends VariantProps<typeof segmentItemCva> {
+export declare const segmentItemDefinition: {
+    base: string[];
+    config: import("../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly iconOnly: {
+            readonly true: "px-segmented-control-height-segment";
+            readonly false: "px-segmented-control-side-segment";
+        };
+    }>;
+};
+export type SegmentItemConfig = NonNullable<typeof segmentItemDefinition.config>;
+export interface SegmentItemVariantProps extends UIOverrides.VariantProps<SegmentItemConfig> {
 }

package/dist/components/segment/segment.cva.js

@@ -1,27 +1,30 @@
-import { cva } from "class-variance-authority";
+import { UIOverrides } from "../../config/uiOverrides.context.js";
 //#region src/components/segment/segment.cva.ts
-var segmentCva = cva([
+var segmentDefinition = UIOverrides.defineConfig({ base: [
 	"group/segment grid w-fit items-center gap-segmented-control-side-segmented-control p-segmented-control-side-segmented-control",
 	"bg-elevation-fill-default-3",
 	"rounded-segmented-control-rounding-segmented-control"
-]);
-var segmentItemCva = cva([
-	"flex items-center justify-center gap-segmented-control-gap-content-icon-to-text transition-all duration-200",
-	"border border-support-transparent-outline",
-	"py-segmented-control-height-segment",
-	"rounded-segmented-control-rounding-segment",
-	"text-interactive-subtle-secondary-on-idle",
-	"hover:border-interactive-subtle-secondary-hover hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
-	"pressed:border-interactive-subtle-secondary-pressed pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
-	"disabled:border-support-transparent-outline disabled:text-interactive-subtle-secondary-on-disabled",
-	"selected:border-interactive-subtle-secondary-toggled-idle selected:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
-	"selected:disabled:border-interactive-subtle-secondary-toggled-disabled selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled"
-], {
-	variants: { iconOnly: {
-		true: "px-segmented-control-height-segment",
-		false: "px-segmented-control-side-segment"
-	} },
-	defaultVariants: { iconOnly: false }
+] });
+var segmentItemDefinition = UIOverrides.defineConfig({
+	base: [
+		"flex items-center justify-center gap-segmented-control-gap-content-icon-to-text transition-all duration-200",
+		"border border-support-transparent-outline",
+		"py-segmented-control-height-segment",
+		"rounded-segmented-control-rounding-segment",
+		"text-interactive-subtle-secondary-on-idle",
+		"hover:border-interactive-subtle-secondary-hover hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
+		"pressed:border-interactive-subtle-secondary-pressed pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
+		"disabled:border-support-transparent-outline disabled:text-interactive-subtle-secondary-on-disabled",
+		"selected:border-interactive-subtle-secondary-toggled-idle selected:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
+		"selected:disabled:border-interactive-subtle-secondary-toggled-disabled selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled"
+	],
+	config: {
+		variants: { iconOnly: {
+			true: "px-segmented-control-height-segment",
+			false: "px-segmented-control-side-segment"
+		} },
+		defaultVariants: { iconOnly: false }
+	}
 });
 //#endregion
-export { segmentCva, segmentItemCva };
+export { segmentDefinition, segmentItemDefinition };

package/dist/components/shared/popover.cva.d.ts

@@ -1,4 +1,8 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const popover: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
-export interface PopoverVariantProps extends VariantProps<typeof popover> {
+import { UIOverrides } from '../../config/uiOverrides.context';
+export declare const popoverDefinition: {
+    base: string[];
+    config?: import("../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+};
+export type PopoverConfig = NonNullable<typeof popoverDefinition.config>;
+export interface PopoverVariantProps extends UIOverrides.VariantProps<PopoverConfig> {
 }

package/dist/components/shared/popover.cva.js

@@ -1,5 +1,5 @@
-import { cva } from "class-variance-authority";
+import { UIOverrides } from "../../config/uiOverrides.context.js";
 //#region src/components/shared/popover.cva.ts
-var popover = cva("rounded-list-rounding-dropdown border border-elevation-outline-default-1 border-solid bg-elevation-fill-default-1 shadow-5 outline-none");
+var popoverDefinition = UIOverrides.defineConfig({ base: ["rounded-list-rounding-dropdown border border-elevation-outline-default-1 border-solid bg-elevation-fill-default-1 shadow-5 outline-none"] });
 //#endregion
-export { popover };
+export { popoverDefinition };

package/dist/components/status/Alert/Alert.js

@@ -1,14 +1,14 @@
-import { UIStyle } from "../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { Typography } from "../../text/Typography/Typography.js";
 import { Loader } from "../Loader/Loader.js";
-import { alert } from "./alert.cva.js";
-import { statusIcon, statusSeparator } from "../shared/status.cva.js";
+import { alertDefinition } from "./alert.cva.js";
+import { statusIconDefinition, statusSeparatorDefinition } from "../shared/status.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/status/Alert/Alert.tsx
 var Alert = ({ variant, color, text, isLoading = false, rightContent, hasSeparator, icon: Icon, className }) => {
-	const alertCva = UIStyle.useCva("alert.cva", alert);
-	const iconCva = UIStyle.useCva("status.iconCva", statusIcon);
-	const separatorCva = UIStyle.useCva("status.separatorCva", statusSeparator);
+	const alertCva = UIOverrides.useCva("alert.cva", alertDefinition);
+	const iconCva = UIOverrides.useCva("status.iconCva", statusIconDefinition);
+	const separatorCva = UIOverrides.useCva("status.separatorCva", statusSeparatorDefinition);
 	return /* @__PURE__ */ jsx("div", {
 		className: alertCva({
 			variant,

package/dist/components/status/Alert/alert.cva.d.ts

@@ -1,7 +1,19 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const alert: (props?: ({
-    variant?: "contained" | "outlined" | null | undefined;
-    color?: "success" | "warning" | "error" | "neutral" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface AlertVariantProps extends VariantProps<typeof alert> {
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const alertDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly variant: {
+            readonly outlined: "border bg-elevation-fill-default-1 text-text-default-1";
+            readonly contained: "text-text-inverted-1";
+        };
+        readonly color: {
+            readonly neutral: "";
+            readonly success: "";
+            readonly warning: "";
+            readonly error: "";
+        };
+    }>;
+};
+export type AlertConfig = NonNullable<typeof alertDefinition.config>;
+export interface AlertVariantProps extends UIOverrides.VariantProps<AlertConfig> {
 }

package/dist/components/status/Alert/alert.cva.js

@@ -1,64 +1,67 @@
-import { cva } from "class-variance-authority";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 //#region src/components/status/Alert/alert.cva.ts
-var alert = cva("min-h-0 overflow-hidden rounded-alert-rounding-default p-0", {
-	variants: {
-		variant: {
-			outlined: "border bg-elevation-fill-default-1 text-text-default-1",
-			contained: "text-text-inverted-1"
+var alertDefinition = UIOverrides.defineConfig({
+	base: ["min-h-0 overflow-hidden rounded-alert-rounding-default p-0"],
+	config: {
+		variants: {
+			variant: {
+				outlined: "border bg-elevation-fill-default-1 text-text-default-1",
+				contained: "text-text-inverted-1"
+			},
+			color: {
+				neutral: "",
+				success: "",
+				warning: "",
+				error: ""
+			}
 		},
-		color: {
-			neutral: "",
-			success: "",
-			warning: "",
-			error: ""
-		}
-	},
-	compoundVariants: [
-		{
-			variant: "outlined",
-			color: "neutral",
-			className: "border-elevation-outline-default-1"
-		},
-		{
+		compoundVariants: [
+			{
+				variant: "outlined",
+				color: "neutral",
+				className: "border-elevation-outline-default-1"
+			},
+			{
+				variant: "outlined",
+				color: "success",
+				className: "border-elevation-outline-success-1"
+			},
+			{
+				variant: "outlined",
+				color: "warning",
+				className: "border-elevation-outline-warning-1"
+			},
+			{
+				variant: "outlined",
+				color: "error",
+				className: "border-elevation-outline-error-1"
+			},
+			{
+				variant: "contained",
+				color: "neutral",
+				className: "bg-elevation-fill-inverted-1"
+			},
+			{
+				variant: "contained",
+				color: "success",
+				className: "bg-elevation-fill-success-1"
+			},
+			{
+				variant: "contained",
+				color: "warning",
+				className: "bg-elevation-fill-warning-1"
+			},
+			{
+				variant: "contained",
+				color: "error",
+				className: "bg-elevation-fill-error-1"
+			}
+		],
+		defaultVariants: {
 			variant: "outlined",
-			color: "success",
-			className: "border-elevation-outline-success-1"
-		},
-		{
-			variant: "outlined",
-			color: "warning",
-			className: "border-elevation-outline-warning-1"
-		},
-		{
-			variant: "outlined",
-			color: "error",
-			className: "border-elevation-outline-error-1"
-		},
-		{
-			variant: "contained",
-			color: "neutral",
-			className: "bg-elevation-fill-inverted-1"
-		},
-		{
-			variant: "contained",
-			color: "success",
-			className: "bg-elevation-fill-success-1"
-		},
-		{
-			variant: "contained",
-			color: "warning",
-			className: "bg-elevation-fill-warning-1"
-		},
-		{
-			variant: "contained",
-			color: "error",
-			className: "bg-elevation-fill-error-1"
+			color: "neutral"
 		}
-	],
-	defaultVariants: {
-		variant: "outlined",
-		color: "neutral"
 	}
 });
 //#endregion
-export { alert };
+export { alertDefinition };

package/dist/components/status/Loader/loader.cva.d.ts

@@ -1,9 +1,28 @@
-import { VariantProps } from 'class-variance-authority';
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const loaderWrapperDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly size: {
+            readonly default: "size-6";
+            readonly l: "size-16";
+        };
+    }>;
+};
 export declare const loaderWrapper: (props?: ({
-    size?: "default" | "l" | null | undefined;
+    readonly size?: "default" | "l" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const loaderDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly size: {
+            readonly default: "size-3-5";
+            readonly l: "size-8";
+        };
+    }>;
+};
 export declare const loader: (props?: ({
-    size?: "default" | "l" | null | undefined;
+    readonly size?: "default" | "l" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface LoaderVariantProps extends VariantProps<typeof loader> {
+export type LoaderConfig = NonNullable<typeof loaderDefinition.config>;
+export interface LoaderVariantProps extends UIOverrides.VariantProps<LoaderConfig> {
 }

package/dist/components/status/Loader/loader.cva.js

@@ -1,18 +1,27 @@
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { cva } from "class-variance-authority";
 //#region src/components/status/Loader/loader.cva.ts
-var loaderWrapper = cva("flex items-center justify-center", {
-	variants: { size: {
-		default: "size-6",
-		l: "size-16"
-	} },
-	defaultVariants: { size: "default" }
+var loaderWrapperDefinition = UIOverrides.defineConfig({
+	base: ["flex items-center justify-center"],
+	config: {
+		variants: { size: {
+			default: "size-6",
+			l: "size-16"
+		} },
+		defaultVariants: { size: "default" }
+	}
 });
-var loader = cva("animate-loader-spin", {
-	variants: { size: {
-		default: "size-3-5",
-		l: "size-8"
-	} },
-	defaultVariants: { size: "default" }
+var loaderWrapper = cva(loaderWrapperDefinition.base, loaderWrapperDefinition.config);
+var loaderDefinition = UIOverrides.defineConfig({
+	base: ["animate-loader-spin"],
+	config: {
+		variants: { size: {
+			default: "size-3-5",
+			l: "size-8"
+		} },
+		defaultVariants: { size: "default" }
+	}
 });
+var loader = cva(loaderDefinition.base, loaderDefinition.config);
 //#endregion
-export { loader, loaderWrapper };
+export { loader, loaderDefinition, loaderWrapper, loaderWrapperDefinition };

package/dist/components/status/Toast/Toast.js

@@ -1,20 +1,19 @@
-import { UIStyle } from "../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { Typography } from "../../text/Typography/Typography.js";
 import { Loader } from "../Loader/Loader.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { Button } from "../../buttons/Button/Button.js";
-import { statusIcon, statusSeparator } from "../shared/status.cva.js";
-import { buttonColorVariant, toast as toast$1, toastContainer, toastWrapper } from "./toast.cva.js";
+import { buttonColorVariant, statusIconDefinition, statusSeparatorDefinition, toastContainer, toastDefinition, toastWrapper } from "./toast.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ToastContainer } from "react-toastify";
 //#region src/components/status/Toast/Toast.tsx
 var Toast = ({ text, isLoading = false, actions = [], icon: Icon, ...props }) => {
 	const uiConfig = UIConfig.useConfig();
 	const { variant = uiConfig.toast.variant, ...restProps } = props;
-	const toastCva = UIStyle.useCva("toast.cva", toast$1);
-	const buttonColor = UIStyle.useMapper("toast.buttonColor", buttonColorVariant);
-	const iconCva = UIStyle.useCva("status.iconCva", statusIcon);
-	const separatorCva = UIStyle.useCva("status.separatorCva", statusSeparator);
+	const toastCva = UIOverrides.useCva("toast.cva", toastDefinition);
+	const buttonColor = UIOverrides.useMapper("toast.buttonColor", buttonColorVariant);
+	const iconCva = UIOverrides.useCva("status.iconCva", statusIconDefinition);
+	const separatorCva = UIOverrides.useCva("status.separatorCva", statusSeparatorDefinition);
 	const variantProps = {
 		variant,
 		...restProps

package/dist/components/status/Toast/toast.cva.d.ts

@@ -1,18 +1,69 @@
-import { VariantProps } from 'class-variance-authority';
 import { ButtonVariantProps } from '../../buttons/Button/button.cva';
+import { UIOverrides } from '../../../config/uiOverrides.context';
 export declare const toastContainer: (props?: ({
     position?: "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-center" | "top-center" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const toastWrapper: string;
-export declare const toast: (props?: ({
-    variant?: "contained" | "outlined" | null | undefined;
-    color?: "success" | "warning" | "error" | "neutral" | null | undefined;
-    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-center" | "top-center" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface ToastVariantProps extends VariantProps<typeof toast> {
+export declare const toastDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly variant: {
+            readonly outlined: "border bg-elevation-fill-default-1 text-text-default-1";
+            readonly contained: "text-text-inverted-1";
+        };
+        readonly color: {
+            readonly neutral: "";
+            readonly success: "";
+            readonly warning: "";
+            readonly error: "";
+        };
+        readonly position: {
+            readonly "bottom-right": "";
+            readonly "bottom-left": "";
+            readonly "bottom-center": "";
+            readonly "top-right": "";
+            readonly "top-left": "";
+            readonly "top-center": "";
+        };
+    }>;
+};
+export type ToastConfig = NonNullable<typeof toastDefinition.config>;
+export interface ToastVariantProps extends UIOverrides.VariantProps<ToastConfig> {
 }
 export declare const buttonColorVariant: (props: {
-    color?: "success" | "warning" | "error" | "neutral" | null | undefined;
-    variant?: "contained" | "outlined" | null | undefined;
-    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-center" | "top-center" | null | undefined;
+    readonly variant?: "contained" | "outlined" | null | undefined;
+    readonly color?: "success" | "warning" | "error" | "neutral" | null | undefined;
+    readonly position?: "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-center" | "top-center" | null | undefined;
 }) => Pick<ButtonVariantProps, "color" | "inverted"> | undefined;
+export declare const statusIconDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly variant: {
+            readonly outlined: "";
+            readonly contained: "text-text-inverted-1";
+        };
+        readonly color: {
+            readonly neutral: "";
+            readonly success: "";
+            readonly warning: "";
+            readonly error: "";
+        };
+    }>;
+};
+export type StatusIconConfig = NonNullable<typeof statusIconDefinition.config>;
+export declare const statusSeparatorDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly variant: {
+            readonly outlined: "";
+            readonly contained: "hidden";
+        };
+        readonly color: {
+            readonly neutral: "bg-elevation-outline-default-1";
+            readonly success: "bg-elevation-outline-success-1";
+            readonly warning: "bg-elevation-outline-warning-1";
+            readonly error: "bg-elevation-outline-error-1";
+        };
+    }>;
+};
+export type StatusSeparatorConfig = NonNullable<typeof statusSeparatorDefinition.config>;