@norges-domstoler/dds-components 14.3.1 → 14.4.0

package/dist/index.js

@@ -441,12 +441,8 @@ var input = {
     gap: spacing.SizesDdsSpacingX1NumberPx
   }
 };
-var container = {
-  gap: spacing.SizesDdsSpacingX0125
-};
 var inputTokens = {
-  input,
-  container
+  input
 };
 
 // src/components/Typography/Typography.tokens.tsx
@@ -988,7 +984,7 @@ var visibilityTransition = (open) => {
 };
 
 // src/components/helpers/Input/Input.styles.tsx
-var { input: input2, container: container2 } = inputTokens;
+var { input: input2 } = inputTokens;
 var Input = import_styled_components4.default.input`
   position: relative;
   color: ${input2.base.color};
@@ -1082,8 +1078,7 @@ var StatefulInput = (0, import_styled_components4.default)(Input).withConfig({
 `;
 var OuterInputContainer = import_styled_components4.default.div`
   position: relative;
-  gap: ${container2.gap};
-  width: ${({ width }) => width};
+  width: ${({ $width }) => $width};
 `;
 var InputContainer = import_styled_components4.default.div`
   position: relative;
@@ -4308,7 +4303,7 @@ var link = {
     backgroundColor: colors10.DdsColorInteractiveLightest
   }
 };
-var container3 = {
+var container = {
   border: `${border6.BordersDdsBorderStyleLightStrokeWeight} ${border6.BordersDdsBorderStyleLightStroke} solid `,
   backgroundColor: colors10.DdsColorNeutralsWhite,
   borderRadius: borderRadius4.RadiiDdsBorderRadius1Radius
@@ -4318,7 +4313,7 @@ var divider = {
   marginLeft: spacing7.SizesDdsSpacingX15
 };
 var overflowMenuTokens = {
-  container: container3,
+  container,
   element,
   link,
   divider,
@@ -4788,7 +4783,7 @@ var scrollbarStyling = {
 
 // src/components/OverflowMenu/OverflowMenu.tsx
 var import_jsx_runtime176 = require("react/jsx-runtime");
-var { container: container4, divider: divider3 } = overflowMenuTokens;
+var { container: container2, divider: divider3 } = overflowMenuTokens;
 var Container = import_styled_components21.default.div`
   box-sizing: border-box;
   z-index: 100;
@@ -4796,9 +4791,9 @@ var Container = import_styled_components21.default.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}
@@ -5383,7 +5378,7 @@ var selectionControl = {
     }
   }
 };
