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

package/esm/chunk-YHZFOVVI.js

@@ -0,0 +1,611 @@
+import {
+  dropdown_default
+} from "./chunk-UVVBMWR4.js";
+import {
+  Grid_default
+} from "./chunk-JFNYQSEZ.js";
+import {
+  log_warning_default
+} from "./chunk-AXYDJGTN.js";
+import {
+  getColors
+} from "./chunk-KBZEYKCZ.js";
+import {
+  use_current_state_default
+} from "./chunk-33BUV2RX.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  pickChildByProps
+} from "./chunk-UX2B3G6U.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  joinClasses,
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Select/Select.tsx
+import React7, {
+  useCallback,
+  useEffect as useEffect2,
+  useImperativeHandle as useImperativeHandle3,
+  useMemo,
+  useRef as useRef3,
+  useState
+} from "react";
+
+// core/Select/SelectIcon.tsx
+import React from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Select/SelectIcon.module.css.bolio-css-module-source
+var SelectIcon_module_css_default = { "icon": "SelectIcon-module_icon__vgja5" };
+
+// core/Select/SelectIcon.tsx
+import { jsx } from "react/jsx-runtime";
+function SelectIconComponent() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      strokeWidth: "1",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      fill: "none",
+      shapeRendering: "geometricPrecision",
+      className: SelectIcon_module_css_default.icon,
+      children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" })
+    }
+  );
+}
+SelectIconComponent.displayName = "BolioUISelectIcon";
+var SelectIcon = React.memo(SelectIconComponent);
+var SelectIcon_default = SelectIcon;
+
+// core/Select/SelectDropdown.tsx
+import React3, { useImperativeHandle, useRef } from "react";
+
+// core/Select/SelectContext.ts
+import React2 from "react";
+var defaultContext = {
+  visible: false,
+  disableAll: false
+};
+var SelectContext = React2.createContext(defaultContext);
+var useSelectContext = () => React2.useContext(SelectContext);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Select/SelectDropdown.module.css.bolio-css-module-source
+var SelectDropdown_module_css_default = { "selectDropdown": "SelectDropdown-module_selectDropdown__gcGH-" };
+
+// core/Select/SelectDropdown.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SelectDropdown = React3.forwardRef(
+  ({
+    visible,
+    children,
+    className = "",
+    dropdownStyle = {},
+    disableMatchWidth,
+    getPopupContainer
+  }, dropdownRef) => {
+    const theme = use_theme_default();
+    const internalDropdownRef = useRef(null);
+    const { ref } = useSelectContext();
+    const classes = use_classes_default(SelectDropdown_module_css_default.selectDropdown, className);
+    useImperativeHandle(
+      dropdownRef,
+      () => internalDropdownRef.current
+    );
+    return /* @__PURE__ */ jsx2(
+      dropdown_default,
+      {
+        parent: ref,
+        visible,
+        disableMatchWidth,
+        getPopupContainer,
+        children: /* @__PURE__ */ jsx2(
+          "div",
+          {
+            ref: internalDropdownRef,
+            className: classes,
+            style: {
+              "--select-dropdown-radius": theme.layout.radius,
+              "--select-dropdown-shadow": theme.expressiveness.shadowLarge,
+              "--select-dropdown-bg": theme.palette.accents_2,
+              ...dropdownStyle
+            },
+            children
+          }
+        )
+      }
+    );
+  }
+);
+SelectDropdown.displayName = "BolioUISelectDropdown";
+var SelectDropdown_default = SelectDropdown;
+
+// core/Select/SelectIconClear.tsx
+import React4 from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Select/SelectIconClear.module.css.bolio-css-module-source
+var SelectIconClear_module_css_default = { "clearIcon": "SelectIconClear-module_clearIcon__p5IH4" };
+
+// core/Select/SelectIconClear.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function SelectIconClear({ onClick }) {
+  const theme = use_theme_default();
+  const clickHandler = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    if (onClick) onClick(event);
+  };
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      onClick: clickHandler,
+      className: joinClasses("clear-icon", SelectIconClear_module_css_default.clearIcon),
+      style: {
+        "--select-clear-icon-color": theme.palette.accents_5,
+        "--select-clear-icon-hover-color": theme.palette.foreground
+      },
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          fill: "none",
+          shapeRendering: "geometricPrecision",
+          children: [
+            /* @__PURE__ */ jsx3("path", { d: "M18 6L6 18" }),
+            /* @__PURE__ */ jsx3("path", { d: "M6 6l12 12" })
+          ]
+        }
+      )
+    }
+  );
+}
+var MemoSelectIconClear = React4.memo(SelectIconClear);
+var SelectIconClear_default = MemoSelectIconClear;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Select/SelectMultipleValue.module.css.bolio-css-module-source
+var SelectMultipleValue_module_css_default = { "item": "SelectMultipleValue-module_item__P4Dn3" };
+
+// core/Select/SelectMultipleValue.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function SelectMultipleValue({ disabled, onClear, children }) {
+  const theme = use_theme_default();
+  return /* @__PURE__ */ jsx4(Grid_default, { children: /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: SelectMultipleValue_module_css_default.item,
+      style: {
+        "--select-multiple-value-radius": theme.layout.radius,
+        "--select-multiple-value-bg": theme.palette.accents_3,
+        "--select-multiple-value-color": disabled ? theme.palette.accents_5 : theme.palette.accents_7
+      },
+      children: [
+        children,
+        !!onClear && /* @__PURE__ */ jsx4(SelectIconClear_default, { onClick: onClear })
+      ]
+    }
+  ) });
+}
+SelectMultipleValue.displayName = "BolioUISelectMultipleValue";
+var SelectMultipleValue_default = SelectMultipleValue;
+
+// core/Shared/ellipsis.tsx
+import React5 from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Shared/ellipsis.module.css.bolio-css-module-source
+var ellipsis_module_css_default = { "ellipsis": "ellipsis-module_ellipsis__kLorN" };
+
+// core/Shared/ellipsis.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Ellipsis = ({
+  children,
+  height
+}) => {
+  return /* @__PURE__ */ jsx5("span", { className: ellipsis_module_css_default.ellipsis, style: { lineHeight: height }, children });
+};
+var ellipsis_default = React5.memo(Ellipsis);
+
+// core/Select/SelectInput.tsx
+import React6, { useEffect, useImperativeHandle as useImperativeHandle2, useRef as useRef2 } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Select/SelectInput.module.css.bolio-css-module-source
+var SelectInput_module_css_default = { "input": "SelectInput-module_input__xsgNv" };
+
+// core/Select/SelectInput.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var SelectInput = React6.forwardRef(
+  ({ visible, onBlur, onFocus, ariaLabel, ariaLabelledby }, inputRef) => {
+    const ref = useRef2(null);
+    useImperativeHandle2(
+      inputRef,
+      () => ref.current
+    );
+    useEffect(() => {
+      var _a;
+      if (visible) {
+        (_a = ref.current) == null ? void 0 : _a.focus();
+      }
+    }, [visible]);
+    return /* @__PURE__ */ jsx6(
+      "input",
+      {
+        ref,
+        type: "search",
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        readOnly: true,
+        unselectable: "on",
+        "aria-expanded": visible,
+        onBlur,
+        onFocus,
+        className: SelectInput_module_css_default.input
+      }
+    );
+  }
+);
+SelectInput.displayName = "BolioUISelectInput";
+var SelectInput_default = SelectInput;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Select/Select.module.css.bolio-css-module-source
+var Select_module_css_default = { "select": "Select-module_select__ehP4U", "multiple": "Select-module_multiple__QrOT5", "active": "Select-module_active__KKXEg", "icon": "Select-module_icon__EEohP", "value": "Select-module_value__TFknF", "placeholder": "Select-module_placeholder__dhhM0" };
+
+// core/Select/Select.tsx
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var noop = () => {
+};
+var SelectComponent = React7.forwardRef(
+  ({
+    children,
+    type = "default",
+    rounded = false,
+    filled = false,
+    light = false,
+    ghost = false,
+    subtle = false,
+    disabled = false,
+    initialValue: init,
+    value: customValue,
+    icon: Icon = SelectIcon_default,
+    onChange,
+    pure = false,
+    multiple = false,
+    clearable = true,
+    placeholder,
+    className = "",
+    dropdownClassName,
+    dropdownStyle,
+    disableMatchWidth = false,
+    getPopupContainer,
+    onDropdownVisibleChange = noop,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    style,
+    ...props
+  }, selectRef) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const ref = useRef3(null);
+    const inputRef = useRef3(null);
+    const dropdownRef = useRef3(null);
+    const [visible, setVisible] = useState(false);
+    const [selectFocus, setSelectFocus] = useState(false);
+    const [value, setValue, valueRef] = use_current_state_default(() => {
+      if (!multiple) return init;
+      if (Array.isArray(init)) return init;
+      return typeof init === "undefined" ? [] : [init];
+    });
+    const isEmpty = useMemo(() => {
+      if (!Array.isArray(value)) return !value;
+      return value.length === 0;
+    }, [value]);
+    const colors = useMemo(
+      () => getColors(theme.palette, type, disabled, {
+        filled,
+        light,
+        ghost,
+        subtle
+      }),
+      [theme.palette, type, disabled, filled, light, ghost, subtle]
+    );
+    const updateVisible = useCallback(
+      (next) => {
+        onDropdownVisibleChange(next);
+        setVisible(next);
+      },
+      [onDropdownVisibleChange]
+    );
+    const updateValue = useCallback(
+      (next) => {
+        setValue((last) => {
+          if (!Array.isArray(last)) return next;
+          if (!last.includes(next)) return [...last, next];
+          return last.filter((item) => item !== next);
+        });
+        if (onChange) onChange(valueRef.current);
+        if (!multiple) {
+          updateVisible(false);
+        }
+      },
+      [setValue, onChange, valueRef, multiple, updateVisible]
+    );
+    const initialValue = useMemo(
+      () => ({
+        value,
+        visible,
+        updateValue,
+        updateVisible,
+        ref,
+        disableAll: disabled
+      }),
+      [visible, disabled, ref, value, updateValue, updateVisible]
+    );
+    const clickHandler = (event) => {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      event.preventDefault();
+      if (disabled) return;
+      updateVisible(!visible);
+      event.preventDefault();
+    };
+    const mouseDownHandler = (event) => {
+      if (visible) {
+        event.preventDefault();
+      }
+    };
+    useEffect2(() => {
+      if (customValue === void 0) return;
+      setValue(customValue);
+    }, [customValue, setValue]);
+    useImperativeHandle3(
+      selectRef,
+      () => ({
+        focus: () => {
+          var _a;
+          return (_a = inputRef.current) == null ? void 0 : _a.focus();
+        },
+        blur: () => {
+          var _a;
+          return (_a = inputRef.current) == null ? void 0 : _a.blur();
+        },
+        scrollTo: (options) => {
+          var _a;
+          return (_a = dropdownRef.current) == null ? void 0 : _a.scrollTo(options);
+        }
+      }),
+      [inputRef, dropdownRef]
+    );
+    const selectedChild = useMemo(() => {
+      const [, optionChildren] = pickChildByProps(children, "value", value);
+      return React7.Children.map(optionChildren, (child) => {
+        if (!React7.isValidElement(
+          child
+        ))
+          return null;
+        const el = React7.cloneElement(child, {
+          preventAllEvents: true
+        });
+        if (!multiple) return el;
+        return /* @__PURE__ */ jsx7(
+          SelectMultipleValue_default,
+          {
+            disabled,
+            onClear: clearable ? () => updateValue(child.props.value) : null,
+            children: el
+          }
+        );
+      });
+    }, [value, children, multiple, clearable, disabled, updateValue]);
+    const onInputBlur = () => {
+      updateVisible(false);
+      setSelectFocus(false);
+    };
+    const classes = use_classes_default(
+      Select_module_css_default.select,
+      {
+        [Select_module_css_default.active]: selectFocus || visible,
+        [Select_module_css_default.multiple]: multiple
+      },
+      className
+    );
+    const selectStyle = {
+      "--select-cursor": disabled ? "not-allowed" : "pointer",
+      "--select-border-color": colors.borderColor,
+      "--select-radius": rounded ? "25px" : theme.layout.radius,
+      "--select-bg-color": colors.bgColor,
+      "--select-font-size": SCALES.font(0.875),
+      "--select-height": SCALES.height(2.25),
+      "--select-width": SCALES.width(1, "initial"),
+      "--select-padding-top": SCALES.pt(0),
+      "--select-padding-right": SCALES.pr(0.334),
+      "--select-padding-bottom": SCALES.pb(0),
+      "--select-padding-left": SCALES.pl(0.667),
+      "--select-margin-top": SCALES.mt(0),
+      "--select-margin-right": SCALES.mr(0),
+      "--select-margin-bottom": SCALES.mb(0),
+      "--select-margin-left": SCALES.ml(0),
+      "--select-multiple-padding-top": SCALES.pt(0.334),
+      "--select-hover-border": colors.hoverBorder,
+      "--select-hover-bg-color": colors.hoverBgColor,
+      "--select-focus-border": colors.focusBorder,
+      "--select-placeholder-color": colors.placeholderColor,
+      "--select-icon-color": colors.iconColor,
+      "--select-color": colors.color,
+      "--select-placeholder-font-size": SCALES.font(0.775),
+      "--select-icon-right": theme.layout.gapQuarter,
+      "--select-icon-rotate": visible ? "180deg" : "0deg",
+      ...style
+    };
+    return /* @__PURE__ */ jsx7(SelectContext.Provider, { value: initialValue, children: /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: classes,
+        ref,
+        onClick: clickHandler,
+        onMouseDown: mouseDownHandler,
+        ...props,
+        style: selectStyle,
+        children: [
+          /* @__PURE__ */ jsx7(
+            SelectInput_default,
+            {
+              ref: inputRef,
+              ariaLabel: ariaLabel || (typeof placeholder === "string" ? placeholder : void 0),
+              ariaLabelledby,
+              visible,
+              onBlur: onInputBlur,
+              onFocus: () => setSelectFocus(true)
+            }
+          ),
+          isEmpty && /* @__PURE__ */ jsx7("span", { className: joinClasses(Select_module_css_default.value, Select_module_css_default.placeholder), children: /* @__PURE__ */ jsx7(ellipsis_default, { height: "var(--select-height)", children: placeholder }) }),
+          value && !multiple && /* @__PURE__ */ jsx7("span", { className: Select_module_css_default.value, children: selectedChild }),
+          value && multiple && /* @__PURE__ */ jsx7(Grid_default.Container, { gap: 0.5, children: selectedChild }),
+          /* @__PURE__ */ jsx7(
+            SelectDropdown_default,
+            {
+              ref: dropdownRef,
+              visible,
+              className: dropdownClassName,
+              dropdownStyle,
+              disableMatchWidth,
+              getPopupContainer,
+              children
+            }
+          ),
+          !pure && /* @__PURE__ */ jsx7("div", { className: Select_module_css_default.icon, children: /* @__PURE__ */ jsx7(Icon, {}) })
+        ]
+      }
+    ) });
+  }
+);
+SelectComponent.displayName = "BolioUISelect";
+var Select = with_scale_default(SelectComponent);
+var Select_default = Select;
+
+// core/Select/SelectOption.tsx
+import { useMemo as useMemo2 } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Select/SelectOption.module.css.bolio-css-module-source
+var SelectOption_module_css_default = { "option": "SelectOption-module_option__NAlFp", "divider": "SelectOption-module_divider__mmqJj", "label": "SelectOption-module_label__NtVM7" };
+
+// core/Select/SelectOption.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function SelectOptionComponent({
+  value: identValue = "",
+  className = "",
+  children,
+  disabled = false,
+  divider = false,
+  label = false,
+  preventAllEvents = false,
+  style,
+  ...props
+}) {
+  const theme = use_theme_default();
+  const { SCALES } = use_scale_default();
+  const { updateValue, value, disableAll } = useSelectContext();
+  const isDisabled = useMemo2(
+    () => disabled || disableAll,
+    [disabled, disableAll]
+  );
+  const isLabel = useMemo2(() => label || divider, [label, divider]);
+  const classes = use_classes_default(
+    SelectOption_module_css_default.option,
+    { [SelectOption_module_css_default.divider]: divider, [SelectOption_module_css_default.label]: label },
+    className
+  );
+  if (!isLabel && identValue === void 0) {
+    log_warning_default('The props "value" is required.', "Select Option");
+  }
+  const selected = useMemo2(() => {
+    if (!value) return false;
+    if (typeof value === "string") {
+      return identValue === value;
+    }
+    return value.includes(`${identValue}`);
+  }, [identValue, value]);
+  const bgColor = useMemo2(() => {
+    if (isDisabled) return theme.palette.accents_3;
+    return selected ? theme.palette.accents_3 : theme.palette.accents_2;
+  }, [selected, isDisabled, theme.palette]);
+  const hoverBgColor = useMemo2(() => {
+    if (isDisabled || isLabel || selected) return bgColor;
+    return theme.palette.accents_1;
+  }, [selected, isDisabled, theme.palette, isLabel, bgColor]);
+  const color = useMemo2(() => {
+    if (isDisabled) return theme.palette.accents_4;
+    return selected ? theme.palette.foreground : theme.palette.accents_5;
+  }, [selected, isDisabled, theme.palette]);
+  const clickHandler = (event) => {
+    if (preventAllEvents) return;
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    event.preventDefault();
+    if (isDisabled || isLabel) return;
+    if (updateValue) updateValue(identValue);
+  };
+  const optionStyle = {
+    "--select-option-bg": bgColor,
+    "--select-option-color": color,
+    "--select-option-cursor": isDisabled ? "not-allowed" : "pointer",
+    "--select-font-size": SCALES.font(0.75),
+    "--select-option-width": SCALES.width(1, "100%"),
+    "--select-option-height": SCALES.height(2.25),
+    "--select-option-padding-top": SCALES.pt(0),
+    "--select-option-padding-right": SCALES.pr(0.667),
+    "--select-option-padding-bottom": SCALES.pb(0),
+    "--select-option-padding-left": SCALES.pl(0.667),
+    "--select-option-margin-top": SCALES.mt(0),
+    "--select-option-margin-right": SCALES.mr(0),
+    "--select-option-margin-bottom": SCALES.mb(0),
+    "--select-option-margin-left": SCALES.ml(0),
+    "--select-option-hover-bg": hoverBgColor,
+    "--select-option-hover-color": theme.palette.accents_7,
+    "--select-option-divider-border": theme.palette.accents_3,
+    "--select-option-divider-height": SCALES.height(1, 0),
+    "--select-option-divider-padding-top": SCALES.pt(0),
+    "--select-option-divider-padding-right": SCALES.pr(0),
+    "--select-option-divider-padding-bottom": SCALES.pb(0),
+    "--select-option-divider-padding-left": SCALES.pl(0),
+    "--select-option-divider-margin-top": SCALES.mt(0.5),
+    "--select-option-divider-margin-right": SCALES.mr(0),
+    "--select-option-divider-margin-bottom": SCALES.mb(0.5),
+    "--select-option-divider-margin-left": SCALES.ml(0),
+    "--select-option-label-color": theme.palette.accents_7,
+    "--select-option-label-font-size": SCALES.font(0.875),
+    ...style
+  };
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className: classes,
+      onClick: clickHandler,
+      style: optionStyle,
+      ...props,
+      children: /* @__PURE__ */ jsx8(ellipsis_default, { height: SCALES.height(2.25), children })
+    }
+  );
+}
+SelectOptionComponent.displayName = "BolioUISelectOption";
+var SelectOption = with_scale_default(SelectOptionComponent);
+var SelectOption_default = SelectOption;
+
+// core/Select/index.ts
+Select_default.Option = SelectOption_default;
+var Select_default2 = Select_default;
+
+export {
+  Select_default2 as Select_default
+};

