@norges-domstoler/dds-components 9.2.0-beta.0 → 9.2.0

package/dist/components/ToggleButton/ToggleButton.js

@@ -1,15 +1,14 @@
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useId } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { Icon } from '../Icon/Icon.js';
-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';
 import { selection } from '../../helpers/styling/selection.js';
-import { buttonTokens } from '../Button/Button.tokens.js';
-import { toggleButtonTokens } from './ToggleButton.tokens.js';
+import { toggleButtonTokens, typographyType } from './ToggleButton.tokens.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import '../../helpers/Backdrop/Backdrop.js';
 import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
@@ -19,15 +18,20 @@ 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 toggleButton = toggleButtonTokens.toggleButton;
 var Content = styled.span.withConfig({
   displayName: "ToggleButton__Content",
   componentId: "sc-ya01sa-0"
-})(["display:flex;align-items:center;width:100%;height:100%;box-sizing:border-box;@media (prefers-reduced-motion:no-preference){transition:border-color 0.2s,background-color 0.2s,box-shadow 0.2s;}", ";cursor:pointer;", " width:fit-content;", " ", " ", " &::selection,*::selection{", "}&:hover{", "}"], focusVisibleTransitionValue, buttonTokens.base, buttonTokens.appearance.rounded.base, buttonTokens.sizes.small.text.base, toggleButtonTokens.base, selection, toggleButtonTokens.hover.base);
+})(["display:flex;align-items:center;width:100%;height:100%;box-sizing:border-box;cursor:pointer;width:fit-content;border:", ";background-color:", ";color:", ";border-radius:", ";padding:", ";", " @media (prefers-reduced-motion:no-preference){transition:border-color 0.2s,background-color 0.2s,box-shadow 0.2s,", ";}", " &::selection,*::selection{", "}&:hover{background-color:", ";box-shadow:", ";border-color:", ";}"], toggleButton.border, toggleButton.backgroundColor, toggleButton.color, toggleButton.borderRadius, toggleButton.padding, getFontStyling(typographyType), focusVisibleTransitionValue, function (_ref) {
+  var hasIcon = _ref.hasIcon;
+  return hasIcon && css(["gap:", ";"], toggleButton.gap);
+}, selection, toggleButton.hover.backgroundColor, toggleButton.hover.boxShadow, toggleButton.hover.borderColor);
 var Container = styled.label.withConfig({
   displayName: "ToggleButton__Container",
   componentId: "sc-ya01sa-1"
-})(["width:fit-content;", ":checked + ", "{", "}", ":checked + ", ":hover{", "}", ":focus-visible + ", "{", "}"], HiddenInput, Content, toggleButtonTokens.checked.base, HiddenInput, Content, toggleButtonTokens.checked.hover.base, HiddenInput, Content, toggleButtonTokens.focus.base);
+})(["width:fit-content;", ":checked + ", "{background-color:", ";border-color:", ";color:", ";}", ":checked + ", ":hover{background-color:", ";border-color:", ";box-shadow:", ";}", ":focus-visible + ", "{", "}"], HiddenInput, Content, toggleButton.checked.backgroundColor, toggleButton.checked.borderColor, toggleButton.checked.color, HiddenInput, Content, toggleButton.checked.hover.backgroundColor, toggleButton.checked.hover.borderColor, toggleButton.checked.hover.boxShadow, HiddenInput, Content, focusVisible);
 var ToggleButton = /*#__PURE__*/forwardRef(function (_a, ref) {
   var id = _a.id,
       label = _a.label,
@@ -46,12 +50,14 @@ var ToggleButton = /*#__PURE__*/forwardRef(function (_a, ref) {
     htmlFor: uniqueId
   };
   return jsxs(Container, Object.assign({}, containerProps, {
-    children: [jsx(HiddenInput, Object.assign({}, inputProps)), jsxs(Content, {
+    children: [jsx(HiddenInput, Object.assign({}, inputProps)), jsxs(Content, Object.assign({
+      hasIcon: !!icon
+    }, {
       children: [icon && jsx(Icon, {
         icon: icon,
         iconSize: "inherit"
       }), " ", label]
-    })]
+    }))]
   }));
 });
 

package/dist/components/ToggleButton/ToggleButton.stories.d.ts

@@ -1,11 +1,11 @@
 import { ToggleButtonProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onBlur" | "name" | "value" | "defaultChecked" | "defaultValue" | "aria-describedby" | "onChange" | "checked">, "id" | "className"> & {
         label?: string | undefined;
         icon?: import("../../icons/utils").SvgIcon | undefined;
     } & import("../../types").CheckboxPickedHTMLAttributes & {
-        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked"> | undefined;
+        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onBlur" | "name" | "value" | "defaultChecked" | "defaultValue" | "aria-describedby" | "onChange" | "checked"> | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {

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

@@ -1,22 +1,32 @@
-import { CSSObject } from 'styled-components';
+export declare const typographyType: import("../Typography").StaticTypographyType;
 export declare const toggleButtonTokens: {
-    base: CSSObject;
-    hover: {
-        base: CSSObject;
-    };
-    focus: {
-        base: CSSObject;
-    };
-    checked: {
-        base: CSSObject;
+    toggleButton: {
+        border: string;
+        backgroundColor: string;
+        color: string;
+        gap: string;
+        borderRadius: string;
+        padding: string;
         hover: {
-            base: CSSObject;
+            backgroundColor: string;
+            boxShadow: string;
+            borderColor: string;
+        };
+        checked: {
+            color: string;
+            hover: {
+                backgroundColor: string;
+                boxShadow: string;
+                borderColor: string;
+            };
+            borderColor: string;
+            backgroundColor: string;
         };
     };
     group: {
-        base: CSSObject;
+        gap: string;
     };
     container: {
-        base: CSSObject;
+        gap: string;
     };
 };

package/dist/components/ToggleButton/ToggleButton.tokens.js

@@ -1,59 +1,36 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-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';
 import '../../helpers/SelectionControl/SelectionControl.styles.js';
 import { selectionControlTokens } from '../../helpers/SelectionControl/SelectionControl.tokens.js';
+import { buttonTokens, typographyTypes } from '../Button/Button.tokens.js';
 
-var Colors = ddsBaseTokens.colors,
-    Spacing = ddsBaseTokens.spacing;
-var base = {
-  backgroundColor: Colors.DdsColorNeutralsWhite,
-  color: Colors.DdsColorNeutralsGray7,
-  gap: Spacing.SizesDdsSpacingLocalX05,
-  boxShadow: 'none'
+var colors = ddsBaseTokens.colors,
+    spacing = ddsBaseTokens.spacing;
+var button = buttonTokens.button;
+var selectionControl = selectionControlTokens.selectionControl;
+var typographyType = typographyTypes.small;
+var toggleButton = {
+  border: button.base.border,
+  backgroundColor: colors.DdsColorNeutralsWhite,
+  color: colors.DdsColorNeutralsGray7,
+  gap: spacing.SizesDdsSpacingLocalX05,
+  borderRadius: button.appearances.rounded.base.borderRadius,
+  padding: button.sizes.small.text.padding,
+  hover: selectionControl.hover.base,
+  checked: Object.assign(Object.assign({}, selectionControl.checked.base), {
+    color: colors.DdsColorNeutralsWhite,
+    hover: selectionControl.checked.hover
+  })
 };
-var hoverBase = Object.assign({}, selectionControlTokens.selectionControl.hover.base);
-var checkedBase = Object.assign(Object.assign({}, selectionControlTokens.selectionControl.checked.base), {
-  color: Colors.DdsColorNeutralsWhite
-});
-var checkedHoverBase = Object.assign(Object.assign({}, selectionControlTokens.selectionControl.checked.hover), {
-  color: Colors.DdsColorNeutralsWhite
-});
-var focusBase = Object.assign({}, focusVisible);
-var groupBase = {
-  display: 'flex',
-  gap: Spacing.SizesDdsSpacingLocalX075,
-  flexWrap: 'wrap'
+var group = {
+  gap: spacing.SizesDdsSpacingLocalX075
 };
-var containerBase = {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: Spacing.SizesDdsSpacingLocalX05
+var container = {
+  gap: spacing.SizesDdsSpacingLocalX05
 };
 var toggleButtonTokens = {
-  base: base,
-  hover: {
-    base: hoverBase
-  },
-  focus: {
-    base: focusBase
-  },
-  checked: {
-    base: checkedBase,
-    hover: {
-      base: checkedHoverBase
-    }
-  },
-  group: {
-    base: groupBase
-  },
-  container: {
-    base: containerBase
-  }
+  toggleButton: toggleButton,
+  group: group,
+  container: container
 };
 
-export { toggleButtonTokens };
+export { toggleButtonTokens, typographyType };

package/dist/components/ToggleButton/ToggleButtonGroup.js

@@ -18,14 +18,14 @@ import { toggleButtonTokens } from './ToggleButton.tokens.js';
 var Group = styled.div.withConfig({
   displayName: "ToggleButtonGroup__Group",
   componentId: "sc-14ijdag-0"
-})(["", " ", ""], toggleButtonTokens.group.base, function (_ref) {
+})(["gap:", ";display:flex;flex-wrap:wrap;", ""], toggleButtonTokens.group.gap, function (_ref) {
   var direction = _ref.direction;
   return css(["flex-direction:", ";"], direction);
 });
 var Container = styled.div.withConfig({
   displayName: "ToggleButtonGroup__Container",
   componentId: "sc-14ijdag-1"
-})(["", ""], toggleButtonTokens.container.base);
+})(["display:flex;flex-direction:column;gap:", ";"], toggleButtonTokens.container.gap);
 var ToggleButtonGroup = function ToggleButtonGroup(props) {
   var children = props.children,
       _props$direction = props.direction,

package/dist/components/Tooltip/Tooltip.js

@@ -12,6 +12,7 @@ import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { Container, TooltipWrapper, ArrowWrapper, SvgArrow } from './Tooltip.styles.js';
 import { tooltipTokens } from './Tooltip.tokens.js';
 
+var svgArrow = tooltipTokens.svgArrow;
 var Tooltip = /*#__PURE__*/forwardRef(function (props, ref) {
   var text = props.text,
       _props$placement = props.placement,
@@ -99,14 +100,17 @@ var Tooltip = /*#__PURE__*/forwardRef(function (props, ref) {
   };
   return jsxs(Container, Object.assign({}, containerProps, {
     children: [anchorElement, jsxs(TooltipWrapper, Object.assign({}, wrapperProps, {
+      elevation: 1,
+      border: "light"
+    }, {
       children: [text, jsx(ArrowWrapper, Object.assign({}, arrowWrapperProps, {
         children: jsxs(SvgArrow, {
           children: [jsx("path", {
             d: "M16.5858 6.58579L10.8787 0.87868C10.3161 0.316071 9.55301 0 8.75736 0H27.2426C26.447 0 25.6839 0.31607 25.1213 0.878679L19.4142 6.58579C18.6332 7.36684 17.3668 7.36684 16.5858 6.58579Z",
-            fill: tooltipTokens.svgArrow.background.fill
+            fill: svgArrow.background.fill
           }), jsx("path", {
             d: "M8 0C7.72386 0 7.5 0.223858 7.5 0.5C7.5 0.776142 7.72386 1 8 1V0ZM11.1716 1.67157L10.818 2.02513L10.818 2.02513L11.1716 1.67157ZM19.4142 7.08579L19.0607 6.73223L19.0607 6.73223L19.4142 7.08579ZM24.8284 1.67157L25.182 2.02513L25.182 2.02512L24.8284 1.67157ZM28 1C28.2761 1 28.5 0.776142 28.5 0.5C28.5 0.223858 28.2761 0 28 0V1ZM8 1H8.34315V0H8V1ZM10.818 2.02513L16.2322 7.43934L16.9393 6.73223L11.5251 1.31802L10.818 2.02513ZM19.7678 7.43934L25.182 2.02513L24.4749 1.31802L19.0607 6.73223L19.7678 7.43934ZM27.6569 1H28V0H27.6569V1ZM25.182 2.02512C25.8384 1.36875 26.7286 1 27.6569 1V0C26.4634 0 25.3188 0.474104 24.4749 1.31802L25.182 2.02512ZM16.2322 7.43934C17.2085 8.41565 18.7915 8.41565 19.7678 7.43934L19.0607 6.73223C18.4749 7.31802 17.5251 7.31802 16.9393 6.73223L16.2322 7.43934ZM8.34315 1C9.2714 1 10.1616 1.36875 10.818 2.02513L11.5251 1.31802C10.6812 0.474106 9.53662 0 8.34315 0V1Z",
-            fill: tooltipTokens.svgArrow.border.fill
+            fill: svgArrow.border.fill
           })]
         })
       }))]

package/dist/components/Tooltip/Tooltip.stories.d.ts

@@ -1,7 +1,7 @@
 import { TooltipProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "style" | "onMouseLeave" | "onMouseOver">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "style" | "children" | "onMouseLeave" | "onMouseOver">, "id" | "className"> & {
         text: string;
         placement?: import("../..").Placement | undefined;
         children: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> & import("react").RefAttributes<HTMLElement>;
@@ -12,7 +12,7 @@ declare const _default: {
         onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
         onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
     } & {
-        htmlProps?: Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "style" | "onMouseLeave" | "onMouseOver"> | undefined;
+        htmlProps?: Omit<import("react").HTMLAttributes<HTMLDivElement>, "style" | "children" | "onMouseLeave" | "onMouseOver"> | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
     argTypes: {
         text: {

package/dist/components/Tooltip/Tooltip.styles.d.ts

@@ -4,5 +4,8 @@ export declare const Container: import("styled-components").StyledComponent<"div
 declare type WrapperProps = {
     open: boolean;
 };
-export declare const TooltipWrapper: import("styled-components").StyledComponent<"div", any, WrapperProps, never>;
+export declare const TooltipWrapper: import("styled-components").StyledComponent<"div", any, {
+    elevation?: (1 | 2 | 3 | 4) | undefined;
+    border?: ("light" | "dark") | undefined;
+} & WrapperProps, never>;
 export {};

package/dist/components/Tooltip/Tooltip.styles.js

@@ -1,12 +1,23 @@
 import styled from 'styled-components';
+import '../../helpers/Backdrop/Backdrop.js';
+import 'react/jsx-runtime';
+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 { Paper } from '../../helpers/Paper/Paper.js';
+import '../../helpers/RequiredMarker/RequiredMarker.js';
 import { visibilityTransition } from '../../helpers/styling/visibilityTransition.js';
 import '../../helpers/styling/focusVisible.js';
 import '../../helpers/styling/hover.js';
 import '../../helpers/styling/focus.js';
 import '../../helpers/styling/danger.js';
-import { selection } from '../../helpers/styling/selection.js';
+import '../../helpers/styling/selection.js';
+import { getFontStyling, defaultTypographyType } from '../Typography/Typography.utils.js';
 import { tooltipTokens } from './Tooltip.tokens.js';
 
+var wrapper = tooltipTokens.wrapper;
 var SvgArrow = styled.svg.withConfig({
   displayName: "Tooltipstyles__SvgArrow",
   componentId: "sc-1cna5tc-0"
@@ -19,12 +30,12 @@ var Container = styled.div.withConfig({
   displayName: "Tooltipstyles__Container",
   componentId: "sc-1cna5tc-2"
 })(["width:fit-content;"]);
-var TooltipWrapper = styled.div.withConfig({
+var TooltipWrapper = styled(Paper).withConfig({
   displayName: "Tooltipstyles__TooltipWrapper",
   componentId: "sc-1cna5tc-3"
-})(["&::selection{", "}", " width:fit-content;position:absolute;z-index:20;text-align:center;", ""], selection, function (_ref) {
+})(["", " width:fit-content;position:absolute;z-index:20;text-align:center;padding:", ";", ";"], function (_ref) {
   var open = _ref.open;
   return visibilityTransition(open);
-}, tooltipTokens.wrapper.base);
+}, wrapper.padding, getFontStyling(defaultTypographyType));
 
 export { ArrowWrapper, Container, SvgArrow, TooltipWrapper };

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

@@ -1,7 +1,6 @@
-import { CSSObject } from 'styled-components';
 export declare const tooltipTokens: {
     wrapper: {
-        base: CSSObject;
+        padding: string;
     };
     svgArrow: {
         border: {

package/dist/components/Tooltip/Tooltip.tokens.js

@@ -1,31 +1,21 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
-var Border = ddsBaseTokens.border,
-    Colors = ddsBaseTokens.colors,
-    FontPackages = ddsBaseTokens.fontPackages,
-    Spacing = ddsBaseTokens.spacing,
-    OuterShadow = ddsBaseTokens.outerShadow,
-    BorderRadius = ddsBaseTokens.borderRadius;
-var wrapperBase = Object.assign(Object.assign({
-  border: "".concat(Border.BordersDdsBorderStyleLightStroke, " solid ").concat(Border.BordersDdsBorderFocusBaseStrokeWeight),
-  backgroundColor: Colors.DdsColorNeutralsWhite
-}, FontPackages.body_sans_02.base), {
-  padding: "".concat(Spacing.SizesDdsSpacingLocalX075),
-  boxShadow: OuterShadow.DdsShadow1Onlight,
-  borderRadius: BorderRadius.RadiiDdsBorderRadius1Radius
-});
-var tooltipTokens = {
-  wrapper: {
-    base: wrapperBase
+var colors = ddsBaseTokens.colors,
+    spacing = ddsBaseTokens.spacing;
+var wrapper = {
+  padding: "".concat(spacing.SizesDdsSpacingLocalX075)
+};
+var svgArrow = {
+  border: {
+    fill: colors.DdsColorPrimaryLighter
   },
-  svgArrow: {
-    border: {
-      fill: Colors.DdsColorPrimaryLighter
-    },
-    background: {
-      fill: Colors.DdsColorNeutralsWhite
-    }
+  background: {
+    fill: colors.DdsColorNeutralsWhite
   }
 };
+var tooltipTokens = {
+  wrapper: wrapper,
+  svgArrow: svgArrow
+};
 
 export { tooltipTokens };

package/dist/components/Typography/Typography.utils.d.ts

@@ -1,5 +1,199 @@
 import { ElementType } from 'react';
-import { TypographyType, TypographyHeadingType, InlineElement, TypographyInteractionStyling, StaticTypographyType } from './Typography/Typography.types';
+import { TypographyType, TypographyHeadingType, InlineElement, TypographyInteractionStyling, StaticTypographyType, TypographyBodyType } from './Typography/Typography.types';
+export declare const defaultTypographyType: TypographyBodyType;
+export declare const getFontStyling: (type: StaticTypographyType, withColor?: boolean) => {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+} | {
+    lineHeight: any;
+    fontSize: string;
+    letterSpacing: any;
+    fontFamily: any;
+    fontWeight: any;
+    fontStyle: any;
+    color: string | undefined;
+};
 export declare const getElementType: (element: string) => ElementType;
 export declare const isHeading: (type: TypographyType) => type is TypographyHeadingType;
 export declare const inlineElements: ElementType[];

package/dist/components/Typography/Typography.utils.js

@@ -6,6 +6,12 @@ import '../../helpers/styling/focus.js';
 import '../../helpers/styling/danger.js';
 import '../../helpers/styling/selection.js';
 
+var defaultTypographyType = 'bodySans02';
+var getFontStyling = function getFontStyling(type, withColor) {
+  return Object.assign({
+    color: withColor ? typographyTokens.typographyType[type].base.color : undefined
+  }, typographyTokens.typographyType[type].base.font);
+};
 var getElementType = function getElementType(element) {
   switch (element) {
     case 'a':
@@ -67,4 +73,4 @@ var getAnchorStyling = function getAnchorStyling(external, interactionStyling, t
   return css(["", " color:", ";width:fit-content;text-decoration:underline;@media (prefers-reduced-motion:no-preference){transition:", ";}", " &:hover{color:", ";", "}", " &:focus-visible,&.focus-visible,&:focus-visible::selection,&.focus-visible::selection{", "}"], typographyType ? css(["", ";", ""], typographyTokens.typographyType[typographyType].base.font, getMarginStyling(typographyType, 'a', withMargins)) : css(["font:inherit;", ""], getMarginStyling('a', 'a', withMargins)), typographyTokens.typographyType.a.base.color, focusVisibleLinkTransitionValue, external && css(["display:inline-flex;align-items:center;gap:", ";"], typographyTokens.typographyType.a.base.gap), typographyTokens.typographyType.a.hover.color, interactionStyling && interactionStyling.hover && css(["", ""], interactionStyling.hover), interactionStyling && interactionStyling.active && css(["&:active{", "}"], interactionStyling.active), focusVisibleLink);
 };
 
-export { getAdditionalFontStyle, getAnchorStyling, getElementType, getMarginStyling, inlineElements, isInlineElement };
+export { defaultTypographyType, getAdditionalFontStyle, getAnchorStyling, getElementType, getFontStyling, getMarginStyling, inlineElements, isInlineElement };

package/dist/helpers/Input/Input.styles.js

@@ -1,10 +1,11 @@
 import styled, { css } from 'styled-components';
-import { inputTokens } from './Input.tokens.js';
+import { inputTokens, inputTypographyTypes } from './Input.tokens.js';
 import '../styling/focusVisible.js';
 import { hoverInputfield, hoverDangerInputfield } from '../styling/hover.js';
 import { focusInputfield, focusDangerInputfield } from '../styling/focus.js';
 import { dangerInputfield } from '../styling/danger.js';
 import { selection } from '../styling/selection.js';
+import { getFontStyling } from '../../components/Typography/Typography.utils.js';
 
 var input = inputTokens.input,
     container = inputTokens.container;
@@ -17,7 +18,7 @@ var StatefulInput = styled(Input).withConfig({
   componentId: "sc-1oz9x8w-1"
 })(["-webkit-appearance:textfield;", " ", " &:enabled:read-only{border:none;outline:none;cursor:default;background-color:", ";padding-left:0;}&:disabled{cursor:not-allowed;color:", ";background-color:", ";}"], function (_ref) {
   var componentSize = _ref.componentSize;
-  return componentSize && css(["padding:", ";", ""], input.sizes[componentSize].padding, input.sizes[componentSize].font);
+  return componentSize && css(["padding:", ";", ""], input.sizes[componentSize].padding, getFontStyling(inputTypographyTypes[componentSize]));
 }, function (_ref2) {
   var hasErrorMessage = _ref2.hasErrorMessage;
   return hasErrorMessage && css(["", " &:hover:enabled:read-write{", "}&:focus:enabled:read-write,&:active:enabled:read-write{", "}"], dangerInputfield, hoverDangerInputfield, focusDangerInputfield);