@alto-avios/alto-ui 3.8.0 → 4.0.0

package/dist/components/MonthYearField/MonthYearField.js

@@ -0,0 +1,332 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Field } from "../_base/Field/Field.js";
+import React__default, { forwardRef, useRef, useCallback, useImperativeHandle } from "react";
+import { Input } from "react-aria-components";
+import '../../assets/MonthYearField.css';const monthYearField = "_monthYearField_q5uwu_1";
+const inputsContainer = "_inputsContainer_q5uwu_10";
+const input = "_input_q5uwu_10";
+const separator = "_separator_q5uwu_117";
+const styles = {
+  monthYearField,
+  inputsContainer,
+  input,
+  separator
+};
+const VALID_MONTHS = Array.from({
+  length: 12
+}, (_, i) => i + 1);
+const formatMonth = (value) => {
+  if (!value) return "";
+  const num = parseInt(value, 10);
+  if (isNaN(num) || num < 1 || num > 12) return value;
+  return num.toString().padStart(2, "0");
+};
+const formatYear = (value, yearFormat = 2) => {
+  if (!value) return "";
+  const num = parseInt(value, 10);
+  if (isNaN(num)) return value;
+  if (yearFormat === 4) {
+    return Math.max(1e3, Math.min(9999, num)).toString();
+  } else {
+    const year = num % 100;
+    return year.toString().padStart(2, "0");
+  }
+};
+const convertTwoDigitYearToFour = (twoDigitYear) => {
+  if (!twoDigitYear) return "";
+  const num = parseInt(twoDigitYear, 10);
+  if (isNaN(num)) return twoDigitYear;
+  const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+  const currentCentury = Math.floor(currentYear / 100) * 100;
+  const currentTwoDigit = currentYear % 100;
+  if (num <= currentTwoDigit + 20) {
+    return (currentCentury + num).toString();
+  } else {
+    return (currentCentury - 100 + num).toString();
+  }
+};
+function FieldWrapper({
+  children,
+  className,
+  isDisabled,
+  isInvalid,
+  errorMessage
+}) {
+  return /* @__PURE__ */ jsx("div", { className, role: "group", ...isDisabled ? {
+    "data-disabled": true
+  } : {}, ...isInvalid || errorMessage ? {
+    "data-invalid": true
+  } : {}, children });
+}
+const MonthYearField = forwardRef((props, ref) => {
+  const {
+    monthValue: monthValueControlled,
+    yearValue: yearValueControlled,
+    yearFormat = 2,
+    onChange: onChangeControlled,
+    onFocus,
+    onBlur,
+    isDisabled = false,
+    isReadOnly = false,
+    isRequired = false,
+    autoCompleteMonth,
+    autoCompleteYear,
+    labelMonth = "Month",
+    labelYear = "Year",
+    placeholderMonth = "MM",
+    placeholderYear = yearFormat === 4 ? "YYYY" : "YY",
+    id: providedId,
+    name,
+    ...fieldProps
+  } = props;
+  const monthRef = useRef(null);
+  const yearRef = useRef(null);
+  const [monthValueInternal, setMonthValue] = React__default.useState(monthValueControlled ?? "");
+  const [yearValueInternal, setYearValue] = React__default.useState(yearValueControlled ?? "");
+  const monthValue = monthValueControlled ?? monthValueInternal;
+  const yearValue = yearValueControlled ?? yearValueInternal;
+  const uniqueId = React__default.useId();
+  const id = providedId || uniqueId;
+  const onChange = useCallback((value) => {
+    setMonthValue(value.month);
+    setYearValue(value.year);
+    if (typeof onChangeControlled === "function") onChangeControlled == null ? void 0 : onChangeControlled(value);
+  }, [onChangeControlled]);
+  useImperativeHandle(ref, () => ({
+    focusMonth: () => {
+      var _a;
+      return (_a = monthRef.current) == null ? void 0 : _a.focus();
+    },
+    focusYear: () => {
+      var _a;
+      return (_a = yearRef.current) == null ? void 0 : _a.focus();
+    },
+    getValue: () => ({
+      month: monthValue,
+      year: yearValue
+    }),
+    setValue: (value) => onChange == null ? void 0 : onChange(value)
+  }), [monthValue, yearValue, onChange]);
+  const updateValue = useCallback((newMonth, newYear) => {
+    onChange == null ? void 0 : onChange({
+      month: newMonth,
+      year: newYear
+    });
+  }, [onChange]);
+  const handleMonthChange = useCallback((e) => {
+    if (isReadOnly) return;
+    let value = e.target.value.replace(/\D/g, "");
+    if (value.length > 2) {
+      value = value.slice(0, 2);
+    }
+    if (value.length === 1 && parseInt(value) > 1) {
+      value = "0" + value;
+    } else if (value.length === 2) {
+      const num = parseInt(value, 10);
+      if (num > 12) {
+        value = "12";
+      } else if (num < 1) {
+        value = "01";
+      }
+    }
+    updateValue(value, yearValue);
+    if (value.length === 2 && VALID_MONTHS.includes(parseInt(value, 10))) {
+      setTimeout(() => {
+        var _a;
+        return (_a = yearRef.current) == null ? void 0 : _a.focus();
+      }, 0);
+    }
+  }, [updateValue, yearValue, isReadOnly]);
+  const handleMonthBlur = useCallback((e) => {
+    if (isReadOnly) return;
+    const value = e.target.value;
+    if (value && value.length === 1) {
+      const formatted = formatMonth(value);
+      updateValue(formatted, yearValue);
+    }
+    onBlur == null ? void 0 : onBlur(e);
+  }, [updateValue, yearValue, onBlur, isReadOnly]);
+  const handleYearChange = useCallback((e) => {
+    if (isReadOnly) return;
+    let value = e.target.value.replace(/\D/g, "");
+    const maxLength = yearFormat === 4 ? 4 : 2;
+    if (value.length > maxLength) {
+      value = value.slice(0, maxLength);
+    }
+    updateValue(monthValue, value);
+  }, [updateValue, monthValue, isReadOnly, yearFormat]);
+  const handleYearBlur = useCallback((e) => {
+    if (isReadOnly) return;
+    const value = e.target.value;
+    if (value) {
+      let processedValue = value;
+      if (yearFormat === 2) {
+        if (value.length === 1 || value.length === 2) {
+          processedValue = formatYear(value, yearFormat);
+        }
+      } else {
+        if (value.length === 1 || value.length === 2) {
+          processedValue = convertTwoDigitYearToFour(value);
+        } else {
+          processedValue = formatYear(value, yearFormat);
+        }
+      }
+      updateValue(monthValue, processedValue);
+    }
+    onBlur == null ? void 0 : onBlur(e);
+  }, [updateValue, monthValue, onBlur, isReadOnly, yearFormat]);
+  const handleMonthKeyDown = useCallback((e) => {
+    var _a;
+    if (isReadOnly) return;
+    const {
+      key,
+      currentTarget
+    } = e;
+    const {
+      value,
+      selectionStart,
+      selectionEnd
+    } = currentTarget;
+    if (key === "ArrowRight" && selectionStart === value.length) {
+      e.preventDefault();
+      (_a = yearRef.current) == null ? void 0 : _a.focus();
+      return;
+    }
+    if (key === "Tab" && !e.shiftKey) {
+      return;
+    }
+    if (/^\d$/.test(key)) {
+      e.preventDefault();
+      const digit = key;
+      let newValue = "";
+      if (selectionStart === 0 && selectionEnd === value.length) {
+        newValue = digit;
+      } else if (value.length === 0) {
+        newValue = digit;
+      } else if (value.length === 1) {
+        if (value === "0") {
+          newValue = digit === "0" ? "01" : "0" + digit;
+        } else if (value === "1") {
+          newValue = "1" + (parseInt(digit) > 2 ? "2" : digit);
+        } else {
+          newValue = "0" + digit;
+        }
+      } else {
+        newValue = digit;
+      }
+      if (newValue.length === 2) {
+        const monthNum = parseInt(newValue, 10);
+        if (monthNum > 12) {
+          newValue = "12";
+        } else if (monthNum < 1) {
+          newValue = "01";
+        }
+      }
+      updateValue(newValue, yearValue);
+      if (newValue.length === 2) {
+        setTimeout(() => {
+          var _a2;
+          return (_a2 = yearRef.current) == null ? void 0 : _a2.focus();
+        }, 0);
+      }
+    }
+    if (key === "ArrowUp" || key === "ArrowDown") {
+      e.preventDefault();
+      const current = parseInt(value || "1", 10);
+      const delta = key === "ArrowUp" ? 1 : -1;
+      let newMonth = current + delta;
+      if (newMonth > 12) newMonth = 1;
+      if (newMonth < 1) newMonth = 12;
+      const formatted = newMonth.toString().padStart(2, "0");
+      updateValue(formatted, yearValue);
+    }
+  }, [updateValue, yearValue, isReadOnly]);
+  const handleYearKeyDown = useCallback((e) => {
+    var _a, _b;
+    if (isReadOnly) return;
+    const {
+      key,
+      currentTarget
+    } = e;
+    const {
+      value,
+      selectionStart,
+      selectionEnd
+    } = currentTarget;
+    if (key === "ArrowLeft" && selectionStart === 0) {
+      e.preventDefault();
+      (_a = monthRef.current) == null ? void 0 : _a.focus();
+      return;
+    }
+    if (key === "Backspace" && value === "" && selectionStart === 0) {
+      e.preventDefault();
+      (_b = monthRef.current) == null ? void 0 : _b.focus();
+      return;
+    }
+    if (/^\d$/.test(key)) {
+      e.preventDefault();
+      const digit = key;
+      let newValue = "";
+      const maxLength = yearFormat === 4 ? 4 : 2;
+      if (selectionStart === 0 && selectionEnd === value.length) {
+        newValue = digit;
+      } else if (value.length === 0) {
+        newValue = digit;
+      } else if (value.length < maxLength) {
+        newValue = value + digit;
+      } else {
+        newValue = value.slice(1) + digit;
+      }
+      if (newValue.length > maxLength) {
+        newValue = newValue.slice(-maxLength);
+      }
+      updateValue(monthValue, newValue);
+    }
+    if (key === "ArrowUp" || key === "ArrowDown") {
+      e.preventDefault();
+      const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+      const defaultYear = yearFormat === 4 ? currentYear : currentYear % 100;
+      const current = parseInt(value || defaultYear.toString(), 10);
+      const delta = key === "ArrowUp" ? 1 : -1;
+      let newYear = current + delta;
+      if (yearFormat === 4) {
+        if (newYear > 9999) newYear = 1e3;
+        if (newYear < 1e3) newYear = 9999;
+      } else {
+        if (newYear > 99) newYear = 0;
+        if (newYear < 0) newYear = 99;
+      }
+      const formatted = yearFormat === 4 ? newYear.toString() : newYear.toString().padStart(2, "0");
+      updateValue(monthValue, formatted);
+    }
+  }, [updateValue, monthValue, isReadOnly, yearFormat]);
+  const moveCaretToEnd = (input2) => {
+    const length = input2.value.length;
+    input2.setSelectionRange(length, length);
+  };
+  const handleMonthFocus = useCallback((e) => {
+    setTimeout(() => moveCaretToEnd(e.target), 0);
+    onFocus == null ? void 0 : onFocus(e);
+  }, [onFocus]);
+  const handleYearFocus = useCallback((e) => {
+    setTimeout(() => moveCaretToEnd(e.target), 0);
+    onFocus == null ? void 0 : onFocus(e);
+  }, [onFocus]);
+  const combinedValue = monthValue && yearValue ? `${monthValue.padStart(2, "0")}/${yearValue}` : "";
+  return /* @__PURE__ */ jsxs(Field, { as: FieldWrapper, ...fieldProps, isDisabled, isRequired, labelFor: id, className: styles.monthYearField, children: [
+    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: combinedValue }),
+    /* @__PURE__ */ jsxs("div", { className: styles.inputsContainer, ...!!(props == null ? void 0 : props.errorMessage) || (props == null ? void 0 : props.isInvalid) ? {
+      "data-invalid": true
+    } : {}, children: [
+      /* @__PURE__ */ jsx(Input, { ref: monthRef, id: `${id}-month`, name: `${id}-month`, inputMode: "numeric", "aria-label": labelMonth, placeholder: placeholderMonth, value: monthValue, onChange: handleMonthChange, onBlur: handleMonthBlur, onFocus: handleMonthFocus, onKeyDown: handleMonthKeyDown, maxLength: 2, className: styles.input, autoComplete: autoCompleteMonth, "data-segment": "month", type: "text" }),
+      /* @__PURE__ */ jsx("span", { className: styles.separator, "aria-hidden": "true", "data-disabled": isDisabled || void 0, children: "/" }),
+      /* @__PURE__ */ jsx(Input, { ref: yearRef, id: `${id}-year`, name: `${id}-year`, inputMode: "numeric", "aria-label": labelYear, placeholder: placeholderYear, value: yearValue, onChange: handleYearChange, onBlur: handleYearBlur, onFocus: handleYearFocus, onKeyDown: handleYearKeyDown, maxLength: yearFormat === 4 ? 4 : 2, className: styles.input, autoComplete: autoCompleteYear, "data-segment": "year", "data-year-format": yearFormat, type: "text" })
+    ] })
+  ] });
+});
+MonthYearField.displayName = "MonthYearField";
+export {
+  MonthYearField,
+  MonthYearField as default
+};
+//# sourceMappingURL=MonthYearField.js.map

