@bolio-ui/core 2.0.0-alpha.2 → 3.0.0-alpha.0

package/esm/chunk-KWKFVS32.js

@@ -0,0 +1,225 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Stepper/Stepper.tsx
+import React2 from "react";
+
+// core/Stepper/StepperContext.ts
+import React from "react";
+var StepperContext = React.createContext({
+  index: 0,
+  active: 0,
+  isLast: true,
+  orientation: "horizontal"
+});
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Stepper/Stepper.module.css.bolio-css-module-source
+var Stepper_module_css_default = { "stepper": "Stepper-module_stepper__voFJp", "vertical": "Stepper-module_vertical__XlHRx" };
+
+// core/Stepper/Stepper.tsx
+import { jsx } from "react/jsx-runtime";
+var StepperComponent = React2.forwardRef(
+  ({
+    active,
+    onStepClick,
+    orientation = "horizontal",
+    className = "",
+    children,
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const steps = React2.Children.toArray(children).filter(React2.isValidElement);
+    const classes = use_classes_default(Stepper_module_css_default.stepper, Stepper_module_css_default[orientation], className);
+    const stepperStyle = {
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
+      width: SCALES.width(1, "auto"),
+      fontSize: SCALES.font(0.875),
+      color: theme.palette.foreground,
+      ...style
+    };
+    return /* @__PURE__ */ jsx("ol", { ref, className: classes, ...props, style: stepperStyle, children: steps.map((step, index) => {
+      var _a;
+      return /* @__PURE__ */ jsx(
+        StepperContext.Provider,
+        {
+          value: {
+            index,
+            active,
+            isLast: index === steps.length - 1,
+            orientation,
+            onStepClick
+          },
+          children: step
+        },
+        (_a = step.key) != null ? _a : index
+      );
+    }) });
+  }
+);
+StepperComponent.displayName = "BolioUIStepper";
+var Stepper = with_scale_default(StepperComponent);
+var Stepper_default = Stepper;
+
+// core/Stepper/StepperStep.tsx
+import React3, { useContext } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Stepper/StepperStep.module.css.bolio-css-module-source
+var StepperStep_module_css_default = { "step": "StepperStep-module_step__Of2Aj", "last": "StepperStep-module_last__OvXfG", "vertical": "StepperStep-module_vertical__Nd0eQ", "head": "StepperStep-module_head__9GMkW", "indicator": "StepperStep-module_indicator__FCCY6", "text": "StepperStep-module_text__DxOjn", "label": "StepperStep-module_label__FPtyS", "description": "StepperStep-module_description__HyHso", "connector": "StepperStep-module_connector__8b1i-", "srOnly": "StepperStep-module_srOnly__1yOBy" };
+
+// core/Stepper/StepperStep.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Check = () => /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(
+  "path",
+  {
+    d: "M20 6 9 17l-5-5",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var StepperStep = React3.forwardRef(
+  ({
+    label,
+    description,
+    icon,
+    error = false,
+    disabled = false,
+    className = "",
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { index, active, isLast, orientation, onStepClick } = useContext(StepperContext);
+    const state = index < active ? "completed" : index === active ? "current" : "upcoming";
+    const classes = use_classes_default(
+      StepperStep_module_css_default.step,
+      state,
+      StepperStep_module_css_default[orientation],
+      { [StepperStep_module_css_default.error]: error, [StepperStep_module_css_default.last]: isLast },
+      className
+    );
+    const status = error ? "Error" : state === "completed" ? "Completed" : "";
+    let indicatorStyle = {
+      color: theme.palette.accents_5,
+      border: `1px solid ${theme.palette.border}`,
+      backgroundColor: theme.palette.background
+    };
+    if (state === "current") {
+      indicatorStyle = {
+        ...indicatorStyle,
+        color: theme.palette.primary,
+        border: `2px solid ${theme.palette.primary}`
+      };
+    }
+    if (state === "completed") {
+      indicatorStyle = {
+        ...indicatorStyle,
+        color: theme.palette.background,
+        backgroundColor: theme.palette.primary,
+        border: `1px solid ${theme.palette.primary}`
+      };
+    }
+    if (error) {
+      indicatorStyle = {
+        ...indicatorStyle,
+        color: theme.palette.background,
+        backgroundColor: theme.palette.error,
+        border: `1px solid ${theme.palette.error}`
+      };
+    }
+    let labelStyle;
+    if (state === "upcoming") labelStyle = { color: theme.palette.accents_5 };
+    if (error) labelStyle = { color: theme.palette.error };
+    const connectorStyle = {
+      backgroundColor: state === "completed" ? theme.palette.primary : theme.palette.border
+    };
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx2(
+        "span",
+        {
+          className: StepperStep_module_css_default.indicator,
+          style: indicatorStyle,
+          "aria-hidden": "true",
+          children: icon != null ? icon : error ? "!" : state === "completed" ? /* @__PURE__ */ jsx2(Check, {}) : index + 1
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: StepperStep_module_css_default.text, children: [
+        /* @__PURE__ */ jsx2("span", { className: StepperStep_module_css_default.label, style: labelStyle, children: label }),
+        description && /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: StepperStep_module_css_default.description,
+            style: { color: theme.palette.accents_5 },
+            children: description
+          }
+        ),
+        status && /* @__PURE__ */ jsxs("span", { className: StepperStep_module_css_default.srOnly, children: [
+          ", ",
+          status
+        ] })
+      ] })
+    ] });
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ref,
+        className: classes,
+        "aria-current": state === "current" ? "step" : void 0,
+        ...props,
+        children: [
+          onStepClick ? /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              className: StepperStep_module_css_default.head,
+              disabled,
+              style: {
+                borderRadius: theme.layout.radius,
+                "--stepper-focus-color": theme.palette.primary
+              },
+              onClick: () => onStepClick(index),
+              children: content
+            }
+          ) : /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: StepperStep_module_css_default.head,
+              style: { borderRadius: theme.layout.radius },
+              children: content
+            }
+          ),
+          !isLast && /* @__PURE__ */ jsx2(
+            "span",
+            {
+              className: StepperStep_module_css_default.connector,
+              style: connectorStyle,
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+StepperStep.displayName = "BolioUIStepperStep";
+var StepperStep_default = StepperStep;
+
+// core/Stepper/index.ts
+Stepper_default.Step = StepperStep_default;
+var Stepper_default2 = Stepper_default;
+
+export {
+  Stepper_default2 as Stepper_default
+};

package/esm/chunk-LA46RLOT.js

@@ -0,0 +1,180 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  hasChild
+} from "./chunk-UX2B3G6U.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  joinClasses,
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Page/Page.tsx
+import React, { useEffect, useMemo, useState } from "react";
+
+// core/Page/PageContent.tsx
+import { jsx } from "react/jsx-runtime";
+function PageContentComponent({
+  className,
+  children,
+  style,
+  ...props
+}) {
+  const { SCALES } = use_scale_default();
+  const mainStyle = {
+    fontSize: SCALES.font(1),
+    width: SCALES.width(1, "100%"),
+    height: SCALES.height(1, "100%"),
+    padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
+    margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+    ...style
+  };
+  return /* @__PURE__ */ jsx("main", { className, ...props, style: mainStyle, children });
+}
+PageContentComponent.displayName = "BolioUIPageContent";
+var PageContent = with_scale_default(PageContentComponent);
+var PageContent_default = PageContent;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Page/Page.module.css.bolio-css-module-source
+var Page_module_css_default = { "section": "Page-module_section__6-oXj", "hidden": "Page-module_hidden__-axKH" };
+
+// core/Page/Page.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var DotStyles = ({ dotSpace, dotSize }) => {
+  const background = useMemo(
+    () => ({
+      position: `calc(${dotSpace} * 25px)`,
+      size: `calc(${dotSpace} * 50px)`
+    }),
+    [dotSpace]
+  );
+  return /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2("style", { children: `
+        body {
+          background-image:
+            radial-gradient(#e3e3e3 ${dotSize}, transparent 0),
+            radial-gradient(#e3e3e3 ${dotSize}, transparent 0);
+          background-position:
+            0 0,
+            ${background.position} ${background.position};
+          background-attachment: fixed;
+          background-size: ${background.size} ${background.size};
+        }
+      ` }) });
+};
+var PageComponent = React.forwardRef(
+  ({
+    children,
+    render = "default",
+    dotBackdrop = false,
+    className,
+    dotSize = "1px",
+    dotSpace = 1,
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const showDot = useMemo(() => {
+      if (theme.type === "dark") return false;
+      return dotBackdrop;
+    }, [dotBackdrop, theme.type]);
+    const [preventRender, setPreventRender] = useState(
+      render !== "default"
+    );
+    useEffect(() => {
+      setPreventRender(false);
+    }, []);
+    if (preventRender) {
+      const renderSEO = render === "effect-seo";
+      if (!renderSEO) return null;
+      return /* @__PURE__ */ jsx2("div", { className: Page_module_css_default.hidden, "aria-hidden": "true", children });
+    }
+    const hasContent = hasChild(children, PageContent_default);
+    const sectionStyle = {
+      fontSize: SCALES.font(1),
+      height: SCALES.height(1, "auto"),
+      ...style
+    };
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: joinClasses(Page_module_css_default.section, className),
+        ref,
+        ...props,
+        style: sectionStyle,
+        children: [
+          hasContent ? children : /* @__PURE__ */ jsx2(PageContent_default, { children }),
+          showDot && /* @__PURE__ */ jsx2(DotStyles, { dotSize, dotSpace })
+        ]
+      }
+    );
+  }
+);
+PageComponent.displayName = "BolioUIPage";
+var Page = with_scale_default(PageComponent);
+var Page_default = Page;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Page/PageHeader.module.css.bolio-css-module-source
+var PageHeader_module_css_default = { "center": "PageHeader-module_center__yFLt0" };
+
+// core/Page/PageHeader.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function PageHeaderComponent({
+  children,
+  center = false,
+  className = "",
+  style,
+  ...props
+}) {
+  const { SCALES } = use_scale_default();
+  const classes = use_classes_default({ [PageHeader_module_css_default.center]: center }, className);
+  const headerStyle = {
+    fontSize: SCALES.font(1),
+    width: SCALES.width(1, "100%"),
+    height: SCALES.height(1, "auto"),
+    padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
+    margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+    ...style
+  };
+  return /* @__PURE__ */ jsx3("header", { className: classes, ...props, style: headerStyle, children });
+}
+PageHeaderComponent.displayName = "BolioUIPageHeader";
+var PageHeader = with_scale_default(PageHeaderComponent);
+var PageHeader_default = PageHeader;
+
+// core/Page/PageFooter.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function PageFooterComponent({
+  children,
+  style,
+  ...props
+}) {
+  const { SCALES } = use_scale_default();
+  const footerStyle = {
+    fontSize: SCALES.font(1),
+    width: SCALES.width(1, "100%"),
+    height: SCALES.height(1, "auto"),
+    padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
+    margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+    ...style
+  };
+  return /* @__PURE__ */ jsx4("footer", { ...props, style: footerStyle, children });
+}
+PageFooterComponent.displayName = "BolioUIPageFooter";
+var PageFooter = with_scale_default(PageFooterComponent);
+var PageFooter_default = PageFooter;
+
+// core/Page/index.ts
+Page_default.Header = PageHeader_default;
+Page_default.Content = PageContent_default;
+Page_default.Body = PageContent_default;
+Page_default.Footer = PageFooter_default;
+var Page_default2 = Page_default;
+
+export {
+  Page_default2 as Page_default
+};

