@arc-ui/components 12.0.0-beta.13 → 12.0.0-beta.14.1

package/dist/types/components/Hidden/Hidden.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-export declare const Hidden: React.FC<HiddenProps>;
-interface HiddenProps {
-    xs?: boolean;
-    s?: boolean;
-    m?: boolean;
-    l?: boolean;
-    xl?: boolean;
-    children: React.ReactNode;
-}
-export {};

package/dist/types/components/Hidden/index.d.ts

@@ -1 +0,0 @@
-export { Hidden } from "./Hidden";

package/dist/types/components/Icon/Icon.d.ts

@@ -1,37 +0,0 @@
-import React, { FC } from "react";
-import { ArcIcon } from "../../types/arc-icon";
-/**
- * Use `Icon` to display brand iconography.
- */
-export declare const Icon: FC<IconProps>;
-export declare const colors: readonly ["auto", "brand", "statusRed", "statusAmber", "statusGreen"];
-export interface IconProps {
-    /**
-     * Color of the Icon.
-     */
-    color?: (typeof colors)[number];
-    /**
-     * Should the Icon component be styled as an inline element?
-     */
-    isInline?: boolean;
-    /**
-     * Icon variant.
-     */
-    icon?: ArcIcon | React.ReactElement<SVGElement>;
-    /**
-     * Alternative text label for the Icon.
-     */
-    label?: string;
-    /**
-     * Size of the Icon, in pixels.
-     */
-    size?: number;
-    /**
-     * value for data-testid
-     */
-    testId?: string;
-    /**
-     * hides the icon from screenreaders
-     */
-    isPresentationIcon?: boolean;
-}

package/dist/types/components/Icon/index.d.ts

@@ -1 +0,0 @@
-export { Icon } from "./Icon";

package/dist/types/components/Image/Image.d.ts

@@ -1,97 +0,0 @@
-import { FC, HTMLAttributes, ReactNode } from "react";
-import { anchorPoints } from "../../helpers";
-/**
- * Use `Image` to render a single image, or set of images, with support for
- * image fitting and art direction.
- */
-export declare const Image: FC<ImageProps> & {
-    Source: typeof ImageSource;
-};
-export declare const ImageSource: FC<ImageSourceProps>;
-export interface ImageSourceProps {
-    /**
-     * The intrinsic height of the ImageSource, in pixels
-     */
-    height?: number;
-    /**
-     * Media condition (similar to a media query) that the user agent will evaluate for each ImageSource element. Same format as [media](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-media), i.e. `(min-width: 600px)`
-     */
-    media?: string;
-    /**
-     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-sizes) attribute. Only required if srcSet is switching widths.
-     */
-    sizes?: string;
-    /**
-     * A comma-separated list indicating a set of possible sources for the user agent to use for different screen sizes for the ImageSource element. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-srcset), i.e. `my-image-200.png 200w, my-image-200.png 200w`.
-     */
-    srcSet: string;
-    /**
-     * MIME type for the resource URL(s) in the ImageSource element's srcset attribute. If the user agent does not support the given type, the element is skipped. Same format as [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-type), i.e. `image/jpeg`.
-     */
-    type?: string;
-    /**
-     * The intrinsic width of the ImageSource, in pixels
-     */
-    width?: number;
-}
-export declare const fitOptions: readonly ["cover"];
-export declare const loadingOptions: readonly ["eager", "lazy"];
-export declare const overlayOptions: readonly ["scrimBottomDark"];
-export interface ImageProps extends HTMLAttributes<HTMLElement> {
-    /**
-     * Alternative text for the Image, shown if the image cannot be displayed.
-     */
-    alt?: string;
-    /**
-     * Anchor point for the Image if using fit="cover".
-     */
-    anchor?: (typeof anchorPoints)[number];
-    /**
-     * Optionally enable HTML <picture> functionality by passing `Image.Source`
-     * components as children.
-     */
-    children?: ReactNode;
-    /**
-     * Fallback hexadecimal fill color. The intent is to increase perceived loading speed. Do not use on images with transparency. Requires that an explicit width and height be set for the image.
-     */
-    fillColor?: string;
-    /**
-     * Fit of the Image.
-     */
-    fit?: (typeof fitOptions)[number];
-    /**
-     * Height dimension of the Image, in pixels. If fit="cover", the height in which
-     * to fit the Image. Otherwise, the intrinsic height of the Image element.
-     */
-    height?: number;
-    /**
-     * If true the image will fade in when its loaded, resulting in a smooth user experience.
-     */
-    fadeOnLoad?: boolean;
-    /**
-     * Loading behaviour of the Image.
-     */
-    loading?: (typeof loadingOptions)[number];
-    /**
-     * Apply an overlay to the Image, e.g. a scrim gradient for text legibility.
-     * Should not be used if the image has a rasterized overlay.
-     */
-    overlay?: (typeof overlayOptions)[number];
-    /**
-     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes) attribute. Only required if srcSet is switching widths. Ignored if `children` (<source> elements) are present.
-     */
-    sizes?: string;
-    /**
-     * Image `src`. Used if srcSet is not defined, or as a fallback.
-     */
-    src: string;
-    /**
-     * A comma-separated list indicating a set of possible sources for the user agent to use for different screen sizes for the Image. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes), i.e. `my-image-200.png 200w, my-image-200.png 200w`. Ignored if `children` (<source> elements) are present.
-     */
-    srcSet?: string;
-    /**
-     * Width dimension of the Image, in pixels. If fit="cover", the width in which
-     * to fit the Image. Otherwise, the intrinsic width of the Image element.
-     */
-    width?: number;
-}

