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

package/dist/FeaturePost/styles.css

@@ -0,0 +1 @@
+.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}}

package/dist/Highlights/Highlights.cjs.js

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useMediaQuery = require('@arc-ui/components/dist/use-media-query');
+var index = require('../_shared/cjs/index-9947ac13.js');
+var Heading = require('@arc-ui/components/dist/Heading');
+var Icon = require('@arc-ui/components/dist/Icon');
+var Text = require('@arc-ui/components/dist/Text');
+var Link = require('@arc-ui/components/dist/Link');
+var VerticalSpace = require('@arc-ui/components/dist/VerticalSpace');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var styles = {"highlights":"Highlights-module_highlights__Hf7Zq","header":"Highlights-module_header__hIdDj","highlightItem":"Highlights-module_highlightItem__-N6le","headerContent":"Highlights-module_headerContent__rt-Oj","highlights2Column":"Highlights-module_highlights2Column__6qIuI","highlights3Column":"Highlights-module_highlights3Column__qsCMP"};
+
+var HighlightItem = function (_a) {
+    var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, isSmallIcon = _a.isSmallIcon;
+    return (React__default["default"].createElement("div", { "data-testid": "highlight-item-container", className: styles.highlightItem },
+        icon && (React__default["default"].createElement("div", { className: styles.Icon },
+            React__default["default"].createElement(Icon.Icon, { "data-testid": "highlight-icon", color: "brand", icon: icon, size: isSmallIcon ? 64 : 76 }))),
+        React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "16" }),
+        React__default["default"].createElement(Heading.Heading, { level: "3", size: "m" }, heading),
+        React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "16" }),
+        React__default["default"].createElement(Text.Text, null, text),
+        React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "16" }),
+        link && (React__default["default"].createElement(Link.Link, { href: link.url, id: link.url, onClick: function noRefCheck() { }, rel: "", size: "m", target: "_self", title: link.textLink }, link.textLink))));
+};
+
+var HighlightList = function (_a) {
+    var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon;
+    return (React__default["default"].createElement("div", { "data-testid": "highlights-list", className: index.classNames(styles.highlights, styles["highlights".concat(columns, "Column")]) }, listItems.map(function (_a) {
+        var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link;
+        return (React__default["default"].createElement(HighlightItem, { icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon }));
+    })));
+};
+
+/**
+ * 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.
+ */
+var HighlightHeader = function (_a) {
+    var heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content;
+    return (React__default["default"].createElement("div", { "data-testid": "highlights-header", className: styles.header },
+        React__default["default"].createElement(Heading.Heading, { level: headingLevel, size: "xl" }, heading),
+        content && (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" }),
+            React__default["default"].createElement("p", { className: styles.headerContent }, content)))));
+};
+
+/**
+ * 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.
+ */
+var Highlights = function (_a) {
+    var heading = _a.heading, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, content = _a.content, listItems = _a.listItems, _c = _a.columns, columns = _c === void 0 ? "2" : _c;
+    var isMaxWidthArcBreakpointXs = useMediaQuery.useMediaQuery("(max-width: 767px)");
+    return (React__default["default"].createElement("div", null,
+        React__default["default"].createElement(HighlightHeader, { heading: heading, headingLevel: headingLevel, content: content }),
+        React__default["default"].createElement(HighlightList, { "data-testid": "highlights-list-container", listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs })));
+};
+
+exports.Highlights = Highlights;

