@jobber/components 5.30.0 → 5.31.0

package/dist/SideDrawer/index.cjs

@@ -1,22 +1,22 @@
 'use strict';
 
-var SideDrawer = require('../SideDrawer-BEqowmYN.js');
+var SideDrawer = require('../SideDrawer-CpVYUBO8.js');
 require('react');
 require('react-dom');
 require('framer-motion');
 require('@jobber/design');
-require('../useRefocusOnActivator-SywNgkvu.js');
-require('../useFocusTrap-BEJBVhMA.js');
+require('../useRefocusOnActivator-2VHPkeLa.js');
+require('../useFocusTrap-BSIMXMbm.js');
 require('classnames');
-require('../useInView-xL-unoqj.js');
-require('../useIsMounted-DwJSncSQ.js');
-require('../useSafeLayoutEffect-tzIpgqTd.js');
-require('../Heading-BslkziSg.js');
-require('../Typography-DABetOtg.js');
-require('../Button-BiaHrzMH.js');
+require('../useInView-Cjm2JY9Z.js');
+require('../useIsMounted-DzcdANJU.js');
+require('../useSafeLayoutEffect-BdMQmiwe.js');
+require('../Heading-CMzLqakZ.js');
+require('../Typography-kBMdp63Q.js');
+require('../Button-DibdKvEO.js');
 require('react-router-dom');
-require('../Icon-Dm6ilU9W.js');
-require('../Flex-BIqT8sND.js');
+require('../Icon-ZpWgqBf-.js');
+require('../Flex-BeO_mgiq.js');
 
 
 

package/dist/SideDrawer/index.mjs

@@ -1,17 +1,17 @@
-export { S as SideDrawer } from '../SideDrawer--E_lHtjb.js';
+export { S as SideDrawer } from '../SideDrawer-zAoH9Nsb.js';
 import 'react';
 import 'react-dom';
 import 'framer-motion';
 import '@jobber/design';
-import '../useRefocusOnActivator-DHkZwmcu.js';
-import '../useFocusTrap-CYLmtfVb.js';
+import '../useRefocusOnActivator-Cd1DyOh3.js';
+import '../useFocusTrap-CogstCW1.js';
 import 'classnames';
-import '../useInView-ayfJb5WX.js';
-import '../useIsMounted-s3zqSEIC.js';
-import '../useSafeLayoutEffect-CCAmH7pt.js';
-import '../Heading-BcxhFI0c.js';
-import '../Typography-DZmgmlHg.js';
-import '../Button-CmiR3Hz7.js';
+import '../useInView-BXkneWzR.js';
+import '../useIsMounted-DT_KC1oO.js';
+import '../useSafeLayoutEffect-DX7mup5n.js';
+import '../Heading-BcM4giaA.js';
+import '../Typography-CVyyAt82.js';
+import '../Button-Cu2XWwhP.js';
 import 'react-router-dom';
-import '../Icon-C5s-2FJp.js';
-import '../Flex-lGZqlZil.js';
+import '../Icon-D41_yhts.js';
+import '../Flex-DbaqcUSI.js';

package/dist/{SideDrawer-BEqowmYN.js → SideDrawer-CpVYUBO8.js}

@@ -4,14 +4,14 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 var framerMotion = require('framer-motion');
 var design = require('@jobber/design');
-var useRefocusOnActivator = require('./useRefocusOnActivator-SywNgkvu.js');
-var useFocusTrap = require('./useFocusTrap-BEJBVhMA.js');
+var useRefocusOnActivator = require('./useRefocusOnActivator-2VHPkeLa.js');
+var useFocusTrap = require('./useFocusTrap-BSIMXMbm.js');
 var classnames = require('classnames');
