@websline/system-components 1.0.0 → 1.0.1

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

@@ -9,7 +9,7 @@ const buttonVariants = tv({
 	variants: {
 		disabled: {
 			true: {
-				base: "opacity-40 pointer-events-none",
+				base: "pointer-events-none opacity-40",
 			},
 		},
 		fullWidth: {
@@ -29,27 +29,27 @@ const buttonVariants = tv({
 		},
 		size: {
 			small: {
-				base: "py-1.25 px-3 gap-2 button-small",
+				base: "gap-2 px-3 py-1.25 button-small",
 				spinner: "w-4",
 			},
 			medium: {
-				base: "py-1.5 px-3 gap-2 button-default",
+				base: "gap-2 px-3 py-1.5 button-default",
 				spinner: "w-5",
 			},
 			large: {
-				base: "py-2.5 px-3 gap-3 button-default",
+				base: "gap-3 px-3 py-2.5 button-default",
 				spinner: "w-5",
 			},
 		},
 		variant: {
 			filled: {
-				base: "border-transparent border-1",
+				base: "border-1 border-transparent",
 			},
 			outlined: {
 				base: "border-1",
 			},
 			text: {
-				base: "relative !px-0 after:content-[''] after:absolute after:left-0 after:bottom-0 after:h-[1.5px] after:w-0 hover:after:w-full after:transition-all after:duration-300",
+				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 +65,7 @@ const buttonVariants = tv({
 			color: "primary",
 			variant: "outlined",
 			class: {
-				base: "text-blue-500 border-blue-500 hover:bg-blue-600 hover:border-blue-600 hover:text-white dark:text-blue-400 dark:border-blue-400 dark:hover:bg-blue-500 dark:hover:border-blue-500",
+				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",
 			},
 		},
 		{
@@ -78,7 +78,7 @@ const buttonVariants = tv({
 			color: "secondary",
 			variant: "outlined",
 			class: {
-				base: "text-neutral-900 hover:bg-neutral-700 hover:text-white hover:border-neutral-700 dark:border-neutral-200 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:hover:border-neutral-500 dark:hover:text-inherit",
+				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",
 			},
 		},
 		{
@@ -92,7 +92,7 @@ const buttonVariants = tv({
 			color: "success",
 			variant: "outlined",
 			class: {
-				base: "text-green-500 border-green-500 hover:bg-green-700 hover:border-green-700 hover:text-white dark:text-green-500 dark:border-green-500 dark:hover:bg-green-700 dark:hover:border-green-700",
+				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",
 			},
 		},
 		{

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

@@ -3,8 +3,8 @@ import { tv } from "tailwind-variants";
 const closeButtonVariants = tv({
 	slots: {
 		button:
-			"cursor-pointer select-none p-1 transition duration-200 bg-white dark:bg-neutral-800 dark:text-white overflow-hidden relative",
-		bar: "absolute bg-gray-300 dark:bg-neutral-700 inset-[0px] z-0",
+			"relative cursor-pointer overflow-hidden bg-white p-1 transition duration-200 select-none dark:bg-neutral-800 dark:text-white",
+		bar: "absolute inset-[0px] z-0 bg-gray-300 dark:bg-neutral-700",
 	},
 	variants: {
 		shape: {

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

@@ -4,7 +4,7 @@ const iconButtonVariants = tv({
 	base: "inline-flex cursor-pointer transition duration-200 select-none",
 	variants: {
 		disabled: {
-			true: "opacity-40 pointer-events-none",
+			true: "pointer-events-none opacity-40",
 		},
 		loading: {
 			true: "pointer-events-none",
@@ -19,9 +19,9 @@ const iconButtonVariants = tv({
 			large: "p-2.75",
 		},
 		variant: {
-			filled: "border-transparent border-1",
+			filled: "border-1 border-transparent",
 			outlined: "border-1",
-			transparent: "border-transparent border-1",
+			transparent: "border-1 border-transparent",
 		},
 	},
 	compoundVariants: [
@@ -35,7 +35,7 @@ const iconButtonVariants = tv({
 			color: "primary",
 			variant: "outlined",
 			class:
-				"text-blue-500 border-blue-500 hover:bg-blue-600 hover:border-blue-600 hover:text-white dark:text-blue-400 dark:border-blue-400 dark:hover:bg-blue-500 dark:hover:border-blue-500",
+				"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",
 		},
 		{
 			color: "secondary",
@@ -47,7 +47,7 @@ const iconButtonVariants = tv({
 			color: "secondary",
 			variant: "outlined",
 			class:
-				"text-neutral-900 hover:bg-neutral-900 hover:text-white hover:border-neutral-900 dark:border-white dark:text-white dark:hover:bg-neutral-200 dark:hover:border-neutral-200 dark:hover:text-inherit",
+				"text-neutral-900 hover:border-neutral-900 hover:bg-neutral-900 hover:text-white dark:border-white dark:text-white dark:hover:border-neutral-200 dark:hover:bg-neutral-200 dark:hover:text-inherit",
 		},
 		{
 			color: "success",
@@ -59,7 +59,7 @@ const iconButtonVariants = tv({
 			color: "success",
 			variant: "outlined",
 			class:
-				"text-green-500 border-green-500 hover:bg-green-700 hover:border-green-700 hover:text-white dark:text-green-500 dark:border-green-500 dark:hover:bg-green-700 dark:hover:border-green-700",
+				"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",
 		},
 		{
 			color: "danger",
@@ -71,7 +71,7 @@ const iconButtonVariants = tv({
 			color: "danger",
 			variant: "outlined",
 			class:
-				"text-red-500 border-red-500 hover:bg-red-700 hover:border-red-700 hover:text-white dark:text-red-500 dark:border-red-500 dark:hover:bg-red-700 dark:hover:border-red-700",
+				"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",
 		},
 		{
 			shape: "square",
@@ -83,7 +83,7 @@ const iconButtonVariants = tv({
 			shape: "square",
 			variant: "filled",
 			class:
-				"bg-neutral-100 hover:bg-neutral-300 text-neutral-900 dark:bg-neutral-900 dark:text-white dark:hover:bg-neutral-700",
+				"bg-neutral-100 text-neutral-900 hover:bg-neutral-300 dark:bg-neutral-900 dark:text-white dark:hover:bg-neutral-700",
 		},
 	],
 });

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

@@ -2,9 +2,9 @@ import { tv } from "tailwind-variants";
 
 const avatarVariants = tv({
 	slots: {
-		base: "overflow-hidden flex",
-		image: "object-cover w-full h-full",
-		fallback: "bg-blue-100 w-full h-full flex items-center justify-center heading-h6",
+		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",
 	},
 	variants: {
 		as: {

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

@@ -2,8 +2,8 @@ import { tv } from "tailwind-variants";
 
 const badgeVariants = tv({
 	slots: {
-		base: "inline-flex absolute items-center justify-center rounded-full select-none body-extra-small",
-		wrapper: "inline-flex gap-0.5 relative",
+		base: "absolute inline-flex items-center justify-center rounded-full body-extra-small select-none",
+		wrapper: "relative inline-flex gap-0.5",
 	},
 	variants: {
 		color: {
@@ -23,12 +23,12 @@ const badgeVariants = tv({
 				base: "bottom-0 translate-y-1/2",
 			},
 			inline: {
-				wrapper: "items-center static",
+				wrapper: "static items-center",
 				base: "static",
 			},
 		},
 		count: {
-			true: "px-1.5 py-0.5 size-auto",
+			true: "size-auto px-1.5 py-0.5",
 			false: "size-3",
 		},
 	},

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

@@ -18,7 +18,7 @@ export const chipVariants: import("tailwind-variants").TVReturnType<{
         outline: string;
         dashed: string;
     };
-}, undefined, "\n        inline-flex items-center align-middle rounded select-none relative border gap-1 [button]:cursor-pointer\n        focus-visible:ring-1 ring-blue-500 dark:ring-blue-400 ring-offset-1 outline-0 ring-offset-transparent\n    ", {
+}, undefined, string[], {
     color: {
         default: string;
         primary: string;
@@ -58,4 +58,4 @@ export const chipVariants: import("tailwind-variants").TVReturnType<{
         outline: string;
         dashed: string;
     };
-}, undefined, "\n        inline-flex items-center align-middle rounded select-none relative border gap-1 [button]:cursor-pointer\n        focus-visible:ring-1 ring-blue-500 dark:ring-blue-400 ring-offset-1 outline-0 ring-offset-transparent\n    ", unknown, unknown, undefined>>;
+}, undefined, string[], unknown, unknown, undefined>>;

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

@@ -1,10 +1,10 @@
 import { tv } from "tailwind-variants";
 
 const chipVariants = tv({
-	base: `
-        inline-flex items-center align-middle rounded select-none relative border gap-1 [button]:cursor-pointer
-        focus-visible:ring-1 ring-blue-500 dark:ring-blue-400 ring-offset-1 outline-0 ring-offset-transparent
-    `,
+	base: [
+		"relative inline-flex items-center gap-1 rounded 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: {
 		color: {
 			default:
@@ -15,8 +15,8 @@ const chipVariants = tv({
 			warning: "bg-yellow-500 text-neutral-900",
 		},
 		size: {
-			small: "body-extra-small py-0.5 px-2 min-h-[20px]",
-			big: "body-small py-1.5 px-3 min-h-[28px]",
+			small: "min-h-[20px] px-2 py-0.5 body-extra-small",
+			big: "min-h-[28px] px-3 py-1.5 body-small",
 		},
 		iconPosition: {
 			end: "flex-row-reverse",
@@ -24,7 +24,7 @@ const chipVariants = tv({
 		variant: {
 			filled: "border-transparent",
 			outline: "bg-transparent dark:bg-transparent",
-			dashed: "bg-transparent border-dashed dark:bg-transparent",
+			dashed: "border-dashed bg-transparent dark:bg-transparent",
 		},
 	},
 	compoundVariants: [
@@ -38,7 +38,7 @@ const chipVariants = tv({
 			color: "primary",
 			variant: ["outline", "dashed"],
 			class:
-				"text-blue-500 border-blue-500 dark:text-neutral-100 dark:border-blue-400",
+				"border-blue-500 text-blue-500 dark:border-blue-400 dark:text-neutral-100",
 		},
 		{
 			color: "error",
@@ -53,7 +53,7 @@ const chipVariants = tv({
 		{
 			color: "warning",
 			variant: ["outline", "dashed"],
-			class: "text-neutral-900 border-yellow-500 dark:text-yellow-600",
+			class: "border-yellow-500 text-neutral-900 dark:text-yellow-600",
 		},
 		// Selected
 		{
@@ -69,12 +69,12 @@ const chipVariants = tv({
 		{
 			selected: true,
 			color: "error",
-			class: "bg-red-700 ",
+			class: "bg-red-700",
 		},
 		{
 			selected: true,
 			color: "success",
-			class: "bg-green-700 ",
+			class: "bg-green-700",
 		},
 		{
 			selected: true,
@@ -92,19 +92,19 @@ const chipVariants = tv({
 			selected: true,
 			variant: ["outline", "dashed"],
 			color: "primary",
-			class: "text-neutral-100 bg-blue-600 border-blue-600 dark:border-blue-500",
+			class: "border-blue-600 bg-blue-600 text-neutral-100 dark:border-blue-500",
 		},
 		{
 			selected: true,
 			variant: ["outline", "dashed"],
 			color: "error",
-			class: "text-neutral-100 border-red-700 dark:bg-red-700",
+			class: "border-red-700 text-neutral-100 dark:bg-red-700",
 		},
 		{
 			selected: true,
 			variant: ["outline", "dashed"],
 			color: "success",
-			class: "text-neutral-100 border-green-700 dark:bg-green-700",
+			class: "border-green-700 text-neutral-100 dark:bg-green-700",
 		},
 		{
 			selected: true,

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

@@ -1,6 +1,6 @@
 export const colorChipVariants: import("tailwind-variants").TVReturnType<{
     clickable: {
-        true: string;
+        true: string[];
     };
     shape: {
         circle: string;
@@ -13,7 +13,7 @@ export const colorChipVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "border border-transparent", {
     clickable: {
-        true: string;
+        true: string[];
     };
     shape: {
         circle: string;
@@ -26,7 +26,7 @@ export const colorChipVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     clickable: {
-        true: string;
+        true: string[];
     };
     shape: {
         circle: string;

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

@@ -4,13 +4,15 @@ const colorChipVariants = tv({
 	base: "border border-transparent",
 	variants: {
 		clickable: {
-			true: `cursor-pointer 
-        hover:brightness-90 focus:outline-none
-        active:brightness-75 
-        transition duration-150 ease-in-out 
-        hover:ring-2 focus:ring-2 
-        hover:ring-offset-1 focus:ring-offset-1 
-        hover:ring-blue-500 focus:ring-blue-500`,
+			true: [
+				"cursor-pointer",
+				"hover:brightness-90 focus:outline-none",
+				"active:brightness-75",
+				"transition duration-150 ease-in-out",
+				"hover:ring-2 focus:ring-2",
+				"hover:ring-offset-1 focus:ring-offset-1",
+				"hover:ring-blue-500 focus:ring-blue-500",
+			],
 		},
 		shape: {
 			circle: "rounded-full",

package/dist/components/atoms/icon/Icon.svelte

@@ -44,7 +44,7 @@
 {/if}
 
 <style>
-	:global(.cms-icon path) {
+	:global(.cms-icon [stroke-width]) {
 		vector-effect: non-scaling-stroke;
 	}
 </style>

package/dist/components/atoms/icon/components/Calendar.svelte

@@ -0,0 +1,27 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M3 10.1053H21M3 10.1053V20.0526C3 20.5759 3.42415 21 3.94737 21H20.0526C20.5759 21 21 20.5759 21 20.0526V10.1053M3 10.1053V5.36842C3 4.8452 3.42415 4.42105 3.94737 4.42105H20.0526C20.5759 4.42105 21 4.8452 21 5.36842V10.1053M8.21053 3V6.78947M15.7895 3V6.78947M13.8947 17.2105H16.7368M7.26316 17.2105H10.1053M13.8947 13.4211H16.7368M7.26316 13.4211H10.1053"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

package/dist/components/atoms/icon/components/Calendar.svelte.d.ts

@@ -0,0 +1,41 @@
+export default Calendar;
+type Calendar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Calendar: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/CheckboxStack.svelte

@@ -0,0 +1,27 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M21 6.10358V20.9744C21 21.5408 20.5867 22 20.0769 22H6.6939M6.69233 9.94142L9.46143 12.7748L14.077 7.49701M16.3847 2H4.38462C3.61992 2 3 2.68879 3 3.53846V16.8718C3 17.7214 3.61992 18.4102 4.38462 18.4102H16.3847C17.1494 18.4102 17.7693 17.7214 17.7693 16.8718V3.53846C17.7693 2.68879 17.1494 2 16.3847 2Z"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

package/dist/components/atoms/icon/components/CheckboxStack.svelte.d.ts

@@ -0,0 +1,41 @@
+export default CheckboxStack;
+type CheckboxStack = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const CheckboxStack: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/Download.svelte

@@ -0,0 +1,27 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M3 12.0042V21H21V12M16.5 11.5L12 16L7.5 11.5M11.9958 3V16"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

package/dist/components/atoms/icon/components/Download.svelte.d.ts

@@ -0,0 +1,41 @@
+export default Download;
+type Download = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Download: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/Dragger.svelte

@@ -14,14 +14,13 @@
 <svg
 	{height}
 	{width}
-	viewBox="0 0 8 14"
+	viewBox="0 0 48 48"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
 	{...rest}>
-	<circle cx="1.5" cy="2" r={strokeWidth} fill={color} />
-	<circle cx="6.5" cy="2" r={strokeWidth} fill={color} />
-	<circle cx="1.5" cy="7" r={strokeWidth} fill={color} />
-	<circle cx="6.5" cy="7" r={strokeWidth} fill={color} />
-	<circle cx="1.5" cy="12" r={strokeWidth} fill={color} />
-	<circle cx="6.5" cy="12" r={strokeWidth} fill={color} />
+	<path
+		d="M18.25 10a3.25 3.25 0 10-6.5 0 3.25 3.25 0 106.5 0zm0 14a3.25 3.25 0 10-6.5 0 3.25 3.25 0 106.5 0zm0 14a3.25 3.25 0 10-6.5 0 3.25 3.25 0 106.5 0zm18-28a3.25 3.25 0 10-6.5 0 3.25 3.25 0 106.5 0zm0 14a3.25 3.25 0 10-6.5 0 3.25 3.25 0 106.5 0zm0 14a3.25 3.25 0 10-6.5 0 3.25 3.25 0 106.5 0z"
+		fill={color}
+		stroke={color}
+		stroke-width={strokeWidth} />
 </svg>

package/dist/components/atoms/icon/components/FilePDF.svelte

@@ -0,0 +1,53 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 52 52"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M10 38v6h28v-6m0-18v-6L30 4H10v16"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" /><path
+		d="M28 4v10h10"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" /><rect
+		x="4"
+		y="20"
+		width="40"
+		height="18"
+		rx="2"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linejoin="round" /><path
+		d="M21 25v8m-11-8v8"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round" /><path
+		d="M32 33v-8h5m-5 5h5m-27-5h3.5a2.5 2.5 0 012.5 2.5v0a2.5 2.5 0 01-2.5 2.5H10m11-5h2a4 4 0 014 4v0a4 4 0 01-4 4h-2"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" /><path
+		d="M16 12h4"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round" />
+</svg>