@edifice.io/react 2.0.0-develop-rc.12 → 2.0.0-develop-rc.13

package/dist/components/FileCard/FileCard.js

@@ -1,23 +1,23 @@
-import { jsx as e, jsxs as g } from "react/jsx-runtime";
-import { useRef as T } from "react";
-import { DocumentHelper as k, odeServices as w } from "@edifice.io/ts-client";
-import p from "clsx";
-import { Card as l } from "../Card/Card.js";
-import z from "./FileIcon.js";
-import S from "../../hooks/useThumbnail/useThumbnail.js";
-import { Icon as i } from "../Icon/Icon.js";
-const j = ({
-  doc: r,
-  isClickable: u = !0,
-  isSelectable: d = !1,
-  isSelected: b = !1,
-  onClick: f,
-  className: h
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Mic, Landscape, Video, TextPage } from "@edifice.io/icons";
+import clsx from "clsx";
+import { DocumentHelper, odeServices } from "edifice-ts-client";
+import Card from "../Card/Card.js";
+import FileIcon from "./FileIcon.js";
+import useThumbnail from "../../hooks/useThumbnail/useThumbnail.js";
+const FileCard = ({
+  doc,
+  isClickable = !0,
+  isSelectable = !1,
+  isSelected = !1,
+  onClick,
+  className
 }) => {
-  var s;
-  const n = T(null), o = k.getRole(r);
-  function c(y) {
-    const m = {
+  var _a;
+  const ref = useRef(null), type = DocumentHelper.getRole(doc);
+  function getRoleMap(type2) {
+    const roleMappings = {
       csv: {
         icon: ".CSV",
         color: "bg-orange-200"
@@ -39,7 +39,7 @@ const j = ({
         color: "bg-red-200"
       },
       audio: {
-        icon: /* @__PURE__ */ e(i, { name: "mic", size: "22" }),
+        icon: /* @__PURE__ */ jsx(Mic, { width: 22, height: 22 }),
         color: "bg-red-200"
       },
       ppt: {
@@ -47,11 +47,11 @@ const j = ({
         color: "bg-yellow-200"
       },
       img: {
-        icon: /* @__PURE__ */ e(i, { name: "landscape", size: "22" }),
+        icon: /* @__PURE__ */ jsx(Landscape, { width: 22, height: 22 }),
         color: "bg-green-200"
       },
       video: {
-        icon: /* @__PURE__ */ e(i, { name: "video", size: "22" }),
+        icon: /* @__PURE__ */ jsx(Video, { width: 22, height: 22 }),
         color: "bg-purple-200"
       },
       zip: {
@@ -63,31 +63,29 @@ const j = ({
         color: "bg-blue-200"
       },
       unknown: {
-        icon: /* @__PURE__ */ e(i, { name: "text-page", size: "22" }),
+        icon: /* @__PURE__ */ jsx(TextPage, { width: 22, height: 22 }),
         color: "bg-gray-300"
       }
     };
-    return m[y] || m.unknown;
+    return roleMappings[type2] || roleMappings.unknown;
   }
-  const x = p("file position-relative rounded", ((s = c(o ?? "default")) == null ? void 0 : s.color) ?? "bg-yellow-200"), a = o === "img" || o === "video" ? w.workspace().getThumbnailUrl(r) : null, t = S(a, {
-    ref: n
-  }), v = t && {
-    backgroundImage: `url(${a})`,
+  const file = clsx("file position-relative rounded", ((_a = getRoleMap(type ?? "default")) == null ? void 0 : _a.color) ?? "bg-yellow-200"), mediaSrc = type === "img" || type === "video" ? odeServices.workspace().getThumbnailUrl(doc) : null, hasThumbnail = useThumbnail(mediaSrc, {
+    ref
+  }), imageStyles = hasThumbnail && {
+    backgroundImage: `url(${mediaSrc})`,
     backgroundSize: "cover"
   };
-  return /* @__PURE__ */ e(l, { className: p("card-file", h), isClickable: u, isSelectable: d, isSelected: b, onClick: f, children: /* @__PURE__ */ g(l.Body, { space: "8", children: [
-    /* @__PURE__ */ e("div", { ref: n, className: x, style: {
+  return /* @__PURE__ */ jsx(Card, { className: clsx("card-file", className), isClickable, isSelectable, isSelected, onClick, children: /* @__PURE__ */ jsxs(Card.Body, { space: "8", children: [
+    /* @__PURE__ */ jsx("div", { ref, className: file, style: {
       aspectRatio: "16/10",
-      ...v
-    }, children: o !== "img" || o === "img" && !t ? /* @__PURE__ */ e(z, { type: o, roleMap: c(o) }) : null }),
-    /* @__PURE__ */ g("div", { className: "mt-4", children: [
-      /* @__PURE__ */ e(l.Text, { children: r.name }),
-      /* @__PURE__ */ e(l.Text, { className: "text-black-50", children: r == null ? void 0 : r.ownerName })
+      ...imageStyles
+    }, children: type !== "img" || type === "img" && !hasThumbnail ? /* @__PURE__ */ jsx(FileIcon, { type, roleMap: getRoleMap(type) }) : null }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+      /* @__PURE__ */ jsx(Card.Text, { children: doc.name }),
+      /* @__PURE__ */ jsx(Card.Text, { className: "text-black-50", children: doc == null ? void 0 : doc.ownerName })
     ] })
   ] }) });
-};
+}, FileCard$1 = FileCard;
 export {
-  j as FileCard,
-  j as default
+  FileCard$1 as default
 };
-//# sourceMappingURL=FileCard.js.map

package/dist/components/FileCard/FileIcon.d.ts

@@ -1,4 +1,4 @@
-import { Role } from '@edifice.io/ts-client';
+import { Role } from 'edifice-ts-client';
 declare const FileIcon: ({ type, roleMap, }: {
     type: Role | 'unknown';
     roleMap?: Record<string, string | JSX.Element> | undefined;

package/dist/components/FileCard/FileIcon.js

@@ -1,16 +1,15 @@
-import { jsx as t } from "react/jsx-runtime";
-import o from "clsx";
-import { Icon as d } from "../Icon/Icon.js";
-const h = ({
-  type: i,
-  roleMap: n
+import { jsx } from "react/jsx-runtime";
+import { Paperclip } from "@edifice.io/icons";
+import clsx from "clsx";
+const FileIcon = ({
+  type,
+  roleMap
 }) => {
-  const c = typeof (n == null ? void 0 : n.icon) != "string" && i !== "unknown", s = o("position-absolute top-50 start-50 translate-middle", {
-    "p-12 rounded-circle shadow": c
-  }, n == null ? void 0 : n.color);
-  return /* @__PURE__ */ t("div", { className: s, children: (n == null ? void 0 : n.icon) ?? /* @__PURE__ */ t(d, { name: "paperclip" }) });
+  const hasNoShadow = typeof (roleMap == null ? void 0 : roleMap.icon) != "string" && type !== "unknown", fileicon = clsx("position-absolute top-50 start-50 translate-middle", {
+    "p-12 rounded-circle shadow": hasNoShadow
+  }, roleMap == null ? void 0 : roleMap.color);
+  return /* @__PURE__ */ jsx("div", { className: fileicon, children: (roleMap == null ? void 0 : roleMap.icon) ?? /* @__PURE__ */ jsx(Paperclip, {}) });
 };
 export {
-  h as default
+  FileIcon as default
 };
-//# sourceMappingURL=FileIcon.js.map

package/dist/components/FileCard/index.d.ts

@@ -1 +1,2 @@
+export { default as FileCard } from './FileCard';
 export * from './FileCard';

package/dist/components/Form/FormContext.js

@@ -1,12 +1,11 @@
-import { useContext as t, createContext as e } from "react";
-const n = /* @__PURE__ */ e(null), c = () => {
-  const o = t(n);
-  if (!o)
+import { useContext, createContext } from "react";
+const Context = /* @__PURE__ */ createContext(null), useFormControl = () => {
+  const context = useContext(Context);
+  if (!context)
     throw new Error("Cannot be rendered outside the FormControl component");
-  return o;
+  return context;
 };
 export {
-  n as Context,
-  c as useFormControl
+  Context,
+  useFormControl
 };
-//# sourceMappingURL=FormContext.js.map

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

@@ -29,7 +29,7 @@ export interface FormControlProps extends React.ComponentPropsWithRef<'div'> {
      */
     status?: 'valid' | 'invalid';
 }
-export declare const FormControl: import('react').ForwardRefExoticComponent<Omit<FormControlProps, "ref"> & import('react').RefAttributes<HTMLDivElement>> & {
+declare const FormControl: import('react').ForwardRefExoticComponent<Omit<FormControlProps, "ref"> & import('react').RefAttributes<HTMLDivElement>> & {
     Label: import('react').ForwardRefExoticComponent<Omit<import('../Label').LabelProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
     Input: import('react').ForwardRefExoticComponent<Omit<import('../Input').InputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
     Text: {

package/dist/components/Form/FormControl.js

@@ -1,34 +1,32 @@
-import { jsx as f } from "react/jsx-runtime";
-import { forwardRef as i, useMemo as l } from "react";
-import { Context as s } from "./FormContext.js";
-import { FormText as u } from "./FormText.js";
-import { Label as v } from "../Label/Label.js";
-import { Input as b } from "../Input/Input.js";
-const d = /* @__PURE__ */ i(({
-  children: n,
-  className: p,
-  id: o,
-  isOptional: r,
-  isReadOnly: t,
-  isRequired: m,
-  status: e,
-  ...c
-}, x) => {
-  const a = l(() => ({
-    id: o,
-    isOptional: r,
-    isRequired: m,
-    isReadOnly: t,
-    status: e
-  }), [o, r, t, m, e]);
-  return /* @__PURE__ */ f(s.Provider, { value: a, children: /* @__PURE__ */ f("div", { ref: x, className: p, ...c, children: n }) });
-}), w = /* @__PURE__ */ Object.assign(d, {
-  Label: v,
-  Input: b,
-  Text: u
-});
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { Context } from "./FormContext.js";
+import FormText from "./FormText.js";
+import Label from "../Label/Label.js";
+import Input from "../Input/Input.js";
+const Root = /* @__PURE__ */ forwardRef(({
+  children,
+  className,
+  id,
+  isOptional,
+  isReadOnly,
+  isRequired,
+  status,
+  ...restProps
+}, ref) => {
+  const values = useMemo(() => ({
+    id,
+    isOptional,
+    isRequired,
+    isReadOnly,
+    status
+  }), [id, isOptional, isReadOnly, isRequired, status]);
+  return /* @__PURE__ */ jsx(Context.Provider, { value: values, children: /* @__PURE__ */ jsx("div", { ref, className, ...restProps, children }) });
+}), FormControl = /* @__PURE__ */ Object.assign(Root, {
+  Label,
+  Input,
+  Text: FormText
+}), FormControl$1 = FormControl;
 export {
-  w as FormControl,
-  w as default
+  FormControl$1 as default
 };
-//# sourceMappingURL=FormControl.js.map

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export declare const FormText: {
+declare const FormText: {
     ({ children }: {
         children: ReactNode;
     }): import("react/jsx-runtime").JSX.Element;

package/dist/components/Form/FormText.js

@@ -1,19 +1,17 @@
-import { jsx as s } from "react/jsx-runtime";
-import i from "clsx";
-import { useFormControl as m } from "./FormContext.js";
-const n = ({
-  children: t
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useFormControl } from "./FormContext.js";
+const FormText = ({
+  children
 }) => {
   const {
-    status: o
-  } = m(), r = i("form-text", {
-    "is-invalid": o === "invalid",
-    valid: o === "valid"
+    status
+  } = useFormControl(), classes = clsx("form-text", {
+    "is-invalid": status === "invalid",
+    valid: status === "valid"
   });
-  return /* @__PURE__ */ s("p", { className: r, children: /* @__PURE__ */ s("em", { children: t }) });
-};
+  return /* @__PURE__ */ jsx("p", { className: classes, children: /* @__PURE__ */ jsx("em", { children }) });
+}, FormText$1 = FormText;
 export {
-  n as FormText,
-  n as default
+  FormText$1 as default
 };
-//# sourceMappingURL=FormText.js.map

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

@@ -1,2 +1,3 @@
+export { default as FormText } from './FormText';
+export { default as FormControl } from './FormControl';
 export * from './FormControl';
-export * from './FormText';

package/dist/components/Grid/Grid.js

@@ -1,33 +1,32 @@
-import { jsx as t } from "react/jsx-runtime";
-import n from "clsx";
-const p = ({
-  children: r,
-  className: o,
-  ...s
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const Grid = ({
+  children,
+  className,
+  ...restProps
 }) => {
-  const c = n("grid", o);
-  return /* @__PURE__ */ t("div", { className: c, ...s, children: r });
-}, $ = ({
-  sm: r,
-  md: o,
-  lg: s,
-  xl: c,
-  children: l,
-  className: e,
-  as: a,
-  ...i
+  const classes = clsx("grid", className);
+  return /* @__PURE__ */ jsx("div", { className: classes, ...restProps, children });
+}, Column = ({
+  sm,
+  md,
+  lg,
+  xl,
+  children,
+  className,
+  as,
+  ...restProps
 }) => {
-  const m = a || "div", g = n({
-    [`g-col-${r}`]: r,
-    [o ? `g-col-md-${o}` : ""]: o,
-    [s ? `g-col-lg-${s}` : ""]: s,
-    [c ? `g-col-xl-${c}` : ""]: c
-  }, e);
-  return /* @__PURE__ */ t(m, { className: g, ...i, children: l });
+  const Component = as || "div", classes = clsx({
+    [`g-col-${sm}`]: sm,
+    [md ? `g-col-md-${md}` : ""]: md,
+    [lg ? `g-col-lg-${lg}` : ""]: lg,
+    [xl ? `g-col-xl-${xl}` : ""]: xl
+  }, className);
+  return /* @__PURE__ */ jsx(Component, { className: classes, ...restProps, children });
 };
-p.Col = $;
+Grid.Col = Column;
 export {
-  $ as Column,
-  p as Grid
+  Column,
+  Grid
 };
-//# sourceMappingURL=Grid.js.map

package/dist/components/Heading/Heading.d.ts

@@ -23,5 +23,5 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
 /**
  * Heading component to display heading elements
  */
-export declare const Heading: import('react').ForwardRefExoticComponent<HeadingProps & import('react').RefAttributes<HTMLHeadingElement>>;
+declare const Heading: import('react').ForwardRefExoticComponent<HeadingProps & import('react').RefAttributes<HTMLHeadingElement>>;
 export default Heading;

package/dist/components/Heading/Heading.js

@@ -1,18 +1,16 @@
-import { jsx as f } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import c from "clsx";
-const d = /* @__PURE__ */ l(({
-  level: r = "h1",
-  headingStyle: o = "h1",
-  children: s,
-  className: e,
-  ...t
-}, a) => {
-  const m = c(o, e);
-  return /* @__PURE__ */ f(r, { ref: a, className: m, ...t, children: s });
-});
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+const Heading = /* @__PURE__ */ forwardRef(({
+  level: Component = "h1",
+  headingStyle = "h1",
+  children,
+  className,
+  ...restProps
+}, ref) => {
+  const classes = clsx(headingStyle, className);
+  return /* @__PURE__ */ jsx(Component, { ref, className: classes, ...restProps, children });
+}), Heading$1 = Heading;
 export {
-  d as Heading,
-  d as default
+  Heading$1 as default
 };
-//# sourceMappingURL=Heading.js.map

package/dist/components/Heading/index.d.ts

@@ -1 +1,2 @@
+export { default as Heading } from './Heading';
 export * from './Heading';

package/dist/components/Image/Image.d.ts

@@ -25,5 +25,5 @@ export interface ImageProps extends React.ComponentPropsWithRef<'img'> {
      */
     className?: string;
 }
-export declare const Image: import('react').ForwardRefExoticComponent<Omit<ImageProps, "ref"> & import('react').RefAttributes<HTMLImageElement>>;
+declare const Image: import('react').ForwardRefExoticComponent<Omit<ImageProps, "ref"> & import('react').RefAttributes<HTMLImageElement>>;
 export default Image;

package/dist/components/Image/Image.js

@@ -1,43 +1,41 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as j } from "react";
-import a from "clsx";
-import v from "../../core/usePaths/usePaths.js";
-import b from "../../hooks/useImage/useImage.js";
-const R = /* @__PURE__ */ j(({
-  src: s,
-  alt: c,
-  imgPlaceholder: n,
-  ratio: o,
-  objectFit: r,
-  className: i,
-  ...m
-}, l) => {
-  const [f] = v(), g = n ?? `${f}/common/image-placeholder.png`, {
-    imgSrc: p,
-    onError: d
-  } = b({
-    src: s,
-    placeholder: g
-  }), x = {
-    "ratio ratio-1x1": o === "1",
-    "ratio ratio-4x3": o === "4",
-    "ratio ratio-16x9": o === "16",
-    "ratio ratio-21x9": o === "21"
-  }, h = {
-    "object-fit-contain": r === "contain",
-    "object-fit-cover": r === "cover",
-    "object-fit-fill": r === "fill",
-    "object-fit-scale": r === "scale",
-    "object-fit-none": r === "none"
-  }, u = a({
-    ...x
-  }), I = a({
-    ...h
-  }, i), e = /* @__PURE__ */ t("img", { alt: c, onError: d, ref: l, src: p, className: I, ...m });
-  return o ? /* @__PURE__ */ t("div", { className: u, children: e }) : e;
-});
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import usePaths from "../../core/usePaths/usePaths.js";
+import useImage from "../../hooks/useImage/useImage.js";
+const Image = /* @__PURE__ */ forwardRef(({
+  src,
+  alt,
+  imgPlaceholder,
+  ratio,
+  objectFit,
+  className,
+  ...restProps
+}, ref) => {
+  const [imagePath] = usePaths(), placeholder = imgPlaceholder ?? `${imagePath}/common/image-placeholder.png`, {
+    imgSrc,
+    onError
+  } = useImage({
+    src,
+    placeholder
+  }), ratioImage = {
+    "ratio ratio-1x1": ratio === "1",
+    "ratio ratio-4x3": ratio === "4",
+    "ratio ratio-16x9": ratio === "16",
+    "ratio ratio-21x9": ratio === "21"
+  }, objectImage = {
+    "object-fit-contain": objectFit === "contain",
+    "object-fit-cover": objectFit === "cover",
+    "object-fit-fill": objectFit === "fill",
+    "object-fit-scale": objectFit === "scale",
+    "object-fit-none": objectFit === "none"
+  }, ratioClasses = clsx({
+    ...ratioImage
+  }), classes = clsx({
+    ...objectImage
+  }, className), renderImage = /* @__PURE__ */ jsx("img", { alt, onError, ref, src: imgSrc, className: classes, ...restProps });
+  return ratio ? /* @__PURE__ */ jsx("div", { className: ratioClasses, children: renderImage }) : renderImage;
+}), Image$1 = Image;
 export {
-  R as Image,
-  R as default
+  Image$1 as default
 };
-//# sourceMappingURL=Image.js.map

package/dist/components/Image/index.d.ts

@@ -1 +1,2 @@
+export { default as Image } from './Image';
 export * from './Image';

package/dist/components/ImagePicker/ImagePicker.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from 'react';
-import { IWebApp } from '@edifice.io/ts-client';
+import { IWebApp } from 'edifice-ts-client';
 export interface ImagePickerProps extends ComponentPropsWithRef<'input'> {
     /**
      * Description of the ImagePicker label.

package/dist/components/ImagePicker/ImagePicker.js

@@ -1,59 +1,58 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { forwardRef as j, useState as R, useEffect as w } from "react";
-import A from "clsx";
-import F from "../../hooks/useDropzone/useDropzone.js";
-import { FormControl as m } from "../Form/FormControl.js";
-import { IconButton as s } from "../Button/IconButton.js";
-import { Icon as p } from "../Icon/Icon.js";
-import { Input as N } from "../Input/Input.js";
-import { Avatar as O } from "../Avatar/Avatar.js";
-import { AppIcon as E } from "../AppIcon/AppIcon.js";
-const Q = /* @__PURE__ */ j(({
-  label: d,
-  addButtonLabel: g = "Add image",
-  deleteButtonLabel: f = "Delete image",
-  src: u,
-  className: h,
-  app: v,
-  onUploadImage: D,
-  onDeleteImage: b
-}, C) => {
-  const [a, i] = R(u || ""), {
-    inputRef: t,
-    files: r,
-    deleteFile: c,
-    handleOnChange: k,
-    handleDragging: l,
-    handleDragLeave: x,
-    handleDrop: y
-  } = F();
-  w(() => {
-    if (r.length > 0) {
-      c(r[0]), i("");
-      const n = r == null ? void 0 : r[0];
-      if (!n) return;
-      i(URL.createObjectURL(n)), D(n);
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect } from "react";
+import { Edit, Delete } from "@edifice.io/icons";
+import clsx from "clsx";
+import FormControl from "../Form/FormControl.js";
+import IconButton from "../Button/IconButton.js";
+import Input from "../Input/Input.js";
+import Avatar from "../Avatar/Avatar.js";
+import useDropzone from "../../hooks/useDropzone/useDropzone.js";
+import { AppIcon } from "../AppIcon/AppIcon.js";
+const ImagePicker = /* @__PURE__ */ forwardRef(({
+  label,
+  addButtonLabel = "Add image",
+  deleteButtonLabel = "Delete image",
+  src,
+  className,
+  app,
+  onUploadImage,
+  onDeleteImage
+}, ref) => {
+  const [preview, setPreview] = useState(src || ""), {
+    inputRef,
+    files,
+    deleteFile,
+    handleOnChange,
+    handleDragging,
+    handleDragLeave,
+    handleDrop
+  } = useDropzone();
+  useEffect(() => {
+    if (files.length > 0) {
+      deleteFile(files[0]), setPreview("");
+      const file = files == null ? void 0 : files[0];
+      if (!file) return;
+      setPreview(URL.createObjectURL(file)), onUploadImage(file);
     }
-  }, [r]);
-  const z = () => {
-    var n;
-    (n = t.current) == null || n.click();
-  }, I = () => {
-    t.current && (t.current.value = ""), c(r[0]), i(""), b();
-  }, L = A("image-input", h);
-  return /* @__PURE__ */ o(m, { id: "image-input", className: L, onDragEnter: l, onDragOver: l, onDragLeave: x, onDrop: y, ref: C, children: [
-    /* @__PURE__ */ o("div", { className: "image-input-actions gap-8", children: [
-      /* @__PURE__ */ e(s, { "aria-label": g, color: "tertiary", icon: /* @__PURE__ */ e(p, { name: "edit" }), onClick: z, type: "button", variant: "ghost" }),
-      /* @__PURE__ */ e(s, { "aria-label": f, color: "danger", disabled: !a, icon: /* @__PURE__ */ e(p, { name: "delete", size: "20" }), onClick: I, type: "button", variant: "ghost" })
+  }, [files]);
+  const handleClick = () => {
+    var _a;
+    (_a = inputRef.current) == null || _a.click();
+  }, handleClean = () => {
+    inputRef.current && (inputRef.current.value = ""), deleteFile(files[0]), setPreview(""), onDeleteImage();
+  }, classes = clsx("image-input", className);
+  return /* @__PURE__ */ jsxs(FormControl, { id: "image-input", className: classes, onDragEnter: handleDragging, onDragOver: handleDragging, onDragLeave: handleDragLeave, onDrop: handleDrop, ref, children: [
+    /* @__PURE__ */ jsxs("div", { className: "image-input-actions gap-8", children: [
+      /* @__PURE__ */ jsx(IconButton, { "aria-label": addButtonLabel, color: "tertiary", icon: /* @__PURE__ */ jsx(Edit, {}), onClick: handleClick, type: "button", variant: "ghost" }),
+      /* @__PURE__ */ jsx(IconButton, { "aria-label": deleteButtonLabel, color: "danger", disabled: !preview, icon: /* @__PURE__ */ jsx(Delete, { width: "20", height: "20" }), onClick: handleClean, type: "button", variant: "ghost" })
     ] }),
-    /* @__PURE__ */ o(m.Label, { children: [
-      /* @__PURE__ */ e("span", { className: "visually-hidden", children: d }),
-      /* @__PURE__ */ e(N, { accept: "image/jpeg, image/png", hidden: !0, onChange: k, ref: t, size: "sm", type: "file" }),
-      a ? /* @__PURE__ */ e(O, { alt: "", src: a, size: "xl" }) : /* @__PURE__ */ e(E, { app: v, iconFit: "ratio", size: "160", variant: "rounded" })
+    /* @__PURE__ */ jsxs(FormControl.Label, { children: [
+      /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: label }),
+      /* @__PURE__ */ jsx(Input, { accept: "image/jpeg, image/png", hidden: !0, onChange: handleOnChange, ref: inputRef, size: "sm", type: "file" }),
+      preview ? /* @__PURE__ */ jsx(Avatar, { alt: "", src: preview, size: "xl" }) : /* @__PURE__ */ jsx(AppIcon, { app, iconFit: "ratio", size: "160", variant: "rounded" })
     ] })
   ] });
 });
 export {
-  Q as ImagePicker
+  ImagePicker
 };
-//# sourceMappingURL=ImagePicker.js.map

package/dist/components/Input/Input.d.ts

@@ -29,5 +29,5 @@ export interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, O
 /**
  * Input Form Component
  */
-export declare const Input: import('react').ForwardRefExoticComponent<Omit<InputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
+declare const Input: import('react').ForwardRefExoticComponent<Omit<InputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
 export default Input;