-var container5 = {
+var container3 = {
   color: colors12.DdsColorNeutralsGray9,
   disabled: {
     color: colors12.DdsColorNeutralsGray6
@@ -5407,7 +5402,7 @@ var outerGroupContainer = {
 var selectionControlTokens = {
   selectionControl,
   checkmark,
-  container: container5,
+  container: container3,
   groupContainer,
   outerGroupContainer
 };
@@ -5415,7 +5410,7 @@ var selectionControlTokens = {
 // src/components/SelectionControl/SelectionControl.styles.tsx
 var {
   selectionControl: selectionControl2,
-  container: container6,
+  container: container4,
   checkmark: checkmark2,
   groupContainer: groupContainer2,
   outerGroupContainer: outerGroupContainer2
@@ -5446,11 +5441,11 @@ var Container2 = import_styled_components25.default.label`
   cursor: pointer;
   user-select: none;
   width: fit-content;
-  color: ${container6.color};
+  color: ${container4.color};
   ${({ $hasLabel }) => $hasLabel ? import_styled_components25.css`
-          padding-left: ${container6.withLabel.paddingLeft};
+          padding-left: ${container4.withLabel.paddingLeft};
         ` : import_styled_components25.css`
-          padding: ${container6.noLabel.padding};
+          padding: ${container4.noLabel.padding};
         `}
 
   input ~ ${CustomSelectionControl} {
@@ -5529,7 +5524,7 @@ var Container2 = import_styled_components25.default.label`
 
   ${({ disabled }) => disabled && import_styled_components25.css`
       cursor: not-allowed;
-      color: ${container6.disabled.color};
+      color: ${container4.disabled.color};
     `}
   ${({ $controlType }) => $controlType === "checkbox" ? import_styled_components25.css`
           ${CustomSelectionControl}:after {
@@ -6127,7 +6122,7 @@ var TextInput2 = (0, import_react35.forwardRef)(
     const outerInputContainerProps = {
       className,
       style,
-      width: getWidth(componentSize, width)
+      $width: getWidth(componentSize, width)
     };
     const showRequiredStyling = !!(required || ariaRequired);
     let extendedInput = null;
@@ -6764,7 +6759,7 @@ var import_styled_components30 = __toESM(require("styled-components"));
 var import_dds_design_tokens27 = require("@norges-domstoler/dds-design-tokens");
 var { colors: colors15, spacing: spacing13 } = import_dds_design_tokens27.ddsBaseTokens;
 var typographyType2 = "bodySans02";
-var container7 = {
+var container5 = {
   borderBottom: "2px solid",
   padding: `0 ${spacing13.SizesDdsSpacingX1}`,
   info: {
@@ -6804,7 +6799,7 @@ var purposeVariants = {
   }
 };
 var globalMessageTokens = {
-  container: container7,
+  container: container5,
   contentContainer,
   icon: {
     marginRight: `${spacing13.SizesDdsSpacingX075}`,
@@ -6822,19 +6817,19 @@ var globalMessageTokens = {
 
 // src/components/GlobalMessage/GlobalMessage.tsx
 var import_jsx_runtime189 = require("react/jsx-runtime");
-var { container: container8, contentContainer: contentContainer2, icon: icon6 } = globalMessageTokens;
+var { container: container6, contentContainer: contentContainer2, icon: icon6 } = globalMessageTokens;
 var Container4 = import_styled_components30.default.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 }) => import_styled_components30.css`
-    border-color: ${container8[$purpose].borderColor};
-    background-color: ${container8[$purpose].backgroundColor};
+    border-color: ${container6[$purpose].borderColor};
+    background-color: ${container6[$purpose].backgroundColor};
   `}
 `;
 var MessageIconWrapper = (0, import_styled_components30.default)(Icon)`
@@ -6910,7 +6905,7 @@ var import_styled_components31 = __toESM(require("styled-components"));
 // src/components/LocalMessage/LocalMessage.tokens.tsx
 var import_dds_design_tokens28 = require("@norges-domstoler/dds-design-tokens");
 var { colors: colors16, spacing: spacing14, borderRadius: borderRadius7, border: border9, outerShadow: outerShadow3 } = import_dds_design_tokens28.ddsBaseTokens;
-var container9 = {
+var container7 = {
   base: {
     boxShadow: outerShadow3.DdsShadow1Onlight,
     borderRadius: borderRadius7.RadiiDdsBorderRadius1Radius,
@@ -6993,7 +6988,7 @@ var icon7 = {
   }
 };
 var localMessageTokens = {
-  container: container9,
+  container: container7,
   purposeVariants: purposeVariants2,
   icon: icon7
 };
@@ -7001,7 +6996,7 @@ var localMessageTokens = {
 // src/components/LocalMessage/LocalMessage.tsx
 var import_jsx_runtime190 = require("react/jsx-runtime");
 var defaultWidth3 = "400px";
-var { container: container10, icon: icon8, purposeVariants: purposeVariants3 } = localMessageTokens;
+var { container: container8, icon: icon8, purposeVariants: purposeVariants3 } = localMessageTokens;
 var Container5 = import_styled_components31.default.div.withConfig({
   shouldForwardProp: (prop) => {
     const styleOnlyProps = [
@@ -7017,11 +7012,11 @@ var Container5 = import_styled_components31.default.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)}
 
@@ -7029,8 +7024,8 @@ var Container5 = import_styled_components31.default.div.withConfig({
     ${selection}
   }
   ${({ purpose }) => purpose && import_styled_components31.css`
-      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};
 `;
@@ -7061,7 +7056,7 @@ var TextContainer2 = import_styled_components31.default.div`
 `;
 var CloseButton = (0, import_styled_components31.default)(Button)`
   grid-area: closeButton;
-  margin: -${container10.base.padding} 0;
+  margin: -${container8.base.padding} 0;
 `;
 var LocalMessage = (0, import_react38.forwardRef)(
   (props, ref) => {
@@ -9717,20 +9712,20 @@ var Backdrop = import_styled_components60.default.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;
   }
@@ -9740,7 +9735,7 @@ function handleElementWithBackdropUnmount(container18) {
 // src/components/Modal/Modal.tokens.tsx
 var import_dds_design_tokens41 = require("@norges-domstoler/dds-design-tokens");
 var { spacing: spacing25 } = import_dds_design_tokens41.ddsBaseTokens;
-var container11 = {
+var container9 = {
   padding: `${spacing25.SizesDdsSpacingX1} ${spacing25.SizesDdsSpacingX1} ${spacing25.SizesDdsSpacingX15} ${spacing25.SizesDdsSpacingX15}`
 };
 var contentContainer3 = {
@@ -9751,19 +9746,19 @@ var actionsContainer = {
   gap: spacing25.SizesDdsSpacingX1
 };
 var modalTokens = {
-  container: container11,
+  container: container9,
   contentContainer: contentContainer3,
   actionsContainer
 };
 
 // src/components/Modal/Modal.tsx
 var import_jsx_runtime222 = require("react/jsx-runtime");
-var { container: container12, contentContainer: contentContainer4 } = modalTokens;
+var { container: container10, contentContainer: contentContainer4 } = modalTokens;
 var Container8 = (0, import_styled_components61.default)(Paper)`
   display: flex;
   flex-direction: column-reverse;
   min-width: 200px;
-  padding: ${container12.padding};
+  padding: ${container10.padding};
   &::selection,
   *::selection {
     ${selection}
@@ -9903,7 +9898,7 @@ var import_dds_design_tokens42 = require("@norges-domstoler/dds-design-tokens");
 var { spacing: spacing26 } = import_dds_design_tokens42.ddsBaseTokens;
 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 = {
@@ -9911,13 +9906,13 @@ var contentContainer5 = {
   padding: contentContainerPadding
 };
 var drawerTokens = {
-  container: container13,
+  container: container11,
   contentContainer: contentContainer5
 };
 
 // src/components/Drawer/Drawer.tsx
 var import_jsx_runtime225 = require("react/jsx-runtime");
-var { container: container14, contentContainer: contentContainer6 } = drawerTokens;
+var { container: container12, contentContainer: contentContainer6 } = drawerTokens;
 var getMaxWidth = (size2) => {
   if (size2 === "large")
     return "800px";
@@ -9945,7 +9940,7 @@ var Container11 = (0, import_styled_components64.default)(Paper).withConfig({
   justify-content: flex-end;
   min-width: 300px;
   z-index: 100;
-  padding: ${container14.padding};
+  padding: ${container12.padding};
 
   ${({ size: size2 }) => import_styled_components64.css`
     max-width: ${getMaxWidth(size2)};
@@ -10474,9 +10469,7 @@ var CalendarPopover = ({
   useOnKeyDown("Escape", onClose);
   return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(CalendarPopoverContext.Provider, { value: { anchorRef, isOpen, onClose }, children });
 };
-var Anchor = import_styled_components68.default.div`
-  display: inline-flex;
-`;
+var Anchor = import_styled_components68.default.div``;
 var CalendarPopoverAnchor = ({
   children
 }) => {
@@ -10600,15 +10593,15 @@ var calendarButton = {
 };
 var datefield = {
   medium: {
-    minWidth: "160px",
+    width: "160px",
     paddingX: import_dds_design_tokens44.ddsBaseTokens.spacing.SizesDdsSpacingX05
   },
   small: {
-    minWidth: "140px",
+    width: "140px",
     paddingX: import_dds_design_tokens44.ddsBaseTokens.spacing.SizesDdsSpacingX05
   },
   tiny: {
-    minWidth: "125px",
+    width: "125px",
     paddingX: import_dds_design_tokens44.ddsBaseTokens.spacing.SizesDdsSpacingX025
   },
   disabled: {
@@ -10619,7 +10612,6 @@ var datefield = {
 };
 var datePickerTokens = {
   gap: import_dds_design_tokens44.ddsBaseTokens.spacing.SizesDdsSpacingX025,
-  labelGap: import_dds_design_tokens44.ddsBaseTokens.spacing.SizesDdsSpacingX0125,
   datefield,
   calendarButton
 };
@@ -10786,19 +10778,7 @@ DateSegment.displayName = "DateSegment";
 var import_react79 = require("react");
 var import_styled_components71 = __toESM(require("styled-components"));
 var import_jsx_runtime233 = require("react/jsx-runtime");
-var DateFieldContainer = import_styled_components71.default.div`
-  display: inline-flex;
-  flex-direction: column;
-  gap: ${datePickerTokens.labelGap};
-`;
-var InputDiv = (0, import_styled_components71.default)(StatefulInput).attrs({
-  as: "div"
-})`
-  ${({ $width, componentSize = "medium" }) => $width ? import_styled_components71.css`
-          width: ${$width};
-        ` : import_styled_components71.css`
-          min-width: ${datePickerTokens.datefield[componentSize].minWidth};
-        `}
+var InputDiv = (0, import_styled_components71.default)(StatefulInput)`
   display: inline-flex;
   flex-direction: row;
   gap: ${datePickerTokens.gap};
@@ -10810,111 +10790,125 @@ var DateSegmentContainer = import_styled_components71.default.div`
   display: flex;
   flex-direction: row;
 `;
-var DateInput = (0, import_react79.forwardRef)(
-  ({
-    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__ */ (0, import_jsx_runtime233.jsxs)(DateFieldContainer, { className, ref: forwardedRef, children: [
-      hasLabel && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Label, { ...labelProps, showRequiredStyling: required, children: props.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(
-        InputDiv,
-        {
-          ...fieldProps,
-          $width: width,
-          style,
-          disabled,
-          componentSize,
-          ref: internalRef,
-          hasErrorMessage,
-          className: cn(
-            disabled && "disabled",
-            active && "active",
-            readOnly && "read-only"
-          ),
-          children: [
-            button3,
-            /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(DateSegmentContainer, { children })
-          ]
-        }
-      ),
-      hasMessage && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
-        InputMessage,
-        {
-          messageType: hasErrorMessage ? "error" : "tip",
-          message: (_a = errorMessage != null ? errorMessage : tip) != null ? _a : ""
-        }
-      )
-    ] });
-  }
-);
-DateInput.displayName = "DateInput";
-
-// src/components/date-inputs/DatePicker/DateField/DateField.tsx
-var import_jsx_runtime234 = require("react/jsx-runtime");
-var DateField = (0, import_react80.forwardRef)(
-  ({ componentSize = "medium", buttonProps, ...props }, forwardedRef) => {
-    const state = (0, import_datepicker3.useDateFieldState)({
-      ...props,
-      locale,
-      createCalendar: import_date5.createCalendar
-    });
-    const ref = (0, import_react80.useRef)(null);
-    const { labelProps, fieldProps } = (0, import_datepicker2.useDateField)(props, state, ref);
-    const disabled = props.isDisabled || !!fieldProps["aria-disabled"];
-    return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
-      DateInput,
-      {
-        ...props,
-        componentSize,
-        label: props.label,
-        disabled,
-        required: props.isRequired,
-        ref: forwardedRef,
-        internalRef: ref,
-        readOnly: props.isReadOnly,
-        prefix: !props.isReadOnly && /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
-          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__ */ (0, import_jsx_runtime233.jsxs)(
+    OuterInputContainer,
+    {
+      ...groupProps,
+      $width: width,
+      className,
+      ref: forwardedRef,
+      children: [
+        hasLabel && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Label, { ...labelProps, showRequiredStyling: required, children: props.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(
+          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__ */ (0, import_jsx_runtime233.jsx)(DateSegmentContainer, { children })
+            ]
           }
         ),
-        labelProps,
-        fieldProps,
-        children: state.segments.map((segment2, i) => /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
-          DateSegment,
+        hasMessage && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
+          InputMessage,
           {
-            componentSize,
-            segment: segment2,
-            state
-          },
-          i
-        ))
-      }
-    );
-  }
-);
+            messageType: hasErrorMessage ? "error" : "tip",
+            message: (_a = errorMessage != null ? errorMessage : tip) != null ? _a : ""
+          }
+        )
+      ]
+    }
+  );
+}
+var DateInput = (0, import_react79.forwardRef)(_DateInput);
+DateInput.displayName = "DateInput";
+
+// src/components/date-inputs/DatePicker/DateField/DateField.tsx
+var import_jsx_runtime234 = require("react/jsx-runtime");
+function _DateField({
+  componentSize = "medium",
+  buttonProps,
+  groupProps,
+  ...props
+}, forwardedRef) {
+  const state = (0, import_datepicker3.useDateFieldState)({
+    ...props,
+    locale,
+    createCalendar: import_date5.createCalendar
+  });
+  const ref = (0, import_react80.useRef)(null);
+  const { labelProps, fieldProps } = (0, import_datepicker2.useDateField)(props, state, ref);
+  const disabled = props.isDisabled || !!fieldProps["aria-disabled"];
+  return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
+    DateInput,
+    {
+      ...props,
+      groupProps,
+      componentSize,
+      label: props.label,
+      disabled,
+      required: props.isRequired,
+      ref: forwardedRef,
+      internalRef: ref,
+      readOnly: props.isReadOnly,
+      prefix: !props.isReadOnly && /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
+        CalendarButton,
+        {
+          componentSize,
+          ...buttonProps,
+          isDisabled: disabled
+        }
+      ),
+      labelProps,
+      fieldProps,
+      children: state.segments.map((segment2, i) => /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
+        DateSegment,
+        {
+          componentSize,
+          segment: segment2,
+          state
+        },
+        i
+      ))
+    }
+  );
+}
+var DateField = (0, import_react80.forwardRef)(_DateField);
 DateField.displayName = "DateField";
 
 // src/components/date-inputs/utils/useFocusManagerRef.ts
@@ -10950,7 +10944,7 @@ function _DatePicker({ errorMessage, componentSize, tip, style, width, ...props
   );
   const ref = (0, import_react82.useRef)(null);
   const combinedRef = useCombinedRef(ref, domRef);
-  const { buttonProps, calendarProps, fieldProps } = (0, import_datepicker4.useDatePicker)(
+  const { buttonProps, calendarProps, fieldProps, groupProps } = (0, import_datepicker4.useDatePicker)(
     { ...props, granularity: "day" },
     state,
     ref
@@ -10960,6 +10954,7 @@ function _DatePicker({ errorMessage, componentSize, tip, style, width, ...props
       DateField,
       {
         ...fieldProps,
+        groupProps,
         ref: combinedRef,
         componentSize,
         tip,
@@ -11291,13 +11286,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
@@ -11911,7 +11906,7 @@ var import_styled_components81 = __toESM(require("styled-components"));
 var import_dds_design_tokens50 = require("@norges-domstoler/dds-design-tokens");
 var { colors: colors30, spacing: spacing31, borderRadius: borderRadius10 } = import_dds_design_tokens50.ddsBaseTokens;
 var typographyType6 = "bodySans01";
-var container16 = {
+var container14 = {
   gap: spacing31.SizesDdsSpacingX025,
   padding: `${spacing31.SizesDdsSpacingX0125} ${spacing31.SizesDdsSpacingX025}`,
   backgroundColor: colors30.DdsColorNeutralsGray1,
@@ -11922,22 +11917,22 @@ var group3 = {
   gap: spacing31.SizesDdsSpacingX075
 };
 var chipTokens = {
-  container: container16,
+  container: container14,
   group: group3
 };
 
 // src/components/Chip/Chip.tsx
 var import_jsx_runtime248 = require("react/jsx-runtime");
-var { container: container17 } = chipTokens;
+var { container: container15 } = chipTokens;
 var Container15 = (0, import_styled_components81.default)(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 = (0, import_react96.forwardRef)((props, ref) => {
@@ -13002,7 +12997,7 @@ var InlineTextArea = (0, import_react106.forwardRef)((props, ref) => {
   const descId = derivativeIdGenerator(uniqueId, "desc");
   const inputRef = (0, import_react106.useRef)(null);
   const combinedRef = useCombinedRef(ref, inputRef);
-  return /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(OuterInputContainer, { width, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(OuterInputContainer, { $width: width, children: [
     /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(InputContainer, { children: [
       !isEditing && !hideIcon && /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
         IconWrapper2,
@@ -13086,7 +13081,7 @@ var InlineInput = (0, import_react108.forwardRef)(
     const descId = derivativeIdGenerator(uniqueId, "desc");
     const inputRef = (0, import_react108.useRef)(null);
     const combinedRef = useCombinedRef(ref, inputRef);
-    return /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(OuterInputContainer, { width, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(OuterInputContainer, { $width: width, children: [
       /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(InputContainer, { children: [
         !isEditing && !hideIcon && /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
           IconWrapper2,
@@ -13214,7 +13209,7 @@ var TextArea = (0, import_react110.forwardRef)(
     const errorMessageId = derivativeIdGenerator(uniqueId, "errorMessage");
     const showRequiredStyling = required || !!ariaRequired;
     const containerProps = {
-      width,
+      $width: width,
       className,
       style
     };