@luscii-healthtech/web-ui 18.1.1 → 19.0.1

package/dist/components/Form/FormImagePicker.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 import { Control, RegisterOptions } from "react-hook-form/dist/index.ie11";
-import { ImagePickerFieldConfiguration, FormFieldLabelerWithFormProps } from "./form.types";
-interface FormImagePickerProps extends ImagePickerFieldConfiguration, FormFieldLabelerWithFormProps {
+import { MediaPickerFieldConfiguration, FormFieldLabelerWithFormProps } from "./form.types";
+interface FormMediaPickerProps extends MediaPickerFieldConfiguration, FormFieldLabelerWithFormProps {
     control: Control;
     rules?: Exclude<RegisterOptions, "valueAsNumber" | "valueAsDate" | "setValueAs">;
 }
-export declare const FormImagePicker: React.ForwardRefExoticComponent<FormImagePickerProps & React.RefAttributes<any>>;
+export declare const FormImagePicker: React.ForwardRefExoticComponent<FormMediaPickerProps & React.RefAttributes<any>>;
 export {};

package/dist/components/Form/form.types.d.ts

@@ -3,7 +3,7 @@ import React, { HTMLInputTypeAttribute } from "react";
 import { InputProps } from "../Input/Input";
 import { RadioGroupProps } from "../RadioGroup/RadioGroupV2";
 import { SelectProps } from "../Select/Select";
-import { ImagePickerProps } from "../MediaPicker/MediaPicker";
+import { MediaPickerProps } from "../MediaPicker/MediaPicker";
 import { PartialProperties } from "../../types/general.types";
 import { CheckboxProps } from "../Checkbox/Checkbox";
 import { TextareaProps } from "../Textarea/Textarea";
@@ -32,7 +32,7 @@ export interface FormFieldLabelerProps {
 interface FieldVoidConfiguration extends Partial<FormFieldBaseConfiguration<never>> {
     type: "void";
 }
-export type FormFieldConfiguration<TFieldValues> = FieldInputConfiguration | FieldSelectConfiguration | FieldImagePickerConfiguration | FieldRadioGroupConfiguration | FieldRowConfiguration<TFieldValues> | FieldCheckboxConfiguration | FieldCheckboxListConfiguration | FieldTextareaConfiguration | FieldTitleConfiguration | FieldVoidConfiguration;
+export type FormFieldConfiguration<TFieldValues> = FieldInputConfiguration | FieldSelectConfiguration | FieldMediaPickerConfiguration | FieldRadioGroupConfiguration | FieldRowConfiguration<TFieldValues> | FieldCheckboxConfiguration | FieldCheckboxListConfiguration | FieldTextareaConfiguration | FieldTitleConfiguration | FieldVoidConfiguration;
 /**
  * @backwardscompatibility
  * @deprecated - this is an alias for `FormFieldConfiguration`, for backwards compatibility the name can remain for now, but
@@ -60,10 +60,10 @@ export interface FieldSelectConfiguration extends FormFieldBaseConfiguration<Sel
     type: "select";
     fieldProps: SelectProps;
 }
-export type ImagePickerFieldConfiguration = PartialProperties<Omit<ImagePickerProps, "name">, "handleChange">;
-export interface FieldImagePickerConfiguration extends FormFieldBaseConfiguration<ImagePickerFieldConfiguration> {
-    type: "imagePicker";
-    fieldProps: ImagePickerFieldConfiguration;
+export type MediaPickerFieldConfiguration = PartialProperties<Omit<MediaPickerProps, "name">, "onChange">;
+export interface FieldMediaPickerConfiguration extends FormFieldBaseConfiguration<MediaPickerFieldConfiguration> {
+    type: "mediaPicker";
+    fieldProps: MediaPickerFieldConfiguration;
 }
 export interface FieldCheckboxConfiguration extends FormFieldBaseConfiguration<Omit<CheckboxProps, "name" | "type">> {
     type: "checkbox";

package/dist/components/MediaPicker/MediaPicker.d.ts

@@ -47,10 +47,6 @@ export interface ImagePickerProps {
 export declare const ImagePickerInner: React.FC<ImagePickerProps & {
     innerRef?: React.Ref<HTMLButtonElement>;
 }>;
-/**
- * @deprecated Use MediaPicker instead
- */
-export declare const ImagePicker: React.ForwardRefExoticComponent<ImagePickerProps & React.RefAttributes<HTMLButtonElement>>;
 export interface MediaPickerProps {
     name: string;
     media: string[];
@@ -92,4 +88,4 @@ export interface MediaPickerProps {
     isErrorUploading?: boolean;
     localisation: Partial<Record<"openModalButton" | "selectButton" | "error" | "upload" | "clearSelection" | "cancel" | "search" | "unsupportedMediaType" | "modalTitle", string>>;
 }
-export declare const MediaPicker: (props: MediaPickerProps) => React.JSX.Element;
+export declare const MediaPicker: React.ForwardRefExoticComponent<MediaPickerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/index.d.ts

@@ -52,7 +52,6 @@ export { Spinner } from "./components/Spinner/Spinner";
 export { Steps } from "./components/Steps/Steps";
 export { default as Switcher } from "./components/Switcher/Switcher";
 export { default as Image } from "./components/Image/Image";
-export { ImagePicker } from "./components/MediaPicker/MediaPicker";
 export { MediaPicker, TargetProps } from "./components/MediaPicker/MediaPicker";
 export { default as Tabbar, TabbarProps, TabItemDetails, } from "./components/Tabbar/Tabbar";
 export { Breadcrumbs, BreadcrumbProps } from "./components/Breadcrumbs";

package/dist/index.development.js

@@ -285,7 +285,7 @@ var ChartIcon = IconWrapper(SvgChartIcon);
 
 const SvgChartLineColoredIcon = (props) => React__namespace.default.createElement(
   "svg",
-  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 28, height: 28, fill: "none", viewBox: "0 0 28 28" }, props),
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 28 28" }, props),
   React__namespace.default.createElement("path", { fill: "#F09", d: "M5 20c-.55 0-1.02-.196-1.412-.587A1.927 1.927 0 0 1 3 18c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 5 16h.263a.64.64 0 0 1 .237.05l4.55-4.55a.642.642 0 0 1-.05-.238V11c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 12 9c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413 0 .033-.017.2-.05.5l2.55 2.55a.642.642 0 0 1 .238-.05h.524c.075 0 .155.017.238.05l3.55-3.55a.642.642 0 0 1-.05-.238V10c0-.55.196-1.02.587-1.412A1.927 1.927 0 0 1 23 8c.55 0 1.021.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.927 1.927 0 0 1 23 12h-.262a.642.642 0 0 1-.238-.05l-3.55 3.55c.033.083.05.163.05.238V16c0 .55-.196 1.02-.587 1.412A1.927 1.927 0 0 1 17 18c-.55 0-1.02-.196-1.412-.588A1.923 1.923 0 0 1 15 16v-.262c0-.075.017-.155.05-.238l-2.55-2.55a.642.642 0 0 1-.238.05H12c-.033 0-.2-.017-.5-.05L6.95 17.5c.033.083.05.163.05.238V18c0 .55-.196 1.021-.588 1.413A1.925 1.925 0 0 1 5 20Z" }),
   React__namespace.default.createElement("circle", { cx: 12, cy: 11, r: 2, fill: "#FF82AB" }),
   React__namespace.default.createElement("circle", { cx: 5, cy: 18, r: 2, fill: "#FF82AB" }),
@@ -296,7 +296,7 @@ var ChartLineColoredIcon = IconWrapper(SvgChartLineColoredIcon);
 
 const SvgChatBoxIcon = (props) => React__namespace.default.createElement(
   "svg",
-  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 20, height: 19, fill: "none", viewBox: "0 0 20 19" }, props),
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 20 19" }, props),
   React__namespace.default.createElement("path", { fill: "currentColor", d: "M18 0H2C.9 0 0 .9 0 2v15.59c0 .89 1.08 1.34 1.71.71L4 16h14c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2Zm-6.43 9.57-1.12 2.44a.5.5 0 0 1-.91 0L8.42 9.57 5.98 8.45a.5.5 0 0 1 0-.91l2.44-1.12 1.12-2.44a.5.5 0 0 1 .91 0l1.12 2.44 2.44 1.12a.5.5 0 0 1 0 .91l-2.44 1.12Z" })
 );
 var ChatBoxIcon = IconWrapper(SvgChatBoxIcon);
