@navikt/ds-react 6.10.1 → 6.11.0

package/esm/pagination/PaginationItem.js

@@ -13,10 +13,12 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { Button } from "../button/index.js";
 export const Item = forwardRef((_a, ref) => {
-    var { children, as: Component = "button", selected = false, className } = _a, rest = __rest(_a, ["children", "as", "selected", "className"]);
+    var { children, as: Component = "button", selected = false, className, page } = _a, rest = __rest(_a, ["children", "as", "selected", "className", "page"]);
     return (React.createElement(Button, Object.assign({ as: Component, variant: "tertiary", "aria-current": selected, ref: ref, className: cl("navds-pagination__item", className, {
             "navds-pagination__item--selected": selected,
-        }) }, (Component === "button" && { type: "button" }), rest), children));
+        }), "data-page": page, 
+        /* TODO: Breaking change to remove. Add to future major version. */
+        page: page }, (Component === "button" && { type: "button" }), rest), children));
 });
 export default Item;
 //# sourceMappingURL=PaginationItem.js.map

package/esm/pagination/PaginationItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationItem.js","sourceRoot":"","sources":["../../src/pagination/PaginationItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAe,MAAM,WAAW,CAAC;AA0BhD,MAAM,CAAC,MAAM,IAAI,GAAuB,UAAU,CAChD,CACE,EAMC,EACD,GAAG,EACH,EAAE;QARF,EACE,QAAQ,EACR,EAAE,EAAE,SAAS,GAAG,QAAQ,EACxB,QAAQ,GAAG,KAAK,EAChB,SAAS,OAEV,EADI,IAAI,cALT,2CAMC,CADQ;IAIT,OAAO,CACL,oBAAC,MAAM,kBACL,EAAE,EAAE,SAAS,EACb,OAAO,EAAC,UAAU,kBACJ,QAAQ,EACtB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,EAAE;YACjD,kCAAkC,EAAE,QAAQ;SAC7C,CAAC,IACE,CAAC,SAAS,KAAK,QAAQ,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAC9C,IAAI,GAEP,QAAQ,CACF,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"PaginationItem.js","sourceRoot":"","sources":["../../src/pagination/PaginationItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAe,MAAM,WAAW,CAAC;AA0BhD,MAAM,CAAC,MAAM,IAAI,GAAuB,UAAU,CAChD,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,QAAQ,EACR,EAAE,EAAE,SAAS,GAAG,QAAQ,EACxB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,IAAI,OAEL,EADI,IAAI,cANT,mDAOC,CADQ;IAIT,OAAO,CACL,oBAAC,MAAM,kBACL,EAAE,EAAE,SAAS,EACb,OAAO,EAAC,UAAU,kBACJ,QAAQ,EACtB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,EAAE;YACjD,kCAAkC,EAAE,QAAQ;SAC7C,CAAC,eACS,IAAI;QACf,mEAAmE;QACnE,IAAI,EAAE,IAAI,IACN,CAAC,SAAS,KAAK,QAAQ,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAC9C,IAAI,GAEP,QAAQ,CACF,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/portal/Portal.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef } from "react";
 import ReactDOM from "react-dom";
 import { useProvider } from "../provider/Provider.js";
-import { Slot } from "../util/Slot.js";
+import { Slot } from "../slot/Slot.js";
 export const Portal = forwardRef((_a, ref) => {
     var _b, _c, _d;
     var { rootElement, asChild } = _a, rest = __rest(_a, ["rootElement", "asChild"]);

package/esm/slot/Slot.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+interface SlotProps extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+}
+declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
+export { Slot, type SlotProps };

package/esm/slot/Slot.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+import { mergeRefs } from "../util/hooks/useMergeRefs.js";
+import { mergeProps } from "./merge-props.js";
+const Slot = React.forwardRef((props, forwardedRef) => {
+    var _a;
+    const { children } = props, slotProps = __rest(props, ["children"]);
+    if (React.isValidElement(children)) {
+        return React.cloneElement(children, Object.assign(Object.assign({}, mergeProps(slotProps, children.props)), { ref: forwardedRef
+                ? mergeRefs([forwardedRef, children.ref])
+                : children.ref }));
+    }
+    if (React.Children.count(children) > 1) {
+        const error = new Error("Aksel: Components using 'asChild' expects to recieve a single React element child.");
+        error.name = "SlotError";
+        (_a = Error.captureStackTrace) === null || _a === void 0 ? void 0 : _a.call(Error, error, Slot);
+        throw error;
+    }
+    return null;
+});
+export { Slot };
+//# sourceMappingURL=Slot.js.map

package/esm/slot/Slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slot.js","sourceRoot":"","sources":["../../src/slot/Slot.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAM3C,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAyB,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;;IAC5E,MAAM,EAAE,QAAQ,KAAmB,KAAK,EAAnB,SAAS,UAAK,KAAK,EAAlC,YAA0B,CAAQ,CAAC;IAEzC,IAAI,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;QACnC,OAAO,KAAK,CAAC,YAAY,CAAM,QAAQ,kCAClC,UAAU,CAAC,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,KACxC,GAAG,EAAE,YAAY;gBACf,CAAC,CAAC,SAAS,CAAC,CAAC,YAAY,EAAG,QAAgB,CAAC,GAAG,CAAC,CAAC;gBAClD,CAAC,CAAE,QAAgB,CAAC,GAAG,IACzB,CAAC;IACL,CAAC;IAED,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QACvC,MAAM,KAAK,GAAG,IAAI,KAAK,CACrB,oFAAoF,CACrF,CAAC;QACF,KAAK,CAAC,IAAI,GAAG,WAAW,CAAC;QACzB,MAAA,KAAK,CAAC,iBAAiB,sDAAG,KAAK,EAAE,IAAI,CAAC,CAAC;QACvC,MAAM,KAAK,CAAC;IACd,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC,CAAC;AAEH,OAAO,EAAE,IAAI,EAAkB,CAAC"}

package/esm/slot/merge-props.d.ts

@@ -0,0 +1,4 @@
+declare function mergeProps(slotProps: Record<string, any>, childProps: Record<string, any>): {
+    [x: string]: any;
+};
+export { mergeProps };

package/esm/slot/merge-props.js

@@ -0,0 +1,34 @@
+function mergeProps(slotProps, childProps) {
+    // all child props should override
+    const overrideProps = Object.assign({}, childProps);
+    for (const propName in childProps) {
+        const slotPropValue = slotProps[propName];
+        const childPropValue = childProps[propName];
+        const isHandler = /^on[A-Z]/.test(propName);
+        if (isHandler) {
+            // if the handler exists on both, we compose them
+            if (slotPropValue && childPropValue) {
+                overrideProps[propName] = (...args) => {
+                    childPropValue(...args);
+                    slotPropValue(...args);
+                };
+            }
+            // but if it exists only on the slot, we use only this one
+            else if (slotPropValue) {
+                overrideProps[propName] = slotPropValue;
+            }
+        }
+        // if it's `style`, we merge them
+        else if (propName === "style") {
+            overrideProps[propName] = Object.assign(Object.assign({}, slotPropValue), childPropValue);
+        }
+        else if (propName === "className") {
+            overrideProps[propName] = [slotPropValue, childPropValue]
+                .filter(Boolean)
+                .join(" ");
+        }
+    }
+    return Object.assign(Object.assign({}, slotProps), overrideProps);
+}
+export { mergeProps };
+//# sourceMappingURL=merge-props.js.map

package/esm/slot/merge-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-props.js","sourceRoot":"","sources":["../../src/slot/merge-props.ts"],"names":[],"mappings":"AAAA,SAAS,UAAU,CACjB,SAA8B,EAC9B,UAA+B;IAE/B,kCAAkC;IAClC,MAAM,aAAa,qBAAQ,UAAU,CAAE,CAAC;IAExC,KAAK,MAAM,QAAQ,IAAI,UAAU,EAAE,CAAC;QAClC,MAAM,aAAa,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;QAC1C,MAAM,cAAc,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;QAE5C,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5C,IAAI,SAAS,EAAE,CAAC;YACd,iDAAiD;YACjD,IAAI,aAAa,IAAI,cAAc,EAAE,CAAC;gBACpC,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,IAAe,EAAE,EAAE;oBAC/C,cAAc,CAAC,GAAG,IAAI,CAAC,CAAC;oBACxB,aAAa,CAAC,GAAG,IAAI,CAAC,CAAC;gBACzB,CAAC,CAAC;YACJ,CAAC;YACD,0DAA0D;iBACrD,IAAI,aAAa,EAAE,CAAC;gBACvB,aAAa,CAAC,QAAQ,CAAC,GAAG,aAAa,CAAC;YAC1C,CAAC;QACH,CAAC;QACD,iCAAiC;aAC5B,IAAI,QAAQ,KAAK,OAAO,EAAE,CAAC;YAC9B,aAAa,CAAC,QAAQ,CAAC,mCAAQ,aAAa,GAAK,cAAc,CAAE,CAAC;QACpE,CAAC;aAAM,IAAI,QAAQ,KAAK,WAAW,EAAE,CAAC;YACpC,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,aAAa,EAAE,cAAc,CAAC;iBACtD,MAAM,CAAC,OAAO,CAAC;iBACf,IAAI,CAAC,GAAG,CAAC,CAAC;QACf,CAAC;IACH,CAAC;IAED,uCAAY,SAAS,GAAK,aAAa,EAAG;AAC5C,CAAC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/esm/toggle-group/ToggleGroup.d.ts

@@ -16,9 +16,9 @@ interface ToggleGroupComponent extends React.ForwardRefExoticComponent<ToggleGro
  * @example
  * ```jsx
  * <ToggleGroup defaultValue="lest" onChange={console.log} size="small">
- *   <ToggleGroup.Item value="ulest">Ulest</ToggleGroup.Item>
- *   <ToggleGroup.Item value="lest">Leste</ToggleGroup.Item>
- *   <ToggleGroup.Item value="sendt">Sendt</ToggleGroup.Item>
+ *   <ToggleGroup.Item value="ulest" label="Ulest" />
+ *   <ToggleGroup.Item value="lest" label="Leste" />
+ *   <ToggleGroup.Item value="sendt" label="Sendt" />
  * </ToggleGroup>
  * ```
  */

package/esm/toggle-group/ToggleGroup.js

@@ -25,9 +25,9 @@ import { useToggleGroup } from "./useToggleGroup.js";
  * @example
  * ```jsx
  * <ToggleGroup defaultValue="lest" onChange={console.log} size="small">
- *   <ToggleGroup.Item value="ulest">Ulest</ToggleGroup.Item>
- *   <ToggleGroup.Item value="lest">Leste</ToggleGroup.Item>
- *   <ToggleGroup.Item value="sendt">Sendt</ToggleGroup.Item>
+ *   <ToggleGroup.Item value="ulest" label="Ulest" />
+ *   <ToggleGroup.Item value="lest" label="Leste" />
+ *   <ToggleGroup.Item value="sendt" label="Sendt" />
  * </ToggleGroup>
  * ```
  */

package/esm/toggle-group/parts/ToggleItem.d.ts

@@ -1,13 +1,40 @@
 import React from "react";
-export interface ToggleGroupItemProps extends React.HTMLAttributes<HTMLButtonElement> {
+type BaseProps = Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> & {
     /**
-     * Content.
+     * Value for state-handling.
+     */
+    value: string;
+};
+type ChildrenProps = {
+    /**
+     * @deprecated Use `label` and/or `icon` as replacement.
      */
     children: React.ReactNode;
+    label?: never;
+    icon?: never;
+};
+type LabelProps = {
+    children?: never;
     /**
-     * Value for state-handling.
+     * Item label.
      */
-    value: string;
-}
+    label: React.ReactNode;
+    /**
+     * Item Icon.
+     */
+    icon?: React.ReactNode;
+};
+type IconProps = {
+    children?: never;
+    /**
+     * Item label.
+     */
+    label?: React.ReactNode;
+    /**
+     * Item Icon.
+     */
+    icon: React.ReactNode;
+};
+export type ToggleGroupItemProps = BaseProps & (ChildrenProps | LabelProps | IconProps);
 declare const ToggleItem: React.ForwardRefExoticComponent<ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
 export default ToggleItem;

package/esm/toggle-group/parts/ToggleItem.js

@@ -15,11 +15,13 @@ import { BodyShort } from "../../typography/BodyShort.js";
 import { useToggleGroupContext } from "../ToggleGroup.context.js";
 import { useToggleItem } from "./useToggleItem.js";
 const ToggleItem = forwardRef((_a, forwardedRef) => {
-    var { className, children, value, onClick, onFocus, onKeyDown } = _a, rest = __rest(_a, ["className", "children", "value", "onClick", "onFocus", "onKeyDown"]);
+    var { className, children, icon, label, value, onClick, onFocus, onKeyDown } = _a, rest = __rest(_a, ["className", "children", "icon", "label", "value", "onClick", "onFocus", "onKeyDown"]);
     const itemCtx = useToggleItem({ value, onClick, onFocus, disabled: false, onKeyDown }, forwardedRef);
     const ctx = useToggleGroupContext();
     return (React.createElement("button", Object.assign({}, rest, { ref: itemCtx.ref, className: cl("navds-toggle-group__button", className), type: "button", role: "radio", "aria-checked": itemCtx.isSelected, tabIndex: itemCtx.isFocused ? 0 : -1, onClick: itemCtx.onClick, onFocus: itemCtx.onFocus, onKeyDown: itemCtx.onKeyDown }),
-        React.createElement(BodyShort, { as: "span", className: "navds-toggle-group__button-inner", size: ctx === null || ctx === void 0 ? void 0 : ctx.size }, children)));
+        React.createElement(BodyShort, { as: "span", className: "navds-toggle-group__button-inner", size: ctx === null || ctx === void 0 ? void 0 : ctx.size }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
+            icon,
+            label)))));
 });
 export default ToggleItem;
 //# sourceMappingURL=ToggleItem.js.map

