@companix/uikit 0.0.60 → 0.0.61

package/dist/Select/OptionsPopover.d.ts

@@ -0,0 +1,41 @@
+import { Option } from '..';
+export interface UseOptionsResponse<T> {
+    options: Option<T>[];
+    isLoading: boolean;
+}
+interface HookControlled<T> {
+    useOptions: () => UseOptionsResponse<T>;
+    defaultOptions?: Option<T>[];
+    options?: undefined;
+}
+interface PropsProvided<T> {
+    defaultOptions?: undefined;
+    useOptions?: undefined;
+    options: Option<T>[];
+}
+export type OptionsSource<T> = HookControlled<T> | PropsProvided<T>;
+export type OptionsSourceControl<T> = OptionsSource<T> & {
+    onOptionsLoaded?: (options: Option<T>[]) => void;
+};
+export interface SelectAddOption {
+    text: string;
+    closeOnClick?: boolean;
+    onClick: () => void;
+}
+interface InternalListProps<T> {
+    options: Option<T>[];
+    scrollboxRef?: React.RefObject<HTMLDivElement>;
+    optionsWrapperRef?: React.RefObject<HTMLDivElement>;
+    isActive: (value: T) => boolean;
+    onSelect?: (value: T) => void;
+    onOpened?: (activeIndex: number) => void;
+    filterOptions?: (option: Option<T>) => boolean;
+    disableFiltering?: boolean;
+    minimalOptions?: boolean;
+    addOption?: SelectAddOption;
+    emptyText?: string;
+}
+export type OptionsPopoverProps<T> = OptionsSourceControl<T> & Omit<InternalListProps<T>, 'options'>;
+export declare const OptionsPopover: <T>(props: OptionsPopoverProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectOptionsList: <T>(props: InternalListProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Select/SelectInput.d.ts

@@ -1,4 +1,4 @@
-export interface SelectFormProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface SelectFormProps {
     required?: boolean;
     disabled?: boolean;
     className?: string;
@@ -11,5 +11,6 @@ export interface SelectFormProps extends React.HTMLAttributes<HTMLDivElement> {
     clearButtonIcon?: boolean;
     inputRef?: React.Ref<HTMLInputElement>;
     onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick?: () => void;
 }
 export declare const SelectInput: import('react').ForwardRefExoticComponent<SelectFormProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Select/index.d.ts

@@ -1,6 +1,5 @@
-import { Option } from '../types';
 import { SelectFormProps } from './SelectInput';
-import { SelectAddOption } from './SelectOptions';
+import { OptionsSource, SelectAddOption } from './OptionsPopover';
 interface Cleanable<T> {
     clearButton: true;
     onChange: (event: T | null) => void;
@@ -11,20 +10,18 @@ interface UnCleanable<T> {
 }
 type DependedValueType<T> = Cleanable<T> | UnCleanable<T>;
 export interface SelectParams {
-    minimalOptions?: boolean;
     matchTarget?: 'width' | 'min-width';
     popoverRef?: React.Ref<HTMLDivElement>;
     scrollRef?: React.Ref<{
         scrollTo: (index: number) => void;
     }>;
-    addOption?: SelectAddOption;
-    isLoading?: boolean;
     emptyText?: string;
+    minimalOptions?: boolean;
+    addOption?: SelectAddOption;
 }
-export type SelectProps<T> = Omit<SelectFormProps, 'value' | 'onChange' | 'closeButton'> & DependedValueType<T> & SelectParams & {
+export type SelectProps<T> = Omit<SelectFormProps, 'value' | 'onChange' | 'closeButton'> & DependedValueType<T> & SelectParams & OptionsSource<T> & {
     value: T | null;
-    options: Option<T>[];
     children?: React.ReactNode;
 };
-export declare const Select: <T>(props: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <T extends string | number>(props: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/SelectTags/index.d.ts

@@ -1,23 +1,18 @@
-import { Option } from '../types';
-import { SelectAddOption } from '../Select/SelectOptions';
-export interface SelectTagsProps<T> {
-    options: Option<T>[];
-    onChange: (event: T[]) => void;
+import { OptionsSource, SelectAddOption } from '../Select/OptionsPopover';
+export type SelectTagsProps<T> = OptionsSource<T> & {
+    closeAfterSelect?: boolean;
     onInputChange?: (text: string) => void;
-    onPopoverOpen?: (open: boolean) => void;
+    onChange: (event: T[]) => void;
     placeholder?: string;
     value: T[];
-    children?: React.ReactNode;
     disabled?: boolean;
     readOnly?: boolean;
-    closeAfterSelect?: boolean;
-    emptyText?: string;
     size?: 'sm' | 'md' | 'lg';
     fill?: boolean;
-    minimalOptions?: boolean;
     inputRef?: React.Ref<HTMLInputElement>;
     required?: boolean;
-    isLoading?: boolean;
+    minimalOptions?: boolean;
     addOption?: SelectAddOption;
-}
+    emptyText?: string;
+};
 export declare const SelectTags: <T extends string | number>(props: SelectTagsProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/bundle.es12.js

@@ -1,83 +1,96 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useMemo as I, useImperativeHandle as b } from "react";
-import { Popover as z } from "./bundle.es10.js";
-import { useFroozeClosing as B } from "./bundle.es47.js";
-import { SelectInput as D } from "./bundle.es48.js";
-import { useScrollListController as j } from "./bundle.es49.js";
-import { SelectOptionsList as w } from "./bundle.es50.js";
-import { mergeRefs as y } from "react-merge-refs";
-import { SelectLoader as H } from "./bundle.es51.js";
-const U = (a) => {
+import { jsx as l } from "react/jsx-runtime";
+import { useMemo as L, useImperativeHandle as j } from "react";
+import { Popover as k } from "./bundle.es10.js";
+import { useFroozeClosing as q } from "./bundle.es47.js";
+import { SelectInput as w } from "./bundle.es48.js";
+import { useScrollListController as H } from "./bundle.es49.js";
+import { OptionsPopover as M } from "./bundle.es50.js";
+import { mergeRefs as N } from "react-merge-refs";
+const Y = (t) => {
   const {
-    options: t,
-    onChange: l,
-    value: i,
-    minimalOptions: m,
-    matchTarget: f = "width",
-    children: u,
-    disabled: p,
-    scrollRef: d,
-    popoverRef: v,
+    onChange: i,
+    value: r,
+    matchTarget: u = "width",
+    children: f,
+    scrollRef: m,
+    popoverRef: d,
     clearButton: s,
-    emptyText: h,
-    addOption: x,
-    isLoading: R,
-    ...g
-  } = a, n = I(() => {
-    const o = i === null ? -1 : t.findIndex((e) => e.value === i);
-    return {
-      index: o,
-      option: t[o]
-    };
-  }, [t, i]), C = n.option?.value ?? null, { popoverRef: O, froozePopoverPosition: P, handleAnimationEnd: S } = B(), { scrollToElement: c, optionsWrapperRef: A, scrollBoxRef: L } = j();
-  b(d, () => ({
+    // select props
+    disabled: a,
+    required: v,
+    className: h,
+    clearButtonIcon: O,
+    leftElement: C,
+    inputRef: R,
+    onClear: W,
+    fill: P,
+    size: g,
+    placeholder: E,
+    onClick: A,
+    // options popover
+    ...S
+  } = t, p = L(() => {
+    const o = {};
+    return (t.options ?? t.defaultOptions ?? []).forEach((n) => {
+      o[n.value] = n;
+    }), o;
+  }, [t.options, t.defaultOptions]), x = r === null ? null : p[r] ?? null, { popoverRef: z, froozePopoverPosition: B, handleAnimationEnd: F } = q(), { scrollToElement: c, optionsWrapperRef: I, scrollBoxRef: T } = H();
+  j(m, () => ({
     scrollTo: (o) => c(o, "top")
   }));
-  const T = (o, e) => {
-    P(), l(o), e();
-  }, E = (o) => {
-    o.stopPropagation(), s && l(null);
-  }, F = () => {
-    n.index !== -1 && c(n.index, "center");
+  const b = (o, e) => {
+    B(), i(o), e();
+  }, D = (o) => {
+    o.stopPropagation(), s && i(null);
   };
-  return /* @__PURE__ */ r(
-    z,
+  return /* @__PURE__ */ l(
+    k,
     {
       minimal: !0,
-      ref: y([O, v]),
+      ref: N([z, d]),
       sideOffset: 0,
-      matchTarget: f,
-      onAnimationEnd: S,
+      matchTarget: u,
+      onAnimationEnd: F,
       onOpenAutoFocus: (o) => o.preventDefault(),
       onCloseAutoFocus: (o) => o.preventDefault(),
-      disabled: p,
-      content: ({ close: o }) => R ? /* @__PURE__ */ r(H, {}) : /* @__PURE__ */ r(
-        w,
+      disabled: a,
+      content: ({ close: o }) => /* @__PURE__ */ l(
+        M,
         {
-          options: t,
-          isActive: (e) => e === C,
-          emptyText: h,
-          scrollboxRef: L,
-          optionsWrapperRef: A,
-          minimalOptions: m,
-          addOption: x,
-          onOpened: F,
-          onSelect: (e) => T(e, o)
+          ...S,
+          isActive: (e) => e === r,
+          onSelect: (e) => b(e, o),
+          scrollboxRef: T,
+          optionsWrapperRef: I,
+          onOpened: (e) => c(e, "center"),
+          onOptionsLoaded: (e) => {
+            e.forEach((n) => {
+              p[n.value] = n;
+            });
+          }
         }
       ),
-      children: u ?? /* @__PURE__ */ r(
-        D,
+      children: f ?? /* @__PURE__ */ l(
+        w,
         {
-          ...g,
-          disabled: p,
+          required: v,
+          className: h,
+          leftElement: C,
+          inputRef: R,
+          onClear: D,
+          fill: P,
+          size: g,
+          placeholder: E,
+          onClick: A,
+          disabled: a,
           clearButton: s,
-          value: n.option?.title ?? "",
-          onClear: E
+          clearButtonIcon: O,
+          value: x?.title ?? ""
         }
       )
     }
   );
 };
 export {
-  U as Select
+  Y as Select
 };

package/dist/bundle.es13.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.es52.js";
-import { InputContainer as I } from "./bundle.es53.js";
+import { InputElement as x } from "./bundle.es51.js";
+import { InputContainer as I } from "./bundle.es52.js";
 import g from "classnames";
 const N = b(
   ({

package/dist/bundle.es15.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.es53.js";
+import { InputContainer as F } from "./bundle.es52.js";
 import { NumericFormat as V } from "react-number-format";
 const D = j(
   ({

package/dist/bundle.es21.js

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

package/dist/bundle.es22.js

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

package/dist/bundle.es23.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { Button as m } from "./bundle.es4.js";
-import { useLoading as p } from "./bundle.es55.js";
+import { useLoading as p } from "./bundle.es54.js";
 const g = ({ onClick: o, appearance: r = "primary", ...i }) => {
   const { isLoading: n, isError: t, handleClick: a } = p({ onClick: o });
   return /* @__PURE__ */ e(

package/dist/bundle.es26.js

@@ -1,5 +1,5 @@
 import { jsx as f } from "react/jsx-runtime";
-import { useResizeTextarea as x } from "./bundle.es56.js";
+import { useResizeTextarea as x } from "./bundle.es55.js";
 import { attr as e, callMultiple as u } from "@companix/utils-browser";
 import { useEffect as z } from "react";
 import { mergeRefs as R } from "react-merge-refs";

package/dist/bundle.es27.js

@@ -1,115 +1,116 @@
-import { jsx as n, jsxs as u } from "react/jsx-runtime";
-import { useFroozeClosing as B } from "./bundle.es47.js";
-import { Popover as X } from "./bundle.es10.js";
-import { useState as G, useRef as f, useMemo as d } from "react";
-import { Icon as h } from "./bundle.es33.js";
-import { attr as g, getActiveElementByAnotherElement as H, contains as J } from "@companix/utils-browser";
-import { mergeRefs as K } from "react-merge-refs";
-import { faXmark as Q, faChevronDown as U } from "@companix/icons-solid";
-import { matchPattern as W } from "@companix/utils-js";
-import { SelectOptionsList as Y } from "./bundle.es50.js";
-import { SelectLoader as Z } from "./bundle.es51.js";
-const ue = (v) => {
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { useFroozeClosing as M } from "./bundle.es47.js";
+import { Popover as j } from "./bundle.es10.js";
+import { useState as q, useRef as h, useMemo as V } from "react";
+import { Icon as g } from "./bundle.es33.js";
+import { attr as i, getActiveElementByAnotherElement as $, contains as B } from "@companix/utils-browser";
+import { mergeRefs as L } from "react-merge-refs";
+import { faXmark as X, faChevronDown as G } from "@companix/icons-solid";
+import { OptionsPopover as H } from "./bundle.es50.js";
+import { matchPattern as J } from "@companix/utils-js";
+const ne = (a) => {
   const {
-    options: r,
-    closeAfterSelect: C,
-    placeholder: x,
-    onChange: s,
-    onInputChange: N,
-    emptyText: R,
-    readOnly: l,
-    size: A = "md",
-    value: o,
-    inputRef: O,
-    onPopoverOpen: P,
-    minimalOptions: z,
-    isLoading: D,
-    disabled: m,
-    required: S,
-    addOption: b
-  } = v, [a, E] = G(""), i = f(null), k = f(null), { popoverRef: c, froozePopoverPosition: y, handleAnimationEnd: I } = B(), p = d(() => {
+    closeAfterSelect: v,
+    placeholder: C,
+    onChange: l,
+    onInputChange: x,
+    readOnly: c,
+    size: N = "md",
+    fill: O,
+    value: n,
+    inputRef: R,
+    disabled: u,
+    required: A,
+    // options popover
+    ...P
+  } = a, [f, b] = q(""), s = h(null), z = h(null), { popoverRef: d, froozePopoverPosition: D, handleAnimationEnd: E } = M(), S = (e) => n.includes(e) ? [...n] : [...n, e], k = (e) => n.filter((t) => e !== t), I = (e, t) => {
+    v ? (D(), l(e), t()) : l(e);
+  }, w = (e) => {
+    if (u) return;
+    d.current && d.current.getAttribute("data-state") === "open" && e.preventDefault();
+    const t = $(e.currentTarget);
+    e.defaultPrevented || B(e.currentTarget, t) || s.current && s.current.focus();
+  }, y = (e) => {
+    e.target !== s.current && e.preventDefault();
+  }, F = (e, t) => {
+    e.stopPropagation(), l(k(t));
+  }, T = ({ target: e }) => {
+    b(e.value), x?.(e.value);
+  }, m = V(() => {
     const e = {};
-    return r.forEach((t) => {
-      e[t.value] = t;
+    return (a.options ?? a.defaultOptions ?? []).forEach((r) => {
+      e[r.value] = r;
     }), e;
-  }, [r]), T = (e) => o.includes(e) ? [...o] : [...o, e], w = (e) => o.filter((t) => e !== t), F = (e, t) => {
-    C ? (y(), s(e), t()) : s(e);
-  }, L = d(() => a.trim() ? r.filter(({ title: e }) => W(e, a)) : r, [a, r]), M = (e) => {
-    if (m) return;
-    c.current && c.current.getAttribute("data-state") === "open" && e.preventDefault();
-    const t = H(e.currentTarget);
-    e.defaultPrevented || J(e.currentTarget, t) || i.current && i.current.focus();
-  }, j = (e) => {
-    e.target !== i.current && e.preventDefault();
-  }, q = (e, t) => {
-    e.stopPropagation(), s(w(t));
-  }, V = ({ target: e }) => {
-    E(e.value), N?.(e.value);
-  };
-  return /* @__PURE__ */ n(
-    X,
+  }, [a.options, a.defaultOptions]);
+  return /* @__PURE__ */ o(
+    j,
     {
       minimal: !0,
-      ref: c,
+      ref: d,
       sideOffset: 0,
       matchTarget: "width",
-      onAnimationEnd: I,
+      onAnimationEnd: E,
       onOpenAutoFocus: (e) => e.preventDefault(),
       onCloseAutoFocus: (e) => e.preventDefault(),
-      onOpenChange: P,
-      content: ({ close: e }) => D ? /* @__PURE__ */ n(Z, {}) : /* @__PURE__ */ n(
-        Y,
+      content: ({ close: e }) => /* @__PURE__ */ o(
+        H,
         {
-          isActive: (t) => o.includes(t),
-          options: L,
-          emptyText: R,
-          onSelect: (t) => F(T(t), e),
-          minimalOptions: z,
-          addOption: b
+          ...P,
+          isActive: (t) => n.includes(t),
+          onSelect: (t) => I(S(t), e),
+          disableFiltering: !f.trim(),
+          filterOptions: ({ title: t }) => J(t, f),
+          onOptionsLoaded: (t) => {
+            t.forEach((r) => {
+              m[r.value] = r;
+            });
+          }
         }
       ),
-      children: /* @__PURE__ */ n(
+      children: /* @__PURE__ */ o(
         "div",
         {
           className: "form",
-          onClick: M,
-          onMouseDown: j,
-          "data-size": A,
-          "data-required": g(S),
-          children: /* @__PURE__ */ u("div", { className: "select-tags-container", children: [
-            /* @__PURE__ */ u("div", { className: "select-tags", children: [
-              o.length > 0 && /* @__PURE__ */ n(
+          onClick: w,
+          onMouseDown: y,
+          "data-size": N ?? "md",
+          "data-fill": i(O),
+          "data-required": i(A),
+          "data-disabled": i(u),
+          children: /* @__PURE__ */ p("div", { className: "select-tags-container", children: [
+            /* @__PURE__ */ p("div", { className: "select-tags", children: [
+              n.length > 0 && /* @__PURE__ */ o(
                 "div",
                 {
                   className: "tag-container",
-                  ref: k,
+                  ref: z,
                   role: "listbox",
-                  "data-readonly": g(l),
-                  children: o.map((e, t) => p[e] ? /* @__PURE__ */ u("div", { className: "tag", children: [
-                    /* @__PURE__ */ n("span", { className: "tag-name", children: p[e].title }),
-                    /* @__PURE__ */ n("button", { className: "tag-close-button", onClick: ($) => q($, e), children: /* @__PURE__ */ n(h, { className: "tag-close-icon", icon: Q, size: "xxxs" }) })
+                  "data-readonly": i(c),
+                  children: n.map((e, t) => m[e] ? /* @__PURE__ */ p("div", { className: "tag", children: [
+                    /* @__PURE__ */ o("span", { className: "tag-name", children: m[e].title }),
+                    /* @__PURE__ */ o("button", { className: "tag-close-button", onClick: (r) => F(r, e), children: /* @__PURE__ */ o(g, { className: "tag-close-icon", icon: X, size: "xxxs" }) })
                   ] }, `tag-option-${e}-${t}`) : null)
                 }
               ),
-              (!l || o.length === 0) && /* @__PURE__ */ n(
+              (!c || n.length === 0) && /* @__PURE__ */ o(
                 "input",
                 {
-                  ref: K([O, i]),
+                  ref: L([R, s]),
                   type: "text",
                   autoCapitalize: "none",
                   autoComplete: "off",
                   autoCorrect: "off",
                   className: "form-input",
                   spellCheck: !1,
-                  value: a,
-                  disabled: m,
-                  readOnly: l,
-                  placeholder: x,
-                  onChange: V
+                  value: f,
+                  disabled: u,
+                  readOnly: c,
+                  placeholder: C,
+                  onChange: T
                 }
               )
             ] }),
-            /* @__PURE__ */ n(h, { className: "expand-icon", icon: U, size: "xxxs" })
+            /* @__PURE__ */ o(g, { className: "expand-icon", icon: G, size: "xxxs" })
           ] })
         }
       )
@@ -117,5 +118,5 @@ const ue = (v) => {
   );
 };
 export {
-  ue as SelectTags
+  ne as SelectTags
 };

package/dist/bundle.es28.js

@@ -2,11 +2,11 @@ import { jsx as u } from "react/jsx-runtime";
 import { Popover as T } from "./bundle.es10.js";
 import { Input as w } from "./bundle.es13.js";
 import { useState as A, useRef as j } from "react";
-import { Calendar as E } from "./bundle.es57.js";
-import { useDayDisableCheker as N } from "./bundle.es58.js";
+import { Calendar as E } from "./bundle.es56.js";
+import { useDayDisableCheker as N } from "./bundle.es57.js";
 import { getNum as h, formatTime as v } from "@companix/utils-js";
-import { removeDigits as O } from "./bundle.es59.js";
-import { SelectRightElements as Y } from "./bundle.es60.js";
+import { removeDigits as O } from "./bundle.es58.js";
+import { SelectRightElements as Y } from "./bundle.es59.js";
 const i = {
   char: "-",
   toString: (e) => {

package/dist/bundle.es29.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.es12.js";
-import { createDateValidation as O, getMonthMaxDay as T } from "./bundle.es59.js";
-import { defaultMin as j, defaultMax as N, useCalendarOptions as V } from "./bundle.es61.js";
+import { createDateValidation as O, getMonthMaxDay as T } from "./bundle.es58.js";
+import { defaultMin as j, defaultMax as N, useCalendarOptions as V } from "./bundle.es60.js";
 const B = ({
   min: o = j,
   max: e = N,

package/dist/bundle.es32.js

@@ -1,8 +1,8 @@
 import { jsx as g } from "react/jsx-runtime";
 import { useRef as _, useMemo as b, useState as P, useEffect as j } from "react";
 import { getNum as v } from "@companix/utils-js";
-import { getTimesOptions as D, getTimeValue as A, removeDigits as W, convertTimeToOption as q } from "./bundle.es59.js";
-import { SelectRightElements as w } from "./bundle.es60.js";
+import { getTimesOptions as D, getTimeValue as A, removeDigits as W, convertTimeToOption as q } from "./bundle.es58.js";
+import { SelectRightElements as w } from "./bundle.es59.js";
 import { Select as y } from "./bundle.es12.js";
 import { Input as z } from "./bundle.es13.js";
 const r = {

package/dist/bundle.es36.js

@@ -1,6 +1,6 @@
 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.es62.js";
+import { getColorScheme as v, updateDOM as m } from "./bundle.es61.js";
 const i = f({
   setColorScheme: () => {
   }

package/dist/bundle.es40.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import { hash as m } from "@companix/utils-js";
 import { useRef as n, useMemo as s } from "react";
-import { Viewport as p } from "./bundle.es63.js";
+import { Viewport as p } from "./bundle.es62.js";
 const a = (t = {}) => {
   const e = {
     emit: (r) => {

package/dist/bundle.es41.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import { hash as r } from "@companix/utils-js";
-import { Viewport as a } from "./bundle.es64.js";
+import { Viewport as a } from "./bundle.es63.js";
 import { useRef as c, useMemo as h } from "react";
 const m = (i = {}) => {
   const o = {

package/dist/bundle.es42.js

@@ -2,7 +2,7 @@ import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import * as t from "@radix-ui/react-toast";
 import { attr as T } from "@companix/utils-browser";
 import { useState as d, useRef as b, useEffect as j, useLayoutEffect as E } from "react";
-import { RemoveListener as I } from "./bundle.es54.js";
+import { RemoveListener as I } from "./bundle.es53.js";
 const m = (o) => {
   const [r, u] = d(!0), [p, f] = d(!1), s = b(null), {
     appearance: C = "neutral",