@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/UI/UsersAvatar.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import ControlledTooltip from "./ControlledTooltip.js";
+import { getUserAvatarLetters } from "../../helpers/stringHelpers.js";
+const UsersAvatar = ({ className, size = "small", users }) => {
+  const sizeClass = {
+    xsmall: "size-6",
+    small: "size-8",
+    medium: "size-10",
+    large: "size-full"
+  }[size];
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center -space-x-4", children: users.map((responsible, index) => /* @__PURE__ */ jsx(ControlledTooltip, { content: responsible, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames(
+        `flex size-8 cursor-default items-center justify-center rounded-full bg-brand-soft text-base font-normal uppercase text-brand-emphasis ring-2 ring-surface`,
+        className,
+        {
+          sizeClass
+        }
+      ),
+      children: getUserAvatarLetters(String(responsible))
+    }
+  ) }, `${responsible}-${index}`)) });
+};
+export {
+  UsersAvatar as default
+};
+//# sourceMappingURL=UsersAvatar.js.map

package/dist/components/UI/UsersAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsersAvatar.js","sources":["../../../src/components/UI/UsersAvatar.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { getUserAvatarLetters } from '@/helpers/stringHelpers';\n\ninterface IUsersAvatarProps {\n  className?: string;\n  size?: 'xsmall' | 'small' | 'medium' | 'large';\n  users: Array<string>;\n}\n\nconst UsersAvatar: React.FC<IUsersAvatarProps> = ({ className, size = 'small', users }) => {\n  const sizeClass = {\n    xsmall: 'size-6',\n    small: 'size-8',\n    medium: 'size-10',\n    large: 'size-full',\n  }[size];\n\n  return (\n    <div className=\"flex items-center -space-x-4\">\n      {users.map((responsible, index) => (\n        <ControlledTooltip key={`${responsible}-${index}`} content={responsible}>\n          <div\n            className={classNames(\n              `flex size-8 cursor-default items-center justify-center rounded-full bg-brand-soft text-base font-normal uppercase text-brand-emphasis ring-2 ring-surface`,\n              className,\n              {\n                sizeClass,\n              },\n            )}\n          >\n            {getUserAvatarLetters(String(responsible))}\n          </div>\n        </ControlledTooltip>\n      ))}\n    </div>\n  );\n};\n\nexport default UsersAvatar;\n"],"names":[],"mappings":";;;;AAWA,MAAM,cAA2C,CAAC,EAAE,WAAW,OAAO,SAAS,YAAY;AACzF,QAAM,YAAY;AAAA,IAChB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA,EACP,IAAI;AAEN,SACE,oBAAC,OAAA,EAAI,WAAU,gCACZ,UAAA,MAAM,IAAI,CAAC,aAAa,UACvB,oBAAC,mBAAA,EAAkD,SAAS,aAC1D,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,UACE;AAAA,QAAA;AAAA,MACF;AAAA,MAGD,UAAA,qBAAqB,OAAO,WAAW,CAAC;AAAA,IAAA;AAAA,EAAA,KAVrB,GAAG,WAAW,IAAI,KAAK,EAY/C,CACD,GACH;AAEJ;"}

package/dist/components/UI/access/UiAccessContext.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+/**
+ * Augment this from the host to type capabilities as its own union, without the UI layer
+ * importing the host's catalog:
+ * `declare module '<this module>' { interface IUiCapabilityRegistry extends Record<TCapability, true> {} }`
+ */
+export interface IUiCapabilityRegistry {
+}
+export type TUiCapability = keyof IUiCapabilityRegistry extends never ? string : keyof IUiCapabilityRegistry;
+export type TUiCapabilityRequirement = 'any' | 'all';
+export type TUiAccessCheck = (capabilities: TUiCapability | Array<TUiCapability>, requirement?: TUiCapabilityRequirement) => boolean;
+interface IUiAccessContextValue {
+    check: TUiAccessCheck;
+}
+interface IUiAccessProviderProps {
+    check: TUiAccessCheck;
+    children: ReactNode;
+}
+export declare const UiAccessProvider: React.FC<IUiAccessProviderProps>;
+export declare const useUiAccess: () => IUiAccessContextValue;
+export {};

package/dist/components/UI/access/UiAccessContext.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+const allowEverything = () => true;
+const UiAccessContext = createContext({ check: allowEverything });
+const UiAccessProvider = ({ check, children }) => {
+  const value = useMemo(() => ({ check }), [check]);
+  return /* @__PURE__ */ jsx(UiAccessContext.Provider, { value, children });
+};
+const useUiAccess = () => useContext(UiAccessContext);
+export {
+  UiAccessProvider,
+  useUiAccess
+};
+//# sourceMappingURL=UiAccessContext.js.map

