@digdir/designsystemet-react 1.20.0 → 1.20.1

package/dist/cjs/components/field/field-affix.cjs

@@ -0,0 +1,46 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/field/field-affix.tsx
+/**
+* FieldAffixes component, used to wrap a form field.
+*
+* @example
+* <Field.Affixes>
+*   <Field.Affix>NOK</Field.Affix>
+*   <Input />
+*   <Field.Affix>pr. mnd.</Field.Affix>
+* </Field.Affixes>
+*/
+const FieldAffixes = (0, react.forwardRef)(function FieldAffixes({ className, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx_lite.default)("ds-field-affixes", className),
+		ref,
+		...rest
+	});
+});
+/**
+* FieldAffix component, used to wrap a form field.
+* Use together with Field.Affixes.
+*
+* @example
+* <Field.Affixes>
+*   <Field.Affix>NOK</Field.Affix>
+*   <Input />
+*   <Field.Affix>pr. mnd.</Field.Affix>
+* </Field.Affixes>
+*/
+const FieldAffix = (0, react.forwardRef)(function FieldAffix({ className, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, clsx_lite.default)("ds-field-affix", className),
+		"aria-hidden": "true",
+		ref,
+		...rest
+	});
+});
+//#endregion
+exports.FieldAffix = FieldAffix;
+exports.FieldAffixes = FieldAffixes;

package/dist/cjs/components/field/field-affix.d.cts

@@ -0,0 +1,30 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/field/field-affix.d.ts
+type FieldAffixesProps = Omit<HTMLAttributes<HTMLDivElement>, 'prefix'>;
+/**
+ * FieldAffixes component, used to wrap a form field.
+ *
+ * @example
+ * <Field.Affixes>
+ *   <Field.Affix>NOK</Field.Affix>
+ *   <Input />
+ *   <Field.Affix>pr. mnd.</Field.Affix>
+ * </Field.Affixes>
+ */
+declare const FieldAffixes: import("react").ForwardRefExoticComponent<FieldAffixesProps & import("react").RefAttributes<HTMLDivElement>>;
+type FieldAffixProps = Omit<HTMLAttributes<HTMLDivElement>, 'prefix'>;
+/**
+ * FieldAffix component, used to wrap a form field.
+ * Use together with Field.Affixes.
+ *
+ * @example
+ * <Field.Affixes>
+ *   <Field.Affix>NOK</Field.Affix>
+ *   <Input />
+ *   <Field.Affix>pr. mnd.</Field.Affix>
+ * </Field.Affixes>
+ */
+declare const FieldAffix: import("react").ForwardRefExoticComponent<FieldAffixProps & import("react").RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { FieldAffix, FieldAffixProps, FieldAffixes, FieldAffixesProps };

package/dist/cjs/components/field/field-counter.cjs

@@ -0,0 +1,28 @@
+'use client';
+const require_index = require("../../utilities/index.cjs");
+const require_validation_message = require("../validation-message/validation-message.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/field/field-counter.tsx
+/**
+* FieldCounter component, used to display a counter for a form field.
+*
+* @example
+* <Field>
+*   <Input />
+*   <Field.Counter limit={100} under='%d tegn igjen' over='%d tegn for mye' />
+* </Field>
+*/
+const FieldCounter = (0, react.forwardRef)(function FieldCounter({ limit, under, over, hint, ...rest }, _ref) {
+	if (hint) require_index.warn("hint attribute is deprecated on Field.Counter");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_validation_message.ValidationMessage, {
+		suppressHydrationWarning: true,
+		"data-field": "counter",
+		"data-limit": limit,
+		"data-under": under,
+		"data-over": over,
+		...rest
+	});
+});
+//#endregion
+exports.FieldCounter = FieldCounter;

package/dist/cjs/components/field/field-counter.d.cts

