@jobber/components 6.88.0 → 6.90.0

package/dist/Card/CardClickable.d.ts

@@ -4,10 +4,12 @@ interface ClickableCardProps {
     onClick(event: React.MouseEvent<HTMLElement>): void;
     readonly className: string;
     readonly children: ReactNode | ReactNode[];
+    readonly UNSAFE_className?: string;
+    readonly UNSAFE_style?: React.CSSProperties;
 }
 /**
  * This is only intended to be used in the Card component.
  * Please use `<Card onClick={onClick} />` component instead.
  */
-export declare function CardClickable({ className, onClick, children, }: ClickableCardProps): React.JSX.Element;
+export declare function CardClickable({ className, onClick, children, UNSAFE_style, }: ClickableCardProps): React.JSX.Element;
 export {};

package/dist/Card/CardHeader.d.ts

@@ -4,4 +4,4 @@ import type { CardProps } from "./types";
  * Intended to be used in the Card component.
  * Use `<Card header={header} />` component instead.
  */
-export declare function CardHeader({ title, header, }: Pick<CardProps, "title" | "header">): React.JSX.Element;
+export declare function CardHeader({ title, header, UNSAFE_className, UNSAFE_style, }: Pick<CardProps, "title" | "header" | "UNSAFE_className" | "UNSAFE_style">): React.JSX.Element;

package/dist/Card/types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from "react";
+import type { CSSProperties, ReactElement, ReactNode } from "react";
 import type colors from "./cardcolors.module.css";
 import { type ButtonProps } from "../Button";
 import { type MenuProps } from "../Menu";
