@dbcdk/react-components 0.0.95 → 0.0.96

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

@@ -0,0 +1,13 @@
+import type { JSX, ReactNode } from 'react';
+import type { Severity } from '../../constants/severity.types';
+export interface AlertProps {
+    children: ReactNode;
+    title?: ReactNode;
+    severity?: Severity;
+    customIcon?: ReactNode;
+    disableIcon?: boolean;
+    fullWidth?: boolean;
+    maxWidth?: string | number;
+    role?: 'status' | 'alert';
+}
+export declare function Alert({ children, title, severity, customIcon, disableIcon, fullWidth, maxWidth, role, }: AlertProps): JSX.Element;

package/dist/components/alert/Alert.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './Alert.module.css';
+import { Icon } from '../icon/Icon';
+export function Alert({ children, title, severity = 'neutral', customIcon, disableIcon = false, fullWidth = false, maxWidth = '72ch', role = 'status', }) {
+    const hasLeading = Boolean(customIcon) || !disableIcon;
+    return (_jsxs("div", { className: [
+            styles.container,
+            styles[severity],
+            fullWidth ? styles.fullWidth : '',
+            hasLeading ? styles.hasLeading : '',
+        ]
+            .filter(Boolean)
+            .join(' '), style: {
+            '--alert-max-width': typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
+        }, role: role, children: [hasLeading ? (_jsx("div", { className: styles.leading, children: customIcon !== null && customIcon !== void 0 ? customIcon : _jsx(Icon, { severity: severity }) })) : null, _jsxs("div", { className: styles.content, children: [title ? _jsx("div", { className: styles.title, children: title }) : null, _jsx("div", { className: styles.body, children: children })] })] }));
+}

package/dist/components/alert/Alert.module.css

@@ -0,0 +1,98 @@
+.container {
+  --alert-bg: var(--color-bg-toolbar);
+  --alert-fg: var(--color-fg-default);
+  --alert-border: var(--color-border-subtle);
+
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+  inline-size: min(100%, var(--alert-max-width, 72ch));
+  max-inline-size: 100%;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid var(--alert-border);
+  border-radius: var(--border-radius-default);
+  background: var(--alert-bg);
+  color: var(--alert-fg);
+  box-sizing: border-box;
+}
+
+.fullWidth {
+  inline-size: 100%;
+}
+
+.leading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  padding-block-start: 2px;
+}
+
+.leading svg {
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
+  color: currentColor;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs);
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.title,
+.body {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
+}
+
+.title {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+}
+
+.body {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+}
+
+.neutral {
+  --alert-bg: var(--color-bg-toolbar);
+  --alert-fg: var(--color-fg-default);
+  --alert-border: var(--color-border-subtle);
+}
+
+.success {
+  --alert-bg: var(--color-status-success-bg);
+  --alert-fg: var(--color-status-success-fg);
+  --alert-border: var(--color-status-success-border);
+}
+
+.warning {
+  --alert-bg: var(--color-status-warning-bg);
+  --alert-fg: var(--color-status-warning-fg);
+  --alert-border: var(--color-status-warning-border);
+}
+
+.error {
+  --alert-bg: var(--color-status-error-bg);
+  --alert-fg: var(--color-status-error-fg);
+  --alert-border: var(--color-status-error-border);
+}
+
+.info {
+  --alert-bg: var(--color-status-info-bg);
+  --alert-fg: var(--color-status-info-fg);
+  --alert-border: var(--color-status-info-border);
+}
+
+.brand {
+  --alert-bg: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
+  --alert-fg: var(--color-brand);
+  --alert-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
+}

package/dist/components/copy-button/CopyButton.js

