@alto-avios/alto-ui 2.4.0 → 3.0.0

package/dist/components/Link/Link.js

@@ -3,21 +3,19 @@ import { Icon } from "../Icon/Icon.js";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import { Link as Link$1 } from "react-aria-components";
 import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
-import '../../assets/Link.css';const link$1 = "_link_4ndec_1";
-const xs = "_xs_4ndec_9";
-const sm = "_sm_4ndec_15";
-const md = "_md_4ndec_21";
-const lg = "_lg_4ndec_27";
-const underline = "_underline_4ndec_58";
-const iconEnd = "_iconEnd_4ndec_75";
+import '../../assets/Link.css';const link$1 = "_link_jskyb_1";
+const xs = "_xs_jskyb_12";
+const sm = "_sm_jskyb_18";
+const md = "_md_jskyb_24";
+const lg = "_lg_jskyb_30";
+const underline = "_underline_jskyb_61";
 const styles = {
   link: link$1,
   xs,
   sm,
   md,
   lg,
-  underline,
-  iconEnd
+  underline
 };
 const link = cva(styles.link, {
   variants: {
@@ -34,41 +32,55 @@ const link = cva(styles.link, {
     iconEnd: {
       true: styles.iconEnd,
       false: ""
+    },
+    iconStart: {
+      true: styles.iconStart,
+      false: ""
     }
   },
   defaultVariants: {
     size: "md",
-    underline: false,
-    iconEnd: true
+    underline: false
   }
 });
 const Link = ({
   size = "md",
-  iconEnd: iconEnd2 = true,
   underline: underline2 = true,
-  iconProps = {
+  iconStartProps,
+  iconEndProps = {
     iconName: "arrow-right"
   },
+  iconProps,
+  // deprecated
   linkText,
   href,
   target = "_self",
-  rel,
-  download = false,
-  isDisabled = false,
-  autoFocus = false,
-  ping,
   focusStyle = "default",
+  children,
+  labelExternal = "open in new tab",
   ...props
 }) => {
+  const finalIconEndProps = iconProps ?? // Use deprecated iconProps if provided
+  (iconEndProps === false ? void 0 : iconEndProps ?? {
+    iconName: "arrow-right"
+  });
+  const externalLinkProps = target === "_blank" ? {
+    rel: "noopener noreferrer",
+    "aria-label": labelExternal
+  } : {};
   return /* @__PURE__ */ jsxs(Link$1, { className: `${link({
     size,
-    iconEnd: iconEnd2,
     underline: underline2
   })} ${focusStyleVariants({
     focusStyle
-  })}`, href, target, rel, download, isDisabled, autoFocus, ping, ...props, children: [
-    linkText,
-    iconEnd2 && /* @__PURE__ */ jsx(Icon, { ...iconProps })
+  })}`, href, target, ...externalLinkProps, ...props, children: [
+    iconStartProps && /* @__PURE__ */ jsx(Icon, { className: link({
+      iconStart: !!iconStartProps
+    }), ...iconStartProps }),
+    children || linkText,
+    finalIconEndProps && /* @__PURE__ */ jsx(Icon, { className: link({
+      iconEnd: !!finalIconEndProps
+    }), ...finalIconEndProps })
   ] });
 };
 export {

package/dist/components/Link/Link.js.map

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

package/dist/components/NumberField/NumberField.d.ts

@@ -1,9 +1,6 @@
-import { ValidationResult, NumberFieldProps as AriaNumberFieldProps } from 'react-aria-components';
-export interface NumberFieldProps extends AriaNumberFieldProps {
-    /**
-     * The label for the NumberField
-     */
-    label?: string;
+import { NumberFieldProps as AriaNumberFieldProps } from 'react-aria-components';
+import { FieldProps } from '../_base/Field';
+export interface NumberFieldProps extends FieldProps<AriaNumberFieldProps> {
     /**
      * The label for the increment button
      * @default "Increase"
@@ -14,10 +11,6 @@ export interface NumberFieldProps extends AriaNumberFieldProps {
      * @default "Decrease"
      */
     labelDecrement?: string;
-    /**
-     * The description for the NumberField
-     */
-    description?: string;
     /**
      * The minimum value for the NumberField
      *
@@ -27,29 +20,6 @@ export interface NumberFieldProps extends AriaNumberFieldProps {
      * The maximum value for the NumberField
      */
     maxValue?: number;
-    /**
-     * Whether the NumberField is disabled
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * The error message for the NumberField
-     */
-    errorMessage?: string | ((validation: ValidationResult) => string);
-    /**
-     * The default value for the NumberField
-     */
-    defaultValue?: number;
-    /**
-     * Whether the NumberField is invalid
-     * @default false
-     */
-    isInvalid?: boolean;
-    /**
-     * Whether the NumberField is required
-     * @default false
-     */
-    isRequired?: boolean;
 }
-export declare const NumberField: ({ label, labelIncrement, labelDecrement, description, defaultValue, minValue, maxValue, isInvalid, isDisabled, isRequired, errorMessage, ...props }: NumberFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NumberField: ({ labelIncrement, labelDecrement, minValue, maxValue, isInvalid, isDisabled, ...props }: NumberFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default NumberField;

package/dist/components/NumberField/NumberField.js

@@ -1,12 +1,12 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { NumberField as NumberField$1, Group, Button, Input } from "react-aria-components";
-import { FieldHeader } from "../FieldHeader/FieldHeader.js";
 import { Icon } from "../Icon/Icon.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
-import '../../assets/NumberField.css';const numberField = "_numberField_htvlg_1";
-const numberFieldGroup = "_numberFieldGroup_htvlg_6";
-const numberFieldInput = "_numberFieldInput_htvlg_59";
-const numberFieldButton = "_numberFieldButton_htvlg_60";
+import { Field } from "../_base/Field/Field.js";
+import '../../assets/NumberField.css';const numberField = "_numberField_1knmk_1";
+const numberFieldGroup = "_numberFieldGroup_1knmk_6";
+const numberFieldInput = "_numberFieldInput_1knmk_59";
+const numberFieldButton = "_numberFieldButton_1knmk_60";
 const styles = {
   numberField,
   numberFieldGroup,
@@ -14,27 +14,19 @@ const styles = {
   numberFieldButton
 };
 const NumberField = ({
-  label,
   labelIncrement = "Increase",
   labelDecrement = "Decrease",
-  description,
-  defaultValue,
   minValue,
   maxValue,
   isInvalid = false,
   isDisabled = false,
-  isRequired = false,
-  errorMessage,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs(NumberField$1, { className: styles.numberField, defaultValue, minValue, maxValue, isInvalid, isDisabled, ...props, children: [
-    label ? /* @__PURE__ */ jsx(FieldHeader, { label, description, isInvalid, isRequired, errorMessage }) : null,
-    /* @__PURE__ */ jsxs(Group, { className: styles.numberFieldGroup, children: [
-      /* @__PURE__ */ jsx(Tooltip, { placement: "bottom", label: labelDecrement, children: /* @__PURE__ */ jsx(Button, { className: styles.numberFieldButton, slot: "decrement", children: /* @__PURE__ */ jsx(Icon, { iconName: "minus" }) }) }),
-      /* @__PURE__ */ jsx(Input, { className: styles.numberFieldInput }),
-      /* @__PURE__ */ jsx(Tooltip, { placement: "bottom", label: labelIncrement, children: /* @__PURE__ */ jsx(Button, { className: styles.numberFieldButton, slot: "increment", children: /* @__PURE__ */ jsx(Icon, { iconName: "plus" }) }) })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsx(Field, { as: NumberField$1, className: styles.numberField, minValue, maxValue, isInvalid, isDisabled, ...props, children: /* @__PURE__ */ jsxs(Group, { className: styles.numberFieldGroup, children: [
+    /* @__PURE__ */ jsx(Tooltip, { placement: "bottom", label: labelDecrement, children: /* @__PURE__ */ jsx(Button, { className: styles.numberFieldButton, slot: "decrement", children: /* @__PURE__ */ jsx(Icon, { iconName: "minus" }) }) }),
+    /* @__PURE__ */ jsx(Input, { className: styles.numberFieldInput }),
+    /* @__PURE__ */ jsx(Tooltip, { placement: "bottom", label: labelIncrement, children: /* @__PURE__ */ jsx(Button, { className: styles.numberFieldButton, slot: "increment", children: /* @__PURE__ */ jsx(Icon, { iconName: "plus" }) }) })
+  ] }) });
 };
 export {
   NumberField,

package/dist/components/NumberField/NumberField.js.map

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

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

@@ -3,7 +3,7 @@ import { VariantProps } from 'class-variance-authority';
 import { fgColorVariants } from '../../utils/fgColour/fgColor';
 declare const paragraph: (props?: ({
     size?: "lg" | "sm" | "xs" | "md" | null | undefined;
-    textAlign?: "start" | "center" | "end" | null | undefined;
+    textAlign?: "end" | "start" | "center" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type ParagraphVariants = VariantProps<typeof paragraph>;
 type FgColorVariants = VariantProps<typeof fgColorVariants>;

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

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { BackgroundVariants } from '../../utils/backgroundColour/backgroundColour';
 import { PaddingVariants } from '../../utils/padding/padding';
-type SectionPaddingValue = "default" | PaddingVariants['paddingX'];
+type SectionPaddingValue = 'default' | PaddingVariants['paddingX'];
 type SectionPadding = {
     paddingX?: SectionPaddingValue;
     paddingY?: SectionPaddingValue;
@@ -21,7 +21,7 @@ interface ContainerProps {
     className?: string;
     containerMaxWidth?: 'full-width' | 'page';
 }
-declare const Container: ({ children, className, containerMaxWidth }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
+declare const Container: ({ children, className, containerMaxWidth, }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
 interface SectionComponent extends React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>> {
     Container: typeof Container;
 }

package/dist/components/Section/Section.js

@@ -3,21 +3,21 @@ import React, { forwardRef } from "react";
 import { backgroundColorVariants } from "../../utils/backgroundColour/backgroundColour.js";
 import { paddingVariants } from "../../utils/padding/padding.js";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
-import '../../assets/Section.css';const section = "_section_dk7qx_1";
-const container = "_container_dk7qx_8";
-const pageWidth = "_pageWidth_dk7qx_16";
-const fullWidth = "_fullWidth_dk7qx_20";
-const paddingTopDefault = "_paddingTopDefault_dk7qx_34";
-const paddingRightDefault = "_paddingRightDefault_dk7qx_38";
-const paddingBottomDefault = "_paddingBottomDefault_dk7qx_42";
-const paddingLeftDefault = "_paddingLeftDefault_dk7qx_46";
+import '../../assets/Section.css';const section = "_section_1lo00_1";
+const container = "_container_1lo00_8";
+const pageWidth = "_pageWidth_1lo00_16";
+const fullWidth = "_fullWidth_1lo00_20";
+const paddingTopDefault = "_paddingTopDefault_1lo00_34";
+const paddingRightDefault = "_paddingRightDefault_1lo00_38";
+const paddingBottomDefault = "_paddingBottomDefault_1lo00_42";
+const paddingLeftDefault = "_paddingLeftDefault_1lo00_46";
 const styles = {
   section,
   container,
   pageWidth,
   fullWidth,
-  "paddingX-default": "_paddingX-default_dk7qx_24",
-  "paddingY-default": "_paddingY-default_dk7qx_29",
+  "paddingX-default": "_paddingX-default_1lo00_24",
+  "paddingY-default": "_paddingY-default_1lo00_29",
   paddingTopDefault,
   paddingRightDefault,
   paddingBottomDefault,
@@ -58,7 +58,7 @@ const Section = forwardRef(({
   paddingBottom,
   paddingLeft,
   paddingRight,
-  paddingX = "default",
+  paddingX,
   paddingY = "default",
   style,
   className

package/dist/components/SubHeading/SubHeading.d.ts

@@ -3,7 +3,7 @@ import { VariantProps } from 'class-variance-authority';
 import { fgColorVariants } from '../../utils/fgColour/fgColor';
 declare const subHeading: (props?: ({
     size?: "sm" | "xs" | null | undefined;
-    textAlign?: "start" | "center" | "end" | null | undefined;
+    textAlign?: "end" | "start" | "center" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type HeadingVariants = VariantProps<typeof subHeading>;
 type FgColorVariants = VariantProps<typeof fgColorVariants>;

package/dist/components/TagGroup/TagGroup.js

@@ -26,7 +26,7 @@ const TagGroup = ({
   return /* @__PURE__ */ jsxs(TagGroup$1, { className: styles.tagGroup, selectionMode, ...props, children: [
     /* @__PURE__ */ jsxs("span", { className: styles.spanContainer, children: [
       /* @__PURE__ */ jsx(FieldLabel, { children: label }),
-      clearButton && /* @__PURE__ */ jsx(Button, { styleType: "accent", emphasis: "quaternary", size: "sm", onClick: clearButtonOnClick, children: "Clear" })
+      clearButton && /* @__PURE__ */ jsx(Button, { styleVariant: "accent", emphasis: "quaternary", size: "sm", onPress: clearButtonOnClick, children: "Clear" })
     ] }),
     description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
     /* @__PURE__ */ jsx(TagList, { className: styles.tagGroupList, items, renderEmptyState, children })

package/dist/components/TextAreaField/TextAreaField.d.ts

@@ -1,3 +1,3 @@
 import { TextFieldProps } from '../TextField/TextField';
-export declare const TextAreaField: ({ label, description, defaultValue, errorMessage, isDisabled, isInvalid, isRequired, ...props }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextAreaField: (props: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default TextAreaField;

package/dist/components/TextAreaField/TextAreaField.js

@@ -1,26 +1,14 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { TextField, TextArea } from "react-aria-components";
-import { FieldHeader } from "../FieldHeader/FieldHeader.js";
-import '../../assets/TextAreaField.css';const textAreaField = "_textAreaField_bruz2_1";
-const validationError = "_validationError_bruz2_67";
+import { Field } from "../_base/Field/Field.js";
+import '../../assets/TextAreaField.css';const textAreaField = "_textAreaField_1hjyj_1";
+const validationError = "_validationError_1hjyj_71";
 const styles = {
   textAreaField,
   validationError
 };
-const TextAreaField = ({
-  label,
-  description,
-  defaultValue,
-  errorMessage,
-  isDisabled,
-  isInvalid,
-  isRequired = false,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxs(TextField, { className: styles.textAreaField, defaultValue, isDisabled, isInvalid, ...props, children: [
-    /* @__PURE__ */ jsx(FieldHeader, { label, description, errorMessage, isRequired, isInvalid }),
-    /* @__PURE__ */ jsx(TextArea, {})
-  ] });
+const TextAreaField = (props) => {
+  return /* @__PURE__ */ jsx(Field, { as: TextField, className: styles.textAreaField, ...props, children: /* @__PURE__ */ jsx(TextArea, {}) });
 };
 export {
   TextAreaField,

package/dist/components/TextAreaField/TextAreaField.js.map

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

package/dist/components/TextField/TextField.d.ts

@@ -1,34 +1,7 @@
-import { TextFieldProps as AriaTextFieldProps, ValidationResult } from 'react-aria-components';
+import { TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
 import { IconProps } from '../Icon/Icon';
-export interface TextFieldProps extends AriaTextFieldProps {
-    /**
-     * 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;
-    /**
-     * The default value for the TextField
-     */
-    defaultValue?: string;
-    /**
-     * Whether the TextField is invalid
-     */
-    isInvalid?: boolean;
-    /**
-     * Whether the TextField is required
-     */
-    isRequired?: boolean;
+import { FieldProps } from '../_base/Field';
+export interface TextFieldProps extends FieldProps<AriaTextFieldProps> {
     /**
      * Whether an icon should display at the start of the TextField
      */
@@ -38,5 +11,5 @@ export interface TextFieldProps extends AriaTextFieldProps {
      */
     iconEndProps?: IconProps;
 }
-export declare const TextField: ({ label, description, defaultValue, errorMessage, isDisabled, isInvalid, isRequired, iconStartProps, iconEndProps, ...props }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextField: ({ iconStartProps, iconEndProps, ...props }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default TextField;

package/dist/components/TextField/TextField.js

@@ -1,7 +1,7 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { TextField as TextField$1, Input } from "react-aria-components";
-import { FieldHeader } from "../FieldHeader/FieldHeader.js";
 import { Icon } from "../Icon/Icon.js";
+import { Field } from "../_base/Field/Field.js";
 import '../../assets/TextField.css';const textField = "_textField_1kom2_1";
 const inputWrapper = "_inputWrapper_1kom2_45";
 const iconStart = "_iconStart_1kom2_51";
@@ -13,25 +13,15 @@ const styles = {
   iconEnd
 };
 const TextField = ({
-  label,
-  description,
-  defaultValue,
-  errorMessage,
-  isDisabled,
-  isInvalid,
-  isRequired = false,
   iconStartProps,
   iconEndProps,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs(TextField$1, { className: styles.textField, defaultValue, isDisabled, isInvalid, ...props, children: [
-    /* @__PURE__ */ jsx(FieldHeader, { label, description, errorMessage, isRequired, isInvalid }),
-    /* @__PURE__ */ jsxs("div", { className: styles.inputWrapper, children: [
-      iconStartProps && /* @__PURE__ */ jsx(Icon, { ...iconStartProps, className: styles.iconStart }),
-      /* @__PURE__ */ jsx(Input, {}),
-      iconEndProps && /* @__PURE__ */ jsx(Icon, { ...iconEndProps, className: styles.iconEnd })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsx(Field, { as: TextField$1, className: styles.textField, ...props, children: /* @__PURE__ */ jsxs("div", { className: styles.inputWrapper, children: [
+    iconStartProps && /* @__PURE__ */ jsx(Icon, { ...iconStartProps, className: styles.iconStart }),
+    /* @__PURE__ */ jsx(Input, {}),
+    iconEndProps && /* @__PURE__ */ jsx(Icon, { ...iconEndProps, className: styles.iconEnd })
+  ] }) });
 };
 export {
   TextField,

package/dist/components/TextField/TextField.js.map

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

package/dist/components/ToggleIconButton/ToggleIconButton.d.ts

@@ -14,6 +14,14 @@ export interface ToggleIconButtonProps extends Omit<ToggleButtonProps, 'children
      *  Handler that is called when the press is released over the target.
      */
     onClick?: (e: PressEvent) => void;
+    /**
+     * Tooltip text to display on hover and focus
+     */
+    tooltipLabel?: string;
+    /**
+     * Tooltip placement relative to the button
+     */
+    tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
 }
-declare const ToggleIconButton: ({ iconProps, isLoading, size, focusStyle, isSelected, defaultSelected, isDisabled, autoFocus, type, onClick, ...props }: ToggleIconButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const ToggleIconButton: ({ iconProps, isLoading, size, focusStyle, tooltipLabel, tooltipPlacement, isSelected, defaultSelected, isDisabled, autoFocus, type, onClick, ...props }: ToggleIconButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default ToggleIconButton;

package/dist/components/ToggleIconButton/ToggleIconButton.js

@@ -5,6 +5,7 @@ import { ToggleButton } from "react-aria-components";
 import { Icon } from "../Icon/Icon.js";
 import LoadingSpinner from "../LoadingSpinner/LoadingSpinner.js";
 import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
 import '../../assets/ToggleIconButton.css';const toggleIconButton$1 = "_toggleIconButton_1pk2t_1";
 const sm = "_sm_1pk2t_26";
 const md = "_md_1pk2t_32";
@@ -36,6 +37,8 @@ const ToggleIconButton = ({
   isLoading = false,
   size = "md",
   focusStyle = "default",
+  tooltipLabel = "",
+  tooltipPlacement = "top",
   // react-aria props
   isSelected,
   defaultSelected,
@@ -65,16 +68,20 @@ const ToggleIconButton = ({
       onClick(e);
     }
   };
-  return /* @__PURE__ */ jsxs(ToggleButton, { className: `${toggleIconButton({
+  const buttonContent = /* @__PURE__ */ jsxs(ToggleButton, { className: `${toggleIconButton({
     size
   })} ${focusStyleVariants({
     focusStyle
-  })}`, ref: buttonRef, isSelected: selectedState, defaultSelected, isDisabled, autoFocus, type, onPress: handlePress, "aria-label": isLoading ? "Loading Spinner" : "Icon", style: {
+  })}`, ref: buttonRef, isSelected: selectedState, defaultSelected, isDisabled, autoFocus, type, onPress: handlePress, "aria-label": tooltipLabel ? void 0 : isLoading ? "Loading Spinner" : "Icon", style: {
     width: isLoading && buttonWidth ? `${buttonWidth}px` : void 0
   }, ...props, children: [
     isLoading && /* @__PURE__ */ jsx(LoadingSpinner, { size: "1x" }),
     !isLoading && /* @__PURE__ */ jsx(Icon, { ...iconProps })
   ] });
+  if (tooltipLabel) {
+    return /* @__PURE__ */ jsx(Tooltip, { label: tooltipLabel, placement: tooltipPlacement, isDisabled, children: buttonContent });
+  }
+  return buttonContent;
 };
 export {
   ToggleIconButton as default

package/dist/components/ToggleIconButton/ToggleIconButton.js.map

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

package/dist/components/Tooltip/Tooltip.js

@@ -18,7 +18,7 @@ const Tooltip = ({
 }) => {
   return /* @__PURE__ */ jsxs(TooltipTrigger, { isDisabled, delay, closeDelay, trigger, children: [
     children,
-    /* @__PURE__ */ jsx(Tooltip$1, { className: styles.tooltip, placement, ...props, children: label })
+    /* @__PURE__ */ jsx(Tooltip$1, { className: styles.tooltip, placement, ...props, children: /* @__PURE__ */ jsx("div", { "data-placement": placement, children: label }) })
   ] });
 };
 export {

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

@@ -0,0 +1,16 @@
+import { FieldHeaderProps } from '../../FieldHeader';
+import { default as React } from 'react';
+export interface FieldCommonProps extends FieldHeaderProps {
+    /**
+     * Whether the Field is disabled
+     */
+    isDisabled?: boolean;
+}
+export type FieldProps<T extends object> = T & FieldCommonProps;
+type FieldBaseProps<T extends object> = FieldProps<T> & {
+    as: React.ElementType;
+    children: React.ReactNode;
+    className?: React.ComponentProps<React.ElementType>['className'];
+};
+export declare function Field<T extends object>({ as, children, className, isInvalid, isDisabled, isRequired, ...props }: FieldBaseProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Field;

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

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { FieldHeader } from "../../FieldHeader/FieldHeader.js";
+import React from "react";
+function PolymorphicField({
+  as,
+  children,
+  ...props
+}) {
+  if (!as) {
+    console.warn("@alto/ui: Field expects an as prop");
+  }
+  return as ? React.createElement(as, props, children) : /* @__PURE__ */ jsx("div", { children });
+}
+function Field({
+  as,
+  children,
+  className,
+  isInvalid = false,
+  isDisabled = false,
+  isRequired = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(PolymorphicField, { as, isDisabled, isInvalid, className, isRequired, ...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, errorMessage: props == null ? void 0 : props.errorMessage, isInvalid, isRequired, labelFor: props == null ? void 0 : props.labelFor }) : null,
+    children
+  ] });
+}
+export {
+  Field,
+  Field as default
+};
+//# sourceMappingURL=Field.js.map

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

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

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

@@ -0,0 +1,2 @@
+export { Field } from './Field';
+export type { FieldProps } from './Field';

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

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

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

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

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
+export { default as AviosCurrencySymbol } from './AviosCurrencySymbol';
 export { default as Badge } from './Badge';
 export { default as Box } from './Box';
 export { default as Button } from './Button';
@@ -12,13 +13,16 @@ export { default as FieldDescription } from './FieldDescription';
 export { default as FieldError } from './FieldError';
 export { default as FieldHeader } from './FieldHeader';
 export { default as FieldLabel } from './FieldLabel';
+export { default as Fieldset } from './Fieldset';
+export { default as FieldsetHeader } from './FieldsetHeader';
+export { default as Form } from './Form';
 export { default as Grid } from './Grid';
 export { default as Heading } from './Heading';
 export { default as Icon } from './Icon';
 export { default as IconButton } from './IconButton';
+export { default as Image } from './Image';
 export { default as Link } from './Link';
 export { default as LoadingSpinner } from './LoadingSpinner';
-export { default as NewButton } from './NewButton';
 export { default as NumberField } from './NumberField';
 export { default as Paragraph } from './Paragraph';
 export { default as Radio } from './Radio';