@@ -31,6 +31,24 @@ export interface CardProps {
      */
     readonly header?: string | HeaderActionProps | ReactElement;
     readonly elevation?: elevationProp;
+    /**
+     * **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;
+        header?: string;
+    };
+    /**
+     * **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;
+        header?: CSSProperties;
+    };
 }
 export interface CardHeaderProps {
     readonly children: ReactNode;

package/dist/Card-cjs.js

@@ -18,9 +18,9 @@ const SPACEBAR_KEY = " ";
  * This is only intended to be used in the Card component.
  * Please use `<Card onClick={onClick} />` component instead.
  */
-function CardClickable({ className, onClick, children, }) {
+function CardClickable({ className, onClick, children, UNSAFE_style = {}, }) {
     const cardRef = React.useRef();
-    return (React.createElement("div", { ref: cardRef, "data-testid": "clickable-card", className: className, onClick: onClick, onKeyUp: handleKeyup, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, children));
+    return (React.createElement("div", { ref: cardRef, "data-testid": "clickable-card", className: className, style: UNSAFE_style, onClick: onClick, onKeyUp: handleKeyup, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, children));
     function isCardFocused() {
         return document.activeElement === cardRef.current;
     }
@@ -43,7 +43,7 @@ function CardClickable({ className, onClick, children, }) {
  * Intended to be used in the Card component.
  * Use `<Card header={header} />` component instead.
  */
-function CardHeader({ title, header, }) {
+function CardHeader({ title, header, UNSAFE_className = {}, UNSAFE_style = {}, }) {
     const heading = title || header;
     if (React.isValidElement(heading))
         return React.createElement(React.Fragment, null, heading);
@@ -51,7 +51,7 @@ function CardHeader({ title, header, }) {
         const titleString = typeof heading === "string"
             ? heading
             : heading.title;
-        return (React.createElement("div", { className: styles.header },
+        return (React.createElement("div", { className: classnames(styles.header, UNSAFE_className.header), style: UNSAFE_style.header },
             titleString && React.createElement(Heading.Heading, { level: 2 }, titleString),
             typeof heading === "object" &&
                 renderHeaderAction(heading === null || heading === void 0 ? void 0 : heading.action)));
@@ -107,30 +107,31 @@ function CardHeaderCompoundComponent({ children }) {
 function CardBodyCompoundComponent({ children }) {
     return React.createElement(React.Fragment, null, children);
 }
-function renderCardContent(children, title, header) {
+function renderCardContent(children, title, header, UNSAFE_className, UNSAFE_style) {
     return (React.createElement(React.Fragment, null,
-        React.createElement(CardHeader, { title: title, header: header }),
+        React.createElement(CardHeader, { title: title, header: header, UNSAFE_className: { header: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.header }, UNSAFE_style: { header: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.header } }),
         children));
 }
-function renderCardWrapper(className, content, onClick, url, external) {
+function renderCardWrapper(className, content, onClick, url, external, UNSAFE_className, UNSAFE_style) {
+    const combinedClassName = classnames(className, UNSAFE_className);
     if (onClick) {
-        return (React.createElement(CardClickable, { className: className, onClick: onClick }, content));
+        return (React.createElement(CardClickable, { className: combinedClassName, onClick: onClick, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }, content));
     }
     if (url) {
-        return (React.createElement("a", Object.assign({ className: className, href: url }, (external && { target: "_blank", rel: "noopener noreferrer" })), content));
+        return (React.createElement("a", Object.assign({ className: combinedClassName, href: url, style: UNSAFE_style }, (external && { target: "_blank", rel: "noopener noreferrer" })), content));
     }
-    return React.createElement("div", { className: className }, content);
+    return (React.createElement("div", { className: combinedClassName, style: UNSAFE_style }, content));
 }
 function Card(props) {
-    const { accent, header, children, title, elevation = "none", onClick, url, external, } = props;
+    const { accent, header, children, title, elevation = "none", onClick, url, external, UNSAFE_className = {}, UNSAFE_style = {}, } = props;
     const className = classnames(styles.card, accent && styles.accent, (url || onClick) && styles.clickable, accent && colors[accent], elevation !== "none" && elevations[`${elevation}Elevation`]);
     const isUsingCompoundPattern = React.Children.toArray(children).some(child => React.isValidElement(child) &&
         (child.type === CardHeaderCompoundComponent ||
             child.type === CardBodyCompoundComponent));
     const content = isUsingCompoundPattern
         ? children
-        : renderCardContent(children, title, header);
-    return renderCardWrapper(className, content, onClick, url, external);
+        : renderCardContent(children, title, header, UNSAFE_className, UNSAFE_style);
+    return renderCardWrapper(className, content, onClick, url, external, UNSAFE_className.container, UNSAFE_style.container);
 }
 Card.Header = CardHeaderCompoundComponent;
 Card.Body = CardBodyCompoundComponent;

package/dist/Card-es.js

@@ -16,9 +16,9 @@ const SPACEBAR_KEY = " ";
  * This is only intended to be used in the Card component.
  * Please use `<Card onClick={onClick} />` component instead.
  */
-function CardClickable({ className, onClick, children, }) {
+function CardClickable({ className, onClick, children, UNSAFE_style = {}, }) {
     const cardRef = useRef();
-    return (React__default.createElement("div", { ref: cardRef, "data-testid": "clickable-card", className: className, onClick: onClick, onKeyUp: handleKeyup, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, children));
+    return (React__default.createElement("div", { ref: cardRef, "data-testid": "clickable-card", className: className, style: UNSAFE_style, onClick: onClick, onKeyUp: handleKeyup, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, children));
     function isCardFocused() {
         return document.activeElement === cardRef.current;
     }
@@ -41,7 +41,7 @@ function CardClickable({ className, onClick, children, }) {
  * Intended to be used in the Card component.
  * Use `<Card header={header} />` component instead.
  */
-function CardHeader({ title, header, }) {
+function CardHeader({ title, header, UNSAFE_className = {}, UNSAFE_style = {}, }) {
     const heading = title || header;
     if (React__default.isValidElement(heading))
         return React__default.createElement(React__default.Fragment, null, heading);
@@ -49,7 +49,7 @@ function CardHeader({ title, header, }) {
         const titleString = typeof heading === "string"
             ? heading
             : heading.title;
-        return (React__default.createElement("div", { className: styles.header },
+        return (React__default.createElement("div", { className: classnames(styles.header, UNSAFE_className.header), style: UNSAFE_style.header },
             titleString && React__default.createElement(Heading, { level: 2 }, titleString),
             typeof heading === "object" &&
                 renderHeaderAction(heading === null || heading === void 0 ? void 0 : heading.action)));
@@ -105,30 +105,31 @@ function CardHeaderCompoundComponent({ children }) {
 function CardBodyCompoundComponent({ children }) {
     return React__default.createElement(React__default.Fragment, null, children);
 }
-function renderCardContent(children, title, header) {
+function renderCardContent(children, title, header, UNSAFE_className, UNSAFE_style) {
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(CardHeader, { title: title, header: header }),
+        React__default.createElement(CardHeader, { title: title, header: header, UNSAFE_className: { header: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.header }, UNSAFE_style: { header: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.header } }),
         children));
 }
-function renderCardWrapper(className, content, onClick, url, external) {
+function renderCardWrapper(className, content, onClick, url, external, UNSAFE_className, UNSAFE_style) {
+    const combinedClassName = classnames(className, UNSAFE_className);
     if (onClick) {
-        return (React__default.createElement(CardClickable, { className: className, onClick: onClick }, content));
+        return (React__default.createElement(CardClickable, { className: combinedClassName, onClick: onClick, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }, content));
     }
     if (url) {
-        return (React__default.createElement("a", Object.assign({ className: className, href: url }, (external && { target: "_blank", rel: "noopener noreferrer" })), content));
+        return (React__default.createElement("a", Object.assign({ className: combinedClassName, href: url, style: UNSAFE_style }, (external && { target: "_blank", rel: "noopener noreferrer" })), content));
     }
-    return React__default.createElement("div", { className: className }, content);
+    return (React__default.createElement("div", { className: combinedClassName, style: UNSAFE_style }, content));
 }
 function Card(props) {
-    const { accent, header, children, title, elevation = "none", onClick, url, external, } = props;
+    const { accent, header, children, title, elevation = "none", onClick, url, external, UNSAFE_className = {}, UNSAFE_style = {}, } = props;
     const className = classnames(styles.card, accent && styles.accent, (url || onClick) && styles.clickable, accent && colors[accent], elevation !== "none" && elevations[`${elevation}Elevation`]);
     const isUsingCompoundPattern = React__default.Children.toArray(children).some(child => React__default.isValidElement(child) &&
         (child.type === CardHeaderCompoundComponent ||
             child.type === CardBodyCompoundComponent));
     const content = isUsingCompoundPattern
         ? children
-        : renderCardContent(children, title, header);
-    return renderCardWrapper(className, content, onClick, url, external);
+        : renderCardContent(children, title, header, UNSAFE_className, UNSAFE_style);
+    return renderCardWrapper(className, content, onClick, url, external, UNSAFE_className.container, UNSAFE_style.container);
 }
 Card.Header = CardHeaderCompoundComponent;
 Card.Body = CardBodyCompoundComponent;

package/dist/InlineLabel/InlineLabel.d.ts

@@ -6,7 +6,7 @@ interface InlineLabelProps {
      * The size of the label
      * @default base
      */
-    readonly size?: "base" | "large" | "larger";
+    readonly size?: "small" | "base" | "large" | "larger";
     /**
      * The color of the label
      * @default "greyBlue"

package/dist/InlineLabel-cjs.js

@@ -4,11 +4,12 @@ var React = require('react');
 var classnames = require('classnames');
 var Typography = require('./Typography-cjs.js');
 
-var styles = {"inlineLabel":"M01SZy5EYFg-","base":"_0L5DuoQQ0N0-","large":"QKOUUH9-Fho-","larger":"GdJFaAMVrfU-","greyBlue":"_1KuDugNaT-o-","red":"bHju-S5Uytc-","orange":"hk1-OlPzFpM-","green":"ekQbbiBSxKk-","success":"YBvJuPW-YEI-","blue":"_5X5w6s0pPdw-","inactive":"lju-nyF9vX0-","navy":"nMlCD9k-Meg-","task":"HVMpHULM2PU-","yellow":"hOJmavXturw-","warning":"kfXKagw-wdE-","lime":"ZrdNg5b18oY-","purple":"df-Q7pKd2iI-","invoice":"WE3Qy5JUsN4-","pink":"-Wiy2k-i7tQ-","quote":"NoDP1qZvkds-","teal":"gc8t5abqWH4-","yellowGreen":"SeLhnnpqK70-","job":"L9FK1YwwCB8-","blueDark":"PZdC-xYFPok-","lightBlue":"_3JD9CXbxRQ8-","informative":"R-kgbH6qPZU-","indigo":"_6juDApQlcS0-","request":"MGcsvmjHlow-","spinning":"dre73387JG8-"};
+var styles = {"inlineLabel":"M01SZy5EYFg-","small":"_8nqeeAapUQU-","base":"_0L5DuoQQ0N0-","large":"QKOUUH9-Fho-","larger":"GdJFaAMVrfU-","greyBlue":"_1KuDugNaT-o-","red":"bHju-S5Uytc-","orange":"hk1-OlPzFpM-","green":"ekQbbiBSxKk-","success":"YBvJuPW-YEI-","blue":"_5X5w6s0pPdw-","inactive":"lju-nyF9vX0-","navy":"nMlCD9k-Meg-","task":"HVMpHULM2PU-","yellow":"hOJmavXturw-","warning":"kfXKagw-wdE-","lime":"ZrdNg5b18oY-","purple":"df-Q7pKd2iI-","invoice":"WE3Qy5JUsN4-","pink":"-Wiy2k-i7tQ-","quote":"NoDP1qZvkds-","teal":"gc8t5abqWH4-","yellowGreen":"SeLhnnpqK70-","job":"L9FK1YwwCB8-","blueDark":"PZdC-xYFPok-","lightBlue":"_3JD9CXbxRQ8-","informative":"R-kgbH6qPZU-","indigo":"_6juDApQlcS0-","request":"MGcsvmjHlow-","spinning":"dre73387JG8-"};
 
 function InlineLabel({ size = "base", color = "greyBlue", children, }) {
     const className = classnames(styles.inlineLabel, styles[size], styles[color]);
     const sizeMapper = {
+        small: "smaller",
         base: "small",
         large: "large",
         larger: "large",

package/dist/InlineLabel-es.js

@@ -2,11 +2,12 @@ import React__default from 'react';
 import classnames from 'classnames';
 import { T as Typography } from './Typography-es.js';
 
-var styles = {"inlineLabel":"M01SZy5EYFg-","base":"_0L5DuoQQ0N0-","large":"QKOUUH9-Fho-","larger":"GdJFaAMVrfU-","greyBlue":"_1KuDugNaT-o-","red":"bHju-S5Uytc-","orange":"hk1-OlPzFpM-","green":"ekQbbiBSxKk-","success":"YBvJuPW-YEI-","blue":"_5X5w6s0pPdw-","inactive":"lju-nyF9vX0-","navy":"nMlCD9k-Meg-","task":"HVMpHULM2PU-","yellow":"hOJmavXturw-","warning":"kfXKagw-wdE-","lime":"ZrdNg5b18oY-","purple":"df-Q7pKd2iI-","invoice":"WE3Qy5JUsN4-","pink":"-Wiy2k-i7tQ-","quote":"NoDP1qZvkds-","teal":"gc8t5abqWH4-","yellowGreen":"SeLhnnpqK70-","job":"L9FK1YwwCB8-","blueDark":"PZdC-xYFPok-","lightBlue":"_3JD9CXbxRQ8-","informative":"R-kgbH6qPZU-","indigo":"_6juDApQlcS0-","request":"MGcsvmjHlow-","spinning":"dre73387JG8-"};
+var styles = {"inlineLabel":"M01SZy5EYFg-","small":"_8nqeeAapUQU-","base":"_0L5DuoQQ0N0-","large":"QKOUUH9-Fho-","larger":"GdJFaAMVrfU-","greyBlue":"_1KuDugNaT-o-","red":"bHju-S5Uytc-","orange":"hk1-OlPzFpM-","green":"ekQbbiBSxKk-","success":"YBvJuPW-YEI-","blue":"_5X5w6s0pPdw-","inactive":"lju-nyF9vX0-","navy":"nMlCD9k-Meg-","task":"HVMpHULM2PU-","yellow":"hOJmavXturw-","warning":"kfXKagw-wdE-","lime":"ZrdNg5b18oY-","purple":"df-Q7pKd2iI-","invoice":"WE3Qy5JUsN4-","pink":"-Wiy2k-i7tQ-","quote":"NoDP1qZvkds-","teal":"gc8t5abqWH4-","yellowGreen":"SeLhnnpqK70-","job":"L9FK1YwwCB8-","blueDark":"PZdC-xYFPok-","lightBlue":"_3JD9CXbxRQ8-","informative":"R-kgbH6qPZU-","indigo":"_6juDApQlcS0-","request":"MGcsvmjHlow-","spinning":"dre73387JG8-"};
 
 function InlineLabel({ size = "base", color = "greyBlue", children, }) {
     const className = classnames(styles.inlineLabel, styles[size], styles[color]);
     const sizeMapper = {
+        small: "smaller",
         base: "small",
         large: "large",
         larger: "large",

package/dist/styles.css

@@ -4415,7 +4415,9 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
 
 .W-9SMjhEMpI- {
-  display: inline-block;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  max-width: 100%;
 }
 
 :root {
@@ -5252,6 +5254,13 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   display: inline-flex;
 }
 
+._8nqeeAapUQU- {
+  padding: calc(2px) calc(8px);
+  padding: calc(var(--space-smallest)) calc(var(--space-small));
+  border-radius: 16px;
+  border-radius: var(--radius-large);
+}
+
 ._0L5DuoQQ0N0- {
   padding: calc(4px * 1.5) calc(8px * 1.25);
   padding: calc(var(--space-smaller) * 1.5) calc(var(--space-small) * 1.25);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.88.0",
+  "version": "6.90.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -543,5 +543,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "b315d894eb1d6f8ea122c880c0338234c860404a"
+  "gitHead": "829339495fcb97802380dc109df4c67106963812"
 }