@stackframe/stack 2.3.5 → 2.3.8

package/dist/components/user-avatar.d.ts

@@ -1,5 +1,13 @@
-import { User } from "../lib/stack-app";
-export default function UserAvatar(props: {
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { User } from '../lib/stack-app.js';
+import '@stackframe/stack-shared';
+import '@stackframe/stack-shared/dist/interface/clientInterface';
+import '@stackframe/stack-shared/dist/utils/json';
+import '@stackframe/stack-shared/dist/interface/adminInterface';
+
+declare function UserAvatar(props: {
     size?: number;
     user: User | null;
-}): import("react/jsx-runtime").JSX.Element;
+}): react_jsx_runtime.JSX.Element;
+
+export { UserAvatar as default };

package/dist/components/user-avatar.js

@@ -1,7 +1,35 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, AvatarFallback, AvatarImage, Text } from "..";
-const anonUserDataUrl = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='-100 -1060 1160 1160' width='24'%3E%3Crect x='-100' y='-1060' width='100%25' height='100%25' fill='%23d8d8d8' /%3E%3Cpath d='M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z'/%3E%3C/svg%3E";
-export default function UserAvatar(props) {
-    const user = props.user;
-    return (_jsxs(Avatar, { style: { height: props.size, width: props.size }, children: [_jsx(AvatarImage, { src: user ? user.profileImageUrl || '' : anonUserDataUrl }), _jsx(AvatarFallback, { children: _jsx(Text, { style: { fontWeight: 500 }, children: (user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase() ?? "?" }) })] }));
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/user-avatar.tsx
+var user_avatar_exports = {};
+__export(user_avatar_exports, {
+  default: () => UserAvatar
+});
+module.exports = __toCommonJS(user_avatar_exports);
+var import_rx = require("react-icons/rx");
+var import__ = require("..");
+var import_jsx_runtime = require("react/jsx-runtime");
+function UserAvatar(props) {
+  const user = props.user;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Avatar, { style: { height: props.size, width: props.size }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.AvatarImage, { src: user?.profileImageUrl || "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.AvatarFallback, { children: user ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { style: { fontWeight: 500 }, children: (user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_rx.RxPerson, { size: props.size }) })
+  ] });
 }

package/dist/components/user-button.d.mts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type UserButtonProps = {
+    showUserInfo?: boolean;
+    colorModeToggle?: () => void | Promise<void>;
+    extraItems?: {
+        text: string;
+        icon: React__default.ReactNode;
+        onClick: () => void | Promise<void>;
+    }[];
+};
+declare function UserButton(props: UserButtonProps): react_jsx_runtime.JSX.Element;
+
+export { UserButton as default };

package/dist/components/user-button.d.ts

@@ -1,6 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
 type UserButtonProps = {
     showUserInfo?: boolean;
-    showColorMode?: boolean;
+    colorModeToggle?: () => void | Promise<void>;
+    extraItems?: {
+        text: string;
+        icon: React__default.ReactNode;
+        onClick: () => void | Promise<void>;
+    }[];
 };
-export default function UserButton({ showUserInfo, showColorMode, }: UserButtonProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare function UserButton(props: UserButtonProps): react_jsx_runtime.JSX.Element;
+
+export { UserButton as default };

package/dist/components/user-button.js

@@ -1,33 +1,163 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense } from "react";
-import { useUser, Text, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuLabel, DropdownMenuSeparator, useStackApp, useDesign, Skeleton } from "..";
-import { RxPerson, RxEnter, RxSun, RxShadow, RxFilePlus } from "react-icons/rx";
-import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
-import { SECONDARY_FONT_COLORS } from "../utils/constants";
-import UserAvatar from "./user-avatar";
-import { useRouter } from "next/navigation";
+"use client";
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/user-button.tsx
+var user_button_exports = {};
+__export(user_button_exports, {
+  default: () => UserButton
+});
+module.exports = __toCommonJS(user_button_exports);
+var import_react = __toESM(require("react"));
+var import__ = require("..");
+var import_rx = require("react-icons/rx");
+var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
+var import_constants = require("../utils/constants");
+var import_user_avatar = __toESM(require("./user-avatar"));
+var import_navigation = require("next/navigation");
+var import_objects = require("@stackframe/stack-shared/dist/utils/objects");
+var import_styled_components = __toESM(require("styled-components"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var icons = (0, import_objects.typedFromEntries)((0, import_objects.typedEntries)({
+  RxPencil2: import_rx.RxPencil2,
+  RxPerson: import_rx.RxPerson,
+  RxEnter: import_rx.RxEnter,
+  RxHalf2: import_rx.RxHalf2,
+  RxFilePlus: import_rx.RxFilePlus
+}).map(([key, value]) => {
+  const styledComponent = (0, import_styled_components.default)(value)`
+    color: ${import_constants.SECONDARY_FONT_COLORS.light};
+
+    html[data-theme='dark'] & {
+      color: ${import_constants.SECONDARY_FONT_COLORS.dark};
+    }
+  `;
+  return [
+    key,
+    import_react.default.createElement(styledComponent, { size: 20 })
+  ];
+}));
 function Item(props) {
-    return (_jsxs(DropdownMenuItem, { onClick: () => runAsynchronously(props.onClick), style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [props.icon, _jsx(Text, { children: props.text })] }));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import__.DropdownMenuItem,
+    {
+      onClick: () => (0, import_promises.runAsynchronously)(props.onClick),
+      style: { display: "flex", gap: "0.5rem", alignItems: "center" },
+      children: [
+        props.icon,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { children: props.text })
+      ]
+    }
+  );
 }
-export default function UserButton({ showUserInfo = false, showColorMode = false, }) {
-    return (_jsx(Suspense, { fallback: _jsx(Skeleton, { children: _jsx(UserButtonInnerInner, { showUserInfo: showUserInfo, showColorMode: showColorMode, user: null }) }), children: _jsx(UserButtonInner, { showUserInfo: showUserInfo, showColorMode: showColorMode }) }));
+function UserButton(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react.Suspense,
+    {
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserButtonInnerInner, { ...props, user: null }) }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserButtonInner, { ...props })
+    }
+  );
 }
 function UserButtonInner(props) {
-    const user = useUser();
-    return _jsx(UserButtonInnerInner, { showUserInfo: props.showUserInfo, showColorMode: props.showColorMode, user: user });
+  const user = (0, import__.useUser)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserButtonInnerInner, { ...props, user });
 }
 function UserButtonInnerInner(props) {
-    const { colorMode, setColorMode } = useDesign();
-    const user = props.user;
-    const app = useStackApp();
-    const router = useRouter();
-    const textStyles = {
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden'
-    };
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsxs("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [_jsx(UserAvatar, { user: user }), user && props.showUserInfo && _jsxs("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'center' }, children: [_jsx(Text, { style: textStyles, children: user.displayName }), _jsx(Text, { style: { ...textStyles, fontWeight: 400 }, variant: "secondary", size: "sm", children: user.primaryEmail })] })] }) }), _jsxs(DropdownMenuContent, { style: { zIndex: 1500 }, children: [_jsx(DropdownMenuLabel, { children: _jsxs("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [_jsx(UserAvatar, { user: user }), _jsxs("div", { children: [user && _jsx(Text, { children: user.displayName }), user && _jsx(Text, { variant: "secondary", size: "sm", style: { fontWeight: 400 }, children: user.primaryEmail }), !user && _jsx(Text, { variant: "secondary", children: "Not logged in" })] })] }) }), _jsx(DropdownMenuSeparator, {}), user && _jsx(Item, { text: "Account settings", onClick: () => runAsynchronously(router.push(app.urls.accountSettings)), icon: _jsx(RxPerson, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) }), !user && _jsx(Item, { text: "Sign in", onClick: () => runAsynchronously(router.push(app.urls.signIn)), icon: _jsx(RxEnter, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) }), !user && _jsx(Item, { text: "Sign up", onClick: () => runAsynchronously(router.push(app.urls.signUp)), icon: _jsx(RxFilePlus, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) }), props.showColorMode && _jsx(Item, { text: colorMode === 'dark' ? 'Light theme' : 'Dark theme', onClick: () => setColorMode(colorMode === 'dark' ? 'light' : 'dark'), icon: colorMode === 'dark' ?
-                            _jsx(RxSun, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) :
-                            _jsx(RxShadow, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) }), user && _jsx(Item, { text: "Sign out", onClick: () => user.signOut(), icon: _jsx(RxEnter, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) })] })] }));
+  const user = props.user;
+  const app = (0, import__.useStackApp)();
+  const router = (0, import_navigation.useRouter)();
+  const textStyles = {
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    overflow: "hidden"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DropdownMenuTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_user_avatar.default, { user }),
+      user && props.showUserInfo && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", justifyContent: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { style: textStyles, children: user.displayName }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { style: { ...textStyles, fontWeight: 400 }, variant: "secondary", size: "sm", children: user.primaryEmail })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.DropdownMenuContent, { style: { zIndex: 1500 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DropdownMenuLabel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_user_avatar.default, { user }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { children: user.displayName }),
+          user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { variant: "secondary", size: "sm", style: { fontWeight: 400 }, children: user.primaryEmail }),
+          !user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { variant: "secondary", children: "Not signed in" })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DropdownMenuSeparator, {}),
+      user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Item,
+        {
+          text: "Account settings",
+          onClick: () => (0, import_promises.runAsynchronously)(router.push(app.urls.accountSettings)),
+          icon: icons.RxPerson
+        }
+      ),
+      !user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Item,
+        {
+          text: "Sign in",
+          onClick: () => (0, import_promises.runAsynchronously)(router.push(app.urls.signIn)),
+          icon: icons.RxPerson
+        }
+      ),
+      !user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Item,
+        {
+          text: "Sign up",
+          onClick: () => (0, import_promises.runAsynchronously)(router.push(app.urls.signUp)),
+          icon: icons.RxPencil2
+        }
+      ),
+      user && props.extraItems && props.extraItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Item, { ...item }, index)),
+      props.colorModeToggle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Item,
+        {
+          text: "Toggle theme",
+          onClick: props.colorModeToggle,
+          icon: icons.RxHalf2
+        }
+      ),
+      user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Item,
+        {
+          text: "Sign out",
+          onClick: () => user.signOut(),
+          icon: icons.RxEnter
+        }
+      )
+    ] })
+  ] });
 }