package/esm/chunk-LMDBE6T6.js

@@ -0,0 +1,88 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Loading/Loading.tsx
+import React, { useMemo } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Loading/Loading.module.css.bolio-css-module-source
+var Loading_module_css_default = { "loadingContainer": "Loading-module_loadingContainer__xI5N-", "loading": "Loading-module_loading__bHt1h", "loadingBlink": "Loading-module_loadingBlink__4TRML" };
+
+// core/Loading/Loading.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var getIconBgColor = (type, palette, color) => {
+  const colors = {
+    default: palette.accents_6,
+    primary: palette.primary,
+    secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error,
+    info: palette.info
+  };
+  return color ? color : colors[type];
+};
+var LoadingComponent = React.forwardRef(
+  ({
+    children,
+    type = "default",
+    color,
+    className = "",
+    spaceRatio = 1,
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const classes = use_classes_default(Loading_module_css_default.loadingContainer, className);
+    const bgColor = useMemo(
+      () => getIconBgColor(type, theme.palette, color),
+      [type, theme.palette, color]
+    );
+    const containerStyle = {
+      fontSize: SCALES.font(1),
+      width: SCALES.width(1, "100%"),
+      height: SCALES.height(1, "100%"),
+      padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      ...style
+    };
+    const dotStyle = {
+      backgroundColor: bgColor,
+      margin: `0 calc(0.25em / 2 * ${spaceRatio})`
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "status",
+        className: classes,
+        ...props,
+        style: containerStyle,
+        children: /* @__PURE__ */ jsxs("span", { className: Loading_module_css_default.loading, children: [
+          children && /* @__PURE__ */ jsx("label", { style: { color: theme.palette.accents_5 }, children }),
+          /* @__PURE__ */ jsx("i", { style: dotStyle }),
+          /* @__PURE__ */ jsx("i", { style: dotStyle }),
+          /* @__PURE__ */ jsx("i", { style: dotStyle })
+        ] })
+      }
+    );
+  }
+);
+LoadingComponent.displayName = "BolioUILoading";
+var Loading = with_scale_default(LoadingComponent);
+var Loading_default = Loading;
+
+// core/Loading/index.ts
+var Loading_default2 = Loading_default;
+
+export {
+  Loading_default2 as Loading_default
+};