@@ -310,7 +310,7 @@ var CheckIcon = IconWrapper(SvgCheckIcon);
 
 const SvgChevronDoubleIcon = (props) => React__namespace.default.createElement(
   "svg",
-  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 8, height: 14, fill: "none", viewBox: "0 0 8 14" }, props),
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 8 14" }, props),
   React__namespace.default.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M4 0a1 1 0 0 1 .707.293l3 3a1 1 0 0 1-1.414 1.414L4 2.414 1.707 4.707A1 1 0 0 1 .293 3.293l3-3A1 1 0 0 1 4 0ZM.293 9.293a1 1 0 0 1 1.414 0L4 11.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414Z", clipRule: "evenodd" })
 );
 var ChevronDoubleIcon = IconWrapper(SvgChevronDoubleIcon);
@@ -352,7 +352,7 @@ var DeleteIcon = IconWrapper(SvgDeleteIcon);
 
 const SvgDownArrowIcon = (props) => React__namespace.default.createElement(
   "svg",
-  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 16 16" }, props),
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 16 16" }, props),
   React__namespace.default.createElement("path", { fill: "currentColor", d: "m12.762 6.57-.48-.382A.944.944 0 0 0 11.696 6a.9.9 0 0 0-.578.188L8 8.663 4.88 6.188A.9.9 0 0 0 4.304 6a.944.944 0 0 0-.584.188l-.475.382C3.08 6.7 3 6.854 3 7.034c0 .183.081.336.244.458l4.178 3.315A.87.87 0 0 0 8 11a.91.91 0 0 0 .584-.193l4.178-3.315A.567.567 0 0 0 13 7.034c0-.177-.08-.331-.238-.464z" })
 );
 var DownArrowIcon = IconWrapper(SvgDownArrowIcon);