package/dist/components/UI/access/UiAccessContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiAccessContext.js","sources":["../../../../src/components/UI/access/UiAccessContext.tsx"],"sourcesContent":["import { createContext, ReactNode, useContext, useMemo } from 'react';\n\n/**\n * Augment this from the host to type capabilities as its own union, without the UI layer\n * importing the host's catalog:\n * `declare module '<this module>' { interface IUiCapabilityRegistry extends Record<TCapability, true> {} }`\n */\nexport interface IUiCapabilityRegistry {}\n\nexport type TUiCapability = keyof IUiCapabilityRegistry extends never ? string : keyof IUiCapabilityRegistry;\n\nexport type TUiCapabilityRequirement = 'any' | 'all';\n\nexport type TUiAccessCheck = (\n  capabilities: TUiCapability | Array<TUiCapability>,\n  requirement?: TUiCapabilityRequirement,\n) => boolean;\n\ninterface IUiAccessContextValue {\n  check: TUiAccessCheck;\n}\n\nconst allowEverything: TUiAccessCheck = () => true;\n\nconst UiAccessContext = createContext<IUiAccessContextValue>({ check: allowEverything });\n\ninterface IUiAccessProviderProps {\n  check: TUiAccessCheck;\n  children: ReactNode;\n}\n\nexport const UiAccessProvider: React.FC<IUiAccessProviderProps> = ({ check, children }) => {\n  const value = useMemo(() => ({ check }), [check]);\n  return <UiAccessContext.Provider value={value}>{children}</UiAccessContext.Provider>;\n};\n\nexport const useUiAccess = (): IUiAccessContextValue => useContext(UiAccessContext);\n"],"names":[],"mappings":";;AAsBA,MAAM,kBAAkC,MAAM;AAE9C,MAAM,kBAAkB,cAAqC,EAAE,OAAO,iBAAiB;AAOhF,MAAM,mBAAqD,CAAC,EAAE,OAAO,eAAe;AACzF,QAAM,QAAQ,QAAQ,OAAO,EAAE,UAAU,CAAC,KAAK,CAAC;AAChD,SAAO,oBAAC,gBAAgB,UAAhB,EAAyB,OAAe,SAAA,CAAS;AAC3D;AAEO,MAAM,cAAc,MAA6B,WAAW,eAAe;"}

package/dist/components/UI/cells/ArrayCell.d.ts

@@ -0,0 +1,5 @@
+type TArrayCellProps = {
+    values: Array<string>;
+};
+declare const ArrayCell: React.FC<TArrayCellProps>;
+export default ArrayCell;

