@cloudparker/moldex.js 0.0.27 → 0.0.29

package/dist/views/core/button/components/button-menu/button-menu.svelte

@@ -21,8 +21,8 @@ let {
   rightIconClassName = "",
   dropIconPath = mdiChevronDown,
   dropIconClassName = "",
-  labelClassName = "",
-  label = "Button",
+  titleClassName = "",
+  title = "Button",
   dropdownStyle = "",
   dropdownClassName = "",
   hasCheck = false,
@@ -39,15 +39,15 @@ let {
   checkClassName = "",
   listIconClassName = "",
   listImgClassName = "",
-  listLabelClassName = "",
-  listDescClassName = "",
+  listTitleClassName = "",
+  listSubtitleClassName = "",
   dividerClassName = "",
   onmenuclick = (ev, item, index) => {
   },
   children,
-  buttonChildren,
-  menuItemChildren,
-  menuItemInnerChildren
+  buttonSnippet,
+  menuItemSnippet,
+  menuItemInnerSnippet
 } = $props();
 let expanded = $state(false);
 let dropdownState = $state(1 /* CLOSED */);
@@ -103,8 +103,8 @@ $effect(() => {
 	>
 		<span class="sr-only">{screenOnlyDesc}</span>
 		<div class="flex items-center flex-nowrap gap-2">
-			{#if buttonChildren}
-				{@render buttonChildren()}
+			{#if buttonSnippet}
+				{@render buttonSnippet()}
 			{:else}
 				{#if imgSrc}
 					<img class="h-8 w-8 rounded-full bg-gray-50 {imgClassName}" src={imgSrc} alt={imgAlt} />
@@ -112,9 +112,9 @@ $effect(() => {
 				{#if leftIconPath}
 					<Icon path={leftIconPath} className={leftIconClassName} />
 				{/if}
-				{#if label}
-					<span class="text-nowrap {labelClassName}">
-						{@html label}
+				{#if title}
+					<span class="text-nowrap {titleClassName}">
+						{@html title}
 					</span>
 				{/if}
 				{#if rightIconPath}
@@ -152,15 +152,14 @@ $effect(() => {
 			{#each options as menu, index (menu.id || index)}
 				{#if menu?.divider}
 					<div class="border-t border-gray-200 {dividerClassName}"></div>
-				{:else if menuItemChildren}
-					{@render menuItemChildren(menu, index)}
+				{:else if menuItemSnippet}
+					{@render menuItemSnippet(menu, index)}
 				{:else}
 					<ButtonListItem
 						item={menu}
 						{index}
-						checked={selectedMenu == menu}
 						{hasCheck}
-						listId={id}
+						id={id}
 						className={menuItemClassName}
 						{uncheckIconPath}
 						{checkIconPath}
@@ -169,10 +168,10 @@ $effect(() => {
 						{checkClassName}
 						iconClassName={listIconClassName}
 						imgClassName={listImgClassName}
-						labelClassName={listLabelClassName}
-						descClassName={listDescClassName}
-						children={menuItemInnerChildren}
-						onclick={handlemenuItemClick}
+						titleClassName={listTitleClassName}
+						subtitleClassName={listSubtitleClassName}
+						children={menuItemInnerSnippet}
+						onClick={handlemenuItemClick}
 					/>
 				{/if}
 			{/each}

package/dist/views/core/button/components/button-menu/button-menu.svelte.d.ts

@@ -27,8 +27,8 @@ declare const ButtonMenu: $$__sveltets_2_IsomorphicComponent<{
     leftIconClassName?: string;
     rightIconPath?: string;
     rightIconClassName?: string;
-    label?: string | any;
-    labelClassName?: string;
+    title?: string | any;
+    titleClassName?: string;
     dropdownClassName?: string;
     dropdownStyle?: string;
     hasCheck?: boolean;
@@ -45,16 +45,16 @@ declare const ButtonMenu: $$__sveltets_2_IsomorphicComponent<{
     checkClassName?: string;
     listIconClassName?: string;
     listImgClassName?: string;
-    listLabelClassName?: string;
-    listDescClassName?: string;
+    listTitleClassName?: string;
+    listSubtitleClassName?: string;
     dividerClassName?: string;
     dropIconPath?: string;
     dropIconClassName?: string;
     onmenuclick?: (ev: MouseEvent, item: string | ListItemType, index: number) => void;
     children?: Snippet;
-    buttonChildren?: Snippet;
-    menuItemChildren?: Snippet<[ListItemType, number]>;
-    menuItemInnerChildren?: Snippet<[ListItemType, number]>;
+    buttonSnippet?: Snippet;
+    menuItemSnippet?: Snippet<[ListItemType, number]>;
+    menuItemInnerSnippet?: Snippet<[ListItemType, number]>;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;

package/dist/views/core/button/components/button-ok/button-ok.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">import Button, {} from "../button/button.svelte";
+let { className, ...props } = $props();
+</script>
+
+<Button {...props} className="bg-indigo-600 focus:bg-indigo-700 text-white p-2 px-4 {className}" />

package/dist/views/core/button/components/button-ok/button-ok.svelte.d.ts

@@ -0,0 +1,19 @@
+import { type ButtonPropsType } from '../button/button.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 ButtonOk: $$__sveltets_2_IsomorphicComponent<ButtonPropsType, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ButtonOk = InstanceType<typeof ButtonOk>;
+export default ButtonOk;

package/dist/views/core/button/index.d.ts

@@ -1,4 +1,8 @@
 import Button from './components/button/button.svelte';
+import ButtonBack from './components/button-back/button-back.svelte';
+import ButtonClose from './components/button-close/button-close.svelte';
+import ButtonCloseIcon from './components/button-close-icon/button-close-icon.svelte';
 import ButtonListItem from './components/button-list-item/button-list-item.svelte';
 import ButtonMenu from './components/button-menu/button-menu.svelte';
-export { Button, ButtonListItem, ButtonMenu };
+import ButtonOk from './components/button-ok/button-ok.svelte';
+export { Button, ButtonBack, ButtonClose, ButtonCloseIcon, ButtonListItem, ButtonMenu, ButtonOk };

package/dist/views/core/button/index.js

@@ -1,9 +1,18 @@
+import ButtonBack from './components/button-back/button-back.svelte';
+import ButtonCloseIcon from './components/button-close-icon/button-close-icon.svelte';
+import ButtonClose from './components/button-close/button-close.svelte';
 import ButtonListItem from './components/button-list-item/button-list-item.svelte';
 import ButtonMenu from './components/button-menu/button-menu.svelte';
+import ButtonOk from './components/button-ok/button-ok.svelte';
 import Button from './components/button/button.svelte';
 
 export {
     Button,
+    ButtonBack,
+    ButtonClose,
+    ButtonCloseIcon,
     ButtonListItem,
-    ButtonMenu
+    ButtonMenu,
+    ButtonOk
 };
+

package/dist/views/core/dialog/components/dialog/dialog.svelte

@@ -1,4 +1,6 @@
-<script lang="ts" context="module">export var DialogSizeEnum = /* @__PURE__ */ ((DialogSizeEnum2) => {
+<script module lang="ts">import ButtonBack from "../../../button/components/button-back/button-back.svelte";
+import ButtonClose from "../../../button/components/button-close-icon/button-close-icon.svelte";
+export var DialogSizeEnum = /* @__PURE__ */ ((DialogSizeEnum2) => {
   DialogSizeEnum2["SM"] = "sm";
   DialogSizeEnum2["MD"] = "md";
   DialogSizeEnum2["LG"] = "lg";
@@ -49,12 +51,13 @@ let {
   submitButtonFormId = void 0,
   size = DialogSizeEnum.SM,
   bodyClassName = "",
+  bodyComponent,
   component,
   props = {},
   children,
-  headerChildren,
-  bodyChildren,
-  footerChildren,
+  headerSnippet,
+  bodySnippet,
+  footerSnippet,
   onClose,
   onResult,
   onOkClick,
@@ -71,6 +74,7 @@ let dialogExports = {
 let isPlaced = $state(false);
 let isOpened = $state(false);
 let CustomComponent = $state(null);
+let BodyComponent = $state(null);
 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";
@@ -148,6 +152,9 @@ function handleOkClick(event) {
     onOkClick(event, dialogExports);
   }
 }
+$effect(() => {
+  BodyComponent = bodyComponent;
+});
 $effect(() => {
   CustomComponent = component;
 });
@@ -167,93 +174,96 @@ $effect(() => {
 			: '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}
+		{#if CustomComponent?.length == 2}
+			<CustomComponent {...{ ...props }} {...{ ...dialogExports }} />
+		{:else}
+			{#if hasHeader}
+				<div
+					class="flex items-start gap-4 w-full cursor-default py-2 {hasHeaderShadow
+						? 'border-b shadow-sm'
+						: ''} {headerClassName}"
+				>
+					<div>
+						{#if hasHeaderBack}
+							<ButtonBack
+								iconPath={headerBackIconPath}
+								iconClassName={headerBackIconClassName}
+								className={headerBackButtonClassName}
+								onClick={handleClose}
+							/>
+						{/if}
+					</div>
+					<div class="py-2">
+						{#if hasTitle}
+							<div class="text-xl {titleClassName}">{title || ''}</div>
+						{/if}
+						{#if hasSubtitle}
+							<div class="text-sm text-gray-500 {subtitleClassName}">{subtitle || ''}</div>
+						{/if}
+					</div>
+					<div class="flex-grow">
+						{#if headerSnippet}
+							{@render headerSnippet(dialogExports)}
+						{/if}
+					</div>
+					<div>
+						{#if hasHeaderClose}
+							<ButtonClose
+								className={headerCloseButtonClassName}
+								iconPath={headerCloseIconPath}
+								iconClassName={headerCloseIconClassName}
+								onClick={handleClose}
+							/>
+						{/if}
+					</div>
+				</div>
+			{/if}
+
+			<div class="flex-grow overflow-y-auto {bodyClassName}">
+				{#if children}
+					{@render children()}
+				{:else if bodySnippet}
+					{@render bodySnippet(dialogExports)}
+				{:else if BodyComponent?.length == 2}
+					<BodyComponent {...{ ...props }} {...{ ...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 footerSnippet}
+							{@render footerSnippet(dialogExports)}
+						{/if}
+					</div>
+					{#if hasFooterOkButton}
 						<Button
-							iconPath={headerBackIconPath}
-							className="w-12 h-12 p-3  rounded-full text-gray-500 hover:text-gray-600 hover:bg-gray-50 {headerBackButtonClassName}"
-							iconClassName={headerBackIconClassName}
-							onclick={handleClose}
+							id="btn-ok"
+							form={submitButtonFormId}
+							type={submitButtonFormId ? 'submit' : footerOkButtonType}
+							className="p-2 px-5 rounded bg-indigo-600 hover:bg-indigo-700 focus:bg-indigo-700 text-white {footerOkButtonClassName}"
+							label={footerOkLable}
+							disabled={footerOkButtonDisabled}
+							spinner={footerOkButtonSpinner}
+							spinnerClassName="text-white w-4 h-4"
+							onClick={handleOkClick}
 						/>
 					{/if}
-				</div>
-				<div class="py-2">
-					{#if hasTitle}
-						<div class="text-xl {titleClassName}">{title || ''}</div>
-					{/if}
-					{#if hasSubtitle}
-						<div class="text-sm text-gray-500 {subtitleClassName}">{subtitle || ''}</div>
-					{/if}
-				</div>
-				<div class="flex-grow">
-					{#if headerChildren}
-						{@render headerChildren(dialogExports)}
-					{/if}
-				</div>
-				<div>
-					{#if hasHeaderClose}
+					{#if hasFooterCloseButton}
 						<Button
-							id="close"
-							className="w-12 h-12 p-3 rounded-full text-gray-500 hover:text-gray-600 hover:bg-gray-50 {headerCloseButtonClassName}"
-							iconPath={headerCloseIconPath}
-							iconClassName={headerCloseIconClassName}
-							onclick={handleClose}
-						></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>
-			</div>
-		{/if}
-
-		<div class="flex-grow overflow-y-auto {bodyClassName}">
-			{#if children}
-				{@render children()}
-			{:else if bodyChildren}
-				{@render bodyChildren(dialogExports)}
-			{:else if CustomComponent?.length == 2}
-				<CustomComponent {...{ ...props }} {...{ ...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={submitButtonFormId}
-						type={submitButtonFormId ? 'submit' : footerOkButtonType}
-						className="p-2 px-5 rounded bg-indigo-600 hover:bg-indigo-700 focus:bg-indigo-700 text-white {footerOkButtonClassName}"
-						label={footerOkLable}
-						disabled={footerOkButtonDisabled}
-						spinner={footerOkButtonSpinner}
-						spinnerClassName="text-white w-4 h-4"
-						onclick={handleOkClick}
-					/>
-				{/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}

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

@@ -47,13 +47,14 @@ export type DialogPropsType = {
     footerOkButtonDisabled?: boolean;
     submitButtonFormId?: string;
     bodyClassName?: string;
+    bodyComponent?: any;
     component?: any;
     props?: any;
     size?: DialogSizeEnum;
     children?: Snippet;
-    headerChildren?: Snippet<[dialogExports: DialogExportsType]>;
-    bodyChildren?: Snippet<[dialogExports: DialogExportsType]>;
-    footerChildren?: Snippet<[dialogExports: DialogExportsType]>;
+    headerSnippet?: Snippet<[dialogExports: DialogExportsType]>;
+    bodySnippet?: Snippet<[dialogExports: DialogExportsType]>;
+    footerSnippet?: Snippet<[dialogExports: DialogExportsType]>;
     onClose?: () => void;
     onResult?: (value: any) => void;
     onOkClick?: (ev: MouseEvent | TouchEvent, options: DialogExportsType) => void;

package/dist/views/core/dialog/components/list-dialog/list-picker-dialog.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">import { ButtonListItem } from "../../..";
+import ButtonBack from "../../../button/components/button-back/button-back.svelte";
+import ButtonCloseIcon from "../../../button/components/button-close-icon/button-close-icon.svelte";
+import ButtonClose from "../../../button/components/button-close/button-close.svelte";
+import ButtonOk from "../../../button/components/button-ok/button-ok.svelte";
+import SearchField from "../../../input/components/search-field/search-field.svelte";
+let {
+  value,
+  multiple = false,
+  items,
+  itemTitle,
+  itemSubtitle,
+  hasCheckbox,
+  hasArrow,
+  search,
+  identity,
+  itemTitleClassName,
+  itemSubtitleClassName,
+  okButtonLable = "Select",
+  okButtonClassName = "",
+  closeButtonLabel = "Close",
+  closeButtonClassName = "",
+  itemSnippet,
+  closeDialog,
+  setResult
+} = $props();
+let searchText = $state("");
+let idField = Symbol("_id");
+let searchField = Symbol("_search");
+let selectedItemsSet = $derived.by(() => {
+  let set = /* @__PURE__ */ new Set();
+  if (value != null) {
+    if (Array.isArray(value)) {
+      value.forEach((v) => set.add(v));
+    } else {
+      set.add(value);
+    }
+  }
+  return set;
+});
+let preparedItems = $derived.by(() => {
+  return (items || []).map((item, index) => {
+    let res = {
+      [idField]: identity && item.hasOwnProperty(identity) ? item[identity] : index
+    };
+    if (itemTitle) {
+      res.title = item.hasOwnProperty(itemTitle) ? item[itemTitle] : itemTitle;
+    }
+    if (itemSubtitle) {
+      res.subtitle = item.hasOwnProperty(itemSubtitle) ? item[itemSubtitle] : itemSubtitle;
+    }
+    if (search) {
+      res[searchField] = (item[search] || "").trim().toLowerCase();
+    } else {
+      res[searchField] = `${res.title || ""} ${res.subtitle || ""}`.trim().toLowerCase();
+    }
+    if (selectedItemsSet.has(res[idField])) {
+      res.isChecked = true;
+    } else {
+      res.isChecked = false;
+    }
+    return res;
+  });
+});
+let filteredItems = $derived.by(() => {
+  if (searchText) {
+    return preparedItems.filter((item) => {
+      return item[searchField].indexOf(searchText) >= 0;
+    });
+  } else {
+    return [...preparedItems];
+  }
+});
+function handleSearch(text) {
+  searchText = text;
+}
+function handleItemSelected(ev, item, index) {
+  let id = item[idField];
+  if (multiple) {
+    if (selectedItemsSet.has(id)) {
+      selectedItemsSet.delete(id);
+    } else {
+      selectedItemsSet.add(id);
+    }
+  } else {
+    selectedItemsSet.clear();
+    selectedItemsSet.add(id);
+  }
+  items = [...items || []];
+  if (!multiple) {
+    if (selectedItemsSet.size) {
+      setTimeout(() => {
+        setResult(Array.from(selectedItemsSet)[0]);
+        closeDialog();
+      }, 300);
+    }
+  }
+}
+function handleClose() {
+  closeDialog();
+}
+function handleOk() {
+  setResult(Array.from(selectedItemsSet));
+  closeDialog();
+}
+$effect(() => {
+  setResult(null);
+});
+</script>
+
+<div class="flex gap-3 p-3">
+	<ButtonBack onlyMobile onClick={handleClose} />
+	<div class="flex-grow">
+		<SearchField
+			name="search"
+			className="rounded-full"
+			onSearch={handleSearch}
+			placeholder="Search..."
+		/>
+	</div>
+	<ButtonCloseIcon onlyWeb onClick={handleClose} />
+</div>
+<div class="flex-grow overflow-y-auto">
+	{#each filteredItems as item, index}
+		<div>
+			<ButtonListItem
+				{item}
+				id="list"
+				{index}
+				titleClassName={itemTitleClassName}
+				subtitleClassName={itemSubtitleClassName}
+				{hasArrow}
+				{hasCheckbox}
+				onClick={(ev) => handleItemSelected(ev, item, index)}
+				className="px-4"
+			/>
+		</div>
+	{/each}
+</div>
+{#if multiple}
+	<div class="flex items-center justify-end gap-3 p-4">
+		<ButtonOk label={okButtonLable} className={okButtonClassName} onClick={handleOk} />
+		<ButtonClose label={closeButtonLabel} className={closeButtonClassName} onClick={handleClose} />
+	</div>
+{/if}

package/dist/views/core/dialog/components/list-dialog/list-picker-dialog.svelte.d.ts

@@ -0,0 +1,41 @@
+import type { Snippet } from 'svelte';
+import type { DialogExportsType } from '../dialog/dialog.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 ListPickerDialog: $$__sveltets_2_IsomorphicComponent<{
+    value?: any | any[];
+    multiple?: boolean;
+    items?: any[];
+    itemSnippet?: Snippet<[any, number]>;
+    itemTitle?: string;
+    itemSubtitle?: string;
+    search?: string;
+    identity?: string;
+    iconPath?: string;
+    hasCheckbox?: boolean;
+    hasArrow?: boolean;
+    itemTitleClassName?: string;
+    itemSubtitleClassName?: string;
+    okButtonLable?: string;
+    okButtonClassName?: string;
+    closeButtonLabel?: string;
+    closeButtonClassName?: string;
+} & DialogExportsType & {
+    items?: any[];
+    itemSnippet?: Snippet<[any, number]>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ListPickerDialog = InstanceType<typeof ListPickerDialog>;
+export default ListPickerDialog;

package/dist/views/core/icon/components/icon/icon.svelte

@@ -1,16 +1,18 @@
-<script lang="ts">import "../../../../../tailwind.css";
+<script lang="ts">import ColorField from "../../../input/components/color-field/color-field.svelte";
+import "../../../../../tailwind.css";
 let {
   path,
   className = "",
   size = 24,
   fill = "currentColor",
-  viewBox = ""
+  viewBox = "",
+  color
 } = $props();
 $effect(() => {
   viewBox = viewBox || `0 0 ${size} ${size}`;
 });
 </script>
 
-<svg class="w-6 h-6 align-middle {className}" {viewBox} fill="currentColor">
+<svg class="w-6 h-6 align-middle {className}" {viewBox} fill={color || fill}>
 	<path d={path} />
 </svg>

package/dist/views/core/icon/components/icon/icon.svelte.d.ts

@@ -18,6 +18,7 @@ declare const Icon: $$__sveltets_2_IsomorphicComponent<{
     size?: number;
     fill?: string;
     viewBox?: string;
+    color?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;

package/dist/views/core/icon/services/icon-path-service.d.ts

@@ -1,4 +1,5 @@
 export declare const mdiArrowLeft = "M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z";
+export declare const mdiAttachment = "M7.5,18A5.5,5.5 0 0,1 2,12.5A5.5,5.5 0 0,1 7.5,7H18A4,4 0 0,1 22,11A4,4 0 0,1 18,15H9.5A2.5,2.5 0 0,1 7,12.5A2.5,2.5 0 0,1 9.5,10H17V11.5H9.5A1,1 0 0,0 8.5,12.5A1,1 0 0,0 9.5,13.5H18A2.5,2.5 0 0,0 20.5,11A2.5,2.5 0 0,0 18,8.5H7.5A4,4 0 0,0 3.5,12.5A4,4 0 0,0 7.5,16.5H17V18H7.5Z";
 export declare const mdiBellOutline = "M10 21H14C14 22.1 13.1 23 12 23S10 22.1 10 21M21 19V20H3V19L5 17V11C5 7.9 7 5.2 10 4.3V4C10 2.9 10.9 2 12 2S14 2.9 14 4V4.3C17 5.2 19 7.9 19 11V17L21 19M17 11C17 8.2 14.8 6 12 6S7 8.2 7 11V18H17V11Z";
 export declare const mdiCheckCircle = "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z";
 export declare const mdiCheckCircleOutline = "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z";
@@ -8,8 +9,13 @@ export declare const mdiChevronRight = "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,1
 export declare const mdiClose = "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z";
 export declare const mdiContentCopy = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z";
 export declare const mdiEmailOutline = "M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z";
+export declare const mdiEyeOffOutline = "M2,5.27L3.28,4L20,20.72L18.73,22L15.65,18.92C14.5,19.3 13.28,19.5 12,19.5C7,19.5 2.73,16.39 1,12C1.69,10.24 2.79,8.69 4.19,7.46L2,5.27M12,9A3,3 0 0,1 15,12C15,12.35 14.94,12.69 14.83,13L11,9.17C11.31,9.06 11.65,9 12,9M12,4.5C17,4.5 21.27,7.61 23,12C22.18,14.08 20.79,15.88 19,17.19L17.58,15.76C18.94,14.82 20.06,13.54 20.82,12C19.17,8.64 15.76,6.5 12,6.5C10.91,6.5 9.84,6.68 8.84,7L7.3,5.47C8.74,4.85 10.33,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C12.69,17.5 13.37,17.43 14,17.29L11.72,15C10.29,14.85 9.15,13.71 9,12.28L5.6,8.87C4.61,9.72 3.78,10.78 3.18,12Z";
+export declare const mdiEyeOutline = "M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M12,4.5C17,4.5 21.27,7.61 23,12C21.27,16.39 17,19.5 12,19.5C7,19.5 2.73,16.39 1,12C2.73,7.61 7,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C15.76,17.5 19.17,15.36 20.82,12C19.17,8.64 15.76,6.5 12,6.5C8.24,6.5 4.83,8.64 3.18,12Z";
 export declare const mdiFlowerTulip = "M3,13A9,9 0 0,0 12,22A9,9 0 0,0 3,13M12,22A9,9 0 0,0 21,13A9,9 0 0,0 12,22M18,3V8A6,6 0 0,1 12,14A6,6 0 0,1 6,8V3C6.74,3 7.47,3.12 8.16,3.39C8.71,3.62 9.2,3.96 9.61,4.39L12,2L14.39,4.39C14.8,3.96 15.29,3.62 15.84,3.39C16.53,3.12 17.26,3 18,3Z";
+export declare const mdiMagnify = "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z";
 export declare const mdiMenu = "M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z";
 export declare const mdiPageFirst = "M18.41,16.59L13.82,12L18.41,7.41L17,6L11,12L17,18L18.41,16.59M6,6H8V18H6V6Z";
 export declare const mdiPageLast = "M5.59,7.41L10.18,12L5.59,16.59L7,18L13,12L7,6L5.59,7.41M16,6H18V18H16V6Z";
 export declare const mdiPhone = "M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z";
+export declare const mdiSquare = "M3,3V21H21V3";
+export declare const mdiUnfoldMoreHorizontal = "M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z";