@alto-avios/alto-ui 2.3.3 → 3.0.0

package/dist/components/AviosCurrencySymbol/AviosCurrencySymbol.js

@@ -0,0 +1,80 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { c as cva } from "../../index-Bi3v_EjJ.js";
+import '../../assets/AviosCurrencySymbol.css';const styles = {
+  "aviosCurrencySymbol-primary": "_aviosCurrencySymbol-primary_q5gfd_1",
+  "aviosCurrencySymbol-secondary": "_aviosCurrencySymbol-secondary_q5gfd_11",
+  "aviosCurrencySymbol-white": "_aviosCurrencySymbol-white_q5gfd_21"
+};
+const aviosCurrencySymbol = cva(styles.aviosCurrencySymbol, {
+  variants: {
+    styleVariant: {
+      primary: styles["aviosCurrencySymbol-primary"],
+      secondary: styles["aviosCurrencySymbol-secondary"],
+      white: styles["aviosCurrencySymbol-white"]
+    }
+  },
+  defaultVariants: {
+    styleVariant: "primary"
+  }
+});
+const AviosCurrencyKindPath = ({
+  kind = "collect"
+}) => {
+  switch (kind) {
+    case "collect":
+      return /* @__PURE__ */ jsx("path", { d: "M11.6476 17.5179C11.8882 17.5179 12.0832 17.3229 12.0832 17.0823L12.0832 14.0326H15.1325C15.3731 14.0326 15.5681 13.8376 15.5681 13.5969V11.8543C15.5681 11.6137 15.3731 11.4187 15.1325 11.4187L12.0832 11.4187L12.0832 8.36908C12.0832 8.12848 11.8882 7.93343 11.6476 7.93343H9.90494C9.66433 7.93343 9.46928 8.12848 9.46928 8.36908L9.46928 11.4187L6.4193 11.4187C6.17869 11.4187 5.98364 11.6137 5.98364 11.8543V13.5969C5.98364 13.8376 6.17869 14.0326 6.4193 14.0326H9.46928L9.46928 17.0823C9.46928 17.3229 9.66433 17.5179 9.90494 17.5179H11.6476Z", fill: "currentColor" });
+    case "spend":
+      return /* @__PURE__ */ jsx("path", { opacity: "0.9999", d: "M14.0173 8.87795C14.0303 8.87795 14.0431 8.87861 14.0557 8.87989C14.0686 8.8812 14.0813 8.88317 14.0938 8.88577C14.2643 8.9211 14.3923 9.07207 14.3923 9.25295V15.253C14.3923 15.4601 14.2244 15.628 14.0173 15.628H12.5173C12.3102 15.628 12.1423 15.4601 12.1423 15.253L12.1423 12.7188L7.66103 17.2001C7.51458 17.3465 7.27715 17.3465 7.1307 17.2001L6.07004 16.1394C5.92359 15.993 5.92359 15.7555 6.07004 15.6091L10.5512 11.128L8.01733 11.128C7.81022 11.128 7.64233 10.9601 7.64233 10.753L7.64233 9.25295C7.64233 9.04585 7.81022 8.87795 8.01733 8.87795H14.0173Z", fill: "currentColor" });
+    case "balance":
+      return null;
+  }
+};
+const DEFAULT_DIMENSIONS = {
+  width: "24px",
+  height: "24px"
+};
+const AviosCurrencySymbol = ({
+  kind = "collect",
+  styleVariant = "primary",
+  width,
+  height,
+  label,
+  "aria-label": ariaLabel,
+  ...props
+}) => {
+  const dimensions = React.useMemo(() => {
+    if (width && height) {
+      return {
+        width,
+        height
+      };
+    }
+    if (width) {
+      return {
+        width,
+        height: width
+      };
+    }
+    if (height) {
+      return {
+        width: height,
+        height
+      };
+    }
+    return DEFAULT_DIMENSIONS;
+  }, [width, height]);
+  const screenReaderLabel = label || ariaLabel || `Avios ${kind} currency symbol`;
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: aviosCurrencySymbol({
+    styleVariant
+  }), ...dimensions, ...props, "aria-label": screenReaderLabel, children: [
+    /* @__PURE__ */ jsx("path", { d: "M21.1869 10.3546C20.5194 9.19955 14.5269 3.34955 7.2594 2.88455C5.9919 2.80205 4.7919 3.49955 4.2669 4.61705C2.8794 7.59455 1.1844 14.2546 3.6369 20.3221C4.0869 21.4321 5.1069 22.1221 6.2994 22.1221C6.4344 22.1221 6.5619 22.1146 6.6969 22.0996C14.9919 21.0796 20.3169 15.3121 21.2169 13.4446C21.5544 12.7396 21.9144 11.6596 21.1719 10.3696L21.1869 10.3546Z" }),
+    /* @__PURE__ */ jsx(AviosCurrencyKindPath, { kind })
+  ] });
+};
+AviosCurrencySymbol.displayName = "AviosCurrencySymbol";
+export {
+  AviosCurrencySymbol,
+  AviosCurrencySymbol as default
+};
+//# sourceMappingURL=AviosCurrencySymbol.js.map

