@norges-domstoler/dds-components 13.1.0 → 13.2.0

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

@@ -45,6 +45,16 @@ declare const _default: {
                 type: string;
             };
         };
+        prefix: {
+            control: {
+                type: string;
+            };
+        };
+        suffix: {
+            control: {
+                type: string;
+            };
+        };
     };
     parameters: {
         controls: {

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

@@ -5,9 +5,15 @@ export type TextInputProps = InputProps & {
     withCharacterCounter?: boolean;
     /** Ikonet som vises i komponenten. */
     icon?: SvgIcon;
-    /** Prefiks som vises før inputfeltet. */
+    /**
+     * Prefiks som vises før inputfeltet.
+     * OBS! Prefiks leses ikke av skjermleser og skal derfor ikke brukes som en erstatter
+     * for en beskrivende label. */
     prefix?: string;
-    /** Suffiks som vises etter inputfeltet. */
+    /**
+     * Suffiks som vises etter inputfeltet.
+     * OBS! Suffiks leses ikke av skjermleser og skal derfor ikke brukes som en erstatter
+     * for en beskrivende label. */
     suffix?: string;
 };
 export type TextAffixProps = {

package/dist/cjs/icons/tsx/hourglassBottom.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgProps } from '../utils/propTypes';
+export declare function HourglassBottom(props: SvgProps): JSX.Element;

package/dist/cjs/icons/tsx/hourglassDisabled.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgProps } from '../utils/propTypes';
+export declare function HourglassDisabled(props: SvgProps): JSX.Element;

package/dist/cjs/icons/tsx/hourglassEmpty.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgProps } from '../utils/propTypes';
+export declare function HourglassEmpty(props: SvgProps): JSX.Element;

package/dist/cjs/icons/tsx/hourglassFull.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgProps } from '../utils/propTypes';
+export declare function HourglassFull(props: SvgProps): JSX.Element;

package/dist/cjs/icons/tsx/hourglassTop.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgProps } from '../utils/propTypes';
+export declare function HourglassTop(props: SvgProps): JSX.Element;

package/dist/cjs/icons/tsx/index.d.ts

@@ -65,6 +65,11 @@ export * from './gavel';
 export * from './help';
 export * from './helpFilled';
 export * from './home';
+export * from './hourglassBottom';
+export * from './hourglassDisabled';
+export * from './hourglassEmpty';
+export * from './hourglassFull';
+export * from './hourglassTop';
 export * from './image';
 export * from './info';
 export * from './instagram';
@@ -113,7 +118,12 @@ export * from './settings';
 export * from './sms';
 export * from './star';
 export * from './starFilled';
+export * from './starHalfFilled';
 export * from './sync';
+export * from './thumbdown';
+export * from './thumbdownFilled';
+export * from './thumbup';
+export * from './thumbupFilled';
 export * from './time';
 export * from './tingrett';
 export * from './tip';

package/dist/cjs/icons/tsx/starHalfFilled.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgProps } from '../utils/propTypes';
+export declare function StarHalfFilled(props: SvgProps): JSX.Element;

package/dist/cjs/icons/tsx/thumbdown.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgProps } from '../utils/propTypes';
+export declare function Thumbdown(props: SvgProps): JSX.Element;

package/dist/cjs/icons/tsx/thumbdownFilled.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgProps } from '../utils/propTypes';
+export declare function ThumbdownFilled(props: SvgProps): JSX.Element;

package/dist/cjs/icons/tsx/thumbup.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgProps } from '../utils/propTypes';
+export declare function Thumbup(props: SvgProps): JSX.Element;

package/dist/cjs/icons/tsx/thumbupFilled.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgProps } from '../utils/propTypes';
+export declare function ThumbupFilled(props: SvgProps): JSX.Element;

package/dist/cjs/index.js

