@alto-avios/alto-ui 3.0.0 → 3.2.0

package/dist/components/Menu/Menu.js

@@ -0,0 +1,356 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, useState, useRef, useEffect } from "react";
+import { Button } from "../Button/Button.js";
+import { Popover } from "../Popover/Popover.js";
+import '../../assets/Menu.css';const menuContainer = "_menuContainer_qw7ps_1";
+const menuContent = "_menuContent_qw7ps_6";
+const styles = {
+  menuContainer,
+  menuContent
+};
+const menuRegistry = {
+  activeMenuId: null,
+  setActiveMenu: (id) => {
+    menuRegistry.activeMenuId = id;
+  },
+  getActiveMenu: () => menuRegistry.activeMenuId
+};
+const Menu = ({
+  label,
+  "aria-label": ariaLabel,
+  isDisabled = false,
+  placement = "bottom start",
+  buttonEmphasis = "tertiary",
+  buttonStyleVariant = "neutral",
+  buttonOpenVariant = buttonStyleVariant,
+  alignToElementId,
+  shouldFlip = false,
+  openOnHoverAndFocus = false,
+  allowTabOut = true,
+  children,
+  iconStartProps,
+  iconEndProps
+}) => {
+  const uniqueId = useId();
+  const menuId = `menu-${uniqueId}`;
+  const [isOpen, setIsOpen] = useState(false);
+  const [preventFocusOpen, setPreventFocusOpen] = useState(false);
+  const [openedViaKeyboard, setOpenedViaKeyboard] = useState(false);
+  const buttonRef = useRef(null);
+  const containerRef = useRef(null);
+  const menuRef = useRef(null);
+  const currentStyleVariant = isOpen ? buttonOpenVariant : buttonStyleVariant;
+  const getAlignmentTarget = () => {
+    if (alignToElementId) {
+      const targetElement = document.getElementById(alignToElementId);
+      if (targetElement) {
+        return {
+          current: targetElement
+        };
+      }
+    }
+    return buttonRef;
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape" && isOpen) {
+      e.preventDefault();
+      menuRegistry.setActiveMenu(null);
+      setIsOpen(false);
+      setPreventFocusOpen(true);
+      setTimeout(() => {
+        setPreventFocusOpen(false);
+      }, 300);
+    } else if (e.key === "ArrowDown" && !isOpen) {
+      e.preventDefault();
+      if (menuRegistry.getActiveMenu() && menuRegistry.getActiveMenu() !== menuId) {
+        document.dispatchEvent(new CustomEvent("menu:closeAll", {
+          detail: {
+            exceptMenuId: menuId
+          }
+        }));
+      }
+      menuRegistry.setActiveMenu(menuId);
+      setIsOpen(true);
+      setOpenedViaKeyboard(true);
+    }
+  };
+  const closeMenu = () => {
+    menuRegistry.setActiveMenu(null);
+    setIsOpen(false);
+    setPreventFocusOpen(true);
+    setTimeout(() => {
+      setPreventFocusOpen(false);
+    }, 300);
+  };
+  const toggleMenu = () => {
+    const isKeyboardFocused = document.activeElement === buttonRef.current;
+    setOpenedViaKeyboard(isKeyboardFocused);
+    if (isDisabled) return;
+    if (!isOpen) {
+      if (menuRegistry.getActiveMenu() && menuRegistry.getActiveMenu() !== menuId) {
+        document.dispatchEvent(new CustomEvent("menu:closeAll", {
+          detail: {
+            exceptMenuId: menuId
+          }
+        }));
+      }
+      menuRegistry.setActiveMenu(menuId);
+      setIsOpen(true);
+    } else {
+      menuRegistry.setActiveMenu(null);
+      setIsOpen(false);
+    }
+  };
+  useEffect(() => {
+    const handleCloseAll = (e) => {
+      const {
+        exceptMenuId
+      } = e.detail || {};
+      if (exceptMenuId && exceptMenuId === menuId) {
+        return;
+      }
+      if (isOpen) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("menu:closeAll", handleCloseAll);
+    return () => {
+      document.removeEventListener("menu:closeAll", handleCloseAll);
+    };
+  }, [menuId, isOpen]);
+  useEffect(() => {
+    const isActive = menuRegistry.getActiveMenu() === menuId;
+    if (isActive !== isOpen) {
+      setIsOpen(isActive);
+    }
+  }, [menuId, isOpen]);
+  const findNextFocusableElement = (startElement) => {
+    const focusableElements = Array.from(document.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'));
+    const startIndex = focusableElements.indexOf(startElement);
+    return startIndex !== -1 && startIndex < focusableElements.length - 1 ? focusableElements[startIndex + 1] : focusableElements[0];
+  };
+  const handleMenuKeyDown = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      closeMenu();
+      if (buttonRef.current) {
+        buttonRef.current.focus();
+      }
+      return;
+    }
+    if (e.key === "Tab" && allowTabOut) {
+      e.preventDefault();
+      const triggerElement = buttonRef.current;
+      if (triggerElement) {
+        const nextElement = findNextFocusableElement(triggerElement);
+        closeMenu();
+        setTimeout(() => {
+          if (nextElement) {
+            nextElement.focus();
+          }
+        }, 10);
+      } else {
+        closeMenu();
+      }
+      return;
+    }
+    if (!menuRef.current) return;
+    const focusableElements = Array.from(menuRef.current.querySelectorAll('[role="menuitem"], a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'));
+    if (focusableElements.length === 0) return;
+    const focusedElement = document.activeElement;
+    const currentIndex = focusableElements.indexOf(focusedElement);
+    if (e.key === "ArrowDown" && currentIndex < focusableElements.length - 1) {
+      e.preventDefault();
+      focusableElements[currentIndex + 1].focus();
+    } else if (e.key === "ArrowUp" && currentIndex > 0) {
+      e.preventDefault();
+      focusableElements[currentIndex - 1].focus();
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      focusableElements[0].focus();
+    } else if (e.key === "End") {
+      e.preventDefault();
+      focusableElements[focusableElements.length - 1].focus();
+    }
+  };
+  useEffect(() => {
+    if (isOpen && openedViaKeyboard && menuRef.current) {
+      const focusableElements = menuRef.current.querySelectorAll('[role="menuitem"], a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])');
+      if (focusableElements.length > 0) {
+        setTimeout(() => {
+          focusableElements[0].focus();
+        }, 50);
+      }
+    }
+  }, [isOpen, openedViaKeyboard]);
+  useEffect(() => {
+    if (!openOnHoverAndFocus || isDisabled) return;
+    let hoverTimeout = null;
+    const handleMouseEnter = () => {
+      if (hoverTimeout) {
+        clearTimeout(hoverTimeout);
+      }
+      hoverTimeout = setTimeout(() => {
+        if (menuRegistry.getActiveMenu() && menuRegistry.getActiveMenu() !== menuId) {
+          document.dispatchEvent(new CustomEvent("menu:closeAll", {
+            detail: {
+              exceptMenuId: menuId
+            }
+          }));
+        }
+        setOpenedViaKeyboard(false);
+        menuRegistry.setActiveMenu(menuId);
+        setIsOpen(true);
+      }, 300);
+    };
+    const handleMouseLeave = () => {
+      if (hoverTimeout) {
+        clearTimeout(hoverTimeout);
+      }
+      hoverTimeout = setTimeout(() => {
+        if (menuRegistry.getActiveMenu() === menuId) {
+          menuRegistry.setActiveMenu(null);
+        }
+        setIsOpen(false);
+      }, 300);
+    };
+    const buttonElement = buttonRef.current;
+    if (buttonElement) {
+      buttonElement.addEventListener("mouseenter", handleMouseEnter);
+      buttonElement.addEventListener("mouseleave", handleMouseLeave);
+    }
+    return () => {
+      if (buttonElement) {
+        buttonElement.removeEventListener("mouseenter", handleMouseEnter);
+        buttonElement.removeEventListener("mouseleave", handleMouseLeave);
+      }
+      if (hoverTimeout) {
+        clearTimeout(hoverTimeout);
+      }
+    };
+  }, [openOnHoverAndFocus, isDisabled, menuId]);
+  useEffect(() => {
+    if (!openOnHoverAndFocus || isDisabled) return;
+    const buttonElement = buttonRef.current;
+    if (!buttonElement) return;
+    let focusTimeout = null;
+    let isMenuOpening = false;
+    const handleFocus = () => {
+      if (preventFocusOpen) return;
+      if (focusTimeout) {
+        clearTimeout(focusTimeout);
+      }
+      isMenuOpening = true;
+      focusTimeout = setTimeout(() => {
+        if (menuRegistry.getActiveMenu() && menuRegistry.getActiveMenu() !== menuId) {
+          document.dispatchEvent(new CustomEvent("menu:closeAll", {
+            detail: {
+              exceptMenuId: menuId
+            }
+          }));
+        }
+        const activeElement = document.activeElement;
+        const wasFocusedByKeyboard = activeElement === buttonElement && document.activeElement !== document.body;
+        setOpenedViaKeyboard(wasFocusedByKeyboard);
+        menuRegistry.setActiveMenu(menuId);
+        setIsOpen(true);
+        setTimeout(() => {
+          isMenuOpening = false;
+        }, 500);
+      }, 300);
+    };
+    const handleBlur = (e) => {
+      if (isMenuOpening) return;
+      if (focusTimeout) {
+        clearTimeout(focusTimeout);
+      }
+      const containerElement = containerRef.current;
+      const relatedTarget = e.relatedTarget;
+      if (containerElement && !containerElement.contains(relatedTarget)) {
+        focusTimeout = setTimeout(() => {
+          if (menuRegistry.getActiveMenu() === menuId) {
+            menuRegistry.setActiveMenu(null);
+          }
+          setIsOpen(false);
+        }, 200);
+      }
+    };
+    buttonElement.addEventListener("focus", handleFocus);
+    buttonElement.addEventListener("blur", handleBlur);
+    return () => {
+      buttonElement.removeEventListener("focus", handleFocus);
+      buttonElement.removeEventListener("blur", handleBlur);
+      if (focusTimeout) {
+        clearTimeout(focusTimeout);
+      }
+    };
+  }, [openOnHoverAndFocus, isDisabled, preventFocusOpen, menuId]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleOutsideClick = (e) => {
+      const container = containerRef.current;
+      if (container && !container.contains(e.target)) {
+        if (menuRegistry.getActiveMenu() === menuId) {
+          menuRegistry.setActiveMenu(null);
+        }
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleOutsideClick);
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+    };
+  }, [isOpen, menuId]);
+  useEffect(() => {
+    if (!isOpen) {
+      setOpenedViaKeyboard(false);
+    }
+  }, [isOpen]);
+  const menuTriggerState = {
+    isOpen,
+    open: () => {
+      if (menuRegistry.getActiveMenu() && menuRegistry.getActiveMenu() !== menuId) {
+        document.dispatchEvent(new CustomEvent("menu:closeAll", {
+          detail: {
+            exceptMenuId: menuId
+          }
+        }));
+      }
+      menuRegistry.setActiveMenu(menuId);
+      setIsOpen(true);
+    },
+    close: closeMenu,
+    toggle: () => toggleMenu(),
+    setOpen: (open) => {
+      if (open) {
+        if (menuRegistry.getActiveMenu() && menuRegistry.getActiveMenu() !== menuId) {
+          document.dispatchEvent(new CustomEvent("menu:closeAll", {
+            detail: {
+              exceptMenuId: menuId
+            }
+          }));
+        }
+        menuRegistry.setActiveMenu(menuId);
+      } else {
+        if (menuRegistry.getActiveMenu() === menuId) {
+          menuRegistry.setActiveMenu(null);
+        }
+      }
+      setIsOpen(open);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.menuContainer, ref: containerRef, children: [
+    /* @__PURE__ */ jsx(Button, { ref: buttonRef, emphasis: buttonEmphasis, styleVariant: currentStyleVariant, isDisabled, onPress: () => {
+      setPreventFocusOpen(false);
+      const isKeyboardFocused = document.activeElement === buttonRef.current;
+      setOpenedViaKeyboard(isKeyboardFocused);
+      toggleMenu();
+    }, onKeyDown: handleKeyDown, "aria-haspopup": "true", "aria-expanded": isOpen, iconStartProps, iconEndProps, children: label }),
+    isOpen && /* @__PURE__ */ jsx(Popover, { state: menuTriggerState, triggerRef: getAlignmentTarget(), hasArrow: false, placement, shouldFlip, isNonModal: true, allowTabOut, autoFocus: openedViaKeyboard, children: /* @__PURE__ */ jsx("div", { className: styles.menuContent, ref: menuRef, onKeyDown: handleMenuKeyDown, role: "menu", "aria-label": ariaLabel || label, tabIndex: -1, children }) })
+  ] });
+};
+export {
+  Menu,
+  Menu as default
+};
+//# sourceMappingURL=Menu.js.map

