@alto-avios/alto-ui 4.3.0-experimental.1 → 4.3.0

package/dist/assets/ButtonGroup.css

@@ -1 +1 @@
-._buttonGroup_zcnod_2{align-items:center;display:flex;flex-wrap:wrap;gap:var(--alto-sem-space-sm) var(--alto-sem-space-2xs)}._alignStart_zcnod_10{justify-content:flex-start}._alignCenter_zcnod_14{justify-content:center}._alignEnd_zcnod_18{justify-content:flex-end}._alignJustify_zcnod_22,._alignSplit_zcnod_26{justify-content:space-between}._alignSplit_zcnod_26>:first-child{margin-right:auto}._alignSplit_zcnod_26>:not(:first-child){display:flex;justify-content:flex-end}._alignStack_zcnod_39{align-items:stretch;flex-direction:column}._alignStackFlip_zcnod_44{align-items:stretch;flex-direction:column-reverse}
+._buttonGroup_53q76_2{align-items:center;display:flex;flex-wrap:wrap;gap:var(--alto-sem-space-sm) var(--alto-sem-space-2xs)}._alignStart_53q76_10{justify-content:flex-start}._alignCenter_53q76_14{justify-content:center}._alignEnd_53q76_18{justify-content:flex-end}._alignJustify_53q76_22{justify-content:space-between}._alignJustify_53q76_22>*{flex-grow:1}._alignSplit_53q76_30{justify-content:space-between}._alignSplit_53q76_30>:first-child{margin-right:auto}._alignSplit_53q76_30>:not(:first-child){display:flex;justify-content:flex-end}._alignStack_53q76_43{align-items:stretch;flex-direction:column}._alignStackFlip_53q76_48{align-items:stretch;flex-direction:column-reverse}

package/dist/assets/DetailsDisclosure.css

@@ -1 +1 @@
-._detailsDisclosure_9jcud_1{display:flex;flex-direction:column;gap:var(--alto-sem-space-2xs);width:100%}._detailsDisclosureIcon_9jcud_8{rotate:0deg;transition:rotate .2s}._detailsDisclosure_9jcud_1[data-expanded] ._detailsDisclosureIcon_9jcud_8{rotate:90deg}._detailsDisclosure_9jcud_1 button[slot=trigger]{all:unset;border-radius:var(--alto-sem-radius-circle);color:var(--alto-sem-color-fg-accent-primary);cursor:pointer;display:flex;flex-direction:row;font-size:var(--alto-sem-text-body-md-font-size);font-weight:var(--alto-sem-text-body-bold-font-weight);gap:var(--alto-sem-space-xs)}._detailsDisclosure_9jcud_1 button[slot=trigger][data-focus-visible]{color:var(--alto-sem-color-fg-accent-secondary);outline-offset:var(--alto-sem-border-width-md);outline-style:solid;outline-width:var(--alto-sem-border-width-md)}._detailsDisclosure_9jcud_1 button[slot=trigger][data-hovered],._detailsDisclosure_9jcud_1 button[slot=trigger][data-pressed]{color:var(--alto-sem-color-fg-accent-secondary)}._detailsDisclosureDetails_9jcud_40{padding-left:20px;position:relative}._detailsDisclosureDetails_9jcud_40:before{background:var(--alto-sem-color-border-primary-default);border-radius:var(--alto-sem-radius-circle);content:"";height:100%;left:0;margin-left:3px;position:absolute;top:0;width:4px}
+._detailsDisclosure_1jv4t_1{display:flex;flex-direction:column;gap:var(--alto-sem-space-2xs);width:100%}._detailsDisclosureIcon_1jv4t_8{rotate:0deg;transition:rotate .2s}._detailsDisclosure_1jv4t_1[data-expanded] ._detailsDisclosureIcon_1jv4t_8{rotate:90deg}._detailsDisclosure_1jv4t_1 button[slot=trigger]{all:unset;border-radius:var(--alto-sem-radius-circle);color:var(--alto-sem-color-fg-accent-primary);cursor:pointer;display:flex;flex-direction:row;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);font-weight:var(--alto-sem-text-body-bold-font-weight);gap:var(--alto-sem-space-xs)}._detailsDisclosure_1jv4t_1 button[slot=trigger][data-focus-visible]{color:var(--alto-sem-color-fg-accent-secondary);outline-offset:var(--alto-sem-border-width-md);outline-style:solid;outline-width:var(--alto-sem-border-width-md)}._detailsDisclosure_1jv4t_1 button[slot=trigger][data-hovered],._detailsDisclosure_1jv4t_1 button[slot=trigger][data-pressed]{color:var(--alto-sem-color-fg-accent-secondary)}._detailsDisclosureDetails_1jv4t_41{padding-left:20px;position:relative}._detailsDisclosureDetails_1jv4t_41:before{background:var(--alto-sem-color-border-primary-default);border-radius:var(--alto-sem-radius-circle);content:"";height:100%;left:0;margin-left:3px;position:absolute;top:0;width:4px}

