@norges-domstoler/dds-components 21.8.0 → 21.9.0

package/dist/index.d.mts

@@ -2311,7 +2311,7 @@ declare const Typography: {
 interface CommonInputProps {
     /**Ledetekst. */
     label?: string;
-    /**Bredde for inputfeltet. */
+    /**Bredde for inputfeltet. Kan settes per brekkpunkt, manglende brekkpunter får da default bredde. */
     width?: ResponsiveProps['width'];
     /**Hjelpetekst. */
     tip?: string;

package/dist/index.d.ts

@@ -2311,7 +2311,7 @@ declare const Typography: {
 interface CommonInputProps {
     /**Ledetekst. */
     label?: string;
-    /**Bredde for inputfeltet. */
+    /**Bredde for inputfeltet. Kan settes per brekkpunkt, manglende brekkpunter får da default bredde. */
     width?: ResponsiveProps['width'];
     /**Hjelpetekst. */
     tip?: string;

package/dist/index.js

@@ -1492,7 +1492,7 @@ function getResponsiveCSSProperties(property, prefix2, suffix) {
   }
   return properties;
 }
-function applyResponsiveStyle(p, bp, largeScreenP) {
+function styleUpToBreakpoint(p, bp, largeScreenP) {
   if (!bp) return largeScreenP;
   const bpIndex = BREAKPOINTS.indexOf(bp);
   return BREAKPOINTS.reduce((acc, curr, index) => {
@@ -5863,7 +5863,7 @@ function CookieBanner({
       ),
       role: "region",
       "aria-label": tAriaLabel,
-      padding: applyResponsiveStyle("x1", "sm", "x1.5"),
+      padding: styleUpToBreakpoint("x1", "sm", "x1.5"),
       width,
       maxHeight,
       border: "border-default",
@@ -5896,7 +5896,7 @@ function CookieBanner({
               buttons && /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
                 HStack,
                 {
-                  gap: applyResponsiveStyle("x1", "sm", "x1.5"),
+                  gap: styleUpToBreakpoint("x1", "sm", "x1.5"),
                   flexWrap: "wrap",
                   paddingBlock: "x0.25 0",
                   children: buttons.map((props) => /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(Button, { ...props, size: "medium", purpose: "secondary" }))
@@ -6631,7 +6631,16 @@ function getDefaultText(value, defaultValue) {
   return "";
 }
 function getInputWidth(width, defaultW) {
-  return width ? width : defaultW ? defaultW : "var(--dds-input-default-width)";
+  const fallback = defaultW ? defaultW : "var(--dds-input-default-width)";
+  if (isBreakpointObject(width)) {
+    return BREAKPOINTS.reduce((acc, bp) => {
+      return {
+        ...acc,
+        [bp]: bp in width ? width[bp] : fallback
+      };
+    }, {});
+  }
+  return width != null ? width : fallback;
 }
 
 // src/components/date-inputs/common/DateInput.tsx
@@ -9285,8 +9294,8 @@ var InternalHeader = (props) => {
     {
       display: "flex",
       alignItems: "center",
-      gap: applyResponsiveStyle("x1.5", smallScreenBreakpoint, "x1"),
-      paddingInline: applyResponsiveStyle(
+      gap: styleUpToBreakpoint("x1.5", smallScreenBreakpoint, "x1"),
+      paddingInline: styleUpToBreakpoint(
         "x1.5",
         smallScreenBreakpoint,
         "x1 x0.5"
@@ -10629,8 +10638,8 @@ var Pagination = ({
       gap: "x0.75",
       justifyContent: "space-between",
       flexWrap: "wrap",
-      flexDirection: applyResponsiveStyle("column", smallScreenBreakpoint),
-      alignItems: applyResponsiveStyle("center", smallScreenBreakpoint),
+      flexDirection: styleUpToBreakpoint("column", smallScreenBreakpoint),
+      alignItems: styleUpToBreakpoint("center", smallScreenBreakpoint),
       ...getBaseHTMLProps(id, className, htmlProps, rest),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime287.jsxs)("div", { className: Pagination_default.indicators, children: [
@@ -11275,7 +11284,7 @@ var PhoneInput = ({
       Box,
       {
         display: "flex",
-        flexDirection: applyResponsiveStyle("column", bp, "row"),
+        flexDirection: styleUpToBreakpoint("column", bp, "row"),
         className: cn(
           PhoneInput_default["inputs-container"],
           !!bp && PhoneInput_default[`inputs-container--small-screen-${bp}`]
@@ -11288,7 +11297,7 @@ var PhoneInput = ({
           /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
             NativeSelect,
             {
-              width: applyResponsiveStyle(
+              width: styleUpToBreakpoint(
                 "100%",
                 bp,
                 componentSize === "xsmall" ? "5rem" : "8rem"