package/esm/toggle-group/parts/ToggleItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleItem.js","sourceRoot":"","sources":["../../../src/toggle-group/parts/ToggleItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAchD,MAAM,UAAU,GAAG,UAAU,CAC3B,CACE,EAAoE,EACpE,YAAY,EACZ,EAAE;QAFF,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,OAAW,EAAN,IAAI,cAAlE,qEAAoE,CAAF;IAGlE,MAAM,OAAO,GAAG,aAAa,CAC3B,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EACvD,YAAY,CACb,CAAC;IACF,MAAM,GAAG,GAAG,qBAAqB,EAAE,CAAC;IAEpC,OAAO,CACL,gDACM,IAAI,IACR,GAAG,EAAE,OAAO,CAAC,GAAG,EAChB,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,EACtD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,OAAO,kBACE,OAAO,CAAC,UAAU,EAChC,QAAQ,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACpC,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,SAAS,EAAE,OAAO,CAAC,SAAS;QAE5B,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,SAAS,EAAC,kCAAkC,EAC5C,IAAI,EAAE,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,IAEd,QAAQ,CACC,CACL,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ToggleItem.js","sourceRoot":"","sources":["../../../src/toggle-group/parts/ToggleItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AA6ChD,MAAM,UAAU,GAAG,UAAU,CAC3B,CACE,EAUC,EACD,YAAY,EACZ,EAAE;QAZF,EACE,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,KAAK,EACL,OAAO,EACP,OAAO,EACP,SAAS,OAEV,EADI,IAAI,cATT,sFAUC,CADQ;IAIT,MAAM,OAAO,GAAG,aAAa,CAC3B,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EACvD,YAAY,CACb,CAAC;IACF,MAAM,GAAG,GAAG,qBAAqB,EAAE,CAAC;IAEpC,OAAO,CACL,gDACM,IAAI,IACR,GAAG,EAAE,OAAO,CAAC,GAAG,EAChB,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,EACtD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,OAAO,kBACE,OAAO,CAAC,UAAU,EAChC,QAAQ,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACpC,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,SAAS,EAAE,OAAO,CAAC,SAAS;QAE5B,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,SAAS,EAAC,kCAAkC,EAC5C,IAAI,EAAE,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,IAEd,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,CACX;YACG,IAAI;YACJ,KAAK,CACL,CACJ,CACS,CACL,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/esm/util/hooks/descendants/useDescendant.js

