@jobber/components 5.30.1 → 5.31.1

package/dist/SideDrawer/index.cjs

@@ -1,22 +1,22 @@
 'use strict';
 
-var SideDrawer = require('../SideDrawer-BpWkNXDF.js');
+var SideDrawer = require('../SideDrawer-Cgsz3fwc.js');
 require('react');
 require('react-dom');
 require('framer-motion');
 require('@jobber/design');
-require('../useRefocusOnActivator-Ckum97S6.js');
-require('../useFocusTrap-Dg0dUwox.js');
+require('../useRefocusOnActivator-aiibozEv.js');
+require('../useFocusTrap-Dsaoxo5Y.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-ziQ_69jH.js');
+require('../useIsMounted-STaNrL71.js');
+require('../useSafeLayoutEffect-DbCbXJtv.js');
+require('../Heading-iVX5Llei.js');
+require('../Typography-CgD1rcMm.js');
+require('../Button-mN2aqkbq.js');
 require('react-router-dom');
-require('../Icon-D3sRaxeH.js');
-require('../Flex-q9KfxTR5.js');
+require('../Icon-nGXdBCqM.js');
+require('../Flex-po-dNT4S.js');
 
 
 

package/dist/SideDrawer/index.mjs

@@ -1,17 +1,17 @@
-export { S as SideDrawer } from '../SideDrawer-CmSBTIwc.js';
+export { S as SideDrawer } from '../SideDrawer-Cewk0uju.js';
 import 'react';
 import 'react-dom';
 import 'framer-motion';
 import '@jobber/design';
-import '../useRefocusOnActivator-DBhggOEF.js';
-import '../useFocusTrap-BE_mFlEp.js';
+import '../useRefocusOnActivator-gwGQQdfZ.js';
+import '../useFocusTrap-BLWehCo2.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-DtNFhzw3.js';
+import '../useIsMounted-iDCj5SdD.js';
+import '../useSafeLayoutEffect-DCegBi3j.js';
+import '../Heading-Dj-hPxnr.js';
+import '../Typography-TCYETVvs.js';
+import '../Button-Dji3O-g0.js';
 import 'react-router-dom';
-import '../Icon-uqobLEMC.js';
-import '../Flex-pmAZXJ6F.js';
+import '../Icon-C2bpIIbf.js';
+import '../Flex-DiMyzgDY.js';