package/dist/components/MonthYearField/MonthYearField.js.map

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

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

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

package/dist/components/MonthYearField/index.js

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

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

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

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

@@ -20,11 +20,6 @@ interface BaseProps extends ParagraphVariants {
      * @default "secondary"
      */
     foregroundColor?: ForegroundVariants['foregroundColor'];
-    /**
-     * The foreground color of the paragraph
-     * @deprecated Use `foregroundColor` instead
-     */
-    fgColor?: ForegroundVariants['foregroundColor'];
     /**
      * The text alignment of the paragraph
      * @default "start"
@@ -33,5 +28,5 @@ interface BaseProps extends ParagraphVariants {
 }
 type ResponsiveKeys = 'size' | 'textAlign';
 export type ParagraphProps = WithResponsive<BaseProps, ResponsiveKeys>;
-export declare const Paragraph: ({ children, size, foregroundColor, fgColor, textAlign, ...props }: ParagraphProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Paragraph: ({ children, size, foregroundColor, textAlign, ...props }: ParagraphProps) => import("react/jsx-runtime").JSX.Element;
 export default Paragraph;

package/dist/components/Paragraph/Paragraph.js

@@ -44,22 +44,17 @@ const Paragraph = ({
   children,
   size = "md",
   foregroundColor = "secondary",
-  fgColor,
   textAlign = "start",
   ...props
 }) => {
   const breakpoint = useBreakpoint();
   const finalSize = resolveResponsiveProp(size, breakpoint);
   const finalTextAlign = resolveResponsiveProp(textAlign, breakpoint);
-  const resolvedFontColor = fgColor ?? foregroundColor ?? "secondary";
-  if (fgColor) {
-    console.warn("The `fgColor` prop has been deprecated. Please use `foregroundColor` instead.");
-  }
   return /* @__PURE__ */ jsx("p", { className: `${paragraph({
     size: finalSize,
     textAlign: finalTextAlign
   })} ${foregroundColorVariants({
-    foregroundColor: resolvedFontColor
+    foregroundColor
   })}`, ...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.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { forwardRef, useState } from "react";
+import React__default, { forwardRef, useState } from "react";
 import { Field } from "../_base/Field/Field.js";
 import { TextField, Group, Input } from "react-aria-components";
 import { IconButton } from "../IconButton/IconButton.js";
@@ -32,7 +32,7 @@ const PasswordField = forwardRef(({
   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) => {
+  const handleChange = React__default.useCallback((e) => {
     var _a2;
     setInternalValue(e.target.value);
     (_a2 = props == null ? void 0 : props.onChange) == null ? void 0 : _a2.call(props, e.target.value);
@@ -47,7 +47,7 @@ const PasswordField = forwardRef(({
       } : {
         iconName: "eye-slash",
         iconPrefix: "fas"
-      }, onClick: () => setInternalVisible(!isVisibleState), isDisabled: props == null ? void 0 : props.isDisabled, styleVariant: "neutral", emphasis: "tertiary", "aria-label": tooltipLabel, tooltipLabel })
+      }, onPress: () => 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}`)) })
   ] });

package/dist/components/PhoneNumberField/PhoneNumberField.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState, useId } from "react";
 import { TextField, Input } from "react-aria-components";
-import { u as usePatternFormat, N as NumberFormatBase } from "../../react-number-format.es-BjKL6crg.js";
+import { u as usePatternFormat, N as NumberFormatBase } from "../../react-number-format.es-Dbc1db6s.js";
 import { countryPhoneMap, DEFAULT_PATTERN, getCountryOptions, getCountryFlagEmoji, getPhoneNumberValue } from "../../utils/phoneNumber/phoneNumber.js";
 import { Field } from "../_base/Field/Field.js";
 import '../../assets/PhoneNumberField.css';const phoneNumberField = "_phoneNumberField_ysf6g_1";

package/dist/components/Popover/Popover.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useRef, useEffect } from "react";
+import React__default, { useRef, useEffect } from "react";
 import { usePopover, Overlay, DismissButton } from "@react-aria/overlays";
 import { FocusScope } from "@react-aria/focus";
 import '../../assets/Popover.css';const popoverWrapper = "_popoverWrapper_qrzbw_1";
@@ -30,7 +30,7 @@ const Popover = ({
 }) => {
   const popoverRef = useRef(null);
   const initialPlacement = placement || arrowDirectionToPlacement[arrowDirection];
-  const [optimalPlacement, setOptimalPlacement] = React.useState(initialPlacement);
+  const [optimalPlacement, setOptimalPlacement] = React__default.useState(initialPlacement);
   useEffect(() => {
     const updatePlacement = () => {
       if (!popoverRef.current || !triggerRef.current) return;

package/dist/components/SearchField/SearchField.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useRef, useState } from "react";
+import React__default, { useRef, 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 { Icon } from "../Icon/Icon.js";
-import '../../assets/SearchField.css';const searchField = "_searchField_1wpmg_1";
-const iconStart = "_iconStart_1wpmg_82";
+import '../../assets/SearchField.css';const searchField = "_searchField_vqgsn_1";
+const iconStart = "_iconStart_vqgsn_82";
 const styles = {
   searchField,
   iconStart
@@ -18,12 +18,12 @@ const SearchField = ({
   const inputRef = useRef(null);
   const [internalValue, setInternalValue] = useState(props == null ? void 0 : props.defaultValue);
   const value = (props == null ? void 0 : props.value) ?? internalValue;
-  const setValue = React.useCallback((nextValue) => {
+  const setValue = React__default.useCallback((nextValue) => {
     var _a;
     setInternalValue(nextValue);
     (_a = props == null ? void 0 : props.onChange) == null ? void 0 : _a.call(props, nextValue);
   }, [props == null ? void 0 : props.onChange]);
-  const handleClear = React.useCallback(() => {
+  const handleClear = React__default.useCallback(() => {
     var _a;
     setValue("");
     (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.focus();
@@ -34,11 +34,13 @@ const SearchField = ({
     return (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.focus();
   }, children: [
     /* @__PURE__ */ jsx(Icon, { iconSize: "1x", padding: "roomy", iconName: "search", className: styles.iconStart }),
-    /* @__PURE__ */ jsx(Input, { type: "text", value, onChange: (e) => setValue(e.target.value), ref: inputRef, placeholder }),
+    /* @__PURE__ */ jsx(Input, { type: "text", value, onChange: (e) => setValue(e.target.value), ref: inputRef, placeholder, ...(props == null ? void 0 : props.isInvalid) ? {
+      "data-invalid": true
+    } : {} }),
     !!value && /* @__PURE__ */ jsx(IconButton, { size: "sm", iconProps: {
       iconName: "xmark",
       iconPrefix: "fas"
-    }, onClick: (props == null ? void 0 : props.isDisabled) ? void 0 : handleClear, isDisabled: props == null ? void 0 : props.isDisabled, styleVariant: "neutral", emphasis: "tertiary", "aria-label": tooltipLabel, tooltipLabel })
+    }, onPress: (props == null ? void 0 : props.isDisabled) ? void 0 : handleClear, isDisabled: props == null ? void 0 : props.isDisabled, styleVariant: "neutral", emphasis: "tertiary", "aria-label": tooltipLabel, tooltipLabel })
   ] }) }) });
 };
 export {

package/dist/components/SearchField/SearchField.js.map

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

package/dist/components/Section/Section.d.ts

@@ -4,26 +4,67 @@ import { PaddingVariants } from '../../utils/padding/padding';
 import { FlexVariants } from '../../utils/flex/flex';
 type SectionPaddingValue = 'default' | PaddingVariants['paddingX'];
 export type SectionPadding = {
+    /**
+     * Controls both left and right padding of the section
+     */
     paddingX?: SectionPaddingValue;
+    /**
+     * Controls both top and bottom padding of the section
+     */
     paddingY?: SectionPaddingValue;
+    /**
+     * Controls the top padding of the section (overridden by paddingY)
+     */
     paddingTop?: SectionPaddingValue;
+    /**
+     * Controls the right padding of the section (overridden by paddingX)
+     */
     paddingRight?: SectionPaddingValue;
+    /**
+     * Controls the bottom padding of the section (overridden by paddingY)
+     */
     paddingBottom?: SectionPaddingValue;
+    /**
+     * Controls the left padding of the section (overridden by paddingX)
+     */
     paddingLeft?: SectionPaddingValue;
 };
 export interface SectionProps extends BackgroundVariants, SectionPadding, Pick<FlexVariants, 'flexDirection' | 'justifyContent' | 'alignItems'> {
     children: React.ReactNode;
+    /**
+     * Controls the maximum width of the section container
+     */
     containerMaxWidth?: 'full-width' | 'page';
+    /**
+     * The style of the section.
+     */
     style?: React.CSSProperties;
-    backgroundColour?: BackgroundVariants['backgroundColor'];
+    /**
+     * The class name of the section.
+     */
     className?: string;
 }
 export interface ContainerProps {
     children: React.ReactNode;
+    /**
+     * The class name of the container.
+     */
     className?: string;
+    /**
+     * The maximum width of the container.
+     */
     containerMaxWidth?: 'full-width' | 'page';
+    /**
+     * Direction of the flex container.
+     */
     flexDirection?: FlexVariants['flexDirection'];
+    /**
+     * Alignment along the main axis.
+     */
     justifyContent?: FlexVariants['justifyContent'];
+    /**
+     * Alignment along the cross axis.
+     */
     alignItems?: FlexVariants['alignItems'];
 }
 declare const Container: ({ children, className, containerMaxWidth, flexDirection, justifyContent, alignItems, }: ContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Section/Section.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import React, { forwardRef } from "react";
+import React__default, { forwardRef } from "react";
 import { backgroundColorVariants } from "../../utils/backgroundColor/backgroundColor.js";
 import { paddingVariants } from "../../utils/padding/padding.js";
 import { c as cva } from "../../index-DdUYounA.js";
@@ -56,20 +56,19 @@ const Container = ({
 }) => {
   const widthClassName = containerMaxWidth === "full-width" ? "fullWidth" : "pageWidth";
   return /* @__PURE__ */ jsx("div", { className: `
-        ${styles.container} 
-        ${styles[widthClassName]} 
+        ${styles.container}
+        ${styles[widthClassName]}
         ${flexVariants({
     flexDirection,
     justifyContent,
     alignItems
-  })} 
+  })}
         ${className || ""}
       `.trim(), children });
 };
 const Section = forwardRef(({
   children,
   containerMaxWidth = "page",
-  backgroundColour,
   backgroundColor,
   paddingTop,
   paddingBottom,
@@ -83,10 +82,6 @@ const Section = forwardRef(({
   justifyContent,
   alignItems
 }, ref) => {
-  if (backgroundColour && !backgroundColor) {
-    console.warn("Warning: `backgroundColour` is deprecated and will be removed in a future release. Please use `backgroundColor` instead.");
-  }
-  const resolvedBackgroundColor = backgroundColor ?? backgroundColour;
   return /* @__PURE__ */ jsx("section", { ref, className: `
         ${styles.section}
         ${paddingVariants({
@@ -106,7 +101,7 @@ const Section = forwardRef(({
     paddingY: paddingY === "default" ? "default" : void 0
   })}
         ${backgroundColorVariants({
-    backgroundColor: resolvedBackgroundColor
+    backgroundColor
   })} 
         ${flexVariants({
     display: flexDirection || justifyContent ? "flex" : void 0,
@@ -115,9 +110,9 @@ const Section = forwardRef(({
     alignItems
   })}
         ${className || ""}
-      `.trim(), style, children: React.Children.map(children, (child) => {
-    if (React.isValidElement(child) && child.type === Container) {
-      return React.cloneElement(child, {
+      `.trim(), style, children: React__default.Children.map(children, (child) => {
+    if (React__default.isValidElement(child) && child.type === Container) {
+      return React__default.cloneElement(child, {
         ...child.props,
         containerMaxWidth,
         flexDirection,

package/dist/components/Section/Section.js.map

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

package/dist/components/SelectCard/SelectCard.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { createContext, useContext } from "react";
+import React__default, { createContext, useContext } from "react";
 import { Paragraph } from "../Paragraph/Paragraph.js";
 import { Checkbox, Radio } from "react-aria-components";
 import '../../assets/SelectCard.css';const checkboxSvgWrapper = "_checkboxSvgWrapper_dir9q_104";
@@ -24,7 +24,7 @@ const SelectCard = ({
   type = "checkbox",
   ...contextProps
 }) => {
-  const labelId = React.useId();
+  const labelId = React__default.useId();
   if (type === "checkbox") {
     return /* @__PURE__ */ jsx(SelectCardContext.Provider, { value: {
       type,