@alto-avios/alto-ui 2.3.3 → 3.0.0

package/dist/components/Image/index.js

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

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

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

package/dist/components/Link/Link.d.ts

@@ -1,69 +1,67 @@
 import { LinkProps as AriaLinkProps } from 'react-aria-components';
 import { IconProps } from '../Icon/Icon';
 export interface LinkProps extends AriaLinkProps {
+    /**
+     * The children of the component. A function may be provided to alter the children based on component state.
+     */
+    children?: React.ReactNode | string;
     /**
      * What the size of the Link is
      * @default 'md'
      */
     size?: 'xs' | 'sm' | 'md' | 'lg';
-    /**
-     * Whether the icon should be at the end of the Link
-     * @default true
-     */
-    iconEnd?: boolean;
-    /**
-     * The text to display in the Link
-     */
-    linkText?: string;
     /**
      * Whether the Link should be underlined
      * @default false
      */
     underline?: boolean;
     /**
-     * The URL the Link will navigate to
+     * Whether the link is disabled.
+     * @default false
      */
-    href?: string;
+    isDisabled?: boolean;
     /**
-     * The target attribute for the Link
-     * @default '_self'
+     * Whether an icon should display at the end of Link and icon properties
+     * @default { iconName: 'arrow-right' }
      */
-    target?: string;
+    iconEndProps?: IconProps | false;
     /**
-     * The relationship between the linked resource and the current page. See MDN.
+     * Whether an icon should display at the start of the Link and icon properties
      */
-    rel?: string;
+    iconStartProps?: IconProps;
     /**
-     * Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.
-     * @default false
+     * The URL the Link will navigate to
      */
-    download?: boolean | string;
+    href?: string;
     /**
-     * Whether the link is disabled.
-     * @default false
+     * The target attribute for the Link
+     * @default '_self'
      */
-    isDisabled?: boolean;
+    target?: string;
     /**
-     * Whether the element should receive focus on render.
-     * @default false
+     * The label for the external link
+     * @default "open in new tab"
      */
-    autoFocus?: boolean;
+    labelExternal?: string;
     /**
-     * A space-separated list of URLs to ping when the link is followed. See MDN.
+     * 	The focus style of the button
      */
-    ping?: string;
+    focusStyle?: 'default' | 'white';
     /**
-     * The children of the component. A function may be provided to alter the children based on component state.
+     * Whether an icon should display at the End of the Link
+     * @deprecated Use iconEndProps instead
      */
-    children?: React.ReactNode;
+    iconEnd?: boolean;
     /**
-     * 	The focus style of the button
+     * Whether an icon should display at the End of the Link
+     * @deprecated Use iconEndProps instead
      */
-    focusStyle?: 'default' | 'white';
+    iconProps?: IconProps;
     /**
-     * Whether an icon should display at the start of the TextField
+     * The text to display in the Link
+     * @deprecated Use children instead
      */
-    iconProps?: IconProps;
+    linkText?: string;
 }
