fictoan-react 2.0.0-beta.17 → 2.0.0-beta.19

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsxs as h, jsx as a } from "react/jsx-runtime";
+import y, { useRef as g, useCallback as p, useEffect as x } from "react";
+import { Nav as S, Div as v } from "../Element/Tags.js";
+/* empty css         */
+import { Divider as B } from "../Divider/Divider.js";
+import { Text as C } from "../Typography/Text.js";
+import { Element as T } from "../Element/Element.js";
+const j = y.forwardRef(
+  ({ tabs: n, additionalNavContentWrapper: E, defaultActiveTab: $, align: w = "left", isFullWidth: N, ...R }, A) => {
+    const c = n.findIndex((e) => e.key === $), o = c > -1 ? c : 0, [t, s] = y.useState(
+      n.length > 0 ? n[o] : void 0
+    ), [D, k] = y.useState(!1), u = g([]), i = g(null), d = p((e) => {
+      (t == null ? void 0 : t.key) !== e.key && (k(!0), i.current !== null && clearTimeout(i.current), i.current = setTimeout(() => {
+        s(e), k(!1), i.current = null;
+      }, 150));
+    }, [t == null ? void 0 : t.key]);
+    x(() => () => {
+      i.current !== null && clearTimeout(i.current);
+    }, []), x(() => {
+      n.length > 0 ? n.find((r) => r.key === (t == null ? void 0 : t.key)) || s(n[o]) : s(void 0);
+    }, [n, o, t == null ? void 0 : t.key]);
+    const I = p((e, r) => {
+      var m;
+      let l = r;
+      if (e.key === "ArrowRight")
+        l = (r + 1) % n.length;
+      else if (e.key === "ArrowLeft")
+        l = (r - 1 + n.length) % n.length;
+      else if (e.key === "Home")
+        l = 0;
+      else if (e.key === "End")
+        l = n.length - 1;
+      else
+        return;
+      e.preventDefault();
+      const f = n[l];
+      f && (d(f), (m = u.current[l]) == null || m.focus());
+    }, [n, d]);
+    return t ? /* @__PURE__ */ h(
+      T,
+      {
+        as: "div",
+        "data-tabs": !0,
+        ref: A,
+        "data-align": w,
+        "data-full-width": N,
+        ...R,
+        children: [
+          /* @__PURE__ */ a(S, { "data-tabs-nav": !0, role: "tablist", "aria-label": "Tab Navigation", children: /* @__PURE__ */ h("ul", { className: "tab-labels-list", role: "none", children: [
+            n.map((e, r) => /* @__PURE__ */ a("li", { role: "none", children: /* @__PURE__ */ a(
+              T,
+              {
+                as: "button",
+                ref: (l) => {
+                  u.current[r] = l;
+                },
+                id: `tab-${e.key}`,
+                role: "tab",
+                "aria-selected": t.key === e.key,
+                "aria-controls": `tab-panel-${e.key}`,
+                tabIndex: t.key === e.key ? 0 : -1,
+                "data-tab-label": !0,
+                "data-active": t.key === e.key,
+                "data-alert": e.hasAlert,
+                onClick: () => d(e),
+                onKeyDown: (l) => I(l, r),
+                className: `tab-button ${t.key === e.key ? "is-active" : ""}`,
+                marginBottom: "nano",
+                children: /* @__PURE__ */ a(
+                  C,
+                  {
+                    className: `tab-label ${t.key === e.key ? "is-active" : ""} ${e.hasAlert ? "has-alert" : ""}`,
+                    children: e.label
+                  }
+                )
+              }
+            ) }, e.key)),
+            E
+          ] }) }),
+          /* @__PURE__ */ a(B, { kind: "tertiary", marginTop: "none", marginBottom: "micro" }),
+          n.map((e) => /* @__PURE__ */ a(
+            v,
+            {
+              id: `tab-panel-${e.key}`,
+              role: "tabpanel",
+              "aria-labelledby": `tab-${e.key}`,
+              tabIndex: t.key === e.key ? 0 : -1,
+              "data-tab-content": !0,
+              "data-active": t.key === e.key,
+              "data-exiting": t.key === e.key && D,
+              hidden: t.key !== e.key,
+              children: e.content
+            },
+            e.key
+          ))
+        ]
+      }
+    ) : null;
+  }
+);
+j.displayName = "Tabs";
+export {
+  j as Tabs
+};
+//# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useEffect, useCallback, useRef } from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { CommonAndHTMLProps } from \"../Element/constants\";\nimport { Div, Nav } from \"../Element/Tags\";\nimport { Element } from \"$element\";\n\n// STYLES ==============================================================================================================\nimport \"./tabs.css\";\n\n// OTHER ===============================================================================================================\nimport { Divider } from \"../Divider/Divider\";\nimport { Text } from \"../Typography/Text\";\n\ninterface TabType {\n        key        : string;\n        label      : React.ReactNode;\n        content    : React.ReactNode;\n        hasAlert ? : boolean;\n}\n\n// prettier-ignore\nexport interface TabsCustomProps {\n        tabs                          : TabType[];\n        additionalNavContentWrapper ? : React.ReactNode;\n        defaultActiveTab            ? : React.ReactNode;\n        align                       ? : \"left\" | \"centre\" | \"center\" | \"right\";\n        isFullWidth                 ? : boolean;\n}\n\nexport type TabsElementType = HTMLDivElement;\nexport type TabsProps = Omit<CommonAndHTMLProps<TabsElementType>, keyof TabsCustomProps> & TabsCustomProps;\n\nexport const Tabs = React.forwardRef(\n    (\n        {tabs, additionalNavContentWrapper, defaultActiveTab, align = \"left\", isFullWidth, ...props} : TabsProps,\n        ref : React.Ref<TabsElementType>) => {\n        const index = tabs.findIndex((tab) => tab.key === defaultActiveTab);\n        const defaultTabIndex = index > -1 ? index : 0;\n        const [ activeTab, setActiveTab ] = React.useState<TabType | undefined>(\n            tabs.length > 0 ? tabs[defaultTabIndex] : undefined,\n        );\n        const [ isExiting, setIsExiting ] = React.useState<boolean>(false);\n\n        // Refs for keyboard navigation to focus the tab buttons\n        const tabButtonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n        // Holds the pending exit-animation timer so rapid switching / unmount\n        // mid-transition can clear it instead of committing a stale tab.\n        const exitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n        // V2's performant animation logic\n        const handleTabChange = useCallback((tab : TabType) => {\n            if (activeTab?.key !== tab.key) {\n                setIsExiting(true);\n                // Cancel any in-flight transition before queuing a new one.\n                if (exitTimerRef.current !== null) {\n                    clearTimeout(exitTimerRef.current);\n                }\n                exitTimerRef.current = setTimeout(() => {\n                    setActiveTab(tab);\n                    setIsExiting(false);\n                    exitTimerRef.current = null;\n                }, 150); // Animation duration\n            }\n        }, [ activeTab?.key ]);\n\n        // Clear any pending exit-animation timer on unmount.\n        useEffect(() => {\n            return () => {\n                if (exitTimerRef.current !== null) {\n                    clearTimeout(exitTimerRef.current);\n                }\n            };\n        }, []);\n\n        useEffect(() => {\n            if (tabs.length > 0) {\n                // If the current active tab still exists in the new tabs array, keep it.\n                // This preserves the active state if the content of a tab changes.\n                const currentTabStillExists = tabs.find(tab => tab.key === activeTab?.key);\n                if (!currentTabStillExists) {\n                    // Otherwise, default to the designated default tab or the first one.\n                    setActiveTab(tabs[defaultTabIndex]);\n                }\n            } else {\n                setActiveTab(undefined);\n            }\n        }, [ tabs, defaultTabIndex, activeTab?.key ]);\n\n\n        const handleKeyDown = useCallback((event : React.KeyboardEvent, currentIndex : number) => {\n            let nextIndex = currentIndex;\n\n            if (event.key === \"ArrowRight\") {\n                nextIndex = (currentIndex + 1) % tabs.length;\n            } else if (event.key === \"ArrowLeft\") {\n                nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n            } else if (event.key === \"Home\") {\n                nextIndex = 0;\n            } else if (event.key === \"End\") {\n                nextIndex = tabs.length - 1;\n            } else {\n                // Exit if it's not a navigation key\n                return;\n            }\n\n            event.preventDefault();\n            const nextTab = tabs[nextIndex];\n            if (nextTab) {\n                handleTabChange(nextTab);\n                tabButtonRefs.current[nextIndex]?.focus();\n            }\n\n        }, [ tabs, handleTabChange ]);\n\n        if (!activeTab) {\n            return null; // Render nothing if there are no tabs or no active tab\n        }\n\n        return (\n            <Element<TabsElementType>\n                as=\"div\"\n                data-tabs\n                ref={ref}\n                data-align={align}\n                data-full-width={isFullWidth}\n                {...props}\n            >\n                <Nav data-tabs-nav role=\"tablist\" aria-label=\"Tab Navigation\">\n                    {/* role=\"none\" on the list + items removes their list semantics from the\n                        a11y tree so the role=\"tab\" buttons become the tablist's owned children\n                        (otherwise axe flags aria-required-children / aria-required-parent). */}\n                    <ul className=\"tab-labels-list\" role=\"none\">\n                        {tabs.map((tab, i) => (\n                            <li key={tab.key} role=\"none\">\n                                <Element<HTMLButtonElement>\n                                    as=\"button\"\n                                    ref={(el) => { tabButtonRefs.current[i] = el; }}\n                                    id={`tab-${tab.key}`}\n                                    role=\"tab\"\n                                    aria-selected={activeTab.key === tab.key}\n                                    aria-controls={`tab-panel-${tab.key}`}\n                                    tabIndex={activeTab.key === tab.key ? 0 : -1} // Roaming tabindex\n                                    data-tab-label\n                                    data-active={activeTab.key === tab.key}\n                                    data-alert={tab.hasAlert}\n                                    onClick={() => handleTabChange(tab)}\n                                    onKeyDown={(e) => handleKeyDown(e, i)}\n                                    className={`tab-button ${activeTab.key === tab.key ? \"is-active\" : \"\"}`}\n                                    marginBottom=\"nano\"\n                                >\n                                    <Text\n                                        className={`tab-label ${activeTab.key === tab.key ? \"is-active\" : \"\"} ${tab.hasAlert ? \"has-alert\" : \"\"}`}\n                                    >\n                                        {tab.label}\n                                    </Text>\n                                </Element>\n                            </li>\n                        ))}\n                        {additionalNavContentWrapper}\n                    </ul>\n                </Nav>\n\n                <Divider kind=\"tertiary\" marginTop=\"none\" marginBottom=\"micro\" />\n\n                {tabs.map((tab) => (\n                    <Div\n                        key={tab.key}\n                        id={`tab-panel-${tab.key}`}\n                        role=\"tabpanel\"\n                        aria-labelledby={`tab-${tab.key}`}\n                        tabIndex={activeTab.key === tab.key ? 0 : -1}\n                        data-tab-content\n                        data-active={activeTab.key === tab.key}\n                        data-exiting={activeTab.key === tab.key && isExiting}\n                        hidden={activeTab.key !== tab.key}\n                    >\n                        {tab.content}\n                    </Div>\n                ))}\n            </Element>\n        );\n    },\n);\nTabs.displayName = \"Tabs\";"],"names":["Tabs","React","tabs","additionalNavContentWrapper","defaultActiveTab","align","isFullWidth","props","ref","index","tab","defaultTabIndex","activeTab","setActiveTab","isExiting","setIsExiting","tabButtonRefs","useRef","exitTimerRef","handleTabChange","useCallback","useEffect","handleKeyDown","event","currentIndex","nextIndex","nextTab","_a","jsxs","Element","jsx","Nav","i","el","e","Text","Divider","Div"],"mappings":"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"}

