@jobber/components 5.30.1 → 5.31.0

package/dist/SideDrawer/index.cjs

@@ -1,22 +1,22 @@
 'use strict';
 
-var SideDrawer = require('../SideDrawer-BpWkNXDF.js');
+var SideDrawer = require('../SideDrawer-CpVYUBO8.js');
 require('react');
 require('react-dom');
 require('framer-motion');
 require('@jobber/design');
-require('../useRefocusOnActivator-Ckum97S6.js');
-require('../useFocusTrap-Dg0dUwox.js');
+require('../useRefocusOnActivator-2VHPkeLa.js');
+require('../useFocusTrap-BSIMXMbm.js');
 require('classnames');
-require('../useInView-BamYVROe.js');
-require('../useIsMounted-ofnoWshV.js');
-require('../useSafeLayoutEffect-DFlwIVLO.js');
-require('../Heading-BeD6P2MN.js');
-require('../Typography-BXbxmii7.js');
-require('../Button-4dfjtQIZ.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-D3sRaxeH.js');
-require('../Flex-q9KfxTR5.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-CmSBTIwc.js';
+export { S as SideDrawer } from '../SideDrawer-zAoH9Nsb.js';
 import 'react';
 import 'react-dom';
 import 'framer-motion';
 import '@jobber/design';
-import '../useRefocusOnActivator-DBhggOEF.js';
-import '../useFocusTrap-BE_mFlEp.js';
+import '../useRefocusOnActivator-Cd1DyOh3.js';
+import '../useFocusTrap-CogstCW1.js';
 import 'classnames';
-import '../useInView-BFDJPTL1.js';
-import '../useIsMounted-DJxLaK_F.js';
-import '../useSafeLayoutEffect-r7OtJraS.js';
-import '../Heading-BXeGJ-d5.js';
-import '../Typography-ts4NDIYu.js';
-import '../Button-BUCU48Qc.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-uqobLEMC.js';
-import '../Flex-pmAZXJ6F.js';
+import '../Icon-D41_yhts.js';
+import '../Flex-DbaqcUSI.js';

package/dist/{SideDrawer-BpWkNXDF.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-Ckum97S6.js');
-var useFocusTrap = require('./useFocusTrap-Dg0dUwox.js');
+var useRefocusOnActivator = require('./useRefocusOnActivator-2VHPkeLa.js');
+var useFocusTrap = require('./useFocusTrap-BSIMXMbm.js');
 var classnames = require('classnames');
-var useInView = require('./useInView-BamYVROe.js');
-var useIsMounted = require('./useIsMounted-ofnoWshV.js');
-var Heading = require('./Heading-BeD6P2MN.js');
-var Button = require('./Button-4dfjtQIZ.js');
-var Flex = require('./Flex-q9KfxTR5.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-CmSBTIwc.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-DBhggOEF.js';
-import { u as useFocusTrap_2 } from './useFocusTrap-BE_mFlEp.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-BFDJPTL1.js';
-import { u as useIsMounted_2 } from './useIsMounted-DJxLaK_F.js';
-import { H as Heading } from './Heading-BXeGJ-d5.js';
-import { B as Button } from './Button-BUCU48Qc.js';
-import { F as Flex } from './Flex-pmAZXJ6F.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-YyXJvAsV.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-B-7xNoM2.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-FkpSYeDy.js');
+var StatusIndicator = require('../StatusIndicator-BeQxwhCg.js');
 require('react');
 
 

package/dist/StatusIndicator/index.mjs

@@ -1,2 +1,2 @@
-export { S as StatusIndicator } from '../StatusIndicator-Mcjroulj.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-BQWjE45x.js');
+var StatusLabel = require('../StatusLabel-Dhv_1uDc.js');
 require('react');
 require('classnames');
-require('../Typography-BXbxmii7.js');
-require('../StatusIndicator-FkpSYeDy.js');
+require('../Typography-kBMdp63Q.js');
+require('../StatusIndicator-BeQxwhCg.js');
 
 
 

package/dist/StatusLabel/index.mjs

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

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
-import { T as Typography } from './Typography-ts4NDIYu.js';
-import { S as StatusIndicator } from './StatusIndicator-Mcjroulj.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-BQWjE45x.js → StatusLabel-Dhv_1uDc.js}

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var Typography = require('./Typography-BXbxmii7.js');
-var StatusIndicator = require('./StatusIndicator-FkpSYeDy.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-L4qbyHcG.js');
+var Switch = require('../Switch-C7WsbwKI.js');
 require('react');
 require('classnames');
-require('../Typography-BXbxmii7.js');
+require('../Typography-kBMdp63Q.js');
 
 
 

package/dist/Switch/index.mjs

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

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

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var Typography = require('./Typography-BXbxmii7.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-Bm5Ts7WH.js → Switch-CxRFFuQl.js}

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import classnames from 'classnames';
-import { T as Typography } from './Typography-ts4NDIYu.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-BJqvVvDz.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-paqUz3qJ.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-DuGs7U94.js');
+var Tabs = require('../Tabs-B-4ehZ8Q.js');
 require('react');
 require('classnames');
-require('../throttle-D0gWLPOA.js');
-require('../_commonjsHelpers-BzVjMAjl.js');
-require('../debounce-DJpXMvJQ.js');
-require('../isObjectLike-Dc1T52v3.js');
-require('../isSymbol-BVEFXopk.js');
-require('../Typography-BXbxmii7.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-C-K6PaC5.js';
+export { a as Tab, T as Tabs } from '../Tabs-OIuwQHiq.js';
 import 'react';
 import 'classnames';
-import '../throttle-DvZIW7nN.js';
-import '../_commonjsHelpers-m0d9vWmz.js';
-import '../debounce-Ckja4qT9.js';
-import '../isObjectLike-CiJYV8F-.js';
-import '../isSymbol-CoR1elNB.js';
-import '../Typography-ts4NDIYu.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-DuGs7U94.js → Tabs-B-4ehZ8Q.js}

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var throttle = require('./throttle-D0gWLPOA.js');
-var Typography = require('./Typography-BXbxmii7.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-C-K6PaC5.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-DvZIW7nN.js';
-import { T as Typography } from './Typography-ts4NDIYu.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-BsR6WPxj.js');
+var Text = require('../Text-BPLRBTYC.js');
 require('react');
-require('../Typography-BXbxmii7.js');
+require('../Typography-kBMdp63Q.js');
 require('classnames');
 
 

package/dist/Text/index.mjs

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

package/dist/{Text-BsR6WPxj.js → Text-BPLRBTYC.js}

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Typography } from './Typography-ts4NDIYu.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-JA96GV-I.js');
+var showToast = require('../showToast-DxqDR8DD.js');
 require('react');
 require('react-dom/client');
 require('framer-motion');