@@ -0,0 +1,70 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { ValidationMessageProps } from "../validation-message/validation-message.cjs";
+import "../../index.cjs";
+//#region src/components/field/field-counter.d.ts
+type FieldCounterProps = {
+  /**
+   * Label template for when `maxCount` is exceeded.
+   * Use `%d` to insert the number of characters.
+   *
+   * @default '%d tegn for mye'
+   */
+  over?: string;
+  /**
+   * Label template for count.
+   * Use `%d` to insert the number of characters.
+   *
+   * @default '%d tegn igjen'
+   */
+  under?: string;
+  /**
+   * @deprecated The hint attribute is deprecated.
+   */
+  hint?: string;
+  /**
+   * The maximum allowed characters.
+   *
+   * @default undefined
+   **/
+  limit: number;
+} & ValidationMessageProps;
+/**
+ * FieldCounter component, used to display a counter for a form field.
+ *
+ * @example
+ * <Field>
+ *   <Input />
+ *   <Field.Counter limit={100} under='%d tegn igjen' over='%d tegn for mye' />
+ * </Field>
+ */
+declare const FieldCounter: import("react").ForwardRefExoticComponent<{
+  /**
+   * Label template for when `maxCount` is exceeded.
+   * Use `%d` to insert the number of characters.
+   *
+   * @default '%d tegn for mye'
+   */
+  over?: string;
+  /**
+   * Label template for count.
+   * Use `%d` to insert the number of characters.
+   *
+   * @default '%d tegn igjen'
+   */
+  under?: string;
+  /**
+   * @deprecated The hint attribute is deprecated.
+   */
+  hint?: string;
+  /**
+   * The maximum allowed characters.
+   *
+   * @default undefined
+   **/
+  limit: number;
+} & Omit<DefaultProps & import("react").HTMLAttributes<HTMLParagraphElement>, "asChild"> & {
+  asChild?: boolean;
+} & import("react").RefAttributes<HTMLParagraphElement>>;
+//#endregion
+export { FieldCounter, FieldCounterProps };

package/dist/cjs/components/field/field-description.cjs

@@ -0,0 +1,20 @@
+'use client';
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/field/field-description.tsx
+/**
+* Field description component, used to provide additional information below the input.
+*
+* @example
+* <FieldDescription>Additional information</FieldDescription>
+*/
+const FieldDescription = (0, react.forwardRef)(function FieldDescription(rest, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		suppressHydrationWarning: true,
+		"data-field": "description",
+		ref,
+		...rest
+	});
+});
+//#endregion
+exports.FieldDescription = FieldDescription;

package/dist/cjs/components/field/field-description.d.cts

@@ -0,0 +1,13 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/field/field-description.d.ts
+type FieldDescriptionProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * Field description component, used to provide additional information below the input.
+ *
+ * @example
+ * <FieldDescription>Additional information</FieldDescription>
+ */
+declare const FieldDescription: import("react").ForwardRefExoticComponent<FieldDescriptionProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { FieldDescription, FieldDescriptionProps };

package/dist/cjs/components/field/field.cjs

@@ -0,0 +1,35 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_use_merge_refs = require("../../utilities/hooks/use-merge-refs/use-merge-refs.cjs");
+require("../../utilities/hooks/index.cjs");
+require("@digdir/designsystemet-web");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+//#region src/components/field/field.tsx
+/**
+* Field component, used to wrap a form field.
+*
+* @example
+* <Field>
+*   <Label>Kort beskrivelse</Label>
+*   <Field.Description>Beskrivelse</Field.Description>
+*   <Input />
+*   <ValidationMessage>Feilmelding</ValidationMessage>
+* </Field>
+*/
+const Field = (0, react.forwardRef)(function Field({ className, position, asChild, ...rest }, ref) {
+	const Component = asChild ? _radix_ui_react_slot.Slot : "ds-field";
+	const mergedRefs = require_use_merge_refs.useMergeRefs([(0, react.useRef)(null), ref]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		...asChild ? { className: (0, clsx_lite.default)("ds-field", className) } : { class: (0, clsx_lite.default)("ds-field", className) },
+		suppressHydrationWarning: true,
+		"data-position": position,
+		ref: mergedRefs,
+		...rest
+	});
+});
+//#endregion
+exports.Field = Field;

package/dist/cjs/components/field/field.d.cts