package/dist/components/UI/cells/ArrayCell.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import ControlledTooltip from "../ControlledTooltip.js";
+import { capitalize } from "../../../helpers/stringHelpers.js";
+const ArrayCell = ({ values }) => {
+  const uniqueValues = Array.from(new Set(values.filter(Boolean)));
+  const totalItems = uniqueValues.length;
+  if (!totalItems) {
+    return /* @__PURE__ */ jsx("span", { children: "-" });
+  }
+  if (totalItems > 1) {
+    return /* @__PURE__ */ jsx(ControlledTooltip, { content: uniqueValues.join(", "), className: "max-w-60", children: /* @__PURE__ */ jsxs("p", { children: [
+      capitalize(uniqueValues[0]),
+      " ",
+      /* @__PURE__ */ jsxs("span", { className: "rounded-lg border-2 p-1 text-xs font-semibold", children: [
+        "+",
+        totalItems - 1
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("span", { children: uniqueValues.map((value) => capitalize(value)).join(", ") });
+};
+export {
+  ArrayCell as default
+};
+//# sourceMappingURL=ArrayCell.js.map

package/dist/components/UI/cells/ArrayCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrayCell.js","sources":["../../../../src/components/UI/cells/ArrayCell.tsx"],"sourcesContent":["import ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { capitalize } from '@/helpers/stringHelpers';\n\ntype TArrayCellProps = {\n  values: Array<string>;\n};\n\nconst ArrayCell: React.FC<TArrayCellProps> = ({ values }) => {\n  const uniqueValues = Array.from(new Set(values.filter(Boolean)));\n  const totalItems = uniqueValues.length;\n\n  if (!totalItems) {\n    return <span>-</span>;\n  }\n\n  if (totalItems > 1) {\n    return (\n      <ControlledTooltip content={uniqueValues.join(', ')} className=\"max-w-60\">\n        <p>\n          {capitalize(uniqueValues[0])}{' '}\n          <span className=\"rounded-lg border-2 p-1 text-xs font-semibold\">+{totalItems - 1}</span>\n        </p>\n      </ControlledTooltip>\n    );\n  }\n\n  return <span>{uniqueValues.map((value: string) => capitalize(value)).join(', ')}</span>;\n};\n\nexport default ArrayCell;\n"],"names":[],"mappings":";;;AAOA,MAAM,YAAuC,CAAC,EAAE,aAAa;AAC3D,QAAM,eAAe,MAAM,KAAK,IAAI,IAAI,OAAO,OAAO,OAAO,CAAC,CAAC;AAC/D,QAAM,aAAa,aAAa;AAEhC,MAAI,CAAC,YAAY;AACf,WAAO,oBAAC,UAAK,UAAA,IAAA,CAAC;AAAA,EAChB;AAEA,MAAI,aAAa,GAAG;AAClB,WACE,oBAAC,mBAAA,EAAkB,SAAS,aAAa,KAAK,IAAI,GAAG,WAAU,YAC7D,UAAA,qBAAC,KAAA,EACE,UAAA;AAAA,MAAA,WAAW,aAAa,CAAC,CAAC;AAAA,MAAG;AAAA,MAC9B,qBAAC,QAAA,EAAK,WAAU,iDAAgD,UAAA;AAAA,QAAA;AAAA,QAAE,aAAa;AAAA,MAAA,EAAA,CAAE;AAAA,IAAA,EAAA,CACnF,EAAA,CACF;AAAA,EAEJ;AAEA,SAAO,oBAAC,QAAA,EAAM,UAAA,aAAa,IAAI,CAAC,UAAkB,WAAW,KAAK,CAAC,EAAE,KAAK,IAAI,EAAA,CAAE;AAClF;"}

package/dist/components/UI/cells/BooleanCell.d.ts

@@ -0,0 +1,5 @@
+interface IBooleanCellProps {
+    value: boolean;
+}
+declare const BooleanCell: React.FC<IBooleanCellProps>;
+export default BooleanCell;

package/dist/components/UI/cells/BooleanCell.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import OutlinedChip from "../Chips/OutlinedChip.js";
+const BooleanCell = ({ value }) => {
+  const { t } = useTranslation("ui");
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-2", children: /* @__PURE__ */ jsx(
+    OutlinedChip,
+    {
+      label: value ? t("actions.yes") : t("actions.no"),
+      chipIcon: value ? "check" : "close",
+      className: classNames("text-white", {
+        "bg-success": value,
+        "bg-danger": !value
+      })
+    }
+  ) });
+};
+export {
+  BooleanCell as default
+};
+//# sourceMappingURL=BooleanCell.js.map

package/dist/components/UI/cells/BooleanCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BooleanCell.js","sources":["../../../../src/components/UI/cells/BooleanCell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport OutlinedChip from '@/components/UI/Chips/OutlinedChip';\n\ninterface IBooleanCellProps {\n  value: boolean;\n}\n\nconst BooleanCell: React.FC<IBooleanCellProps> = ({ value }) => {\n  const { t } = useTranslation('ui');\n  return (\n    <div className=\"flex items-center gap-x-2\">\n      <OutlinedChip\n        label={value ? t('actions.yes') : t('actions.no')}\n        chipIcon={value ? 'check' : 'close'}\n        className={classNames('text-white', {\n          'bg-success': value,\n          'bg-danger': !value,\n        })}\n      />\n    </div>\n  );\n};\n\nexport default BooleanCell;\n"],"names":[],"mappings":";;;;AASA,MAAM,cAA2C,CAAC,EAAE,YAAY;AAC9D,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,SACE,oBAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,QAAQ,EAAE,aAAa,IAAI,EAAE,YAAY;AAAA,MAChD,UAAU,QAAQ,UAAU;AAAA,MAC5B,WAAW,WAAW,cAAc;AAAA,QAClC,cAAc;AAAA,QACd,aAAa,CAAC;AAAA,MAAA,CACf;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;"}

package/dist/components/UI/cells/DetailsTableCell.d.ts

@@ -0,0 +1,7 @@
+interface IDetailsTableCellProps {
+    value: Array<{
+        [size: string | number]: number;
+    }>;
+}
+declare const DetailsTableCell: React.FC<IDetailsTableCellProps>;
+export default DetailsTableCell;

package/dist/components/UI/cells/DetailsTableCell.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { isEmptyObject } from "../../../helpers/utilityHelpers.js";
+const DetailsTableCell = ({ value }) => {
+  const { t } = useTranslation("ui");
+  if (!value) return /* @__PURE__ */ jsx("span", { children: "-" });
+  const filteredArray = value.filter(
+    (item) => item !== null && item !== void 0 && !(Array.isArray(item) && item.length === 0) && !isEmptyObject(item)
+  );
+  if (!filteredArray || !filteredArray.length) return /* @__PURE__ */ jsx("span", { children: "-" });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-6 px-4 text-xs", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+      /* @__PURE__ */ jsx("span", { className: "opacity-70", children: t("detailsTable.size") }),
+      /* @__PURE__ */ jsx("span", { className: "opacity-70", children: t("detailsTable.quantity") })
+    ] }),
+    filteredArray.map((grade) => {
+      const gradeKey = Object.keys(grade);
+      return gradeKey.map((key) => {
+        return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ jsx("span", { className: "border-b-2", children: key }),
+          /* @__PURE__ */ jsx("span", { className: "font-semibold", children: grade[key] })
+        ] }, key);
+      });
+    })
+  ] });
+};
+export {
+  DetailsTableCell as default
+};
+//# sourceMappingURL=DetailsTableCell.js.map

