@norges-domstoler/dds-components 9.1.1 → 9.2.0

package/dist/components/Tabs/Tab.js

@@ -11,22 +11,25 @@ import '../../utils/color.js';
 import '../../hooks/useScreenSize.js';
 import { useTabsContext } from './Tabs.context.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
-import { focusVisibleTransitionValue } from '../../helpers/styling/focusVisible.js';
+import { removeButtonStyling } from '../../helpers/styling/removeButtonStyling.js';
+import { focusVisibleTransitionValue, focusVisible } from '../../helpers/styling/focusVisible.js';
 import '../../helpers/styling/hover.js';
 import '../../helpers/styling/focus.js';
 import '../../helpers/styling/danger.js';
 import '../../helpers/styling/selection.js';
+import { getFontStyling, defaultTypographyType } from '../Typography/Typography.utils.js';
 
+var tab = tabsTokens.tab;
 var Button = styled.button.withConfig({
   displayName: "Tab__Button",
   componentId: "sc-1dd8soq-0"
-})(["user-select:text;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-bottom 0.2s,color 0.2s,", ";}", " ", ";", " &:focus-visible{", "}&:hover{", "}"], focusVisibleTransitionValue, tabsTokens.tab.base, function (_ref) {
+})(["", " user-select:text;display:flex;align-items:center;justify-content:center;border-bottom:", ";color:", ";padding:", ";", " @media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-bottom 0.2s,color 0.2s,", ";}", ";", " &:focus-visible{", " outline-offset:-1px;}&:hover{border-color:", ";color:", ";box-shadow:", ";}"], removeButtonStyling, tab.base.borderBottom, tab.base.color, tab.base.padding, getFontStyling(defaultTypographyType), focusVisibleTransitionValue, function (_ref) {
   var direction = _ref.direction;
-  return tabsTokens.tab.direction[direction].base;
+  return css(["flex-direction:", ";gap:", ";"], direction, tab[direction].gap);
 }, function (_ref2) {
   var active = _ref2.active;
-  return active && css(["", ""], tabsTokens.tab.active.base);
-}, tabsTokens.tab.focus.base, tabsTokens.tab.hover.base);
+  return active && css(["background-color:", ";border-color:", ";color:", ";box-shadow:", ";"], tab.active.backgroundColor, tab.active.borderColor, tab.active.color, tab.active.boxShadow);
+}, focusVisible, tab.hover.borderColor, tab.hover.color, tab.hover.boxShadow);
 var Tab = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$active = props.active,
       active = _props$active === void 0 ? false : _props$active,

package/dist/components/Tabs/TabPanel.js

@@ -2,7 +2,7 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { focusVisibleTransitionValue } from '../../helpers/styling/focusVisible.js';
+import { focusVisibleTransitionValue, focusVisible } from '../../helpers/styling/focusVisible.js';
 import '../../helpers/styling/hover.js';
 import '../../helpers/styling/focus.js';
 import '../../helpers/styling/danger.js';
@@ -10,13 +10,14 @@ import '../../helpers/styling/selection.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { tabsTokens } from './Tabs.tokens.js';
 
+var panel = tabsTokens.panel;
 var Panel = styled.div.withConfig({
   displayName: "TabPanel__Panel",
   componentId: "sc-vkzivq-0"
-})(["@media (prefers-reduced-motion:no-preference){transition:", ";}", " ", " &:focus-visible{", "}"], focusVisibleTransitionValue, tabsTokens.panel.base, function (_ref) {
+})(["padding:", ";@media (prefers-reduced-motion:no-preference){transition:", ";}", " &:focus-visible{", "}"], panel.padding, focusVisibleTransitionValue, function (_ref) {
   var active = _ref.active;
   return !active && css(["display:none;"]);
-}, tabsTokens.panel.focusVisible.base);
+}, focusVisible);
 var TabPanel = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _a$active = _a.active,
       active = _a$active === void 0 ? false : _a$active,

package/dist/components/Tabs/Tabs.tokens.d.ts