package/dist/components/ThemeProvider/ThemeProvider.d.ts

@@ -7,6 +7,12 @@ export type ThemeProviderElementType = HTMLDivElement;
 export interface ThemeProviderProps extends CommonAndHTMLProps<ThemeProviderElementType> {
     themeList: string[];
     currentTheme: string;
+    /** localStorage key the theme is persisted under. Defaults to "fictoan-theme"; pass a unique
+     *  value (your package.json name works well) when multiple Fictoan apps can share an origin
+     *  (e.g. localhost during dev, GitHub Pages) so their themes don't collide. */
+    storageKey?: string;
+    /** Pass your CSP nonce so the no-flash inline script is allowed under a strict `script-src`. */
+    nonce?: string;
 }
 export declare const ThemeProvider: React.ForwardRefExoticComponent<ThemeProviderProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/ThemeProvider/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAqB1D,KAAK,gBAAgB,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AAK/E,eAAO,MAAM,QAAQ,QAAO,gBAM3B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC;AACtD,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB,CAAC,wBAAwB,CAAC;IACpF,SAAS,EAAM,MAAM,EAAE,CAAC;IACxB,YAAY,EAAG,MAAM,CAAC;CACzB;AAaD,eAAO,MAAM,aAAa,2FAuDzB,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAO1D,KAAK,gBAAgB,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AAK/E,eAAO,MAAM,QAAQ,QAAO,gBAM3B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC;AACtD,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB,CAAC,wBAAwB,CAAC;IACpF,SAAS,EAAM,MAAM,EAAE,CAAC;IACxB,YAAY,EAAG,MAAM,CAAC;IACtB;;mFAE+E;IAC/E,UAAW,CAAC,EAAG,MAAM,CAAC;IACtB,gGAAgG;IAChG,KAAW,CAAC,EAAG,MAAM,CAAC;CACzB;AAaD,eAAO,MAAM,aAAa,2FAqFzB,CAAC"}

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsxs as w, jsx as h } from "react/jsx-runtime";
+import m, { useState as N, useCallback as C, useEffect as _ } from "react";
+import { Element as I } from "../Element/Element.js";
+const p = "fictoan-theme";
+let y = !1;
+const P = ["", (e) => {
+}], v = m.createContext(void 0), R = () => {
+  const e = m.useContext(v);
+  return e === void 0 ? P : e;
+}, g = (e, o) => {
+  let a;
+  try {
+    a = localStorage.getItem(e) || void 0;
+  } catch {
+  }
+  return a || o;
+}, k = m.forwardRef(
+  ({ currentTheme: e, themeList: o, children: a, nonce: u, storageKey: c, ...S }, T) => {
+    const t = c ?? p, [r, E] = N(() => g(t) || e), i = C(
+      (n) => {
+        const s = typeof n == "function" ? n(r) : n, d = o.includes(s) ? s : o[0], f = () => {
+          document.documentElement.className = "", document.documentElement.classList.add(d);
+        }, l = typeof document < "u" ? document : null;
+        l && typeof l.startViewTransition == "function" ? l.startViewTransition(f) : typeof document < "u" && f(), E(d);
+        try {
+          localStorage.setItem(t, d);
+        } catch {
+        }
+      },
+      [r, o, t]
+    );
+    _(() => {
+      var s;
+      const n = g(t);
+      i(n || e), c === void 0 && !y && typeof process < "u" && ((s = process.env) == null ? void 0 : s.NODE_ENV) !== "production" && (y = !0, console.warn(
+        `[fictoan-react] ThemeProvider is persisting the theme to the default localStorage key "${p}". If more than one Fictoan app can share an origin (e.g. localhost during dev, GitHub Pages), pass a unique \`storageKey\` (your package.json name works well) so their themes don't collide.`
+      ));
+    }, [e, i, t, c]);
+    const x = `(function(){try{var t=localStorage.getItem(${JSON.stringify(t)})||${JSON.stringify(e)};if(t){document.documentElement.className=t;}}catch(e){}})();`;
+    return /* @__PURE__ */ w(v.Provider, { value: [r, i], children: [
+      /* @__PURE__ */ h("script", { nonce: u, dangerouslySetInnerHTML: { __html: x } }),
+      /* @__PURE__ */ h(I, { as: "div", "data-theme-provider": !0, ref: T, ...S, children: a })
+    ] });
+  }
+);
+k.displayName = "ThemeProvider";
+export {
+  k as ThemeProvider,
+  R as useTheme
+};
+//# sourceMappingURL=ThemeProvider.js.map