@@ -373,7 +373,7 @@ var EditIcon = IconWrapper(SvgEditIcon);
 
 const SvgEmptyIcon = (props) => React__namespace.default.createElement(
   "svg",
-  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 28, height: 28, fill: "none", viewBox: "0 0 28 28" }, props),
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 28 28" }, props),
   React__namespace.default.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M14 22a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0 3c6.075 0 11-4.925 11-11S20.075 3 14 3 3 7.925 3 14s4.925 11 11 11Z", clipRule: "evenodd" }),
   React__namespace.default.createElement("path", { fill: "currentColor", d: "M3.414 24.414a2 2 0 0 1 0-2.828L21.148 3.852a2 2 0 1 1 2.829 2.828L6.243 24.414a2 2 0 0 1-2.829 0Z" })
 );
@@ -381,7 +381,7 @@ var EmptyIcon = IconWrapper(SvgEmptyIcon);
 
 const SvgEmptyStateDashboardIcon = (props) => React__namespace.default.createElement(
   "svg",
-  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 450, height: 300, fill: "none", viewBox: "0 0 450 300" }, props),
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 450 300" }, props),
   React__namespace.default.createElement("path", { fill: "#82D6F8", d: "M450 291c0-26.921-5.82-53.578-17.127-78.45-11.307-24.872-27.881-47.471-48.774-66.507-20.893-19.036-45.697-34.136-72.995-44.438C283.806 91.302 254.547 86 225 86c-29.547 0-58.806 5.302-86.104 15.605-27.298 10.302-52.102 25.402-72.995 44.438-20.893 19.036-37.467 41.635-48.774 66.507C5.82 237.422 0 264.079 0 291h450Z" }),
   React__namespace.default.createElement("path", { fill: "#1F2937", d: "M95 73.008C95 65.824 100.824 60 108.008 60h234.146c7.184 0 13.008 5.824 13.008 13.008v150.244c0 7.184-5.824 13.008-13.008 13.008H108.008c-7.184 0-13.008-5.824-13.008-13.008V73.008Z" }),
   React__namespace.default.createElement("path", { fill: "#F9FAFB", d: "M167.846 70.406h172.91a4 4 0 0 1 4 4v147.447a4 4 0 0 1-4 4h-172.91V70.406Z" }),