package/esm/chunk-ZRORQ2WH.js

@@ -0,0 +1,14 @@
+// core/utils/use-latest.ts
+import { useEffect, useRef } from "react";
+var useLatest = (value) => {
+  const ref = useRef(value);
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref;
+};
+var use_latest_default = useLatest;
+
+export {
+  use_latest_default
+};

package/esm/css/Avatar-AvatarGroup.css

@@ -0,0 +1,17 @@
+@layer Avatar-AvatarGroup {
+.AvatarGroup-module_avatarGroup__BX-qh {
+  display: flex;
+  align-items: center;
+}
+
+.AvatarGroup-module_avatarGroup__BX-qh .avatar {
+  margin-left: var(--avatar-group-overlap);
+}
+
+.AvatarGroup-module_count__WYRp2 {
+  display: inline-flex;
+  align-items: center;
+  padding-left: 5.5px;
+}
+
+}

package/esm/css/Avatar-AvatarSkeleton.css

@@ -0,0 +1,24 @@
+@layer Avatar-AvatarSkeleton {
+.AvatarSkeleton-module_skeleton__-4455 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background-size: 400% 100%;
+  animation: AvatarSkeleton-module_avatarSkeletonLoading__WzSvN 3s ease-in-out infinite;
+  transition: opacity 300ms ease-out;
+}
+
+@keyframes AvatarSkeleton-module_avatarSkeletonLoading__WzSvN {
+  0% {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
+}

package/esm/css/Avatar.css

@@ -0,0 +1,31 @@
+@layer Avatar {
+.Avatar-module_avatar__0FLxq {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  vertical-align: top;
+  box-sizing: border-box;
+}
+
+.Avatar-module_avatarImg__F6nLG {
+  display: inline-block;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  text-align: center;
+}
+
+.Avatar-module_avatarText__eJPYJ {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  font-weight: bold;
+  text-align: center;
+  transform: translate(-50%, -50%) scale(0.65);
+  white-space: nowrap;
+  user-select: none;
+  text-transform: none;
+}
+
+}