@edifice.io/react 2.0.0-develop-rc.8 → 2.0.0-develop-rc.14

package/dist/ui/src/components/Dropdown/DropdownCheckboxItem.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import clsx from "clsx";
+import { useDropdownContext } from "./DropdownContext.js";
+import Checkbox from "../Checkbox/Checkbox.js";
+const DropdownCheckboxItem = ({
+  children,
+  value,
+  model,
+  onChange
+}) => {
+  const {
+    itemProps,
+    itemRefs,
+    isFocused
+  } = useDropdownContext(), {
+    onMenuItemKeyDown,
+    onMenuItemMouseEnter
+  } = itemProps, id = useId(), checked = model.includes(value), checkboxProps = {
+    value,
+    model,
+    checked,
+    readOnly: !0
+  }, dropdownCheckboxItem = clsx("dropdown-item c-pointer", {
+    focus: isFocused === id
+  });
+  return /* @__PURE__ */ jsx("div", { id, ref: (el) => itemRefs.current[id] = el, role: "menuitemcheckbox", "aria-checked": checked, onMouseUp: () => onChange(value), onKeyDown: (event) => onMenuItemKeyDown(event, () => onChange(value)), onMouseEnter: onMenuItemMouseEnter, tabIndex: checked ? 0 : -1, className: dropdownCheckboxItem, children: /* @__PURE__ */ jsxs("div", { className: "d-flex gap-8 align-items-center justify-content-between position-relative", children: [
+    children,
+    /* @__PURE__ */ jsx(Checkbox, { ...checkboxProps })
+  ] }) });
+};
+export {
+  DropdownCheckboxItem as default
+};

package/dist/ui/src/components/Dropdown/DropdownContext.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+const DropdownContext = /* @__PURE__ */ createContext(null), useDropdownContext = () => {
+  const context = useContext(DropdownContext);
+  if (!context)
+    throw new Error("Cannot be rendered outside the Dropdown Component");
+  return context;
+};
+export {
+  DropdownContext,
+  useDropdownContext
+};

package/dist/ui/src/components/Dropdown/DropdownItem.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import clsx from "clsx";
+import { useDropdownContext } from "./DropdownContext.js";
+const DropdownItem = ({
+  type = "action",
+  icon,
+  onClick,
+  children,
+  className,
+  ...restProps
+}) => {
+  const {
+    itemProps,
+    itemRefs,
+    isFocused
+  } = useDropdownContext(), {
+    onMenuItemKeyDown,
+    onMenuItemMouseEnter,
+    onMenuItemClick
+  } = itemProps, handleOnClick = (event) => {
+    onClick == null || onClick(event), type === "action" && (onMenuItemClick(), event.stopPropagation());
+  }, id = useId(), dropdownItem = clsx("dropdown-item", {
+    focus: isFocused === id
+  }, className);
+  return /* @__PURE__ */ jsx("div", { id, role: "menuitem", ref: (el) => itemRefs.current[id] = el, tabIndex: isFocused === id ? 0 : -1, className: dropdownItem, "aria-current": isFocused === id, onClick: handleOnClick, onMouseEnter: onMenuItemMouseEnter, onKeyDown: (event) => onMenuItemKeyDown(event, onClick), ...restProps, children: /* @__PURE__ */ jsxs("div", { className: "d-flex gap-8 align-items-center", children: [
+    icon,
+    children
+  ] }) });
+};
+export {
+  DropdownItem as default
+};

package/dist/ui/src/components/Dropdown/DropdownMenu.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { useDropdownContext } from "./DropdownContext.js";
+const DropdownMenu = /* @__PURE__ */ forwardRef(({
+  children,
+  block,
+  unstyled,
+  ...restProps
+}, forwardRef2) => {
+  const {
+    menuProps,
+    visible
+  } = useDropdownContext(), className = clsx({
+    "w-100": block,
+    "bg-white shadow rounded-4 p-8": !unstyled
+  }, menuProps.className, restProps.className), mergedProps = {
+    ...menuProps,
+    ...restProps,
+    className
+  };
+  return visible ? /* @__PURE__ */ jsx("div", { ref: forwardRef2, ...mergedProps, children }) : null;
+});
+export {
+  DropdownMenu as default
+};

package/dist/ui/src/components/Dropdown/DropdownMenuGroup.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const DropdownMenuGroup = /* @__PURE__ */ forwardRef(({
+  label,
+  children
+}, forwardRef2) => /* @__PURE__ */ jsxs("div", { ref: forwardRef2, role: "group", children: [
+  /* @__PURE__ */ jsx("span", { className: "small px-4", children: /* @__PURE__ */ jsx("strong", { children: label }) }),
+  children
+] }));
+export {
+  DropdownMenuGroup as default
+};