@@ -461,21 +461,21 @@ var ExportIcon = IconWrapper(SvgExportIcon);
 
 const SvgEyeIconSlashed = (props) => React__namespace.default.createElement(
   "svg",
-  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 22, height: 20, fill: "none", viewBox: "0 0 22 20" }, props),
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 22 20" }, props),
   React__namespace.default.createElement("path", { fill: "currentColor", d: "M11 4.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C20.27 5.11 16 2 11 2c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24ZM1.71 1.16a.996.996 0 0 0 0 1.41l1.97 1.97A11.892 11.892 0 0 0 0 9.5C1.73 13.89 6 17 11 17c1.52 0 2.97-.3 4.31-.82l2.72 2.72a.996.996 0 1 0 1.41-1.41L3.13 1.16c-.39-.39-1.03-.39-1.42 0ZM11 14.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L13.14 14c-.65.32-1.37.5-2.14.5Zm2.97-5.33a2.97 2.97 0 0 0-2.64-2.64l2.64 2.64Z" })
 );
 var EyeIconSlashed = IconWrapper(SvgEyeIconSlashed);
 
 const SvgEyeIcon = (props) => React__namespace.default.createElement(
   "svg",
-  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 22, height: 15, fill: "none", viewBox: "0 0 22 15" }, props),
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 22 15" }, props),
   React__namespace.default.createElement("path", { fill: "currentColor", d: "M11 0C6 0 1.73 3.11 0 7.5 1.73 11.89 6 15 11 15s9.27-3.11 11-7.5C20.27 3.11 16 0 11 0Zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5Zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3Z" })
 );
 var EyeIcon = IconWrapper(SvgEyeIcon);
 
 const SvgGearColoredIcon = (props) => React__namespace.default.createElement(
   "svg",
-  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 28, height: 28, fill: "none", viewBox: "0 0 28 28" }, props),
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 28 28" }, props),
   React__namespace.default.createElement("path", { fill: "#6670A5", d: "M13.142 2.437a1.062 1.062 0 0 1 1.716 0l2.124 2.916c.235.322.63.486 1.024.424l3.564-.56a1.062 1.062 0 0 1 1.213 1.213l-.56 3.564c-.062.394.102.79.424 1.024l2.916 2.124a1.062 1.062 0 0 1 0 1.716l-2.916 2.124c-.322.235-.486.63-.424 1.024l.56 3.564a1.062 1.062 0 0 1-1.213 1.213l-3.564-.56a1.062 1.062 0 0 0-1.024.424l-2.124 2.916a1.062 1.062 0 0 1-1.716 0l-2.124-2.916a1.062 1.062 0 0 0-1.024-.424l-3.564.56a1.062 1.062 0 0 1-1.213-1.213l.56-3.564a1.062 1.062 0 0 0-.424-1.024l-2.916-2.124a1.062 1.062 0 0 1 0-1.716l2.916-2.124c.322-.235.486-.63.424-1.024l-.56-3.564A1.062 1.062 0 0 1 6.43 5.217l3.564.56c.394.062.79-.102 1.024-.424l2.124-2.916Z" }),
   React__namespace.default.createElement("circle", { cx: 14, cy: 14, r: 4, fill: "#383B6D" })
 );