package/dist/assets/FieldError.css

@@ -1 +1 @@
-._fieldError_1bhog_1{align-items:center;align-self:stretch;color:var(--alto-sem-color-fg-critical-primary);display:flex;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-sm-font-size);gap:var(--alto-sem-space-4xs);letter-spacing:var(--alto-sem-text-body-sm-letter-spacing);line-height:var(--alto-sem-text-body-sm-line-height)}._sr-only_1bhog_13{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}
+._fieldError_1tsix_1{align-items:center;align-self:stretch;color:var(--alto-sem-color-fg-critical-primary);display:flex;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-sm-font-size);gap:var(--alto-sem-space-4xs);letter-spacing:var(--alto-sem-text-body-sm-letter-spacing);line-height:var(--alto-sem-text-body-sm-line-height)}

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -1,14 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { c as cva } from "../../index-DdUYounA.js";
-import '../../assets/ButtonGroup.css';const buttonGroup = "_buttonGroup_zcnod_2";
-const alignStart = "_alignStart_zcnod_10";
-const alignCenter = "_alignCenter_zcnod_14";
-const alignEnd = "_alignEnd_zcnod_18";
-const alignJustify = "_alignJustify_zcnod_22";
-const alignSplit = "_alignSplit_zcnod_26";
-const alignStack = "_alignStack_zcnod_39";
-const alignStackFlip = "_alignStackFlip_zcnod_44";
+import '../../assets/ButtonGroup.css';const buttonGroup = "_buttonGroup_53q76_2";
+const alignStart = "_alignStart_53q76_10";
+const alignCenter = "_alignCenter_53q76_14";
+const alignEnd = "_alignEnd_53q76_18";
+const alignJustify = "_alignJustify_53q76_22";
+const alignSplit = "_alignSplit_53q76_30";
+const alignStack = "_alignStack_53q76_43";
+const alignStackFlip = "_alignStackFlip_53q76_48";
 const styles = {
   buttonGroup,
   alignStart,

package/dist/components/DetailsDisclosure/DetailsDisclosure.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Disclosure, DisclosurePanel, Button } 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";
+import '../../assets/DetailsDisclosure.css';const detailsDisclosure = "_detailsDisclosure_1jv4t_1";
+const detailsDisclosureIcon = "_detailsDisclosureIcon_1jv4t_8";
+const detailsDisclosureDetails = "_detailsDisclosureDetails_1jv4t_41";
 const styles = {
   detailsDisclosure,
   detailsDisclosureIcon,

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

@@ -1,11 +1,10 @@
-import { FieldErrorProps as AriaFieldErrorProps, ValidationResult } from 'react-aria-components';
+import { FieldErrorProps as AriaFieldErrorProps } from 'react-aria-components';
 export interface FieldErrorProps extends AriaFieldErrorProps {
-    children?: React.ReactNode | ((validation: ValidationResult) => string);
+    children?: React.ReactNode | any;
     /**
-     * Prefix text for screen readers only (e.g., "Error:")
-     * @default 'Error:'
+     * Whether the field is invalid.
      */
-    errorPrefix?: string;
+    isInvalid?: boolean;
 }
-export declare const FieldError: ({ children, errorPrefix, ...props }: FieldErrorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FieldError: ({ children, isInvalid: isInvalidProp, ...props }: FieldErrorProps) => import("react/jsx-runtime").JSX.Element;
 export default FieldError;

package/dist/components/FieldError/FieldError.js

@@ -1,41 +1,28 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx, 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_1bhog_1";
+import '../../assets/FieldError.css';const fieldError = "_fieldError_1tsix_1";
 const styles = {
-  fieldError,
-  "sr-only": "_sr-only_1bhog_13"
+  fieldError
 };
 const FieldError = ({
   children,
-  errorPrefix = "Error:",
+  isInvalid: isInvalidProp,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(FieldError$1, { ...props, children: ({
-    validationErrors,
-    isInvalid
+  if (children && isInvalidProp) {
+    return /* @__PURE__ */ jsxs("div", { id: props.id, className: styles.fieldError, role: "alert", "aria-live": "polite", children: [
+      /* @__PURE__ */ jsx(Icon, { iconName: "triangle-exclamation", iconPrefix: "fas" }),
+      children
+    ] });
+  }
+  return /* @__PURE__ */ jsx(FieldError$1, { className: styles.fieldError, ...props, children: ({
+    validationErrors
   }) => {
-    const errorMessage = typeof children === "function" ? children({
-      isInvalid,
-      validationErrors,
-      validationDetails: {
-        badInput: false,
-        customError: false,
-        patternMismatch: false,
-        rangeOverflow: false,
-        rangeUnderflow: false,
-        stepMismatch: false,
-        tooLong: false,
-        tooShort: false,
-        typeMismatch: false,
-        valid: !isInvalid,
-        valueMissing: false
-      }
-    }) : children || (validationErrors == null ? void 0 : validationErrors[0]);
-    if (!errorMessage || !isInvalid) return null;
-    return /* @__PURE__ */ jsxs("span", { className: styles.fieldError, role: "alert", "aria-live": "assertive", "aria-atomic": "true", children: [
-      /* @__PURE__ */ jsx("span", { className: styles["sr-only"], children: errorPrefix }),
-      /* @__PURE__ */ jsx(Icon, { iconName: "triangle-exclamation", iconPrefix: "fas", "aria-hidden": "true" }),
+    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
     ] });
   } });

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/FieldHeader.d.ts

@@ -9,8 +9,6 @@ export interface FieldHeaderProps {
     descriptionId?: string;
     errorId?: string;
     optionalTranslation?: string;
-    showError?: boolean;
-    errorPrefix?: string;
 }
-export declare const FieldHeader: ({ label, description, isInvalid, isRequired, errorMessage, labelFor, descriptionId, errorId, optionalTranslation, showError, errorPrefix, }: FieldHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FieldHeader: ({ label, description, isInvalid, isRequired, errorMessage, labelFor, descriptionId, errorId, optionalTranslation, }: FieldHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default FieldHeader;

package/dist/components/FieldHeader/FieldHeader.js

@@ -16,9 +16,7 @@ const FieldHeader = ({
   labelFor,
   descriptionId,
   errorId,
-  optionalTranslation = "Optional",
-  showError = true,
-  errorPrefix
+  optionalTranslation = "Optional"
 }) => {
   return /* @__PURE__ */ jsxs("div", { className: styles.fieldHeader, "data-invalid": isInvalid ? true : void 0, children: [
     /* @__PURE__ */ jsx("div", { className: styles["label-container"], children: label && /* @__PURE__ */ jsxs(FieldLabel, { required: isRequired ? true : void 0, htmlFor: labelFor, children: [
@@ -26,7 +24,7 @@ const FieldHeader = ({
       !isRequired && ` (${optionalTranslation})`
     ] }) }),
     description && /* @__PURE__ */ jsx(FieldDescription, { id: descriptionId, children: description }),
-    showError && /* @__PURE__ */ jsx(FieldError, { id: errorId, errorPrefix, children: errorMessage })
+    /* @__PURE__ */ jsx(FieldError, { isInvalid, id: errorId, children: errorMessage })
   ] });
 };
 export {

package/dist/components/FieldHeader/FieldHeader.js.map

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

package/dist/components/MonthYearField/MonthYearField.js

@@ -77,8 +77,6 @@ const MonthYearField = forwardRef((props, ref) => {
     placeholderYear = yearFormat === 4 ? "YYYY" : "YY",
     id: providedId,
     name,
-    errorMessage,
-    isInvalid,
     ...fieldProps
   } = props;
   const monthRef = useRef(null);
@@ -315,9 +313,9 @@ const MonthYearField = forwardRef((props, ref) => {
     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, errorMessage, isInvalid, labelFor: id, className: styles.monthYearField, children: [
+  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, ...!!errorMessage || isInvalid ? {
+    /* @__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" }),

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

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

package/dist/components/PasswordField/PasswordField.js

@@ -39,22 +39,27 @@ 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 inputId = React__default.useId();
+  const descriptionId = React__default.useId();
+  const errorId = React__default.useId();
   const requirementsId = React__default.useId();
+  const hasDescription = !!props.description;
   const hasValidations = !!((_a = props.strengthValidations) == null ? void 0 : _a.length);
-  const ariaDescribedBy = [hasValidations && requirementsId, props["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+  const hasError = !!props.isInvalid;
+  const ariaDescribedBy = [hasDescription && descriptionId, hasValidations && requirementsId, props["aria-describedby"]].filter(Boolean).join(" ");
   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);
-  }, [props.onChange]);
+  }, [props == null ? void 0 : props.onChange]);
   const srLabels = useMemo(() => ({
     ...DEFAULT_SR_LABELS,
     ...screenReaderStrengthLabels ?? {}
   }), [screenReaderStrengthLabels]);
   const tooltipLabel = isVisibleState ? tooltipLabelHidePassword : tooltipLabelShowPassword;
   return /* @__PURE__ */ jsxs("div", { className: styles["passwordField__wrapper"], children: [
-    /* @__PURE__ */ jsx(Field, { as: TextField, className: styles.passwordField, label: "Password", hasEndIcon: true, ...props, children: /* @__PURE__ */ jsx("div", { className: styles["passwordField"], children: /* @__PURE__ */ jsxs(Group, { children: [
-      /* @__PURE__ */ jsx(Input, { ref, type: isVisibleState ? "text" : "password", value, onChange: handleChange, "aria-describedby": ariaDescribedBy }),
+    /* @__PURE__ */ jsx(Field, { as: TextField, className: styles.passwordField, label: "Password", hasEndIcon: true, labelFor: (props == null ? void 0 : props.labelFor) ?? inputId, descriptionId: hasDescription ? descriptionId : void 0, errorId: hasError ? errorId : void 0, ...props, children: /* @__PURE__ */ jsx("div", { className: styles["passwordField"], children: /* @__PURE__ */ jsxs(Group, { children: [
+      /* @__PURE__ */ jsx(Input, { id: (props == null ? void 0 : props.labelFor) ?? inputId, ref, type: isVisibleState ? "text" : "password", value, onChange: handleChange, "aria-describedby": ariaDescribedBy, "aria-errormessage": hasError ? errorId : void 0, "aria-invalid": hasError || void 0 }),
       /* @__PURE__ */ jsx(IconButton, { size: "sm", iconProps: isVisibleState ? {
         iconName: "eye",
         iconPrefix: "fas"

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

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

package/dist/components/_base/Field/Field.d.ts

@@ -1,7 +1,7 @@
 import { FieldHeaderProps } from '../../FieldHeader';
 import { default as React } from 'react';
 import { FieldVariants } from '../../../utils/forms/field';
-export interface FieldCommonProps extends Omit<FieldHeaderProps, 'labelFor' | 'descriptionId' | 'errorId' | 'showError'> {
+export interface FieldCommonProps extends FieldHeaderProps {
     /**
      * Whether the Field is disabled
      */
@@ -28,15 +28,6 @@ export interface FieldCommonProps extends Omit<FieldHeaderProps, 'labelFor' | 'd
      * @default 'Optional'
      */
     optionalTranslation?: string;
-    /**
-     * The id of the error message element
-     */
-    errorId?: string;
-    /**
-     * Prefix text for screen readers only in error messages
-     * @default 'Error:'
-     */
-    errorPrefix?: string;
 }
 export type FieldProps<T extends object = object> = T & FieldCommonProps;
 type FieldBaseProps<T extends object> = FieldProps<T> & Pick<FieldVariants, 'hasEndIcon' | 'hasStartIcon'> & {
@@ -53,5 +44,5 @@ type FieldBaseProps<T extends object> = FieldProps<T> & Pick<FieldVariants, 'has
      */
     className?: React.ComponentProps<React.ElementType>['className'];
 };
-export declare function Field<T extends object>({ as, children, className, columns, maxWidthByChars, hasStartIcon, hasEndIcon, errorPlacement, label, description, isRequired, optionalTranslation, isDisabled, errorMessage, isInvalid, errorId, errorPrefix, ...restProps }: FieldBaseProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Field<T extends object>({ as, children, className, columns, maxWidthByChars, hasStartIcon, hasEndIcon, errorPlacement, ...props }: FieldBaseProps<T>): import("react/jsx-runtime").JSX.Element;
 export default Field;

package/dist/components/_base/Field/Field.js

@@ -28,31 +28,22 @@ function Field({
   hasStartIcon,
   hasEndIcon,
   errorPlacement = "top",
-  label,
-  description,
-  isRequired,
-  optionalTranslation,
-  isDisabled,
-  errorMessage,
-  isInvalid,
-  errorId,
-  errorPrefix,
-  ...restProps
+  ...props
 }) {
   React__default.useEffect(() => {
-    if (label === void 0) {
+    if ((props == null ? void 0 : props.label) === void 0) {
       console.warn("@alto/ui: Field expects a label prop for accessibility compliance");
     }
-  }, [label]);
-  return /* @__PURE__ */ jsxs(PolymorphicField, { as, isDisabled, className, errorMessage, isInvalid, ...restProps, children: [
-    label ? /* @__PURE__ */ jsx(FieldHeader, { label, description, isRequired, optionalTranslation, errorMessage, isInvalid, errorId, errorPrefix, showError: errorPlacement === "top" }) : null,
+  }, [props == null ? void 0 : props.label]);
+  return /* @__PURE__ */ jsxs(PolymorphicField, { as, isDisabled: props == null ? void 0 : props.isDisabled, className, ...props, children: [
+    (props == null ? void 0 : props.label) ? /* @__PURE__ */ jsx(FieldHeader, { label: props == null ? void 0 : props.label, description: props == null ? void 0 : props.description, isInvalid: props == null ? void 0 : props.isInvalid, isRequired: props == null ? void 0 : props.isRequired, labelFor: props == null ? void 0 : props.labelFor, descriptionId: props == null ? void 0 : props.descriptionId, errorId: props == null ? void 0 : props.errorId, errorMessage: errorPlacement === "top" ? props == null ? void 0 : props.errorMessage : void 0, optionalTranslation: props == null ? void 0 : props.optionalTranslation }) : null,
     /* @__PURE__ */ jsx("div", { className: styles.fieldGrid, children: /* @__PURE__ */ jsx("div", { className: fieldVariants({
       columns,
       maxWidthByChars,
       hasStartIcon,
       hasEndIcon
     }), children }) }),
-    errorPlacement === "bottom" && errorMessage ? /* @__PURE__ */ jsx("div", { className: styles.fieldError, children: /* @__PURE__ */ jsx(FieldError, { id: errorId, errorPrefix, children: errorMessage }) }) : null
+    errorPlacement === "bottom" && (props == null ? void 0 : props.errorMessage) ? /* @__PURE__ */ jsx("div", { className: styles.fieldError, children: /* @__PURE__ */ jsx(FieldError, { children: props.errorMessage }) }) : null
   ] });
 }
 export {

package/dist/components/_base/Field/Field.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alto-avios/alto-ui",
-  "version": "4.3.0-experimental.1",
+  "version": "4.3.0",
   "description": "A react component library for Alto Design System",
   "author": {
     "name": "Ian Caldwell IAGL",

package/dist/utils/stories/storybookAction.d.ts

@@ -1,10 +0,0 @@
-/**
- * The `action` function can be used but in the Actions tab it will display like a variable
- * e.g.
- * <Accordion onExpandedChange={action('onExpandedChange')} /> => onExpandedChange: true|false
- *
- * Doing the below, displays the `args` passed to the callback as an array (the way shown in the Storybook docs)
- * e.g.
- * <Accordion onExpandedChange={storybookAction('onExpandedChange')} /> => onExpandedChange: (1) [true|false]
- */
-export declare const storybookAction: (callbackName: string) => (...args: unknown[]) => void;