@@ -836,11 +836,13 @@ var StatefulInput = styled__default.default(Input$2).withConfig({
   displayName: "Inputstyles__StatefulInput",
   componentId: "sc-1oz9x8w-1"
 })(["-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");
+  var prefixLength = _ref.prefixLength,
+    readOnly = _ref.readOnly;
+  return prefixLength && (readOnly ? "".concat(prefixLength, "px !important") : "calc(".concat(input$4.affix.gap, "px + ").concat(prefixLength, "px) !important"));
 }, function (_ref2) {
-  var suffixLength = _ref2.suffixLength;
-  return suffixLength && "calc(".concat(input$4.affix.gap, "px + ").concat(suffixLength, "px) !important");
+  var suffixLength = _ref2.suffixLength,
+    readOnly = _ref2.readOnly;
+  return suffixLength && (readOnly ? "".concat(suffixLength, "px !important") : "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]));
@@ -1505,6 +1507,46 @@ function HomeIcon(props) {
   }));
 }
 
+function HourglassBottom(props) {
+  return jsxRuntime.jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsxRuntime.jsx("path", {
+      d: "m18 22-.01-6L14 12l3.99-4.01L18 2H6v6l4 4-4 3.99V22h12zM8 7.5V4h8v3.5l-4 4-4-4z"
+    })
+  }));
+}
+
+function HourglassDisabled(props) {
+  return jsxRuntime.jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsxRuntime.jsx("path", {
+      d: "M8 4h8v3.5l-2.84 2.84 1.25 1.25L18 8.01 17.99 8H18V2H6v1.17l2 2zM2.1 2.1.69 3.51l8.9 8.9L6 16l.01.01H6V22h12v-1.17l2.49 2.49 1.41-1.41L2.1 2.1zM16 20H8v-3.5l2.84-2.84L16 18.83V20z"
+    })
+  }));
+}
+
+function HourglassEmpty(props) {
+  return jsxRuntime.jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsxRuntime.jsx("path", {
+      d: "M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6zm10 14.5V20H8v-3.5l4-4 4 4zm-4-5-4-4V4h8v3.5l-4 4z"
+    })
+  }));
+}
+
+function HourglassFull(props) {
+  return jsxRuntime.jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsxRuntime.jsx("path", {
+      d: "M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6z"
+    })
+  }));
+}
+
+function HourglassTop(props) {
+  return jsxRuntime.jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsxRuntime.jsx("path", {
+      d: "m6 2 .01 6L10 12l-3.99 4.01L6 22h12v-6l-4-4 4-3.99V2H6zm10 14.5V20H8v-3.5l4-4 4 4z"
+    })
+  }));
+}
+
 function ImageIcon(props) {
   return jsxRuntime.jsx(SvgWrapper, Object.assign({}, props, {
     children: jsxRuntime.jsx("path", {
@@ -1907,6 +1949,14 @@ function StarFilledIcon(props) {
   }));
 }
 
+function StarHalfFilled(props) {
+  return jsxRuntime.jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsxRuntime.jsx("path", {
+      d: "m22 9.24-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4V6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"
+    })
+  }));
+}
+
 function SyncIcon(props) {
   return jsxRuntime.jsx(SvgWrapper, Object.assign({}, props, {
     children: jsxRuntime.jsx("path", {
@@ -1915,6 +1965,38 @@ function SyncIcon(props) {
   }));
 }
 
+function Thumbdown(props) {
+  return jsxRuntime.jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsxRuntime.jsx("path", {
+      d: "m10.89 18.28.57-2.89c.12-.59-.04-1.2-.42-1.66-.38-.46-.94-.73-1.54-.73H4v-1.08L6.57 6h8.09c.18 0 .34.16.34.34v7.84l-4.11 4.1M10 22l6.41-6.41c.38-.38.59-.89.59-1.42V6.34C17 5.05 15.95 4 14.66 4h-8.1c-.71 0-1.36.37-1.72.97l-2.67 6.15c-.11.25-.17.52-.17.8V13c0 1.1.9 2 2 2h5.5l-.92 4.65c-.05.22-.02.46.08.66.23.45.52.86.88 1.22L10 22zm10-7h2V4h-2c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1z"
+    })
+  }));
+}
+
+function ThumbdownFilled(props) {
+  return jsxRuntime.jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsxRuntime.jsx("path", {
+      d: "M22 4h-2c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h2V4zM2.17 11.12c-.11.25-.17.52-.17.8V13c0 1.1.9 2 2 2h5.5l-.92 4.65c-.05.22-.02.46.08.66.23.45.52.86.88 1.22L10 22l6.41-6.41c.38-.38.59-.89.59-1.42V6.34C17 5.05 15.95 4 14.66 4h-8.1c-.71 0-1.36.37-1.72.97l-2.67 6.15z"
+    })
+  }));
+}
+
+function Thumbup(props) {
+  return jsxRuntime.jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsxRuntime.jsx("path", {
+      d: "m13.11 5.72-.57 2.89c-.12.59.04 1.2.42 1.66.38.46.94.73 1.54.73H20v1.08L17.43 18H9.34c-.18 0-.34-.16-.34-.34V9.82l4.11-4.1M14 2 7.59 8.41C7.21 8.79 7 9.3 7 9.83v7.83C7 18.95 8.05 20 9.34 20h8.1c.71 0 1.36-.37 1.72-.97l2.67-6.15c.11-.25.17-.52.17-.8V11c0-1.1-.9-2-2-2h-5.5l.92-4.65c.05-.22.02-.46-.08-.66-.23-.45-.52-.86-.88-1.22L14 2zM4 9H2v11h2c.55 0 1-.45 1-1v-9c0-.55-.45-1-1-1z"
+    })
+  }));
+}
+
+function ThumbupFilled(props) {
+  return jsxRuntime.jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsxRuntime.jsx("path", {
+      d: "M2 20h2c.55 0 1-.45 1-1v-9c0-.55-.45-1-1-1H2v11zm19.83-7.12c.11-.25.17-.52.17-.8V11c0-1.1-.9-2-2-2h-5.5l.92-4.65c.05-.22.02-.46-.08-.66-.23-.45-.52-.86-.88-1.22L14 2 7.59 8.41C7.21 8.79 7 9.3 7 9.83v7.84C7 18.95 8.05 20 9.34 20h8.11c.7 0 1.36-.37 1.72-.97l2.66-6.15z"
+    })
+  }));
+}
+
 function TimeIcon(props) {
   return jsxRuntime.jsx(SvgWrapper, Object.assign({}, props, {
     children: jsxRuntime.jsx("path", {
@@ -4328,19 +4410,23 @@ var getWidth$1 = function getWidth(size, width) {
   }
   return defaultWidth$5;
 };
-var Prefix = styled__default.default.span.withConfig({
-  displayName: "TextInput__Prefix",
+var Affix = styled__default.default.span.withConfig({
+  displayName: "TextInput__Affix",
   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) {
+})(["position:absolute;height:100%;top:50%;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none;z-index:1;"]);
+var Prefix = styled__default.default(Affix).withConfig({
+  displayName: "TextInput__Prefix",
+  componentId: "sc-k8umq3-1"
+})(["left:0;margin-left:8px;padding-right:8px;border-right:1px solid ", ";", ";"], textInputTokens.affix.border.color, function (_ref) {
   var readOnly = _ref.readOnly;
-  return !readOnly && "1px solid ".concat(textInputTokens.affix.border.color);
+  return readOnly && styled.css(["margin-left:0;padding-right:0.5ch;border-right:none;"]);
 });
-var Suffix = styled__default.default.span.withConfig({
+var Suffix = styled__default.default(Affix).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) {
+  componentId: "sc-k8umq3-2"
+})(["right:0;margin-right:8px;padding-left:8px;border-left:1px solid ", ";", ";"], textInputTokens.affix.border.color, function (_ref2) {
   var readOnly = _ref2.readOnly;
-  return !readOnly && "1px solid ".concat(textInputTokens.affix.border.color);
+  return readOnly && styled.css(["margin-right:0;padding-left:0.5ch;border-left:none;"]);
 });
 var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var label = _a.label,
@@ -4383,6 +4469,14 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     suffixLength = _useState6[0],
     setSuffixLength = _useState6[1];
+  React.useLayoutEffect(function () {
+    if (prefixRef.current) {
+      setPrefixLength(prefixRef.current.offsetWidth);
+    }
+    if (suffixRef.current) {
+      setSuffixLength(suffixRef.current.offsetWidth);
+    }
+  }, [prefix, suffix, readOnly]);
   var onChangeHandler = function onChangeHandler(event) {
     setText(event.target.value);
     if (onChange) {
@@ -4421,14 +4515,6 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     width: getWidth$1(componentSize, width)
   };
   var showRequiredStyling = !!(required || ariaRequired);
-  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, {
@@ -11503,6 +11589,11 @@ exports.Heading = Heading;
 exports.HelpFilledIcon = HelpFilledIcon;
 exports.HelpIcon = HelpIcon;
 exports.HomeIcon = HomeIcon;
+exports.HourglassBottom = HourglassBottom;
+exports.HourglassDisabled = HourglassDisabled;
+exports.HourglassEmpty = HourglassEmpty;
+exports.HourglassFull = HourglassFull;
+exports.HourglassTop = HourglassTop;
 exports.Icon = Icon;
 exports.ImageIcon = ImageIcon;
 exports.InfoIcon = InfoIcon;
@@ -11583,6 +11674,7 @@ exports.SmsIcon = SmsIcon;
 exports.Spinner = Spinner;
 exports.SplitButton = SplitButton;
 exports.StarFilledIcon = StarFilledIcon;
+exports.StarHalfFilled = StarHalfFilled;
 exports.StarIcon = StarIcon;
 exports.StyledTextArea = StyledTextArea;
 exports.SyncIcon = SyncIcon;
@@ -11595,6 +11687,10 @@ exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.TextArea = TextArea;
 exports.TextInput = TextInput;
+exports.Thumbdown = Thumbdown;
+exports.ThumbdownFilled = ThumbdownFilled;
+exports.Thumbup = Thumbup;
+exports.ThumbupFilled = ThumbupFilled;
 exports.TimeIcon = TimeIcon;
 exports.TingrettIcon = TingrettIcon;
 exports.TipIcon = TipIcon;

package/dist/components/TextInput/TextInput.js

@@ -1,7 +1,7 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useId, useLayoutEffect } from 'react';
+import { forwardRef, useState, useRef, useLayoutEffect, useId } from 'react';
 import CharCounter from './CharCounter.js';
 import '../../helpers/Backdrop/Backdrop.js';
 import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
@@ -19,7 +19,7 @@ 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 styled, { css } from 'styled-components';
 import { textInputTokens } from './TextInput.tokens.js';
 
 var defaultWidth = '320px';
@@ -31,19 +31,23 @@ var getWidth = function getWidth(size, width) {
   }
   return defaultWidth;
 };
-var Prefix = styled.span.withConfig({
-  displayName: "TextInput__Prefix",
+var Affix = styled.span.withConfig({
+  displayName: "TextInput__Affix",
   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) {
+})(["position:absolute;height:100%;top:50%;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none;z-index:1;"]);
+var Prefix = styled(Affix).withConfig({
+  displayName: "TextInput__Prefix",
+  componentId: "sc-k8umq3-1"
+})(["left:0;margin-left:8px;padding-right:8px;border-right:1px solid ", ";", ";"], textInputTokens.affix.border.color, function (_ref) {
   var readOnly = _ref.readOnly;
-  return !readOnly && "1px solid ".concat(textInputTokens.affix.border.color);
+  return readOnly && css(["margin-left:0;padding-right:0.5ch;border-right:none;"]);
 });
-var Suffix = styled.span.withConfig({
+var Suffix = styled(Affix).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) {
+  componentId: "sc-k8umq3-2"
+})(["right:0;margin-right:8px;padding-left:8px;border-left:1px solid ", ";", ";"], textInputTokens.affix.border.color, function (_ref2) {
   var readOnly = _ref2.readOnly;
-  return !readOnly && "1px solid ".concat(textInputTokens.affix.border.color);
+  return readOnly && css(["margin-right:0;padding-left:0.5ch;border-left:none;"]);
 });
 var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var label = _a.label,
@@ -86,6 +90,14 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     suffixLength = _useState6[0],
     setSuffixLength = _useState6[1];
+  useLayoutEffect(function () {
+    if (prefixRef.current) {
+      setPrefixLength(prefixRef.current.offsetWidth);
+    }
+    if (suffixRef.current) {
+      setSuffixLength(suffixRef.current.offsetWidth);
+    }
+  }, [prefix, suffix, readOnly]);
   var onChangeHandler = function onChangeHandler(event) {
     setText(event.target.value);
     if (onChange) {
@@ -124,14 +136,6 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     width: getWidth(componentSize, width)
   };
   var showRequiredStyling = !!(required || ariaRequired);
-  useLayoutEffect(function () {
-    if (prefixRef.current) {
-      setPrefixLength(prefixRef.current.offsetWidth);
-    }
-    if (suffixRef.current) {
-      setSuffixLength(suffixRef.current.offsetWidth);
-    }
-  }, []);
   var extendedInput = null;
   if (hasIcon) {
     extendedInput = jsxs(InputContainer, {

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

@@ -45,6 +45,16 @@ declare const _default: {
                 type: string;
             };
         };
+        prefix: {
+            control: {
+                type: string;
+            };
+        };
+        suffix: {
+            control: {
+                type: string;
+            };
+        };
     };
     parameters: {
         controls: {

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

@@ -5,9 +5,15 @@ export type TextInputProps = InputProps & {
     withCharacterCounter?: boolean;
     /** Ikonet som vises i komponenten. */
     icon?: SvgIcon;
-    /** Prefiks som vises før inputfeltet. */
+    /**
+     * Prefiks som vises før inputfeltet.
+     * OBS! Prefiks leses ikke av skjermleser og skal derfor ikke brukes som en erstatter
+     * for en beskrivende label. */
     prefix?: string;
-    /** Suffiks som vises etter inputfeltet. */
+    /**
+     * Suffiks som vises etter inputfeltet.
+     * OBS! Suffiks leses ikke av skjermleser og skal derfor ikke brukes som en erstatter
+     * for en beskrivende label. */
     suffix?: string;
 };
 export type TextAffixProps = {

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

@@ -17,11 +17,13 @@ var StatefulInput = styled(Input).withConfig({
   displayName: "Inputstyles__StatefulInput",
   componentId: "sc-1oz9x8w-1"
 })(["-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");
+  var prefixLength = _ref.prefixLength,
+    readOnly = _ref.readOnly;
+  return prefixLength && (readOnly ? "".concat(prefixLength, "px !important") : "calc(".concat(input.affix.gap, "px + ").concat(prefixLength, "px) !important"));
 }, function (_ref2) {
-  var suffixLength = _ref2.suffixLength;
-  return suffixLength && "calc(".concat(input.affix.gap, "px + ").concat(suffixLength, "px) !important");
+  var suffixLength = _ref2.suffixLength,
+    readOnly = _ref2.readOnly;
+  return suffixLength && (readOnly ? "".concat(suffixLength, "px !important") : "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]));

package/dist/icons/tsx/hourglassBottom.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgProps } from '../utils/propTypes';
+export declare function HourglassBottom(props: SvgProps): JSX.Element;

package/dist/icons/tsx/hourglassBottom.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { SvgWrapper } from '../utils/SvgWrapper.js';
+
+function HourglassBottom(props) {
+  return jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsx("path", {
+      d: "m18 22-.01-6L14 12l3.99-4.01L18 2H6v6l4 4-4 3.99V22h12zM8 7.5V4h8v3.5l-4 4-4-4z"
+    })
+  }));
+}
+
+export { HourglassBottom };

package/dist/icons/tsx/hourglassDisabled.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgProps } from '../utils/propTypes';
+export declare function HourglassDisabled(props: SvgProps): JSX.Element;

package/dist/icons/tsx/hourglassDisabled.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { SvgWrapper } from '../utils/SvgWrapper.js';
+
+function HourglassDisabled(props) {
+  return jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsx("path", {
+      d: "M8 4h8v3.5l-2.84 2.84 1.25 1.25L18 8.01 17.99 8H18V2H6v1.17l2 2zM2.1 2.1.69 3.51l8.9 8.9L6 16l.01.01H6V22h12v-1.17l2.49 2.49 1.41-1.41L2.1 2.1zM16 20H8v-3.5l2.84-2.84L16 18.83V20z"
+    })
+  }));
+}
+
+export { HourglassDisabled };

package/dist/icons/tsx/hourglassEmpty.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgProps } from '../utils/propTypes';
+export declare function HourglassEmpty(props: SvgProps): JSX.Element;

package/dist/icons/tsx/hourglassEmpty.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { SvgWrapper } from '../utils/SvgWrapper.js';
+
+function HourglassEmpty(props) {
+  return jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsx("path", {
+      d: "M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6zm10 14.5V20H8v-3.5l4-4 4 4zm-4-5-4-4V4h8v3.5l-4 4z"
+    })
+  }));
+}
+
+export { HourglassEmpty };

package/dist/icons/tsx/hourglassFull.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgProps } from '../utils/propTypes';
+export declare function HourglassFull(props: SvgProps): JSX.Element;

package/dist/icons/tsx/hourglassFull.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { SvgWrapper } from '../utils/SvgWrapper.js';
+
+function HourglassFull(props) {
+  return jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsx("path", {
+      d: "M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6z"
+    })
+  }));
+}
+
+export { HourglassFull };