package/esm/chunk-LQYCPFUA.js

@@ -0,0 +1,188 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Avatar/Avatar.tsx
+import React2, { useEffect, useRef, useState } from "react";
+
+// core/Avatar/AvatarSkeleton.tsx
+import React from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Avatar/AvatarSkeleton.module.css.bolio-css-module-source
+var AvatarSkeleton_module_css_default = { "skeleton": "AvatarSkeleton-module_skeleton__-4455", "avatarSkeletonLoading": "AvatarSkeleton-module_avatarSkeletonLoading__WzSvN" };
+
+// core/Avatar/AvatarSkeleton.tsx
+import { jsx } from "react/jsx-runtime";
+var AvatarSkeleton = React.memo(
+  ({ opacity = 0.5, ...props }) => {
+    const theme = use_theme_default();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...props,
+        className: AvatarSkeleton_module_css_default.skeleton,
+        style: {
+          backgroundImage: `linear-gradient(270deg, ${theme.palette.accents_1}, ${theme.palette.accents_2}, ${theme.palette.accents_2}, ${theme.palette.accents_1})`,
+          opacity
+        }
+      }
+    );
+  }
+);
+AvatarSkeleton.displayName = "BolioUIAvatarSkeleton";
+var AvatarSkeleton_default = AvatarSkeleton;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Avatar/Avatar.module.css.bolio-css-module-source
+var Avatar_module_css_default = { "avatar": "Avatar-module_avatar__0FLxq", "avatarImg": "Avatar-module_avatarImg__F6nLG", "avatarText": "Avatar-module_avatarText__eJPYJ" };
+
+// core/Avatar/Avatar.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var safeText = (text) => {
+  if (text.length <= 4) return text;
+  return text.slice(0, 3);
+};
+var AvatarComponent = React2.forwardRef(
+  ({
+    src,
+    stacked = false,
+    text = "",
+    isSquare = false,
+    className = "",
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES, getScaleProps } = use_scale_default();
+    const showText = !src;
+    const radius = isSquare ? theme.layout.radius : "50%";
+    const marginLeft = stacked ? SCALES.ml(-0.625) : SCALES.ml(0);
+    const classes = use_classes_default("avatar", Avatar_module_css_default.avatar, className);
+    const width = getScaleProps(["width", "w"]);
+    const height = getScaleProps(["height", "h"]);
+    const showAnimation = width && height;
+    const [loading, setLoading] = useState(true);
+    const [showSkeleton, setShowSkeleton] = useState(true);
+    const imageRef = useRef(null);
+    const imageLoaded = () => {
+      if (!showAnimation) return;
+      setLoading(false);
+    };
+    useEffect(() => {
+      if (!showAnimation) return;
+      if (!imageRef.current) return;
+      if (imageRef.current.complete) {
+        setLoading(false);
+        setShowSkeleton(false);
+      }
+    }, [showAnimation]);
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        if (showAnimation) {
+          setShowSkeleton(false);
+        }
+        clearTimeout(timer);
+      }, 3e3);
+      return () => clearTimeout(timer);
+    }, [loading, showAnimation]);
+    const avatarStyle = {
+      borderRadius: radius,
+      backgroundColor: theme.palette.accents_2,
+      width: SCALES.width(1.75) || SCALES.height(1.75),
+      height: SCALES.height(1.75) || SCALES.width(1.75),
+      padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${marginLeft}`
+    };
+    return /* @__PURE__ */ jsxs("span", { ref, className: classes, style: avatarStyle, children: [
+      !showText && /* @__PURE__ */ jsxs(Fragment, { children: [
+        showSkeleton && showAnimation && /* @__PURE__ */ jsx2(AvatarSkeleton_default, { opacity: loading ? 1 : 0 }),
+        /* @__PURE__ */ jsx2(
+          "img",
+          {
+            alt: "Avatar",
+            src,
+            ref: imageRef,
+            onLoad: imageLoaded,
+            className: Avatar_module_css_default.avatarImg,
+            style: { borderRadius: radius },
+            draggable: false,
+            ...props
+          }
+        )
+      ] }),
+      showText && /* @__PURE__ */ jsx2(
+        "span",
+        {
+          className: Avatar_module_css_default.avatarText,
+          style: { fontSize: SCALES.font(1) },
+          ...props,
+          children: safeText(text)
+        }
+      )
+    ] });
+  }
+);
+AvatarComponent.displayName = "BolioUIAvatar";
+var Avatar = with_scale_default(AvatarComponent);
+var Avatar_default = Avatar;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Avatar/AvatarGroup.module.css.bolio-css-module-source
+var AvatarGroup_module_css_default = { "avatarGroup": "AvatarGroup-module_avatarGroup__BX-qh", "count": "AvatarGroup-module_count__WYRp2" };
+
+// core/Avatar/AvatarGroup.tsx
+import { jsxs as jsxs2 } from "react/jsx-runtime";
+function AvatarGroupComponent({
+  count,
+  className = "",
+  children
+}) {
+  const theme = use_theme_default();
+  const { SCALES } = use_scale_default();
+  const groupStyle = {
+    width: SCALES.width(1, "max-content"),
+    height: SCALES.height(1, "auto"),
+    padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
+    margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+    "--avatar-group-overlap": `-${SCALES.ml(0.625)}`
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: use_classes_default(AvatarGroup_module_css_default.avatarGroup, className),
+      style: groupStyle,
+      children: [
+        children,
+        count && /* @__PURE__ */ jsxs2(
+          "span",
+          {
+            className: AvatarGroup_module_css_default.count,
+            style: {
+              fontSize: SCALES.font(0.875),
+              color: theme.palette.accents_7
+            },
+            children: [
+              "+",
+              count
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+AvatarGroupComponent.displayName = "BolioUIAvatarGroup";
+var AvatarGroup = with_scale_default(AvatarGroupComponent);
+var AvatarGroup_default = AvatarGroup;
+
+// core/Avatar/index.ts
+Avatar_default.Group = AvatarGroup_default;
+var Avatar_default2 = Avatar_default;
+
+export {
+  Avatar_default2 as Avatar_default
+};