@@ -1,33 +1,32 @@
-import { CSSObject } from 'styled-components';
 export declare const tabsTokens: {
-    tabList: CSSObject;
+    tabList: {
+        borderBottom: string;
+    };
     tab: {
-        base: CSSObject;
-        direction: {
-            row: {
-                base: CSSObject;
-            };
-            column: {
-                base: CSSObject;
-            };
+        base: {
+            borderBottom: string;
+            color: string;
+            padding: string;
+        };
+        row: {
+            gap: string;
+        };
+        column: {
+            gap: string;
         };
         active: {
-            base: CSSObject;
+            backgroundColor: string;
+            color: string;
+            boxShadow: string;
+            borderColor: string;
         };
         hover: {
-            base: CSSObject;
-            active: {
-                base: CSSObject;
-            };
-        };
-        focus: {
-            base: CSSObject;
+            color: string;
+            boxShadow: string;
+            borderColor: string;
         };
     };
     panel: {
-        base: CSSObject;
-        focusVisible: {
-            base: CSSObject;
-        };
+        padding: string;
     };
 };

package/dist/components/Tabs/Tabs.tokens.js

@@ -1,90 +1,42 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-import { removeButtonStyling } from '../../helpers/styling/removeButtonStyling.js';
-import 'styled-components';
-import { focusVisible } from '../../helpers/styling/focusVisible.js';
-import '../../helpers/styling/hover.js';
-import '../../helpers/styling/focus.js';
-import '../../helpers/styling/danger.js';
-import '../../helpers/styling/selection.js';
 
-var Border = ddsBaseTokens.border,
-    Spacing = ddsBaseTokens.spacing,
-    Colors = ddsBaseTokens.colors;
+var border = ddsBaseTokens.border,
+    spacing = ddsBaseTokens.spacing,
+    colors = ddsBaseTokens.colors;
 var tabList = {
-  borderBottom: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Border.BordersDdsBorderStyleLightStroke)
+  borderBottom: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(border.BordersDdsBorderStyleLightStroke)
 };
