@websline/system-components 1.0.9 → 1.0.10-beta

package/dist/components/atoms/actions/button/button.variants.d.ts

@@ -34,9 +34,6 @@ export const buttonVariants: import("tailwind-variants").TVReturnType<{
         };
     };
     variant: {
-        filled: {
-            base: string;
-        };
         outlined: {
             base: string;
         };
@@ -84,9 +81,6 @@ export const buttonVariants: import("tailwind-variants").TVReturnType<{
         };
     };
     variant: {
-        filled: {
-            base: string;
-        };
         outlined: {
             base: string;
         };
@@ -134,9 +128,6 @@ export const buttonVariants: import("tailwind-variants").TVReturnType<{
         };
     };
     variant: {
-        filled: {
-            base: string;
-        };
         outlined: {
             base: string;
         };

package/dist/components/atoms/actions/button/button.variants.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 
 const buttonVariants = tv({
 	slots: {
-		base: "inline-flex cursor-pointer items-center rounded align-middle transition duration-200 select-none focus:outline-offset-2",
+		base: "inline-flex cursor-pointer items-center rounded-lg border border-transparent align-middle transition duration-200 select-none focus:outline-offset-2",
 		icon: "flex h-lh items-center",
 		spinner: "flex h-lh items-center justify-center",
 	},
@@ -29,27 +29,24 @@ const buttonVariants = tv({
 		},
 		size: {
 			small: {
-				base: "gap-2 px-3 py-1.25 button-small",
+				base: "gap-2 px-3 py-1.25 ui-button-small",
 				spinner: "w-4",
 			},
 			medium: {
-				base: "gap-2 px-3 py-1.5 button-default",
+				base: "gap-2 px-3 py-[7px] ui-button-default",
 				spinner: "w-5",
 			},
 			large: {
-				base: "gap-3 px-3 py-2.5 button-default",
+				base: "gap-3 px-3 py-[7px] ui-button-default leading-6",
 				spinner: "w-5",
 			},
 		},
 		variant: {
-			filled: {
-				base: "border-1 border-transparent",
-			},
 			outlined: {
-				base: "border-1",
+				base: "border-current",
 			},
 			text: {
-				base: "relative !px-0 after:absolute after:bottom-0 after:left-0 after:h-[1.5px] after:w-0 after:transition-all after:duration-300 after:content-[''] hover:after:w-full",
+				base: "relative px-0! after:absolute after:bottom-0 after:left-0 after:h-[1.5px] after:w-0 after:transition-all after:duration-300 after:content-[''] hover:after:w-full",
 			},
 		},
 	},
@@ -65,7 +62,7 @@ const buttonVariants = tv({
 			color: "primary",
 			variant: "outlined",
 			class: {
-				base: "border-blue-500 text-blue-500 hover:border-blue-600 hover:bg-blue-600 hover:text-white dark:border-blue-400 dark:text-blue-400 dark:hover:border-blue-500 dark:hover:bg-blue-500",
+				base: "text-blue-500 hover:border-blue-600 hover:bg-blue-600 hover:text-white dark:text-blue-400 dark:hover:border-blue-500 dark:hover:bg-blue-500",
 			},
 		},
 		{
@@ -78,7 +75,7 @@ const buttonVariants = tv({
 			color: "secondary",
 			variant: "outlined",
 			class: {
-				base: "text-neutral-900 hover:border-neutral-700 hover:bg-neutral-700 hover:text-white dark:border-neutral-200 dark:text-neutral-200 dark:hover:border-neutral-500 dark:hover:bg-neutral-500 dark:hover:text-inherit",
+				base: "text-neutral-900 hover:border-neutral-700 hover:bg-neutral-700 hover:text-white dark:text-neutral-200 dark:hover:border-neutral-500 dark:hover:bg-neutral-500 dark:hover:text-neutral-900",
 			},
 		},
 		{
@@ -92,7 +89,7 @@ const buttonVariants = tv({
 			color: "success",
 			variant: "outlined",
 			class: {
-				base: "border-green-500 text-green-500 hover:border-green-700 hover:bg-green-700 hover:text-white dark:border-green-500 dark:text-green-500 dark:hover:border-green-700 dark:hover:bg-green-700",
+				base: "text-green-500 hover:border-green-700 hover:bg-green-700 hover:text-white dark:text-green-500 dark:hover:border-green-700 dark:hover:bg-green-700",
 			},
 		},
 		{
@@ -106,7 +103,7 @@ const buttonVariants = tv({
 			color: "error",
 			variant: "outlined",
 			class: {
-				base: "border-red-500 text-red-500 hover:border-red-700 hover:bg-red-700 hover:text-white dark:border-red-500 dark:text-red-500 dark:hover:border-red-700 dark:hover:bg-red-700",
+				base: "text-red-500 hover:border-red-700 hover:bg-red-700 hover:text-white dark:text-red-500 dark:hover:border-red-700 dark:hover:bg-red-700",
 			},
 		},
 		{

package/dist/components/atoms/actions/closeButton/CloseButton.svelte

@@ -67,7 +67,7 @@
 	onclick={handleClose}
 	onmouseenter={handleMouseOver}
 	{...rest}>
-	<Icon class="relative z-10" name="close" size={16} />
+	<Icon class="relative z-10" name="closeSmall" size={16} />
 	{#if animate}
 		<span
 			bind:this={barEl}

package/dist/components/atoms/actions/iconButton/iconButton.variants.js

@@ -19,9 +19,9 @@ const iconButtonVariants = tv({
 			large: "p-2.75",
 		},
 		variant: {
-			filled: "border-1 border-transparent",
-			outlined: "border-1",
-			transparent: "border-1 border-transparent",
+			filled: "border border-transparent",
+			outlined: "border",
+			transparent: "border border-transparent",
 		},
 	},
 	compoundVariants: [

package/dist/components/atoms/avatar/avatar.variants.js

@@ -5,7 +5,7 @@ const avatarVariants = tv({
 		base: "flex overflow-hidden",
 		image: "h-full w-full object-cover",
 		fallback:
-			"flex h-full w-full items-center justify-center bg-blue-100 heading-h6 text-neutral-900",
+			"flex h-full w-full items-center justify-center bg-blue-100 ui-title-2 text-neutral-900",
 	},
 	variants: {
 		as: {
@@ -13,7 +13,7 @@ const avatarVariants = tv({
 		},
 		shape: {
 			circle: "rounded-full",
-			square: "rounded",
+			square: "rounded-sm",
 		},
 	},
 });

package/dist/components/atoms/badge/badge.variants.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 
 const badgeVariants = tv({
 	slots: {
-		base: "absolute inline-flex items-center justify-center rounded-full body-extra-small select-none",
+		base: "absolute inline-flex items-center justify-center rounded-full ui-caption-helper select-none",
 		wrapper: "relative inline-flex gap-0.5",
 	},
 	variants: {

package/dist/components/atoms/chip/chip.variants.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 
 const chipVariants = tv({
 	base: [
-		"relative inline-flex items-center gap-1 rounded border align-middle select-none [button]:cursor-pointer",
+		"relative inline-flex items-center gap-1 rounded-sm border align-middle select-none [button]:cursor-pointer",
 		"ring-blue-500 ring-offset-1 ring-offset-transparent outline-0 focus-visible:ring-1 dark:ring-blue-400",
 	],
 	variants: {
@@ -15,7 +15,7 @@ const chipVariants = tv({
 			warning: "bg-yellow-500 text-neutral-900",
 		},
 		size: {
-			small: "min-h-[20px] px-2 py-0.5 body-extra-small",
+			small: "min-h-[20px] px-2 py-0.5 ui-tag-badge",
 			big: "min-h-[28px] px-3 py-1.5 body-small",
 		},
 		iconPosition: {

package/dist/components/atoms/feedback/progressBar/progressBar.variants.js

@@ -2,9 +2,9 @@ import { tv } from "tailwind-variants";
 
 const progressBarVariants = tv({
 	slots: {
-		bar: "h-1 w-full rounded-sm bg-neutral-100 after:block after:h-full after:w-[var(--progress)] after:rounded-sm after:bg-neutral-900 after:transition-[width] after:duration-300 after:ease-in-out dark:bg-neutral-900 dark:after:bg-neutral-100",
+		bar: "h-1 w-full rounded-sm bg-neutral-100 after:block after:h-full after:w-(--progress) after:rounded-sm after:bg-neutral-900 after:transition-[width] after:duration-300 after:ease-in-out dark:bg-neutral-900 dark:after:bg-neutral-100",
 		base: "flex items-center gap-4",
-		label: "body-small text-nowrap text-neutral-500 tabular-nums",
+		label: "ui-select-label text-nowrap text-neutral-500 tabular-nums",
 	},
 });
 

package/dist/components/atoms/helperText/helperText.variants.d.ts

@@ -2,7 +2,7 @@ export const helperTextVariants: import("tailwind-variants").TVReturnType<{
     error: {
         true: string;
     };
-}, undefined, "body-extra-small text-neutral-500", {
+}, undefined, "ui-caption-helper text-neutral-500", {
     error: {
         true: string;
     };
@@ -10,4 +10,4 @@ export const helperTextVariants: import("tailwind-variants").TVReturnType<{
     error: {
         true: string;
     };
-}, undefined, "body-extra-small text-neutral-500", unknown, unknown, undefined>>;
+}, undefined, "ui-caption-helper text-neutral-500", unknown, unknown, undefined>>;

package/dist/components/atoms/helperText/helperText.variants.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 
 const helperTextVariants = tv({
-	base: "body-extra-small text-neutral-500",
+	base: "ui-caption-helper text-neutral-500",
 	variants: {
 		error: {
 			true: "text-red-500",

package/dist/components/atoms/input/input.variants.js

@@ -6,7 +6,7 @@ import { tv } from "tailwind-variants";
 const inputBaseVariant = tv({
 	slots: {
 		base: [
-			"w-full rounded bg-transparent px-4 body-default",
+			"w-full rounded-lg bg-transparent px-4 body-small",
 			"text-neutral-900 placeholder-neutral-500 dark:text-neutral-200",
 			"bg-white dark:bg-neutral-800",
 			"outline-transparent transition-[border,color,outline] duration-300",

package/dist/components/atoms/label/label.variants.d.ts

@@ -5,7 +5,7 @@ export const labelVariants: import("tailwind-variants").TVReturnType<{
     hidden: {
         true: string;
     };
-}, undefined, "body-small text-neutral-500", {
+}, undefined, "ui-select-label text-neutral-500", {
     error: {
         true: string;
     };
@@ -19,4 +19,4 @@ export const labelVariants: import("tailwind-variants").TVReturnType<{
     hidden: {
         true: string;
     };
-}, undefined, "body-small text-neutral-500", unknown, unknown, undefined>>;
+}, undefined, "ui-select-label text-neutral-500", unknown, unknown, undefined>>;

package/dist/components/atoms/label/label.variants.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 
 const labelVariants = tv({
-	base: "body-small text-neutral-500",
+	base: "ui-select-label text-neutral-500",
 	variants: {
 		error: {
 			true: "text-red-500",

package/dist/components/atoms/select/select.variants.js

@@ -6,7 +6,7 @@ const selectVariants = tv({
 	slots: {
 		base: [
 			"flex items-center",
-			"[&::picker(select)]:my-1 [&::picker(select)]:rounded [&::picker(select)]:border-0 [&::picker(select)]:p-1",
+			"[&::picker(select)]:my-1 [&::picker(select)]:rounded-sm [&::picker(select)]:border-0 [&::picker(select)]:p-1",
 			"[&::picker-icon]:hidden",
 			"[&::picker(select)]:bg-white [&::picker(select)]:shadow-sm dark:[&::picker(select)]:bg-neutral-800",
 			"bg-none after:bg-current after:bg-size-[100%] after:bg-center after:bg-no-repeat",
@@ -14,7 +14,7 @@ const selectVariants = tv({
 			"[&:open]:after:rotate-180",
 		],
 		option: [
-			"flex rounded p-2 body-small",
+			"flex rounded-sm p-2 ui-select-label",
 			"bg-white dark:bg-neutral-800",
 			"bg-linear-to-r to-transparent",
 			"[&::checkmark]:order-1 [&::checkmark]:ml-auto [&::checkmark]:shrink-0",

package/dist/components/molecules/notification/notification.variants.js

@@ -2,12 +2,12 @@ import { tv } from "tailwind-variants";
 
 const notificationVariants = tv({
 	slots: {
-		base: "grid grid-cols-[40px_1fr_24px] gap-2 rounded-lg border-1 border-neutral-300 bg-white p-2 dark:border-neutral-700 dark:bg-neutral-900",
-		close: "col-[3] self-start",
+		base: "grid grid-cols-[40px_1fr_24px] gap-2 rounded-lg border border-neutral-300 bg-white p-2 dark:border-neutral-700 dark:bg-neutral-900",
+		close: "col-3 self-start",
 		icon: "flex h-10 w-10 items-center justify-center rounded-sm text-white",
 		content: "flex flex-col justify-center",
-		message: "body-extra-small text-neutral-500",
-		title: "body-default dark:text-white",
+		message: "ui-caption-helper text-neutral-500",
+		title: "body-small dark:text-white",
 	},
 	variants: {
 		variant: {

package/dist/components/molecules/pickers/colorSwatch/colorSwatch.variants.js

@@ -2,8 +2,8 @@ import { tv } from "tailwind-variants";
 
 const colorSwatchVariants = tv({
 	slots: {
-		base: "flex cursor-pointer items-center justify-center gap-1 rounded transition duration-200 select-none hover:bg-neutral-300 dark:hover:bg-neutral-700",
-		iconText: "flex h-4 w-4 items-center justify-center rounded",
+		base: "flex cursor-pointer items-center justify-center gap-1 rounded-sm transition duration-200 select-none hover:bg-neutral-300 dark:hover:bg-neutral-700",
+		iconText: "flex h-4 w-4 items-center justify-center rounded-sm",
 		iconArrow: "dark:text-white",
 	},
 	variants: {

package/dist/components/molecules/richTextEditor/richTextEditor.variants.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 
 const richTextEditorVariants = tv({
 	slots: {
-		base: "body-default text-neutral-800 dark:text-white",
+		base: "body-small text-neutral-800 dark:text-white",
 		toolbar:
 			"pointer flex gap-0.5 rounded-t-sm border border-b-0 border-neutral-300 px-5 py-2 dark:border-neutral-700",
 		field: [

package/dist/components/molecules/selectorCard/selectorCard.variants.js

@@ -2,11 +2,12 @@ import { tv } from "tailwind-variants";
 
 const selectorCardVariants = tv({
 	slots: {
-		base: "flex cursor-pointer gap-3 rounded-sm border border-neutral-300 bg-white px-4 py-3 dark:border-neutral-700 dark:bg-neutral-800",
-		content: "flex grow flex-col items-start gap-1",
-		helperText: "body-small text-neutral-500",
+		base: "flex cursor-pointer gap-3 rounded-lg border border-neutral-300 bg-white px-4 py-3 dark:border-neutral-700 dark:bg-neutral-800",
+		content: "",
+		helperText: "ui-caption-helper text-neutral-500",
 		input: "shrink-0",
-		label: "cursor-[inherit] heading-h6 text-neutral-900 dark:text-neutral-200",
+		label:
+			"mb-0.5 cursor-[inherit] ui-title-2 text-neutral-900 dark:text-neutral-200",
 	},
 	variants: {
 		disabled: {
@@ -16,7 +17,7 @@ const selectorCardVariants = tv({
 		},
 		error: {
 			true: {
-				base: "!border-red-500 outline-1 !outline-red-500",
+				base: "border-red-500! outline-1 outline-red-500!",
 				label: "text-red-500 dark:text-red-500",
 			},
 		},

package/dist/components/molecules/toggleGroup/ToggleGroupItem.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { getContext } from "svelte";
+	import { Icon } from "../../../index.js";
 	import {
 		toggleGroupItemVariants,
 		toggleGroupItemTabVariants,
@@ -9,15 +10,16 @@
 	 * @typedef {Object} Props
 	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {string} [icon] The name of the icon to display alongside the content
 	 * @property {string} [value=""] The value of the toggle group item
 	 */
 
 	/** @type {Props} */
-	let { children, class: className = "", value: localeValue } = $props();
+	let { children, class: className = "", icon, value: localeValue } = $props();
 
-	let store = getContext("toggle-group-store");
-	let { appearance, send, receive, size, variant } = $derived(store());
-	let isActive = $derived(store().value === localeValue);
+	let store = $derived(getContext("toggle-group-store")());
+	let { appearance, send, receive, size, variant } = $derived(store);
+	let isActive = $derived(store.value === localeValue);
 
 	let stylesByVariant = $derived.by(() => {
 		if (variant === "tabs") {
@@ -33,10 +35,18 @@
 		class={stylesByVariant.button({ appearance, class: className, isActive, size })}
 		role="tab"
 		onclick={() => {
-			store().update(localeValue);
+			store.update(localeValue);
 		}}
 		type="button">
-		<span class={stylesByVariant.span()}>{@render children?.()}</span>
+		<span class={stylesByVariant.span()}>
+			{#if icon}
+				<Icon
+					class={stylesByVariant.icon()}
+					name={icon}
+					size={variant === "tabs" || size === "small" ? 16 : 24} />
+			{/if}
+			{@render children?.()}
+		</span>
 		{#if isActive}
 			<div
 				class={stylesByVariant.trigger({ appearance })}

package/dist/components/molecules/toggleGroup/ToggleGroupItem.svelte.d.ts

@@ -12,6 +12,10 @@ declare const ToggleGroupItem: import("svelte").Component<{
      * Additional CSS classes to apply to the component
      */
     class?: string;
+    /**
+     * The name of the icon to display alongside the content
+     */
+    icon?: string;
     /**
      * The value of the toggle group item
      */
@@ -26,6 +30,10 @@ type Props = {
      * Additional CSS classes to apply to the component
      */
     class?: string;
+    /**
+     * The name of the icon to display alongside the content
+     */
+    icon?: string;
     /**
      * The value of the toggle group item
      */

package/dist/components/molecules/toggleGroup/toggleGroup.variants.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 
 const toggleGroupVariants = tv({
 	slots: {
-		base: "overflow-hidden rounded-sm bg-current",
+		base: "overflow-hidden rounded-lg bg-current",
 		tabs: "flex gap-1",
 	},
 	variants: {
@@ -12,7 +12,7 @@ const toggleGroupVariants = tv({
 		},
 		size: {
 			small: {
-				tabs: "h-6 p-0.5",
+				tabs: "h-9 p-1",
 			},
 			medium: {
 				tabs: "h-10 p-1",
@@ -24,7 +24,7 @@ const toggleGroupVariants = tv({
 const toggleGroupTabVariants = tv({
 	slots: {
 		base: "",
-		tabs: "flex h-10 gap-5 border-b border-b-neutral-500",
+		tabs: "flex h-9 gap-4 border-b border-neutral-300 dark:border-neutral-700",
 	},
 });
 

package/dist/components/molecules/toggleGroup/toggleGroupItem.variants.d.ts

@@ -18,6 +18,7 @@ export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     button: string;
+    icon: string;
     span: string;
     trigger: string;
 }, undefined, {
@@ -40,6 +41,7 @@ export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     button: string;
+    icon: string;
     span: string;
     trigger: string;
 }, import("tailwind-variants").TVReturnType<{
@@ -62,6 +64,7 @@ export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     button: string;
+    icon: string;
     span: string;
     trigger: string;
 }, undefined, unknown, unknown, undefined>>;
@@ -77,6 +80,7 @@ export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnTyp
 }, {
     base: string;
     button: string;
+    icon: string;
     span: string;
     trigger: string;
 }, undefined, {
@@ -91,6 +95,7 @@ export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnTyp
 }, {
     base: string;
     button: string;
+    icon: string;
     span: string;
     trigger: string;
 }, import("tailwind-variants").TVReturnType<{
@@ -105,6 +110,7 @@ export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnTyp
 }, {
     base: string;
     button: string;
+    icon: string;
     span: string;
     trigger: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/components/molecules/toggleGroup/toggleGroupItem.variants.js

@@ -4,8 +4,9 @@ const toggleGroupItemVariants = tv({
 	slots: {
 		base: "relative h-full w-full whitespace-nowrap",
 		button:
-			"block h-full w-full cursor-pointer rounded-sm bg-transparent button-small transition-[background,color]",
-		span: "relative z-2 block",
+			"block h-full w-full cursor-pointer rounded-sm bg-transparent ui-button-small transition-[background,color]",
+		icon: "shrink-0",
+		span: "relative z-2 flex items-center justify-center gap-2",
 		trigger: "absolute inset-0 z-1 rounded-sm bg-white shadow-sm",
 	},
 	variants: {
@@ -19,7 +20,7 @@ const toggleGroupItemVariants = tv({
 		},
 		size: {
 			small: {
-				button: "px-1.5",
+				button: "px-1",
 			},
 			medium: {
 				button: "px-3",
@@ -48,19 +49,19 @@ const toggleGroupItemVariants = tv({
 
 const toggleGroupItemTabVariants = tv({
 	slots: {
-		base: "relative h-full w-full px-1 whitespace-nowrap",
-		button: "h-full w-full cursor-pointer button-default transition-[color]",
-		span: "block",
-		trigger:
-			"absolute -bottom-px left-0 h-0.5 w-full rounded-t-xs bg-blue-500 dark:bg-blue-400",
+		base: "relative h-full w-full whitespace-nowrap text-neutral-900 dark:text-neutral-200",
+		button: "h-full w-full cursor-pointer ui-button-default transition-[color]",
+		icon: "shrink-0",
+		span: "flex items-center justify-center gap-1",
+		trigger: "absolute -bottom-px left-0 h-0.5 w-full rounded-t-xs bg-current",
 	},
 	variants: {
 		isActive: {
 			true: {
-				button: "text-neutral-900 dark:text-white",
+				button: "text-current",
 			},
 			false: {
-				button: "text-neutral-500 hover:text-neutral-900 dark:hover:text-white",
+				button: "text-neutral-500 hover:text-current",
 			},
 		},
 	},

package/dist/components/organisms/modal/modal.variants.js

@@ -4,11 +4,12 @@ const modalVariants = tv({
 	slots: {
 		close: "ml-auto",
 		container:
-			"my-4 grid max-h-[calc(100vh-32px)] w-[calc(100vw-32px)] min-w-xs grid-rows-[auto_1fr] overflow-hidden rounded-2xl bg-white leading-[1.486] shadow-sm dark:bg-neutral-800 dark:text-neutral-200",
-		header: "flex items-start border-b border-neutral-300 px-4 py-3",
+			"my-4 grid max-h-[calc(100vh-32px)] w-[calc(100vw-32px)] min-w-xs grid-rows-[auto_1fr] overflow-hidden rounded-lg bg-white body-small shadow-sm outline-8 outline-white/90 dark:bg-neutral-800 dark:text-neutral-200 dark:outline-neutral-800/90",
+		header:
+			"flex items-end border-b border-neutral-300 px-4 py-3 ui-title-2 dark:border-neutral-700",
 		body: "h-full overflow-auto",
 		overlay: "fixed inset-0 z-modal-backdrop bg-black/25",
-		positioner: "fixed inset-0 z-1 z-modal grid items-center justify-items-center",
+		positioner: "fixed inset-0 z-modal grid items-center justify-items-center",
 		trigger: "cursor-pointer",
 	},
 	variants: {

package/dist/components/organisms/popover/popover.variants.js

@@ -7,7 +7,7 @@ const popoverVariants = tv({
 		content:
 			"flex flex-col-reverse rounded-2xl bg-white shadow-sm dark:bg-neutral-800",
 		header:
-			"flex items-center justify-between gap-3 border-b border-gray-300 heading-h6 dark:text-neutral-200",
+			"flex items-center justify-between gap-3 border-b border-gray-300 ui-title-2 dark:text-neutral-200",
 		trigger: "cursor-pointer",
 	},
 	variants: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/system-components",
-  "version": "1.0.9",
+  "version": "1.0.10-beta",
   "publishConfig": {
     "access": "public"
   },