@@ -0,0 +1,44 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { DSFieldElement } from "@digdir/designsystemet-web";
+import { HTMLAttributes } from "react";
+//#region src/components/field/field.d.ts
+type FieldProps = {
+  /**
+   * Position of toggle inputs (radio, checkbox, switch) in field
+   * @default start
+   */
+  position?: 'start' | 'end';
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   * @deprecated This is not supported anymore, as the element needs to be `ds-field`
+   */
+  asChild?: boolean;
+} & HTMLAttributes<DSFieldElement> & DefaultProps;
+/**
+ * Field component, used to wrap a form field.
+ *
+ * @example
+ * <Field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
+ * </Field>
+ */
+declare const Field: import("react").ForwardRefExoticComponent<{
+  /**
+   * Position of toggle inputs (radio, checkbox, switch) in field
+   * @default start
+   */
+  position?: "start" | "end";
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   * @deprecated This is not supported anymore, as the element needs to be `ds-field`
+   */
+  asChild?: boolean;
+} & HTMLAttributes<DSFieldElement> & DefaultProps & import("react").RefAttributes<DSFieldElement>>;
+//#endregion
+export { Field, FieldProps };

package/dist/cjs/components/field/index.cjs

@@ -0,0 +1,33 @@
+'use client';
+const require_field = require("./field.cjs");
+const require_field_affix = require("./field-affix.cjs");
+const require_field_counter = require("./field-counter.cjs");
+const require_field_description = require("./field-description.cjs");
+//#region src/components/field/index.ts
+/**
+* Field component, used to wrap a form field.
+*
+* @example
+* <Field>
+*   <Label>Kort beskrivelse</Label>
+*   <Field.Description>Beskrivelse</Field.Description>
+*   <Input />
+*   <ValidationMessage>Feilmelding</ValidationMessage>
+* </Field>
+*/
+const FieldComponent = Object.assign(require_field.Field, {
+	Description: require_field_description.FieldDescription,
+	Affixes: require_field_affix.FieldAffixes,
+	Affix: require_field_affix.FieldAffix,
+	Counter: require_field_counter.FieldCounter
+});
+FieldComponent.Description.displayName = "Field.Description";
+FieldComponent.Affixes.displayName = "Field.Affixes";
+FieldComponent.Affix.displayName = "Field.Affix";
+FieldComponent.Counter.displayName = "Field.Counter";
+//#endregion
+exports.Field = FieldComponent;
+exports.FieldAffix = require_field_affix.FieldAffix;
+exports.FieldAffixes = require_field_affix.FieldAffixes;
+exports.FieldCounter = require_field_counter.FieldCounter;
+exports.FieldDescription = require_field_description.FieldDescription;

package/dist/cjs/components/field/index.d.cts

@@ -0,0 +1,62 @@
+
+import { Field as Field$1, FieldProps } from "./field.cjs";
+import { FieldAffix, FieldAffixProps, FieldAffixes, FieldAffixesProps } from "./field-affix.cjs";
+import { FieldCounter, FieldCounterProps } from "./field-counter.cjs";
+import { FieldDescription, FieldDescriptionProps } from "./field-description.cjs";
+//#region src/components/field/index.d.ts
+type Field = typeof Field$1 & {
+  /**
+   * Field description component, used to provide additional information below the input.
+   *
+   * @example
+   * <Field.Description>Additional information</Field.Description>
+   */
+  Description: typeof FieldDescription;
+  /**
+   * Field affixes component, used to display affixes like currency or unit.
+   *
+   * @example
+   * <Field.Affixes>
+   *   <Field.Affix>NOK</Field.Affix>
+   *   <Input />
+   *   <Field.Affix>pr. mnd.</Field.Affix>
+   * </Field.Affixes>
+   */
+  Affixes: typeof FieldAffixes;
+  /**
+   * Field Affix component, used to wrap a form field.
+   * Used within Field.Affixes.
+   *
+   * @example
+   * <Field.Affixes>
+   *   <Field.Affix>NOK</Field.Affix>
+   *   <Input />
+   *   <Field.Affix>pr. mnd.</Field.Affix>
+   * </Field.Affixes>
+   */
+  Affix: typeof FieldAffix;
+  /**
+   * Field counter component, used to display a character counter for the field.
+   *
+   * @example
+   * <Field>
+   *   <Input />
+   *   <Field.Counter limit={100} under='%d tegn igjen' over='%d tegn for mye' />
+   * </Field>
+   */
+  Counter: typeof FieldCounter;
+};
+/**
+ * Field component, used to wrap a form field.
+ *
+ * @example
+ * <Field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
+ * </Field>
+ */
+declare const FieldComponent: Field;
+//#endregion
+export { FieldComponent as Field, FieldAffix, type FieldAffixProps, FieldAffixes, type FieldAffixesProps, FieldCounter, type FieldCounterProps, FieldDescription, type FieldDescriptionProps, type FieldProps };