package/dist/components-core/avatar.d.mts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import * as _radix_ui_react_avatar from '@radix-ui/react-avatar';
+
+declare const Avatar: React.ForwardRefExoticComponent<Omit<_radix_ui_react_avatar.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<_radix_ui_react_avatar.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<_radix_ui_react_avatar.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+
+export { Avatar, AvatarFallback, AvatarImage };

package/dist/components-core/avatar.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
-declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export { Avatar, AvatarImage, AvatarFallback };
+import * as _radix_ui_react_avatar from '@radix-ui/react-avatar';
+
+declare const Avatar: React.ForwardRefExoticComponent<Omit<_radix_ui_react_avatar.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<_radix_ui_react_avatar.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<_radix_ui_react_avatar.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+
+export { Avatar, AvatarFallback, AvatarImage };

package/dist/components-core/avatar.js

@@ -1,9 +1,46 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import styled from 'styled-components';
-import { useDesign } from '..';
-const StyledAvatar = styled(AvatarPrimitive.Root) `
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components-core/avatar.tsx
+var avatar_exports = {};
+__export(avatar_exports, {
+  Avatar: () => Avatar,
+  AvatarFallback: () => AvatarFallback,
+  AvatarImage: () => AvatarImage
+});
+module.exports = __toCommonJS(avatar_exports);
+var React = __toESM(require("react"));
+var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
+var import_styled_components = __toESM(require("styled-components"));
+var import__ = require("..");
+var import_jsx_runtime = require("react/jsx-runtime");
+var StyledAvatar = (0, import_styled_components.default)(AvatarPrimitive.Root)`
   position: relative;
   display: flex;
   height: 2rem;