package/dist/{SideDrawer-CmSBTIwc.js → SideDrawer-Cewk0uju.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-gwGQQdfZ.js';
+import { u as useFocusTrap_2 } from './useFocusTrap-BLWehCo2.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-DtNFhzw3.js';
+import { u as useIsMounted_2 } from './useIsMounted-iDCj5SdD.js';
+import { H as Heading } from './Heading-Dj-hPxnr.js';
+import { B as Button } from './Button-Dji3O-g0.js';
+import { F as Flex } from './Flex-DiMyzgDY.js';
 
 const SideDrawerContext = createContext({
     components: {

package/dist/{SideDrawer-BpWkNXDF.js → SideDrawer-Cgsz3fwc.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-aiibozEv.js');
+var useFocusTrap = require('./useFocusTrap-Dsaoxo5Y.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-ziQ_69jH.js');
+var useIsMounted = require('./useIsMounted-STaNrL71.js');
+var Heading = require('./Heading-iVX5Llei.js');
+var Button = require('./Button-mN2aqkbq.js');
+var Flex = require('./Flex-po-dNT4S.js');
 
 const SideDrawerContext = React.createContext({
     components: {

package/dist/Spinner/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var Spinner = require('../Spinner-YyXJvAsV.js');
+var Spinner = require('../Spinner-BQlQVvAN.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-2wcQ24be.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-XKOgfQgc.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-LW3oTkWz.js';
 import 'react';

package/dist/StatusLabel/index.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var StatusLabel = require('../StatusLabel-BQWjE45x.js');
+var StatusLabel = require('../StatusLabel-DUESKoKI.js');
 require('react');
 require('classnames');
-require('../Typography-BXbxmii7.js');
-require('../StatusIndicator-FkpSYeDy.js');
+require('../Typography-CgD1rcMm.js');
+require('../StatusIndicator-XKOgfQgc.js');
 
 
 

package/dist/StatusLabel/index.mjs

@@ -1,5 +1,5 @@
-export { S as StatusLabel } from '../StatusLabel-CDXAbqXT.js';
+export { S as StatusLabel } from '../StatusLabel-BqOSLv-X.js';
 import 'react';
 import 'classnames';
-import '../Typography-ts4NDIYu.js';
-import '../StatusIndicator-Mcjroulj.js';
+import '../Typography-TCYETVvs.js';
+import '../StatusIndicator-LW3oTkWz.js';

package/dist/{StatusLabel-CDXAbqXT.js → StatusLabel-BqOSLv-X.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-TCYETVvs.js';
+import { S as StatusIndicator } from './StatusIndicator-LW3oTkWz.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-DUESKoKI.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-CgD1rcMm.js');
+var StatusIndicator = require('./StatusIndicator-XKOgfQgc.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-CxN4ejbD.js');
 require('react');
 require('classnames');
-require('../Typography-BXbxmii7.js');
+require('../Typography-CgD1rcMm.js');
 
 
 

package/dist/Switch/index.mjs

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

package/dist/{Switch-Bm5Ts7WH.js → Switch-CmfL69E3.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-TCYETVvs.js';
 
 var styles = {"switch":"RFAaR96FAEY-","track":"NaSI2jsLI0c-","isChecked":"HbAoDMJhkwY-","toggle":"cc259FtdxeE-","label":"YZ-HIehHOBA-","pip":"_2hxova2FHpM-","disabled":"_6hWvJHjyLlk-","spinning":"vnv-eDdC5Ws-"};
 

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

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var Typography = require('./Typography-BXbxmii7.js');
+var Typography = require('./Typography-CgD1rcMm.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-CAnI0cwy.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-DfKJa4Jh.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-lsjjbKdO.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-DZXsR2aK.js');
+require('../_commonjsHelpers-aNP9nx1a.js');
+require('../debounce-ChBZs1sY.js');
+require('../isObjectLike-Dyg4Fvrm.js');
+require('../isSymbol-DVWS9YPq.js');
+require('../Typography-CgD1rcMm.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-BTCwHW0F.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-8je8iWDU.js';
+import '../_commonjsHelpers-BkcOs9ez.js';
+import '../debounce-NgfrEjtD.js';
+import '../isObjectLike-DjbbrQB0.js';
+import '../isSymbol-Cyo3gFPL.js';
+import '../Typography-TCYETVvs.js';

package/dist/{Tabs-C-K6PaC5.js → Tabs-BTCwHW0F.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-8je8iWDU.js';
+import { T as Typography } from './Typography-TCYETVvs.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-DuGs7U94.js → Tabs-lsjjbKdO.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-DZXsR2aK.js');
+var Typography = require('./Typography-CgD1rcMm.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-BEhaReGP.js');
 require('react');
-require('../Typography-BXbxmii7.js');
+require('../Typography-CgD1rcMm.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-BAcDYllO.js';
 import 'react';
-import '../Typography-ts4NDIYu.js';
+import '../Typography-TCYETVvs.js';
 import 'classnames';

package/dist/{Text-DEDnRCYo.js → Text-BAcDYllO.js}

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

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var Typography = require('./Typography-BXbxmii7.js');
+var Typography = require('./Typography-CgD1rcMm.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-CUCgYWzy.js');
 require('react');
 require('react-dom/client');
 require('framer-motion');
-require('../Icon-D3sRaxeH.js');
+require('../Icon-nGXdBCqM.js');
 require('@jobber/design');
-require('../Button-4dfjtQIZ.js');
+require('../Button-mN2aqkbq.js');
 require('classnames');
 require('react-router-dom');
-require('../Typography-BXbxmii7.js');
+require('../Typography-CgD1rcMm.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-DSkCnIPI.js';
 import 'react';
 import 'react-dom/client';
 import 'framer-motion';
-import '../Icon-uqobLEMC.js';
+import '../Icon-C2bpIIbf.js';
 import '@jobber/design';
-import '../Button-BUCU48Qc.js';
+import '../Button-Dji3O-g0.js';
 import 'classnames';
 import 'react-router-dom';
-import '../Typography-ts4NDIYu.js';
+import '../Typography-TCYETVvs.js';

package/dist/Tooltip/index.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
-var Tooltip = require('../Tooltip-D0HcIQB4.js');
+var Tooltip = require('../Tooltip-CJWVU2Ts.js');
 require('react');
 require('classnames');
 require('react-dom');
 require('framer-motion');
-require('../useSafeLayoutEffect-DFlwIVLO.js');
-require('../useIsMounted-ofnoWshV.js');
+require('../useSafeLayoutEffect-DbCbXJtv.js');
+require('../useIsMounted-STaNrL71.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-CSs2fQKK.js';
 import 'react';
 import 'classnames';
 import 'react-dom';
 import 'framer-motion';
-import '../useSafeLayoutEffect-r7OtJraS.js';
-import '../useIsMounted-DJxLaK_F.js';
+import '../useSafeLayoutEffect-DCegBi3j.js';
+import '../useIsMounted-iDCj5SdD.js';
 import 'react-popper';

package/dist/{Tooltip-D0HcIQB4.js → Tooltip-CJWVU2Ts.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-DbCbXJtv.js');
+var useIsMounted = require('./useIsMounted-STaNrL71.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/{Tooltip-CsVJud_K.js → Tooltip-CSs2fQKK.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-DCegBi3j.js';
+import { u as useIsMounted_2 } from './useIsMounted-iDCj5SdD.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/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-CgD1rcMm.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-TCYETVvs.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-BXbxmii7.js → Typography-CgD1rcMm.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/{Typography-ts4NDIYu.js → Typography-TCYETVvs.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/{_baseAssignValue-C_jOMPFF.js → _baseAssignValue-Dr2S4ep5.js}

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

package/dist/{_baseAssignValue-BscblNmA.js → _baseAssignValue-mXPMhn89.js}

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

package/dist/{_baseEach-Czebpl_-.js → _baseEach-CePeO8W4.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-DVrvSTi9.js');
+var isObjectLike$1 = require('./isObjectLike-Dyg4Fvrm.js');
+var _getAllKeys = require('./_getAllKeys-C-WGuBEo.js');
+var _getTag = require('./_getTag-KoILJYb0.js');
+var isTypedArray$1 = require('./isTypedArray-WlZ_nUti.js');
+var _commonjsHelpers = require('./_commonjsHelpers-aNP9nx1a.js');
+var _baseFor = require('./_baseFor-TW1B6D0J.js');
 
 /** Used to stand-in for `undefined` hash values. */