@digdir/designsystemet-react 0.58.0 → 0.59.0

package/dist/cjs/components/Alert/Alert.js

@@ -19,9 +19,9 @@ const icons = {
         title: 'Feil',
     },
 };
-const Alert = React.forwardRef(({ severity = 'info', elevated, iconTitle, children, className, ...rest }, ref) => {
+const Alert = React.forwardRef(({ severity = 'info', elevated, iconTitle, size, children, className, ...rest }, ref) => {
     const { Icon, title } = icons[severity];
-    return (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx('fds-alert', `fds-alert--${severity}`, elevated && `fds-alert--elevated`, className), ...rest, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon, { title: iconTitle || title, className: 'fds-alert__icon' }), jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, className: 'fds-alert__content', children: jsxRuntime.jsx("span", { children: children }) })] }) }));
+    return (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx('fds-alert', `fds-alert--${size}`, `fds-alert--${severity}`, elevated && `fds-alert--elevated`, className), ...rest, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon, { title: iconTitle || title, className: 'fds-alert__icon' }), jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, className: 'fds-alert__content', children: jsxRuntime.jsx("span", { children: children }) })] }) }));
 });
 Alert.displayName = 'Alert';
 

package/dist/cjs/components/Button/Button.js

@@ -5,14 +5,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('../../node_modules/clsx/dist/clsx.js');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var Button_module = require('./Button.module.css.js');
 
 /**
  * Button used for interaction
  */
 const Button = React.forwardRef(({ children, color = 'first', variant = 'primary', size = 'medium', fullWidth = false, icon = false, type = 'button', className, as = 'button', asChild, ...rest }, ref) => {
     const Component = asChild ? index.Slot : as;
-    return (jsxRuntime.jsx(Component, { ref: ref, type: type, className: clsx.clsx(Button_module.button, `fds-focus`, Button_module[size], Button_module[variant], Button_module[color], { [Button_module.fullWidth]: fullWidth }, { [Button_module.onlyIcon]: icon }, className), ...rest, children: children }));
+    return (jsxRuntime.jsx(Component, { ref: ref, type: type, className: clsx.clsx('fds-btn', `fds-focus`, `fds-btn--${size}`, `fds-btn--${variant}`, `fds-btn--${color}`, { 'fds-btn--full-width': fullWidth }, { 'fds-btn--icon-only': icon }, className), ...rest, children: children }));
 });
 Button.displayName = 'Button';
 

package/dist/cjs/components/SkipLink/SkipLink.js

@@ -3,10 +3,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('../../node_modules/clsx/dist/clsx.js');
-var SkipLink_module = require('./SkipLink.module.css.js');
 
 const SkipLink = ({ href, children, className, ...rest }) => {
-    return (jsxRuntime.jsx("a", { href: href, className: clsx.clsx(`fds-sr-only`, SkipLink_module.skiplink, className), ...rest, children: children }));
+    return (jsxRuntime.jsx("a", { href: href, className: clsx.clsx(`fds-sr-only`, 'fds-skiplink', className), ...rest, children: children }));
 };
 SkipLink.displayName = 'SkipLink';
 

package/dist/cjs/react-css-modules.css

