@jobber/components 6.87.0 → 6.89.0

package/dist/AtlantisThemeContext/AtlantisThemeContext.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import type { AtlantisThemeContextProviderProps, AtlantisThemeContextValue } from "./types";
 export declare const atlantisThemeContextDefaultValues: AtlantisThemeContextValue;
-export declare function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, }: AtlantisThemeContextProviderProps): React.JSX.Element;
+export declare function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, dangerouslyOverrideTokens, }: AtlantisThemeContextProviderProps): React.JSX.Element;
 export declare function useAtlantisTheme(): AtlantisThemeContextValue;

package/dist/AtlantisThemeContext/types.d.ts

@@ -9,6 +9,10 @@ export interface AtlantisThemeContextValue {
      * The design tokens for the current theme.
      */
     readonly tokens: typeof tokens;
+    /**
+     * Any overridden tokens supplied by the user.
+     */
+    readonly overrideTokens?: OverrideTokens;
 }
 export interface AtlantisThemeContextProviderProps extends PropsWithChildren {
     /**
@@ -20,7 +24,20 @@ export interface AtlantisThemeContextProviderProps extends PropsWithChildren {
      * This is dangerous because the children in this provider will not be able to change the theme.
      */
     readonly dangerouslyOverrideTheme?: Theme;
+    /**
+     * Overrides existing design tokens with custom values. Can also supply custom tokens which will be accessible
+     * via useAtlantisTheme() context and css variables.
+     * If provided, these tokens will be used for both light and dark themes.
+     *
+     * **Important**: you should provide a constant or at least a memoized value for performance reasons.
+     */
+    readonly dangerouslyOverrideTokens?: OverrideTokens;
 }
+export type OverrideTokens = {
+    [K in keyof typeof tokens]?: (typeof tokens)[K];
+} & {
+    [customKey: string]: string | number;
+};
 export type Theme = "light" | "dark";
 export interface ThemeChangeDetails {
     theme: Theme;

package/dist/AtlantisThemeContext-cjs.js

@@ -342,7 +342,7 @@ var merge$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(merge_1);
 
 const THEME_CHANGE_EVENT = "atlantis.toggle-theme";
 
-var styles = {"staticThemeProviderWrapper":"P6HrDSaI0Ac-","spinning":"iq03qkKnXBA-"};
+var styles = {"staticThemeProviderWrapper":"P6HrDSaI0Ac-","overrideTokensWrapper":"j-NMCOBL3-E-","spinning":"iq03qkKnXBA-"};
 
 const atlantisThemeContextDefaultValues = {
     theme: "light",
@@ -350,17 +350,17 @@ const atlantisThemeContextDefaultValues = {
 };
 const actualDarkTokens = merge$1({}, design.tokens, design.darkTokens);
 const AtlantisThemeContext = React.createContext(atlantisThemeContextDefaultValues);
-function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, }) {
+function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, dangerouslyOverrideTokens, }) {
     if (dangerouslyOverrideTheme) {
-        return (React.createElement(InternalStaticThemeProvider, { dangerouslyOverrideTheme: dangerouslyOverrideTheme }, children));
+        return (React.createElement(InternalStaticThemeProvider, { dangerouslyOverrideTokens: dangerouslyOverrideTokens, dangerouslyOverrideTheme: dangerouslyOverrideTheme }, children));
     }
-    return (React.createElement(InternalDynamicThemeProvider, null, children));
+    return (React.createElement(InternalDynamicThemeProvider, { dangerouslyOverrideTokens: dangerouslyOverrideTokens }, children));
 }
-function InternalDynamicThemeProvider({ children }) {
+function InternalDynamicThemeProvider({ children, dangerouslyOverrideTokens, }) {
     var _a;
     const initialTheme = (_a = globalThis.document.documentElement.dataset.theme) !== null && _a !== void 0 ? _a : "light";
     const [internalTheme, setInternalTheme] = React.useState(initialTheme);
-    const currentTokens = internalTheme === "dark" ? actualDarkTokens : design.tokens;
+    const { finalTokens, cssVariableOverrides } = useTokens(internalTheme, dangerouslyOverrideTokens);
     const handleThemeChangeEvent = React.useCallback((event) => {
         const newTheme = event.detail.theme;
         setInternalTheme(newTheme);
@@ -375,20 +375,46 @@ function InternalDynamicThemeProvider({ children }) {
     }, [handleThemeChangeEvent]);
     return (React.createElement(AtlantisThemeContext.Provider, { value: {
             theme: internalTheme,
-            tokens: currentTokens,
-        } }, children));
+            tokens: finalTokens,
+            overrideTokens: dangerouslyOverrideTokens,
+        } }, cssVariableOverrides ? (React.createElement("div", { className: styles.overrideTokensWrapper, style: cssVariableOverrides }, children)) : (children)));
 }
