@cloudparker/moldex.js 0.0.1

package/dist/common/components/drawer/drawer.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">let {
+  id = "",
+  children,
+  backdropClassName = "",
+  className = "bg-indigo-600 text-white",
+  containerClassName = "",
+  drawerContainerClassName = "",
+  drawerClassName = ""
+} = $props();
+let isPlaced = $state(false);
+let isOpened = $state(false);
+function handelBackdropClick() {
+  toggleDrawer();
+}
+export function toggleDrawer() {
+  if (!isPlaced) {
+    openDrawer();
+  } else {
+    closeDrawer();
+  }
+}
+export function openDrawer() {
+  isPlaced = true;
+  setTimeout(() => {
+    isOpened = true;
+  }, 0);
+}
+export function closeDrawer() {
+  isOpened = false;
+  setTimeout(() => {
+    isPlaced = false;
+  }, 300);
+}
+</script>
+
+{#if isPlaced}
+	<div {id} class="relative z-50 {containerClassName}" role="dialog" aria-modal="true">
+		<!-- Backdrop -->
+		<div
+			class="fixed inset-0 bg-gray-900/10 transition-opacity ease-linear duration-300 {isOpened
+				? 'opacity-100'
+				: 'opacity-0'}  {backdropClassName}"
+			aria-hidden="true"
+		></div>
+		<!-- Drawer -->
+		<div class="fixed inset-0 flex {drawerContainerClassName}">
+			<div
+				class="relative flex w-full max-w-xs flex-1 transition ease-in-out duration-300 transform {isOpened
+					? 'translate-x-0'
+					: '-translate-x-full'} {drawerClassName}"
+			>
+				<div class="flex grow flex-col gap-y-5 overflow-y-auto w-72 {className}">
+					{#if children}
+						{@render children()}
+					{/if}
+				</div>
+			</div>
+			<button class="flex-grow cursor-auto" type="button" onclick={handelBackdropClick}></button>
+		</div>
+	</div>
+{/if}

package/dist/common/components/drawer/drawer.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Drawer: $$__sveltets_2_IsomorphicComponent<{
+    children?: Snippet;
+    id?: string;
+    backdropClassName?: string;
+    className?: string;
+    containerClassName?: string;
+    drawerContainerClassName?: string;
+    drawerClassName?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    toggleDrawer: () => void;
+    openDrawer: () => void;
+    closeDrawer: () => void;
+}, "">;
+type Drawer = InstanceType<typeof Drawer>;
+export default Drawer;

package/dist/common/components/navbar/navbar.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">import Button from "../../../button/components/button/button.svelte";
+import Icon from "../../../icon/components/icon/icon.svelte";
+import { mdiMenu } from "../../../icon/services/icon-path-service.js";
+let {
+  id = "",
+  children,
+  leftChildren,
+  centerChildren,
+  rightChildren,
+  className = "",
+  drawerIconPath = mdiMenu,
+  drawerButtonClassName = "",
+  hasDrawer = false,
+  hasLogo = false,
+  logoButtonClassName = "",
+  logoIconPath,
+  logoIconClassName = "text-indigo-600",
+  logoImgSrc,
+  logoImgClassName = "",
+  leftContainerClassName = "",
+  centerContainerClassName = "",
+  rightContainerClassName = "",
+  title = "",
+  subtitle = "",
+  titleClassName = "",
+  subtitleClassName = "",
+  hasTitle = false,
+  hasSubtitle = false,
+  ondrawer,
+  onlogo
+} = $props();
+</script>
+
+<div
+	class="sticky top-0 z-10 flex h-16 shrink-0 items-center px-2 border-b border-gray-200 bg-white shadow-sm {className}"
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		{#if hasDrawer}
+			<Button
+				className="h-full px-2 text-gray-500 hover:text-gray-600 {drawerButtonClassName}"
+				iconPath={drawerIconPath}
+				disabled={!ondrawer}
+				onclick={ondrawer}
+			></Button>
+		{/if}
+		{#if hasLogo}
+			<Button className="h-full px-2 {logoButtonClassName}" disabled={!onlogo} onclick={onlogo}>
+				{#if logoIconPath}
+					<Icon path={logoIconPath} className="h-10 w-10 {logoIconClassName}" />
+				{/if}
+				{#if logoImgSrc}
+					<img src={logoImgSrc} class="h-8 w-8 bg-gray-50 {logoImgClassName}" alt="logo" />
+				{/if}
+			</Button>
+		{/if}
+	{/if}
+	<div>
+		{#if hasTitle}
+			<div class="font-bold {titleClassName}">{title || ''}</div>
+		{/if}
+		{#if hasSubtitle}
+			<div class="text-sm text-gray-400 {subtitleClassName}">{subtitle || ''}</div>
+		{/if}
+	</div>
+	<div class={leftContainerClassName}>
+		{#if leftChildren}
+			{@render leftChildren()}
+		{/if}
+	</div>
+	<div class="flex-grow flex justify-center {centerContainerClassName}">
+		{#if centerChildren}
+			{@render centerChildren()}
+		{/if}
+	</div>
+	<div class={rightContainerClassName}>
+		{#if rightChildren}
+			{@render rightChildren()}
+		{/if}
+	</div>
+</div>

package/dist/common/components/navbar/navbar.svelte.d.ts

@@ -0,0 +1,46 @@
+import type { Snippet } from 'svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Navbar: $$__sveltets_2_IsomorphicComponent<{
+    id?: string;
+    className?: String;
+    hasDrawer?: boolean;
+    drawerIconPath?: string;
+    drawerButtonClassName?: string;
+    logoButtonClassName?: string;
+    hasLogo?: boolean;
+    logoIconPath?: string;
+    logoIconClassName?: string;
+    logoImgSrc?: string;
+    logoImgClassName?: string;
+    leftContainerClassName?: string;
+    centerContainerClassName?: string;
+    rightContainerClassName?: string;
+    title?: string;
+    subtitle?: string;
+    titleClassName?: string;
+    subtitleClassName?: string;
+    hasTitle?: boolean;
+    hasSubtitle?: boolean;
+    children?: Snippet;
+    leftChildren?: Snippet;
+    centerChildren?: Snippet;
+    rightChildren?: Snippet;
+    ondrawer?: () => void;
+    onlogo?: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Navbar = InstanceType<typeof Navbar>;
+export default Navbar;

package/dist/common/components/spinner/spinner.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">let { className = "" } = $props();
+</script>
+
+<svg
+	class="animate-spin h-5 w-5 text-gray-900 {className}"
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+>
+	<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+	<path
+		class="opacity-75"
+		fill="currentColor"
+		d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+	></path>
+</svg>

package/dist/common/components/spinner/spinner.svelte.d.ts

@@ -0,0 +1,20 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Spinner: $$__sveltets_2_IsomorphicComponent<{
+    className?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Spinner = InstanceType<typeof Spinner>;
+export default Spinner;

package/dist/common/components/vertical-rule/verticcal-rule.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">let { className = "" } = $props();
+</script>
+
+<div class="h-6 lg:w-px lg:bg-gray-200 {className}" aria-hidden="true"></div>

package/dist/common/components/vertical-rule/verticcal-rule.svelte.d.ts

@@ -0,0 +1,20 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const VerticcalRule: $$__sveltets_2_IsomorphicComponent<{
+    className?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type VerticcalRule = InstanceType<typeof VerticcalRule>;
+export default VerticcalRule;

package/dist/common/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components/drawer/drawer.svelte';
+export * from './components/navbar/navbar.svelte';
+export * from './components/spinner/spinner.svelte';
+export * from './components/vertical-rule/verticcal-rule.svelte';

package/dist/common/index.js

@@ -0,0 +1,4 @@
+export * from './components/drawer/drawer.svelte';
+export * from './components/navbar/navbar.svelte';
+export * from './components/spinner/spinner.svelte';
+export * from './components/vertical-rule/verticcal-rule.svelte';

package/dist/dialog/components/dialog/dialog.svelte

@@ -0,0 +1,253 @@
+<script lang="ts" context="module"></script>
+
+<script lang="ts">import Button from "../../../button/components/button/button.svelte";
+import { mdiArrowLeft, mdiClose } from "../../../icon/services/icon-path-service.js";
+let {
+  id = "",
+  formId = void 0,
+  cancelable = true,
+  className = "",
+  containerClassName = "",
+  backdropClassName = "",
+  hasHeaderShadow = false,
+  hasTitle = false,
+  hasSubtitle = false,
+  title = "",
+  subtitle = "",
+  titleClassName = "",
+  subtitleClassName = "",
+  hasHeader = false,
+  headerClassName = "",
+  hasHeaderClose = false,
+  headerCloseButtonClassName = "",
+  headerCloseIconPath = mdiClose,
+  headerCloseIconClassName = "",
+  hasHeaderBack = false,
+  headerBackButtonClassName = "",
+  headerBackIconPath = mdiArrowLeft,
+  headerBackIconClassName = "",
+  hasFooter = false,
+  hasFooterShadow = false,
+  hasFooterCloseButton = false,
+  hasFooterOkButton = false,
+  footerClassName = "",
+  footerCloseLabel = "Close",
+  footerCloseButtonClassName = "",
+  footerOkLable = "Save",
+  footerOkButtonClassName = "",
+  footerOkButtonType = "button",
+  footerOkButtonSpinner = false,
+  footerOkButtonDisabled = false,
+  size = "sm",
+  bodyClassName = "",
+  component,
+  componetProps = {},
+  children,
+  headerChildren,
+  bodyChildren,
+  footerChildren,
+  onclose,
+  onresult
+} = $props();
+let dialogExports = { closeDialog, setResult, setOkSpinner, setOkDisabled };
+let isPlaced = $state(false);
+let isOpened = $state(false);
+let result;
+let smSizeClassName = "w-11/12 sm:w-3/4 md:w-1/2 lg:w-1/3 xl:w-1/4";
+let mdSizeClassName = "w-11/12 sm:w-3/4 md:w-2/3 lg:w-1/2 xl:w-1/3";
+let lgSizeClassName = "w-11/12 sm:w-3/4 md:w-3/4 lg:w-2/3 xl:w-1/2";
+let fullSizeClassName = "fixed inset-0 w-screen h-screen ";
+let screenSizeClassNameMap = {
+  sm: smSizeClassName,
+  md: mdSizeClassName,
+  lg: lgSizeClassName,
+  full: fullSizeClassName
+};
+export function toggleDialog() {
+  if (isOpened) {
+    closeDialog();
+  } else {
+    openDialog();
+  }
+}
+export function openDialog() {
+  isPlaced = true;
+  setTimeout(() => {
+    isOpened = true;
+  }, 0);
+}
+export function closeDialog() {
+  return new Promise((resolve) => {
+    isOpened = false;
+    setTimeout(() => {
+      isPlaced = false;
+      onclose && onclose();
+      onresult && onresult(result);
+      resolve(result);
+    }, 300);
+  });
+}
+export function setResult(value) {
+  result = value;
+}
+export function setOkDisabled(value) {
+  footerOkButtonDisabled = value;
+}
+export function setOkSpinner(value) {
+  footerOkButtonSpinner = value;
+}
+function handleBackdropClick() {
+  if (cancelable) {
+    closeDialog();
+  }
+}
+function handleClose() {
+  closeDialog();
+}
+function handleKeyDown(event) {
+  if (event.key === "Escape" || event.key === "Esc") {
+    if (cancelable) {
+      event.stopPropagation();
+      closeDialog();
+    }
+  }
+}
+</script>
+
+{#snippet dialogContent()}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		tabindex="-1"
+		class="relative flex flex-col max-h-screen transform overflow-hidden bg-white text-left transition-all outline-none {screenSizeClassNameMap[
+			size
+		]} {isOpened
+			? 'ease-out duration-300 opacity-100 translate-y-0 sm:scale-100'
+			: 'ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'} {size == 'full'
+			? ''
+			: 'rounded-lg shadow-xl'} {className}"
+		onclick={(ev: MouseEvent) => ev.stopPropagation()}
+	>
+		{#if hasHeader}
+			<div
+				class="flex items-start gap-4 w-full cursor-default py-2 {hasHeaderShadow
+					? 'border-b shadow-sm'
+					: ''} {headerClassName}"
+			>
+				<div>
+					{#if hasHeaderBack}
+						<Button
+							iconPath={headerBackIconPath}
+							className="p-3 rounded-full text-gray-500 hover:text-gray-600 hover:bg-gray-50 {headerBackButtonClassName}"
+							iconClassName={headerBackIconClassName}
+							onclick={handleClose}
+						/>
+					{/if}
+				</div>
+				<div class="py-2">
+					{#if hasTitle}
+						<div class="text-xl {titleClassName}">{title || ''}</div>
+					{/if}
+					{#if hasSubtitle}
+						<div class="text-sm {subtitleClassName}">{subtitle || ''}</div>
+					{/if}
+				</div>
+				<div class="flex-grow">
+					{#if headerChildren}
+						{@render headerChildren(dialogExports)}
+					{/if}
+				</div>
+				<div>
+					{#if hasHeaderClose}
+						<Button
+							id="close"
+							className="p-3 rounded-full text-gray-500 hover:text-gray-600 hover:bg-gray-50 {headerCloseButtonClassName}"
+							iconPath={headerCloseIconPath}
+							iconClassName={headerCloseIconClassName}
+							onclick={handleClose}
+						></Button>
+					{/if}
+				</div>
+			</div>
+		{/if}
+
+		<div class="p-4 flex-grow overflow-y-auto {bodyClassName}">
+			{#if children}
+				{@render children()}
+			{:else if bodyChildren}
+				{@render bodyChildren(dialogExports)}
+			{:else if component}
+				<svelte:component this={component} ...componetProps ...dialogExports />
+			{/if}
+		</div>
+
+		{#if hasFooter}
+			<div
+				class="flex items-center justify-end p-4 gap-4 {hasFooterShadow
+					? 'border-t'
+					: ''} {footerClassName}"
+			>
+				<div class="flex-grow">
+					{#if footerChildren}
+						{@render footerChildren(dialogExports)}
+					{/if}
+				</div>
+				{#if hasFooterOkButton}
+					<Button
+						id="btn-ok"
+						form={formId}
+						type={formId ? 'submit' : footerOkButtonType}
+						className="p-2 px-5 rounded bg-indigo-600 hover:bg-indigo-700 text-white {footerOkButtonClassName}"
+						label={footerOkLable}
+						disabled={footerOkButtonDisabled}
+						spinner={footerOkButtonSpinner}
+						spinnerClassName="text-white w-4 h-4"
+					/>
+				{/if}
+				{#if hasFooterCloseButton}
+					<Button
+						id="btn-close"
+						type="button"
+						className="p-2 px-5 rounded bg-gray-100 hover:bg-gray-200 {footerCloseButtonClassName}"
+						label={footerCloseLabel}
+						onclick={handleClose}
+					/>
+				{/if}
+			</div>
+		{/if}
+	</div>
+{/snippet}
+
+{#snippet dialog()}
+	<div
+		{id}
+		class="relative z-20 {containerClassName}"
+		aria-labelledby="modal-title"
+		role="dialog"
+		aria-modal="true"
+	>
+		<div
+			id="backdrop"
+			class="fixed inset-0 bg-gray-500/20 transition-opacity {isOpened
+				? 'ease-out duration-300 opacity-100'
+				: 'ease-in duration-200 opacity-0'} {backdropClassName}"
+			aria-hidden="true"
+		></div>
+
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<div
+			class="fixed inset-0 z-20 w-screen cursor-auto"
+			onclick={handleBackdropClick}
+			onkeydown={handleKeyDown}
+		>
+			<div class="flex min-h-full justify-center items-center">
+				{@render dialogContent()}
+			</div>
+		</div>
+	</div>
+{/snippet}
+
+{#if isPlaced}
+	{@render dialog()}
+{/if}

package/dist/dialog/components/dialog/dialog.svelte.d.ts

@@ -0,0 +1,80 @@
+export type DialogPropsType = {
+    id?: string;
+    formId?: string | null;
+    cancelable?: boolean;
+    className?: string;
+    containerClassName?: string;
+    backdropClassName?: string;
+    isFullScreen?: boolean;
+    hasTitle?: boolean;
+    hasSubtitle?: boolean;
+    title?: string;
+    subtitle?: string;
+    titleClassName?: string;
+    subtitleClassName?: string;
+    hasHeader?: boolean;
+    hasHeaderShadow?: boolean;
+    headerClassName?: string;
+    hasHeaderClose?: boolean;
+    headerCloseButtonClassName?: string;
+    headerCloseIconPath?: string;
+    headerCloseIconClassName?: string;
+    hasHeaderBack?: boolean;
+    headerBackButtonClassName?: string;
+    headerBackIconPath?: string;
+    headerBackIconClassName?: string;
+    hasFooter?: boolean;
+    hasFooterShadow?: boolean;
+    hasFooterCloseButton?: boolean;
+    hasFooterOkButton?: boolean;
+    footerClassName?: string;
+    footerCloseLabel?: string;
+    footerCloseButtonClassName?: string;
+    footerOkLable?: string;
+    footerOkButtonClassName?: string;
+    footerOkButtonType?: 'button' | 'submit' | 'reset';
+    footerOkButtonSpinner?: boolean;
+    footerOkButtonDisabled?: boolean;
+    bodyClassName?: string;
+    component?: any;
+    componetProps?: any;
+    size?: 'sm' | 'md' | 'lg' | 'full';
+    children?: Snippet;
+    headerChildren?: Snippet<[dialogExports: DialogExportsType]>;
+    bodyChildren?: Snippet<[dialogExports: DialogExportsType]>;
+    footerChildren?: Snippet<[dialogExports: DialogExportsType]>;
+    onclose?: () => void;
+    onresult?: (value: any) => void;
+};
+export type DialogExportsType = {
+    closeDialog: () => void;
+    setResult: (value: any) => void;
+    setOkSpinner: (value: boolean) => void;
+    setOkDisabled: (value: boolean) => void;
+};
+import type { Snippet } from 'svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Dialog: $$__sveltets_2_IsomorphicComponent<DialogPropsType, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    toggleDialog: () => void;
+    openDialog: () => void;
+    closeDialog: () => Promise<any>;
+    setResult: (value: any) => void;
+    setOkDisabled: (value: boolean) => void;
+    setOkSpinner: (value: boolean) => void;
+}, "">;
+type Dialog = InstanceType<typeof Dialog>;
+export default Dialog;

package/dist/dialog/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/dialog/dialog.svelte';
+export * from './services/dialog-service.js';

package/dist/dialog/index.js

@@ -0,0 +1,2 @@
+export * from './components/dialog/dialog.svelte';
+export * from './services/dialog-service.js';

package/dist/dialog/services/dialog-service.d.ts

@@ -0,0 +1,2 @@
+import { type DialogPropsType } from '../components/dialog/dialog.svelte';
+export declare function openDialog<R>(props?: DialogPropsType): Promise<R>;

package/dist/dialog/services/dialog-service.js

@@ -0,0 +1,25 @@
+import { mount, unmount } from 'svelte';
+import Dialog, {} from '../components/dialog/dialog.svelte';
+function addDialog(props) {
+    const dialog = mount(Dialog, { target: document.getElementsByTagName('body')[0], props });
+    dialog.openDialog();
+    return dialog;
+}
+export function openDialog(props = {}) {
+    return new Promise((resolve) => {
+        let dialog = addDialog({ ...props, onclose, onresult, });
+        function onclose() {
+            if (dialog) {
+                if (props.onclose) {
+                    props.onclose();
+                }
+            }
+        }
+        function onresult(value) {
+            resolve(value);
+            if (props.onresult) {
+                onresult(value);
+            }
+        }
+    });
+}

package/dist/icon/components/icon/icon.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">let {
+  path,
+  className = "",
+  size = 24,
+  fill = "currentColor",
+  viewBox = ""
+} = $props();
+$effect(() => {
+  viewBox = viewBox || `0 0 ${size} ${size}`;
+});
+</script>
+
+<svg class=" h-6 w-6 align-middle {className}" {viewBox} fill="currentColor">
+	<path d={path} />
+</svg>