package/dist/Highlights/Highlights.esm.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { useMediaQuery } from '@arc-ui/components/dist/use-media-query';
+import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
+import { Heading } from '@arc-ui/components/dist/Heading';
+import { Icon } from '@arc-ui/components/dist/Icon';
+import { Text } from '@arc-ui/components/dist/Text';
+import { Link } from '@arc-ui/components/dist/Link';
+import { VerticalSpace } from '@arc-ui/components/dist/VerticalSpace';
+
+var styles = {"highlights":"Highlights-module_highlights__Hf7Zq","header":"Highlights-module_header__hIdDj","highlightItem":"Highlights-module_highlightItem__-N6le","headerContent":"Highlights-module_headerContent__rt-Oj","highlights2Column":"Highlights-module_highlights2Column__6qIuI","highlights3Column":"Highlights-module_highlights3Column__qsCMP"};
+
+var HighlightItem = function (_a) {
+    var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, isSmallIcon = _a.isSmallIcon;
+    return (React.createElement("div", { "data-testid": "highlight-item-container", className: styles.highlightItem },
+        icon && (React.createElement("div", { className: styles.Icon },
+            React.createElement(Icon, { "data-testid": "highlight-icon", color: "brand", icon: icon, size: isSmallIcon ? 64 : 76 }))),
+        React.createElement(VerticalSpace, { size: "16" }),
+        React.createElement(Heading, { level: "3", size: "m" }, heading),
+        React.createElement(VerticalSpace, { size: "16" }),
+        React.createElement(Text, null, text),
+        React.createElement(VerticalSpace, { size: "16" }),
+        link && (React.createElement(Link, { href: link.url, id: link.url, onClick: function noRefCheck() { }, rel: "", size: "m", target: "_self", title: link.textLink }, link.textLink))));
+};
+
+var HighlightList = function (_a) {
+    var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon;
+    return (React.createElement("div", { "data-testid": "highlights-list", className: classNames(styles.highlights, styles["highlights".concat(columns, "Column")]) }, listItems.map(function (_a) {
+        var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link;
+        return (React.createElement(HighlightItem, { icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon }));
+    })));
+};
+
+/**
+ * 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.
+ */
+var HighlightHeader = function (_a) {
+    var heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content;
+    return (React.createElement("div", { "data-testid": "highlights-header", className: styles.header },
+        React.createElement(Heading, { level: headingLevel, size: "xl" }, heading),
+        content && (React.createElement(React.Fragment, null,
+            React.createElement(VerticalSpace, { size: "24" }),
+            React.createElement("p", { className: styles.headerContent }, content)))));
+};
+
+/**
+ * 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.
+ */
+var Highlights = function (_a) {
+    var heading = _a.heading, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, content = _a.content, listItems = _a.listItems, _c = _a.columns, columns = _c === void 0 ? "2" : _c;
+    var isMaxWidthArcBreakpointXs = useMediaQuery("(max-width: 767px)");
+    return (React.createElement("div", null,
+        React.createElement(HighlightHeader, { heading: heading, headingLevel: headingLevel, content: content }),
+        React.createElement(HighlightList, { "data-testid": "highlights-list-container", listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs })));
+};
+
+export { Highlights };

package/dist/Highlights/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/highlights",
+  "types": "../types/components/Highlights/index.d.ts",
+  "main": "./Highlights.cjs.js",
+  "module": "./Highlights.esm.js",
+  "private": true
+}

package/dist/Highlights/styles.css

@@ -0,0 +1 @@
+.Highlights-module_highlights__Hf7Zq{display:grid;grid-gap:48px 24px;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}}

package/dist/PromoListing/PromoListing.cjs.js