-var useInView = require('./useInView-xL-unoqj.js');
-var useIsMounted = require('./useIsMounted-DwJSncSQ.js');
-var Heading = require('./Heading-BslkziSg.js');
-var Button = require('./Button-BiaHrzMH.js');
-var Flex = require('./Flex-BIqT8sND.js');
+var useInView = require('./useInView-Cjm2JY9Z.js');
+var useIsMounted = require('./useIsMounted-DzcdANJU.js');
+var Heading = require('./Heading-CMzLqakZ.js');
+var Button = require('./Button-DibdKvEO.js');
+var Flex = require('./Flex-BeO_mgiq.js');
 
 const SideDrawerContext = React.createContext({
     components: {

package/dist/{SideDrawer--E_lHtjb.js → SideDrawer-zAoH9Nsb.js}

@@ -2,14 +2,14 @@ import React, { createContext, useContext, useEffect, useState, useId } from 're
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
 import { tokens } from '@jobber/design';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-DHkZwmcu.js';
-import { u as useFocusTrap_2 } from './useFocusTrap-CYLmtfVb.js';
+import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-Cd1DyOh3.js';
+import { u as useFocusTrap_2 } from './useFocusTrap-CogstCW1.js';
 import classnames from 'classnames';
-import { u as useInView_2 } from './useInView-ayfJb5WX.js';
-import { u as useIsMounted_2 } from './useIsMounted-s3zqSEIC.js';
-import { H as Heading } from './Heading-BcxhFI0c.js';
-import { B as Button } from './Button-CmiR3Hz7.js';
-import { F as Flex } from './Flex-lGZqlZil.js';
+import { u as useInView_2 } from './useInView-BXkneWzR.js';
+import { u as useIsMounted_2 } from './useIsMounted-DT_KC1oO.js';
+import { H as Heading } from './Heading-BcM4giaA.js';
+import { B as Button } from './Button-Cu2XWwhP.js';
+import { F as Flex } from './Flex-DbaqcUSI.js';
 
 const SideDrawerContext = createContext({
     components: {

package/dist/Spinner/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var Spinner = require('../Spinner-Bst_BPTn.js');
+var Spinner = require('../Spinner-B2VgyxTG.js');
 require('react');
 require('classnames');
 

package/dist/Spinner/index.mjs

@@ -1,3 +1,3 @@
-export { S as Spinner } from '../Spinner-DpNWnTKC.js';
+export { S as Spinner } from '../Spinner-P6VC2p7h.js';
 import 'react';
 import 'classnames';

package/dist/StatusIndicator/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var StatusIndicator = require('../StatusIndicator-BngsmPoI.js');
+var StatusIndicator = require('../StatusIndicator-BeQxwhCg.js');
 require('react');
 
 

package/dist/StatusIndicator/index.mjs

@@ -1,2 +1,2 @@
-export { S as StatusIndicator } from '../StatusIndicator-CFQeZGky.js';
+export { S as StatusIndicator } from '../StatusIndicator-BkkkQUC3.js';
 import 'react';

package/dist/StatusLabel/index.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var StatusLabel = require('../StatusLabel-B8Vkjn9-.js');
+var StatusLabel = require('../StatusLabel-Dhv_1uDc.js');
 require('react');
 require('classnames');
-require('../Typography-DABetOtg.js');
-require('../StatusIndicator-BngsmPoI.js');
+require('../Typography-kBMdp63Q.js');
+require('../StatusIndicator-BeQxwhCg.js');
 
 
 

package/dist/StatusLabel/index.mjs

@@ -1,5 +1,5 @@
-export { S as StatusLabel } from '../StatusLabel-DwjZwqwm.js';
+export { S as StatusLabel } from '../StatusLabel-C0jcJLSQ.js';
 import 'react';
 import 'classnames';
-import '../Typography-DZmgmlHg.js';
-import '../StatusIndicator-CFQeZGky.js';
+import '../Typography-CVyyAt82.js';
+import '../StatusIndicator-BkkkQUC3.js';

package/dist/{StatusLabel-DwjZwqwm.js → StatusLabel-C0jcJLSQ.js}

@@ -1,7 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
-import { T as Typography } from './Typography-DZmgmlHg.js';
-import { S as StatusIndicator } from './StatusIndicator-CFQeZGky.js';
+import { T as Typography } from './Typography-CVyyAt82.js';
+import { S as StatusIndicator } from './StatusIndicator-BkkkQUC3.js';
 
 var styles = {"statusLabelRow":"MB0ycTR4PHg-","success":"WBxCEgPiC98-","warning":"ok6hVljkqSE-","critical":"-YTFHnzpkRE-","inactive":"_2F0I59nddP8-","informative":"BQd6Hylvxh0-","labelTextEndAligned":"_0kNfkSPBETw-","statusIndicatorWrapper":"NYMNxZSup30-","spinning":"f6v-aE4zsRQ-"};
 

package/dist/{StatusLabel-B8Vkjn9-.js → StatusLabel-Dhv_1uDc.js}

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var Typography = require('./Typography-DABetOtg.js');
-var StatusIndicator = require('./StatusIndicator-BngsmPoI.js');
+var Typography = require('./Typography-kBMdp63Q.js');
+var StatusIndicator = require('./StatusIndicator-BeQxwhCg.js');
 
 var styles = {"statusLabelRow":"MB0ycTR4PHg-","success":"WBxCEgPiC98-","warning":"ok6hVljkqSE-","critical":"-YTFHnzpkRE-","inactive":"_2F0I59nddP8-","informative":"BQd6Hylvxh0-","labelTextEndAligned":"_0kNfkSPBETw-","statusIndicatorWrapper":"NYMNxZSup30-","spinning":"f6v-aE4zsRQ-"};
 

package/dist/Switch/index.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-var Switch = require('../Switch-BBagZF8u.js');
+var Switch = require('../Switch-C7WsbwKI.js');
 require('react');
 require('classnames');
-require('../Typography-DABetOtg.js');
+require('../Typography-kBMdp63Q.js');
 
 
 

package/dist/Switch/index.mjs

@@ -1,4 +1,4 @@
-export { S as Switch } from '../Switch-BJ-3cRDU.js';
+export { S as Switch } from '../Switch-CxRFFuQl.js';
 import 'react';
 import 'classnames';
-import '../Typography-DZmgmlHg.js';
+import '../Typography-CVyyAt82.js';

package/dist/{Switch-BBagZF8u.js → Switch-C7WsbwKI.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var Typography = require('./Typography-DABetOtg.js');
+var Typography = require('./Typography-kBMdp63Q.js');
 
 var styles = {"switch":"RFAaR96FAEY-","track":"NaSI2jsLI0c-","isChecked":"HbAoDMJhkwY-","toggle":"cc259FtdxeE-","label":"YZ-HIehHOBA-","pip":"_2hxova2FHpM-","disabled":"_6hWvJHjyLlk-","spinning":"vnv-eDdC5Ws-"};
 

package/dist/{Switch-BJ-3cRDU.js → Switch-CxRFFuQl.js}

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import classnames from 'classnames';
-import { T as Typography } from './Typography-DZmgmlHg.js';
+import { T as Typography } from './Typography-CVyyAt82.js';
 
 var styles = {"switch":"RFAaR96FAEY-","track":"NaSI2jsLI0c-","isChecked":"HbAoDMJhkwY-","toggle":"cc259FtdxeE-","label":"YZ-HIehHOBA-","pip":"_2hxova2FHpM-","disabled":"_6hWvJHjyLlk-","spinning":"vnv-eDdC5Ws-"};
 

package/dist/Table/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var Body = require('../Body-De_SlmGb.js');
+var Body = require('../Body-K0yY4-Hm.js');
 require('react');
 require('@jobber/formatters');
 require('classnames');

package/dist/Table/index.mjs

@@ -1,4 +1,4 @@
-export { B as Body, C as Cell, b as CellCurrency, a as CellNumeric, F as Footer, H as Header, R as Row, T as Table } from '../Body-BuCwZrJl.js';
+export { B as Body, C as Cell, b as CellCurrency, a as CellNumeric, F as Footer, H as Header, R as Row, T as Table } from '../Body-DJsdPHRA.js';
 import 'react';
 import '@jobber/formatters';
 import 'classnames';

package/dist/Tabs/index.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
-var Tabs = require('../Tabs-BXfrnsYE.js');
+var Tabs = require('../Tabs-B-4ehZ8Q.js');
 require('react');
 require('classnames');
-require('../throttle-DGLgYxxV.js');
-require('../_commonjsHelpers-D8vZBDRz.js');
-require('../debounce-BsE5QFyn.js');
-require('../isObjectLike-BIU6wIDa.js');
-require('../isSymbol-vLUo0s_o.js');
-require('../Typography-DABetOtg.js');
+require('../throttle-CX5TzkOL.js');
+require('../_commonjsHelpers-VBQZv5oN.js');
+require('../debounce-CRBS8yRj.js');
+require('../isObjectLike-Dts8X2f1.js');
+require('../isSymbol-CcfH1jxa.js');
+require('../Typography-kBMdp63Q.js');
 
 
 

package/dist/Tabs/index.mjs

@@ -1,9 +1,9 @@
-export { a as Tab, T as Tabs } from '../Tabs-QaRz5kbg.js';
+export { a as Tab, T as Tabs } from '../Tabs-OIuwQHiq.js';
 import 'react';
 import 'classnames';
-import '../throttle-DY7WMJ_9.js';
-import '../_commonjsHelpers-DFP9jd3i.js';
-import '../debounce-Dy5Y8S6Y.js';
-import '../isObjectLike-DFTUgWXK.js';
-import '../isSymbol-DYkRmUTB.js';
-import '../Typography-DZmgmlHg.js';
+import '../throttle-BZzEivRF.js';
+import '../_commonjsHelpers-DVF-siCi.js';
+import '../debounce-wIuDnNYn.js';
+import '../isObjectLike-7Bp_Sc6x.js';
+import '../isSymbol-DgxMVnlR.js';
+import '../Typography-CVyyAt82.js';

package/dist/{Tabs-BXfrnsYE.js → Tabs-B-4ehZ8Q.js}

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var throttle = require('./throttle-DGLgYxxV.js');
-var Typography = require('./Typography-DABetOtg.js');
+var throttle = require('./throttle-CX5TzkOL.js');
+var Typography = require('./Typography-kBMdp63Q.js');
 
 var styles = {"tabs":"-kxlqXO5UN0-","overflow":"qI4lWMSNH40-","overflowRight":"xohIah5wcoE-","overflowLeft":"qnY4S9sz-8g-","tabRow":"wdW31G8Trag-","tab":"MO7CXQ8xJXo-","selected":"kqof65gyv7g-","tabContent":"AimQioztR1U-","spinning":"_--EWN0UM-Wo-"};
 

package/dist/{Tabs-QaRz5kbg.js → Tabs-OIuwQHiq.js}

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import classnames from 'classnames';
-import { t as throttle } from './throttle-DY7WMJ_9.js';
-import { T as Typography } from './Typography-DZmgmlHg.js';
+import { t as throttle } from './throttle-BZzEivRF.js';
+import { T as Typography } from './Typography-CVyyAt82.js';
 
 var styles = {"tabs":"-kxlqXO5UN0-","overflow":"qI4lWMSNH40-","overflowRight":"xohIah5wcoE-","overflowLeft":"qnY4S9sz-8g-","tabRow":"wdW31G8Trag-","tab":"MO7CXQ8xJXo-","selected":"kqof65gyv7g-","tabContent":"AimQioztR1U-","spinning":"_--EWN0UM-Wo-"};
 

package/dist/Text/index.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
-var Text = require('../Text-6hArK0QW.js');
+var Text = require('../Text-BPLRBTYC.js');
 require('react');
-require('../Typography-DABetOtg.js');
+require('../Typography-kBMdp63Q.js');
 require('classnames');
 
 

package/dist/Text/index.mjs

@@ -1,4 +1,4 @@
-export { T as Text } from '../Text-B9bidoo6.js';
+export { T as Text } from '../Text-D-UdZoNw.js';
 import 'react';
-import '../Typography-DZmgmlHg.js';
+import '../Typography-CVyyAt82.js';
 import 'classnames';

package/dist/{Text-6hArK0QW.js → Text-BPLRBTYC.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var Typography = require('./Typography-DABetOtg.js');
+var Typography = require('./Typography-kBMdp63Q.js');
 
 function Text({ variation = "default", size = "base", align = "start", children, maxLines = "unlimited", }) {
     const textColors = {

package/dist/{Text-B9bidoo6.js → Text-D-UdZoNw.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Typography } from './Typography-DZmgmlHg.js';
+import { T as Typography } from './Typography-CVyyAt82.js';
 
 function Text({ variation = "default", size = "base", align = "start", children, maxLines = "unlimited", }) {
     const textColors = {

package/dist/Toast/index.cjs

@@ -1,15 +1,15 @@
 'use strict';
 
-var showToast = require('../showToast-Bz4YjTLG.js');
+var showToast = require('../showToast-DxqDR8DD.js');
 require('react');
 require('react-dom/client');
 require('framer-motion');
-require('../Icon-Dm6ilU9W.js');
+require('../Icon-ZpWgqBf-.js');
 require('@jobber/design');
-require('../Button-BiaHrzMH.js');
+require('../Button-DibdKvEO.js');
 require('classnames');
 require('react-router-dom');
-require('../Typography-DABetOtg.js');
+require('../Typography-kBMdp63Q.js');
 
 
 

package/dist/Toast/index.mjs

@@ -1,10 +1,10 @@
-export { T as Toast, s as showToast } from '../showToast-DyOfsNyi.js';
+export { T as Toast, s as showToast } from '../showToast-DIYYHkn1.js';
 import 'react';
 import 'react-dom/client';
 import 'framer-motion';
-import '../Icon-C5s-2FJp.js';
+import '../Icon-D41_yhts.js';
 import '@jobber/design';
-import '../Button-CmiR3Hz7.js';
+import '../Button-Cu2XWwhP.js';
 import 'classnames';
 import 'react-router-dom';
-import '../Typography-DZmgmlHg.js';
+import '../Typography-CVyyAt82.js';

package/dist/Tooltip/index.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
-var Tooltip = require('../Tooltip-B9KVQTE4.js');
+var Tooltip = require('../Tooltip-BFHEGdsW.js');
 require('react');
 require('classnames');
 require('react-dom');
 require('framer-motion');
-require('../useSafeLayoutEffect-tzIpgqTd.js');
-require('../useIsMounted-DwJSncSQ.js');
+require('../useSafeLayoutEffect-BdMQmiwe.js');
+require('../useIsMounted-DzcdANJU.js');
 require('react-popper');
 
 

package/dist/Tooltip/index.mjs

@@ -1,8 +1,8 @@
-export { T as Tooltip } from '../Tooltip-Ck-oydDf.js';
+export { T as Tooltip } from '../Tooltip-B-1v4eDv.js';
 import 'react';
 import 'classnames';
 import 'react-dom';
 import 'framer-motion';
-import '../useSafeLayoutEffect-CCAmH7pt.js';
-import '../useIsMounted-s3zqSEIC.js';
+import '../useSafeLayoutEffect-DX7mup5n.js';
+import '../useIsMounted-DT_KC1oO.js';
 import 'react-popper';

package/dist/{Tooltip-Ck-oydDf.js → Tooltip-B-1v4eDv.js}

@@ -2,8 +2,8 @@ import React, { useRef, useState } from 'react';
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 import { motion } from 'framer-motion';
-import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-CCAmH7pt.js';
-import { u as useIsMounted_2 } from './useIsMounted-s3zqSEIC.js';
+import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-DX7mup5n.js';
+import { u as useIsMounted_2 } from './useIsMounted-DT_KC1oO.js';
 import { usePopper } from 'react-popper';
 
 var styles = {"shadowActivator":"q07bkGoq714-","tooltipWrapper":"dkCTRfc3vYk-","tooltip":"yAFP4gRKlTM-","arrow":"j9KgRON7iTU-","top":"DpxWsz9QuIo-","bottom":"_5RblY1rnJOA-","left":"C9MXsqd4wLM-","right":"_2ZZcgQ4fJ-k-","tooltipMessage":"TpdeLUuiQMg-","spinning":"js-jBQfU2rk-"};

package/dist/{Tooltip-B9KVQTE4.js → Tooltip-BFHEGdsW.js}

@@ -4,8 +4,8 @@ var React = require('react');
 var classnames = require('classnames');
 var ReactDOM = require('react-dom');
 var framerMotion = require('framer-motion');
-var useSafeLayoutEffect = require('./useSafeLayoutEffect-tzIpgqTd.js');
-var useIsMounted = require('./useIsMounted-DwJSncSQ.js');
+var useSafeLayoutEffect = require('./useSafeLayoutEffect-BdMQmiwe.js');
+var useIsMounted = require('./useIsMounted-DzcdANJU.js');
 var reactPopper = require('react-popper');
 
 var styles = {"shadowActivator":"q07bkGoq714-","tooltipWrapper":"dkCTRfc3vYk-","tooltip":"yAFP4gRKlTM-","arrow":"j9KgRON7iTU-","top":"DpxWsz9QuIo-","bottom":"_5RblY1rnJOA-","left":"C9MXsqd4wLM-","right":"_2ZZcgQ4fJ-k-","tooltipMessage":"TpdeLUuiQMg-","spinning":"js-jBQfU2rk-"};

package/dist/Typography/Typography.d.ts

@@ -6,6 +6,7 @@ import textColors from "./css/TextColors.css";
 import emphasis from "./css/Emphasis.css";
 import alignment from "./css/TextAlignment.css";
 import fontFamilies from "./css/FontFamilies.css";
+import { UnderlineStyle, UnderlineStyleWithColor } from "./types";
 interface TypographyProps {
     readonly id?: string;
     /**
@@ -32,7 +33,16 @@ interface TypographyProps {
     readonly fontFamily?: keyof typeof fontFamilies;
     readonly children: ReactNode;
     readonly numberOfLines?: number;
+    /**
+     * The style (and optionally a color) of underline the text is decorated with.
+     * All semantic color tokens (other than the base values) defined in tokens.web
+     * are valid values. If omitted, no underline is applied.
+     *
+     * @example "solid" for a non-dashed underline of the same color as `textColor`
+     * @example "double color-invoice" for a double underline in the specified color
+     */
+    readonly underline?: UnderlineStyle | UnderlineStyleWithColor | undefined;
 }
 export type TypographyOptions = Omit<TypographyProps, "children">;
-export declare function Typography({ id, children, element: Tag, size, align, fontWeight, textCase, textColor, emphasisType, numberOfLines, fontFamily, }: TypographyProps): JSX.Element;
+export declare function Typography({ id, children, element: Tag, size, align, fontWeight, textCase, textColor, emphasisType, numberOfLines, fontFamily, underline, }: TypographyProps): JSX.Element;
 export {};

package/dist/Typography/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var Typography = require('../Typography-DABetOtg.js');
+var Typography = require('../Typography-kBMdp63Q.js');
 require('react');
 require('classnames');
 

package/dist/Typography/index.mjs

@@ -1,3 +1,3 @@
-export { T as Typography } from '../Typography-DZmgmlHg.js';
+export { T as Typography } from '../Typography-CVyyAt82.js';
 import 'react';
 import 'classnames';

package/dist/Typography/types.d.ts

@@ -0,0 +1,7 @@
+import { tokens } from "@jobber/design";
+type Color = {
+    [K in keyof typeof tokens]: K extends `color-${string}` ? K extends `color-base-${string}` ? never : K : never;
+}[keyof typeof tokens];
+export type UnderlineStyle = "solid" | "double" | "dotted" | "dashed";
+export type UnderlineStyleWithColor = `${UnderlineStyle} ${Color}`;
+export {};

package/dist/{Typography-DZmgmlHg.js → Typography-CVyyAt82.js}

@@ -19,18 +19,35 @@ var alignment = {"start":"eDMsbRCP0kg-","center":"j34R9yIG--c-","end":"CeI75T5sH
 
 var fontFamilies = {"base":"mRpfVoMiIMM-","display":"TPtuWMdOsfw-","spinning":"ehJfSODTJ5A-"};
 
+var underlineStyles = {"basicUnderline":"wXYzkUVrvH0-","spinning":"_3PsFZzK7Vs8-"};
+
 /* eslint-disable import/no-internal-modules */
-function Typography({ id, children, element: Tag = "p", size, align, fontWeight = "regular", textCase, textColor, emphasisType, numberOfLines, fontFamily, }) {
+function Typography({ id, children, element: Tag = "p", size, align, fontWeight = "regular", textCase, textColor, emphasisType, numberOfLines, fontFamily, underline, }) {
     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, Object.assign({}, (align && { [alignment[align]]: align !== `start` })));
-    let truncateLines;
+    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) {
-        truncateLines = {
+        stylesOverrides = {
             WebkitLineClamp: numberOfLines,
             WebkitBoxOrient: "vertical",
         };
     }
-    return (React.createElement(Tag, { id: id, className: className, style: truncateLines }, children));
+    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));
+}
+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})`;
+    }
+    if (textColor) {
+        return textColors[textColor];
+    }
 }
 
 export { Typography as T };

package/dist/{Typography-DABetOtg.js → Typography-kBMdp63Q.js}

@@ -21,18 +21,35 @@ var alignment = {"start":"eDMsbRCP0kg-","center":"j34R9yIG--c-","end":"CeI75T5sH
 
 var fontFamilies = {"base":"mRpfVoMiIMM-","display":"TPtuWMdOsfw-","spinning":"ehJfSODTJ5A-"};
 
+var underlineStyles = {"basicUnderline":"wXYzkUVrvH0-","spinning":"_3PsFZzK7Vs8-"};
+
 /* eslint-disable import/no-internal-modules */
-function Typography({ id, children, element: Tag = "p", size, align, fontWeight = "regular", textCase, textColor, emphasisType, numberOfLines, fontFamily, }) {
+function Typography({ id, children, element: Tag = "p", size, align, fontWeight = "regular", textCase, textColor, emphasisType, numberOfLines, fontFamily, underline, }) {
     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, Object.assign({}, (align && { [alignment[align]]: align !== `start` })));
-    let truncateLines;
+    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) {
-        truncateLines = {
+        stylesOverrides = {
             WebkitLineClamp: numberOfLines,
             WebkitBoxOrient: "vertical",
         };
     }
-    return (React.createElement(Tag, { id: id, className: className, style: truncateLines }, children));
+    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));
+}
+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})`;
+    }
+    if (textColor) {
+        return textColors[textColor];
+    }
 }
 
 exports.Typography = Typography;

package/dist/{_baseAssignValue-BXMg8vie.js → _baseAssignValue-CUYhMLEz.js}

@@ -1,4 +1,4 @@
-import { _ as _defineProperty } from './identity-5KOr_jTv.js';
+import { _ as _defineProperty } from './identity-BQfvegNc.js';
 
 var defineProperty = _defineProperty;
 

package/dist/{_baseAssignValue-CHbnTxit.js → _baseAssignValue-xOfxr3Yj.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var identity = require('./identity-BmdPyShq.js');
+var identity = require('./identity-Wihqr3c6.js');
 
 var defineProperty = identity._defineProperty;
 

package/dist/{_baseEach-BKi1yOhy.js → _baseEach-BY7mX8HA.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var identity$1 = require('./identity-BmdPyShq.js');
-var isObjectLike$1 = require('./isObjectLike-BIU6wIDa.js');
-var _getAllKeys = require('./_getAllKeys-D_PcAbg4.js');
-var _getTag = require('./_getTag-D65AljFr.js');
-var isTypedArray$1 = require('./isTypedArray-CNg2SI5w.js');
-var _commonjsHelpers = require('./_commonjsHelpers-D8vZBDRz.js');
-var _baseFor = require('./_baseFor-DlAD2qM1.js');
+var identity$1 = require('./identity-Wihqr3c6.js');
+var isObjectLike$1 = require('./isObjectLike-Dts8X2f1.js');
+var _getAllKeys = require('./_getAllKeys-jPRmFz97.js');
+var _getTag = require('./_getTag-uQ6I5F_B.js');
+var isTypedArray$1 = require('./isTypedArray-Db1qttiF.js');
+var _commonjsHelpers = require('./_commonjsHelpers-VBQZv5oN.js');
+var _baseFor = require('./_baseFor-Du4K7xQu.js');
 
 /** Used to stand-in for `undefined` hash values. */