@xola/ui-kit 3.0.8 → 3.4.0

package/build/components/Forms/ValuePopoverText.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface ValuePopoverTextProps {
+    value?: React.ReactNode;
+    error?: React.ReactNode | null;
+}
+export declare const ValuePopoverText: ({ value, error }: ValuePopoverTextProps) => React.JSX.Element;

package/build/components/Forms/ValuePopoverText.js

@@ -0,0 +1,10 @@
+import { jsxs as t, jsx as n } from "react/jsx-runtime";
+import { Tooltip as e } from "../Tooltip.js";
+import { WarningDiamondIcon as a } from "../../icons/build/WarningDiamondIcon.js";
+const l = ({ value: r, error: o }) => /* @__PURE__ */ t("span", { children: [
+  o ? /* @__PURE__ */ n(e, { content: o, className: "", children: /* @__PURE__ */ n("span", { children: /* @__PURE__ */ n(a, { className: "mr-1 text-danger" }) }) }) : null,
+  r
+] });
+export {
+  l as ValuePopoverText
+};

package/build/components/GooglePlacesAutocomplete.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export interface GooglePlaceSuggestion {
+    place_id: string;
+    description?: string;
+    name?: string;
+    formatted_address?: string;
+    types?: string[];
+}
+export interface GooglePlacesAutocompleteProps {
+    initialValue?: string;
+    onSelect?: (suggestion: GooglePlaceSuggestion) => void;
+    apiBaseUrl: string;
+}
+export declare const GooglePlacesAutocomplete: ({ initialValue, onSelect, apiBaseUrl, }: GooglePlacesAutocompleteProps) => React.JSX.Element;

package/build/components/HeaderToolbar.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export interface HeaderToolbarProps {
+    classNames?: string;
+    children: React.ReactNode;
+}
+export declare const HeaderToolbar: {
+    ({ classNames, children }: HeaderToolbarProps): React.JSX.Element;
+    Breadcrumb: {
+        ({ children, className }: HeaderToolbarBreadcrumbProps): React.JSX.Element;
+        displayName: string;
+    };
+    Search: {
+        (props: any): React.JSX.Element;
+        displayName: string;
+    };
+};
+interface HeaderToolbarBreadcrumbProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export type { HeaderToolbarBreadcrumbProps };

package/build/components/HeaderToolbar.js

@@ -0,0 +1,33 @@
+import { jsx as a } from "react/jsx-runtime";
+import o from "clsx";
+import { Search as c } from "./Search.js";
+import { Breadcrumb as d } from "./Breadcrumb.js";
+const l = ({ classNames: r, children: e }) => /* @__PURE__ */ a(
+  "div",
+  {
+    className: o(
+      "ui-header-toolbar",
+      "flex w-full items-center space-x-2 border-b border-gray-light px-5 py-3 pr-3 xl:space-x-6 xl:px-10 xl:py-5",
+      r
+    ),
+    children: e
+  }
+), m = ({ children: r, className: e }) => /* @__PURE__ */ a(
+  d,
+  {
+    className: o(
+      "ui-header-toolbar-breadcrumb",
+      "border-r border-gray-light text-xl md:pr-4 xl:pr-6",
+      e
+    ),
+    children: r
+  }
+);
+m.displayName = "HeaderToolbar.Breadcrumb";
+const t = (r) => /* @__PURE__ */ a(c, { className: "ui-header-toolbar-search w-full flex-grow pr-1", ...r });
+t.displayName = "HeaderToolbar.Search";
+l.Breadcrumb = m;
+l.Search = t;
+export {
+  l as HeaderToolbar
+};

package/build/components/ImageUpload.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+type LogoSize = "small" | "medium" | "large";
+export interface ImageUploadProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "size" | "onError"> {
+    src?: string;
+    size?: LogoSize;
+    isLoading?: boolean;
+    maxSize?: number;
+    hasDelete?: boolean;
+    requirements?: React.ReactNode | string | null;
+    caption?: string | null;
+    csvAcceptFormats?: string;
+    onChange: (file: File) => void;
+    onDelete: () => void;
+    onError: (message: string) => void;
+}
+export declare const ImageUpload: ({ src, size, isLoading, maxSize, hasDelete, requirements, caption, csvAcceptFormats, onChange, onDelete, onError, ...props }: ImageUploadProps) => React.JSX.Element;
+export {};