package/dist/components/UI/cells/DetailsTableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsTableCell.js","sources":["../../../../src/components/UI/cells/DetailsTableCell.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next';\n\nimport { isEmptyObject } from '@/helpers/utilityHelpers';\n\ninterface IDetailsTableCellProps {\n  value: Array<{ [size: string | number]: number }>;\n}\n\nconst DetailsTableCell: React.FC<IDetailsTableCellProps> = ({ value }) => {\n  const { t } = useTranslation('ui');\n  if (!value) return <span>-</span>;\n\n  const filteredArray = value.filter(\n    (item) =>\n      item !== null && item !== undefined && !(Array.isArray(item) && item.length === 0) && !isEmptyObject(item),\n  );\n\n  if (!filteredArray || !filteredArray.length) return <span>-</span>;\n\n  return (\n    <div className=\"flex flex-row gap-6 px-4 text-xs\">\n      <div className=\"flex flex-col items-center\">\n        <span className=\"opacity-70\">{t('detailsTable.size')}</span>\n        <span className=\"opacity-70\">{t('detailsTable.quantity')}</span>\n      </div>\n\n      {filteredArray.map((grade) => {\n        const gradeKey = Object.keys(grade);\n        return gradeKey.map((key) => {\n          return (\n            <div className=\"flex flex-col items-center\" key={key}>\n              <span className=\"border-b-2\">{key}</span>\n              <span className=\"font-semibold\">{grade[key]}</span>\n            </div>\n          );\n        });\n      })}\n    </div>\n  );\n};\n\nexport default DetailsTableCell;\n"],"names":[],"mappings":";;;AAQA,MAAM,mBAAqD,CAAC,EAAE,YAAY;AACxE,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,MAAI,CAAC,MAAO,QAAO,oBAAC,UAAK,UAAA,KAAC;AAE1B,QAAM,gBAAgB,MAAM;AAAA,IAC1B,CAAC,SACC,SAAS,QAAQ,SAAS,UAAa,EAAE,MAAM,QAAQ,IAAI,KAAK,KAAK,WAAW,MAAM,CAAC,cAAc,IAAI;AAAA,EAAA;AAG7G,MAAI,CAAC,iBAAiB,CAAC,cAAc,OAAQ,QAAO,oBAAC,UAAK,UAAA,KAAC;AAE3D,SACE,qBAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,cAAc,UAAA,EAAE,mBAAmB,GAAE;AAAA,0BACpD,QAAA,EAAK,WAAU,cAAc,UAAA,EAAE,uBAAuB,EAAA,CAAE;AAAA,IAAA,GAC3D;AAAA,IAEC,cAAc,IAAI,CAAC,UAAU;AAC5B,YAAM,WAAW,OAAO,KAAK,KAAK;AAClC,aAAO,SAAS,IAAI,CAAC,QAAQ;AAC3B,eACE,qBAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,cAAc,UAAA,KAAI;AAAA,8BACjC,QAAA,EAAK,WAAU,iBAAiB,UAAA,MAAM,GAAG,EAAA,CAAE;AAAA,QAAA,EAAA,GAFG,GAGjD;AAAA,MAEJ,CAAC;AAAA,IACH,CAAC;AAAA,EAAA,GACH;AAEJ;"}

package/dist/components/UI/cells/ProductImageCell.d.ts

@@ -0,0 +1,5 @@
+interface IProductImageCellProps {
+    src: string | undefined | null;
+}
+declare const ProductImageCell: React.FC<IProductImageCellProps>;
+export default ProductImageCell;

package/dist/components/UI/cells/ProductImageCell.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import ControlledImage from "../../Form/ControlledImage/index.js";
+import ControlledTooltip from "../ControlledTooltip.js";
+import ImagePlaceholder from "../ImagePlaceholder.js";
+const ProductImageCell = ({ src }) => {
+  return /* @__PURE__ */ jsx("div", { className: "flex aspect-square size-10 rounded-md border border-border", children: /* @__PURE__ */ jsx(
+    ControlledTooltip,
+    {
+      placement: "top",
+      className: "border-none bg-transparent shadow-none",
+      content: /* @__PURE__ */ jsx("div", { className: "max-h-72 min-w-9", children: src ? /* @__PURE__ */ jsx("img", { src, className: "size-full h-72 rounded-md object-cover shadow-xl" }) : /* @__PURE__ */ jsx(ImagePlaceholder, { className: "size-72 rounded-md" }) }),
+      interactive: !!src,
+      open: src ? void 0 : false,
+      children: /* @__PURE__ */ jsx(ControlledImage, { src, className: "size-full object-cover" })
+    }
+  ) });
+};
+export {
+  ProductImageCell as default
+};
+//# sourceMappingURL=ProductImageCell.js.map

package/dist/components/UI/cells/ProductImageCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductImageCell.js","sources":["../../../../src/components/UI/cells/ProductImageCell.tsx"],"sourcesContent":["import ControlledImage from '@/components/Form/ControlledImage';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport ImagePlaceholder from '@/components/UI/ImagePlaceholder';\n\ninterface IProductImageCellProps {\n  src: string | undefined | null;\n}\n\nconst ProductImageCell: React.FC<IProductImageCellProps> = ({ src }) => {\n  return (\n    <div className=\"flex aspect-square size-10 rounded-md border border-border\">\n      <ControlledTooltip\n        placement=\"top\"\n        className=\"border-none bg-transparent shadow-none\"\n        content={\n          <div className=\"max-h-72 min-w-9\">\n            {src ? (\n              <img src={src} className=\"size-full h-72 rounded-md object-cover shadow-xl\" />\n            ) : (\n              <ImagePlaceholder className=\"size-72 rounded-md\" />\n            )}\n          </div>\n        }\n        interactive={!!src}\n        open={src ? undefined : false}\n      >\n        <ControlledImage src={src} className=\"size-full object-cover\" />\n      </ControlledTooltip>\n    </div>\n  );\n};\n\nexport default ProductImageCell;\n"],"names":[],"mappings":";;;;AAQA,MAAM,mBAAqD,CAAC,EAAE,UAAU;AACtE,SACE,oBAAC,OAAA,EAAI,WAAU,8DACb,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,WAAU;AAAA,MACV,SACE,oBAAC,OAAA,EAAI,WAAU,oBACZ,gBACC,oBAAC,OAAA,EAAI,KAAU,WAAU,oDAAmD,IAE5E,oBAAC,kBAAA,EAAiB,WAAU,sBAAqB,GAErD;AAAA,MAEF,aAAa,CAAC,CAAC;AAAA,MACf,MAAM,MAAM,SAAY;AAAA,MAExB,UAAA,oBAAC,iBAAA,EAAgB,KAAU,WAAU,yBAAA,CAAyB;AAAA,IAAA;AAAA,EAAA,GAElE;AAEJ;"}

package/dist/components/UI/cells/UrlLinkCell.d.ts