package/dist/components/ThemeProvider/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","sources":["../../../src/components/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useCallback, useEffect, useState } from \"react\";\n\n// ELEMENT =============================================================================================================\nimport { CommonAndHTMLProps } from \"../Element/constants\";\nimport { Element } from \"$element\";\n\nconst DEFAULT_STORAGE_KEY = \"fictoan-theme\";\nlet hasWarnedDefaultKey = false;\n\n// Create a tuple type for the theme context\ntype ThemeContextType = [string, React.Dispatch<React.SetStateAction<string>>];\n\nconst defaultContext: ThemeContextType = [\"\", (_) => {}];\nconst ThemeContext = React.createContext<ThemeContextType | undefined>(undefined);\n\nexport const useTheme = (): ThemeContextType => {\n    const context = React.useContext(ThemeContext);\n    if (context === undefined) {\n        return defaultContext;\n    }\n    return context;\n};\n\nexport type ThemeProviderElementType = HTMLDivElement;\nexport interface ThemeProviderProps extends CommonAndHTMLProps<ThemeProviderElementType> {\n    themeList    : string[];\n    currentTheme : string;\n    /** localStorage key the theme is persisted under. Defaults to \"fictoan-theme\"; pass a unique\n     *  value (your package.json name works well) when multiple Fictoan apps can share an origin\n     *  (e.g. localhost during dev, GitHub Pages) so their themes don't collide. */\n    storageKey ? : string;\n    /** Pass your CSP nonce so the no-flash inline script is allowed under a strict `script-src`. */\n    nonce      ? : string;\n}\n\nconst getTheme = (key: string, fallback?: string) => {\n    let theme;\n    try {\n        theme = localStorage.getItem(key) || undefined;\n    } catch (e) {\n        // Unsupported\n    }\n    return theme || fallback;\n};\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const ThemeProvider = React.forwardRef(\n    ({ currentTheme, themeList, children, nonce, storageKey, ...props }: ThemeProviderProps, ref: React.Ref<ThemeProviderElementType>) => {\n        const resolvedKey = storageKey ?? DEFAULT_STORAGE_KEY;\n        const [themeState, setThemeState] = useState<string>(() =>\n            getTheme(resolvedKey) || currentTheme);\n\n        const setTheme = useCallback(\n            (value: React.SetStateAction<string>) => {\n                // Handle both direct values and updater functions\n                const newTheme = typeof value === \"function\"\n                    ? value(themeState)\n                    : value;\n\n                const finalTheme = themeList.includes(newTheme)\n                    ? newTheme\n                    : themeList[0];\n\n                // The visible theme switch is documentElement.className changing,\n                // which all theme-* CSS rules cascade off. Wrap that mutation in\n                // a view transition so consumers get a smooth crossfade between\n                // themes without writing animation CSS. Falls back to instant\n                // change on browsers that don't support the API.\n                const applyClass = () => {\n                    document.documentElement.className = \"\";\n                    document.documentElement.classList.add(finalTheme);\n                };\n\n                const doc = typeof document !== \"undefined\"\n                    ? document as Document & { startViewTransition?: (cb: () => void) => unknown }\n                    : null;\n\n                if (doc && typeof doc.startViewTransition === \"function\") {\n                    doc.startViewTransition(applyClass);\n                } else if (typeof document !== \"undefined\") {\n                    applyClass();\n                }\n\n                setThemeState(finalTheme);\n                try {\n                    localStorage.setItem(resolvedKey, finalTheme);\n                } catch (e) {\n                    // Unsupported\n                }\n            },\n            [themeState, themeList, resolvedKey]\n        );\n\n        useEffect(() => {\n            const theme = getTheme(resolvedKey);\n            setTheme(theme || currentTheme);\n\n            if (\n                storageKey === undefined && !hasWarnedDefaultKey &&\n                typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n            ) {\n                hasWarnedDefaultKey = true;\n                console.warn(\n                    `[fictoan-react] ThemeProvider is persisting the theme to the default localStorage ` +\n                    `key \"${DEFAULT_STORAGE_KEY}\". If more than one Fictoan app can share an origin (e.g. ` +\n                    `localhost during dev, GitHub Pages), pass a unique \\`storageKey\\` (your package.json ` +\n                    `name works well) so their themes don't collide.`,\n                );\n            }\n        }, [currentTheme, setTheme, resolvedKey, storageKey]);\n\n        // No-flash pre-hydration script: set the persisted theme class on <html>\n        // before first paint, so the (un-gated, SSR-rendered) children don't flash\n        // the default theme. Reads the same storageKey as the component; falls back\n        // to currentTheme. Inline → strict-CSP consumers should pass a `nonce`.\n        // SSR/SSG: runs during initial HTML parse; pure CSR: a no-op (the mount\n        // effect applies the theme).\n        const noFlashScript =\n            `(function(){try{var t=localStorage.getItem(${JSON.stringify(resolvedKey)})` +\n            `||${JSON.stringify(currentTheme)};` +\n            `if(t){document.documentElement.className=t;}}catch(e){}})();`;\n\n        return (\n            <ThemeContext.Provider value={[themeState, setTheme]}>\n                <script nonce={nonce} dangerouslySetInnerHTML={{ __html: noFlashScript }} />\n                <Element<ThemeProviderElementType> as=\"div\" data-theme-provider ref={ref} {...props}>\n                    {children}\n                </Element>\n            </ThemeContext.Provider>\n        );\n    }\n);\nThemeProvider.displayName = \"ThemeProvider\";\n"],"names":["DEFAULT_STORAGE_KEY","hasWarnedDefaultKey","defaultContext","_","ThemeContext","React","useTheme","context","getTheme","key","fallback","theme","ThemeProvider","currentTheme","themeList","children","nonce","storageKey","props","ref","resolvedKey","themeState","setThemeState","useState","setTheme","useCallback","value","newTheme","finalTheme","applyClass","doc","useEffect","_a","noFlashScript","jsxs","jsx","Element"],"mappings":";;;AAOA,MAAMA,IAAsB;AAC5B,IAAIC,IAAsB;AAK1B,MAAMC,IAAmC,CAAC,IAAI,CAACC,MAAM;AAAC,CAAC,GACjDC,IAAeC,EAAM,cAA4C,MAAS,GAEnEC,IAAW,MAAwB;AAC5C,QAAMC,IAAUF,EAAM,WAAWD,CAAY;AAC7C,SAAIG,MAAY,SACLL,IAEJK;AACX,GAcMC,IAAW,CAACC,GAAaC,MAAsB;AACjD,MAAIC;AACJ,MAAI;AACA,IAAAA,IAAQ,aAAa,QAAQF,CAAG,KAAK;AAAA,EACzC,QAAY;AAAA,EAEZ;AACA,SAAOE,KAASD;AACpB,GAGaE,IAAgBP,EAAM;AAAA,EAC/B,CAAC,EAAE,cAAAQ,GAAc,WAAAC,GAAW,UAAAC,GAAU,OAAAC,GAAO,YAAAC,GAAY,GAAGC,EAAA,GAA6BC,MAA6C;AAClI,UAAMC,IAAcH,KAAcjB,GAC5B,CAACqB,GAAYC,CAAa,IAAIC,EAAiB,MACjDf,EAASY,CAAW,KAAKP,CAAY,GAEnCW,IAAWC;AAAA,MACb,CAACC,MAAwC;AAErC,cAAMC,IAAW,OAAOD,KAAU,aAC5BA,EAAML,CAAU,IAChBK,GAEAE,IAAad,EAAU,SAASa,CAAQ,IACxCA,IACAb,EAAU,CAAC,GAOXe,IAAa,MAAM;AACrB,mBAAS,gBAAgB,YAAY,IACrC,SAAS,gBAAgB,UAAU,IAAID,CAAU;AAAA,QACrD,GAEME,IAAM,OAAO,WAAa,MAC1B,WACA;AAEN,QAAIA,KAAO,OAAOA,EAAI,uBAAwB,aAC1CA,EAAI,oBAAoBD,CAAU,IAC3B,OAAO,WAAa,OAC3BA,EAAA,GAGJP,EAAcM,CAAU;AACxB,YAAI;AACA,uBAAa,QAAQR,GAAaQ,CAAU;AAAA,QAChD,QAAY;AAAA,QAEZ;AAAA,MACJ;AAAA,MACA,CAACP,GAAYP,GAAWM,CAAW;AAAA,IAAA;AAGvC,IAAAW,EAAU,MAAM;;AACZ,YAAMpB,IAAQH,EAASY,CAAW;AAClC,MAAAI,EAASb,KAASE,CAAY,GAG1BI,MAAe,UAAa,CAAChB,KAC7B,OAAO,UAAY,SAAe+B,IAAA,QAAQ,QAAR,gBAAAA,EAAa,cAAa,iBAE5D/B,IAAsB,IACtB,QAAQ;AAAA,QACJ,0FACQD,CAAmB;AAAA,MAAA;AAAA,IAKvC,GAAG,CAACa,GAAcW,GAAUJ,GAAaH,CAAU,CAAC;AAQpD,UAAMgB,IACF,8CAA8C,KAAK,UAAUb,CAAW,CAAC,MACpE,KAAK,UAAUP,CAAY,CAAC;AAGrC,WACI,gBAAAqB,EAAC9B,EAAa,UAAb,EAAsB,OAAO,CAACiB,GAAYG,CAAQ,GAC/C,UAAA;AAAA,MAAA,gBAAAW,EAAC,YAAO,OAAAnB,GAAc,yBAAyB,EAAE,QAAQiB,KAAiB;AAAA,MAC1E,gBAAAE,EAACC,KAAkC,IAAG,OAAM,uBAAmB,IAAC,KAAAjB,GAAW,GAAGD,GACzE,UAAAH,EAAA,CACL;AAAA,IAAA,GACJ;AAAA,EAER;AACJ;AACAH,EAAc,cAAc;"}