@@ -12,27 +49,45 @@ const StyledAvatar = styled(AvatarPrimitive.Root) `
   overflow: hidden;
   border-radius: 9999px;
 `;
-const Avatar = React.forwardRef(({ className, ...props }, ref) => (_jsx(StyledAvatar, { ref: ref, className: className, ...props })));
-Avatar.displayName = 'Avatar';
-const StyledAvatarImage = styled(AvatarPrimitive.Image) `
+var Avatar = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledAvatar, { ref, className, ...props }));
+Avatar.displayName = "Avatar";
+var StyledAvatarImage = (0, import_styled_components.default)(AvatarPrimitive.Image)`
   aspect-ratio: 1 / 1;
   height: 100%;
   width: 100%;
 `;
-const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (_jsx(StyledAvatarImage, { ref: ref, className: className, ...props })));
-AvatarImage.displayName = 'AvatarImage';
-const StyledAvatarFallback = styled(AvatarPrimitive.Fallback) `
+var AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledAvatarImage, { ref, className, ...props }));
+AvatarImage.displayName = "AvatarImage";
+var StyledAvatarFallback = (0, import_styled_components.default)(AvatarPrimitive.Fallback)`
   display: flex;
   height: 100%;
   width: 100%;
   align-items: center;
   justify-content: center;
   border-radius: 9999px;
-  background-color: ${(p) => p.$backgroundColor};
+  
+  background-color: ${({ $colors }) => $colors.light.secondaryColor};
+
+  html[data-theme='dark'] & {
+    background-color: ${({ $colors }) => $colors.dark.secondaryColor};
+  }
 `;
