@companix/uikit 0.1.26 → 0.1.28

package/dist/ImageBase/ImageBase.scss

@@ -0,0 +1,50 @@
+.image-base {
+  position: relative;
+  // z-index: 1 из .Image__img внезапно перекрывает другие элементы
+  z-index: 0;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border: 1px solid rgb(0 0 0 / 6%);
+    border-radius: inherit;
+    pointer-events: none;
+  }
+
+  &-img,
+  &-placeholder,
+  &-preview {
+    width: 100%;
+    height: 100%;
+    object-fit: scale-down;
+  }
+
+  &-img {
+    position: relative;
+    z-index: 1;
+  }
+
+  &-loading {
+    .image-base-img {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  &-preview,
+  &-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+  }
+
+  &-preview {
+    object-fit: contain;
+    filter: blur(8px) opacity(0.9);
+  }
+}

package/dist/ImageBase/index.d.ts

@@ -0,0 +1,8 @@
+export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    src: string;
+    previewSrc?: string;
+    width: number;
+    height: number;
+    enableAspectRatio?: boolean;
+}
+export declare const ImageBase: (props: ImageBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/__hooks/use-sync-submit.d.ts

@@ -1 +1 @@
-export declare const useSyncSubmit: () => [boolean, (isSubmitted: boolean) => void];
+export declare const useSyncSubmit: (isSubmitted: boolean) => [boolean, (isSubmitted: boolean) => void];

package/dist/bundle.es.js

@@ -6,8 +6,8 @@ import { ButtonGroup as n } from "./bundle.es6.js";
 import { Spinner as S } from "./bundle.es7.js";
 import { Scrollable as g } from "./bundle.es8.js";
 import { ImitateScroll as d } from "./bundle.es9.js";
-import { Segments as P } from "./bundle.es10.js";
-import { Popover as y } from "./bundle.es11.js";
+import { Segments as B } from "./bundle.es10.js";
+import { Popover as b } from "./bundle.es11.js";
 import { Tooltip as I } from "./bundle.es12.js";
 import { Select as k } from "./bundle.es13.js";
 import { SelectTags as w } from "./bundle.es14.js";
@@ -33,30 +33,31 @@ import { FileOverlay as ce } from "./bundle.es33.js";
 import { FormGroup as ue } from "./bundle.es34.js";
 import { TimePicker as De } from "./bundle.es35.js";
 import { Icon as he } from "./bundle.es36.js";
-import { ProgressBar as be } from "./bundle.es37.js";
-import { Skeleton as Be } from "./bundle.es38.js";
+import { ProgressBar as Pe } from "./bundle.es37.js";
+import { Skeleton as ye } from "./bundle.es38.js";
 import { Blank as Te } from "./bundle.es39.js";
 import { ProgressRing as ve } from "./bundle.es40.js";
 import { WriteBar as Ae } from "./bundle.es41.js";
 import { Editor as Oe } from "./bundle.es42.js";
 import { DropArea as ze, DropAreaProvider as Le, useDragEnter as Ce } from "./bundle.es43.js";
 import { Table as Ne } from "./bundle.es44.js";
-import { ThemeProvider as We, useTheme as Ee } from "./bundle.es45.js";
-import { ColorSchemeScript as je, colorSchemeScript as qe } from "./bundle.es46.js";
-import { LocalStorageProvider as Je, useLocalStorage as Ke } from "./bundle.es47.js";
-import { useBooleanState as Ue } from "./bundle.es48.js";
-import { useResizeTextarea as Xe } from "./bundle.es49.js";
-import { useLoading as _e } from "./bundle.es50.js";
-import { NowContextProvider as er, useNow as rr } from "./bundle.es51.js";
-import { useSyncSubmit as tr } from "./bundle.es52.js";
-import { createAlertAgent as mr } from "./bundle.es53.js";
-import { createToaster as xr } from "./bundle.es54.js";
-import { Toast as ir } from "./bundle.es55.js";
-import { DialogShell as lr, DrawerShell as nr, MobileDrawerShell as cr, createPopupRegistry as Sr, usePopup as ur } from "./bundle.es56.js";
-import { createPopoversRegistry as Dr } from "./bundle.es57.js";
-import { createScope as hr, createStaticScope as Pr } from "./bundle.es58.js";
-import { RemoveListener as yr } from "./bundle.es59.js";
-import { MONDAY as Ir, addMonths as Tr, createDayDisableChecker as kr, endOfDay as vr, endOfWeek as wr, isDayMinMaxRestricted as Ar, isSameDate as Mr, setMonth as Or, setYear as Rr, startOfDay as zr, startOfWeek as Lr, subMonths as Cr, useDayDisableCheker as Fr } from "./bundle.es60.js";
+import { ImageBase as We } from "./bundle.es45.js";
+import { ThemeProvider as Ye, useTheme as je } from "./bundle.es46.js";
+import { ColorSchemeScript as He, colorSchemeScript as Je } from "./bundle.es47.js";
+import { LocalStorageProvider as Qe, useLocalStorage as Ue } from "./bundle.es48.js";
+import { useBooleanState as Xe } from "./bundle.es49.js";
+import { useResizeTextarea as _e } from "./bundle.es50.js";
+import { useLoading as er } from "./bundle.es51.js";
+import { NowContextProvider as or, useNow as tr } from "./bundle.es52.js";
+import { useSyncSubmit as mr } from "./bundle.es53.js";
+import { createAlertAgent as xr } from "./bundle.es54.js";
+import { createToaster as ir } from "./bundle.es55.js";
+import { Toast as lr } from "./bundle.es56.js";
+import { DialogShell as cr, DrawerShell as Sr, MobileDrawerShell as ur, createPopupRegistry as gr, usePopup as Dr } from "./bundle.es57.js";
+import { createPopoversRegistry as hr } from "./bundle.es58.js";
+import { createScope as Pr, createStaticScope as br } from "./bundle.es59.js";
+import { RemoveListener as Ir } from "./bundle.es60.js";
+import { MONDAY as kr, addMonths as vr, createDayDisableChecker as wr, endOfDay as Ar, endOfWeek as Mr, isDayMinMaxRestricted as Or, isSameDate as Rr, setMonth as zr, setYear as Lr, startOfDay as Cr, startOfWeek as Fr, subMonths as Nr, useDayDisableCheker as Gr } from "./bundle.es61.js";
 export {
   $ as AlertDialog,
   o as Avatar,
@@ -64,83 +65,84 @@ export {
   s as Button,
   n as ButtonGroup,
   G as Checkbox,
-  je as ColorSchemeScript,
+  He as ColorSchemeScript,
   me as Countdown,
   le as DateInput,
   ie as DatePicker,
   V as Dialog,
-  lr as DialogShell,
+  cr as DialogShell,
   J as Drawer,
-  nr as DrawerShell,
+  Sr as DrawerShell,
   ze as DropArea,
   Le as DropAreaProvider,
   Oe as Editor,
   ce as FileOverlay,
   ue as FormGroup,
   he as Icon,
+  We as ImageBase,
   d as ImitateScroll,
   M as Input,
   re as LoadingButton,
-  Je as LocalStorageProvider,
-  Ir as MONDAY,
+  Qe as LocalStorageProvider,
+  kr as MONDAY,
   Q as MobileDrawer,
-  cr as MobileDrawerShell,
-  er as NowContextProvider,
+  ur as MobileDrawerShell,
+  or as NowContextProvider,
   L as NumberInput,
   R as OptionItem,
   F as OptionsList,
-  y as Popover,
+  b as Popover,
   Z as PopupLayout,
-  be as ProgressBar,
+  Pe as ProgressBar,
   ve as ProgressRing,
   j as Radio,
   q as RadioGroup,
-  yr as RemoveListener,
+  Ir as RemoveListener,
   g as Scrollable,
-  P as Segments,
+  B as Segments,
   k as Select,
   w as SelectTags,
-  Be as Skeleton,
+  ye as Skeleton,
   S as Spinner,
   E as Switch,
   Ne as Table,
   te as Tabs,
   xe as TextArea,
-  We as ThemeProvider,
+  Ye as ThemeProvider,
   De as TimePicker,
-  ir as Toast,
+  lr as Toast,
   I as Tooltip,
   Ae as WriteBar,
-  Tr as addMonths,
+  vr as addMonths,
   p as avatarSizes,
-  qe as colorSchemeScript,
-  mr as createAlertAgent,
-  kr as createDayDisableChecker,
-  Dr as createPopoversRegistry,
-  Sr as createPopupRegistry,
-  hr as createScope,
-  Pr as createStaticScope,
-  xr as createToaster,
-  vr as endOfDay,
-  wr as endOfWeek,
+  Je as colorSchemeScript,
+  xr as createAlertAgent,
+  wr as createDayDisableChecker,
+  hr as createPopoversRegistry,
+  gr as createPopupRegistry,
+  Pr as createScope,
+  br as createStaticScope,
+  ir as createToaster,
+  Ar as endOfDay,
+  Mr as endOfWeek,
   a as getBadgeIconSizeByImageBaseSize,
   x as getFallbackIconSizeByImageBaseSize,
   f as getInitialsFontSize,
-  Ar as isDayMinMaxRestricted,
-  Mr as isSameDate,
-  Or as setMonth,
-  Rr as setYear,
-  zr as startOfDay,
-  Lr as startOfWeek,
-  Cr as subMonths,
-  Ue as useBooleanState,
-  Fr as useDayDisableCheker,
+  Or as isDayMinMaxRestricted,
+  Rr as isSameDate,
+  zr as setMonth,
+  Lr as setYear,
+  Cr as startOfDay,
+  Fr as startOfWeek,
+  Nr as subMonths,
+  Xe as useBooleanState,
+  Gr as useDayDisableCheker,
   Ce as useDragEnter,
-  _e as useLoading,
-  Ke as useLocalStorage,
-  rr as useNow,
-  ur as usePopup,
-  Xe as useResizeTextarea,
-  tr as useSyncSubmit,
-  Ee as useTheme
+  er as useLoading,
+  Ue as useLocalStorage,
+  tr as useNow,
+  Dr as usePopup,
+  _e as useResizeTextarea,
+  mr as useSyncSubmit,
+  je as useTheme
 };

package/dist/bundle.es10.js

@@ -1,5 +1,5 @@
 import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { makeTabId as c, useTabSlider as i } from "./bundle.es61.js";
+import { makeTabId as c, useTabSlider as i } from "./bundle.es62.js";
 import { attr as o } from "@companix/utils-browser";
 import { useRef as u, useId as f } from "react";
 const h = ({ value: s, onChange: t, options: a }) => {

package/dist/bundle.es13.js

@@ -1,10 +1,10 @@
 import { jsx as l } from "react/jsx-runtime";
 import { useRef as L, useMemo as j, useImperativeHandle as k } from "react";
 import { Popover as q } from "./bundle.es11.js";
-import { useFroozeClosing as w } from "./bundle.es62.js";
-import { SelectInput as H } from "./bundle.es63.js";
-import { useScrollListController as M } from "./bundle.es64.js";
-import { OptionsPopover as N } from "./bundle.es65.js";
+import { useFroozeClosing as w } from "./bundle.es63.js";
+import { SelectInput as H } from "./bundle.es64.js";
+import { useScrollListController as M } from "./bundle.es65.js";
+import { OptionsPopover as N } from "./bundle.es66.js";
 import { mergeRefs as W } from "react-merge-refs";
 const Z = (t) => {
   const {

package/dist/bundle.es14.js

@@ -3,12 +3,12 @@ import { mergeRefs as T } from "react-merge-refs";
 import { useState as M, useRef as h, useMemo as j } from "react";
 import { matchPattern as q } from "@companix/utils-js";
 import { faXmark as V, faChevronDown as $ } from "@companix/icons-solid";
-import { useFroozeClosing as B } from "./bundle.es62.js";
+import { useFroozeClosing as B } from "./bundle.es63.js";
 import { Popover as L } from "./bundle.es11.js";
 import { Icon as g } from "./bundle.es36.js";
 import { attr as l, getActiveElementByAnotherElement as X, contains as G } from "@companix/utils-browser";
-import { OptionsPopover as H } from "./bundle.es65.js";
-import { arrays as v } from "./bundle.es66.js";
+import { OptionsPopover as H } from "./bundle.es66.js";
+import { arrays as v } from "./bundle.es67.js";
 const ne = (r) => {
   const {
     closeAfterSelect: C,

package/dist/bundle.es15.js

@@ -1,8 +1,8 @@
 import { jsx as t } from "react/jsx-runtime";
 import { forwardRef as b, useRef as R } from "react";
 import { mergeRefs as c } from "react-merge-refs";
-import { InputElement as x } from "./bundle.es67.js";
-import { InputContainer as I } from "./bundle.es68.js";
+import { InputElement as x } from "./bundle.es68.js";
+import { InputContainer as I } from "./bundle.es69.js";
 import g from "classnames";
 const N = b(
   ({

package/dist/bundle.es17.js

@@ -2,7 +2,7 @@ import { jsx as t } from "react/jsx-runtime";
 import C from "classnames";
 import { forwardRef as j, useRef as w } from "react";
 import { mergeRefs as y } from "react-merge-refs";
-import { InputContainer as F } from "./bundle.es68.js";
+import { InputContainer as F } from "./bundle.es69.js";
 import { NumericFormat as V } from "react-number-format";
 const D = j(
   ({

package/dist/bundle.es23.js

@@ -4,11 +4,11 @@ import G from "classnames";
 import * as E from "@radix-ui/react-dialog";
 import { VisuallyHidden as K } from "@radix-ui/react-visually-hidden";
 import { customCSS as oe } from "@companix/utils-browser";
-import { RemoveListener as se } from "./bundle.es59.js";
-import { DrawerContext as ie, useDrawerContext as J } from "./bundle.es69.js";
-import { set as R, reset as ae, composeRefs as Q, isInput as ce, isMobileFirefox as ue, getTranslate as W, isIOS as le, dampenValue as fe } from "./bundle.es70.js";
-import { usePreventScroll as de } from "./bundle.es71.js";
-import { DRAG_CLASS as j, VELOCITY_THRESHOLD as ge, CLOSE_THRESHOLD as me, SCROLL_LOCK_TIMEOUT as pe, TRANSITIONS as Y, WINDOW_TOP_OFFSET as he } from "./bundle.es72.js";
+import { RemoveListener as se } from "./bundle.es60.js";
+import { DrawerContext as ie, useDrawerContext as J } from "./bundle.es70.js";
+import { set as R, reset as ae, composeRefs as Q, isInput as ce, isMobileFirefox as ue, getTranslate as W, isIOS as le, dampenValue as fe } from "./bundle.es71.js";
+import { usePreventScroll as de } from "./bundle.es72.js";
+import { DRAG_CLASS as j, VELOCITY_THRESHOLD as ge, CLOSE_THRESHOLD as me, SCROLL_LOCK_TIMEOUT as pe, TRANSITIONS as Y, WINDOW_TOP_OFFSET as he } from "./bundle.es73.js";
 const we = (m) => {
   const { open: p, onOpenChange: l, onClosed: D, children: y, defaultOpen: S = !1, disableEsc: f } = m, [x, M] = t.useState(!1), [T, P] = t.useState(!1), [_, A] = t.useState(!1), v = t.useRef(null), H = t.useRef(null), I = t.useRef(null), L = t.useRef(null), o = t.useRef(null), d = t.useRef(!1), h = t.useRef(0), b = t.useRef(!1), N = t.useRef(!S), e = t.useRef(null), O = t.useRef(e.current?.getBoundingClientRect().height || 0), g = t.useRef(0), C = t.useRef(0), w = p ?? !1, V = t.useCallback(
     (r) => {

package/dist/bundle.es25.js

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as n } from "react/jsx-runtime";
 import y from "classnames";
 import * as o from "@radix-ui/react-dialog";
 import { VisuallyHidden as l } from "@radix-ui/react-visually-hidden";
-import { RemoveListener as u } from "./bundle.es59.js";
+import { RemoveListener as u } from "./bundle.es60.js";
 const C = (t) => {
   const { open: i, onOpenChange: a, children: s, onClosed: c, disableEsc: p, overlay: r = {}, overlayRef: m, content: d = {}, contentRef: f } = t, h = (v) => {
     p && v.preventDefault();

package/dist/bundle.es26.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
 import * as r from "@radix-ui/react-alert-dialog";
 import { Button as c } from "./bundle.es5.js";
-import { RemoveListener as N } from "./bundle.es59.js";
+import { RemoveListener as N } from "./bundle.es60.js";
 import { VisuallyHidden as u } from "@radix-ui/react-visually-hidden";
 const C = ({
   open: d,

package/dist/bundle.es27.js

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 import { Button as p } from "./bundle.es5.js";
-import { useLoading as s } from "./bundle.es50.js";
+import { useLoading as s } from "./bundle.es51.js";
 const l = ({
   onClick: o,
   appearance: r = "primary",

package/dist/bundle.es28.js

@@ -1,5 +1,5 @@
 import { jsx as a, jsxs as b } from "react/jsx-runtime";
-import { useTabSlider as l, makeTabId as m } from "./bundle.es61.js";
+import { useTabSlider as l, makeTabId as m } from "./bundle.es62.js";
 import * as n from "@radix-ui/react-tabs";
 import { useRef as f, useId as T, createContext as u, useContext as c } from "react";
 const o = u({ baseId: "", containerRef: {} }), x = ({ children: s, value: e, onChange: r }) => {

package/dist/bundle.es29.js

@@ -1,5 +1,5 @@
 import { jsx as d, Fragment as p } from "react/jsx-runtime";
-import { useRerender as T } from "./bundle.es73.js";
+import { useRerender as T } from "./bundle.es74.js";
 import { getNextCandleTime as x, sleep as S, getTimes as g } from "@companix/utils-js";
 import { useRef as v, useEffect as s } from "react";
 const n = (t) => String(t).padStart(2, "0"), C = ({ expiration: t, separator: m = ":", onExpired: i }) => {

package/dist/bundle.es30.js

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 import u from "classnames";
-import { useResizeTextarea as z } from "./bundle.es49.js";
+import { useResizeTextarea as z } from "./bundle.es50.js";
 import { attr as e, callMultiple as R } from "@companix/utils-browser";
 import { useEffect as T } from "react";
 import { mergeRefs as g } from "react-merge-refs";

package/dist/bundle.es31.js

@@ -2,11 +2,11 @@ import { jsx as u } from "react/jsx-runtime";
 import { Popover as T } from "./bundle.es11.js";
 import { Input as w } from "./bundle.es15.js";
 import { useState as A, useRef as j } from "react";
-import { Calendar as E } from "./bundle.es74.js";
-import { useDayDisableCheker as N } from "./bundle.es60.js";
+import { Calendar as E } from "./bundle.es75.js";
+import { useDayDisableCheker as N } from "./bundle.es61.js";
 import { getNum as h, formatTime as v } from "@companix/utils-js";
-import { removeDigits as O } from "./bundle.es66.js";
-import { SelectRightElements as Y } from "./bundle.es75.js";
+import { removeDigits as O } from "./bundle.es67.js";
+import { SelectRightElements as Y } from "./bundle.es76.js";
 const i = {
   char: "-",
   toString: (e) => {

package/dist/bundle.es32.js

@@ -1,8 +1,8 @@
 import { jsxs as D, jsx as h } from "react/jsx-runtime";
 import { useMemo as M, useEffect as C } from "react";
 import { Select as c } from "./bundle.es13.js";
-import { createDateValidation as O, getMonthMaxDay as T } from "./bundle.es66.js";
-import { defaultMin as j, defaultMax as N, useCalendarOptions as V } from "./bundle.es76.js";
+import { createDateValidation as O, getMonthMaxDay as T } from "./bundle.es67.js";
+import { defaultMin as j, defaultMax as N, useCalendarOptions as V } from "./bundle.es77.js";
 const B = ({
   min: o = j,
   max: e = N,

package/dist/bundle.es35.js

@@ -1,8 +1,8 @@
 import { jsx as g } from "react/jsx-runtime";
 import { useRef as b, useMemo as I, useState as E, useCallback as A } from "react";
 import { getNum as S } from "@companix/utils-js";
-import { getTimesOptions as W, getTimeValue as q, removeDigits as w, convertTimeToOption as y } from "./bundle.es66.js";
-import { SelectRightElements as z } from "./bundle.es75.js";
+import { getTimesOptions as W, getTimeValue as q, removeDigits as w, convertTimeToOption as y } from "./bundle.es67.js";
+import { SelectRightElements as z } from "./bundle.es76.js";
 import { Select as F } from "./bundle.es13.js";
 import { Input as G } from "./bundle.es15.js";
 const o = {

package/dist/bundle.es41.js

@@ -3,7 +3,7 @@ import c from "classnames";
 import { Spinner as b } from "./bundle.es7.js";
 import { Icon as h } from "./bundle.es36.js";
 import { attr as N } from "@companix/utils-browser";
-import { WriteBarInput as u } from "./bundle.es77.js";
+import { WriteBarInput as u } from "./bundle.es78.js";
 const w = (a) => {
   const {
     before: e,

package/dist/bundle.es42.js

@@ -1,6 +1,6 @@
 import { escape as u, unescape as f, isElementNode as g } from "@companix/utils-browser";
-import { onElementKeyDownFactory as v } from "./bundle.es78.js";
-import { getEditorSelection as l, normalizeEditorText as a, getNodeTextContent as h, scrollSelectionIntoView as d, getTextSelectionOffsets as E } from "./bundle.es79.js";
+import { onElementKeyDownFactory as v } from "./bundle.es79.js";
+import { getEditorSelection as l, normalizeEditorText as a, getNodeTextContent as h, scrollSelectionIntoView as d, getTextSelectionOffsets as E } from "./bundle.es80.js";
 class k {
   element;
   prevText = "";

package/dist/bundle.es45.js

@@ -1,37 +1,49 @@
-import { jsx as u } from "react/jsx-runtime";
-import { useState as h, useEffect as c, createContext as f, useContext as w } from "react";
-import { getColorScheme as v, updateDOM as m } from "./bundle.es80.js";
-const i = f({
-  setColorScheme: () => {
-  }
-}), y = () => w(i), p = (d) => {
-  const { defaultColorScheme: o = "system", storageKey: n = "theme", children: l } = d, [r, a] = h(() => v(n, o)), s = (e) => {
-    a(e), localStorage.setItem(n, e);
+import { jsxs as $, jsx as l } from "react/jsx-runtime";
+import b from "classnames";
+import { useRef as y, useMemo as F, useState as o } from "react";
+const P = (a) => {
+  const { previewSrc: e, width: s, height: t, className: n, src: r, children: m, enableAspectRatio: d, ...g } = a, p = y(null), f = F(() => I(s, t), [s, t]), [i, h] = o(!1), [v, u] = o(!1), [w, c] = o(!1), x = () => {
+    v && (u(!1), c(!1));
   };
-  return c(() => {
-    const e = window ? window.matchMedia("(prefers-color-scheme: dark)") : void 0;
-    if (!e)
-      return;
-    const t = () => {
-      r === "system" && m("system");
-    };
-    return e.addEventListener?.("change", t), t(), () => {
-      e.removeEventListener?.("change", t);
-    };
-  }, [r]), c(() => {
-    if (!window)
-      return;
-    const e = (t) => {
-      t.key === n && (t.newValue ? a(t.newValue) : s(o));
-    };
-    return window.addEventListener("storage", e), () => {
-      window.removeEventListener("storage", e);
-    };
-  }, [s, o]), c(() => {
-    m(r);
-  }, [r]), /* @__PURE__ */ u(i.Provider, { value: { colorScheme: r, setColorScheme: s }, children: l });
+  return /* @__PURE__ */ $(
+    "div",
+    {
+      className: b("image-base", { "image-base-loading": !i }, n),
+      style: d ? { aspectRatio: s / t } : {},
+      onClick: x,
+      children: [
+        !i && /* @__PURE__ */ l("img", { className: "image-base-placeholder", src: f, alt: "" }),
+        e && e !== r && !i && !w && /* @__PURE__ */ l(
+          "img",
+          {
+            className: "image-base-preview",
+            src: e,
+            style: { maxWidth: `${s}px`, maxHeight: `${t}px` },
+            loading: "lazy",
+            decoding: "async",
+            onError: () => c(!0),
+            alt: ""
+          }
+        ),
+        /* @__PURE__ */ l(
+          "img",
+          {
+            ref: p,
+            className: "image-base-img",
+            src: r,
+            decoding: "async",
+            onLoad: () => h(!0),
+            ...g
+          }
+        ),
+        m
+      ]
+    }
+  );
+}, I = (a, e) => {
+  const s = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${a} ${e}" width="${a}" height="${e}" />`;
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(s)}`;
 };
 export {
-  p as ThemeProvider,
-  y as useTheme
+  P as ImageBase
 };

package/dist/bundle.es46.js

@@ -1,24 +1,37 @@
-import { jsx as l } from "react/jsx-runtime";
-import { memo as n } from "react";
-const i = n(({ storageKey: t, defaultColorScheme: o }) => /* @__PURE__ */ l(
-  "script",
-  {
-    suppressHydrationWarning: !0,
-    dangerouslySetInnerHTML: {
-      __html: `(${a.toString()})("${t}", "${o}")`
-    }
-  }
-)), a = (t, o) => {
-  const [r, c] = ["theme-light", "theme-dark"];
-  try {
-    let e = localStorage.getItem(t) || o;
-    e === "system" && (e = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
-    const s = e === "dark" ? c : r;
-    document.documentElement.classList.remove(r, c), document.documentElement.classList.add(s), document.documentElement.style.colorScheme = e;
-  } catch {
+import { jsx as u } from "react/jsx-runtime";
+import { useState as h, useEffect as c, createContext as f, useContext as w } from "react";
+import { getColorScheme as v, updateDOM as m } from "./bundle.es81.js";
+const i = f({
+  setColorScheme: () => {
   }
+}), y = () => w(i), p = (d) => {
+  const { defaultColorScheme: o = "system", storageKey: n = "theme", children: l } = d, [r, a] = h(() => v(n, o)), s = (e) => {
+    a(e), localStorage.setItem(n, e);
+  };
+  return c(() => {
+    const e = window ? window.matchMedia("(prefers-color-scheme: dark)") : void 0;
+    if (!e)
+      return;
+    const t = () => {
+      r === "system" && m("system");
+    };
+    return e.addEventListener?.("change", t), t(), () => {
+      e.removeEventListener?.("change", t);
+    };
+  }, [r]), c(() => {
+    if (!window)
+      return;
+    const e = (t) => {
+      t.key === n && (t.newValue ? a(t.newValue) : s(o));
+    };
+    return window.addEventListener("storage", e), () => {
+      window.removeEventListener("storage", e);
+    };
+  }, [s, o]), c(() => {
+    m(r);
+  }, [r]), /* @__PURE__ */ u(i.Provider, { value: { colorScheme: r, setColorScheme: s }, children: l });
 };
 export {
-  i as ColorSchemeScript,
-  a as colorSchemeScript
+  p as ThemeProvider,
+  y as useTheme
 };