@alto-avios/alto-ui 2.4.0 → 3.1.0

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_6jwot_1";
-const md = "_md_6jwot_16";
-const sm = "_sm_6jwot_25";
-const neutral = "_neutral_6jwot_33";
-const critical = "_critical_6jwot_37";
-const warning = "_warning_6jwot_41";
-const caution = "_caution_6jwot_45";
-const success = "_success_6jwot_49";
-const info = "_info_6jwot_53";
-const brand = "_brand_6jwot_57";
-const sale = "_sale_6jwot_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

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { BackgroundVariants } from '../../utils/backgroundColour/backgroundColour';
+import { BackgroundVariants } from '../../utils/backgroundColor/backgroundColor';
 import { FlexVariants } from '../../utils/flex/flex';
 import { BorderVariants } from '../../utils/border/border';
 import { PaddingVariants } from '../../utils/padding/padding';
@@ -24,6 +24,25 @@ 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;
+    /**
+     * @deprecated Use `backgroundColor` instead.
+     */
+    backgroundColour?: BackgroundVariants['backgroundColor'];
 }
-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, backgroundColour, width, maxWidth, minWidth, height, maxHeight, minHeight, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
 export default Box;

package/dist/components/Box/Box.js

@@ -1,21 +1,32 @@
 import { jsx } from "react/jsx-runtime";