package/dist/components/AviosCurrencySymbol/AviosCurrencySymbol.js.map

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

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

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

package/dist/components/AviosCurrencySymbol/index.js

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

package/dist/components/Badge/Badge.js

@@ -2,17 +2,17 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import { Icon } from "../Icon/Icon.js";
 import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
-import '../../assets/Badge.css';const badge$1 = "_badge_g5nmg_1";
-const md = "_md_g5nmg_16";
-const sm = "_sm_g5nmg_25";
-const neutral = "_neutral_g5nmg_33";
-const critical = "_critical_g5nmg_37";
-const warning = "_warning_g5nmg_41";
-const caution = "_caution_g5nmg_45";
-const success = "_success_g5nmg_49";
-const info = "_info_g5nmg_53";
-const brand = "_brand_g5nmg_57";
-const sale = "_sale_g5nmg_61";
+import '../../assets/Badge.css';const badge$1 = "_badge_cjbra_1";
+const md = "_md_cjbra_16";
+const sm = "_sm_cjbra_25";
+const neutral = "_neutral_cjbra_33";
+const critical = "_critical_cjbra_37";
+const warning = "_warning_cjbra_41";
+const caution = "_caution_cjbra_45";
+const success = "_success_cjbra_49";
+const info = "_info_cjbra_53";
+const brand = "_brand_cjbra_57";
+const sale = "_sale_cjbra_61";
 const styles = {
   badge: badge$1,
   md,

package/dist/components/Box/Box.d.ts

@@ -8,12 +8,12 @@ export interface BoxProps extends BackgroundVariants, FlexVariants, BorderVarian
     /**
      * The HTML element to render the Box as.
      */
-    as?: "div" | "article";
+    as?: 'div' | 'article';
     /**
      * The width of the Box.
      * Accepts any valid CSS unit or "full"
      */
-    width?: "full" | string;
+    width?: 'full' | string;
     /**
      * The maximum width of the Box.
      * Accepts any valid CSS unit.
@@ -24,6 +24,21 @@ export interface BoxProps extends BackgroundVariants, FlexVariants, BorderVarian
      * Accepts any valid CSS unit.
      */
     minWidth?: string;
+    /**
+     * The height of the Box.
+     * Accepts any valid CSS unit.
+     */
+    height?: string;
+    /**
+     * The maximum height of the Box.
+     * Accepts any valid CSS unit.
+     */
+    maxHeight?: string;
+    /**
+     * The minimum height of the Box.
+     * Accepts any valid CSS unit.
+     */
+    minHeight?: string;
 }