-function InternalStaticThemeProvider({ dangerouslyOverrideTheme, children, }) {
-    const currentTokens = dangerouslyOverrideTheme === "dark" ? actualDarkTokens : design.tokens;
+function InternalStaticThemeProvider({ dangerouslyOverrideTheme, children, dangerouslyOverrideTokens, }) {
+    const { finalTokens, cssVariableOverrides } = useTokens(dangerouslyOverrideTheme, dangerouslyOverrideTokens);
     return (React.createElement(AtlantisThemeContext.Provider, { value: {
             theme: dangerouslyOverrideTheme,
-            tokens: currentTokens,
+            tokens: finalTokens,
+            overrideTokens: dangerouslyOverrideTokens,
         } },
-        React.createElement("div", { "data-theme": dangerouslyOverrideTheme, className: styles.staticThemeProviderWrapper }, children)));
+        React.createElement("div", { "data-theme": dangerouslyOverrideTheme, className: styles.staticThemeProviderWrapper, style: cssVariableOverrides }, children)));
 }
 function useAtlantisTheme() {
     return React.useContext(AtlantisThemeContext);
 }
+function getCssVariableOverrides(overrideTokens) {
+    const cssVariables = Object.entries(overrideTokens).reduce((variables, [tokenName, tokenValue]) => {
+        // @ts-expect-error - css variables are valid keys for style objects. @types/react may be outdated.
+        variables[`--${tokenName}`] = tokenValue;
+        return variables;
+    }, {});
+    return cssVariables;
+}
+function useTokens(theme, overrideTokens) {
+    const currentTokens = theme === "dark" ? actualDarkTokens : design.tokens;
+    const finalTokens = React.useMemo(() => {
+        if (overrideTokens) {
+            return merge$1({}, currentTokens, overrideTokens);
+        }
+        return currentTokens;
+    }, [currentTokens, overrideTokens]);
+    const cssVariableOverrides = overrideTokens
+        ? getCssVariableOverrides(overrideTokens)
+        : undefined;
+    return {
+        finalTokens,
+        cssVariableOverrides,
+    };
+}
 
 exports.AtlantisThemeContextProvider = AtlantisThemeContextProvider;
 exports.THEME_CHANGE_EVENT = THEME_CHANGE_EVENT;

package/dist/AtlantisThemeContext-es.js

@@ -1,5 +1,5 @@
 import { tokens, darkTokens } from '@jobber/design';
-import React__default, { createContext, useState, useCallback, useEffect, useContext } from 'react';
+import React__default, { createContext, useState, useCallback, useEffect, useContext, useMemo } from 'react';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
 import { e as eq_1, c as _Stack } from './identity-es.js';
 import { _ as _baseAssignValue } from './_baseAssignValue-es.js';
@@ -340,7 +340,7 @@ var merge$1 = /*@__PURE__*/getDefaultExportFromCjs(merge_1);
 
 const THEME_CHANGE_EVENT = "atlantis.toggle-theme";
 
-var styles = {"staticThemeProviderWrapper":"P6HrDSaI0Ac-","spinning":"iq03qkKnXBA-"};
+var styles = {"staticThemeProviderWrapper":"P6HrDSaI0Ac-","overrideTokensWrapper":"j-NMCOBL3-E-","spinning":"iq03qkKnXBA-"};
 
 const atlantisThemeContextDefaultValues = {
     theme: "light",
@@ -348,17 +348,17 @@ const atlantisThemeContextDefaultValues = {
 };
 const actualDarkTokens = merge$1({}, tokens, darkTokens);
 const AtlantisThemeContext = createContext(atlantisThemeContextDefaultValues);
-function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, }) {
+function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, dangerouslyOverrideTokens, }) {
     if (dangerouslyOverrideTheme) {
-        return (React__default.createElement(InternalStaticThemeProvider, { dangerouslyOverrideTheme: dangerouslyOverrideTheme }, children));
+        return (React__default.createElement(InternalStaticThemeProvider, { dangerouslyOverrideTokens: dangerouslyOverrideTokens, dangerouslyOverrideTheme: dangerouslyOverrideTheme }, children));
     }
-    return (React__default.createElement(InternalDynamicThemeProvider, null, children));
+    return (React__default.createElement(InternalDynamicThemeProvider, { dangerouslyOverrideTokens: dangerouslyOverrideTokens }, children));
 }
