@arc-ui/community-components 3.16.0 → 3.17.0

package/lib/ProductCard/ProductCard.mjs

@@ -9,64 +9,42 @@ import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
 import { Rule } from '@arc-ui/components/Rule';
 import { VisuallyHidden } from '@arc-ui/components/VisuallyHidden';
 import { Icon } from '@arc-ui/components/Icon';
+export { a as ProductCardPrice, P as ProductCardPriceIncrease } from '../_shared/esm/ProductCardPriceIncrease-CJyG2wv-.mjs';
 
-var styles$3 = {"productCard":"ProductCard-module_productCard__4-BqH","productCardPromoted":"ProductCard-module_productCardPromoted__7cxo-","productCardTopSection":"ProductCard-module_productCardTopSection__8ukd-","divider":"ProductCard-module_divider__rF6XX","productCardBottom":"ProductCard-module_productCardBottom__XvXan","ctaWrapper":"ProductCard-module_ctaWrapper__bJfHv"};
+var styles$1 = {"productCard":"ProductCard-module_productCard__4-BqH","productCardPromoted":"ProductCard-module_productCardPromoted__7cxo-","productCardTopSection":"ProductCard-module_productCardTopSection__8ukd-","divider":"ProductCard-module_divider__rF6XX","productCardBottom":"ProductCard-module_productCardBottom__XvXan","ctaWrapper":"ProductCard-module_ctaWrapper__bJfHv"};
 
 var ProductCard = function (_a) {
     var heading = _a.heading, headingLevel = _a.headingLevel, topSlot = _a.topSlot, _b = _a.divider, divider = _b === void 0 ? true : _b, bottomSlot = _a.bottomSlot, promoted = _a.promoted, button = _a.button, props = __rest(_a, ["heading", "headingLevel", "topSlot", "divider", "bottomSlot", "promoted", "button"]);
     var headingId = useId();
-    return (React__default.createElement("div", __assign({ className: styles$3.productCard }, filterAttrs(props), { role: "group", "aria-labelledby": headingId }),
-        React__default.createElement("div", { className: styles$3.productCardTop },
-            promoted && (React__default.createElement("div", { className: styles$3.productCardPromoted },
+    return (React__default.createElement("div", __assign({ className: styles$1.productCard }, filterAttrs(props), { role: "group", "aria-labelledby": headingId }),
+        React__default.createElement("div", { className: styles$1.productCardTop },
+            promoted && (React__default.createElement("div", { className: styles$1.productCardPromoted },
                 React__default.createElement(Surface, { background: promoted.background, paddingVertical: "16", paddingHorizontal: "24" },
                     React__default.createElement(VisuallyHidden, null, "Promotional offer. "),
                     React__default.createElement(Text, { size: "s" }, promoted.content)))),
-            React__default.createElement("div", { className: styles$3.productCardTopSection },
+            React__default.createElement("div", { className: styles$1.productCardTopSection },
                 React__default.createElement(Heading, { id: headingId, size: "m", level: headingLevel, color: "brand" }, heading),
                 React__default.createElement(VerticalSpace, { size: "16" }),
                 topSlot)),
-        React__default.createElement("div", { className: styles$3.productCardBottom },
-            divider ? (React__default.createElement("div", { className: styles$3.divider },
+        React__default.createElement("div", { className: styles$1.productCardBottom },
+            divider ? (React__default.createElement("div", { className: styles$1.divider },
                 React__default.createElement(Rule, null))) : (React__default.createElement(VerticalSpace, { size: "16" })),
             bottomSlot,
             React__default.createElement(VerticalSpace, { size: "24" }),
-            React__default.createElement("div", { className: styles$3.ctaWrapper },
+            React__default.createElement("div", { className: styles$1.ctaWrapper },
                 React__default.createElement(ButtonV2, __assign({ label: "Explore ".concat(heading), buttonStyle: "secondary", isFullWidth: true }, button))))));
 };
 
-var styles$2 = {"benefitList":"ProductCardBenefits-module_benefitList__Qb1io","benefitItem":"ProductCardBenefits-module_benefitItem__nJqa6"};
+var styles = {"benefitList":"ProductCardBenefits-module_benefitList__Qb1io","benefitItem":"ProductCardBenefits-module_benefitItem__nJqa6"};
 
 var ProductCardBenefits = function (_a) {
     var _b = _a.heading, heading = _b === void 0 ? "Includes:" : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "4" : _c, benefits = _a.benefits;
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Heading, { size: "xs", level: headingLevel }, heading),
         React__default.createElement(VerticalSpace, { size: "12" }),
-        React__default.createElement("ul", { className: styles$2.benefitList }, benefits.map(function (benefit, index) { return (React__default.createElement("li", { key: index, className: styles$2.benefitItem },
+        React__default.createElement("ul", { className: styles.benefitList }, benefits.map(function (benefit, index) { return (React__default.createElement("li", { key: index, className: styles.benefitItem },
             React__default.createElement(Icon, { icon: benefit.icon, color: "brand", size: 24 }),
             benefit.benefit)); }))));
 };
 
-var styles$1 = {"priceIncreaseWrapper":"ProductCardPriceIncrease-module_priceIncreaseWrapper__Psknf","priceIncreaseBorder":"ProductCardPriceIncrease-module_priceIncreaseBorder__NC2eA","priceIncreaseList":"ProductCardPriceIncrease-module_priceIncreaseList__qsmOQ","priceIncreaseItem":"ProductCardPriceIncrease-module_priceIncreaseItem__f-x-D"};
-
-var ProductCardPriceIncrease = function (_a) {
-    var _b = _a.heading, heading = _b === void 0 ? "Price increasing to" : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "4" : _c, _d = _a.items, items = _d === void 0 ? [] : _d;
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(VerticalSpace, { size: "16" }),
-        React__default.createElement(Heading, { size: "xs", level: headingLevel }, heading),
-        React__default.createElement(VerticalSpace, { size: "12" }),
-        React__default.createElement("div", { className: styles$1.priceIncreaseWrapper },
-            React__default.createElement("div", { className: styles$1.priceIncreaseBorder }),
-            React__default.createElement("ul", { className: styles$1.priceIncreaseList }, items.map(function (item, index) { return (React__default.createElement("li", { key: index, className: styles$1.priceIncreaseItem }, item)); })))));
-};
-
-var styles = {"productCardPrice":"ProductCardPrice-module_productCardPrice__6k4kU"};
-
-var ProductCardPrice = function (_a) {
-    var prefix = _a.prefix, value = _a.value, suffix = _a.suffix;
-    return (React__default.createElement("div", { className: styles.productCardPrice },
-        prefix && (React__default.createElement(Text, { tone: "muted", size: "s" }, prefix)),
-        React__default.createElement(Heading, { color: "brand", size: "m" }, value),
-        suffix && (React__default.createElement(Text, { tone: "muted", size: "s" }, suffix))));
-};
-
-export { ProductCard, ProductCardBenefits, ProductCardPrice, ProductCardPriceIncrease };
+export { ProductCard, ProductCardBenefits };

package/lib/_shared/cjs/ProductCardPriceIncrease-BP39clav.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react');
+var Heading = require('@arc-ui/components/Heading');
+var Text = require('@arc-ui/components/Text');
+var VerticalSpace = require('@arc-ui/components/VerticalSpace');
+
+var styles$1 = {"productCardPrice":"ProductCardPrice-module_productCardPrice__6k4kU"};
+
+var ProductCardPrice = function (_a) {
+    var prefix = _a.prefix, value = _a.value, suffix = _a.suffix;
+    return (React.createElement("div", { className: styles$1.productCardPrice },
+        prefix && (React.createElement(Text.Text, { tone: "muted", size: "s" }, prefix)),
+        React.createElement("div", { style: { display: "flex", alignItems: "baseline" } },
+            React.createElement(Heading.Heading, { color: "brand", size: "s" }, value.slice(0, 1)),
+            React.createElement(Heading.Heading, { color: "brand", size: "l" }, value.slice(1, -3)),
+            React.createElement(Heading.Heading, { color: "brand", size: "s" }, value.slice(-3))),
+        suffix && (React.createElement(Text.Text, { tone: "muted", size: "s" }, suffix))));
+};
+
+var styles = {"priceIncreaseWrapper":"ProductCardPriceIncrease-module_priceIncreaseWrapper__Psknf","priceIncreaseBorder":"ProductCardPriceIncrease-module_priceIncreaseBorder__NC2eA","priceIncreaseList":"ProductCardPriceIncrease-module_priceIncreaseList__qsmOQ","priceIncreaseItem":"ProductCardPriceIncrease-module_priceIncreaseItem__f-x-D"};
+
+var ProductCardPriceIncrease = function (_a) {
+    var _b = _a.heading, heading = _b === void 0 ? "Price increasing to" : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "4" : _c, _d = _a.items, items = _d === void 0 ? [] : _d, _e = _a.hideBorder, hideBorder = _e === void 0 ? false : _e;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
+        React.createElement(Heading.Heading, { size: "xs", level: headingLevel }, heading),
+        React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
+        React.createElement("div", { className: styles.priceIncreaseWrapper },
+            !hideBorder && React.createElement("div", { className: styles.priceIncreaseBorder }),
+            React.createElement("ul", { className: styles.priceIncreaseList }, items.map(function (item, index) { return (React.createElement("li", { key: index, className: styles.priceIncreaseItem },
+                React.createElement(React.Fragment, null,
+                    React.createElement("b", null, item.slice(0, 6)),
+                    React.createElement(React.Fragment, null, item.slice(6))))); })))));
+};
+
+exports.ProductCardPrice = ProductCardPrice;
+exports.ProductCardPriceIncrease = ProductCardPriceIncrease;

package/lib/_shared/esm/ProductCardPriceIncrease-CJyG2wv-.mjs

@@ -0,0 +1,35 @@
+import React__default from 'react';
+import { Heading } from '@arc-ui/components/Heading';
+import { Text } from '@arc-ui/components/Text';
+import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
+
+var styles$1 = {"productCardPrice":"ProductCardPrice-module_productCardPrice__6k4kU"};
+
+var ProductCardPrice = function (_a) {
+    var prefix = _a.prefix, value = _a.value, suffix = _a.suffix;
+    return (React__default.createElement("div", { className: styles$1.productCardPrice },
+        prefix && (React__default.createElement(Text, { tone: "muted", size: "s" }, prefix)),
+        React__default.createElement("div", { style: { display: "flex", alignItems: "baseline" } },
+            React__default.createElement(Heading, { color: "brand", size: "s" }, value.slice(0, 1)),
+            React__default.createElement(Heading, { color: "brand", size: "l" }, value.slice(1, -3)),
+            React__default.createElement(Heading, { color: "brand", size: "s" }, value.slice(-3))),
+        suffix && (React__default.createElement(Text, { tone: "muted", size: "s" }, suffix))));
+};
+
+var styles = {"priceIncreaseWrapper":"ProductCardPriceIncrease-module_priceIncreaseWrapper__Psknf","priceIncreaseBorder":"ProductCardPriceIncrease-module_priceIncreaseBorder__NC2eA","priceIncreaseList":"ProductCardPriceIncrease-module_priceIncreaseList__qsmOQ","priceIncreaseItem":"ProductCardPriceIncrease-module_priceIncreaseItem__f-x-D"};
+
+var ProductCardPriceIncrease = function (_a) {
+    var _b = _a.heading, heading = _b === void 0 ? "Price increasing to" : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "4" : _c, _d = _a.items, items = _d === void 0 ? [] : _d, _e = _a.hideBorder, hideBorder = _e === void 0 ? false : _e;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(VerticalSpace, { size: "16" }),
+        React__default.createElement(Heading, { size: "xs", level: headingLevel }, heading),
+        React__default.createElement(VerticalSpace, { size: "12" }),
+        React__default.createElement("div", { className: styles.priceIncreaseWrapper },
+            !hideBorder && React__default.createElement("div", { className: styles.priceIncreaseBorder }),
+            React__default.createElement("ul", { className: styles.priceIncreaseList }, items.map(function (item, index) { return (React__default.createElement("li", { key: index, className: styles.priceIncreaseItem },
+                React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("b", null, item.slice(0, 6)),
+                    React__default.createElement(React__default.Fragment, null, item.slice(6))))); })))));
+};
+
+export { ProductCardPriceIncrease as P, ProductCardPrice as a };