package/dist/types/components/Image/index.d.ts

@@ -1 +0,0 @@
-export { Image, loadingOptions } from "./Image";

package/dist/types/components/ImpactCard/ImpactCard.d.ts

@@ -1,58 +0,0 @@
-import React, { FC } from "react";
-import { type HeadingLevel } from "../Heading/Heading";
-import { type ImageProps } from "../Image/Image";
-import { type CardFooterProps } from "../CardFooter";
-import { type CardHeadingSize } from "../CardHeading";
-/** Use `ImpactCard` for important content that needs additional hierarchy and prominence.  */
-export declare const ImpactCard: FC<ImpactCardProps>;
-type ImpactCardPathway = "light" | "dark";
-export interface ImpactCardProps {
-    /**
-     * Heading for the ImpactCard.
-     */
-    heading: string;
-    /**
-     * Heading size for the ImpactCard.
-     */
-    headingSize?: CardHeadingSize;
-    /**
-     * Url for the ImpactCard. Makes the whole card a link
-     */
-    url: string;
-    /**
-     * Sets a dark or light background for the ImpactCard.
-     */
-    pathway?: ImpactCardPathway;
-    /**
-     * Heading level for the ImpactCard heading.
-     */
-    headingLevel?: HeadingLevel;
-    /**
-     * Uppercase label for the ImpactCard.
-     */
-    label?: string;
-    /**
-     * Sets a minimum height for the ImpactCard.
-     */
-    minHeight?: number;
-    /**
-     * Click handler for the ImpactCard.
-     */
-    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
-    /**
-     * Object of `data-` attributes to render on internal anchor element, e.g.
-     * `{ data-analytics-link: "My link"}` => `<a data-analytics-link="My link">`.
-     */
-    linkData?: {
-        [key: string]: string;
-    };
-    /**
-     * Image props for the ImpactCard. Consider avoiding alt if the image is for decorative purposes only.
-     */
-    img: Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "anchor" | "fadeOnLoad">;
-    /**
-     * Icon for the ImpactCard CTA button
-     */
-    buttonIcon?: CardFooterProps["buttonIcon"];
-}
-export {};

package/dist/types/components/ImpactCard/index.d.ts

@@ -1 +0,0 @@
-export { ImpactCard, type ImpactCardProps } from "./ImpactCard";

package/dist/types/components/InformationCard/InformationCard.d.ts

@@ -1,62 +0,0 @@
-import React, { FC } from "react";
-import { type ImageProps } from "../Image/Image";
-import { type HeadingLevel } from "../Heading/Heading";
-import { type ButtonV2Props } from "../ButtonV2/ButtonV2";
-import { ArcIcon } from "../../types/arc-icon";
-/** Use `InformationCard` for flexibility and the ability to focus and highlight product specific content. */
-export declare const InformationCard: FC<InformationCardProps>;
-type InformationCardImage = Pick<ImageProps, "alt" | "loading" | "width" | "height" | "src" | "fadeOnLoad">;
-type InformationCardButtonProps = Pick<ButtonV2Props, "label" | "onClick" | "href">;
-export interface InformationCardProps {
-    /**
-     * Heading for the InformationCard.
-     */
-    heading: string;
-    /**
-     * Heading level for the InformationCard heading.
-     */
-    headingLevel?: HeadingLevel;
-    /**
-     * Text content for the InformationCard
-     */
-    text?: string;
-    /**
-     * Uppercase label for the InformationCard.
-     */
-    label?: string;
-    /**
-     * Url for the InformationCard. Makes the whole card a link and hides `button` if provided.
-     */
-    cardUrl?: string;
-    /**
-     * Click handler for the InformationCard. Only applied when a card url is provided.
-     */
-    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
-    /**
-     * Footer logo for the InformationCard.
-     */
-    footerLogo?: InformationCardImage;
-    /**
-     * Header image for the InformationCard.
-     */
-    image?: InformationCardImage;
-    /**
-     * Header icon for the InformationCard.
-     */
-    icon?: ArcIcon;
-    /**
-     * Sets a minimum height for the InformationCard.
-     */
-    minHeight?: number;
-    /**
-     * Badges for the InformationCard.
-     */
-    badges?: {
-        text: string;
-    }[];
-    /**
-     * Cta button for the InformationCard. Hidden if there is a card url.
-     */
-    button?: InformationCardButtonProps;
-}
-export {};

