@digdir/designsystemet-react 1.0.0-rc.8 → 1.0.0

package/dist/cjs/components/Field/index.js

@@ -0,0 +1,35 @@
+'use client';
+'use strict';
+
+var Field$1 = require('./Field.js');
+var FieldAffix = require('./FieldAffix.js');
+var FieldCounter = require('./FieldCounter.js');
+var FieldDescription = require('./FieldDescription.js');
+
+/**
+ * Field component, used to wrap a form field.
+ *
+ * @example
+ * <Field data-my-field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
+ * </Field>
+ */
+const Field = Object.assign(Field$1.Field, {
+    Description: FieldDescription.FieldDescription,
+    Affixes: FieldAffix.FieldAffixes,
+    Affix: FieldAffix.FieldAffix,
+    Counter: FieldCounter.FieldCounter,
+});
+Field.Description.displayName = 'Field.Description';
+Field.Affixes.displayName = 'Field.Affixes';
+Field.Affix.displayName = 'Field.Affix';
+Field.Counter.displayName = 'Field.Counter';
+
+exports.FieldAffix = FieldAffix.FieldAffix;
+exports.FieldAffixes = FieldAffix.FieldAffixes;
+exports.FieldCounter = FieldCounter.FieldCounter;
+exports.FieldDescription = FieldDescription.FieldDescription;
+exports.Field = Field;

package/dist/cjs/components/Fieldset/Fieldset.js

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Fieldset component, used to wrap a form field. Uses native `fieldset` element.
+ *
+ * @example
+ * <Fieldset>
+ *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ *   <Fieldset.Description>
+ *     Gi en kort beskrivelse i begge feltene
+ *   </Fieldset.Description>
+ *   <Field>
+ *     <Label>Kort beskrivelse</Label>
+ *     <Input />
+ *   </Field>
+ * </Fieldset>
+ */
+const Fieldset = react.forwardRef(function Fieldset({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("fieldset", { className: cl('ds-fieldset', className), ref: ref, ...rest }));
+});
+
+exports.Fieldset = Fieldset;

package/dist/cjs/components/Fieldset/FieldsetDescription.js

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Paragraph = require('../Paragraph/Paragraph.js');
+
+/**
+ * FieldsetDescription component, used to display a description for a fieldset.
+ *
+ * @example
+ * <Fieldset.Description>
+ *   Gi en kort beskrivelse i begge feltene
+ * </Fieldset.Description>
+ */
+const FieldsetDescription = react.forwardRef(function FieldsetDescription(rest, ref) {
+    return jsxRuntime.jsx(Paragraph.Paragraph, { ref: ref, ...rest });
+});
+
+exports.FieldsetDescription = FieldsetDescription;

package/dist/cjs/components/Fieldset/FieldsetLegend.js

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Label = require('../Label/Label.js');
+
+/**
+ * FieldsetLegend component, used to display a legend for a fieldset.
+ *
+ * @example
+ * <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ */
+const FieldsetLegend = react.forwardRef(function FieldsetLegend(rest, ref) {
+    return (jsxRuntime.jsx(Label.Label, { asChild: true, children: jsxRuntime.jsx("legend", { ref: ref, ...rest }) }));
+});
+
+exports.FieldsetLegend = FieldsetLegend;

package/dist/cjs/components/Fieldset/index.js

@@ -0,0 +1,32 @@
+'use client';
+'use strict';
+
+var Fieldset$1 = require('./Fieldset.js');
+var FieldsetDescription = require('./FieldsetDescription.js');
+var FieldsetLegend = require('./FieldsetLegend.js');
+
+/**
+ * Fieldset component, used to wrap a form field.
+ *
+ * @example
+ * <Fieldset>
+ *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ *   <Fieldset.Description>
+ *     Gi en kort beskrivelse i begge feltene
+ *   </Fieldset.Description>
+ *   <Field>
+ *     <Label>Kort beskrivelse</Label>
+ *     <Input />
+ *   </Field>
+ * </Fieldset>
+ */
+const Fieldset = Object.assign(Fieldset$1.Fieldset, {
+    Legend: FieldsetLegend.FieldsetLegend,
+    Description: FieldsetDescription.FieldsetDescription,
+});
+Fieldset.Legend.displayName = 'Fieldset.Legend';
+Fieldset.Description.displayName = 'Fieldset.Description';
+
+exports.FieldsetDescription = FieldsetDescription.FieldsetDescription;
+exports.FieldsetLegend = FieldsetLegend.FieldsetLegend;
+exports.Fieldset = Fieldset;