@@ -0,0 +1,6 @@
+interface IUrlLinkCellProps {
+    baseUrl: string;
+    content?: string;
+}
+declare const UrlLinkCell: ({ baseUrl, content }: IUrlLinkCellProps) => import("react").JSX.Element;
+export default UrlLinkCell;

package/dist/components/UI/cells/UrlLinkCell.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ControlledTooltip from "../ControlledTooltip.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+const UrlLinkCell = ({ baseUrl, content }) => {
+  const { t } = useTranslation("ui");
+  const redirectToUrl = () => {
+    const urlToRedirect = content ? `${baseUrl}/${content}` : baseUrl;
+    window.open(urlToRedirect, "_blank");
+  };
+  return /* @__PURE__ */ jsx(ControlledTooltip, { content: t("urlLinkCell.clickToAccess"), children: /* @__PURE__ */ jsxs("div", { className: "flex cursor-pointer flex-row items-center gap-x-1", onClick: redirectToUrl, children: [
+    /* @__PURE__ */ jsx(MaterialSymbol, { icon: "open_in_new", color: "rgb(var(--color-foreground))", size: 20 }),
+    content && /* @__PURE__ */ jsx("span", { children: content })
+  ] }) });
+};
+export {
+  UrlLinkCell as default
+};
+//# sourceMappingURL=UrlLinkCell.js.map

package/dist/components/UI/cells/UrlLinkCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UrlLinkCell.js","sources":["../../../../src/components/UI/cells/UrlLinkCell.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next';\n\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\n\ninterface IUrlLinkCellProps {\n  baseUrl: string;\n  content?: string;\n}\n\nconst UrlLinkCell = ({ baseUrl, content }: IUrlLinkCellProps) => {\n  const { t } = useTranslation('ui');\n  const redirectToUrl = () => {\n    const urlToRedirect = content ? `${baseUrl}/${content}` : baseUrl;\n    window.open(urlToRedirect, '_blank');\n  };\n\n  return (\n    <ControlledTooltip content={t('urlLinkCell.clickToAccess')}>\n      <div className=\"flex cursor-pointer flex-row items-center gap-x-1\" onClick={redirectToUrl}>\n        <MaterialSymbol icon=\"open_in_new\" color=\"rgb(var(--color-foreground))\" size={20} />\n        {content && <span>{content}</span>}\n      </div>\n    </ControlledTooltip>\n  );\n};\n\nexport default UrlLinkCell;\n"],"names":[],"mappings":";;;;AAUA,MAAM,cAAc,CAAC,EAAE,SAAS,cAAiC;AAC/D,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,gBAAgB,MAAM;AAC1B,UAAM,gBAAgB,UAAU,GAAG,OAAO,IAAI,OAAO,KAAK;AAC1D,WAAO,KAAK,eAAe,QAAQ;AAAA,EACrC;AAEA,SACE,oBAAC,mBAAA,EAAkB,SAAS,EAAE,2BAA2B,GACvD,UAAA,qBAAC,OAAA,EAAI,WAAU,qDAAoD,SAAS,eAC1E,UAAA;AAAA,IAAA,oBAAC,kBAAe,MAAK,eAAc,OAAM,gCAA+B,MAAM,IAAI;AAAA,IACjF,WAAW,oBAAC,QAAA,EAAM,UAAA,QAAA,CAAQ;AAAA,EAAA,EAAA,CAC7B,EAAA,CACF;AAEJ;"}

package/dist/components/Upload/SimpleUploaderComponent.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface ISimpleUploaderComponentProps {
+    allowedTypes: Array<string>;
+    handleFilesSelected: (files: Array<File>) => void;
+    multiple?: boolean;
+    className?: string;
+}
+declare const SimpleUploaderComponent: React.FC<ISimpleUploaderComponentProps>;
+export default SimpleUploaderComponent;

package/dist/components/Upload/SimpleUploaderComponent.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import { useNotification } from "../../hooks/useNotification.js";
+import CustomBadge from "../UI/CustomBadge.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+const SimpleUploaderComponent = ({
+  allowedTypes,
+  handleFilesSelected,
+  multiple = false,
+  className
+}) => {
+  const { t } = useTranslation("ui");
+  const { notify } = useNotification();
+  const MAX_FILE_SIZE_MB = 1;
+  const MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_MB * 1024 * 1024;
+  const [files, setFiles] = useState([]);
+  const handleFiles = (newFiles) => {
+    setFiles(newFiles);
+    if (!multiple && newFiles.length === 1) {
+      handleFilesSelected(newFiles);
+    }
+  };
+  const handleFileChange = (event) => {
+    const selectedFiles = event.target.files;
+    if (selectedFiles && selectedFiles.length > 0) {
+      const newFiles = Array.from(selectedFiles).filter((file) => file.size <= MAX_FILE_SIZE_BYTES);
+      if (newFiles.length < selectedFiles.length) {
+        notify({
+          message: t("uploader.filesIgnoredMaxSize", { size: MAX_FILE_SIZE_MB }),
+          type: "error"
+        });
+      }
+      if (newFiles.length > 0) {
+        handleFiles(newFiles);
+      }
+    }
+  };
+  const tooltipContent = t("uploader.allowedFormatsTooltip", {
+    formats: allowedTypes.map((type) => type.startsWith(".") ? type : "." + type.split("/")[1]).join(" "),
+    size: MAX_FILE_SIZE_MB
+  });
+  return /* @__PURE__ */ jsx(CustomBadge, { content: files.length, invisible: files.length === 0, children: /* @__PURE__ */ jsx(ControlledTooltip, { content: tooltipContent, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        "flex w-10 cursor-pointer items-center justify-center rounded-md border bg-muted p-2 transition-colors duration-slow hover:bg-muted-active",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "file",
+            id: "simple-browse",
+            onChange: handleFileChange,
+            accept: allowedTypes.join(", "),
+            multiple,
+            className: "hidden"
+          }
+        ),
+        /* @__PURE__ */ jsx("label", { htmlFor: "simple-browse", className: "flex cursor-pointer items-center justify-center", children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "attach_file", size: 23, color: "rgb(var(--color-foreground))" }) })
+      ]
+    }
+  ) }) });
+};
+export {
+  SimpleUploaderComponent as default
+};
+//# sourceMappingURL=SimpleUploaderComponent.js.map