package/dist/types/components/InformationCard/index.d.ts

@@ -1 +0,0 @@
-export { InformationCard, type InformationCardProps } from "./InformationCard";

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

@@ -1,52 +0,0 @@
-import React from "react";
-/**
- * Use `Link` to direct users to a new page or piece of information.
- */
-export declare const Link: React.FC<LinkProps>;
-interface LinkProps {
-    /**
-     * Id attribute for `Link`.
-     */
-    id?: string;
-    /**
-     * href attribute for `Link`.
-     */
-    href?: string;
-    /**
-     * Screen reader text for `Link`, which is visually hidden.
-     */
-    screenReaderText?: string;
-    /**
-     * title attribute for `Link`.
-     */
-    title?: string;
-    /**
-     * Rel attribute for `Link`.
-     */
-    rel?: string;
-    /**
-     * Configures the size of `Link`.
-     */
-    size?: "s" | "m" | "l";
-    /**
-     * Removes underline if true.
-     */
-    isImplied?: boolean;
-    /**
-     * Renders as a button element if true.
-     */
-    isButton?: boolean;
-    /**
-     * Click handler for `Link`.
-     */
-    onClick?: (e: React.MouseEvent) => void;
-    /**
-     * Target for `Link`.
-     */
-    target?: "_self" | "_blank" | "_parent" | "_top";
-    /**
-     * Content for `Link`.
-     */
-    children: string;
-}
-export {};

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

@@ -1 +0,0 @@
-export { Link } from "./Link";

package/dist/types/components/Markup/Markup.d.ts

@@ -1,15 +0,0 @@
-import { FC, ReactNode } from "react";
-/**
- * Use `Markup` to display HTML-formatted text.
- */
-export declare const Markup: FC<MarkupProps>;
-export interface MarkupProps {
-    /**
-     * HTML-formatted text to display in Markup.
-     */
-    children: ReactNode;
-    /**
-     * Should the Markup width be constrained to a typographic measure?
-     */
-    isMeasured?: boolean;
-}

package/dist/types/components/Markup/index.d.ts

@@ -1 +0,0 @@
-export { Markup } from "./Markup";

package/dist/types/components/MediaCard/MediaCard.d.ts

@@ -1,56 +0,0 @@
-import React, { FC } from "react";
-import { type HeadingLevel } from "../Heading/Heading";
-import { type CardFooterProps } from "../CardFooter";
-import { MediaCardImage, MediaCardVideo } from "./types";
-/**
- * Use `MediaCard` to contain content and an image about a single subject.
- */
-export declare const MediaCard: FC<MediaCardProps>;
-type MediaCardIcon = "play" | "arrow";
-export interface MediaCardProps {
-    /**
-     * Heading for the MediaCard.
-     */
-    heading: string;
-    /**
-     * Heading level for the MediaCard heading.
-     */
-    headingLevel?: HeadingLevel;
-    /**
-     * Text content for the MediaCard
-     */
-    text?: string;
-    /**
-     * Uppercase label for the MediaCard.
-     */
-    label?: string;
-    /**
-     * Url for the MediaCard. Makes the whole card a link.
-     */
-    url?: string;
-    /**
-     * Text to show adjacent to the cta, can be either a date or text. Its recommended to pass dates as Date objects so the component can render them correctly.
-     */
-    metaText?: CardFooterProps["metaText"];
-    /**
-     * MediaCard will have a contained look and feel with a white background if set to true.
-     */
-    isContained?: boolean;
-    /**
-     * Image for video embed for the MediaCard. Supported video platforms are YouTube and Vimeo.
-     */
-    media: MediaCardImage | MediaCardVideo;
-    /**
-     * Icon for the MediaCard Cta button
-     */
-    buttonIcon?: MediaCardIcon;
-    /**
-     * Sets a minimum height for the MediaCard.
-     */
-    minHeight?: number;
-    /**
-     * Click handler for the MediaCard. Only applied when a url is provided.
-     */
-    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
-}
-export {};