@@ -12,7 +12,7 @@ export function CopyButton(props) {
     const { text, variant = 'outlined', size = 'sm', children, displayStyle, disableIcon = false, disableToast = false, className, style, fullWidth, disabled, ...rest } = props;
     const [copied, setCopied] = useState(false);
     const toast = useOptionalToast();
-    const buttonLabel = children !== null && children !== void 0 ? children : 'Kopiér';
+    const buttonLabel = children;
     const icon = disableIcon ? null : copied ? _jsx(Check, {}) : _jsx(Copy, {});
     const handleCopySuccess = () => {
         if (!disableIcon) {
@@ -66,7 +66,7 @@ export function CopyButton(props) {
                     .join(' '), style: style, disabled: disabled, children: buttonLabel }) }));
     }
     if (displayStyle === 'field') {
-        return (_jsx(Input, { value: text, readOnly: true, disabled: disabled, fullWidth: fullWidth, className: className, style: style, inputSize: size, variant: "outlined", buttonLabel: String(buttonLabel), buttonIcon: icon, onButtonClick: () => {
+        return (_jsx(Input, { value: text, readOnly: true, disabled: disabled, fullWidth: fullWidth, className: className, style: style, inputSize: size, variant: "outlined", buttonLabel: typeof buttonLabel === 'string' ? buttonLabel : undefined, buttonIcon: icon, onButtonClick: () => {
                 void handleCopy();
             }, "aria-label": (_b = rest['aria-label']) !== null && _b !== void 0 ? _b : 'Kopier til udklipsholder' }));
     }

package/dist/components/forms/checkbox/Checkbox.js

@@ -16,11 +16,13 @@ export function Checkbox({ checked: controlled, onChange, variant = 'default', d
         setInternal(value);
         onChange === null || onChange === void 0 ? void 0 : onChange(value, e);
     };
-    const content = (_jsxs("span", { className: styles.container, "data-cy": dataCy, children: [_jsx("button", { id: controlId, disabled: disabled, type: "button", role: "checkbox", "aria-checked": isChecked, "aria-disabled": disabled || undefined, "aria-invalid": Boolean(error) || undefined, onClick: toggle, className: [styles.checkbox, isChecked ? styles.checked : '', styles[variant], styles[size]]
+    const content = (_jsxs("span", { className: [styles.container, size === 'sm' ? styles.containerSm : '']
+            .filter(Boolean)
+            .join(' '), "data-cy": dataCy, children: [_jsx("button", { id: controlId, disabled: disabled, type: "button", role: "checkbox", "aria-checked": isChecked, "aria-disabled": disabled || undefined, "aria-invalid": Boolean(error) || undefined, onClick: toggle, className: [styles.checkbox, isChecked ? styles.checked : '', styles[variant], styles[size]]
                     .filter(Boolean)
                     .join(' '), children: isChecked && _jsx(Check, { className: styles.icon }) }), label &&
                 (labelAs === 'label' ? (_jsx("label", { className: styles.label, htmlFor: controlId, children: label })) : (_jsx("span", { className: styles.label, children: label })))] }));
     if (noContainer)
         return content;
-    return (_jsx(InputContainer, { modified: modified, label: containerLabel, htmlFor: controlId, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: content }));
+    return (_jsx(InputContainer, { modified: modified, label: containerLabel, htmlFor: controlId, error: error, helpText: helpText, orientation: orientation, size: size, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: content }));
 }

package/dist/components/forms/checkbox/Checkbox.module.css

@@ -6,6 +6,10 @@
   line-height: var(--line-height-normal);
 }
 
+.containerSm {
+  gap: var(--spacing-xs);
+}
+
 .checkbox {
   width: var(--component-size-sm);
   height: var(--component-size-sm);

package/dist/components/forms/input/Input.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { Size } from '../../../types/sizes.types';
 import type { InputContainerProps } from '../input-container/InputContainer';
 export type InputVariant = 'outlined' | 'surface' | 'subtle' | 'standalone' | 'embedded';
-export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'width'> & Omit<InputContainerProps, 'children' | 'htmlFor' | 'tooltip' | 'tooltipPlacement'> & {
+export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'width'> & Omit<InputContainerProps, 'children' | 'htmlFor' | 'tooltip' | 'tooltipPlacement' | 'size'> & {
     icon?: React.ReactNode;
     autoFocus?: boolean;
     minWidth?: string | number;
@@ -12,6 +12,7 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size
     variant?: InputVariant;
     onClear?: (event?: React.MouseEvent | React.KeyboardEvent) => void;
     onButtonClick?: () => void;
+    buttonDisabled?: boolean;
     buttonLabel?: string;
     buttonIcon?: React.ReactNode;
     trailingLabel?: string;

package/dist/components/forms/input/Input.js

@@ -18,7 +18,7 @@ function mergeRefs(...refs) {
         }
     };
 }
-export const Input = forwardRef(function Input({ label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = false, required, tooltip, tooltipPlacement = 'right', modified = false, icon, autoFocus, minWidth, width, maxWidth, inputSize = 'md', variant = 'outlined', onClear, onButtonClick, buttonLabel, buttonIcon, trailingLabel, id, tooltipOpenOnFocus = true, style, className, fieldClassName, inputClassName, startAdornment, endAdornment, ...inputProps }, ref) {
+export const Input = forwardRef(function Input({ label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = false, required, tooltip, tooltipPlacement = 'right', modified = false, icon, autoFocus, minWidth, width, maxWidth, inputSize = 'md', variant = 'outlined', onClear, onButtonClick, buttonDisabled = false, buttonLabel, buttonIcon, trailingLabel, id, tooltipOpenOnFocus = true, style, className, fieldClassName, inputClassName, startAdornment, endAdornment, ...inputProps }, ref) {
     const inputRef = useRef(null);
     const reactId = useId();
     const inputId = id !== null && id !== void 0 ? id : `input-${reactId}`;
@@ -49,7 +49,7 @@ export const Input = forwardRef(function Input({ label, error, helpText, orienta
         closeOnPointerDown: false,
     });
     const trailingButtonVariant = variant === 'outlined' || variant === 'standalone' ? 'outlined' : 'default';
-    return (_jsx(InputContainer, { label: label, htmlFor: inputId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, modified: modified, children: _jsxs("div", { style: rootStyle, className: [
+    return (_jsx(InputContainer, { label: label, labelAction: inputProps.labelAction, htmlFor: inputId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, modified: modified, children: _jsxs("div", { style: rootStyle, className: [
                 styles.container,
                 fullWidth ? styles.fullWidth : '',
                 onClear ? styles.withClear : '',
@@ -72,6 +72,6 @@ export const Input = forwardRef(function Input({ label, error, helpText, orienta
                                 .filter(Boolean)
                                 .join(' ') }), (reservesInlineClearSlot || hasEndAdornment) && (_jsxs("span", { className: styles.endAdornment, "data-input-role": "end-adornment", children: [reservesInlineClearSlot ? (_jsx("span", { className: styles.clearSlot, "aria-hidden": hasVisibleClear ? undefined : 'true', children: hasVisibleClear && onClear ? _jsx(ClearButton, { onClick: onClear }) : null })) : null, endAdornment] })), hasVisibleClear && !hasEndAdornment && onClear ? (_jsx(ClearButton, { onClick: onClear, absolute: true })) : null] }), hasTrailingLabel && (_jsx("span", { className: [styles.trailingLabel, inputSize ? styles[inputSize] : '']
                         .filter(Boolean)
-                        .join(' '), children: trailingLabel })), hasButton && (_jsxs(Button, { onClick: onButtonClick, className: styles.trailingButton, type: "button", variant: trailingButtonVariant, size: inputSize, children: [buttonIcon !== null && buttonIcon !== void 0 ? buttonIcon : null, buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : null] }))] }) }));
+                        .join(' '), children: trailingLabel })), hasButton && (_jsxs(Button, { onClick: onButtonClick, disabled: buttonDisabled, className: styles.trailingButton, type: "button", variant: trailingButtonVariant, size: inputSize, children: [buttonIcon !== null && buttonIcon !== void 0 ? buttonIcon : null, buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : null] }))] }) }));
 });
 Input.displayName = 'Input';

package/dist/components/forms/input-container/InputContainer.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface InputContainerProps {
     label?: string;
+    labelAction?: React.ReactNode;
     htmlFor?: string;
     error?: string;
     helpText?: string;
@@ -9,8 +10,9 @@ export interface InputContainerProps {
     required?: boolean;
     children: React.ReactNode;
     orientation?: 'vertical' | 'horizontal';
+    size?: 'sm' | 'md' | 'lg';
     labelWidth?: string;
     labelAlignment?: 'top' | 'center';
     modified?: boolean;
 }
-export declare function InputContainer({ label, htmlFor, error, helpText, helpTextAddition, fullWidth, required, children, orientation, labelWidth, modified, }: InputContainerProps): React.ReactElement;
+export declare function InputContainer({ label, labelAction, htmlFor, error, helpText, helpTextAddition, fullWidth, required, children, orientation, size, labelWidth, modified, }: InputContainerProps): React.ReactElement;

package/dist/components/forms/input-container/InputContainer.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './InputContainer.module.css';
-export function InputContainer({ label, htmlFor, error, helpText, helpTextAddition, fullWidth = false, required = false, children, orientation = 'horizontal', labelWidth = '160px', modified = false, }) {
+export function InputContainer({ label, labelAction, htmlFor, error, helpText, helpTextAddition, fullWidth = false, required = false, children, orientation = 'horizontal', size = 'md', labelWidth = '160px', modified = false, }) {
     const message = error !== null && error !== void 0 ? error : helpText;
     const messageClass = error ? styles.errorText : styles.helpText;
-    const renderLabel = label && (_jsxs("label", { className: styles.label, htmlFor: htmlFor, children: [label, required && _jsx("span", { className: styles.required, children: " *" })] }));
+    const renderLabelRow = (label || labelAction) && (_jsxs("div", { className: `${styles.labelRow} dbc-flex dbc-items-center dbc-gap-md`, children: [label && (_jsxs("label", { className: styles.label, htmlFor: htmlFor, children: [label, required && _jsx("span", { className: styles.required, children: " *" })] })), labelAction && _jsx("div", { className: styles.labelAction, children: labelAction })] }));
     const renderMessageRow = (message || helpTextAddition) && (_jsxs("div", { className: `${messageClass} ${styles.messageRow}`, children: [_jsx("span", { children: message }), helpTextAddition && _jsx("span", { className: styles.helpTextAddition, children: helpTextAddition })] }));
     if (orientation === 'vertical') {
-        return (_jsxs("div", { "data-modified": modified ? 'true' : undefined, className: `dbc-flex dbc-flex-column dbc-gap-xs ${styles.inputContainer}`, style: { width: fullWidth ? '100%' : undefined }, children: [renderLabel, children, renderMessageRow] }));
+        return (_jsxs("div", { "data-modified": modified ? 'true' : undefined, className: `dbc-flex dbc-flex-column dbc-gap-xs ${styles.inputContainer}`, style: { width: fullWidth ? '100%' : undefined }, children: [renderLabelRow, children, renderMessageRow] }));
     }
     return (_jsx("div", { "data-modified": modified ? 'true' : undefined, className: styles.inputContainer, style: {
             '--label-width': labelWidth,
             width: fullWidth ? '100%' : undefined,
-        }, children: _jsxs("div", { className: `${styles.horizontal} dbc-flex dbc-flex-column dbc-gap-xs`, children: [_jsxs("div", { className: `${styles.labelContainer} dbc-flex dbc-items-center dbc-gap-xs`, children: [renderLabel, children] }), renderMessageRow] }) }));
+        }, children: _jsxs("div", { className: `${styles.horizontal} dbc-flex dbc-flex-column dbc-gap-xs`, "data-size": size, children: [_jsxs("div", { className: `${styles.labelContainer} dbc-flex dbc-items-center dbc-gap-xs`, children: [renderLabelRow, children] }), renderMessageRow] }) }));
 }

package/dist/components/forms/input-container/InputContainer.module.css

@@ -2,6 +2,10 @@
   --gap: var(--spacing-sm);
 }
 
+.horizontal[data-size='sm'] {
+  --gap: var(--spacing-xs);
+}
+
 .labelContainer {
   gap: var(--gap);
 }

package/dist/components/forms/text-area/Textarea.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { InputContainerProps } from '../input-container/InputContainer';
-export type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'disabled'> & Omit<InputContainerProps, 'children' | 'htmlFor' | 'tooltip' | 'tooltipPlacement'> & {
+export type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'disabled'> & Omit<InputContainerProps, 'children' | 'htmlFor' | 'tooltip' | 'tooltipPlacement' | 'size'> & {
     value: string;
     inputChanged: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
     disabled?: boolean;

package/dist/components/headline/Headline.module.css

@@ -163,3 +163,23 @@
   align-items: center;
   gap: var(--spacing-xxs);
 }
+
+@media (max-width: 767px) {
+  .headlineRow {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-md);
+  }
+
+  .headlineContainer h1.headline {
+    font-size: var(--font-size-xl);
+  }
+
+  .headlineContainer h2.headline {
+    font-size: var(--font-size-lg);
+  }
+
+  .addition {
+    inline-size: 100%;
+  }
+}

package/dist/components/menu/Menu.module.css

@@ -190,6 +190,15 @@
   letter-spacing: 0.04em;
   cursor: default;
   user-select: none;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.header svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+  color: inherit;
 }
 
 /* Gap between items */

package/dist/components/nav-bar/NavBar.module.css

@@ -130,6 +130,13 @@
   margin-inline-start: auto;
 }
 
+.mobileAddition {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-xs);
+}
+
 .navItem {
   list-style: none;
   min-inline-size: 0;
@@ -198,3 +205,17 @@
   block-size: var(--icon-size-md);
   flex: 0 0 auto;
 }
+
+@media (max-width: 767px) {
+  .addition,
+  .mobileAddition {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-xs);
+  }
+
+  .addition > *,
+  .mobileAddition > * {
+    width: 100%;
+  }
+}

package/dist/components/page/Page.module.css

@@ -74,3 +74,16 @@
   border: 1px solid var(--color-border-default);
   border-radius: var(--border-radius-default);
 }
+
+@media (max-width: 767px) {
+  .headerContainer {
+    padding-block: var(--spacing-md);
+  }
+
+  .content:not(.disableContentBox) {
+    padding-block: var(--spacing-md);
+    padding-inline: 0;
+    border: 0;
+    border-radius: 0;
+  }
+}

package/dist/components/stack/Stack.d.ts

@@ -1,12 +1,20 @@
 import React, { ElementType } from 'react';
 type GapSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+type StackDirection = 'row' | 'column';
+type StackAlign = 'start' | 'center' | 'end';
+type StackJustify = 'start' | 'center' | 'end' | 'between';
 type StackOwnProps = {
-    direction?: 'row' | 'column';
+    direction?: StackDirection;
     gap?: GapSize;
-    align?: 'start' | 'center' | 'end';
-    justify?: 'start' | 'center' | 'end' | 'between';
+    align?: StackAlign;
+    justify?: StackJustify;
     grow?: boolean;
     wrap?: boolean;
+    mobileDirection?: StackDirection;
+    mobileGap?: GapSize;
+    mobileAlign?: StackAlign;
+    mobileJustify?: StackJustify;
+    mobileWrap?: boolean;
 };
 export type StackProps<C extends ElementType = 'div'> = StackOwnProps & {
     as?: C;

package/dist/components/stack/Stack.js

@@ -1,7 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-export const Stack = forwardRef(function Stack({ as, direction, gap, align, justify, grow = false, wrap = false, className, ...rest }, ref) {
+import styles from './Stack.module.css';
+export const Stack = forwardRef(function Stack({ as, direction, gap, align, justify, grow = false, wrap = false, mobileDirection, mobileGap, mobileAlign, mobileJustify, mobileWrap = false, className, ...rest }, ref) {
     const Tag = (as !== null && as !== void 0 ? as : 'div');
     const classes = [
         'dbc-flex',
@@ -11,6 +12,19 @@ export const Stack = forwardRef(function Stack({ as, direction, gap, align, just
         justify ? `dbc-justify-${justify}` : undefined,
         grow ? 'dbc-flex-grow' : undefined,
         wrap ? 'dbc-flex-wrap' : undefined,
+        mobileDirection
+            ? styles[`mobileDirection${mobileDirection.charAt(0).toUpperCase()}${mobileDirection.slice(1)}`]
+            : undefined,
+        mobileGap
+            ? styles[`mobileGap${mobileGap.charAt(0).toUpperCase()}${mobileGap.slice(1)}`]
+            : undefined,
+        mobileAlign
+            ? styles[`mobileAlign${mobileAlign.charAt(0).toUpperCase()}${mobileAlign.slice(1)}`]
+            : undefined,
+        mobileJustify
+            ? styles[`mobileJustify${mobileJustify.charAt(0).toUpperCase()}${mobileJustify.slice(1)}`]
+            : undefined,
+        mobileWrap ? styles.mobileWrap : undefined,
         className,
     ]
         .filter(Boolean)

package/dist/components/stack/Stack.module.css

@@ -0,0 +1,61 @@
+@media (max-width: 767px) {
+  .mobileDirectionRow {
+    flex-direction: row;
+  }
+
+  .mobileDirectionColumn {
+    flex-direction: column;
+  }
+
+  .mobileGapXxs {
+    gap: var(--spacing-xxs);
+  }
+
+  .mobileGapXs {
+    gap: var(--spacing-xs);
+  }
+
+  .mobileGapSm {
+    gap: var(--spacing-sm);
+  }
+
+  .mobileGapMd {
+    gap: var(--spacing-md);
+  }
+
+  .mobileGapLg {
+    gap: var(--spacing-lg);
+  }
+
+  .mobileAlignStart {
+    align-items: flex-start;
+  }
+
+  .mobileAlignCenter {
+    align-items: center;
+  }
+
+  .mobileAlignEnd {
+    align-items: flex-end;
+  }
+
+  .mobileJustifyStart {
+    justify-content: flex-start;
+  }
+
+  .mobileJustifyCenter {
+    justify-content: center;
+  }
+
+  .mobileJustifyEnd {
+    justify-content: flex-end;
+  }
+
+  .mobileJustifyBetween {
+    justify-content: space-between;
+  }
+
+  .mobileWrap {
+    flex-wrap: wrap;
+  }
+}

package/dist/components/tabs/Tabs.module.css

@@ -202,3 +202,32 @@
   background: var(--color-bg-surface);
   padding: var(--spacing-lg);
 }
+
+@media (max-width: 767px) {
+  .headerContainer {
+    padding-block: var(--spacing-md);
+  }
+
+  .tabButton {
+    padding-block: var(--spacing-sm);
+    padding-inline: var(--spacing-xs);
+  }
+
+  .filled .tabList {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    inline-size: 100%;
+  }
+
+  .filled .tabContent,
+  .panelStyle.outlined .tabContent {
+    padding-block: var(--spacing-md);
+    padding-inline: 0;
+    border: 0;
+    border-radius: 0;
+  }
+
+  .panelStyle .tabList {
+    border: 0;
+  }
+}

package/dist/components/theme-button/ThemeButton.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Monitor, Moon, Palette, Sun } from 'lucide-react';
 import { Button } from '../../components/button/Button';
 import { Menu } from '../../components/menu/Menu';
@@ -12,7 +12,7 @@ const THEME_OPTIONS = [
 ];
 export function ThemeMenuSection() {
     const { theme, switchTheme } = useTheme();
-    return (_jsxs(_Fragment, { children: [_jsx(Menu.Header, { children: "Udseende" }), THEME_OPTIONS.map(option => (_jsx(Menu.RadioItem, { name: "theme", value: option.value, checked: theme === option.value, label: option.label, onValueChange: value => switchTheme(value) }, option.value)))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Menu.Header, { children: [_jsx(Palette, {}), "Udseende"] }), THEME_OPTIONS.map(option => (_jsx(Menu.RadioItem, { name: "theme", value: option.value, checked: theme === option.value, label: option.label, onValueChange: value => switchTheme(value) }, option.value)))] }));
 }
 export function ThemeButton({ size, variant = 'outlined' }) {
     const { theme, switchTheme } = useTheme();

package/dist/index.d.ts

@@ -76,3 +76,4 @@ export * from './components/theme-button/ThemeButton';
 export * from './components/copy-button/CopyButton';
 export * from './components/divider/Divider';
 export * from './components/grid/Grid';
+export * from './components/alert/Alert';

package/dist/index.js

@@ -76,3 +76,4 @@ export * from './components/theme-button/ThemeButton';
 export * from './components/copy-button/CopyButton';
 export * from './components/divider/Divider';
 export * from './components/grid/Grid';
+export * from './components/alert/Alert';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.95",
+  "version": "0.0.96",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",