package/dist/ui/src/components/Dropdown/DropdownRadioItem.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import clsx from "clsx";
+import { useDropdownContext } from "./DropdownContext.js";
+import Radio from "../Radio/Radio.js";
+const DropdownRadioItem = ({
+  children,
+  value,
+  model,
+  onChange
+}) => {
+  const {
+    itemProps,
+    itemRefs,
+    isFocused
+  } = useDropdownContext(), {
+    onMenuItemKeyDown,
+    onMenuItemMouseEnter
+  } = itemProps, id = useId(), radioProps = {
+    value,
+    model,
+    checked: value === model,
+    readOnly: !0
+  }, dropdownRadioItem = clsx("dropdown-item c-pointer", {
+    focus: isFocused === id
+  });
+  return /* @__PURE__ */ jsx("div", { id, ref: (el) => itemRefs.current[id] = el, role: "menuitemradio", "aria-checked": value === model, onMouseUp: () => onChange(value), onKeyDown: (event) => onMenuItemKeyDown(event, () => onChange(value)), onMouseEnter: onMenuItemMouseEnter, tabIndex: value === model ? 0 : -1, className: dropdownRadioItem, children: /* @__PURE__ */ jsxs("div", { className: "d-flex gap-8 align-items-center justify-content-between position-relative", children: [
+    children,
+    /* @__PURE__ */ jsx(Radio, { ...radioProps, className: "position-absolute start-0 end-0 top-0 bottom-0 opacity-0" })
+  ] }) });
+};
+export {
+  DropdownRadioItem as default
+};

package/dist/ui/src/components/Dropdown/DropdownSeparator.js

@@ -0,0 +1,5 @@
+import { jsx } from "react/jsx-runtime";
+const DropdownSeparator = () => /* @__PURE__ */ jsx("div", { role: "separator", className: "px-4", children: /* @__PURE__ */ jsx("hr", { className: "m-0" }) });
+export {
+  DropdownSeparator as default
+};

package/dist/ui/src/components/Dropdown/DropdownTrigger.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { RafterUp as SvgRafterUp$1 } from "../../../../icons/dist/index.js";
+import { useDropdownContext } from "./DropdownContext.js";
+const DropdownTrigger = /* @__PURE__ */ forwardRef(({
+  label,
+  icon,
+  variant,
+  disabled = !1,
+  size,
+  badgeContent,
+  hideCarret = !1,
+  ...restProps
+}, forwardRef2) => {
+  const {
+    triggerProps,
+    block
+  } = useDropdownContext(), className = clsx("dropdown-toggle ", size, variant, {
+    "w-100": block
+  }, triggerProps.className, restProps.className), mergedProps = {
+    ...triggerProps,
+    ...restProps,
+    className
+  };
+  return /* @__PURE__ */ jsxs("button", { ref: forwardRef2, disabled, ...mergedProps, children: [
+    icon,
+    label,
+    badgeContent ? /* @__PURE__ */ jsx("span", { className: "badge text-bg-secondary rounded-pill", children: badgeContent }) : !hideCarret && /* @__PURE__ */ jsx(SvgRafterUp$1, { width: 16, height: 16, className: "dropdown-toggle-caret" })
+  ] });
+});
+export {
+  DropdownTrigger as default
+};

package/dist/ui/src/components/Dropzone/Dropzone.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import clsx from "clsx";
+import { DropzoneContext } from "./DropzoneContext.js";
+import DropzoneDrag from "./DropzoneDrag.js";
+import DropzoneFile from "./DropzoneFile.js";
+import DropzoneImport from "./DropzoneImport.js";
+import useDropzone from "../../hooks/useDropzone/useDropzone.js";
+const Dropzone = ({
+  className,
+  accept,
+  multiple = !0,
+  handle = !1,
+  children
+}) => {
+  const {
+    inputRef,
+    dragging,
+    files,
+    addFile,
+    deleteFile,
+    replaceFileAt,
+    handleDragLeave,
+    handleDragging,
+    handleDrop,
+    handleOnChange
+  } = useDropzone(accept ? {
+    forceFilters: !0
+  } : void 0), classes = clsx("dropzone", {
+    "is-dragging": (multiple || files.length < 1) && dragging,
+    "is-drop-files": !(files.length !== 0 && !handle)
+  }, className), value = useMemo(() => ({
+    inputRef,
+    files,
+    addFile,
+    deleteFile,
+    replaceFileAt
+  }), [addFile, deleteFile, replaceFileAt, files, inputRef]);
+  return /* @__PURE__ */ jsx(DropzoneContext.Provider, { value, children: /* @__PURE__ */ jsxs("div", { className: classes, onDragEnter: handleDragging, onDragOver: handleDragging, onDragLeave: handleDragLeave, onDrop: files.length > 0 && !multiple ? void 0 : handleDrop, children: [
+    /* @__PURE__ */ jsxs("div", { className: "align-center", children: [
+      handle ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Dropzone.File, { children }),
+        /* @__PURE__ */ jsx(Dropzone.Import, {})
+      ] }),
+      /* @__PURE__ */ jsx(Dropzone.Drag, {})
+    ] }),
+    /* @__PURE__ */ jsx("input", { ref: inputRef, accept: accept == null ? void 0 : accept.join(","), multiple, type: "file", name: "attachment-input", id: "attachment-input", onChange: handleOnChange, hidden: !0 })
+  ] }) });
+};
+Dropzone.File = DropzoneFile;
+Dropzone.Import = DropzoneImport;
+Dropzone.Drag = DropzoneDrag;
+const Dropzone$1 = Dropzone;
+export {
+  Dropzone$1 as default
+};

