@memobit/libs 3.9.0 → 3.11.0

package/README.md

@@ -1,95 +1,96 @@
-# @memobit/libs
-
-A TypeScript-first React component library — 100+ components, 70+ themes, plus the hooks and helpers needed to glue them together. Built for, and battle-tested across, the [Memobit](https://memobit.ro) family of apps.
-
-**📚 Live documentation & component playground → [react.memobit.ro](https://react.memobit.ro/)**
-
----
-
-## Install
-
-```bash
-npm install @memobit/libs
-```
-
-Peer dependencies (you provide these in your own app):
-
-```bash
-npm install react@^19 react-dom@^19
-```
-
-## Quick start
-
-```tsx
-import { Button, Card, ToastProvider, useToast } from '@memobit/libs';
-import '@memobit/libs/dist/index.css';
-import '@memobit/libs/dist/styles/themes.scss'; // optional — only if you want the bundled themes
-
-function App() {
-  return (
-    <ToastProvider>
-      <Demo />
-    </ToastProvider>
-  );
-}
-
-function Demo() {
-  const { showToast } = useToast();
-  return (
-    <Card>
-      <Button onClick={() => showToast({ type: 'success', message: 'Hello' })}>
-        Click me
-      </Button>
-    </Card>
-  );
-}
-```
-
-## What's in the box
-
-- **Components** — Buttons, forms (Input/Select/Checkbox/DatePicker/ColorPicker/EmojiPicker/FileDropzone…), navigation (Breadcrumb/AppHeader/ControlPanel/Tabs…), overlays (Drawer/Modal/ConfirmDialog/ContextMenu/Tooltip…), data (DataView/Table/Calendar/CalendarHeatmap/Chart…), feedback (Toast/Banner/Badge/Chip/EmptyState…), and many more.
-- **Icons** — 470+ stroke icons, each tree-shakeable.
-- **Themes** — 70+ ready-made SCSS themes (Arctic Blue, Midnight Atlas, Terracotta Kitchen, Neon Tokyo, …). Theme tokens are pure CSS custom properties, so you can author your own.
-- **Hooks** — `useBreakpoint`, `useBodyScrollLock`, `useComponentEffect`, `useAppPersistence`, `useAuth`.
-- **Helpers** — date formatting, number formatting, string utilities, search/highlight, pagination, URL helpers.
-
-See the [component reference](https://react.memobit.ro/) for props, variants, and live examples.
-
-## Theming
-
-Themes ship as standalone SCSS files. Pick what you need:
-
-```scss
-// import everything
-@use '@memobit/libs/dist/styles/themes.scss';
-
-// or a single theme
-@use '@memobit/libs/dist/styles/theming/arctic-blue.scss';
-```
-
-All tokens — spacing, typography, radii, transitions, colors — are exposed as CSS custom properties (`--spacing-8`, `--card-bg`, `--button-primary-bg`, etc.) so you can override per-component or per-route without forking the library.
-
-Token reference:
-
-- Sizing / spacing / radii / transitions → `@memobit/libs/dist/styles/variables.scss`
-- Theme colors → `@memobit/libs/dist/styles/theming/*.scss`
-
-## Requirements
-
-- React **19.2+** and React DOM **19.2+** (peer deps)
-- ESM-only (your bundler must support ESM — Vite, Next.js 13+, Webpack 5, esbuild, Rollup all do)
-- For SCSS imports: a Sass-capable bundler
-
-## TypeScript
-
-Type definitions are bundled (`dist/index.d.ts`). No `@types/...` package required.
-
-## License
-
-[Apache 2.0](./LICENSE) © Iulian Cristea
-
-## Links
-
-- 📚 Docs & playground — https://react.memobit.ro/
-- 🐙 Source — https://github.com/CristeaIulian/memobit-react-library
-- 📦 npm — https://www.npmjs.com/package/@memobit/libs
+# @memobit/libs
+
+A TypeScript-first React component library — 100+ components, 70+ themes, plus the hooks and helpers needed to glue them together. Built for, and battle-tested across, the [Memobit](https://memobit.ro) family of apps.
+
+**📚 Live documentation & component playground → [react.memobit.ro](https://react.memobit.ro/)**
+
+---
+
+## Install
+
+```bash
+npm install @memobit/libs
+```
+
+Peer dependencies (you provide these in your own app):
+
+```bash
+npm install react@^19 react-dom@^19 @memobit/core
+```
+
+## Quick start
+
+```tsx
+import { Button, Card, ToastProvider, useToast } from '@memobit/libs';
+import '@memobit/libs/dist/index.css';
+import '@memobit/libs/dist/styles/themes.scss'; // optional — only if you want the bundled themes
+
+function App() {
+  return (
+    <ToastProvider>
+      <Demo />
+    </ToastProvider>
+  );
+}
+
+function Demo() {
+  const { showToast } = useToast();
+  return (
+    <Card>
+      <Button onClick={() => showToast({ type: 'success', message: 'Hello' })}>
+        Click me
+      </Button>
+    </Card>
+  );
+}
+```
+
+## What's in the box
+
+- **Components** — Buttons, forms (Input/Select/Checkbox/DatePicker/ColorPicker/EmojiPicker/FileDropzone…), navigation (Breadcrumb/AppHeader/ControlPanel/Tabs…), overlays (Drawer/Modal/ConfirmDialog/ContextMenu/Tooltip…), data (DataView/Table/Calendar/CalendarHeatmap/Chart…), feedback (Toast/Banner/Badge/Chip/EmptyState…), and many more.
+- **Icons** — 470+ stroke icons, each tree-shakeable.
+- **Themes** — 70+ ready-made SCSS themes (Arctic Blue, Midnight Atlas, Terracotta Kitchen, Neon Tokyo, …). Theme tokens are pure CSS custom properties, so you can author your own.
+- **Hooks** — `useBreakpoint`, `useBodyScrollLock`, `useComponentEffect`, `useAppPersistence`, `useAuth`.
+- **Helpers** — date formatting, number formatting, string utilities, search/highlight, pagination, URL helpers.
+- **Error reporting** — lives in [`@memobit/core`](https://www.npmjs.com/package/@memobit/core) (React-free, works in Node too), a peer dependency: `ErrorBoundary` crashes are reported through it once the app calls `installErrorReporting`.
+
+See the [component reference](https://react.memobit.ro/) for props, variants, and live examples.
+
+## Theming
+
+Themes ship as standalone SCSS files. Pick what you need:
+
+```scss
+// import everything
+@use '@memobit/libs/dist/styles/themes.scss';
+
+// or a single theme
+@use '@memobit/libs/dist/styles/theming/arctic-blue.scss';
+```
+
+All tokens — spacing, typography, radii, transitions, colors — are exposed as CSS custom properties (`--spacing-8`, `--card-bg`, `--button-primary-bg`, etc.) so you can override per-component or per-route without forking the library.
+
+Token reference:
+
+- Sizing / spacing / radii / transitions → `@memobit/libs/dist/styles/variables.scss`
+- Theme colors → `@memobit/libs/dist/styles/theming/*.scss`
+
+## Requirements
+
+- React **19.2+** and React DOM **19.2+** (peer deps)
+- ESM-only (your bundler must support ESM — Vite, Next.js 13+, Webpack 5, esbuild, Rollup all do)
+- For SCSS imports: a Sass-capable bundler
+
+## TypeScript
+
+Type definitions are bundled (`dist/index.d.ts`). No `@types/...` package required.
+
+## License
+
+[Apache 2.0](./LICENSE) © Iulian Cristea
+
+## Links
+
+- 📚 Docs & playground — https://react.memobit.ro/
+- 🐙 Source — https://github.com/CristeaIulian/memobit-react-library
+- 📦 npm — https://www.npmjs.com/package/@memobit/libs

package/dist/components/Confetti/Confetti2.js

@@ -1,8 +1,8 @@
 import './Confetti.css';
 /* empty css         */
 import { forwardRef as B, useCallback as E, useEffect as H, useImperativeHandle as L, useRef as v } from "react";
-import { jsx as O } from "react/jsx-runtime";
-var _ = [
+import { jsx as N } from "react/jsx-runtime";
+var O = [
   "#0891b2",
   "#06b6d4",
   "#16a34a",
@@ -11,7 +11,7 @@ var _ = [
   "#8b5cf6",
   "#ec4899",
   "#f97316"
-], j = (t) => {
+], _ = (t) => {
   if (t && t.length > 0) return t;
   const a = getComputedStyle(document.documentElement), s = [
     a.getPropertyValue("--body-accent-color").trim(),
@@ -25,7 +25,7 @@ var _ = [
     "#ec4899",
     "#f97316",
     "#06b6d4"
-  ] : _;
+  ] : O;
 }, I = () => {
   const t = Math.random();
   return t < 0.5 ? "rect" : t < 0.8 ? "circle" : "star";
@@ -40,7 +40,7 @@ var _ = [
   color: b(s),
   opacity: 1,
   shape: I()
-}), D = (t, a, s) => {
+}), j = (t, a, s) => {
   const o = Math.random() * Math.PI * 2, c = 3 + Math.random() * 10;
   return {
     x: t,
@@ -68,7 +68,7 @@ var _ = [
   trail: [],
   exploded: !1,
   children: []
-}), N = (t, a, s) => {
+}), D = (t, a, s) => {
   const o = Math.random() * Math.PI * 2, c = 1 + Math.random() * 5;
   return {
     x: t,
@@ -102,37 +102,37 @@ var _ = [
       U(t, 0, 0, a.size / 2);
   }
   t.restore();
-}, J = B(({ colors: t, duration: a = 3e3, scope: s = "fullscreen", variant: o = "confetti", particleCount: c }, P) => {
+}, W = B(({ colors: t, duration: a = 3e3, scope: s = "fullscreen", variant: o = "confetti", particleCount: c }, P) => {
   const h = v(null), f = v(0), d = v(0), M = v(!1), V = {
     confetti: 150,
     burst: 200,
     fireworks: 8
-  }, R = E(() => {
+  }, C = E(() => {
     M.current = !1, cancelAnimationFrame(f.current);
     const i = h.current;
     i && i.getContext("2d")?.clearRect(0, 0, i.width, i.height);
-  }, []), z = E(() => {
+  }, []), R = E(() => {
     const i = h.current;
     if (!i || M.current) return;
     const r = i.getContext("2d");
     if (!r) return;
     i.width = i.offsetWidth, i.height = i.offsetHeight;
-    const u = i.width, m = i.height, y = j(t), x = c ?? V[o];
+    const y = i.width, m = i.height, u = _(t), x = c ?? V[o];
     M.current = !0, d.current = performance.now();
     let l = [];
-    if (o === "confetti") l = Array.from({ length: x }, () => S(u, m, y));
+    if (o === "confetti") l = Array.from({ length: x }, () => S(y, m, u));
     else if (o === "burst") {
-      const k = u / 2, A = m / 2;
-      l = Array.from({ length: x }, () => D(k, A, y));
-    } else o === "fireworks" && (l = Array.from({ length: x }, () => F(u, m, y)));
-    const C = (k) => {
+      const k = y / 2, A = m / 2;
+      l = Array.from({ length: x }, () => j(k, A, u));
+    } else o === "fireworks" && (l = Array.from({ length: x }, () => F(y, m, u)));
+    const z = (k) => {
       if (!M.current) return;
       const A = k - d.current, g = Math.min(A / a, 1);
-      if (r.clearRect(0, 0, u, m), o === "confetti" ? (g < 0.6 && Math.random() < 0.3 && l.push(S(u, m, y)), l = l.filter((e) => e.opacity > 0 && e.y < m + 20), l.forEach((e) => {
+      if (r.clearRect(0, 0, y, m), o === "confetti" ? (g < 0.6 && Math.random() < 0.3 && l.push(S(y, m, u)), l = l.filter((e) => e.opacity > 0 && e.y < m + 20), l.forEach((e) => {
         e.x += e.vx, e.y += e.vy, e.vy += 0.08, e.vx += (Math.random() - 0.5) * 0.1, e.angle += e.spin, g > 0.6 && (e.opacity -= 0.015), w(r, e);
       })) : o === "burst" ? (l = l.filter((e) => e.opacity > 0), l.forEach((e) => {
         e.x += e.vx, e.y += e.vy, e.vy += 0.15, e.vx *= 0.98, e.angle += e.spin, e.opacity -= 0.012, w(r, e);
-      })) : o === "fireworks" && (g < 0.85 && Math.random() < 0.04 && l.push(F(u, m, y)), l = l.filter((e) => e.exploded ? e.children?.some((n) => n.opacity > 0) ?? !1 : e.y > -m * 0.1), l.forEach((e) => {
+      })) : o === "fireworks" && (g < 0.85 && Math.random() < 0.04 && l.push(F(y, m, u)), l = l.filter((e) => e.exploded ? e.children?.some((n) => n.opacity > 0) ?? !1 : e.y > -m * 0.1), l.forEach((e) => {
         if (e.exploded)
           e.children?.forEach((n) => {
             n.x += n.vx, n.y += n.vy, n.vy += 0.06, n.vx *= 0.97, n.angle += n.spin, n.opacity -= 0.014, w(r, n);
@@ -146,29 +146,30 @@ var _ = [
         }), r.save(), r.globalAlpha = 1, r.fillStyle = e.color, r.beginPath(), r.arc(e.x, e.y, 3, 0, Math.PI * 2), r.fill(), r.restore(), e.x += e.vx, e.y += e.vy, e.vy += 0.18, e.vy >= 0) {
           e.exploded = !0;
           const n = 60 + Math.floor(Math.random() * 40);
-          e.children = Array.from({ length: n }, () => N(e.x, e.y, y)), r.save(), r.globalAlpha = 0.8, r.fillStyle = "#ffffff", r.beginPath(), r.arc(e.x, e.y, 12, 0, Math.PI * 2), r.fill(), r.restore();
+          e.children = Array.from({ length: n }, () => D(e.x, e.y, u)), r.save(), r.globalAlpha = 0.8, r.fillStyle = "#ffffff", r.beginPath(), r.arc(e.x, e.y, 12, 0, Math.PI * 2), r.fill(), r.restore();
         }
       })), g >= 1 || l.length === 0) {
-        R();
+        C();
         return;
       }
-      f.current = requestAnimationFrame(C);
+      f.current = requestAnimationFrame(z);
     };
-    f.current = requestAnimationFrame(C);
+    f.current = requestAnimationFrame(z);
   }, [
     t,
     a,
     o,
     c,
-    R
+    C
   ]);
-  return L(P, () => ({ trigger: z }), [z]), H(() => () => {
+  return L(P, () => ({ trigger: R }), [R]), H(() => () => {
     cancelAnimationFrame(f.current);
-  }, []), /* @__PURE__ */ O("canvas", {
+  }, []), /* @__PURE__ */ N("canvas", {
     ref: h,
     className: `confetti-canvas confetti-canvas--${s}`
   });
 });
+W.displayName = "Confetti";
 export {
-  J as Confetti
+  W as Confetti
 };

package/dist/components/ErrorBoundary/ErrorBoundary2.js

@@ -1,9 +1,10 @@
 import './ErrorBoundary.css';
-import { EmptyState as i } from "../EmptyState/EmptyState2.js";
+import { EmptyState as s } from "../EmptyState/EmptyState2.js";
 /* empty css              */
 import { Component as a } from "react";
 import { jsx as o } from "react/jsx-runtime";
-var u = class extends a {
+import { reportError as c } from "@memobit/core";
+var h = class extends a {
   constructor(...r) {
     super(...r), this.state = { error: null }, this.reset = () => {
       this.setState({ error: null });
@@ -13,18 +14,18 @@ var u = class extends a {
     return { error: r };
   }
   componentDidCatch(r, t) {
-    console.error("ErrorBoundary caught:", r, t.componentStack), this.props.onError?.(r, t);
+    c(r, { componentStack: t.componentStack ?? void 0 }), console.error("ErrorBoundary caught:", r, t.componentStack), this.props.onError?.(r, t);
   }
   render() {
-    const { error: r } = this.state, { children: t, title: n, resetLabel: s, fallback: e } = this.props;
+    const { error: r } = this.state, { children: t, title: n, resetLabel: i, fallback: e } = this.props;
     return r ? e ? e(r, this.reset) : /* @__PURE__ */ o("div", {
       className: "error-boundary",
-      children: /* @__PURE__ */ o(i, {
+      children: /* @__PURE__ */ o(s, {
         icon: "warning",
         title: n ?? "Something went wrong",
         description: r.message || "An unexpected error occurred.",
         primary: {
-          text: s ?? "Try again",
+          text: i ?? "Try again",
           variant: "info",
           onClick: this.reset
         }
@@ -33,5 +34,5 @@ var u = class extends a {
   }
 };
 export {
-  u as ErrorBoundary
+  h as ErrorBoundary
 };

package/dist/components/InputDate/InputDate2.js

@@ -2,17 +2,17 @@ import './InputDate.css';
 import { Icon as f } from "../Icon/Icon2.js";
 import { Tooltip as N } from "../Tooltip/Tooltip2.js";
 /* empty css          */
-import { forwardRef as j, useRef as z } from "react";
+import { forwardRef as j, useRef as y } from "react";
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
-var E = j(({ autoComplete: v = "on", autoFocus: k, clearable: b, disabled: a, error: c, highlighted: g, id: l, label: o, max: R, min: w, onBlur: x, onChange: p, onClick: C, onKeyDown: $, onKeyUp: I, readOnly: n = !1, required: d = !1, success: r, type: P = "date", value: u }, i) => {
-  const m = b && u && !a && !n, h = z(null);
+var z = j(({ autoComplete: v = "on", autoFocus: k, clearable: b, disabled: a, error: c, highlighted: g, id: r, label: p, max: R, min: w, onBlur: x, onChange: o, onClick: C, onKeyDown: I, onKeyUp: $, readOnly: n = !1, required: d = !1, success: l, type: P = "date", value: u }, i) => {
+  const m = b && u && !a && !n, h = y(null);
   return /* @__PURE__ */ s("div", {
     className: `input-date-wrapper${g ? " input-date-highlighted" : ""}`,
     children: [
-      o && /* @__PURE__ */ s("label", {
-        htmlFor: l,
+      p && /* @__PURE__ */ s("label", {
+        htmlFor: r,
         className: "input-date-label",
-        children: [o, d && /* @__PURE__ */ e("span", {
+        children: [p, d && /* @__PURE__ */ e("span", {
           className: "input-date-required",
           children: "*"
         })]
@@ -24,8 +24,8 @@ var E = j(({ autoComplete: v = "on", autoFocus: k, clearable: b, disabled: a, er
           autoFocus: k,
           disabled: a,
           type: P === "date" ? "date" : "datetime-local",
-          className: `input-date${c ? " input-date-error" : ""}${r ? " input-date-success" : ""}${m ? " input-date--clearable" : ""}`,
-          id: l,
+          className: `input-date${c ? " input-date-error" : ""}${l ? " input-date-success" : ""}${m ? " input-date--clearable" : ""}`,
+          id: r,
           max: R,
           min: w,
           ref: (t) => {
@@ -33,10 +33,10 @@ var E = j(({ autoComplete: v = "on", autoFocus: k, clearable: b, disabled: a, er
           },
           value: u ?? "",
           onBlur: x,
-          onChange: (t) => p?.(t.target.value || void 0),
+          onChange: (t) => o?.(t.target.value || void 0),
           onClick: C,
-          onKeyDown: $,
-          onKeyUp: I,
+          onKeyDown: I,
+          onKeyUp: $,
           readOnly: n,
           required: d
         }), /* @__PURE__ */ s("div", {
@@ -46,7 +46,7 @@ var E = j(({ autoComplete: v = "on", autoFocus: k, clearable: b, disabled: a, er
             children: /* @__PURE__ */ e("button", {
               type: "button",
               className: "input-date-clear",
-              onClick: () => p?.(void 0),
+              onClick: () => o?.(void 0),
               children: /* @__PURE__ */ e(f, {
                 name: "clear",
                 size: "sm"
@@ -75,13 +75,14 @@ var E = j(({ autoComplete: v = "on", autoFocus: k, clearable: b, disabled: a, er
         className: "input-date-error-message",
         children: c
       }),
-      r && /* @__PURE__ */ e("span", {
+      l && /* @__PURE__ */ e("span", {
         className: "input-date-success-message",
-        children: r
+        children: l
       })
     ]
   });
 });
+z.displayName = "InputDate";
 export {
-  E as InputDate
+  z as InputDate
 };

package/dist/components/InputEmail/InputEmail2.js

@@ -2,27 +2,27 @@ import './InputEmail.css';
 /* empty css           */
 import { forwardRef as F, useEffect as G, useState as N } from "react";
 import { jsx as n, jsxs as b } from "react/jsx-runtime";
-var L = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, M = (r) => !r || r.trim() === "" ? !0 : L.test(r.trim()), k = F(({ autoComplete: r = "on", autoFocus: A, disabled: I, error: $ = "Please enter a valid email address", highlighted: v, id: o, label: p, maxLength: x, onBlur: z, onChange: Z, onClick: j, onKeyDown: B, onKeyUp: C, onValidate: s, placeholder: R, readOnly: T = !1, required: a = !1, showValidation: h = !1, success: m, validateOn: i = "blur", value: l }, _) => {
-  const [f, u] = N(!0), [d, g] = N(!1), c = (e) => a && (!e || e.trim() === "") ? !1 : !e || e.trim() === "" ? !0 : M(e);
+var L = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, M = (r) => !r || r.trim() === "" ? !0 : L.test(r.trim()), P = F(({ autoComplete: r = "on", autoFocus: I, disabled: A, error: $ = "Please enter a valid email address", highlighted: v, id: o, label: p, maxLength: x, onBlur: z, onChange: Z, onClick: j, onKeyDown: y, onKeyUp: B, onValidate: a, placeholder: C, readOnly: R = !1, required: s = !1, showValidation: h = !1, success: m, validateOn: i = "blur", value: l }, T) => {
+  const [f, u] = N(!0), [d, g] = N(!1), c = (e) => s && (!e || e.trim() === "") ? !1 : !e || e.trim() === "" ? !0 : M(e);
   G(() => {
     if (l !== void 0) {
       const e = c(l);
-      u(e), s?.(e);
+      u(e), a?.(e);
     }
   }, [
     l,
-    s,
-    a
+    a,
+    s
   ]);
-  const w = (e) => {
+  const _ = (e) => {
     if (Z?.(e), i === "change" || i === "both") {
       const t = c(e);
-      u(t), g(!0), s?.(t);
+      u(t), g(!0), a?.(t);
     }
-  }, y = (e) => {
+  }, w = (e) => {
     if (g(!0), i === "blur" || i === "both") {
       const t = c(e.target.value);
-      u(t), s?.(t);
+      u(t), a?.(t);
     }
     z?.(e);
   }, E = h && d && !f;
@@ -32,29 +32,29 @@ var L = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, M = (r) => !r || r.t
       p && /* @__PURE__ */ b("label", {
         htmlFor: o,
         className: "input-email-label",
-        children: [p, a && /* @__PURE__ */ n("span", {
+        children: [p, s && /* @__PURE__ */ n("span", {
           className: "input-email-required",
           children: "*"
         })]
       }),
       /* @__PURE__ */ n("input", {
         autoComplete: r,
-        autoFocus: A,
-        disabled: I,
+        autoFocus: I,
+        disabled: A,
         type: "email",
         className: `input-email${E ? " input-email--error" : ""}${m ? " input-email-success" : f && d && h ? " input-email--valid" : ""}`,
         id: o,
         maxLength: x,
-        placeholder: R,
-        ref: _,
+        placeholder: C,
+        ref: T,
         value: l,
-        onBlur: y,
-        onChange: (e) => w(e.target.value),
+        onBlur: w,
+        onChange: (e) => _(e.target.value),
         onClick: j,
-        onKeyDown: B,
-        onKeyUp: C,
-        readOnly: T,
-        required: a
+        onKeyDown: y,
+        onKeyUp: B,
+        readOnly: R,
+        required: s
       }),
       E && /* @__PURE__ */ n("span", {
         className: "input-email-error-message",
@@ -67,7 +67,8 @@ var L = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, M = (r) => !r || r.t
     ]
   });
 });
+P.displayName = "InputEmail";
 export {
-  k as InputEmail,
+  P as InputEmail,
   M as validateEmail
 };

package/dist/components/InputFile/InputFile2.js

@@ -1,8 +1,8 @@
 import './InputFile.css';
 /* empty css          */
-import { forwardRef as N } from "react";
+import { forwardRef as g } from "react";
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
-var v = N(({ accept: r, disabled: p, error: i, highlighted: t, id: a, label: s, onChange: f, onClick: m, onKeyDown: u, placeholder: c, required: h, success: l, value: o }, d) => /* @__PURE__ */ n("div", {
+var x = g(({ accept: p, disabled: r, error: i, highlighted: t, id: a, label: s, onChange: f, onClick: m, onKeyDown: u, placeholder: c, required: h, success: l, value: d }, o) => /* @__PURE__ */ n("div", {
   className: `input-file-wrapper${t ? " input-file-highlighted" : ""}`,
   children: [
     s && /* @__PURE__ */ n("label", {
@@ -14,15 +14,15 @@ var v = N(({ accept: r, disabled: p, error: i, highlighted: t, id: a, label: s,
       })]
     }),
     /* @__PURE__ */ e("input", {
-      accept: r,
-      disabled: p,
+      accept: p,
+      disabled: r,
       type: "file",
       className: `input-file${i ? " input-file-error" : ""}${l ? " input-file-success" : ""}`,
       id: a,
       placeholder: c,
-      ref: d,
-      value: o,
-      onChange: (g) => f?.(g.target.files),
+      ref: o,
+      value: d,
+      onChange: (N) => f?.(N.target.files),
       onClick: m,
       onKeyDown: u
     }),
@@ -36,6 +36,7 @@ var v = N(({ accept: r, disabled: p, error: i, highlighted: t, id: a, label: s,
     })
   ]
 }));
+x.displayName = "InputFile";
 export {
-  v as InputFile
+  x as InputFile
 };

package/dist/components/InputNumber/InputNumber2.js

@@ -2,7 +2,7 @@ import './InputNumber.css';
 /* empty css            */
 import { forwardRef as V } from "react";
 import { jsx as i, jsxs as o } from "react/jsx-runtime";
-var E = V(({ autoComplete: c = "on", autoFocus: d, disabled: b, error: a, hideNativeControls: h, highlighted: f, id: p, label: s, onChange: m, onClick: v, onKeyDown: N, required: g, success: l, value: n, min: u, max: t, placeholder: y, step: $ }, w) => {
+var j = V(({ autoComplete: d = "on", autoFocus: c, disabled: b, error: a, hideNativeControls: h, highlighted: f, id: p, label: s, onChange: m, onClick: N, onKeyDown: v, required: g, success: l, value: n, min: u, max: t, placeholder: y, step: $ }, w) => {
   const B = (e) => {
     if (e === void 0) return;
     let r = e;
@@ -20,8 +20,8 @@ var E = V(({ autoComplete: c = "on", autoFocus: d, disabled: b, error: a, hideNa
         })]
       }),
       /* @__PURE__ */ i("input", {
-        autoComplete: c,
-        autoFocus: d,
+        autoComplete: d,
+        autoFocus: c,
         disabled: b,
         className: `input-number${a ? " input-number-error" : ""}${l ? " input-number-success" : ""}${h ? " input-number-hide-native-controls" : ""}`,
         id: p,
@@ -34,9 +34,9 @@ var E = V(({ autoComplete: c = "on", autoFocus: d, disabled: b, error: a, hideNa
           }
         },
         onChange: (e) => m?.(e.target.value ? Number(e.target.value) : void 0),
-        onClick: v,
+        onClick: N,
         onKeyDown: (e) => {
-          (e.key === "e" || e.key === "E") && e.preventDefault(), N?.(e);
+          (e.key === "e" || e.key === "E") && e.preventDefault(), v?.(e);
         },
         placeholder: y,
         ref: w,
@@ -55,6 +55,7 @@ var E = V(({ autoComplete: c = "on", autoFocus: d, disabled: b, error: a, hideNa
     ]
   });
 });
+j.displayName = "InputNumber";
 export {
-  E as InputNumber
+  j as InputNumber
 };

package/dist/components/InputPassword/InputPassword2.js

@@ -2,7 +2,7 @@ import './InputPassword.css';
 /* empty css              */
 import { forwardRef as j } from "react";
 import { jsx as s, jsxs as o } from "react/jsx-runtime";
-var F = j(({ autoComplete: t = "on", autoFocus: i, disabled: d, error: a, highlighted: l, id: r, label: e, maxLength: m, onBlur: u, onChange: w, onClick: c, onKeyDown: h, onKeyUp: f, placeholder: g, readOnly: N = !1, required: n = !1, success: p, value: v }, x) => /* @__PURE__ */ o("div", {
+var y = j(({ autoComplete: t = "on", autoFocus: i, disabled: d, error: a, highlighted: l, id: r, label: e, maxLength: m, onBlur: u, onChange: w, onClick: c, onKeyDown: h, onKeyUp: N, placeholder: f, readOnly: g = !1, required: n = !1, success: p, value: v }, x) => /* @__PURE__ */ o("div", {
   className: `input-password-wrapper${l ? " input-password-highlighted" : ""}`,
   children: [
     e && /* @__PURE__ */ o("label", {
@@ -21,15 +21,15 @@ var F = j(({ autoComplete: t = "on", autoFocus: i, disabled: d, error: a, highli
       className: `input-password${a ? " input-password-error" : ""}${p ? " input-password-success" : ""}`,
       id: r,
       maxLength: m,
-      placeholder: g,
+      placeholder: f,
       ref: x,
       value: v,
       onBlur: u,
       onChange: ($) => w?.($.target.value),
       onClick: c,
       onKeyDown: h,
-      onKeyUp: f,
-      readOnly: N,
+      onKeyUp: N,
+      readOnly: g,
       required: n
     }),
     a && /* @__PURE__ */ s("span", {
@@ -42,6 +42,7 @@ var F = j(({ autoComplete: t = "on", autoFocus: i, disabled: d, error: a, highli
     })
   ]
 }));
+y.displayName = "InputPassword";
 export {
-  F as InputPassword
+  y as InputPassword
 };

package/dist/components/InputSearch/InputSearch2.js

@@ -1,22 +1,22 @@
 import './InputSearch.css';
-import { Icon as a } from "../Icon/Icon2.js";
-import { Tooltip as N } from "../Tooltip/Tooltip2.js";
-import { InputText as j } from "../InputText/InputText2.js";
+import { Icon as c } from "../Icon/Icon2.js";
+import { Tooltip as C } from "../Tooltip/Tooltip2.js";
+import { InputText as S } from "../InputText/InputText2.js";
 /* empty css            */
-import { forwardRef as w } from "react";
-import { jsx as r, jsxs as S } from "react/jsx-runtime";
-var R = w(({ autoComplete: s = "off", autoFocus: i, disabled: t, id: n, label: m, onBlur: l, onChange: o, onClick: p, onKeyDown: h, onKeyUp: f, placeholder: u = "Search...", readOnly: c = !1, required: d = !1, value: e, className: x = "" }, _) => {
-  const C = () => {
+import { forwardRef as j } from "react";
+import { jsx as r, jsxs as w } from "react/jsx-runtime";
+var T = j(({ autoComplete: s = "off", autoFocus: i, disabled: t, id: n, label: m, onBlur: l, onChange: o, onClick: p, onKeyDown: h, onKeyUp: f, placeholder: u = "Search...", readOnly: a = !1, required: d = !1, value: e, className: x = "" }, I) => {
+  const N = () => {
     o?.("");
-  }, I = e && e.length > 0 && !t && !c;
-  return /* @__PURE__ */ S("div", {
+  }, _ = e && e.length > 0 && !t && !a;
+  return /* @__PURE__ */ w("div", {
     className: `input-search ${x}`,
     children: [
       /* @__PURE__ */ r("div", {
         className: "input-search__icon",
-        children: /* @__PURE__ */ r(a, { name: "search" })
+        children: /* @__PURE__ */ r(c, { name: "search" })
       }),
-      /* @__PURE__ */ r(j, {
+      /* @__PURE__ */ r(S, {
         autoComplete: s,
         autoFocus: i,
         disabled: t,
@@ -28,18 +28,18 @@ var R = w(({ autoComplete: s = "off", autoFocus: i, disabled: t, id: n, label: m
         onKeyDown: h,
         onKeyUp: f,
         placeholder: u,
-        readOnly: c,
+        readOnly: a,
         required: d,
         value: e,
-        ref: _
+        ref: I
       }),
-      I && /* @__PURE__ */ r(N, {
+      _ && /* @__PURE__ */ r(C, {
         title: "Clear search",
         children: /* @__PURE__ */ r("button", {
           type: "button",
           className: "input-search__clear",
-          onClick: C,
-          children: /* @__PURE__ */ r(a, {
+          onClick: N,
+          children: /* @__PURE__ */ r(c, {
             name: "clear",
             size: "sm"
           })
@@ -48,6 +48,7 @@ var R = w(({ autoComplete: s = "off", autoFocus: i, disabled: t, id: n, label: m
     ]
   });
 });
+T.displayName = "InputSearch";
 export {
-  R as InputSearch
+  T as InputSearch
 };

package/dist/components/InputText/InputText2.js

@@ -2,7 +2,7 @@ import './InputText.css';
 /* empty css          */
 import { forwardRef as w } from "react";
 import { jsx as t, jsxs as i } from "react/jsx-runtime";
-var F = w(({ autoComplete: r = "on", autoFocus: l, disabled: m, error: e, highlighted: x, id: s, label: n, maxLength: u, onBlur: c, onChange: h, onClick: o, onKeyDown: d, onKeyUp: f, placeholder: g, readOnly: N = !1, required: p = !1, success: a, value: v }, $) => /* @__PURE__ */ i("div", {
+var y = w(({ autoComplete: r = "on", autoFocus: l, disabled: m, error: e, highlighted: x, id: s, label: n, maxLength: u, onBlur: c, onChange: h, onClick: o, onKeyDown: d, onKeyUp: N, placeholder: f, readOnly: g = !1, required: p = !1, success: a, value: v }, $) => /* @__PURE__ */ i("div", {
   className: `input-text-wrapper${x ? " input-text-highlighted" : ""}`,
   children: [
     n && /* @__PURE__ */ i("label", {
@@ -21,15 +21,15 @@ var F = w(({ autoComplete: r = "on", autoFocus: l, disabled: m, error: e, highli
       className: `input-text ${e ? "input-text-error" : ""} ${a ? "input-text-success" : ""}`,
       id: s,
       maxLength: u,
-      placeholder: g,
+      placeholder: f,
       ref: $,
       value: v,
       onBlur: c,
       onChange: (j) => h?.(j.target.value),
       onClick: o,
       onKeyDown: d,
-      onKeyUp: f,
-      readOnly: N,
+      onKeyUp: N,
+      readOnly: g,
       required: p
     }),
     e && /* @__PURE__ */ t("span", {
@@ -42,6 +42,7 @@ var F = w(({ autoComplete: r = "on", autoFocus: l, disabled: m, error: e, highli
     })
   ]
 }));
+y.displayName = "InputText";
 export {
-  F as InputText
+  y as InputText
 };

package/dist/components/InputTextarea/InputTextarea2.js

@@ -1,22 +1,22 @@
 import './InputTextarea.css';
 /* empty css              */
-import { forwardRef as $ } from "react";
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
-var F = $(({ autoComplete: p = "on", autoFocus: i, cols: l, disabled: m, error: a, id: r, label: s, maxLength: x, onBlur: u, onChange: c, onClick: o, onKeyDown: d, onKeyUp: h, placeholder: N, required: f, rows: g, success: t, value: v }, j) => /* @__PURE__ */ n("div", {
+import { forwardRef as I } from "react";
+import { jsx as a, jsxs as n } from "react/jsx-runtime";
+var T = I(({ autoComplete: p = "on", autoFocus: i, cols: l, disabled: m, error: e, id: r, label: s, maxLength: x, onBlur: u, onChange: c, onClick: o, onKeyDown: d, onKeyUp: h, placeholder: N, required: f, rows: g, success: t, value: v }, j) => /* @__PURE__ */ n("div", {
   className: "input-textarea-wrapper",
   children: [
     s && /* @__PURE__ */ n("label", {
       htmlFor: r,
       className: "input-textarea-label",
-      children: [s, f && /* @__PURE__ */ e("span", {
+      children: [s, f && /* @__PURE__ */ a("span", {
         className: "input-textarea-required",
         children: "*"
       })]
     }),
-    /* @__PURE__ */ e("textarea", {
+    /* @__PURE__ */ a("textarea", {
       autoComplete: p,
       autoFocus: i,
-      className: `input-textarea${a ? " input-textarea-error" : ""}${t ? " input-textarea-success" : ""}`,
+      className: `input-textarea${e ? " input-textarea-error" : ""}${t ? " input-textarea-success" : ""}`,
       cols: l,
       disabled: m,
       id: r,
@@ -31,16 +31,17 @@ var F = $(({ autoComplete: p = "on", autoFocus: i, cols: l, disabled: m, error:
       rows: g,
       value: v
     }),
-    a && /* @__PURE__ */ e("span", {
+    e && /* @__PURE__ */ a("span", {
       className: "input-textarea-error-message",
-      children: a
+      children: e
     }),
-    t && /* @__PURE__ */ e("span", {
+    t && /* @__PURE__ */ a("span", {
       className: "input-textarea-success-message",
       children: t
     })
   ]
 }));
+T.displayName = "InputTextarea";
 export {
-  F as InputTextarea
+  T as InputTextarea
 };

package/dist/components/InputTime/InputTime2.js

@@ -1,85 +1,86 @@
 import './InputTime.css';
-import { Icon as S } from "../Icon/Icon2.js";
-import { Popover as T } from "../Popover/Popover2.js";
+import { Icon as R } from "../Icon/Icon2.js";
+import { Popover as S } from "../Popover/Popover2.js";
 import { TimePicker as j } from "../TimePicker/TimePicker2.js";
 /* empty css          */
 import { forwardRef as w, useRef as y, useState as E } from "react";
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-var v = (i) => i.toString().padStart(2, "0"), O = (i) => {
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+var b = (i) => i.toString().padStart(2, "0"), O = (i) => {
   const [n, t] = (i ?? "").split(":").map(Number);
   return {
     hours: Number.isFinite(n) ? n : 0,
     minutes: Number.isFinite(t) ? t : 0,
     seconds: 0
   };
-}, H = w(({ autoFocus: i, disabled: n, error: t, highlighted: N, id: o, label: c, max: k, min: g, minuteStep: C = 1, onBlur: $, onChange: p, onClick: x, onKeyDown: F, onKeyUp: I, readOnly: u = !1, required: f = !1, success: l, value: h, withClock: a = !1 }, P) => {
-  const [r, d] = E(!1), b = y(null), R = (s) => {
-    p?.(`${v(s.hours)}:${v(s.minutes)}`);
+}, q = w(({ autoFocus: i, disabled: n, error: t, highlighted: v, id: o, label: c, max: k, min: g, minuteStep: C = 1, onBlur: $, onChange: p, onClick: I, onKeyDown: T, onKeyUp: x, readOnly: u = !1, required: d = !1, success: a, value: f, withClock: l = !1 }, F) => {
+  const [m, h] = E(!1), N = y(null), P = (s) => {
+    p?.(`${b(s.hours)}:${b(s.minutes)}`);
   };
-  return /* @__PURE__ */ m("div", {
-    className: `input-time-wrapper${N ? " input-time-highlighted" : ""}`,
+  return /* @__PURE__ */ r("div", {
+    className: `input-time-wrapper${v ? " input-time-highlighted" : ""}`,
     children: [
-      c && /* @__PURE__ */ m("label", {
+      c && /* @__PURE__ */ r("label", {
         htmlFor: o,
         className: "input-time-label",
-        children: [c, f && /* @__PURE__ */ e("span", {
+        children: [c, d && /* @__PURE__ */ e("span", {
           className: "input-time-required",
           children: "*"
         })]
       }),
-      /* @__PURE__ */ m("div", {
-        ref: b,
-        className: `input-time-field${a ? " input-time-field--with-clock" : ""}`,
+      /* @__PURE__ */ r("div", {
+        ref: N,
+        className: `input-time-field${l ? " input-time-field--with-clock" : ""}`,
         children: [/* @__PURE__ */ e("input", {
           autoFocus: i,
           disabled: n,
           type: "time",
-          className: `input-time${t ? " input-time-error" : ""}${l ? " input-time-success" : ""}`,
+          className: `input-time${t ? " input-time-error" : ""}${a ? " input-time-success" : ""}`,
           id: o,
           max: k,
           min: g,
-          ref: P,
-          value: h ?? "",
+          ref: F,
+          value: f ?? "",
           onBlur: $,
           onChange: (s) => p?.(s.target.value || void 0),
-          onClick: x,
-          onKeyDown: F,
-          onKeyUp: I,
+          onClick: I,
+          onKeyDown: T,
+          onKeyUp: x,
           readOnly: u,
-          required: f
-        }), a && /* @__PURE__ */ e("button", {
-          className: `input-time-clock-button${r ? " input-time-clock-button--active" : ""}`,
+          required: d
+        }), l && /* @__PURE__ */ e("button", {
+          className: `input-time-clock-button${m ? " input-time-clock-button--active" : ""}`,
           disabled: n || u,
-          onClick: () => d(!r),
+          onClick: () => h(!m),
           title: "Pick on a clock",
           type: "button",
-          children: /* @__PURE__ */ e(S, { name: "time" })
+          children: /* @__PURE__ */ e(R, { name: "time" })
         })]
       }),
       t && /* @__PURE__ */ e("span", {
         className: "input-time-error-message",
         children: t
       }),
-      l && /* @__PURE__ */ e("span", {
+      a && /* @__PURE__ */ e("span", {
         className: "input-time-success-message",
-        children: l
+        children: a
       }),
-      a && /* @__PURE__ */ e(T, {
-        visible: r,
-        onClose: () => d(!1),
-        anchorEl: b.current,
+      l && /* @__PURE__ */ e(S, {
+        visible: m,
+        onClose: () => h(!1),
+        anchorEl: N.current,
         children: /* @__PURE__ */ e(j, {
           collapsibleClock: !1,
           label: "",
           minuteStep: C,
-          onChange: R,
-          value: O(h),
+          onChange: P,
+          value: O(f),
           withClock: !0
         })
       })
     ]
   });
 });
+q.displayName = "InputTime";
 export {
-  H as InputTime
+  q as InputTime
 };

package/dist/components/InputUrl/InputUrl2.js

@@ -1,23 +1,23 @@
 import './InputUrl.css';
 /* empty css         */
-import { forwardRef as A, useState as B } from "react";
+import { forwardRef as j, useState as A } from "react";
 import { jsx as t, jsxs as m } from "react/jsx-runtime";
-var F = "Please enter a valid URL (e.g. https://example.com)", I = (l) => {
+var B = "Please enter a valid URL (e.g. https://example.com)", F = (l) => {
   try {
     const e = new URL(l);
     return e.protocol === "http:" || e.protocol === "https:";
   } catch {
     return !1;
   }
-}, G = A(({ autoFocus: l, disabled: e, error: f, highlighted: v, id: u, label: i, maxLength: g, onBlur: E, onChange: R, onClick: N, onKeyDown: U, onKeyUp: x, onValidationChange: o, placeholder: L = "https://...", readOnly: w = !1, required: p = !1, success: a, validationErrorMessage: y, value: S }, _) => {
-  const [c, d] = B(void 0), h = (r) => {
+}, b = j(({ autoFocus: l, disabled: e, error: f, highlighted: v, id: u, label: i, maxLength: g, onBlur: E, onChange: N, onClick: R, onKeyDown: U, onKeyUp: x, onValidationChange: p, placeholder: y = "https://...", readOnly: L = !1, required: o = !1, success: a, validationErrorMessage: w, value: I }, S) => {
+  const [c, d] = A(void 0), h = (r) => {
     if (!r)
-      return d(void 0), o?.(!0), !0;
-    const n = I(r);
-    return d(n ? void 0 : y ?? F), o?.(n), n;
+      return d(void 0), p?.(!0), !0;
+    const n = F(r);
+    return d(n ? void 0 : w ?? B), p?.(n), n;
+  }, _ = (r) => {
+    N?.(r), c && h(r);
   }, $ = (r) => {
-    R?.(r), c && h(r);
-  }, j = (r) => {
     h(r.target.value), E?.(r);
   }, s = f ?? c;
   return /* @__PURE__ */ m("div", {
@@ -26,7 +26,7 @@ var F = "Please enter a valid URL (e.g. https://example.com)", I = (l) => {
       i && /* @__PURE__ */ m("label", {
         htmlFor: u,
         className: "input-url-label",
-        children: [i, p && /* @__PURE__ */ t("span", {
+        children: [i, o && /* @__PURE__ */ t("span", {
           className: "input-url-required",
           children: "*"
         })]
@@ -38,16 +38,16 @@ var F = "Please enter a valid URL (e.g. https://example.com)", I = (l) => {
         className: `input-url${s ? " input-url-error" : ""}${a ? " input-url-success" : ""}`,
         id: u,
         maxLength: g,
-        placeholder: L,
-        ref: _,
-        value: S,
-        onBlur: j,
-        onChange: (r) => $(r.target.value),
-        onClick: N,
+        placeholder: y,
+        ref: S,
+        value: I,
+        onBlur: $,
+        onChange: (r) => _(r.target.value),
+        onClick: R,
         onKeyDown: U,
         onKeyUp: x,
-        readOnly: w,
-        required: p
+        readOnly: L,
+        required: o
       }),
       s && /* @__PURE__ */ t("span", {
         className: "input-url-error-message",
@@ -60,6 +60,7 @@ var F = "Please enter a valid URL (e.g. https://example.com)", I = (l) => {
     ]
   });
 });
+b.displayName = "InputUrl";
 export {
-  G as InputUrl
+  b as InputUrl
 };

package/dist/components/QuantitySelector/QuantitySelector2.js

@@ -1,20 +1,20 @@
 import './QuantitySelector.css';
-import { Button as h } from "../Button/Button2.js";
+import { Button as q } from "../Button/Button2.js";
 import { InputNumber as I } from "../InputNumber/InputNumber2.js";
 /* empty css                 */
 import { forwardRef as S } from "react";
 import { jsx as s, jsxs as u } from "react/jsx-runtime";
-var D = S(({ disabled: n = !1, error: l, id: d, inputWidth: f, label: y, max: t, min: r = 0, onChange: i, readOnlyInput: q = !1, required: p = !1, step: o = 1, success: a, value: c }, v) => {
+var $ = S(({ disabled: n = !1, error: c, id: d, inputWidth: f, label: y, max: t, min: r = 0, onChange: i, readOnlyInput: p = !1, required: h = !1, step: a = 1, success: o, value: l }, v) => {
   const N = f || (t !== void 0 ? Math.max(String(t).length, String(r).length, 3) : 3), m = () => {
     if (n) return;
-    const e = (c ?? 0) - o;
+    const e = (l ?? 0) - a;
     r !== void 0 && e < r || i?.(e);
   }, b = () => {
     if (n) return;
-    const e = (c ?? 0) + o;
+    const e = (l ?? 0) + a;
     t !== void 0 && e > t || i?.(e);
   }, g = (e) => {
-    if (!q) {
+    if (!p) {
       if (e === void 0) {
         i?.(void 0);
         return;
@@ -36,18 +36,18 @@ var D = S(({ disabled: n = !1, error: l, id: d, inputWidth: f, label: y, max: t,
       y && /* @__PURE__ */ u("label", {
         htmlFor: d,
         className: "quantity-selector-label",
-        children: [y, p && /* @__PURE__ */ s("span", {
+        children: [y, h && /* @__PURE__ */ s("span", {
           className: "quantity-selector-required",
           children: "*"
         })]
       }),
       /* @__PURE__ */ u("div", {
-        className: `quantity-selector${q ? " quantity-selector-readonly" : ""}${l ? " quantity-selector-error" : ""}${a ? " quantity-selector-success" : ""}`,
+        className: `quantity-selector${p ? " quantity-selector-readonly" : ""}${c ? " quantity-selector-error" : ""}${o ? " quantity-selector-success" : ""}`,
         style: { "--digits": N },
         children: [
-          /* @__PURE__ */ s(h, {
+          /* @__PURE__ */ s(q, {
             className: "quantity-selector-button quantity-selector-button-decrease",
-            disabled: n || r !== void 0 && (c ?? 0) <= r,
+            disabled: n || r !== void 0 && (l ?? 0) <= r,
             onClick: m,
             size: "small",
             variant: "default",
@@ -63,13 +63,13 @@ var D = S(({ disabled: n = !1, error: l, id: d, inputWidth: f, label: y, max: t,
               min: r,
               onChange: g,
               ref: v,
-              step: o,
-              value: c
+              step: a,
+              value: l
             })
           }),
-          /* @__PURE__ */ s(h, {
+          /* @__PURE__ */ s(q, {
             className: "quantity-selector-button quantity-selector-button-increase",
-            disabled: n || t !== void 0 && (c ?? 0) >= t,
+            disabled: n || t !== void 0 && (l ?? 0) >= t,
             onClick: b,
             size: "small",
             variant: "default",
@@ -78,17 +78,18 @@ var D = S(({ disabled: n = !1, error: l, id: d, inputWidth: f, label: y, max: t,
           })
         ]
       }),
-      l && /* @__PURE__ */ s("span", {
+      c && /* @__PURE__ */ s("span", {
         className: "quantity-selector-error-message",
-        children: l
+        children: c
       }),
-      a && /* @__PURE__ */ s("span", {
+      o && /* @__PURE__ */ s("span", {
         className: "quantity-selector-success-message",
-        children: a
+        children: o
       })
     ]
   });
 });
+$.displayName = "QuantitySelector";
 export {
-  D as QuantitySelector
+  $ as QuantitySelector
 };

package/dist/helpers/VersionInfo.js

@@ -23,7 +23,7 @@ var r = (i) => {
   const o = {
     ...i,
     lib: d,
-    libBuildNumber: 496,
+    libBuildNumber: 504,
     libCommit: n,
     libBuildDate: t
   };

package/dist/index.d.ts

@@ -1481,8 +1481,8 @@ export declare interface ErrorBoundaryProps {
     /** Label for the reset button. Defaults to "Try again". */
     resetLabel?: string;
     /**
-     * Optional callback invoked when an error is caught. Use this to forward to
-     * a logging service. Console logging is always done as a fallback.
+     * Optional callback invoked when an error is caught. Caught errors are already
+     * reported to the hub once error reporting is installed, and always logged to the console.
      */
     onError?: (error: Error, info: ErrorInfo) => void;
     /**
@@ -3242,7 +3242,7 @@ export declare interface TimelineMarkerInfo {
     dateLabel: string;
 }
 
-export declare const TimelineMarkers: <T extends TimelineMarkersItem>({ items, renderItem, className, }: TimelineMarkersProps<T>) => JSX.Element;
+export declare const TimelineMarkers: <T extends TimelineMarkersItem>({ items, renderItem, className }: TimelineMarkersProps<T>) => JSX.Element;
 
 export declare interface TimelineMarkersItem {
     id: string | number;

package/dist/memobit-icons.json

@@ -5,54 +5,14 @@
     "arrow-left",
     "arrow-right",
     "arrow-up",
-    "bullet",
-    "burst",
-    "calendar",
     "calendar-month",
     "calendar-week",
     "caret-down",
     "caret-left",
     "caret-right",
     "caret-up",
-    "checkmark",
-    "clear",
-    "clipboard",
-    "comment",
-    "confetti",
     "credit-card",
-    "empty",
-    "file",
-    "filters",
-    "fireworks",
-    "folder",
-    "food",
-    "gallery",
-    "grid",
-    "key",
-    "link",
-    "lock",
-    "logout",
-    "map",
     "menu-hamburger",
-    "next",
-    "other",
-    "ownership",
-    "pin",
-    "plus",
-    "previous",
-    "radio",
-    "return",
-    "save",
-    "scss",
-    "search",
-    "sparkle",
-    "star",
-    "table",
-    "target",
-    "theme-picker",
-    "time",
-    "tree",
-    "tune",
-    "warning"
+    "theme-picker"
   ]
 }

package/dist/styles/highlight.scss

@@ -1,6 +1,6 @@
-mark {
-    background-color: var(--button-warning-background-color);
-    color: var(--button-warning-color);
-    padding: var(--spacing-1) var(--spacing-4);
-    border-radius: var(--radius-sm);
-}
+mark {
+    background-color: var(--button-warning-background-color);
+    color: var(--button-warning-color);
+    padding: var(--spacing-1) var(--spacing-4);
+    border-radius: var(--radius-sm);
+}

package/dist/version.js

@@ -1,7 +1,7 @@
-var I = "3.9.0", B = 496, L = "4045b83", _ = "2026-10-14T11:27:44.843Z", r = "496";
+var I = "3.11.0", B = 504, L = "7cca07f", _ = "2026-10-16T16:12:33.803Z", a = "504";
 export {
   _ as LIB_BUILD_DATE,
-  r as LIB_BUILD_ID,
+  a as LIB_BUILD_ID,
   B as LIB_BUILD_NUMBER,
   L as LIB_COMMIT,
   I as LIB_VERSION

package/dist/version.json

@@ -1,6 +1,6 @@
 {
-  "version": "3.9.0",
-  "buildNumber": 496,
-  "commit": "4045b83",
-  "buildDate": "2026-10-14T11:27:44.843Z"
+  "version": "3.11.0",
+  "buildNumber": 504,
+  "commit": "7cca07f",
+  "buildDate": "2026-10-16T16:12:33.803Z"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memobit/libs",
-  "version": "3.9.0",
+  "version": "3.11.0",
   "description": "React component library powering the Memobit apps — 100+ components, helpers and hooks. Icons ship as @memobit/icons and themes as @memobit/themes. TypeScript-first, ESM-only, React 19.",
   "keywords": [
     "react",
@@ -74,12 +74,13 @@
     "prepublishOnly": "vite build",
     "dev": "vite build --watch",
     "playground": "vite serve playground --config playground/vite.config.ts",
-    "lint": "eslint src --ext .ts,.tsx",
-    "lint:fix": "eslint src --ext .ts,.tsx --fix",
-    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css}\"",
-    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css}\""
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,mjs,cjs,css,scss}\"",
+    "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,mjs,cjs,css,scss}\""
   },
   "peerDependencies": {
+    "@memobit/core": "1.0.0",
     "@memobit/icons": "^1.5.0",
     "@memobit/themes": "^1.0.0",
     "react": "19.3.0",
@@ -93,6 +94,7 @@
   },
   "devDependencies": {
     "@eslint/js": "9.39.4",
+    "@memobit/core": "file:../memobit-core",
     "@memobit/icons": "file:../memobit-react-icons",
     "@memobit/themes": "file:../memobit-react-themes",
     "@microsoft/api-extractor": "7.59.2",
@@ -102,9 +104,11 @@
     "esbuild": "0.28.2",
     "eslint": "9.39.4",
     "eslint-config-prettier": "10.1.8",
-    "eslint-plugin-import-x": "4.17.1",
+    "eslint-plugin-import": "2.32.0",
     "eslint-plugin-prettier": "5.5.6",
     "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "7.1.1",
+    "eslint-plugin-react-refresh": "0.5.7",
     "eslint-plugin-simple-import-sort": "14.0.0",
     "globals": "17.12.0",
     "prettier": "3.9.9",