@@ -0,0 +1,66 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../_shared/cjs/tslib.es6-ec509cfc.js');
+var React = require('react');
+var index = require('../_shared/cjs/index-9947ac13.js');
+var Carousel = require('@arc-ui/components/dist/Carousel');
+var useMediaQuery = require('@arc-ui/components/dist/use-media-query');
+var MediaCard = require('@arc-ui/components/dist/MediaCard');
+var ImpactCard = require('@arc-ui/components/dist/ImpactCard');
+var InformationCard = require('@arc-ui/components/dist/InformationCard');
+var TypographyCard = require('@arc-ui/components/dist/TypographyCard');
+var Heading = require('@arc-ui/components/dist/Heading');
+var VerticalSpace = require('@arc-ui/components/dist/VerticalSpace');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Do not edit directly
+ * Generated on Fri, 25 Oct 2024 08:31:13 GMT
+ */
+var ArcSizeBreakpointsL = "1024px";
+
+var styles = {"PromoListing":"PromoListing-module_PromoListing__6ensv","headerContent":"PromoListing-module_headerContent__rMt1t","header":"PromoListing-module_header__PDGdP","promoListingContainer":"PromoListing-module_promoListingContainer__vwez-","cardGrid":"PromoListing-module_cardGrid__llf73","cardGrid2Columns":"PromoListing-module_cardGrid2Columns__qPLQk","cardGrid3Cards":"PromoListing-module_cardGrid3Cards__VKWMs","cardGrid5Cards":"PromoListing-module_cardGrid5Cards__ywl5k","cardGrid3Columns":"PromoListing-module_cardGrid3Columns__g0Xru","cardGrid4Cards":"PromoListing-module_cardGrid4Cards__5Bv5u","cardGrid2Cards":"PromoListing-module_cardGrid2Cards__wDc4S"};
+
+var PromoListingHeader = function (_a) {
+    var heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content;
+    return (React__default["default"].createElement("div", { "data-testid": "PromoListing-header", className: styles.header },
+        React__default["default"].createElement(Heading.Heading, { level: headingLevel, size: "xl" }, heading),
+        content && (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" }),
+            React__default["default"].createElement("p", { className: styles.headerContent }, content)))));
+};
+
+/**
+ * Use `PromoListing` to give supporting information about a page or proposition in the form of the card components (`ImpactCard`, `InformationCard`, `MediaCard` and `TypographyCard`).
+ */
+var PromoListing = function (_a) {
+    var heading = _a.heading, content = _a.content, isCarousel = _a.isCarousel, cards = _a.cards, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, _c = _a.columns, columns = _c === void 0 ? "2" : _c;
+    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
+    var columnCount = isMinWidthArcBreakpointL ? columns : 2;
+    var getCard = function (card) { return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        card.type === "media-card" && React__default["default"].createElement(MediaCard.MediaCard, tslib_es6.__assign({}, card)),
+        card.type === "impact-card" && React__default["default"].createElement(ImpactCard.ImpactCard, tslib_es6.__assign({}, card)),
+        card.type === "information-card" && React__default["default"].createElement(InformationCard.InformationCard, tslib_es6.__assign({}, card)),
+        card.type === "typography-card" && React__default["default"].createElement(TypographyCard.TypographyCard, tslib_es6.__assign({}, card)))); };
+    return (React__default["default"].createElement("div", { className: styles.PromoListing },
+        React__default["default"].createElement(PromoListingHeader, { heading: heading, headingLevel: headingLevel, content: content }),
+        isCarousel && !isMinWidthArcBreakpointL ? (React__default["default"].createElement(Carousel.Carousel, { itemsPerSlide: 1, responsive: {
+                s: {
+                    slideAmount: 1,
+                    partialVisible: false,
+                    itemsPerSlide: 2
+                },
+                m: {
+                    slideAmount: 1,
+                    partialVisible: true,
+                    itemsPerSlide: 2
+                }
+            } }, cards === null || cards === void 0 ? void 0 : cards.map(function (card) { return getCard(card); }))) : (React__default["default"].createElement("div", { className: index.classNames(styles.cardGrid, styles["cardGrid".concat(columnCount, "Columns")], styles["cardGrid".concat(cards.length, "Cards")]) }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, index$1) { return (React__default["default"].createElement("div", { "data-testid": "promoList-card".concat(index$1), className: index.classNames(styles.promoListingContainer), key: index$1 }, getCard(card))); })))));
+};
+
+exports.PromoListing = PromoListing;

package/dist/PromoListing/PromoListing.esm.js

