npm - @activecollab/components - Versions diffs - 2.0.445 → 2.0.447 - Mend

@activecollab/components 2.0.445 → 2.0.447

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
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-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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
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","_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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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",

package/dist/esm/components/Button/Styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledButton","button","withConfig","displayName","componentId","props","size","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":[]}
1	+ {"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledButton","button","withConfig","displayName","componentId","props","size","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/presentation/whiteboard/canvasElements.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"canvasElements.d.ts","sourceRoot":"","sources":["../../../../src/presentation/whiteboard/canvasElements.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,YAAY,EAKb,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,SAAS,EAMV,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,gBAAgB,EAChB,QAAQ,EAGR,iBAAiB,EAEjB,eAAe,EAShB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAGL,cAAc,EAIf,MAAM,eAAe,CAAC;AACvB,OAAO,EAIL,cAAc,EAMf,MAAM,eAAe,CAAC;AAEvB,OAAO,EAIL,iBAAiB,EAWlB,MAAM,mBAAmB,CAAC;AAE3B;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,+CAA+C,CAAC;AAE7E;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,wBAAwB,CAAC;AAE3D,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,SAAS,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IAKvB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IAKxE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,YAAY,EAAE,KAAK,CAAC,QAAQ,CAC1B,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAC/D,CAAC;IACF,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IAC1C,SAAS,EAAE,KAAK,CAAC,QAAQ,CACvB,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CACxD,CAAC;IACF,WAAW,EAAE,eAAe,CAAC;IAC7B,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;IAGtE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IACjE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IAGjE,eAAe,EAAE,iBAAiB,EAAE,CAAC;IACrC,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC;IAG9E,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;IAE3E,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzD,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAGlC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;CACzE;AAUD,eAAO,MAAM,cAAc,GAAI,sTAyB5B,mBAAmB,KAAG,~~YAitCxB~~,CAAC"}
1	+ {"version":3,"file":"canvasElements.d.ts","sourceRoot":"","sources":["../../../../src/presentation/whiteboard/canvasElements.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,YAAY,EAKb,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,SAAS,EAMV,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,gBAAgB,EAChB,QAAQ,EAGR,iBAAiB,EAEjB,eAAe,EAShB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAGL,cAAc,EAIf,MAAM,eAAe,CAAC;AACvB,OAAO,EAIL,cAAc,EAMf,MAAM,eAAe,CAAC;AAEvB,OAAO,EAIL,iBAAiB,EAWlB,MAAM,mBAAmB,CAAC;AAE3B;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,+CAA+C,CAAC;AAE7E;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,wBAAwB,CAAC;AAE3D,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,SAAS,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IAKvB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IAKxE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,YAAY,EAAE,KAAK,CAAC,QAAQ,CAC1B,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAC/D,CAAC;IACF,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IAC1C,SAAS,EAAE,KAAK,CAAC,QAAQ,CACvB,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CACxD,CAAC;IACF,WAAW,EAAE,eAAe,CAAC;IAC7B,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;IAGtE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IACjE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IAGjE,eAAe,EAAE,iBAAiB,EAAE,CAAC;IACrC,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC;IAG9E,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;IAE3E,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzD,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAGlC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;CACzE;AAUD,eAAO,MAAM,cAAc,GAAI,sTAyB5B,mBAAmB,KAAG,YAutCxB,CAAC"}

package/dist/esm/presentation/whiteboard/canvasElements.js CHANGED Viewed

@@ -467,14 +467,15 @@ export const CanvasElements = _ref => {
     resolveTimersRef.current.push(timer);
   }, [setProjectElements]);
-  /* Esc, or a click on the overlay. The placeholder was only ever the first
-     half of the gesture, so cancelling throws it away rather than leaving a
-     blank card on the board. */
-  const cancelProjectElement = useCallback(id => {
+  /* Esc, or a click on the overlay. The drawn box stays on the board as a
+     placeholder, selected where it was drawn; a click on it opens the picker
+     again. Deleting it is the element's own Delete, like any other element. */
+  const cancelProjectElement = useCallback(() => {
     setPickerFor(null);
-    setProjectElements(current => current.filter(entry => entry.id !== id));
-    setSelectedId(selected => selected === id ? null : selected);
-  }, [setProjectElements, setSelectedId]);
+  }, []);
+  /* A placeholder's own frame reopens its picker. */
+  const pickForPlaceholder = useCallback(entry => entry.status === "placeholder" && !entry.limited ? () => setPickerFor(entry.id) : undefined, []);
   const pickerElement = (_projectElements$find = projectElements.find(entry => entry.id === pickerFor)) != null ? _projectElements$find : null;
   /* A selected element's Delete, the same removal the link and file cards' own
@@ -845,7 +846,8 @@ export const CanvasElements = _ref => {
       onClick: event => event.stopPropagation()
     }, /*#__PURE__*/React.createElement(ProjectElementNode, {
       element: entry,
-      selected: selected
+      selected: selected,
+      onPick: pickForPlaceholder(entry)
     }), selected && entry.kind === "person" && entry.status === "resolved" && !entry.limited && entry.person ? /*#__PURE__*/React.createElement(PersonCardToolbar, {
       onDetails: () => setDetailsId(entry.id),
       locked: (_locks$entry$id = locks[entry.id]) != null ? _locks$entry$id : false,
@@ -960,7 +962,7 @@ export const CanvasElements = _ref => {
       task: null,
       person
     }),
-    onCancel: () => cancelProjectElement(pickerElement.id)
+    onCancel: cancelProjectElement
   }) : null);
 };
 //# sourceMappingURL=canvasElements.js.map