package/dist/components/Toast/ToastItem/ToastItem.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { useState as u, useEffect as r } from "react";
+/* empty css               */
+import { Element as c } from "../../Element/Element.js";
+const f = ({
+  id: a,
+  duration: e = 4,
+  onClose: i,
+  children: o
+}) => {
+  const [t, m] = u(!1);
+  return r(() => {
+    if (e === 0) return;
+    const s = setTimeout(() => {
+      m(!0);
+    }, e * 1e3);
+    return () => clearTimeout(s);
+  }, [e]), r(() => {
+    if (!t) return;
+    const s = setTimeout(() => {
+      i();
+    }, 500);
+    return () => clearTimeout(s);
+  }, [t, i]), /* @__PURE__ */ n(
+    c,
+    {
+      as: "div",
+      "data-toast-item": !0,
+      id: a,
+      classNames: t ? ["dismissed"] : [],
+      onTransitionEnd: () => {
+        t && i();
+      },
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      shadow: "soft",
+      children: o
+    }
+  );
+};
+f.displayName = "ToastItem";
+export {
+  f as ToastItem
+};
+//# sourceMappingURL=ToastItem.js.map

package/dist/components/Toast/ToastItem/ToastItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastItem.js","sources":["../../../../src/components/Toast/ToastItem/ToastItem.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useState, useEffect } from \"react\";\n\n// STYLES ==============================================================================================================\nimport \"./toast-item.css\";\n\n// OTHER ===============================================================================================================\nimport { Element } from \"$element\";\n\n// TYPES ===============================================================================================================\nexport interface ToastItemProps {\n    id         : string;\n    duration ? : number;\n    onClose    : () => void;\n    children   : React.ReactNode;\n}\n\nexport type ToastItemElementType = HTMLDivElement;\n\n// COMPONENT ===========================================================================================================\nexport const ToastItem = ({\n    id,\n    duration = 4,\n    onClose,\n    children,\n}: ToastItemProps) => {\n    const [isExiting, setIsExiting] = useState(false);\n\n    useEffect(() => {\n        if (duration === 0) return;\n\n        const timer = setTimeout(() => {\n            setIsExiting(true);\n        }, duration * 1000);\n\n        return () => clearTimeout(timer);\n    }, [duration]);\n\n    // Fallback: if transition doesn't fire, remove after animation duration\n    useEffect(() => {\n        if (!isExiting) return;\n\n        const fallbackTimer = setTimeout(() => {\n            onClose();\n        }, 500);\n\n        return () => clearTimeout(fallbackTimer);\n    }, [isExiting, onClose]);\n\n    const handleTransitionEnd = () => {\n        if (isExiting) {\n            onClose();\n        }\n    };\n\n    return (\n        <Element<ToastItemElementType>\n            as=\"div\"\n            data-toast-item\n            id={id}\n            classNames={isExiting ? [\"dismissed\"] : []}\n            onTransitionEnd={handleTransitionEnd}\n            role=\"status\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n            shadow=\"soft\"\n        >\n            {children}\n        </Element>\n    );\n};\nToastItem.displayName = \"ToastItem\";\n"],"names":["ToastItem","id","duration","onClose","children","isExiting","setIsExiting","useState","useEffect","timer","fallbackTimer","jsx","Element"],"mappings":";;;;AAoBO,MAAMA,IAAY,CAAC;AAAA,EACtB,IAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,UAAAC;AACJ,MAAsB;AAClB,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK;AAEhD,SAAAC,EAAU,MAAM;AACZ,QAAIN,MAAa,EAAG;AAEpB,UAAMO,IAAQ,WAAW,MAAM;AAC3B,MAAAH,EAAa,EAAI;AAAA,IACrB,GAAGJ,IAAW,GAAI;AAElB,WAAO,MAAM,aAAaO,CAAK;AAAA,EACnC,GAAG,CAACP,CAAQ,CAAC,GAGbM,EAAU,MAAM;AACZ,QAAI,CAACH,EAAW;AAEhB,UAAMK,IAAgB,WAAW,MAAM;AACnC,MAAAP,EAAA;AAAA,IACJ,GAAG,GAAG;AAEN,WAAO,MAAM,aAAaO,CAAa;AAAA,EAC3C,GAAG,CAACL,GAAWF,CAAO,CAAC,GASnB,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,IAAG;AAAA,MACH,mBAAe;AAAA,MACf,IAAAX;AAAA,MACA,YAAYI,IAAY,CAAC,WAAW,IAAI,CAAA;AAAA,MACxC,iBAZoB,MAAM;AAC9B,QAAIA,KACAF,EAAA;AAAA,MAER;AAAA,MASQ,MAAK;AAAA,MACL,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,QAAO;AAAA,MAEN,UAAAC;AAAA,IAAA;AAAA,EAAA;AAGb;AACAJ,EAAU,cAAc;"}

package/dist/components/Toast/ToastsProvider/ToastsProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastsProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/ToastsProvider/ToastsProvider.tsx"],"names":[],"mappings":"AACA,OAAc,EAAoD,SAAS,EAAE,MAAM,OAAO,CAAC;AAc3F,MAAM,WAAW,mBAAmB;IAChC,QAAQ,EAAK,SAAS,CAAC;IACvB,MAAS,CAAC,EAAG,KAAK,GAAG,QAAQ,CAAC;CACjC;AAGD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;AAUzE,eAAO,MAAM,cAAc;4BAGxB,mBAAmB;;CAqCrB,CAAC;AAIF,eAAO,MAAM,SAAS,QAAO,aAQ5B,CAAC"}
+{"version":3,"file":"ToastsProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/ToastsProvider/ToastsProvider.tsx"],"names":[],"mappings":"AACA,OAAc,EAA6D,SAAS,EAAE,MAAM,OAAO,CAAC;AAcpG,MAAM,WAAW,mBAAmB;IAChC,QAAQ,EAAK,SAAS,CAAC;IACvB,MAAS,CAAC,EAAG,KAAK,GAAG,QAAQ,CAAC;CACjC;AAGD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;AAUzE,eAAO,MAAM,cAAc;4BAGxB,mBAAmB;;CAqCrB,CAAC;AAIF,eAAO,MAAM,SAAS,QAAO,aAQ5B,CAAC"}