package/dist/components/Upload/SimpleUploaderComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleUploaderComponent.js","sources":["../../../src/components/Upload/SimpleUploaderComponent.tsx"],"sourcesContent":["import { useState } from 'react';\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\n\nimport { useNotification } from '../../hooks/useNotification';\nimport CustomBadge from '../UI/CustomBadge';\nimport { MaterialSymbol } from '../UI/MaterialSymbol';\n\ninterface ISimpleUploaderComponentProps {\n  allowedTypes: Array<string>;\n  handleFilesSelected: (files: Array<File>) => void;\n  multiple?: boolean;\n  className?: string;\n}\n\nconst SimpleUploaderComponent: React.FC<ISimpleUploaderComponentProps> = ({\n  allowedTypes,\n  handleFilesSelected,\n  multiple = false,\n  className,\n}) => {\n  const { t } = useTranslation('ui');\n  const { notify } = useNotification();\n\n  const MAX_FILE_SIZE_MB = 1;\n  const MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_MB * 1024 * 1024;\n  const [files, setFiles] = useState<Array<File>>([]);\n\n  const handleFiles = (newFiles: Array<File>) => {\n    setFiles(newFiles);\n    if (!multiple && newFiles.length === 1) {\n      handleFilesSelected(newFiles);\n    }\n  };\n\n  const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    const selectedFiles = event.target.files;\n    if (selectedFiles && selectedFiles.length > 0) {\n      const newFiles = Array.from(selectedFiles).filter((file) => file.size <= MAX_FILE_SIZE_BYTES);\n\n      if (newFiles.length < selectedFiles.length) {\n        notify({\n          message: t('uploader.filesIgnoredMaxSize', { size: MAX_FILE_SIZE_MB }),\n          type: 'error',\n        });\n      }\n\n      if (newFiles.length > 0) {\n        handleFiles(newFiles);\n      }\n    }\n  };\n\n  const tooltipContent = t('uploader.allowedFormatsTooltip', {\n    formats: allowedTypes.map((type) => (type.startsWith('.') ? type : '.' + type.split('/')[1])).join(' '),\n    size: MAX_FILE_SIZE_MB,\n  });\n\n  return (\n    <CustomBadge content={files.length} invisible={files.length === 0}>\n      <ControlledTooltip content={tooltipContent}>\n        <div\n          className={classNames(\n            'flex w-10 cursor-pointer items-center justify-center rounded-md border bg-muted p-2 transition-colors duration-slow hover:bg-muted-active',\n            className,\n          )}\n        >\n          <input\n            type=\"file\"\n            id=\"simple-browse\"\n            onChange={handleFileChange}\n            accept={allowedTypes.join(', ')}\n            multiple={multiple}\n            className=\"hidden\"\n          />\n          <label htmlFor=\"simple-browse\" className=\"flex cursor-pointer items-center justify-center\">\n            <MaterialSymbol icon=\"attach_file\" size={23} color=\"rgb(var(--color-foreground))\" />\n          </label>\n        </div>\n      </ControlledTooltip>\n    </CustomBadge>\n  );\n};\n\nexport default SimpleUploaderComponent;\n"],"names":[],"mappings":";;;;;;;;AAkBA,MAAM,0BAAmE,CAAC;AAAA,EACxE;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,EAAE,OAAA,IAAW,gBAAA;AAEnB,QAAM,mBAAmB;AACzB,QAAM,sBAAsB,mBAAmB,OAAO;AACtD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAsB,CAAA,CAAE;AAElD,QAAM,cAAc,CAAC,aAA0B;AAC7C,aAAS,QAAQ;AACjB,QAAI,CAAC,YAAY,SAAS,WAAW,GAAG;AACtC,0BAAoB,QAAQ;AAAA,IAC9B;AAAA,EACF;AAEA,QAAM,mBAA+D,CAAC,UAAU;AAC9E,UAAM,gBAAgB,MAAM,OAAO;AACnC,QAAI,iBAAiB,cAAc,SAAS,GAAG;AAC7C,YAAM,WAAW,MAAM,KAAK,aAAa,EAAE,OAAO,CAAC,SAAS,KAAK,QAAQ,mBAAmB;AAE5F,UAAI,SAAS,SAAS,cAAc,QAAQ;AAC1C,eAAO;AAAA,UACL,SAAS,EAAE,gCAAgC,EAAE,MAAM,kBAAkB;AAAA,UACrE,MAAM;AAAA,QAAA,CACP;AAAA,MACH;AAEA,UAAI,SAAS,SAAS,GAAG;AACvB,oBAAY,QAAQ;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AAEA,QAAM,iBAAiB,EAAE,kCAAkC;AAAA,IACzD,SAAS,aAAa,IAAI,CAAC,SAAU,KAAK,WAAW,GAAG,IAAI,OAAO,MAAM,KAAK,MAAM,GAAG,EAAE,CAAC,CAAE,EAAE,KAAK,GAAG;AAAA,IACtG,MAAM;AAAA,EAAA,CACP;AAED,SACE,oBAAC,aAAA,EAAY,SAAS,MAAM,QAAQ,WAAW,MAAM,WAAW,GAC9D,UAAA,oBAAC,mBAAA,EAAkB,SAAS,gBAC1B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,IAAG;AAAA,YACH,UAAU;AAAA,YACV,QAAQ,aAAa,KAAK,IAAI;AAAA,YAC9B;AAAA,YACA,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEZ,oBAAC,SAAA,EAAM,SAAQ,iBAAgB,WAAU,mDACvC,UAAA,oBAAC,gBAAA,EAAe,MAAK,eAAc,MAAM,IAAI,OAAM,gCAA+B,EAAA,CACpF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEJ,EAAA,CACF;AAEJ;"}

