@activecollab/components 2.0.446 → 2.0.447

package/dist/cjs/components/Avatar/Avatar.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.Avatar = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Styles = require("./Styles");
+var _useForkRef = _interopRequireDefault(require("../../utils/useForkRef"));
 var _Loaders = require("../Loaders");
 var _excluded = ["url", "alt", "size", "className", "imgClassName", "children"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
@@ -57,10 +59,18 @@ var Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
     _useState2 = _slicedToArray(_useState, 2),
     imageLoaded = _useState2[0],
     setImageLoaded = _useState2[1];
+  var imageRef = (0, _react.useRef)(null);
+  var handleRef = (0, _useForkRef.default)(ref, imageRef);
+  (0, _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.createElement(_Styles.StyledWrapper, {
     className: className
   }, children, /*#__PURE__*/_react.default.createElement(_Styles.StyledAvatar, _extends({
-    ref: ref,
+    ref: handleRef,
     src: url,
     alt: alt,
     width: size,
@@ -69,13 +79,13 @@ var Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
       setImageLoaded(true);
     },
     role: "img",
-    className: imgClassName,
-    style: {
-      display: imageLoaded ? "block" : "none"
-    }
+    className: imgClassName
   }, rest)), !imageLoaded && /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
     "data-testid": "loader",
     style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
       width: size,
       height: size,
       borderRadius: "100%"

package/dist/cjs/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":["_react","_interopRequireWildcard","require","_Styles","_Loaders","_excluded","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","_slicedToArray","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","a","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","l","Symbol","iterator","u","next","done","push","value","return","isArray","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","Avatar","exports","forwardRef","_ref","ref","url","_ref$alt","alt","_ref$size","size","className","imgClassName","children","rest","_useState","useState","_useState2","imageLoaded","setImageLoaded","createElement","StyledWrapper","StyledAvatar","src","width","height","onLoad","role","style","display","SkeletonLoader","borderRadius","displayName"],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useState } from \"react\";\n\nimport { StyledAvatar, StyledWrapper } from \"./Styles\";\nimport { SkeletonLoader } from \"../Loaders\";\n\nexport interface AvatarProps extends React.ComponentPropsWithoutRef<\"img\"> {\n  /** Path url. */\n  url: string;\n  /** Alt text. */\n  alt?: string;\n  /** Image size. */\n  size?: number;\n  /** Custom class. */\n  className?: string;\n  /** img custom class. */\n  imgClassName?: string;\n}\n\n/**\n * @component Avatar\n * @description\n * The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @prop {url} - The image url of the Avatar.\n * @prop {size} - controls the size of an Avatar (width and height) in pixels.\n * @prop {alt} - alt attribute of the img.\n * @prop {imgClassName} - class name that attaches to img element nested in Wrapper\n *\n * @example\n * <Avatar url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\" alt=\"Profile picture of John\" />\n *\n * @example\n * <Avatar\n *   url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\"\n *   alt=\"Profile picture of John\">\n *   <Badge size={8} backgroundColor=\"green\" position=\"bottom-left\" />\n * </Avatar>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar\n * @see\n * https://design.activecollab.com/docs/components/avatar\n */\nexport const Avatar = forwardRef<\n  HTMLImageElement,\n  PropsWithChildren<AvatarProps>\n>(\n  (\n    {\n      url,\n      alt = \"Avatar Image\",\n      size = 24,\n      className,\n      imgClassName,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n\n    return (\n      <StyledWrapper className={className}>\n        {children}\n\n        <StyledAvatar\n          ref={ref}\n          src={url}\n          alt={alt}\n          width={size}\n          height={size}\n          onLoad={() => {\n            setImageLoaded(true);\n          }}\n          role=\"img\"\n          className={imgClassName}\n          style={{ display: imageLoaded ? \"block\" : \"none\" }}\n          {...rest}\n        />\n        {!imageLoaded && (\n          <SkeletonLoader\n            data-testid=\"loader\"\n            style={{ width: size, height: size, borderRadius: \"100%\" }}\n          />\n        )}\n      </StyledWrapper>\n    );\n  }\n);\n\nAvatar.displayName = \"Avatar\";\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Avatar.js","names":["_react","_interopRequireWildcard","require","_Styles","_useForkRef","_interopRequireDefault","_Loaders","_excluded","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","_slicedToArray","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","a","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","l","Symbol","iterator","u","next","done","push","value","return","isArray","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","Avatar","exports","forwardRef","_ref","ref","url","_ref$alt","alt","_ref$size","size","className","imgClassName","children","rest","_useState","useState","_useState2","imageLoaded","setImageLoaded","imageRef","useRef","handleRef","useForkRef","useLayoutEffect","_imageRef$current","current","complete","naturalWidth","createElement","StyledWrapper","StyledAvatar","src","width","height","onLoad","role","SkeletonLoader","style","position","top","left","borderRadius","displayName"],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  PropsWithChildren,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { StyledAvatar, StyledWrapper } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { SkeletonLoader } from \"../Loaders\";\n\nexport interface AvatarProps extends React.ComponentPropsWithoutRef<\"img\"> {\n  /** Path url. */\n  url: string;\n  /** Alt text. */\n  alt?: string;\n  /** Image size. */\n  size?: number;\n  /** Custom class. */\n  className?: string;\n  /** img custom class. */\n  imgClassName?: string;\n}\n\n/**\n * @component Avatar\n * @description\n * The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @prop {url} - The image url of the Avatar.\n * @prop {size} - controls the size of an Avatar (width and height) in pixels.\n * @prop {alt} - alt attribute of the img.\n * @prop {imgClassName} - class name that attaches to img element nested in Wrapper\n *\n * @example\n * <Avatar url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\" alt=\"Profile picture of John\" />\n *\n * @example\n * <Avatar\n *   url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\"\n *   alt=\"Profile picture of John\">\n *   <Badge size={8} backgroundColor=\"green\" position=\"bottom-left\" />\n * </Avatar>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar\n * @see\n * https://design.activecollab.com/docs/components/avatar\n */\nexport const Avatar = forwardRef<\n  HTMLImageElement,\n  PropsWithChildren<AvatarProps>\n>(\n  (\n    {\n      url,\n      alt = \"Avatar Image\",\n      size = 24,\n      className,\n      imgClassName,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n    const imageRef = useRef<HTMLImageElement | null>(null);\n    const handleRef = useForkRef(ref, imageRef);\n\n    useLayoutEffect(() => {\n      if (imageRef.current?.complete && imageRef.current.naturalWidth > 0) {\n        setImageLoaded(true);\n      }\n    }, [url]);\n\n    return (\n      <StyledWrapper className={className}>\n        {children}\n\n        <StyledAvatar\n          ref={handleRef}\n          src={url}\n          alt={alt}\n          width={size}\n          height={size}\n          onLoad={() => {\n            setImageLoaded(true);\n          }}\n          role=\"img\"\n          className={imgClassName}\n          {...rest}\n        />\n        {!imageLoaded && (\n          <SkeletonLoader\n            data-testid=\"loader\"\n            style={{\n              position: \"absolute\",\n              top: 0,\n              left: 0,\n              width: size,\n              height: size,\n              borderRadius: \"100%\",\n            }}\n          />\n        )}\n      </StyledWrapper>\n    );\n  }\n);\n\nAvatar.displayName = \"Avatar\";\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/Bubble/Styles.js

@@ -22,8 +22,8 @@ var StyledBubble = exports.StyledBubble = _styledComponents.default.div.withConf
   "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.FontStyle, _BoxSizingStyle.BoxSizingStyle);
 StyledBubble.displayName = "StyledBubble";

package/dist/cjs/components/Bubble/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireDefault","require","_BoxSizingStyle","_FontStyle","e","__esModule","default","StyledBubble","exports","styled","div","withConfig","displayName","componentId","FontStyle","BoxSizingStyle"],"sources":["../../../../src/components/Bubble/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledBubble = styled.div`\n  ${tw`tw-bg-white tw-shadow-md tw-border-theme-200 tw-rounded-lg tw-border tw-border-solid tw-text-theme-800 tw-opacity-100 tw-block tw-visible`}\n  transition: opacity 0.2s, visibility 0.2s;\n  ${FontStyle}\n  ${BoxSizingStyle}\n  background-color: var(--page-paper-main);\n`;\n\nStyledBubble.displayName = \"StyledBubble\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAAyC,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAElC,IAAMG,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wGAChC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAA0I,CAAC,EAE7IC,oBAAS,EACTC,8BAAc,CAEjB;AAEDR,YAAY,CAACK,WAAW,GAAG,cAAc","ignoreList":[]}
+{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireDefault","require","_BoxSizingStyle","_FontStyle","e","__esModule","default","StyledBubble","exports","styled","div","withConfig","displayName","componentId","FontStyle","BoxSizingStyle"],"sources":["../../../../src/components/Bubble/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledBubble = styled.div`\n  ${tw`tw-bg-white tw-shadow-2xl tw-border-theme-200 tw-rounded-lg tw-border tw-border-solid tw-text-theme-800 tw-opacity-100 tw-block tw-visible`}\n  transition: opacity 0.2s, visibility 0.2s;\n  ${FontStyle}\n  ${BoxSizingStyle}\n  background-color: var(--page-paper-main);\n`;\n\nStyledBubble.displayName = \"StyledBubble\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAAyC,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAElC,IAAMG,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wGAChC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAA2I,CAAC,EAE9IC,oBAAS,EACTC,8BAAc,CAEjB;AAEDR,YAAY,CAACK,WAAW,GAAG,cAAc","ignoreList":[]}

package/dist/cjs/components/Button/Button.js

@@ -7,7 +7,7 @@ exports.Button = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Styles = require("./Styles");
-var _excluded = ["children", "active", "variant", "size", "type", "className"];
+var _excluded = ["children", "active", "variant", "size", "type", "inset", "className"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -44,6 +44,8 @@ var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
     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);
   return /*#__PURE__*/_react.default.createElement(_Styles.StyledButton, _extends({
@@ -62,6 +64,7 @@ var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
     variant: variant,
     active: active,
     size: size,
+    $inset: inset,
     ref: ref,
     "aria-pressed": active,
     role: "button",

package/dist/cjs/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","_excluded","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","Button","exports","forwardRef","_ref","ref","children","_ref$active","active","_ref$variant","variant","_ref$size","size","_ref$type","type","className","args","createElement","StyledButton","classnames","Array","iconOnly","role","StyledButtonElements","map","value","index","StyledButtonElement","key","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  PropsWithChildren,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  StyledButton,\n  StyledButtonElement,\n  StyledButtonElements,\n} from \"./Styles\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /** Types of a button. */\n  variant?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"option\"\n    | \"contained\"\n    | \"outlined\"\n    | \"text colored\"\n    | \"text gray\"\n    | \"dark transparent\"\n    | \"circle raised\";\n  /** Button size dictates the height. */\n  size?: \"big\" | \"small\" | \"medium\";\n  /** Active or pressed state. */\n  active?: boolean;\n}\n/**\n * @component Button\n * @description\n * Button component is used to trigger an action or event, such as submitting a form,\n * opening a Dialog, canceling an action, or performing a delete operation.\n *\n * @prop {variant} - adds unique look and feel to button.\n * @prop {size} - controls the size of a button.\n * @prop {active} - adds active/pressed state to a button.\n * @prop {type} - defaults to \"button\"; pass \"submit\" for a form's submit control.\n *\n * @example\n * return (\n *   <Button className=\"mr-2\" variant=\"primary\" size=\"big\">\n *     Save\n *   </Button>\n * )\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-button--button\n * https://design.activecollab.com/docs/components/button\n */\nexport const Button = forwardRef<\n  HTMLButtonElement,\n  PropsWithChildren<ButtonProps>\n>(\n  (\n    {\n      children,\n      active = false,\n      variant = \"contained\",\n      size = \"medium\",\n      type = \"button\",\n      className,\n      ...args\n    },\n    ref\n  ) => {\n    return (\n      <StyledButton\n        className={classnames(\"c-btn\", className, {\n          \"c-btn--contained\": variant === \"primary\" || variant === \"contained\",\n          \"c-btn--outlined\": variant === \"secondary\" || variant === \"outlined\",\n          \"c-btn--text_colored\":\n            variant === \"tertiary\" || variant === \"text colored\",\n          \"c-btn--text_gray\": variant === \"option\" || variant === \"text gray\",\n          \"c-btn--dark_transparent\": variant === \"dark transparent\",\n          \"c-btn--circle-raised\": variant === \"circle raised\",\n          \"c-btn--big\": size === \"big\",\n          \"c-btn--small\": size === \"small\",\n          \"c-btn--icon-only\":\n            children instanceof Object && !(children instanceof Array),\n        })}\n        iconOnly={children instanceof Object && !(children instanceof Array)}\n        variant={variant}\n        active={active}\n        size={size}\n        ref={ref}\n        aria-pressed={active}\n        role=\"button\"\n        type={type}\n        {...args}\n      >\n        {children instanceof Array ? (\n          <StyledButtonElements className=\"c-btn__elements\">\n            {children.map((value, index) =>\n              value ? (\n                <StyledButtonElement\n                  className=\"c-btn__elements__element\"\n                  key={index}\n                >\n                  {value}\n                </StyledButtonElement>\n              ) : null\n            )}\n          </StyledButtonElements>\n        ) : (\n          children\n        )}\n      </StyledButton>\n    );\n  }\n);\n\nButton.displayName = \"Button\";\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Button.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","_excluded","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","Button","exports","forwardRef","_ref","ref","children","_ref$active","active","_ref$variant","variant","_ref$size","size","_ref$type","type","_ref$inset","inset","className","args","createElement","StyledButton","classnames","Array","iconOnly","$inset","role","StyledButtonElements","map","value","index","StyledButtonElement","key","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  PropsWithChildren,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  StyledButton,\n  StyledButtonElement,\n  StyledButtonElements,\n} from \"./Styles\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /** Types of a button. */\n  variant?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"option\"\n    | \"contained\"\n    | \"outlined\"\n    | \"text colored\"\n    | \"text gray\"\n    | \"dark transparent\"\n    | \"circle raised\";\n  /** Button size dictates the height. */\n  size?: \"big\" | \"small\" | \"medium\";\n  /** Active or pressed state. */\n  active?: boolean;\n  /** Empty space an icon only text button keeps around its icon. Use \"tight\" for an icon that draws close to its edges. */\n  inset?: \"default\" | \"tight\";\n}\n/**\n * @component Button\n * @description\n * Button component is used to trigger an action or event, such as submitting a form,\n * opening a Dialog, canceling an action, or performing a delete operation.\n *\n * @prop {variant} - adds unique look and feel to button.\n * @prop {size} - controls the size of a button.\n * @prop {active} - adds active/pressed state to a button.\n * @prop {type} - defaults to \"button\"; pass \"submit\" for a form's submit control.\n *\n * @example\n * return (\n *   <Button className=\"mr-2\" variant=\"primary\" size=\"big\">\n *     Save\n *   </Button>\n * )\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-button--button\n * https://design.activecollab.com/docs/components/button\n */\nexport const Button = forwardRef<\n  HTMLButtonElement,\n  PropsWithChildren<ButtonProps>\n>(\n  (\n    {\n      children,\n      active = false,\n      variant = \"contained\",\n      size = \"medium\",\n      type = \"button\",\n      inset = \"default\",\n      className,\n      ...args\n    },\n    ref\n  ) => {\n    return (\n      <StyledButton\n        className={classnames(\"c-btn\", className, {\n          \"c-btn--contained\": variant === \"primary\" || variant === \"contained\",\n          \"c-btn--outlined\": variant === \"secondary\" || variant === \"outlined\",\n          \"c-btn--text_colored\":\n            variant === \"tertiary\" || variant === \"text colored\",\n          \"c-btn--text_gray\": variant === \"option\" || variant === \"text gray\",\n          \"c-btn--dark_transparent\": variant === \"dark transparent\",\n          \"c-btn--circle-raised\": variant === \"circle raised\",\n          \"c-btn--big\": size === \"big\",\n          \"c-btn--small\": size === \"small\",\n          \"c-btn--icon-only\":\n            children instanceof Object && !(children instanceof Array),\n        })}\n        iconOnly={children instanceof Object && !(children instanceof Array)}\n        variant={variant}\n        active={active}\n        size={size}\n        $inset={inset}\n        ref={ref}\n        aria-pressed={active}\n        role=\"button\"\n        type={type}\n        {...args}\n      >\n        {children instanceof Array ? (\n          <StyledButtonElements className=\"c-btn__elements\">\n            {children.map((value, index) =>\n              value ? (\n                <StyledButtonElement\n                  className=\"c-btn__elements__element\"\n                  key={index}\n                >\n                  {value}\n                </StyledButtonElement>\n              ) : null\n            )}\n          </StyledButtonElements>\n        ) : (\n          children\n        )}\n      </StyledButton>\n    );\n  }\n);\n\nButton.displayName = \"Button\";\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAMA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,OAAA,GAAAH,OAAA;AAIkB,IAAAI,SAAA;AAAA,SAAAF,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,wBAAAM,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,cAAAK,EAAA,IAAAd,CAAA,gBAAAc,EAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,EAAA,OAAAN,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAc,EAAA,OAAAN,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAK,EAAA,EAAAN,CAAA,IAAAC,CAAA,CAAAK,EAAA,IAAAd,CAAA,CAAAc,EAAA,WAAAL,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAAA,SAAAiB,SAAA,WAAAA,QAAA,GAAAH,MAAA,CAAAI,MAAA,GAAAJ,MAAA,CAAAI,MAAA,CAAAC,IAAA,eAAAhB,CAAA,aAAAN,CAAA,MAAAA,CAAA,GAAAuB,SAAA,CAAAC,MAAA,EAAAxB,CAAA,UAAAG,CAAA,GAAAoB,SAAA,CAAAvB,CAAA,YAAAK,CAAA,IAAAF,CAAA,OAAAY,cAAA,CAAAC,IAAA,CAAAb,CAAA,EAAAE,CAAA,MAAAC,CAAA,CAAAD,CAAA,IAAAF,CAAA,CAAAE,CAAA,aAAAC,CAAA,KAAAc,QAAA,CAAAK,KAAA,OAAAF,SAAA;AAAA,SAAAG,yBAAA1B,CAAA,EAAAG,CAAA,gBAAAH,CAAA,iBAAAO,CAAA,EAAAF,CAAA,EAAAG,CAAA,GAAAmB,6BAAA,CAAA3B,CAAA,EAAAG,CAAA,OAAAc,MAAA,CAAAW,qBAAA,QAAAtB,CAAA,GAAAW,MAAA,CAAAW,qBAAA,CAAA5B,CAAA,QAAAK,CAAA,MAAAA,CAAA,GAAAC,CAAA,CAAAkB,MAAA,EAAAnB,CAAA,IAAAE,CAAA,GAAAD,CAAA,CAAAD,CAAA,UAAAF,CAAA,CAAA0B,OAAA,CAAAtB,CAAA,QAAAuB,oBAAA,CAAAd,IAAA,CAAAhB,CAAA,EAAAO,CAAA,MAAAC,CAAA,CAAAD,CAAA,IAAAP,CAAA,CAAAO,CAAA,aAAAC,CAAA;AAAA,SAAAmB,8BAAAtB,CAAA,EAAAL,CAAA,gBAAAK,CAAA,iBAAAF,CAAA,gBAAAG,CAAA,IAAAD,CAAA,SAAAU,cAAA,CAAAC,IAAA,CAAAX,CAAA,EAAAC,CAAA,gBAAAN,CAAA,CAAA6B,OAAA,CAAAvB,CAAA,aAAAH,CAAA,CAAAG,CAAA,IAAAD,CAAA,CAAAC,CAAA,YAAAH,CAAA;AAsBlB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAM4B,MAAM,GAAAC,OAAA,CAAAD,MAAA,gBAAG,IAAAE,iBAAU,EAI9B,UAAAC,IAAA,EAWEC,GAAG,EACA;EAAA,IAVDC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,WAAA,GAAAH,IAAA,CACRI,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,KAAK,GAAAA,WAAA;IAAAE,YAAA,GAAAL,IAAA,CACdM,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,WAAW,GAAAA,YAAA;IAAAE,SAAA,GAAAP,IAAA,CACrBQ,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,QAAQ,GAAAA,SAAA;IAAAE,SAAA,GAAAT,IAAA,CACfU,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,QAAQ,GAAAA,SAAA;IAAAE,UAAA,GAAAX,IAAA,CACfY,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,SAAS,GAAAA,UAAA;IACjBE,SAAS,GAAAb,IAAA,CAATa,SAAS;IACNC,IAAI,GAAAtB,wBAAA,CAAAQ,IAAA,EAAAnC,SAAA;EAIT,oBACEN,MAAA,CAAAS,OAAA,CAAA+C,aAAA,CAACnD,OAAA,CAAAoD,YAAY,EAAA9B,QAAA;IACX2B,SAAS,EAAE,IAAAI,mBAAU,EAAC,OAAO,EAAEJ,SAAS,EAAE;MACxC,kBAAkB,EAAEP,OAAO,KAAK,SAAS,IAAIA,OAAO,KAAK,WAAW;MACpE,iBAAiB,EAAEA,OAAO,KAAK,WAAW,IAAIA,OAAO,KAAK,UAAU;MACpE,qBAAqB,EACnBA,OAAO,KAAK,UAAU,IAAIA,OAAO,KAAK,cAAc;MACtD,kBAAkB,EAAEA,OAAO,KAAK,QAAQ,IAAIA,OAAO,KAAK,WAAW;MACnE,yBAAyB,EAAEA,OAAO,KAAK,kBAAkB;MACzD,sBAAsB,EAAEA,OAAO,KAAK,eAAe;MACnD,YAAY,EAAEE,IAAI,KAAK,KAAK;MAC5B,cAAc,EAAEA,IAAI,KAAK,OAAO;MAChC,kBAAkB,EAChBN,QAAQ,YAAYnB,MAAM,IAAI,EAAEmB,QAAQ,YAAYgB,KAAK;IAC7D,CAAC,CAAE;IACHC,QAAQ,EAAEjB,QAAQ,YAAYnB,MAAM,IAAI,EAAEmB,QAAQ,YAAYgB,KAAK,CAAE;IACrEZ,OAAO,EAAEA,OAAQ;IACjBF,MAAM,EAAEA,MAAO;IACfI,IAAI,EAAEA,IAAK;IACXY,MAAM,EAAER,KAAM;IACdX,GAAG,EAAEA,GAAI;IACT,gBAAcG,MAAO;IACrBiB,IAAI,EAAC,QAAQ;IACbX,IAAI,EAAEA;EAAK,GACPI,IAAI,GAEPZ,QAAQ,YAAYgB,KAAK,gBACxB3D,MAAA,CAAAS,OAAA,CAAA+C,aAAA,CAACnD,OAAA,CAAA0D,oBAAoB;IAACT,SAAS,EAAC;EAAiB,GAC9CX,QAAQ,CAACqB,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;IAAA,OACzBD,KAAK,gBACHjE,MAAA,CAAAS,OAAA,CAAA+C,aAAA,CAACnD,OAAA,CAAA8D,mBAAmB;MAClBb,SAAS,EAAC,0BAA0B;MACpCc,GAAG,EAAEF;IAAM,GAEVD,KACkB,CAAC,GACpB,IAAI;EAAA,CACV,CACoB,CAAC,GAEvBtB,QAEU,CAAC;AAEnB,CACF,CAAC;AAEDL,MAAM,CAAC+B,WAAW,GAAG,QAAQ","ignoreList":[]}

package/dist/cjs/components/Button/Styles.js

@@ -11,7 +11,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var StyledButton = exports.StyledButton = _styledComponents.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.FontStyle, _BoxSizingStyle.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.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
   return props.size === "small" && (0, _styledComponents.css)(["height:24px;"]);
 }, function (props) {
   return props.size === "big" && (0, _styledComponents.css)(["height:40px;"]);
@@ -22,13 +22,13 @@ var StyledButton = exports.StyledButton = _styledComponents.default.button.withC
 }, function (props) {
   return props.variant === "dark transparent" && (0, _styledComponents.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") && (0, _styledComponents.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") && (0, _styledComponents.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") && (0, _styledComponents.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") && (0, _styledComponents.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" && (0, _styledComponents.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 && (0, _styledComponents.css)(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", ";", " ", ""], (props.size === "small" || props.size === "big") && (0, _styledComponents.css)(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && (0, _styledComponents.css)(["width:24px;"]), props.size === "big" && (0, _styledComponents.css)(["width:40px;"]));
+  return props.iconOnly && (0, _styledComponents.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" && (0, _styledComponents.css)(["--c-btn-inset:", ";"], props.$inset === "tight" ? "var(--c-btn-icon-tight-inset)" : "var(--c-btn-icon-inset)"), (props.size === "small" || props.size === "big") && (0, _styledComponents.css)(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && (0, _styledComponents.css)(["width:24px;"]), props.size === "big" && (0, _styledComponents.css)(["width:40px;"]));
 }, function (props) {
   return (props.variant === "primary" || props.variant === "contained" || props.variant === "secondary" || props.variant === "outlined") && (0, _styledComponents.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") && (0, _styledComponents.css)(["border-radius:var(--ac-br-rounded);"]));
 }, function (props) {

package/dist/cjs/components/Button/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledButton","exports","styled","button","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","props","size","css","variant","iconOnly","active","children","Array","StyledButtonElements","span","StyledButtonElement"],"sources":["../../../../src/components/Button/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { ButtonProps } from \"./Button\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledButtonProps extends ButtonProps {\n  iconOnly: boolean;\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n  ${FontStyle}\n  ${BoxSizingStyle}\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  vertical-align: middle;\n  font-weight: 500;\n  display: inline-block;\n  line-height: 1;\n  margin: 0;\n  text-decoration: none;\n  font-size: 0.875rem;\n  user-select: none;\n  cursor: pointer;\n  text-align: center;\n  flex-shrink: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 288px;\n\n  border: none;\n  height: 32px;\n  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n    border-color 0.3s ease;\n\n  svg {\n    fill: currentColor;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 50%;\n    pointer-events: none;\n  }\n\n  ${(props) =>\n    props.size === \"small\" &&\n    css`\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n  ${(props) =>\n    (props.variant === \"primary\" || props.variant === \"contained\") &&\n    css`\n      padding: 0 16px;\n      background-color: var(--color-primary);\n      border-radius: var(--ac-br-rounded);\n      color: var(--page-paper-main);\n\n      &:hover,\n      &:focus-visible {\n        box-shadow: 0 3px 6px -2px var(--color-primary-500);\n        background-color: var(--color-primary-800);\n      }\n\n      &:active {\n        box-shadow: 0 4px 10px -2px var(--color-primary-600);\n        background-color: var(--color-primary-800);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n    css`\n      padding: 0 16px;\n      background-color: transparent;\n      border-radius: var(--ac-br-rounded);\n      border: solid 1px var(--color-theme-700);\n      color: var(--color-theme-700);\n\n      &:hover,\n      &:focus-visible {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n      }\n\n      &:active {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n        background-color: var(--color-primary-200);\n      }\n    `}\n\n  ${(props) =>\n    props.variant === \"dark transparent\" &&\n    css`\n      padding: 0 8px;\n      background-color: rgba(0, 0, 0, 0.5);\n      border-radius: var(--ac-br-6);\n      color: var(--only-white);\n\n      &:hover,\n      &:focus-visible {\n        background-color: rgba(0, 0, 0, 0.85);\n      }\n\n      &:active {\n        background-color: var(--only-black);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: var(--ac-br-6);\n      color: var(--color-primary);\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--color-primary-200);\n      }\n\n      &:active {\n        background-color: var(--color-primary-300);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"option\" || props.variant === \"text gray\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: var(--ac-br-6);\n      color: var(--color-theme-700);\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--color-theme-300);\n        color: var(--color-theme-900);\n      }\n\n      &:active {\n        background-color: var(--color-theme-400);\n        color: var(--color-theme-900);\n      }\n    `}\n\n  ${(props) =>\n    props.variant === \"circle raised\" &&\n    css`\n      padding: 0 6px;\n      background-color: transparent;\n      border-radius: var(--ac-br-rounded);\n      color: var(--color-theme-700);\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary);\n      }\n\n      &:active {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    `}\n\n    ${(props) =>\n    props.iconOnly &&\n    css`\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      padding: 0;\n      width: 32px;\n\n      ${(props.size === \"small\" || props.size === \"big\") &&\n      css`\n        border-radius: var(--ac-br-rounded);\n      `};\n\n      ${props.size === \"small\" &&\n      css`\n        width: 24px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        width: 40px;\n      `}\n    `}\n\n  ${(props) =>\n    (props.variant === \"primary\" ||\n      props.variant === \"contained\" ||\n      props.variant === \"secondary\" ||\n      props.variant === \"outlined\") &&\n    css`\n      .c-btn__elements__element:first-child svg {\n        margin-left: -6px;\n      }\n      .c-btn__elements__element:last-child svg {\n        margin-right: -6px;\n      }\n\n      ${(props.size === \"small\" || props.size === \"big\") &&\n      css`\n        border-radius: var(--ac-br-rounded);\n      `}\n    `}\n\n  ${(props) =>\n    (props.variant === \"tertiary\" ||\n      props.variant === \"text colored\" ||\n      props.variant === \"option\" ||\n      props.variant === \"text gray\" ||\n      props.variant === \"dark transparent\") &&\n    css`\n      .c-btn__elements__element:first-child svg {\n        margin-left: -4px;\n      }\n      .c-btn__elements__element:last-child svg {\n        margin-right: -4px;\n      }\n      ${props.size === \"small\" &&\n      css`\n        border-radius: var(--ac-br-4);\n      `}\n      ${props.size === \"big\" &&\n      css`\n        border-radius: var(--ac-br-8);\n      `}\n    `}\n\n    ${(props) =>\n    props.active &&\n    css`\n      ${(props.variant === \"primary\" || props.variant === \"contained\") &&\n      css`\n        background-color: var(--color-primary-800);\n      `}\n\n      ${(props.variant === \"secondary\" || props.variant === \"outlined\") &&\n      css`\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n      `}\n\n      ${props.variant === \"dark transparent\" &&\n      css`\n        background-color: var(--only-black);\n      `}\n\n      ${props.variant === \"circle raised\" &&\n      css`\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary-hover);\n      `}\n\n    ${(props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n      css`\n        background-color: var(--color-primary-200);\n      `}\n\n    ${(props.variant === \"option\" || props.variant === \"text gray\") &&\n      css`\n        color: var(--color-primary);\n        &:hover,\n        &:focus-visible {\n          color: var(--color-primary);\n        }\n        ${props.children instanceof Array &&\n        css`\n          background-color: var(--color-theme-300);\n        `}\n      `}\n    `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n  display: flex;\n  align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n  display: inline-flex;\n  svg {\n    margin: 0 4px;\n  }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledButton","exports","styled","button","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","props","size","css","variant","iconOnly","$inset","active","children","Array","StyledButtonElements","span","StyledButtonElement"],"sources":["../../../../src/components/Button/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { ButtonProps } from \"./Button\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledButtonProps extends ButtonProps {\n  iconOnly: boolean;\n  $inset?: ButtonProps[\"inset\"];\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n  ${FontStyle}\n  ${BoxSizingStyle}\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  vertical-align: middle;\n  font-weight: 500;\n  display: inline-block;\n  line-height: 1;\n  margin: 0;\n  text-decoration: none;\n  font-size: 0.875rem;\n  user-select: none;\n  cursor: pointer;\n  text-align: center;\n  flex-shrink: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 288px;\n\n  /* Empty space around the visible content of a button type. A page control group pulls the button in by --c-btn-inset. */\n  --c-btn-text-inset: 8px;\n  --c-btn-icon-inset: 8px;\n  --c-btn-icon-tight-inset: 6px;\n  --c-btn-inset: 0px;\n\n  border: none;\n  height: 32px;\n  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n    border-color 0.3s ease;\n\n  svg {\n    fill: currentColor;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 50%;\n    pointer-events: none;\n  }\n\n  ${(props) =>\n    props.size === \"small\" &&\n    css`\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n  ${(props) =>\n    (props.variant === \"primary\" || props.variant === \"contained\") &&\n    css`\n      padding: 0 16px;\n      background-color: var(--color-primary);\n      border-radius: var(--ac-br-rounded);\n      color: var(--page-paper-main);\n\n      &:hover,\n      &:focus-visible {\n        box-shadow: 0 3px 6px -2px var(--color-primary-500);\n        background-color: var(--color-primary-800);\n      }\n\n      &:active {\n        box-shadow: 0 4px 10px -2px var(--color-primary-600);\n        background-color: var(--color-primary-800);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n    css`\n      padding: 0 16px;\n      background-color: transparent;\n      border-radius: var(--ac-br-rounded);\n      border: solid 1px var(--color-theme-700);\n      color: var(--color-theme-700);\n\n      &:hover,\n      &:focus-visible {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n      }\n\n      &:active {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n        background-color: var(--color-primary-200);\n      }\n    `}\n\n  ${(props) =>\n    props.variant === \"dark transparent\" &&\n    css`\n      padding: 0 8px;\n      background-color: rgba(0, 0, 0, 0.5);\n      border-radius: var(--ac-br-6);\n      color: var(--only-white);\n\n      &:hover,\n      &:focus-visible {\n        background-color: rgba(0, 0, 0, 0.85);\n      }\n\n      &:active {\n        background-color: var(--only-black);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n    css`\n      padding: 0 var(--c-btn-text-inset);\n      --c-btn-inset: var(--c-btn-text-inset);\n      background-color: transparent;\n      border-radius: var(--ac-br-6);\n      color: var(--color-primary);\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--color-primary-200);\n      }\n\n      &:active {\n        background-color: var(--color-primary-300);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"option\" || props.variant === \"text gray\") &&\n    css`\n      padding: 0 var(--c-btn-text-inset);\n      --c-btn-inset: var(--c-btn-text-inset);\n      background-color: transparent;\n      border-radius: var(--ac-br-6);\n      color: var(--color-theme-700);\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--color-theme-300);\n        color: var(--color-theme-900);\n      }\n\n      &:active {\n        background-color: var(--color-theme-400);\n        color: var(--color-theme-900);\n      }\n    `}\n\n  ${(props) =>\n    props.variant === \"circle raised\" &&\n    css`\n      padding: 0 6px;\n      background-color: transparent;\n      border-radius: var(--ac-br-rounded);\n      color: var(--color-theme-700);\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary);\n      }\n\n      &:active {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    `}\n\n    ${(props) =>\n    props.iconOnly &&\n    css`\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      padding: 0;\n      width: 32px;\n      --c-btn-inset: 0px;\n\n      /* 4px of button stays empty around the 24px icon, plus the empty space the icon drawing keeps inside. */\n      ${(props.variant === \"tertiary\" ||\n        props.variant === \"text colored\" ||\n        props.variant === \"option\" ||\n        props.variant === \"text gray\") &&\n      props.size !== \"small\" &&\n      props.size !== \"big\" &&\n      css`\n        --c-btn-inset: ${props.$inset === \"tight\"\n          ? \"var(--c-btn-icon-tight-inset)\"\n          : \"var(--c-btn-icon-inset)\"};\n      `}\n\n      ${(props.size === \"small\" || props.size === \"big\") &&\n      css`\n        border-radius: var(--ac-br-rounded);\n      `};\n\n      ${props.size === \"small\" &&\n      css`\n        width: 24px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        width: 40px;\n      `}\n    `}\n\n  ${(props) =>\n    (props.variant === \"primary\" ||\n      props.variant === \"contained\" ||\n      props.variant === \"secondary\" ||\n      props.variant === \"outlined\") &&\n    css`\n      .c-btn__elements__element:first-child svg {\n        margin-left: -6px;\n      }\n      .c-btn__elements__element:last-child svg {\n        margin-right: -6px;\n      }\n\n      ${(props.size === \"small\" || props.size === \"big\") &&\n      css`\n        border-radius: var(--ac-br-rounded);\n      `}\n    `}\n\n  ${(props) =>\n    (props.variant === \"tertiary\" ||\n      props.variant === \"text colored\" ||\n      props.variant === \"option\" ||\n      props.variant === \"text gray\" ||\n      props.variant === \"dark transparent\") &&\n    css`\n      .c-btn__elements__element:first-child svg {\n        margin-left: -4px;\n      }\n      .c-btn__elements__element:last-child svg {\n        margin-right: -4px;\n      }\n      ${props.size === \"small\" &&\n      css`\n        border-radius: var(--ac-br-4);\n      `}\n      ${props.size === \"big\" &&\n      css`\n        border-radius: var(--ac-br-8);\n      `}\n    `}\n\n    ${(props) =>\n    props.active &&\n    css`\n      ${(props.variant === \"primary\" || props.variant === \"contained\") &&\n      css`\n        background-color: var(--color-primary-800);\n      `}\n\n      ${(props.variant === \"secondary\" || props.variant === \"outlined\") &&\n      css`\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n      `}\n\n      ${props.variant === \"dark transparent\" &&\n      css`\n        background-color: var(--only-black);\n      `}\n\n      ${props.variant === \"circle raised\" &&\n      css`\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary-hover);\n      `}\n\n    ${(props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n      css`\n        background-color: var(--color-primary-200);\n      `}\n\n    ${(props.variant === \"option\" || props.variant === \"text gray\") &&\n      css`\n        color: var(--color-primary);\n        &:hover,\n        &:focus-visible {\n          color: var(--color-primary);\n        }\n        ${props.children instanceof Array &&\n        css`\n          background-color: var(--color-theme-300);\n        `}\n      `}\n    `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n  display: flex;\n  align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n  display: inline-flex;\n  svg {\n    margin: 0 4px;\n  }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACxE,gBAAgB;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,gBAAgB;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,MAAM;;0CA6ClB,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACxE,gBAAgB;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,gBAAgB;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,MAAM;;0CA2DlB,CAAC"}

package/dist/esm/components/Avatar/Avatar.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["url", "alt", "size", "className", "imgClassName", "children"];
-import React, { forwardRef, useState } from "react";
+import React, { forwardRef, useLayoutEffect, useRef, useState } from "react";
 import { StyledAvatar, StyledWrapper } from "./Styles";
+import useForkRef from "../../utils/useForkRef";
 import { SkeletonLoader } from "../Loaders";
 /**
  * @component Avatar
@@ -42,10 +43,18 @@ export const Avatar = /*#__PURE__*/forwardRef((_ref, ref) => {
   const _useState = useState(false),
     imageLoaded = _useState[0],
     setImageLoaded = _useState[1];
+  const imageRef = useRef(null);
+  const handleRef = useForkRef(ref, imageRef);
+  useLayoutEffect(() => {
+    var _imageRef$current;
+    if ((_imageRef$current = imageRef.current) != null && _imageRef$current.complete && imageRef.current.naturalWidth > 0) {
+      setImageLoaded(true);
+    }
+  }, [url]);
   return /*#__PURE__*/React.createElement(StyledWrapper, {
     className: className
   }, children, /*#__PURE__*/React.createElement(StyledAvatar, _extends({
-    ref: ref,
+    ref: handleRef,
     src: url,
     alt: alt,
     width: size,
@@ -54,13 +63,13 @@ export const Avatar = /*#__PURE__*/forwardRef((_ref, ref) => {
       setImageLoaded(true);
     },
     role: "img",
-    className: imgClassName,
-    style: {
-      display: imageLoaded ? "block" : "none"
-    }
+    className: imgClassName
   }, rest)), !imageLoaded && /*#__PURE__*/React.createElement(SkeletonLoader, {
     "data-testid": "loader",
     style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
       width: size,
       height: size,
       borderRadius: "100%"

package/dist/esm/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":["React","forwardRef","useState","StyledAvatar","StyledWrapper","SkeletonLoader","Avatar","_ref","ref","url","_ref$alt","alt","_ref$size","size","className","imgClassName","children","rest","_objectWithoutPropertiesLoose","_excluded","_useState","imageLoaded","setImageLoaded","createElement","_extends","src","width","height","onLoad","role","style","display","borderRadius","displayName"],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useState } from \"react\";\n\nimport { StyledAvatar, StyledWrapper } from \"./Styles\";\nimport { SkeletonLoader } from \"../Loaders\";\n\nexport interface AvatarProps extends React.ComponentPropsWithoutRef<\"img\"> {\n  /** Path url. */\n  url: string;\n  /** Alt text. */\n  alt?: string;\n  /** Image size. */\n  size?: number;\n  /** Custom class. */\n  className?: string;\n  /** img custom class. */\n  imgClassName?: string;\n}\n\n/**\n * @component Avatar\n * @description\n * The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @prop {url} - The image url of the Avatar.\n * @prop {size} - controls the size of an Avatar (width and height) in pixels.\n * @prop {alt} - alt attribute of the img.\n * @prop {imgClassName} - class name that attaches to img element nested in Wrapper\n *\n * @example\n * <Avatar url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\" alt=\"Profile picture of John\" />\n *\n * @example\n * <Avatar\n *   url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\"\n *   alt=\"Profile picture of John\">\n *   <Badge size={8} backgroundColor=\"green\" position=\"bottom-left\" />\n * </Avatar>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar\n * @see\n * https://design.activecollab.com/docs/components/avatar\n */\nexport const Avatar = forwardRef<\n  HTMLImageElement,\n  PropsWithChildren<AvatarProps>\n>(\n  (\n    {\n      url,\n      alt = \"Avatar Image\",\n      size = 24,\n      className,\n      imgClassName,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n\n    return (\n      <StyledWrapper className={className}>\n        {children}\n\n        <StyledAvatar\n          ref={ref}\n          src={url}\n          alt={alt}\n          width={size}\n          height={size}\n          onLoad={() => {\n            setImageLoaded(true);\n          }}\n          role=\"img\"\n          className={imgClassName}\n          style={{ display: imageLoaded ? \"block\" : \"none\" }}\n          {...rest}\n        />\n        {!imageLoaded && (\n          <SkeletonLoader\n            data-testid=\"loader\"\n            style={{ width: size, height: size, borderRadius: \"100%\" }}\n          />\n        )}\n      </StyledWrapper>\n    );\n  }\n);\n\nAvatar.displayName = \"Avatar\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAqBC,QAAQ,QAAQ,OAAO;AAEtE,SAASC,YAAY,EAAEC,aAAa,QAAQ,UAAU;AACtD,SAASC,cAAc,QAAQ,YAAY;AAe3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,MAAM,gBAAGL,UAAU,CAI9B,CAAAM,IAAA,EAUEC,GAAG,KACA;EAAA,IATDC,GAAG,GAAAF,IAAA,CAAHE,GAAG;IAAAC,QAAA,GAAAH,IAAA,CACHI,GAAG;IAAHA,GAAG,GAAAD,QAAA,cAAG,cAAc,GAAAA,QAAA;IAAAE,SAAA,GAAAL,IAAA,CACpBM,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,EAAE,GAAAA,SAAA;IACTE,SAAS,GAAAP,IAAA,CAATO,SAAS;IACTC,YAAY,GAAAR,IAAA,CAAZQ,YAAY;IACZC,QAAQ,GAAAT,IAAA,CAARS,QAAQ;IACLC,IAAI,GAAAC,6BAAA,CAAAX,IAAA,EAAAY,SAAA;EAIT,MAAAC,SAAA,GAAsClB,QAAQ,CAAU,KAAK,CAAC;IAAvDmB,WAAW,GAAAD,SAAA;IAAEE,cAAc,GAAAF,SAAA;EAElC,oBACEpB,KAAA,CAAAuB,aAAA,CAACnB,aAAa;IAACU,SAAS,EAAEA;EAAU,GACjCE,QAAQ,eAEThB,KAAA,CAAAuB,aAAA,CAACpB,YAAY,EAAAqB,QAAA;IACXhB,GAAG,EAAEA,GAAI;IACTiB,GAAG,EAAEhB,GAAI;IACTE,GAAG,EAAEA,GAAI;IACTe,KAAK,EAAEb,IAAK;IACZc,MAAM,EAAEd,IAAK;IACbe,MAAM,EAAEA,CAAA,KAAM;MACZN,cAAc,CAAC,IAAI,CAAC;IACtB,CAAE;IACFO,IAAI,EAAC,KAAK;IACVf,SAAS,EAAEC,YAAa;IACxBe,KAAK,EAAE;MAAEC,OAAO,EAAEV,WAAW,GAAG,OAAO,GAAG;IAAO;EAAE,GAC/CJ,IAAI,CACT,CAAC,EACD,CAACI,WAAW,iBACXrB,KAAA,CAAAuB,aAAA,CAAClB,cAAc;IACb,eAAY,QAAQ;IACpByB,KAAK,EAAE;MAAEJ,KAAK,EAAEb,IAAI;MAAEc,MAAM,EAAEd,IAAI;MAAEmB,YAAY,EAAE;IAAO;EAAE,CAC5D,CAEU,CAAC;AAEpB,CACF,CAAC;AAED1B,MAAM,CAAC2B,WAAW,GAAG,QAAQ","ignoreList":[]}
+{"version":3,"file":"Avatar.js","names":["React","forwardRef","useLayoutEffect","useRef","useState","StyledAvatar","StyledWrapper","useForkRef","SkeletonLoader","Avatar","_ref","ref","url","_ref$alt","alt","_ref$size","size","className","imgClassName","children","rest","_objectWithoutPropertiesLoose","_excluded","_useState","imageLoaded","setImageLoaded","imageRef","handleRef","_imageRef$current","current","complete","naturalWidth","createElement","_extends","src","width","height","onLoad","role","style","position","top","left","borderRadius","displayName"],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  PropsWithChildren,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { StyledAvatar, StyledWrapper } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { SkeletonLoader } from \"../Loaders\";\n\nexport interface AvatarProps extends React.ComponentPropsWithoutRef<\"img\"> {\n  /** Path url. */\n  url: string;\n  /** Alt text. */\n  alt?: string;\n  /** Image size. */\n  size?: number;\n  /** Custom class. */\n  className?: string;\n  /** img custom class. */\n  imgClassName?: string;\n}\n\n/**\n * @component Avatar\n * @description\n * The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @prop {url} - The image url of the Avatar.\n * @prop {size} - controls the size of an Avatar (width and height) in pixels.\n * @prop {alt} - alt attribute of the img.\n * @prop {imgClassName} - class name that attaches to img element nested in Wrapper\n *\n * @example\n * <Avatar url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\" alt=\"Profile picture of John\" />\n *\n * @example\n * <Avatar\n *   url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\"\n *   alt=\"Profile picture of John\">\n *   <Badge size={8} backgroundColor=\"green\" position=\"bottom-left\" />\n * </Avatar>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar\n * @see\n * https://design.activecollab.com/docs/components/avatar\n */\nexport const Avatar = forwardRef<\n  HTMLImageElement,\n  PropsWithChildren<AvatarProps>\n>(\n  (\n    {\n      url,\n      alt = \"Avatar Image\",\n      size = 24,\n      className,\n      imgClassName,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n    const imageRef = useRef<HTMLImageElement | null>(null);\n    const handleRef = useForkRef(ref, imageRef);\n\n    useLayoutEffect(() => {\n      if (imageRef.current?.complete && imageRef.current.naturalWidth > 0) {\n        setImageLoaded(true);\n      }\n    }, [url]);\n\n    return (\n      <StyledWrapper className={className}>\n        {children}\n\n        <StyledAvatar\n          ref={handleRef}\n          src={url}\n          alt={alt}\n          width={size}\n          height={size}\n          onLoad={() => {\n            setImageLoaded(true);\n          }}\n          role=\"img\"\n          className={imgClassName}\n          {...rest}\n        />\n        {!imageLoaded && (\n          <SkeletonLoader\n            data-testid=\"loader\"\n            style={{\n              position: \"absolute\",\n              top: 0,\n              left: 0,\n              width: size,\n              height: size,\n              borderRadius: \"100%\",\n            }}\n          />\n        )}\n      </StyledWrapper>\n    );\n  }\n);\n\nAvatar.displayName = \"Avatar\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IACVC,UAAU,EAEVC,eAAe,EACfC,MAAM,EACNC,QAAQ,QACH,OAAO;AAEd,SAASC,YAAY,EAAEC,aAAa,QAAQ,UAAU;AACtD,OAAOC,UAAU,MAAM,wBAAwB;AAC/C,SAASC,cAAc,QAAQ,YAAY;AAe3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,MAAM,gBAAGR,UAAU,CAI9B,CAAAS,IAAA,EAUEC,GAAG,KACA;EAAA,IATDC,GAAG,GAAAF,IAAA,CAAHE,GAAG;IAAAC,QAAA,GAAAH,IAAA,CACHI,GAAG;IAAHA,GAAG,GAAAD,QAAA,cAAG,cAAc,GAAAA,QAAA;IAAAE,SAAA,GAAAL,IAAA,CACpBM,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,EAAE,GAAAA,SAAA;IACTE,SAAS,GAAAP,IAAA,CAATO,SAAS;IACTC,YAAY,GAAAR,IAAA,CAAZQ,YAAY;IACZC,QAAQ,GAAAT,IAAA,CAARS,QAAQ;IACLC,IAAI,GAAAC,6BAAA,CAAAX,IAAA,EAAAY,SAAA;EAIT,MAAAC,SAAA,GAAsCnB,QAAQ,CAAU,KAAK,CAAC;IAAvDoB,WAAW,GAAAD,SAAA;IAAEE,cAAc,GAAAF,SAAA;EAClC,MAAMG,QAAQ,GAAGvB,MAAM,CAA0B,IAAI,CAAC;EACtD,MAAMwB,SAAS,GAAGpB,UAAU,CAACI,GAAG,EAAEe,QAAQ,CAAC;EAE3CxB,eAAe,CAAC,MAAM;IAAA,IAAA0B,iBAAA;IACpB,IAAI,CAAAA,iBAAA,GAAAF,QAAQ,CAACG,OAAO,aAAhBD,iBAAA,CAAkBE,QAAQ,IAAIJ,QAAQ,CAACG,OAAO,CAACE,YAAY,GAAG,CAAC,EAAE;MACnEN,cAAc,CAAC,IAAI,CAAC;IACtB;EACF,CAAC,EAAE,CAACb,GAAG,CAAC,CAAC;EAET,oBACEZ,KAAA,CAAAgC,aAAA,CAAC1B,aAAa;IAACW,SAAS,EAAEA;EAAU,GACjCE,QAAQ,eAETnB,KAAA,CAAAgC,aAAA,CAAC3B,YAAY,EAAA4B,QAAA;IACXtB,GAAG,EAAEgB,SAAU;IACfO,GAAG,EAAEtB,GAAI;IACTE,GAAG,EAAEA,GAAI;IACTqB,KAAK,EAAEnB,IAAK;IACZoB,MAAM,EAAEpB,IAAK;IACbqB,MAAM,EAAEA,CAAA,KAAM;MACZZ,cAAc,CAAC,IAAI,CAAC;IACtB,CAAE;IACFa,IAAI,EAAC,KAAK;IACVrB,SAAS,EAAEC;EAAa,GACpBE,IAAI,CACT,CAAC,EACD,CAACI,WAAW,iBACXxB,KAAA,CAAAgC,aAAA,CAACxB,cAAc;IACb,eAAY,QAAQ;IACpB+B,KAAK,EAAE;MACLC,QAAQ,EAAE,UAAU;MACpBC,GAAG,EAAE,CAAC;MACNC,IAAI,EAAE,CAAC;MACPP,KAAK,EAAEnB,IAAI;MACXoB,MAAM,EAAEpB,IAAI;MACZ2B,YAAY,EAAE;IAChB;EAAE,CACH,CAEU,CAAC;AAEpB,CACF,CAAC;AAEDlC,MAAM,CAACmC,WAAW,GAAG,QAAQ","ignoreList":[]}

package/dist/esm/components/Bubble/Styles.js

@@ -15,8 +15,8 @@ export const StyledBubble = styled.div.withConfig({
   "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";

package/dist/esm/components/Bubble/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","BoxSizingStyle","FontStyle","StyledBubble","div","withConfig","displayName","componentId"],"sources":["../../../../src/components/Bubble/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledBubble = styled.div`\n  ${tw`tw-bg-white tw-shadow-md tw-border-theme-200 tw-rounded-lg tw-border tw-border-solid tw-text-theme-800 tw-opacity-100 tw-block tw-visible`}\n  transition: opacity 0.2s, visibility 0.2s;\n  ${FontStyle}\n  ${BoxSizingStyle}\n  background-color: var(--page-paper-main);\n`;\n\nStyledBubble.displayName = \"StyledBubble\";\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAGtC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,MAAMC,YAAY,GAAGH,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wGAChC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAA0I,CAAC,EAE7IL,SAAS,EACTD,cAAc,CAEjB;AAEDE,YAAY,CAACG,WAAW,GAAG,cAAc","ignoreList":[]}
+{"version":3,"file":"Styles.js","names":["styled","BoxSizingStyle","FontStyle","StyledBubble","div","withConfig","displayName","componentId"],"sources":["../../../../src/components/Bubble/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledBubble = styled.div`\n  ${tw`tw-bg-white tw-shadow-2xl tw-border-theme-200 tw-rounded-lg tw-border tw-border-solid tw-text-theme-800 tw-opacity-100 tw-block tw-visible`}\n  transition: opacity 0.2s, visibility 0.2s;\n  ${FontStyle}\n  ${BoxSizingStyle}\n  background-color: var(--page-paper-main);\n`;\n\nStyledBubble.displayName = \"StyledBubble\";\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAGtC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,MAAMC,YAAY,GAAGH,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wGAChC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAA2I,CAAC,EAE9IL,SAAS,EACTD,cAAc,CAEjB;AAEDE,YAAY,CAACG,WAAW,GAAG,cAAc","ignoreList":[]}

package/dist/esm/components/Button/Button.d.ts

@@ -6,6 +6,8 @@ export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
     size?: "big" | "small" | "medium";
     /** Active or pressed state. */
     active?: boolean;
+    /** Empty space an icon only text button keeps around its icon. Use "tight" for an icon that draws close to its edges. */
+    inset?: "default" | "tight";
 }
 /**
  * @component Button

package/dist/esm/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,wBAAwB,EAGzB,MAAM,OAAO,CAAC;AAUf,MAAM,WAAW,WAAY,SAAQ,wBAAwB,CAAC,QAAQ,CAAC;IACrE,yBAAyB;IACzB,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,eAAe,CAAC;IACpB,uCAAuC;IACvC,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;IAClC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AACD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,MAAM;;2CA4DlB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,wBAAwB,EAGzB,MAAM,OAAO,CAAC;AAUf,MAAM,WAAW,WAAY,SAAQ,wBAAwB,CAAC,QAAQ,CAAC;IACrE,yBAAyB;IACzB,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,eAAe,CAAC;IACpB,uCAAuC;IACvC,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;IAClC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yHAAyH;IACzH,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC7B;AACD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,MAAM;;2CA8DlB,CAAC"}

package/dist/esm/components/Button/Button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "active", "variant", "size", "type", "className"];
+const _excluded = ["children", "active", "variant", "size", "type", "inset", "className"];
 import React, { forwardRef } from "react";
 import classnames from "classnames";
 import { StyledButton, StyledButtonElement, StyledButtonElements } from "./Styles";
@@ -35,6 +35,8 @@ export const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
     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 = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/React.createElement(StyledButton, _extends({
@@ -53,6 +55,7 @@ export const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
     variant: variant,
     active: active,
     size: size,
+    $inset: inset,
     ref: ref,
     "aria-pressed": active,
     role: "button",

package/dist/esm/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["React","forwardRef","classnames","StyledButton","StyledButtonElement","StyledButtonElements","Button","_ref","ref","children","_ref$active","active","_ref$variant","variant","_ref$size","size","_ref$type","type","className","args","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","Object","Array","iconOnly","role","map","value","index","key","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  PropsWithChildren,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  StyledButton,\n  StyledButtonElement,\n  StyledButtonElements,\n} from \"./Styles\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /** Types of a button. */\n  variant?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"option\"\n    | \"contained\"\n    | \"outlined\"\n    | \"text colored\"\n    | \"text gray\"\n    | \"dark transparent\"\n    | \"circle raised\";\n  /** Button size dictates the height. */\n  size?: \"big\" | \"small\" | \"medium\";\n  /** Active or pressed state. */\n  active?: boolean;\n}\n/**\n * @component Button\n * @description\n * Button component is used to trigger an action or event, such as submitting a form,\n * opening a Dialog, canceling an action, or performing a delete operation.\n *\n * @prop {variant} - adds unique look and feel to button.\n * @prop {size} - controls the size of a button.\n * @prop {active} - adds active/pressed state to a button.\n * @prop {type} - defaults to \"button\"; pass \"submit\" for a form's submit control.\n *\n * @example\n * return (\n *   <Button className=\"mr-2\" variant=\"primary\" size=\"big\">\n *     Save\n *   </Button>\n * )\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-button--button\n * https://design.activecollab.com/docs/components/button\n */\nexport const Button = forwardRef<\n  HTMLButtonElement,\n  PropsWithChildren<ButtonProps>\n>(\n  (\n    {\n      children,\n      active = false,\n      variant = \"contained\",\n      size = \"medium\",\n      type = \"button\",\n      className,\n      ...args\n    },\n    ref\n  ) => {\n    return (\n      <StyledButton\n        className={classnames(\"c-btn\", className, {\n          \"c-btn--contained\": variant === \"primary\" || variant === \"contained\",\n          \"c-btn--outlined\": variant === \"secondary\" || variant === \"outlined\",\n          \"c-btn--text_colored\":\n            variant === \"tertiary\" || variant === \"text colored\",\n          \"c-btn--text_gray\": variant === \"option\" || variant === \"text gray\",\n          \"c-btn--dark_transparent\": variant === \"dark transparent\",\n          \"c-btn--circle-raised\": variant === \"circle raised\",\n          \"c-btn--big\": size === \"big\",\n          \"c-btn--small\": size === \"small\",\n          \"c-btn--icon-only\":\n            children instanceof Object && !(children instanceof Array),\n        })}\n        iconOnly={children instanceof Object && !(children instanceof Array)}\n        variant={variant}\n        active={active}\n        size={size}\n        ref={ref}\n        aria-pressed={active}\n        role=\"button\"\n        type={type}\n        {...args}\n      >\n        {children instanceof Array ? (\n          <StyledButtonElements className=\"c-btn__elements\">\n            {children.map((value, index) =>\n              value ? (\n                <StyledButtonElement\n                  className=\"c-btn__elements__element\"\n                  key={index}\n                >\n                  {value}\n                </StyledButtonElement>\n              ) : null\n            )}\n          </StyledButtonElements>\n        ) : (\n          children\n        )}\n      </StyledButton>\n    );\n  }\n);\n\nButton.displayName = \"Button\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAEVC,UAAU,QAEL,OAAO;AAEd,OAAOC,UAAU,MAAM,YAAY;AAEnC,SACEC,YAAY,EACZC,mBAAmB,EACnBC,oBAAoB,QACf,UAAU;AAoBjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,MAAM,gBAAGL,UAAU,CAI9B,CAAAM,IAAA,EAUEC,GAAG,KACA;EAAA,IATDC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,WAAA,GAAAH,IAAA,CACRI,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,KAAK,GAAAA,WAAA;IAAAE,YAAA,GAAAL,IAAA,CACdM,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,WAAW,GAAAA,YAAA;IAAAE,SAAA,GAAAP,IAAA,CACrBQ,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,QAAQ,GAAAA,SAAA;IAAAE,SAAA,GAAAT,IAAA,CACfU,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,QAAQ,GAAAA,SAAA;IACfE,SAAS,GAAAX,IAAA,CAATW,SAAS;IACNC,IAAI,GAAAC,6BAAA,CAAAb,IAAA,EAAAc,SAAA;EAIT,oBACErB,KAAA,CAAAsB,aAAA,CAACnB,YAAY,EAAAoB,QAAA;IACXL,SAAS,EAAEhB,UAAU,CAAC,OAAO,EAAEgB,SAAS,EAAE;MACxC,kBAAkB,EAAEL,OAAO,KAAK,SAAS,IAAIA,OAAO,KAAK,WAAW;MACpE,iBAAiB,EAAEA,OAAO,KAAK,WAAW,IAAIA,OAAO,KAAK,UAAU;MACpE,qBAAqB,EACnBA,OAAO,KAAK,UAAU,IAAIA,OAAO,KAAK,cAAc;MACtD,kBAAkB,EAAEA,OAAO,KAAK,QAAQ,IAAIA,OAAO,KAAK,WAAW;MACnE,yBAAyB,EAAEA,OAAO,KAAK,kBAAkB;MACzD,sBAAsB,EAAEA,OAAO,KAAK,eAAe;MACnD,YAAY,EAAEE,IAAI,KAAK,KAAK;MAC5B,cAAc,EAAEA,IAAI,KAAK,OAAO;MAChC,kBAAkB,EAChBN,QAAQ,YAAYe,MAAM,IAAI,EAAEf,QAAQ,YAAYgB,KAAK;IAC7D,CAAC,CAAE;IACHC,QAAQ,EAAEjB,QAAQ,YAAYe,MAAM,IAAI,EAAEf,QAAQ,YAAYgB,KAAK,CAAE;IACrEZ,OAAO,EAAEA,OAAQ;IACjBF,MAAM,EAAEA,MAAO;IACfI,IAAI,EAAEA,IAAK;IACXP,GAAG,EAAEA,GAAI;IACT,gBAAcG,MAAO;IACrBgB,IAAI,EAAC,QAAQ;IACbV,IAAI,EAAEA;EAAK,GACPE,IAAI,GAEPV,QAAQ,YAAYgB,KAAK,gBACxBzB,KAAA,CAAAsB,aAAA,CAACjB,oBAAoB;IAACa,SAAS,EAAC;EAAiB,GAC9CT,QAAQ,CAACmB,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KACzBD,KAAK,gBACH7B,KAAA,CAAAsB,aAAA,CAAClB,mBAAmB;IAClBc,SAAS,EAAC,0BAA0B;IACpCa,GAAG,EAAED;EAAM,GAEVD,KACkB,CAAC,GACpB,IACN,CACoB,CAAC,GAEvBpB,QAEU,CAAC;AAEnB,CACF,CAAC;AAEDH,MAAM,CAAC0B,WAAW,GAAG,QAAQ","ignoreList":[]}
+{"version":3,"file":"Button.js","names":["React","forwardRef","classnames","StyledButton","StyledButtonElement","StyledButtonElements","Button","_ref","ref","children","_ref$active","active","_ref$variant","variant","_ref$size","size","_ref$type","type","_ref$inset","inset","className","args","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","Object","Array","iconOnly","$inset","role","map","value","index","key","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  PropsWithChildren,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  StyledButton,\n  StyledButtonElement,\n  StyledButtonElements,\n} from \"./Styles\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /** Types of a button. */\n  variant?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"option\"\n    | \"contained\"\n    | \"outlined\"\n    | \"text colored\"\n    | \"text gray\"\n    | \"dark transparent\"\n    | \"circle raised\";\n  /** Button size dictates the height. */\n  size?: \"big\" | \"small\" | \"medium\";\n  /** Active or pressed state. */\n  active?: boolean;\n  /** Empty space an icon only text button keeps around its icon. Use \"tight\" for an icon that draws close to its edges. */\n  inset?: \"default\" | \"tight\";\n}\n/**\n * @component Button\n * @description\n * Button component is used to trigger an action or event, such as submitting a form,\n * opening a Dialog, canceling an action, or performing a delete operation.\n *\n * @prop {variant} - adds unique look and feel to button.\n * @prop {size} - controls the size of a button.\n * @prop {active} - adds active/pressed state to a button.\n * @prop {type} - defaults to \"button\"; pass \"submit\" for a form's submit control.\n *\n * @example\n * return (\n *   <Button className=\"mr-2\" variant=\"primary\" size=\"big\">\n *     Save\n *   </Button>\n * )\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-button--button\n * https://design.activecollab.com/docs/components/button\n */\nexport const Button = forwardRef<\n  HTMLButtonElement,\n  PropsWithChildren<ButtonProps>\n>(\n  (\n    {\n      children,\n      active = false,\n      variant = \"contained\",\n      size = \"medium\",\n      type = \"button\",\n      inset = \"default\",\n      className,\n      ...args\n    },\n    ref\n  ) => {\n    return (\n      <StyledButton\n        className={classnames(\"c-btn\", className, {\n          \"c-btn--contained\": variant === \"primary\" || variant === \"contained\",\n          \"c-btn--outlined\": variant === \"secondary\" || variant === \"outlined\",\n          \"c-btn--text_colored\":\n            variant === \"tertiary\" || variant === \"text colored\",\n          \"c-btn--text_gray\": variant === \"option\" || variant === \"text gray\",\n          \"c-btn--dark_transparent\": variant === \"dark transparent\",\n          \"c-btn--circle-raised\": variant === \"circle raised\",\n          \"c-btn--big\": size === \"big\",\n          \"c-btn--small\": size === \"small\",\n          \"c-btn--icon-only\":\n            children instanceof Object && !(children instanceof Array),\n        })}\n        iconOnly={children instanceof Object && !(children instanceof Array)}\n        variant={variant}\n        active={active}\n        size={size}\n        $inset={inset}\n        ref={ref}\n        aria-pressed={active}\n        role=\"button\"\n        type={type}\n        {...args}\n      >\n        {children instanceof Array ? (\n          <StyledButtonElements className=\"c-btn__elements\">\n            {children.map((value, index) =>\n              value ? (\n                <StyledButtonElement\n                  className=\"c-btn__elements__element\"\n                  key={index}\n                >\n                  {value}\n                </StyledButtonElement>\n              ) : null\n            )}\n          </StyledButtonElements>\n        ) : (\n          children\n        )}\n      </StyledButton>\n    );\n  }\n);\n\nButton.displayName = \"Button\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAEVC,UAAU,QAEL,OAAO;AAEd,OAAOC,UAAU,MAAM,YAAY;AAEnC,SACEC,YAAY,EACZC,mBAAmB,EACnBC,oBAAoB,QACf,UAAU;AAsBjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,MAAM,gBAAGL,UAAU,CAI9B,CAAAM,IAAA,EAWEC,GAAG,KACA;EAAA,IAVDC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,WAAA,GAAAH,IAAA,CACRI,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,KAAK,GAAAA,WAAA;IAAAE,YAAA,GAAAL,IAAA,CACdM,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,WAAW,GAAAA,YAAA;IAAAE,SAAA,GAAAP,IAAA,CACrBQ,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,QAAQ,GAAAA,SAAA;IAAAE,SAAA,GAAAT,IAAA,CACfU,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,QAAQ,GAAAA,SAAA;IAAAE,UAAA,GAAAX,IAAA,CACfY,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,SAAS,GAAAA,UAAA;IACjBE,SAAS,GAAAb,IAAA,CAATa,SAAS;IACNC,IAAI,GAAAC,6BAAA,CAAAf,IAAA,EAAAgB,SAAA;EAIT,oBACEvB,KAAA,CAAAwB,aAAA,CAACrB,YAAY,EAAAsB,QAAA;IACXL,SAAS,EAAElB,UAAU,CAAC,OAAO,EAAEkB,SAAS,EAAE;MACxC,kBAAkB,EAAEP,OAAO,KAAK,SAAS,IAAIA,OAAO,KAAK,WAAW;MACpE,iBAAiB,EAAEA,OAAO,KAAK,WAAW,IAAIA,OAAO,KAAK,UAAU;MACpE,qBAAqB,EACnBA,OAAO,KAAK,UAAU,IAAIA,OAAO,KAAK,cAAc;MACtD,kBAAkB,EAAEA,OAAO,KAAK,QAAQ,IAAIA,OAAO,KAAK,WAAW;MACnE,yBAAyB,EAAEA,OAAO,KAAK,kBAAkB;MACzD,sBAAsB,EAAEA,OAAO,KAAK,eAAe;MACnD,YAAY,EAAEE,IAAI,KAAK,KAAK;MAC5B,cAAc,EAAEA,IAAI,KAAK,OAAO;MAChC,kBAAkB,EAChBN,QAAQ,YAAYiB,MAAM,IAAI,EAAEjB,QAAQ,YAAYkB,KAAK;IAC7D,CAAC,CAAE;IACHC,QAAQ,EAAEnB,QAAQ,YAAYiB,MAAM,IAAI,EAAEjB,QAAQ,YAAYkB,KAAK,CAAE;IACrEd,OAAO,EAAEA,OAAQ;IACjBF,MAAM,EAAEA,MAAO;IACfI,IAAI,EAAEA,IAAK;IACXc,MAAM,EAAEV,KAAM;IACdX,GAAG,EAAEA,GAAI;IACT,gBAAcG,MAAO;IACrBmB,IAAI,EAAC,QAAQ;IACbb,IAAI,EAAEA;EAAK,GACPI,IAAI,GAEPZ,QAAQ,YAAYkB,KAAK,gBACxB3B,KAAA,CAAAwB,aAAA,CAACnB,oBAAoB;IAACe,SAAS,EAAC;EAAiB,GAC9CX,QAAQ,CAACsB,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KACzBD,KAAK,gBACHhC,KAAA,CAAAwB,aAAA,CAACpB,mBAAmB;IAClBgB,SAAS,EAAC,0BAA0B;IACpCc,GAAG,EAAED;EAAM,GAEVD,KACkB,CAAC,GACpB,IACN,CACoB,CAAC,GAEvBvB,QAEU,CAAC;AAEnB,CACF,CAAC;AAEDH,MAAM,CAAC6B,WAAW,GAAG,QAAQ","ignoreList":[]}

package/dist/esm/components/Button/Styles.d.ts

@@ -1,6 +1,7 @@
 import { ButtonProps } from "./Button";
 interface StyledButtonProps extends ButtonProps {
     iconOnly: boolean;
+    $inset?: ButtonProps["inset"];
 }
 export declare const StyledButton: import("styled-components").StyledComponent<"button", any, StyledButtonProps, never>;
 export declare const StyledButtonElements: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/esm/components/Button/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAIvC,UAAU,iBAAkB,SAAQ,WAAW;IAC7C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,sFA4RxB,CAAC;AAIF,eAAO,MAAM,oBAAoB,qEAGhC,CAAC;AAIF,eAAO,MAAM,mBAAmB,qEAK/B,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAIvC,UAAU,iBAAkB,SAAQ,WAAW;IAC7C,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC/B;AAED,eAAO,MAAM,YAAY,sFAkTxB,CAAC;AAIF,eAAO,MAAM,oBAAoB,qEAGhC,CAAC;AAIF,eAAO,MAAM,mBAAmB,qEAK/B,CAAC"}

package/dist/esm/components/Button/Styles.js

@@ -4,7 +4,7 @@ import { FontStyle } from "../FontStyle";
 export const StyledButton = styled.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, props => props.size === "small" && css(["height:24px;"]), props => props.size === "big" && css(["height:40px;"]), props => (props.variant === "primary" || props.variant === "contained") && css(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover,&:focus-visible{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]), props => (props.variant === "secondary" || props.variant === "outlined") && css(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover,&:focus-visible{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]), props => props.variant === "dark transparent" && 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);}"]), props => (props.variant === "tertiary" || props.variant === "text colored") && 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);}"]), props => (props.variant === "option" || props.variant === "text gray") && 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);}"]), props => props.variant === "circle raised" && 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);}"]), props => props.iconOnly && css(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", ";", " ", ""], (props.size === "small" || props.size === "big") && css(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && css(["width:24px;"]), props.size === "big" && css(["width:40px;"])), props => (props.variant === "primary" || props.variant === "contained" || props.variant === "secondary" || props.variant === "outlined") && 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") && css(["border-radius:var(--ac-br-rounded);"])), props => (props.variant === "tertiary" || props.variant === "text colored" || props.variant === "option" || props.variant === "text gray" || props.variant === "dark transparent") && css([".c-btn__elements__element:first-child svg{margin-left:-4px;}.c-btn__elements__element:last-child svg{margin-right:-4px;}", " ", ""], props.size === "small" && css(["border-radius:var(--ac-br-4);"]), props.size === "big" && css(["border-radius:var(--ac-br-8);"])), props => props.active && css(["", " ", " ", " ", " ", " ", ""], (props.variant === "primary" || props.variant === "contained") && css(["background-color:var(--color-primary-800);"]), (props.variant === "secondary" || props.variant === "outlined") && css(["border-color:var(--color-primary);color:var(--color-primary);"]), props.variant === "dark transparent" && css(["background-color:var(--only-black);"]), props.variant === "circle raised" && css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);"]), (props.variant === "tertiary" || props.variant === "text colored") && css(["background-color:var(--color-primary-200);"]), (props.variant === "option" || props.variant === "text gray") && css(["color:var(--color-primary);&:hover,&:focus-visible{color:var(--color-primary);}", ""], props.children instanceof Array && css(["background-color:var(--color-theme-300);"]))));