package/dist/icons/tsx/hourglassTop.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgProps } from '../utils/propTypes';
+export declare function HourglassTop(props: SvgProps): JSX.Element;

package/dist/icons/tsx/hourglassTop.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { SvgWrapper } from '../utils/SvgWrapper.js';
+
+function HourglassTop(props) {
+  return jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsx("path", {
+      d: "m6 2 .01 6L10 12l-3.99 4.01L6 22h12v-6l-4-4 4-3.99V2H6zm10 14.5V20H8v-3.5l4-4 4 4z"
+    })
+  }));
+}
+
+export { HourglassTop };

package/dist/icons/tsx/index.d.ts

@@ -65,6 +65,11 @@ export * from './gavel';
 export * from './help';
 export * from './helpFilled';
 export * from './home';
+export * from './hourglassBottom';
+export * from './hourglassDisabled';
+export * from './hourglassEmpty';
+export * from './hourglassFull';
+export * from './hourglassTop';
 export * from './image';
 export * from './info';
 export * from './instagram';
@@ -113,7 +118,12 @@ export * from './settings';
 export * from './sms';
 export * from './star';
 export * from './starFilled';
+export * from './starHalfFilled';
 export * from './sync';
+export * from './thumbdown';
+export * from './thumbdownFilled';
+export * from './thumbup';
+export * from './thumbupFilled';
 export * from './time';
 export * from './tingrett';
 export * from './tip';

