@arc-ui/components 10.0.3 → 10.2.0

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

@@ -2,7 +2,7 @@ import { FC, ReactNode } from "react";
 /**
  * Use `Align` to align items horizontally or vertically.
  */
-declare const Align: FC<AlignProps>;
+export declare const Align: FC<AlignProps>;
 export interface AlignItemProps {
     /**
      * Contents of the AlignItem.
@@ -28,4 +28,3 @@ export interface AlignProps {
      */
     vertical?: "top" | "center" | "bottom";
 }
-export default Align;

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

@@ -1 +1 @@
-export { default } from "./Align";
+export { Align } from "./Align";

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

@@ -2,7 +2,7 @@ import { FC } from "react";
 /**
  * Use `Base` as the root component of the arc system.
  */
-declare const Base: FC<BaseProps>;
+export declare const Base: FC<BaseProps>;
 export interface BaseProps {
     /**
      * Brand theme to apply to Base.
@@ -13,4 +13,3 @@ export interface BaseProps {
      */
     children: any;
 }
-export default Base;

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

@@ -1 +1 @@
-export { default } from "./Base";
+export { Base } from "./Base";

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

@@ -2,7 +2,7 @@ import { FC } from "react";
 /**
  * Use `BrandLogo` to display the brand logo.
  */