package/build/components/ImageUpload.js

@@ -0,0 +1,86 @@
+import { jsxs as a, jsx as e, Fragment as B } from "react/jsx-runtime";
+import g from "clsx";
+import { useRef as R, useState as U } from "react";
+import { Button as w } from "./Buttons/Button.js";
+import { SubmitButton as u } from "./Buttons/SubmitButton.js";
+import { Logo as x } from "./Logo.js";
+import { ImageIcon as G } from "../icons/build/ImageIcon.js";
+import { TrashIcon as K } from "../icons/build/TrashIcon.js";
+const H = ({
+  src: c,
+  size: s = "large",
+  isLoading: l = !1,
+  maxSize: o = 5,
+  hasDelete: d = !0,
+  requirements: t = null,
+  caption: r = null,
+  csvAcceptFormats: y = "image/png,image/jpeg",
+  onChange: N,
+  onDelete: v,
+  onError: C,
+  ...b
+}) => {
+  const h = R(null), [m, k] = U(0), p = () => {
+    var n;
+    (n = h.current) == null || n.click();
+  }, I = (n) => {
+    const [i] = n.target.files ?? [];
+    if (i) {
+      if (o && 1048576 * o < i.size) {
+        C(`Image size shouldn't exceed ${o}MB`);
+        return;
+      }
+      N(i);
+    }
+  }, P = () => {
+    k(m + 1), v();
+  }, j = typeof t == "string" ? (t == null ? void 0 : t.trim().length) > 0 : !!t, f = r ? r.trim().length > 0 : !1;
+  return /* @__PURE__ */ a("div", { className: g("flex items-center rounded bg-gray-lighter p-4", d ? "space-x-2" : "space-x-3"), children: [
+    /* @__PURE__ */ e("div", { children: c ? /* @__PURE__ */ e(x, { src: c, size: s }) : /* @__PURE__ */ e(
+      "div",
+      {
+        className: g(
+          x.sizes[s],
+          "flex items-center justify-center rounded border border-gray-light"
+        ),
+        children: /* @__PURE__ */ e(G, { size: "large", className: "text-gray" })
+      }
+    ) }),
+    /* @__PURE__ */ a("div", { className: "flex flex-col space-y-2", children: [
+      /* @__PURE__ */ e("div", { className: "space-x-2", children: d ? /* @__PURE__ */ a(B, { children: [
+        /* @__PURE__ */ e(
+          w,
+          {
+            variant: "outline",
+            color: "secondary",
+            icon: /* @__PURE__ */ e(K, {}),
+            disabled: l,
+            onClick: P,
+            children: "Delete"
+          }
+        ),
+        /* @__PURE__ */ e(u, { disabled: l, isLoading: l, onClick: p, children: f ? r.trim() : "Upload New Photo" })
+      ] }) : /* @__PURE__ */ e(u, { disabled: l, isLoading: l, onClick: p, children: f ? r.trim() : c ? "Replace Photo" : "Upload New Photo" }) }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          ref: h,
+          className: "hidden",
+          type: "file",
+          multiple: !1,
+          accept: y,
+          onChange: I,
+          ...b
+        },
+        m
+      ),
+      /* @__PURE__ */ e("div", { className: "text-xs text-gray-darker", children: j ? t : /* @__PURE__ */ a("div", { children: [
+        "Check that the image is in PNG or JPG format",
+        o ? ` and does not exceed ${o}MB` : ""
+      ] }) })
+    ] })
+  ] });
+};
+export {
+  H as ImageUpload
+};

package/build/components/Key.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface KeyProps extends React.HTMLAttributes<HTMLDivElement> {
+    char: string;
+    className?: string;
+}
+export declare const Key: ({ char, className, ...rest }: KeyProps) => React.JSX.Element;

package/build/components/Key.js