package/dist/icons/tsx/starHalfFilled.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgProps } from '../utils/propTypes';
+export declare function StarHalfFilled(props: SvgProps): JSX.Element;

package/dist/icons/tsx/starHalfFilled.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { SvgWrapper } from '../utils/SvgWrapper.js';
+
+function StarHalfFilled(props) {
+  return jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsx("path", {
+      d: "m22 9.24-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4V6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"
+    })
+  }));
+}
+
+export { StarHalfFilled };

package/dist/icons/tsx/thumbdown.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgProps } from '../utils/propTypes';
+export declare function Thumbdown(props: SvgProps): JSX.Element;

package/dist/icons/tsx/thumbdown.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { SvgWrapper } from '../utils/SvgWrapper.js';
+
+function Thumbdown(props) {
+  return jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsx("path", {
+      d: "m10.89 18.28.57-2.89c.12-.59-.04-1.2-.42-1.66-.38-.46-.94-.73-1.54-.73H4v-1.08L6.57 6h8.09c.18 0 .34.16.34.34v7.84l-4.11 4.1M10 22l6.41-6.41c.38-.38.59-.89.59-1.42V6.34C17 5.05 15.95 4 14.66 4h-8.1c-.71 0-1.36.37-1.72.97l-2.67 6.15c-.11.25-.17.52-.17.8V13c0 1.1.9 2 2 2h5.5l-.92 4.65c-.05.22-.02.46.08.66.23.45.52.86.88 1.22L10 22zm10-7h2V4h-2c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1z"
+    })
+  }));
+}
+
+export { Thumbdown };

