@daimo/pay 1.16.0 → 1.16.1

package/build/src/hooks/useEnsFallbackConfig.js

@@ -3,13 +3,13 @@ import { mainnet } from 'wagmi/chains';
 import { useChainIsSupported } from './useChainIsSupported.js';
 
 const ensFallbackConfig = createConfig({
-    chains: [mainnet],
-    transports: {
-        [mainnet.id]: http(),
-    },
+  chains: [mainnet],
+  transports: {
+    [mainnet.id]: http()
+  }
 });
 function useEnsFallbackConfig() {
-    return !useChainIsSupported(1) ? ensFallbackConfig : undefined;
+  return !useChainIsSupported(1) ? ensFallbackConfig : void 0;
 }
 
 export { useEnsFallbackConfig };

package/build/src/hooks/useEnsFallbackConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEnsFallbackConfig.js","sources":["../../../src/hooks/useEnsFallbackConfig.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAKA,MAAM,iBAAiB,GAAG,YAAY,CAAC;IACrC,MAAM,EAAE,CAAC,OAAO,CAAC;AACjB,IAAA,UAAU,EAAE;AACV,QAAA,CAAC,OAAO,CAAC,EAAE,GAAG,IAAI,EAAE;AACrB,KAAA;AACF,CAAA,CAAC,CAAC;SAEa,oBAAoB,GAAA;AAClC,IAAA,OAAO,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAG,iBAAiB,GAAG,SAAS,CAAC;AACjE;;;;"}
+{"version":3,"file":"useEnsFallbackConfig.js","sources":["../../../src/hooks/useEnsFallbackConfig.ts"],"sourcesContent":["import type { Config } from \"@wagmi/core\";\nimport { createConfig, http } from \"wagmi\";\nimport { mainnet } from \"wagmi/chains\";\nimport { useChainIsSupported } from \"../hooks/useChainIsSupported\";\n\nconst ensFallbackConfig = createConfig({\n  chains: [mainnet],\n  transports: {\n    [mainnet.id]: http(),\n  },\n});\n\nexport function useEnsFallbackConfig(): Config | undefined {\n  return !useChainIsSupported(1) ? ensFallbackConfig : undefined;\n}\n"],"names":[],"mappings":";;;;AAKA,MAAM,oBAAoB,YAAa,CAAA;AAAA,EACrC,MAAA,EAAQ,CAAC,OAAO,CAAA;AAAA,EAChB,UAAY,EAAA;AAAA,IACV,CAAC,OAAA,CAAQ,EAAE,GAAG,IAAK,EAAA;AAAA,GACrB;AACF,CAAC,CAAA,CAAA;AAEM,SAAS,oBAA2C,GAAA;AACzD,EAAA,OAAO,CAAC,mBAAA,CAAoB,CAAC,CAAA,GAAI,iBAAoB,GAAA,KAAA,CAAA,CAAA;AACvD;;;;"}

package/build/src/hooks/useExternalPaymentOptions.js

@@ -1,58 +1,63 @@
 import { ExternalPaymentOptions } from '@daimo/pay-common';
 import { useState, useEffect } from 'react';
 