-require('../Icon-D3sRaxeH.js');
+require('../Icon-ZpWgqBf-.js');
 require('@jobber/design');
-require('../Button-4dfjtQIZ.js');
+require('../Button-DibdKvEO.js');
 require('classnames');
 require('react-router-dom');
-require('../Typography-BXbxmii7.js');
+require('../Typography-kBMdp63Q.js');
 
 
 

package/dist/Toast/index.mjs

@@ -1,10 +1,10 @@
-export { T as Toast, s as showToast } from '../showToast-DjJOyODI.js';
+export { T as Toast, s as showToast } from '../showToast-DIYYHkn1.js';
 import 'react';
 import 'react-dom/client';
 import 'framer-motion';
-import '../Icon-uqobLEMC.js';
+import '../Icon-D41_yhts.js';
 import '@jobber/design';
-import '../Button-BUCU48Qc.js';
+import '../Button-Cu2XWwhP.js';
 import 'classnames';
 import 'react-router-dom';
-import '../Typography-ts4NDIYu.js';
+import '../Typography-CVyyAt82.js';

package/dist/Tooltip/index.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
-var Tooltip = require('../Tooltip-D0HcIQB4.js');
+var Tooltip = require('../Tooltip-BFHEGdsW.js');
 require('react');
 require('classnames');
 require('react-dom');
 require('framer-motion');
-require('../useSafeLayoutEffect-DFlwIVLO.js');
-require('../useIsMounted-ofnoWshV.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-CsVJud_K.js';
+export { T as Tooltip } from '../Tooltip-B-1v4eDv.js';
 import 'react';
 import 'classnames';
 import 'react-dom';
 import 'framer-motion';
-import '../useSafeLayoutEffect-r7OtJraS.js';
-import '../useIsMounted-DJxLaK_F.js';
+import '../useSafeLayoutEffect-DX7mup5n.js';
+import '../useIsMounted-DT_KC1oO.js';
 import 'react-popper';

package/dist/{Tooltip-CsVJud_K.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-r7OtJraS.js';
-import { u as useIsMounted_2 } from './useIsMounted-DJxLaK_F.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-D0HcIQB4.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-DFlwIVLO.js');
-var useIsMounted = require('./useIsMounted-ofnoWshV.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-BXbxmii7.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-ts4NDIYu.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-ts4NDIYu.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-BXbxmii7.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-BscblNmA.js → _baseAssignValue-CUYhMLEz.js}

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

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

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

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

@@ -1,12 +1,12 @@
 'use strict';
 
-var identity$1 = require('./identity-DZ9jyLHB.js');
-var isObjectLike$1 = require('./isObjectLike-Dc1T52v3.js');
-var _getAllKeys = require('./_getAllKeys-BJiueTj-.js');
-var _getTag = require('./_getTag-B_5apZiL.js');
-var isTypedArray$1 = require('./isTypedArray-7iGhDtVF.js');
-var _commonjsHelpers = require('./_commonjsHelpers-BzVjMAjl.js');
-var _baseFor = require('./_baseFor-B9DOFxc_.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. */