package/dist/icons/tsx/thumbdownFilled.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgProps } from '../utils/propTypes';
+export declare function ThumbdownFilled(props: SvgProps): JSX.Element;

package/dist/icons/tsx/thumbdownFilled.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { SvgWrapper } from '../utils/SvgWrapper.js';
+
+function ThumbdownFilled(props) {
+  return jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsx("path", {
+      d: "M22 4h-2c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h2V4zM2.17 11.12c-.11.25-.17.52-.17.8V13c0 1.1.9 2 2 2h5.5l-.92 4.65c-.05.22-.02.46.08.66.23.45.52.86.88 1.22L10 22l6.41-6.41c.38-.38.59-.89.59-1.42V6.34C17 5.05 15.95 4 14.66 4h-8.1c-.71 0-1.36.37-1.72.97l-2.67 6.15z"
+    })
+  }));
+}
+
+export { ThumbdownFilled };

package/dist/icons/tsx/thumbup.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgProps } from '../utils/propTypes';
+export declare function Thumbup(props: SvgProps): JSX.Element;

package/dist/icons/tsx/thumbup.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { SvgWrapper } from '../utils/SvgWrapper.js';
+
+function Thumbup(props) {
+  return jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsx("path", {
+      d: "m13.11 5.72-.57 2.89c-.12.59.04 1.2.42 1.66.38.46.94.73 1.54.73H20v1.08L17.43 18H9.34c-.18 0-.34-.16-.34-.34V9.82l4.11-4.1M14 2 7.59 8.41C7.21 8.79 7 9.3 7 9.83v7.83C7 18.95 8.05 20 9.34 20h8.1c.71 0 1.36-.37 1.72-.97l2.67-6.15c.11-.25.17-.52.17-.8V11c0-1.1-.9-2-2-2h-5.5l.92-4.65c.05-.22.02-.46-.08-.66-.23-.45-.52-.86-.88-1.22L14 2zM4 9H2v11h2c.55 0 1-.45 1-1v-9c0-.55-.45-1-1-1z"
+    })
+  }));
+}
+
+export { Thumbup };