@@ -0,0 +1,28 @@
+import { jsx as i } from "react/jsx-runtime";
+import l from "clsx";
+import { isOSX as t } from "../helpers/browser.js";
+const s = {
+  cmd: t ? "⌘" : "ctrl",
+  option: t ? "⌥" : "win",
+  ctrl: "ctrl",
+  up: "↑",
+  down: "↓"
+}, x = ({ char: e, className: n, ...o }) => {
+  const r = s[e] ?? e;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: l(
+        "ui-key",
+        "no-translate inline-flex h-5 items-center justify-center rounded bg-gray-lighter px-2 py-1 text-xs font-semibold text-gray",
+        r.length === 1 && "w-5",
+        n
+      ),
+      ...o,
+      children: r
+    }
+  );
+};
+export {
+  x as Key
+};

package/build/components/Logo.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+declare const sizes: {
+    readonly small: "w-10 h-10";
+    readonly medium: "w-16 h-16";
+    readonly large: "w-20 h-20";
+};
+type LogoSize = keyof typeof sizes;
+export interface LogoProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    size?: LogoSize;
+    className?: string;
+}
+export declare const Logo: (({ size, className, ...rest }: LogoProps) => React.JSX.Element) & {
+    sizes: {
+        readonly small: "w-10 h-10";
+        readonly medium: "w-16 h-16";
+        readonly large: "w-20 h-20";
+    };
+};
+export {};

package/build/components/Logo.js

@@ -0,0 +1,10 @@
+import { jsx as l } from "react/jsx-runtime";
+import n from "clsx";
+const o = {
+  small: "w-10 h-10",
+  medium: "w-16 h-16",
+  large: "w-20 h-20"
+}, r = ({ size: s = "small", className: e, ...m }) => /* @__PURE__ */ l("img", { className: n("ui-logo", e, "inline-block rounded object-cover", o[s]), ...m }), i = Object.assign(r, { sizes: o });
+export {
+  i as Logo
+};

package/build/components/Modal.d.ts

@@ -0,0 +1,52 @@
+import { default as React } from 'react';
+declare const sizes: {
+    readonly small: "max-w-100";
+    readonly medium: "max-w-125";
+    readonly large: "max-w-150";
+    readonly huge: "max-w-200";
+};
+declare const positions: {
+    readonly center: "inline-block";
+    readonly topLeft: "absolute m-4 top-0 left-0";
+    readonly topRight: "absolute m-4 top-0 right-0";
+    readonly bottomLeft: "absolute m-4 bottom-0 left-0";
+    readonly bottomRight: "absolute m-4 bottom-0 right-0";
+};
+type ModalSize = keyof typeof sizes;
+type ModalPosition = keyof typeof positions;
+export interface ModalProps {
+    size?: ModalSize;
+    position?: ModalPosition;
+    isOpen: boolean;
+    shouldCloseOnOutsideClick?: boolean;
+    children: React.ReactNode;
+    className?: string;
+    onClose: () => void;
+}
+export declare const Modal: {
+    ({ size, position, isOpen, shouldCloseOnOutsideClick, children, className, onClose, }: ModalProps): React.JSX.Element;
+    Header: {
+        ({ description, children, className, ...rest }: ModalHeaderProps): React.JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ className, ...rest }: ModalBodyProps): React.JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ className, ...rest }: ModalFooterProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    description?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+export {};

package/build/components/Modal.js