@@ -1,297 +1,3 @@
-@layer fds.button {
-  .fds-button-button-8fa00f0f {
-    --fc-button-padding: 0 var(--fds-spacing-4);
-    --fc-button-color: var(--fds-semantic-text-action-first-on_action);
-
-    display: flex;
-    align-items: center;
-    border: var(--fds-border_width-default) solid transparent;
-    color: var(--fc-button-color);
-    fill: var(--fc-button-color);
-    min-width: 2.5em;
-    padding: var(--fc-button-padding);
-    box-sizing: border-box;
-    cursor: pointer;
-    font-family: inherit;
-    justify-content: center;
-    text-align: center;
-    text-decoration: none;
-    position: relative;
-    border-radius: var(--fds-border_radius-interactive);
-    min-height: var(--fds-sizing-10);
-  }
-
-  .fds-button-button-8fa00f0f svg {
-    overflow: visible;
-  }
-
-  .fds-button-small-8fa00f0f::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: auto;
-    min-height: auto;
-    content: '';
-  }
-
-  .fds-button-small-8fa00f0f::after {
-    position: absolute;
-    top: -5px;
-    left: 0;
-    width: 100%;
-    height: 44px;
-    content: '';
-  }
-
-  .fds-button-button-8fa00f0f:disabled,
-  .fds-button-button-8fa00f0f[aria-disabled='true'] {
-    cursor: not-allowed;
-    opacity: var(--fds-opacity-disabled);
-  }
-
-  .fds-button-small-8fa00f0f {
-    --fc-button-padding: 0 var(--fds-spacing-3);
-
-    gap: var(--fds-sizing-1);
-    font: var(--fds-typography-paragraph-short-small);
-    font-family: inherit;
-    min-height: var(--fds-sizing-10);
-  }
-
-  .fds-button-medium-8fa00f0f {
-    --fc-button-padding: 0 var(--fds-spacing-4);
-
-    gap: var(--fds-sizing-2);
-    font: var(--fds-typography-paragraph-short-medium);
-    font-family: inherit;
-    min-height: var(--fds-sizing-12);
-  }
-
-  .fds-button-large-8fa00f0f {
-    --fc-button-padding: 0 var(--fds-spacing-5);
-
-    gap: var(--fds-sizing-2);
-    font: var(--fds-typography-paragraph-short-large);
-    font-family: inherit;
-    min-height: var(--fds-sizing-14);
-  }
-
-  .fds-button-fullWidth-8fa00f0f {
-    width: 100%;
-  }
-
-  .fds-button-secondary-8fa00f0f,
-  .fds-button-tertiary-8fa00f0f {
-    background-color: transparent;
-  }
-
-  .fds-button-onlyIcon-8fa00f0f {
-    --fc-button-padding: 0;
-  }
-
-  /* Only use hover for non-touch devices to prevent sticky-hovering */
-  @media (hover: hover) and (pointer: fine) {
-    .fds-button-primary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--fds-semantic-surface-action-first-hover);
-    }
-
-    .fds-button-primary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--fds-semantic-surface-action-second-hover);
-    }
-
-    .fds-button-primary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--fds-semantic-surface-success-hover);
-    }
-
-    .fds-button-primary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--fds-semantic-surface-danger-hover);
-    }
-
-    .fds-button-secondary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-action-first-hover);
-
-      border-color: var(--fds-semantic-border-action-first-hover);
-      background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
-    }
-
-    .fds-button-secondary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-action-second-hover);
-
-      border-color: var(--fds-semantic-border-action-second-hover);
-      background-color: var(--fds-semantic-surface-action-second-no_fill-hover);
-    }
-
-    .fds-button-secondary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-success-hover);
-
-      border-color: var(--fds-semantic-border-success-hover);
-      background-color: var(--fds-semantic-surface-success-no_fill-hover);
-    }
-
-    .fds-button-secondary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-danger-hover);
-
-      border-color: var(--fds-semantic-border-danger-hover);
-      background-color: var(--fds-semantic-surface-danger-no_fill-hover);
-    }
-
-    .fds-button-tertiary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-action-first-hover);
-
-      background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
-    }
-
-    .fds-button-tertiary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-action-second-hover);
-
-      background-color: var(--fds-semantic-surface-action-second-no_fill-hover);
-    }
-
-    .fds-button-tertiary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-success-hover);
-
-      background-color: var(--fds-semantic-surface-success-no_fill-hover);
-    }
-
-    .fds-button-tertiary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-danger-hover);
-
-      background-color: var(--fds-semantic-surface-danger-no_fill-hover);
-    }
-  }
-
-  /* Primary button colors */
-  .fds-button-primary-8fa00f0f:where(.fds-button-first-8fa00f0f) {
-    background-color: var(--fds-semantic-surface-action-first-default);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-second-8fa00f0f) {
-    background-color: var(--fds-semantic-surface-action-second-default);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-success-8fa00f0f) {
-    background-color: var(--fds-semantic-surface-success-default);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-danger-8fa00f0f) {
-    background-color: var(--fds-semantic-surface-danger-default);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    background-color: var(--fds-semantic-surface-action-first-active);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    background-color: var(--fds-semantic-surface-action-second-active);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    background-color: var(--fds-semantic-surface-success-active);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    background-color: var(--fds-semantic-surface-danger-active);
-  }
-
-  /* Secondary button colors */
-  .fds-button-secondary-8fa00f0f:where(.fds-button-first-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-action-first-default);
-
-    border-color: var(--fds-semantic-border-action-first-default);
-    background-color: var(--fds-semantic-surface-action-first-no_fill);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-second-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-action-second-default);
-
-    border-color: var(--fds-semantic-border-action-second-default);
-    background-color: var(--fds-semantic-surface-action-second-no_fill);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-success-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-success-default);
-
-    border-color: var(--fds-semantic-border-success-default);
-    background-color: var(--fds-semantic-surface-success-no_fill);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-danger-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-danger-default);
-
-    border-color: var(--fds-semantic-border-danger-default);
-    background-color: var(--fds-semantic-surface-danger-no_fill);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-action-first-active);
-
-    border-color: var(--fds-semantic-border-action-first-active);
-    background-color: var(--fds-semantic-surface-action-first-no_fill-active);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-action-second-active);
-
-    border-color: var(--fds-semantic-border-action-second-active);
-    background-color: var(--fds-semantic-surface-action-second-no_fill-active);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-success-active);
-
-    border-color: var(--fds-semantic-border-success-active);
-    background-color: var(--fds-semantic-surface-success-no_fill-active);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-danger-active);
-
-    border-color: var(--fds-semantic-border-danger-active);
-    background-color: var(--fds-semantic-surface-danger-no_fill-active);
-  }
-
-  /* Tertiary button colors */
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-first-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-action-first-default);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-second-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-action-second-default);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-success-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-success-default);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-danger-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-danger-default);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-action-first-active);
-
-    background-color: var(--fds-semantic-surface-action-first-no_fill-active);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-action-second-active);
-
-    background-color: var(--fds-semantic-surface-action-second-no_fill-active);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-success-active);
-
-    background-color: var(--fds-semantic-surface-success-no_fill-active);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-danger-active);
-
-    background-color: var(--fds-semantic-surface-danger-no_fill-active);
-  }
-}
-
 @layer fds.paragraph {
   .fds-paragraph-paragraph-b69df5f3 {
     --fdsc-bottom-spacing: var(--fds-spacing-5);
@@ -1360,27 +1066,6 @@
   }
 }
 
