@alto-avios/alto-ui 2.4.0 → 3.1.0

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,7 +1,9 @@
+import { default as React } from 'react';
 import { ValidationError } from '@react-types/shared';
 import { CheckboxProps as AriaCheckboxProps } from 'react-aria-components';
 export interface CheckboxProps extends AriaCheckboxProps {
-    label?: string;
+    /** The label of the checkbox, can be a string or a React node. */
+    label?: string | React.ReactNode;
     /** Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction. */
     isIndeterminate?: boolean;
     /** Whether the element should be selected (uncontrolled). */

package/dist/components/Checkbox/Checkbox.js

@@ -44,7 +44,7 @@ const Checkbox = ({
   validate,
   autoFocus,
   name,
-  validationBehavior = "native",
+  validationBehavior,
   description,
   children,
   focusStyle = "default",

package/dist/components/ClearFieldButton/ClearFieldButton.d.ts

@@ -1,14 +1,12 @@
 import { ButtonProps } from '../Button/Button';
-import { IconSize } from '../Icon/Icon';
+import { FormProps } from '../../utils/forms/formProps';
 export type ClearFieldButtonButtonSize = 'lg' | 'md' | 'sm';
-export interface ClearFieldButtonProps extends Omit<ButtonProps, '$styleText'> {
+export interface ClearFieldButtonProps extends Omit<ButtonProps, '$styleText'>, FormProps {
     slot?: string;
-    iconSize?: IconSize;
     className?: string;
-    /**
-     * 	The focus style of the button
-     */
     focusStyle?: 'default' | 'white';
+    onClick?: () => void;
+    type?: 'button' | 'submit' | 'reset';
 }
 export declare const ClearFieldButton: ({ size, form, formAction, formEncType, formMethod, formNoValidate, formTarget, name, value, isDisabled, autoFocus, type, slot, onClick, className, focusStyle, ...props }: ClearFieldButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default ClearFieldButton;

package/dist/components/CreditCardNumberField/CreditCardNumberField.d.ts

@@ -0,0 +1,29 @@
+import { TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
+import { FieldProps } from '../_base/Field';
+type CreditCardNumberValue = string | number | null | undefined;
+interface CreditCardNumberFieldBaseProps {
+    /**
+     * The icon to display.
+     * If a function is provided, it will be called with the current value of the input.
+     * Expects an icon name from the font-awesome `brands` icon pack.
+     * https://fontawesome.com/search?q=credit%20card&o=r&ip=brands
+     */
+    cardIcon?: string | ((value?: CreditCardNumberValue) => string);
+    /**
+     * The controlled value of the credit card number.
+     */
+    value?: CreditCardNumberValue;
+    /**
+     * The controlled onChange handler for the credit card number.
+     */
+    onChange?: (value?: CreditCardNumberValue) => void;
+    /**
+     * The default value of the credit card number.
+     */
+    defaultValue?: CreditCardNumberValue;
+}
+export interface CreditCardNumberFieldProps extends FieldProps<Omit<AriaTextFieldProps, 'defaultValue' | 'value' | 'onChange'>>, CreditCardNumberFieldBaseProps {
+    placeholder?: string;
+}
+export declare const CreditCardNumberField: ({ cardIcon: cardIconProp, defaultValue, value: valueControlled, onChange: onChangeControlled, ...props }: CreditCardNumberFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default CreditCardNumberField;

package/dist/components/CreditCardNumberField/CreditCardNumberField.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { TextField, Input } from "react-aria-components";
+import { P as PatternFormat } from "../../react-number-format.es-DMLgWFZX.js";
+import { Field } from "../_base/Field/Field.js";
+import { Icon } from "../Icon/Icon.js";
+import { getCardIcon } from "../../utils/creditCard/creditCard.js";
+import '../../assets/CreditCardNumberField.css';const creditCardNumberField = "_creditCardNumberField_1d9o2_1";
+const inputWrapper = "_inputWrapper_1d9o2_45";
+const iconEnd = "_iconEnd_1d9o2_51";
+const styles = {
+  creditCardNumberField,
+  inputWrapper,
+  iconEnd
+};
+const CreditCardNumberField = ({
+  cardIcon: cardIconProp = getCardIcon,
+  defaultValue,
+  value: valueControlled,
+  onChange: onChangeControlled,
+  ...props
+}) => {
+  const [value, setValue] = React.useState(defaultValue);
+  const valueDefinitive = valueControlled ?? value;
+  const cardIcon = React.useMemo(() => {
+    if (typeof cardIconProp === "function") {
+      return cardIconProp(value) || "credit-card";
+    }
+    return cardIconProp || "credit-card";
+  }, [value, cardIconProp]);
+  return /* @__PURE__ */ jsx(Field, { className: styles.creditCardNumberField, as: TextField, ...props, children: /* @__PURE__ */ jsxs("div", { className: styles.inputWrapper, children: [
+    /* @__PURE__ */ jsx(PatternFormat, { type: "text", format: "#### #### #### ####", customInput: Input, "aria-label": (props == null ? void 0 : props.label) || "Credit card number", placeholder: props == null ? void 0 : props.placeholder, defaultValue, value: valueDefinitive, onValueChange: (values) => {
+      if (typeof onChangeControlled === "function") {
+        onChangeControlled(values.value);
+      }
+      setValue(values.value);
+    } }),
+    /* @__PURE__ */ jsx(Icon, { iconName: cardIcon, iconPack: cardIcon === "credit-card" ? "solid" : "brands", className: styles.iconEnd, iconSize: "1.25x", padding: "roomy" })
+  ] }) });
+};
+export {
+  CreditCardNumberField,
+  CreditCardNumberField as default
+};
+//# sourceMappingURL=CreditCardNumberField.js.map

package/dist/components/CreditCardNumberField/CreditCardNumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditCardNumberField.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/CreditCardNumberField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './CreditCardNumberField';

package/dist/components/CreditCardNumberField/index.js

@@ -0,0 +1,5 @@
+import { CreditCardNumberField } from "./CreditCardNumberField.js";
+export {
+  CreditCardNumberField as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/CreditCardNumberField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/DateField/DateField.d.ts

@@ -1,25 +1,5 @@
-import { DateFieldProps as AriaDateFieldProps, DateValue, ValidationResult } from 'react-aria-components';
-export interface DateFieldProps extends AriaDateFieldProps<DateValue> {
-    /**
-     * The label for the TextField
-     */
-    label?: string;
-    /**
-     * The description for the TextField
-     */
-    description?: string;
-    /**
-     * The error message for the TextField
-     */
-    errorMessage?: string | ((validation: ValidationResult) => string);
-    /**
-     * Whether the TextField is disabled
-     */
-    isDisabled?: boolean;
-    /**
-     * Whether the TextField is invalid
-     */
-    isInvalid?: boolean;
-}
-export declare const DateField: ({ label, description, errorMessage, isRequired, isInvalid, isDisabled, value, ...props }: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
+import { DateFieldProps as AriaDateFieldProps, DateValue } from 'react-aria-components';
+import { FieldProps } from '../_base/Field/Field';
+export type DateFieldProps = FieldProps<AriaDateFieldProps<DateValue>>;
+export declare const DateField: (props: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default DateField;

package/dist/components/DateField/DateField.js

@@ -1,28 +1,16 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { DateField as DateField$1, DateInput, DateSegment } from "react-aria-components";
-import { FieldHeader } from "../FieldHeader/FieldHeader.js";
-import '../../assets/DateField.css';const dateField = "_dateField_1mc0h_1";
-const dateInput = "_dateInput_1mc0h_5";
-const dateSegment = "_dateSegment_1mc0h_48";
+import { Field } from "../_base/Field/Field.js";
+import '../../assets/DateField.css';const dateField = "_dateField_1bpet_1";
+const dateInput = "_dateInput_1bpet_5";
+const dateSegment = "_dateSegment_1bpet_50";
 const styles = {
   dateField,
   dateInput,
   dateSegment
 };
-const DateField = ({
-  label,
-  description,
-  errorMessage,
-  isRequired = false,
-  isInvalid = false,
-  isDisabled = false,
-  value,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxs(DateField$1, { className: styles.dateField, isInvalid, isDisabled, value, ...props, children: [
-    /* @__PURE__ */ jsx(FieldHeader, { label, description, errorMessage, isRequired, isInvalid }),
-    /* @__PURE__ */ jsx(DateInput, { className: styles.dateInput, children: (segment) => /* @__PURE__ */ jsx(DateSegment, { className: styles.dateSegment, segment }) })
-  ] });
+const DateField = (props) => {
+  return /* @__PURE__ */ jsx(Field, { as: DateField$1, className: styles.dateField, ...props, children: /* @__PURE__ */ jsx(DateInput, { className: styles.dateInput, children: (segment) => /* @__PURE__ */ jsx(DateSegment, { className: styles.dateSegment, segment }) }) });
 };
 export {
   DateField,

package/dist/components/DateField/DateField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateField.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DateField.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/components/DetailsDisclosure/DetailsDisclosure.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+import { DisclosureProps as AriaDisclosureProps, DisclosurePanelProps as AriaDisclosurePanelProps } from 'react-aria-components';
+interface DetailsDisclosureProps extends AriaDisclosureProps {
+    /**
+     * Whether the disclosure is expanded by default.
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Whether the disclosure is expanded (Controlled)
+     */
+    isExpanded?: boolean;
+    /**
+     * Callback function that is called when the disclosure is expanded or collapsed. (Controlled)
+     */
+    onExpandedChange?: (isExpanded: boolean) => void;
+    /**
+     * <DetailsDisclosure.Trigger> and <DetailsDisclosure.Panel> children.
+     */
+    children?: React.ReactNode;
+}
+declare const DetailsDisclosure: {
+    ({ children, ...props }: DetailsDisclosureProps): import("react/jsx-runtime").JSX.Element;
+    Summary: {
+        ({ children, }: Pick<DetailsDisclosureProps, "children">): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Details: {
+        ({ children, ...props }: AriaDisclosurePanelProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export type { DetailsDisclosureProps };
+export default DetailsDisclosure;

package/dist/components/DetailsDisclosure/DetailsDisclosure.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Disclosure, Button, DisclosurePanel } from "react-aria-components";
+import { Icon } from "../Icon/Icon.js";
+import '../../assets/DetailsDisclosure.css';const detailsDisclosure = "_detailsDisclosure_9jcud_1";
+const detailsDisclosureIcon = "_detailsDisclosureIcon_9jcud_8";
+const detailsDisclosureDetails = "_detailsDisclosureDetails_9jcud_40";
+const styles = {
+  detailsDisclosure,
+  detailsDisclosureIcon,
+  detailsDisclosureDetails
+};
+const DetailsDisclosureSummary = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsxs(Button, { slot: "trigger", children: [
+    /* @__PURE__ */ jsx(Icon, { className: styles["detailsDisclosureIcon"], iconName: "caret-right", iconPrefix: "fas", ariaLabel: "Open disclosure" }),
+    children
+  ] });
+};
+DetailsDisclosureSummary.displayName = "DetailsDisclosure.Summary";
+const DetailsDisclosureDetails = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(DisclosurePanel, { className: styles["detailsDisclosureDetails"], ...props, children });
+};
+DetailsDisclosureDetails.displayName = "DetailsDisclosure.Details";
+const DetailsDisclosure = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(Disclosure, { className: styles["detailsDisclosure"], ...props, children });
+};
+DetailsDisclosure.Summary = DetailsDisclosureSummary;
+DetailsDisclosure.Details = DetailsDisclosureDetails;
+export {
+  DetailsDisclosure as default
+};
+//# sourceMappingURL=DetailsDisclosure.js.map

package/dist/components/DetailsDisclosure/DetailsDisclosure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsDisclosure.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DetailsDisclosure/index.d.ts

@@ -0,0 +1,2 @@
+export type { DetailsDisclosureProps } from './DetailsDisclosure';
+export { default } from './DetailsDisclosure';

package/dist/components/DetailsDisclosure/index.js

@@ -0,0 +1,5 @@
+import { default as default2 } from "./DetailsDisclosure.js";
+export {
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/DetailsDisclosure/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+import { AriaDialogProps } from 'react-aria';
+export type DialogSize = 'dialogSmall' | 'dialogMedium' | 'dialogLarge';
+export type DialogRole = 'alertdialog' | 'dialog';
+export interface DialogProps extends AriaDialogProps {
+    /** Whether the dialog is currently visible */
+    isOpen?: boolean;
+    /** Callback function when dialog is requested to close */
+    onClose?: () => void;
+    /** Width variant of the dialog - affects max-width */
+    size?: DialogSize;
+    /** Whether clicking outside or escape key should be blocked */
+    modal?: boolean;
+    /** Shows/hides the close (X) button in header */
+    hasDismissButton?: boolean;
+    /** ARIA role - use 'alertdialog' for important messages */
+    role?: DialogRole;
+    /** Required unique ID for the dialog */
+    id?: string;
+    /** ID of element labeling the dialog (required for a11y) */
+    'aria-describedby'?: string;
+    /** ID of element describing the dialog (optional but recommended) */
+    'aria-labelledby'?: string;
+}
+export interface DialogComposition {
+    Header: typeof DialogHeader;
+    Content: typeof DialogContent;
+}
+declare const DialogHeader: ({ id, children, }: {
+    children: React.ReactNode;
+    id?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare function Dialog(props: React.PropsWithChildren<DialogProps>): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace Dialog {
+    var Header: ({ id, children, }: {
+        children: React.ReactNode;
+        id?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var Content: ({ children }: {
+        children: React.ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+}
+export declare const DialogContent: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Dialog;

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,117 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useRef } from "react";
+import { IconButton } from "../IconButton/IconButton.js";
+import { OverlayContainer, useOverlay, usePreventScroll, useModal } from "@react-aria/overlays";
+import { useDialog } from "@react-aria/dialog";
+import { FocusScope } from "@react-aria/focus";
+import '../../assets/Dialog.css';const dialogWrapper = "_dialogWrapper_o29gm_1";
+const overlay = "_overlay_o29gm_10";
+const dialog = "_dialog_o29gm_1";
+const dialogContent = "_dialogContent_o29gm_47";
+const dialogHeading = "_dialogHeading_o29gm_54";
+const dialogContentInner = "_dialogContentInner_o29gm_58";
+const noHeader = "_noHeader_o29gm_64";
+const closeButton = "_closeButton_o29gm_68";
+const dialogSmall = "_dialogSmall_o29gm_94";
+const dialogMedium = "_dialogMedium_o29gm_98";
+const dialogLarge = "_dialogLarge_o29gm_102";
+const styles = {
+  dialogWrapper,
+  overlay,
+  dialog,
+  dialogContent,
+  dialogHeading,
+  dialogContentInner,
+  noHeader,
+  closeButton,
+  dialogSmall,
+  dialogMedium,
+  dialogLarge
+};
+const DialogHeader = ({
+  /** ID used to reference this header for aria-labelledby */
+  id,
+  /** Content of the header section */
+  children
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: styles.dialogHeading, id, children });
+};
+function DialogWrapper({
+  children,
+  ...props
+}) {
+  const {
+    onClose,
+    size = "medium",
+    modal = false,
+    hasDismissButton = true,
+    role = "dialog",
+    id
+  } = props;
+  const ref = useRef(null);
+  const {
+    dialogProps
+  } = useDialog({
+    ...props,
+    role
+  }, ref);
+  const {
+    overlayProps,
+    underlayProps
+  } = useOverlay({
+    isOpen: true,
+    onClose,
+    isDismissable: true,
+    ...props
+  }, ref);
+  usePreventScroll();
+  const {
+    modalProps
+  } = useModal();
+  const headerChild = React.Children.toArray(children).find((child) => React.isValidElement(child) && child.type === DialogHeader);
+  const otherChildren = React.Children.toArray(children).filter((child) => !React.isValidElement(child) || child.type !== DialogHeader);
+  const hasHeader = Boolean(headerChild) || hasDismissButton;
+  const headerId = props["aria-labelledby"] || `${id}-header`;
+  const contentId = props["aria-describedby"] || `${id}-content`;
+  return /* @__PURE__ */ jsxs("div", { className: `${styles.dialogWrapper} ${modal ? styles.modal : ""}`, children: [
+    modal && /* @__PURE__ */ jsx("div", { className: styles.overlay, ...underlayProps, onClick: onClose, onKeyDown: (e) => {
+      if (e.key === "Enter" || e.key === "Space") {
+        onClose == null ? void 0 : onClose();
+      }
+    }, role: "button", tabIndex: 0 }),
+    /* @__PURE__ */ jsx(FocusScope, { contain: true, restoreFocus: true, autoFocus: false, children: /* @__PURE__ */ jsxs("div", { ...overlayProps, ...dialogProps, ...modalProps, ref, className: `${styles.dialog} ${styles[size]}`, "data-size": size, id, role, "aria-labelledby": headerId, "aria-describedby": contentId, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${styles.dialogContent} ${!hasHeader ? styles.noHeader : ""}`, children: [
+        hasHeader && /* @__PURE__ */ jsx("div", { className: styles.dialogHeader, id: headerId, children: headerChild }),
+        /* @__PURE__ */ jsx("div", { id: contentId, children: otherChildren })
+      ] }),
+      hasDismissButton && /* @__PURE__ */ jsx("div", { className: styles.closeButton, children: /* @__PURE__ */ jsx(IconButton, { onClick: onClose, styleVariant: "white", emphasis: "primary", size: "sm", iconProps: {
+        iconName: "close",
+        iconPrefix: "far",
+        iconSize: "1x"
+      }, tooltipLabel: "Close dialog", "aria-label": "Close dialog" }) })
+    ] }) })
+  ] });
+}
+function Dialog(props) {
+  const {
+    isOpen,
+    children
+  } = props;
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(OverlayContainer, { children: /* @__PURE__ */ jsx(DialogWrapper, { ...props, children }) });
+}
+const DialogContent = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: styles.dialogContentInner, children });
+};
+Dialog.Header = DialogHeader;
+Dialog.Content = DialogContent;
+export {
+  Dialog,
+  DialogContent,
+  Dialog as default
+};
+//# sourceMappingURL=Dialog.js.map

package/dist/components/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Dialog/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Dialog';

package/dist/components/Dialog/index.js

@@ -0,0 +1,5 @@
+import { Dialog } from "./Dialog.js";
+export {
+  Dialog as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/FieldError/FieldError.d.ts

@@ -2,5 +2,5 @@ import { FieldErrorProps as AriaFieldErrorProps } from 'react-aria-components';
 export interface FieldErrorProps extends AriaFieldErrorProps {
     children?: React.ReactNode | any;
 }
-export declare const FieldError: ({ children, ...props }: FieldErrorProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const FieldError: ({ children, ...props }: FieldErrorProps) => import("react/jsx-runtime").JSX.Element;
 export default FieldError;

package/dist/components/FieldError/FieldError.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { FieldError as FieldError$1 } from "react-aria-components";
 import { Icon } from "../Icon/Icon.js";
 import '../../assets/FieldError.css';const fieldError = "_fieldError_1tsix_1";
@@ -9,13 +9,16 @@ const FieldError = ({
   children,
   ...props
 }) => {
-  if (!children) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(FieldError$1, { className: styles.fieldError, ...props, children: [
-    /* @__PURE__ */ jsx(Icon, { iconName: "triangle-exclamation", "aria-label": "error-icon" }),
-    children
-  ] });
+  return /* @__PURE__ */ jsx(FieldError$1, { className: styles.fieldError, ...props, children: ({
+    validationErrors
+  }) => {
+    const errorMessage = children || (validationErrors == null ? void 0 : validationErrors[0]);
+    if (!errorMessage) return null;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Icon, { iconName: "triangle-exclamation", iconPrefix: "fas", "aria-label": "error-icon" }),
+      errorMessage
+    ] });
+  } });
 };
 export {
   FieldError,

package/dist/components/FieldError/FieldError.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldError.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FieldError.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/FieldHeader/index.d.ts

@@ -1 +1,2 @@
 export { default } from './FieldHeader';
+export type { FieldHeaderProps } from './FieldHeader';

package/dist/components/Fieldset/Fieldset.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { FieldsetHeaderProps } from '../FieldsetHeader/FieldsetHeader';
+export interface FieldsetProps {
+    children?: React.ReactNode;
+}
+declare const Fieldset: {
+    ({ children }: FieldsetProps): import("react/jsx-runtime").JSX.Element;
+    Content: {
+        ({ children }: FieldsetContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Header: ({ children, description, }: FieldsetHeaderProps) => import("react/jsx-runtime").JSX.Element;
+};
+export interface FieldsetContentProps {
+    children?: React.ReactNode;
+}
+export type { FieldsetHeaderProps };
+export default Fieldset;

package/dist/components/Fieldset/Fieldset.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { FieldsetHeader } from "../FieldsetHeader/FieldsetHeader.js";
+import { Box } from "../Box/Box.js";
+import '../../assets/Fieldset.css';const fieldset = "_fieldset_11lio_1";
+const styles = {
+  fieldset
+};
+const Fieldset = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx("fieldset", { className: styles.fieldset, children });
+};
+const Content = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx(Box, { flexDirection: "column", gap: "sm", width: "100%", children });
+};
+Content.displayName = "Fieldset.Content";
+Fieldset.Content = Content;
+Fieldset.Header = FieldsetHeader;
+export {
+  Fieldset as default
+};
+//# sourceMappingURL=Fieldset.js.map

package/dist/components/Fieldset/Fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Fieldset/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Fieldset';
+export type { FieldsetProps, FieldsetHeaderProps, FieldsetContentProps, } from './Fieldset';

package/dist/components/Fieldset/index.js

@@ -0,0 +1,5 @@
+import { default as default2 } from "./Fieldset.js";
+export {
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/FieldsetHeader/FieldsetHeader.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface FieldsetHeaderProps {
+    children?: React.ReactNode;
+    description?: React.ReactNode;
+}
+export declare const FieldsetHeader: ({ children, description, }: FieldsetHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default FieldsetHeader;

package/dist/components/FieldsetHeader/FieldsetHeader.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Heading } from "../Heading/Heading.js";
+import '../../assets/FieldsetHeader.css';const fieldsetHeader = "_fieldsetHeader_6pt1c_1";
+const styles = {
+  fieldsetHeader,
+  "fieldsetHeader-description": "_fieldsetHeader-description_6pt1c_12"
+};
+const FieldsetHeader = ({
+  children,
+  description
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: styles["fieldsetHeader"], children: [
+    /* @__PURE__ */ jsx(Heading, { as: "legend", size: "sm", foregroundColor: "accentSecondary", children }),
+    description && /* @__PURE__ */ jsx("span", { className: styles["fieldsetHeader-description"], children: description })
+  ] });
+};
+export {
+  FieldsetHeader,
+  FieldsetHeader as default
+};
+//# sourceMappingURL=FieldsetHeader.js.map

package/dist/components/FieldsetHeader/FieldsetHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldsetHeader.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/components/FieldsetHeader/index.d.ts

@@ -0,0 +1 @@
+export { default } from './FieldsetHeader';

package/dist/components/FieldsetHeader/index.js

@@ -0,0 +1,5 @@
+import { FieldsetHeader } from "./FieldsetHeader.js";
+export {
+  FieldsetHeader as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/FieldsetHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}