package/dist/components/Upload/UploaderComponent.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+interface IUploaderComponentProps {
+    allowedTypes: Array<string>;
+    handleFilesSelected: (files: Array<File>) => void;
+    multiple?: boolean;
+    className?: string;
+    simpleLayout?: boolean;
+    maxSizeMB?: number;
+    /**
+     * When true, valid files are sent immediately via `handleFilesSelected` instead of
+     * being staged behind a manual "send" button. Keeps the default behavior elsewhere.
+     */
+    autoUpload?: boolean;
+    /**
+     * Visual style of the full dropzone. `'default'` keeps the neutral gray boxed look used
+     * across the app; `'borderless'` drops the dashed frame/background and shows only the
+     * centered content with the product accent (lilac icon and link, softer typography).
+     * For panels where drag/paste already works anywhere and the frame is redundant.
+     */
+    variant?: 'default' | 'borderless';
+    /**
+     * When true, the component stops handling its own drag/drop (it still opens the file
+     * picker on click and handles paste). Use when a parent container owns drag-and-drop for
+     * a larger area and should be the single drop target, avoiding duplicated uploads.
+     */
+    disableDragDrop?: boolean;
+}
+declare const UploaderComponent: React.FC<IUploaderComponentProps>;
+export default UploaderComponent;

package/dist/components/Upload/UploaderComponent.js

