@divayth/brick-ui 0.0.14 → 0.1.0

package/dist/ui/Select/Select.js

@@ -1,190 +1,122 @@
 "use client";
-import { jsxs as p, jsx as i, Fragment as F } from "react/jsx-runtime";
-import { useRef as C, useState as R, useEffect as q, useId as B } from "react";
-import { createPortal as j } from "react-dom";
-import { Field as w } from "../Field/Field.js";
-import { Flex as M } from "../Flex/Flex.js";
-import { IconButton as W } from "../IconButton/IconButton.js";
-import { Text as _ } from "../Text/Text.js";
-import { useProvider as z } from "../../app/Provider.js";
-import { clsx as O } from "clsx";
-import { ChevronDown as A, X as K } from "lucide-react";
-import o from "./Select.module.css.js";
-const U = {
+import { jsx as r, jsxs as s, Fragment as O } from "react/jsx-runtime";
+import { useRef as P, useState as w, useId as R } from "react";
+import { Popover as m } from "../Popover/Popover.js";
+import { Field as d } from "../Field/Field.js";
+import { Flex as j } from "../Flex/Flex.js";
+import { IconButton as k } from "../IconButton/IconButton.js";
+import { Text as q } from "../Text/Text.js";
+import { useProvider as A } from "../../app/Provider.js";
+import { clsx as x } from "clsx";
+import { ChevronDown as D, X as E } from "lucide-react";
+import t from "./Select.module.css.js";
+const T = {
   sm: 16,
   md: 20,
   lg: 24
-}, V = (d, f) => d ? /* @__PURE__ */ p(F, { children: [
-  d.icon,
-  /* @__PURE__ */ i(_, { className: o.value, children: d.label ?? String(d.value ?? "") })
-] }) : f ? /* @__PURE__ */ i("span", { className: O(o.value, o.placeholder), children: f }) : /* @__PURE__ */ i("span", { className: o.value }), ie = ({
-  value: d,
-  onChange: f,
-  label: x,
-  disabled: a,
-  options: y = [],
-  placeholder: b,
-  error: v,
-  withArrow: k = !0,
-  clearable: L = !0,
-  className: H,
-  size: E = "md",
-  variant: T = "filled"
+}, _ = (n, l) => n ? /* @__PURE__ */ s(O, { children: [
+  n.icon,
+  /* @__PURE__ */ r(q, { className: t.value, children: n.label ?? String(n.value ?? "") })
+] }) : l ? /* @__PURE__ */ r("span", { className: x(t.value, t.placeholder), children: l }) : /* @__PURE__ */ r("span", { className: t.value }), U = ({
+  value: n,
+  onChange: l,
+  label: f,
+  disabled: o,
+  options: g = [],
+  placeholder: N,
+  error: c,
+  withArrow: b = !0,
+  clearable: S = !0,
+  className: y,
+  size: p = "md",
+  variant: C = "filled"
 }) => {
-  const { messages: $ } = z(), h = y.find((e) => e.value === d), c = C(null), N = C(null), [t, l] = R({
-    isOpen: !1,
-    portalTarget: null,
-    top: 0,
-    left: 0,
-    width: 0,
-    maxHeight: 320,
-    direction: "down"
-  });
-  q(() => {
-    if (!t.isOpen) return;
-    if (a) {
-      l((r) => ({ ...r, isOpen: !1 }));
-      return;
-    }
-    const e = (r) => {
-      r.key === "Escape" && (r.preventDefault(), r.stopPropagation(), l((s) => ({ ...s, isOpen: !1 })), c.current?.querySelector("button")?.focus());
-    };
-    document.addEventListener("keydown", e, !0);
-    const n = (r) => {
-      const s = r.target;
-      s instanceof Node && (c.current?.contains(s) || N.current?.contains(s) || l((g) => ({ ...g, isOpen: !1 })));
-    };
-    document.addEventListener("mousedown", n), document.addEventListener("touchstart", n);
-    const m = (r) => {
-      r.target instanceof Node && N.current?.contains(r.target) || l((s) => ({ ...s, isOpen: !1 }));
-    };
-    return document.addEventListener("scroll", m, !0), window.addEventListener("resize", m), () => {
-      document.removeEventListener("keydown", e, !0), document.removeEventListener("mousedown", n), document.removeEventListener("touchstart", n), document.removeEventListener("scroll", m, !0), window.removeEventListener("resize", m);
-    };
-  }, [t.isOpen, a]);
-  const u = B(), D = (e) => {
-    a || (f?.(e.value), l((n) => ({ ...n, isOpen: !1 })), c.current?.querySelector("button")?.focus());
-  }, I = (e) => {
-    e.preventDefault(), e.stopPropagation(), f?.(void 0), l((n) => ({ ...n, isOpen: !1 })), c.current?.querySelector("button")?.focus();
-  }, P = () => {
-    if (!a) {
-      if (!t.isOpen && c.current) {
-        const e = c.current.getBoundingClientRect(), n = 4, m = Math.min(320, y.length * 40 + 8), r = window.innerHeight - e.bottom - n, s = e.top - n, g = r < m && s > r, S = Math.min(e.width, window.innerWidth - n * 2);
-        l({
-          isOpen: !0,
-          portalTarget: c.current.closest("dialog") ?? document.body,
-          direction: g ? "up" : "down",
-          left: Math.max(
-            n,
-            Math.min(e.left, window.innerWidth - S - n)
-          ),
-          width: S,
-          maxHeight: Math.max(0, Math.min(320, g ? s : r)),
-          top: g ? e.top : e.bottom
-        });
-        return;
-      }
-      l((e) => ({
-        ...e,
-        isOpen: !e.isOpen
-      }));
-    }
+  const { messages: $ } = A(), i = g.find((e) => e.value === n), u = P(null), [v, h] = w(!1), a = R(), I = (e) => {
+    o || (l?.(e.value), h(!1), u.current?.querySelector("button")?.focus());
+  }, F = (e) => {
+    e.preventDefault(), e.stopPropagation(), l?.(void 0), h(!1), u.current?.querySelector("button")?.focus();
   };
-  return /* @__PURE__ */ p(w.Root, { className: H, children: [
-    x && /* @__PURE__ */ i(w.Label, { htmlFor: u, label: x }),
-    /* @__PURE__ */ i(w.Control, { size: E, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ r(m.Root, { open: v && !o, onOpenChange: h, children: /* @__PURE__ */ s(d.Root, { className: y, children: [
+    f && /* @__PURE__ */ r(d.Label, { htmlFor: a, label: f }),
+    /* @__PURE__ */ r(d.Control, { size: p, children: /* @__PURE__ */ r(m.Anchor, { children: /* @__PURE__ */ s(
       "div",
       {
-        ref: c,
-        className: O(o.root, {
-          [o.error]: v,
-          [o.disabled]: a
+        ref: u,
+        className: x(t.select, t[C], {
+          [t.error]: c,
+          [t.disabled]: o
         }),
         children: [
-          /* @__PURE__ */ p("div", { className: O(o.select, o[T]), children: [
-            /* @__PURE__ */ p(
-              "button",
-              {
-                id: u,
-                type: "button",
-                className: o.trigger,
-                onClick: P,
-                disabled: a,
-                "aria-expanded": t.isOpen,
-                "aria-haspopup": "listbox",
-                "aria-controls": t.isOpen ? `${u}-options` : void 0,
-                "aria-invalid": v ? !0 : void 0,
-                "aria-describedby": v ? `${u}-error` : void 0,
-                children: [
-                  V(h, b),
-                  k && !(h && L) && /* @__PURE__ */ i(
-                    A,
-                    {
-                      size: U[E],
-                      className: o.arrow,
-                      "aria-hidden": "true"
-                    }
-                  )
-                ]
-              }
-            ),
-            h && L && /* @__PURE__ */ i(
-              W,
-              {
-                size: E,
-                color: "secondary",
-                onClick: I,
-                className: o.clear,
-                disabled: a,
-                "aria-label": $.clear,
-                children: /* @__PURE__ */ i(K, {})
-              }
-            )
-          ] }),
-          t.isOpen && !a && j(
-            /* @__PURE__ */ i(
-              M,
-              {
-                ref: N,
-                id: `${u}-options`,
-                role: "listbox",
-                "aria-label": x ?? b,
-                direction: "col",
-                gap: "xs",
-                className: O(o.dropdown),
-                style: {
-                  position: "fixed",
-                  left: t.left,
-                  top: t.direction === "down" ? t.top + 4 : t.top - 4,
-                  width: t.width,
-                  maxHeight: t.maxHeight,
-                  transform: t.direction === "up" ? "translateY(-100%)" : void 0
-                },
-                children: y.map((e) => /* @__PURE__ */ i(
-                  "button",
+          /* @__PURE__ */ r(m.Trigger, { children: /* @__PURE__ */ s(
+            "button",
+            {
+              id: a,
+              type: "button",
+              className: t.trigger,
+              disabled: o,
+              "aria-expanded": v && !o,
+              "aria-haspopup": "listbox",
+              "aria-controls": v && !o ? `${a}-options` : void 0,
+              "aria-invalid": c ? !0 : void 0,
+              "aria-describedby": c ? `${a}-error` : void 0,
+              children: [
+                _(i, N),
+                b && !(i && S) && /* @__PURE__ */ r(
+                  D,
                   {
-                    role: "option",
-                    "aria-selected": h?.value === e.value,
-                    onClick: () => D(e),
-                    type: "button",
-                    className: h?.value === e.value ? o.active : void 0,
-                    children: /* @__PURE__ */ p(M, { alignItems: "center", children: [
-                      e.icon,
-                      e.label ?? String(e.value ?? "")
-                    ] })
-                  },
-                  `${typeof e.value}:${String(e.value)}`
-                ))
-              }
-            ),
-            t.portalTarget ?? document.body
+                    size: T[p],
+                    className: t.arrow,
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            }
+          ) }),
+          i && S && /* @__PURE__ */ r(
+            k,
+            {
+              size: p,
+              color: "secondary",
+              onClick: F,
+              className: t.clear,
+              disabled: o,
+              "aria-label": $.clear,
+              children: /* @__PURE__ */ r(E, {})
+            }
+          ),
+          /* @__PURE__ */ r(
+            m.Content,
+            {
+              container: u.current?.closest("dialog"),
+              role: "listbox",
+              align: "start",
+              sideOffset: 4,
+              id: `${a}-options`,
+              "aria-label": f ?? N,
+              className: t.dropdown,
+              children: g.map((e) => /* @__PURE__ */ r(
+                "button",
+                {
+                  role: "option",
+                  "aria-selected": i?.value === e.value,
+                  onClick: () => I(e),
+                  type: "button",
+                  className: i?.value === e.value ? t.active : void 0,
+                  children: /* @__PURE__ */ s(j, { alignItems: "center", children: [
+                    e.icon,
+                    e.label ?? String(e.value ?? "")
+                  ] })
+                },
+                `${typeof e.value}:${String(e.value)}`
+              ))
+            }
           )
         ]
       }
-    ) }),
-    v && /* @__PURE__ */ i(w.Error, { id: `${u}-error`, error: v })
-  ] });
+    ) }) }),
+    c && /* @__PURE__ */ r(d.Error, { id: `${a}-error`, error: c })
+  ] }) });
 };
 export {
-  ie as Select
+  U as Select
 };

package/dist/ui/Select/Select.module.css.js

@@ -1,31 +1,29 @@
-const o = "_root_1flo3_2", l = "_select_1flo3_8", _ = "_filled_1flo3_20", e = "_outlined_1flo3_25", r = "_trigger_1flo3_29", t = "_value_1flo3_45", c = "_arrow_1flo3_54", d = "_clear_1flo3_59", s = "_placeholder_1flo3_64", a = "_disabled_1flo3_69", n = "_active_1flo3_80", f = "_error_1flo3_85", i = "_dropdown_1flo3_91", p = {
-  root: o,
-  select: l,
-  filled: _,
-  outlined: e,
-  trigger: r,
+const e = "_select_1y7vn_2", _ = "_disabled_1y7vn_18", o = "_error_1y7vn_18", n = "_outlined_1y7vn_22", r = "_filled_1y7vn_26", l = "_trigger_1y7vn_35", t = "_value_1y7vn_51", c = "_arrow_1y7vn_60", d = "_clear_1y7vn_65", s = "_placeholder_1y7vn_70", a = "_active_1y7vn_87", v = "_dropdown_1y7vn_96", i = {
+  select: e,
+  disabled: _,
+  error: o,
+  outlined: n,
+  filled: r,
+  trigger: l,
   value: t,
   arrow: c,
   clear: d,
   placeholder: s,
-  disabled: a,
-  active: n,
-  error: f,
-  dropdown: i
+  active: a,
+  dropdown: v
 };
 export {
-  n as active,
+  a as active,
   c as arrow,
   d as clear,
-  p as default,
-  a as disabled,
-  i as dropdown,
-  f as error,
-  _ as filled,
-  e as outlined,
+  i as default,
+  _ as disabled,
+  v as dropdown,
+  o as error,
+  r as filled,
+  n as outlined,
   s as placeholder,
-  o as root,
-  l as select,
-  r as trigger,
+  e as select,
+  l as trigger,
   t as value
 };

package/dist/ui/Tooltip/Tooltip.d.ts

@@ -0,0 +1,18 @@
+import { type ComponentProps, type PropsWithChildren } from "react";
+import { Tooltip as Primitive } from "radix-ui";
+type Side = NonNullable<ComponentProps<typeof Primitive.Content>["side"]>;
+type Placement = Side | `${Side}-start` | `${Side}-end`;
+export interface TooltipRootProps extends PropsWithChildren {
+    placement?: Placement;
+    delay?: number;
+    disabled?: boolean;
+}
+export type TooltipTriggerProps = ComponentProps<typeof Primitive.Trigger>;
+export type TooltipContentProps = ComponentProps<typeof Primitive.Content>;
+export declare const Tooltip: {
+    Root: ({ children, placement, delay, disabled, }: TooltipRootProps) => import("react").JSX.Element;
+    Trigger: ({ ref, ...props }: TooltipTriggerProps) => import("react").JSX.Element;
+    Content: ({ className, sideOffset, collisionPadding, ...props }: TooltipContentProps) => import("react").JSX.Element;
+};
+export {};
+//# sourceMappingURL=Tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/ui/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,UAAU,CAAC;AAMhD,KAAK,IAAI,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC1E,KAAK,SAAS,GAAG,IAAI,GAAG,GAAG,IAAI,QAAQ,GAAG,GAAG,IAAI,MAAM,CAAC;AAExD,MAAM,WAAW,gBAAiB,SAAQ,iBAAiB;IACzD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmCD,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,OAAO,CAAC,CAAC;AAS3E,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,OAAO,CAAC,CAAC;AA2B3E,eAAO,MAAM,OAAO;sDAxDjB,gBAAgB;iCAsBiB,mBAAmB;qEAcpD,mBAAmB;CAoB2B,CAAC"}

package/dist/ui/Tooltip/Tooltip.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { useContext as a, useState as g, useMemo as d, createContext as u } from "react";
+import { Tooltip as i } from "radix-ui";
+import { useComposedRefs as C } from "@radix-ui/react-compose-refs";
+import { twMerge as T } from "tailwind-merge";
+import { Portal as h } from "../Portal/Portal.js";
+import x from "./Tooltip.module.css.js";
+const p = u({}), R = ({
+  children: e,
+  placement: o = "top",
+  delay: r = 250,
+  disabled: n = !1
+}) => {
+  const [c, l] = g(!1), [s, m] = g(null), f = d(
+    () => ({ placement: o, trigger: s, setTrigger: m }),
+    [o, s]
+  );
+  return /* @__PURE__ */ t(p.Provider, { value: f, children: /* @__PURE__ */ t(i.Provider, { delayDuration: r, children: /* @__PURE__ */ t(i.Root, { open: c && !n, onOpenChange: l, children: e }) }) });
+}, v = ({ ref: e, ...o }) => {
+  const { setTrigger: r } = a(p), n = C(r, e);
+  return /* @__PURE__ */ t(i.Trigger, { asChild: !0, ref: n, ...o });
+}, P = ({
+  className: e,
+  sideOffset: o = 8,
+  collisionPadding: r = 8,
+  ...n
+}) => {
+  const { placement: c, trigger: l } = a(p), [s, m = "center"] = c.split("-");
+  return /* @__PURE__ */ t(h, { container: l?.closest("dialog"), children: /* @__PURE__ */ t(
+    i.Content,
+    {
+      side: s,
+      align: m,
+      sideOffset: o,
+      collisionPadding: r,
+      className: T(x.content, e),
+      ...n
+    }
+  ) });
+}, S = { Root: R, Trigger: v, Content: P };
+export {
+  S as Tooltip
+};

package/dist/ui/Tooltip/Tooltip.module.css.js

@@ -0,0 +1,7 @@
+const t = "_content_r1cxn_2", n = {
+  content: t
+};
+export {
+  t as content,
+  n as default
+};

package/dist/ui/index.d.ts

@@ -1,4 +1,7 @@
 export { Text, type TextProps } from "./Text/Text.js";
+export { Portal, type PortalProps } from "./Portal/Portal.js";
+export { Popover, type PopoverRootProps, type PopoverTriggerProps, type PopoverContentProps, } from "./Popover/Popover.js";
+export { Tooltip, type TooltipRootProps, type TooltipTriggerProps, type TooltipContentProps, } from "./Tooltip/Tooltip.js";
 export { Flex, type FlexProps } from "./Flex/Flex.js";
 export { Button, type ButtonProps } from "./Button/Button.js";
 export { Card, type CardProps } from "./Card/Card.js";

package/dist/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@divayth/brick-ui",
-  "version": "0.0.14",
+  "version": "0.1.0",
   "description": "React components for Brick UI",
   "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "src/theme.css"
   ],
   "sideEffects": [
     "**/*.css"
@@ -14,7 +15,8 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./styles.css": "./dist/styles.css"
+    "./styles.css": "./dist/styles.css",
+    "./theme.css": "./src/theme.css"
   },
   "scripts": {
     "build": "vite build && tsc -p tsconfig.build.json",
@@ -28,8 +30,11 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
+    "@radix-ui/react-compose-refs": "^1.1.5",
+    "radix-ui": "^1.8.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.23",
+    "js-cookie": "^3.0.8",
     "lucide-react": "^1.57.0",
     "react-day-picker": "^10.0.2",
     "tailwind-merge": "^3.7.0"
@@ -39,6 +44,7 @@
     "@storybook/addon-docs": "^10.3.6",
     "@storybook/react-vite": "^10.3.6",
     "@tailwindcss/vite": "^4.0.0",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",

package/src/theme.css

@@ -0,0 +1,30 @@
+@theme static {
+  --color-primary-1: #365dcc;
+  --color-primary-2: #365dcc52;
+  --color-primary-3: #edf1ff;
+  --color-primary-hover: #2e50b8;
+  --color-primary-solid: var(--color-primary-1);
+  --color-primary-solid-hover: var(--color-primary-hover);
+  --color-primary-text-inverted: #ffffff;
+  --color-error-1: #c9363e;
+  --color-error-2: #c9363e52;
+  --color-error-3: #fff0f0;
+  --color-info-1: #3068b2;
+  --color-info-2: #3068b252;
+  --color-info-3: #edf4ff;
+  --color-success-1: #18794e;
+  --color-success-2: #18794e52;
+  --color-success-3: #eaf7ee;
+  --color-warning-1: #99620f;
+  --color-warning-2: #99620f52;
+  --color-warning-3: #fff5df;
+  --color-gray-1: #626875;
+  --color-gray-2: #dce0e8;
+  --color-gray-3: #f0f2f6;
+  --color-background-primary: #ffffff;
+  --color-background-secondary: #f6f7fb;
+  --color-text-primary: #20232d;
+  --color-disabled-background: #f2f2f2;
+  --color-disabled-border: #dedede;
+  --color-disabled-text: #808080;
+}

package/dist/lib/defaultThemes.d.ts

@@ -1,35 +0,0 @@
-export declare const defaultThemes: {
-    light: {};
-    dark: {
-        colorScheme: "dark";
-        "background-primary": string;
-        "background-secondary": string;
-        "text-primary": string;
-        "disabled-background": string;
-        "disabled-border": string;
-        "disabled-text": string;
-        "gray-1": string;
-        "gray-2": string;
-        "gray-3": string;
-        "primary-1": string;
-        "primary-2": string;
-        "primary-3": string;
-        "primary-hover": string;
-        "primary-solid": string;
-        "primary-solid-hover": string;
-        "primary-text-inverted": string;
-        "error-1": string;
-        "error-2": string;
-        "error-3": string;
-        "info-1": string;
-        "info-2": string;
-        "info-3": string;
-        "success-1": string;
-        "success-2": string;
-        "success-3": string;
-        "warning-1": string;
-        "warning-2": string;
-        "warning-3": string;
-    };
-};
-//# sourceMappingURL=defaultThemes.d.ts.map

package/dist/lib/defaultThemes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"defaultThemes.d.ts","sourceRoot":"","sources":["../../src/lib/defaultThemes.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCN,CAAC"}

package/dist/lib/theme.d.ts

@@ -1,7 +0,0 @@
-import type { CSSProperties } from "react";
-import { defaultThemes } from "./defaultThemes.js";
-import type { ThemeMap } from "./themes.js";
-export declare const THEME_COOKIE = "theme";
-export type Theme = keyof typeof defaultThemes;
-export declare const getThemeStyle: (theme: string, themes?: ThemeMap) => CSSProperties;
-//# sourceMappingURL=theme.d.ts.map

package/dist/lib/theme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/lib/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAe,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEzD,eAAO,MAAM,YAAY,UAAU,CAAC;AACpC,MAAM,MAAM,KAAK,GAAG,MAAM,OAAO,aAAa,CAAC;AAE/C,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,EAAE,SAAS,QAAQ,KAAG,aAWhE,CAAC"}

package/dist/lib/theme.js

@@ -1,15 +0,0 @@
-import { defaultThemes as l } from "./defaultThemes.js";
-const a = "theme", i = (e, o) => {
-  const t = l[e], { colorScheme: r = e === "dark" ? "dark" : "light", ...c } = {
-    ...t,
-    ...o?.[e]
-  };
-  return {
-    colorScheme: r,
-    ...Object.fromEntries(Object.entries(c).map(([s, n]) => [`--color-${s}`, n]))
-  };
-};
-export {
-  a as THEME_COOKIE,
-  i as getThemeStyle
-};