@digdir/designsystemet-react 1.0.0-rc.1 → 1.0.0-rc.10

package/dist/cjs/node_modules/@tanstack/virtual-core/dist/esm/index.js

@@ -18,16 +18,20 @@ const observeElementRect = (instance, cb) => {
   if (!element) {
     return;
   }
+  const targetWindow = instance.targetWindow;
+  if (!targetWindow) {
+    return;
+  }
   const handler = (rect) => {
     const { width, height } = rect;
     cb({ width: Math.round(width), height: Math.round(height) });
   };
   handler(element.getBoundingClientRect());
-  if (typeof ResizeObserver === "undefined") {
+  if (!targetWindow.ResizeObserver) {
     return () => {
     };
   }
-  const observer = new ResizeObserver((entries) => {
+  const observer = new targetWindow.ResizeObserver((entries) => {
     const entry = entries[0];
     if (entry == null ? void 0 : entry.borderBoxSize) {
       const box = entry.borderBoxSize[0];
@@ -43,20 +47,40 @@ const observeElementRect = (instance, cb) => {
     observer.unobserve(element);
   };
 };
+const addEventListenerOptions = {
+  passive: true
+};
+const supportsScrollend = typeof window == "undefined" ? true : "onscrollend" in window;
 const observeElementOffset = (instance, cb) => {
   const element = instance.scrollElement;
   if (!element) {
     return;
   }
-  const handler = () => {
-    cb(element[instance.options.horizontal ? "scrollLeft" : "scrollTop"]);
+  const targetWindow = instance.targetWindow;
+  if (!targetWindow) {
+    return;
+  }
+  let offset = 0;
+  const fallback = supportsScrollend ? () => void 0 : utils.debounce(
+    targetWindow,
+    () => {
+      cb(offset, false);
+    },
+    instance.options.isScrollingResetDelay
+  );
+  const createHandler = (isScrolling) => () => {
+    offset = element[instance.options.horizontal ? "scrollLeft" : "scrollTop"];
+    fallback();
+    cb(offset, isScrolling);
   };
-  handler();
-  element.addEventListener("scroll", handler, {
-    passive: true
-  });
+  const handler = createHandler(true);
+  const endHandler = createHandler(false);
+  endHandler();
+  element.addEventListener("scroll", handler, addEventListenerOptions);
+  element.addEventListener("scrollend", endHandler, addEventListenerOptions);
   return () => {
     element.removeEventListener("scroll", handler);
+    element.removeEventListener("scrollend", endHandler);
   };
 };
 const measureElement = (element, entry, instance) => {
@@ -88,8 +112,8 @@ class Virtualizer {
   constructor(opts) {
     this.unsubs = [];
     this.scrollElement = null;
+    this.targetWindow = null;
     this.isScrolling = false;
-    this.isScrollingTimeoutId = null;
     this.scrollToIndexTimeoutId = null;
     this.measurementsCache = [];
     this.itemSizeCache = /* @__PURE__ */ new Map();
@@ -102,15 +126,15 @@ class Virtualizer {
       const get = () => {
         if (_ro) {
           return _ro;
-        } else if (typeof ResizeObserver !== "undefined") {
-          return _ro = new ResizeObserver((entries) => {
-            entries.forEach((entry) => {
-              this._measureElement(entry.target, entry);
-            });
-          });
-        } else {
+        }
+        if (!this.targetWindow || !this.targetWindow.ResizeObserver) {
           return null;
         }
+        return _ro = new this.targetWindow.ResizeObserver((entries) => {
+          entries.forEach((entry) => {
+            this._measureElement(entry.target, entry);
+          });
+        });
       };
       return {
         disconnect: () => {
@@ -150,39 +174,24 @@ class Virtualizer {
         initialRect: { width: 0, height: 0 },
         scrollMargin: 0,
         gap: 0,
-        scrollingDelay: 150,
         indexAttribute: "data-index",
         initialMeasurementsCache: [],
         lanes: 1,
+        isScrollingResetDelay: 150,
         ...opts2
       };
     };
-    this.notify = (sync) => {
+    this.notify = (force, sync) => {
       var _a, _b;
-      (_b = (_a = this.options).onChange) == null ? void 0 : _b.call(_a, this, sync);
-    };
-    this.maybeNotify = utils.memo(
-      () => {
-        this.calculateRange();
-        return [
-          this.isScrolling,
-          this.range ? this.range.startIndex : null,
-          this.range ? this.range.endIndex : null
-        ];
-      },
-      (isScrolling) => {
-        this.notify(isScrolling);
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "maybeNotify",
-        debug: () => this.options.debug,
-        initialDeps: [
-          this.isScrolling,
-          this.range ? this.range.startIndex : null,
-          this.range ? this.range.endIndex : null
-        ]
+      const { startIndex, endIndex } = this.range ?? {
+        startIndex: void 0,
+        endIndex: void 0
+      };
+      const range = this.calculateRange();
+      if (force || startIndex !== (range == null ? void 0 : range.startIndex) || endIndex !== (range == null ? void 0 : range.endIndex)) {
+        (_b = (_a = this.options).onChange) == null ? void 0 : _b.call(_a, this, sync);
       }
-    );
+    };
     this.cleanup = () => {
       this.unsubs.filter(Boolean).forEach((d) => d());
       this.unsubs = [];
@@ -196,10 +205,16 @@ class Virtualizer {
       };
     };
     this._willUpdate = () => {
+      var _a;
       const scrollElement = this.options.getScrollElement();
       if (this.scrollElement !== scrollElement) {
         this.cleanup();
         this.scrollElement = scrollElement;
+        if (this.scrollElement && "ownerDocument" in this.scrollElement) {
+          this.targetWindow = this.scrollElement.ownerDocument.defaultView;
+        } else {
+          this.targetWindow = ((_a = this.scrollElement) == null ? void 0 : _a.window) ?? null;
+        }
         this._scrollToOffset(this.scrollOffset, {
           adjustments: void 0,
           behavior: void 0
@@ -207,29 +222,17 @@ class Virtualizer {
         this.unsubs.push(
           this.options.observeElementRect(this, (rect) => {
             this.scrollRect = rect;
-            this.maybeNotify();
+            this.notify(false, false);
           })
         );
         this.unsubs.push(
-          this.options.observeElementOffset(this, (offset) => {
+          this.options.observeElementOffset(this, (offset, isScrolling) => {
             this.scrollAdjustments = 0;
-            if (this.scrollOffset === offset) {
-              return;
-            }
-            if (this.isScrollingTimeoutId !== null) {
-              clearTimeout(this.isScrollingTimeoutId);
-              this.isScrollingTimeoutId = null;
-            }
-            this.isScrolling = true;
-            this.scrollDirection = this.scrollOffset < offset ? "forward" : "backward";
+            this.scrollDirection = isScrolling ? this.scrollOffset < offset ? "forward" : "backward" : null;
             this.scrollOffset = offset;
-            this.maybeNotify();
-            this.isScrollingTimeoutId = setTimeout(() => {
-              this.isScrollingTimeoutId = null;
-              this.isScrolling = false;
-              this.scrollDirection = null;
-              this.maybeNotify();
-            }, this.options.scrollingDelay);
+            const prevIsScrolling = this.isScrolling;
+            this.isScrolling = isScrolling;
+            this.notify(prevIsScrolling !== isScrolling, isScrolling);
           })
         );
       }
@@ -237,7 +240,7 @@ class Virtualizer {
     this.getSize = () => {
       return this.scrollRect[this.options.horizontal ? "width" : "height"];
     };
-    this.memoOptions = utils.memo(
+    this.getMeasurementOptions = utils.memo(
       () => [
         this.options.count,
         this.options.paddingStart,
@@ -285,7 +288,7 @@ class Virtualizer {
       })[0] : void 0;
     };
     this.getMeasurements = utils.memo(
-      () => [this.memoOptions(), this.itemSizeCache],
+      () => [this.getMeasurementOptions(), this.itemSizeCache],
       ({ count, paddingStart, scrollMargin, getItemKey }, itemSizeCache) => {
         const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
         this.pendingMeasuredCacheIndexes = [];
@@ -338,7 +341,8 @@ class Virtualizer {
       ],
       (rangeExtractor, range, overscan, count) => {
         return range === null ? [] : rangeExtractor({
-          ...range,
+          startIndex: range.startIndex,
+          endIndex: range.endIndex,
           overscan,
           count
         });
@@ -385,7 +389,7 @@ class Virtualizer {
       const itemSize = this.itemSizeCache.get(item.key) ?? item.size;
       const delta = size - itemSize;
       if (delta !== 0) {
-        if (item.start < this.scrollOffset + this.scrollAdjustments) {
+        if (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item, delta, this) : item.start < this.scrollOffset + this.scrollAdjustments) {
           if (process.env.NODE_ENV !== "production" && this.options.debug) {
             console.info("correction", delta);
           }
@@ -396,7 +400,7 @@ class Virtualizer {
         }
         this.pendingMeasuredCacheIndexes.push(item.index);
         this.itemSizeCache = new Map(this.itemSizeCache.set(item.key, size));
-        this.notify(false);
+        this.notify(true, false);
       }
     };
     this.measureElement = (node) => {
@@ -472,8 +476,8 @@ class Virtualizer {
     };
     this.isDynamicMode = () => this.measureElementCache.size > 0;
     this.cancelScrollToIndex = () => {
-      if (this.scrollToIndexTimeoutId !== null) {
-        clearTimeout(this.scrollToIndexTimeoutId);
+      if (this.scrollToIndexTimeoutId !== null && this.targetWindow) {
+        this.targetWindow.clearTimeout(this.scrollToIndexTimeoutId);
         this.scrollToIndexTimeoutId = null;
       }
     };
@@ -499,8 +503,8 @@ class Virtualizer {
       }
       const [toOffset, align] = this.getOffsetForIndex(index, initialAlign);
       this._scrollToOffset(toOffset, { adjustments: void 0, behavior });
-      if (behavior !== "smooth" && this.isDynamicMode()) {
-        this.scrollToIndexTimeoutId = setTimeout(() => {
+      if (behavior !== "smooth" && this.isDynamicMode() && this.targetWindow) {
+        this.scrollToIndexTimeoutId = this.targetWindow.setTimeout(() => {
           this.scrollToIndexTimeoutId = null;
           const elementInDOM = this.measureElementCache.has(
             this.options.getItemKey(index)
@@ -548,17 +552,18 @@ class Virtualizer {
       this.options.scrollToFn(offset, { behavior, adjustments }, this);
     };
     this.measure = () => {
+      var _a, _b;
       this.itemSizeCache = /* @__PURE__ */ new Map();
-      this.notify(false);
+      (_b = (_a = this.options).onChange) == null ? void 0 : _b.call(_a, this, false);
     };
     this.setOptions(opts);
     this.scrollRect = this.options.initialRect;
-    this.scrollOffset = this.options.initialOffset;
+    this.scrollOffset = typeof this.options.initialOffset === "function" ? this.options.initialOffset() : this.options.initialOffset;
     this.measurementsCache = this.options.initialMeasurementsCache;
     this.measurementsCache.forEach((item) => {
       this.itemSizeCache.set(item.key, item.size);
     });
-    this.maybeNotify();
+    this.notify(false, false);
   }
 }
 const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
@@ -595,6 +600,7 @@ function calculateRange({
 }
 
 exports.approxEqual = utils.approxEqual;
+exports.debounce = utils.debounce;
 exports.memo = utils.memo;
 exports.notUndefined = utils.notUndefined;
 exports.Virtualizer = Virtualizer;

package/dist/cjs/node_modules/@tanstack/virtual-core/dist/esm/utils.js

@@ -54,7 +54,15 @@ function notUndefined(value, msg) {
   }
 }
 const approxEqual = (a, b) => Math.abs(a - b) < 1;
+const debounce = (targetWindow, fn, ms) => {
+  let timeoutId;
+  return function(...args) {
+    targetWindow.clearTimeout(timeoutId);
+    timeoutId = targetWindow.setTimeout(() => fn.apply(this, args), ms);
+  };
+};
 
 exports.approxEqual = approxEqual;
+exports.debounce = debounce;
 exports.memo = memo;
 exports.notUndefined = notUndefined;

package/dist/cjs/utilities/AnimateHeight/AnimateHeight.js

@@ -37,7 +37,7 @@ const AnimateHeight = ({ children, className, open = false, style, ...rest }) =>
     const transition = state === 'openingOrClosing'
         ? `height ${transitionDurationInMilliseconds}ms ease-in-out`
         : undefined;
-    return (jsxRuntime.jsx("div", { ...rest, className: lite.clsx('fds-animate-height', `fds-animate-height--${state}`, className), style: { height, transition, ...style }, children: jsxRuntime.jsx("div", { ref: contentRef, className: 'fds-animate-height__content', children: children }) }));
+    return (jsxRuntime.jsx("div", { ...rest, className: lite.clsx('ds-animate-height', `ds-animate-height--${state}`, className), style: { height, transition, ...style }, children: jsxRuntime.jsx("div", { ref: contentRef, className: 'ds-animate-height__content', children: children }) }));
 };
 
 exports.AnimateHeight = AnimateHeight;

package/dist/esm/components/Accordion/{AccordionContent/AccordionContent.js → AccordionContent.js}

@@ -1,10 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { forwardRef, useContext } from 'react';
-import { AccordionItemContext } from '../AccordionItem/AccordionItem.js';
-import { AnimateHeight } from '../../../utilities/AnimateHeight/AnimateHeight.js';
-import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
+import { AccordionItemContext } from './AccordionItem.js';
+import { AnimateHeight } from '../../utilities/AnimateHeight/AnimateHeight.js';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 const AccordionContent = forwardRef(({ children, className, ...rest }, ref) => {
     const context = useContext(AccordionItemContext);
@@ -12,7 +12,7 @@ const AccordionContent = forwardRef(({ children, className, ...rest }, ref) => {
         console.error('<Accordion.Content> has to be used within an <Accordion.Item>');
         return null;
     }
-    return (jsx(AnimateHeight, { id: context.contentId, open: context.open, children: jsx(Paragraph, { asChild: true, size: 'sm', children: jsx("div", { ref: ref, className: clsx('fds-accordion__content', className), ...rest, children: children }) }) }));
+    return (jsx(AnimateHeight, { id: context.contentId, open: context.open, children: jsx(Paragraph, { asChild: true, size: 'sm', children: jsx("div", { ref: ref, className: clsx('ds-accordion__content', className), ...rest, children: children }) }) }));
 });
 AccordionContent.displayName = 'AccordionContent';
 

package/dist/esm/components/Accordion/AccordionHeading.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChevronDownIcon } from '@navikt/aksel-icons';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { forwardRef, useContext } from 'react';
+import { AccordionItemContext } from './AccordionItem.js';
+import { Heading } from '../Typography/Heading/Heading.js';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
+
+const AccordionHeading = forwardRef(({ level = 1, children, className, onHeaderClick, ...rest }, ref) => {
+    const context = useContext(AccordionItemContext);
+    if (context === null) {
+        console.error('<Accordion.Header> has to be used within an <Accordion.Item>');
+        return null;
+    }
+    const handleClick = (e) => {
+        context.toggleOpen();
+        onHeaderClick && onHeaderClick(e);
+    };
+    return (jsx(Heading, { ref: ref, size: 'xs', level: level, className: clsx('ds-accordion__header', className), ...rest, children: jsxs("button", { type: 'button', className: clsx('ds-accordion__button', `ds-focus`), onClick: handleClick, "aria-expanded": context.open, "aria-controls": context.contentId, children: [jsx(ChevronDownIcon, { "aria-hidden": true, className: 'ds-accordion__expand-icon', fontSize: '1.5rem' }), jsx(Paragraph, { asChild: true, size: 'sm', children: jsx("span", { children: children }) })] }) }));
+});
+AccordionHeading.displayName = 'AccordionHeading';
+
+export { AccordionHeading };

package/dist/esm/components/Accordion/{AccordionItem/AccordionItem.js → AccordionItem.js}

@@ -1,13 +1,13 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { createContext, forwardRef, useState, useId } from 'react';
 
 const AccordionItemContext = createContext(null);
 const AccordionItem = forwardRef(({ children, className, open, defaultOpen = false, ...rest }, ref) => {
     const [internalOpen, setInternalOpen] = useState(defaultOpen);
     const contentId = useId();
-    return (jsx("div", { className: clsx('fds-accordion__item', (open ?? internalOpen) && 'fds-accordion__item--open', className), ref: ref, ...rest, children: jsx(AccordionItemContext.Provider, { value: {
+    return (jsx("div", { className: clsx('ds-accordion__item', (open ?? internalOpen) && 'ds-accordion__item--open', className), ref: ref, ...rest, children: jsx(AccordionItemContext.Provider, { value: {
                 open: open ?? internalOpen,
                 toggleOpen: () => {
                     if (open === undefined) {

package/dist/esm/components/Accordion/AccordionRoot.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
+
+const AccordionRoot = forwardRef(({ border = false, color = 'neutral', className, ...rest }, ref) => {
+    return (jsx("div", { className: clsx('ds-accordion', border && 'ds-accordion--border', color && `ds-accordion--${color}`, className), ref: ref, ...rest }));
+});
+AccordionRoot.displayName = 'AccordionRoot';
+
+export { AccordionRoot };

package/dist/esm/components/Accordion/index.js

@@ -1,15 +1,17 @@
 'use client';
-import { Accordion as Accordion$1 } from './Accordion.js';
-import { AccordionHeader } from './AccordionHeader/AccordionHeader.js';
-import { AccordionContent } from './AccordionContent/AccordionContent.js';
-import { AccordionItem } from './AccordionItem/AccordionItem.js';
+import { AccordionRoot } from './AccordionRoot.js';
+import { AccordionItem } from './AccordionItem.js';
+import { AccordionContent } from './AccordionContent.js';
+import { AccordionHeading } from './AccordionHeading.js';
 
-const Accordion = Accordion$1;
-Accordion.Header = AccordionHeader;
+const Accordion = {};
+Accordion.Root = AccordionRoot;
+Accordion.Heading = AccordionHeading;
 Accordion.Content = AccordionContent;
 Accordion.Item = AccordionItem;
-Accordion.Header.displayName = 'Accordion.Header';
+Accordion.Root.displayName = 'Accordion.Root';
+Accordion.Heading.displayName = 'Accordion.Heading';
 Accordion.Content.displayName = 'Accordion.Content';
 Accordion.Item.displayName = 'Accordion.Item';
 
-export { Accordion, AccordionContent, AccordionHeader, AccordionItem };
+export { Accordion, AccordionContent, AccordionHeading, AccordionItem, AccordionRoot };

package/dist/esm/components/Alert/Alert.js

@@ -3,7 +3,6 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { InformationSquareFillIcon, ExclamationmarkTriangleFillIcon, CheckmarkCircleFillIcon, XMarkOctagonFillIcon } from '@navikt/aksel-icons';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { getSize } from '../../utilities/getSize.js';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 const icons = {
@@ -18,10 +17,9 @@ const icons = {
         title: 'Feil',
     },
 };
-const Alert = forwardRef(({ severity = 'info', elevated, iconTitle, children, className, ...rest }, ref) => {
-    const size = getSize(rest.size || 'md');
+const Alert = forwardRef(({ severity = 'info', elevated, iconTitle, children, size = 'md', className, ...rest }, ref) => {
     const { Icon, title } = icons[severity];
-    return (jsx("div", { ref: ref, className: clsx('fds-alert', `fds-alert--${size}`, `fds-alert--${severity}`, elevated && `fds-alert--elevated`, className), ...rest, children: jsxs(Fragment, { children: [jsx(Icon, { title: iconTitle || title, className: 'fds-alert__icon' }), jsx(Paragraph, { asChild: true, size: size, className: 'fds-alert__content', children: jsx("span", { children: children }) })] }) }));
+    return (jsx("div", { ref: ref, className: clsx('ds-alert', `ds-alert--${size}`, `ds-alert--${severity}`, elevated && `ds-alert--elevated`, className), ...rest, children: jsxs(Fragment, { children: [jsx(Icon, { title: iconTitle || title, className: 'ds-alert__icon' }), jsx(Paragraph, { asChild: true, size: size, className: 'ds-alert__content', children: jsx("span", { children: children }) })] }) }));
 });
 Alert.displayName = 'Alert';
 

package/dist/esm/components/Box/Box.js

@@ -3,13 +3,10 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { getSize } from '../../utilities/getSize.js';
 
 const Box = forwardRef(({ shadow, borderColor, borderRadius, background = 'default', children, asChild = false, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    const shadowSize = shadow && getSize(shadow);
-    const borderRadiusSize = borderRadius && getSize(borderRadius);
-    return (jsx(Component, { ref: ref, className: clsx(shadowSize && `fds-box--${shadowSize}-shadow`, borderColor && `fds-box--${borderColor}-border-color`, borderRadiusSize && `fds-box--${borderRadiusSize}-border-radius`, `fds-box--${background}-background`, className), ...rest, children: children }));
+    return (jsx(Component, { ref: ref, className: clsx(shadow && `ds-box--${shadow}-shadow`, borderColor && `ds-box--${borderColor}-border-color`, borderRadius && `ds-box--${borderRadius}-border-radius`, `ds-box--${background}-background`, className), ...rest, children: children }));
 });
 Box.displayName = 'Box';
 

package/dist/esm/components/Button/Button.js

@@ -3,17 +3,14 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { getSize } from '../../utilities/getSize.js';
-import { getColor } from '../../utilities/getColor.js';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 /**
  * Button used for interaction
  */
-const Button = forwardRef(({ children, variant = 'primary', fullWidth = false, icon = false, type = 'button', className, asChild, ...rest }, ref) => {
-    const size = getSize(rest.size || 'md');
-    const color = getColor(rest.color || 'accent', 'action');
+const Button = forwardRef(({ children, variant = 'primary', color = 'accent', fullWidth = false, icon = false, type = 'button', size = 'md', asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'button';
-    return (jsx(Component, { ref: ref, type: type, className: clsx('fds-btn', `fds-focus`, `fds-btn--${size}`, `fds-btn--${variant}`, `fds-btn--${color}`, fullWidth && 'fds-btn--full-width', icon && 'fds-btn--icon-only', className), ...rest, children: children }));
+    return (jsx(Paragraph, { variant: 'short', size: size, asChild: true, children: jsx(Component, { ref: ref, type: type, className: clsx('ds-btn', `ds-focus`, `ds-btn--${size}`, `ds-btn--${variant}`, `ds-btn--${color}`, fullWidth && 'ds-btn--full-width', icon && 'ds-btn--icon-only', className), ...rest, children: children }) }));
 });
 Button.displayName = 'Button';
 

package/dist/esm/components/Card/Card.js

@@ -3,12 +3,10 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { getColor } from '../../utilities/getColor.js';
 
-const Card = forwardRef(({ isLink = false, asChild = false, className, ...rest }, ref) => {
+const Card = forwardRef(({ isLink = false, asChild = false, color = 'neutral', className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    const color = getColor(rest.color || 'neutral');
-    return (jsx(Component, { ref: ref, className: clsx(`fds-card`, `fds-card--${color}`, isLink && `fds-card--link`, isLink && `fds-focus`, className), ...rest }));
+    return (jsx(Component, { ref: ref, className: clsx(`ds-card`, `ds-card--${color}`, isLink && `ds-card--link`, isLink && `ds-focus`, className), ...rest }));
 });
 Card.displayName = 'Card';
 

package/dist/esm/components/Card/CardContent.js

@@ -3,10 +3,11 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 const CardContent = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    return (jsx(Component, { className: clsx(`fds-card__content`, className), ref: ref, ...rest }));
+    return (jsx(Paragraph, { size: 'md', asChild: true, children: jsx(Component, { className: clsx(`ds-card__content`, className), ref: ref, ...rest }) }));
 });
 CardContent.displayName = 'CardContent';
 

package/dist/esm/components/Card/CardFooter.js

@@ -3,10 +3,11 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 const CardFooter = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    return (jsx(Component, { className: clsx(`fds-card__footer`, className), ref: ref, ...rest }));
+    return (jsx(Paragraph, { size: 'md', asChild: true, children: jsx(Component, { className: clsx(`ds-card__footer`, className), ref: ref, ...rest }) }));
 });
 CardFooter.displayName = 'CardFooter';
 

package/dist/esm/components/Card/CardHeader.js

@@ -3,10 +3,11 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { Heading } from '../Typography/Heading/Heading.js';
 
 const CardHeader = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    return (jsx(Component, { className: clsx(`fds-card__header`, className), ref: ref, ...rest }));
+    return (jsx(Heading, { size: 'md', asChild: true, children: jsx(Component, { className: clsx(`ds-card__header`, className), ref: ref, ...rest }) }));
 });
 CardHeader.displayName = 'CardHeader';
 

package/dist/esm/components/Card/CardMedia.js

@@ -6,7 +6,7 @@ import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_mo
 
 const CardMedia = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    return (jsx(Component, { className: clsx(`fds-card__media`, className), ref: ref, ...rest }));
+    return (jsx(Component, { className: clsx(`ds-card__media`, className), ref: ref, ...rest }));
 });
 CardMedia.displayName = 'CardMedia';
 

package/dist/esm/components/Chip/Group/Group.js

@@ -2,12 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { createContext, forwardRef, Children, isValidElement } from 'react';
 import { clsx } from '../../../node_modules/clsx/dist/lite.js';
-import { getSize } from '../../../utilities/getSize.js';
 
 const ChipGroupContext = createContext(null);
-const Group = forwardRef(({ children, className, ...rest }, ref) => {
-    const size = getSize(rest.size || 'md');
-    return (jsx("ul", { ref: ref, className: clsx(`fds-chip--group-container`, `fds-chip--${size}`, className), ...rest, children: jsx(ChipGroupContext.Provider, { value: { size }, children: Children.toArray(children).map((child, index) => isValidElement(child) ? (jsx("li", { children: child }, `chip-${index}`)) : null) }) }));
+const Group = forwardRef(({ size = 'md', children, className, ...rest }, ref) => {
+    return (jsx("ul", { ref: ref, className: clsx(`ds-chip--group-container`, `ds-chip--${size}`, className), ...rest, children: jsx(ChipGroupContext.Provider, { value: { size }, children: Children.toArray(children).map((child, index) => isValidElement(child) ? (jsx("li", { children: child }, `chip-${index}`)) : null) }) }));
 });
 Group.displayName = 'ChipGroup';
 

package/dist/esm/components/Chip/Removable/Removable.js

@@ -4,13 +4,11 @@ import { forwardRef, useContext } from 'react';
 import { XMarkIcon } from '@navikt/aksel-icons';
 import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { ChipGroupContext } from '../Group/Group.js';
-import { getSize } from '../../../utilities/getSize.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 
-const RemovableChip = forwardRef(({ children, className, ...rest }, ref) => {
+const RemovableChip = forwardRef(({ size = 'md', children, className, ...rest }, ref) => {
     const group = useContext(ChipGroupContext);
-    const size = getSize(rest.size || 'md');
-    return (jsx("button", { type: 'button', ref: ref, className: clsx(`fds-focus`, `fds-chip--button`, `fds-chip--removable`, `fds-chip--${group?.size || size}`, className), ...rest, children: jsx(Paragraph, { asChild: true, size: group?.size || size, variant: 'short', children: jsxs("span", { className: `fds-chip__label`, children: [jsx("span", { children: children }), jsx("span", { className: `fds-chip__x-mark`, "aria-hidden": true, children: jsx(XMarkIcon, { className: `fds-chip__icon` }) })] }) }) }));
+    return (jsx("button", { type: 'button', ref: ref, className: clsx(`ds-focus`, `ds-chip--button`, `ds-chip--removable`, `ds-chip--${group?.size || size}`, className), ...rest, children: jsx(Paragraph, { asChild: true, size: group?.size || size, variant: 'short', children: jsxs("span", { className: `ds-chip__label`, children: [jsx("span", { children: children }), jsx("span", { className: `ds-chip__x-mark`, "aria-hidden": true, children: jsx(XMarkIcon, { className: `ds-chip__icon` }) })] }) }) }));
 });
 RemovableChip.displayName = 'ChipRemovable';
 

package/dist/esm/components/Chip/Toggle/Toggle.js

@@ -4,14 +4,12 @@ import { forwardRef, useContext } from 'react';
 import { CheckmarkIcon } from '@navikt/aksel-icons';
 import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { ChipGroupContext } from '../Group/Group.js';
-import { getSize } from '../../../utilities/getSize.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 
-const ToggleChip = forwardRef(({ children, selected = false, checkmark = true, className, ...rest }, ref) => {
+const ToggleChip = forwardRef(({ children, selected = false, checkmark = true, size = 'md', className, ...rest }, ref) => {
     const shouldDisplayCheckmark = checkmark && selected;
     const group = useContext(ChipGroupContext);
-    const size = getSize(rest.size || 'md');
-    return (jsx("button", { ref: ref, type: 'button', "aria-pressed": selected, className: clsx(`fds-focus`, `fds-chip--button`, `fds-chip--${group?.size || size}`, shouldDisplayCheckmark && `fds-chip--spacing`, className), ...rest, children: jsx(Paragraph, { asChild: true, size: group?.size || size, variant: 'short', children: jsxs("span", { className: `fds-chip__label`, children: [shouldDisplayCheckmark && (jsx(CheckmarkIcon, { className: `fds-chip__checkmark-icon`, "aria-hidden": true })), jsx("span", { children: children })] }) }) }));
+    return (jsx("button", { ref: ref, type: 'button', "aria-pressed": selected, className: clsx(`ds-focus`, `ds-chip--button`, `ds-chip--${group?.size || size}`, shouldDisplayCheckmark && `ds-chip--spacing`, className), ...rest, children: jsx(Paragraph, { asChild: true, size: group?.size || size, variant: 'short', children: jsxs("span", { className: `ds-chip__label`, children: [shouldDisplayCheckmark && (jsx(CheckmarkIcon, { className: `ds-chip__checkmark-icon`, "aria-hidden": true })), jsx("span", { children: children })] }) }) }));
 });
 ToggleChip.displayName = 'ChipToggle';
 

package/dist/esm/components/Divider/Divider.js

@@ -4,7 +4,7 @@ import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { forwardRef } from 'react';
 
 const Divider = forwardRef(({ color = 'default', className, ...rest }, ref) => {
-    return (jsx("hr", { className: clsx('fds-divider', `fds-divider--${color}`, className), ref: ref, ...rest }));
+    return (jsx("hr", { className: clsx('ds-divider', `ds-divider--${color}`, className), ref: ref, ...rest }));
 });
 Divider.displayName = 'Divider';
 Divider.displayName = 'Divider';