package/dist/types/components/MediaCard/index.d.ts

@@ -1 +0,0 @@
-export { MediaCard, type MediaCardProps } from "./MediaCard";

package/dist/types/components/MediaCard/types/index.d.ts

@@ -1,2 +0,0 @@
-export { type MediaCardImage } from "./media-card-image";
-export { type MediaCardVideo } from "./media-card-video";

package/dist/types/components/MediaCard/types/media-card-image.d.ts

@@ -1,4 +0,0 @@
-import { type ImageProps } from "src/components/Image/Image";
-export interface MediaCardImage extends Partial<Pick<ImageProps, "alt" | "loading" | "sizes" | "srcSet" | "width" | "height" | "fadeOnLoad">>, Pick<ImageProps, "src"> {
-    type: "img";
-}

package/dist/types/components/MediaCard/types/media-card-video.d.ts

@@ -1,4 +0,0 @@
-import { type VideoPlayerProps } from "src/components/VideoPlayer";
-export interface MediaCardVideo extends Partial<Omit<VideoPlayerProps, "url" | "title" | "description" | "transcriptLink" | "isSupportingTextHidden">>, Pick<VideoPlayerProps, "title" | "url" | "description"> {
-    type: "video";
-}

package/dist/types/components/Modal/Modal.d.ts

@@ -1,50 +0,0 @@
-import React, { FC } from "react";
-import { ButtonV2Props } from "../ButtonV2/ButtonV2";
-/** Use `Modal` to display information that needs immediate action from a user. */
-export declare const Modal: FC<ModalProps>;
-export interface ModalProps {
-    /**
-     * Title for the modal. This will be announced by screen readers when the modal opens.
-     */
-    title: string;
-    /**
-     * Role for the modal. use alertdialog if explicit user input is required e.g deleting an account. role alertdialog will remove the ability to close the modal by either the esc key being pressed, clicking the cross icon or clicking outside.
-     */
-    role?: "dialog" | "alertdialog";
-    /**
-     * Whether to return focus to the element that was focused before the modal opened. True by default.
-     */
-    shouldReturnFocus?: boolean;
-    /**
-     * Description for the modal. This will be announced by screen readers when the modal opens.
-     */
-    description?: string;
-    /**
-     * ID for the element description to be announced by screenreaders in addition to the title.
-     */
-    ariaDescribedBy?: string;
-    /**
-     * Configurable actions for the modal.
-     */
-    actions?: Pick<ButtonV2Props, "form" | "type" | "buttonStyle" | "icon" | "iconPosition" | "href" | "id" | "label" | "onClick" | "isLoading" | "ariaLabel" | "rel">[];
-    /**
-     * Function to be called when the modal has been requested to close by either the esc key being pressed, outside the dialog being clicked or the close button being clicked. The callback must set the open state of the modal to false. This function is ignored if the `role` prop is set to `alertdialog`. You can prevent this behavior with the `dialog` role by ommitting this prop.
-     */
-    onRequestClose?: () => void;
-    /**
-     * Size of the modal dialog.
-     */
-    size?: "s" | "m" | "l";
-    /**
-     * Set modal open or closed.
-     */
-    isOpen?: boolean;
-    /**
-     * Enables the dialog content to be scrolled internally.
-     */
-    isContentScrollable?: boolean;
-    /**
-     * Custom content for `Modal`.
-     */
-    children?: React.ReactNode;
-}

package/dist/types/components/Modal/index.d.ts

@@ -1 +0,0 @@
-export { Modal } from "./Modal";

package/dist/types/components/Pagination/Pagination.d.ts

@@ -1,19 +0,0 @@
-import { FC } from "react";
-/**
- * Use `Pagination` to navigate through multiple pages of content.
- */
-export declare const Pagination: FC<PaginationProps>;
-export interface PaginationProps {
-    /**
-     * Number of pages for the pagination
-     */
-    pageCount: number;
-    /**
-     * Default page to be selected on render. If not provided defaults to 1.
-     */
-    defaultSelectedPage?: number;
-    /**
-     * Function to call when the page changes
-     */
-    onPageChange: (selectedPage: number) => void;
-}

package/dist/types/components/Pagination/index.d.ts

@@ -1 +0,0 @@
-export { Pagination } from "./Pagination";

package/dist/types/components/PaginationSimple/PaginationSimple.d.ts