package/dist/icons/tsx/thumbupFilled.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgProps } from '../utils/propTypes';
+export declare function ThumbupFilled(props: SvgProps): JSX.Element;

package/dist/icons/tsx/thumbupFilled.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { SvgWrapper } from '../utils/SvgWrapper.js';
+
+function ThumbupFilled(props) {
+  return jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsx("path", {
+      d: "M2 20h2c.55 0 1-.45 1-1v-9c0-.55-.45-1-1-1H2v11zm19.83-7.12c.11-.25.17-.52.17-.8V11c0-1.1-.9-2-2-2h-5.5l.92-4.65c.05-.22.02-.46-.08-.66-.23-.45-.52-.86-.88-1.22L14 2 7.59 8.41C7.21 8.79 7 9.3 7 9.83v7.84C7 18.95 8.05 20 9.34 20h8.11c.7 0 1.36-.37 1.72-.97l2.66-6.15z"
+    })
+  }));
+}
+
+export { ThumbupFilled };

package/dist/index.js

@@ -128,6 +128,11 @@ export { GavelIcon } from './icons/tsx/gavel.js';
 export { HelpIcon } from './icons/tsx/help.js';
 export { HelpFilledIcon } from './icons/tsx/helpFilled.js';
 export { HomeIcon } from './icons/tsx/home.js';