@@ -483,14 +483,14 @@ var GearColoredIcon = IconWrapper(SvgGearColoredIcon);
 
 const SvgGearIcon = (props) => React__namespace.default.createElement(
   "svg",
-  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "none", viewBox: "0 0 20 20" }, props),
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 20 20" }, props),
   React__namespace.default.createElement("path", { fill: "currentColor", d: "M17.5 10c0-.23-.01-.45-.03-.68l1.86-1.41c.4-.3.51-.86.26-1.3l-1.87-3.23a.987.987 0 0 0-1.25-.42l-2.15.91c-.37-.26-.76-.49-1.17-.68L12.86.88c-.06-.5-.49-.88-.99-.88H8.14c-.51 0-.94.38-1 .88l-.29 2.31c-.41.19-.8.42-1.17.68l-2.15-.91c-.46-.2-1-.02-1.25.42L.41 6.62c-.25.44-.14.99.26 1.3l1.86 1.41a7.343 7.343 0 0 0 0 1.35L.67 12.09c-.4.3-.51.86-.26 1.3l1.87 3.23c.25.44.79.62 1.25.42l2.15-.91c.37.26.76.49 1.17.68l.29 2.31c.06.5.49.88.99.88h3.73c.5 0 .93-.38.99-.88l.29-2.31c.41-.19.8-.42 1.17-.68l2.15.91c.46.2 1 .02 1.25-.42l1.87-3.23c.25-.44.14-.99-.26-1.3l-1.86-1.41c.03-.23.04-.45.04-.68Zm-7.46 3.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5Z" })
 );
 var GearIcon = IconWrapper(SvgGearIcon);
 
 const SvgGroupColoredIcon = (props) => React__namespace.default.createElement(
   "svg",
-  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 28, height: 28, fill: "none", viewBox: "0 0 28 28" }, props),
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 28 28" }, props),
   React__namespace.default.createElement("path", { fill: "#6ABFA5", d: "M4 22a.965.965 0 0 1-.712-.288A.965.965 0 0 1 3 21v-1.8c0-.567.146-1.088.438-1.563A2.914 2.914 0 0 1 4.6 16.55a14.866 14.866 0 0 1 3.15-1.163A13.776 13.776 0 0 1 11 15c1.1 0 2.183.129 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.162 1.087.292.475.438.996.438 1.563V21c0 .283-.096.52-.288.712A.965.965 0 0 1 18 22H4Zm7-8c-1.1 0-2.042-.392-2.825-1.175C7.392 12.042 7 11.1 7 10s.392-2.042 1.175-2.825C8.958 6.392 9.9 6 11 6s2.042.392 2.825 1.175C14.608 7.958 15 8.9 15 10s-.392 2.042-1.175 2.825C13.042 13.608 12.1 14 11 14Z" }),
   React__namespace.default.createElement("path", { fill: "#559783", d: "M20.525 22a1.21 1.21 0 0 0 .35-.438 1.35 1.35 0 0 0 .125-.587V19c0-.733-.204-1.438-.612-2.113-.41-.675-.988-1.254-1.738-1.737.85.1 1.65.27 2.4.512s1.45.538 2.1.888c.6.333 1.058.704 1.375 1.112.316.409.475.855.475 1.338v2c0 .283-.096.52-.288.712A.965.965 0 0 1 24 22h-3.475ZM21 10c0 1.1-.392 2.042-1.175 2.825C19.04 13.608 18.1 14 17 14a4.92 4.92 0 0 1-.7-.062 6.181 6.181 0 0 1-.7-.138 5.937 5.937 0 0 0 1.037-1.775C16.879 11.375 17 10.7 17 10s-.121-1.375-.363-2.025A5.937 5.937 0 0 0 15.6 6.2c.233-.083.466-.138.7-.163.233-.025.466-.037.7-.037 1.1 0 2.041.392 2.825 1.175C20.608 7.958 21 8.9 21 10Z" })
 );
