@activecollab/components 2.0.445 → 2.0.447

package/dist/index.js

@@ -171,7 +171,7 @@
   var StyledButton$2 = styled__default["default"].button.withConfig({
     displayName: "Styles__StyledButton",
     componentId: "sc-vi1kcr-0"
-  })(["", " ", " -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:middle;font-weight:500;display:inline-block;line-height:1;margin:0;text-decoration:none;font-size:0.875rem;user-select:none;cursor:pointer;text-align:center;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:288px;border:none;height:32px;transition:background-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease,border-color 0.3s ease;svg{fill:currentColor;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
+  })(["", " ", " -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:middle;font-weight:500;display:inline-block;line-height:1;margin:0;text-decoration:none;font-size:0.875rem;user-select:none;cursor:pointer;text-align:center;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:288px;--c-btn-text-inset:8px;--c-btn-icon-inset:8px;--c-btn-icon-tight-inset:6px;--c-btn-inset:0px;border:none;height:32px;transition:background-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease,border-color 0.3s ease;svg{fill:currentColor;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
     return props.size === "small" && styled.css(["height:24px;"]);
   }, function (props) {
     return props.size === "big" && styled.css(["height:40px;"]);
@@ -182,13 +182,13 @@
   }, function (props) {
     return props.variant === "dark transparent" && styled.css(["padding:0 8px;background-color:rgba(0,0,0,0.5);border-radius:var(--ac-br-6);color:var(--only-white);&:hover,&:focus-visible{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
   }, function (props) {
-    return (props.variant === "tertiary" || props.variant === "text colored") && styled.css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-primary);&:hover,&:focus-visible{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
+    return (props.variant === "tertiary" || props.variant === "text colored") && styled.css(["padding:0 var(--c-btn-text-inset);--c-btn-inset:var(--c-btn-text-inset);background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-primary);&:hover,&:focus-visible{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
   }, function (props) {
-    return (props.variant === "option" || props.variant === "text gray") && styled.css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover,&:focus-visible{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
+    return (props.variant === "option" || props.variant === "text gray") && styled.css(["padding:0 var(--c-btn-text-inset);--c-btn-inset:var(--c-btn-text-inset);background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover,&:focus-visible{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
   }, function (props) {
     return props.variant === "circle raised" && styled.css(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);&:hover,&:focus-visible{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
   }, function (props) {
-    return props.iconOnly && styled.css(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", ";", " ", ""], (props.size === "small" || props.size === "big") && styled.css(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && styled.css(["width:24px;"]), props.size === "big" && styled.css(["width:40px;"]));
+    return props.iconOnly && styled.css(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;--c-btn-inset:0px;", " ", ";", " ", ""], (props.variant === "tertiary" || props.variant === "text colored" || props.variant === "option" || props.variant === "text gray") && props.size !== "small" && props.size !== "big" && styled.css(["--c-btn-inset:", ";"], props.$inset === "tight" ? "var(--c-btn-icon-tight-inset)" : "var(--c-btn-icon-inset)"), (props.size === "small" || props.size === "big") && styled.css(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && styled.css(["width:24px;"]), props.size === "big" && styled.css(["width:40px;"]));
   }, function (props) {
     return (props.variant === "primary" || props.variant === "contained" || props.variant === "secondary" || props.variant === "outlined") && styled.css([".c-btn__elements__element:first-child svg{margin-left:-6px;}.c-btn__elements__element:last-child svg{margin-right:-6px;}", ""], (props.size === "small" || props.size === "big") && styled.css(["border-radius:var(--ac-br-rounded);"]));
   }, function (props) {
@@ -208,7 +208,7 @@
   })(["display:inline-flex;svg{margin:0 4px;}"]);
   StyledButtonElement.displayName = "StyledButtonElement";
 
-  var _excluded$5Y = ["children", "active", "variant", "size", "type", "className"];
+  var _excluded$5Y = ["children", "active", "variant", "size", "type", "inset", "className"];
   /**
    * @component Button
    * @description
@@ -240,6 +240,8 @@
       size = _ref$size === void 0 ? "medium" : _ref$size,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? "button" : _ref$type,
+      _ref$inset = _ref.inset,
+      inset = _ref$inset === void 0 ? "default" : _ref$inset,
       className = _ref.className,
       args = _objectWithoutProperties(_ref, _excluded$5Y);
     return /*#__PURE__*/React__default["default"].createElement(StyledButton$2, _extends({
@@ -258,6 +260,7 @@
       variant: variant,
       active: active,
       size: size,
+      $inset: inset,
       ref: ref,
       "aria-pressed": active,
       role: "button",
@@ -14592,8 +14595,8 @@
     "backgroundColor": "rgb(255 255 255 / var(--tw-bg-opacity, 1))",
     "color": "var(--color-theme-800)",
     "opacity": "1",
-    "--tw-shadow": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
-    "--tw-shadow-colored": "0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color)",
+    "--tw-shadow": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+    "--tw-shadow-colored": "0 25px 50px -12px var(--tw-shadow-color)",
     "boxShadow": "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)"
   }, FontStyle, BoxSizingStyle);
   StyledBubble.displayName = "StyledBubble";
@@ -19573,10 +19576,18 @@
       _useState2 = _slicedToArray(_useState, 2),
       imageLoaded = _useState2[0],
       setImageLoaded = _useState2[1];
+    var imageRef = React.useRef(null);
+    var handleRef = useForkRef(ref, imageRef);
+    React.useLayoutEffect(function () {
+      var _imageRef$current;
+      if ((_imageRef$current = imageRef.current) !== null && _imageRef$current !== void 0 && _imageRef$current.complete && imageRef.current.naturalWidth > 0) {
+        setImageLoaded(true);
+      }
+    }, [url]);
     return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$1, {
       className: className
     }, children, /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({
-      ref: ref,
+      ref: handleRef,
       src: url,
       alt: alt,
       width: size,
@@ -19585,13 +19596,13 @@
         setImageLoaded(true);
       },
       role: "img",
-      className: imgClassName,
-      style: {
-        display: imageLoaded ? "block" : "none"
-      }
+      className: imgClassName
     }, rest)), !imageLoaded && /*#__PURE__*/React__default["default"].createElement(SkeletonLoader, {
       "data-testid": "loader",
       style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
         width: size,
         height: size,
         borderRadius: "100%"