package/dist/ui/src/components/Dropzone/DropzoneContext.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+const DropzoneContext = /* @__PURE__ */ createContext(null);
+function useDropzoneContext() {
+  const context = useContext(DropzoneContext);
+  if (!context)
+    throw new Error("Cannot be rendered outside Dropzone Provider");
+  return context;
+}
+export {
+  DropzoneContext,
+  useDropzoneContext
+};

package/dist/ui/src/components/Dropzone/DropzoneDrag.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+const DropzoneDrag = () => {
+  const {
+    t
+  } = useTranslation();
+  return /* @__PURE__ */ jsx("div", { className: "drop-wrapper", children: /* @__PURE__ */ jsx("div", { className: "drop-content", children: /* @__PURE__ */ jsx("p", { className: "drop-text", children: t("dropzone.drop") }) }) });
+};
+export {
+  DropzoneDrag as default
+};

package/dist/ui/src/components/Dropzone/DropzoneFile.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { Plus as SvgPlus$1 } from "../../../../icons/dist/index.js";
+import { useMediaLibraryContext } from "../../multimedia/MediaLibrary/MediaLibraryContext.js";
+import Button from "../Button/Button.js";
+import { useDropzoneContext } from "./DropzoneContext.js";
+const DropzoneFile = ({
+  children
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    files,
+    inputRef
+  } = useDropzoneContext(), {
+    multiple
+  } = useMediaLibraryContext(), hasFiles = files && files.length > 0, classes = clsx("drop-file-wrapper", {
+    "d-block": hasFiles,
+    "d-none": !hasFiles
+  });
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    /* @__PURE__ */ jsx("div", { className: "drop-file-content", children: /* @__PURE__ */ jsx("div", { className: "add-button p-4", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", leftIcon: /* @__PURE__ */ jsx(SvgPlus$1, {}), disabled: !multiple, onClick: () => {
+      var _a;
+      return (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.click();
+    }, children: t("dropzone.add.more") }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "p-8", children })
+  ] });
+};
+export {
+  DropzoneFile as default
+};

package/dist/ui/src/components/Dropzone/DropzoneImport.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { Download as SvgDownload$1 } from "../../../../icons/dist/index.js";
+import Button from "../Button/Button.js";
+import { useDropzoneContext } from "./DropzoneContext.js";
+const DropzoneImport = () => {
+  const {
+    t
+  } = useTranslation(), {
+    files,
+    inputRef
+  } = useDropzoneContext(), hasFiles = files && files.length > 0, classes = clsx("import-wrapper", {
+    "d-flex": !hasFiles,
+    "d-none": hasFiles
+  });
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    /* @__PURE__ */ jsx(SvgDownload$1, { height: 48, width: 48 }),
+    /* @__PURE__ */ jsx("p", { className: "my-16", children: t("dropzone.text") }),
+    /* @__PURE__ */ jsx(Button, { onClick: () => {
+      var _a;
+      return (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.click();
+    }, children: t("dropzone.import") })
+  ] });
+};
+export {
+  DropzoneImport as default
+};

package/dist/ui/src/components/EmptyScreen/EmptyScreen.js

