@jobber/components 6.23.2 → 6.25.0

package/dist/SideDrawer/SideDrawer.d.ts

@@ -1,5 +1,4 @@
-import React from "react";
-import type { PropsWithChildren } from "react";
+import type { CSSProperties, PropsWithChildren } from "react";
 import { SideDrawerActions } from "./SideDrawerActions";
 import { SideDrawerTitle } from "./SideDrawerTitle";
 import { SideDrawerToolbar } from "./SideDrawerToolbar";
@@ -22,8 +21,29 @@ interface SideDrawerProps extends PropsWithChildren {
      * Change the scrolling direction of the drawer. Useful for chat-like interfaces.
      */
     readonly scrollDirection?: "normal" | "reverse";
+    /**
+     * Changes whether the SideDrawer is positioned to the side of the viewport or inline with the content.
+     * @default false
+     */
+    readonly inline?: boolean;
+    /**
+     * **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;
+    };
+    /**
+     * **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;
+    };
 }
-export declare function SideDrawer({ children, onRequestClose, open, variation, scrollDirection, }: SideDrawerProps): React.ReactPortal | null;
+export declare function SideDrawer({ children, onRequestClose, open, variation, scrollDirection, inline, UNSAFE_className, UNSAFE_style, }: SideDrawerProps): JSX.Element | null;
 export declare namespace SideDrawer {
     var Title: typeof SideDrawerTitle;
     var Toolbar: typeof SideDrawerToolbar;

package/dist/SideDrawer/index.cjs

@@ -4,13 +4,13 @@ var SideDrawer = require('../SideDrawer-cjs.js');
 require('react');
 require('react-dom');
 require('framer-motion');
-require('@jobber/design');
 require('../useRefocusOnActivator-cjs.js');
 require('../useFocusTrap-cjs.js');
 require('classnames');
 require('../useInView-cjs.js');
 require('../useIsMounted-cjs.js');
 require('../useSafeLayoutEffect-cjs.js');
+require('@jobber/design');
 require('../Heading-cjs.js');
 require('../Typography-cjs.js');
 require('../Button-cjs.js');

package/dist/SideDrawer/index.mjs

@@ -2,13 +2,13 @@ export { S as SideDrawer } from '../SideDrawer-es.js';
 import 'react';
 import 'react-dom';
 import 'framer-motion';
-import '@jobber/design';
 import '../useRefocusOnActivator-es.js';
 import '../useFocusTrap-es.js';
 import 'classnames';
 import '../useInView-es.js';
 import '../useIsMounted-es.js';
 import '../useSafeLayoutEffect-es.js';
+import '@jobber/design';
 import '../Heading-es.js';
 import '../Typography-es.js';
 import '../Button-es.js';

package/dist/SideDrawer-cjs.js

@@ -3,12 +3,12 @@
 var React = require('react');
 var ReactDOM = require('react-dom');
 var framerMotion = require('framer-motion');
-var design = require('@jobber/design');
 var useRefocusOnActivator = require('./useRefocusOnActivator-cjs.js');
 var useFocusTrap = require('./useFocusTrap-cjs.js');
 var classnames = require('classnames');
 var useInView = require('./useInView-cjs.js');
 var useIsMounted = require('./useIsMounted-cjs.js');
+var design = require('@jobber/design');
 var Heading = require('./Heading-cjs.js');
 var Button = require('./Button-cjs.js');
 var Flex = require('./Flex-cjs.js');
@@ -49,7 +49,7 @@ function SideDrawerToolbar({ children }) {
     return ReactDOM.createPortal(children, toolbarPortal);
 }
 
-var styles = {"drawer":"cCwRgRAz4qk-","container":"XipkpXgyzyg-","header":"LuqC0RF-R1U-","content":"vArEcEUxGxQ-","footer":"_4HzuRZKD9u8-","subtle":"v5Db-FCF2kU-","heading":"Eti1JL3rghE-","hasShadow":"PtbV1GtWwzY-","headerActions":"YCdqkhcLHfI-","hideWhenEmpty":"ZH2Mp84HhX8-","overlay":"Ro-pE7hx0wY-","reverseScroll":"gSN5nWDwGm4-","headerShadowListener":"tMeBAjf4vEA-","footerShadowListener":"-lPSZVGIIAs-","backButton":"XOqA4Hw6S6g-","backButtonVisible":"b4VHPS-RG34-","spinning":"McL3-VWXVbs-"};
+var styles = {"drawer":"cCwRgRAz4qk-","inline":"ONUfsWMLKdo-","container":"XipkpXgyzyg-","header":"LuqC0RF-R1U-","content":"vArEcEUxGxQ-","footer":"_4HzuRZKD9u8-","subtle":"v5Db-FCF2kU-","heading":"Eti1JL3rghE-","hasShadow":"PtbV1GtWwzY-","headerActions":"YCdqkhcLHfI-","hideWhenEmpty":"ZH2Mp84HhX8-","overlay":"Ro-pE7hx0wY-","reverseScroll":"gSN5nWDwGm4-","headerShadowListener":"tMeBAjf4vEA-","footerShadowListener":"-lPSZVGIIAs-","backButton":"XOqA4Hw6S6g-","backButtonVisible":"b4VHPS-RG34-","spinning":"McL3-VWXVbs-"};
 
 function SideDrawerBackButton({ onClick, }) {
     const { backPortal, registerComponent, unRegisterComponent } = useSideDrawerContext();
@@ -72,11 +72,16 @@ function SideDrawerFooter({ children }) {
 }
 
 const variants = {
-    hidden: { x: "100%" },
+    initial: { x: "100%" },
     visible: { x: 0, transitionEnd: { x: 0 } },
+    hidden: { x: "100%" },
 };
-function SideDrawer({ children, onRequestClose, open, variation = "base", scrollDirection, }) {
-    var _a;
+const inlineVariants = {
+    initial: { x: "25%", opacity: 0 },
+    visible: { x: 0, opacity: 1, transitionEnd: { x: 0 } },
+    hidden: { x: "25%", opacity: 0 },
+};
+const useSideDrawerState = (open) => {
     const [ref, setRef] = React.useState(null);
     const [components, setComponents] = React.useState({
         backButton: false,
@@ -86,26 +91,44 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", scroll
     const sideDrawerRef = useFocusTrap.useFocusTrap_2(open);
     const [headerShadowRef, noHeaderShadow] = useInView.useInView_2();
     const [footerShadowRef, noFooterShadow] = useInView.useInView_2();
+    return {
+        ref,
+        setRef,
+        components,
+        setComponents,
+        slots: { toolbar, title, actions, backButton, footer },
+        sideDrawerRef,
+        headerShadowRef,
+        noHeaderShadow,
+        footerShadowRef,
+        noFooterShadow,
+    };
+};
+function SideDrawer({ children, onRequestClose, open, variation = "base", scrollDirection, inline = false, UNSAFE_className, UNSAFE_style, }) {
+    var _a;
+    const { ref, setRef, components, setComponents, slots, sideDrawerRef, headerShadowRef, noHeaderShadow, footerShadowRef, noFooterShadow, } = useSideDrawerState(open);
+    useRefocusOnActivator.useRefocusOnActivator_2(open);
     const container = ((_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.body) || null;
     const isMounted = useIsMounted.useIsMounted_2();
     if (!isMounted.current && !container)
         return null;
-    return ReactDOM.createPortal(React.createElement(SideDrawerContext.Provider, { value: {
-            actionPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(actions.selector),
-            titlePortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(title.selector),
-            toolbarPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(toolbar.selector),
-            backPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(backButton.selector),
-            footerPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(footer.selector),
+    const SideDrawerRender = (React.createElement(SideDrawerContext.Provider, { value: {
+            actionPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(slots.actions.selector),
+            titlePortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(slots.title.selector),
+            toolbarPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(slots.toolbar.selector),
+            backPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(slots.backButton.selector),
+            footerPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(slots.footer.selector),
             components,
             registerComponent: key => setComponents(prev => (Object.assign(Object.assign({}, prev), { [key]: true }))),
             unRegisterComponent: key => setComponents(prev => (Object.assign(Object.assign({}, prev), { [key]: false }))),
         } },
-        open && (React.createElement("button", { className: styles.overlay, "aria-label": "Close", onClick: onRequestClose, type: "button" })),
+        open && !inline && (React.createElement("button", { className: styles.overlay, "aria-label": "Close", onClick: onRequestClose, type: "button" })),
         React.createElement(framerMotion.AnimatePresence, { initial: false }, open && (React.createElement(framerMotion.motion.div, { className: classnames(styles.drawer, {
                 [styles.reverseScroll]: scrollDirection === "reverse",
-            }), ref: setRef, "data-elevation": "elevated", variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
+                [styles.inline]: inline,
+            }, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container), ref: setRef, "data-elevation": "elevated", variants: inline ? inlineVariants : variants, initial: "initial", animate: "visible", exit: "hidden", transition: {
                 duration: design.tokens["timing-base"] / 1000,
-            } },
+            }, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container },
             React.createElement("div", { ref: sideDrawerRef, role: "dialog", className: classnames(styles.container, styles.hasShadow, {
                     [styles.subtle]: variation === "subtle",
                 }), tabIndex: 0, onKeyUp: handleKeyUp },
@@ -116,19 +139,23 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", scroll
                         React.createElement(Flex.Flex, { template: ["shrink", "grow"], align: "start", gap: "none" },
                             React.createElement("div", Object.assign({ className: classnames(styles.backButton, {
                                     [styles.backButtonVisible]: components.backButton,
-                                }) }, backButton.attr)),
-                            React.createElement("div", Object.assign({ className: classnames(styles.heading) }, title.attr))),
+                                }) }, slots.backButton.attr)),
+                            React.createElement("div", Object.assign({ className: classnames(styles.heading) }, slots.title.attr))),
                         React.createElement("div", { className: styles.headerActions },
-                            React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, actions.attr)),
+                            React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, slots.actions.attr)),
                             React.createElement(Button.Button, { ariaLabel: "Close", icon: "cross", onClick: onRequestClose, type: "tertiary", variation: "subtle" }))),
-                    React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, toolbar.attr))),
+                    React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, slots.toolbar.attr))),
                 React.createElement("div", { className: styles.content },
                     React.createElement("div", { className: styles.headerShadowListener, ref: headerShadowRef }),
                     children,
                     React.createElement("div", { className: styles.footerShadowListener, ref: footerShadowRef })),
                 React.createElement("div", Object.assign({ className: classnames(styles.footer, styles.hideWhenEmpty, {
                         [styles.hasShadow]: footerShadowRef.current && !noFooterShadow,
-                    }) }, footer.attr))))))), container);
+                    }) }, slots.footer.attr))))))));
+    if (inline) {
+        return SideDrawerRender;
+    }
+    return ReactDOM.createPortal(SideDrawerRender, container);
     function handleKeyUp(event) {
         if (event.key === "Escape") {
             onRequestClose();

package/dist/SideDrawer-es.js

@@ -1,12 +1,12 @@
 import React, { createContext, useContext, useEffect, useState, useId } from 'react';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
-import { tokens } from '@jobber/design';
 import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
 import { u as useFocusTrap_2 } from './useFocusTrap-es.js';
 import classnames from 'classnames';
 import { u as useInView_2 } from './useInView-es.js';
 import { u as useIsMounted_2 } from './useIsMounted-es.js';
+import { tokens } from '@jobber/design';
 import { H as Heading } from './Heading-es.js';
 import { B as Button } from './Button-es.js';
 import { F as Flex } from './Flex-es.js';
@@ -47,7 +47,7 @@ function SideDrawerToolbar({ children }) {
     return createPortal(children, toolbarPortal);
 }
 
-var styles = {"drawer":"cCwRgRAz4qk-","container":"XipkpXgyzyg-","header":"LuqC0RF-R1U-","content":"vArEcEUxGxQ-","footer":"_4HzuRZKD9u8-","subtle":"v5Db-FCF2kU-","heading":"Eti1JL3rghE-","hasShadow":"PtbV1GtWwzY-","headerActions":"YCdqkhcLHfI-","hideWhenEmpty":"ZH2Mp84HhX8-","overlay":"Ro-pE7hx0wY-","reverseScroll":"gSN5nWDwGm4-","headerShadowListener":"tMeBAjf4vEA-","footerShadowListener":"-lPSZVGIIAs-","backButton":"XOqA4Hw6S6g-","backButtonVisible":"b4VHPS-RG34-","spinning":"McL3-VWXVbs-"};
+var styles = {"drawer":"cCwRgRAz4qk-","inline":"ONUfsWMLKdo-","container":"XipkpXgyzyg-","header":"LuqC0RF-R1U-","content":"vArEcEUxGxQ-","footer":"_4HzuRZKD9u8-","subtle":"v5Db-FCF2kU-","heading":"Eti1JL3rghE-","hasShadow":"PtbV1GtWwzY-","headerActions":"YCdqkhcLHfI-","hideWhenEmpty":"ZH2Mp84HhX8-","overlay":"Ro-pE7hx0wY-","reverseScroll":"gSN5nWDwGm4-","headerShadowListener":"tMeBAjf4vEA-","footerShadowListener":"-lPSZVGIIAs-","backButton":"XOqA4Hw6S6g-","backButtonVisible":"b4VHPS-RG34-","spinning":"McL3-VWXVbs-"};
 
 function SideDrawerBackButton({ onClick, }) {
     const { backPortal, registerComponent, unRegisterComponent } = useSideDrawerContext();
@@ -70,11 +70,16 @@ function SideDrawerFooter({ children }) {
 }
 
 const variants = {
-    hidden: { x: "100%" },
+    initial: { x: "100%" },
     visible: { x: 0, transitionEnd: { x: 0 } },
+    hidden: { x: "100%" },
 };
-function SideDrawer({ children, onRequestClose, open, variation = "base", scrollDirection, }) {
-    var _a;
+const inlineVariants = {
+    initial: { x: "25%", opacity: 0 },
+    visible: { x: 0, opacity: 1, transitionEnd: { x: 0 } },
+    hidden: { x: "25%", opacity: 0 },
+};
+const useSideDrawerState = (open) => {
     const [ref, setRef] = useState(null);
     const [components, setComponents] = useState({
         backButton: false,
@@ -84,26 +89,44 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", scroll
     const sideDrawerRef = useFocusTrap_2(open);
     const [headerShadowRef, noHeaderShadow] = useInView_2();
     const [footerShadowRef, noFooterShadow] = useInView_2();
+    return {
+        ref,
+        setRef,
+        components,
+        setComponents,
+        slots: { toolbar, title, actions, backButton, footer },
+        sideDrawerRef,
+        headerShadowRef,
+        noHeaderShadow,
+        footerShadowRef,
+        noFooterShadow,
+    };
+};
+function SideDrawer({ children, onRequestClose, open, variation = "base", scrollDirection, inline = false, UNSAFE_className, UNSAFE_style, }) {
+    var _a;
+    const { ref, setRef, components, setComponents, slots, sideDrawerRef, headerShadowRef, noHeaderShadow, footerShadowRef, noFooterShadow, } = useSideDrawerState(open);
+    useRefocusOnActivator_2(open);
     const container = ((_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.body) || null;
     const isMounted = useIsMounted_2();
     if (!isMounted.current && !container)
         return null;
-    return createPortal(React.createElement(SideDrawerContext.Provider, { value: {
-            actionPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(actions.selector),
-            titlePortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(title.selector),
-            toolbarPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(toolbar.selector),
-            backPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(backButton.selector),
-            footerPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(footer.selector),
+    const SideDrawerRender = (React.createElement(SideDrawerContext.Provider, { value: {
+            actionPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(slots.actions.selector),
+            titlePortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(slots.title.selector),
+            toolbarPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(slots.toolbar.selector),
+            backPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(slots.backButton.selector),
+            footerPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(slots.footer.selector),
             components,
             registerComponent: key => setComponents(prev => (Object.assign(Object.assign({}, prev), { [key]: true }))),
             unRegisterComponent: key => setComponents(prev => (Object.assign(Object.assign({}, prev), { [key]: false }))),
         } },
-        open && (React.createElement("button", { className: styles.overlay, "aria-label": "Close", onClick: onRequestClose, type: "button" })),
+        open && !inline && (React.createElement("button", { className: styles.overlay, "aria-label": "Close", onClick: onRequestClose, type: "button" })),
         React.createElement(AnimatePresence, { initial: false }, open && (React.createElement(motion.div, { className: classnames(styles.drawer, {
                 [styles.reverseScroll]: scrollDirection === "reverse",
-            }), ref: setRef, "data-elevation": "elevated", variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
+                [styles.inline]: inline,
+            }, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container), ref: setRef, "data-elevation": "elevated", variants: inline ? inlineVariants : variants, initial: "initial", animate: "visible", exit: "hidden", transition: {
                 duration: tokens["timing-base"] / 1000,
-            } },
+            }, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container },
             React.createElement("div", { ref: sideDrawerRef, role: "dialog", className: classnames(styles.container, styles.hasShadow, {
                     [styles.subtle]: variation === "subtle",
                 }), tabIndex: 0, onKeyUp: handleKeyUp },
@@ -114,19 +137,23 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", scroll
                         React.createElement(Flex, { template: ["shrink", "grow"], align: "start", gap: "none" },
                             React.createElement("div", Object.assign({ className: classnames(styles.backButton, {
                                     [styles.backButtonVisible]: components.backButton,
-                                }) }, backButton.attr)),
-                            React.createElement("div", Object.assign({ className: classnames(styles.heading) }, title.attr))),
+                                }) }, slots.backButton.attr)),
+                            React.createElement("div", Object.assign({ className: classnames(styles.heading) }, slots.title.attr))),
                         React.createElement("div", { className: styles.headerActions },
-                            React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, actions.attr)),
+                            React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, slots.actions.attr)),
                             React.createElement(Button, { ariaLabel: "Close", icon: "cross", onClick: onRequestClose, type: "tertiary", variation: "subtle" }))),
-                    React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, toolbar.attr))),
+                    React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, slots.toolbar.attr))),
                 React.createElement("div", { className: styles.content },
                     React.createElement("div", { className: styles.headerShadowListener, ref: headerShadowRef }),
                     children,
                     React.createElement("div", { className: styles.footerShadowListener, ref: footerShadowRef })),
                 React.createElement("div", Object.assign({ className: classnames(styles.footer, styles.hideWhenEmpty, {
                         [styles.hasShadow]: footerShadowRef.current && !noFooterShadow,
-                    }) }, footer.attr))))))), container);
+                    }) }, slots.footer.attr))))))));
+    if (inline) {
+        return SideDrawerRender;
+    }
+    return createPortal(SideDrawerRender, container);
     function handleKeyUp(event) {
         if (event.key === "Escape") {
             onRequestClose();

package/dist/Typography/Typography.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { CSSProperties, ReactNode } from "react";
 import fontSizes from "./css/FontSizes.module.css";
 import fontWeights from "./css/FontWeights.module.css";
 import textCases from "./css/TextCases.module.css";
@@ -42,6 +42,22 @@ export interface TypographyProps {
      * @example "double color-invoice" for a double underline in the specified color
      */
     readonly underline?: UnderlineStyle | UnderlineStyleWithColor | undefined;
+    /**
+     * **Use at your own risk:** Custom classNames 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?: {
+        textStyle?: 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?: {
+        textStyle?: CSSProperties;
+    };
 }
 export type TypographyOptions = Omit<TypographyProps, "children">;
-export declare function Typography({ id, children, element: Tag, size, align, fontWeight, textCase, textColor, emphasisType, numberOfLines, fontFamily, underline, }: TypographyProps): JSX.Element;
+export declare function Typography({ id, children, element: Tag, size, align, fontWeight, textCase, textColor, emphasisType, numberOfLines, fontFamily, underline, UNSAFE_className, UNSAFE_style, }: TypographyProps): JSX.Element;

package/dist/Typography-cjs.js

@@ -23,32 +23,33 @@ var fontFamilies = {"base":"V9SSKxs15xE-","display":"dvw7zxC9s9g-","spinning":"N
 
 var underlineStyles = {"basicUnderline":"qp8E5e4q-so-","spinning":"F-Ybr7sJi6Q-"};
 
-function Typography({ id, children, element: Tag = "p", size, align, fontWeight = "regular", textCase, textColor, emphasisType, numberOfLines, fontFamily, underline, }) {
+function Typography({ id, children, element: Tag = "p", size, align, fontWeight = "regular", textCase, textColor, emphasisType, numberOfLines, fontFamily, underline, UNSAFE_className, UNSAFE_style, }) {
     const shouldTruncateText = numberOfLines && numberOfLines > 0;
-    const className = classnames(styles.base, fontWeights[fontWeight], size && fontSizes[size], textCase && textCases[textCase], textColor && textColors[textColor], emphasisType && emphasis[emphasisType], fontFamily && fontFamilies[fontFamily], shouldTruncateText && truncate.textTruncate, underline && underlineStyles.basicUnderline, Object.assign({}, (align && { [alignment[align]]: align !== `start` })));
-    let stylesOverrides = {};
-    if (shouldTruncateText) {
-        stylesOverrides = {
+    const className = classnames(styles.base, fontWeights[fontWeight], size && fontSizes[size], textCase && textCases[textCase], textColor && textColors[textColor], emphasisType && emphasis[emphasisType], fontFamily && fontFamilies[fontFamily], shouldTruncateText && truncate.textTruncate, underline && underlineStyles.basicUnderline, Object.assign({}, (align && { [alignment[align]]: align !== `start` })), UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.textStyle);
+    const truncateStyles = shouldTruncateText
+        ? {
             WebkitLineClamp: numberOfLines,
             WebkitBoxOrient: "vertical",
-        };
-    }
-    if (underline) {
-        const [underlineStyle, underlineColor] = underline.split(" ");
-        stylesOverrides.textDecorationStyle = underlineStyle;
-        stylesOverrides.textDecorationColor = computeUnderlineColor(underlineColor, textColor);
-    }
-    return (React.createElement(Tag, { id: id, className: className, style: stylesOverrides }, children));
+        }
+        : {};
+    const underlineInlineStyles = computeUnderlineStyles(underline, textColor);
+    return (React.createElement(Tag, { id: id, className: className, style: Object.assign(Object.assign(Object.assign({}, truncateStyles), underlineInlineStyles), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.textStyle) }, children));
 }
-function computeUnderlineColor(textDecorationColor, textColor) {
-    // Use the specified underline color if one is provided. If no underline color
-    // is specified, fall back to the text color for the underline.
-    if (textDecorationColor) {
-        return `var(--${textDecorationColor})`;
+function computeUnderlineStyles(underline, textColor) {
+    if (!underline) {
+        return {};
+    }
+    const [underlineStyle, underlineColor] = underline.split(" ");
+    const underlineInlineStyles = {
+        textDecorationStyle: underlineStyle,
+    };
+    if (underlineColor) {
+        underlineInlineStyles.textDecorationColor = `var(--${underlineColor})`;
     }
-    if (textColor) {
-        return textColors[textColor];
+    else if (textColor) {
+        underlineInlineStyles.textDecorationColor = textColors[textColor];
     }
+    return underlineInlineStyles;
 }
 
 exports.Typography = Typography;

package/dist/Typography-es.js

@@ -21,32 +21,33 @@ var fontFamilies = {"base":"V9SSKxs15xE-","display":"dvw7zxC9s9g-","spinning":"N
 
 var underlineStyles = {"basicUnderline":"qp8E5e4q-so-","spinning":"F-Ybr7sJi6Q-"};
 
-function Typography({ id, children, element: Tag = "p", size, align, fontWeight = "regular", textCase, textColor, emphasisType, numberOfLines, fontFamily, underline, }) {
+function Typography({ id, children, element: Tag = "p", size, align, fontWeight = "regular", textCase, textColor, emphasisType, numberOfLines, fontFamily, underline, UNSAFE_className, UNSAFE_style, }) {
     const shouldTruncateText = numberOfLines && numberOfLines > 0;
-    const className = classnames(styles.base, fontWeights[fontWeight], size && fontSizes[size], textCase && textCases[textCase], textColor && textColors[textColor], emphasisType && emphasis[emphasisType], fontFamily && fontFamilies[fontFamily], shouldTruncateText && truncate.textTruncate, underline && underlineStyles.basicUnderline, Object.assign({}, (align && { [alignment[align]]: align !== `start` })));
-    let stylesOverrides = {};
-    if (shouldTruncateText) {
-        stylesOverrides = {
+    const className = classnames(styles.base, fontWeights[fontWeight], size && fontSizes[size], textCase && textCases[textCase], textColor && textColors[textColor], emphasisType && emphasis[emphasisType], fontFamily && fontFamilies[fontFamily], shouldTruncateText && truncate.textTruncate, underline && underlineStyles.basicUnderline, Object.assign({}, (align && { [alignment[align]]: align !== `start` })), UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.textStyle);
+    const truncateStyles = shouldTruncateText
+        ? {
             WebkitLineClamp: numberOfLines,
             WebkitBoxOrient: "vertical",
-        };
-    }
-    if (underline) {
-        const [underlineStyle, underlineColor] = underline.split(" ");
-        stylesOverrides.textDecorationStyle = underlineStyle;
-        stylesOverrides.textDecorationColor = computeUnderlineColor(underlineColor, textColor);
-    }
-    return (React.createElement(Tag, { id: id, className: className, style: stylesOverrides }, children));
+        }
+        : {};
+    const underlineInlineStyles = computeUnderlineStyles(underline, textColor);
+    return (React.createElement(Tag, { id: id, className: className, style: Object.assign(Object.assign(Object.assign({}, truncateStyles), underlineInlineStyles), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.textStyle) }, children));
 }
-function computeUnderlineColor(textDecorationColor, textColor) {
-    // Use the specified underline color if one is provided. If no underline color
-    // is specified, fall back to the text color for the underline.
-    if (textDecorationColor) {
-        return `var(--${textDecorationColor})`;
+function computeUnderlineStyles(underline, textColor) {
+    if (!underline) {
+        return {};
+    }
+    const [underlineStyle, underlineColor] = underline.split(" ");
+    const underlineInlineStyles = {
+        textDecorationStyle: underlineStyle,
+    };
+    if (underlineColor) {
+        underlineInlineStyles.textDecorationColor = `var(--${underlineColor})`;
     }
-    if (textColor) {
-        return textColors[textColor];
+    else if (textColor) {
+        underlineInlineStyles.textDecorationColor = textColors[textColor];
     }
+    return underlineInlineStyles;
 }
 
 export { Typography as T };

package/dist/styles.css

@@ -8777,6 +8777,12 @@ html.atlantisLightBoxActive {
   max-width: 420px;
 }
 
+.cCwRgRAz4qk-.ONUfsWMLKdo- {
+  position: static;
+  width: 100%;
+  height: 100%;
+}
+
 .XipkpXgyzyg-,
 .cCwRgRAz4qk-,
 .LuqC0RF-R1U-,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.23.2",
+  "version": "6.25.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -489,5 +489,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "3f16b3b782378b489c4813780ce1858c27ebb486"
+  "gitHead": "b5aa4ca87e9b0899c7aeacb09056bd8c6f10d13a"
 }