package/dist/components/Toast/ToastsProvider/ToastsProvider.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import { useState as T, useCallback as i, createContext as x, useMemo as f, useContext as h } from "react";
+import { ToastsWrapper as v } from "../ToastsWrapper/ToastsWrapper.js";
+import { ToastItem as C } from "../ToastItem/ToastItem.js";
+const m = x(null), w = ({
+  children: e,
+  anchor: c = "top"
+}) => {
+  const [u, r] = T([]), l = i((t) => {
+    r((o) => o.filter((s) => s.id !== t));
+  }, []), a = i((t, o = 4) => {
+    const s = `toast-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+    r((d) => [...d, {
+      id: s,
+      message: t,
+      duration: o
+    }]);
+  }, []);
+  return /* @__PURE__ */ p(m.Provider, { value: f(() => ({ toast: a }), [a]), children: [
+    e,
+    /* @__PURE__ */ n(v, { anchor: c, children: u.map(({ id: t, message: o, duration: s }) => /* @__PURE__ */ n(
+      C,
+      {
+        id: t,
+        duration: s,
+        onClose: () => l(t),
+        children: o
+      },
+      t
+    )) })
+  ] });
+};
+w.displayName = "ToastsProvider";
+const M = () => {
+  const e = h(m);
+  if (!e)
+    throw new Error("useToasts must be used within a ToastsProvider");
+  return e.toast;
+};
+export {
+  w as ToastsProvider,
+  M as useToasts
+};
+//# sourceMappingURL=ToastsProvider.js.map

package/dist/components/Toast/ToastsProvider/ToastsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastsProvider.js","sources":["../../../../src/components/Toast/ToastsProvider/ToastsProvider.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { createContext, useContext, useState, useCallback, useMemo, ReactNode } from \"react\";\n\n// INTERNAL ============================================================================================================\nimport { ToastsWrapper } from \"../ToastsWrapper/ToastsWrapper\";\nimport { ToastItem } from \"../ToastItem/ToastItem\";\n\n// TYPES ===============================================================================================================\ninterface InternalToast {\n    id       : string;\n    message  : string;\n    duration : number;\n}\n\n// prettier-ignore\nexport interface ToastsProviderProps {\n    children   : ReactNode;\n    anchor   ? : \"top\" | \"bottom\";\n}\n\n// TOAST FUNCTION TYPE =================================================================================================\nexport type ToastFunction = (message: string, duration?: number) => void;\n\ninterface ToastsContextValue {\n    toast: ToastFunction;\n}\n\n// CONTEXT =============================================================================================================\nconst ToastsContext = createContext<ToastsContextValue | null>(null);\n\n// PROVIDER ============================================================================================================\nexport const ToastsProvider = ({\n    children,\n    anchor = \"top\",\n}: ToastsProviderProps) => {\n    const [toasts, setToasts] = useState<InternalToast[]>([]);\n\n    // Remove a toast by ID\n    const removeToast = useCallback((id: string) => {\n        setToasts(prev => prev.filter(t => t.id !== id));\n    }, []);\n\n    // Main toast function\n    const toast: ToastFunction = useCallback((message: string, duration: number = 4) => {\n        const id = `toast-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n\n        setToasts(prev => [...prev, {\n            id,\n            message,\n            duration,\n        }]);\n    }, []);\n\n    return (\n        <ToastsContext.Provider value={useMemo(() => ({ toast }), [toast])}>\n            {children}\n\n            <ToastsWrapper anchor={anchor}>\n                {toasts.map(({ id, message, duration }) => (\n                    <ToastItem\n                        key={id}\n                        id={id}\n                        duration={duration}\n                        onClose={() => removeToast(id)}\n                    >\n                        {message}\n                    </ToastItem>\n                ))}\n            </ToastsWrapper>\n        </ToastsContext.Provider>\n    );\n};\nToastsProvider.displayName = \"ToastsProvider\";\n\n// HOOK ================================================================================================================\nexport const useToasts = (): ToastFunction => {\n    const context = useContext(ToastsContext);\n\n    if (!context) {\n        throw new Error(\"useToasts must be used within a ToastsProvider\");\n    }\n\n    return context.toast;\n};\n"],"names":["ToastsContext","createContext","ToastsProvider","children","anchor","toasts","setToasts","useState","removeToast","useCallback","id","prev","t","toast","message","duration","jsxs","useMemo","jsx","ToastsWrapper","ToastItem","useToasts","context","useContext"],"mappings":";;;;AA4BA,MAAMA,IAAgBC,EAAyC,IAAI,GAGtDC,IAAiB,CAAC;AAAA,EAC3B,UAAAC;AAAA,EACA,QAAAC,IAAS;AACb,MAA2B;AACvB,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAA0B,CAAA,CAAE,GAGlDC,IAAcC,EAAY,CAACC,MAAe;AAC5C,IAAAJ,EAAU,OAAQK,EAAK,OAAO,OAAKC,EAAE,OAAOF,CAAE,CAAC;AAAA,EACnD,GAAG,CAAA,CAAE,GAGCG,IAAuBJ,EAAY,CAACK,GAAiBC,IAAmB,MAAM;AAChF,UAAML,IAAK,SAAS,KAAK,IAAA,CAAK,IAAI,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,UAAU,GAAG,CAAC,CAAC;AAE5E,IAAAJ,EAAU,CAAAK,MAAQ,CAAC,GAAGA,GAAM;AAAA,MACxB,IAAAD;AAAA,MACA,SAAAI;AAAA,MACA,UAAAC;AAAA,IAAA,CACH,CAAC;AAAA,EACN,GAAG,CAAA,CAAE;AAEL,SACI,gBAAAC,EAAChB,EAAc,UAAd,EAAuB,OAAOiB,EAAQ,OAAO,EAAE,OAAAJ,EAAA,IAAU,CAACA,CAAK,CAAC,GAC5D,UAAA;AAAA,IAAAV;AAAA,IAED,gBAAAe,EAACC,GAAA,EAAc,QAAAf,GACV,UAAAC,EAAO,IAAI,CAAC,EAAE,IAAAK,GAAI,SAAAI,GAAS,UAAAC,EAAA,MACxB,gBAAAG;AAAA,MAACE;AAAA,MAAA;AAAA,QAEG,IAAAV;AAAA,QACA,UAAAK;AAAA,QACA,SAAS,MAAMP,EAAYE,CAAE;AAAA,QAE5B,UAAAI;AAAA,MAAA;AAAA,MALIJ;AAAA,IAAA,CAOZ,EAAA,CACL;AAAA,EAAA,GACJ;AAER;AACAR,EAAe,cAAc;AAGtB,MAAMmB,IAAY,MAAqB;AAC1C,QAAMC,IAAUC,EAAWvB,CAAa;AAExC,MAAI,CAACsB;AACD,UAAM,IAAI,MAAM,gDAAgD;AAGpE,SAAOA,EAAQ;AACnB;"}

package/dist/components/Toast/ToastsWrapper/ToastsWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastsWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/ToastsWrapper/ToastsWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAG7D,OAAO,sBAAsB,CAAC;AAM9B,MAAM,WAAW,wBAAwB;IACrC,MAAO,CAAC,EAAG,KAAK,GAAG,QAAQ,CAAC;CAC/B;AAED,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC;AACtD,MAAM,MAAM,kBAAkB,GAAG,kBAAkB,CAAC,wBAAwB,CAAC,GACzE,wBAAwB,CAAC;AAG7B,eAAO,MAAM,aAAa,sIA2BzB,CAAC"}
+{"version":3,"file":"ToastsWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/ToastsWrapper/ToastsWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAG7D,OAAO,sBAAsB,CAAC;AAM9B,MAAM,WAAW,wBAAwB;IACrC,MAAO,CAAC,EAAG,KAAK,GAAG,QAAQ,CAAC;CAC/B;AAED,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC;AACtD,MAAM,MAAM,kBAAkB,GAAG,kBAAkB,CAAC,wBAAwB,CAAC,GACzE,wBAAwB,CAAC;AAG7B,eAAO,MAAM,aAAa,sIAyBzB,CAAC"}

package/dist/components/Toast/ToastsWrapper/ToastsWrapper.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as s } from "react/jsx-runtime";
+import t from "react";
+/* empty css                   */
+import { Element as p } from "../../Element/Element.js";
+const n = t.forwardRef(
+  ({
+    anchor: o = "top",
+    children: r,
+    ...a
+  }, e) => t.Children.count(r) === 0 ? null : /* @__PURE__ */ s(
+    p,
+    {
+      as: "section",
+      "data-toasts-wrapper": !0,
+      ref: e,
+      classNames: [o],
+      "aria-label": "Toasts",
+      ...a,
+      children: r
+    }
+  )
+);
+n.displayName = "ToastsWrapper";
+export {
+  n as ToastsWrapper
+};
+//# sourceMappingURL=ToastsWrapper.js.map

