@atom-learning/components 6.8.2 → 6.10.0

package/dist/index.cjs.js

@@ -3315,17 +3315,34 @@ var InputBackground = styled("div", {
 			xl: ["h-16"]
 		},
 		disabled: { true: ["cursor-not-allowed", "opacity-30"] },
-		state: { error: [] }
+		state: { error: [] },
+		theme: {
+			white: [],
+			grey: []
+		}
 	},
-	compoundVariants: [{
-		state: "error",
-		appearance: "standard",
-		class: ["border-danger"]
-	}, {
-		state: "error",
-		appearance: "modern",
-		class: ["bg-danger-light", "focus-within:outline-danger"]
-	}]
+	compoundVariants: [
+		{
+			state: "error",
+			appearance: "standard",
+			class: ["border-danger"]
+		},
+		{
+			state: "error",
+			appearance: "modern",
+			class: ["bg-danger-light", "focus-within:outline-danger"]
+		},
+		{
+			appearance: "modern",
+			theme: "white",
+			class: ["bg-white"]
+		},
+		{
+			appearance: "modern",
+			theme: "grey",
+			class: ["bg-grey-100"]
+		}
+	]
 });
 InputBackground.displayName = "InputBackground";
 var StyledInputText = styled(Text, { base: [
@@ -3360,10 +3377,11 @@ var InputText = react.forwardRef(({ type = "text", size, ...rest }, ref) => {
 	});
 });
 InputText.displayName = "InputText";
-var Input = react.forwardRef(({ className, size = "md", appearance = "standard", state, disabled, style, ...rest }, ref) => {
+var Input = react.forwardRef(({ className, size = "md", appearance = "standard", theme, state, disabled, style, ...rest }, ref) => {
 	return /* @__PURE__ */ react.createElement(InputBackground, {
 		size,
 		appearance,
+		theme,
 		disabled,
 		state,
 		className,
@@ -3409,12 +3427,13 @@ var PasswordInput = react.forwardRef(({ className, hidePasswordText = "Hide pass
 PasswordInput.displayName = "PasswordInput";
 //#endregion
 //#region src/components/password-field/PasswordField.tsx
-var PasswordField = ({ className, hideLabel, label = "Password", name, prompt = void 0, description, validation, appearance, ...remainingProps }) => {
+var PasswordField = ({ className, hideLabel, label = "Password", name, prompt = void 0, description, validation, appearance, theme, ...remainingProps }) => {
 	const { register } = (0, react_hook_form.useFormContext)();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
+	const formTheme = context?.theme ?? theme;
 	return /* @__PURE__ */ react.createElement(FieldWrapper, {
 		description,
 		error,
@@ -3431,6 +3450,7 @@ var PasswordField = ({ className, hideLabel, label = "Password", name, prompt =
 		id: name,
 		ref,
 		appearance: formAppearance,
+		theme: formTheme,
 		...error !== void 0 && { state: "error" },
 		...remainingProps
 	}));
@@ -4339,7 +4359,7 @@ var StyledIcon$1 = styled(Icon, {
 		lg: ["right-2.5", "size-5"]
 	} }
 });
-var SearchInput = react.forwardRef(({ size = "md", appearance = "standard", className, value, defaultValue = "", onValueChange, clearText = "Clear", onChange, ...remainingProps }, ref) => {
+var SearchInput = react.forwardRef(({ size = "md", appearance = "standard", theme, className, value, defaultValue = "", onValueChange, clearText = "Clear", onChange, ...remainingProps }, ref) => {
 	const [inputElRef, setInputElRef] = useCallbackRef();
 	const [innerValue, setInnerValue] = react.useState(defaultValue);
 	const [activeIcon, setActiveIcon] = react.useState(defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH);
@@ -4383,6 +4403,7 @@ var SearchInput = react.forwardRef(({ size = "md", appearance = "standard", clas
 	return /* @__PURE__ */ react.createElement(InputBackground, {
 		size,
 		appearance,
+		theme,
 		className: (0, clsx.default)("relative", "w-auto", className)
 	}, /* @__PURE__ */ react.createElement(InputText, {
 		ref: setInputElRef,
@@ -6114,12 +6135,15 @@ Flex.displayName = "Flex";
 //#endregion
 //#region src/components/form/Form.tsx
 var Form = (props) => {
-	const { children, defaultValues, validationMode = "onBlur", onSubmit, onError, appearance, ...rest } = props;
+	const { children, defaultValues, validationMode = "onBlur", onSubmit, onError, appearance, theme, ...rest } = props;
 	const methods = (0, react_hook_form.useForm)({
 		defaultValues,
 		mode: validationMode
 	});
-	return /* @__PURE__ */ react.createElement(react_hook_form.FormProvider, methods, /* @__PURE__ */ react.createElement(FormCustomContext.Provider, { value: { appearance } }, /* @__PURE__ */ react.createElement("form", {
+	return /* @__PURE__ */ react.createElement(react_hook_form.FormProvider, methods, /* @__PURE__ */ react.createElement(FormCustomContext.Provider, { value: {
+		appearance,
+		theme
+	} }, /* @__PURE__ */ react.createElement("form", {
 		"aria-label": "form",
 		onSubmit: methods.handleSubmit(onSubmit, onError),
 		...rest
@@ -6157,12 +6181,13 @@ var Grid = ({ className, style, gap = "2", minItemSize, maxItemSize = "1fr", ...
 Grid.displayName = "Grid";
 //#endregion
 //#region src/components/input-field/InputField.tsx
-var InputField = ({ className, label, name, validation, prompt, description, hideLabel, appearance, ...remainingProps }) => {
+var InputField = ({ className, label, name, validation, prompt, description, hideLabel, appearance, theme, ...remainingProps }) => {
 	const { register } = (0, react_hook_form.useFormContext)();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
+	const formTheme = context?.theme ?? theme;
 	return /* @__PURE__ */ react.createElement(FieldWrapper, {
 		className,
 		description,
@@ -6178,6 +6203,7 @@ var InputField = ({ className, label, name, validation, prompt, description, hid
 		name,
 		ref,
 		appearance: formAppearance,
+		theme: formTheme,
 		...error && { state: "error" },
 		...remainingProps
 	}));
@@ -6910,6 +6936,10 @@ var StyledStepperButton = styled(ActionIcon, {
 				"hover:bg-grey-200!"
 			]
 		},
+		fieldTheme: {
+			white: [],
+			grey: []
+		},
 		emphasis: { bold: [
 			"[&_svg]:text-primary-700",
 			"hover:bg-primary-100!",
@@ -6918,18 +6948,26 @@ var StyledStepperButton = styled(ActionIcon, {
 			"active:[&_svg]:text-primary-900!"
 		] }
 	},
-	compoundVariants: [{
-		fieldAppearance: "standard",
-		emphasis: "bold",
-		class: ["bg-white", "border-primary-800!"]
-	}, {
-		fieldAppearance: "modern",
-		emphasis: "bold",
-		class: ["bg-white!", "hover:bg-primary-100!"]
-	}]
+	compoundVariants: [
+		{
+			fieldAppearance: "modern",
+			fieldTheme: "white",
+			class: ["bg-white"]
+		},
+		{
+			fieldAppearance: "standard",
+			emphasis: "bold",
+			class: ["bg-white", "border-primary-800!"]
+		},
+		{
+			fieldAppearance: "modern",
+			emphasis: "bold",
+			class: ["bg-white!", "hover:bg-primary-100!"]
+		}
+	]
 });
 var NumberInputStepper = react.forwardRef((props, forwardedRef) => {
-	const { icon, disabledTooltipContent, showTooltip, fieldAppearance = "standard", ...rest } = props;
+	const { icon, disabledTooltipContent, showTooltip, fieldAppearance = "standard", fieldTheme, ...rest } = props;
 	/**
 	* Focus has been removed from the button
 	* as the increment and decrement buttons should be keyboard accessible via arrow keys.
@@ -6943,6 +6981,7 @@ var NumberInputStepper = react.forwardRef((props, forwardedRef) => {
 		tabIndex: -1,
 		appearance: "outline",
 		fieldAppearance,
+		fieldTheme,
 		ref: forwardedRef,
 		...rest
 	}, /* @__PURE__ */ react.createElement(Icon, { is: icon })))), showTooltip && /* @__PURE__ */ react.createElement(Tooltip.Content, null, disabledTooltipContent));
@@ -6959,7 +6998,7 @@ var NumberInputContainer = styled("div", {
 		emphasis: { bold: ["gap-0"] }
 	}
 });
-var NumberInput = react.forwardRef(({ value, defaultValue = 0, onValueChange, min = 0, max = Number.MAX_SAFE_INTEGER, step = 1, disabled: isDisabled = false, readonly: isReadOnly = false, size = "md", stepperButtonLabels: stepperButtonLabelsProp, disabledTooltipContent: disabledTooltipContentProp, className, appearance = "standard", emphasis, ...rest }, ref) => {
+var NumberInput = react.forwardRef(({ value, defaultValue = 0, onValueChange, min = 0, max = Number.MAX_SAFE_INTEGER, step = 1, disabled: isDisabled = false, readonly: isReadOnly = false, size = "md", stepperButtonLabels: stepperButtonLabelsProp, disabledTooltipContent: disabledTooltipContentProp, className, appearance = "standard", theme, emphasis, ...rest }, ref) => {
 	const [internalValue, setInternalValue] = react.useState(value || defaultValue);
 	react.useEffect(() => {
 		if (typeof value !== "undefined") setInternalValue(value);
@@ -7052,6 +7091,7 @@ var NumberInput = react.forwardRef(({ value, defaultValue = 0, onValueChange, mi
 		onKeyDown,
 		size,
 		appearance,
+		theme,
 		state: externalState || (hasError ? "error" : void 0),
 		"aria-invalid": externalAriaInvalid || hasError || void 0,
 		className: (0, clsx.default)("rounded-none", "w-16", "[&_>_input]:text-center", "disabled:opacity-30", "disabled:pointer-events-none", emphasis === "bold" && [
@@ -7083,6 +7123,7 @@ var NumberInput = react.forwardRef(({ value, defaultValue = 0, onValueChange, mi
 		className: (0, clsx.default)(emphasis !== "bold" && "border-r-none rounded-r-none"),
 		size: iconSize,
 		fieldAppearance: appearance,
+		fieldTheme: theme,
 		emphasis,
 		disabled: isAtMin || isDisabled,
 		showTooltip: isAtMin && !isDisabled,
@@ -7094,6 +7135,7 @@ var NumberInput = react.forwardRef(({ value, defaultValue = 0, onValueChange, mi
 		className: (0, clsx.default)(emphasis !== "bold" && "border-l-none rounded-l-none"),
 		size: iconSize,
 		fieldAppearance: appearance,
+		fieldTheme: theme,
 		emphasis,
 		disabled: isAtMax || isDisabled,
 		showTooltip: isAtMax && !isDisabled,
@@ -7104,7 +7146,7 @@ var NumberInput = react.forwardRef(({ value, defaultValue = 0, onValueChange, mi
 NumberInput.displayName = "NumberInput";
 //#endregion
 //#region src/components/number-input-field/NumberInputField.tsx
-var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, ...remainingProps }) => {
+var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, theme, ...remainingProps }) => {
 	const { control } = (0, react_hook_form.useFormContext)();
 	const context = useFormCustomContext();
 	const { field: { ref, onChange, value: innerValue, name: innerName } } = (0, react_hook_form.useController)({
@@ -7115,6 +7157,7 @@ var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt,
 	});
 	const { error } = useFieldError(name);
 	const formAppearance = context?.appearance || appearance;
+	const formTheme = context?.theme ?? theme;
 	react.useEffect(() => {
 		if (typeof value !== "undefined") onChange(value);
 	}, [value]);
@@ -7143,6 +7186,7 @@ var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt,
 		},
 		value: innerValue,
 		appearance: formAppearance,
+		theme: formTheme,
 		...remainingProps
 	}));
 };
@@ -7349,12 +7393,13 @@ var RadioCardGroup = ({ className, children, size, isFullWidth, align, ...rest }
 })));
 //#endregion
 //#region src/components/search-field/SearchField.tsx
-var SearchField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }) => {
+var SearchField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }) => {
 	const { register } = (0, react_hook_form.useFormContext)();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
+	const formTheme = context?.theme ?? theme;
 	return /* @__PURE__ */ react.createElement(FieldWrapper, {
 		className,
 		description,
@@ -7370,6 +7415,7 @@ var SearchField = ({ className, hideLabel, label, name, validation, prompt, desc
 		name,
 		ref,
 		appearance: formAppearance,
+		theme: formTheme,
 		...error && { state: "error" },
 		...remainingProps
 	}));
@@ -7556,6 +7602,10 @@ var StyledSelect = styled("select", {
 			]
 		},
 		state: { error: [] },
+		theme: {
+			white: [],
+			grey: []
+		},
 		appearance: {
 			standard: [
 				"bg-white",
@@ -7575,15 +7625,28 @@ var StyledSelect = styled("select", {
 			]
 		}
 	},
-	compoundVariants: [{
-		state: "error",
-		appearance: "standard",
-		class: ["border-danger"]
-	}, {
-		state: "error",
-		appearance: "modern",
-		class: ["bg-danger-light", "focus:outline-danger"]
-	}]
+	compoundVariants: [
+		{
+			state: "error",
+			appearance: "standard",
+			class: ["border-danger"]
+		},
+		{
+			state: "error",
+			appearance: "modern",
+			class: ["bg-danger-light", "focus:outline-danger"]
+		},
+		{
+			appearance: "modern",
+			theme: "white",
+			class: ["bg-white"]
+		},
+		{
+			appearance: "modern",
+			theme: "grey",
+			class: ["bg-grey-100"]
+		}
+	]
 }, { enabledResponsiveVariants: true });
 var Select = react.forwardRef(({ placeholder, children, size = "md", appearance = "standard", ...remainingProps }, ref) => {
 	const props = {
@@ -7602,12 +7665,13 @@ var Select = react.forwardRef(({ placeholder, children, size = "md", appearance
 Select.displayName = "Select";
 //#endregion
 //#region src/components/select-field/SelectField.tsx
-var SelectField = ({ className, hideLabel, children, name, label, validation, prompt, description, appearance, ...remainingProps }) => {
+var SelectField = ({ className, hideLabel, children, name, label, validation, prompt, description, appearance, theme, ...remainingProps }) => {
 	const { register } = (0, react_hook_form.useFormContext)();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
+	const formTheme = context?.theme ?? theme;
 	return /* @__PURE__ */ react.createElement(FieldWrapper, {
 		className,
 		description,
@@ -7622,6 +7686,7 @@ var SelectField = ({ className, hideLabel, children, name, label, validation, pr
 		name,
 		id: name,
 		appearance: formAppearance,
+		theme: formTheme,
 		...remainingProps,
 		ref,
 		...error && { state: "error" }
@@ -7940,69 +8005,34 @@ var Tile = react.default.forwardRef(({ children, borderRadius = "lg", colorSchem
 Tile.displayName = "Tile";
 //#endregion
 //#region src/components/skeleton-loader/SkeletonTabs.tsx
-var SkeletonTabs = ({ numberOfTabs, containerCss, tabCss }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-6", "flex-row", "gap-4", containerCss) }, Array.from({ length: numberOfTabs }, (_, index) => `tab_${index}`).map((key) => /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
+var SkeletonTabs = ({ numberOfTabs, className, tabClassName }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-6", "flex-row", "gap-4", className) }, Array.from({ length: numberOfTabs }, (_, index) => `tab_${index}`).map((key) => /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
 	key,
-	className: (0, clsx.default)("w-32", "h-6", "rounded-sm", tabCss)
+	className: (0, clsx.default)("w-32", "h-6", "rounded-sm", tabClassName)
 })));
 //#endregion
 //#region src/components/skeleton-loader/SkeletonDoughnutChart.tsx
-var DoughnutSvg = () => /* @__PURE__ */ react.default.createElement("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: 120,
-	height: 121,
-	fill: "none",
-	className: "animate-shimmer"
-}, /* @__PURE__ */ react.default.createElement("mask", {
-	id: "a",
-	fill: "#fff"
-}, /* @__PURE__ */ react.default.createElement("path", { d: "m117 60 3 3a60 60 0 0 1-39 53q-2 1-4-2l-5-17q-1-2 2-4a36 36 0 0 0 22-30q0-2 3-3z" })), /* @__PURE__ */ react.default.createElement("path", {
-	className: "fill-grey-300",
-	stroke: "#fff",
-	strokeWidth: 1.6,
-	d: "m117 60 3 3a60 60 0 0 1-39 53q-2 1-4-2l-5-17q-1-2 2-4a36 36 0 0 0 22-30q0-2 3-3z",
-	mask: "url(#a)"
-}), /* @__PURE__ */ react.default.createElement("mask", {
-	id: "b",
-	fill: "#fff"
-}, /* @__PURE__ */ react.default.createElement("path", { d: "M117 60q2 0 3-3A60 60 0 0 0 81 4l-4 2-5 17q-1 4 2 4a36 36 0 0 1 22 30q0 3 3 3z" })), /* @__PURE__ */ react.default.createElement("path", {
-	className: "fill-grey-300",
-	stroke: "#fff",
-	strokeWidth: 1.6,
-	d: "M117 60q2 0 3-3A60 60 0 0 0 81 4l-4 2-5 17q-1 4 2 4a36 36 0 0 1 22 30q0 3 3 3z",
-	mask: "url(#b)"
-}), /* @__PURE__ */ react.default.createElement("mask", {
-	id: "c",
-	fill: "#fff"
-}, /* @__PURE__ */ react.default.createElement("path", { d: "M77 6q1-2-2-4a60 60 0 0 0-62 21q-1 2 1 4l14 10h5a36 36 0 0 1 35-12q3 1 4-2z" })), /* @__PURE__ */ react.default.createElement("path", {
-	className: "fill-grey-300",
-	stroke: "#fff",
-	strokeWidth: 1.6,
-	d: "M77 6q1-2-2-4a60 60 0 0 0-62 21q-1 2 1 4l14 10h5a36 36 0 0 1 35-12q3 1 4-2z",
-	mask: "url(#c)"
-}), /* @__PURE__ */ react.default.createElement("mask", {
-	id: "d",
-	fill: "#fff"
-}, /* @__PURE__ */ react.default.createElement("path", { d: "M14 93q-3 2-1 5a60 60 0 0 0 62 20l2-4-5-16-4-3a36 36 0 0 1-35-11q-3-3-5-1z" })), /* @__PURE__ */ react.default.createElement("path", {
-	className: "fill-grey-300",
-	stroke: "#fff",
-	strokeWidth: 1.6,
-	d: "M14 93q-3 2-1 5a60 60 0 0 0 62 20l2-4-5-16-4-3a36 36 0 0 1-35-11q-3-3-5-1z",
-	mask: "url(#d)"
-}), /* @__PURE__ */ react.default.createElement("mask", {
-	id: "e",
-	fill: "#fff"
-}, /* @__PURE__ */ react.default.createElement("path", { d: "M14 27q-2-2-4 1a60 60 0 0 0 0 65q1 2 4 0l14-10q3-2 1-4a36 36 0 0 1 0-37q2-3-1-5z" })), /* @__PURE__ */ react.default.createElement("path", {
-	className: "fill-grey-300",
-	stroke: "#fff",
-	strokeWidth: 1.6,
-	d: "M14 27q-2-2-4 1a60 60 0 0 0 0 65q1 2 4 0l14-10q3-2 1-4a36 36 0 0 1 0-37q2-3-1-5z",
-	mask: "url(#e)"
-}));
-var SkeletonDoughnutChart = ({ containerCss }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-6", "flex-row", "gap-4", "relative", containerCss) }, /* @__PURE__ */ react.default.createElement(DoughnutSvg, null));
+var buildConicGradient = () => {
+	const numberOfSegments = 5;
+	const gap = 4;
+	const segmentAngle = (360 - numberOfSegments * gap) / numberOfSegments;
+	const stops = [];
+	let current = 0;
+	Array.from({ length: numberOfSegments }).forEach(() => {
+		stops.push(`var(--color-grey-300) ${current}deg ${current + segmentAngle}deg`);
+		current += segmentAngle;
+		stops.push(`white ${current}deg ${current + gap}deg`);
+		current += gap;
+	});
+	return `conic-gradient(${stops.join(", ")})`;
+};
+var SkeletonDoughnutChart = ({ className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-6", "size-60", className) }, /* @__PURE__ */ react.default.createElement("div", {
+	className: "animate-shimmer aspect-square w-full rounded-full [background-image:var(--gradient)] bg-clip-padding",
+	style: { "--gradient": buildConicGradient() }
+}, /* @__PURE__ */ react.default.createElement("div", { className: "mt-[20%] ml-[20%] size-[60%] rounded-full bg-white" })));
 //#endregion
 //#region src/components/skeleton-loader/SkeletonTable.tsx
-var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, containerCss }) => {
-	return /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-6", "flex-row", "gap-4", "relative", containerCss) }, /* @__PURE__ */ react.default.createElement(Table, { size: "md" }, /* @__PURE__ */ react.default.createElement(Table.Header, { theme: "white" }, Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ react.default.createElement(Table.HeaderCell, { key: columnIndex }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
+var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, className }) => {
+	return /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-6", "flex-row", "gap-4", "relative", className) }, /* @__PURE__ */ react.default.createElement(Table, { size: "md" }, /* @__PURE__ */ react.default.createElement(Table.Header, { theme: "white" }, Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ react.default.createElement(Table.HeaderCell, { key: columnIndex }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
 		style: { "--width": columnWidth?.[columnIndex] || "100px" },
 		className: "h-4 w-(--width) rounded-xl"
 	})))), /* @__PURE__ */ react.default.createElement(Table.Body, { striped: false }, Array.from({ length: numberOfRows }, (_, index) => index).map((rowIndex) => /* @__PURE__ */ react.default.createElement(Table.Row, { key: rowIndex }, Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ react.default.createElement(Table.Cell, {
@@ -8015,26 +8045,56 @@ var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, conta
 };
 //#endregion
 //#region src/components/skeleton-loader/SkeletonCard.tsx
-var SkeletonCard = ({ numberOfRows = 3, withChart }) => /* @__PURE__ */ react.default.createElement(Tile, { className: "relative w-full flex-col items-center gap-6 p-6" }, /* @__PURE__ */ react.default.createElement(Flex, {
-	gap: "6",
-	align: "center",
-	className: "w-full"
-}, withChart && /* @__PURE__ */ react.default.createElement(SkeletonDoughnutChart, null), /* @__PURE__ */ react.default.createElement(Flex, {
-	direction: "column",
-	gap: "24",
-	className: "grow"
-}, Array.from({ length: numberOfRows }, (_, index) => index).map((rowNumber) => /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
+var SkeletonCard = ({ numberOfRows = 3, withChart, className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("relative", "w-full", "flex-col", "items-center", "gap-6 p-6", className) }, /* @__PURE__ */ react.default.createElement("div", { className: "align-center flex w-full gap-6" }, withChart && /* @__PURE__ */ react.default.createElement(SkeletonDoughnutChart, null), /* @__PURE__ */ react.default.createElement("div", { className: "flex grow flex-col gap-6" }, Array.from({ length: numberOfRows }, (_, index) => index).map((rowNumber) => /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
 	key: rowNumber,
 	className: "bg-grey-200 h-10 w-full min-w-25 rounded-md"
 })))), /* @__PURE__ */ react.default.createElement(SkeletonButton, null));
 //#endregion
+//#region src/components/skeleton-loader/SkeletonColumnChart.tsx
+var getBarHeight = (groupIndex, columnIndex) => Math.round(90 + Math.abs(Math.sin(groupIndex + columnIndex + 1)) * 30);
+var ColumnGroup = ({ numberOfColumns, groupIndex }) => /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-col items-center gap-4" }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-end gap-2" }, Array.from({ length: numberOfColumns }, (_, i) => /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
+	key: i,
+	className: "h-(--height) w-5 rounded-t-full rounded-b-none",
+	style: { "--height": `${getBarHeight(groupIndex, i)}px` }
+}))), /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-2 w-14 rounded-full" }));
+var LegendItem$1 = () => /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-3 w-3 rounded-full" }), /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-3 w-24 rounded-full" }));
+var SkeletonColumnChart = ({ numberOfLabels = 2, numberOfGroups = 7, numberOfColumns = 1, className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-6", "flex-col", "gap-6", "w-full", className) }, /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center gap-4" }, Array.from({ length: numberOfLabels }, (_, i) => /* @__PURE__ */ react.default.createElement(LegendItem$1, { key: i })))), /* @__PURE__ */ react.default.createElement("div", { className: "flex items-end justify-between gap-2" }, Array.from({ length: numberOfGroups }, (_, i) => /* @__PURE__ */ react.default.createElement(ColumnGroup, {
+	key: i,
+	numberOfColumns,
+	groupIndex: i
+}))));
+//#endregion
+//#region src/components/skeleton-loader/SkeletonBarChart.tsx
+var getBarWidth = (rowIndex) => Math.round(40 + Math.abs(Math.sin(rowIndex + 1)) * 55);
+var LegendItem = () => /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-3 w-3 rounded-full" }), /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-3 w-24 rounded-full" }));
+var SkeletonBarChart = ({ numberOfLabels = 3, numberOfRows = 4, numberOfTicks = 4, className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-6", "flex-col", "gap-6", "w-full", className) }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center gap-4" }, Array.from({ length: numberOfLabels }, (_, i) => /* @__PURE__ */ react.default.createElement(LegendItem, { key: i }))), /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-col justify-between gap-4" }, Array.from({ length: numberOfRows }, (_, i) => /* @__PURE__ */ react.default.createElement("div", {
+	key: i,
+	className: "flex items-center gap-5"
+}, /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-3 w-20 shrink-0 rounded-full" }), /* @__PURE__ */ react.default.createElement("div", { className: "grow" }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
+	className: "h-5 w-(--width) rounded-full",
+	style: { "--width": `${getBarWidth(i)}%` }
+})))), /* @__PURE__ */ react.default.createElement("div", { className: "flex justify-between pl-24" }, Array.from({ length: numberOfTicks }, (_, i) => /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
+	key: i,
+	className: "h-2 w-8 rounded-full"
+})))));
+//#endregion
+//#region src/components/skeleton-loader/SkeletonPanelList.tsx
+var SkeletonPanelList = ({ className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("px-6", "flex-col", "w-full", className) }, /* @__PURE__ */ react.default.createElement("div", { className: "border-grey-100 flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0" }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "size-10 rounded-full" }), /* @__PURE__ */ react.default.createElement("div", { className: "grow" }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-4 w-2/3 rounded-full" })), /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-8 w-28 rounded-md" })));
+//#endregion
+//#region src/components/skeleton-loader/SkeletonSubjectList.tsx
+var SkeletonSubjectList = ({ className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-2", "flex-row", "flex-wrap", "items-center", "justify-between", "gap-4", "w-full", className) }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-22 max-w-xl grow rounded-xl" }), /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "size-10 shrink-0 rounded-md" }));
+//#endregion
 //#region src/components/skeleton-loader/index.ts
 var skeleton_loader_exports = /* @__PURE__ */ __exportAll({
+	BarChart: () => SkeletonBarChart,
 	Button: () => SkeletonButton,
 	Card: () => SkeletonCard,
+	ColumnChart: () => SkeletonColumnChart,
 	DoughnutChart: () => SkeletonDoughnutChart,
 	Heading: () => SkeletonHeading,
 	Loader: () => SkeletonLoader,
+	PanelList: () => SkeletonPanelList,
+	SubjectList: () => SkeletonSubjectList,
 	Table: () => SkeletonTable,
 	Tabs: () => SkeletonTabs
 });
@@ -8661,18 +8721,35 @@ var StyledTextarea = styled("textarea", {
 				"focus-within:z-1"
 			]
 		},
-		state: { error: [] }
+		state: { error: [] },
+		theme: {
+			white: [],
+			grey: []
+		}
 	},
 	defaultVariants: { appearance: "standard" },
-	compoundVariants: [{
-		state: "error",
-		appearance: "standard",
-		class: ["border-danger"]
-	}, {
-		state: "error",
-		appearance: "modern",
-		class: ["bg-danger-light", "focus-within:outline-danger"]
-	}]
+	compoundVariants: [
+		{
+			state: "error",
+			appearance: "standard",
+			class: ["border-danger"]
+		},
+		{
+			state: "error",
+			appearance: "modern",
+			class: ["bg-danger-light", "focus-within:outline-danger"]
+		},
+		{
+			appearance: "modern",
+			theme: "white",
+			class: ["bg-white"]
+		},
+		{
+			appearance: "modern",
+			theme: "grey",
+			class: ["bg-grey-100"]
+		}
+	]
 });
 var Textarea = react.forwardRef((props, ref) => /* @__PURE__ */ react.createElement(StyledTextarea, {
 	...props,
@@ -8681,12 +8758,13 @@ var Textarea = react.forwardRef((props, ref) => /* @__PURE__ */ react.createElem
 Textarea.displayName = "Textarea";
 //#endregion
 //#region src/components/textarea-field/TextareaField.tsx
-var TextareaField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }) => {
+var TextareaField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }) => {
 	const { register } = (0, react_hook_form.useFormContext)();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
+	const formTheme = context?.theme ?? theme;
 	return /* @__PURE__ */ react.createElement(FieldWrapper, {
 		className,
 		description,
@@ -8702,6 +8780,7 @@ var TextareaField = ({ className, hideLabel, label, name, validation, prompt, de
 		name,
 		ref,
 		appearance: formAppearance,
+		theme: formTheme,
 		...error && { state: "error" },
 		...remainingProps
 	}));