@norges-domstoler/dds-components 13.0.2 → 13.1.0

package/dist/cjs/components/DescriptionList/DescriptionList.tokens.d.ts

@@ -1,9 +1,3 @@
-import { StaticTypographyType } from '../Typography';
-import { DescriptionListAppearance } from './DescriptionList';
-export declare const termTypographyTypes: {
-    [k in DescriptionListAppearance]: StaticTypographyType;
-};
-export declare const descTypographyType: StaticTypographyType;
 export declare const descriptionListTokens: {
     term: {
         appearance: {

package/dist/cjs/components/InlineEdit/InlineEdit.styles.d.ts

@@ -6,9 +6,15 @@ type StyledInlineInputProps = {
 };
 export declare const StyledInlineInput: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers").InputProps, "disabled" | "readOnly"> & {
     hasErrorMessage: boolean;
+} & {
+    prefixLength?: number | undefined;
+    suffixLength?: number | undefined;
 } & Pick<import("../../helpers").InputProps, "componentSize"> & StyledInlineInputProps, never>;
 export declare const StyledInlineTextArea: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers").InputProps, "disabled" | "readOnly"> & {
     hasErrorMessage: boolean;
+} & {
+    prefixLength?: number | undefined;
+    suffixLength?: number | undefined;
 } & Pick<import("../../helpers").InputProps, "componentSize"> & StyledInlineInputProps, never>;
 export declare const IconWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
 export {};

package/dist/cjs/components/TextArea/TextArea.d.ts

@@ -2,6 +2,9 @@ import { TextareaHTMLAttributes } from 'react';
 import { CommonInputProps } from '../../helpers/Input';
 export declare const StyledTextArea: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers/Input").InputProps, "disabled" | "readOnly"> & {
     hasErrorMessage: boolean;
+} & {
+    prefixLength?: number | undefined;
+    suffixLength?: number | undefined;
 } & Pick<import("../../helpers/Input").InputProps, "componentSize">, never>;
 export type TextAreaProps = CommonInputProps & TextareaHTMLAttributes<HTMLTextAreaElement>;
 export declare const TextArea: import("react").ForwardRefExoticComponent<CommonInputProps & TextareaHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLTextAreaElement>>;

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

@@ -5,4 +5,6 @@ export declare const TextInput: React.ForwardRefExoticComponent<import("../../he
 } & React.InputHTMLAttributes<HTMLInputElement> & {
     withCharacterCounter?: boolean | undefined;
     icon?: import("../../icons/utils").SvgIcon | undefined;
+    prefix?: string | undefined;
+    suffix?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/cjs/components/TextInput/TextInput.stories.d.ts

@@ -6,6 +6,8 @@ declare const _default: {
     } & import("react").InputHTMLAttributes<HTMLInputElement> & {
         withCharacterCounter?: boolean | undefined;
         icon?: import("../../icons/utils").SvgIcon | undefined;
+        prefix?: string | undefined;
+        suffix?: string | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {
@@ -56,3 +58,4 @@ export declare const TextInputOverviewSizes: () => JSX.Element;
 export declare const Default: (args: TextInputProps) => JSX.Element;
 export declare const WithLabel: (args: TextInputProps) => JSX.Element;
 export declare const WithCharacterCount: (args: TextInputProps) => JSX.Element;
+export declare const TextInputAffixes: (args: TextInputProps) => JSX.Element;

package/dist/cjs/components/TextInput/TextInput.styles.d.ts

@@ -10,5 +10,8 @@ type StyledInputProps = {
 };
 export declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers").InputProps, "disabled" | "readOnly"> & {
     hasErrorMessage: boolean;
+} & {
+    prefixLength?: number | undefined;
+    suffixLength?: number | undefined;
 } & Pick<import("../../helpers").InputProps, "componentSize"> & StyledInputProps, never>;
 export {};

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

@@ -29,4 +29,9 @@ export declare const textInputTokens: {
             };
         };
     };
+    affix: {
+        border: {
+            color: string;
+        };
+    };
 };

package/dist/cjs/components/TextInput/TextInput.types.d.ts

@@ -5,4 +5,11 @@ export type TextInputProps = InputProps & {
     withCharacterCounter?: boolean;
     /** Ikonet som vises i komponenten. */
     icon?: SvgIcon;
+    /** Prefiks som vises før inputfeltet. */
+    prefix?: string;
+    /** Suffiks som vises etter inputfeltet. */
+    suffix?: string;
+};
+export type TextAffixProps = {
+    readOnly?: boolean;
 };

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