package/dist/components/Toast/ToastsWrapper/ToastsWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastsWrapper.js","sources":["../../../../src/components/Toast/ToastsWrapper/ToastsWrapper.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React from \"react\";\n\n// ELEMENT =============================================================================================================\nimport { CommonAndHTMLProps } from \"../../Element/constants\";\n\n// STYLES ==============================================================================================================\nimport \"./toasts-wrapper.css\";\n\n// OTHER ===============================================================================================================\nimport { Element } from \"$element\";\n\n// prettier-ignore\nexport interface ToastsWrapperCustomProps {\n    anchor ? : \"top\" | \"bottom\";\n}\n\nexport type ToastsWrapperElementType = HTMLDivElement;\nexport type ToastsWrapperProps = CommonAndHTMLProps<ToastsWrapperElementType> &\n    ToastsWrapperCustomProps;\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const ToastsWrapper = React.forwardRef(\n    (\n        {\n            anchor = \"top\",\n            children,\n            ...props\n        }: ToastsWrapperProps,\n        ref: React.Ref<ToastsWrapperElementType>\n    ) => {\n        const childrenCount = React.Children.count(children);\n        if (childrenCount === 0) return null;\n\n        return (\n            <Element<ToastsWrapperElementType>\n                as=\"section\"\n                data-toasts-wrapper\n                ref={ref}\n                classNames={[anchor]}\n                aria-label=\"Toasts\"\n                {...props}\n            >\n                {children}\n            </Element>\n        );\n    }\n);\nToastsWrapper.displayName = \"ToastsWrapper\";\n"],"names":["ToastsWrapper","React","anchor","children","props","ref","jsx","Element"],"mappings":";;;;AAsBO,MAAMA,IAAgBC,EAAM;AAAA,EAC/B,CACI;AAAA,IACI,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEPC,MAEsBJ,EAAM,SAAS,MAAME,CAAQ,MAC7B,IAAU,OAG5B,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,IAAG;AAAA,MACH,uBAAmB;AAAA,MACnB,KAAAF;AAAA,MACA,YAAY,CAACH,CAAM;AAAA,MACnB,cAAW;AAAA,MACV,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAIjB;AACAH,EAAc,cAAc;"}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -9,6 +9,6 @@ export interface TooltipProps {
     position?: Position;
     zIndex?: number;
 }
