@layers-app/shared 0.4.5 → 0.4.7

package/dist/components/CircleColorPicker/CircleColorPicker.js

@@ -1,20 +1,22 @@
 import { jsxs as h, jsx as o } from "react/jsx-runtime";
 import { useMemo as E, useState as u, useEffect as H } from "react";
 import { useTranslation as S } from "react-i18next";
-import { useMantineTheme as k, useMantineColorScheme as M, parseThemeColor as b, Menu as m, ActionIcon as V, ColorSwatch as j, Stack as w, ColorPicker as y, DEFAULT_THEME as D, TextInput as z, isColorValid as A, Button as F } from "@mantine/core";
+import { useMantineTheme as k, useComputedColorScheme as V, parseThemeColor as b, Menu as m, ActionIcon as I, ColorSwatch as M, Stack as j, ColorPicker as w, DEFAULT_THEME as y, TextInput as D, isColorValid as z, Button as A } from "@mantine/core";
 const d = (e, t) => !e || typeof e != "string" ? null : e === "var(--mantine-color-bright)" ? t === "dark" ? "#ffffff" : "#000000" : e, L = ({
   value: e,
   onChange: t,
   menuProps: p,
   colorPickerProps: x
 }) => {
-  const { t: s } = S("common"), f = k(), { colorScheme: n } = M(), a = E(() => {
-    const r = d(e, n);
+  const { t: s } = S("common"), f = k(), l = V("light", {
+    getInitialValueInEffect: !0
+  }), a = E(() => {
+    const r = d(e, l);
     return r ? b({ color: r, theme: f }) : { value: "", color: "", isThemeColor: !1, shade: void 0 };
-  }, [e, f, n]), [C, i] = u(a.value), [g, l] = u(null);
+  }, [e, f, l]), [C, i] = u(a.value), [g, n] = u(null);
   H(() => {
-    i(d(e, n) || "");
-  }, [n, e]);
+    i(d(e, l) || "");
+  }, [l, e]);
   const [T, v] = u(!1);
   return /* @__PURE__ */ h(
     m,
@@ -24,39 +26,39 @@ const d = (e, t) => !e || typeof e != "string" ? null : e === "var(--mantine-col
       onChange: v,
       ...p,
       children: [
-        /* @__PURE__ */ o(m.Target, { children: /* @__PURE__ */ o(V, { size: "md", variant: "subtle", radius: "xl", children: /* @__PURE__ */ o(j, { color: a.value || "transparent" }) }) }),
-        /* @__PURE__ */ o(m.Dropdown, { style: { padding: 8, minWidth: 220 }, children: /* @__PURE__ */ h(w, { gap: "sm", children: [
+        /* @__PURE__ */ o(m.Target, { children: /* @__PURE__ */ o(I, { size: "md", variant: "subtle", radius: "xl", children: /* @__PURE__ */ o(M, { color: a.value || "transparent" }) }) }),
+        /* @__PURE__ */ o(m.Dropdown, { style: { padding: 8, minWidth: 220 }, children: /* @__PURE__ */ h(j, { gap: "sm", children: [
           /* @__PURE__ */ o(
-            y,
+            w,
             {
               value: a.value,
               onChange: (r) => {
-                t(r), i(r), l(null);
+                t(r), i(r), n(null);
               },
               format: "hex",
-              swatches: Object.values(D.colors).map((r) => r[5]),
+              swatches: Object.values(y.colors).map((r) => r[5]),
               ...x
             }
           ),
           /* @__PURE__ */ o(
-            z,
+            D,
             {
               label: s("HEXValue"),
               onChange: (r) => {
                 const c = r.currentTarget.value;
-                i(c), A(c) ? (t(c), l(null)) : l(s("invalidColorFormat"));
+                i(c), z(c) ? (t(c), n(null)) : n(s("invalidColorFormat"));
               },
               error: g,
               value: C
             }
           ),
           /* @__PURE__ */ o(
-            F,
+            A,
             {
               variant: "light",
               size: "xs",
               onClick: () => {
-                t(null), l(null);
+                t(null), n(null);
               },
               mt: "xs",
               children: s("resetColor")

package/dist/components/CollapsibleContainer/CollapsibleContainer.module.css.js

@@ -1,4 +1,4 @@
-const o = "_accordionRoot_1of7x_1", c = "_accordionControl_1of7x_9", n = "_accordionItem_1of7x_17", t = {
+const o = "_accordionRoot_3pkfo_1", c = "_accordionControl_3pkfo_5", n = "_accordionItem_3pkfo_9", t = {
   accordionRoot: o,
   accordionControl: c,
   accordionItem: n

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

@@ -11,6 +11,8 @@ type ColorPickerProps = {
     withTick?: boolean;
     fullWidth?: boolean;
     swatchSize?: number;
+    wrapperHeight?: number;
+    customSizes?: boolean;
 } & Omit<FlexProps, 'onChange'>;
 interface ColorCircleProps extends Omit<ColorSwatchProps, 'color'>, Omit<React.ComponentPropsWithoutRef<'div'>, keyof Omit<ColorSwatchProps, 'color'>> {
     value?: string | null;
@@ -21,6 +23,7 @@ interface ColorCircleProps extends Omit<ColorSwatchProps, 'color'>, Omit<React.C
     withTick?: boolean;
     borderColor?: string;
     bgColor?: string;
+    swatchSize?: number;
 }
 export declare const ColorCircle: import("react").ForwardRefExoticComponent<ColorCircleProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const ColorPicker: import("react").ForwardRefExoticComponent<Omit<ColorPickerProps, "ref"> & 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":"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"}
+{"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;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;AA6GhC,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;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,6GAkFvB,CAAC;AASF,eAAO,MAAM,WAAW;;;;CAItB,CAAC"}

package/dist/components/ColorPicker/ColorPicker.js

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

package/dist/components/ColorPicker/ColorPicker.module.css.js

@@ -1,31 +1,31 @@
-const t = "_section_tyqb8_3", i = "_sectionLabel_tyqb8_29", n = "_listItem_tyqb8_91", e = "_listItemActive_tyqb8_143", c = "_listItemLabel_tyqb8_151", l = "_listItemSwatch_tyqb8_167", _ = "_grid_tyqb8_183", s = "_inlineSection_tyqb8_323", o = "_inlineSectionLabel_tyqb8_343", a = "_inlineRow_tyqb8_359", b = "_inlineSwatch_tyqb8_377", S = "_inlineSwatchActive_tyqb8_429", w = "_inlineSwatchRound_tyqb8_449", y = {
-  section: t,
-  sectionLabel: i,
+const i = "_section_lidow_2", t = "_sectionLabel_lidow_15", n = "_listItem_lidow_46", e = "_listItemActive_lidow_72", l = "_listItemLabel_lidow_76", o = "_listItemSwatch_lidow_84", c = "_grid_lidow_92", _ = "_inlineSection_lidow_162", s = "_inlineSectionLabel_lidow_172", w = "_inlineRow_lidow_180", a = "_inlineSwatch_lidow_189", d = "_inlineSwatchActive_lidow_215", S = "_inlineSwatchRound_lidow_225", h = {
+  section: i,
+  sectionLabel: t,
   listItem: n,
   listItemActive: e,
-  listItemLabel: c,
-  listItemSwatch: l,
-  grid: _,
-  inlineSection: s,
-  inlineSectionLabel: o,
-  inlineRow: a,
-  inlineSwatch: b,
-  inlineSwatchActive: S,
-  inlineSwatchRound: w
+  listItemLabel: l,
+  listItemSwatch: o,
+  grid: c,
+  inlineSection: _,
+  inlineSectionLabel: s,
+  inlineRow: w,
+  inlineSwatch: a,
+  inlineSwatchActive: d,
+  inlineSwatchRound: S
 };
 export {
-  y as default,
-  _ as grid,
-  a as inlineRow,
-  s as inlineSection,
-  o as inlineSectionLabel,
-  b as inlineSwatch,
-  S as inlineSwatchActive,
-  w as inlineSwatchRound,
+  h as default,
+  c as grid,
+  w as inlineRow,
+  _ as inlineSection,
+  s as inlineSectionLabel,
+  a as inlineSwatch,
+  d as inlineSwatchActive,
+  S as inlineSwatchRound,
   n as listItem,
   e as listItemActive,
-  c as listItemLabel,
-  l as listItemSwatch,
-  t as section,
-  i as sectionLabel
+  l as listItemLabel,
+  o as listItemSwatch,
+  i as section,
+  t as sectionLabel
 };

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":"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"}
+{"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,2CA8CtB"}

package/dist/components/ColorPicker/ColorPickerList.js

@@ -1,32 +1,32 @@
-import { jsxs as y, jsx as t } from "react/jsx-runtime";
+import { jsxs as y, jsx as r } from "react/jsx-runtime";
 import { useTranslation as g } from "react-i18next";
 import { Tick02Icon as k } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon as x } from "@hugeicons/react";
-import { useMantineColorScheme as L, Box as F, useMantineTheme as N, getThemeColor as S, ColorSwatch as T } from "@mantine/core";
+import { useComputedColorScheme as L, Box as S, useMantineTheme as F, getThemeColor as N, ColorSwatch as T } from "@mantine/core";
 import { TextColorIcon as z } from "./icons.js";
 import { resolveColorLabel as D, isDefaultColor as b, normalizeColorItem as $ } from "./types.js";
 import { useRecentColors as w } from "./useRecentColors.js";
-import a from "./ColorPicker.module.css.js";
+import i from "./ColorPicker.module.css.js";
 function j({
   type: e,
   colorValue: l,
   resolvedColor: n,
-  border: i,
+  border: s,
   bg: c
 }) {
   if (e === "text")
-    return /* @__PURE__ */ t(z, { size: 16, color: n, showBorder: !0 });
-  const s = b(l);
-  return /* @__PURE__ */ t(
+    return /* @__PURE__ */ r(z, { size: 16, color: n, showBorder: !0 });
+  const a = b(l);
+  return /* @__PURE__ */ r(
     T,
     {
-      color: s ? "var(--mantine-color-body)" : c || i || l,
+      color: a ? "var(--mantine-color-body)" : c || s || l,
       size: 16,
       radius: "xl",
-      className: a.listItemSwatch,
+      className: i.listItemSwatch,
       styles: {
         root: {
-          border: `1.5px solid ${s ? "var(--mantine-color-default-border)" : i || n}`
+          border: `1.5px solid ${a ? "var(--mantine-color-default-border)" : s || n}`
         },
         alphaOverlay: { display: "none" },
         shadowOverlay: { display: "none" }
@@ -38,42 +38,42 @@ function v({
   section: e,
   columns: l,
   onChange: n,
-  isDark: i
+  isDark: s
 }) {
-  const c = N(), { t: s } = g("ui"), d = l > 1;
-  return /* @__PURE__ */ y("div", { className: a.section, children: [
-    e.label && /* @__PURE__ */ t("div", { className: a.sectionLabel, children: e.label }),
-    /* @__PURE__ */ t(
+  const c = F(), { t: a } = g("ui"), p = l > 1;
+  return /* @__PURE__ */ y("div", { className: i.section, children: [
+    e.label && /* @__PURE__ */ r("div", { className: i.sectionLabel, children: e.label }),
+    /* @__PURE__ */ r(
       "div",
       {
-        className: d ? a.grid : void 0,
-        style: d ? { gridTemplateColumns: `repeat(${l}, minmax(0, 1fr))` } : void 0,
-        children: e.colors.map((u) => {
+        className: p ? i.grid : void 0,
+        style: p ? { gridTemplateColumns: `repeat(${l}, minmax(0, 1fr))` } : void 0,
+        children: e.colors.map((d) => {
           const {
             value: o,
             label: f,
-            border: p,
+            border: u,
             bg: h
-          } = $(u), r = b(o), m = o === e.value, C = r ? i ? "#FFFFFF" : "#000000" : S(o, c), I = D(s, o, f);
+          } = $(d), t = b(o), m = o === e.value, C = t ? s ? "#FFFFFF" : "#000000" : N(o, c), I = D(a, o, f);
           return /* @__PURE__ */ y(
             "button",
             {
               type: "button",
-              className: `${a.listItem} ${m ? a.listItemActive : ""}`,
+              className: `${i.listItem} ${m ? i.listItemActive : ""}`,
               onClick: () => n(o, e.key),
               children: [
-                /* @__PURE__ */ t(
+                /* @__PURE__ */ r(
                   j,
                   {
                     type: e.type,
                     colorValue: o,
                     resolvedColor: C,
-                    border: p,
+                    border: u,
                     bg: h
                   }
                 ),
-                /* @__PURE__ */ t("span", { className: a.listItemLabel, children: I }),
-                m && /* @__PURE__ */ t(
+                /* @__PURE__ */ r("span", { className: i.listItemLabel, children: I }),
+                m && /* @__PURE__ */ r(
                   x,
                   {
                     size: 16,
@@ -90,44 +90,46 @@ function v({
     )
   ] });
 }
-function q({
+function P({
   sections: e,
   colors: l,
   value: n,
-  onChange: i,
+  onChange: s,
   columns: c = 1,
-  withRecentColors: s
+  withRecentColors: a
 }) {
-  const { colorScheme: d } = L(), u = d === "dark", { recentColors: o, addRecent: f } = w(), p = (r, m) => {
-    s && f(r, m), i?.(r, m);
+  const d = L("light", {
+    getInitialValueInEffect: !0
+  }) === "dark", { recentColors: o, addRecent: f } = w(), u = (t, m) => {
+    a && f(t, m), s?.(t, m);
   }, h = e || (l ? [{ key: "default", label: "", colors: l, value: n }] : []);
-  return /* @__PURE__ */ y(F, { children: [
-    s && o.length > 0 && /* @__PURE__ */ t(
+  return /* @__PURE__ */ y(S, { children: [
+    a && o.length > 0 && /* @__PURE__ */ r(
       v,
       {
         section: {
           key: "__recent",
           label: "Recently used",
-          colors: o.map((r) => r.value),
+          colors: o.map((t) => t.value),
           value: n
         },
         columns: 1,
-        onChange: p,
-        isDark: u
+        onChange: u,
+        isDark: d
       }
     ),
-    h.map((r) => /* @__PURE__ */ t(
+    h.map((t) => /* @__PURE__ */ r(
       v,
       {
-        section: r,
+        section: t,
         columns: c,
-        onChange: p,
-        isDark: u
+        onChange: u,
+        isDark: d
       },
-      r.key
+      t.key
     ))
   ] });
 }
 export {
-  q as ColorPickerList
+  P as ColorPickerList
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPickerToolbar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAMjE;6DAC6D;AAC7D,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAsCD,eAAO,MAAM,kBAAkB,oHA+L9B,CAAC"}
+{"version":3,"file":"ColorPickerToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPickerToolbar.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAMjE;6DAC6D;AAC7D,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAsCD,eAAO,MAAM,kBAAkB,oHAiM9B,CAAC"}