@@ -2,6 +2,9 @@ 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"> & {
     hasErrorMessage: boolean;
+} & {
+    prefixLength?: number | undefined;
+    suffixLength?: number | undefined;
 } & Pick<import("./Input.types").InputProps, "componentSize">, never>;
 type OuterInputContainerProps = {
     width?: Property.Width;
@@ -9,4 +12,5 @@ type OuterInputContainerProps = {
 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 declare const InputAffixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

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

@@ -28,6 +28,9 @@ export declare const inputTokens: {
                 padding: string;
             };
         };
+        affix: {
+            gap: number;
+        };
     };
     container: {
         gap: string;

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

@@ -19,7 +19,10 @@ export type InputProps = CommonInputProps & {
 export type StyledCommonInputProps = Pick<InputProps, 'readOnly' | 'disabled'> & {
     hasErrorMessage: boolean;
 };
-export type StyledInputProps = StyledCommonInputProps & Pick<InputProps, 'componentSize'>;
+export type StyledInputProps = StyledCommonInputProps & {
+    prefixLength?: number;
+    suffixLength?: number;
+} & Pick<InputProps, 'componentSize'>;
 export type InputTypographyTypes = {
     [k in InputSize]: StaticTypographyType;
 };

package/dist/cjs/index.js

@@ -813,6 +813,9 @@ var input$5 = {
     tiny: {
       padding: "".concat(spacing$B.SizesDdsSpacingLocalX025, " ").concat(spacing$B.SizesDdsSpacingLocalX05, " ").concat(spacing$B.SizesDdsSpacingLocalX025, " ").concat(spacing$B.SizesDdsSpacingLocalX05)
     }
+  },
+  affix: {
+    gap: spacing$B.SizesDdsSpacingLocalX1NumberPx
   }
 };
 var container$g = {
@@ -832,18 +835,24 @@ var Input$2 = styled__default.default.input.withConfig({
 var StatefulInput = styled__default.default(Input$2).withConfig({
   displayName: "Inputstyles__StatefulInput",
   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 && styled.css(["padding:", ";", ""], input$4.sizes[componentSize].padding, getFontStyling(inputTypographyTypes[componentSize]));
+})(["-webkit-appearance:textfield;padding-left:", ";padding-right:", ";", " ", " &:enabled:read-only{border:none;outline:none;cursor:default;background-color:", ";padding-left:0;}&:disabled{cursor:not-allowed;color:", ";background-color:", ";}"], function (_ref) {
+  var prefixLength = _ref.prefixLength;
+  return prefixLength && "calc(".concat(input$4.affix.gap, "px + ").concat(prefixLength, "px) !important");
 }, function (_ref2) {
-  var hasErrorMessage = _ref2.hasErrorMessage;
+  var suffixLength = _ref2.suffixLength;
+  return suffixLength && "calc(".concat(input$4.affix.gap, "px + ").concat(suffixLength, "px) !important");
+}, function (_ref3) {
+  var componentSize = _ref3.componentSize;
+  return componentSize && styled.css(["padding:", ";", ""], input$4.sizes[componentSize].padding, getFontStyling(inputTypographyTypes[componentSize]));
+}, function (_ref4) {
+  var hasErrorMessage = _ref4.hasErrorMessage;
   return hasErrorMessage && styled.css(["", " &:hover:enabled:read-write{", "}&:focus:enabled:read-write,&:active:enabled:read-write{", "}"], dangerInputfield, hoverDangerInputfield, focusDangerInputfield);
 }, input$4.readOnly.backgroundColor, input$4.disabled.color, input$4.disabled.backgroundColor);
 var OuterInputContainer = styled__default.default.div.withConfig({
   displayName: "Inputstyles__OuterInputContainer",
   componentId: "sc-1oz9x8w-2"
-})(["position:relative;gap:", ";width:", ";"], container$f.gap, function (_ref3) {
-  var width = _ref3.width;
+})(["position:relative;gap:", ";width:", ";"], container$f.gap, function (_ref5) {
+  var width = _ref5.width;
   return width;
 });
 /**Brukes som container til input og ikon for posisjonering. */
@@ -851,6 +860,10 @@ var InputContainer$1 = styled__default.default.div.withConfig({
   displayName: "Inputstyles__InputContainer",
   componentId: "sc-1oz9x8w-3"
 })(["position:relative;"]);
+var InputAffixContainer = styled__default.default.div.withConfig({
+  displayName: "Inputstyles__InputAffixContainer",
+  componentId: "sc-1oz9x8w-4"
+})(["position:relative;display:flex;align-items:center;"]);
 
 var getSize = function getSize(iconSize) {
   switch (iconSize) {
@@ -4254,6 +4267,11 @@ var input$3 = {
     }
   }
 };
+var affix = {
+  border: {
+    color: colors$o.DdsColorNeutralsGray5
+  }
+};
 var icon$9 = {
   color: colors$o.DdsColorNeutralsGray9,
   sizes: {
@@ -4273,7 +4291,8 @@ var icon$9 = {
 };
 var textInputTokens = {
   input: input$3,
-  icon: icon$9
+  icon: icon$9,
+  affix: affix
 };
 
 var iconSizes$4 = ddsDesignTokens.ddsBaseTokens.iconSizes;
@@ -4309,6 +4328,20 @@ var getWidth$1 = function getWidth(size, width) {
   }
   return defaultWidth$5;
 };
+var Prefix = styled__default.default.span.withConfig({
+  displayName: "TextInput__Prefix",
+  componentId: "sc-k8umq3-0"
+})(["position:absolute;height:100%;top:50%;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none;z-index:1;margin-left:8px;padding-right:8px;border-right:", ";"], function (_ref) {
+  var readOnly = _ref.readOnly;
+  return !readOnly && "1px solid ".concat(textInputTokens.affix.border.color);
+});
+var Suffix = styled__default.default.span.withConfig({
+  displayName: "TextInput__Suffix",
+  componentId: "sc-k8umq3-1"
+})(["position:absolute;height:100%;top:50%;right:0;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none;z-index:1;margin-right:8px;padding-left:8px;border-left:", ";"], function (_ref2) {
+  var readOnly = _ref2.readOnly;
+  return !readOnly && "1px solid ".concat(textInputTokens.affix.border.color);
+});
 var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var label = _a.label,
     disabled = _a.disabled,
@@ -4333,11 +4366,23 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     ariaRequired = _a['aria-required'],
     ariaDescribedby = _a['aria-describedby'],
     icon = _a.icon,
-    rest = tslib.__rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "onChange", "id", "width", "componentSize", "type", "withCharacterCounter", "className", "style", "value", "defaultValue", 'aria-required', 'aria-describedby', "icon"]);
+    prefix = _a.prefix,
+    suffix = _a.suffix,
+    rest = tslib.__rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "onChange", "id", "width", "componentSize", "type", "withCharacterCounter", "className", "style", "value", "defaultValue", 'aria-required', 'aria-describedby', "icon", "prefix", "suffix"]);
   var _useState = React.useState(getDefaultText(value, defaultValue)),
     _useState2 = _slicedToArray(_useState, 2),
     text = _useState2[0],
     setText = _useState2[1];
+  var prefixRef = React.useRef(null);
+  var suffixRef = React.useRef(null);
+  var _useState3 = React.useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    prefixLength = _useState4[0],
+    setPrefixLength = _useState4[1];
+  var _useState5 = React.useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    suffixLength = _useState6[0],
+    setSuffixLength = _useState6[1];
   var onChangeHandler = function onChangeHandler(event) {
     setText(event.target.value);
     if (onChange) {
@@ -4351,6 +4396,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var hasLabel = !!label;
   var hasMessage = hasErrorMessage || hasTip || !!maxLength;
   var hasIcon = !!icon;
+  var hasAffix = !!(prefix || suffix);
   var characterCounterId = derivativeIdGenerator(uniqueId, 'characterCounter');
   var tipId = derivativeIdGenerator(uniqueId, 'tip');
   var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage');
@@ -4375,13 +4421,17 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     width: getWidth$1(componentSize, width)
   };
   var showRequiredStyling = !!(required || ariaRequired);
-  return jsxRuntime.jsxs(OuterInputContainer, Object.assign({}, outerInputContainerProps, {
-    children: [hasLabel && jsxRuntime.jsx(Label$2, Object.assign({
-      htmlFor: uniqueId,
-      showRequiredStyling: showRequiredStyling
-    }, {
-      children: label
-    })), hasIcon ? jsxRuntime.jsxs(InputContainer$1, {
+  React.useLayoutEffect(function () {
+    if (prefixRef.current) {
+      setPrefixLength(prefixRef.current.offsetWidth);
+    }
+    if (suffixRef.current) {
+      setSuffixLength(suffixRef.current.offsetWidth);
+    }
+  }, []);
+  var extendedInput = null;
+  if (hasIcon) {
+    extendedInput = jsxRuntime.jsxs(InputContainer$1, {
       children: [jsxRuntime.jsx(StyledIcon$3, {
         icon: icon,
         iconSize: getFormInputIconSize(componentSize),
@@ -4393,7 +4443,38 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         componentSize: componentSize,
         hasIcon: hasIcon
       }, generalInputProps))]
-    }) : jsxRuntime.jsx(StatefulInput, Object.assign({
+    });
+  } else if (hasAffix) {
+    extendedInput = jsxRuntime.jsxs(InputAffixContainer, {
+      children: [prefix && jsxRuntime.jsx(Prefix, Object.assign({
+        readOnly: readOnly,
+        ref: prefixRef,
+        "aria-hidden": true
+      }, {
+        children: prefix
+      })), jsxRuntime.jsx(StatefulInput, Object.assign({
+        ref: ref,
+        onChange: onChangeHandler,
+        type: type,
+        componentSize: componentSize,
+        prefixLength: prefixLength,
+        suffixLength: suffixLength
+      }, generalInputProps)), suffix && jsxRuntime.jsx(Suffix, Object.assign({
+        readOnly: readOnly,
+        ref: suffixRef,
+        "aria-hidden": true
+      }, {
+        children: suffix
+      }))]
+    });
+  }
+  return jsxRuntime.jsxs(OuterInputContainer, Object.assign({}, outerInputContainerProps, {
+    children: [hasLabel && jsxRuntime.jsx(Label$2, Object.assign({
+      htmlFor: uniqueId,
+      showRequiredStyling: showRequiredStyling
+    }, {
+      children: label
+    })), extendedInput ? extendedInput : jsxRuntime.jsx(StatefulInput, Object.assign({
       ref: ref,
       onChange: onChangeHandler,
       type: type,
@@ -6424,11 +6505,6 @@ var Row = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 
 var spacing$p = ddsDesignTokens.ddsBaseTokens.spacing,
   colors$g = ddsDesignTokens.ddsBaseTokens.colors;
-var termTypographyTypes = {
-  bold: 'bodySans03',
-  small: 'bodySans01'
-};
-var descTypographyType = 'bodySans03';
 var term$1 = {
   appearance: {
     small: {
@@ -6479,7 +6555,7 @@ var DList = styled__default.default.dl.withConfig({
   componentId: "sc-1ob73hm-0"
 })(["margin:0;*::selection{", "}", " display:flex;flex-direction:column;&:not(:has(> dt):has(> dd)){flex-direction:", ";}flex-wrap:wrap;column-gap:", ";row-gap:0;& > dt:first-of-type{margin-top:", ";}& > dd:last-child{margin-bottom:", ";}dd + dt{margin-top:", ";}"], selection, function (_ref) {
   var appearance = _ref.appearance;
-  return appearance && styled.css(["dt{color:", ";", " ", "}"], term.appearance[appearance].color, getFontStyling(termTypographyTypes[appearance]), appearance === 'bold' && styled.css(["font-weight:600;"]));
+  return appearance && styled.css(["dt{color:", ";", "}"], term.appearance[appearance].color, appearance === 'bold' && styled.css(["font-weight:600;"]));
 }, function (_ref2) {
   var _ref2$direction = _ref2.direction,
     direction = _ref2$direction === void 0 ? 'column' : _ref2$direction;
@@ -6523,7 +6599,7 @@ var DescriptionListTerm = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 var DListDesc = styled__default.default.dd.withConfig({
   displayName: "DescriptionListDesc__DListDesc",
   componentId: "sc-1djcf0s-0"
-})(["margin-inline-start:0;align-items:center;display:flex;color:", ";", " gap:", ";"], descriptionListTokens.desc.base.color, getFontStyling(descTypographyType), descriptionListTokens.desc.base.gap);
+})(["margin-inline-start:0;align-items:center;display:flex;color:", ";gap:", ";"], descriptionListTokens.desc.base.color, descriptionListTokens.desc.base.gap);
 var DescriptionListDesc = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
     icon = props.icon,

package/dist/components/DescriptionList/DescriptionList.js

@@ -8,8 +8,7 @@ import '../../helpers/styling/focus.js';
 import '../../helpers/styling/danger.js';
 import { selection } from '../../helpers/styling/selection.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
-import { getFontStyling } from '../Typography/Typography.utils.js';
-import { descriptionListTokens, termTypographyTypes } from './DescriptionList.tokens.js';
+import { descriptionListTokens } from './DescriptionList.tokens.js';
 
 var term = descriptionListTokens.term,
   desc = descriptionListTokens.desc,
@@ -19,7 +18,7 @@ var DList = styled.dl.withConfig({
   componentId: "sc-1ob73hm-0"
 })(["margin:0;*::selection{", "}", " display:flex;flex-direction:column;&:not(:has(> dt):has(> dd)){flex-direction:", ";}flex-wrap:wrap;column-gap:", ";row-gap:0;& > dt:first-of-type{margin-top:", ";}& > dd:last-child{margin-bottom:", ";}dd + dt{margin-top:", ";}"], selection, function (_ref) {
   var appearance = _ref.appearance;
-  return appearance && css(["dt{color:", ";", " ", "}"], term.appearance[appearance].color, getFontStyling(termTypographyTypes[appearance]), appearance === 'bold' && css(["font-weight:600;"]));
+  return appearance && css(["dt{color:", ";", "}"], term.appearance[appearance].color, appearance === 'bold' && css(["font-weight:600;"]));
 }, function (_ref2) {
   var _ref2$direction = _ref2.direction,
     direction = _ref2$direction === void 0 ? 'column' : _ref2$direction;

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

@@ -1,9 +1,3 @@
-import { StaticTypographyType } from '../Typography';
-import { DescriptionListAppearance } from './DescriptionList';
-export declare const termTypographyTypes: {
-    [k in DescriptionListAppearance]: StaticTypographyType;
-};
-export declare const descTypographyType: StaticTypographyType;
 export declare const descriptionListTokens: {
     term: {
         appearance: {

package/dist/components/DescriptionList/DescriptionList.tokens.js

@@ -2,11 +2,6 @@ import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
 var spacing = ddsBaseTokens.spacing,
   colors = ddsBaseTokens.colors;
-var termTypographyTypes = {
-  bold: 'bodySans03',
-  small: 'bodySans01'
-};
-var descTypographyType = 'bodySans03';
 var term = {
   appearance: {
     small: {
@@ -49,4 +44,4 @@ var descriptionListTokens = {
   group: group
 };
 
-export { descTypographyType, descriptionListTokens, termTypographyTypes };
+export { descriptionListTokens };

package/dist/components/DescriptionList/DescriptionListDesc.js

@@ -2,15 +2,14 @@ import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { descriptionListTokens, descTypographyType } from './DescriptionList.tokens.js';
+import { descriptionListTokens } from './DescriptionList.tokens.js';
 import { Icon } from '../Icon/Icon.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
-import { getFontStyling } from '../Typography/Typography.utils.js';
 
 var DListDesc = styled.dd.withConfig({
   displayName: "DescriptionListDesc__DListDesc",
   componentId: "sc-1djcf0s-0"
-})(["margin-inline-start:0;align-items:center;display:flex;color:", ";", " gap:", ";"], descriptionListTokens.desc.base.color, getFontStyling(descTypographyType), descriptionListTokens.desc.base.gap);
+})(["margin-inline-start:0;align-items:center;display:flex;color:", ";gap:", ";"], descriptionListTokens.desc.base.color, descriptionListTokens.desc.base.gap);
 var DescriptionListDesc = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     icon = props.icon,

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

@@ -6,9 +6,15 @@ type StyledInlineInputProps = {
 };
 export declare const StyledInlineInput: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers").InputProps, "disabled" | "readOnly"> & {
     hasErrorMessage: boolean;
+} & {
+    prefixLength?: number | undefined;
+    suffixLength?: number | undefined;
 } & Pick<import("../../helpers").InputProps, "componentSize"> & StyledInlineInputProps, never>;
 export declare const StyledInlineTextArea: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers").InputProps, "disabled" | "readOnly"> & {
     hasErrorMessage: boolean;
+} & {
+    prefixLength?: number | undefined;
+    suffixLength?: number | undefined;
 } & Pick<import("../../helpers").InputProps, "componentSize"> & StyledInlineInputProps, never>;
 export declare const IconWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
 export {};

package/dist/components/TextArea/TextArea.d.ts

@@ -2,6 +2,9 @@ import { TextareaHTMLAttributes } from 'react';
 import { CommonInputProps } from '../../helpers/Input';
 export declare const StyledTextArea: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers/Input").InputProps, "disabled" | "readOnly"> & {
     hasErrorMessage: boolean;
+} & {
+    prefixLength?: number | undefined;
+    suffixLength?: number | undefined;
 } & Pick<import("../../helpers/Input").InputProps, "componentSize">, never>;
 export type TextAreaProps = CommonInputProps & TextareaHTMLAttributes<HTMLTextAreaElement>;
 export declare const TextArea: import("react").ForwardRefExoticComponent<CommonInputProps & TextareaHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLTextAreaElement>>;

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

@@ -5,4 +5,6 @@ export declare const TextInput: React.ForwardRefExoticComponent<import("../../he
 } & React.InputHTMLAttributes<HTMLInputElement> & {
     withCharacterCounter?: boolean | undefined;
     icon?: import("../../icons/utils").SvgIcon | undefined;
+    prefix?: string | undefined;
+    suffix?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/components/TextInput/TextInput.js

@@ -1,12 +1,12 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useId } from 'react';
+import { forwardRef, useState, useRef, useId, useLayoutEffect } from 'react';
 import CharCounter from './CharCounter.js';
 import '../../helpers/Backdrop/Backdrop.js';
 import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
-import { OuterInputContainer, InputContainer, StatefulInput } from '../../helpers/Input/Input.styles.js';
+import { InputContainer, InputAffixContainer, StatefulInput, OuterInputContainer } from '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
 import { getDefaultText, getFormInputIconSize, renderInputMessage } from '../../helpers/Input/Input.utils.js';
 import '../../helpers/Paper/Paper.js';
@@ -19,6 +19,8 @@ import { StyledIcon, StyledInput, MessageContainer } from './TextInput.styles.js
 import '../Typography/Typography/Typography.js';
 import { Label } from '../Typography/Label/Label.js';
 import '../Typography/Link/Link.js';
+import styled from 'styled-components';
+import { textInputTokens } from './TextInput.tokens.js';
 
 var defaultWidth = '320px';
 var defaultTinyWidth = '210px';
@@ -29,6 +31,20 @@ var getWidth = function getWidth(size, width) {
   }
   return defaultWidth;
 };
+var Prefix = styled.span.withConfig({
+  displayName: "TextInput__Prefix",
+  componentId: "sc-k8umq3-0"
+})(["position:absolute;height:100%;top:50%;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none;z-index:1;margin-left:8px;padding-right:8px;border-right:", ";"], function (_ref) {
+  var readOnly = _ref.readOnly;
+  return !readOnly && "1px solid ".concat(textInputTokens.affix.border.color);
+});
+var Suffix = styled.span.withConfig({
+  displayName: "TextInput__Suffix",
+  componentId: "sc-k8umq3-1"
+})(["position:absolute;height:100%;top:50%;right:0;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none;z-index:1;margin-right:8px;padding-left:8px;border-left:", ";"], function (_ref2) {
+  var readOnly = _ref2.readOnly;
+  return !readOnly && "1px solid ".concat(textInputTokens.affix.border.color);
+});
 var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var label = _a.label,
     disabled = _a.disabled,
@@ -53,11 +69,23 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     ariaRequired = _a['aria-required'],
     ariaDescribedby = _a['aria-describedby'],
     icon = _a.icon,
-    rest = __rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "onChange", "id", "width", "componentSize", "type", "withCharacterCounter", "className", "style", "value", "defaultValue", 'aria-required', 'aria-describedby', "icon"]);
+    prefix = _a.prefix,
+    suffix = _a.suffix,
+    rest = __rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "onChange", "id", "width", "componentSize", "type", "withCharacterCounter", "className", "style", "value", "defaultValue", 'aria-required', 'aria-describedby', "icon", "prefix", "suffix"]);
   var _useState = useState(getDefaultText(value, defaultValue)),
     _useState2 = _slicedToArray(_useState, 2),
     text = _useState2[0],
     setText = _useState2[1];
+  var prefixRef = useRef(null);
+  var suffixRef = useRef(null);
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    prefixLength = _useState4[0],
+    setPrefixLength = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    suffixLength = _useState6[0],
+    setSuffixLength = _useState6[1];
   var onChangeHandler = function onChangeHandler(event) {
     setText(event.target.value);
     if (onChange) {
@@ -71,6 +99,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var hasLabel = !!label;
   var hasMessage = hasErrorMessage || hasTip || !!maxLength;
   var hasIcon = !!icon;
+  var hasAffix = !!(prefix || suffix);
   var characterCounterId = derivativeIdGenerator(uniqueId, 'characterCounter');
   var tipId = derivativeIdGenerator(uniqueId, 'tip');
   var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage');
@@ -95,13 +124,17 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     width: getWidth(componentSize, width)
   };
   var showRequiredStyling = !!(required || ariaRequired);
-  return jsxs(OuterInputContainer, Object.assign({}, outerInputContainerProps, {
-    children: [hasLabel && jsx(Label, Object.assign({
-      htmlFor: uniqueId,
-      showRequiredStyling: showRequiredStyling
-    }, {
-      children: label
-    })), hasIcon ? jsxs(InputContainer, {
+  useLayoutEffect(function () {
+    if (prefixRef.current) {
+      setPrefixLength(prefixRef.current.offsetWidth);
+    }
+    if (suffixRef.current) {
+      setSuffixLength(suffixRef.current.offsetWidth);
+    }
+  }, []);
+  var extendedInput = null;
+  if (hasIcon) {
+    extendedInput = jsxs(InputContainer, {
       children: [jsx(StyledIcon, {
         icon: icon,
         iconSize: getFormInputIconSize(componentSize),
@@ -113,7 +146,38 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
         componentSize: componentSize,
         hasIcon: hasIcon
       }, generalInputProps))]
-    }) : jsx(StatefulInput, Object.assign({
+    });
+  } else if (hasAffix) {
+    extendedInput = jsxs(InputAffixContainer, {
+      children: [prefix && jsx(Prefix, Object.assign({
+        readOnly: readOnly,
+        ref: prefixRef,
+        "aria-hidden": true
+      }, {
+        children: prefix
+      })), jsx(StatefulInput, Object.assign({
+        ref: ref,
+        onChange: onChangeHandler,
+        type: type,
+        componentSize: componentSize,
+        prefixLength: prefixLength,
+        suffixLength: suffixLength
+      }, generalInputProps)), suffix && jsx(Suffix, Object.assign({
+        readOnly: readOnly,
+        ref: suffixRef,
+        "aria-hidden": true
+      }, {
+        children: suffix
+      }))]
+    });
+  }
+  return jsxs(OuterInputContainer, Object.assign({}, outerInputContainerProps, {
+    children: [hasLabel && jsx(Label, Object.assign({
+      htmlFor: uniqueId,
+      showRequiredStyling: showRequiredStyling
+    }, {
+      children: label
+    })), extendedInput ? extendedInput : jsx(StatefulInput, Object.assign({
       ref: ref,
       onChange: onChangeHandler,
       type: type,

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

@@ -6,6 +6,8 @@ declare const _default: {
     } & import("react").InputHTMLAttributes<HTMLInputElement> & {
         withCharacterCounter?: boolean | undefined;
         icon?: import("../../icons/utils").SvgIcon | undefined;
+        prefix?: string | undefined;
+        suffix?: string | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {
@@ -56,3 +58,4 @@ export declare const TextInputOverviewSizes: () => JSX.Element;
 export declare const Default: (args: TextInputProps) => JSX.Element;
 export declare const WithLabel: (args: TextInputProps) => JSX.Element;
 export declare const WithCharacterCount: (args: TextInputProps) => JSX.Element;
+export declare const TextInputAffixes: (args: TextInputProps) => JSX.Element;

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

@@ -10,5 +10,8 @@ type StyledInputProps = {
 };
 export declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers").InputProps, "disabled" | "readOnly"> & {
     hasErrorMessage: boolean;
+} & {
+    prefixLength?: number | undefined;
+    suffixLength?: number | undefined;
 } & Pick<import("../../helpers").InputProps, "componentSize"> & StyledInputProps, never>;
 export {};

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

@@ -29,4 +29,9 @@ export declare const textInputTokens: {
             };
         };
     };
+    affix: {
+        border: {
+            color: string;
+        };
+    };
 };

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

@@ -16,6 +16,11 @@ var input = {
     }
   }
 };
+var affix = {
+  border: {
+    color: colors.DdsColorNeutralsGray5
+  }
+};
 var icon = {
   color: colors.DdsColorNeutralsGray9,
   sizes: {
@@ -35,7 +40,8 @@ var icon = {
 };
 var textInputTokens = {
   input: input,
-  icon: icon
+  icon: icon,
+  affix: affix
 };
 
 export { textInputTokens };

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

@@ -5,4 +5,11 @@ export type TextInputProps = InputProps & {
     withCharacterCounter?: boolean;
     /** Ikonet som vises i komponenten. */
     icon?: SvgIcon;
+    /** Prefiks som vises før inputfeltet. */
+    prefix?: string;
+    /** Suffiks som vises etter inputfeltet. */
+    suffix?: string;
+};
+export type TextAffixProps = {
+    readOnly?: boolean;
 };

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

@@ -2,6 +2,9 @@ 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"> & {
     hasErrorMessage: boolean;
+} & {
+    prefixLength?: number | undefined;
+    suffixLength?: number | undefined;
 } & Pick<import("./Input.types").InputProps, "componentSize">, never>;
 type OuterInputContainerProps = {
     width?: Property.Width;
@@ -9,4 +12,5 @@ type OuterInputContainerProps = {
 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 declare const InputAffixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

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

@@ -16,18 +16,24 @@ var Input = styled.input.withConfig({
 var StatefulInput = styled(Input).withConfig({
   displayName: "Inputstyles__StatefulInput",
   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, getFontStyling(inputTypographyTypes[componentSize]));
+})(["-webkit-appearance:textfield;padding-left:", ";padding-right:", ";", " ", " &:enabled:read-only{border:none;outline:none;cursor:default;background-color:", ";padding-left:0;}&:disabled{cursor:not-allowed;color:", ";background-color:", ";}"], function (_ref) {
+  var prefixLength = _ref.prefixLength;
+  return prefixLength && "calc(".concat(input.affix.gap, "px + ").concat(prefixLength, "px) !important");
 }, function (_ref2) {
-  var hasErrorMessage = _ref2.hasErrorMessage;
+  var suffixLength = _ref2.suffixLength;
+  return suffixLength && "calc(".concat(input.affix.gap, "px + ").concat(suffixLength, "px) !important");
+}, function (_ref3) {
+  var componentSize = _ref3.componentSize;
+  return componentSize && css(["padding:", ";", ""], input.sizes[componentSize].padding, getFontStyling(inputTypographyTypes[componentSize]));
+}, function (_ref4) {
+  var hasErrorMessage = _ref4.hasErrorMessage;
   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:relative;gap:", ";width:", ";"], container.gap, function (_ref3) {
-  var width = _ref3.width;
+})(["position:relative;gap:", ";width:", ";"], container.gap, function (_ref5) {
+  var width = _ref5.width;
   return width;
 });
 /**Brukes som container til input og ikon for posisjonering. */
@@ -35,5 +41,9 @@ var InputContainer = styled.div.withConfig({
   displayName: "Inputstyles__InputContainer",
   componentId: "sc-1oz9x8w-3"
 })(["position:relative;"]);
+var InputAffixContainer = styled.div.withConfig({
+  displayName: "Inputstyles__InputAffixContainer",
+  componentId: "sc-1oz9x8w-4"
+})(["position:relative;display:flex;align-items:center;"]);
 
-export { Input, InputContainer, OuterInputContainer, StatefulInput };
+export { Input, InputAffixContainer, InputContainer, OuterInputContainer, StatefulInput };

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

@@ -28,6 +28,9 @@ export declare const inputTokens: {
                 padding: string;
             };
         };
+        affix: {
+            gap: number;
+        };
     };
     container: {
         gap: string;

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

@@ -35,6 +35,9 @@ var input = {
     tiny: {
       padding: "".concat(spacing.SizesDdsSpacingLocalX025, " ").concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX025, " ").concat(spacing.SizesDdsSpacingLocalX05)
     }
+  },
+  affix: {
+    gap: spacing.SizesDdsSpacingLocalX1NumberPx
   }
 };
 var container = {

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

@@ -19,7 +19,10 @@ export type InputProps = CommonInputProps & {
 export type StyledCommonInputProps = Pick<InputProps, 'readOnly' | 'disabled'> & {
     hasErrorMessage: boolean;
 };
-export type StyledInputProps = StyledCommonInputProps & Pick<InputProps, 'componentSize'>;
+export type StyledInputProps = StyledCommonInputProps & {
+    prefixLength?: number;
+    suffixLength?: number;
+} & Pick<InputProps, 'componentSize'>;
 export type InputTypographyTypes = {
     [k in InputSize]: StaticTypographyType;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "13.0.2",
+  "version": "13.1.0",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",