package/dist/cjs/components/fieldset/fieldset-description.cjs

@@ -0,0 +1,22 @@
+'use client';
+const require_paragraph = require("../paragraph/paragraph.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/fieldset/fieldset-description.tsx
+/**
+* FieldsetDescription component, used to display a description for a fieldset.
+*
+* @example
+* <FieldsetDescription>
+*   Gi en kort beskrivelse i begge feltene
+* </FieldsetDescription>
+*/
+const FieldsetDescription = (0, react.forwardRef)(function FieldsetDescription(rest, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.Paragraph, {
+		suppressHydrationWarning: true,
+		ref,
+		...rest
+	});
+});
+//#endregion
+exports.FieldsetDescription = FieldsetDescription;

package/dist/cjs/components/fieldset/fieldset-description.d.cts

@@ -0,0 +1,19 @@
+
+import { ParagraphProps } from "../paragraph/paragraph.cjs";
+//#region src/components/fieldset/fieldset-description.d.ts
+type FieldsetDescriptionProps = ParagraphProps;
+/**
+ * FieldsetDescription component, used to display a description for a fieldset.
+ *
+ * @example
+ * <FieldsetDescription>
+ *   Gi en kort beskrivelse i begge feltene
+ * </FieldsetDescription>
+ */
+declare const FieldsetDescription: import("react").ForwardRefExoticComponent<{
+  'data-size'?: "xs" | "sm" | "md" | "lg" | "xl";
+  variant?: "long" | "default" | "short";
+  asChild?: boolean;
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLLegendElement>>;
+//#endregion
+export { FieldsetDescription, FieldsetDescriptionProps };

package/dist/cjs/components/fieldset/fieldset-legend.cjs

@@ -0,0 +1,23 @@
+'use client';
+const require_label = require("../label/label.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/fieldset/fieldset-legend.tsx
+/**
+* FieldsetLegend component, used to display a legend for a fieldset.
+*
+* @example
+* <FieldsetLegend>Skriv inn dine svar</FieldsetLegend>
+*/
+const FieldsetLegend = (0, react.forwardRef)(function FieldsetLegend(rest, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_label.Label, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", {
+			suppressHydrationWarning: true,
+			ref,
+			...rest
+		})
+	});
+});
+//#endregion
+exports.FieldsetLegend = FieldsetLegend;

package/dist/cjs/components/fieldset/fieldset-legend.d.cts

@@ -0,0 +1,14 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { HTMLAttributes } from "react";
+//#region src/components/fieldset/fieldset-legend.d.ts
+type FieldsetLegendProps = HTMLAttributes<HTMLLegendElement> & DefaultProps;
+/**
+ * FieldsetLegend component, used to display a legend for a fieldset.
+ *
+ * @example
+ * <FieldsetLegend>Skriv inn dine svar</FieldsetLegend>
+ */
+declare const FieldsetLegend: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLLegendElement> & DefaultProps & import("react").RefAttributes<HTMLLegendElement>>;
+//#endregion
+export { FieldsetLegend, FieldsetLegendProps };

package/dist/cjs/components/fieldset/fieldset.cjs