@@ -0,0 +1,58 @@
+import { a as __assign } from '../_shared/esm/tslib.es6-2bdcff75.js';
+import React from 'react';
+import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
+import { Carousel } from '@arc-ui/components/dist/Carousel';
+import { useMediaQuery } from '@arc-ui/components/dist/use-media-query';
+import { MediaCard } from '@arc-ui/components/dist/MediaCard';
+import { ImpactCard } from '@arc-ui/components/dist/ImpactCard';
+import { InformationCard } from '@arc-ui/components/dist/InformationCard';
+import { TypographyCard } from '@arc-ui/components/dist/TypographyCard';
+import { Heading } from '@arc-ui/components/dist/Heading';
+import { VerticalSpace } from '@arc-ui/components/dist/VerticalSpace';
+
+/**
+ * Do not edit directly
+ * Generated on Fri, 25 Oct 2024 08:31:13 GMT
+ */
+var ArcSizeBreakpointsL = "1024px";
+
+var styles = {"PromoListing":"PromoListing-module_PromoListing__6ensv","headerContent":"PromoListing-module_headerContent__rMt1t","header":"PromoListing-module_header__PDGdP","promoListingContainer":"PromoListing-module_promoListingContainer__vwez-","cardGrid":"PromoListing-module_cardGrid__llf73","cardGrid2Columns":"PromoListing-module_cardGrid2Columns__qPLQk","cardGrid3Cards":"PromoListing-module_cardGrid3Cards__VKWMs","cardGrid5Cards":"PromoListing-module_cardGrid5Cards__ywl5k","cardGrid3Columns":"PromoListing-module_cardGrid3Columns__g0Xru","cardGrid4Cards":"PromoListing-module_cardGrid4Cards__5Bv5u","cardGrid2Cards":"PromoListing-module_cardGrid2Cards__wDc4S"};
+
+var PromoListingHeader = function (_a) {
+    var heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content;
+    return (React.createElement("div", { "data-testid": "PromoListing-header", className: styles.header },
+        React.createElement(Heading, { level: headingLevel, size: "xl" }, heading),
+        content && (React.createElement(React.Fragment, null,
+            React.createElement(VerticalSpace, { size: "24" }),
+            React.createElement("p", { className: styles.headerContent }, content)))));
+};
+
+/**
+ * Use `PromoListing` to give supporting information about a page or proposition in the form of the card components (`ImpactCard`, `InformationCard`, `MediaCard` and `TypographyCard`).
+ */
+var PromoListing = function (_a) {
+    var heading = _a.heading, content = _a.content, isCarousel = _a.isCarousel, cards = _a.cards, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, _c = _a.columns, columns = _c === void 0 ? "2" : _c;
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
+    var columnCount = isMinWidthArcBreakpointL ? columns : 2;
+    var getCard = function (card) { return (React.createElement(React.Fragment, null,
+        card.type === "media-card" && React.createElement(MediaCard, __assign({}, card)),
+        card.type === "impact-card" && React.createElement(ImpactCard, __assign({}, card)),
+        card.type === "information-card" && React.createElement(InformationCard, __assign({}, card)),
+        card.type === "typography-card" && React.createElement(TypographyCard, __assign({}, card)))); };
+    return (React.createElement("div", { className: styles.PromoListing },
+        React.createElement(PromoListingHeader, { heading: heading, headingLevel: headingLevel, content: content }),
+        isCarousel && !isMinWidthArcBreakpointL ? (React.createElement(Carousel, { itemsPerSlide: 1, responsive: {
+                s: {
+                    slideAmount: 1,
+                    partialVisible: false,
+                    itemsPerSlide: 2
+                },
+                m: {
+                    slideAmount: 1,
+                    partialVisible: true,
+                    itemsPerSlide: 2
+                }
+            } }, cards === null || cards === void 0 ? void 0 : cards.map(function (card) { return getCard(card); }))) : (React.createElement("div", { className: classNames(styles.cardGrid, styles["cardGrid".concat(columnCount, "Columns")], styles["cardGrid".concat(cards.length, "Cards")]) }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, index) { return (React.createElement("div", { "data-testid": "promoList-card".concat(index), className: classNames(styles.promoListingContainer), key: index }, getCard(card))); })))));
+};
+
+export { PromoListing };