-declare const BrandLogo: FC<BrandLogoProps>;
+export declare const BrandLogo: FC<BrandLogoProps>;
 export declare const colors: readonly ["auto", "brand"];
 export declare const subBrands: readonly ["redcare", "wholesale"];
 export interface BrandLogoProps {
@@ -23,4 +23,3 @@ export interface BrandLogoProps {
      */
     subBrand?: typeof subBrands[number];
 }
-export default BrandLogo;

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

@@ -1 +1 @@
-export { default } from "./BrandLogo";
+export { BrandLogo } from "./BrandLogo";

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

@@ -0,0 +1,18 @@
+import { FC, ReactNode } from "react";
+import BreadcrumbsItem from "./BreadcrumbsItem/BreadcrumbsItem";
+import BreadcrumbsLink from "./BreadcrumbsLink/BreadcrumbsLink";
+/** Use `Breadcrumbs` to add a secondary navigation scheme that reveals the user’s location. Each item should be wrapped with `Breadcrumbs.Item` */
+export declare const Breadcrumbs: FC<BreadcrumbsProps> & {
+    Item: typeof BreadcrumbsItem;
+    Link: typeof BreadcrumbsLink;
+};
+export interface BreadcrumbsProps {
+    /**
+     * Contents of the Breadcrumbs. Should only contain `Breadcrumb.Item`.
+     */
+    children: ReactNode;
+    /**
+     * Select if you want the Nav items to be Light
+     */
+    isLight?: boolean;
+}

package/dist/types/components/Breadcrumbs/BreadcrumbsItem/BreadcrumbsItem.d.ts

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from "react";
+declare const BreadcrumbsItem: FC<ItemProps>;
+export interface ItemProps {
+    /**
+     * Render child elements within `Breadcrumbs.Item`
+     */
+    children?: ReactNode;
+    /**
+     * Use icon as a spacer that will be positioned after `Breadcrumbs.Item`.
+     */
+    spacerIconAfter?: boolean;
+    /**
+     * Use icon as a spacer that will be positioned before `Breadcrumbs.Item`.
+     */
+    spacerIconBefore?: boolean;
+}
+export default BreadcrumbsItem;

package/dist/types/components/Breadcrumbs/BreadcrumbsLink/BreadcrumbsLink.d.ts

@@ -0,0 +1,25 @@
+import React, { FC } from "react";
+declare const BreadcrumbsLink: FC<LinkProps>;
+export interface LinkProps {
+    /**
+     * Where breadcrumb linkshould lead too
+     */
+    href?: string;
+    /**
+     * Pass a function to the breadcrumb item
+     */
+    onClick?: () => void;
+    /**
+     * Highlights item in breadcrumb (This also removes the a tag and any links)
+     */
+    isActive?: boolean;
+    /**
+     * Ref to `<a>` tag
+     */
+    ref?: React.Ref<HTMLAnchorElement>;
+    /**
+     * React router property
+     */
+    navigate?: () => void;
+}
+export default BreadcrumbsLink;

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

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

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

@@ -5,7 +5,7 @@ export declare type Ref = React.Ref<ElementUnion> | null;
 /**
  * Use `Button` to allow users to take actions with clicks and taps.
  */
-declare const Button: FC<ButtonProps>;
+export declare const Button: FC<ButtonProps>;
 export interface ButtonIconProps {
     /**
      * Icon variant.
@@ -93,4 +93,4 @@ export interface ButtonProps extends ButtonElementProps, LinkElementProps {
      */
     supportingText?: string;
 }
-export default Button;
+export {};

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

@@ -1 +1 @@
-export { default } from "./Button";
+export { Button } from "./Button";

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

@@ -2,7 +2,7 @@ import React, { FC, HTMLAttributes } from "react";
 /**
  * Use `Card` to contain content and actions about a single subject.
  */
-declare const Card: FC<CardProps> & {
+export declare const Card: FC<CardProps> & {
     Block: typeof CardBlock;
     Image: typeof CardImage;
 };
@@ -116,5 +116,9 @@ export interface CardProps extends HTMLAttributes<HTMLElement> {
      * The size for the Card title.
      */
     titleSize?: TitleSize;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
 }
-export default Card;
+export {};

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

@@ -1 +1 @@
-export { default } from "./Card";
+export { Card } from "./Card";

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

@@ -3,7 +3,7 @@ declare type EventType = React.ChangeEvent<HTMLInputElement>;
 /**
  *  Use `Checkbox` to allow users to select individual options.
  */
-declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 export interface CheckboxProps {
     /**
      * Error message for the Checkbox.
@@ -55,4 +55,4 @@ export interface CheckboxProps {
      */
     value?: string;
 }
-export default Checkbox;
+export {};

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

@@ -1 +1 @@
-export { default } from "./Checkbox";
+export { Checkbox } from "./Checkbox";

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

@@ -2,7 +2,7 @@ import { FC } from "react";
 /**
  * `Clock` is a demo component that shows the current time.
  */
-declare const Clock: FC<ClockProps>;
+export declare const Clock: FC<ClockProps>;
 export declare type LocaleType = "en-GB" | "en-US" | "ar-EG";
 export interface ClockProps {
     /**
@@ -10,4 +10,3 @@ export interface ClockProps {
      */
     locale?: LocaleType;
 }
-export default Clock;

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

@@ -1,2 +1,2 @@
-export { default } from "./Clock";
+export { Clock } from "./Clock";
 export { default as ClockRehydrator } from "./Clock.rehydrator";

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

@@ -2,7 +2,7 @@ import { FC, ReactNode } from "react";
 /**
  * Use `Columns` to compose layouts on a 12-column grid.
  */
-declare const Columns: FC<ColumnsProps> & {
+export declare const Columns: FC<ColumnsProps> & {
     Col: typeof Col;
 };
 export declare const Col: FC<ColProps>;
@@ -73,4 +73,4 @@ export interface ColumnsProps {
      */
     isGutterless?: boolean;
 }
-export default Columns;
+export {};

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

@@ -1 +1 @@
-export { default } from "./Columns";
+export { Columns } from "./Columns";

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

@@ -4,7 +4,7 @@ import { backgroundsBT } from "../Surface";
  * Use `Curve` sparingly to soften edges and create a more natural, less rigid
  * look and feel.
  */
-declare const Curve: FC<CurveProps>;
+export declare const Curve: FC<CurveProps>;
 export declare const sizes: readonly ["s", "m", "l"];
 export declare const positions: readonly ["bottom", "bottomLeft", "bottomRight", "top", "topLeft", "topRight"];
 export interface CurveProps {
@@ -29,4 +29,3 @@ export interface CurveProps {
      */
     topColor?: typeof backgroundsBT[number];
 }
-export default Curve;

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

@@ -1 +1 @@
-export { default } from "./Curve";
+export { Curve } from "./Curve";

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

@@ -4,7 +4,7 @@ import { HeadingLevel } from "../Heading/Heading";
  * Use `Disclosure` to display content that is only visible when toggled into
  * an "open" state.
  */
-declare const Disclosure: FC<DisclosureProps>;
+export declare const Disclosure: FC<DisclosureProps>;
 export interface DisclosureProps {
     /**
      * Content to display in the Disclosure.
@@ -28,4 +28,3 @@ export interface DisclosureProps {
      */
     summary: string;
 }
-export default Disclosure;

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

@@ -1 +1 @@
-export { default } from "./Disclosure";
+export { Disclosure } from "./Disclosure";

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

@@ -2,7 +2,7 @@ import { FC, ReactNode } from "react";
 /**
  * Use `Elevation` to elevate what matters.
  */
-declare const Elevation: FC<ElevationProps>;
+export declare const Elevation: FC<ElevationProps>;
 export interface ElevationProps {
     /**
      * Contents to Elevate.
@@ -13,4 +13,3 @@ export interface ElevationProps {
      */
     isFullWidth?: boolean;
 }
-export default Elevation;

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

@@ -1 +1 @@
-export { default } from "./Elevation";
+export { Elevation } from "./Elevation";

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

@@ -6,7 +6,7 @@ declare const Context: React.Context<{
 /**
  * Use `FormControl` to provide inputs with labels, helper text and error messages
  */
-declare const FormControl: FC<FormControlProps>;
+export declare const FormControl: FC<FormControlProps>;
 export interface FormControlProps {
     /**
      * Render the input or series of inputs
@@ -48,4 +48,3 @@ export interface FormControlProps {
     labelSize?: "s" | "l";
 }
 export { Context as FormControlContext };
-export default FormControl;

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

@@ -1 +1 @@
-export { default, FormControlContext } from "./FormControl";
+export { FormControl, FormControlContext } from "./FormControl";

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

@@ -2,7 +2,7 @@ import { FC, ReactNode } from "react";
 /**
  * Use `Group` to arrange flexible items in a row.
  */
-declare const Group: FC<GroupProps> & {
+export declare const Group: FC<GroupProps> & {
     Item: typeof GroupItem;
 };
 export declare const GroupItem: FC<ItemProps>;
@@ -43,4 +43,3 @@ export interface GroupProps {
      */
     noWrap?: boolean;
 }
-export default Group;

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

@@ -1 +1 @@
-export { default } from "./Group";
+export { Group } from "./Group";

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

@@ -2,7 +2,7 @@ import { FC, ReactNode } from "react";
 /**
  * Use `Heading` to display heading text.
  */
-declare const Heading: FC<HeadingProps> & {
+export declare const Heading: FC<HeadingProps> & {
     Proposition: typeof HeadingProposition;
 };
 export declare const HeadingProposition: FC<HeadingPropositionProps>;
@@ -43,4 +43,3 @@ export interface HeadingProps {
      */
     size?: HeadingSize;
 }
-export default Heading;

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

@@ -1 +1 @@
-export { default } from "./Heading";
+export { Heading } from "./Heading";

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

@@ -3,7 +3,7 @@ import { FC } from "react";
 /**
  * Use `Icon` to display brand iconography.
  */
-declare const Icon: FC<IconProps>;
+export declare const Icon: FC<IconProps>;
 export declare const colors: readonly ["auto", "brand", "statusRed", "statusAmber", "statusGreen"];
 export interface IconProps {
     /**
@@ -31,4 +31,3 @@ export interface IconProps {
      */
     size?: number;
 }
-export default Icon;

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

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

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

@@ -4,7 +4,7 @@ import { anchorPoints } from "../../helpers";
  * Use `Image` to render a single image, or set of images, with support for
  * image fitting and art direction.
  */
-declare const Image: FC<ImageProps> & {
+export declare const Image: FC<ImageProps> & {
     Source: typeof ImageSource;
 };
 export declare const ImageSource: FC<ImageSourceProps>;
@@ -91,4 +91,3 @@ export interface ImageProps extends HTMLAttributes<HTMLElement> {
      */
     width?: number;
 }
-export default Image;

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

@@ -1 +1 @@
-export { default } from "./Image";
+export { Image } from "./Image";

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

@@ -2,7 +2,7 @@ import { FC, ReactNode } from "react";
 /**
  * Use `Markup` to display HTML-formatted text.
  */
-declare const Markup: FC<MarkupProps>;
+export declare const Markup: FC<MarkupProps>;
 export interface MarkupProps {
     /**
      * HTML-formatted text to display in Markup.
@@ -13,4 +13,3 @@ export interface MarkupProps {
      */
     isMeasured?: boolean;
 }
-export default Markup;

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

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

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

@@ -1,10 +1,10 @@
 import { FC, ReactNode } from "react";
-import PosterImage from "./PosterImage";
-import PosterVideo from "./PosterVideo";
+import { PosterImage } from "./PosterImage";
+import { PosterVideo } from "./PosterVideo";
 /**
  * Use `Poster` to compose content on an image or video background.
  */
-declare const Poster: FC<PosterProps> & {
+export declare const Poster: FC<PosterProps> & {
     Image: typeof PosterImage;
     Video: typeof PosterVideo;
 };
@@ -27,4 +27,3 @@ export interface PosterProps {
      */
     surface?: "darker" | "lighter";
 }
-export default Poster;

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

@@ -28,4 +28,3 @@ export interface PosterImageProps {
      */
     srcSet?: string;
 }
-export default PosterImage;

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

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from "react";
 import { anchorPoints } from "../../helpers";
-declare const PosterVideo: FC<PosterVideoProps>;
+export declare const PosterVideo: FC<PosterVideoProps>;
 export interface PosterVideoProps {
     /**
      * Anchor point for the Poster.Video,
@@ -19,4 +19,3 @@ export interface PosterVideoProps {
      */
     loop?: boolean;
 }
-export default PosterVideo;

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

@@ -1 +1 @@
-export { default } from "./Poster";
+export { Poster } from "./Poster";

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

@@ -2,7 +2,7 @@ import { FC } from "react";
 /**
  * Radio Button component.
  */
-declare const RadioButton: FC<RadioButtonProps>;
+export declare const RadioButton: FC<RadioButtonProps>;
 export interface RadioButtonProps {
     /**
      * ID for the Radio Button.
@@ -25,4 +25,3 @@ export interface RadioButtonProps {
      */
     value: string;
 }
-export default RadioButton;

package/dist/types/components/RadioGroup/RadioButton/index.d.ts

@@ -1 +1 @@
-export { default } from "./RadioButton";
+export { RadioButton } from "./RadioButton";

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

@@ -1,14 +1,18 @@
 import React, { FC } from "react";
 import { FormControlProps } from "../FormControl/FormControl";
-import RadioButton from "./RadioButton";
+import { RadioButton } from "./RadioButton";
 declare type EventType = React.ChangeEvent<HTMLInputElement>;
 /**
  * Use `RadioGroup` to wrap and control radio buttons and apply default values
  */
-declare const RadioGroup: FC<RadioGroupProps> & {
+export declare const RadioGroup: FC<RadioGroupProps> & {
     RadioButton: typeof RadioButton;
 };
 export interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementType" | "errorMessage" | "htmlFor" | "labelSize" | "requirementStatus"> {
+    /**
+     * Contents of the RadioGroup. Should only contain `RadioGroup.RadioButton`
+     */
+    children?: React.ReactNode;
     /**
      * Value of the RadioButton that should be checked by default.
      */
@@ -51,4 +55,4 @@ export interface RadioGroupProps extends Omit<FormControlProps, "children" | "el
      */
     size?: "s" | "l";
 }
-export default RadioGroup;
+export {};

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

@@ -1 +1 @@
-export { default } from "./RadioGroup";
+export { RadioGroup } from "./RadioGroup";

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

@@ -2,7 +2,6 @@ import { FC } from "react";
 /**
  * Use `Rule` to display a horizontal rule.
  */
-declare const Rule: FC<RuleProps>;
+export declare const Rule: FC<RuleProps>;
 export interface RuleProps {
 }
-export default Rule;

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

@@ -1 +1 @@
-export { default } from "./Rule";
+export { Rule } from "./Rule";

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

@@ -2,7 +2,7 @@ import { FC, ReactNode } from "react";
 /**
  * Use `Section` to compose content into vertical page layouts.
  */
-declare const Section: FC<SectionProps>;
+export declare const Section: FC<SectionProps>;
 export interface SectionProps {
     /**
      * Content to display in the Section.
@@ -18,4 +18,3 @@ export interface SectionProps {
      */
     isFullWidth?: boolean;
 }
-export default Section;

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

@@ -1 +1 @@
-export { default } from "./Section";
+export { Section } from "./Section";

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

@@ -2,7 +2,7 @@ import { FC, ReactNode } from "react";
 /**
  * Use `SiteFooter` to display information at the bottom of a page.
  */
-declare const SiteFooter: FC<SiteFooterProps> & {
+export declare const SiteFooter: FC<SiteFooterProps> & {
     Item: typeof SiteFooterItem;
     ItemGroup: typeof SiteFooterItemGroup;
 };
@@ -27,6 +27,10 @@ export interface SiteFooterItemProps {
      * A URL to link to when the Item is clicked or touched.
      */
     href: string;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
 }
 export interface SiteFooterProps {
     /**
@@ -55,4 +59,3 @@ export interface SiteFooterProps {
      */
     siteName?: string;
 }
-export default SiteFooter;

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

@@ -1,2 +1,2 @@
-export { default } from "./SiteFooter";
+export { SiteFooter } from "./SiteFooter";
 export { default as SiteFooterRehydrator } from "./SiteFooter.rehydrator";

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

@@ -1,17 +1,17 @@
 import React, { FC, ReactNode } from "react";
 import { subBrands } from "../BrandLogo/BrandLogo";
-import Column from "./components/Column";
-import Item from "./components/Item";
-import ItemGroup from "./components/ItemGroup";
-import NavItem, { NavItemWithSubNav } from "./components/NavItem";
-import SubNavItem from "./components/SubNavItem";
+import { Column } from "./components/Column";
+import { Item } from "./components/Item";
+import { ItemGroup } from "./components/ItemGroup";
+import { NavItem, NavItemWithSubNav } from "./components/NavItem";
+import { SubNavItem } from "./components/SubNavItem";
 declare const Context: React.Context<{
     transparent: boolean;
 }>;
 /**
  * Use `SiteHeader` to display brand logo and navigation at the top of a page.
  */
-declare const SiteHeader: FC<SiteHeaderProps> & {
+export declare const SiteHeader: FC<SiteHeaderProps> & {
     Column: typeof Column;
     Item: typeof Item;
     ItemGroup: typeof ItemGroup;
@@ -38,9 +38,17 @@ export interface SiteHeaderProps {
      */
     isTransparent?: boolean;
     /**
-     * A URL to link to when SiteHeader login links are clicked or touched.
+     * A URL to link to when SiteHeader logo is clicked or touched.
      */
     loginHref?: string;
+    /**
+     * A Function to run to when SiteHeader logo is clicked or touched.
+     */
+    logoOnClick?: () => void;
+    /**
+     * A Function to run to when SiteHeader login links are clicked or touched.
+     */
+    loginOnClick?: () => void;
     /**
      * Text to display in SiteHeader login links.
      */
@@ -63,4 +71,3 @@ export interface SiteHeaderProps {
     subBrand?: typeof subBrands[number];
 }
 export { Context as SiteHeaderContext };
-export default SiteHeader;

package/dist/types/components/SiteHeader/components/BackButton/BackButton.d.ts

@@ -3,4 +3,3 @@ export declare const BackButton: FC<BackButtonProps>;
 export interface BackButtonProps {
     setOpen: (arg0: boolean) => any;
 }
-export default BackButton;

package/dist/types/components/SiteHeader/components/BackButton/index.d.ts

@@ -1 +1 @@
-export { default } from "./BackButton";
+export { BackButton } from "./BackButton";

package/dist/types/components/SiteHeader/components/Column/Column.d.ts

@@ -1,9 +1,8 @@
 import { FC, ReactNode } from "react";
-declare const Column: FC<ColumnProps>;
+export declare const Column: FC<ColumnProps>;
 export interface ColumnProps {
     /**
      * Contents of the Column. Must be SiteHeader.ItemGroup components.
      */
     children: ReactNode;
 }
-export default Column;

package/dist/types/components/SiteHeader/components/Column/index.d.ts

@@ -1 +1 @@
-export { default } from "./Column";
+export { Column } from "./Column";