@arc-ui/community-components 12.0.0-beta.5 → 12.0.0-beta7

package/dist/styles.css

@@ -1 +1 @@
-.MediaContent-module_container__zJvhV{margin-bottom:var(--sem-space-padding-150)}.MediaContent-module_content__3VTWr{max-width:715px}.Image-module_imgWrapper__8IEXh{border-radius:var(--sem-border-radius-xl);overflow:hidden}.IconList-module_list__J9ei6{list-style:none;margin:0;max-width:480px;padding:0}@media (min-width:768px){.IconList-module_list__J9ei6{max-width:100%}}.IconList-module_listItem__gNx5-{display:flex}.IconList-module_listItem__gNx5-:nth-of-type(n+2){margin-top:var(--sem-space-padding-150)}.IconList-module_listItemCentered__0HGoP{align-items:center}.IconList-module_listItemIconContainer__4SYoW{flex:0 0 auto}.IconList-module_listItemTextContainer__PfFZS{flex:1 1 auto;padding:0 0 0 var(--sem-space-padding-80)}@media (min-width:768px){.IconList-module_listItemTextContainer__PfFZS{padding:0 var(--sem-space-padding-80)}}@media (min-width:1024px){.IconList-module_listItemTextContainer__PfFZS{padding:0 var(--sem-space-padding-110)}}@media (min-width:1280px){.IconList-module_listItemTextContainer__PfFZS{padding:0 var(--sem-space-padding-130)}}.Button-module_buttonContainer__o8TSz{margin:var(--sem-space-padding-150) auto 0;width:100%}@media (min-width:636px){.Button-module_buttonContainer__o8TSz{width:-moz-max-content;width:max-content}}@media (min-width:768px){.Button-module_buttonContainer__o8TSz{margin:var(--sem-space-padding-150) 0 0}}.Container-module_container__JZgGy{align-items:flex-start;display:flex;gap:var(--sem-space-padding-150)}@media (min-width:768px){.Container-module_container__JZgGy{gap:var(--sem-space-padding-110)}}@media (min-width:1280px){.Container-module_container__JZgGy{gap:var(--sem-space-padding-130)}}.Container-module_container--content__ScwIb{flex-direction:column}@media (min-width:768px){.Container-module_container--content__ScwIb{flex-direction:row}}.Container-module_container--media__KIzMa{flex-direction:column-reverse}@media (min-width:768px){.Container-module_container--media__KIzMa{flex-direction:row}.Container-module_container--reverse__-B82g{flex-direction:row-reverse}}.Container-module_container--align-center__qneG2{align-items:center}.Container-module_container--align-top__TE6Ah{align-items:flex-start}.Column-module_col__9bKZy{flex:1 1 auto;width:100%}@media (min-width:768px){.Column-module_col__9bKZy{width:50%}}.Image-module_imgWrapper__flS1n{border-radius:var(--sem-border-radius-xl);overflow:hidden}@media (min-width:768px){.FeaturePost-module_featurePost__PDoVH{display:flex;gap:24px}}@media (min-width:1280px){.FeaturePost-module_featurePost__PDoVH{gap:32px}}@media (min-width:768px){.FeaturePost-module_featurePostReversed__tQZSX{flex-direction:row-reverse}.FeaturePost-module_col__x2s9L{flex:0 1 auto;width:50%}}.FeaturePost-module_labelDate__eiCmw{padding-top:var(--sem-space-padding-20)}@media (min-width:768px){.FeaturePost-module_labelDate__eiCmw{padding-left:var(--sem-space-padding-70)}.FeaturePost-module_contentContainer__dqJOS{padding:0 var(--sem-space-padding-110) 0 0}}@media (min-width:1280px){.FeaturePost-module_contentContainer__dqJOS{padding:0 var(--sem-space-padding-130) 0 0}}.FeaturePost-module_authorContent__QD4Nv{padding-left:var(--sem-space-padding-70)}.FeaturePost-module_googlePlayButtonWrapper__nGdyh{padding:var(--sem-space-padding-70) 0 0}@media (min-width:636px){.FeaturePost-module_googlePlayButtonWrapper__nGdyh{padding:0 0 0 var(--sem-space-padding-70)}}
+.Accordion-module_header__WaTdJ{display:flex;flex-direction:column;padding-bottom:40px;width:auto}.Accordion-module_headerContent__pjddt{color:#2a2a2a;font-size:20px;line-height:28px;margin:0}@media (min-width:636px){.Accordion-module_header__WaTdJ{min-width:588px;width:auto}}@media (min-width:768px){.Accordion-module_header__WaTdJ{min-width:720px;padding:0 186px 40px 0}}@media (min-width:1024px){.Accordion-module_header__WaTdJ{min-width:960px;padding:0 246px 40px 0}}@media (min-width:1280px){.Accordion-module_header__WaTdJ{min-width:1216px;padding:0 312px 40px 0}}.Author-module_authorContent__TBY7b{padding-left:var(--sem-space-padding-70)}.CopyLead-module_buttonContainer__3OaRG{margin:var(--sem-space-padding-150) auto 0;width:100%}.CopyLead-module_col__0Da5H{flex:1 1 auto;width:100%}.CopyLead-module_container__I91ym{align-items:flex-start;display:flex;gap:var(--sem-space-padding-150)}.CopyLead-module_container--content__e8LxG{flex-direction:column}.CopyLead-module_container--media__QcMWi{flex-direction:column-reverse}.CopyLead-module_container--align-center__Fh1Sd{align-items:center}.CopyLead-module_container--align-top__UIXOZ{align-items:flex-start}.CopyLead-module_list__arnJd{list-style:none;margin:0;max-width:480px;padding:0}.CopyLead-module_listItem__NscHE{display:flex}.CopyLead-module_listItem__NscHE:nth-of-type(n+2){margin-top:var(--sem-space-padding-150)}.CopyLead-module_listItemCentered__Kwdab{align-items:center}.CopyLead-module_listItemIconContainer__dgnhJ{flex:0 0 auto}.CopyLead-module_listItemTextContainer__Dl9lw{flex:1 1 auto;padding:0 0 0 var(--sem-space-padding-80)}.CopyLead-module_imgWrapper__HYP3w{border-radius:var(--sem-border-radius-s);overflow:hidden}.CopyLead-module_mediaContainer__PxTnm{margin-bottom:var(--sem-space-padding-150)}.CopyLead-module_content__Bja1D{max-width:715px}@media (min-width:636px){.CopyLead-module_buttonContainer__3OaRG{width:-moz-max-content;width:max-content}}@media (min-width:768px){.CopyLead-module_container__I91ym{gap:var(--sem-space-padding-110)}.CopyLead-module_container--content__e8LxG,.CopyLead-module_container--media__QcMWi{flex-direction:row}.CopyLead-module_container--reverse__Gq9u8{flex-direction:row-reverse}.CopyLead-module_buttonContainer__3OaRG{margin:var(--sem-space-padding-150) 0 0}.CopyLead-module_col__0Da5H{width:50%}.CopyLead-module_list__arnJd{max-width:100%}.CopyLead-module_listItemTextContainer__Dl9lw{padding:0 var(--sem-space-padding-80)}}@media (min-width:1024px){.CopyLead-module_listItemTextContainer__Dl9lw{padding:0 var(--sem-space-padding-110)}}@media (min-width:1280px){.CopyLead-module_container__I91ym{gap:var(--sem-space-padding-130)}.CopyLead-module_listItemTextContainer__Dl9lw{padding:0 var(--sem-space-padding-130)}}.FeaturePost-module_labelDate__NXOgY{padding-top:var(--sem-space-padding-20)}.FeaturePost-module_authorContent__FEuRO{padding-left:var(--sem-space-padding-70)}.FeaturePost-module_googlePlayButtonWrapper__GI-ag{padding:var(--sem-space-padding-70) 0 0}.FeaturePost-module_imgWrapper__r6omd{border-radius:var(--sem-border-radius-s);overflow:hidden}@media (min-width:636px){.FeaturePost-module_googlePlayButtonWrapper__GI-ag{padding:0 0 0 var(--sem-space-padding-70)}}@media (min-width:768px){.FeaturePost-module_featurePost__9jY21{display:flex;gap:24px}.FeaturePost-module_featurePostReversed__WQRXm{flex-direction:row-reverse}.FeaturePost-module_contentContainer__kdus7{padding:0 var(--sem-space-padding-110) 0 0}.FeaturePost-module_col__eW8gY{flex:0 1 auto;width:50%}.FeaturePost-module_labelDate__NXOgY{padding-left:var(--sem-space-padding-70)}}@media (min-width:1280px){.FeaturePost-module_featurePost__9jY21{gap:32px}.FeaturePost-module_contentContainer__kdus7{padding:0 var(--sem-space-padding-130) 0 0}}.Highlights-module_highlights__Hf7Zq{grid-gap:48px 24px;display:grid;gap:48px 24px;grid-template-columns:1fr}.Highlights-module_header__hIdDj{display:flex;flex-direction:column;padding-bottom:40px;width:auto}.Highlights-module_highlightItem__-N6le{max-width:480px;width:auto}.Highlights-module_headerContent__rt-Oj{color:#2a2a2a;font-size:20px;line-height:28px;margin:0}@media (min-width:636px){.Highlights-module_header__hIdDj{min-width:588px;width:auto}.Highlights-module_highlights__Hf7Zq{grid-template-columns:1fr 1fr}.Highlights-module_highlightItem__-N6le{min-width:282px;padding-right:0}}@media (min-width:768px){.Highlights-module_header__hIdDj{min-width:720px;padding:0 186px 40px 0}.Highlights-module_highlights2Column__6qIuI{grid-template-columns:1fr 1fr}.Highlights-module_highlights2Column__6qIuI .Highlights-module_highlightItem__-N6le{max-width:-moz-max-content;max-width:max-content;min-width:348px;padding-right:62px}.Highlights-module_highlights3Column__qsCMP{grid-template-columns:1fr 1fr 1fr}.Highlights-module_highlights3Column__qsCMP .Highlights-module_highlightItem__-N6le{min-width:224px}}@media (min-width:1024px){.Highlights-module_header__hIdDj{min-width:960px;padding:0 246px 40px 0}.Highlights-module_highlights2Column__6qIuI{grid-template-columns:1fr 1fr}.Highlights-module_highlights2Column__6qIuI .Highlights-module_highlightItem__-N6le{min-width:468px;padding-right:82px}.Highlights-module_highlights3Column__qsCMP{grid-template-columns:1fr 1fr 1fr}.Highlights-module_highlights3Column__qsCMP .Highlights-module_highlightItem__-N6le{min-width:304px}}@media (min-width:1280px){.Highlights-module_header__hIdDj{min-width:1216px;padding:0 312px 40px 0}.Highlights-module_highlights__Hf7Zq{gap:48px 32px}.Highlights-module_highlights2Column__6qIuI{grid-template-columns:1fr 1fr}.Highlights-module_highlights2Column__6qIuI .Highlights-module_highlightItem__-N6le{min-width:592px;padding-right:104px}.Highlights-module_highlights3Column__qsCMP{grid-template-columns:1fr 1fr 1fr}.Highlights-module_highlights3Column__qsCMP .Highlights-module_highlightItem__-N6le{min-width:384px}}.PromoListing-module_PromoListing__6ensv{max-width:1280px}.PromoListing-module_headerContent__rMt1t{color:#2a2a2a;font-size:20px;line-height:28px;margin:0}.PromoListing-module_header__PDGdP{display:flex;flex-direction:column;padding-bottom:40px;width:auto}.PromoListing-module_promoListingContainer__vwez-{grid-column:span 2;height:100%;width:100%}.PromoListing-module_cardGrid__llf73{grid-gap:24px;display:grid;gap:24px;grid-template-columns:2fr}@media (min-width:320px){.PromoListing-module_cardGrid__llf73{grid-auto-rows:minmax(430px,1fr)}}@media (min-width:636px){.PromoListing-module_header__PDGdP{min-width:588px}.PromoListing-module_cardGrid2Columns__qPLQk{grid-auto-rows:minmax(430px,1fr);grid-template-columns:repeat(4,1fr)}.PromoListing-module_cardGrid2Columns__qPLQk.PromoListing-module_cardGrid3Cards__VKWMs .PromoListing-module_promoListingContainer__vwez-:last-child,.PromoListing-module_cardGrid2Columns__qPLQk.PromoListing-module_cardGrid5Cards__ywl5k .PromoListing-module_promoListingContainer__vwez-:last-child{grid-column-end:4}}@media (min-width:768px){.PromoListing-module_header__PDGdP{min-width:720px;padding:0 186px 40px 0}.PromoListing-module_cardGrid2Columns__qPLQk{grid-auto-rows:minmax(430px,1fr)}}@media (min-width:1024px){.PromoListing-module_header__PDGdP{min-width:960px;padding:0 246px 40px 0}.PromoListing-module_cardGrid2Columns__qPLQk{grid-auto-rows:minmax(468px,1fr)}.PromoListing-module_cardGrid3Columns__g0Xru{grid-auto-rows:minmax(437px,1fr);grid-template-columns:repeat(6,1fr)}.PromoListing-module_cardGrid3Columns__g0Xru.PromoListing-module_cardGrid4Cards__5Bv5u .PromoListing-module_promoListingContainer__vwez-:last-child{grid-column-end:5}.PromoListing-module_cardGrid3Columns__g0Xru.PromoListing-module_cardGrid2Cards__wDc4S .PromoListing-module_promoListingContainer__vwez-:last-child,.PromoListing-module_cardGrid3Columns__g0Xru.PromoListing-module_cardGrid5Cards__ywl5k .PromoListing-module_promoListingContainer__vwez-:last-child{grid-column-end:6}.PromoListing-module_cardGrid3Columns__g0Xru.PromoListing-module_cardGrid2Cards__wDc4S .PromoListing-module_promoListingContainer__vwez-:nth-last-child(2),.PromoListing-module_cardGrid3Columns__g0Xru.PromoListing-module_cardGrid5Cards__ywl5k .PromoListing-module_promoListingContainer__vwez-:nth-last-child(2){grid-column-end:4}}@media (min-width:1280px){.PromoListing-module_header__PDGdP{min-width:1216px;padding:0 312px 40px 0}.PromoListing-module_cardGrid2Columns__qPLQk{grid-auto-rows:minmax(592px,1fr)}.PromoListing-module_cardGrid3Columns__g0Xru{grid-auto-rows:minmax(523px,1fr)}.PromoListing-module_cardGrid__llf73{gap:32px}}.Quote-module_blockQuote__STj-z{font-size:36px;font-style:normal;font-weight:500;margin:0}.Quote-module_quoteContent__kWc51{line-height:44px;margin:0;padding-bottom:32px;padding-top:32px}.Quote-module_quoteDefault__tU5db{fill:#5514b4;color:#5514b4}.Quote-module_quoteSecondary__3Rk3f{fill:#434343;color:#434343}.Quote-module_quoteIcon__HK1TV{height:76.471px;width:100px}svg{padding:0}@media (min-width:768px){.Quote-module_blockQuote__STj-z{font-size:40px}.Quote-module_quoteContent__kWc51{line-height:48px}}@media (min-width:1024px){.Quote-module_quoteIcon__HK1TV{height:95.588px;width:125px}}@media (min-width:1280px){.Quote-module_blockQuote__STj-z{font-size:56px}.Quote-module_quoteContent__kWc51{line-height:64px}}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { AccordionHeaderProps } from "./components/AccordionHeader/AccordionHeader";
+import { AccordionDisclosureListProps } from "./components/AccordionDisclosureList/AccordionDisclosureList";
+/**
+ * Use the `Accordion` component to package together a title, content and a number of disclosure components into one section (maximum 10).
+ */
+export declare const Accordion: React.FC<AccordionProps>;
+interface AccordionProps extends AccordionHeaderProps, AccordionDisclosureListProps {
+}
+export {};

package/dist/types/components/Accordion/components/AccordionDisclosureList/AccordionDisclosureList.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { type DisclosureProps } from "@arc-ui/components/dist/Disclosure";
+export declare const AccordionDisclosureList: React.FC<AccordionDisclosureListProps>;
+export interface AccordionDisclosureListProps {
+    /**
+     * Array of `Disclosure` components. Maximum 10 in one `Accordion`.
+     */
+    disclosureList: DisclosureProps[];
+}

package/dist/types/components/Accordion/components/AccordionHeader/AccordionHeader.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { type HeadingLevel } from "@arc-ui/components/dist/Heading";
+/**
+ * Use `Accordion` to give supporting information about a page or proposition. It can be used to call out key benefits in bullet points, or link to a supporting explanatory video. An optional CTA can be used to link to further information or trigger a sales or enquiry journey.
+ */
+export declare const AccordionHeader: React.FC<AccordionHeaderProps>;
+export interface AccordionHeaderProps {
+    /**
+     * heading for `Accordion`.
+     */
+    heading: string;
+    /**
+     * heading level for `Accordion` heading.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Text content for `Accordion` header section.
+     */
+    content?: string;
+}

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

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

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { type AvatarProps } from "@arc-ui/components/dist/Avatar";
+export declare const Author: React.FC<AuthorProps>;
+export interface AuthorProps {
+    /**
+     * Name of the Author.
+     */
+    name: string;
+    /**
+     * Job title of the Author.
+     */
+    title: string;
+    /**
+     * Optional Avatar for the Author.
+     */
+    avatar?: Omit<AvatarProps, "size">;
+}

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

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

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

@@ -1,5 +1,6 @@
 import React from "react";
-import { type VideoPlayerProps } from "@arc-ui/components/dist/types/components/VideoPlayer/VideoPlayer";
+import { type HeadingLevel } from "@arc-ui/components/dist/Heading";
+import { type VideoPlayerProps } from "@arc-ui/components/dist/VideoPlayer";
 import { type CopyLeadButton, type CopyLeadImage, type CopyLeadListItem } from "./types";
 /**
  * Use `CopyLead` to give supporting information about a page or proposition. It can be used to call out key benefits in bullet points, or link to a supporting explanatory video. An optional CTA can be used to link to further information or trigger a sales or enquiry journey.
@@ -7,9 +8,13 @@ import { type CopyLeadButton, type CopyLeadImage, type CopyLeadListItem } from "
 export declare const CopyLead: React.FC<CopyLeadProps>;
 interface CopyLeadProps {
     /**
-     * Title for `CopyLead`.
+     * heading for `CopyLead`.
      */
-    title: string;
+    heading: string;
+    /**
+     * Determine a heading level for `<MediaTemplate />` and `<ContentTemplate />`
+     */
+    headingLevel?: HeadingLevel;
     /**
      * Reverse the columns so the image / video appears on the left. Doesn't affect mobile layouts, and is only applied if there is a video or an image.
      */

package/dist/types/components/CopyLead/components/MediaContent/MediaContent.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
+import { type HeadingLevel } from "@arc-ui/components/dist/Heading";
 export declare const MediaContent: React.FC<MediaContentProps>;
 interface MediaContentProps {
     heading: string;
+    headingLevel?: HeadingLevel;
     children?: string;
 }
 export {};

package/dist/types/components/CopyLead/templates/Content/Content.d.ts

@@ -1,8 +1,10 @@
 import React from "react";
+import { type HeadingLevel } from "@arc-ui/components/dist/Heading";
 import { type CopyLeadButton, type CopyLeadListItem } from "../../types";
 export declare const ContentTemplate: React.FC<ContentTemplateProps>;
 interface ContentTemplateProps {
-    title: string;
+    heading: string;
+    headingLevel?: HeadingLevel;
     content: string;
     listItems: CopyLeadListItem[];
     button?: CopyLeadButton;

package/dist/types/components/CopyLead/templates/Media/Media.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
-import { type VideoPlayerProps } from "@arc-ui/components/dist/types/components/VideoPlayer/VideoPlayer";
+import { type HeadingLevel } from "@arc-ui/components/dist/Heading";
+import { type VideoPlayerProps } from "@arc-ui/components/dist/VideoPlayer";
 import { type CopyLeadButton, type CopyLeadImage, type CopyLeadListItem } from "../../types";
 export declare const MediaTemplate: React.FC<MediaTemplateProps>;
 interface MediaTemplateProps {
-    title: string;
+    heading: string;
+    headingLevel?: HeadingLevel;
     listItems: CopyLeadListItem[];
     content?: string;
     isReverseOrder?: boolean;

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

@@ -1,15 +1,41 @@
 import React from "react";
+import { type HeadingLevel } from "@arc-ui/components/dist/Heading";
 import { type FeaturePostAppButtonFooter, type FeaturePostCtaFooter, type FeaturePostImage } from "./types";
+/**
+ * Use `FeaturePost` to direct traffic towards an article, case study, or product information page, or to a 3rd part App Store provider. Where the component links to an article page, the author attribution can be given here. The `FeaturePost` must be supported by an image, and in future, the component will support embedded video as well.
+ * */
 export declare const FeaturePost: React.FC<FeaturePostProps>;
 interface FeaturePostProps {
+    /**
+     * heading for `FeaturePost`.
+     */
     heading: string;
+    /**
+     * Determine a heading level for `<FeaturePost />`
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Text content for `FeaturePost`.
+     */
     content: string;
+    /**
+     * Reverse the columns so the image / video appears on the left. Doesn't affect mobile layouts, and is only applied if there is a video or an image.
+     */
     isReverseOrder?: boolean;
+    /**
+     * Image for `FeaturePost`.
+     */
     image: FeaturePostImage;
+    /**
+     * Footer for `FeaturePost`. Types included are `cta` or `appButton`.
+     */
     footer?: FeaturePostCtaFooter | FeaturePostAppButtonFooter;
+    /**
+     * Label for `FeaturePost`.
+     */
     label?: {
         text: string;
-        date: string;
+        date: string | Date;
     };
 }
 export {};

package/dist/types/components/FeaturePost/types/feature-post-cta-footer.d.ts

@@ -1,11 +1,7 @@
-import { type AvatarProps } from "@arc-ui/components/dist/types/components/Avatar/Avatar";
 import { type ButtonProps } from "@arc-ui/components/dist/types/components/Button/Button";
+import { type AuthorProps } from "../../Author/Author";
 export interface FeaturePostCtaFooter {
     type: "cta";
-    author?: {
-        name: string;
-        title: string;
-        avatar?: Omit<AvatarProps, "size">;
-    };
     button: Pick<ButtonProps, "label" | "onClick" | "href" | "target" | "ariaLabel">;
+    author?: AuthorProps;
 }

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

@@ -0,0 +1,30 @@
+import React from "react";
+import { type HeadingLevel } from "@arc-ui/components/dist/Heading";
+import { type HighlightListItem } from "./types";
+/**
+ * Use `Highlights` to give supporting information about a page or proposition. It can be used to call out key benefits in bullet points, or link. Both two and three column options are available.
+ */
+export declare const Highlights: React.FC<HighlightsProps>;
+interface HighlightsProps {
+    /**
+     * heading for `Highlights`.
+     */
+    heading: string;
+    /**
+     * Determine a heading level for `<HighlightHeader />`.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Text content for `Highlights`.
+     */
+    content?: string;
+    /**
+     * List items for `Highlights`. List length should be a minimum of 2 and a maximum of 6.
+     */
+    listItems: HighlightListItem[];
+    /**
+     * Number of columns for option desktop and tablet breakpoints only.
+     */
+    columns?: "2" | "3";
+}
+export {};

package/dist/types/components/Highlights/components/HighlightHeader/HighlightHeader.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { type HeadingLevel } from "@arc-ui/components/dist/Heading";
+/**
+ * Use `Highlights` to give supporting information about a page or proposition. It can be used to call out key benefits in bullet points, or link to a supporting explanatory video. An optional CTA can be used to link to further information or trigger a sales or enquiry journey.
+ */
+export declare const HighlightHeader: React.FC<HighlightHeaderProps>;
+interface HighlightHeaderProps {
+    /**
+     * Title for `Highlights`.
+     */
+    heading: string;
+    /**
+     * Determine a heading level for `<HighlightHeader />`.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Text content for `Highlights`.
+     */
+    content?: string;
+}
+export {};

package/dist/types/components/Highlights/components/HighlightItem/HighlightItem.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { type ArcIcon } from "@arc-ui/components/dist/types/types/arc-icon";
+export declare const HighlightItem: React.FC<HighlightItemProps>;
+interface HighlightItemProps {
+    icon?: ArcIcon;
+    heading: string;
+    text?: string;
+    link?: {
+        url: string;
+        textLink: string;
+    };
+    isSmallIcon: boolean;
+}
+export {};

package/dist/types/components/Highlights/components/HighlightList/HighlightList.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { type HighlightListItem } from "../../types/highlight-list-item";
+export declare const HighlightList: React.FC<HighlightListProps>;
+interface HighlightListProps {
+    listItems: HighlightListItem[];
+    columns: "2" | "3";
+    isSmallIcon: boolean;
+}
+export {};

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

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

package/dist/types/components/Highlights/types/highlight-list-item.d.ts

@@ -0,0 +1,10 @@
+import { type ArcIcon } from "@arc-ui/components/dist/types/types/arc-icon";
+export interface HighlightListItem {
+    icon?: ArcIcon;
+    heading: string;
+    text?: string;
+    link?: {
+        url: string;
+        textLink: string;
+    };
+}

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

@@ -0,0 +1 @@
+export { type HighlightListItem } from "./highlight-list-item";

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

@@ -0,0 +1,38 @@
+import React from "react";
+import { type MediaCardProps } from "@arc-ui/components/dist/MediaCard";
+import { type ImpactCardProps } from "@arc-ui/components/dist/ImpactCard";
+import { type InformationCardProps } from "@arc-ui/components/dist/InformationCard";
+import { type TypographyCardProps } from "@arc-ui/components/dist/TypographyCard";
+import { type PromoListingHeaderProps } from "./components/PromoListingHeader/PromoListingHeader";
+/**
+ * Use `PromoListing` to give supporting information about a page or proposition in the form of the card components (`ImpactCard`, `InformationCard`, `MediaCard` and `TypographyCard`).
+ */
+export declare const PromoListing: React.FC<PromoListingProps>;
+interface PromoListMediaCard extends MediaCardProps {
+    type: "media-card";
+}
+interface PromoListImpactCard extends ImpactCardProps {
+    type: "impact-card";
+}
+interface PromoListInformationCard extends InformationCardProps {
+    type: "information-card";
+}
+interface PromoListTypographyCard extends TypographyCardProps {
+    type: "typography-card";
+}
+type PromoListCard = PromoListMediaCard | PromoListInformationCard | PromoListTypographyCard | PromoListImpactCard;
+export interface PromoListingProps extends PromoListingHeaderProps {
+    /**
+     * Cards for the PromoListing.
+     */
+    cards: PromoListCard[];
+    /**
+     * Shows cards in a carousel on devices below 1024px if true.
+     */
+    isCarousel?: true;
+    /**
+     * Number of columns for desktop breakpoints. "2" and "3" column options available.
+     */
+    columns?: "2" | "3";
+}
+export {};

package/dist/types/components/PromoListing/components/PromoListingHeader/PromoListingHeader.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { type HeadingLevel } from "@arc-ui/components/dist/Heading";
+export declare const PromoListingHeader: React.FC<PromoListingHeaderProps>;
+export interface PromoListingHeaderProps {
+    /**
+     * heading for `PromoListingHeader`.
+     */
+    heading: string;
+    /**
+     * Determine a heading level for `<PromoListingHeader />`.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Text content for `PromoListingHeader`.
+     */
+    content?: string;
+}

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

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

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { AuthorProps } from "../Author/Author";
+/**
+ * Use `Quote` where a quote or testimonial from an existing customer or stakeholder would help build trust and credibility with potential new customers. It's commonly used on product pages where customers would learn about a product or service that we offer.*/
+export declare const Quote: React.FC<QuoteProps>;
+export interface QuoteProps {
+    styling?: "Default" | "Secondary";
+    content: string;
+    author?: AuthorProps;
+    citeUrl?: string;
+}

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

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

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

@@ -1,2 +1,7 @@
+export { Accordion } from "./Accordion";
+export { Author } from "./Author";
 export { CopyLead } from "./CopyLead";
 export { FeaturePost } from "./FeaturePost";
+export { Highlights } from "./Highlights";
+export { PromoListing } from "./PromoListing";
+export { Quote } from "./Quote";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arc-ui/community-components",
-  "version": "12.0.0-beta.5",
+  "version": "12.0.0-beta7",
   "homepage": "https://ui.digital-ent-int.bt.com",
   "author": "BT Business Digital UI Team <ui-digital-ent-int@bt.com>",
   "main": "./dist/index.js",
@@ -13,10 +13,10 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@arc-ui/components": "12.0.0-beta.5",
-    "@arc-ui/theme-bt-enterprise": "12.0.0-beta.5",
-    "@arc-ui/theme-bt-business": "12.0.0-beta.5",
-    "@arc-ui/theme-ee": "12.0.0-beta.5",
+    "@arc-ui/components": "12.0.0-beta7",
+    "@arc-ui/theme-bt-business": "12.0.0-beta7",
+    "@arc-ui/theme-bt-enterprise": "12.0.0-beta7",
+    "@arc-ui/theme-ee": "12.0.0-beta7",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
@@ -53,8 +53,8 @@
     "@types/react-dom": "18.2.7",
     "classnames": "^2.2.6",
     "cypress": "^13.3.0",
+    "date-fns": "2.30.0",
     "postcss": "^8.0.0",
-    "postcss-preset-env": "^7.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-is": "^18.0.0",
@@ -71,24 +71,28 @@
     "typescript": "^4.9.5",
     "vite": "^4.4.5",
     "vite-plugin-istanbul": "^5.0.0",
-    "@arc-ui/components": "^12.0.0-beta.5",
-    "@arc-ui/theme-bt-business": "^12.0.0-beta.5",
-    "@arc-ui/theme-bt-enterprise": "^12.0.0-beta.5",
-    "@arc-ui/theme-ee": "^12.0.0-beta.5",
-    "@arc-ui/tokens-arc": "^12.0.0-beta.5",
-    "@arc-ui/tokens-bt-enterprise": "^12.0.0-beta.5",
-    "@arc-ui/icons-bt": "^12.0.0-beta.5",
-    "@arc-ui/icons-ee": "^12.0.0-beta.5"
+    "@arc-ui/build-utils": "^12.0.0-beta7",
+    "@arc-ui/components": "^12.0.0-beta7",
+    "@arc-ui/helpers": "^12.0.0-beta7",
+    "@arc-ui/icons-bt": "^12.0.0-beta7",
+    "@arc-ui/icons-ee": "^12.0.0-beta7",
+    "@arc-ui/theme-bt-business": "^12.0.0-beta7",
+    "@arc-ui/theme-bt-enterprise": "^12.0.0-beta7",
+    "@arc-ui/theme-ee": "^12.0.0-beta7",
+    "@arc-ui/tokens-arc": "^12.0.0-beta7",
+    "@arc-ui/tokens-bt-business": "^12.0.0-beta7",
+    "@arc-ui/tokens-bt-enterprise": "^12.0.0-beta7",
+    "@arc-ui/tokens-ee": "^12.0.0-beta7"
   },
   "scripts": {
-    "build": "rimraf dist && rollup -c",
+    "build": "rimraf dist && rollup -c && generate-subpath-css --modules",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build --quiet",
     "storybook:quiet": "pnpm run storybook --quiet",
     "build-storybook": "storybook build",
     "coverage:summary": "pnpm dlx nyc report --reporter=text-summary",
     "coverage:files": "pnpm dlx nyc report --reporter=text",
-    "coverage:check": "pnpm dlx nyc report --check-coverage --lines 85 --functions 85 --branches 85 --statements 85",
+    "coverage:check": "pnpm dlx nyc report --check-coverage --lines 80 --functions 80 --branches 80 --statements 80",
     "test:components": "cypress open --component",
     "test:components:ci": "cypress run --component --browser chrome",
     "test:components:pipeline": "pnpm run test:components:ci && pnpm run coverage:check",

package/dist/_shared/cjs/index-0524fde2.js

@@ -1,119 +0,0 @@
-'use strict';
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-exports.__assign = function() {
-  exports.__assign = Object.assign || function __assign(t) {
-      for (var s, i = 1, n = arguments.length; i < n; i++) {
-          s = arguments[i];
-          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-      return t;
-  };
-  return exports.__assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-      t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-          if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-              t[p[i]] = s[p[i]];
-      }
-  return t;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-/**
- * Do not edit directly
- * Generated on Thu, 29 Aug 2024 08:40:27 GMT
- */
-var SemSizeBreakpointsM = "768px"; // Medium (MD) - 768px to 991px: This is commonly used for larger tablets and smaller desktop screens.
-var SemSizeBreakpointsL = "1024px"; // Large (LG) - 1024px - 1279px: This breakpoint is often applied to larger desktop screens and some laptops.
-var SemSizeBreakpointsXl = "1280px"; // Extra Large (XL) - 1280px and above: This breakpoint is used for very large desktop screens.
-
-var classnames = {exports: {}};
-
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-
-(function (module) {
-/* global define */
-
-(function () {
-
-	var hasOwn = {}.hasOwnProperty;
-
-	function classNames() {
-		var classes = [];
-
-		for (var i = 0; i < arguments.length; i++) {
-			var arg = arguments[i];
-			if (!arg) continue;
-
-			var argType = typeof arg;
-
-			if (argType === 'string' || argType === 'number') {
-				classes.push(arg);
-			} else if (Array.isArray(arg)) {
-				if (arg.length) {
-					var inner = classNames.apply(null, arg);
-					if (inner) {
-						classes.push(inner);
-					}
-				}
-			} else if (argType === 'object') {
-				if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-					classes.push(arg.toString());
-					continue;
-				}
-
-				for (var key in arg) {
-					if (hasOwn.call(arg, key) && arg[key]) {
-						classes.push(key);
-					}
-				}
-			}
-		}
-
-		return classes.join(' ');
-	}
-
-	if (module.exports) {
-		classNames.default = classNames;
-		module.exports = classNames;
-	} else {
-		window.classNames = classNames;
-	}
-}());
-}(classnames));
-
-var classNames = classnames.exports;
-
-exports.SemSizeBreakpointsL = SemSizeBreakpointsL;
-exports.SemSizeBreakpointsM = SemSizeBreakpointsM;
-exports.SemSizeBreakpointsXl = SemSizeBreakpointsXl;
-exports.__rest = __rest;
-exports.classNames = classNames;