package/dist/PromoListing/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/promolisting",
+  "types": "../types/components/PromoListing/index.d.ts",
+  "main": "./PromoListing.cjs.js",
+  "module": "./PromoListing.esm.js",
+  "private": true
+}

package/dist/PromoListing/styles.css

@@ -0,0 +1 @@
+.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{display:grid;grid-gap:24px;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{grid-column-end:4}.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{grid-column-end:6}.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){grid-column-end:4}.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}}

package/dist/Quote/Quote.cjs.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../_shared/cjs/tslib.es6-ec509cfc.js');
+var React = require('react');
+var index = require('../_shared/cjs/index-9947ac13.js');
+var index_es = require('../_shared/cjs/index.es-a9e01247.js');
+var Author = require('../_shared/cjs/Author-cd166353.js');
+require('@arc-ui/components/dist/Grid');
+require('@arc-ui/components/dist/Avatar');
+require('@arc-ui/components/dist/Heading');
+require('@arc-ui/components/dist/Text');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var styles = {"blockQuote":"Quote-module_blockQuote__STj-z","quoteContent":"Quote-module_quoteContent__kWc51","quoteDefault":"Quote-module_quoteDefault__tU5db","quoteSecondary":"Quote-module_quoteSecondary__3Rk3f","quoteIcon":"Quote-module_quoteIcon__HK1TV"};
+
+/**
+ * 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.*/
+var Quote = function (_a) {
+    var author = _a.author, _b = _a.styling, styling = _b === void 0 ? "Default" : _b, content = _a.content, citeUrl = _a.citeUrl, props = tslib_es6.__rest(_a, ["author", "styling", "content", "citeUrl"]);
+    return (React__default["default"].createElement("div", tslib_es6.__assign({ className: "community-component--quote", "data-testid": "quote-test" }, index_es.filterDataAttrs(props)),
+        React__default["default"].createElement("blockquote", { "data-testid": "style-test", className: index.classNames(styles.blockQuote, styles["quote".concat(styling)]), cite: citeUrl },
+            React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles.quoteIcon, "aria-hidden": "true" },
+                React__default["default"].createElement("path", { d: "M21.8085 76.4706C15.9574 76.4706 10.8156 74.2732 6.38298 69.8783C2.12766 65.4834 0 58.979 0 50.3651C0 40.5206 3.10284 31.1156 9.30851 22.1501C15.6915 13.1846 25.3546 5.80122 38.2979 0L44.1489 11.3387C37.4113 14.3272 31.7376 18.0189 27.1277 22.4138C22.5177 26.6329 19.6809 31.4672 18.617 36.9168C19.8582 36.741 21.0106 36.6531 22.0745 36.6531C27.7482 36.6531 32.4468 38.499 36.1702 42.1907C40.0709 45.8824 42.0213 50.7167 42.0213 56.6937C42.0213 62.4949 39.9823 67.2414 35.9043 70.9331C32.0035 74.6247 27.305 76.4706 21.8085 76.4706ZM77.6596 76.4706C71.8085 76.4706 66.6667 74.2732 62.234 69.8783C57.9787 65.4834 55.8511 58.979 55.8511 50.3651C55.8511 40.5206 58.9539 31.1156 65.1596 22.1501C71.5425 13.1846 81.2057 5.80122 94.1489 0L100 11.3387C93.2624 14.3272 87.5886 18.0189 82.9787 22.4138C78.3688 26.6329 75.5319 31.4672 74.4681 36.9168C75.7092 36.741 76.8617 36.6531 77.9255 36.6531C83.5993 36.6531 88.2979 38.499 92.0213 42.1907C95.922 45.8824 97.8723 50.7167 97.8723 56.6937C97.8723 62.4949 95.8333 67.2414 91.7553 70.9331C87.8546 74.6247 83.156 76.4706 77.6596 76.4706Z" })),
+            React__default["default"].createElement("p", { className: styles.quoteContent }, content)),
+        author && (React__default["default"].createElement(Author.Author, { name: author.name, title: author.title, avatar: author.avatar }))));
+};
+
+exports.Quote = Quote;