@@ -0,0 +1,32 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/fieldset/fieldset.tsx
+/**
+* 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 = (0, react.forwardRef)(function Fieldset({ className, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("fieldset", {
+		className: (0, clsx_lite.default)("ds-fieldset", className),
+		suppressHydrationWarning: true,
+		ref,
+		...rest
+	});
+});
+//#endregion
+exports.Fieldset = Fieldset;

package/dist/cjs/components/fieldset/fieldset.d.cts

@@ -0,0 +1,23 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { FieldsetHTMLAttributes } from "react";
+//#region src/components/fieldset/fieldset.d.ts
+type FieldsetProps = DefaultProps & FieldsetHTMLAttributes<HTMLFieldSetElement>;
+/**
+ * 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>
+ */
+declare const Fieldset: import("react").ForwardRefExoticComponent<DefaultProps & FieldsetHTMLAttributes<HTMLFieldSetElement> & import("react").RefAttributes<HTMLFieldSetElement>>;
+//#endregion
+export { Fieldset, FieldsetProps };

package/dist/cjs/components/fieldset/index.cjs

@@ -0,0 +1,30 @@
+'use client';
+const require_fieldset = require("./fieldset.cjs");
+const require_fieldset_description = require("./fieldset-description.cjs");
+const require_fieldset_legend = require("./fieldset-legend.cjs");
+//#region src/components/fieldset/index.ts
+/**
+* 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 FieldsetComponent = Object.assign(require_fieldset.Fieldset, {
+	Legend: require_fieldset_legend.FieldsetLegend,
+	Description: require_fieldset_description.FieldsetDescription
+});
+FieldsetComponent.Legend.displayName = "Fieldset.Legend";
+FieldsetComponent.Description.displayName = "Fieldset.Description";
+//#endregion
+exports.Fieldset = FieldsetComponent;
+exports.FieldsetDescription = require_fieldset_description.FieldsetDescription;
+exports.FieldsetLegend = require_fieldset_legend.FieldsetLegend;

package/dist/cjs/components/fieldset/index.d.cts

@@ -0,0 +1,41 @@
+
+import { Fieldset as Fieldset$1, FieldsetProps } from "./fieldset.cjs";
+import { FieldsetDescription, FieldsetDescriptionProps } from "./fieldset-description.cjs";
+import { FieldsetLegend, FieldsetLegendProps } from "./fieldset-legend.cjs";
+//#region src/components/fieldset/index.d.ts
+type Fieldset = typeof Fieldset$1 & {
+  /**
+   * Fieldset.Legend component, used to display a legend for a fieldset.
+   *
+   * @example
+   * <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+   */
+  Legend: typeof FieldsetLegend;
+  /**
+   * Fieldset.Description component, used to display a description for a fieldset.
+   *
+   * @example
+   * <Fieldset.Description>
+   *   Gi en kort beskrivelse i begge feltene
+   * </Fieldset.Description>
+   */
+  Description: typeof FieldsetDescription;
+};
+/**
+ * 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>
+ */
+declare const FieldsetComponent: Fieldset;
+//#endregion
+export { FieldsetComponent as Fieldset, FieldsetDescription, type FieldsetDescriptionProps, FieldsetLegend, type FieldsetLegendProps, type FieldsetProps };

package/dist/cjs/components/file-upload/file-upload.cjs

@@ -0,0 +1,35 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/file-upload/file-upload.tsx
+/**
+* FileUpload component to present a file upload area.
+*
+* @example
+* <Field>
+*  <Label>Upload file</Label>
+*  <FileUpload>
+*    <CloudUpIcon aria-hidden='true' />
+*    <Field.Description>Drop file here</Field.Description>
+*    <Field.Description>
+*      File must be in csv format and less than 2MB
+*    </Field.Description>
+*    <Button asChild data-variant='secondary'>
+*      <span>Upload file</span>
+*    </Button>
+*    <input type="file" />
+*  </FileUpload>
+* </Field>
+*/
+const FileUpload = (0, react.forwardRef)(function FileUpload({ className, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: (0, clsx_lite.default)("ds-file-upload", className),
+		...rest
+	});
+});
+//#endregion
+exports.FileUpload = FileUpload;

package/dist/cjs/components/file-upload/file-upload.d.cts

@@ -0,0 +1,11 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { MergeRight } from "../../utilities/types.cjs";
+import "../../utilities/index.cjs";
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/file-upload/file-upload.d.ts
+type FileUploadProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDivElement>, {
+  children?: ReactNode;
+}>;
+//#endregion
+export { FileUploadProps };