+})(["", " ", " -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, props => props.size === "small" && css(["height:24px;"]), props => props.size === "big" && css(["height:40px;"]), props => (props.variant === "primary" || props.variant === "contained") && css(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover,&:focus-visible{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]), props => (props.variant === "secondary" || props.variant === "outlined") && css(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover,&:focus-visible{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]), props => props.variant === "dark transparent" && 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);}"]), props => (props.variant === "tertiary" || props.variant === "text colored") && 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);}"]), props => (props.variant === "option" || props.variant === "text gray") && 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);}"]), props => props.variant === "circle raised" && 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);}"]), props => props.iconOnly && 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" && css(["--c-btn-inset:", ";"], props.$inset === "tight" ? "var(--c-btn-icon-tight-inset)" : "var(--c-btn-icon-inset)"), (props.size === "small" || props.size === "big") && css(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && css(["width:24px;"]), props.size === "big" && css(["width:40px;"])), props => (props.variant === "primary" || props.variant === "contained" || props.variant === "secondary" || props.variant === "outlined") && 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") && css(["border-radius:var(--ac-br-rounded);"])), props => (props.variant === "tertiary" || props.variant === "text colored" || props.variant === "option" || props.variant === "text gray" || props.variant === "dark transparent") && css([".c-btn__elements__element:first-child svg{margin-left:-4px;}.c-btn__elements__element:last-child svg{margin-right:-4px;}", " ", ""], props.size === "small" && css(["border-radius:var(--ac-br-4);"]), props.size === "big" && css(["border-radius:var(--ac-br-8);"])), props => props.active && css(["", " ", " ", " ", " ", " ", ""], (props.variant === "primary" || props.variant === "contained") && css(["background-color:var(--color-primary-800);"]), (props.variant === "secondary" || props.variant === "outlined") && css(["border-color:var(--color-primary);color:var(--color-primary);"]), props.variant === "dark transparent" && css(["background-color:var(--only-black);"]), props.variant === "circle raised" && css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);"]), (props.variant === "tertiary" || props.variant === "text colored") && css(["background-color:var(--color-primary-200);"]), (props.variant === "option" || props.variant === "text gray") && css(["color:var(--color-primary);&:hover,&:focus-visible{color:var(--color-primary);}", ""], props.children instanceof Array && css(["background-color:var(--color-theme-300);"]))));
 StyledButton.displayName = "StyledButton";
 export const StyledButtonElements = styled.span.withConfig({
   displayName: "Styles__StyledButtonElements",