-function InternalDynamicThemeProvider({ children }) {
+function InternalDynamicThemeProvider({ children, dangerouslyOverrideTokens, }) {
     var _a;
     const initialTheme = (_a = globalThis.document.documentElement.dataset.theme) !== null && _a !== void 0 ? _a : "light";
     const [internalTheme, setInternalTheme] = useState(initialTheme);
-    const currentTokens = internalTheme === "dark" ? actualDarkTokens : tokens;
+    const { finalTokens, cssVariableOverrides } = useTokens(internalTheme, dangerouslyOverrideTokens);
     const handleThemeChangeEvent = useCallback((event) => {
         const newTheme = event.detail.theme;
         setInternalTheme(newTheme);
@@ -373,19 +373,45 @@ function InternalDynamicThemeProvider({ children }) {
     }, [handleThemeChangeEvent]);
     return (React__default.createElement(AtlantisThemeContext.Provider, { value: {
             theme: internalTheme,
-            tokens: currentTokens,
-        } }, children));
+            tokens: finalTokens,
+            overrideTokens: dangerouslyOverrideTokens,
+        } }, cssVariableOverrides ? (React__default.createElement("div", { className: styles.overrideTokensWrapper, style: cssVariableOverrides }, children)) : (children)));
 }
-function InternalStaticThemeProvider({ dangerouslyOverrideTheme, children, }) {
-    const currentTokens = dangerouslyOverrideTheme === "dark" ? actualDarkTokens : tokens;
+function InternalStaticThemeProvider({ dangerouslyOverrideTheme, children, dangerouslyOverrideTokens, }) {
+    const { finalTokens, cssVariableOverrides } = useTokens(dangerouslyOverrideTheme, dangerouslyOverrideTokens);
     return (React__default.createElement(AtlantisThemeContext.Provider, { value: {
             theme: dangerouslyOverrideTheme,
-            tokens: currentTokens,
+            tokens: finalTokens,
+            overrideTokens: dangerouslyOverrideTokens,
         } },
-        React__default.createElement("div", { "data-theme": dangerouslyOverrideTheme, className: styles.staticThemeProviderWrapper }, children)));
+        React__default.createElement("div", { "data-theme": dangerouslyOverrideTheme, className: styles.staticThemeProviderWrapper, style: cssVariableOverrides }, children)));
 }
 function useAtlantisTheme() {
     return useContext(AtlantisThemeContext);
 }
+function getCssVariableOverrides(overrideTokens) {
+    const cssVariables = Object.entries(overrideTokens).reduce((variables, [tokenName, tokenValue]) => {
+        // @ts-expect-error - css variables are valid keys for style objects. @types/react may be outdated.
+        variables[`--${tokenName}`] = tokenValue;
+        return variables;
+    }, {});
+    return cssVariables;
+}
+function useTokens(theme, overrideTokens) {
+    const currentTokens = theme === "dark" ? actualDarkTokens : tokens;
+    const finalTokens = useMemo(() => {
+        if (overrideTokens) {
+            return merge$1({}, currentTokens, overrideTokens);
+        }
+        return currentTokens;
+    }, [currentTokens, overrideTokens]);
+    const cssVariableOverrides = overrideTokens
+        ? getCssVariableOverrides(overrideTokens)
+        : undefined;
+    return {
+        finalTokens,
+        cssVariableOverrides,
+    };
+}
 
 export { AtlantisThemeContextProvider as A, THEME_CHANGE_EVENT as T, atlantisThemeContextDefaultValues as a, useAtlantisTheme as u };

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

@@ -2,6 +2,10 @@
   display: contents;
 }
 
+.j-NMCOBL3-E- {
+  display: contents;
+}
+
 ._37kZB-nYE08- {
   display: -ms-flexbox;
   display: flex;
@@ -4411,7 +4415,9 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
 
 .W-9SMjhEMpI- {
-  display: inline-block;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  max-width: 100%;
 }
 
 :root {
@@ -5248,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.87.0",
+  "version": "6.89.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -543,5 +543,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "7db86359da96f269fb9c182ef957f0c90b8a9c66"
+  "gitHead": "78ab585f85c917e6a1fff619fabda94bba781125"
 }