@@ -519,7 +519,7 @@ var HeartIcon = IconWrapper(SvgHeartIcon);
 
 const SvgImageIcon = (props) => React__namespace.default.createElement(
   "svg",
-  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 18, height: 18, fill: "none", viewBox: "0 0 18 18" }, props),
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 18 18" }, props),
   React__namespace.default.createElement("path", { fill: "currentColor", d: "M18 16V2c0-1.1-.9-2-2-2H2C.9 0 0 .9 0 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2ZM5.9 10.98 8 13.51l3.1-3.99c.2-.26.6-.26.8.01l3.51 4.68a.5.5 0 0 1-.4.8H3.02c-.42 0-.65-.48-.39-.81L5.12 11c.19-.26.57-.27.78-.02Z" })
 );
 var ImageIcon = IconWrapper(SvgImageIcon);
@@ -562,7 +562,7 @@ var LockIcon = IconWrapper(SvgLockIcon);
 
 const SvgMessagesIcon = (props) => React__namespace.default.createElement(
   "svg",
-  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 28, height: 28, fill: "none", viewBox: "0 0 28 28" }, props),
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 28 28" }, props),
   React__namespace.default.createElement("path", { fill: "currentColor", d: "M24 3a2 2 0 0 1 2 2v15a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h20Z" }),
   React__namespace.default.createElement("path", { fill: "currentColor", d: "M12.586 10.414a2 2 0 0 1 2.828 0l6.172 6.172a2 2 0 0 1 0 2.828l-6.172 6.172a2 2 0 0 1-2.828 0l-6.172-6.172a2 2 0 0 1 0-2.828l6.172-6.172Z" }),
   React__namespace.default.createElement("rect", { width: 18, height: 2, x: 5, y: 6, fill: "#fff", rx: 1 }),
@@ -573,7 +573,7 @@ var MessagesIcon = IconWrapper(SvgMessagesIcon);
 
 const SvgMouseIcon = (props) => React__namespace.default.createElement(
   "svg",
-  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 15, height: 20, fill: "none", viewBox: "0 0 15 20" }, props),
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 15 20" }, props),
   React__namespace.default.createElement("path", { fill: "currentColor", d: "M7.5 20c-1.933 0-3.583-.683-4.95-2.05C1.183 16.583.5 14.933.5 13V7c0-1.933.683-3.583 2.05-4.95C3.917.683 5.567 0 7.5 0c1.933 0 3.583.683 4.95 2.05C13.817 3.417 14.5 5.067 14.5 7v6c0 1.933-.683 3.583-2.05 4.95C11.083 19.317 9.433 20 7.5 20Zm1-13h4c0-1.2-.379-2.258-1.137-3.175C10.604 2.908 9.65 2.333 8.5 2.1V7Zm-6 0h4V2.1c-1.15.233-2.104.808-2.863 1.725A4.837 4.837 0 0 0 2.5 7Zm5 11c1.383 0 2.563-.487 3.538-1.462.975-.975 1.462-2.155 1.462-3.538V9h-10v4c0 1.383.488 2.563 1.463 3.538C4.938 17.513 6.117 18 7.5 18Z" })
 );
 var MouseIcon = IconWrapper(SvgMouseIcon);
@@ -594,14 +594,14 @@ var PageViewIcon = IconWrapper(SvgPageViewIcon);
 
 const SvgPinIcon = (props) => React__namespace.default.createElement(
   "svg",
-  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 14, height: 20, fill: "none", viewBox: "0 0 14 20" }, props),
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 14 20" }, props),
   React__namespace.default.createElement("path", { fill: "#64748b", d: "M14 10.87c0-.47-.34-.85-.8-.98A2.997 2.997 0 0 1 11 7V2h1c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1h1v5C3 8.38 2.07 9.54.8 9.89c-.46.13-.8.51-.8.98V11c0 .55.45 1 1 1h4.98L6 19c0 .55.45 1 1 1s1-.45 1-1l-.02-7H13c.55 0 1-.45 1-1v-.13Z" })
 );
 var PinIcon = IconWrapper(SvgPinIcon);
 
 const SvgPrintIcon = (props) => React__namespace.default.createElement(
   "svg",
-  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 19, height: 18 }, props),
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24 }, props),
   React__namespace.default.createElement("path", { fill: "currentColor", d: "M16.6 5H15V.5a.5.5 0 0 0-.5-.5h-10a.5.5 0 0 0-.5.5V5H2.4A2.4 2.4 0 0 0 0 7.4v5.2A2.4 2.4 0 0 0 2.4 15H5v2.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V15h2.6a2.4 2.4 0 0 0 2.4-2.4V7.4A2.4 2.4 0 0 0 16.6 5zM5 1h9v4H5V1zm8 16H6v-5h7v5zm5-4.4a1.4 1.4 0 0 1-1.4 1.4H14v-2.5a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5V14H2.4A1.4 1.4 0 0 1 1 12.6V7.4A1.4 1.4 0 0 1 2.4 6h14.2A1.4 1.4 0 0 1 18 7.4v5.2z" })
 );
 var PrintIcon = IconWrapper(SvgPrintIcon);