@@ -0,0 +1,126 @@
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { Transition as s, Dialog as d } from "@headlessui/react";
+import o from "clsx";
+import { Fragment as m } from "react";
+import { CloseIcon as v } from "../icons/build/CloseIcon.js";
+const y = {
+  small: "max-w-100",
+  // 400px
+  medium: "max-w-125",
+  // 500px
+  large: "max-w-150",
+  // 600px
+  huge: "max-w-200"
+  // 800px
+}, x = {
+  center: "inline-block",
+  topLeft: "absolute m-4 top-0 left-0",
+  topRight: "absolute m-4 top-0 right-0",
+  bottomLeft: "absolute m-4 bottom-0 left-0",
+  bottomRight: "absolute m-4 bottom-0 right-0"
+}, l = {
+  center: {
+    enterFrom: "translate-y-4 sm:translate-y-0 sm:scale-95",
+    enterTo: "translate-y-0 sm:scale-100",
+    leaveFrom: "translate-y-0 sm:scale-100",
+    leaveTo: "translate-y-4 sm:translate-y-0 sm:scale-95"
+  },
+  topLeft: {
+    enterFrom: "scale-0 origin-top-left",
+    enterTo: "scale-100 origin-top-left",
+    leaveFrom: "scale-100 origin-top-left",
+    leaveTo: "scale-0 origin-top-left"
+  },
+  topRight: {
+    enterFrom: "scale-0 origin-top-right",
+    enterTo: "scale-100 origin-top-right",
+    leaveFrom: "scale-100 origin-top-right",
+    leaveTo: "scale-0 origin-top-right"
+  },
+  bottomLeft: {
+    enterFrom: "scale-0 origin-bottom-left",
+    enterTo: "scale-100 origin-bottom-left",
+    leaveFrom: "scale-100 origin-bottom-left",
+    leaveTo: "scale-0 origin-bottom-left"
+  },
+  bottomRight: {
+    enterFrom: "scale-0 origin-bottom-right",
+    enterTo: "scale-100 origin-bottom-right",
+    leaveFrom: "scale-100 origin-bottom-right",
+    leaveTo: "scale-0 origin-bottom-right"
+  }
+}, g = ({
+  size: a = "medium",
+  position: e = "center",
+  isOpen: r = !1,
+  shouldCloseOnOutsideClick: i = !1,
+  children: b,
+  className: f,
+  onClose: n
+}) => /* @__PURE__ */ t(s, { appear: !0, show: r, as: m, children: /* @__PURE__ */ t(d, { as: "div", className: "ui-modal fixed inset-0 z-30 overflow-y-auto", onClose: () => {
+  i && n();
+}, children: /* @__PURE__ */ c("div", { className: "min-h-screen px-4 text-center", children: [
+  /* @__PURE__ */ t(
+    s.Child,
+    {
+      as: m,
+      enter: "ease-out duration-300",
+      enterFrom: "opacity-0",
+      enterTo: "opacity-100",
+      leave: "ease-in duration-200",
+      leaveFrom: "opacity-100",
+      leaveTo: "opacity-0",
+      children: /* @__PURE__ */ t(d.Overlay, { className: "ui-modal-overlay fixed inset-0 bg-black bg-opacity-80 transition-opacity" })
+    }
+  ),
+  e === "center" && /* @__PURE__ */ t("span", { className: "inline-block h-screen align-middle", "aria-hidden": "true", children: "​" }),
+  /* @__PURE__ */ t(
+    s.Child,
+    {
+      as: m,
+      enter: o("ease-out duration-300"),
+      enterFrom: o("opacity-0", l[e].enterFrom),
+      enterTo: o("opacity-100", l[e].enterTo),
+      leave: o("ease-in duration-300"),
+      leaveFrom: o("opacity-100", l[e].leaveFrom),
+      leaveTo: o("opacity-0", l[e].leaveTo),
+      children: /* @__PURE__ */ c(
+        "div",
+        {
+          className: o(
+            f,
+            y[a],
+            x[e],
+            "w-full transform overflow-hidden rounded-lg bg-white p-10 text-left align-middle shadow-xl transition-all"
+          ),
+          children: [
+            n ? /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                className: "absolute right-0 top-0 m-4 hidden p-2 text-black hover:text-gray-darker sm:block",
+                onClick: () => n(),
+                children: /* @__PURE__ */ t(v, {})
+              }
+            ) : null,
+            b
+          ]
+        }
+      )
+    }
+  )
+] }) }) }), h = ({ description: a, children: e, className: r, ...i }) => /* @__PURE__ */ c(d.Title, { as: "div", className: o(r, "ui-modal-header text-center"), ...i, children: [
+  /* @__PURE__ */ t("h3", { className: "text-2xl font-semibold leading-6 text-black", children: e }),
+  a ? /* @__PURE__ */ t("p", { className: "mt-2 text-base font-normal leading-normal text-gray-darker", children: a }) : null
+] });
+h.displayName = "Modal.Header";
+const p = ({ className: a, ...e }) => /* @__PURE__ */ t("div", { className: o(a, "ui-modal-body mt-10"), ...e });
+p.displayName = "Modal.Body";
+const u = ({ className: a, ...e }) => /* @__PURE__ */ t("div", { className: o(a, "ui-modal-footer mt-10 space-x-4 text-right"), ...e });
+u.displayName = "Modal.Footer";
+g.Header = h;
+g.Body = p;
+g.Footer = u;
+export {
+  g as Modal
+};