package/dist/components/Menu/Menu.js.map

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

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

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

package/dist/components/Menu/index.js

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

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

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

package/dist/components/Paragraph/Paragraph.d.ts

@@ -1,12 +1,11 @@
 import { default as React } from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { fgColorVariants } from '../../utils/fgColour/fgColor';
+import { ForegroundVariants } from '../../utils/foregroundColour/foregroundColor';
 declare const paragraph: (props?: ({
     size?: "lg" | "sm" | "xs" | "md" | null | undefined;
-    textAlign?: "end" | "start" | "center" | null | undefined;
+    textAlign?: "center" | "end" | "start" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type ParagraphVariants = VariantProps<typeof paragraph>;
-type FgColorVariants = VariantProps<typeof fgColorVariants>;
 type ParagraphSize = 'xs' | 'sm' | 'md' | 'lg';
 export interface ParagraphProps extends ParagraphVariants {
     children: React.ReactNode;
@@ -19,12 +18,17 @@ export interface ParagraphProps extends ParagraphVariants {
      * The foreground color of the paragraph
      * @default "secondary"
      */
-    fgColor?: FgColorVariants['fgColor'];
+    foregroundColor?: ForegroundVariants['foregroundColor'];
+    /**
+     * The foreground color of the paragraph
+     * @deprecated Use `foregroundColor` instead
+     */
+    fgColor?: ForegroundVariants['foregroundColor'];
     /**
      * The text alignment of the paragraph
      * @default "start"
      */
     textAlign?: 'start' | 'center' | 'end';
 }
-export declare const Paragraph: ({ children, size, fgColor, textAlign, ...props }: ParagraphProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Paragraph: ({ children, size, foregroundColor, fgColor, textAlign, ...props }: ParagraphProps) => import("react/jsx-runtime").JSX.Element;
 export default Paragraph;

package/dist/components/Paragraph/Paragraph.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
-import { fgColorVariants } from "../../utils/fgColour/fgColor.js";
+import { foregroundColorVariants } from "../../utils/foregroundColour/foregroundColor.js";
 import '../../assets/Paragraph.css';const paragraph$1 = "_paragraph_odu3c_1";
 const xs = "_xs_odu3c_9";
 const sm = "_sm_odu3c_15";
@@ -41,15 +41,20 @@ const paragraph = cva(styles.paragraph, {
 const Paragraph = ({
   children,
   size = "md",
-  fgColor = "secondary",
+  foregroundColor = "secondary",
+  fgColor,
   textAlign = "start",
   ...props
 }) => {
+  if (fgColor) {
+    console.warn("The `fgColor` prop has been deprecated. Please use `foregroundColor` instead.");
+  }
+  const resolvedFontColor = fgColor ?? foregroundColor ?? "secondary";
   return /* @__PURE__ */ jsx("p", { className: `${paragraph({
     size,
     textAlign
-  })} ${fgColorVariants({
-    fgColor
+  })} ${foregroundColorVariants({
+    foregroundColor: resolvedFontColor
   })}`, ...props, children });
 };
 export {

package/dist/components/Paragraph/Paragraph.js.map

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

package/dist/components/PasswordField/PasswordField.d.ts

@@ -0,0 +1,30 @@
+import { FieldProps } from '../_base/Field';
+import { TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
+type PasswordStrengthValidation = {
+    message: string;
+    validation: (value?: string) => boolean;
+};
+export interface PasswordFieldProps extends FieldProps<AriaTextFieldProps> {
+    /**
+     * Whether the password input value revealed or not.
+     */
+    isVisible?: boolean;
+    /**
+     * The strength validations to be applied to the password input value.
+     */
+    strengthValidations?: PasswordStrengthValidation[];
+    /**
+     * Tooltip label to show password
+     */
+    tooltipLabelShowPassword?: string;
+    /**
+     * Tooltip label to hide password
+     */
+    tooltipLabelHidePassword?: string;
+    /**
+     * Label for the password requirements.
+     */
+    requirementsLabel?: string;
+}
+export declare const PasswordField: ({ tooltipLabelShowPassword, tooltipLabelHidePassword, requirementsLabel, ...props }: PasswordFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default PasswordField;

package/dist/components/PasswordField/PasswordField.js

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Field } from "../_base/Field/Field.js";
+import { TextField, Group, Input } from "react-aria-components";
+import { IconButton } from "../IconButton/IconButton.js";
+import { c as cva } from "../../index-Bi3v_EjJ.js";
+import { Icon } from "../Icon/Icon.js";
+import '../../assets/PasswordField.css';const passwordField = "_passwordField_esslh_1";
+const passwordField__strength = "_passwordField__strength_esslh_10";
+const passwordStrengthItem$1 = "_passwordStrengthItem_esslh_88";
+const passwordStrengthItemValid = "_passwordStrengthItemValid_esslh_98";
+const passwordStrengthItemNeutral = "_passwordStrengthItemNeutral_esslh_102";
+const passwordStrengthItemInvalid = "_passwordStrengthItemInvalid_esslh_106";
+const styles = {
+  passwordField,
+  passwordField__strength,
+  passwordStrengthItem: passwordStrengthItem$1,
+  passwordStrengthItemValid,
+  passwordStrengthItemNeutral,
+  passwordStrengthItemInvalid
+};
+const PasswordField = ({
+  tooltipLabelShowPassword = "Show Password",
+  tooltipLabelHidePassword = "Hide Password",
+  requirementsLabel = "Password requirements",
+  ...props
+}) => {
+  var _a;
+  const [internalVisible, setInternalVisible] = useState(props.isVisible || false);
+  const [internalValue, setInternalValue] = useState(props == null ? void 0 : props.defaultValue);
+  const value = (props == null ? void 0 : props.value) ?? internalValue;
+  const isVisibleState = (props == null ? void 0 : props.isVisible) ?? internalVisible;
+  const handleChange = React.useCallback((e) => {
+    var _a2;
+    setInternalValue(e.target.value);
+    (_a2 = props == null ? void 0 : props.onChange) == null ? void 0 : _a2.call(props, e.target.value);
+  }, [props == null ? void 0 : props.onChange]);
+  const tooltipLabel = isVisibleState ? tooltipLabelHidePassword : tooltipLabelShowPassword;
+  return /* @__PURE__ */ jsx("div", { className: styles["passwordField"], children: /* @__PURE__ */ jsxs(Field, { as: TextField, className: styles.passwordField, label: "Password", ...props, children: [
+    /* @__PURE__ */ jsxs(Group, { children: [
+      /* @__PURE__ */ jsx(Input, { type: isVisibleState ? "text" : "password", value, onChange: handleChange }),
+      /* @__PURE__ */ jsx(IconButton, { size: "sm", iconProps: isVisibleState ? {
+        iconName: "eye",
+        iconPrefix: "fas"
+      } : {
+        iconName: "eye-slash",
+        iconPrefix: "fas"
+      }, onClick: () => setInternalVisible(!isVisibleState), isDisabled: props == null ? void 0 : props.isDisabled, styleVariant: "neutral", emphasis: "tertiary", "aria-label": tooltipLabel, tooltipLabel })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: styles["passwordField__strength"], "aria-label": requirementsLabel, "aria-live": "polite", children: (_a = props.strengthValidations) == null ? void 0 : _a.map((validation) => /* @__PURE__ */ jsx(PasswordStrengthItem, { status: value ? validation.validation(value) ? "valid" : "invalid" : "neutral", message: validation.message }, `${validation.message}-${value}`)) })
+  ] }) });
+};
+const passwordStrengthItem = cva(styles.passwordStrengthItem, {
+  variants: {
+    status: {
+      valid: styles.passwordStrengthItemValid,
+      neutral: styles.passwordStrengthItemNeutral,
+      invalid: styles.passwordStrengthItemInvalid
+    }
+  },
+  defaultVariants: {
+    status: "neutral"
+  }
+});
+function getIcon(status) {
+  switch (status) {
+    case "invalid":
+      return {
+        iconName: "circle-xmark",
+        ariaLabel: "Requirement not met: "
+      };
+    case "valid":
+      return {
+        iconName: "circle-check",
+        ariaLabel: "Requirement met: "
+      };
+    case "neutral":
+    default:
+      return {
+        iconName: "circle-minus",
+        ariaLabel: "Requirement: "
+      };
+  }
+}
+const PasswordStrengthItem = ({
+  status,
+  message
+}) => {
+  const {
+    iconName,
+    ariaLabel
+  } = getIcon(status);
+  return /* @__PURE__ */ jsxs("li", { className: passwordStrengthItem({
+    status
+  }), "aria-label": `${ariaLabel}${message}`, children: [
+    /* @__PURE__ */ jsx(Icon, { iconName, iconPrefix: "fas" }),
+    /* @__PURE__ */ jsx("span", { children: message })
+  ] });
+};
+export {
+  PasswordField,
+  PasswordField as default
+};
+//# sourceMappingURL=PasswordField.js.map

package/dist/components/PasswordField/PasswordField.js.map

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

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

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

package/dist/components/PasswordField/index.js

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

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

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

package/dist/components/PhoneNumberField/PhoneNumberField.d.ts

@@ -0,0 +1,53 @@
+import { PhoneNumberFieldOption, PhoneNumberValue } from '../../utils/phoneNumber/phoneNumber';
+import { FieldProps } from '../_base/Field';
+export interface PhoneNumberFieldProps extends FieldProps {
+    /**
+     * Country code of the default phone number
+     */
+    defaultCountry?: string;
+    /**
+     * Whether to show the country select
+     */
+    hasCountrySelect?: boolean;
+    /**
+     * Limit selectable country codes
+     */
+    countryCodes?: string[];
+    /**
+     * Phone number options
+     * When undefined will use default options (all)
+     */
+    options?: PhoneNumberFieldOption[];
+    /**
+     * Handle phone number change
+     * Returns raw phone number without formatting
+     */
+    onChange?: (value: PhoneNumberValue) => void;
+    /**
+     * Controlled country code
+     */
+    countryCode?: string;
+    /**
+     * Controlled input value
+     */
+    value?: string;
+    /**
+     * Wether to format the phone number according to country pattern
+     */
+    isFormatted?: boolean;
+    /**
+     * Optional ID for the select element. If not provided, one will be generated.
+     */
+    id?: string;
+    /**
+     * The label for the country select
+     *
+     */
+    countrySelectLabel?: string;
+    /**
+     * The placeholder for the phone number input
+     */
+    placeholder?: string;
+}
+export declare const PhoneNumberField: ({ defaultCountry, hasCountrySelect, options, onChange, countryCode: countryCodeControlled, value: valueControlled, countryCodes, isFormatted, id: providedId, countrySelectLabel, label, ...props }: PhoneNumberFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default PhoneNumberField;