@@ -623,7 +623,7 @@ var RobotIcon = IconWrapper(SvgRobotIcon);
 
 const SvgSearchCancelIcon = (props) => React__namespace.default.createElement(
   "svg",
-  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 14, height: 14, fill: "none", viewBox: "0 0 14 14" }, props),
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 14 14" }, props),
   React__namespace.default.createElement("path", { fill: "currentColor", d: "M2.05.637A1 1 0 0 0 .638 2.05L5.587 7l-4.95 4.95a1 1 0 0 0 1.414 1.414L7 8.415l4.95 4.95a1 1 0 0 0 1.414-1.415L8.415 7l4.95-4.949A1 1 0 0 0 11.95.637L7 5.587 2.05.637Z" })
 );
 var SearchCancelIcon = IconWrapper(SvgSearchCancelIcon);
@@ -668,14 +668,14 @@ var SpaceRocketIcon = IconWrapper(SvgSpaceRocketIcon);
 
 const SvgStarIcon = (props) => React__namespace.default.createElement(
   "svg",
-  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 19, height: 18, fill: "none", viewBox: "0 0 19 18" }, props),
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 19 18" }, props),
   React__namespace.default.createElement("path", { fill: "currentColor", d: "M8.587 1.05c.352-.791 1.474-.791 1.826 0l1.753 3.93a1 1 0 0 0 .808.588l4.281.452c.86.09 1.207 1.158.565 1.737l-3.198 2.882a1 1 0 0 0-.309.95l.893 4.211c.18.847-.728 1.506-1.478 1.074L10 14.724a1 1 0 0 0-1 0l-3.728 2.15c-.75.432-1.658-.227-1.478-1.074l.893-4.21a1 1 0 0 0-.309-.951L1.18 7.757c-.642-.58-.296-1.646.565-1.737l4.28-.452a1 1 0 0 0 .81-.587l1.752-3.932Z" })
 );
 var StarIcon = IconWrapper(SvgStarIcon);
 
 const SvgStatusColoredIcon = (props) => React__namespace.default.createElement(
   "svg",
-  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 28, height: 28, fill: "none", viewBox: "0 0 28 28" }, props),
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 28 28" }, props),
   React__namespace.default.createElement("rect", { width: 16, height: 24, x: 6, y: 2, fill: "#374151", rx: 2 }),
   React__namespace.default.createElement("circle", { cx: 14, cy: 9, r: 4, fill: "#fff" }),
   React__namespace.default.createElement("circle", { cx: 14, cy: 19, r: 4, fill: "#E86967" })
@@ -684,7 +684,7 @@ var StatusColoredIcon = IconWrapper(SvgStatusColoredIcon);
 
 const SvgWarningIcon = (props) => React__namespace.default.createElement(
   "svg",
-  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "none", viewBox: "0 0 20 20" }, props),
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 20 20" }, props),
   React__namespace.default.createElement("path", { fill: "currentColor", d: "M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0Zm0 11c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Zm1 4H9v-2h2v2Z" })
 );
 var WarningIcon = IconWrapper(SvgWarningIcon);
@@ -4812,12 +4812,11 @@ const ImagePickerInner = ({
     )
   );
 };