+export { HourglassBottom } from './icons/tsx/hourglassBottom.js';
+export { HourglassDisabled } from './icons/tsx/hourglassDisabled.js';
+export { HourglassEmpty } from './icons/tsx/hourglassEmpty.js';
+export { HourglassFull } from './icons/tsx/hourglassFull.js';
+export { HourglassTop } from './icons/tsx/hourglassTop.js';
 export { ImageIcon } from './icons/tsx/image.js';
 export { InfoIcon } from './icons/tsx/info.js';
 export { InstagramIcon } from './icons/tsx/instagram.js';
@@ -176,7 +181,12 @@ export { SettingsIcon } from './icons/tsx/settings.js';
 export { SmsIcon } from './icons/tsx/sms.js';
 export { StarIcon } from './icons/tsx/star.js';
 export { StarFilledIcon } from './icons/tsx/starFilled.js';
+export { StarHalfFilled } from './icons/tsx/starHalfFilled.js';
 export { SyncIcon } from './icons/tsx/sync.js';
+export { Thumbdown } from './icons/tsx/thumbdown.js';
+export { ThumbdownFilled } from './icons/tsx/thumbdownFilled.js';
+export { Thumbup } from './icons/tsx/thumbup.js';
+export { ThumbupFilled } from './icons/tsx/thumbupFilled.js';
 export { TimeIcon } from './icons/tsx/time.js';
 export { TingrettIcon } from './icons/tsx/tingrett.js';
 export { TipIcon } from './icons/tsx/tip.js';

package/package.json

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