-import { backgroundColorVariants } from "../../utils/backgroundColour/backgroundColour.js";
+import { backgroundColorVariants } from "../../utils/backgroundColor/backgroundColor.js";
 import { flexVariants } from "../../utils/flex/flex.js";
 import { borderVariants } from "../../utils/border/border.js";
 import { paddingVariants } from "../../utils/padding/padding.js";
 const Box = ({
   children,
   as: Component = "div",
+  backgroundColour,
   width,
   maxWidth,
   minWidth,
+  height,
+  maxHeight,
+  minHeight,
   ...props
 }) => {
+  if (backgroundColour && !props.backgroundColor) {
+    console.warn("Warning: `backgroundColour` is deprecated and will be removed in a future release. Please use `backgroundColor` instead.");
+  }
+  const resolvedBackgroundColor = props.backgroundColor ?? backgroundColour;
   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,
@@ -25,8 +36,9 @@ const Box = ({
   })} ${paddingVariants({
     ...props
   })} ${backgroundColorVariants({
+    backgroundColor: resolvedBackgroundColor,
     ...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_fkkc6_1";
-const sm = "_sm_fkkc6_25";
-const md = "_md_fkkc6_30";
-const lg = "_lg_fkkc6_35";
-const accentPrimary = "_accentPrimary_fkkc6_44";
-const accentSecondary = "_accentSecondary_fkkc6_67";
-const accentTertiary = "_accentTertiary_fkkc6_100";
-const accentQuaternary = "_accentQuaternary_fkkc6_129";
-const criticalPrimary = "_criticalPrimary_fkkc6_157";
-const criticalSecondary = "_criticalSecondary_fkkc6_185";
-const criticalTertiary = "_criticalTertiary_fkkc6_218";
-const criticalQuaternary = "_criticalQuaternary_fkkc6_247";
-const neutralPrimary = "_neutralPrimary_fkkc6_276";
-const neutralSecondary = "_neutralSecondary_fkkc6_304";
-const neutralTertiary = "_neutralTertiary_fkkc6_335";
-const neutralQuaternary = "_neutralQuaternary_fkkc6_364";
-const whitePrimary = "_whitePrimary_fkkc6_394";
-const whiteSecondary = "_whiteSecondary_fkkc6_423";
-const whiteTertiary = "_whiteTertiary_fkkc6_454";
-const whiteQuaternary = "_whiteQuaternary_fkkc6_483";
+import '../../assets/Button.css';const button$1 = "_button_1t97g_1";
+const content = "_content_1t97g_22";
+const isNotLoading = "_isNotLoading_1t97g_31";
+const loadingSpinner = "_loadingSpinner_1t97g_31";
+const isLoading = "_isLoading_1t97g_40";
+const focusWhite = "_focusWhite_1t97g_52";
+const sm = "_sm_1t97g_59";
+const md = "_md_1t97g_64";
+const lg = "_lg_1t97g_69";
+const fullWidth = "_fullWidth_1t97g_74";
+const textAlignLeft = "_textAlignLeft_1t97g_81";
+const textAlignCenter = "_textAlignCenter_1t97g_85";
+const textAlignRight = "_textAlignRight_1t97g_89";
+const accentPrimary = "_accentPrimary_1t97g_97";
+const accentSecondary = "_accentSecondary_1t97g_117";
+const accentTertiary = "_accentTertiary_1t97g_147";
+const accentQuaternary = "_accentQuaternary_1t97g_173";
+const criticalPrimary = "_criticalPrimary_1t97g_199";
+const criticalSecondary = "_criticalSecondary_1t97g_224";
+const criticalTertiary = "_criticalTertiary_1t97g_254";
+const criticalQuaternary = "_criticalQuaternary_1t97g_280";
+const neutralPrimary = "_neutralPrimary_1t97g_307";
+const neutralSecondary = "_neutralSecondary_1t97g_332";
+const neutralTertiary = "_neutralTertiary_1t97g_361";
+const neutralQuaternary = "_neutralQuaternary_1t97g_387";
+const whitePrimary = "_whitePrimary_1t97g_414";
+const whiteSecondary = "_whiteSecondary_1t97g_440";
+const whiteTertiary = "_whiteTertiary_1t97g_473";
+const whiteQuaternary = "_whiteQuaternary_1t97g_503";
 const styles = {
   button: button$1,
+  content,
+  isNotLoading,
+  loadingSpinner,
+  isLoading,
+  focusWhite,
   sm,
   md,
   lg,
+  fullWidth,
+  textAlignLeft,
+  textAlignCenter,
+  textAlignRight,
   accentPrimary,
-  "local-class": "_local-class_fkkc6_61",
   accentSecondary,
   accentTertiary,
   accentQuaternary,
@@ -47,8 +67,8 @@ const styles = {
   whiteSecondary,
   whiteTertiary,
   whiteQuaternary,
-  "fa-spinner-third": "_fa-spinner-third_fkkc6_514",
-  "icon-wrapper": "_icon-wrapper_fkkc6_519"
+  "fa-spinner-third": "_fa-spinner-third_1t97g_535",
+  "icon-wrapper": "_icon-wrapper_1t97g_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

package/dist/components/Button/Button.js.map

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

package/dist/components/CardSection/CardSection.d.ts

@@ -14,10 +14,16 @@ interface CardSectionComponent extends React.ForwardRefExoticComponent<CardSecti
     Media: typeof Media;
 }
 declare const CardSection: CardSectionComponent;
-declare const Content: ({ children }: {
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
-declare const Media: ({ children }: {
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+declare const Content: {
+    ({ children }: {
+        children: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const Media: {
+    ({ children }: {
+        children: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default CardSection;

package/dist/components/CardSection/CardSection.js

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import { forwardRef } from "react";
-import '../../assets/CardSection.css';const cardSection$1 = "_cardSection_1qtaq_1";
-const cardContainer = "_cardContainer_1qtaq_12";
-const cardGrid = "_cardGrid_1qtaq_24";
-const contentCell = "_contentCell_1qtaq_33";
-const contentBox = "_contentBox_1qtaq_40";
-const mediaCell = "_mediaCell_1qtaq_51";
-const isReversed = "_isReversed_1qtaq_65";
+import '../../assets/CardSection.css';const cardSection$1 = "_cardSection_1uwwa_1";
+const cardContainer = "_cardContainer_1uwwa_12";
+const cardGrid = "_cardGrid_1uwwa_24";
+const contentCell = "_contentCell_1uwwa_33";
+const contentBox = "_contentBox_1uwwa_40";
+const mediaCell = "_mediaCell_1uwwa_51";
+const isReversed = "_isReversed_1uwwa_65";
 const styles = {
   cardSection: cardSection$1,
   cardContainer,
@@ -35,9 +35,11 @@ CardSection.displayName = "CardSection";
 const Content = ({
   children
 }) => /* @__PURE__ */ jsx("div", { className: styles.contentCell, children: /* @__PURE__ */ jsx("article", { className: styles.contentBox, children }) });
+Content.displayName = "CardSection.Content";
 const Media = ({
   children
 }) => /* @__PURE__ */ jsx("figure", { className: styles.mediaCell, children });
+Media.displayName = "CardSection.Media";
 CardSection.Content = Content;
 CardSection.Media = Media;
 export {

package/dist/components/CardSection/CardSection.js.map

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