-declare const Link: ({ size, iconEnd, underline, iconProps, linkText, href, target, rel, download, isDisabled, autoFocus, ping, focusStyle, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+declare const Link: ({ size, underline, iconStartProps, iconEndProps, iconProps, linkText, href, target, focusStyle, children, labelExternal, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
 export default Link;

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_kftxp_1";
-const xs = "_xs_kftxp_9";
-const sm = "_sm_kftxp_15";
-const md = "_md_kftxp_21";
-const lg = "_lg_kftxp_27";
-const underline = "_underline_kftxp_58";
-const iconEnd = "_iconEnd_kftxp_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/LoadingSpinner/LoadingSpinner.d.ts

@@ -2,11 +2,11 @@ export interface LoadingSpinnerProps {
     /**
      * What size loading spinner
      */
-    size?: "xs" | "lg" | "sm" | "1x" | "2x" | "3x" | "4x" | "5x" | "6x" | "7x" | "8x" | "9x" | "10x" | undefined;
+    size?: 'xs' | 'lg' | 'sm' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x' | undefined;
     /**
      * What size loading spinner
      */
-    buttonSize?: "sm" | "md" | "lg" | undefined;
+    buttonSize?: 'sm' | 'md' | 'lg' | undefined;
     className?: string;
 }
 declare const LoadingSpinner: ({ size, buttonSize, className, }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/LoadingSpinner/LoadingSpinner.js

@@ -2,15 +2,15 @@ import { jsx } from "react/jsx-runtime";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import { ProgressBar } from "react-aria-components";
 import { Icon } from "../Icon/Icon.js";
-import '../../assets/LoadingSpinner.css';const sm = "_sm_1643p_1";
-const md = "_md_1643p_5";
-const lg = "_lg_1643p_9";
+import '../../assets/LoadingSpinner.css';const sm = "_sm_1tfp3_1";
+const md = "_md_1tfp3_5";
+const lg = "_lg_1tfp3_9";
 const styles = {
   sm,
   md,
   lg,
-  "fa-spinner-third": "_fa-spinner-third_1643p_13",
-  "icon-wrapper": "_icon-wrapper_1643p_18"
+  "fa-spinner-third": "_fa-spinner-third_1tfp3_13",
+  "icon-wrapper": "_icon-wrapper_1tfp3_18"
 };
 const loadingSpinner = cva(styles.loadingSpinner, {
   variants: {

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

@@ -0,0 +1,25 @@
+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"
+     */
+    labelIncrement?: string;
+    /**
+     * The label for the decrement button
+     * @default "Decrease"
+     */
+    labelDecrement?: string;
+    /**
+     * The minimum value for the NumberField
+     *
+     */
+    minValue?: number;
+    /**
+     * The maximum value for the NumberField
+     */
+    maxValue?: number;
+}
+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

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NumberField as NumberField$1, Group, Button, Input } from "react-aria-components";
+import { Icon } from "../Icon/Icon.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+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,
+  numberFieldInput,
+  numberFieldButton
+};
+const NumberField = ({
+  labelIncrement = "Increase",
+  labelDecrement = "Decrease",
+  minValue,
+  maxValue,
+  isInvalid = false,
+  isDisabled = false,
+  ...props
+}) => {
+  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,
+  NumberField as default
+};
+//# sourceMappingURL=NumberField.js.map

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

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

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

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

package/dist/components/NumberField/index.js

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

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

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

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

@@ -3,11 +3,11 @@ 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>;
-type ParagraphSize = "xs" | "sm" | "md" | "lg";
+type ParagraphSize = 'xs' | 'sm' | 'md' | 'lg';
 export interface ParagraphProps extends ParagraphVariants {
     children: React.ReactNode;
     /**
@@ -19,12 +19,12 @@ export interface ParagraphProps extends ParagraphVariants {
      * The foreground color of the paragraph
      * @default "secondary"
      */
-    fgColor?: FgColorVariants["fgColor"];
+    fgColor?: FgColorVariants['fgColor'];
     /**
      * The text alignment of the paragraph
      * @default "start"
      */
-    textAlign?: "start" | "center" | "end";
+    textAlign?: 'start' | 'center' | 'end';
 }
 export declare const Paragraph: ({ children, size, fgColor, textAlign, ...props }: ParagraphProps) => import("react/jsx-runtime").JSX.Element;
 export default Paragraph;

package/dist/components/Radio/Radio.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { Radio as Radio$1 } from "react-aria-components";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
-import '../../assets/Radio.css';const radio$1 = "_radio_1qy5u_1";
-const defaultFocus = "_defaultFocus_1qy5u_41";
-const whiteFocus = "_whiteFocus_1qy5u_45";
+import '../../assets/Radio.css';const radio$1 = "_radio_y39zj_1";
+const defaultFocus = "_defaultFocus_y39zj_41";
+const whiteFocus = "_whiteFocus_y39zj_45";
 const styles = {
   radio: radio$1,
   defaultFocus,

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -30,5 +30,5 @@ interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'children'> {
      */
     isRequired?: boolean;
 }
-export declare const RadioGroup: ({ label, description, defaultValue, errorMessage, isDisabled, isInvalid, isRequired, children, ...props }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioGroup: ({ label, description, errorMessage, isDisabled, isInvalid, isRequired, children, ...props }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
 export default RadioGroup;

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,14 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { RadioGroup as RadioGroup$1 } from "react-aria-components";
 import { FieldHeader } from "../FieldHeader/FieldHeader.js";
-import '../../assets/RadioGroup.css';const radioGroup = "_radioGroup_18m1j_1";
+import '../../assets/RadioGroup.css';const radioGroup = "_radioGroup_1yeix_1";
 const styles = {
   radioGroup
 };
 const RadioGroup = ({
   label,
   description,
-  defaultValue,
   errorMessage,
   isDisabled,
   isInvalid,

package/dist/components/RadioGroup/RadioGroup.js.map

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

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

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+import { BackgroundVariants } from '../../utils/backgroundColour/backgroundColour';
+import { PaddingVariants } from '../../utils/padding/padding';
+type SectionPaddingValue = 'default' | PaddingVariants['paddingX'];
+type SectionPadding = {
+    paddingX?: SectionPaddingValue;
+    paddingY?: SectionPaddingValue;
+    paddingTop?: SectionPaddingValue;
+    paddingRight?: SectionPaddingValue;
+    paddingBottom?: SectionPaddingValue;
+    paddingLeft?: SectionPaddingValue;
+};
+export interface SectionProps extends BackgroundVariants, SectionPadding {
+    children: React.ReactNode;
+    containerMaxWidth?: 'full-width' | 'page';
+    style?: React.CSSProperties;
+    className?: string;
+}
+interface ContainerProps {
+    children: React.ReactNode;
+    className?: string;
+    containerMaxWidth?: 'full-width' | 'page';
+}
+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;
+}
+declare const Section: SectionComponent;
+export default Section;

package/dist/components/Section/Section.js

@@ -0,0 +1,103 @@
+import { jsx } from "react/jsx-runtime";
+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_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_1lo00_24",
+  "paddingY-default": "_paddingY-default_1lo00_29",
+  paddingTopDefault,
+  paddingRightDefault,
+  paddingBottomDefault,
+  paddingLeftDefault
+};
+const sectionPaddingVariants = cva("", {
+  variants: {
+    paddingX: {
+      default: styles["paddingX-default"]
+    },
+    paddingY: {
+      default: styles["paddingY-default"]
+    },
+    paddingTop: {
+      default: styles["paddingTopDefault"]
+    },
+    paddingRight: {
+      default: styles["paddingRightDefault"]
+    },
+    paddingBottom: {
+      default: styles["paddingBottomDefault"]
+    },
+    paddingLeft: {
+      default: styles["paddingLeftDefault"]
+    }
+  }
+});
+const Container = ({
+  children,
+  className,
+  containerMaxWidth = "page"
+}) => /* @__PURE__ */ jsx("div", { className: `${styles.container} ${styles[`${containerMaxWidth}Width`]} ${className || ""}`, children });
+const Section = forwardRef(({
+  children,
+  containerMaxWidth = "page",
+  backgroundColour,
+  paddingTop,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  paddingX,
+  paddingY = "default",
+  style,
+  className
+}, ref) => {
+  return /* @__PURE__ */ jsx("section", { ref, className: `
+        ${styles.section}
+        ${paddingVariants({
+    paddingTop: paddingTop !== "default" ? paddingTop : void 0,
+    paddingBottom: paddingBottom !== "default" ? paddingBottom : void 0,
+    paddingLeft: paddingLeft !== "default" ? paddingLeft : void 0,
+    paddingRight: paddingRight !== "default" ? paddingRight : void 0,
+    paddingX: paddingX !== "default" ? paddingX : void 0,
+    paddingY: paddingY !== "default" ? paddingY : void 0
+  })}
+        ${sectionPaddingVariants({
+    paddingTop: paddingTop === "default" ? "default" : void 0,
+    paddingBottom: paddingBottom === "default" ? "default" : void 0,
+    paddingLeft: paddingLeft === "default" ? "default" : void 0,
+    paddingRight: paddingRight === "default" ? "default" : void 0,
+    paddingX: paddingX === "default" ? "default" : void 0,
+    paddingY: paddingY === "default" ? "default" : void 0
+  })}
+        ${backgroundColorVariants({
+    backgroundColour
+  })} 
+        ${className || ""}
+      `.trim(), style, children: React.Children.map(children, (child) => {
+    if (React.isValidElement(child) && child.type === Container) {
+      return React.cloneElement(child, {
+        ...child.props,
+        containerMaxWidth
+      });
+    }
+    return child;
+  }) });
+});
+Section.displayName = "Section";
+Section.Container = Container;
+export {
+  Section as default
+};
+//# sourceMappingURL=Section.js.map

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

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

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

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

package/dist/components/Section/index.js

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

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

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

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/SubHeading/SubHeading.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import { fgColorVariants } from "../../utils/fgColour/fgColor.js";
-import '../../assets/SubHeading.css';const subHeading$1 = "_subHeading_qng6l_1";
-const xs = "_xs_qng6l_8";
-const sm = "_sm_qng6l_15";
-const start = "_start_qng6l_22";
-const center = "_center_qng6l_26";
-const end = "_end_qng6l_30";
+import '../../assets/SubHeading.css';const subHeading$1 = "_subHeading_up5r4_1";
+const xs = "_xs_up5r4_8";
+const sm = "_sm_up5r4_15";
+const start = "_start_up5r4_22";
+const center = "_center_up5r4_26";
+const end = "_end_up5r4_30";
 const styles = {
   subHeading: subHeading$1,
   xs,
@@ -18,8 +18,8 @@ const styles = {
 const subHeading = cva(styles.subHeading, {
   variants: {
     size: {
-      "xs": styles.xs,
-      "sm": styles.sm
+      xs: styles.xs,
+      sm: styles.sm
     },
     textAlign: {
       start: styles.start,

package/dist/components/Tag/Tag.d.ts

@@ -26,10 +26,10 @@ export interface TagProps extends AriaTagProps {
     /**
      * Whether the tag is removable
      */
-    isRemovable?: boolean; /**
+    isRemovable?: boolean /**
     /**
      * The focus style of the button
-     */
+     */;
     focusStyle?: 'default' | 'white';
 }
 export declare const Tag: ({ children, id, leadingIconProps, isDisabled, isRemovable, focusStyle, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Tag/Tag.js

@@ -3,9 +3,9 @@ import { Tag as Tag$1 } from "react-aria-components";
 import { Icon } from "../Icon/Icon.js";
 import { IconButton } from "../IconButton/IconButton.js";
 import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
-import '../../assets/Tag.css';const tag = "_tag_15o1i_1";
-const isRemovable = "_isRemovable_15o1i_21";
-const iconWrapper = "_iconWrapper_15o1i_121";
+import '../../assets/Tag.css';const tag = "_tag_ob7tq_1";
+const isRemovable = "_isRemovable_ob7tq_21";
+const iconWrapper = "_iconWrapper_ob7tq_123";
 const styles = {
   tag,
   isRemovable,
@@ -20,7 +20,7 @@ const Tag = ({
   focusStyle = "default",
   ...props
 }) => {
-  let textValue = typeof children === "string" ? children : void 0;
+  const textValue = typeof children === "string" ? children : void 0;
   return /* @__PURE__ */ jsxs(Tag$1, { className: `${styles.tag} ${isRemovable2 ? styles.isRemovable : ""} ${focusStyleVariants({
     focusStyle
   })}`, isDisabled, id: id == null ? void 0 : id.toString(), textValue, ...props, children: [

package/dist/components/TagGroup/TagGroup.d.ts

@@ -1,8 +1,8 @@
 import { TagGroupProps as AriaTagGroupProps, PressEvent, TagListProps } from 'react-aria-components';
-export interface TagGroupProps<T> extends Omit<AriaTagGroupProps, "children">, Pick<TagListProps<T>, "items" | "children" | "renderEmptyState"> {
+export interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children'>, Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'> {
     label?: string;
     description?: string;
-    selectionMode?: "single" | "multiple";
+    selectionMode?: 'single' | 'multiple';
     clearButton?: boolean;
     clearButtonOnClick?: (e: PressEvent) => void;
 }