-export declare const Box: ({ children, as: Component, width, maxWidth, minWidth, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Box: ({ children, as: Component, width, maxWidth, minWidth, height, maxHeight, minHeight, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
 export default Box;

package/dist/components/Box/Box.js

@@ -9,13 +9,19 @@ const Box = ({
   width,
   maxWidth,
   minWidth,
+  height,
+  maxHeight,
+  minHeight,
   ...props
 }) => {
   const borderWidth = !(props == null ? void 0 : props.borderWidth) && props.borderColour !== "none" ? "sm" : props.borderWidth;
-  const styles = {
+  const stylesProp = {
     width: width === "full" ? "100%" : width,
+    height: height === "full" ? "100%" : height,
     maxWidth,
-    minWidth
+    minWidth,
+    maxHeight,
+    minHeight
   };
   return /* @__PURE__ */ jsx(Component, { className: `${borderVariants({
     ...props,
@@ -26,7 +32,7 @@ const Box = ({
     ...props
   })} ${backgroundColorVariants({
     ...props
-  })}`, style: styles, children });
+  })}`, style: stylesProp, children });
 };
 export {
   Box,

package/dist/components/Box/Box.js.map

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

package/dist/components/Button/Button.d.ts

@@ -1,18 +1,27 @@
-import { default as React } from 'react';
-import { PressEvent } from 'react-aria';
+import { default as React, ComponentType, ElementType, ReactNode } from 'react';
+import { AriaButtonOptions } from '@react-aria/button';
+import { HoverProps } from '@react-aria/interactions';
+import { IconProps } from '../Icon/Icon';
 export type ButtonSize = 'lg' | 'md' | 'sm';
-/**
- * Primary UI component for user interaction
- */
-export interface ButtonProps {
+export type ButtonTextAlignement = 'left' | 'center' | 'right';
+export type DefaultButtonProps = ButtonProps<'button'>;
+export type ButtonProps<T extends ElementType = 'button'> = AriaButtonOptions<T> & HoverProps & {
     /**
-     * What the base style of button is
+     * The HTML element to be rendered as the button.
      */
+    as?: T;
+    elementType?: 'a' | 'button';
     /**
      * What the base style of button is
      * @default 'accent'
+     * @deprecated use styleVariant instead
      */
     styleType?: 'accent' | 'critical' | 'neutral' | 'white';
+    /**
+     * What the base style of button is
+     * @default 'accent'
+     */
+    styleVariant?: 'accent' | 'critical' | 'neutral' | 'white';
     /**
      * What the purpose is for the button
      * @default 'primary'
@@ -24,81 +33,164 @@ export interface ButtonProps {
      */
     size?: ButtonSize;
     /**
-     * Whether the button is loading
+     * Whether an icon should display at the end of Button and icon properties
+     * @default
      */
-    isLoading?: boolean;
+    iconEndProps?: IconProps;
+    /**
+     * Whether an icon should display at the start of the Button and icon properties
+     */
+    iconStartProps?: IconProps;
     /**
      * Whether the button leading has an icon
+     * @deprecated use iconStartProps instead
      */
     hasLeadingIcon?: boolean;
     /**
      * Leading icon name
+     * @deprecated use iconStartProps instead
      */
     leadingIconName?: string;
     /**
      * Whether the button trailing has an icon
+     * @deprecated use iconEndProps instead
      */
     hasTrailingIcon?: boolean;
     /**
      * Trailing icon name
+     * @deprecated use iconEndProps instead
      */
     trailingIconName?: string;
+    /**
+     * isLoading is a boolean that will show a spinner in the button
+     */
+    isLoading?: boolean;
+    /**
+     * The text alignment of the button
+     */
+    textAlign?: ButtonTextAlignement;
+    /**
+     * The content for the button.
+     */
+    children?: ReactNode;
     /**
      * 	Whether the element should receive focus on render.
      */
     type?: 'button' | 'submit' | 'reset';
     /**
-     * 	Handler to be called when the button is clicked.
+     * Whether the button should be full width.
      */
-    onClick?: (e: PressEvent) => void;
+    fullWidth?: boolean;
     /**
-     * The <form> element to associate the button with. The value of this attribute must be the id of a <form> in the same document
+     * @deprecated onPress should be preferred
+     * Handler to be called when the button is clicked.
      */
-    form?: string;
+    onClick?: React.MouseEventHandler;
     /**
-     * The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner.
+     * The target of the link (if `as` is set to 'a').
      */
-    formAction?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
     /**
-     * 	Indicates how to encode the form data that is submitted.
+     *  What type of focus style to apply to the button.
      */
-    formEncType?: string;
+    focusStyle?: 'default' | 'white';
     /**
-     * 	Indicates the HTTP method used to submit the form
+     * Passthrough props for the button element.
      */
-    formMethod?: string;
+    passthroughProps?: Partial<T extends ComponentType<infer P> ? P : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : never>;
+};
+export declare const Button: React.ForwardRefExoticComponent<AriaButtonOptions<React.ElementType> & HoverProps & {
     /**
-     * 	Indicates that the form is not to be validated when it is submitted.
+     * The HTML element to be rendered as the button.
      */
-    formNoValidate?: boolean;
+    as?: React.ElementType | undefined;
+    elementType?: "a" | "button";
     /**
-     * 	Overrides the target attribute of the button's form owner.
+     * What the base style of button is
+     * @default 'accent'
+     * @deprecated use styleVariant instead
      */
-    formTarget?: string;
+    styleType?: "accent" | "critical" | "neutral" | "white";
     /**
-     * 	Submitted as a pair with the button's value as part of the form data.
+     * What the base style of button is
+     * @default 'accent'
      */
-    name?: string;
+    styleVariant?: "accent" | "critical" | "neutral" | "white";
     /**
-     * 	The value associated with the button's name when it's submitted with the form data.
+     * What the purpose is for the button
+     * @default 'primary'
      */
-    value?: string;
+    emphasis?: "primary" | "secondary" | "tertiary" | "quaternary";
     /**
-     * 	Whether the button is disabled.
+     * How large should the button be?
+     * @default 'md'
+     */
+    size?: ButtonSize;
+    /**
+     * Whether an icon should display at the end of Button and icon properties
+     * @default
      */
-    isDisabled?: boolean;
+    iconEndProps?: IconProps;
+    /**
+     * Whether an icon should display at the start of the Button and icon properties
+     */
+    iconStartProps?: IconProps;
+    /**
+     * Whether the button leading has an icon
+     * @deprecated use iconStartProps instead
+     */
+    hasLeadingIcon?: boolean;
+    /**
+     * Leading icon name
+     * @deprecated use iconStartProps instead
+     */
+    leadingIconName?: string;
+    /**
+     * Whether the button trailing has an icon
+     * @deprecated use iconEndProps instead
+     */
+    hasTrailingIcon?: boolean;
+    /**
+     * Trailing icon name
+     * @deprecated use iconEndProps instead
+     */
+    trailingIconName?: string;
+    /**
+     * isLoading is a boolean that will show a spinner in the button
+     */
+    isLoading?: boolean;
+    /**
+     * The text alignment of the button
+     */
+    textAlign?: ButtonTextAlignement;
+    /**
+     * The content for the button.
+     */
+    children?: ReactNode;
     /**
      * 	Whether the element should receive focus on render.
      */
-    autoFocus?: boolean;
+    type?: "button" | "submit" | "reset";
     /**
-     * 	The content for the button
+     * Whether the button should be full width.
      */
-    children?: React.ReactNode;
+    fullWidth?: boolean;
     /**
-     * 	The focus style of the button
+     * @deprecated onPress should be preferred
+     * Handler to be called when the button is clicked.
      */
-    focusStyle?: 'default' | 'white';
-}
-export declare const Button: ({ styleType, emphasis, size, isLoading, focusStyle, children, form, formAction, formEncType, formMethod, formNoValidate, formTarget, name, value, isDisabled, autoFocus, type, onClick, hasLeadingIcon, leadingIconName, hasTrailingIcon, trailingIconName, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    onClick?: React.MouseEventHandler;
+    /**
+     * The target of the link (if `as` is set to 'a').
+     */
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    /**
+     *  What type of focus style to apply to the button.
+     */
+    focusStyle?: "default" | "white";
+    /**
+     * Passthrough props for the button element.
+     */
+    passthroughProps?: Partial<any> | undefined;
+} & React.RefAttributes<any>>;
 export default Button;

package/dist/components/Button/Button.js

@@ -1,37 +1,57 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
-import { useRef, useState, useEffect } from "react";
-import { Button as Button$1 } from "react-aria-components";
+import { forwardRef } from "react";
+import { useButton } from "@react-aria/button";
+import { useObjectRef, mergeProps } from "@react-aria/utils";
+import { useHover } from "@react-aria/interactions";
+import { useFocusRing } from "@react-aria/focus";
 import { Icon } from "../Icon/Icon.js";
 import LoadingSpinner from "../LoadingSpinner/LoadingSpinner.js";
 import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
-import '../../assets/Button.css';const button$1 = "_button_1fapr_1";
-const sm = "_sm_1fapr_25";
-const md = "_md_1fapr_30";
-const lg = "_lg_1fapr_35";
-const accentPrimary = "_accentPrimary_1fapr_44";
-const accentSecondary = "_accentSecondary_1fapr_67";
-const accentTertiary = "_accentTertiary_1fapr_98";
-const accentQuaternary = "_accentQuaternary_1fapr_127";
-const criticalPrimary = "_criticalPrimary_1fapr_155";
-const criticalSecondary = "_criticalSecondary_1fapr_183";
-const criticalTertiary = "_criticalTertiary_1fapr_214";
-const criticalQuaternary = "_criticalQuaternary_1fapr_243";
-const neutralPrimary = "_neutralPrimary_1fapr_272";
-const neutralSecondary = "_neutralSecondary_1fapr_300";
-const neutralTertiary = "_neutralTertiary_1fapr_329";
-const neutralQuaternary = "_neutralQuaternary_1fapr_358";
-const whitePrimary = "_whitePrimary_1fapr_388";
-const whiteSecondary = "_whiteSecondary_1fapr_417";
-const whiteTertiary = "_whiteTertiary_1fapr_447";
-const whiteQuaternary = "_whiteQuaternary_1fapr_476";
+import '../../assets/Button.css';const button$1 = "_button_1pjm3_1";
+const content = "_content_1pjm3_22";
+const isNotLoading = "_isNotLoading_1pjm3_31";
+const loadingSpinner = "_loadingSpinner_1pjm3_31";
+const isLoading = "_isLoading_1pjm3_40";
+const focusWhite = "_focusWhite_1pjm3_52";
+const sm = "_sm_1pjm3_59";
+const md = "_md_1pjm3_64";
+const lg = "_lg_1pjm3_69";
+const fullWidth = "_fullWidth_1pjm3_74";
+const textAlignLeft = "_textAlignLeft_1pjm3_81";
+const textAlignCenter = "_textAlignCenter_1pjm3_85";
+const textAlignRight = "_textAlignRight_1pjm3_89";
+const accentPrimary = "_accentPrimary_1pjm3_97";
+const accentSecondary = "_accentSecondary_1pjm3_117";
+const accentTertiary = "_accentTertiary_1pjm3_147";
+const accentQuaternary = "_accentQuaternary_1pjm3_173";
+const criticalPrimary = "_criticalPrimary_1pjm3_199";
+const criticalSecondary = "_criticalSecondary_1pjm3_224";
+const criticalTertiary = "_criticalTertiary_1pjm3_254";
+const criticalQuaternary = "_criticalQuaternary_1pjm3_280";
+const neutralPrimary = "_neutralPrimary_1pjm3_307";
+const neutralSecondary = "_neutralSecondary_1pjm3_332";
+const neutralTertiary = "_neutralTertiary_1pjm3_361";
+const neutralQuaternary = "_neutralQuaternary_1pjm3_387";
+const whitePrimary = "_whitePrimary_1pjm3_414";
+const whiteSecondary = "_whiteSecondary_1pjm3_440";
+const whiteTertiary = "_whiteTertiary_1pjm3_473";
+const whiteQuaternary = "_whiteQuaternary_1pjm3_503";
 const styles = {
   button: button$1,
+  content,
+  isNotLoading,
+  loadingSpinner,
+  isLoading,
+  focusWhite,
   sm,
   md,
   lg,
+  fullWidth,
+  textAlignLeft,
+  textAlignCenter,
+  textAlignRight,
   accentPrimary,
-  "local-class": "_local-class_1fapr_61",
   accentSecondary,
   accentTertiary,
   accentQuaternary,
@@ -47,8 +67,8 @@ const styles = {
   whiteSecondary,
   whiteTertiary,
   whiteQuaternary,
-  "fa-spinner-third": "_fa-spinner-third_1fapr_507",
-  "icon-wrapper": "_icon-wrapper_1fapr_512"
+  "fa-spinner-third": "_fa-spinner-third_1pjm3_535",
+  "icon-wrapper": "_icon-wrapper_1pjm3_540"
 };
 const button = cva(styles.button, {
   variants: {
@@ -80,62 +100,105 @@ const button = cva(styles.button, {
       secondary: styles.whiteSecondary,
       tertiary: styles.whiteTertiary,
       quaternary: styles.whiteQuaternary
+    },
+    fullWidth: {
+      true: styles.fullWidth
+    },
+    focusStyle: {
+      default: void 0,
+      white: styles.focusWhite
+    },
+    isLoading: {
+      false: styles.isNotLoading,
+      true: styles.isLoading
+    },
+    textAlign: {
+      left: styles.textAlignLeft,
+      center: styles.textAlignCenter,
+      right: styles.textAlignRight
     }
   },
+  compoundVariants: [{
+    size: "md",
+    accent: "primary",
+    className: styles.accentPrimary
+  }],
   defaultVariants: {
     size: "md"
   }
 });
-const Button = ({
-  // Custom Props
-  styleType = "accent",
+const Button = forwardRef(function Button2({
+  as,
+  elementType,
+  styleType,
+  styleVariant,
   emphasis = "primary",
   size = "md",
-  isLoading = false,
-  focusStyle = "default",
-  children,
-  // react-aria props
-  form,
-  formAction,
-  formEncType,
-  formMethod,
-  formNoValidate,
-  formTarget,
-  name,
-  value,
-  isDisabled,
-  autoFocus,
-  type,
-  onClick,
-  hasLeadingIcon,
+  iconStartProps,
+  iconEndProps,
   leadingIconName,
-  hasTrailingIcon,
   trailingIconName,
+  children,
+  fullWidth: fullWidth2,
+  textAlign = "center",
+  focusStyle = "default",
+  passthroughProps,
+  isLoading: isLoading2 = false,
   ...props
-}) => {
-  const buttonRef = useRef(null);
-  const [buttonWidth, setButtonWidth] = useState(null);
-  useEffect(() => {
-    if (buttonRef.current) {
-      setButtonWidth(buttonRef.current.offsetWidth);
+}, forwardedRef) {
+  const ref = useObjectRef(forwardedRef);
+  const {
+    buttonProps,
+    isPressed
+  } = useButton({
+    ...props,
+    elementType: elementType ?? as
+  }, ref);
+  const {
+    hoverProps,
+    isHovered
+  } = useHover(props);
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing(props);
+  const getAriaLabel = () => {
+    if (isLoading2) {
+      return "Loading Spinner";
+    }
+    const label = buttonProps["aria-label"] || (typeof children === "string" ? children : void 0);
+    if (props.isDisabled && label) {
+      return `${label}, unavailable`;
     }
-  }, [isLoading]);
-  return /* @__PURE__ */ jsxs(Button$1, { className: `${button({
+    return label;
+  };
+  const resolvedStyleVariant = styleVariant ?? styleType ?? "accent";
+  const className = button({
     size,
-    [styleType]: emphasis
-  })} ${focusStyleVariants({
+    fullWidth: fullWidth2,
+    focusStyle,
+    isLoading: isLoading2,
+    textAlign,
+    [resolvedStyleVariant]: emphasis
+  });
+  const Component = elementType ?? as ?? "button";
+  const resolvedIconStartProps = leadingIconName ? {
+    iconName: leadingIconName
+  } : iconStartProps;
+  const resolvedIconEndProps = trailingIconName ? {
+    iconName: trailingIconName
+  } : iconEndProps;
+  return /* @__PURE__ */ jsx(Component, { className: `${className} ${focusStyleVariants({
     focusStyle
-  })}`, ref: buttonRef, form, formAction, formEncType, formMethod, formNoValidate, formTarget, name, value, isDisabled, autoFocus, type, onPress: onClick, "aria-label": isLoading ? "Loading Spinner" : void 0, style: {
-    width: isLoading && buttonWidth ? `${buttonWidth}px` : "auto"
-  }, ...props, children: [
-    isLoading && /* @__PURE__ */ jsx(LoadingSpinner, { buttonSize: size }),
-    !isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
-      hasLeadingIcon && leadingIconName ? /* @__PURE__ */ jsx(Icon, { iconName: leadingIconName || "" }) : null,
+  })}`, ref, "data-focused": isFocusVisible ? true : void 0, "data-hovered": isHovered ? true : void 0, "data-pressed": isPressed ? true : void 0, "aria-label": getAriaLabel(), "aria-disabled": props.isDisabled ? true : void 0, ...mergeProps(buttonProps, hoverProps, focusProps), ...passthroughProps, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+    isLoading2 && /* @__PURE__ */ jsx(LoadingSpinner, { className: styles.loadingSpinner, size: size === "lg" ? "lg" : "1x", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs("span", { className: styles.content, children: [
+      resolvedIconStartProps && /* @__PURE__ */ jsx(Icon, { ...resolvedIconStartProps, "aria-hidden": "true" }),
       children,
-      hasTrailingIcon && trailingIconName ? /* @__PURE__ */ jsx(Icon, { iconName: trailingIconName || "" }) : null
+      resolvedIconEndProps && /* @__PURE__ */ jsx(Icon, { ...resolvedIconEndProps, "aria-hidden": "true" })
     ] })
-  ] });
-};
+  ] }) });
+});
 export {
   Button,
   Button as default