@jobber/components 6.33.3 → 6.35.0

package/dist/Avatar/Avatar.d.ts

@@ -1,4 +1,6 @@
+import { CSSProperties } from "react";
 import { XOR } from "ts-xor";
+import { IconProps } from "../Icon";
 type AvatarSize = "base" | "large" | "small";
 interface AvatarFoundationProps {
     /**
@@ -25,6 +27,22 @@ interface AvatarFoundationProps {
      * @default "base"
      */
     readonly size?: AvatarSize;
+    /**
+     * **Use at your own risk:** Custom class names for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_className?: {
+        container?: string;
+    } & InitialsUnsafeClassNameProps;
+    /**
+     * **Use at your own risk:** Custom style for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: {
+        container?: CSSProperties;
+    } & InitialsUnsafeStyleProps;
 }
 interface AvatarWithImageProps extends AvatarFoundationProps {
     readonly imageUrl: string;
@@ -33,5 +51,13 @@ interface AvatarWithInitialsProps extends AvatarFoundationProps {
     readonly initials: string;
 }
 export type AvatarProps = XOR<AvatarWithImageProps, AvatarWithInitialsProps>;
-export declare function Avatar({ imageUrl, name, initials, size, color, }: AvatarProps): JSX.Element;
+export declare function Avatar({ imageUrl, name, initials, size, color, UNSAFE_className, UNSAFE_style, }: AvatarProps): JSX.Element;
+interface InitialsUnsafeClassNameProps {
+    initials?: string;
+    fallbackIcon?: IconProps["UNSAFE_className"];
+}
+interface InitialsUnsafeStyleProps {
+    initials?: CSSProperties;
+    fallbackIcon?: IconProps["UNSAFE_style"];
+}
 export {};

package/dist/Avatar-cjs.js

@@ -41,11 +41,8 @@ function deconstructCssCustomProperty(color) {
         .trim();
 }
 
-function Avatar({ imageUrl, name, initials, size = "base", color, }) {
-    const style = {
-        backgroundColor: color,
-        borderColor: color,
-    };
+function Avatar({ imageUrl, name, initials, size = "base", color, UNSAFE_className = {}, UNSAFE_style = {}, }) {
+    const style = Object.assign({ backgroundColor: color, borderColor: color }, UNSAFE_style.container);
     if (imageUrl) {
         style.backgroundImage = `url(${imageUrl})`;
     }
@@ -54,16 +51,23 @@ function Avatar({ imageUrl, name, initials, size = "base", color, }) {
         [styles.hasBorder]: imageUrl && color,
         [styles.isDark]: shouldBeDark,
     });
-    return (React.createElement("div", { className: className, style: style, role: imageUrl && "img", "aria-label": name }, !imageUrl && (React.createElement(Initials, { initials: initials, dark: shouldBeDark, iconSize: size }))));
+    const containerClassNames = classnames(className, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container);
+    return (React.createElement("div", { className: containerClassNames, style: style, role: imageUrl && "img", "aria-label": name }, !imageUrl && (React.createElement(Initials, { initials: initials, dark: shouldBeDark, iconSize: size, UNSAFE_className: {
+            initials: UNSAFE_className.initials,
+            fallbackIcon: UNSAFE_className.fallbackIcon,
+        }, UNSAFE_style: {
+            initials: UNSAFE_style.initials,
+            fallbackIcon: UNSAFE_style.fallbackIcon,
+        } }))));
 }
-function Initials({ initials, dark = false, iconSize = "base", }) {
+function Initials({ initials, dark = false, iconSize = "base", UNSAFE_className, UNSAFE_style, }) {
     if (!initials) {
-        return (React.createElement(Icon.Icon, { name: "person", color: dark ? "white" : "blue", size: iconSize }));
+        return (React.createElement(Icon.Icon, { name: "person", color: dark ? "white" : "blue", size: iconSize, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.fallbackIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.fallbackIcon }));
     }
-    const className = classnames(styles.initials, {
+    const className = classnames(styles.initials, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.initials, {
         [styles.smallInitials]: initials.length > 2,
     });
-    return React.createElement("span", { className: className }, initials.substr(0, 3));
+    return (React.createElement("span", { className: className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.initials }, initials.substr(0, 3)));
 }
 
 exports.Avatar = Avatar;

package/dist/Avatar-es.js

@@ -39,11 +39,8 @@ function deconstructCssCustomProperty(color) {
         .trim();
 }
 
-function Avatar({ imageUrl, name, initials, size = "base", color, }) {
-    const style = {
-        backgroundColor: color,
-        borderColor: color,
-    };
+function Avatar({ imageUrl, name, initials, size = "base", color, UNSAFE_className = {}, UNSAFE_style = {}, }) {
+    const style = Object.assign({ backgroundColor: color, borderColor: color }, UNSAFE_style.container);
     if (imageUrl) {
         style.backgroundImage = `url(${imageUrl})`;
     }
@@ -52,16 +49,23 @@ function Avatar({ imageUrl, name, initials, size = "base", color, }) {
         [styles.hasBorder]: imageUrl && color,
         [styles.isDark]: shouldBeDark,
     });
-    return (React__default.createElement("div", { className: className, style: style, role: imageUrl && "img", "aria-label": name }, !imageUrl && (React__default.createElement(Initials, { initials: initials, dark: shouldBeDark, iconSize: size }))));
+    const containerClassNames = classnames(className, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container);
+    return (React__default.createElement("div", { className: containerClassNames, style: style, role: imageUrl && "img", "aria-label": name }, !imageUrl && (React__default.createElement(Initials, { initials: initials, dark: shouldBeDark, iconSize: size, UNSAFE_className: {
+            initials: UNSAFE_className.initials,
+            fallbackIcon: UNSAFE_className.fallbackIcon,
+        }, UNSAFE_style: {
+            initials: UNSAFE_style.initials,
+            fallbackIcon: UNSAFE_style.fallbackIcon,
+        } }))));
 }
-function Initials({ initials, dark = false, iconSize = "base", }) {
+function Initials({ initials, dark = false, iconSize = "base", UNSAFE_className, UNSAFE_style, }) {
     if (!initials) {
-        return (React__default.createElement(Icon, { name: "person", color: dark ? "white" : "blue", size: iconSize }));
+        return (React__default.createElement(Icon, { name: "person", color: dark ? "white" : "blue", size: iconSize, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.fallbackIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.fallbackIcon }));
     }
-    const className = classnames(styles.initials, {
+    const className = classnames(styles.initials, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.initials, {
         [styles.smallInitials]: initials.length > 2,
     });
-    return React__default.createElement("span", { className: className }, initials.substr(0, 3));
+    return (React__default.createElement("span", { className: className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.initials }, initials.substr(0, 3)));
 }
 
 export { Avatar as A };

package/dist/Box-cjs.js

@@ -117,7 +117,7 @@ function getVars(size, basePrefix = "--box-padding") {
 
 var styles = {"box":"_3hq7jJitEgs-","preserve-white-space":"oWJNe7O1DFI-","spinning":"wXEsL-y93kQ-"};
 
-var gapStyles = {"gap-minuscule":"QJaShYW08G4-","gap-smallest":"_6Cm3NqSDt4Y-","gap-smaller":"_4HNb8yqqy34-","gap-small":"O-c4Zb8TOoE-","gap-base":"JdxCZSu6mUE-","gap-large":"-yIVkzs7exw-","gap-larger":"obuoQPiyBuc-","gap-largest":"VqE9QLxSDIE-","gap-extravagant":"_4jHngIdjuqo-","spinning":"a-aXE4DiSRI-"};
+var gapStyles = {"gap-minuscule":"QJaShYW08G4-","gap-smallest":"_6Cm3NqSDt4Y-","gap-smaller":"_4HNb8yqqy34-","gap-small":"O-c4Zb8TOoE-","gap-slim":"-jtvRWsRRc4-","gap-base":"JdxCZSu6mUE-","gap-large":"-yIVkzs7exw-","gap-larger":"obuoQPiyBuc-","gap-largest":"VqE9QLxSDIE-","gap-extravagant":"_4jHngIdjuqo-","spinning":"a-aXE4DiSRI-"};
 
 var radiusStyles = {"radius-small":"kCKg-JJTRO8-","radius-base":"_235nMwtuWSw-","radius-large":"_9ppkWehd4QA-","radius-larger":"CsG3cZAn6r0-","radius-circle":"WWKSAC2020Q-","spinning":"CiyryaHCYUs-"};
 

package/dist/Box-es.js

@@ -115,7 +115,7 @@ function getVars(size, basePrefix = "--box-padding") {
 
 var styles = {"box":"_3hq7jJitEgs-","preserve-white-space":"oWJNe7O1DFI-","spinning":"wXEsL-y93kQ-"};
 
-var gapStyles = {"gap-minuscule":"QJaShYW08G4-","gap-smallest":"_6Cm3NqSDt4Y-","gap-smaller":"_4HNb8yqqy34-","gap-small":"O-c4Zb8TOoE-","gap-base":"JdxCZSu6mUE-","gap-large":"-yIVkzs7exw-","gap-larger":"obuoQPiyBuc-","gap-largest":"VqE9QLxSDIE-","gap-extravagant":"_4jHngIdjuqo-","spinning":"a-aXE4DiSRI-"};
+var gapStyles = {"gap-minuscule":"QJaShYW08G4-","gap-smallest":"_6Cm3NqSDt4Y-","gap-smaller":"_4HNb8yqqy34-","gap-small":"O-c4Zb8TOoE-","gap-slim":"-jtvRWsRRc4-","gap-base":"JdxCZSu6mUE-","gap-large":"-yIVkzs7exw-","gap-larger":"obuoQPiyBuc-","gap-largest":"VqE9QLxSDIE-","gap-extravagant":"_4jHngIdjuqo-","spinning":"a-aXE4DiSRI-"};
 
 var radiusStyles = {"radius-small":"kCKg-JJTRO8-","radius-base":"_235nMwtuWSw-","radius-large":"_9ppkWehd4QA-","radius-larger":"CsG3cZAn6r0-","radius-circle":"WWKSAC2020Q-","spinning":"CiyryaHCYUs-"};
 

package/dist/InputAvatar/InputAvatar.d.ts

@@ -1,6 +1,6 @@
 import { AvatarProps } from "../Avatar";
 import { FileUpload, UploadParams } from "../InputFile";
-interface InputAvatarProps extends Omit<AvatarProps, "size"> {
+interface InputAvatarProps extends Omit<AvatarProps, "size" | "UNSAFE_className" | "UNSAFE_style"> {
     /**
      * A callback that receives a file object and returns a `UploadParams` needed
      * to upload the file.

package/dist/styles.css

@@ -1989,6 +1989,11 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   gap: var(--space-small);
 }
 
+.-jtvRWsRRc4- {
+  gap: 12px;
+  gap: var(--space-slim);
+}
+
 .JdxCZSu6mUE- {
   gap: 16px;
   gap: var(--space-base);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.33.3",
+  "version": "6.35.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -489,5 +489,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "eeadd690623d3d194d257bd7e5833c83bb10f218"
+  "gitHead": "47a62437567448c46efe6d2e2ec653b985554c44"
 }