@@ -38,7 +38,7 @@ export function createDescendantContext() {
             if (!ref.current)
                 return;
             const dataIndex = Number(ref.current.dataset["index"]);
-            if (index != dataIndex && !Number.isNaN(dataIndex)) {
+            if (index !== dataIndex && !Number.isNaN(dataIndex)) {
                 setIndex(dataIndex);
             }
         });

package/esm/util/hooks/descendants/useDescendant.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDescendant.js","sourceRoot":"","sources":["../../../../src/util/hooks/descendants/useDescendant.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAqB,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B;;GAEG;AACH,MAAM,UAAU,uBAAuB;IAIrC,MAAM,CAAC,0BAA0B,EAAE,qBAAqB,CAAC,GAAG,aAAa,CAEvE;QACA,IAAI,EAAE,qBAAqB;QAC3B,YAAY,EACV,+DAA+D;KAClE,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,IAAI,CAC1B,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,oBAAC,0BAA0B,oBAAK,KAAK,CAAC,KAAK,GACxC,KAAK,CAAC,QAAQ,CACY,CAC9B,CACF,CAAC;IAEF;;;;;;OAMG;IACH,SAAS,cAAc,CAAC,OAA8B;QACpD,MAAM,WAAW,GAAG,qBAAqB,EAAE,CAAC;QAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,CAAI,IAAI,CAAC,CAAC;QAE5B,qBAAqB,CAAC,GAAG,EAAE;YACzB,OAAO,GAAG,EAAE;gBACV,IAAI,CAAC,GAAG,CAAC,OAAO;oBAAE,OAAO;gBACzB,WAAW,CAAC,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YACtC,CAAC,CAAC;QACJ,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,GAAG,CAAC,OAAO;gBAAE,OAAO;YACzB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;YACvD,IAAI,KAAK,IAAI,SAAS,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC;gBACnD,QAAQ,CAAC,SAAS,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,OAAO;YACzB,CAAC,CAAC,IAAI,CAAuB,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YAC3D,CAAC,CAAC,IAAI,CAAuB,WAAW,CAAC,QAAQ,CAAC,CAAC;QAErD,OAAO;YACL,WAAW;YACX,KAAK;YACL,YAAY,EAAE,WAAW,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC;YACrD,QAAQ,EAAE,SAAS,CAAC,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;SACxC,CAAC;IACJ,CAAC;IAED;;;OAGG;IACH,SAAS,eAAe;QACtB,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,kBAAkB,EAAQ,CAAC,CAAC,OAAO,CAAC;QAEnE,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,OAAO;QACL,mBAAmB;QACnB,eAAe;QACf,+CAA+C;QAC/C,qBAAqB;QACrB,8EAA8E;QAC9E,eAAe;QACf,+BAA+B;QAC/B,cAAc;KACN,CAAC;AACb,CAAC"}
+{"version":3,"file":"useDescendant.js","sourceRoot":"","sources":["../../../../src/util/hooks/descendants/useDescendant.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAqB,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B;;GAEG;AACH,MAAM,UAAU,uBAAuB;IAIrC,MAAM,CAAC,0BAA0B,EAAE,qBAAqB,CAAC,GAAG,aAAa,CAEvE;QACA,IAAI,EAAE,qBAAqB;QAC3B,YAAY,EACV,+DAA+D;KAClE,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,IAAI,CAC1B,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,oBAAC,0BAA0B,oBAAK,KAAK,CAAC,KAAK,GACxC,KAAK,CAAC,QAAQ,CACY,CAC9B,CACF,CAAC;IAEF;;;;;;OAMG;IACH,SAAS,cAAc,CAAC,OAA8B;QACpD,MAAM,WAAW,GAAG,qBAAqB,EAAE,CAAC;QAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,CAAI,IAAI,CAAC,CAAC;QAE5B,qBAAqB,CAAC,GAAG,EAAE;YACzB,OAAO,GAAG,EAAE;gBACV,IAAI,CAAC,GAAG,CAAC,OAAO;oBAAE,OAAO;gBACzB,WAAW,CAAC,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YACtC,CAAC,CAAC;QACJ,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,GAAG,CAAC,OAAO;gBAAE,OAAO;YACzB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;YACvD,IAAI,KAAK,KAAK,SAAS,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC;gBACpD,QAAQ,CAAC,SAAS,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,OAAO;YACzB,CAAC,CAAC,IAAI,CAAuB,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YAC3D,CAAC,CAAC,IAAI,CAAuB,WAAW,CAAC,QAAQ,CAAC,CAAC;QAErD,OAAO;YACL,WAAW;YACX,KAAK;YACL,YAAY,EAAE,WAAW,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC;YACrD,QAAQ,EAAE,SAAS,CAAC,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;SACxC,CAAC;IACJ,CAAC;IAED;;;OAGG;IACH,SAAS,eAAe;QACtB,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,kBAAkB,EAAQ,CAAC,CAAC,OAAO,CAAC;QAEnE,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,OAAO;QACL,mBAAmB;QACnB,eAAe;QACf,+CAA+C;QAC/C,qBAAqB;QACrB,8EAA8E;QAC9E,eAAe;QACf,+BAA+B;QAC/B,cAAc;KACN,CAAC;AACb,CAAC"}

package/esm/util/hooks/descendants/utils.js

@@ -25,7 +25,7 @@ export function sortNodes(nodes) {
         return 0;
     });
 }