-const ImagePicker = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(ImagePickerInner, Object.assign({}, props, { innerRef: ref })));
-const MediaPicker = (props) => {
+const MediaPicker = React__namespace.default.forwardRef((props, ref) => {
   var _a, _b;
   const mappedProps = Object.assign(Object.assign({}, props), { preselectedImage: props.preselectedMedia, images: props.media, handleChange: props.onChange, clearImageIndex: props.clearIndex, localisation: Object.assign(Object.assign({}, props.localisation), { uploadImage: (_b = (_a = props.localisation) === null || _a === void 0 ? void 0 : _a.upload) !== null && _b !== void 0 ? _b : "Upload file" }) });
-  return React__namespace.default.createElement(ImagePicker, Object.assign({}, mappedProps));
-};
+  return React__namespace.default.createElement(ImagePickerInner, Object.assign({}, mappedProps, { innerRef: ref }));
+});
 
 const TagGroup = ({ children, tags, tagSize = "base", className }) => React__namespace.default.createElement(
   "div",
@@ -5123,18 +5122,16 @@ const FormImagePicker = React__namespace.default.forwardRef((_a, innerRef) => {
     { name, fieldErrors, fieldRequired, label, info, decoratorClassname },
     React__namespace.default.createElement(index_ie11.Controller, { name, control, rules, render: (field) => {
       var _a2;
-      React.useEffect(() => {
-        if (fieldProps.preselectedImage && !field.value) {
-          field.onChange({
-            target: { name, value: fieldProps.preselectedImage }
-          });
-        }
-      }, []);
-      return React__namespace.default.createElement(ImagePicker, Object.assign({}, fieldProps, field, { handleChange: (e) => {
+      if (fieldProps.preselectedMedia && !field.value) {
+        field.onChange({
+          target: { name, value: fieldProps.preselectedMedia }
+        });
+      }
+      return React__namespace.default.createElement(MediaPicker, Object.assign({}, fieldProps, field, { media: fieldProps.media, onChange: (e) => {
         var _a3;
         field.onChange(e.target.value);
-        (_a3 = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.handleChange) === null || _a3 === void 0 ? void 0 : _a3.call(fieldProps, e);
-      }, preselectedImage: (_a2 = field.value) !== null && _a2 !== void 0 ? _a2 : fieldProps.preselectedImage, ref: innerRef }));
+        (_a3 = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.onChange) === null || _a3 === void 0 ? void 0 : _a3.call(fieldProps, e);
+      }, preselectedMedia: (_a2 = field.value) !== null && _a2 !== void 0 ? _a2 : fieldProps.preselectedMedia, ref: innerRef }));
     } })
   );
 });
@@ -5243,7 +5240,7 @@ function FormFieldMapper(formFieldProps, useFormReturn) {
       return React__namespace.default.createElement(FormInput, Object.assign({ key: name, name }, decoratorProps, { fieldRequired: isRequired(options), fieldErrors: errors }, fieldProps, { control, rules: options, type }));
     case "select":
       return React__namespace.default.createElement(FormSelect, Object.assign({ key: name }, decoratorProps, { fieldRequired: isRequired(options), fieldErrors: errors }, fieldProps, { control, rules: options, name }));
-    case "imagePicker":
+    case "mediaPicker":
       return React__namespace.default.createElement(FormImagePicker, Object.assign({ key: name }, decoratorProps, { fieldRequired: isRequired(options), fieldErrors: errors }, fieldProps, { control, rules: options, name }));
     case "radioGroup": {
       return React__namespace.default.createElement(FormRadioGroup, Object.assign({ key: name }, decoratorProps, { fieldRequired: isRequired(options), fieldErrors: errors }, fieldProps, { name, rules: options, control }));
@@ -5765,7 +5762,6 @@ exports.HeartIcon = HeartIcon;
 exports.Icon = Icon;
 exports.Image = Image$1;
 exports.ImageIcon = ImageIcon;
-exports.ImagePicker = ImagePicker;
 exports.InfoField = InfoField;
 exports.InfoIcon = InfoIcon;
 exports.Input = Input;