package/build/components/Popover/Popover.d.ts

@@ -0,0 +1,20 @@
+import { TippyProps } from '@tippyjs/react';
+import { default as React } from 'react';
+export interface PopoverProps extends Omit<Partial<TippyProps>, "children" | "className"> {
+    isLazy?: boolean;
+    skidding?: number;
+    distance?: number;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const Popover: {
+    ({ isLazy, skidding, distance, children, className, ...rest }: PopoverProps): React.JSX.Element;
+    Content: {
+        ({ children, className }: PopoverContentProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+export interface PopoverContentProps {
+    children: React.ReactNode;
+    className?: string;
+}

package/build/components/Popover/Popover.js

@@ -0,0 +1,50 @@
+import { jsx as m } from "react/jsx-runtime";
+import d from "@tippyjs/react";
+import u from "clsx";
+import { Children as y, forwardRef as g, useState as C } from "react";
+import { followCursor as v } from "tippy.js";
+import "tippy.js/dist/border.css";
+import "tippy.js/dist/tippy.css";
+import { getChildrenByType as x } from "../../helpers/children.js";
+import T from "./Popover.module.css.js";
+import h from "./PopoverScroll.module.css.js";
+const z = ({ isLazy: t = !0, skidding: o = 0, distance: r = 10, children: n, className: s, ...e }) => {
+  const p = x(n, l), a = y.toArray(n).filter((i) => i.type !== l);
+  return /* @__PURE__ */ m(
+    t ? f : d,
+    {
+      interactive: !0,
+      zIndex: 50,
+      content: p,
+      className: u(
+        "ui-popover",
+        h,
+        T.main,
+        "!rounded-lg !border-gray-light shadow-xl",
+        s
+      ),
+      plugins: [v],
+      offset: [o ?? 0, r ?? 10],
+      ...e,
+      children: /* @__PURE__ */ m("span", { children: a })
+    }
+  );
+}, l = ({ children: t, className: o }) => /* @__PURE__ */ m("div", { className: u("ui-popover-content", o), children: t });
+l.displayName = "Popover.Content";
+z.Content = l;
+const f = g((t, o) => {
+  const [r, n] = C(!1), s = {
+    fn: () => ({
+      onMount: () => n(!0),
+      onHidden: () => n(!1)
+    })
+  }, e = { ...t };
+  return e.plugins = [s, ...t.plugins ?? []], t.render ? e.render = (p, a, c) => {
+    var i;
+    return r ? (i = t.render) == null ? void 0 : i.call(t, p, a, c) : "";
+  } : e.content = r ? t.content : "", /* @__PURE__ */ m(d, { ...e, ref: o });
+});
+f.displayName = "LazyTippy";
+export {
+  z as Popover
+};

package/build/components/Popover/Popover.module.css.js

@@ -0,0 +1,7 @@
+const t = "_main_jm0tk_1", a = {
+  main: t
+};
+export {
+  a as default,
+  t as main
+};

package/build/components/Popover/PopoverList.d.ts

@@ -0,0 +1,25 @@
+import { TippyProps } from '@tippyjs/react';
+import { default as React } from 'react';
+import { PopoverProps } from './Popover';
+export interface PopoverListProps extends Omit<Partial<PopoverProps>, "placement" | "children" | "className"> {
+    placement?: TippyProps["placement"];
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const PopoverList: {
+    ({ placement, children, className, ...rest }: PopoverListProps): React.JSX.Element;
+    Item: {
+        ({ name, isActive, id, position, total, children, className, onClickItem, ...rest }: PopoverListItemProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+export interface PopoverListItemProps {
+    name: string;
+    isActive?: boolean;
+    id?: string | null;
+    position?: number;
+    total?: number;
+    children: React.ReactNode;
+    className?: string;
+    onClickItem: (event: React.MouseEvent<HTMLDivElement>, name: string, id: string | null) => void;
+}

package/build/components/Popover/PopoverList.js

@@ -0,0 +1,59 @@
+import { jsx as d } from "react/jsx-runtime";
+import g from "clsx";
+import v, { Children as h } from "react";
+import { Popover as u } from "./Popover.js";
+import f from "./PopoverScroll.module.css.js";
+const y = ({ placement: n = "bottom", children: i, className: s, ...o }) => {
+  const e = h.toArray(i), r = e.filter((t) => t.type !== l), m = e.length - r.length, p = e.map((t, a) => t.type === l ? v.cloneElement(t, { position: a, total: m }) : null), c = /* @__PURE__ */ d(
+    u.Content,
+    {
+      className: g(f, "ui-popover-list-content divide-y divide-solid divide-gray-lighter p-0 "),
+      children: p
+    }
+  );
+  return /* @__PURE__ */ d(
+    u,
+    {
+      content: c,
+      placement: n,
+      className: g("ui-popover-list", "w-40", s),
+      ...o,
+      children: r
+    }
+  );
+}, l = ({
+  name: n,
+  isActive: i = !1,
+  id: s = null,
+  position: o,
+  total: e,
+  children: r,
+  className: m,
+  onClickItem: p,
+  ...c
+}) => {
+  const t = (a) => p(a, n, s);
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: g(
+        "ui-popover-list-item",
+        "flex cursor-pointer space-x-2.5 p-4 align-text-top font-semibold leading-4 tracking-tightest hover:bg-gray-lighter",
+        i ? "bg-gray-lighter" : null,
+        o === 1 ? "rounded-t-lg" : null,
+        // Round the top left & right corners if it's the first one
+        o === e ? "rounded-b-lg" : null,
+        // Round bottom left & right if it's the last one
+        m
+      ),
+      onClick: t,
+      ...c,
+      children: r
+    }
+  );
+};
+l.displayName = "PopoverList.Item";
+y.Item = l;
+export {
+  y as PopoverList
+};

package/build/components/Popover/PopoverScroll.module.css.js

@@ -0,0 +1,4 @@
+const l = {};
+export {
+  l as default
+};

package/build/components/Provider.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export interface ContextValue {
+    generateId: () => number;
+    localize: boolean;
+    locale: string;
+}
+export declare const Context: React.Context<ContextValue>;
+export interface ProviderProps {
+    children: React.ReactNode;
+    localize?: boolean;
+    locale?: string;
+}
+/**
+ * UI Kit's default provider.
+ * Must be used from now on in order to generate correct component IDs.
+ * Also a good place to implement any global state required for the UI Kit in the future.
+ */
+export declare const Provider: ({ children, localize, locale }: ProviderProps) => React.JSX.Element;

package/build/components/Provider.js

@@ -0,0 +1,17 @@
+import { jsx as u } from "react/jsx-runtime";
+import { createContext as s, useRef as i, useCallback as c, useMemo as l } from "react";
+let p = 1;
+const m = s({
+  generateId: () => (console.warn(
+    "Please wrap your app with `<Provider />` component from `@xola/ui-kit`. Otherwise your app will not work with SSR frameworks."
+  ), p++),
+  localize: !0,
+  locale: "en_US"
+}), f = ({ children: n, localize: e = !0, locale: r = "en_US" }) => {
+  const t = i(1), o = c(() => t.current++, [t]), a = l(() => ({ generateId: o, localize: e, locale: r }), [o, e, r]);
+  return /* @__PURE__ */ u(m.Provider, { value: a, children: n });
+};
+export {
+  m as Context,
+  f as Provider
+};