@povio/ui 3.4.0-rc.15 → 3.4.0-rc.17

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

@@ -1,36 +1,39 @@
-import { FC, ReactElement, Ref, SVGProps } from 'react';
-import { Key, ToggleButtonGroupProps, ToggleButtonProps } from 'react-aria-components';
-import { FieldValues } from '../inputs/shared/form.binding';
-import { ControlProps } from '../inputs/shared/form.types';
-import { SegmentItemVariantProps, SegmentVariantProps } from './segment.cva';
-export interface SegmentItem<TKey extends Key = Key> extends ToggleButtonProps, SegmentItemVariantProps {
-    id: TKey;
-    label?: string;
-    icon?: FC<SVGProps<SVGSVGElement>> | ReactElement;
+import { FieldValues } from "../inputs/shared/form.binding.js";
+import { ControlProps } from "../inputs/shared/form.types.js";
+import { SegmentItemVariantProps, SegmentVariantProps } from "./segment.cva.js";
+import { FC, ReactElement, Ref, SVGProps } from "react";
+import { Key, ToggleButtonGroupProps, ToggleButtonProps } from "react-aria-components";
+//#region src/components/segment/segment.types.d.ts
+interface SegmentItem<TKey extends Key = Key> extends ToggleButtonProps, SegmentItemVariantProps {
+  id: TKey;
+  label?: string;
+  icon?: FC<SVGProps<SVGSVGElement>> | ReactElement;
 }
-export interface SingleSegmentProps<TKey extends Key = Key> {
-    selectionMode?: "single";
-    value?: TKey | undefined | null;
-    onChange?: (value: TKey | null) => void;
-    defaultValue?: TKey | null;
+interface SingleSegmentProps<TKey extends Key = Key> {
+  selectionMode?: "single";
+  value?: TKey | undefined | null;
+  onChange?: (value: TKey | null) => void;
+  defaultValue?: TKey | null;
 }
-export interface MultiSegmentProps<TKey extends Key = Key> {
-    selectionMode: "multiple";
-    value?: TKey[];
-    onChange?: (value: TKey[]) => void;
-    defaultValue?: TKey[] | null;
+interface MultiSegmentProps<TKey extends Key = Key> {
+  selectionMode: "multiple";
+  value?: TKey[];
+  onChange?: (value: TKey[]) => void;
+  defaultValue?: TKey[] | null;
 }
-export type GroupedSegmentProps<TKey extends Key = Key> = MultiSegmentProps<TKey> | SingleSegmentProps<TKey>;
-export type GroupedSegmentControlProps<TFieldValues extends FieldValues, TKey extends Key = Key> = ({
-    selectionMode: MultiSegmentProps["selectionMode"];
+type GroupedSegmentProps<TKey extends Key = Key> = MultiSegmentProps<TKey> | SingleSegmentProps<TKey>;
+type GroupedSegmentControlProps<TFieldValues extends FieldValues, TKey extends Key = Key> = ({
+  selectionMode: MultiSegmentProps["selectionMode"];
 } & ControlProps<MultiSegmentProps<TKey>, TFieldValues>) | ({
-    selectionMode?: SingleSegmentProps["selectionMode"];
+  selectionMode?: SingleSegmentProps["selectionMode"];
 } & ControlProps<SingleSegmentProps<TKey>, TFieldValues>);
-export type SegmentProps<TKey extends Key = Key> = Omit<ToggleButtonGroupProps & SegmentVariantProps, "children" | "onSelectionChange" | "selectedKeys" | "defaultSelectedKeys"> & {
-    ref?: Ref<HTMLElement>;
-    items: SegmentItem<TKey>[];
-    className?: string;
-    segmentItemClassName?: string;
-    error?: string;
+type SegmentProps<TKey extends Key = Key> = Omit<ToggleButtonGroupProps & SegmentVariantProps, "children" | "onSelectionChange" | "selectedKeys" | "defaultSelectedKeys"> & {
+  ref?: Ref<HTMLElement>;
+  items: SegmentItem<TKey>[];
+  className?: string;
+  segmentItemClassName?: string;
+  error?: string;
 } & GroupedSegmentProps<TKey>;
-export type ControlledSegmentProps<TFieldValues extends FieldValues, TKey extends Key = Key> = SegmentProps<TKey> & GroupedSegmentControlProps<TFieldValues, TKey>;
+type ControlledSegmentProps<TFieldValues extends FieldValues, TKey extends Key = Key> = SegmentProps<TKey> & GroupedSegmentControlProps<TFieldValues, TKey>;
+//#endregion
+export { ControlledSegmentProps, GroupedSegmentControlProps, GroupedSegmentProps, MultiSegmentProps, SegmentItem, SegmentProps, SingleSegmentProps };

package/dist/components/segment.d.ts

@@ -0,0 +1,7 @@
+import { FieldValues } from "./inputs/shared/form.binding.js";
+import { ControlledSegmentProps } from "./segment/segment.types.js";
+import { Key } from "react-aria-components";
+//#region src/components/segment/Segment.d.ts
+declare const Segment: <TFieldValues extends FieldValues, TKey extends Key = Key>(props: ControlledSegmentProps<TFieldValues, TKey>) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Segment };

package/dist/components/{segment/Segment.js → segment.js}

@@ -1,18 +1,18 @@
-import { UIOverrides } from "../../config/uiOverrides.context.js";
-import { FieldController } from "../inputs/shared/form.binding.js";
-import { FormField } from "../inputs/FormField/FormField.js";
-import { segmentDefinition } from "./segment.cva.js";
-import { SegmentItem } from "./SegmentItem.js";
+import { UIOverrides } from "../config/uiOverrides.context.js";
+import { FieldController } from "./inputs/shared/form.binding.js";
+import { FormField } from "./form-field.js";
+import { segmentDefinition } from "./segment/segment.cva.js";
+import { SegmentItem } from "./segment/SegmentItem.js";
+import { c } from "react/compiler-runtime";
 import { clsx } from "clsx";
 import { Fragment, useRef } from "react";
 import { ToggleButtonGroup } from "react-aria-components";
-import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useToggleButtonGroup } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { useToggleGroupState } from "react-stately";
 //#region src/components/segment/Segment.tsx
-var SegmentBase = (t0) => {
+const SegmentBase = (t0) => {
 	const $ = c(49);
 	let className;
 	let defaultValue;
@@ -179,7 +179,7 @@ var SegmentBase = (t0) => {
 	} else t12 = $[48];
 	return t12;
 };
-var Segment = (props) => {
+const Segment = (props) => {
 	const $ = c(15);
 	if ("field" in props && props.field) {
 		let field;

package/dist/components/select.d.ts

@@ -0,0 +1,4 @@
+import { DefaultInitialSelectItem, SelectAsyncProps, SelectItem } from "./inputs/Selection/shared/select.types.js";
+import { SelectBaseProps } from "./inputs/Selection/shared/SelectBase.js";
+import { ControlledSelectProps, Select, SelectProps } from "./inputs/Selection/Select/Select.js";
+export { type ControlledSelectProps, type DefaultInitialSelectItem, Select, type SelectAsyncProps, type SelectBaseProps, type SelectItem, type SelectProps };

package/dist/components/select.js

@@ -0,0 +1,2 @@
+import { Select } from "./inputs/Selection/Select/Select.js";
+export { Select };

package/dist/components/shared/pagination/PaginationList.d.ts

@@ -1,15 +1,18 @@
-import { ButtonProps } from '../../buttons/Button/Button';
-export interface PaginationListProps {
-    page: number;
-    totalPages: number;
-    hideText?: boolean;
-    hideFirstLast?: boolean;
-    hidePrevNext?: boolean;
-    hideNumbers?: boolean;
-    size?: Exclude<ButtonProps["size"], "none">;
-    color?: ButtonProps["color"];
-    variant?: ButtonProps["variant"];
-    className?: string;
-    onPageChange?: (page: number) => void;
+import { ButtonProps } from "../../buttons/Button/Button.js";
+//#region src/components/shared/pagination/PaginationList.d.ts
+interface PaginationListProps {
+  page: number;
+  totalPages: number;
+  hideText?: boolean;
+  hideFirstLast?: boolean;
+  hidePrevNext?: boolean;
+  hideNumbers?: boolean;
+  size?: Exclude<ButtonProps["size"], "none">;
+  color?: ButtonProps["color"];
+  variant?: ButtonProps["variant"];
+  className?: string;
+  onPageChange?: (page: number) => void;
 }
-export declare const PaginationList: ({ page, totalPages, size, color, variant, hideText, hideFirstLast, hidePrevNext, hideNumbers, className, onPageChange, }: PaginationListProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const PaginationList: ({ page, totalPages, size, color, variant, hideText, hideFirstLast, hidePrevNext, hideNumbers, className, onPageChange }: PaginationListProps) => import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+export { PaginationList, PaginationListProps };

package/dist/components/shared/pagination/PaginationList.js

@@ -2,12 +2,12 @@ import { Button } from "../../buttons/Button/Button.js";
 import "../../../config/i18n.js";
 import { minWidth } from "./minWidth.cva.js";
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
-import { clsx } from "clsx";
 import { c } from "react/compiler-runtime";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 //#region src/components/shared/pagination/PaginationList.tsx
-var PaginationList = (t0) => {
+const PaginationList = (t0) => {
 	const $ = c(61);
 	const { page, totalPages, size, color, variant, hideText, hideFirstLast, hidePrevNext, hideNumbers, className, onPageChange } = t0;
 	const { t } = useTranslation("ui");

package/dist/components/shared/pagination/minWidth.cva.js

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 //#region src/components/shared/pagination/minWidth.cva.ts
-var minWidth = cva("", { variants: { size: {
+const minWidth = cva("", { variants: { size: {
 	xxs: ["min-w-button-width-min-width-xxs"],
 	xs: ["min-w-button-width-min-width-xs"],
 	s: ["min-w-button-width-min-width-s"],

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

@@ -1,8 +1,9 @@
-import { UIOverrides } from '../../config/uiOverrides.context';
-export declare const popoverDefinition: {
-    base: string[];
-    config?: import("../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+import { StyleMergeUtils } from "../../utils/style-merge.util.js";
+import "../../config/uiOverrides.context.js";
+//#region src/components/shared/popover.cva.d.ts
+declare const popoverDefinition: {
+  base: string[];
+  config?: StyleMergeUtils.Config<Record<never, never>>;
 };
-export type PopoverConfig = NonNullable<typeof popoverDefinition.config>;
-export interface PopoverVariantProps extends UIOverrides.VariantProps<PopoverConfig> {
-}
+//#endregion
+export { popoverDefinition };

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

@@ -1,5 +1,5 @@
 import { UIOverrides } from "../../config/uiOverrides.context.js";
 //#region src/components/shared/popover.cva.ts
-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"] });
+const 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 { popoverDefinition };

package/dist/components/slider.d.ts

@@ -0,0 +1,22 @@
+import { FieldValues } from "./inputs/shared/form.binding.js";
+import { ControlProps } from "./inputs/shared/form.types.js";
+import { FormFieldProps } from "./form-field.js";
+import { FocusEvent, Ref } from "react";
+import { SliderProps as SliderProps$1 } from "react-aria-components";
+//#region src/components/inputs/Slider/Slider.d.ts
+type SliderValue<IsRange extends boolean = false> = IsRange extends false ? number : number[];
+interface SliderBaseProps<IsRange extends boolean = false> extends FormFieldProps, Omit<SliderProps$1, "value" | "defaultValue" | "onChange" | "className"> {
+  ref?: Ref<HTMLDivElement>;
+  unit?: string;
+  isRange?: IsRange;
+  defaultValue?: SliderValue<IsRange>;
+  value?: SliderValue<IsRange>;
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  onChange?: (value: SliderValue<IsRange>) => void;
+}
+type SliderProps<IsRange extends boolean = false> = SliderBaseProps<IsRange>;
+type ControlledSliderProps<TFieldValues extends FieldValues, IsRange extends boolean = false> = ControlProps<SliderProps<IsRange>, TFieldValues>;
+declare const SliderComponent: <TFieldValues extends FieldValues, IsRange extends boolean = false>(props: ControlledSliderProps<TFieldValues, IsRange>) => import("react/jsx-runtime").JSX.Element;
+declare const Slider: typeof SliderComponent;
+//#endregion
+export { ControlledSliderProps, Slider, SliderProps };

package/dist/components/slider.js

@@ -0,0 +1,103 @@
+import { Typography } from "./typography.js";
+import { UIConfig } from "../config/uiConfig.context.js";
+import { uiOutlineClass } from "./outline.clsx.js";
+import { FieldController } from "./inputs/shared/form.binding.js";
+import { FormField } from "./form-field.js";
+import { clsx } from "clsx";
+import { memo } from "react";
+import { Slider as Slider$1, SliderThumb, SliderTrack } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+//#region src/components/inputs/Slider/Slider.tsx
+const SliderBase = (props) => {
+	const ui = UIConfig.useConfig();
+	const { label, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, unit, hideLabel: hideLabelProp, minValue: minValueProp, maxValue: maxValueProp, onBlur, ...rest } = props;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const minValue = minValueProp ?? ui.slider.minValue;
+	const maxValue = maxValueProp ?? ui.slider.maxValue;
+	const formFieldProps = {
+		error,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden,
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const defaultValue = props.defaultValue ?? (props.isRange ? [minValue, minValue] : minValue);
+	const getTrackFillStyle = (state) => {
+		const p0 = state.getThumbPercent(0);
+		const p1 = state.getThumbPercent(1);
+		return {
+			left: props.isRange ? `${p0 * 100}%` : 0,
+			width: props.isRange ? `${(p1 - p0) * 100}%` : `${p0 * 100}%`
+		};
+	};
+	return /* @__PURE__ */ jsx(Slider$1, {
+		...rest,
+		defaultValue,
+		minValue,
+		maxValue,
+		isDisabled,
+		className: clsx("group", rest.className),
+		children: /* @__PURE__ */ jsx(FormField, {
+			...formFieldProps,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [
+					/* @__PURE__ */ jsxs(Typography, {
+						className: "min-w-10 px-slider-side-leading-and-trailing py-slider-height-leading-and-trailing text-text-default-3",
+						size: "label-2",
+						children: [minValue, unit]
+					}),
+					/* @__PURE__ */ jsx(SliderTrack, {
+						className: "relative mx-2 h-6 w-full",
+						children: ({ state }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+							className: "absolute top-1/2 h-1 w-full -translate-y-1/2 overflow-hidden rounded-full bg-elevation-outline-default-1",
+							children: /* @__PURE__ */ jsx("div", {
+								className: clsx("absolute top-0 h-1 rounded-full", props.isDisabled ? "bg-interactive-contained-primary-disabled" : "bg-interactive-contained-primary-idle"),
+								style: getTrackFillStyle(state)
+							})
+						}), state.values.map((_, i) => /* @__PURE__ */ jsx(SliderThumb, {
+							index: i,
+							className: clsx("absolute top-1/2 size-4 cursor-pointer rounded-full bg-interactive-contained-primary-idle disabled:cursor-default", "dragging:bg-interactive-contained-primary-pressed hover:bg-interactive-contained-primary-hover focus-visible:outline-interactive-contained-primary-focus disabled:bg-interactive-contained-primary-disabled", uiOutlineClass),
+							isDisabled,
+							onBlur: (event) => onBlur?.({ target: event.target })
+						}, i))] })
+					}),
+					/* @__PURE__ */ jsxs(Typography, {
+						className: "min-w-10 px-slider-side-leading-and-trailing py-slider-height-leading-and-trailing text-text-default-3",
+						size: "label-2",
+						children: [maxValue, unit]
+					})
+				]
+			})
+		})
+	});
+};
+const SliderComponent = (props) => {
+	if ("field" in props && props.field) {
+		const { field, ref, ...innerProps } = props;
+		return /* @__PURE__ */ jsx(FieldController, {
+			control: field.form,
+			name: field.name,
+			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(SliderBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				value: field.value,
+				onBlur: field.onBlur,
+				onChange: field.onChange,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(SliderBase, { ...props });
+};
+const Slider = memo(SliderComponent);
+//#endregion
+export { Slider };

package/dist/components/split-button.d.ts

@@ -0,0 +1,15 @@
+import { LinkNavigationProps } from "./link.js";
+import { MenuItem as MenuItem$1 } from "./menu.js";
+import { ButtonVariantProps } from "./buttons/Button/button.cva.js";
+import { ButtonProps } from "react-aria-components";
+//#region src/components/buttons/SplitButton/SplitButton.d.ts
+interface SplitButtonProps extends ButtonVariantProps, Omit<ButtonProps, "children"> {
+  label: string;
+  labelRight: string;
+  link?: LinkNavigationProps;
+  items: MenuItem$1[];
+  isLoading?: boolean;
+}
+declare const SplitButton: ({ variant, color, width, size, label, labelRight, link, items, className, isLoading, ...props }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { SplitButton, SplitButtonProps };

package/dist/components/{buttons/SplitButton/SplitButton.js → split-button.js}

@@ -1,12 +1,12 @@
-import { Button } from "../Button/Button.js";
-import { IconButton } from "../IconButton/IconButton.js";
-import { Menu } from "../../Menu/Menu.js";
+import { Button } from "./buttons/Button/Button.js";
+import { IconButton } from "./icon-button.js";
+import { Menu } from "./menu.js";
 import { ChevronDown } from "lucide-react";
-import { clsx } from "clsx";
 import { c } from "react/compiler-runtime";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/buttons/SplitButton/SplitButton.tsx
-var SplitButton = (t0) => {
+const SplitButton = (t0) => {
 	const $ = c(36);
 	let className;
 	let color;

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

@@ -1,19 +1,22 @@
-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: "";
-        };
-    }>;
+import { StyleMergeUtils } from "../../../utils/style-merge.util.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
+//#region src/components/status/Alert/alert.cva.d.ts
+declare const alertDefinition: {
+  base: string[];
+  config: 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> {
-}
+type AlertConfig = NonNullable<typeof alertDefinition.config>;
+interface AlertVariantProps extends UIOverrides.VariantProps<AlertConfig> {}
+//#endregion
+export { AlertConfig, AlertVariantProps, alertDefinition };

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

@@ -1,6 +1,6 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 //#region src/components/status/Alert/alert.cva.ts
-var alertDefinition = UIOverrides.defineConfig({
+const alertDefinition = UIOverrides.defineConfig({
 	base: ["min-h-0 overflow-hidden rounded-alert-rounding-default p-0"],
 	config: {
 		variants: {

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

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

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

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