-export declare const Tooltip: ({ children, isTooltipFor, showOn, position, zIndex, }: TooltipProps) => null;
+export declare const Tooltip: ({ children, isTooltipFor, showOn, position, zIndex, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAc,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5D,OAAO,eAAe,CAAC;AAGvB,KAAK,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AACpD,KAAK,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAShC,MAAM,WAAW,YAAY;IACzB,QAAQ,EAAO,SAAS,CAAC;IACzB,YAAY,EAAG,MAAM,CAAC;IACtB,MAAW,CAAC,EAAG,MAAM,CAAC;IACtB,QAAW,CAAC,EAAG,QAAQ,CAAC;IACxB,MAAW,CAAC,EAAG,MAAM,CAAC;CACzB;AAuPD,eAAO,MAAM,OAAO,GAAI,uDAMrB,YAAY,SAuCd,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAc,EAAoB,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,eAAe,CAAC;AAGvB,KAAK,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AACpD,KAAK,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAEhC,MAAM,WAAW,YAAY;IACzB,QAAQ,EAAO,SAAS,CAAC;IACzB,YAAY,EAAG,MAAM,CAAC;IACtB,MAAW,CAAC,EAAG,MAAM,CAAC;IACtB,QAAW,CAAC,EAAG,QAAQ,CAAC;IACxB,MAAW,CAAC,EAAG,MAAM,CAAC;CACzB;AAOD,eAAO,MAAM,OAAO,GAAI,uDAMrB,YAAY,4CAqFd,CAAC"}

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as L } from "react/jsx-runtime";
+import { useId as y, useEffect as g } from "react";
+/* empty css            */
+const P = ({
+  children: h,
+  isTooltipFor: p,
+  showOn: c = "hover",
+  position: f = "top",
+  zIndex: m
+}) => {
+  const u = y(), r = `tooltip-${u.replace(/:/g, "")}`, i = `--anchor-${u.replace(/:/g, "")}`;
+  return g(() => {
+    const e = document.getElementById(p), t = document.getElementById(r);
+    if (!e || !t) return;
+    e.style.setProperty("anchor-name", i), e.setAttribute("aria-describedby", r);
+    const n = () => {
+      t.matches(":popover-open") || t.showPopover();
+    }, o = () => {
+      t.matches(":popover-open") && t.hidePopover();
+    }, l = () => t.matches(":popover-open") ? o() : n(), a = [];
+    if (c === "hover")
+      e.addEventListener("mouseenter", n), e.addEventListener("mouseleave", o), e.addEventListener("focusin", n), e.addEventListener("focusout", o), a.push(() => {
+        e.removeEventListener("mouseenter", n), e.removeEventListener("mouseleave", o), e.removeEventListener("focusin", n), e.removeEventListener("focusout", o);
+      });
+    else {
+      e.addEventListener("click", l);
+      const s = (d) => {
+        const v = d.target;
+        v === e || e.contains(v) || t.contains(v) || o();
+      }, E = (d) => {
+        d.key === "Escape" && o();
+      };
+      document.addEventListener("click", s), document.addEventListener("keydown", E), a.push(() => {
+        e.removeEventListener("click", l), document.removeEventListener("click", s), document.removeEventListener("keydown", E);
+      });
+    }
+    return () => {
+      a.forEach((s) => s()), e.style.removeProperty("anchor-name"), e.removeAttribute("aria-describedby");
+    };
+  }, [p, c, r, i]), /* @__PURE__ */ L(
+    "div",
+    {
+      id: r,
+      "data-tooltip": !0,
+      "data-position": f,
+      "data-show-on": c,
+      popover: "manual",
+      role: "tooltip",
+      style: {
+        // CSS anchor positioning: tie this popover to the target's anchor-name.
+        positionAnchor: i,
+        ...m !== void 0 ? { zIndex: m } : {}
+      },
+      children: h
+    }
+  );
+};
+export {
+  P as Tooltip
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useEffect, useId, ReactNode } from \"react\";\n\n// STYLES ==============================================================================================================\nimport \"./tooltip.css\";\n\n// TYPES ===============================================================================================================\ntype Position = \"top\" | \"bottom\" | \"left\" | \"right\";\ntype ShowOn = \"click\" | \"hover\";\n\nexport interface TooltipProps {\n    children     : ReactNode;\n    isTooltipFor : string;\n    showOn     ? : ShowOn;\n    position   ? : Position;\n    zIndex     ? : number;\n}\n\n// COMPONENT ===========================================================================================================\n// Each Tooltip is its own popover. Show/hide goes through the native popover\n// API; placement uses CSS anchor positioning (anchor-name / position-anchor +\n// position-area), so there's no JS getBoundingClientRect math, no scroll/resize\n// listeners, no shared singleton DOM node.\nexport const Tooltip = ({\n    children,\n    isTooltipFor,\n    showOn   = \"hover\",\n    position = \"top\",\n    zIndex,\n}: TooltipProps) => {\n    const reactId   = useId();\n    const tooltipId = `tooltip-${reactId.replace(/:/g, \"\")}`;\n    const anchorName = `--anchor-${reactId.replace(/:/g, \"\")}`;\n\n    useEffect(() => {\n        const target = document.getElementById(isTooltipFor);\n        const tooltip = document.getElementById(tooltipId) as HTMLElement | null;\n        if (!target || !tooltip) return;\n\n        // Brand the target as the anchor. We set this dynamically rather than\n        // requiring the caller to add the anchor-name themselves.\n        target.style.setProperty(\"anchor-name\", anchorName);\n        // Link the target to the tooltip for assistive tech (WCAG 4.1.2).\n        target.setAttribute(\"aria-describedby\", tooltipId);\n\n        const show = () => {\n            if (!tooltip.matches(\":popover-open\")) tooltip.showPopover();\n        };\n        const hide = () => {\n            if (tooltip.matches(\":popover-open\")) tooltip.hidePopover();\n        };\n        const toggle = () => (tooltip.matches(\":popover-open\") ? hide() : show());\n\n        const cleanups: Array<() => void> = [];\n\n        if (showOn === \"hover\") {\n            // Pointer + keyboard parity. focusin/focusout cover keyboard users\n            // who tab to the target.\n            target.addEventListener(\"mouseenter\", show);\n            target.addEventListener(\"mouseleave\", hide);\n            target.addEventListener(\"focusin\", show);\n            target.addEventListener(\"focusout\", hide);\n            cleanups.push(() => {\n                target.removeEventListener(\"mouseenter\", show);\n                target.removeEventListener(\"mouseleave\", hide);\n                target.removeEventListener(\"focusin\", show);\n                target.removeEventListener(\"focusout\", hide);\n            });\n        } else {\n            // click: toggle on target click, close on click anywhere else\n            // (manual light-dismiss because popover=\"auto\" interacts badly with\n            // re-toggling from the same target).\n            target.addEventListener(\"click\", toggle);\n            const handleOutside = (e: MouseEvent) => {\n                const node = e.target as Node;\n                if (node === target || target.contains(node) || tooltip.contains(node)) return;\n                hide();\n            };\n            const handleEscape = (e: KeyboardEvent) => {\n                if (e.key === \"Escape\") hide();\n            };\n            document.addEventListener(\"click\", handleOutside);\n            document.addEventListener(\"keydown\", handleEscape);\n            cleanups.push(() => {\n                target.removeEventListener(\"click\", toggle);\n                document.removeEventListener(\"click\", handleOutside);\n                document.removeEventListener(\"keydown\", handleEscape);\n            });\n        }\n\n        return () => {\n            cleanups.forEach((fn) => fn());\n            target.style.removeProperty(\"anchor-name\");\n            target.removeAttribute(\"aria-describedby\");\n        };\n    }, [ isTooltipFor, showOn, tooltipId, anchorName ]);\n\n    return (\n        <div\n            id={tooltipId}\n            data-tooltip\n            data-position={position}\n            data-show-on={showOn}\n            popover=\"manual\"\n            role=\"tooltip\"\n            style={{\n                // CSS anchor positioning: tie this popover to the target's anchor-name.\n                [\"positionAnchor\" as keyof React.CSSProperties]: anchorName,\n                ...(zIndex !== undefined ? { zIndex } : {}),\n            } as React.CSSProperties}\n        >\n            {children}\n        </div>\n    );\n};\n"],"names":["Tooltip","children","isTooltipFor","showOn","position","zIndex","reactId","useId","tooltipId","anchorName","useEffect","target","tooltip","show","hide","toggle","cleanups","handleOutside","e","node","handleEscape","fn","jsx"],"mappings":";;;AAuBO,MAAMA,IAAU,CAAC;AAAA,EACpB,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,QAAAC;AACJ,MAAoB;AAChB,QAAMC,IAAYC,EAAA,GACZC,IAAY,WAAWF,EAAQ,QAAQ,MAAM,EAAE,CAAC,IAChDG,IAAa,YAAYH,EAAQ,QAAQ,MAAM,EAAE,CAAC;AAExD,SAAAI,EAAU,MAAM;AACZ,UAAMC,IAAS,SAAS,eAAeT,CAAY,GAC7CU,IAAU,SAAS,eAAeJ,CAAS;AACjD,QAAI,CAACG,KAAU,CAACC,EAAS;AAIzB,IAAAD,EAAO,MAAM,YAAY,eAAeF,CAAU,GAElDE,EAAO,aAAa,oBAAoBH,CAAS;AAEjD,UAAMK,IAAO,MAAM;AACf,MAAKD,EAAQ,QAAQ,eAAe,OAAW,YAAA;AAAA,IACnD,GACME,IAAO,MAAM;AACf,MAAIF,EAAQ,QAAQ,eAAe,OAAW,YAAA;AAAA,IAClD,GACMG,IAAS,MAAOH,EAAQ,QAAQ,eAAe,IAAIE,EAAA,IAASD,EAAA,GAE5DG,IAA8B,CAAA;AAEpC,QAAIb,MAAW;AAGX,MAAAQ,EAAO,iBAAiB,cAAcE,CAAI,GAC1CF,EAAO,iBAAiB,cAAcG,CAAI,GAC1CH,EAAO,iBAAiB,WAAWE,CAAI,GACvCF,EAAO,iBAAiB,YAAYG,CAAI,GACxCE,EAAS,KAAK,MAAM;AAChB,QAAAL,EAAO,oBAAoB,cAAcE,CAAI,GAC7CF,EAAO,oBAAoB,cAAcG,CAAI,GAC7CH,EAAO,oBAAoB,WAAWE,CAAI,GAC1CF,EAAO,oBAAoB,YAAYG,CAAI;AAAA,MAC/C,CAAC;AAAA,SACE;AAIH,MAAAH,EAAO,iBAAiB,SAASI,CAAM;AACvC,YAAME,IAAgB,CAACC,MAAkB;AACrC,cAAMC,IAAOD,EAAE;AACf,QAAIC,MAASR,KAAUA,EAAO,SAASQ,CAAI,KAAKP,EAAQ,SAASO,CAAI,KACrEL,EAAA;AAAA,MACJ,GACMM,IAAe,CAACF,MAAqB;AACvC,QAAIA,EAAE,QAAQ,YAAUJ,EAAA;AAAA,MAC5B;AACA,eAAS,iBAAiB,SAASG,CAAa,GAChD,SAAS,iBAAiB,WAAWG,CAAY,GACjDJ,EAAS,KAAK,MAAM;AAChB,QAAAL,EAAO,oBAAoB,SAASI,CAAM,GAC1C,SAAS,oBAAoB,SAASE,CAAa,GACnD,SAAS,oBAAoB,WAAWG,CAAY;AAAA,MACxD,CAAC;AAAA,IACL;AAEA,WAAO,MAAM;AACT,MAAAJ,EAAS,QAAQ,CAACK,MAAOA,EAAA,CAAI,GAC7BV,EAAO,MAAM,eAAe,aAAa,GACzCA,EAAO,gBAAgB,kBAAkB;AAAA,IAC7C;AAAA,EACJ,GAAG,CAAET,GAAcC,GAAQK,GAAWC,CAAW,CAAC,GAG9C,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,IAAId;AAAA,MACJ,gBAAY;AAAA,MACZ,iBAAeJ;AAAA,MACf,gBAAcD;AAAA,MACd,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAO;AAAA;AAAA,QAEF,gBAAgDM;AAAA,QACjD,GAAIJ,MAAW,SAAY,EAAE,QAAAA,MAAW,CAAA;AAAA,MAAC;AAAA,MAG5C,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/dist/components/Typography/Heading.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as d } from "react/jsx-runtime";
+import s from "react";
+import { Element as t } from "../Element/Element.js";
+const i = s.forwardRef(
+  ({ fontStyle: a, weight: e, align: n, ...o }, f) => {
+    let r = [];
+    return e && r.push(`weight-${e}`), a && r.push(`font-${a}`), n && r.push(`text-${n}`), /* @__PURE__ */ d(t, { ref: f, classNames: r, ...o });
+  }
+), m = s.forwardRef((a, e) => /* @__PURE__ */ d(i, { as: "h1", ref: e, ...a }));
+m.displayName = "Heading1";
+const p = s.forwardRef((a, e) => /* @__PURE__ */ d(i, { as: "h2", ref: e, ...a }));
+p.displayName = "Heading2";
+const H = s.forwardRef((a, e) => /* @__PURE__ */ d(i, { as: "h3", ref: e, ...a }));
+H.displayName = "Heading3";
+const g = s.forwardRef((a, e) => /* @__PURE__ */ d(i, { as: "h4", ref: e, ...a }));
+g.displayName = "Heading4";
+const c = s.forwardRef((a, e) => /* @__PURE__ */ d(i, { as: "h5", ref: e, ...a }));
+c.displayName = "Heading5";
+const h = s.forwardRef((a, e) => /* @__PURE__ */ d(i, { as: "h6", ref: e, ...a }));
+h.displayName = "Heading6";
+export {
+  m as Heading1,
+  p as Heading2,
+  H as Heading3,
+  g as Heading4,
+  c as Heading5,
+  h as Heading6
+};
+//# sourceMappingURL=Heading.js.map

