@norges-domstoler/dds-components 21.8.0 → 21.9.0

package/dist/index.mjs

@@ -1112,7 +1112,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) => {
@@ -5511,7 +5511,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",
@@ -5544,7 +5544,7 @@ function CookieBanner({
               buttons && /* @__PURE__ */ jsx222(
                 HStack,
                 {
-                  gap: applyResponsiveStyle("x1", "sm", "x1.5"),
+                  gap: styleUpToBreakpoint("x1", "sm", "x1.5"),
                   flexWrap: "wrap",
                   paddingBlock: "x0.25 0",
                   children: buttons.map((props) => /* @__PURE__ */ jsx222(Button, { ...props, size: "medium", purpose: "secondary" }))
@@ -6300,7 +6300,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
@@ -8987,8 +8996,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"
@@ -10343,8 +10352,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__ */ jsxs69("div", { className: Pagination_default.indicators, children: [
@@ -10995,7 +11004,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}`]
@@ -11008,7 +11017,7 @@ var PhoneInput = ({
           /* @__PURE__ */ jsx287(
             NativeSelect,
             {
-              width: applyResponsiveStyle(
+              width: styleUpToBreakpoint(
                 "100%",
                 bp,
                 componentSize === "xsmall" ? "5rem" : "8rem"