-@layer fds.skiplink {
-  .fds-skiplink-skiplink-d4abeaef:focus {
-    display: block;
-    outline: 0;
-    position: static;
-    width: auto;
-    height: auto;
-    margin: inherit;
-    overflow: visible;
-    clip: auto;
-    clip-path: none;
-    white-space: inherit;
-    text-decoration: underline;
-    text-decoration-thickness: 3px;
-    text-underline-offset: 0.3em;
-    padding: var(--fds-spacing-3) var(--fds-spacing-4) var(--fds-spacing-3) var(--fds-spacing-6);
-    color: var(--fds-semantic-text-neutral-default);
-    background: var(--fds-semantic-border-focus-outline);
-  }
-}
-
 @layer fds.tooltip {
   .fds-tooltip-wrapper-a3778147 {
     background: var(--fds-semantic-surface-neutral-inverted);

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

@@ -17,9 +17,9 @@ const icons = {
         title: 'Feil',
     },
 };
-const Alert = forwardRef(({ severity = 'info', elevated, iconTitle, children, className, ...rest }, ref) => {
+const Alert = forwardRef(({ severity = 'info', elevated, iconTitle, size, children, className, ...rest }, ref) => {
     const { Icon, title } = icons[severity];
-    return (jsx("div", { ref: ref, className: clsx('fds-alert', `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, className: 'fds-alert__content', children: jsx("span", { children: children }) })] }) }));
+    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 }) })] }) }));
 });
 Alert.displayName = 'Alert';
 

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

@@ -3,14 +3,13 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import classes from './Button.module.css.js';
 
 /**
  * Button used for interaction
  */
 const Button = forwardRef(({ children, color = 'first', variant = 'primary', size = 'medium', fullWidth = false, icon = false, type = 'button', className, as = 'button', asChild, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
-    return (jsx(Component, { ref: ref, type: type, className: clsx(classes.button, `fds-focus`, classes[size], classes[variant], classes[color], { [classes.fullWidth]: fullWidth }, { [classes.onlyIcon]: icon }, className), ...rest, children: children }));
+    return (jsx(Component, { ref: ref, type: type, className: clsx('fds-btn', `fds-focus`, `fds-btn--${size}`, `fds-btn--${variant}`, `fds-btn--${color}`, { 'fds-btn--full-width': fullWidth }, { 'fds-btn--icon-only': icon }, className), ...rest, children: children }));
 });
 Button.displayName = 'Button';
 

package/dist/esm/components/SkipLink/SkipLink.js

@@ -1,10 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import classes from './SkipLink.module.css.js';
 
 const SkipLink = ({ href, children, className, ...rest }) => {
-    return (jsx("a", { href: href, className: clsx(`fds-sr-only`, classes.skiplink, className), ...rest, children: children }));
+    return (jsx("a", { href: href, className: clsx(`fds-sr-only`, 'fds-skiplink', className), ...rest, children: children }));
 };
 SkipLink.displayName = 'SkipLink';
 

package/dist/esm/react-css-modules.css

@@ -1,297 +1,3 @@
-@layer fds.button {
-  .fds-button-button-8fa00f0f {
-    --fc-button-padding: 0 var(--fds-spacing-4);
-    --fc-button-color: var(--fds-semantic-text-action-first-on_action);
-
-    display: flex;
-    align-items: center;
-    border: var(--fds-border_width-default) solid transparent;
-    color: var(--fc-button-color);
-    fill: var(--fc-button-color);
-    min-width: 2.5em;
-    padding: var(--fc-button-padding);
-    box-sizing: border-box;
-    cursor: pointer;
-    font-family: inherit;
-    justify-content: center;
-    text-align: center;
-    text-decoration: none;
-    position: relative;
-    border-radius: var(--fds-border_radius-interactive);
-    min-height: var(--fds-sizing-10);
-  }
-
-  .fds-button-button-8fa00f0f svg {
-    overflow: visible;
-  }
-
-  .fds-button-small-8fa00f0f::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: auto;
-    min-height: auto;
-    content: '';
-  }
-
-  .fds-button-small-8fa00f0f::after {
-    position: absolute;
-    top: -5px;
-    left: 0;
-    width: 100%;
-    height: 44px;
-    content: '';
-  }
-
-  .fds-button-button-8fa00f0f:disabled,
-  .fds-button-button-8fa00f0f[aria-disabled='true'] {
-    cursor: not-allowed;
-    opacity: var(--fds-opacity-disabled);
-  }
-
-  .fds-button-small-8fa00f0f {
-    --fc-button-padding: 0 var(--fds-spacing-3);
-
-    gap: var(--fds-sizing-1);
-    font: var(--fds-typography-paragraph-short-small);
-    font-family: inherit;
-    min-height: var(--fds-sizing-10);
-  }
-
-  .fds-button-medium-8fa00f0f {
-    --fc-button-padding: 0 var(--fds-spacing-4);
-
-    gap: var(--fds-sizing-2);
-    font: var(--fds-typography-paragraph-short-medium);
-    font-family: inherit;
-    min-height: var(--fds-sizing-12);
-  }
-
-  .fds-button-large-8fa00f0f {
-    --fc-button-padding: 0 var(--fds-spacing-5);
-
-    gap: var(--fds-sizing-2);
-    font: var(--fds-typography-paragraph-short-large);
-    font-family: inherit;
-    min-height: var(--fds-sizing-14);
-  }
-
-  .fds-button-fullWidth-8fa00f0f {
-    width: 100%;
-  }
-
-  .fds-button-secondary-8fa00f0f,
-  .fds-button-tertiary-8fa00f0f {
-    background-color: transparent;
-  }
-
-  .fds-button-onlyIcon-8fa00f0f {
-    --fc-button-padding: 0;
-  }
-
-  /* Only use hover for non-touch devices to prevent sticky-hovering */
-  @media (hover: hover) and (pointer: fine) {
-    .fds-button-primary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--fds-semantic-surface-action-first-hover);
-    }
-
-    .fds-button-primary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--fds-semantic-surface-action-second-hover);
-    }
-
-    .fds-button-primary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--fds-semantic-surface-success-hover);
-    }
-
-    .fds-button-primary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--fds-semantic-surface-danger-hover);
-    }
-
-    .fds-button-secondary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-action-first-hover);
-
-      border-color: var(--fds-semantic-border-action-first-hover);
-      background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
-    }
-
-    .fds-button-secondary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-action-second-hover);
-
-      border-color: var(--fds-semantic-border-action-second-hover);
-      background-color: var(--fds-semantic-surface-action-second-no_fill-hover);
-    }
-
-    .fds-button-secondary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-success-hover);
-
-      border-color: var(--fds-semantic-border-success-hover);
-      background-color: var(--fds-semantic-surface-success-no_fill-hover);
-    }
-
-    .fds-button-secondary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-danger-hover);
-
-      border-color: var(--fds-semantic-border-danger-hover);
-      background-color: var(--fds-semantic-surface-danger-no_fill-hover);
-    }
-
-    .fds-button-tertiary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-action-first-hover);
-
-      background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
-    }
-
-    .fds-button-tertiary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-action-second-hover);
-
-      background-color: var(--fds-semantic-surface-action-second-no_fill-hover);
-    }
-
-    .fds-button-tertiary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-success-hover);
-
-      background-color: var(--fds-semantic-surface-success-no_fill-hover);
-    }
-
-    .fds-button-tertiary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-danger-hover);
-
-      background-color: var(--fds-semantic-surface-danger-no_fill-hover);
-    }
-  }
-
-  /* Primary button colors */
-  .fds-button-primary-8fa00f0f:where(.fds-button-first-8fa00f0f) {
-    background-color: var(--fds-semantic-surface-action-first-default);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-second-8fa00f0f) {
-    background-color: var(--fds-semantic-surface-action-second-default);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-success-8fa00f0f) {
-    background-color: var(--fds-semantic-surface-success-default);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-danger-8fa00f0f) {
-    background-color: var(--fds-semantic-surface-danger-default);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    background-color: var(--fds-semantic-surface-action-first-active);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    background-color: var(--fds-semantic-surface-action-second-active);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    background-color: var(--fds-semantic-surface-success-active);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    background-color: var(--fds-semantic-surface-danger-active);
-  }
-
-  /* Secondary button colors */
-  .fds-button-secondary-8fa00f0f:where(.fds-button-first-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-action-first-default);
-
-    border-color: var(--fds-semantic-border-action-first-default);
-    background-color: var(--fds-semantic-surface-action-first-no_fill);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-second-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-action-second-default);
-
-    border-color: var(--fds-semantic-border-action-second-default);
-    background-color: var(--fds-semantic-surface-action-second-no_fill);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-success-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-success-default);
-
-    border-color: var(--fds-semantic-border-success-default);
-    background-color: var(--fds-semantic-surface-success-no_fill);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-danger-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-danger-default);
-
-    border-color: var(--fds-semantic-border-danger-default);
-    background-color: var(--fds-semantic-surface-danger-no_fill);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-action-first-active);
-
-    border-color: var(--fds-semantic-border-action-first-active);
-    background-color: var(--fds-semantic-surface-action-first-no_fill-active);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-action-second-active);
-
-    border-color: var(--fds-semantic-border-action-second-active);
-    background-color: var(--fds-semantic-surface-action-second-no_fill-active);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-success-active);
-
-    border-color: var(--fds-semantic-border-success-active);
-    background-color: var(--fds-semantic-surface-success-no_fill-active);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-danger-active);
-
-    border-color: var(--fds-semantic-border-danger-active);
-    background-color: var(--fds-semantic-surface-danger-no_fill-active);
-  }
-
-  /* Tertiary button colors */
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-first-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-action-first-default);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-second-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-action-second-default);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-success-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-success-default);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-danger-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-danger-default);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-action-first-active);
-
-    background-color: var(--fds-semantic-surface-action-first-no_fill-active);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-action-second-active);
-
-    background-color: var(--fds-semantic-surface-action-second-no_fill-active);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-success-active);
-
-    background-color: var(--fds-semantic-surface-success-no_fill-active);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-danger-active);
-
-    background-color: var(--fds-semantic-surface-danger-no_fill-active);
-  }
-}
-
 @layer fds.paragraph {
   .fds-paragraph-paragraph-b69df5f3 {
     --fdsc-bottom-spacing: var(--fds-spacing-5);
@@ -1360,27 +1066,6 @@
   }
 }
 
-@layer fds.skiplink {
-  .fds-skiplink-skiplink-d4abeaef:focus {
-    display: block;
-    outline: 0;
-    position: static;
-    width: auto;
-    height: auto;
-    margin: inherit;
-    overflow: visible;
-    clip: auto;
-    clip-path: none;
-    white-space: inherit;
-    text-decoration: underline;
-    text-decoration-thickness: 3px;
-    text-underline-offset: 0.3em;
-    padding: var(--fds-spacing-3) var(--fds-spacing-4) var(--fds-spacing-3) var(--fds-spacing-6);
-    color: var(--fds-semantic-text-neutral-default);
-    background: var(--fds-semantic-border-focus-outline);
-  }
-}
-
 @layer fds.tooltip {
   .fds-tooltip-wrapper-a3778147 {
     background: var(--fds-semantic-surface-neutral-inverted);

package/dist/types/components/Alert/Alert.d.ts

@@ -10,6 +10,12 @@ export type AlertProps = {
      * Use this to inform screenreaders of severity.
      *  Defaults to Norwegian. */
     iconTitle?: string;
+    /** Sets the size of the alert.
+     * Does not affect font size.
+     *
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
 } & HTMLAttributes<HTMLDivElement>;
 export declare const Alert: import("react").ForwardRefExoticComponent<{
     /** Sets color & icon according to severity */
@@ -21,6 +27,12 @@ export declare const Alert: import("react").ForwardRefExoticComponent<{
      * Use this to inform screenreaders of severity.
      *  Defaults to Norwegian. */
     iconTitle?: string | undefined;
+    /** Sets the size of the alert.
+     * Does not affect font size.
+     *
+     * @default 'medium'
+     */
+    size?: "small" | "medium" | "large" | undefined;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 export {};
 //# sourceMappingURL=Alert.d.ts.map

package/dist/types/components/Alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AA4B5C,KAAK,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D,MAAM,MAAM,UAAU,GAAG;IACvB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;iCAG6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,KAAK;IAXhB,8CAA8C;;IAE9C,6CAA6C;;IAE7C;;;iCAG6B;;mFAqC9B,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AA4B5C,KAAK,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D,MAAM,MAAM,UAAU,GAAG;IACvB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;iCAG6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AACnC,eAAO,MAAM,KAAK;IAhBhB,8CAA8C;;IAE9C,6CAA6C;;IAE7C;;;iCAG6B;;IAE7B;;;;OAIG;;mFA8CJ,CAAC"}

package/dist/types/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAI7E,MAAM,MAAM,WAAW,GAAG;IACxB,mCAAmC;IACnC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;IAClD,WAAW;IACX,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C;;GAEG;AACH,eAAO,MAAM,MAAM,EAAE,oBAAoB,CAAC,WAAW,EAAE,iBAAiB,CAwCrE,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAE7E,MAAM,MAAM,WAAW,GAAG;IACxB,mCAAmC;IACnC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;IAClD,WAAW;IACX,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C;;GAEG;AACH,eAAO,MAAM,MAAM,EAAE,oBAAoB,CAAC,WAAW,EAAE,iBAAiB,CAwCrE,CAAC"}

package/dist/types/components/SkipLink/SkipLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkipLink.d.ts","sourceRoot":"","sources":["../../../../src/components/SkipLink/SkipLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK7D,MAAM,MAAM,aAAa,GAAG;IAC1B,kDAAkD;IAClD,QAAQ,EAAE,SAAS,CAAC;IAEpB,mFAAmF;IACnF,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C,eAAO,MAAM,QAAQ;6CAKlB,aAAa,GAAG,WAAW;;CAU7B,CAAC"}
+{"version":3,"file":"SkipLink.d.ts","sourceRoot":"","sources":["../../../../src/components/SkipLink/SkipLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7D,MAAM,MAAM,aAAa,GAAG;IAC1B,kDAAkD;IAClD,QAAQ,EAAE,SAAS,CAAC;IAEpB,mFAAmF;IACnF,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C,eAAO,MAAM,QAAQ;6CAKlB,aAAa,GAAG,WAAW;;CAU7B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet-react",
-  "version": "0.58.0",
+  "version": "0.59.0",
   "description": "React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": "https://github.com/digdir/designsystemet",
@@ -43,5 +43,5 @@
     "rollup": "^4.12.1",
     "typescript": "^5.4.2"
   },
-  "gitHead": "a1ead4651e04770749e1d74f98db0fc093d78a34"
+  "gitHead": "aeed6074c31e5e21c7ca9e83a883fe87cd1111d5"
 }

package/dist/cjs/components/Button/Button.module.css.js

@@ -1,6 +0,0 @@
-'use client';
-'use strict';
-
-var classes = {"button":"fds-button-button-8fa00f0f","small":"fds-button-small-8fa00f0f","medium":"fds-button-medium-8fa00f0f","large":"fds-button-large-8fa00f0f","fullWidth":"fds-button-fullWidth-8fa00f0f","secondary":"fds-button-secondary-8fa00f0f","tertiary":"fds-button-tertiary-8fa00f0f","onlyIcon":"fds-button-onlyIcon-8fa00f0f","primary":"fds-button-primary-8fa00f0f","first":"fds-button-first-8fa00f0f","second":"fds-button-second-8fa00f0f","success":"fds-button-success-8fa00f0f","danger":"fds-button-danger-8fa00f0f"};
-
-module.exports = classes;

package/dist/cjs/components/SkipLink/SkipLink.module.css.js

@@ -1,6 +0,0 @@
-'use client';
-'use strict';
-
-var classes = {"skiplink":"fds-skiplink-skiplink-d4abeaef"};
-
-module.exports = classes;

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

@@ -1,4 +0,0 @@
-'use client';
-var classes = {"button":"fds-button-button-8fa00f0f","small":"fds-button-small-8fa00f0f","medium":"fds-button-medium-8fa00f0f","large":"fds-button-large-8fa00f0f","fullWidth":"fds-button-fullWidth-8fa00f0f","secondary":"fds-button-secondary-8fa00f0f","tertiary":"fds-button-tertiary-8fa00f0f","onlyIcon":"fds-button-onlyIcon-8fa00f0f","primary":"fds-button-primary-8fa00f0f","first":"fds-button-first-8fa00f0f","second":"fds-button-second-8fa00f0f","success":"fds-button-success-8fa00f0f","danger":"fds-button-danger-8fa00f0f"};
-
-export { classes as default };

package/dist/esm/components/SkipLink/SkipLink.module.css.js

@@ -1,4 +0,0 @@
-'use client';
-var classes = {"skiplink":"fds-skiplink-skiplink-d4abeaef"};
-
-export { classes as default };