package/dist/Quote/Quote.esm.js

@@ -0,0 +1,25 @@
+import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-2bdcff75.js';
+import React from 'react';
+import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
+import { f as filterDataAttrs } from '../_shared/esm/index.es-33860780.js';
+import { A as Author } from '../_shared/esm/Author-9c7cb4f2.js';
+import '@arc-ui/components/dist/Grid';
+import '@arc-ui/components/dist/Avatar';
+import '@arc-ui/components/dist/Heading';
+import '@arc-ui/components/dist/Text';
+
+var styles = {"blockQuote":"Quote-module_blockQuote__STj-z","quoteContent":"Quote-module_quoteContent__kWc51","quoteDefault":"Quote-module_quoteDefault__tU5db","quoteSecondary":"Quote-module_quoteSecondary__3Rk3f","quoteIcon":"Quote-module_quoteIcon__HK1TV"};
+
+/**
+ * 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.*/
+var Quote = function (_a) {
+    var author = _a.author, _b = _a.styling, styling = _b === void 0 ? "Default" : _b, content = _a.content, citeUrl = _a.citeUrl, props = __rest(_a, ["author", "styling", "content", "citeUrl"]);
+    return (React.createElement("div", __assign({ className: "community-component--quote", "data-testid": "quote-test" }, filterDataAttrs(props)),
+        React.createElement("blockquote", { "data-testid": "style-test", className: classNames(styles.blockQuote, styles["quote".concat(styling)]), cite: citeUrl },
+            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles.quoteIcon, "aria-hidden": "true" },
+                React.createElement("path", { d: "M21.8085 76.4706C15.9574 76.4706 10.8156 74.2732 6.38298 69.8783C2.12766 65.4834 0 58.979 0 50.3651C0 40.5206 3.10284 31.1156 9.30851 22.1501C15.6915 13.1846 25.3546 5.80122 38.2979 0L44.1489 11.3387C37.4113 14.3272 31.7376 18.0189 27.1277 22.4138C22.5177 26.6329 19.6809 31.4672 18.617 36.9168C19.8582 36.741 21.0106 36.6531 22.0745 36.6531C27.7482 36.6531 32.4468 38.499 36.1702 42.1907C40.0709 45.8824 42.0213 50.7167 42.0213 56.6937C42.0213 62.4949 39.9823 67.2414 35.9043 70.9331C32.0035 74.6247 27.305 76.4706 21.8085 76.4706ZM77.6596 76.4706C71.8085 76.4706 66.6667 74.2732 62.234 69.8783C57.9787 65.4834 55.8511 58.979 55.8511 50.3651C55.8511 40.5206 58.9539 31.1156 65.1596 22.1501C71.5425 13.1846 81.2057 5.80122 94.1489 0L100 11.3387C93.2624 14.3272 87.5886 18.0189 82.9787 22.4138C78.3688 26.6329 75.5319 31.4672 74.4681 36.9168C75.7092 36.741 76.8617 36.6531 77.9255 36.6531C83.5993 36.6531 88.2979 38.499 92.0213 42.1907C95.922 45.8824 97.8723 50.7167 97.8723 56.6937C97.8723 62.4949 95.8333 67.2414 91.7553 70.9331C87.8546 74.6247 83.156 76.4706 77.6596 76.4706Z" })),
+            React.createElement("p", { className: styles.quoteContent }, content)),
+        author && (React.createElement(Author, { name: author.name, title: author.title, avatar: author.avatar }))));
+};
+
+export { Quote };