@@ -1,43 +0,0 @@
-import React, { FC } from "react";
-/**
- * TODO! Revise method of aligning svg's
- */
-/**
- * Use `PaginationSimple` to navigate through multiple pages of content.
- */
-export declare const PaginationSimple: FC<PaginationSimpleProps>;
-export interface PaginationSimpleProps {
-    /**
-     * hide buttons if true.
-     */
-    hide?: {
-        first?: boolean;
-        prev?: boolean;
-        next?: boolean;
-        last?: boolean;
-    };
-    /**
-     * makes each button a link
-     */
-    hrefs?: {
-        first?: string;
-        prev?: string;
-        next?: string;
-        last?: string;
-    };
-    /**
-     * if true buttons will hug either edge of the parent element
-     */
-    isFluid?: boolean;
-    /**
-     * if true ellipsis will show in-between previous and next
-     */
-    /**
-     * Function to call when page is changed. This is called with type and event
-     */
-    showEllipsis?: boolean;
-    /**
-     * Function to call when page is changed. This is called with type and event
-     */
-    onPageChange?: (e: React.MouseEvent, type?: "prev" | "next" | "first" | "last") => void;
-}

package/dist/types/components/PaginationSimple/index.d.ts

@@ -1 +0,0 @@
-export { PaginationSimple } from "./PaginationSimple";

package/dist/types/components/Popover/Popover.d.ts

@@ -1,73 +0,0 @@
-import React, { FC, ReactNode } from "react";
-/** Use `Popover` to display content in a portal, triggered by a button. */
-export declare const Popover: FC<PopoverProps>;
-export interface PopoverProps {
-    /**
-     * Content to render within Popover Trigger
-     */
-    children?: React.ReactNode;
-    /**
-     * The preferred side of the anchor to render against when open
-     */
-    side?: "left" | "right" | "bottom" | "top";
-    /**
-     * The distance in pixels from the anchor
-     */
-    sideOffset?: 0 | 4 | 8 | 12 | 16 | 32;
-    /**
-     * The arrow connecting the `Popover` content to the trigger
-     */
-    arrow?: boolean;
-    /**
-     * The preferred alignment against the anchor. May change when collisions occur.
-     */
-    align?: "start" | "center" | "end";
-    /**
-     * An offset in pixels from the "start" or "end" alignment options.
-     */
-    alignOffset?: number;
-    /**
-     * Content inside the Popover
-     */
-    content?: ReactNode;
-    /**
-     * Determine if the popover is open
-     */
-    open?: boolean;
-    /**
-     * Maximum width of the Popover
-     */
-    maxWidth?: number;
-    /**
-     * Background theme of the Popover
-     */
-    background?: "dark" | "light" | "brand";
-    /**
-     * Called when focus moves into the popover
-     */
-    onOpenAutoFocus?: (event: Event) => void;
-    /**
-     * Called when focus moves out of the popover
-     */
-    onCloseAutoFocus?: (event: Event) => void;
-    /**
-     * Called when the Escape key is pressed
-     */
-    onEscapeKeyDown?: (event: KeyboardEvent) => void;
-    /**
-     * Called when a pointer down event occurs outside the popover
-     */
-    onPointerDownOutside?: (event: Event) => void;
-    /**
-     * Called when focus moves outside the popover
-     */
-    onFocusOutside?: (event: Event) => void;
-    /**
-     * Called when any interaction happens outside the popover
-     */
-    onInteractOutside?: (event: Event) => void;
-    /**
-     * Called when the open state of the popover changes.
-     */
-    onOpenChange?: (open: boolean) => void;
-}

package/dist/types/components/Popover/index.d.ts

@@ -1 +0,0 @@
-export { Popover } from "./Popover";

package/dist/types/components/Poster/Poster.d.ts

@@ -1,29 +0,0 @@
-import { FC, ReactNode } from "react";
-import { PosterImage } from "./PosterImage";
-import { PosterVideo } from "./PosterVideo";
-/**
- * Use `Poster` to compose content on an image or video background. BT Brand Only.
- */
-export declare const Poster: FC<PosterProps> & {
-    Image: typeof PosterImage;
-    Video: typeof PosterVideo;
-};
-export interface PosterProps {
-    /**
-     * Poster background to overlay content on top of. Must be one of Poster.Image or Poster.Video.
-     */
-    background: ReactNode;
-    /**
-     * Contents of the Poster. Each item will be wrapped in an PosterItem component.
-     */
-    children: ReactNode;
-    /**
-     * Apply an overlay to the Poster background, e.g. a scrim gradient for text legibility.
-     */
-    overlay?: boolean;
-    /**
-     * The background surface colour to show behind the Poster content before it loads.
-     * If using `overlay`, the gradient will match the surface.
-     */
-    surface?: "dark-neutral-02" | "light-neutral-01";
-}