-var tabBase = Object.assign(Object.assign({}, removeButtonStyling), {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderBottom: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " solid transparent"),
-  color: Colors.DdsColorNeutralsGray7
-});
-var tabRowBase = {
-  flexDirection: 'row',
-  padding: "".concat(Spacing.SizesDdsSpacingLocalX05, " ").concat(Spacing.SizesDdsSpacingLocalX05, " ").concat(Spacing.SizesDdsSpacingLocalX025, " ").concat(Spacing.SizesDdsSpacingLocalX05),
-  gap: Spacing.SizesDdsSpacingLocalX05
-};
-var tabColumnBase = {
-  flexDirection: 'column',
-  padding: "".concat(Spacing.SizesDdsSpacingLocalX05, " ").concat(Spacing.SizesDdsSpacingLocalX025, " ").concat(Spacing.SizesDdsSpacingLocalX025, " ").concat(Spacing.SizesDdsSpacingLocalX025),
-  gap: Spacing.SizesDdsSpacingLocalX025
-};
-var tabActiveBase = {
-  backgroundColor: Colors.DdsColorInteractiveLightest,
-  color: Colors.DdsColorInteractiveDarkest,
-  boxShadow: "inset 0 -2px 0 0 ".concat(Colors.DdsColorInteractiveDarker),
-  borderBottom: "1px solid ".concat(Colors.DdsColorInteractiveDarker)
-};
-var tabHoverBase = {
-  color: Colors.DdsColorInteractiveDarkest,
-  boxShadow: "inset 0 -2px 0 0 ".concat(Colors.DdsColorInteractiveDarker),
-  borderBottom: "1px solid ".concat(Colors.DdsColorInteractiveDarker)
-};
-var tabActiveHoverBase = {
-  backgroundColor: Colors.DdsColorInteractiveLightest,
-  color: Colors.DdsColorInteractiveDarkest,
-  boxShadow: "inset 0 -2px 0 0 ".concat(Colors.DdsColorInteractiveDarker),
-  borderBottom: "1px solid ".concat(Colors.DdsColorInteractiveDarker)
+var tab = {
+  base: {
+    borderBottom: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid transparent"),
+    color: colors.DdsColorNeutralsGray7,
+    padding: spacing.SizesDdsSpacingLocalX05
+  },
+  row: {
+    gap: spacing.SizesDdsSpacingLocalX05
+  },
+  column: {
+    gap: spacing.SizesDdsSpacingLocalX025
+  },
+  active: {
+    backgroundColor: colors.DdsColorInteractiveLightest,
+    color: colors.DdsColorInteractiveDarkest,
+    boxShadow: "inset 0 -2px 0 0 ".concat(colors.DdsColorInteractiveDarker),
+    borderColor: colors.DdsColorInteractiveDarker
+  },
+  hover: {
+    color: colors.DdsColorInteractiveDarkest,
+    boxShadow: "inset 0 -2px 0 0 ".concat(colors.DdsColorInteractiveDarker),
+    borderColor: colors.DdsColorInteractiveDarker
+  }
 };
-var tabFocusBase = Object.assign(Object.assign({}, focusVisible), {
-  outlineOffset: '-1px'
-});
-var tabPanelBase = {
-  padding: Spacing.SizesDdsSpacingLocalX025
+var panel = {
+  padding: spacing.SizesDdsSpacingLocalX025
 };
-var tabPanelFocusVisibleBase = Object.assign({}, focusVisible);
 var tabsTokens = {
   tabList: tabList,
-  tab: {
-    base: tabBase,
-    direction: {
-      row: {
-        base: tabRowBase
-      },
-      column: {
-        base: tabColumnBase
-      }
-    },
-    active: {
-      base: tabActiveBase
-    },
-    hover: {
-      base: tabHoverBase,
-      active: {
-        base: tabActiveHoverBase
-      }
-    },
-    focus: {
-      base: tabFocusBase
-    }
-  },
-  panel: {
-    base: tabPanelBase,
-    focusVisible: {
-      base: tabPanelFocusVisibleBase
-    }
-  }
+  tab: tab,
+  panel: panel
 };
 
 export { tabsTokens };

package/dist/components/Tag/Tag.d.ts

@@ -6,7 +6,7 @@ export declare type TagProps = BaseComponentProps<HTMLSpanElement, {
     /**Formål med status eller kategorisering. Påvirker styling. */
     purpose?: TagPurpose;
 }>;
-export declare const Tag: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLSpanElement>, "id" | "className"> & {
+export declare const Tag: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLSpanElement>, "className" | "id"> & {
     /**Tekst som vises i `<Tag />.` */
     text?: string | undefined;
     /**Formål med status eller kategorisering. Påvirker styling. */

package/dist/components/Tag/Tag.js

@@ -2,30 +2,19 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { tagTokens } from './Tag.tokens.js';
-import { Typography } from '../Typography/Typography/Typography.js';
-import '../../helpers/Backdrop/Backdrop.js';
-import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
-import '../../helpers/HiddenInput/HiddenInput.js';
-import '../../helpers/Input/Input.styles.js';
-import '../../helpers/Input/Input.tokens.js';
-import '../InputMessage/InputMessage.js';
-import '../../helpers/Paper/Paper.js';
-import '../../helpers/RequiredMarker/RequiredMarker.js';
+import { tagTokens, typographyType } from './Tag.tokens.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
-import '../Typography/Link/Link.js';
+import { TextOverflowEllipsisWrapper, TextOverflowEllipsisInner } from '../../helpers/TextOverflowEllipsis/TextOverflowEllipsis.js';
+import { getFontStyling } from '../Typography/Typography.utils.js';
 
-var Wrapper = styled(Typography).withConfig({
+var wrapper = tagTokens.wrapper;
+var Wrapper = styled(TextOverflowEllipsisWrapper).withConfig({
   displayName: "Tag__Wrapper",
   componentId: "sc-rdxtch-0"
-})(["", " ", ""], tagTokens.wrapper.base, function (_ref) {
+})(["display:inline-flex;align-items:center;border:", ";border-radius:", ";padding:", ";", " ", ""], wrapper.border, wrapper.borderRadius, wrapper.padding, getFontStyling(typographyType), function (_ref) {
   var purpose = _ref.purpose;
-  return css(["", ""], tagTokens.wrapper.type[purpose].base);
+  return css(["background-color:", ";border-color:", ";"], wrapper.purpose[purpose].backgroundColor, wrapper.purpose[purpose].borderColor);
 });
-var Inner = styled.span.withConfig({
-  displayName: "Tag__Inner",
-  componentId: "sc-rdxtch-1"
-})(["", ""], tagTokens.inner.base);
 var Tag = /*#__PURE__*/forwardRef(function (props, ref) {
   var text = props.text,
       _props$purpose = props.purpose,
@@ -36,12 +25,10 @@ var Tag = /*#__PURE__*/forwardRef(function (props, ref) {
       rest = __rest(props, ["text", "purpose", "id", "className", "htmlProps"]);
 
   return jsx(Wrapper, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
-    forwardedAs: "span",
-    typographyType: "bodySans01",
     ref: ref,
     purpose: purpose
   }, {
-    children: jsx(Inner, {
+    children: jsx(TextOverflowEllipsisInner, {
       children: text
     })
   }));

package/dist/components/Tag/Tag.tokens.d.ts

@@ -1,26 +1,31 @@
-import { CSSObject } from 'styled-components';
+import { StaticTypographyType } from '../Typography';
+export declare const typographyType: StaticTypographyType;
 export declare const tagTokens: {
     wrapper: {
-        base: CSSObject;
-        type: {
-            success: {
-                base: CSSObject;
+        border: string;
+        borderRadius: string;
+        padding: string;
+        purpose: {
+            default: {
+                backgroundColor: string;
+                borderColor: string;
             };
-            warning: {
-                base: CSSObject;
+            success: {
+                borderColor: string;
+                backgroundColor: string;
             };
             danger: {
-                base: CSSObject;
+                borderColor: string;
+                backgroundColor: string;
             };
-            default: {
-                base: CSSObject;
+            warning: {
+                borderColor: string;
+                backgroundColor: string;
             };
             info: {
-                base: CSSObject;
+                borderColor: string;
+                backgroundColor: string;
             };
         };
     };
-    inner: {
-        base: CSSObject;
-    };
 };

package/dist/components/Tag/Tag.tokens.js

@@ -4,51 +4,24 @@ import { localMessageTokens } from '../LocalMessage/LocalMessage.tokens.js';
 var colors = ddsBaseTokens.colors,
     borderRadius = ddsBaseTokens.borderRadius,
     spacing = ddsBaseTokens.spacing;
-var wrapperBase = {
+var typographyType = 'bodySans01';
+var wrapper = {
   border: '1px solid',
   borderRadius: borderRadius.RadiiDdsBorderRadius1Radius,
   padding: "".concat(spacing.SizesDdsSpacingLocalX0125, " ").concat(spacing.SizesDdsSpacingLocalX025),
-  maxWidth: '100%',
-  display: 'inline-flex',
-  alignItems: 'center'
-};
-var innerBase = {
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis'
-};
-var defaultBase = {
-  backgroundColor: colors.DdsColorNeutralsGray1,
-  borderColor: colors.DdsColorNeutralsGray3
+  purpose: {
+    "default": {
+      backgroundColor: colors.DdsColorNeutralsGray1,
+      borderColor: colors.DdsColorNeutralsGray3
+    },
+    success: localMessageTokens.container.purpose.success,
+    danger: localMessageTokens.container.purpose.danger,
+    warning: localMessageTokens.container.purpose.warning,
+    info: localMessageTokens.container.purpose.info
+  }
 };
-var successBase = Object.assign({}, localMessageTokens.container.success.base);
-var warningBase = Object.assign({}, localMessageTokens.container.warning.base);
-var dangerBase = Object.assign({}, localMessageTokens.container.danger.base);
-var infoBase = Object.assign({}, localMessageTokens.container.info.base);
 var tagTokens = {
-  wrapper: {
-    base: wrapperBase,
-    type: {
-      success: {
-        base: successBase
-      },
-      warning: {
-        base: warningBase
-      },
-      danger: {
-        base: dangerBase
-      },
-      "default": {
-        base: defaultBase
-      },
-      info: {
-        base: infoBase
-      }
-    }
-  },
-  inner: {
-    base: innerBase
-  }
+  wrapper: wrapper
 };
 
-export { tagTokens };
+export { tagTokens, typographyType };

package/dist/components/TextArea/TextArea.js

@@ -4,7 +4,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useId, useRef, useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { StatefulInput, OuterInputContainer } from '../../helpers/Input/Input.styles.js';
-import { inputTokens } from '../../helpers/Input/Input.tokens.js';
+import { inputTypographyTypes } from '../../helpers/Input/Input.tokens.js';
 import { getDefaultText, renderInputMessage } from '../../helpers/Input/Input.utils.js';
 import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
 import '../../hooks/useFloatPosition.js';
@@ -18,13 +18,14 @@ import '../Typography/Typography/Typography.js';
 import { Label } from '../Typography/Label/Label.js';
 import '../Typography/Link/Link.js';
 import { textAreaTokens } from './TextArea.tokens.js';
+import { getFontStyling } from '../Typography/Typography.utils.js';
 
 var defaultWidth = '320px';
 var textarea = textAreaTokens.textarea;
 var StyledTextArea = styled(StatefulInput).withConfig({
   displayName: "TextArea__StyledTextArea",
   componentId: "sc-dg30pn-0"
-})(["", " ", " height:auto;resize:vertical;vertical-align:bottom;padding-bottom:", ";", ""], scrollbarStyling.webkit, scrollbarStyling.firefox, textarea.paddingBottom, inputTokens.input.sizes.medium.font);
+})(["", " ", " height:auto;resize:vertical;vertical-align:bottom;padding-bottom:", ";", ""], scrollbarStyling.webkit, scrollbarStyling.firefox, textarea.paddingBottom, getFontStyling(inputTypographyTypes.medium));
 var TextArea = /*#__PURE__*/forwardRef(function (props, ref) {
   var id = props.id,
       value = props.value,

package/dist/components/TextInput/TextInput.tokens.d.ts

@@ -1,8 +1,5 @@
 export declare const textInputTokens: {
     input: {
-        multiline: {
-            paddingBottom: string;
-        };
         withIcon: {
             medium: {
                 paddingLeft: string;

package/dist/components/TextInput/TextInput.tokens.js

@@ -4,9 +4,6 @@ var colors = ddsBaseTokens.colors,
     spacing = ddsBaseTokens.spacing,
     iconSizes = ddsBaseTokens.iconSizes;
 var input = {
-  multiline: {
-    paddingBottom: spacing.SizesDdsSpacingLocalX05
-  },
   withIcon: {
     medium: {
       paddingLeft: "".concat(spacing.SizesDdsSpacingLocalX075NumberPx + iconSizes.DdsIconsizeMediumNumberPx + spacing.SizesDdsSpacingLocalX05NumberPx, "px")

package/dist/components/ToggleBar/ToggleBar.tokens.d.ts

@@ -1,3 +1,8 @@
+import { StaticTypographyType } from '../Typography';
+import { ToggleBarSize } from './ToggleBar.types';
+export declare const typographyTypes: {
+    [k in ToggleBarSize]: StaticTypographyType;
+};
 export declare const toggleBarTokens: {
     outerContainer: {
         gap: string;
@@ -20,14 +25,6 @@ export declare const toggleBarTokens: {
                 };
                 withText: {
                     padding: string;
-                    font: {
-                        lineHeight: any;
-                        fontSize: string;
-                        letterSpacing: any;
-                        fontFamily: any;
-                        fontWeight: any;
-                        fontStyle: any;
-                    };
                     gap: string;
                 };
             };
@@ -38,14 +35,6 @@ export declare const toggleBarTokens: {
                 };
                 withText: {
                     padding: string;
-                    font: {
-                        lineHeight: any;
-                        fontSize: string;
-                        letterSpacing: any;
-                        fontFamily: any;
-                        fontWeight: any;
-                        fontStyle: any;
-                    };
                     gap: string;
                 };
             };
@@ -56,14 +45,6 @@ export declare const toggleBarTokens: {
                 };
                 withText: {
                     padding: string;
-                    font: {
-                        lineHeight: any;
-                        fontSize: string;
-                        letterSpacing: any;
-                        fontFamily: any;
-                        fontWeight: any;
-                        fontStyle: any;
-                    };
                     gap: string;
                 };
             };
@@ -74,14 +55,6 @@ export declare const toggleBarTokens: {
                 };
                 withText: {
                     padding: string;
-                    font: {
-                        lineHeight: any;
-                        fontSize: string;
-                        letterSpacing: any;
-                        fontFamily: any;
-                        fontWeight: any;
-                        fontStyle: any;
-                    };
                     gap: string;
                 };
             };

package/dist/components/ToggleBar/ToggleBar.tokens.js

@@ -7,6 +7,12 @@ var colors = ddsBaseTokens.colors,
     border = ddsBaseTokens.border,
     borderRadius = ddsBaseTokens.borderRadius,
     fontPackages = ddsBaseTokens.fontPackages;
+var typographyTypes = {
+  large: 'bodySans04',
+  medium: 'bodySans02',
+  small: 'bodySans01',
+  tiny: 'supportingStyleTiny01'
+};
 var iconSizeTiny = "".concat(calculateHeightWithLineHeight(fontPackages.supportingStyle_tiny_01.numbers.lineHeightNumber, fontPackages.supportingStyle_tiny_01.numbers.fontSizeNumber), "px");
 var iconSizeSmall = "".concat(calculateHeightWithLineHeight(fontPackages.body_sans_01.numbers.lineHeightNumber, fontPackages.body_sans_01.numbers.fontSizeNumber), "px");
 var iconSizeMedium = "".concat(calculateHeightWithLineHeight(fontPackages.body_sans_02.numbers.lineHeightNumber, fontPackages.body_sans_02.numbers.fontSizeNumber), "px");
@@ -53,7 +59,6 @@ var content = {
       },
       withText: {
         padding: "".concat(spacing.SizesDdsSpacingLocalX025, " ").concat(spacing.SizesDdsSpacingLocalX075),
-        font: fontPackages.supportingStyle_tiny_01.base,
         gap: spacing.SizesDdsSpacingLocalX05
       }
     },
@@ -64,7 +69,6 @@ var content = {
       },
       withText: {
         padding: "".concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX1),
-        font: fontPackages.body_sans_01.base,
         gap: spacing.SizesDdsSpacingLocalX05
       }
     },
@@ -75,7 +79,6 @@ var content = {
       },
       withText: {
         padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX15),
-        font: fontPackages.body_sans_02.base,
         gap: spacing.SizesDdsSpacingLocalX05
       }
     },
@@ -86,7 +89,6 @@ var content = {
       },
       withText: {
         padding: "".concat(spacing.SizesDdsSpacingLocalX1, " ").concat(spacing.SizesDdsSpacingLocalX2),
-        font: fontPackages.body_sans_04.base,
         gap: spacing.SizesDdsSpacingLocalX1
       }
     }
@@ -98,4 +100,4 @@ var toggleBarTokens = {
   label: label
 };
 
-export { toggleBarTokens };
+export { toggleBarTokens, typographyTypes };

package/dist/components/ToggleBar/ToggleRadio.styles.js

@@ -1,4 +1,4 @@
-import { toggleBarTokens } from './ToggleBar.tokens.js';
+import { toggleBarTokens, typographyTypes } from './ToggleBar.tokens.js';
 import styled, { css } from 'styled-components';
 import { focusVisibleTransitionValue, focusVisible } from '../../helpers/styling/focusVisible.js';
 import '../../helpers/styling/hover.js';
@@ -14,6 +14,7 @@ import '../../helpers/Input/Input.tokens.js';
 import '../InputMessage/InputMessage.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
+import { getFontStyling } from '../Typography/Typography.utils.js';
 
 var content = toggleBarTokens.content,
     label = toggleBarTokens.label;
@@ -23,7 +24,7 @@ var Content = styled.span.withConfig({
 })(["display:flex;justify-content:center;align-items:center;word-break:break-word;height:100%;box-sizing:border-box;cursor:pointer;@media (prefers-reduced-motion:no-preference){transition:border-color 0.2s,background-color 0.2s,box-shadow 0.2s,color 0.2s,", ";}background-color:", ";", ""], focusVisibleTransitionValue, content.base.backgroundColor, function (_ref) {
   var size = _ref.size,
       justIcon = _ref.justIcon;
-  return css(["", ""], justIcon ? css(["font-size:", ";padding:", ";"], content.size[size].justIcon.fontSize, content.size[size].justIcon.padding) : css(["gap:", ";padding:", ";", ""], content.size[size].withText.gap, content.size[size].withText.padding, content.size[size].withText.font));
+  return css(["", ""], justIcon ? css(["font-size:", ";padding:", ";"], content.size[size].justIcon.fontSize, content.size[size].justIcon.padding) : css(["gap:", ";padding:", ";", ""], content.size[size].withText.gap, content.size[size].withText.padding, getFontStyling(typographyTypes[size])));
 });
 var Label = styled.label.withConfig({
   displayName: "ToggleRadiostyles__Label",