package/dist/components/Typography/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.js","sources":["../../../src/components/Typography/Heading.tsx"],"sourcesContent":["// FRAMEWORK ===========================================================================================================\nimport React from \"react\";\n\n// FICTOAN =============================================================================================================\nimport { Element } from \"../Element\";\n\n// TYPES ===============================================================================================================\nimport { CommonAndHTMLProps, WeightTypes } from \"../Element/constants\";\n\n// prettier-ignore\ninterface HeadingBaseProps {\n    as        ? : \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n    fontStyle ? : \"sans-serif\" | \"serif\" | \"monospace\";\n    weight    ? : WeightTypes;\n    align     ? : \"left\" | \"centre\" | \"center\" | \"right\";\n}\n\nexport type HeadingElementType = HTMLHeadingElement;\nexport type HeadingProps = Omit<CommonAndHTMLProps<HeadingElementType>, keyof HeadingBaseProps> & HeadingBaseProps;\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nconst Heading = React.forwardRef(\n    ({ fontStyle, weight, align, ...props }: HeadingProps, ref: React.Ref<HeadingElementType>) => {\n        let classNames = [];\n\n        if (weight) {\n            classNames.push(`weight-${weight}`);\n        }\n\n        if (fontStyle) {\n            classNames.push(`font-${fontStyle}`);\n        }\n\n        if (align) {\n            classNames.push(`text-${align}`);\n        }\n\n        return <Element<HeadingElementType> ref={ref} classNames={classNames} {...props} />;\n    }\n);\n\nexport const Heading1 = React.forwardRef((props: HeadingProps, ref: React.Ref<HeadingElementType>) => (\n    <Heading as=\"h1\" ref={ref} {...props} />\n));\nHeading1.displayName = \"Heading1\";\n\nexport const Heading2 = React.forwardRef((props: HeadingProps, ref: React.Ref<HeadingElementType>) => (\n    <Heading as=\"h2\" ref={ref} {...props} />\n));\nHeading2.displayName = \"Heading2\";\n\nexport const Heading3 = React.forwardRef((props: HeadingProps, ref: React.Ref<HeadingElementType>) => (\n    <Heading as=\"h3\" ref={ref} {...props} />\n));\nHeading3.displayName = \"Heading3\";\n\nexport const Heading4 = React.forwardRef((props: HeadingProps, ref: React.Ref<HeadingElementType>) => (\n    <Heading as=\"h4\" ref={ref} {...props} />\n));\nHeading4.displayName = \"Heading4\";\n\nexport const Heading5 = React.forwardRef((props: HeadingProps, ref: React.Ref<HeadingElementType>) => (\n    <Heading as=\"h5\" ref={ref} {...props} />\n));\nHeading5.displayName = \"Heading5\";\n\nexport const Heading6 = React.forwardRef((props: HeadingProps, ref: React.Ref<HeadingElementType>) => (\n    <Heading as=\"h6\" ref={ref} {...props} />\n));\nHeading6.displayName = \"Heading6\";\n"],"names":["Heading","React","fontStyle","weight","align","props","ref","classNames","jsx","Element","Heading1","Heading2","Heading3","Heading4","Heading5","Heading6"],"mappings":";;;AAqBA,MAAMA,IAAUC,EAAM;AAAA,EAClB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,OAAAC,GAAO,GAAGC,EAAA,GAAuBC,MAAuC;AAC1F,QAAIC,IAAa,CAAA;AAEjB,WAAIJ,KACAI,EAAW,KAAK,UAAUJ,CAAM,EAAE,GAGlCD,KACAK,EAAW,KAAK,QAAQL,CAAS,EAAE,GAGnCE,KACAG,EAAW,KAAK,QAAQH,CAAK,EAAE,GAG5B,gBAAAI,EAACC,GAAA,EAA4B,KAAAH,GAAU,YAAAC,GAAyB,GAAGF,GAAO;AAAA,EACrF;AACJ,GAEaK,IAAWT,EAAM,WAAW,CAACI,GAAqBC,MAC3D,gBAAAE,EAACR,GAAA,EAAQ,IAAG,MAAK,KAAAM,GAAW,GAAGD,GAAO,CACzC;AACDK,EAAS,cAAc;AAEhB,MAAMC,IAAWV,EAAM,WAAW,CAACI,GAAqBC,MAC3D,gBAAAE,EAACR,GAAA,EAAQ,IAAG,MAAK,KAAAM,GAAW,GAAGD,GAAO,CACzC;AACDM,EAAS,cAAc;AAEhB,MAAMC,IAAWX,EAAM,WAAW,CAACI,GAAqBC,MAC3D,gBAAAE,EAACR,GAAA,EAAQ,IAAG,MAAK,KAAAM,GAAW,GAAGD,GAAO,CACzC;AACDO,EAAS,cAAc;AAEhB,MAAMC,IAAWZ,EAAM,WAAW,CAACI,GAAqBC,MAC3D,gBAAAE,EAACR,GAAA,EAAQ,IAAG,MAAK,KAAAM,GAAW,GAAGD,GAAO,CACzC;AACDQ,EAAS,cAAc;AAEhB,MAAMC,IAAWb,EAAM,WAAW,CAACI,GAAqBC,MAC3D,gBAAAE,EAACR,GAAA,EAAQ,IAAG,MAAK,KAAAM,GAAW,GAAGD,GAAO,CACzC;AACDS,EAAS,cAAc;AAEhB,MAAMC,IAAWd,EAAM,WAAW,CAACI,GAAqBC,MAC3D,gBAAAE,EAACR,GAAA,EAAQ,IAAG,MAAK,KAAAM,GAAW,GAAGD,GAAO,CACzC;AACDU,EAAS,cAAc;"}

package/dist/components/Typography/Text.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import u from "react";
+import { Element as x } from "../Element/Element.js";
+const a = u.forwardRef(
+  ({ weight: e, size: s, fontStyle: p, align: r, isSubtext: f, ...m }, o) => {
+    let t = [];
+    return e && t.push(`weight-${e}`), s && t.push(`text-${s}`), p && t.push(`font-${p}`), f && t.push("sub-text"), r && t.push(`text-${r}`), /* @__PURE__ */ i(x, { as: "p", ref: o, classNames: t, ...m });
+  }
+);
+a.displayName = "Text";
+export {
+  a as Text
+};
+//# sourceMappingURL=Text.js.map

package/dist/components/Typography/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sources":["../../../src/components/Typography/Text.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { CommonAndHTMLProps, SpacingTypes, WeightTypes } from \"../Element/constants\";\nimport { Element } from \"$element\";\n\n// prettier-ignore\nexport interface TextCustomProps {\n    fontStyle ? : \"sans-serif\" | \"serif\" | \"monospace\";\n    weight    ? : WeightTypes;\n    size      ? : SpacingTypes;\n    align     ? : \"left\" | \"centre\" | \"center\" | \"right\";\n    isSubtext ? : boolean;\n}\n\nexport type TextElementType = HTMLParagraphElement;\nexport type TextProps = Omit<CommonAndHTMLProps<TextElementType>, keyof TextCustomProps> & TextCustomProps;\n\nexport const Text = React.forwardRef(\n    (\n        {weight, size, fontStyle, align, isSubtext, ...props} : TextProps,\n        ref : React.Ref<TextElementType>,\n    ) => {\n        let classNames = [];\n\n        if (weight) {\n            classNames.push(`weight-${weight}`);\n        }\n\n        if (size) {\n            classNames.push(`text-${size}`);\n        }\n\n        if (fontStyle) {\n            classNames.push(`font-${fontStyle}`);\n        }\n\n        if (isSubtext) {\n            classNames.push(\"sub-text\");\n        }\n\n        if (align) {\n            classNames.push(`text-${align}`);\n        }\n\n        return <Element<TextElementType> as=\"p\" ref={ref} classNames={classNames} {...props} />;\n    },\n);\nText.displayName = \"Text\";\n"],"names":["Text","React","weight","size","fontStyle","align","isSubtext","props","ref","classNames","Element"],"mappings":";;;AAmBO,MAAMA,IAAOC,EAAM;AAAA,EACtB,CACI,EAAC,QAAAC,GAAQ,MAAAC,GAAM,WAAAC,GAAW,OAAAC,GAAO,WAAAC,GAAW,GAAGC,EAAA,GAC/CC,MACC;AACD,QAAIC,IAAa,CAAA;AAEjB,WAAIP,KACAO,EAAW,KAAK,UAAUP,CAAM,EAAE,GAGlCC,KACAM,EAAW,KAAK,QAAQN,CAAI,EAAE,GAG9BC,KACAK,EAAW,KAAK,QAAQL,CAAS,EAAE,GAGnCE,KACAG,EAAW,KAAK,UAAU,GAG1BJ,KACAI,EAAW,KAAK,QAAQJ,CAAK,EAAE,qBAG3BK,GAAA,EAAyB,IAAG,KAAI,KAAAF,GAAU,YAAAC,GAAyB,GAAGF,GAAO;AAAA,EACzF;AACJ;AACAP,EAAK,cAAc;"}