-const DEFAULT_EXTERNAL_PAYMENT_OPTIONS = Object.values(ExternalPaymentOptions).filter((opt) => 
-// Solana and ExternalChains are handled in the SelectMethod component.
-opt !== ExternalPaymentOptions.ExternalChains &&
-    opt !== ExternalPaymentOptions.Daimo);
-function useExternalPaymentOptions({ trpc, filterIds, platform, usdRequired, mode, }) {
-    const [options, setOptions] = useState(new Map());
-    const [loading, setLoading] = useState(false);
-    useEffect(() => {
-        const refreshExternalPaymentOptions = async (usd, mode) => {
-            if (!platform)
-                return;
-            setLoading(true);
-            try {
-                const newOptions = await trpc.getExternalPaymentOptions.query({
-                    platform,
-                    mode,
-                    usdRequired: usd,
-                });
-                // Filter out options not in options JSON
-                const enabledExtPaymentOptions = filterIds || DEFAULT_EXTERNAL_PAYMENT_OPTIONS;
-                const hasAllPaymentApps = enabledExtPaymentOptions.includes(ExternalPaymentOptions.AllPaymentApps);
-                const hasAllExchanges = enabledExtPaymentOptions.includes(ExternalPaymentOptions.AllExchanges);
-                const filteredOptions = newOptions.filter((option) => enabledExtPaymentOptions.includes(option.id) ||
-                    (hasAllPaymentApps && option.optionType === "zkp2p") ||
-                    (hasAllExchanges && option.optionType === "exchange"));
-                const optionsByType = new Map();
-                filteredOptions.forEach((option) => {
-                    const { optionType } = option;
-                    if (!optionsByType.has(optionType)) {
-                        optionsByType.set(optionType, []);
-                    }
-                    optionsByType.get(optionType).push(option);
-                });
-                setOptions(optionsByType);
-            }
-            catch (error) {
-                console.error(error);
-            }
-            finally {
-                setLoading(false);
-            }
-        };
-        if (usdRequired != null && mode != null) {
-            refreshExternalPaymentOptions(usdRequired, mode);
-        }
-        // TODO: this is an ugly way to handle polling/refresh
-        // Notice the load-bearing JSON.stringify() to prevent a visible infinite
-        // refresh glitch on the SelectMethod screen. Replace this useEffect().
-        //
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [usdRequired, JSON.stringify(filterIds), platform, mode, trpc]);
-    return { options, loading };
+const DEFAULT_EXTERNAL_PAYMENT_OPTIONS = Object.values(
+  ExternalPaymentOptions
+).filter(
+  (opt) => (
+    // Solana and ExternalChains are handled in the SelectMethod component.
+    opt !== ExternalPaymentOptions.ExternalChains && opt !== ExternalPaymentOptions.Daimo
+  )
+);
+function useExternalPaymentOptions({
+  trpc,
+  filterIds,
+  platform,
+  usdRequired,
+  mode
+}) {
+  const [options, setOptions] = useState(/* @__PURE__ */ new Map());
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    const refreshExternalPaymentOptions = async (usd, mode2) => {
+      if (!platform) return;
+      setLoading(true);
+      try {
+        const newOptions = await trpc.getExternalPaymentOptions.query({
+          platform,
+          mode: mode2,
+          usdRequired: usd
+        });
+        const enabledExtPaymentOptions = filterIds || DEFAULT_EXTERNAL_PAYMENT_OPTIONS;
+        const hasAllPaymentApps = enabledExtPaymentOptions.includes(
+          ExternalPaymentOptions.AllPaymentApps
+        );
+        const hasAllExchanges = enabledExtPaymentOptions.includes(
+          ExternalPaymentOptions.AllExchanges
+        );
+        const filteredOptions = newOptions.filter(
+          (option) => enabledExtPaymentOptions.includes(option.id) || hasAllPaymentApps && option.optionType === "zkp2p" || hasAllExchanges && option.optionType === "exchange"
+        );
+        const optionsByType = /* @__PURE__ */ new Map();
+        filteredOptions.forEach((option) => {
+          const { optionType } = option;
+          if (!optionsByType.has(optionType)) {
+            optionsByType.set(optionType, []);
+          }
+          optionsByType.get(optionType).push(option);
+        });
+        setOptions(optionsByType);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    if (usdRequired != null && mode != null) {
+      refreshExternalPaymentOptions(usdRequired, mode);
+    }
+  }, [usdRequired, JSON.stringify(filterIds), platform, mode, trpc]);
+  return { options, loading };
 }
 
 export { useExternalPaymentOptions };

package/build/src/hooks/useExternalPaymentOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"useExternalPaymentOptions.js","sources":["../../../src/hooks/useExternalPaymentOptions.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AASA,MAAM,gCAAgC,GAAG,MAAM,CAAC,MAAM,CACpD,sBAAsB,CACvB,CAAC,MAAM,CACN,CAAC,GAAG;AACF;AACA,GAAG,KAAK,sBAAsB,CAAC,cAAc;AAC7C,IAAA,GAAG,KAAK,sBAAsB,CAAC,KAAK,CACvC,CAAC;AAEc,SAAA,yBAAyB,CAAC,EACxC,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,WAAW,EACX,IAAI,GAOL,EAAA;AAQC,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAEpC,IAAI,GAAG,EAAE,CAAC,CAAC;IACb,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,SAAS,CAAC,MAAK;QACb,MAAM,6BAA6B,GAAG,OACpC,GAAW,EACX,IAAuB,KACrB;AACF,YAAA,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAEtB,UAAU,CAAC,IAAI,CAAC,CAAC;AACjB,YAAA,IAAI;gBACF,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,yBAAyB,CAAC,KAAK,CAAC;oBAC5D,QAAQ;oBACR,IAAI;AACJ,oBAAA,WAAW,EAAE,GAAG;AACjB,iBAAA,CAAC,CAAC;;AAGH,gBAAA,MAAM,wBAAwB,GAC5B,SAAS,IAAI,gCAAgC,CAAC;gBAEhD,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,QAAQ,CACzD,sBAAsB,CAAC,cAAc,CACtC,CAAC;gBACF,MAAM,eAAe,GAAG,wBAAwB,CAAC,QAAQ,CACvD,sBAAsB,CAAC,YAAY,CACpC,CAAC;AAEF,gBAAA,MAAM,eAAe,GAAG,UAAU,CAAC,MAAM,CACvC,CAAC,MAAqC,KACpC,wBAAwB,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;AAC5C,qBAAC,iBAAiB,IAAI,MAAM,CAAC,UAAU,KAAK,OAAO,CAAC;qBACnD,eAAe,IAAI,MAAM,CAAC,UAAU,KAAK,UAAU,CAAC,CACxD,CAAC;AACF,gBAAA,MAAM,aAAa,GAGf,IAAI,GAAG,EAAE,CAAC;AACd,gBAAA,eAAe,CAAC,OAAO,CAAC,CAAC,MAAM,KAAI;AACjC,oBAAA,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC;oBAC9B,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;AAClC,wBAAA,aAAa,CAAC,GAAG,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;qBACnC;oBACD,aAAa,CAAC,GAAG,CAAC,UAAU,CAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AAC9C,iBAAC,CAAC,CAAC;gBAEH,UAAU,CAAC,aAAa,CAAC,CAAC;aAC3B;YAAC,OAAO,KAAK,EAAE;AACd,gBAAA,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;aACtB;oBAAS;gBACR,UAAU,CAAC,KAAK,CAAC,CAAC;aACnB;AACH,SAAC,CAAC;QAEF,IAAI,WAAW,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,EAAE;AACvC,YAAA,6BAA6B,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;SAClD;;;;;;AAMH,KAAC,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;AAEnE,IAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;AAC9B;;;;"}
+{"version":3,"file":"useExternalPaymentOptions.js","sources":["../../../src/hooks/useExternalPaymentOptions.ts"],"sourcesContent":["import {\n  DaimoPayOrderMode,\n  ExternalPaymentOptionMetadata,\n  ExternalPaymentOptions,\n  PlatformType,\n} from \"@daimo/pay-common\";\nimport { useEffect, useState } from \"react\";\nimport { TrpcClient } from \"../utils/trpc\";\n\nconst DEFAULT_EXTERNAL_PAYMENT_OPTIONS = Object.values(\n  ExternalPaymentOptions,\n).filter(\n  (opt) =>\n    // Solana and ExternalChains are handled in the SelectMethod component.\n    opt !== ExternalPaymentOptions.ExternalChains &&\n    opt !== ExternalPaymentOptions.Daimo,\n);\n\nexport function useExternalPaymentOptions({\n  trpc,\n  filterIds,\n  platform,\n  usdRequired,\n  mode,\n}: {\n  trpc: TrpcClient;\n  filterIds: string[] | undefined;\n  platform: PlatformType | undefined;\n  usdRequired: number | undefined;\n  mode: DaimoPayOrderMode | undefined;\n}): {\n  /// Exteral options, organized by optionType\n  options: Map<\n    \"external\" | \"zkp2p\" | \"exchange\",\n    ExternalPaymentOptionMetadata[]\n  >;\n  loading: boolean;\n} {\n  const [options, setOptions] = useState<\n    Map<\"external\" | \"zkp2p\" | \"exchange\", ExternalPaymentOptionMetadata[]>\n  >(new Map());\n  const [loading, setLoading] = useState(false);\n\n  useEffect(() => {\n    const refreshExternalPaymentOptions = async (\n      usd: number,\n      mode: DaimoPayOrderMode,\n    ) => {\n      if (!platform) return;\n\n      setLoading(true);\n      try {\n        const newOptions = await trpc.getExternalPaymentOptions.query({\n          platform,\n          mode,\n          usdRequired: usd,\n        });\n\n        // Filter out options not in options JSON\n        const enabledExtPaymentOptions =\n          filterIds || DEFAULT_EXTERNAL_PAYMENT_OPTIONS;\n\n        const hasAllPaymentApps = enabledExtPaymentOptions.includes(\n          ExternalPaymentOptions.AllPaymentApps,\n        );\n        const hasAllExchanges = enabledExtPaymentOptions.includes(\n          ExternalPaymentOptions.AllExchanges,\n        );\n\n        const filteredOptions = newOptions.filter(\n          (option: ExternalPaymentOptionMetadata) =>\n            enabledExtPaymentOptions.includes(option.id) ||\n            (hasAllPaymentApps && option.optionType === \"zkp2p\") ||\n            (hasAllExchanges && option.optionType === \"exchange\"),\n        );\n        const optionsByType: Map<\n          \"external\" | \"zkp2p\" | \"exchange\",\n          ExternalPaymentOptionMetadata[]\n        > = new Map();\n        filteredOptions.forEach((option) => {\n          const { optionType } = option;\n          if (!optionsByType.has(optionType)) {\n            optionsByType.set(optionType, []);\n          }\n          optionsByType.get(optionType)!.push(option);\n        });\n\n        setOptions(optionsByType);\n      } catch (error) {\n        console.error(error);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    if (usdRequired != null && mode != null) {\n      refreshExternalPaymentOptions(usdRequired, mode);\n    }\n    // TODO: this is an ugly way to handle polling/refresh\n    // Notice the load-bearing JSON.stringify() to prevent a visible infinite\n    // refresh glitch on the SelectMethod screen. Replace this useEffect().\n    //\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [usdRequired, JSON.stringify(filterIds), platform, mode, trpc]);\n\n  return { options, loading };\n}\n"],"names":["mode"],"mappings":";;;AASA,MAAM,mCAAmC,MAAO,CAAA,MAAA;AAAA,EAC9C,sBAAA;AACF,CAAE,CAAA,MAAA;AAAA,EACA,CAAC,GAAA;AAAA;AAAA,IAEC,GAAQ,KAAA,sBAAA,CAAuB,cAC/B,IAAA,GAAA,KAAQ,sBAAuB,CAAA,KAAA;AAAA,GAAA;AACnC,CAAA,CAAA;AAEO,SAAS,yBAA0B,CAAA;AAAA,EACxC,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AACF,CAaE,EAAA;AACA,EAAA,MAAM,CAAC,OAAS,EAAA,UAAU,IAAI,QAE5B,iBAAA,IAAI,KAAK,CAAA,CAAA;AACX,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAE5C,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,6BAAA,GAAgC,OACpC,GAAA,EACAA,KACG,KAAA;AACH,MAAA,IAAI,CAAC,QAAU,EAAA,OAAA;AAEf,MAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AACf,MAAI,IAAA;AACF,QAAA,MAAM,UAAa,GAAA,MAAM,IAAK,CAAA,yBAAA,CAA0B,KAAM,CAAA;AAAA,UAC5D,QAAA;AAAA,UACA,IAAAA,EAAAA,KAAAA;AAAA,UACA,WAAa,EAAA,GAAA;AAAA,SACd,CAAA,CAAA;AAGD,QAAA,MAAM,2BACJ,SAAa,IAAA,gCAAA,CAAA;AAEf,QAAA,MAAM,oBAAoB,wBAAyB,CAAA,QAAA;AAAA,UACjD,sBAAuB,CAAA,cAAA;AAAA,SACzB,CAAA;AACA,QAAA,MAAM,kBAAkB,wBAAyB,CAAA,QAAA;AAAA,UAC/C,sBAAuB,CAAA,YAAA;AAAA,SACzB,CAAA;AAEA,QAAA,MAAM,kBAAkB,UAAW,CAAA,MAAA;AAAA,UACjC,CAAC,MAAA,KACC,wBAAyB,CAAA,QAAA,CAAS,MAAO,CAAA,EAAE,CAC1C,IAAA,iBAAA,IAAqB,MAAO,CAAA,UAAA,KAAe,OAC3C,IAAA,eAAA,IAAmB,OAAO,UAAe,KAAA,UAAA;AAAA,SAC9C,CAAA;AACA,QAAM,MAAA,aAAA,uBAGE,GAAI,EAAA,CAAA;AACZ,QAAgB,eAAA,CAAA,OAAA,CAAQ,CAAC,MAAW,KAAA;AAClC,UAAM,MAAA,EAAE,YAAe,GAAA,MAAA,CAAA;AACvB,UAAA,IAAI,CAAC,aAAA,CAAc,GAAI,CAAA,UAAU,CAAG,EAAA;AAClC,YAAc,aAAA,CAAA,GAAA,CAAI,UAAY,EAAA,EAAE,CAAA,CAAA;AAAA,WAClC;AACA,UAAA,aAAA,CAAc,GAAI,CAAA,UAAU,CAAG,CAAA,IAAA,CAAK,MAAM,CAAA,CAAA;AAAA,SAC3C,CAAA,CAAA;AAED,QAAA,UAAA,CAAW,aAAa,CAAA,CAAA;AAAA,eACjB,KAAO,EAAA;AACd,QAAA,OAAA,CAAQ,MAAM,KAAK,CAAA,CAAA;AAAA,OACnB,SAAA;AACA,QAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,OAClB;AAAA,KACF,CAAA;AAEA,IAAI,IAAA,WAAA,IAAe,IAAQ,IAAA,IAAA,IAAQ,IAAM,EAAA;AACvC,MAAA,6BAAA,CAA8B,aAAa,IAAI,CAAA,CAAA;AAAA,KACjD;AAAA,GAMF,EAAG,CAAC,WAAA,EAAa,IAAK,CAAA,SAAA,CAAU,SAAS,CAAG,EAAA,QAAA,EAAU,IAAM,EAAA,IAAI,CAAC,CAAA,CAAA;AAEjE,EAAO,OAAA,EAAE,SAAS,OAAQ,EAAA,CAAA;AAC5B;;;;"}

package/build/src/hooks/useFitText.js

@@ -1,147 +1,132 @@
 import { useCallback, useRef, useState, useEffect, useLayoutEffect } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 
-// https://github.com/saltycrane/use-fit-text
 const LOG_LEVEL = {
-    debug: 10,
-    info: 20,
-    warn: 30,
-    error: 40,
-    none: 100,
+  debug: 10,
+  info: 20,
+  warn: 30,
+  error: 40,
+  none: 100
 };
-// Suppress `useLayoutEffect` warning when rendering on the server
-// https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
-const useIsoLayoutEffect = typeof window !== "undefined" &&
-    window.document &&
-    window.document.createElement !== undefined
-    ? useLayoutEffect
-    : useEffect;
-const useFitText = ({ logLevel: logLevelOption = "info", maxFontSize = 100, minFontSize = 20, onFinish, onStart, resolution = 5, } = {}) => {
-    const logLevel = LOG_LEVEL[logLevelOption];
-    const initState = useCallback(() => {
-        return {
-            calcKey: 0,
-            fontSize: maxFontSize,
-            fontSizePrev: minFontSize,
-            fontSizeMax: maxFontSize,
-            fontSizeMin: minFontSize,
-        };
-    }, [maxFontSize, minFontSize]);
-    const ref = useRef(null);
-    const innerHtmlPrevRef = useRef();
-    const isCalculatingRef = useRef(false);
-    const [state, setState] = useState(initState);
-    const { calcKey, fontSize, fontSizeMax, fontSizeMin, fontSizePrev } = state;
-    // Montior div size changes and recalculate on resize
-    let animationFrameId = null;
-    const [ro] = useState(() => new ResizeObserver(() => {
-        animationFrameId = window.requestAnimationFrame(() => {
-            if (isCalculatingRef.current) {
-                return;
-            }
-            onStart && onStart();
-            isCalculatingRef.current = true;
-            // `calcKey` is used in the dependencies array of
-            // `useIsoLayoutEffect` below. It is incremented so that the font size
-            // will be recalculated even if the previous state didn't change (e.g.
-            // when the text fit initially).
-            setState({
-                ...initState(),
-                calcKey: calcKey + 1,
-            });
-        });
-    }));
-    useEffect(() => {
-        if (ref.current) {
-            ro.observe(ref.current);
-        }
-        return () => {
-            animationFrameId && window.cancelAnimationFrame(animationFrameId);
-            ro.disconnect();
-        };
-    }, [animationFrameId, ro]);
-    // Recalculate when the div contents change
-    const innerHtml = ref.current && ref.current.innerHTML;
-    useEffect(() => {
-        if (calcKey === 0 || isCalculatingRef.current)
-            return;
-        if (innerHtml !== innerHtmlPrevRef.current) {
-            onStart && onStart();
-            setState({
-                ...initState(),
-                calcKey: calcKey + 1,
-            });
-        }
-        innerHtmlPrevRef.current = innerHtml;
-    }, [calcKey, initState, innerHtml, onStart]);
-    // Check overflow and resize font
-    useIsoLayoutEffect(() => {
-        // Don't start calculating font size until the `resizeKey` is incremented
-        // above in the `ResizeObserver` callback. This avoids an extra resize
-        // on initialization.
-        if (calcKey === 0) {
-            return;
-        }
-        const isWithinResolution = Math.abs(fontSize - fontSizePrev) <= resolution;
-        const isOverflow = !!ref.current &&
-            (ref.current.scrollHeight > ref.current.offsetHeight ||
-                ref.current.scrollWidth > ref.current.offsetWidth);
-        const isFailed = isOverflow && fontSize === fontSizePrev;
-        const isAsc = fontSize > fontSizePrev;
-        // Return if the font size has been adjusted "enough" (change within `resolution`)
-        // reduce font size by one increment if it's overflowing.
-        if (isWithinResolution) {
-            if (isFailed) {
-                isCalculatingRef.current = false;
-                if (logLevel <= LOG_LEVEL.info) {
-                    console.info(`[use-fit-text] reached \`minFontSize = ${minFontSize}\` without fitting text`);
-                }
-            }
-            else if (isOverflow) {
-                setState({
-                    fontSize: isAsc ? fontSizePrev : fontSizeMin,
-                    fontSizeMax,
-                    fontSizeMin,
-                    fontSizePrev,
-                    calcKey,
-                });
-            }
-            else {
-                isCalculatingRef.current = false;
-                onFinish && onFinish(fontSize);
-            }
-            return;
+const useIsoLayoutEffect = typeof window !== "undefined" && window.document && window.document.createElement !== void 0 ? useLayoutEffect : useEffect;
+const useFitText = ({
+  logLevel: logLevelOption = "info",
+  maxFontSize = 100,
+  minFontSize = 20,
+  onFinish,
+  onStart,
+  resolution = 5
+} = {}) => {
+  const logLevel = LOG_LEVEL[logLevelOption];
+  const initState = useCallback(() => {
+    return {
+      calcKey: 0,
+      fontSize: maxFontSize,
+      fontSizePrev: minFontSize,
+      fontSizeMax: maxFontSize,
+      fontSizeMin: minFontSize
+    };
+  }, [maxFontSize, minFontSize]);
+  const ref = useRef(null);
+  const innerHtmlPrevRef = useRef();
+  const isCalculatingRef = useRef(false);
+  const [state, setState] = useState(initState);
+  const { calcKey, fontSize, fontSizeMax, fontSizeMin, fontSizePrev } = state;
+  let animationFrameId = null;
+  const [ro] = useState(
+    () => new ResizeObserver(() => {
+      animationFrameId = window.requestAnimationFrame(() => {
+        if (isCalculatingRef.current) {
+          return;
         }
-        // Binary search to adjust font size
-        let delta;
-        let newMax = fontSizeMax;
-        let newMin = fontSizeMin;
-        if (isOverflow) {
-            delta = isAsc ? fontSizePrev - fontSize : fontSizeMin - fontSize;
-            newMax = Math.min(fontSizeMax, fontSize);
-        }
-        else {
-            delta = isAsc ? fontSizeMax - fontSize : fontSizePrev - fontSize;
-            newMin = Math.max(fontSizeMin, fontSize);
+        onStart && onStart();
+        isCalculatingRef.current = true;
+        setState({
+          ...initState(),
+          calcKey: calcKey + 1
+        });
+      });
+    })
+  );
+  useEffect(() => {
+    if (ref.current) {
+      ro.observe(ref.current);
+    }
+    return () => {
+      animationFrameId && window.cancelAnimationFrame(animationFrameId);
+      ro.disconnect();
+    };
+  }, [animationFrameId, ro]);
+  const innerHtml = ref.current && ref.current.innerHTML;
+  useEffect(() => {
+    if (calcKey === 0 || isCalculatingRef.current) return;
+    if (innerHtml !== innerHtmlPrevRef.current) {
+      onStart && onStart();
+      setState({
+        ...initState(),
+        calcKey: calcKey + 1
+      });
+    }
+    innerHtmlPrevRef.current = innerHtml;
+  }, [calcKey, initState, innerHtml, onStart]);
+  useIsoLayoutEffect(() => {
+    if (calcKey === 0) {
+      return;
+    }
+    const isWithinResolution = Math.abs(fontSize - fontSizePrev) <= resolution;
+    const isOverflow = !!ref.current && (ref.current.scrollHeight > ref.current.offsetHeight || ref.current.scrollWidth > ref.current.offsetWidth);
+    const isFailed = isOverflow && fontSize === fontSizePrev;
+    const isAsc = fontSize > fontSizePrev;
+    if (isWithinResolution) {
+      if (isFailed) {
+        isCalculatingRef.current = false;
+        if (logLevel <= LOG_LEVEL.info) {
+          console.info(
+            `[use-fit-text] reached \`minFontSize = ${minFontSize}\` without fitting text`
+          );
         }
+      } else if (isOverflow) {
         setState({
-            calcKey,
-            fontSize: fontSize + delta / 2,
-            fontSizeMax: newMax,
-            fontSizeMin: newMin,
-            fontSizePrev: fontSize,
+          fontSize: isAsc ? fontSizePrev : fontSizeMin,
+          fontSizeMax,
+          fontSizeMin,
+          fontSizePrev,
+          calcKey
         });
-    }, [
-        calcKey,
-        fontSize,
-        fontSizeMax,
-        fontSizeMin,
-        fontSizePrev,
-        onFinish,
-        ref,
-        resolution,
-    ]);
-    return { fontSize, ref };
+      } else {
+        isCalculatingRef.current = false;
+        onFinish && onFinish(fontSize);
+      }
+      return;
+    }
+    let delta;
+    let newMax = fontSizeMax;
+    let newMin = fontSizeMin;
+    if (isOverflow) {
+      delta = isAsc ? fontSizePrev - fontSize : fontSizeMin - fontSize;
+      newMax = Math.min(fontSizeMax, fontSize);
+    } else {
+      delta = isAsc ? fontSizeMax - fontSize : fontSizePrev - fontSize;
+      newMin = Math.max(fontSizeMin, fontSize);
+    }
+    setState({
+      calcKey,
+      fontSize: fontSize + delta / 2,
+      fontSizeMax: newMax,
+      fontSizeMin: newMin,
+      fontSizePrev: fontSize
+    });
+  }, [
+    calcKey,
+    fontSize,
+    fontSizeMax,
+    fontSizeMin,
+    fontSizePrev,
+    onFinish,
+    ref,
+    resolution
+  ]);
+  return { fontSize, ref };
 };
 
 export { useFitText as default };

package/build/src/hooks/useFitText.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFitText.js","sources":["../../../src/hooks/useFitText.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}
+{"version":3,"file":"useFitText.js","sources":["../../../src/hooks/useFitText.tsx"],"sourcesContent":["// https://github.com/saltycrane/use-fit-text\n\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\nexport type TLogLevel = \"debug\" | \"info\" | \"warn\" | \"error\" | \"none\";\n\nexport type TOptions = {\n  logLevel?: TLogLevel;\n  maxFontSize?: number;\n  minFontSize?: number;\n  onFinish?: (fontSize: number) => void;\n  onStart?: () => void;\n  resolution?: number;\n};\n\nconst LOG_LEVEL: Record<TLogLevel, number> = {\n  debug: 10,\n  info: 20,\n  warn: 30,\n  error: 40,\n  none: 100,\n};\n\n// Suppress `useLayoutEffect` warning when rendering on the server\n// https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useIsoLayoutEffect =\n  typeof window !== \"undefined\" &&\n  window.document &&\n  window.document.createElement !== undefined\n    ? useLayoutEffect\n    : useEffect;\n\nconst useFitText = ({\n  logLevel: logLevelOption = \"info\",\n  maxFontSize = 100,\n  minFontSize = 20,\n  onFinish,\n  onStart,\n  resolution = 5,\n}: TOptions = {}) => {\n  const logLevel = LOG_LEVEL[logLevelOption];\n\n  const initState = useCallback(() => {\n    return {\n      calcKey: 0,\n      fontSize: maxFontSize,\n      fontSizePrev: minFontSize,\n      fontSizeMax: maxFontSize,\n      fontSizeMin: minFontSize,\n    };\n  }, [maxFontSize, minFontSize]);\n\n  const ref = useRef<HTMLDivElement>(null);\n  const innerHtmlPrevRef = useRef<string | null>();\n  const isCalculatingRef = useRef(false);\n  const [state, setState] = useState(initState);\n  const { calcKey, fontSize, fontSizeMax, fontSizeMin, fontSizePrev } = state;\n\n  // Montior div size changes and recalculate on resize\n  let animationFrameId: number | null = null;\n  const [ro] = useState(\n    () =>\n      new ResizeObserver(() => {\n        animationFrameId = window.requestAnimationFrame(() => {\n          if (isCalculatingRef.current) {\n            return;\n          }\n          onStart && onStart();\n          isCalculatingRef.current = true;\n          // `calcKey` is used in the dependencies array of\n          // `useIsoLayoutEffect` below. It is incremented so that the font size\n          // will be recalculated even if the previous state didn't change (e.g.\n          // when the text fit initially).\n          setState({\n            ...initState(),\n            calcKey: calcKey + 1,\n          });\n        });\n      }),\n  );\n\n  useEffect(() => {\n    if (ref.current) {\n      ro.observe(ref.current);\n    }\n    return () => {\n      animationFrameId && window.cancelAnimationFrame(animationFrameId);\n      ro.disconnect();\n    };\n  }, [animationFrameId, ro]);\n\n  // Recalculate when the div contents change\n  const innerHtml = ref.current && ref.current.innerHTML;\n  useEffect(() => {\n    if (calcKey === 0 || isCalculatingRef.current) return;\n\n    if (innerHtml !== innerHtmlPrevRef.current) {\n      onStart && onStart();\n      setState({\n        ...initState(),\n        calcKey: calcKey + 1,\n      });\n    }\n    innerHtmlPrevRef.current = innerHtml;\n  }, [calcKey, initState, innerHtml, onStart]);\n\n  // Check overflow and resize font\n  useIsoLayoutEffect(() => {\n    // Don't start calculating font size until the `resizeKey` is incremented\n    // above in the `ResizeObserver` callback. This avoids an extra resize\n    // on initialization.\n    if (calcKey === 0) {\n      return;\n    }\n\n    const isWithinResolution = Math.abs(fontSize - fontSizePrev) <= resolution;\n    const isOverflow =\n      !!ref.current &&\n      (ref.current.scrollHeight > ref.current.offsetHeight ||\n        ref.current.scrollWidth > ref.current.offsetWidth);\n    const isFailed = isOverflow && fontSize === fontSizePrev;\n    const isAsc = fontSize > fontSizePrev;\n\n    // Return if the font size has been adjusted \"enough\" (change within `resolution`)\n    // reduce font size by one increment if it's overflowing.\n    if (isWithinResolution) {\n      if (isFailed) {\n        isCalculatingRef.current = false;\n        if (logLevel <= LOG_LEVEL.info) {\n          console.info(\n            `[use-fit-text] reached \\`minFontSize = ${minFontSize}\\` without fitting text`,\n          );\n        }\n      } else if (isOverflow) {\n        setState({\n          fontSize: isAsc ? fontSizePrev : fontSizeMin,\n          fontSizeMax,\n          fontSizeMin,\n          fontSizePrev,\n          calcKey,\n        });\n      } else {\n        isCalculatingRef.current = false;\n        onFinish && onFinish(fontSize);\n      }\n      return;\n    }\n\n    // Binary search to adjust font size\n    let delta: number;\n    let newMax = fontSizeMax;\n    let newMin = fontSizeMin;\n    if (isOverflow) {\n      delta = isAsc ? fontSizePrev - fontSize : fontSizeMin - fontSize;\n      newMax = Math.min(fontSizeMax, fontSize);\n    } else {\n      delta = isAsc ? fontSizeMax - fontSize : fontSizePrev - fontSize;\n      newMin = Math.max(fontSizeMin, fontSize);\n    }\n    setState({\n      calcKey,\n      fontSize: fontSize + delta / 2,\n      fontSizeMax: newMax,\n      fontSizeMin: newMin,\n      fontSizePrev: fontSize,\n    });\n  }, [\n    calcKey,\n    fontSize,\n    fontSizeMax,\n    fontSizeMin,\n    fontSizePrev,\n    onFinish,\n    ref,\n    resolution,\n  ]);\n\n  return { fontSize, ref };\n};\n\nexport default useFitText;\n"],"names":[],"mappings":"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"}

package/build/src/hooks/useFocusTrap.js

@@ -3,11 +3,10 @@ import { useEffect, useRef } from 'react';
 
 const KEYCODE_TAB = 9;
 function useFocusTrap() {
-    const elRef = useRef(null);
-    function handleFocus(e) {
-        if (!elRef.current)
-            return;
-        var focusableEls = elRef.current.querySelectorAll(`
+  const elRef = useRef(null);
+  function handleFocus(e) {
+    if (!elRef.current) return;
+    var focusableEls = elRef.current.querySelectorAll(`
         a[href]:not(:disabled),
         button:not(:disabled),
         textarea:not(:disabled),
@@ -16,41 +15,38 @@ function useFocusTrap() {
         input[type="checkbox"]:not(:disabled),
         select:not(:disabled)
       `), firstFocusableEl = focusableEls[0], lastFocusableEl = focusableEls[focusableEls.length - 1];
-        var isTabPressed = e.key === "Tab" || e.keyCode === KEYCODE_TAB;
-        if (!isTabPressed) {
-            return;
-        }
-        if (e.shiftKey) {
-            /* shift + tab */ if (document.activeElement === firstFocusableEl) {
-                lastFocusableEl.focus();
-                e.preventDefault();
-            }
-        } /* tab */
-        else {
-            if (document.activeElement === lastFocusableEl) {
-                firstFocusableEl.focus();
-                e.preventDefault();
-            }
-        }
+    var isTabPressed = e.key === "Tab" || e.keyCode === KEYCODE_TAB;
+    if (!isTabPressed) {
+      return;
     }
-    useEffect(() => {
-        const el = elRef.current;
-        if (el == null)
-            return;
-        el.addEventListener("keydown", handleFocus);
-        el.focus({ preventScroll: true });
-        return () => el.removeEventListener("keydown", handleFocus);
-    }, []);
-    return elRef;
+    if (e.shiftKey) {
+      if (document.activeElement === firstFocusableEl) {
+        lastFocusableEl.focus();
+        e.preventDefault();
+      }
+    } else {
+      if (document.activeElement === lastFocusableEl) {
+        firstFocusableEl.focus();
+        e.preventDefault();
+      }
+    }
+  }
+  useEffect(() => {
+    const el = elRef.current;
+    if (el == null) return;
+    el.addEventListener("keydown", handleFocus);
+    el.focus({ preventScroll: true });
+    return () => el.removeEventListener("keydown", handleFocus);
+  }, []);
+  return elRef;
 }
 function FocusTrap(props) {
-    const elRef = useFocusTrap();
-    useEffect(() => {
-        if (!elRef.current)
-            return;
-        elRef.current.focus({ preventScroll: true });
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-    return (jsx("div", { ref: elRef, tabIndex: 0, children: props.children }));
+  const elRef = useFocusTrap();
+  useEffect(() => {
+    if (!elRef.current) return;
+    elRef.current.focus({ preventScroll: true });
+  }, []);
+  return /* @__PURE__ */ jsx("div", { ref: elRef, tabIndex: 0, children: props.children });
 }
 
 export { FocusTrap as default };

package/build/src/hooks/useFocusTrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.js","sources":["../../../src/hooks/useFocusTrap.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAIA,MAAM,WAAW,GAAG,CAAC,CAAC;AAEtB,SAAS,YAAY,GAAA;AACnB,IAAA,MAAM,KAAK,GAAG,MAAM,CAAM,IAAI,CAAC,CAAC;IAEhC,SAAS,WAAW,CAAC,CAAM,EAAA;QACzB,IAAI,CAAC,KAAK,CAAC,OAAO;YAAE,OAAO;AAC3B,QAAA,IAAI,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAA;;;;;;;;AAQ/C,MAAA,CAAA,CAAC,EACF,gBAAgB,GAAG,YAAY,CAAC,CAAC,CAAC,EAClC,eAAe,GAAG,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AAE1D,QAAA,IAAI,YAAY,GAAG,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,OAAO,KAAK,WAAW,CAAC;QAEhE,IAAI,CAAC,YAAY,EAAE;YACjB,OAAO;SACR;AAED,QAAA,IAAI,CAAC,CAAC,QAAQ,EAAE;8BACI,IAAI,QAAQ,CAAC,aAAa,KAAK,gBAAgB,EAAE;gBACjE,eAAe,CAAC,KAAK,EAAE,CAAC;gBACxB,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;AACH,SAAC;aAAgB;AACf,YAAA,IAAI,QAAQ,CAAC,aAAa,KAAK,eAAe,EAAE;gBAC9C,gBAAgB,CAAC,KAAK,EAAE,CAAC;gBACzB,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;SACF;KACF;IAED,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC;QACzB,IAAI,EAAE,IAAI,IAAI;YAAE,OAAO;AACvB,QAAA,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;QAC5C,EAAE,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;QAClC,OAAO,MAAM,EAAE,CAAC,mBAAmB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;KAC7D,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,OAAO,KAAK,CAAC;AACf,CAAC;AAEuB,SAAA,SAAS,CAAC,KAAU,EAAA;AAC1C,IAAA,MAAM,KAAK,GAAG,YAAY,EAAE,CAAC;IAE7B,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,KAAK,CAAC,OAAO;YAAE,OAAO;QAC3B,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;AAC/C,KAAC,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,YACzB,KAAK,CAAC,QAAQ,EAAA,CACX,EACN;AACJ;;;;"}
+{"version":3,"file":"useFocusTrap.js","sources":["../../../src/hooks/useFocusTrap.tsx"],"sourcesContent":["// Based on https://hiddedevries.nl/en/blog/2017-01-29-using-javascript-to-trap-focus-in-an-element\n\nimport { useEffect, useRef } from \"react\";\n\nconst KEYCODE_TAB = 9;\n\nfunction useFocusTrap() {\n  const elRef = useRef<any>(null);\n\n  function handleFocus(e: any) {\n    if (!elRef.current) return;\n    var focusableEls = elRef.current.querySelectorAll(`\n        a[href]:not(:disabled),\n        button:not(:disabled),\n        textarea:not(:disabled),\n        input[type=\"text\"]:not(:disabled),\n        input[type=\"radio\"]:not(:disabled),\n        input[type=\"checkbox\"]:not(:disabled),\n        select:not(:disabled)\n      `),\n      firstFocusableEl = focusableEls[0],\n      lastFocusableEl = focusableEls[focusableEls.length - 1];\n\n    var isTabPressed = e.key === \"Tab\" || e.keyCode === KEYCODE_TAB;\n\n    if (!isTabPressed) {\n      return;\n    }\n\n    if (e.shiftKey) {\n      /* shift + tab */ if (document.activeElement === firstFocusableEl) {\n        lastFocusableEl.focus();\n        e.preventDefault();\n      }\n    } /* tab */ else {\n      if (document.activeElement === lastFocusableEl) {\n        firstFocusableEl.focus();\n        e.preventDefault();\n      }\n    }\n  }\n\n  useEffect(() => {\n    const el = elRef.current;\n    if (el == null) return;\n    el.addEventListener(\"keydown\", handleFocus);\n    el.focus({ preventScroll: true });\n    return () => el.removeEventListener(\"keydown\", handleFocus);\n  }, []);\n\n  return elRef;\n}\n\nexport default function FocusTrap(props: any) {\n  const elRef = useFocusTrap();\n\n  useEffect(() => {\n    if (!elRef.current) return;\n    elRef.current.focus({ preventScroll: true });\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <div ref={elRef} tabIndex={0}>\n      {props.children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAIA,MAAM,WAAc,GAAA,CAAA,CAAA;AAEpB,SAAS,YAAe,GAAA;AACtB,EAAM,MAAA,KAAA,GAAQ,OAAY,IAAI,CAAA,CAAA;AAE9B,EAAA,SAAS,YAAY,CAAQ,EAAA;AAC3B,IAAI,IAAA,CAAC,MAAM,OAAS,EAAA,OAAA;AACpB,IAAI,IAAA,YAAA,GAAe,KAAM,CAAA,OAAA,CAAQ,gBAAiB,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQ/C,CAAA,CAAA,EACD,mBAAmB,YAAa,CAAA,CAAC,GACjC,eAAkB,GAAA,YAAA,CAAa,YAAa,CAAA,MAAA,GAAS,CAAC,CAAA,CAAA;AAExD,IAAA,IAAI,YAAe,GAAA,CAAA,CAAE,GAAQ,KAAA,KAAA,IAAS,EAAE,OAAY,KAAA,WAAA,CAAA;AAEpD,IAAA,IAAI,CAAC,YAAc,EAAA;AACjB,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,EAAE,QAAU,EAAA;AACI,MAAI,IAAA,QAAA,CAAS,kBAAkB,gBAAkB,EAAA;AACjE,QAAA,eAAA,CAAgB,KAAM,EAAA,CAAA;AACtB,QAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AAAA,OACnB;AAAA,KACe,MAAA;AACf,MAAI,IAAA,QAAA,CAAS,kBAAkB,eAAiB,EAAA;AAC9C,QAAA,gBAAA,CAAiB,KAAM,EAAA,CAAA;AACvB,QAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AAAA,OACnB;AAAA,KACF;AAAA,GACF;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,KAAK,KAAM,CAAA,OAAA,CAAA;AACjB,IAAA,IAAI,MAAM,IAAM,EAAA,OAAA;AAChB,IAAG,EAAA,CAAA,gBAAA,CAAiB,WAAW,WAAW,CAAA,CAAA;AAC1C,IAAA,EAAA,CAAG,KAAM,CAAA,EAAE,aAAe,EAAA,IAAA,EAAM,CAAA,CAAA;AAChC,IAAA,OAAO,MAAM,EAAA,CAAG,mBAAoB,CAAA,SAAA,EAAW,WAAW,CAAA,CAAA;AAAA,GAC5D,EAAG,EAAE,CAAA,CAAA;AAEL,EAAO,OAAA,KAAA,CAAA;AACT,CAAA;AAEA,SAAwB,UAAU,KAAY,EAAA;AAC5C,EAAA,MAAM,QAAQ,YAAa,EAAA,CAAA;AAE3B,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAC,MAAM,OAAS,EAAA,OAAA;AACpB,IAAA,KAAA,CAAM,OAAQ,CAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA,CAAA;AAAA,GAC7C,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,2BACG,KAAI,EAAA,EAAA,GAAA,EAAK,OAAO,QAAU,EAAA,CAAA,EACxB,gBAAM,QACT,EAAA,CAAA,CAAA;AAEJ;;;;"}