@norges-domstoler/dds-components 7.0.0 → 7.0.1

package/dist/cjs/components/Checkbox/CheckboxGroup.stories.d.ts

@@ -8,6 +8,11 @@ declare const _default: {
                 type: string;
             };
         };
+        tip: {
+            control: {
+                type: string;
+            };
+        };
         errorMessage: {
             control: {
                 type: string;

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

@@ -2,7 +2,6 @@ export declare const inputMessageTokens: {
     message: {
         tip: {
             backgroundColor: string;
-            padding: string;
         };
         error: {
             padding: string;

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

@@ -144,6 +144,10 @@ export declare const selectTokens: {
             color: string;
             backgroundColor: string;
         };
+        focus: {
+            color: string;
+            backgroundColor: string;
+        };
         selected: {
             lineHeight: any;
             fontSize: string;

package/dist/cjs/index.js

@@ -3179,7 +3179,7 @@ var getMarginStyling = function getMarginStyling(typographyType, element, withMa
   return withMargins ? styled.css(["", " margin-top:", ";margin-bottom:", ";", ""], isInlineElement(element) && element !== 'a' && styled.css(["display:block;"]), typographyTokens.typographyType[typographyType].margins.marginTop, typographyTokens.typographyType[typographyType].margins.marginBottom, styled.css(["padding-top:", ";"], typographyTokens.typographyType[typographyType].margins.paddingTop)) : styled.css(["margin:0;"]);
 };
 var getAnchorStyling = function getAnchorStyling(external, interactionStyling, typographyType, withMargins) {
-  return styled.css(["", " width:fit-content;text-decoration:underline;@media (prefers-reduced-motion:no-preference){transition:", ";}", " &:hover{color:", ";", "}", " &:focus-visible,&.focus-visible,&:focus-visible::selection,&.focus-visible::selection{", "}"], typographyType ? styled.css(["", ";color:", ";", ""], typographyTokens.typographyType[typographyType].base.font, typographyTokens.typographyType[typographyType].base.color, getMarginStyling(typographyType, 'a', withMargins)) : styled.css(["font:inherit;color:", ";", ""], typographyTokens.typographyType.a.base.color, getMarginStyling('a', 'a', withMargins)), focusVisibleLinkTransitionValue, external ? styled.css(["display:inline-flex;align-items:center;gap:", ";"], typographyTokens.typographyType.a.base.gap) : '', typographyTokens.typographyType.a.hover.color, interactionStyling && interactionStyling.hover && styled.css(["", ""], interactionStyling.hover), interactionStyling && interactionStyling.active && styled.css(["&:active{", "}"], interactionStyling.active), focusVisibleLink);
+  return styled.css(["", " color:", ";width:fit-content;text-decoration:underline;@media (prefers-reduced-motion:no-preference){transition:", ";}", " &:hover{color:", ";", "}", " &:focus-visible,&.focus-visible,&:focus-visible::selection,&.focus-visible::selection{", "}"], typographyType ? styled.css(["", ";", ""], typographyTokens.typographyType[typographyType].base.font, getMarginStyling(typographyType, 'a', withMargins)) : styled.css(["font:inherit;", ""], getMarginStyling('a', 'a', withMargins)), typographyTokens.typographyType.a.base.color, focusVisibleLinkTransitionValue, external && styled.css(["display:inline-flex;align-items:center;gap:", ";"], typographyTokens.typographyType.a.base.gap), typographyTokens.typographyType.a.hover.color, interactionStyling && interactionStyling.hover && styled.css(["", ""], interactionStyling.hover), interactionStyling && interactionStyling.active && styled.css(["&:active{", "}"], interactionStyling.active), focusVisibleLink);
 };
 
 var combineHandlers = function combineHandlers(handler1, handler2) {
@@ -4086,8 +4086,7 @@ var colors$b = ddsDesignTokens.ddsBaseTokens.colors,
     spacing$e = ddsDesignTokens.ddsBaseTokens.spacing;
 var message = {
   tip: {
-    backgroundColor: colors$b.DdsColorNeutralsWhite,
-    padding: "".concat(spacing$e.SizesDdsSpacingLocalX025, " 0")
+    backgroundColor: colors$b.DdsColorNeutralsWhite
   },
   error: {
     padding: "".concat(spacing$e.SizesDdsSpacingLocalX025, " ").concat(spacing$e.SizesDdsSpacingLocalX05),
@@ -4109,7 +4108,7 @@ var InputMessageWrapper = styled__default["default"].div.withConfig({
   componentId: "sc-c954fy-0"
 })(["display:flex;width:fit-content;word-break:break-word;max-width:100%;", " svg{margin-top:", ";}"], function (_ref) {
   var messageType = _ref.messageType;
-  return messageType === 'tip' ? styled.css(["background-color:", ";padding:", ";"], inputMessageTokens.message.tip.backgroundColor, inputMessageTokens.message.tip.padding) : messageType === 'error' ? styled.css(["color:", ";background-color:", ";padding:", ";gap:", ";"], inputMessageTokens.message.error.color, inputMessageTokens.message.error.backgroundColor, inputMessageTokens.message.error.padding, inputMessageTokens.message.error.gap) : '';
+  return messageType === 'tip' ? styled.css(["background-color:", ";"], inputMessageTokens.message.tip.backgroundColor) : messageType === 'error' ? styled.css(["color:", ";background-color:", ";padding:", ";gap:", ";"], inputMessageTokens.message.error.color, inputMessageTokens.message.error.backgroundColor, inputMessageTokens.message.error.padding, inputMessageTokens.message.error.gap) : '';
 }, inputMessageTokens.icon.marginTop);
 var InputMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var message = props.message,
@@ -4139,19 +4138,19 @@ var InputMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var Spacing$j = ddsDesignTokens.ddsBaseTokens.spacing;
+var Spacing$i = ddsDesignTokens.ddsBaseTokens.spacing;
 var groupContainerRowBase = {
-  gap: Spacing$j.SizesDdsSpacingLocalX075
+  gap: Spacing$i.SizesDdsSpacingLocalX075
 };
 var groupContainerColumnBase = {
-  gap: Spacing$j.SizesDdsSpacingLocalX05
+  gap: Spacing$i.SizesDdsSpacingLocalX05
 };
 var containerBase$5 = {
-  gap: Spacing$j.SizesDdsSpacingLocalX0125
+  gap: Spacing$i.SizesDdsSpacingLocalX0125
 };
 var radioButtonGroupTokens = {
   label: {
-    spaceLeft: Spacing$j.SizesDdsSpacingLocalX025
+    spaceLeft: Spacing$i.SizesDdsSpacingLocalX025
   },
   container: {
     base: containerBase$5
@@ -4424,7 +4423,7 @@ var CheckboxGroup = function CheckboxGroup(props) {
 
 var Colors$d = ddsDesignTokens.ddsBaseTokens.colors,
     Border$9 = ddsDesignTokens.ddsBaseTokens.border,
-    Spacing$i = ddsDesignTokens.ddsBaseTokens.spacing,
+    Spacing$h = ddsDesignTokens.ddsBaseTokens.spacing,
     FontPackages$9 = ddsDesignTokens.ddsBaseTokens.fontPackages,
     BorderRadius$4 = ddsDesignTokens.ddsBaseTokens.borderRadius,
     OuterShadow$4 = ddsDesignTokens.ddsBaseTokens.outerShadow;
@@ -4432,50 +4431,50 @@ var iconSizeTinyPx = calculateHeightWithLineHeight(FontPackages$9.supportingStyl
 var iconSizeSmallPx = calculateHeightWithLineHeight(FontPackages$9.body_sans_01.numbers.lineHeightNumber, FontPackages$9.body_sans_01.numbers.fontSizeNumber);
 var iconSizeMediumPx = calculateHeightWithLineHeight(FontPackages$9.body_sans_02.numbers.lineHeightNumber, FontPackages$9.body_sans_02.numbers.fontSizeNumber);
 var iconSizeLargePx = calculateHeightWithLineHeight(FontPackages$9.body_sans_04.numbers.lineHeightNumber, FontPackages$9.body_sans_04.numbers.fontSizeNumber);
-var svgOffset = Spacing$i.SizesDdsSpacingLocalX0125NumberPx;
+var svgOffset = Spacing$h.SizesDdsSpacingLocalX0125NumberPx;
 var justIconSmallBase = {
   fontSize: "".concat(iconSizeSmallPx + svgOffset, "px"),
-  padding: Spacing$i.SizesDdsSpacingLocalX05
+  padding: Spacing$h.SizesDdsSpacingLocalX05
 };
 var justIconWrapperSmallBase = {
   height: "".concat(iconSizeSmallPx, "px"),
   width: "".concat(iconSizeSmallPx, "px")
 };
 var textSmallBase = Object.assign(Object.assign({}, FontPackages$9.body_sans_01.base), {
-  padding: "".concat(Spacing$i.SizesDdsSpacingLocalX05, " ").concat(Spacing$i.SizesDdsSpacingLocalX1NumberPx - 2, "px")
+  padding: "".concat(Spacing$h.SizesDdsSpacingLocalX05, " ").concat(Spacing$h.SizesDdsSpacingLocalX1NumberPx - 2, "px")
 });
 var justIconMediumBase = {
   fontSize: "".concat(iconSizeMediumPx + svgOffset, "px"),
-  padding: Spacing$i.SizesDdsSpacingLocalX075
+  padding: Spacing$h.SizesDdsSpacingLocalX075
 };
 var justIconWrapperMediumBase = {
   height: "".concat(iconSizeMediumPx, "px"),
   width: "".concat(iconSizeMediumPx, "px")
 };
 var textMediumBase = Object.assign(Object.assign({}, FontPackages$9.body_sans_02.base), {
-  padding: "".concat(Spacing$i.SizesDdsSpacingLocalX075, " ").concat(Spacing$i.SizesDdsSpacingLocalX15NumberPx - 2, "px")
+  padding: "".concat(Spacing$h.SizesDdsSpacingLocalX075, " ").concat(Spacing$h.SizesDdsSpacingLocalX15NumberPx - 2, "px")
 });
 var justIconLargeBase = {
   fontSize: "".concat(iconSizeLargePx + svgOffset, "px"),
-  padding: Spacing$i.SizesDdsSpacingLocalX1
+  padding: Spacing$h.SizesDdsSpacingLocalX1
 };
 var justIconWrapperLargeBase = {
   height: "".concat(iconSizeLargePx, "px"),
   width: "".concat(iconSizeLargePx, "px")
 };
 var textLargeBase = Object.assign(Object.assign({}, FontPackages$9.body_sans_04.base), {
-  padding: "".concat(Spacing$i.SizesDdsSpacingLocalX1, " ").concat(Spacing$i.SizesDdsSpacingLocalX2NumberPx - 2, "px")
+  padding: "".concat(Spacing$h.SizesDdsSpacingLocalX1, " ").concat(Spacing$h.SizesDdsSpacingLocalX2NumberPx - 2, "px")
 });
 var justIconTinyBase = {
   fontSize: "".concat(iconSizeTinyPx + svgOffset, "px"),
-  padding: Spacing$i.SizesDdsSpacingLocalX025
+  padding: Spacing$h.SizesDdsSpacingLocalX025
 };
 var justIconWrapperTinyBase = {
   height: "".concat(iconSizeTinyPx, "px"),
   width: "".concat(iconSizeTinyPx, "px")
 };
 var textTinyBase = Object.assign(Object.assign({}, FontPackages$9.supportingStyle_tiny_01.base), {
-  padding: "".concat(Spacing$i.SizesDdsSpacingLocalX025, " ").concat(Spacing$i.SizesDdsSpacingLocalX075)
+  padding: "".concat(Spacing$h.SizesDdsSpacingLocalX025, " ").concat(Spacing$h.SizesDdsSpacingLocalX075)
 });
 var buttonBase$1 = {
   border: "".concat(Border$9.BordersDdsBorderStyleLightStrokeWeight, " solid")
@@ -4693,7 +4692,7 @@ var buttonTokens = {
       text: {
         base: textSmallBase
       },
-      iconWithTextMargin: Spacing$i.SizesDdsSpacingLocalX05
+      iconWithTextMargin: Spacing$h.SizesDdsSpacingLocalX05
     },
     medium: {
       justIcon: {
@@ -4705,7 +4704,7 @@ var buttonTokens = {
       text: {
         base: textMediumBase
       },
-      iconWithTextMargin: Spacing$i.SizesDdsSpacingLocalX075
+      iconWithTextMargin: Spacing$h.SizesDdsSpacingLocalX075
     },
     large: {
       justIcon: {
@@ -4717,7 +4716,7 @@ var buttonTokens = {
       text: {
         base: textLargeBase
       },
-      iconWithTextMargin: Spacing$i.SizesDdsSpacingLocalX1
+      iconWithTextMargin: Spacing$h.SizesDdsSpacingLocalX1
     },
     tiny: {
       justIcon: {
@@ -4729,7 +4728,7 @@ var buttonTokens = {
       text: {
         base: textTinyBase
       },
-      iconWithTextMargin: Spacing$i.SizesDdsSpacingLocalX05
+      iconWithTextMargin: Spacing$h.SizesDdsSpacingLocalX05
     }
   },
   appearance: {
@@ -5085,18 +5084,10 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var Spacing$h = ddsDesignTokens.ddsBaseTokens.spacing;
-var charCounterBase = {
-  padding: "".concat(Spacing$h.SizesDdsSpacingLocalX025, " ").concat(Spacing$h.SizesDdsSpacingLocalX05)
-};
-var charCounterTokens = {
-  base: charCounterBase
-};
-
 var Wrapper$6 = styled__default["default"](Typography).withConfig({
   displayName: "CharCounter__Wrapper",
   componentId: "sc-qty1z2-0"
-})(["margin-left:auto;", ""], charCounterTokens.base);
+})(["margin-left:auto;"]);
 
 function CharCounter(props) {
   var current = props.current,
@@ -5728,6 +5719,10 @@ var option = {
     color: textDefault$4.textColor,
     backgroundColor: colors$8.DdsColorInteractiveLightest
   },
+  focus: {
+    color: textDefault$4.textColor,
+    backgroundColor: colors$8.DdsColorInteractiveLightest
+  },
   selected: Object.assign({
     backgroundColor: colors$8.DdsColorNeutralsWhite
   }, fontPackages$7.body_sans_02.base),
@@ -5997,7 +5992,10 @@ var getCustomStyles = function getCustomStyles() {
         }
       }), state.isSelected && {
         backgroundColor: _option.selected.backgroundColor
-      }), state.isFocused && focusVisibleLink);
+      }), state.isFocused && {
+        color: _option.focus.color,
+        backgroundColor: _option.focus.backgroundColor
+      });
     },
     noOptionsMessage: function noOptionsMessage() {
       return Object.assign({

package/dist/components/Checkbox/CheckboxGroup.stories.d.ts

@@ -8,6 +8,11 @@ declare const _default: {
                 type: string;
             };
         };
+        tip: {
+            control: {
+                type: string;
+            };
+        };
         errorMessage: {
             control: {
                 type: string;

package/dist/components/InputMessage/InputMessage.js

@@ -15,7 +15,7 @@ var InputMessageWrapper = styled.div.withConfig({
   componentId: "sc-c954fy-0"
 })(["display:flex;width:fit-content;word-break:break-word;max-width:100%;", " svg{margin-top:", ";}"], function (_ref) {
   var messageType = _ref.messageType;
-  return messageType === 'tip' ? css(["background-color:", ";padding:", ";"], inputMessageTokens.message.tip.backgroundColor, inputMessageTokens.message.tip.padding) : messageType === 'error' ? css(["color:", ";background-color:", ";padding:", ";gap:", ";"], inputMessageTokens.message.error.color, inputMessageTokens.message.error.backgroundColor, inputMessageTokens.message.error.padding, inputMessageTokens.message.error.gap) : '';
+  return messageType === 'tip' ? css(["background-color:", ";"], inputMessageTokens.message.tip.backgroundColor) : messageType === 'error' ? css(["color:", ";background-color:", ";padding:", ";gap:", ";"], inputMessageTokens.message.error.color, inputMessageTokens.message.error.backgroundColor, inputMessageTokens.message.error.padding, inputMessageTokens.message.error.gap) : '';
 }, inputMessageTokens.icon.marginTop);
 var InputMessage = /*#__PURE__*/forwardRef(function (props, ref) {
   var message = props.message,

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

@@ -2,7 +2,6 @@ export declare const inputMessageTokens: {
     message: {
         tip: {
             backgroundColor: string;
-            padding: string;
         };
         error: {
             padding: string;

package/dist/components/InputMessage/InputMessage.tokens.js

@@ -4,8 +4,7 @@ var colors = ddsBaseTokens.colors,
     spacing = ddsBaseTokens.spacing;
 var message = {
   tip: {
-    backgroundColor: colors.DdsColorNeutralsWhite,
-    padding: "".concat(spacing.SizesDdsSpacingLocalX025, " 0")
+    backgroundColor: colors.DdsColorNeutralsWhite
   },
   error: {
     padding: "".concat(spacing.SizesDdsSpacingLocalX025, " ").concat(spacing.SizesDdsSpacingLocalX05),

package/dist/components/Select/Select.styles.js

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { focusVisibleLink } from '../../helpers/styling/focusVisible.js';
+import '../../helpers/styling/focusVisible.js';
 import { hoverDangerInputfield, hoverInputfield } from '../../helpers/styling/hover.js';
 import { focusInputfield } from '../../helpers/styling/focus.js';
 import { dangerInputfield } from '../../helpers/styling/danger.js';
@@ -199,7 +199,10 @@ var getCustomStyles = function getCustomStyles() {
         }
       }), state.isSelected && {
         backgroundColor: _option.selected.backgroundColor
-      }), state.isFocused && focusVisibleLink);
+      }), state.isFocused && {
+        color: _option.focus.color,
+        backgroundColor: _option.focus.backgroundColor
+      });
     },
     noOptionsMessage: function noOptionsMessage() {
       return Object.assign({

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

@@ -144,6 +144,10 @@ export declare const selectTokens: {
             color: string;
             backgroundColor: string;
         };
+        focus: {
+            color: string;
+            backgroundColor: string;
+        };
         selected: {
             lineHeight: any;
             fontSize: string;

package/dist/components/Select/Select.tokens.js

@@ -112,6 +112,10 @@ var option = {
     color: textDefault.textColor,
     backgroundColor: colors.DdsColorInteractiveLightest
   },
+  focus: {
+    color: textDefault.textColor,
+    backgroundColor: colors.DdsColorInteractiveLightest
+  },
   selected: Object.assign({
     backgroundColor: colors.DdsColorNeutralsWhite
   }, fontPackages.body_sans_02.base),

package/dist/components/TextInput/CharCounter.js

@@ -5,12 +5,11 @@ import styled from 'styled-components';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { Typography } from '../Typography/Typography/Typography.js';
 import '../Typography/Link/Link.js';
-import { charCounterTokens } from './CharCounter.tokens.js';
 
 var Wrapper = styled(Typography).withConfig({
   displayName: "CharCounter__Wrapper",
   componentId: "sc-qty1z2-0"
-})(["margin-left:auto;", ""], charCounterTokens.base);
+})(["margin-left:auto;"]);
 
 function CharCounter(props) {
   var current = props.current,

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

@@ -64,7 +64,7 @@ var getMarginStyling = function getMarginStyling(typographyType, element, withMa
   return withMargins ? css(["", " margin-top:", ";margin-bottom:", ";", ""], isInlineElement(element) && element !== 'a' && css(["display:block;"]), typographyTokens.typographyType[typographyType].margins.marginTop, typographyTokens.typographyType[typographyType].margins.marginBottom, css(["padding-top:", ";"], typographyTokens.typographyType[typographyType].margins.paddingTop)) : css(["margin:0;"]);
 };
 var getAnchorStyling = function getAnchorStyling(external, interactionStyling, typographyType, withMargins) {
-  return css(["", " width:fit-content;text-decoration:underline;@media (prefers-reduced-motion:no-preference){transition:", ";}", " &:hover{color:", ";", "}", " &:focus-visible,&.focus-visible,&:focus-visible::selection,&.focus-visible::selection{", "}"], typographyType ? css(["", ";color:", ";", ""], typographyTokens.typographyType[typographyType].base.font, typographyTokens.typographyType[typographyType].base.color, getMarginStyling(typographyType, 'a', withMargins)) : css(["font:inherit;color:", ";", ""], typographyTokens.typographyType.a.base.color, getMarginStyling('a', 'a', withMargins)), focusVisibleLinkTransitionValue, external ? css(["display:inline-flex;align-items:center;gap:", ";"], typographyTokens.typographyType.a.base.gap) : '', typographyTokens.typographyType.a.hover.color, interactionStyling && interactionStyling.hover && css(["", ""], interactionStyling.hover), interactionStyling && interactionStyling.active && css(["&:active{", "}"], interactionStyling.active), focusVisibleLink);
+  return css(["", " color:", ";width:fit-content;text-decoration:underline;@media (prefers-reduced-motion:no-preference){transition:", ";}", " &:hover{color:", ";", "}", " &:focus-visible,&.focus-visible,&:focus-visible::selection,&.focus-visible::selection{", "}"], typographyType ? css(["", ";", ""], typographyTokens.typographyType[typographyType].base.font, getMarginStyling(typographyType, 'a', withMargins)) : css(["font:inherit;", ""], getMarginStyling('a', 'a', withMargins)), typographyTokens.typographyType.a.base.color, focusVisibleLinkTransitionValue, external && css(["display:inline-flex;align-items:center;gap:", ";"], typographyTokens.typographyType.a.base.gap), typographyTokens.typographyType.a.hover.color, interactionStyling && interactionStyling.hover && css(["", ""], interactionStyling.hover), interactionStyling && interactionStyling.active && css(["&:active{", "}"], interactionStyling.active), focusVisibleLink);
 };
 
 export { getAdditionalFontStyle, getAnchorStyling, getElementType, getMarginStyling, inlineElements, isInlineElement };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",
@@ -24,7 +24,7 @@
     "test:watch": "jest --watch",
     "build": "rollup -c",
     "build:watch": "rollup -c -w",
-    "storybook": "start-storybook -p 6006 -s ./.storybook/images",
+    "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook -o docs",
     "lint": "eslint --ext=jsx,ts,tsx src",
     "prettier": "prettier --write .",
@@ -47,49 +47,47 @@
     "elsa"
   ],
   "devDependencies": {
-    "@babel/core": "^7.18.10",
-    "@babel/preset-env": "^7.18.10",
+    "@babel/core": "^7.19.1",
+    "@babel/preset-env": "^7.19.1",
     "@babel/preset-react": "^7.18.6",
     "@mdx-js/react": "^2.1.3",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-node-resolve": "^14.1.0",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-links": "^6.5.10",
-    "@storybook/addons": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addons": "^6.5.12",
     "@storybook/mdx2-csf": "^0.0.3",
-    "@storybook/react": "^6.5.10",
-    "@storybook/theming": "^6.5.10",
+    "@storybook/react": "^6.5.12",
+    "@storybook/theming": "^6.5.12",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^28.1.7",
-    "@types/react": "^18.0.17",
+    "@types/jest": "^29.0.3",
+    "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.33.1",
-    "@typescript-eslint/parser": "^5.33.1",
+    "@typescript-eslint/eslint-plugin": "^5.38.1",
+    "@typescript-eslint/parser": "^5.38.1",
     "babel-loader": "^8.2.5",
     "babel-plugin-styled-components": "^2.0.7",
-    "concurrently": "^7.3.0",
-    "eslint": "^8.22.0",
+    "concurrently": "^7.4.0",
+    "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react": "^7.31.8",
     "eslint-plugin-storybook": "^0.6.4",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^29.0.1",
+    "jest": "^29.0.3",
+    "jest-environment-jsdom": "^29.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^2.78.1",
+    "rollup": "^2.79.1",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-import-css": "^3.0.3",
-    "rollup-plugin-sass": "^1.2.13",
+    "rollup-plugin-sass": "^1.12.16",
     "rollup-plugin-typescript2": "^0.34.0",
-    "ts-jest": "^28.0.8",
-    "typescript": "^4.7.4"
+    "ts-jest": "^29.0.2",
+    "typescript": "^4.8.3"
   },
   "peerDependencies": {
     "@norges-domstoler/dds-design-tokens": "^3.0.0",
@@ -103,16 +101,17 @@
     "setupFilesAfterEnv": [
       "<rootDir>/src/setupTests.ts"
     ],
-    "globals": {
-      "ts-jest": {
-        "tsconfig": "tsconfig.json"
-      }
-    },
     "moduleNameMapper": {
       "\\.css$": "<rootDir>/__mocks__/styleMock.js"
     },
     "transform": {
-      "\\.svg$": "<rootDir>/svgTransform.js"
+      "\\.svg$": "<rootDir>/svgTransform.js",
+      "^.+\\.tsx?$": [
+        "ts-jest",
+        {
+          "tsconfig": "tsconfig.json"
+        }
+      ]
     }
   },
   "dependencies": {

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

@@ -1,4 +0,0 @@
-import { CSSObject } from 'styled-components';
-export declare const charCounterTokens: {
-    base: CSSObject;
-};

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

@@ -1,4 +0,0 @@
-import { CSSObject } from 'styled-components';
-export declare const charCounterTokens: {
-    base: CSSObject;
-};

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

@@ -1,11 +0,0 @@
-import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-
-var Spacing = ddsBaseTokens.spacing;
-var charCounterBase = {
-  padding: "".concat(Spacing.SizesDdsSpacingLocalX025, " ").concat(Spacing.SizesDdsSpacingLocalX05)
-};
-var charCounterTokens = {
-  base: charCounterBase
-};
-
-export { charCounterTokens };