@@ -0,0 +1,20 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import Heading from "../Heading/Heading.js";
+const EmptyScreen = ({
+  imageSrc,
+  imageAlt = "",
+  title,
+  text,
+  className
+}) => {
+  const textClass = clsx("text", className);
+  return /* @__PURE__ */ jsxs("div", { className: "emptyscreen", children: [
+    imageSrc && /* @__PURE__ */ jsx("div", { className: "emptyscreen-image mb-12", children: /* @__PURE__ */ jsx("img", { className: "mx-auto", src: imageSrc, alt: imageAlt, width: "250", height: "250" }) }),
+    title && /* @__PURE__ */ jsx(Heading, { level: "h2", headingStyle: "h2", className: "text-secondary mb-8", children: title }),
+    text && /* @__PURE__ */ jsx("div", { className: textClass, children: text })
+  ] });
+}, EmptyScreen$1 = EmptyScreen;
+export {
+  EmptyScreen$1 as default
+};

package/dist/ui/src/components/FileCard/FileCard.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import clsx from "clsx";
+import { DocumentHelper, odeServices } from "edifice-ts-client";
+import { Mic as SvgMic$1, Landscape as SvgLandscape$1, Video as SvgVideo$1, TextPage as SvgTextPage$1 } from "../../../../icons/dist/index.js";
+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 _a;
+  const ref = useRef(null), type = DocumentHelper.getRole(doc);
+  function getRoleMap(type2) {
+    const roleMappings = {
+      csv: {
+        icon: ".CSV",
+        color: "bg-orange-200"
+      },
+      xls: {
+        icon: ".XLS",
+        color: "bg-green-200"
+      },
+      doc: {
+        icon: ".DOC",
+        color: "bg-blue-200"
+      },
+      txt: {
+        icon: ".TXT",
+        color: "bg-blue-200"
+      },
+      pdf: {
+        icon: ".PDF",
+        color: "bg-red-200"
+      },
+      audio: {
+        icon: /* @__PURE__ */ jsx(SvgMic$1, { width: 22, height: 22 }),
+        color: "bg-red-200"
+      },
+      ppt: {
+        icon: ".PPT",
+        color: "bg-yellow-200"
+      },
+      img: {
+        icon: /* @__PURE__ */ jsx(SvgLandscape$1, { width: 22, height: 22 }),
+        color: "bg-green-200"
+      },
+      video: {
+        icon: /* @__PURE__ */ jsx(SvgVideo$1, { width: 22, height: 22 }),
+        color: "bg-purple-200"
+      },
+      zip: {
+        icon: ".ZIP",
+        color: "bg-gray-300"
+      },
+      md: {
+        icon: ".MD",
+        color: "bg-blue-200"
+      },
+      unknown: {
+        icon: /* @__PURE__ */ jsx(SvgTextPage$1, { width: 22, height: 22 }),
+        color: "bg-gray-300"
+      }
+    };
+    return roleMappings[type2] || roleMappings.unknown;
+  }
+  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__ */ 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",
+      ...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 {
+  FileCard$1 as default
+};

package/dist/ui/src/components/FileCard/FileIcon.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Paperclip as SvgPaperclip$1 } from "../../../../icons/dist/index.js";
+const FileIcon = ({
+  type,
+  roleMap
+}) => {
+  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(SvgPaperclip$1, {}) });
+};
+export {
+  FileIcon as default
+};

package/dist/ui/src/components/Form/FormContext.js

@@ -0,0 +1,11 @@
+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 context;
+};
+export {
+  Context,
+  useFormControl
+};

package/dist/ui/src/components/Form/FormControl.js

@@ -0,0 +1,32 @@
+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
+});
+export {
+  FormControl as default
+};

package/dist/ui/src/components/Form/FormText.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useFormControl } from "./FormContext.js";
+const FormText = ({
+  children
+}) => {
+  const {
+    status
+  } = useFormControl(), classes = clsx("form-text", {
+    "is-invalid": status === "invalid",
+    valid: status === "valid"
+  });
+  return /* @__PURE__ */ jsx("p", { className: classes, children: /* @__PURE__ */ jsx("em", { children }) });
+}, FormText$1 = FormText;
+export {
+  FormText$1 as default
+};

package/dist/ui/src/components/Grid/Grid.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const Grid = ({
+  children,
+  className,
+  ...restProps
+}) => {
+  const classes = clsx("grid", className);
+  return /* @__PURE__ */ jsx("div", { className: classes, ...restProps, children });
+}, Column = ({
+  sm,
+  md,
+  lg,
+  xl,
+  children,
+  className,
+  as,
+  ...restProps
+}) => {
+  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 });
+};
+Grid.Col = Column;
+export {
+  Column,
+  Grid
+};

package/dist/ui/src/components/Heading/Heading.js

@@ -0,0 +1,16 @@
+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 });
+});
+export {
+  Heading as default
+};

package/dist/ui/src/components/Image/Image.js

@@ -0,0 +1,41 @@
+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 {
+  Image$1 as default
+};