@layers-app/shared 0.4.0 → 0.4.2

package/dist/components/AttachmentsGalleryModal/hooks/useGetPreviewUrl.js

@@ -1,28 +1,67 @@
-import { useState as t, useEffect as w, useMemo as U } from "react";
-import { isVideoFile as E } from "../../../helpers/fileUtils.js";
-const p = (e) => {
-  const [l, c] = t(null), [n, s] = t(!1), [f, o] = t(!1);
-  async function u(d) {
-    s(!0);
-    const i = await fetch(`/v1/attachments/${d}`, {
-      method: "GET"
+import { useState as p, useEffect as F, useMemo as T } from "react";
+import { getEnvConfig as L } from "../../../config/envConfig.js";
+import { isVideoFile as v } from "../../../helpers/fileUtils.js";
+const h = () => {
+  const e = L().apiBaseUrl || "";
+  return e.endsWith("/") ? e.slice(0, -1) : e;
+}, B = (e) => {
+  const [u, y] = p(null), [d, n] = p(!1), [w, a] = p(!1);
+  async function g(i) {
+    return fetch(`${h()}/v1/attachments/${i}`, {
+      method: "GET",
+      credentials: "include"
     });
-    if (!i.ok)
-      throw s(!1), o(!0), new Error(`Error loading: ${i.statusText}`);
-    const a = await i.blob();
-    c(window.URL.createObjectURL(a)), s(!1), o(!1);
   }
-  const r = E(
+  async function m() {
+    try {
+      return (await fetch(`${h()}/v1/auth/refresh`, {
+        method: "POST",
+        credentials: "include"
+      })).ok;
+    } catch {
+      return !1;
+    }
+  }
+  async function U(i, b) {
+    n(!0);
+    let s = await g(i);
+    if ((s.status === 401 || s.status === 403) && await m() && (s = await g(i)), !s.ok)
+      throw n(!1), a(!0), new Error(`Error loading: ${s.statusText}`);
+    const f = await s.blob(), E = b && f.type !== "application/pdf" ? new Blob([f], { type: "application/pdf" }) : f;
+    y(window.URL.createObjectURL(E)), n(!1), a(!1);
+  }
+  const t = v(
     e.contentType,
     e.originalFileName
-  );
-  return w(() => {
-    e.id && !r && !e.Url && u(e.id);
-  }, [e.Url, e.id, r]), U(
-    () => ({ fileUrl: l, isFetching: n, isError: f, setIsError: o, isVideo: r }),
-    [l, f, n, r]
+  ), o = (e.contentType || "").toLowerCase() === "application/pdf" || (e.originalFileName || "").toLowerCase().endsWith(".pdf"), c = (e.contentType || "").toLowerCase().startsWith("image/"), l = (e.contentType || "").toLowerCase().startsWith("audio/") || /\.(mp3|wav|ogg|flac|m4a|aac|opus|weba)$/i.test(
+    e.originalFileName || ""
+  ), r = c || t || o || l;
+  return F(() => {
+    e.id && !t && r && !e.Url && U(e.id, o);
+  }, [e.Url, e.id, t, o, r]), T(
+    () => ({
+      fileUrl: u,
+      isFetching: d,
+      isError: w,
+      setIsError: a,
+      isVideo: t,
+      isPdf: o,
+      isImage: c,
+      isAudio: l,
+      isSupported: r
+    }),
+    [
+      u,
+      w,
+      d,
+      t,
+      o,
+      c,
+      l,
+      r
+    ]
   );
 };
 export {
-  p as useGetPreviewUrl
+  B as useGetPreviewUrl
 };

package/dist/components/AttachmentsGalleryModal/styles.module.css.js

@@ -1,29 +1,41 @@
-const o = "_container_sq5v9_1", t = "_root_sq5v9_13", n = "_carouselRoot_sq5v9_27", e = "_carouselViewport_sq5v9_35", a = "_carouselSlide_sq5v9_43", s = "_navButton_sq5v9_57", _ = "_navButtonPrev_sq5v9_83", r = "_navButtonNext_sq5v9_91", v = "_modalContent_sq5v9_99", c = "_modalBody_sq5v9_109", i = "_videoContainer_sq5v9_121", l = "_imageContainer_sq5v9_131", u = {
-  container: o,
-  root: t,
-  carouselRoot: n,
+const n = "_container_nqf56_1", o = "_root_nqf56_13", t = "_carouselRoot_nqf56_27", e = "_carouselViewport_nqf56_35", a = "_carouselSlide_nqf56_43", _ = "_navButton_nqf56_57", r = "_navButtonPrev_nqf56_83", i = "_navButtonNext_nqf56_91", c = "_headerAction_nqf56_99", d = "_modalContent_nqf56_127", s = "_modalBody_nqf56_137", u = "_videoContainer_nqf56_149", f = "_imageContainer_nqf56_159", l = "_pdfContainer_nqf56_173", m = "_pdfFrame_nqf56_189", q = "_audioContainer_nqf56_203", v = "_audioName_nqf56_233", C = "_audioElement_nqf56_249", B = {
+  container: n,
+  root: o,
+  carouselRoot: t,
   carouselViewport: e,
   carouselSlide: a,
-  navButton: s,
-  navButtonPrev: _,
-  navButtonNext: r,
-  modalContent: v,
-  modalBody: c,
-  videoContainer: i,
-  imageContainer: l
+  navButton: _,
+  navButtonPrev: r,
+  navButtonNext: i,
+  headerAction: c,
+  modalContent: d,
+  modalBody: s,
+  videoContainer: u,
+  imageContainer: f,
+  pdfContainer: l,
+  pdfFrame: m,
+  audioContainer: q,
+  audioName: v,
+  audioElement: C
 };
 export {
-  n as carouselRoot,
+  q as audioContainer,
+  C as audioElement,
+  v as audioName,
+  t as carouselRoot,
   a as carouselSlide,
   e as carouselViewport,
-  o as container,
-  u as default,
-  l as imageContainer,
-  c as modalBody,
-  v as modalContent,
-  s as navButton,
-  r as navButtonNext,
-  _ as navButtonPrev,
-  t as root,
-  i as videoContainer
+  n as container,
+  B as default,
+  c as headerAction,
+  f as imageContainer,
+  s as modalBody,
+  d as modalContent,
+  _ as navButton,
+  i as navButtonNext,
+  r as navButtonPrev,
+  l as pdfContainer,
+  m as pdfFrame,
+  o as root,
+  u as videoContainer
 };

package/dist/components/AttachmentsPreview/AttachmentsPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentsPreview.d.ts","sourceRoot":"","sources":["../../../src/components/AttachmentsPreview/AttachmentsPreview.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAIhE,UAAU,8BAA8B;IACtC,KAAK,EAAE,oBAAoB,CAAC,cAAc,EAAE,CAAC;IAC7C,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,kBAAkB,GAAI,8CAKhC,8BAA8B,mDAgNhC,CAAC"}
+{"version":3,"file":"AttachmentsPreview.d.ts","sourceRoot":"","sources":["../../../src/components/AttachmentsPreview/AttachmentsPreview.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAIhE,UAAU,8BAA8B;IACtC,KAAK,EAAE,oBAAoB,CAAC,cAAc,EAAE,CAAC;IAC7C,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,kBAAkB,GAAI,8CAKhC,8BAA8B,mDAoNhC,CAAC"}

package/dist/components/AttachmentsPreview/AttachmentsPreview.js

@@ -6,11 +6,11 @@ import { useDisclosure as M } from "@mantine/hooks";
 import { getFileIcons as P } from "../../helpers/getFileIcons.js";
 import { getFileType as A } from "../../helpers/getFileType.js";
 import { AttachmentsGalleryModal as B } from "../AttachmentsGalleryModal/AttachmentsGalleryModal.js";
-import t from "./AttachmentsPreview.module.css.js";
+import a from "./AttachmentsPreview.module.css.js";
 const U = ({
   files: o,
   onRemove: i,
-  mode: a,
+  mode: t,
   parentIsExisting: u
 }) => {
   const [T, { open: w, close: b }] = M(!1), s = o.filter((e) => e.isImage), d = o.filter((e) => !e.isImage), D = s.map((e) => ({
@@ -35,7 +35,7 @@ const U = ({
   };
   return o.length === 0 ? null : /* @__PURE__ */ n(C, { children: [
     /* @__PURE__ */ n(v, { gap: "10px", w: "100%", tabIndex: 0, children: [
-      s.length > 0 && /* @__PURE__ */ r(z, { gutter: "xs", children: s.map((e) => {
+      s.length > 0 && /* @__PURE__ */ r(z, { gap: "xs", children: s.map((e) => {
         const l = o.indexOf(e);
         return /* @__PURE__ */ r(z.Col, { span: "content", children: /* @__PURE__ */ n(
           h,
@@ -43,7 +43,7 @@ const U = ({
             w: 56,
             h: 56,
             pos: "relative",
-            className: t.imagePreviewWrapper,
+            className: a.imagePreviewWrapper,
             children: [
               /* @__PURE__ */ r(
                 F,
@@ -62,11 +62,11 @@ const U = ({
               /* @__PURE__ */ r(
                 f,
                 {
-                  visible: e.isTemp && a === "view" && u,
+                  visible: e.isTemp && t === "view" && u,
                   loaderProps: { size: 20 }
                 }
               ),
-              a === "view" && !e.isTemp && /* @__PURE__ */ r(
+              t === "view" && !e.isTemp && /* @__PURE__ */ r(
                 c,
                 {
                   component: "a",
@@ -79,11 +79,11 @@ const U = ({
                   top: 2,
                   right: 2,
                   bg: "var(--mantine-color-dark-filled, #2E2E2E)",
-                  className: t.downloadButton,
+                  className: a.downloadButton,
                   children: /* @__PURE__ */ r(x, { size: 16, icon: g })
                 }
               ),
-              a === "draft" && i && /* @__PURE__ */ r(
+              t === "draft" && i && /* @__PURE__ */ r(
                 c,
                 {
                   size: "20px",
@@ -93,7 +93,7 @@ const U = ({
                   pos: "absolute",
                   color: "dark",
                   onClick: () => i(l),
-                  className: t.deleteButton,
+                  className: a.deleteButton,
                   children: /* @__PURE__ */ r(I, { size: "12px" })
                 }
               )
@@ -105,15 +105,15 @@ const U = ({
         h,
         {
           w: "100%",
-          className: t.filePreviewList,
+          className: a.filePreviewList,
           "data-many": d.length >= 4,
           children: d.map((e) => {
             const l = o.indexOf(e);
-            return /* @__PURE__ */ n(h, { className: t.filePreviewWrapper, children: [
+            return /* @__PURE__ */ n(h, { className: a.filePreviewWrapper, children: [
               /* @__PURE__ */ r(
                 f,
                 {
-                  visible: e.isTemp && a === "view" && u,
+                  visible: e.isTemp && t === "view" && u,
                   loaderProps: { size: 20 }
                 }
               ),
@@ -134,7 +134,11 @@ const U = ({
                         flex: 1,
                         miw: 0,
                         children: [
-                          P(A(e.type), !1, 36),
+                          P(
+                            A(e.type, !1, e.name),
+                            !1,
+                            36
+                          ),
                           /* @__PURE__ */ n(v, { gap: 0, flex: 1, miw: 0, children: [
                             /* @__PURE__ */ r(
                               N,
@@ -142,7 +146,7 @@ const U = ({
                                 size: "sm",
                                 truncate: !0,
                                 title: e.name,
-                                className: t.fileDownloadName,
+                                className: a.fileDownloadName,
                                 component: "a",
                                 href: e.url,
                                 download: e.name,
@@ -159,7 +163,7 @@ const U = ({
                         ]
                       }
                     ),
-                    a === "view" && !e.isTemp && /* @__PURE__ */ r(
+                    t === "view" && !e.isTemp && /* @__PURE__ */ r(
                       c,
                       {
                         component: "a",
@@ -169,14 +173,14 @@ const U = ({
                         variant: "subtle",
                         color: "gray",
                         size: "sm",
-                        className: t.downloadButton,
+                        className: a.downloadButton,
                         children: /* @__PURE__ */ r(x, { size: 16, icon: g })
                       }
                     )
                   ]
                 }
               ),
-              a === "draft" && i && /* @__PURE__ */ r(
+              t === "draft" && i && /* @__PURE__ */ r(
                 c,
                 {
                   size: "xs",
@@ -185,7 +189,7 @@ const U = ({
                   variant: "filled",
                   color: "dark",
                   onClick: () => i(l),
-                  className: t.deleteButton,
+                  className: a.deleteButton,
                   children: /* @__PURE__ */ r(I, { size: "12px" })
                 }
               )

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -1,6 +1,17 @@
 import { ColorSwatchProps, FlexProps } from '@mantine/core';
 import { ColorPickerList } from './ColorPickerList';
 import type { ColorItem } from './types';
+type ColorPickerProps = {
+    value?: string | null;
+    onChange?: (v: string) => void;
+    allowCustomColor?: boolean;
+    colors?: ColorItem[];
+    swatchShape?: 'circle' | 'square';
+    swatchVariant?: 'filled' | 'outline';
+    withTick?: boolean;
+    fullWidth?: boolean;
+    swatchSize?: number;
+} & Omit<FlexProps, 'onChange'>;
 interface ColorCircleProps extends Omit<ColorSwatchProps, 'color'>, Omit<React.ComponentPropsWithoutRef<'div'>, keyof Omit<ColorSwatchProps, 'color'>> {
     value?: string | null;
     label?: string;
@@ -12,17 +23,7 @@ interface ColorCircleProps extends Omit<ColorSwatchProps, 'color'>, Omit<React.C
     bgColor?: string;
 }
 export declare const ColorCircle: import("react").ForwardRefExoticComponent<ColorCircleProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ColorPicker: import("react").ForwardRefExoticComponent<{
-    value?: string | null;
-    onChange?: (v: string) => void;
-    allowCustomColor?: boolean;
-    colors?: ColorItem[];
-    swatchShape?: "circle" | "square";
-    swatchVariant?: "filled" | "outline";
-    withTick?: boolean;
-    fullWidth?: boolean;
-    swatchSize?: number;
-} & Omit<FlexProps, "onChange"> & import("react").RefAttributes<HTMLDivElement>> & {
+export declare const ColorPicker: import("react").ForwardRefExoticComponent<Omit<ColorPickerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     ColorCircle: import("react").ForwardRefExoticComponent<ColorCircleProps & import("react").RefAttributes<HTMLDivElement>>;
     List: typeof ColorPickerList;
     Toolbar: import("react").ForwardRefExoticComponent<import("./ColorPickerToolbar").ColorPickerToolbarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ColorPicker/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIL,gBAAgB,EAEhB,SAAS,EAKV,MAAM,eAAe,CAAC;AAMvB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAiHzC,UAAU,gBACR,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,EACrC,IAAI,CACF,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EACrC,MAAM,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,CACtC;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,WAAW,6GAmDvB,CAAC;AASF,eAAO,MAAM,WAAW;YAzLd,MAAM,GAAG,IAAI;eACV,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;uBACX,OAAO;aACjB,SAAS,EAAE;kBACN,QAAQ,GAAG,QAAQ;oBACjB,QAAQ,GAAG,SAAS;eACzB,OAAO;gBACN,OAAO;iBACN,MAAM;;;;;CAqLnB,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAKA,OAAO,EAIL,gBAAgB,EAEhB,SAAS,EAKV,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;AAyGhC,UAAU,gBACR,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,EACrC,IAAI,CACF,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EACrC,MAAM,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,CACtC;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,WAAW,6GAiFvB,CAAC;AASF,eAAO,MAAM,WAAW;;;;CAItB,CAAC"}

package/dist/components/ColorPicker/ColorPicker.js

@@ -1,34 +1,35 @@
-import { jsx as e, jsxs as h } from "react/jsx-runtime";
-import { forwardRef as y, useState as x } from "react";
-import { Tick02Icon as j } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as A } from "@hugeicons/react";
-import { useMantineTheme as w, getThemeColor as E, Flex as C, Tooltip as R, ColorSwatch as D, parseThemeColor as F, ColorInput as H, ActionIcon as v } from "@mantine/core";
-import { IconPalette as M, IconPencil as U } from "@tabler/icons-react";
-import V from "styled-components";
-import { DEFAULT_VALUES as g } from "../../constants.js";
-import { ColorPickerToolbar as q } from "./ColorPickerToolbar.js";
+import { jsx as e, jsxs as b } from "react/jsx-runtime";
+import { forwardRef as k, useState as g } from "react";
+import { useTranslation as j } from "react-i18next";
+import { Tick02Icon as A } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as E } from "@hugeicons/react";
+import { useMantineTheme as z, getThemeColor as R, Flex as x, Tooltip as D, ColorSwatch as F, parseThemeColor as H, ColorInput as M, ActionIcon as y } from "@mantine/core";
+import { IconPalette as U, IconPencil as V } from "@tabler/icons-react";
+import q from "styled-components";
+import { DEFAULT_VALUES as w } from "../../constants.js";
 import { ColorPickerList as _ } from "./ColorPickerList.js";
-import { normalizeColorItem as B } from "./types.js";
-const G = y(
+import { ColorPickerToolbar as B } from "./ColorPickerToolbar.js";
+import { resolveColorLabel as G, normalizeColorItem as J } from "./types.js";
+const K = k(
   ({
     value: o,
     onChange: l,
     allowCustomColor: n,
     colors: s,
-    swatchShape: a = "circle",
+    swatchShape: c = "circle",
     swatchVariant: m = "filled",
     withTick: d = !1,
     fullWidth: p = !1,
     swatchSize: i = 30,
     ...u
   }, f) => {
-    const r = w(), t = F({
-      color: o || g.COLORS[0],
-      theme: r
-    }), [z, I] = x(t.value), [O, b] = x(!1);
-    return O ? /* @__PURE__ */ h(C, { align: "center", mih: 30, children: [
+    const h = z(), r = H({
+      color: o || w.COLORS[0],
+      theme: h
+    }), [t, C] = g(r.value), [L, v] = g(!1);
+    return L ? /* @__PURE__ */ b(x, { align: "center", mih: 30, children: [
       /* @__PURE__ */ e(
-        H,
+        M,
         {
           w: "100%",
           popoverProps: {
@@ -38,57 +39,62 @@ const G = y(
           maxLength: 7,
           withEyeDropper: !1,
           size: "xs",
-          value: z,
-          onChange: I,
+          value: t,
+          onChange: C,
           onChangeEnd: l,
           placeholder: "Select custom color"
         }
       ),
       /* @__PURE__ */ e(
-        v,
+        y,
         {
           radius: "xl",
           variant: "default",
           color: "gray",
-          onClick: () => b(!1),
-          children: /* @__PURE__ */ e(M, { size: 16 })
+          onClick: () => v(!1),
+          children: /* @__PURE__ */ e(U, { size: 16 })
         }
       )
-    ] }, 1) : /* @__PURE__ */ h(
-      C,
+    ] }, 1) : /* @__PURE__ */ b(
+      x,
       {
         ref: f,
         ...u,
         justify: p ? "space-between" : "flex-start",
         align: "center",
         children: [
-          (s || g.COLORS).map((P, S) => {
-            const { value: c, border: T, bg: L, label: $ } = B(P);
+          (s || w.COLORS).map((O, T) => {
+            const {
+              value: a,
+              border: P,
+              bg: S,
+              label: $
+            } = J(O);
             return /* @__PURE__ */ e(
-              J,
+              N,
               {
-                value: c,
+                value: a,
                 label: $,
-                isActive: c === o,
+                isActive: a === o,
                 size: i - 4,
-                swatchShape: a,
+                swatchShape: c,
                 swatchVariant: m,
                 withTick: d,
-                borderColor: T,
-                bgColor: L,
-                onClick: () => l?.(c)
+                borderColor: P,
+                bgColor: S,
+                onClick: () => l?.(a)
               },
-              c || S
+              a || T
             );
           }),
           n && /* @__PURE__ */ e(
-            v,
+            y,
             {
               radius: "xl",
               variant: "default",
               color: "gray",
-              onClick: () => b(!0),
-              children: /* @__PURE__ */ e(U, { size: 16 })
+              onClick: () => v(!0),
+              children: /* @__PURE__ */ e(V, { size: 16 })
             }
           )
         ]
@@ -96,58 +102,78 @@ const G = y(
       2
     );
   }
-), k = y(
-  ({ value: o, label: l, isActive: n, swatchShape: s, swatchVariant: a = "filled", withTick: m, borderColor: d, bgColor: p, ...i }, u) => {
-    const f = w(), r = o ? E(o, f) : "", t = a === "outline";
-    return /* @__PURE__ */ e(C, { w: i.size || 24, h: i.size || 24, justify: "center", align: "center", style: { position: "relative" }, children: /* @__PURE__ */ e(R, { label: l || o || "", withArrow: !0, children: /* @__PURE__ */ h(
-      D,
+), I = k(
+  ({
+    value: o,
+    label: l,
+    isActive: n,
+    swatchShape: s,
+    swatchVariant: c = "filled",
+    withTick: m,
+    borderColor: d,
+    bgColor: p,
+    ...i
+  }, u) => {
+    const f = z(), { t: h } = j("ui"), r = o ? R(o, f) : "", t = c === "outline", C = G(h, o, l);
+    return /* @__PURE__ */ e(
+      x,
       {
-        ref: u,
-        color: t ? "transparent" : r,
-        radius: s === "circle" ? "xl" : "sm",
-        styles: t ? {
-          alphaOverlay: { display: "none" },
-          shadowOverlay: { display: "none" }
-        } : void 0,
-        style: {
-          cursor: "pointer",
-          color: "var(--mantine-color-white)",
-          background: t ? p || `var(--mantine-color-${o}-light, ${r}20)` : void 0,
-          border: t ? `2px solid ${d || `var(--mantine-color-${o}-outline, ${r})`}` : void 0
-        },
-        ...i,
-        children: [
-          n && /* @__PURE__ */ e(
-            "span",
-            {
-              style: {
-                position: "absolute",
-                top: -4,
-                left: -4,
-                right: -4,
-                bottom: -4,
-                border: `2px solid ${r}`,
-                borderRadius: s === "circle" ? "var(--mantine-radius-xl)" : "var(--mantine-radius-sm)",
-                pointerEvents: "none",
-                boxSizing: "border-box"
-              }
-            }
-          ),
-          m && n && /* @__PURE__ */ e(A, { size: 20, icon: j })
-        ]
+        w: i.size || 24,
+        h: i.size || 24,
+        justify: "center",
+        align: "center",
+        style: { position: "relative" },
+        children: /* @__PURE__ */ e(D, { label: C, withArrow: !0, zIndex: 300, children: /* @__PURE__ */ b(
+          F,
+          {
+            ref: u,
+            color: t ? "transparent" : r,
+            radius: s === "circle" ? "xl" : "sm",
+            styles: t ? {
+              alphaOverlay: { display: "none" },
+              shadowOverlay: { display: "none" }
+            } : void 0,
+            style: {
+              cursor: "pointer",
+              color: "var(--mantine-color-white)",
+              background: t ? p || `var(--mantine-color-${o}-light, ${r}20)` : void 0,
+              border: t ? `2px solid ${d || `var(--mantine-color-${o}-outline, ${r})`}` : void 0
+            },
+            ...i,
+            children: [
+              n && /* @__PURE__ */ e(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    top: -4,
+                    left: -4,
+                    right: -4,
+                    bottom: -4,
+                    border: `2px solid ${r}`,
+                    borderRadius: s === "circle" ? "var(--mantine-radius-xl)" : "var(--mantine-radius-sm)",
+                    pointerEvents: "none",
+                    boxSizing: "border-box"
+                  }
+                }
+              ),
+              m && n && /* @__PURE__ */ e(E, { size: 20, icon: A })
+            ]
+          }
+        ) })
       }
-    ) }) });
+    );
   }
-), J = V(k)`
+), N = q(I)`
   .mantine-ColorSwatch-colorOverlay {
     border-radius: ${({ swatchShape: o }) => o === "square" ? "3px" : "50%"};
   }
-`, lo = Object.assign(G, {
-  ColorCircle: k,
+`, ao = Object.assign(K, {
+  ColorCircle: I,
   List: _,
-  Toolbar: q
+  Toolbar: B
 });
 export {
-  k as ColorCircle,
-  lo as ColorPicker
+  I as ColorCircle,
+  ao as ColorPicker
 };

package/dist/components/ColorPicker/ColorPickerList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerList.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPickerList.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,oBAAoB,EAAgB,MAAM,SAAS,CAAC;AA8GlE;;oEAEoE;AACpE,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAW,EACX,gBAAgB,GACjB,EAAE,oBAAoB,2CA4CtB"}
+{"version":3,"file":"ColorPickerList.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPickerList.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,oBAAoB,EAAgB,MAAM,SAAS,CAAC;AAqHlE;;oEAEoE;AACpE,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAW,EACX,gBAAgB,GACjB,EAAE,oBAAoB,2CA4CtB"}