-export const isElement = (el) => typeof el == "object" &&
+export const isElement = (el) => typeof el === "object" &&
     "nodeType" in el &&
     el.nodeType === Node.ELEMENT_NODE;
 export function getNextIndex(current, max, loop) {

package/esm/util/hooks/descendants/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/util/hooks/descendants/utils.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CAAC,KAAa;IACrC,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACzB,MAAM,OAAO,GAAG,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;QAE7C,IACE,OAAO,GAAG,IAAI,CAAC,2BAA2B;YAC1C,OAAO,GAAG,IAAI,CAAC,8BAA8B,EAC7C,CAAC;YACD,QAAQ;YACR,OAAO,CAAC,CAAC,CAAC;QACZ,CAAC;QAED,IACE,OAAO,GAAG,IAAI,CAAC,2BAA2B;YAC1C,OAAO,GAAG,IAAI,CAAC,0BAA0B,EACzC,CAAC;YACD,QAAQ;YACR,OAAO,CAAC,CAAC;QACX,CAAC;QAED,IACE,OAAO,GAAG,IAAI,CAAC,8BAA8B;YAC7C,OAAO,GAAG,IAAI,CAAC,yCAAyC,EACxD,CAAC;YACD,MAAM,KAAK,CAAC,8BAA8B,CAAC,CAAC;QAC9C,CAAC;QAED,OAAO,CAAC,CAAC;IACX,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAO,EAAqB,EAAE,CACtD,OAAO,EAAE,IAAI,QAAQ;IACrB,UAAU,IAAI,EAAE;IAChB,EAAE,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC;AAEpC,MAAM,UAAU,YAAY,CAAC,OAAe,EAAE,GAAW,EAAE,IAAa;IACtE,IAAI,IAAI,GAAG,OAAO,GAAG,CAAC,CAAC;IACvB,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG;QAAE,IAAI,GAAG,CAAC,CAAC;IAClC,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,OAAe,EAAE,GAAW,EAAE,IAAa;IACtE,IAAI,IAAI,GAAG,OAAO,GAAG,CAAC,CAAC;IACvB,IAAI,IAAI,IAAI,IAAI,GAAG,CAAC;QAAE,IAAI,GAAG,GAAG,CAAC;IACjC,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,CAAI,KAAU,EAAE,EAAE,CAAC,KAAU,CAAC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/util/hooks/descendants/utils.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CAAC,KAAa;IACrC,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACzB,MAAM,OAAO,GAAG,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;QAE7C,IACE,OAAO,GAAG,IAAI,CAAC,2BAA2B;YAC1C,OAAO,GAAG,IAAI,CAAC,8BAA8B,EAC7C,CAAC;YACD,QAAQ;YACR,OAAO,CAAC,CAAC,CAAC;QACZ,CAAC;QAED,IACE,OAAO,GAAG,IAAI,CAAC,2BAA2B;YAC1C,OAAO,GAAG,IAAI,CAAC,0BAA0B,EACzC,CAAC;YACD,QAAQ;YACR,OAAO,CAAC,CAAC;QACX,CAAC;QAED,IACE,OAAO,GAAG,IAAI,CAAC,8BAA8B;YAC7C,OAAO,GAAG,IAAI,CAAC,yCAAyC,EACxD,CAAC;YACD,MAAM,KAAK,CAAC,8BAA8B,CAAC,CAAC;QAC9C,CAAC;QAED,OAAO,CAAC,CAAC;IACX,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAO,EAAqB,EAAE,CACtD,OAAO,EAAE,KAAK,QAAQ;IACtB,UAAU,IAAI,EAAE;IAChB,EAAE,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC;AAEpC,MAAM,UAAU,YAAY,CAAC,OAAe,EAAE,GAAW,EAAE,IAAa;IACtE,IAAI,IAAI,GAAG,OAAO,GAAG,CAAC,CAAC;IACvB,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG;QAAE,IAAI,GAAG,CAAC,CAAC;IAClC,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,OAAe,EAAE,GAAW,EAAE,IAAa;IACtE,IAAI,IAAI,GAAG,OAAO,GAAG,CAAC,CAAC;IACvB,IAAI,IAAI,IAAI,IAAI,GAAG,CAAC;QAAE,IAAI,GAAG,GAAG,CAAC;IACjC,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,CAAI,KAAU,EAAE,EAAE,CAAC,KAAU,CAAC"}

package/esm/util/i18n/get.js

@@ -24,10 +24,11 @@ export function get(keypath, ...objs) {
 }
 function getKeypath(str) {
     const path = [];
-    let result;
-    while ((result = OBJECT_NOTATION_MATCHER.exec(str))) {
+    let result = OBJECT_NOTATION_MATCHER.exec(str);
+    while (result) {
         const [, first, second] = result;
         path.push(first || second);
+        result = OBJECT_NOTATION_MATCHER.exec(str);
     }
     return path;
 }

package/esm/util/i18n/get.js.map

@@ -1 +1 @@
-{"version":3,"file":"get.js","sourceRoot":"","sources":["../../../src/util/i18n/get.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,uBAAuB,GAAG,QAAQ,CAAC;AAEzC,MAAM,UAAU,GAAG,CACjB,OAA0B,EAC1B,GAAG,IAAuC;IAE1C,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAEpE,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;QACvB,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,SAAS;QACX,CAAC;QAED,IAAI,GAAG,GAA+B,GAAG,CAAC;QAE1C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACrC,MAAM,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;YACzB,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;gBACtB,SAAS;YACX,CAAC;YACD,GAAG,GAAG,GAAG,CAAC;QACZ,CAAC;QAED,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC5B,OAAO,GAAG,CAAC;QACb,CAAC;IACH,CAAC;IAED,MAAM,IAAI,KAAK,CACb,kEAAkE,CACnE,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,GAAW;IAC7B,MAAM,IAAI,GAAa,EAAE,CAAC;IAC1B,IAAI,MAA8B,CAAC;IACnC,OAAO,CAAC,MAAM,GAAG,uBAAuB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;QACpD,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC;QACjC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC;IAC7B,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC"}
+{"version":3,"file":"get.js","sourceRoot":"","sources":["../../../src/util/i18n/get.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,uBAAuB,GAAG,QAAQ,CAAC;AAEzC,MAAM,UAAU,GAAG,CACjB,OAA0B,EAC1B,GAAG,IAAuC;IAE1C,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAEpE,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;QACvB,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,SAAS;QACX,CAAC;QAED,IAAI,GAAG,GAA+B,GAAG,CAAC;QAE1C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACrC,MAAM,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;YACzB,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;gBACtB,SAAS;YACX,CAAC;YACD,GAAG,GAAG,GAAG,CAAC;QACZ,CAAC;QAED,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC5B,OAAO,GAAG,CAAC;QACb,CAAC;IACH,CAAC;IAED,MAAM,IAAI,KAAK,CACb,kEAAkE,CACnE,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,GAAW;IAC7B,MAAM,IAAI,GAAa,EAAE,CAAC;IAC1B,IAAI,MAAM,GAAG,uBAAuB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE/C,OAAO,MAAM,EAAE,CAAC;QACd,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC;QACjC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC;QAC3B,MAAM,GAAG,uBAAuB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7C,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "6.10.1",
+  "version": "6.11.0",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -594,8 +594,8 @@
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^6.10.1",
-    "@navikt/ds-tokens": "^6.10.1",
+    "@navikt/aksel-icons": "^6.11.0",
+    "@navikt/ds-tokens": "^6.11.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.0"

package/src/collapsible/parts/Collapsible.Content.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { Slot } from "../../util/Slot";
+import { Slot } from "../../slot/Slot";
 import { useCollapsibleContext } from "../Collapsible.context";
 
 export interface CollapsibleContentProps

package/src/collapsible/parts/Collapsible.Trigger.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { Slot } from "../../util/Slot";
+import { Slot } from "../../slot/Slot";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { useCollapsibleContext } from "../Collapsible.context";
 

package/src/date/datepicker/types.ts

@@ -69,7 +69,7 @@ export interface DatePickerDefaultProps
   dropdownCaption?: boolean;
   /**
    * Apply the disabled modifier to the matching days.
-   * https://react-day-picker.js.org/api/types/Matcher
+   * https://react-day-picker.js.org/api/type-aliases/Matcher
    */
   disabled?: Matcher[];
   /**

package/src/date/monthpicker/types.ts

@@ -33,7 +33,7 @@ export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   dropdownCaption?: boolean;
   /**
-   * Apply the disabled modifier to the matching months. Uses a subset of React Day Picker Matcher type. https://react-day-picker.js.org/api/types/Matcher
+   * Apply the disabled modifier to the matching months. Uses a subset of React Day Picker Matcher type. https://react-day-picker.js.org/api/type-aliases/Matcher
    */
   disabled?: Matcher[];
   /**

package/src/form/file-upload/parts/Trigger.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { Slot } from "../../../util/Slot";
+import { Slot } from "../../../slot/Slot";
 import { FileUploadBaseProps } from "../FileUpload.types";
 import { useFileUpload } from "../useFileUpload";
 

package/src/form/file-upload/parts/item/Item.tsx

@@ -44,6 +44,11 @@ export interface FileUploadItemProps
    * @default "idle"
    */
   status?: "downloading" | "uploading" | "idle";
+  /**
+   * File description. Replaces file size when status is "idle".
+   * This is useful for displaying upload date. Should not act as a replacement for error messages.
+   */
+  description?: string;
   /**
    * Props for the action button.
    */
@@ -71,6 +76,7 @@ export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
         onFileClick,
         button,
         translations,
+        description,
         ...rest
       }: FileUploadItemProps,
       ref,
@@ -91,7 +97,7 @@ export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
         if (status === "downloading") {
           return translate("item.downloading");
         }
-        return formatFileSize(file);
+        return description ?? formatFileSize(file);
       }
 
       return (

package/src/layout/base/BasePrimitive.tsx

@@ -0,0 +1,232 @@
+import cl from "clsx";
+import React from "react";
+import { Slot } from "../../slot/Slot";
+import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
+import { ResponsiveProp, SpacingScale } from "../utilities/types";
+
+export interface BasePrimitiveProps {
+  children: React.ReactElement;
+  className?: string;
+  /**
+   * Padding around children.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * padding='4'
+   * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  padding?: ResponsiveProp<SpacingScale>;
+  /**
+   * Horizontal padding around children.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * paddingInline='4'
+   * paddingInline='4 5'
+   * paddingInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
+   */
+  paddingInline?: ResponsiveProp<
+    SpacingScale | `${SpacingScale} ${SpacingScale}`
+  >;
+  /**
+   * Vertical padding around children.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * paddingBlock='4'
+   * paddingBlock='4 5'
+   * paddingBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  paddingBlock?: ResponsiveProp<
+    SpacingScale | `${SpacingScale} ${SpacingScale}`
+  >;
+  /**
+   * CSS `width`
+   */
+  width?: ResponsiveProp<string>;
+  /**
+   * CSS `min-width`
+   */
+  minWidth?: ResponsiveProp<string>;
+  /**
+   * CSS `max-width`
+   */
+  maxWidth?: ResponsiveProp<string>;
+  /**
+   * CSS `height`
+   */
+  height?: ResponsiveProp<string>;
+  /**
+   * CSS `min-height`
+   */
+  minHeight?: ResponsiveProp<string>;
+  /**
+   * CSS `max-height`
+   */
+  maxHeight?: ResponsiveProp<string>;
+  /**
+   * CSS `position`
+   */
+  position?: ResponsiveProp<
+    "static" | "relative" | "absolute" | "fixed" | "sticky"
+  >;
+  /**
+   * CSS `inset`.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * inset='4'
+   * inset='4 5'
+   * inset={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
+   */
+  inset?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
+  /**
+   * CSS `top`
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * top='4'
+   * top={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  top?: ResponsiveProp<SpacingScale>;
+  /**
+   * CSS `right`
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * right='4'
+   * right={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  right?: ResponsiveProp<SpacingScale>;
+  /**
+   * CSS `bottom`
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * bottom='4'
+   * bottom={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  bottom?: ResponsiveProp<SpacingScale>;
+  /**
+   * CSS `left`
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * left='4'
+   * left={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  left?: ResponsiveProp<SpacingScale>;
+  /**
+   * CSS `overflow`
+   */
+  overflow?: ResponsiveProp<"visible" | "hidden" | "clip" | "scroll" | "auto">;
+  /**
+   * CSS `overflow-x`
+   */
+  overflowX?: ResponsiveProp<"visible" | "hidden" | "clip" | "scroll" | "auto">;
+  /**
+   * CSS `overflow-y`
+   */
+  overflowY?: ResponsiveProp<"visible" | "hidden" | "clip" | "scroll" | "auto">;
+  /**
+   * CSS `flex-basis`
+   */
+  flexBasis?: ResponsiveProp<string>;
+  /**
+   * CSS `flex-shrink`
+   */
+  flexShrink?: ResponsiveProp<string>;
+  /**
+   * CSS `flex-grow`
+   */
+  flexGrow?: ResponsiveProp<string>;
+}
+
+export const BasePrimitive = ({
+  children,
+  className,
+  padding,
+  paddingInline,
+  paddingBlock,
+  width,
+  minWidth,
+  maxWidth,
+  height,
+  minHeight,
+  maxHeight,
+  position,
+  inset,
+  top,
+  right,
+  left,
+  bottom,
+  overflow,
+  overflowX,
+  overflowY,
+  flexBasis,
+  flexGrow,
+  flexShrink,
+}: BasePrimitiveProps) => {
+  const style: React.CSSProperties = {
+    /* Padding */
+    ...getResponsiveProps("r", "p", "spacing", padding),
+    ...getResponsiveProps("r", "pi", "spacing", paddingInline),
+    ...getResponsiveProps("r", "pb", "spacing", paddingBlock),
+    /* Width & height */
+    ...getResponsiveValue("r", "w", width),
+    ...getResponsiveValue("r", "minw", minWidth),
+    ...getResponsiveValue("r", "maxw", maxWidth),
+    ...getResponsiveValue("r", "h", height),
+    ...getResponsiveValue("r", "minh", minHeight),
+    ...getResponsiveValue("r", "maxh", maxHeight),
+    /* Positon & inset */
+    ...getResponsiveValue("r", "position", position),
+    ...getResponsiveProps("r", "inset", "spacing", inset),
+    ...getResponsiveProps("r", "top", "spacing", top),
+    ...getResponsiveProps("r", "right", "spacing", right),
+    ...getResponsiveProps("r", "bottom", "spacing", bottom),
+    ...getResponsiveProps("r", "left", "spacing", left),
+    /* Overflow */
+    ...getResponsiveValue("r", "overflow", overflow),
+    ...getResponsiveValue("r", "overflowx", overflowX),
+    ...getResponsiveValue("r", "overflowy", overflowY),
+    /* Flex */
+    ...getResponsiveValue("r", "flex-basis", flexBasis),
+    ...getResponsiveValue("r", "flex-grow", flexGrow),
+    ...getResponsiveValue("r", "flex-shrink", flexShrink),
+  };
+
+  return (
+    <Slot
+      className={cl({
+        className,
+        "navds-r-p": padding,
+        "navds-r-pi": paddingInline,
+        "navds-r-pb": paddingBlock,
+        "navds-r-w": width,
+        "navds-r-minw": minWidth,
+        "navds-r-maxw": maxWidth,
+        "navds-r-h": height,
+        "navds-r-minh": minHeight,
+        "navds-r-maxh": maxHeight,
+        "navds-r-position": position,
+        "navds-r-inset": inset,
+        "navds-r-top": top,
+        "navds-r-right": right,
+        "navds-r-bottom": bottom,
+        "navds-r-left": left,
+        "navds-r-overflow": overflow,
+        "navds-r-overflowx": overflowX,
+        "navds-r-overflowy": overflowY,
+        "navds-r-flex-basis": flexBasis,
+        "navds-r-flex-grow": flexGrow,
+        "navds-r-flex-shrink": flexShrink,
+      })}
+      style={style}
+    >
+      {children}
+    </Slot>
+  );
+};
+
+export default BasePrimitive;

package/src/layout/bleed/Bleed.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { Slot } from "../../util/Slot";
+import { Slot } from "../../slot/Slot";
 import { getResponsiveProps } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";