@@ -0,0 +1,241 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useId } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import { useNotification } from "../../hooks/useNotification.js";
+import ControlledButton from "../Form/ControlledButton.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+const UploaderComponent = ({
+  allowedTypes,
+  handleFilesSelected,
+  multiple = false,
+  className,
+  simpleLayout = false,
+  maxSizeMB = 1,
+  autoUpload = false,
+  variant = "default",
+  disableDragDrop = false
+}) => {
+  const { t } = useTranslation("ui");
+  const { notify } = useNotification();
+  const isBorderless = variant === "borderless";
+  const MAX_FILE_SIZE_MB = maxSizeMB;
+  const MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_MB * 1024 * 1024;
+  const [files, setFiles] = useState([]);
+  const [isDragging, setIsDragging] = useState(false);
+  const inputId = useId();
+  const matchesAllowedType = (file) => {
+    if (allowedTypes.includes(file.type)) return true;
+    const extension = "." + (file.name.split(".").pop() ?? "").toLowerCase();
+    return allowedTypes.some((type) => type.toLowerCase() === extension);
+  };
+  const handleFiles = (newFiles) => {
+    if (autoUpload) {
+      handleFilesSelected(newFiles);
+      return;
+    }
+    setFiles(newFiles);
+    if (!multiple && newFiles.length === 1) {
+      handleFilesSelected(newFiles);
+    }
+  };
+  const acceptExternalFiles = (candidates) => {
+    const typeMatched = candidates.filter(matchesAllowedType);
+    const validFiles = typeMatched.filter((file) => file.size <= MAX_FILE_SIZE_BYTES);
+    if (validFiles.length < typeMatched.length) {
+      notify({ message: t("uploader.filesIgnoredMaxSize", { size: MAX_FILE_SIZE_MB }), type: "error" });
+    }
+    if (validFiles.length > 0) {
+      handleFiles(validFiles);
+    } else {
+      notify({ message: t("uploader.invalidFormat"), type: "error" });
+    }
+  };
+  const clipboardFiles = (clipboardData) => {
+    const fromFiles = Array.from(clipboardData?.files ?? []);
+    if (fromFiles.length > 0) return fromFiles;
+    return Array.from(clipboardData?.items ?? []).filter((item) => item.kind === "file").map((item) => item.getAsFile()).filter((file) => file !== null);
+  };
+  const handlePaste = (event) => {
+    const pasted = clipboardFiles(event.clipboardData);
+    if (pasted.length === 0) return;
+    event.preventDefault();
+    acceptExternalFiles(pasted);
+  };
+  const handleDragEnterOrOver = (event) => {
+    event.preventDefault();
+    if (!isDragging) setIsDragging(true);
+  };
+  const handleDragLeave = (event) => {
+    if (event.currentTarget.contains(event.relatedTarget)) return;
+    setIsDragging(false);
+  };
+  const handleFileChange = (event) => {
+    const selectedFiles = event.target.files;
+    if (selectedFiles && selectedFiles.length > 0) {
+      const newFiles = Array.from(selectedFiles).filter((file) => file.size <= MAX_FILE_SIZE_BYTES);
+      if (newFiles.length < selectedFiles.length) {
+        notify({
+          message: t("uploader.filesIgnoredMaxSize", { size: MAX_FILE_SIZE_MB }),
+          type: "error"
+        });
+      }
+      if (newFiles.length > 0) {
+        handleFiles(newFiles);
+      }
+    }
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    setIsDragging(false);
+    acceptExternalFiles(Array.from(event.dataTransfer.files));
+  };
+  const handleRemoveFile = (index) => {
+    setFiles((prevFiles) => {
+      const next = prevFiles.filter((_, i) => i !== index);
+      if (!multiple && next.length === 0) {
+        handleFilesSelected([]);
+      }
+      return next;
+    });
+  };
+  if (simpleLayout) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        tabIndex: 0,
+        className: classNames(
+          "aspect-square w-[4.5rem] cursor-pointer rounded-lg border-2 border-dashed p-4 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-border",
+          isDragging ? "border-brand bg-brand-soft" : "border-border-strong hover:bg-muted",
+          className
+        ),
+        onDrop: handleDrop,
+        onDragEnter: handleDragEnterOrOver,
+        onDragOver: handleDragEnterOrOver,
+        onDragLeave: handleDragLeave,
+        onPaste: handlePaste,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "file",
+              id: inputId,
+              onChange: handleFileChange,
+              accept: allowedTypes.join(", "),
+              multiple,
+              className: "hidden"
+            }
+          ),
+          /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "flex size-full cursor-pointer items-center justify-center", children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "add_photo_alternate", size: 23, color: "rgb(var(--color-foreground-subtle))" }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      tabIndex: 0,
+      className: classNames(
+        "flex w-full flex-col items-center justify-center rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-border",
+        isBorderless ? "py-4" : "border-2 border-dashed px-4 py-8",
+        !isBorderless && (isDragging ? "border-brand bg-brand-soft" : "border-border-strong"),
+        isBorderless && isDragging && "bg-brand-soft/60",
+        className
+      ),
+      onDrop: disableDragDrop ? void 0 : handleDrop,
+      onDragEnter: disableDragDrop ? void 0 : handleDragEnterOrOver,
+      onDragOver: disableDragDrop ? void 0 : handleDragEnterOrOver,
+      onDragLeave: disableDragDrop ? void 0 : handleDragLeave,
+      onPaste: handlePaste,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classNames(
+              "flex flex-col items-center justify-center gap-y-2",
+              isBorderless ? "text-foreground-muted" : "text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(MaterialSymbol, { icon: "cloud_upload", size: 30, className: isBorderless ? "text-brand-emphasis" : void 0 }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: classNames(
+                    "flex flex-row flex-wrap justify-center gap-x-1",
+                    isBorderless ? "font-medium" : "font-bold"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "file",
+                        id: inputId,
+                        onChange: handleFileChange,
+                        accept: allowedTypes.join(", "),
+                        multiple,
+                        className: "hidden"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { children: t("uploader.dragOr") }),
+                    /* @__PURE__ */ jsx(
+                      "label",
+                      {
+                        htmlFor: inputId,
+                        className: classNames(
+                          "cursor-pointer underline underline-offset-2",
+                          isBorderless ? "font-semibold text-brand-emphasis" : "text-underline"
+                        ),
+                        children: t("uploader.selectFile")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "font-normal text-foreground-subtle", children: t("uploader.orPaste") })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "text-xs", children: [
+                t("uploader.allowedFormats"),
+                " ",
+                allowedTypes.map((type) => type.startsWith(".") ? type : "." + type.split("/")[1]).join(" "),
+                " ",
+                t("uploader.upTo"),
+                " ",
+                MAX_FILE_SIZE_MB,
+                t("uploader.megabytesSuffix")
+              ] })
+            ]
+          }
+        ),
+        files.length > 0 && /* @__PURE__ */ jsx("div", { className: "my-5 flex max-h-40 w-full flex-col gap-y-2 overflow-y-scroll", children: files.map((file, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center justify-between rounded-lg border border-border-emphasis p-2",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-1", children: /* @__PURE__ */ jsx("p", { className: "m-0 text-sm text-foreground", children: file.name }) }),
+              /* @__PURE__ */ jsx("div", { className: "cursor-pointer", onClick: () => handleRemoveFile(index), children: /* @__PURE__ */ jsx(ControlledTooltip, { content: t("actions.remove"), children: /* @__PURE__ */ jsx(MaterialSymbol, { size: 20, icon: "delete_sweep", color: "rgb(var(--color-danger))" }) }) })
+            ]
+          },
+          `${file.name}-${file.size}-${file.lastModified}`
+        )) }),
+        files.length > 0 && multiple && /* @__PURE__ */ jsxs(
+          ControlledButton,
+          {
+            variant: "outlined",
+            tone: "neutral",
+            size: "sm",
+            className: "inter-font flex items-center justify-center gap-x-2 rounded-md normal-case text-foreground",
+            onClick: () => handleFilesSelected(files),
+            children: [
+              t("uploader.sendFiles"),
+              /* @__PURE__ */ jsx(MaterialSymbol, { icon: "difference", size: 16, color: "rgb(var(--color-foreground))" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  UploaderComponent as default
+};
+//# sourceMappingURL=UploaderComponent.js.map