package/dist/Quote/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/quote",
+  "types": "../types/components/Quote/index.d.ts",
+  "main": "./Quote.cjs.js",
+  "module": "./Quote.esm.js",
+  "private": true
+}

package/dist/Quote/styles.css

@@ -0,0 +1 @@
+.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-top:32px;padding-bottom:32px}.Quote-module_quoteDefault__tU5db{color:#5514b4;fill:#5514b4}.Quote-module_quoteSecondary__3Rk3f{color:#434343;fill:#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/_shared/cjs/Author-cd166353.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-ec509cfc.js');
+var React = require('react');
+var index_es = require('./index.es-a9e01247.js');
+var Grid = require('@arc-ui/components/dist/Grid');
+var Avatar = require('@arc-ui/components/dist/Avatar');
+var Heading = require('@arc-ui/components/dist/Heading');
+var Text = require('@arc-ui/components/dist/Text');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var styles = {"authorContent":"Author-module_authorContent__TBY7b"};
+
+var Author = function (_a) {
+    var name = _a.name, title = _a.title, avatar = _a.avatar, props = tslib_es6.__rest(_a, ["name", "title", "avatar"]);
+    return (React__default["default"].createElement("div", tslib_es6.__assign({}, index_es.filterDataAttrs(props)),
+        React__default["default"].createElement(Grid.Grid, { isFluid: true, isGutterless: true },
+            React__default["default"].createElement(Grid.Grid.Row, { align: "center" },
+                React__default["default"].createElement(Grid.Grid.Col, { xs: "auto" },
+                    React__default["default"].createElement(Avatar.Avatar, tslib_es6.__assign({ size: "m" }, avatar, { "data-testid": "authorAvatar" }))),
+                React__default["default"].createElement(Grid.Grid.Col, null,
+                    React__default["default"].createElement("div", { className: styles.authorContent, "data-testid": "authorContent" },
+                        React__default["default"].createElement(Heading.Heading, { size: "xs" }, name),
+                        React__default["default"].createElement(Text.Text, { size: "s" }, title)))))));
+};
+
+exports.Author = Author;

package/dist/_shared/cjs/index-9947ac13.js

@@ -0,0 +1,64 @@
+'use strict';
+
+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.classNames = classNames;

package/dist/_shared/cjs/index.es-875b2756.js

@@ -0,0 +1,13 @@
+'use strict';
+
+/**
+ * Do not edit directly
+ * Generated on Fri, 25 Oct 2024 08:31:41 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.
+
+exports.SemSizeBreakpointsL = SemSizeBreakpointsL;
+exports.SemSizeBreakpointsM = SemSizeBreakpointsM;
+exports.SemSizeBreakpointsXl = SemSizeBreakpointsXl;

package/dist/_shared/cjs/index.es-a9e01247.js

@@ -0,0 +1,129 @@
+'use strict';
+
+var dataAttrRe = /^(data-.*)$/;
+var filterDataAttrs = function (props) {
+    var filteredProps = {};
+    for (var prop in props) {
+        if (Object.prototype.hasOwnProperty.call(props, prop) &&
+            dataAttrRe.test(prop)) {
+            filteredProps[prop] = props[prop];
+        }
+    }
+    return filteredProps;
+};
+
+var camelcase = {exports: {}};
+
+const UPPERCASE = /[\p{Lu}]/u;
+const LOWERCASE = /[\p{Ll}]/u;
+const LEADING_CAPITAL = /^[\p{Lu}](?![\p{Lu}])/gu;
+const IDENTIFIER = /([\p{Alpha}\p{N}_]|$)/u;
+const SEPARATORS = /[_.\- ]+/;
+
+const LEADING_SEPARATORS = new RegExp('^' + SEPARATORS.source);
+const SEPARATORS_AND_IDENTIFIER = new RegExp(SEPARATORS.source + IDENTIFIER.source, 'gu');
+const NUMBERS_AND_IDENTIFIER = new RegExp('\\d+' + IDENTIFIER.source, 'gu');
+
+const preserveCamelCase = (string, toLowerCase, toUpperCase) => {
+	let isLastCharLower = false;
+	let isLastCharUpper = false;
+	let isLastLastCharUpper = false;
+
+	for (let i = 0; i < string.length; i++) {
+		const character = string[i];
+
+		if (isLastCharLower && UPPERCASE.test(character)) {
+			string = string.slice(0, i) + '-' + string.slice(i);
+			isLastCharLower = false;
+			isLastLastCharUpper = isLastCharUpper;
+			isLastCharUpper = true;
+			i++;
+		} else if (isLastCharUpper && isLastLastCharUpper && LOWERCASE.test(character)) {
+			string = string.slice(0, i - 1) + '-' + string.slice(i - 1);
+			isLastLastCharUpper = isLastCharUpper;
+			isLastCharUpper = false;
+			isLastCharLower = true;
+		} else {
+			isLastCharLower = toLowerCase(character) === character && toUpperCase(character) !== character;
+			isLastLastCharUpper = isLastCharUpper;
+			isLastCharUpper = toUpperCase(character) === character && toLowerCase(character) !== character;
+		}
+	}
+
+	return string;
+};
+
+const preserveConsecutiveUppercase = (input, toLowerCase) => {
+	LEADING_CAPITAL.lastIndex = 0;
+
+	return input.replace(LEADING_CAPITAL, m1 => toLowerCase(m1));
+};
+
+const postProcess = (input, toUpperCase) => {
+	SEPARATORS_AND_IDENTIFIER.lastIndex = 0;
+	NUMBERS_AND_IDENTIFIER.lastIndex = 0;
+
+	return input.replace(SEPARATORS_AND_IDENTIFIER, (_, identifier) => toUpperCase(identifier))
+		.replace(NUMBERS_AND_IDENTIFIER, m => toUpperCase(m));
+};
+
+const camelCase = (input, options) => {
+	if (!(typeof input === 'string' || Array.isArray(input))) {
+		throw new TypeError('Expected the input to be `string | string[]`');
+	}
+
+	options = {
+		pascalCase: false,
+		preserveConsecutiveUppercase: false,
+		...options
+	};
+
+	if (Array.isArray(input)) {
+		input = input.map(x => x.trim())
+			.filter(x => x.length)
+			.join('-');
+	} else {
+		input = input.trim();
+	}
+
+	if (input.length === 0) {
+		return '';
+	}
+
+	const toLowerCase = options.locale === false ?
+		string => string.toLowerCase() :
+		string => string.toLocaleLowerCase(options.locale);
+	const toUpperCase = options.locale === false ?
+		string => string.toUpperCase() :
+		string => string.toLocaleUpperCase(options.locale);
+
+	if (input.length === 1) {
+		return options.pascalCase ? toUpperCase(input) : toLowerCase(input);
+	}
+
+	const hasUpperCase = input !== toLowerCase(input);
+
+	if (hasUpperCase) {
+		input = preserveCamelCase(input, toLowerCase, toUpperCase);
+	}
+
+	input = input.replace(LEADING_SEPARATORS, '');
+
+	if (options.preserveConsecutiveUppercase) {
+		input = preserveConsecutiveUppercase(input, toLowerCase);
+	} else {
+		input = toLowerCase(input);
+	}
+
+	if (options.pascalCase) {
+		input = toUpperCase(input.charAt(0)) + input.slice(1);
+	}
+
+	return postProcess(input, toUpperCase);
+};
+
+camelcase.exports = camelCase;
+// TODO: Remove this for the next major release
+camelcase.exports.default = camelCase;
+
+exports.filterDataAttrs = filterDataAttrs;