@norges-domstoler/dds-components 14.3.1 → 14.4.0

package/dist/index.mjs

@@ -108,12 +108,8 @@ var input = {
     gap: spacing.SizesDdsSpacingX1NumberPx
   }
 };
-var container = {
-  gap: spacing.SizesDdsSpacingX0125
-};
 var inputTokens = {
-  input,
-  container
+  input
 };
 
 // src/components/Typography/Typography.tokens.tsx
@@ -658,7 +654,7 @@ var visibilityTransition = (open) => {
 };
 
 // src/components/helpers/Input/Input.styles.tsx
-var { input: input2, container: container2 } = inputTokens;
+var { input: input2 } = inputTokens;
 var Input = styled3.input`
   position: relative;
   color: ${input2.base.color};
@@ -752,8 +748,7 @@ var StatefulInput = styled3(Input).withConfig({
 `;
 var OuterInputContainer = styled3.div`
   position: relative;
-  gap: ${container2.gap};
-  width: ${({ width }) => width};
+  width: ${({ $width }) => $width};
 `;
 var InputContainer = styled3.div`
   position: relative;
@@ -4001,7 +3996,7 @@ var link = {
     backgroundColor: colors10.DdsColorInteractiveLightest
   }
 };
-var container3 = {
+var container = {
   border: `${border6.BordersDdsBorderStyleLightStrokeWeight} ${border6.BordersDdsBorderStyleLightStroke} solid `,
   backgroundColor: colors10.DdsColorNeutralsWhite,
   borderRadius: borderRadius4.RadiiDdsBorderRadius1Radius
@@ -4011,7 +4006,7 @@ var divider = {
   marginLeft: spacing7.SizesDdsSpacingX15
 };
 var overflowMenuTokens = {
-  container: container3,
+  container,
   element,
   link,
   divider,
@@ -4491,7 +4486,7 @@ var scrollbarStyling = {
 
 // src/components/OverflowMenu/OverflowMenu.tsx
 import { Fragment as Fragment3, jsx as jsx176, jsxs as jsxs24 } from "react/jsx-runtime";
-var { container: container4, divider: divider3 } = overflowMenuTokens;
+var { container: container2, divider: divider3 } = overflowMenuTokens;
 var Container = styled19.div`
   box-sizing: border-box;
   z-index: 100;
@@ -4499,9 +4494,9 @@ var Container = styled19.div`
   min-width: 180px;
   max-width: 300px;
   ${({ $isOpen }) => visibilityTransition($isOpen)}
-  border: ${container4.border};
-  background-color: ${container4.backgroundColor};
-  border-radius: ${container4.borderRadius};
+  border: ${container2.border};
+  background-color: ${container2.backgroundColor};
+  border-radius: ${container2.borderRadius};
 
   ${scrollbarStyling.webkit}
   ${scrollbarStyling.firefox}
@@ -5093,7 +5088,7 @@ var selectionControl = {
     }
   }
 };
-var container5 = {
+var container3 = {
   color: colors12.DdsColorNeutralsGray9,
   disabled: {
     color: colors12.DdsColorNeutralsGray6
@@ -5117,7 +5112,7 @@ var outerGroupContainer = {
 var selectionControlTokens = {
   selectionControl,
   checkmark,
-  container: container5,
+  container: container3,
   groupContainer,
   outerGroupContainer
 };
@@ -5125,7 +5120,7 @@ var selectionControlTokens = {
 // src/components/SelectionControl/SelectionControl.styles.tsx
 var {
   selectionControl: selectionControl2,
-  container: container6,
+  container: container4,
   checkmark: checkmark2,
   groupContainer: groupContainer2,
   outerGroupContainer: outerGroupContainer2
@@ -5156,11 +5151,11 @@ var Container2 = styled23.label`
   cursor: pointer;
   user-select: none;
   width: fit-content;