package/dist/cjs/components/Heading/Heading.js

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Use `Heading` to render h1-6 elements with heading text styles.
+ *
+ * @example
+ * <Heading data-size='lg' level={2}>Heading</Heading>
+ */
+const Heading = react.forwardRef(function Heading({ level = 2, className, asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : `h${level}`;
+    return (jsxRuntime.jsx(Component, { className: cl(`ds-heading`, className), ref: ref, ...rest }));
+});
+
+exports.Heading = Heading;

package/dist/cjs/components/Input/Input.js

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Input renders a native `input` element.
+ *
+ * @example
+ * <Input />
+ */
+const Input = react.forwardRef(function Input({ type = 'text', className, onChange, onClick, ...rest }, ref) {
+    return (jsxRuntime.jsx("input", { className: cl(`ds-input`, className), ref: ref, type: type, onChange: (event) => rest.readOnly || onChange?.(event), onClick: (event) => {
+            if (rest.readOnly)
+                event.preventDefault(); // Make readonly work for checkbox / radio / switch
+            onClick?.(event);
+        }, ...rest }));
+});
+
+exports.Input = Input;

package/dist/cjs/components/Label/Label.js

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Use `Label` for labels. Renders a native `label` element.
+ *
+ * @example
+ * <Label data-size='lg' weight='medium'>Label</Label>
+ */
+const Label = react.forwardRef(function Label({ className, weight = 'medium', asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'label';
+    return (jsxRuntime.jsx(Component, { ref: ref, className: cl('ds-label', className), "data-weight": weight, ...rest }));
+});
+
+exports.Label = Label;

package/dist/cjs/components/Link/Link.js

@@ -2,13 +2,19 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
 
-const Link = React.forwardRef(({ color = 'accent', asChild, children, className, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : 'a';
-    return (jsxRuntime.jsx(Component, { className: lite.clsx('ds-link', `ds-link--${color}`, className), ref: ref, ...rest, children: children }));
+/**
+ * Link component, renders a native `a` element.
+ *
+ * @example
+ * <Link href='#'>Link</Link>
+ */
+const Link = react.forwardRef(({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? reactSlot.Slot : 'a';
+    return (jsxRuntime.jsx(Component, { className: cl('ds-link', className), ref: ref, ...rest }));
 });
 Link.displayName = 'Link';
 

package/dist/cjs/components/List/ListItem.js

@@ -2,14 +2,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
 
-const ListItem = React.forwardRef(({ asChild, className, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : 'li';
-    return (jsxRuntime.jsx(Component, { className: lite.clsx('ds-list__item', className), ...rest, ref: ref }));
+const ListItem = react.forwardRef(function ListItem({ asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'li';
+    return jsxRuntime.jsx(Component, { ...rest, ref: ref });
 });
-ListItem.displayName = 'ListItem';
 
 exports.ListItem = ListItem;

package/dist/cjs/components/List/Lists.js

@@ -2,24 +2,40 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var ListRoot = require('./ListRoot.js');
-var Paragraph = require('../Typography/Paragraph/Paragraph.js');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
 
-const Unordered = React.forwardRef(({ asChild, ...rest }, ref) => {
-    const { size, headingId } = React.useContext(ListRoot.ListContext);
-    const Component = asChild ? index.Slot : 'ul';
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.jsx(Component, { className: lite.clsx(`ds-list`, `ds-list--${size}`, rest.className), ...(headingId ? { 'aria-labelledby': headingId } : {}), ref: ref, ...rest }) }));
+const render = (tagName, { asChild, className, ...rest }, ref) => {
+    const Component = asChild ? reactSlot.Slot : tagName;
+    return jsxRuntime.jsx(Component, { className: cl(`ds-list`, className), ref: ref, ...rest });
+};
+/**
+ * ListUnordered component, used to display a list of items.
+ * Renders a native `ul` element.
+ *
+ * @example
+ * <List.Unordered>
+ *   <List.Item>Item 1</List.Item>
+ *   <List.Item>Item 2</List.Item>
+ * </List.Unordered>
+ */
+const ListUnordered = react.forwardRef(function ListUnordered(props, ref) {
+    return render('ul', props, ref);
 });
-Unordered.displayName = 'ListUnordered';
-const Ordered = React.forwardRef(({ asChild, ...rest }, ref) => {
-    const { size, headingId } = React.useContext(ListRoot.ListContext);
-    const Component = asChild ? index.Slot : 'ol';
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.jsx(Component, { className: lite.clsx(`ds-list`, `ds-list--${size}`, rest.className), ...(headingId ? { 'aria-labelledby': headingId } : {}), ref: ref, ...rest }) }));
+/**
+ * ListOrdered component, used to display a list of items.
+ * Renders a native `ol` element.
+ *
+ * @example
+ * <List.Ordered>
+ *   <List.Item>Item 1</List.Item>
+ *   <List.Item>Item 2</List.Item>
+ * </List.Ordered>
+ */
+const ListOrdered = react.forwardRef(function ListOrdered(props, ref) {
+    return render('ol', props, ref);
 });
-Ordered.displayName = 'ListOrdered';
 
-exports.Ordered = Ordered;
-exports.Unordered = Unordered;
+exports.ListOrdered = ListOrdered;
+exports.ListUnordered = ListUnordered;

package/dist/cjs/components/List/index.js

@@ -1,26 +1,19 @@
 'use client';
 'use strict';
 
-var ListRoot = require('./ListRoot.js');
 var ListItem = require('./ListItem.js');
-var ListHeading = require('./ListHeading.js');
 var Lists = require('./Lists.js');
 
-const List = {};
-List.Root = ListRoot.ListRoot;
-List.Item = ListItem.ListItem;
-List.Heading = ListHeading.ListHeading;
-List.Ordered = Lists.Ordered;
-List.Unordered = Lists.Unordered;
-List.Root.displayName = 'List.Root';
+const List = {
+    Item: ListItem.ListItem,
+    Ordered: Lists.ListOrdered,
+    Unordered: Lists.ListUnordered,
+};
 List.Item.displayName = 'List.Item';
-List.Heading.displayName = 'List.Heading';
 List.Ordered.displayName = 'List.Ordered';
 List.Unordered.displayName = 'List.Unordered';
 
-exports.ListRoot = ListRoot.ListRoot;
 exports.ListItem = ListItem.ListItem;
-exports.ListHeading = ListHeading.ListHeading;
-exports.ListOrdered = Lists.Ordered;
-exports.ListUnordered = Lists.Unordered;
+exports.ListOrdered = Lists.ListOrdered;
+exports.ListUnordered = Lists.ListUnordered;
 exports.List = List;

package/dist/cjs/components/Pagination/Pagination.js

@@ -2,36 +2,31 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var akselIcons = require('@navikt/aksel-icons');
-var PaginationRoot = require('./PaginationRoot.js');
-var PaginationContent = require('./PaginationContent.js');
-var PaginationItem = require('./PaginationItem.js');
-var PaginationButton = require('./PaginationButton.js');
-var PaginationEllipsis = require('./PaginationEllipsis.js');
-var PaginationNextPrev = require('./PaginationNextPrev.js');
-var usePagination = require('./usePagination.js');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
 
-const iconSize = {
-    sm: '1rem',
-    md: '1.5rem',
-    lg: '2rem',
-};
-const Pagination = React.forwardRef(({ nextLabel = '', previousLabel = '', compact = false, hideLabels = false, currentPage = 1, totalPages, size = 'md', onChange, itemLabel = (num) => `Side ${num}`, ...rest }, ref) => {
-    const { pages, showNextPage, showPreviousPage } = usePagination.usePagination({
-        compact,
-        currentPage,
-        totalPages,
-    });
-    return (jsxRuntime.jsx(PaginationRoot.PaginationRoot, { ref: ref, "aria-label": 'Pagination', size: size, compact: compact, ...rest, children: jsxRuntime.jsxs(PaginationContent.PaginationContent, { children: [jsxRuntime.jsx(PaginationItem.PaginationItem, { children: jsxRuntime.jsxs(PaginationNextPrev.PaginationPrevious, { className: lite.clsx(!showPreviousPage && 'ds-pagination--hidden'), onClick: () => {
-                            onChange(currentPage - 1);
-                        }, "aria-label": previousLabel, children: [jsxRuntime.jsx(akselIcons.ChevronLeftIcon, { "aria-hidden": true, fontSize: iconSize[size] }), !hideLabels && previousLabel] }) }), pages.map((page, i) => (jsxRuntime.jsx(PaginationItem.PaginationItem, { children: page === 'ellipsis' ? (jsxRuntime.jsx(PaginationEllipsis.PaginationEllipsis, {})) : (jsxRuntime.jsx(PaginationButton.PaginationButton, { "aria-current": currentPage === page, isActive: currentPage === page, "aria-label": itemLabel(page), onClick: () => {
-                            onChange(page);
-                        }, children: page })) }, `${page}${i}`))), jsxRuntime.jsx(PaginationItem.PaginationItem, { children: jsxRuntime.jsxs(PaginationNextPrev.PaginationNext, { "aria-label": nextLabel, onClick: () => {
-                            onChange(currentPage + 1);
-                        }, className: lite.clsx(!showNextPage && 'ds-pagination--hidden'), children: [!hideLabels && nextLabel, jsxRuntime.jsx(akselIcons.ChevronRightIcon, { "aria-hidden": true, fontSize: iconSize[size] })] }) })] }) }));
+/**
+ * Pagination component, used to navigate through a list of items.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 1'>1</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 2'>2</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
+const Pagination = react.forwardRef(function Pagination({ 'aria-label': ariaLabel = 'Sidenavigering', asChild, className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'nav';
+    return (jsxRuntime.jsx(Component, { "aria-label": ariaLabel, className: cl('ds-pagination', className), ref: ref, ...rest }));
 });
-Pagination.displayName = 'Pagination';
 
 exports.Pagination = Pagination;

package/dist/cjs/components/Pagination/PaginationButton.js

@@ -2,13 +2,19 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var PaginationRoot = require('./PaginationRoot.js');
+var react = require('react');
 var Button = require('../Button/Button.js');
 
-const PaginationButton = React.forwardRef(({ isActive, ...rest }, ref) => {
-    const { size } = React.useContext(PaginationRoot.PaginationContext);
-    return (jsxRuntime.jsx(Button.Button, { ref: ref, variant: isActive ? 'primary' : 'tertiary', "aria-current": isActive, size: size, ...rest }));
+/**
+ * PaginationButton component, use within a Pagination.Item.
+ *
+ * @example
+ * <Pagination.Item>
+ *   <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ * </Pagination.Item>
+ */
+const PaginationButton = react.forwardRef(function PaginationButton(rest, ref) {
+    return jsxRuntime.jsx(Button.Button, { ref: ref, ...rest });
 });
 
 exports.PaginationButton = PaginationButton;

package/dist/cjs/components/Pagination/PaginationItem.js

@@ -1,20 +1,23 @@
 'use client';
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
-var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var React = require('react');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var PaginationRoot = require('./PaginationRoot.js');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
 
-const PaginationItem = React.forwardRef(({ asChild, className, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : 'li';
-    const { size, compact } = React.useContext(PaginationRoot.PaginationContext);
-    return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx('ds-pagination__item', `ds-pagination--${size}`, compact && 'ds-pagination--compact', className), ...rest }));
+/**
+ * PaginationItem component, use within a Pagination.List.
+ *
+ * @example
+ * <Pagination.List>
+ *   <Pagination.Item>
+ *     <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *   </Pagination.Item>
+ * </Pagination.List>
+ */
+const PaginationItem = react.forwardRef(function PaginationItem({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'li';
+    return jsxRuntime.jsx(Component, { ref: ref, ...rest });
 });
-var PaginationItem$1 = PaginationItem;
 
 exports.PaginationItem = PaginationItem;
-exports.default = PaginationItem$1;

package/dist/cjs/components/Pagination/PaginationList.js

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+
+/**
+ * PaginationList component, use within a Pagination.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
+const PaginationList = react.forwardRef(function PaginationList({ asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'ul';
+    return jsxRuntime.jsx(Component, { ref: ref, ...rest });
+});
+
+exports.PaginationList = PaginationList;

package/dist/cjs/components/Pagination/index.js

@@ -2,34 +2,38 @@
 'use strict';
 
 var Pagination$1 = require('./Pagination.js');
-var PaginationContent = require('./PaginationContent.js');
-var PaginationEllipsis = require('./PaginationEllipsis.js');
-var PaginationItem = require('./PaginationItem.js');
 var PaginationButton = require('./PaginationButton.js');
-var PaginationNextPrev = require('./PaginationNextPrev.js');
-var PaginationRoot = require('./PaginationRoot.js');
+var PaginationItem = require('./PaginationItem.js');
+var PaginationList = require('./PaginationList.js');
 
-const Pagination = Pagination$1.Pagination;
-Pagination.Root = PaginationRoot.default;
-Pagination.Content = PaginationContent.PaginationContent;
-Pagination.Item = PaginationItem.default;
-Pagination.Button = PaginationButton.PaginationButton;
-Pagination.Ellipsis = PaginationEllipsis.default;
-Pagination.Previous = PaginationNextPrev.PaginationPrevious;
-Pagination.Next = PaginationNextPrev.PaginationNext;
-Pagination.Root.displayName = 'Pagination.Root';
-Pagination.Content.displayName = 'Pagination.Content';
+/**
+ * Pagination component, used to navigate through a list of items.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 1'>1</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 2'>2</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
+const Pagination = Object.assign(Pagination$1.Pagination, {
+    List: PaginationList.PaginationList,
+    Item: PaginationItem.PaginationItem,
+    Button: PaginationButton.PaginationButton,
+});
+Pagination.List.displayName = 'Pagination.List';
 Pagination.Item.displayName = 'Pagination.Item';
 Pagination.Button.displayName = 'Pagination.Button';
-Pagination.Ellipsis.displayName = 'Pagination.Ellipsis';
-Pagination.Previous.displayName = 'Pagination.Previous';
-Pagination.Next.displayName = 'Pagination.Next';
 
-exports.PaginationContent = PaginationContent.PaginationContent;
-exports.PaginationEllipsis = PaginationEllipsis.default;
-exports.PaginationItem = PaginationItem.default;
 exports.PaginationButton = PaginationButton.PaginationButton;
-exports.PaginationNext = PaginationNextPrev.PaginationNext;
-exports.PaginationPrevious = PaginationNextPrev.PaginationPrevious;
-exports.PaginationRoot = PaginationRoot.default;
+exports.PaginationItem = PaginationItem.PaginationItem;
+exports.PaginationList = PaginationList.PaginationList;
 exports.Pagination = Pagination;

package/dist/cjs/components/Paragraph/Paragraph.js

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Use `Paragraph` to display text with paragraph text styles.
+ * Renders a native `p` element.
+ *
+ * @example
+ * <Paragraph data-size='lg'>Paragraph</Paragraph>
+ */
+const Paragraph = react.forwardRef(function Paragraph({ className, asChild, variant = 'default', ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'p';
+    return (jsxRuntime.jsx(Component, { ref: ref, className: cl(`ds-paragraph`, className), "data-variant": variant, ...rest }));
+});
+
+exports.Paragraph = Paragraph;