@norges-domstoler/dds-components 5.5.0 → 7.0.0

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

@@ -6,7 +6,7 @@ export declare type ParagraphProps = BaseComponentPropsWithChildren<HTMLParagrap
 } & BaseTypographyProps>;
 export declare const Paragraph: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLParagraphElement>, "id" | "className"> & {
     /**Spesifiserer typografistil basert på utvalget for brødtekst og ingress.  */
-    typographyType?: TypographyBodyType | TypographyLeadType | undefined;
+    typographyType?: ("bodySans01" | "bodySans02" | "bodySans03" | "bodySans04") | TypographyLeadType | undefined;
 } & {
     withMargins?: boolean | undefined;
 } & {

package/dist/components/Typography/Paragraph/Paragraph.stories.d.ts

@@ -5,7 +5,7 @@ declare type StoryTProps = {
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLParagraphElement>, "id" | "className"> & {
-        typographyType?: import("..").TypographyBodyType | import("..").TypographyLeadType | undefined;
+        typographyType?: ("bodySans01" | "bodySans02" | "bodySans03" | "bodySans04") | import("..").TypographyLeadType | undefined;
     } & {
         withMargins?: boolean | undefined;
     } & {

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

@@ -1,11 +1,10 @@
 import { CSSProperties, ElementType, HTMLAttributes, PropsWithChildren } from 'react';
 import { TextColor } from '../../../utils';
 declare type TypographyBodySansType = 'bodySans01' | 'bodySans02' | 'bodySans03' | 'bodySans04';
-declare type TypographyBodySerifType = 'bodySerif01' | 'bodySerif02' | 'bodySerif03' | 'bodySerif04';
-export declare type TypographyBodyType = TypographyBodySansType | TypographyBodySerifType;
+export declare type TypographyBodyType = TypographyBodySansType;
 export declare type TypographyHeadingType = 'headingSans01' | 'headingSans02' | 'headingSans03' | 'headingSans04' | 'headingSans05' | 'headingSans06' | 'headingSans07' | 'headingSans08';
 export declare type TypographyLeadType = 'leadSans01' | 'leadSans02' | 'leadSans03' | 'leadSans04' | 'leadSans05';
-declare type TypographySupportingType = 'supportingStyleInputText01' | 'supportingStyleInputText02' | 'supportingStyleInputText03' | 'supportingStyleHelperText01' | 'supportingStylePlaceholderText01' | 'supportingStyleTiny01' | 'supportingStyleTiny02';
+declare type TypographySupportingType = 'supportingStyleHelperText01' | 'supportingStylePlaceholderText01' | 'supportingStylePlaceholderText02' | 'supportingStylePlaceholderText03' | 'supportingStyleTiny01' | 'supportingStyleTiny02';
 export declare type AnchorTypographyType = 'a';
 export declare type LabelTypographyType = 'supportingStyleLabel01';
 export declare type OtherTypographyType = TypographyHeadingType | TypographyBodyType | TypographyLeadType | TypographySupportingType;

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

@@ -225,74 +225,6 @@ export declare const typographyTokens: {
                 marginBottom: string;
             };
         };
-        bodySerif01: {
-            base: {
-                color: string;
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
-            };
-            margins: {
-                marginTop: number;
-                marginBottom: string;
-            };
-        };
-        bodySerif02: {
-            base: {
-                color: string;
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
-            };
-            margins: {
-                marginTop: number;
-                marginBottom: string;
-            };
-        };
-        bodySerif03: {
-            base: {
-                color: string;
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
-            };
-            margins: {
-                marginTop: number;
-                marginBottom: string;
-            };
-        };
-        bodySerif04: {
-            base: {
-                color: string;
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
-            };
-            margins: {
-                marginTop: number;
-                marginBottom: string;
-            };
-        };
         leadSans01: {
             base: {
                 color: string;
@@ -414,25 +346,7 @@ export declare const typographyTokens: {
                 marginBottom: string;
             };
         };
-        supportingStyleInputText01: {
-            base: {
-                color: string;
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
-                margin: number;
-            };
-            margins: {
-                marginTop: string;
-                marginBottom: string;
-            };
-        };
-        supportingStyleInputText02: {
+        supportingStylePlaceholderText01: {
             base: {
                 color: string;
                 font: {
@@ -450,7 +364,7 @@ export declare const typographyTokens: {
                 marginBottom: string;
             };
         };
-        supportingStyleInputText03: {
+        supportingStylePlaceholderText02: {
             base: {
                 color: string;
                 font: {
@@ -468,7 +382,7 @@ export declare const typographyTokens: {
                 marginBottom: string;
             };
         };
-        supportingStylePlaceholderText01: {
+        supportingStylePlaceholderText03: {
             base: {
                 color: string;
                 font: {

package/dist/components/Typography/Typography.tokens.js

@@ -148,46 +148,6 @@ var bodySans04 = {
     marginBottom: fontPackages.body_sans_04.paragraph.paragraphSpacing
   }
 };
-var bodySerif01 = {
-  base: {
-    color: textDefault.textColor,
-    font: fontPackages.body_serif_01.base
-  },
-  margins: {
-    marginTop: 0,
-    marginBottom: fontPackages.body_serif_01.paragraph.paragraphSpacing
-  }
-};
-var bodySerif02 = {
-  base: {
-    color: textDefault.textColor,
-    font: fontPackages.body_serif_02.base
-  },
-  margins: {
-    marginTop: 0,
-    marginBottom: fontPackages.body_serif_02.paragraph.paragraphSpacing
-  }
-};
-var bodySerif03 = {
-  base: {
-    color: textDefault.textColor,
-    font: fontPackages.body_serif_03.base
-  },
-  margins: {
-    marginTop: 0,
-    marginBottom: fontPackages.body_serif_03.paragraph.paragraphSpacing
-  }
-};
-var bodySerif04 = {
-  base: {
-    color: textDefault.textColor,
-    font: fontPackages.body_serif_04.base
-  },
-  margins: {
-    marginTop: 0,
-    marginBottom: fontPackages.body_serif_04.paragraph.paragraphSpacing
-  }
-};
 var leadSans01 = {
   base: {
     color: textDefault.textColor,
@@ -260,48 +220,37 @@ var supportingStyleHelperText01 = {
     marginBottom: fontPackages.supportingStyle_helpertext_01.paragraph.paragraphSpacing
   }
 };
-var supportingStyleInputText01 = {
-  base: {
-    color: textDefault.textColor,
-    font: fontPackages.supportingStyle_inputtext_01.base,
-    margin: 0
-  },
-  margins: {
-    marginTop: fontPackages.supportingStyle_inputtext_01.paragraph.paragraphSpacing,
-    marginBottom: fontPackages.supportingStyle_inputtext_01.paragraph.paragraphSpacing
-  }
-};
-var supportingStyleInputText02 = {
+var supportingStylePlaceholderText01 = {
   base: {
-    color: textDefault.textColor,
-    font: fontPackages.supportingStyle_inputtext_02.base,
+    color: colors.DdsColorNeutralsGray6,
+    font: fontPackages.supportingStyle_placeholdertext_01.base,
     margin: 0
   },
   margins: {
-    marginTop: fontPackages.supportingStyle_inputtext_02.paragraph.paragraphSpacing,
-    marginBottom: fontPackages.supportingStyle_inputtext_02.paragraph.paragraphSpacing
+    marginTop: fontPackages.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing,
+    marginBottom: fontPackages.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing
   }
 };
-var supportingStyleInputText03 = {
+var supportingStylePlaceholderText02 = {
   base: {
-    color: textDefault.textColor,
-    font: fontPackages.supportingStyle_inputtext_03.base,
+    color: colors.DdsColorNeutralsGray6,
+    font: fontPackages.supportingStyle_placeholdertext_02.base,
     margin: 0
   },
   margins: {
-    marginTop: fontPackages.supportingStyle_inputtext_03.paragraph.paragraphSpacing,
-    marginBottom: fontPackages.supportingStyle_inputtext_03.paragraph.paragraphSpacing
+    marginTop: fontPackages.supportingStyle_placeholdertext_02.paragraph.paragraphSpacing,
+    marginBottom: fontPackages.supportingStyle_placeholdertext_02.paragraph.paragraphSpacing
   }
 };
-var supportingStylePlaceholderText01 = {
+var supportingStylePlaceholderText03 = {
   base: {
     color: colors.DdsColorNeutralsGray6,
-    font: fontPackages.supportingStyle_placeholdertext_01.base,
+    font: fontPackages.supportingStyle_placeholdertext_03.base,
     margin: 0
   },
   margins: {
-    marginTop: fontPackages.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing,
-    marginBottom: fontPackages.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing
+    marginTop: fontPackages.supportingStyle_placeholdertext_03.paragraph.paragraphSpacing,
+    marginBottom: fontPackages.supportingStyle_placeholdertext_03.paragraph.paragraphSpacing
   }
 };
 var supportingStyleTiny01 = {
@@ -341,10 +290,6 @@ var typographyTokens = {
     bodySans02: bodySans02,
     bodySans03: bodySans03,
     bodySans04: bodySans04,
-    bodySerif01: bodySerif01,
-    bodySerif02: bodySerif02,
-    bodySerif03: bodySerif03,
-    bodySerif04: bodySerif04,
     leadSans01: leadSans01,
     leadSans02: leadSans02,
     leadSans03: leadSans03,
@@ -352,10 +297,9 @@ var typographyTokens = {
     leadSans05: leadSans05,
     supportingStyleLabel01: supportingStyleLabel01,
     supportingStyleHelperText01: supportingStyleHelperText01,
-    supportingStyleInputText01: supportingStyleInputText01,
-    supportingStyleInputText02: supportingStyleInputText02,
-    supportingStyleInputText03: supportingStyleInputText03,
     supportingStylePlaceholderText01: supportingStylePlaceholderText01,
+    supportingStylePlaceholderText02: supportingStylePlaceholderText02,
+    supportingStylePlaceholderText03: supportingStylePlaceholderText03,
     supportingStyleTiny01: supportingStyleTiny01,
     supportingStyleTiny02: supportingStyleTiny02
   },

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

@@ -38,20 +38,15 @@ var getElementType = function getElementType(element) {
     case 'bodySans02':
     case 'bodySans03':
     case 'bodySans04':
-    case 'bodySerif01':
-    case 'bodySerif02':
-    case 'bodySerif03':
-    case 'bodySerif04':
     case 'leadSans01':
     case 'leadSans02':
     case 'leadSans03':
     case 'leadSans04':
     case 'leadSans05':
-    case 'supportingStyleInputText01':
-    case 'supportingStyleInputText02':
-    case 'supportingStyleInputText03':
     case 'supportingStyleHelperText01':
     case 'supportingStylePlaceholderText01':
+    case 'supportingStylePlaceholderText02':
+    case 'supportingStylePlaceholderText03':
     case 'supportingStyleTiny01':
     case 'supportingStyleTiny02':
     default:

package/dist/helpers/Input/Input.styles.d.ts

@@ -1,14 +1,12 @@
-import { StyledLabelProps } from '.';
 import { Property } from 'csstype';
 export declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;
-export declare const StatefulInput: import("styled-components").StyledComponent<"input", any, Pick<import("./Input.types").InputProps, "disabled" | "readOnly"> & {
+export declare const StatefulInput: import("styled-components").StyledComponent<"input", any, Pick<import("./Input.types").InputProps, "disabled" | "readOnly" | "componentSize"> & {
     hasErrorMessage: boolean;
-    hasLabel: import("./Input.types").LabelPresence;
 }, never>;
-export declare const Label: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../components/Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>, any, StyledLabelProps, never>;
-export declare const InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type OuterInputContainerProps = {
     width?: Property.Width<string>;
 };
 export declare const OuterInputContainer: import("styled-components").StyledComponent<"div", any, OuterInputContainerProps, never>;
+/**Brukes som container til input og ikon for posisjonering. */
+export declare const InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

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

@@ -1,47 +1,39 @@
 import styled, { css } from 'styled-components';
 import { inputTokens } from './Input.tokens.js';
-import { Typography } from '../../components/Typography/Typography/Typography.js';
-import 'tslib';
-import 'react/jsx-runtime';
-import 'react';
-import '../../components/Typography/Link/Link.js';
 import '../styling/focusVisible.js';
-import '../styling/hover.js';
-import '../styling/focus.js';
-import '../styling/danger.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';
 
+var input = inputTokens.input,
+    container = inputTokens.container;
 var Input = styled.input.withConfig({
   displayName: "Inputstyles__Input",
   componentId: "sc-1oz9x8w-0"
-})(["", " width:100%;top:0;left:0;margin:0;padding:0;box-sizing:border-box;box-shadow:none;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s,background-color 0.2s;}&[type='text'],&[type='password'],&[type='number'],&[type='tel'],&[type='date'],&[type='url'],&[type='email'],&[type='search'],&[type='datetime-local']{-webkit-appearance:none;}&::selection{", "}&:focus:enabled:read-write,&:active:enabled:read-write{", "}&:hover:enabled:read-write{", "}"], inputTokens.baseInput.base, selection, inputTokens.baseInput.focus.base, inputTokens.baseInput.hover.base);
+})(["position:relative;color:", ";border-radius:", ";border:", ";border-color:", ";background-color:", ";padding:", ";width:100%;margin:0;box-sizing:border-box;box-shadow:none;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s,background-color 0.2s;}&[type='text'],&[type='password'],&[type='number'],&[type='tel'],&[type='date'],&[type='url'],&[type='email'],&[type='search'],&[type='datetime-local']{-webkit-appearance:none;}&::selection{", "}&:hover:enabled:read-write{", "}&:focus:enabled:read-write,&:active:enabled:read-write{", "}"], input.base.color, input.base.borderRadius, input.base.border, input.base.borderColor, input.base.backgroundColor, input.base.padding, selection, hoverInputfield, focusInputfield);
 var StatefulInput = styled(Input).withConfig({
   displayName: "Inputstyles__StatefulInput",
   componentId: "sc-1oz9x8w-1"
-})(["-webkit-appearance:textfield;", ";&:hover:enabled:read-write ~ label{", "}&:focus:enabled:read-write ~ label{", "}", " &:enabled:read-only{", "}&:disabled{", "}"], function (_ref) {
-  var hasLabel = _ref.hasLabel;
-  return css(["", ""], inputTokens[hasLabel].base);
-}, inputTokens.label.hover.base, inputTokens.label.focus.base, function (_ref2) {
+})(["-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);
+}, function (_ref2) {
   var hasErrorMessage = _ref2.hasErrorMessage;
-  return hasErrorMessage && css(["", " &:hover:enabled:read-write{", "}&:focus:enabled:read-write,&:active:enabled:read-write{", "}"], inputTokens.error.base, inputTokens.error.hover.base, inputTokens.error.focus.base);
-}, inputTokens.readOnly.base, inputTokens.disabled.base);
-var Label = styled(Typography).withConfig({
-  displayName: "Inputstyles__Label",
+  return hasErrorMessage && css(["", " &:hover:enabled:read-write{", "}&:focus:enabled:read-write,&:active:enabled:read-write{", "}"], dangerInputfield, hoverDangerInputfield, focusDangerInputfield);
+}, input.readOnly.backgroundColor, input.disabled.color, input.disabled.backgroundColor);
+var OuterInputContainer = styled.div.withConfig({
+  displayName: "Inputstyles__OuterInputContainer",
   componentId: "sc-1oz9x8w-2"
-})(["position:absolute;top:0;left:0;@media (prefers-reduced-motion:no-preference){transition:color 0.2s,background-color 0.2s;}", " ", ""], inputTokens.label.base, function (_ref3) {
-  var disabled = _ref3.disabled;
-  return disabled && css(["", ""], inputTokens.label.disabled.base);
+})(["position:relative;gap:", ";width:", ";"], container.gap, function (_ref3) {
+  var width = _ref3.width;
+  return width;
 });
+/**Brukes som container til input og ikon for posisjonering. */
+
 var InputContainer = styled.div.withConfig({
   displayName: "Inputstyles__InputContainer",
   componentId: "sc-1oz9x8w-3"
 })(["position:relative;"]);
-var OuterInputContainer = styled.div.withConfig({
-  displayName: "Inputstyles__OuterInputContainer",
-  componentId: "sc-1oz9x8w-4"
-})(["display:flex;flex-direction:column;", ";"], function (_ref4) {
-  var width = _ref4.width;
-  return width && css(["width:", ";"], width);
-});
 
-export { Input, InputContainer, Label, OuterInputContainer, StatefulInput };
+export { Input, InputContainer, OuterInputContainer, StatefulInput };

package/dist/helpers/Input/Input.tokens.d.ts

@@ -1,13 +1,59 @@
 import { CSSObject } from 'styled-components';
 export declare const inputTokens: {
-    baseInput: {
-        base: CSSObject;
-        focus: {
-            base: CSSObject;
+    input: {
+        base: {
+            color: string;
+            borderRadius: string;
+            border: string;
+            borderColor: string;
+            backgroundColor: string;
+            padding: string;
         };
-        hover: {
-            base: CSSObject;
+        disabled: {
+            color: string;
+            backgroundColor: string;
+        };
+        readOnly: {
+            backgroundColor: string;
         };
+        sizes: {
+            medium: {
+                padding: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
+            small: {
+                padding: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
+            tiny: {
+                padding: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
+        };
+    };
+    container: {
+        gap: string;
     };
     general: {
         input: {
@@ -15,14 +61,6 @@ export declare const inputTokens: {
             borderWidth: string;
             borderColor: string;
             textColor: string;
-            font: {
-                lineHeight: any;
-                fontSize: string;
-                letterSpacing: any;
-                fontFamily: any;
-                fontWeight: any;
-                fontStyle: any;
-            };
             hover: {
                 backgroundColor: string;
                 borderColor: string;
@@ -48,21 +86,6 @@ export declare const inputTokens: {
     noLabel: {
         base: CSSObject;
     };
-    readOnly: {
-        base: CSSObject;
-    };
-    disabled: {
-        base: CSSObject;
-    };
-    error: {
-        base: CSSObject;
-        hover: {
-            base: CSSObject;
-        };
-        focus: {
-            base: CSSObject;
-        };
-    };
     label: {
         base: CSSObject;
         hover: {

package/dist/helpers/Input/Input.tokens.js

@@ -1,46 +1,47 @@
 import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
-import 'styled-components';
-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 '../styling/selection.js';
 
 var colors = ddsBaseTokens.colors,
     spacing = ddsBaseTokens.spacing,
     fontPackages = ddsBaseTokens.fontPackages,
     border = ddsBaseTokens.border;
 var TextInput = ddsReferenceTokens.textInput;
-var inputBase = Object.assign({
-  color: TextInput.input.textColor,
-  borderRadius: TextInput.input.borderRadius,
-  border: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors.DdsColorNeutralsGray5),
-  borderColor: TextInput.input.borderColor,
-  backgroundColor: colors.DdsColorNeutralsWhite
-}, TextInput.input.font);
-var inputFocusBase = Object.assign({}, focusInputfield);
-var inputHoverBase = Object.assign({}, hoverInputfield);
+var input = {
+  base: {
+    color: TextInput.input.textColor,
+    borderRadius: TextInput.input.borderRadius,
+    border: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors.DdsColorNeutralsGray5),
+    borderColor: TextInput.input.borderColor,
+    backgroundColor: colors.DdsColorNeutralsWhite,
+    padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX1, " ").concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX075)
+  },
+  disabled: {
+    color: colors.DdsColorNeutralsGray7,
+    backgroundColor: colors.DdsColorNeutralsGray1
+  },
+  readOnly: {
+    backgroundColor: 'transparent'
+  },
+  sizes: {
+    medium: {
+      padding: spacing.SizesDdsSpacingLocalX075,
+      font: fontPackages.body_sans_02.base
+    },
+    small: {
+      padding: "".concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX075),
+      font: fontPackages.body_sans_01.base
+    },
+    tiny: {
+      padding: "".concat(spacing.SizesDdsSpacingLocalX025, " ").concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX025, " ").concat(spacing.SizesDdsSpacingLocalX05),
+      font: fontPackages.supportingStyle_tiny_01.base
+    }
+  }
+};
 var inputHasLabelBase = {
   padding: "".concat(spacing.SizesDdsSpacingLocalX075NumberPx + fontPackages.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * fontPackages.supportingStyle_label_01.numbers.fontSizeNumber, "px ").concat(spacing.SizesDdsSpacingLocalX1, " ").concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX1)
 };
 var inputNoLabelBase = {
   padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX1, " ").concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX1)
 };
-var inputDisabledBase = {
-  cursor: 'not-allowed',
-  color: colors.DdsColorNeutralsGray7,
-  backgroundColor: colors.DdsColorNeutralsGray1
-};
-var inputErrorBase = Object.assign({}, dangerInputfield);
-var inputErrorHoverBase = Object.assign({}, hoverDangerInputfield);
-var inputErrorFocusBase = Object.assign({}, focusDangerInputfield);
-var inputReadOnlyBase = {
-  border: 'none',
-  outline: 'none',
-  cursor: 'default',
-  backgroundColor: 'transparent',
-  paddingLeft: spacing.SizesDdsSpacingLocalX1
-};
 var inputLabelBase = {
   padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX1)
 };
@@ -53,16 +54,12 @@ var inputLabelFocusBase = {
 var inputLabelDisabledBase = {
   color: colors.DdsColorNeutralsGray6
 };
+var container = {
+  gap: spacing.SizesDdsSpacingLocalX0125
+};
 var inputTokens = {
-  baseInput: {
-    base: inputBase,
-    focus: {
-      base: inputFocusBase
-    },
-    hover: {
-      base: inputHoverBase
-    }
-  },
+  input: input,
+  container: container,
   general: TextInput,
   hasLabel: {
     base: inputHasLabelBase
@@ -70,21 +67,6 @@ var inputTokens = {
   noLabel: {
     base: inputNoLabelBase
   },
-  readOnly: {
-    base: inputReadOnlyBase
-  },
-  disabled: {
-    base: inputDisabledBase
-  },
-  error: {
-    base: inputErrorBase,
-    hover: {
-      base: inputErrorHoverBase
-    },
-    focus: {
-      base: inputErrorFocusBase
-    }
-  },
   label: {
     base: inputLabelBase,
     hover: {

package/dist/helpers/Input/Input.types.d.ts

@@ -1,8 +1,11 @@
 import { InputHTMLAttributes } from 'react';
 import { Property } from 'csstype';
+export declare type InputSize = 'medium' | 'small' | 'tiny';
 export declare type InputProps = {
     /**Ledetekst for input. */
     label?: string;
+    /**Størrelse på inputfeltet. */
+    componentSize?: InputSize;
     /**Bredde for inputfeltet. */
     width?: Property.Width<string>;
     /**Hjelpetekst. */
@@ -10,11 +13,6 @@ export declare type InputProps = {
     /**Feilmelding. Setter også error state. */
     errorMessage?: string;
 } & InputHTMLAttributes<HTMLInputElement>;
-export declare type LabelPresence = 'hasLabel' | 'noLabel';
-export declare type StyledInputProps = Pick<InputProps, 'readOnly' | 'disabled'> & {
+export declare type StyledInputProps = Pick<InputProps, 'readOnly' | 'disabled' | 'componentSize'> & {
     hasErrorMessage: boolean;
-    hasLabel: LabelPresence;
-};
-export declare type StyledLabelProps = {
-    disabled?: boolean;
 };

package/dist/helpers/Input/Input.utils.d.ts

@@ -0,0 +1,3 @@
+import { IconSize } from '../../components/Icon';
+import { InputSize } from './Input.types';
+export declare const getFormInputIconSize: (componentSize: InputSize) => IconSize;