-  color: ${container6.color};
+  color: ${container4.color};
   ${({ $hasLabel }) => $hasLabel ? css10`
-          padding-left: ${container6.withLabel.paddingLeft};
+          padding-left: ${container4.withLabel.paddingLeft};
         ` : css10`
-          padding: ${container6.noLabel.padding};
+          padding: ${container4.noLabel.padding};
         `}
 
   input ~ ${CustomSelectionControl} {
@@ -5239,7 +5234,7 @@ var Container2 = styled23.label`
 
   ${({ disabled }) => disabled && css10`
       cursor: not-allowed;
-      color: ${container6.disabled.color};
+      color: ${container4.disabled.color};
     `}
   ${({ $controlType }) => $controlType === "checkbox" ? css10`
           ${CustomSelectionControl}:after {
@@ -5847,7 +5842,7 @@ var TextInput2 = forwardRef16(
     const outerInputContainerProps = {
       className,
       style,
-      width: getWidth(componentSize, width)
+      $width: getWidth(componentSize, width)
     };
     const showRequiredStyling = !!(required || ariaRequired);
     let extendedInput = null;
@@ -6491,7 +6486,7 @@ import styled28, { css as css14 } from "styled-components";
 import { ddsBaseTokens as ddsBaseTokens26 } from "@norges-domstoler/dds-design-tokens";
 var { colors: colors15, spacing: spacing13 } = ddsBaseTokens26;
 var typographyType2 = "bodySans02";
-var container7 = {
+var container5 = {
   borderBottom: "2px solid",
   padding: `0 ${spacing13.SizesDdsSpacingX1}`,
   info: {
@@ -6531,7 +6526,7 @@ var purposeVariants = {
   }
 };
 var globalMessageTokens = {
-  container: container7,
+  container: container5,
   contentContainer,
   icon: {
     marginRight: `${spacing13.SizesDdsSpacingX075}`,
@@ -6549,19 +6544,19 @@ var globalMessageTokens = {
 
 // src/components/GlobalMessage/GlobalMessage.tsx
 import { jsx as jsx188, jsxs as jsxs36 } from "react/jsx-runtime";
-var { container: container8, contentContainer: contentContainer2, icon: icon6 } = globalMessageTokens;
+var { container: container6, contentContainer: contentContainer2, icon: icon6 } = globalMessageTokens;
 var Container4 = styled28.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   box-sizing: border-box;
   width: 100%;
-  padding: ${container8.padding};
-  border-bottom: ${container8.borderBottom};
+  padding: ${container6.padding};
+  border-bottom: ${container6.borderBottom};
   ${getFontStyling(typographyType2, true)}
   ${({ $purpose }) => css14`
-    border-color: ${container8[$purpose].borderColor};
-    background-color: ${container8[$purpose].backgroundColor};
+    border-color: ${container6[$purpose].borderColor};
+    background-color: ${container6[$purpose].backgroundColor};
   `}
 `;
 var MessageIconWrapper = styled28(Icon)`
@@ -6637,7 +6632,7 @@ import styled29, { css as css15 } from "styled-components";
 // src/components/LocalMessage/LocalMessage.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens27 } from "@norges-domstoler/dds-design-tokens";
 var { colors: colors16, spacing: spacing14, borderRadius: borderRadius7, border: border9, outerShadow: outerShadow3 } = ddsBaseTokens27;
-var container9 = {
+var container7 = {
   base: {
     boxShadow: outerShadow3.DdsShadow1Onlight,
     borderRadius: borderRadius7.RadiiDdsBorderRadius1Radius,
@@ -6720,7 +6715,7 @@ var icon7 = {
   }
 };
 var localMessageTokens = {
-  container: container9,
+  container: container7,
   purposeVariants: purposeVariants2,
   icon: icon7
 };
@@ -6728,7 +6723,7 @@ var localMessageTokens = {
 // src/components/LocalMessage/LocalMessage.tsx
 import { Fragment as Fragment5, jsx as jsx189, jsxs as jsxs37 } from "react/jsx-runtime";
 var defaultWidth3 = "400px";
-var { container: container10, icon: icon8, purposeVariants: purposeVariants3 } = localMessageTokens;
+var { container: container8, icon: icon8, purposeVariants: purposeVariants3 } = localMessageTokens;
 var Container5 = styled29.div.withConfig({
   shouldForwardProp: (prop) => {
     const styleOnlyProps = [
@@ -6744,11 +6739,11 @@ var Container5 = styled29.div.withConfig({
   display: grid;
   grid-template-areas: ${({ layout, closable }) => getGridTemplateAreas(layout, closable)};
   grid-template-columns: ${({ layout, closable }) => getGridTemplateColumns(layout, closable)};
-  box-shadow: ${container10.base.boxShadow};
-  border: ${container10.base.border};
-  border-radius: ${container10.base.borderRadius};
-  padding: ${container10.base.padding};
-  gap: ${container10.base.gap};
+  box-shadow: ${container8.base.boxShadow};
+  border: ${container8.base.border};
+  border-radius: ${container8.base.borderRadius};
+  padding: ${container8.base.padding};
+  gap: ${container8.base.gap};
   align-items: center;
   ${getFontStyling(defaultTypographyType, true)}
 
@@ -6756,8 +6751,8 @@ var Container5 = styled29.div.withConfig({
     ${selection}
   }
   ${({ purpose }) => purpose && css15`
-      border-color: ${container10.purpose[purpose].borderColor};
-      background-color: ${container10.purpose[purpose].backgroundColor};
+      border-color: ${container8.purpose[purpose].borderColor};
+      background-color: ${container8.purpose[purpose].backgroundColor};
     `}
   width: ${({ width }) => width};
 `;
@@ -6788,7 +6783,7 @@ var TextContainer2 = styled29.div`
 `;
 var CloseButton = styled29(Button)`
   grid-area: closeButton;
-  margin: -${container10.base.padding} 0;
+  margin: -${container8.base.padding} 0;
 `;
 var LocalMessage = forwardRef19(
   (props, ref) => {
@@ -9491,20 +9486,20 @@ var Backdrop = styled58.div.withConfig({
 `;
 
 // src/components/Modal/Backdrop/Backdrop.utils.tsx
-var isVerticalScrollbarDisplayed = (container18) => container18.clientHeight > window.innerHeight;
-function handleElementWithBackdropMount(container18) {
-  if (isVerticalScrollbarDisplayed(container18)) {
+var isVerticalScrollbarDisplayed = (container16) => container16.clientHeight > window.innerHeight;
+function handleElementWithBackdropMount(container16) {
+  if (isVerticalScrollbarDisplayed(container16)) {
     const scrollY = Math.round(window.scrollY);
-    container18.style.overflowY = "scroll";
-    container18.style.position = "fixed";
-    container18.style.top = `-${scrollY}px`;
+    container16.style.overflowY = "scroll";
+    container16.style.position = "fixed";
+    container16.style.top = `-${scrollY}px`;
   }
 }
-function handleElementWithBackdropUnmount(container18) {
+function handleElementWithBackdropUnmount(container16) {
   const scrollY = parseInt(document.body.style.top);
-  container18.style.removeProperty("overflow-y");
-  container18.style.removeProperty("position");
-  container18.style.removeProperty("top");
+  container16.style.removeProperty("overflow-y");
+  container16.style.removeProperty("position");
+  container16.style.removeProperty("top");
   if (isNaN(scrollY)) {
     return;
   }
@@ -9514,7 +9509,7 @@ function handleElementWithBackdropUnmount(container18) {
 // src/components/Modal/Modal.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens40 } from "@norges-domstoler/dds-design-tokens";
 var { spacing: spacing25 } = ddsBaseTokens40;
-var container11 = {
+var container9 = {
   padding: `${spacing25.SizesDdsSpacingX1} ${spacing25.SizesDdsSpacingX1} ${spacing25.SizesDdsSpacingX15} ${spacing25.SizesDdsSpacingX15}`
 };
 var contentContainer3 = {
@@ -9525,19 +9520,19 @@ var actionsContainer = {
   gap: spacing25.SizesDdsSpacingX1
 };
 var modalTokens = {
-  container: container11,
+  container: container9,
   contentContainer: contentContainer3,
   actionsContainer
 };
 
 // src/components/Modal/Modal.tsx
 import { jsx as jsx221, jsxs as jsxs47 } from "react/jsx-runtime";
-var { container: container12, contentContainer: contentContainer4 } = modalTokens;
+var { container: container10, contentContainer: contentContainer4 } = modalTokens;
 var Container8 = styled59(Paper)`
   display: flex;
   flex-direction: column-reverse;
   min-width: 200px;
-  padding: ${container12.padding};
+  padding: ${container10.padding};
   &::selection,
   *::selection {
     ${selection}
@@ -9677,7 +9672,7 @@ import { ddsBaseTokens as ddsBaseTokens41 } from "@norges-domstoler/dds-design-t
 var { spacing: spacing26 } = ddsBaseTokens41;
 var contentContainerPaddingNumberPx = spacing26.SizesDdsSpacingX025NumberPx;
 var contentContainerPadding = `${contentContainerPaddingNumberPx}px`;
-var container13 = {
+var container11 = {
   padding: `${spacing26.SizesDdsSpacingX1NumberPx - contentContainerPaddingNumberPx}px ${spacing26.SizesDdsSpacingX1NumberPx - contentContainerPaddingNumberPx}px ${spacing26.SizesDdsSpacingX1NumberPx - contentContainerPaddingNumberPx}px ${spacing26.SizesDdsSpacingX15NumberPx - contentContainerPaddingNumberPx}px`
 };
 var contentContainer5 = {
@@ -9685,13 +9680,13 @@ var contentContainer5 = {
   padding: contentContainerPadding
 };
 var drawerTokens = {
-  container: container13,
+  container: container11,
   contentContainer: contentContainer5
 };
 
 // src/components/Drawer/Drawer.tsx
 import { jsx as jsx224, jsxs as jsxs48 } from "react/jsx-runtime";
-var { container: container14, contentContainer: contentContainer6 } = drawerTokens;
+var { container: container12, contentContainer: contentContainer6 } = drawerTokens;
 var getMaxWidth = (size2) => {
   if (size2 === "large")
     return "800px";
@@ -9719,7 +9714,7 @@ var Container11 = styled62(Paper).withConfig({
   justify-content: flex-end;
   min-width: 300px;
   z-index: 100;
-  padding: ${container14.padding};
+  padding: ${container12.padding};
 
   ${({ size: size2 }) => css29`
     max-width: ${getMaxWidth(size2)};
@@ -10270,9 +10265,7 @@ var CalendarPopover = ({
   useOnKeyDown("Escape", onClose);
   return /* @__PURE__ */ jsx228(CalendarPopoverContext.Provider, { value: { anchorRef, isOpen, onClose }, children });
 };
-var Anchor = styled66.div`
-  display: inline-flex;
-`;
+var Anchor = styled66.div``;
 var CalendarPopoverAnchor = ({
   children
 }) => {
@@ -10326,7 +10319,10 @@ import {
   useDateField
 } from "@react-aria/datepicker";
 import { useDateFieldState } from "@react-stately/datepicker";
-import { forwardRef as forwardRef50, useRef as useRef20 } from "react";
+import {
+  forwardRef as forwardRef50,
+  useRef as useRef20
+} from "react";
 
 // src/components/date-inputs/DatePicker/DateField/CalendarButton.tsx
 import { useButton } from "@react-aria/button";
@@ -10400,15 +10396,15 @@ var calendarButton = {
 };
 var datefield = {
   medium: {
-    minWidth: "160px",
+    width: "160px",
     paddingX: ddsBaseTokens43.spacing.SizesDdsSpacingX05
   },
   small: {
-    minWidth: "140px",
+    width: "140px",
     paddingX: ddsBaseTokens43.spacing.SizesDdsSpacingX05
   },
   tiny: {
-    minWidth: "125px",
+    width: "125px",
     paddingX: ddsBaseTokens43.spacing.SizesDdsSpacingX025
   },
   disabled: {
@@ -10419,7 +10415,6 @@ var datefield = {
 };
 var datePickerTokens = {
   gap: ddsBaseTokens43.spacing.SizesDdsSpacingX025,
-  labelGap: ddsBaseTokens43.spacing.SizesDdsSpacingX0125,
   datefield,
   calendarButton
 };
@@ -10583,22 +10578,12 @@ function DateSegment({
 DateSegment.displayName = "DateSegment";
 
 // src/components/date-inputs/common/DateInput.tsx
-import { forwardRef as forwardRef49 } from "react";
-import styled69, { css as css33 } from "styled-components";
+import {
+  forwardRef as forwardRef49
+} from "react";
+import styled69 from "styled-components";
 import { jsx as jsx231, jsxs as jsxs53 } from "react/jsx-runtime";
-var DateFieldContainer = styled69.div`
-  display: inline-flex;
-  flex-direction: column;
-  gap: ${datePickerTokens.labelGap};
-`;
-var InputDiv = styled69(StatefulInput).attrs({
-  as: "div"
-})`
-  ${({ $width, componentSize = "medium" }) => $width ? css33`
-          width: ${$width};
-        ` : css33`
-          min-width: ${datePickerTokens.datefield[componentSize].minWidth};
-        `}
+var InputDiv = styled69(StatefulInput)`
   display: inline-flex;
   flex-direction: row;
   gap: ${datePickerTokens.gap};
@@ -10610,111 +10595,125 @@ var DateSegmentContainer = styled69.div`
   display: flex;
   flex-direction: row;
 `;
-var DateInput = forwardRef49(
-  ({
-    errorMessage,
-    tip,
-    componentSize = "medium",
-    style,
-    className,
-    disabled,
-    active,
-    internalRef,
-    readOnly,
-    required,
-    children,
-    prefix: button3,
-    labelProps,
-    fieldProps,
-    width,
-    ...props
-  }, forwardedRef) => {
-    var _a;
-    const hasErrorMessage = !!errorMessage;
-    const hasTip = !!tip;
-    const hasLabel = props.label != null;
-    const hasMessage = hasErrorMessage || hasTip;
-    return /* @__PURE__ */ jsxs53(DateFieldContainer, { className, ref: forwardedRef, children: [
-      hasLabel && /* @__PURE__ */ jsx231(Label, { ...labelProps, showRequiredStyling: required, children: props.label }),
-      /* @__PURE__ */ jsxs53(
-        InputDiv,
-        {
-          ...fieldProps,
-          $width: width,
-          style,
-          disabled,
-          componentSize,
-          ref: internalRef,
-          hasErrorMessage,
-          className: cn(
-            disabled && "disabled",
-            active && "active",
-            readOnly && "read-only"
-          ),
-          children: [
-            button3,
-            /* @__PURE__ */ jsx231(DateSegmentContainer, { children })
-          ]
-        }
-      ),
-      hasMessage && /* @__PURE__ */ jsx231(
-        InputMessage,
-        {
-          messageType: hasErrorMessage ? "error" : "tip",
-          message: (_a = errorMessage != null ? errorMessage : tip) != null ? _a : ""
-        }
-      )
-    ] });
-  }
-);
-DateInput.displayName = "DateInput";
-
-// src/components/date-inputs/DatePicker/DateField/DateField.tsx
-import { jsx as jsx232 } from "react/jsx-runtime";
-var DateField = forwardRef50(
-  ({ componentSize = "medium", buttonProps, ...props }, forwardedRef) => {
-    const state = useDateFieldState({
-      ...props,
-      locale,
-      createCalendar: createCalendar2
-    });
-    const ref = useRef20(null);
-    const { labelProps, fieldProps } = useDateField(props, state, ref);
-    const disabled = props.isDisabled || !!fieldProps["aria-disabled"];
-    return /* @__PURE__ */ jsx232(
-      DateInput,
-      {
-        ...props,
-        componentSize,
-        label: props.label,
-        disabled,
-        required: props.isRequired,
-        ref: forwardedRef,
-        internalRef: ref,
-        readOnly: props.isReadOnly,
-        prefix: !props.isReadOnly && /* @__PURE__ */ jsx232(
-          CalendarButton,
+function _DateInput({
+  errorMessage,
+  tip,
+  componentSize = "medium",
+  style,
+  className,
+  disabled,
+  active,
+  internalRef,
+  readOnly,
+  required,
+  children,
+  prefix: button3,
+  labelProps,
+  fieldProps,
+  groupProps,
+  width = datePickerTokens.datefield[componentSize].width,
+  ...props
+}, forwardedRef) {
+  var _a;
+  const hasErrorMessage = !!errorMessage;
+  const hasTip = !!tip;
+  const hasLabel = props.label != null;
+  const hasMessage = hasErrorMessage || hasTip;
+  return /* @__PURE__ */ jsxs53(
+    OuterInputContainer,
+    {
+      ...groupProps,
+      $width: width,
+      className,
+      ref: forwardedRef,
+      children: [
+        hasLabel && /* @__PURE__ */ jsx231(Label, { ...labelProps, showRequiredStyling: required, children: props.label }),
+        /* @__PURE__ */ jsxs53(
+          InputDiv,
           {
+            ...fieldProps,
+            as: "div",
+            style,
+            disabled,
             componentSize,
-            ...buttonProps,
-            isDisabled: disabled
+            ref: internalRef,
+            hasErrorMessage,
+            className: cn(
+              disabled && "disabled",
+              active && "active",
+              readOnly && "read-only"
+            ),
+            children: [
+              button3,
+              /* @__PURE__ */ jsx231(DateSegmentContainer, { children })
+            ]
           }
         ),
-        labelProps,
-        fieldProps,
-        children: state.segments.map((segment2, i) => /* @__PURE__ */ jsx232(
-          DateSegment,
+        hasMessage && /* @__PURE__ */ jsx231(
+          InputMessage,
           {
-            componentSize,
-            segment: segment2,
-            state
-          },
-          i
-        ))
-      }
-    );
-  }
-);
+            messageType: hasErrorMessage ? "error" : "tip",
+            message: (_a = errorMessage != null ? errorMessage : tip) != null ? _a : ""
+          }
+        )
+      ]
+    }
+  );
+}
+var DateInput = forwardRef49(_DateInput);
+DateInput.displayName = "DateInput";
+
+// src/components/date-inputs/DatePicker/DateField/DateField.tsx
+import { jsx as jsx232 } from "react/jsx-runtime";
+function _DateField({
+  componentSize = "medium",
+  buttonProps,
+  groupProps,
+  ...props
+}, forwardedRef) {
+  const state = useDateFieldState({
+    ...props,
+    locale,
+    createCalendar: createCalendar2
+  });
+  const ref = useRef20(null);
+  const { labelProps, fieldProps } = useDateField(props, state, ref);
+  const disabled = props.isDisabled || !!fieldProps["aria-disabled"];
+  return /* @__PURE__ */ jsx232(
+    DateInput,
+    {
+      ...props,
+      groupProps,
+      componentSize,
+      label: props.label,
+      disabled,
+      required: props.isRequired,
+      ref: forwardedRef,
+      internalRef: ref,
+      readOnly: props.isReadOnly,
+      prefix: !props.isReadOnly && /* @__PURE__ */ jsx232(
+        CalendarButton,
+        {
+          componentSize,
+          ...buttonProps,
+          isDisabled: disabled
+        }
+      ),
+      labelProps,
+      fieldProps,
+      children: state.segments.map((segment2, i) => /* @__PURE__ */ jsx232(
+        DateSegment,
+        {
+          componentSize,
+          segment: segment2,
+          state
+        },
+        i
+      ))
+    }
+  );
+}
+var DateField = forwardRef50(_DateField);
 DateField.displayName = "DateField";
 
 // src/components/date-inputs/utils/useFocusManagerRef.ts
@@ -10750,7 +10749,7 @@ function _DatePicker({ errorMessage, componentSize, tip, style, width, ...props
   );
   const ref = useRef22(null);
   const combinedRef = useCombinedRef(ref, domRef);
-  const { buttonProps, calendarProps, fieldProps } = useDatePicker(
+  const { buttonProps, calendarProps, fieldProps, groupProps } = useDatePicker(
     { ...props, granularity: "day" },
     state,
     ref
@@ -10760,6 +10759,7 @@ function _DatePicker({ errorMessage, componentSize, tip, style, width, ...props
       DateField,
       {
         ...fieldProps,
+        groupProps,
         ref: combinedRef,
         componentSize,
         tip,
@@ -10872,7 +10872,7 @@ function calendarDateToNativeDate(date, time = new Time(12, 0, 0, 0)) {
 // src/components/Popover/Popover.tsx
 import { ddsBaseTokens as ddsBaseTokens45 } from "@norges-domstoler/dds-design-tokens";
 import { forwardRef as forwardRef53 } from "react";
-import styled71, { css as css34 } from "styled-components";
+import styled71, { css as css33 } from "styled-components";
 
 // src/components/Popover/Popover.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens44 } from "@norges-domstoler/dds-design-tokens";
@@ -10914,7 +10914,7 @@ var Wrapper6 = styled71(Paper)`
   &:focus-visible {
     ${focusVisible}
   }
-  ${({ $sizeProps }) => $sizeProps && css34`
+  ${({ $sizeProps }) => $sizeProps && css33`
       width: ${$sizeProps.width};
       height: ${$sizeProps.height};
       min-width: ${$sizeProps.minWidth};
@@ -10927,7 +10927,7 @@ var TitleContainer = styled71.div`
   margin-right: ${title2.marginRight};
 `;
 var ContentContainer4 = styled71.div`
-  ${({ $withCloseButton, $hasTitle }) => $withCloseButton && !$hasTitle && css34`
+  ${({ $withCloseButton, $hasTitle }) => $withCloseButton && !$hasTitle && css33`
       margin-top: ${content4.noTitle.marginTop};
     `}
 `;
@@ -11077,7 +11077,7 @@ PopoverGroup.displayName = "PopoverGroup";
 
 // src/components/ToggleButton/ToggleButton.tsx
 import { forwardRef as forwardRef54, useId as useId18 } from "react";
-import styled72, { css as css35 } from "styled-components";
+import styled72, { css as css34 } from "styled-components";
 
 // src/components/ToggleButton/ToggleButton.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens46 } from "@norges-domstoler/dds-design-tokens";
@@ -11102,13 +11102,13 @@ var toggleButton = {
 var group2 = {
   gap: spacing28.SizesDdsSpacingX075
 };
-var container15 = {
+var container13 = {
   gap: spacing28.SizesDdsSpacingX05
 };
 var toggleButtonTokens = {
   toggleButton,
   group: group2,
-  container: container15
+  container: container13
 };
 
 // src/components/ToggleButton/ToggleButton.tsx
@@ -11136,7 +11136,7 @@ var Content2 = styled72.span`
       ${focusVisibleTransitionValue};
   }
 
-  ${({ $hasIcon }) => $hasIcon && css35`
+  ${({ $hasIcon }) => $hasIcon && css34`
       gap: ${toggleButton2.gap};
     `}
 
@@ -11191,13 +11191,13 @@ ToggleButton.displayName = "ToggleButton";
 
 // src/components/ToggleButton/ToggleButtonGroup.tsx
 import { useId as useId19 } from "react";
-import styled73, { css as css36 } from "styled-components";
+import styled73, { css as css35 } from "styled-components";
 import { jsx as jsx238, jsxs as jsxs57 } from "react/jsx-runtime";
 var Group = styled73.div`
   gap: ${toggleButtonTokens.group.gap};
   display: flex;
   flex-wrap: wrap;
-  ${({ direction }) => css36`
+  ${({ direction }) => css35`
     flex-direction: ${direction};
   `}
 `;
@@ -11250,7 +11250,7 @@ import {
   useRef as useRef25,
   useState as useState22
 } from "react";
-import styled74, { css as css37 } from "styled-components";
+import styled74, { css as css36 } from "styled-components";
 
 // src/components/Tabs/Tabs.context.tsx
 import { createContext as createContext8, useContext as useContext8 } from "react";
@@ -11269,7 +11269,7 @@ var useTabsContext = () => useContext8(TabsContext);
 // src/components/Tabs/Tabs.tsx
 import { jsx as jsx239 } from "react/jsx-runtime";
 var Container14 = styled74.div`
-  ${({ $width }) => $width && css37`
+  ${({ $width }) => $width && css36`
       width: ${$width};
     `};
 `;
@@ -11330,7 +11330,7 @@ import {
   useEffect as useEffect22,
   useRef as useRef26
 } from "react";
-import styled75, { css as css38 } from "styled-components";
+import styled75, { css as css37 } from "styled-components";
 
 // src/components/Tabs/Tabs.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens47 } from "@norges-domstoler/dds-design-tokens";
@@ -11437,12 +11437,12 @@ var Button2 = styled75.button`
       ${focusVisibleTransitionValue};
   }
 
-  ${({ $direction }) => css38`
+  ${({ $direction }) => css37`
     flex-direction: ${$direction};
     gap: ${tab2[$direction].gap};
   `};
 
-  ${({ $active }) => $active && css38`
+  ${({ $active }) => $active && css37`
       background-color: ${tab2.active.backgroundColor};
       border-color: ${tab2.active.borderColor};
       color: ${tab2.active.color};
@@ -11534,14 +11534,14 @@ import {
   isValidElement as isValidElement5,
   useState as useState23
 } from "react";
-import styled76, { css as css39 } from "styled-components";
+import styled76, { css as css38 } from "styled-components";
 import { jsx as jsx242 } from "react/jsx-runtime";
 var { tabList: tabList2 } = tabsTokens;
-var autoFlow = css39`
+var autoFlow = css38`
   grid-auto-flow: column;
   grid-auto-columns: 1fr;
 `;
-var templateColumns = (templateColumns2) => css39`
+var templateColumns = (templateColumns2) => css38`
   grid-template-columns: ${templateColumns2};
 `;
 var TabRow = styled76.div`
@@ -11618,7 +11618,7 @@ TabList.displayName = "TabList";
 
 // src/components/Tabs/TabPanel.tsx
 import { forwardRef as forwardRef58 } from "react";
-import styled77, { css as css40 } from "styled-components";
+import styled77, { css as css39 } from "styled-components";
 import { jsx as jsx243 } from "react/jsx-runtime";
 var { panel: panel2 } = tabsTokens;
 var Panel = styled77.div`
@@ -11627,7 +11627,7 @@ var Panel = styled77.div`
     transition: ${focusVisibleTransitionValue};
   }
 
-  ${({ $active }) => !$active && css40`
+  ${({ $active }) => !$active && css39`
       display: none;
     `}
   &:focus-visible {
@@ -11679,7 +11679,7 @@ TabPanels.displayName = "TabPanels";
 
 // src/components/Tag/Tag.tsx
 import { forwardRef as forwardRef60 } from "react";
-import styled78, { css as css41 } from "styled-components";
+import styled78, { css as css40 } from "styled-components";
 
 // src/components/Tag/Tag.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens48 } from "@norges-domstoler/dds-design-tokens";
@@ -11714,7 +11714,7 @@ var Wrapper7 = styled78(TextOverflowEllipsisWrapper)`
   border-radius: ${wrapper8.borderRadius};
   padding: ${wrapper8.padding};
   ${getFontStyling(typographyType5)}
-  ${({ $purpose }) => css41`
+  ${({ $purpose }) => css40`
     background-color: ${wrapper8.purpose[$purpose].backgroundColor};
     border-color: ${wrapper8.purpose[$purpose].borderColor};
   `}
@@ -11748,7 +11748,7 @@ import styled79 from "styled-components";
 import { ddsBaseTokens as ddsBaseTokens49 } from "@norges-domstoler/dds-design-tokens";
 var { colors: colors30, spacing: spacing31, borderRadius: borderRadius10 } = ddsBaseTokens49;
 var typographyType6 = "bodySans01";
-var container16 = {
+var container14 = {
   gap: spacing31.SizesDdsSpacingX025,
   padding: `${spacing31.SizesDdsSpacingX0125} ${spacing31.SizesDdsSpacingX025}`,
   backgroundColor: colors30.DdsColorNeutralsGray1,
@@ -11759,22 +11759,22 @@ var group3 = {
   gap: spacing31.SizesDdsSpacingX075
 };
 var chipTokens = {
-  container: container16,
+  container: container14,
   group: group3
 };
 
 // src/components/Chip/Chip.tsx
 import { jsx as jsx246, jsxs as jsxs59 } from "react/jsx-runtime";
-var { container: container17 } = chipTokens;
+var { container: container15 } = chipTokens;
 var Container15 = styled79(TextOverflowEllipsisWrapper)`
   display: flex;
   align-items: center;
   max-width: 100%;
-  gap: ${container17.gap};
-  padding: ${container17.padding};
-  border: ${container17.border};
-  border-radius: ${container17.borderRadius};
-  background-color: ${container17.backgroundColor};
+  gap: ${container15.gap};
+  padding: ${container15.padding};
+  border: ${container15.border};
+  border-radius: ${container15.borderRadius};
+  background-color: ${container15.backgroundColor};
   ${getFontStyling(typographyType6, true)};
 `;
 var Chip = forwardRef61((props, ref) => {
@@ -11830,7 +11830,7 @@ ChipGroup.displayName = "ChipGroup";
 
 // src/components/ToggleBar/ToggleBar.tsx
 import { useId as useId21, useState as useState25 } from "react";
-import styled81, { css as css42 } from "styled-components";
+import styled81, { css as css41 } from "styled-components";
 
 // src/components/ToggleBar/ToggleBar.context.tsx
 import { createContext as createContext10, useContext as useContext10 } from "react";
@@ -11955,7 +11955,7 @@ var OuterContainer4 = styled81.div`
   *::selection {
     ${selection}
   }
-  ${({ $width }) => $width && css42`
+  ${({ $width }) => $width && css41`
       width: ${$width};
     `}
 `;
@@ -12020,7 +12020,7 @@ import {
 } from "react";
 
 // src/components/ToggleBar/ToggleRadio.styles.tsx
-import styled82, { css as css43 } from "styled-components";
+import styled82, { css as css42 } from "styled-components";
 var { content: content6, label: label2 } = toggleBarTokens;
 var Content3 = styled82.span`
   display: flex;
@@ -12040,11 +12040,11 @@ var Content3 = styled82.span`
   }
   background-color: ${content6.base.backgroundColor};
 
-  ${({ $size, $justIcon }) => css43`
-    ${$justIcon ? css43`
+  ${({ $size, $justIcon }) => css42`
+    ${$justIcon ? css42`
           font-size: ${content6.size[$size].justIcon.fontSize};
           padding: ${content6.size[$size].justIcon.padding};
-        ` : css43`
+        ` : css42`
           gap: ${content6.size[$size].withText.gap};
           padding: ${content6.size[$size].withText.padding};
           ${getFontStyling(typographyTypes6[$size])}
@@ -12145,7 +12145,7 @@ var ToggleRadio = forwardRef63(
 ToggleRadio.displayName = "ToggleRadio";
 
 // src/components/Grid/Grid.tsx
-import styled83, { css as css44 } from "styled-components";
+import styled83, { css as css43 } from "styled-components";
 
 // src/components/Grid/Grid.context.tsx
 import { createContext as createContext11, useContext as useContext11 } from "react";
@@ -12274,7 +12274,7 @@ var StyledGrid = styled83.div.withConfig({
   }
 })`
   display: grid;
-  ${({ maxWidth }) => css44`
+  ${({ maxWidth }) => css43`
     max-width: ${maxWidth};
   `}
   ${({ screenSize, maxWidth, rowGap }) => getHooksGridStyling(screenSize, maxWidth, rowGap)}
@@ -12443,7 +12443,7 @@ var progressTrackerTokens = {
 
 // src/components/ProgressTracker/ProgressTrackerItem.tsx
 import { useMemo } from "react";
-import styled85, { css as css45 } from "styled-components";
+import styled85, { css as css44 } from "styled-components";
 import { jsx as jsx252, jsxs as jsxs62 } from "react/jsx-runtime";
 var toItemState = (active, completed, disabled) => {
   if (disabled) {
@@ -12481,31 +12481,31 @@ var ItemNumber = styled85.div`
   ${({ $state: state }) => {
   switch (state) {
     case "activeIncomplete":
-      return css45`
+      return css44`
           border-color: ${itemNumber2.active.borderColor};
           color: ${itemNumber2.active.color};
           background-color: ${itemNumber2.active.backgroundColor};
         `;
     case "activeCompleted":
-      return css45`
+      return css44`
           border-color: ${itemNumber2.completed.borderColor};
           color: ${itemNumber2.completed.color};
           background-color: ${itemNumber2.completed.backgroundColor};
         `;
     case "inactiveCompleted":
-      return css45`
+      return css44`
           border-color: ${itemNumber2.completed.borderColor};
           color: ${itemNumber2.completed.color};
           background-color: ${itemNumber2.completed.backgroundColor};
         `;
     case "inactiveIncomplete":
-      return css45`
+      return css44`
           border-color: ${itemNumber2.inactive.borderColor};
           color: ${itemNumber2.inactive.color};
           background-color: ${itemNumber2.inactive.backgroundColor};
         `;
     case "disabled":
-      return css45`
+      return css44`
           border-color: ${itemNumber2.disabled.borderColor};
           color: ${itemNumber2.disabled.color};
           background-color: ${itemNumber2.disabled.backgroundColor};
@@ -12523,18 +12523,18 @@ var ItemText = styled85.div`
   switch (state) {
     case "activeCompleted":
     case "activeIncomplete":
-      return css45`
+      return css44`
           color: ${itemText2.active.color};
           text-decoration-color: ${itemText2.active.textDecorationColor};
         `;
     case "inactiveCompleted":
     case "inactiveIncomplete":
-      return css45`
+      return css44`
           color: ${itemText2.inactive.color};
           text-decoration-color: ${itemText2.inactive.textDecorationColor};
         `;
     case "disabled":
-      return css45`
+      return css44`
           color: ${itemText2.disabled.color};
           text-decoration: ${itemText2.disabled.textDecoration};
         `;
@@ -12558,7 +12558,7 @@ var ItemContentWrapper = styled85.button`
     ${focusVisible}
   }
 
-  ${({ $state: state }) => state !== "disabled" && css45`
+  ${({ $state: state }) => state !== "disabled" && css44`
       cursor: pointer;
     `}
 `;
@@ -12759,7 +12759,7 @@ InlineEdit.displayName = "InlineEdit";
 import { forwardRef as forwardRef65, useId as useId23, useRef as useRef27 } from "react";
 
 // src/components/InlineEdit/InlineEdit.styles.tsx
-import styled87, { css as css46 } from "styled-components";
+import styled87, { css as css45 } from "styled-components";
 
 // src/components/InlineEdit/InlineEdit.tokens.ts
 import { ddsBaseTokens as ddsBaseTokens53 } from "@norges-domstoler/dds-design-tokens";
@@ -12797,7 +12797,7 @@ var StyledInlineInput = styled87(StatefulInput).withConfig({
   background-color: ${inlineEdit2.backgroundColor};
   padding: ${inlineEdit2.padding};
   ${inlineEdit2.font};
-  ${({ isEditing, hideIcon }) => !isEditing && !hideIcon && css46`
+  ${({ isEditing, hideIcon }) => !isEditing && !hideIcon && css45`
       padding-left: ${inlineEdit2.withIcon.paddingLeft};
     `}
 
@@ -12856,7 +12856,7 @@ var InlineTextArea = forwardRef65((props, ref) => {
   const descId = derivativeIdGenerator(uniqueId, "desc");
   const inputRef = useRef27(null);
   const combinedRef = useCombinedRef(ref, inputRef);
-  return /* @__PURE__ */ jsxs65(OuterInputContainer, { width, children: [
+  return /* @__PURE__ */ jsxs65(OuterInputContainer, { $width: width, children: [
     /* @__PURE__ */ jsxs65(InputContainer, { children: [
       !isEditing && !hideIcon && /* @__PURE__ */ jsx255(
         IconWrapper2,
@@ -12940,7 +12940,7 @@ var InlineInput = forwardRef67(
     const descId = derivativeIdGenerator(uniqueId, "desc");
     const inputRef = useRef29(null);
     const combinedRef = useCombinedRef(ref, inputRef);
-    return /* @__PURE__ */ jsxs66(OuterInputContainer, { width, children: [
+    return /* @__PURE__ */ jsxs66(OuterInputContainer, { $width: width, children: [
       /* @__PURE__ */ jsxs66(InputContainer, { children: [
         !isEditing && !hideIcon && /* @__PURE__ */ jsx257(
           IconWrapper2,
@@ -13068,7 +13068,7 @@ var TextArea = forwardRef69(
     const errorMessageId = derivativeIdGenerator(uniqueId, "errorMessage");
     const showRequiredStyling = required || !!ariaRequired;
     const containerProps = {
-      width,
+      $width: width,
       className,
       style
     };
@@ -13188,7 +13188,7 @@ SplitButton.displayName = "SplitButton";
 
 // src/components/Stack/Stack.tsx
 import { forwardRef as forwardRef71 } from "react";
-import styled90, { css as css47 } from "styled-components";
+import styled90, { css as css46 } from "styled-components";
 
 // src/components/Stack/Stack.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens56 } from "@norges-domstoler/dds-design-tokens";
@@ -13230,11 +13230,11 @@ var Stack = styled90.div.withConfig({
   align-items: ${(props) => props.align};
   justify-content: ${(props) => props.justify};
 
-  ${({ gap }) => gap !== void 0 && css47`
+  ${({ gap }) => gap !== void 0 && css46`
       gap: ${gap === 0 ? "0" : stackTokens.spacing[gap]};
     `}
 
-  ${({ padding }) => padding !== void 0 && css47`
+  ${({ padding }) => padding !== void 0 && css46`
       padding: ${padding === 0 ? "0" : stackTokens.spacing[padding]};
     `}
 `;
@@ -13896,12 +13896,12 @@ var CommentComponent = ({
 
 // src/components/Feedback/RatingComponent.tsx
 import { ddsBaseTokens as ddsBaseTokens61 } from "@norges-domstoler/dds-design-tokens";
-import styled97, { css as css48 } from "styled-components";
+import styled97, { css as css47 } from "styled-components";
 import { jsx as jsx268, jsxs as jsxs74 } from "react/jsx-runtime";
 var RatingContainer = styled97.div`
   display: flex;
   gap: ${ddsBaseTokens61.spacing.SizesDdsSpacingX1};
-  ${({ $layout }) => css48`
+  ${({ $layout }) => css47`
     flex-direction: ${$layout === "horizontal" ? "row" : "column"};
     align-items: ${$layout === "horizontal" ? "center" : "start"};
   `}