-const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => {
-    const { colors } = useDesign();
-    return _jsx(StyledAvatarFallback, { ref: ref, className: className, "$backgroundColor": colors.secondaryColor, ...props });
+var AvatarFallback = React.forwardRef(({ className, ...props }, ref) => {
+  const { colors } = (0, import__.useDesign)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledAvatarFallback,
+    {
+      ref,
+      className,
+      $colors: colors,
+      ...props
+    }
+  );
+});
+AvatarFallback.displayName = "AvatarFallback";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
 });
-AvatarFallback.displayName = 'AvatarFallback';
-export { Avatar, AvatarImage, AvatarFallback };

package/dist/components-core/button.d.mts

@@ -0,0 +1,12 @@
+import React__default from 'react';
+
+type ButtonProps = {
+    variant?: 'primary' | 'secondary' | 'warning';
+    color?: string;
+    size?: 'sm' | 'md' | 'lg';
+    loading?: boolean;
+    onClick?: (() => void) | (() => Promise<void>);
+} & Omit<React__default.HTMLProps<HTMLButtonElement>, 'size' | 'type' | 'onClick'>;
+declare const Button: React__default.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonProps };

package/dist/components-core/button.d.ts

@@ -1,10 +1,12 @@
-import React from "react";
-export type ButtonProps = {
-    variant?: 'primary' | 'secondary' | 'warning' | "link";
+import React__default from 'react';
+
+type ButtonProps = {
+    variant?: 'primary' | 'secondary' | 'warning';
     color?: string;
     size?: 'sm' | 'md' | 'lg';
     loading?: boolean;
     onClick?: (() => void) | (() => Promise<void>);
-} & Omit<React.HTMLProps<HTMLButtonElement>, 'size' | 'type' | 'onClick'>;
-declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export { Button, };
+} & Omit<React__default.HTMLProps<HTMLButtonElement>, 'size' | 'type' | 'onClick'>;
+declare const Button: React__default.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonProps };