@digdir/designsystemet-react 0.59.1-alpha.0 → 0.60.0

package/dist/esm/components/Skeleton/Circle/Circle.js

@@ -1,13 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
-import classes from '../Skeleton.module.css.js';
 import { useSynchronizedAnimation } from '../../../hooks/useSynchronizedAnimation.js';
 
 /**  Skeleton component used for indicating loading elements of circular shape */
 const Circle = ({ width, height, className, children, style, ...rest }) => {
-    const ref = useSynchronizedAnimation(classes['opacity-fade']);
-    return (jsx("div", { ref: ref, className: clsx(classes.skeleton, classes.circle, { [classes.hasChildren]: Boolean(children) }, className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
+    const ref = useSynchronizedAnimation('fds-skeleton-opacity-fade');
+    return (jsx("div", { ref: ref, className: clsx('fds-skeleton', 'fds-skeleton--circle', Boolean(children) && 'fds-skeleton--has-children', className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
 };
 Circle.displayName = 'SkeletonCircle';
 

package/dist/esm/components/Skeleton/Rectangle/Rectangle.js

@@ -1,15 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
-import classes from '../Skeleton.module.css.js';
 import { useSynchronizedAnimation } from '../../../hooks/useSynchronizedAnimation.js';
 
 /**  Skeleton component used for indicating loading elements of rectangle shape */
 const Rectangle = ({ width, height, className, children, style, ...rest }) => {
-    const ref = useSynchronizedAnimation(classes['opacity-fade']);
-    return (jsx("div", { ref: ref, className: clsx(classes.skeleton, classes.rectangle, {
-            [classes.hasChildren]: Boolean(children),
-        }, className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
+    const ref = useSynchronizedAnimation('fds-skeleton-opacity-fade');
+    return (jsx("div", { ref: ref, className: clsx('fds-skeleton', 'fds-skeleton--rectangle', Boolean(children) && 'fds-skeleton--has-children', className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
 };
 Rectangle.displayName = 'SkeletonRectangle';
 

package/dist/esm/components/Skeleton/Text/Text.js

@@ -1,15 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
-import classes from '../Skeleton.module.css.js';
 import { useSynchronizedAnimation } from '../../../hooks/useSynchronizedAnimation.js';
 
 /**  Skeleton component used for indicating loading elements of text */
 const Text = ({ width, height, className, style, children, ...rest }) => {
-    const ref = useSynchronizedAnimation(classes['opacity-fade']);
-    return (jsx("div", { ref: ref, className: clsx(classes.skeleton, classes.text, {
-            [classes.hasChildren]: Boolean(children),
-        }, className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
+    const ref = useSynchronizedAnimation('fds-skeleton-opacity-fade');
+    return (jsx("div", { ref: ref, className: clsx('fds-skeleton', 'fds-skeleton--text', Boolean(children) && 'fds-skeleton--has-children', className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
 };
 Text.displayName = 'SkeletonText';
 

package/dist/esm/components/Spinner/Spinner.js

@@ -1,7 +1,6 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import classes from './Spinner.module.css.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { useSynchronizedAnimation } from '../../hooks/useSynchronizedAnimation.js';
 
 const sizeMap = {
@@ -14,9 +13,9 @@ const sizeMap = {
 };
 /**  Spinner component used for indicating busy or indeterminate loading */
 const Spinner = ({ title, size = 'medium', variant = 'default', className, style, ...rest }) => {
-    const svgRef = useSynchronizedAnimation(classes['rotate-animation']);
-    const strokeRef = useSynchronizedAnimation(classes['stroke-animation']);
-    return (jsxs("svg", { className: clsx(classes.spinner, className), style: { width: sizeMap[size], height: sizeMap[size], ...style }, viewBox: '0 0 50 50', ref: svgRef, ...rest, children: [jsx("title", { children: title }), jsx("circle", { className: clsx(classes.background, variant === 'inverted' && classes.invertedBackground), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsx("circle", { className: clsx(classes.spinnerCircle, classes[variant]), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
+    const svgRef = useSynchronizedAnimation('fds-spinner-rotate-animation');
+    const strokeRef = useSynchronizedAnimation('fds-spinner-stroke-animation');
+    return (jsxs("svg", { className: clsx('fds-spinner', `fds-spinner--${variant}`, className), style: { width: sizeMap[size], height: sizeMap[size], ...style }, viewBox: '0 0 50 50', ref: svgRef, ...rest, children: [jsx("title", { children: title }), jsx("circle", { className: clsx('fds-spinner__background', variant === 'inverted' && 'fds-spinner__background--inverted'), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsx("circle", { className: clsx(`fds-spinner__circle`), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
 };
 Spinner.displayName = 'Spinner';
 

package/dist/esm/components/Table/Table.js

@@ -1,12 +1,11 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import classes from './Table.module.css.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 const Table = React.forwardRef(({ zebra = false, size = 'medium', stickyHeader = false, border = false, className, children, ...rest }, ref) => {
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("table", { ref: ref, className: clsx(classes[size], zebra && classes.zebra, stickyHeader && classes.stickyHeader, border && classes.border, classes.table, className), ...rest, children: children }) }));
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("table", { ref: ref, className: clsx('fds-table', `fds-table--${size}`, zebra && 'fds-table--zebra', stickyHeader && 'fds-table--sticky-header', border && 'fds-table--border', className), ...rest, children: children }) }));
 });
 Table.displayName = 'Table';
 

package/dist/esm/components/Table/TableCell.js

@@ -1,11 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import classes from './Table.module.css.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 
 const TableCell = React.forwardRef(({ className, children, ...rest }, ref) => {
-    return (jsx("td", { ref: ref, className: clsx(classes.cell, className), ...rest, children: children }));
+    return (jsx("td", { ref: ref, className: clsx('fds-table__cell', className), ...rest, children: children }));
 });
 TableCell.displayName = 'TableCell';
 

package/dist/esm/components/Table/TableHead.js

@@ -1,11 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import classes from './Table.module.css.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 
 const TableHead = React.forwardRef(({ className, children, ...rest }, ref) => {
-    return (jsx("thead", { ref: ref, className: clsx(classes.head, className), ...rest, children: children }));
+    return (jsx("thead", { ref: ref, className: clsx('fds-table__head', className), ...rest, children: children }));
 });
 TableHead.displayName = 'TableHead';
 

package/dist/esm/components/Table/TableHeaderCell.js

@@ -2,8 +2,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { ChevronUpIcon, ChevronDownIcon, ChevronUpDownIcon } from '@navikt/aksel-icons';
 import * as React from 'react';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import classes from './Table.module.css.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 
 const SORT_ICON = {
     ascending: jsx(ChevronUpIcon, {}),
@@ -11,7 +10,7 @@ const SORT_ICON = {
 };
 const TableHeaderCell = React.forwardRef(({ sortable = false, sort, onSortClick, className, children, ...rest }, ref) => {
     const sortIcon = sort === 'ascending' || sort === 'descending' ? (SORT_ICON[sort]) : (jsx(ChevronUpDownIcon, {}));
-    return (jsxs("th", { className: clsx(sortable && classes.sortable, sort && classes.sorted, classes.headerCell, className), "aria-sort": sort, ref: ref, ...rest, children: [sortable && (jsxs("button", { className: `fds-focus`, onClick: onSortClick, children: [children, sortIcon] })), !sortable && children] }));
+    return (jsxs("th", { className: clsx('fds-table__header__cell', sortable && 'fds-table__header__cell--sortable', sort && `fds-table__header__cell--sorted`, className), "aria-sort": sort, ref: ref, ...rest, children: [sortable && (jsxs("button", { className: `fds-focus`, onClick: onSortClick, children: [children, sortIcon] })), !sortable && children] }));
 });
 TableHeaderCell.displayName = 'TableHeaderCell';
 

package/dist/esm/components/Table/TableRow.js

@@ -1,11 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import classes from './Table.module.css.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 
 const TableRow = React.forwardRef(({ className, children, ...rest }, ref) => {
-    return (jsx("tr", { className: clsx(classes.row, className), ref: ref, ...rest, children: children }));
+    return (jsx("tr", { className: clsx('fds-table__row', className), ref: ref, ...rest, children: children }));
 });
 TableRow.displayName = 'TableRow';
 

package/dist/esm/components/Tabs/Tab/Tab.js

@@ -2,14 +2,13 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
-import classes from './Tab.module.css.js';
 import { useTabItem } from './useTab.js';
 import { RovingTabindexItem } from '../../../utilities/RovingTabIndex/RovingTabindexItem.js';
 
 const Tab = forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
-    const { active, size = 'medium', ...useTabRest } = useTabItem(props);
-    return (jsx(RovingTabindexItem, { ...rest, asChild: true, children: jsx("button", { ...useTabRest, className: clsx(classes.tabItem, classes[size], active && classes.isActive, className), ref: ref, children: children }) }));
+    const { active, ...useTabRest } = useTabItem(props);
+    return (jsx(RovingTabindexItem, { ...rest, asChild: true, children: jsx("button", { ...useTabRest, className: clsx('fds-tabs__tab', active && 'fds-tabs__tab--active', className), ref: ref, children: children }) }));
 });
 Tab.displayName = 'Tab';
 

package/dist/esm/components/Tabs/Tab/useTab.js

@@ -11,7 +11,6 @@ const useTabItem = (props) => {
     return {
         ...rest,
         active: active,
-        size: tabs?.size,
         id: buttonId,
         'aria-selected': active,
         role: 'tab',

package/dist/esm/components/Tabs/TabContent/TabContent.js

@@ -1,15 +1,13 @@
 'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
-import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { TabsContext } from '../Tabs.js';
-import classes from './TabContent.module.css.js';
 
 const TabContent = forwardRef(({ children, value, className, ...rest }, ref) => {
-    const { value: tabsValue, size = 'medium' } = useContext(TabsContext);
+    const { value: tabsValue } = useContext(TabsContext);
     const active = value == tabsValue;
-    const onlyText = typeof children === 'string';
-    return (jsx(Fragment, { children: active && (jsx("div", { className: clsx(classes[size], classes.tabContent, onlyText && classes.onlyText, className), ref: ref, ...rest, children: children })) }));
+    return (jsx(Fragment, { children: active && (jsx("div", { className: clsx('fds-tabs__content', className), ref: ref, ...rest, children: children })) }));
 });
 TabContent.displayName = 'TabContent';
 

package/dist/esm/components/Tabs/TabList/TabList.js

@@ -2,11 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
-import classes from './TabList.module.css.js';
 import { RovingTabindexRoot } from '../../../utilities/RovingTabIndex/RovingTabindexRoot.js';
 
 const TabList = forwardRef(({ children, className, ...rest }, ref) => {
-    return (jsx(RovingTabindexRoot, { role: 'tablist', className: clsx(classes.tabItemList, className), ref: ref, ...rest, children: children }));
+    return (jsx(RovingTabindexRoot, { role: 'tablist', className: clsx('fds-tabs__tablist', className), ref: ref, ...rest, children: children }));
 });
 TabList.displayName = 'TabList';
 

package/dist/esm/components/Tabs/Tabs.js

@@ -18,8 +18,7 @@ const Tabs = forwardRef(({ children, value, defaultValue, onChange, size = 'medi
             value,
             defaultValue,
             onChange: onValueChange,
-            size,
-        }, children: jsx("div", { ref: ref, ...rest, children: children }) }));
+        }, children: jsx("div", { className: `fds-tabs--${size}`, ref: ref, ...rest, children: children }) }));
 });
 Tabs.displayName = 'Tabs';
 

package/dist/esm/components/Tag/Tag.js

@@ -1,12 +1,11 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import classes from './Tag.module.css.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 const Tag = forwardRef(({ children, color = 'neutral', size = 'medium', className, ...rest }, ref) => {
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("span", { className: clsx(classes.tag, classes[color], classes[size], className), ref: ref, ...rest, children: children }) }));
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("span", { className: clsx('fds-tag', `fds-tag--${color}`, `fds-tag--${size}`, className), ref: ref, ...rest, children: children }) }));
 });
 Tag.displayName = 'Tag';
 

package/dist/esm/components/ToggleGroup/ToggleGroup.js

@@ -1,8 +1,7 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { createContext, forwardRef, useId, useState } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import classes from './ToggleGroup.module.css.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { RovingTabindexRoot } from '../../utilities/RovingTabIndex/RovingTabindexRoot.js';
 
 const ToggleGroupContext = createContext({});
@@ -28,13 +27,13 @@ const ToggleGroup = forwardRef(({ children, value, defaultValue, onChange, size
         };
         value = uncontrolledValue;
     }
-    return (jsx("div", { className: clsx(classes.toggleGroupContainer, className), ref: ref, ...rest, children: jsxs(ToggleGroupContext.Provider, { value: {
+    return (jsx("div", { className: clsx('fds-togglegroup', className), ref: ref, ...rest, children: jsxs(ToggleGroupContext.Provider, { value: {
                 value,
                 defaultValue,
                 name: name ?? `togglegroup-name-${nameId}`,
                 onChange: onValueChange,
                 size,
-            }, children: [name && (jsx("input", { type: 'hidden', name: name, value: value })), jsx(RovingTabindexRoot, { asChild: true, valueId: value, children: jsx("div", { className: classes.groupContent, role: 'radiogroup', children: children }) })] }) }));
+            }, children: [name && (jsx("input", { className: 'fds-togglegroup__input', name: name, value: value })), jsx(RovingTabindexRoot, { asChild: true, valueId: value, children: jsx("div", { className: 'fds-togglegroup__content', role: 'radiogroup', children: children }) })] }) }));
 });
 ToggleGroup.displayName = 'ToggleGroup';
 

package/dist/esm/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.js

@@ -2,7 +2,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
-import classes from './ToggleGroupItem.module.css.js';
 import { useToggleGroupItem } from './useToggleGroupitem.js';
 import { RovingTabindexItem } from '../../../utilities/RovingTabIndex/RovingTabindexItem.js';
 import { Button } from '../../Button/Button.js';
@@ -10,7 +9,7 @@ import { Button } from '../../Button/Button.js';
 const ToggleGroupItem = forwardRef((props, ref) => {
     const { children, icon, className, ...rest } = props;
     const { active, size = 'medium', buttonProps } = useToggleGroupItem(props);
-    return (jsx(RovingTabindexItem, { asChild: true, value: rest.value, children: jsx(Button, { className: clsx(classes.toggleGroupItem, className), icon: icon, color: 'first', variant: active ? 'primary' : 'tertiary', size: size, ref: ref, ...rest, ...buttonProps, children: children }) }));
+    return (jsx(RovingTabindexItem, { asChild: true, value: rest.value, children: jsx(Button, { className: clsx('fds-togglegroup__item', className), icon: icon, color: 'first', variant: active ? 'primary' : 'tertiary', size: size, ref: ref, ...rest, ...buttonProps, children: children }) }));
 });
 ToggleGroupItem.displayName = 'ToggleGroupItem';
 

package/dist/esm/components/Tooltip/Tooltip.js

@@ -2,9 +2,8 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { forwardRef, useState, cloneElement } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { useFloating, useTransitionStyles, useInteractions, useHover, useFocus, useDismiss, useRole, useMergeRefs, FloatingPortal, FloatingArrow } from '../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import classes from './Tooltip.module.css.js';
 import { autoUpdate, flip, shift } from '../../packages/react/node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
 import { offset } from '../../packages/react/node_modules/@floating-ui/core/dist/floating-ui.core.js';
 import { arrow } from '../../packages/react/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
@@ -59,10 +58,10 @@ const Tooltip = forwardRef(({ children, content, placement = 'top', delay = 150,
     return (jsxs(Fragment, { children: [cloneElement(children, getReferenceProps({
                 ref: childMergedRef,
             })), internalOpen && (jsx(FloatingPortal, { children: jsx(Container, { children: jsxs("div", { ref: refs.setFloating, style: { ...floatingStyles, ...animationStyles, ...style }, role: 'tooltip', ...getFloatingProps({
-                            className: clsx(classes.wrapper, inverted && classes.inverted, className),
+                            className: clsx('fds-tooltip', inverted && 'fds-tooltip--inverted', className),
                             ref: mergedRef,
                             ...rest,
-                        }), children: [content, jsx(FloatingArrow, { ref: arrowRef, context: context, className: classes.arrow, height: ARROW_HEIGHT })] }) }) }))] }));
+                        }), children: [content, jsx(FloatingArrow, { ref: arrowRef, context: context, className: 'fds-tooltip__arrow', height: ARROW_HEIGHT })] }) }) }))] }));
 });
 Tooltip.displayName = 'Tooltip';
 

package/dist/esm/components/Typography/ErrorMessage/ErrorMessage.js

@@ -3,14 +3,11 @@ 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 './ErrorMessage.module.css.js';
 
 /** Use `ErrorMessage` to display text as error message. */
-const ErrorMessage = forwardRef(({ className, size = 'medium', spacing, as = 'div', asChild, error = true, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
-    return (jsx(Component, { ref: ref, className: clsx(classes.errorMessage, classes[size], {
-            [classes.spacing]: !!spacing,
-        }, error && classes.error, className), ...rest }));
+const ErrorMessage = forwardRef(({ className, size = 'medium', spacing, asChild, error = true, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
+    return (jsx(Component, { ref: ref, className: clsx('fds-error-message', `fds-error-message--${size}`, spacing && 'fds-error-message--spacing', error && 'fds-error-message--error', className), ...rest }));
 });
 ErrorMessage.displayName = 'ErrorMessage';
 

package/dist/esm/components/Typography/Heading/Heading.js

@@ -3,16 +3,11 @@ 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 './Heading.module.css.js';
 
 /** Use `Heading` to render h1-6 elements with heading text styles.  */
-const Heading = forwardRef(({ level = 1, size = 'xlarge', spacing = false, className, as, asChild, ...rest }, ref) => {
-    const Component = asChild
-        ? $5e63c961fc1ce211$export$8c6ed5c666ac1360
-        : as ?? `h${level ?? 1}`;
-    return (jsx(Component, { ref: ref, className: clsx(classes.heading, classes[`size-${size}`], {
-            [classes.spacing]: spacing,
-        }, className), ...rest }));
+const Heading = forwardRef(({ level = 1, size = 'xlarge', spacing = false, className, asChild, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : `h${level ?? 1}`;
+    return (jsx(Component, { ref: ref, className: clsx('fds-heading', `fds-heading--${size}`, spacing && 'fds-heading--spacing', className), ...rest }));
 });
 Heading.displayName = 'Heading';
 

package/dist/esm/components/Typography/Ingress/Ingress.js

@@ -5,11 +5,9 @@ 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';
 
 /** Use `Ingress` to display text as ingress. */
-const Ingress = forwardRef(({ className, size = 'medium', spacing, as = 'p', asChild, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
-    return (jsx(Component, { ref: ref, className: clsx(`fds-ingress`, `fds-ingress--${size}`, {
-            'fds-ingress--spacing': !!spacing,
-        }, className), ...rest }));
+const Ingress = forwardRef(({ className, size = 'medium', spacing, asChild, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'p';
+    return (jsx(Component, { ref: ref, className: clsx(`fds-ingress`, `fds-ingress--${size}`, spacing && 'fds-ingress--spacing', className), ...rest }));
 });
 Ingress.displayName = 'Ingress';
 

package/dist/esm/components/Typography/Label/Label.js

@@ -3,17 +3,11 @@ 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 './Label.module.css.js';
 
-const fontWeightsClasses = {
-    regular: classes.regularWeight,
-    medium: classes.mediumWeight,
-    semibold: classes.semiboldWeight,
-};
 /** Use `Label` for labels. */
-const Label = forwardRef(({ className, size = 'medium', spacing, as = 'label', weight = 'medium', asChild, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
-    return (jsx(Component, { ref: ref, className: clsx(classes.label, classes[size], spacing && classes.spacing, weight && [fontWeightsClasses[weight]], className), ...rest }));
+const Label = forwardRef(({ className, size = 'medium', spacing, weight = 'medium', asChild, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'label';
+    return (jsx(Component, { ref: ref, className: clsx('fds-label', `fds-label--${size}`, spacing && 'fds-label--spacing', weight && `fds-label--${weight}-weight`, className), ...rest }));
 });
 Label.displayName = 'Label';
 

package/dist/esm/components/Typography/Paragraph/Paragraph.js

@@ -3,15 +3,11 @@ 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 './Paragraph.module.css.js';
 
 /** Use `Paragraph` to display text with paragraph text styles. */
-const Paragraph = forwardRef(({ className, size = 'medium', spacing, as = 'p', asChild, short, variant, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
-    return (jsx(Component, { ref: ref, className: clsx(classes.paragraph, classes[size], {
-            [classes.spacing]: !!spacing,
-            [classes.short]: short,
-        }, variant && classes[variant], className), ...rest }));
+const Paragraph = forwardRef(({ className, size = 'medium', spacing, asChild, variant, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'p';
+    return (jsx(Component, { ref: ref, className: clsx('fds-paragraph', `fds-paragraph--${size}`, spacing && 'fds-paragraph--spacing', variant && `fds-paragraph--${variant}`, className), ...rest }));
 });
 Paragraph.displayName = 'Paragraph';
 

package/dist/esm/components/form/Checkbox/Checkbox.js

@@ -1,9 +1,8 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { useMergeRefs } from '../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import classes from './Checkbox.module.css.js';
 import { useCheckbox } from './useCheckbox.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 import { omit } from '../../../utilities/objectUtils.js';
@@ -11,7 +10,7 @@ import { Label } from '../../Typography/Label/Label.js';
 
 const Checkbox = forwardRef((props, ref) => {
     const { children, description, className, style, ...rest } = props;
-    const { inputProps, descriptionId, hasError, size = 'medium', readOnly, } = useCheckbox(props);
+    const { inputProps, descriptionId, hasError, size = 'medium', readOnly } = useCheckbox(props);
     const inputRef = useMergeRefs([
         ref,
         (el) => {
@@ -20,7 +19,7 @@ const Checkbox = forwardRef((props, ref) => {
             }
         },
     ]);
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx(classes.container, classes[size], inputProps.disabled && classes.disabled, hasError && classes.error, readOnly && classes.readonly, className), style: style, children: [jsx("input", { className: classes.input, ref: inputRef, ...omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), children && (jsxs(Fragment, { children: [jsx(Label, { className: classes.label, htmlFor: inputProps.id, size: size, weight: 'regular', children: jsx("span", { children: children }) }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: classes.description, children: description }) }))] }))] }) }));
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx('fds-checkbox', `fds-checkbox--${size}`, inputProps.disabled && `fds-checkbox--disabled`, hasError && `fds-checkbox--error`, readOnly && `fds-checkbox--readonly`, className), style: style, children: [jsx("input", { className: `fds-checkbox__input`, ref: inputRef, ...omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), children && (jsxs(Fragment, { children: [jsx(Label, { className: `fds-checkbox__label`, htmlFor: inputProps.id, size: size, weight: 'regular', children: jsx("span", { children: children }) }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: `fds-checkbox__description`, children: description }) }))] }))] }) }));
 });
 Checkbox.displayName = 'Checkbox';