@arc-ui/community-components 3.15.0 → 3.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +14 -14
- package/CHANGELOG.md +27 -0
- package/lib/ArticleCarousel/ArticleCarousel.cjs +1 -1
- package/lib/ArticleCarousel/ArticleCarousel.mjs +1 -1
- package/lib/ComparisonTable/ComparisonTable.cjs +317 -0
- package/lib/ComparisonTable/ComparisonTable.mjs +310 -0
- package/lib/ComparisonTable/styles.css +1 -0
- package/lib/CopyLead/CopyLead.cjs +1 -1
- package/lib/CopyLead/CopyLead.mjs +1 -1
- package/lib/FeaturePost/FeaturePost.cjs +13 -12
- package/lib/FeaturePost/FeaturePost.mjs +13 -12
- package/lib/FeaturePost/styles.css +1 -1
- package/lib/Highlights/Highlights.cjs +7 -7
- package/lib/Highlights/Highlights.mjs +7 -7
- package/lib/ProductCard/ProductCard.cjs +13 -35
- package/lib/ProductCard/ProductCard.mjs +12 -34
- package/lib/ProductNavigation/ProductNavigation.cjs +1 -1
- package/lib/ProductNavigation/ProductNavigation.mjs +1 -1
- package/lib/PromoListing/PromoListing.cjs +1 -1
- package/lib/PromoListing/PromoListing.mjs +1 -1
- package/lib/Summary/Summary.cjs +1 -1
- package/lib/Summary/Summary.mjs +1 -1
- package/lib/_shared/cjs/ProductCardPriceIncrease-BP39clav.cjs +38 -0
- package/lib/_shared/cjs/{index.es-C-y6aRIY.cjs → index.es-oEhoU2Bd.cjs} +1 -1
- package/lib/_shared/esm/ProductCardPriceIncrease-CJyG2wv-.mjs +35 -0
- package/lib/_shared/esm/{index.es-YxZ1vAot.mjs → index.es-DujqqZXe.mjs} +1 -1
- package/lib/index.cjs +508 -200
- package/lib/index.cjs.map +1 -1
- package/lib/index.d.cts +213 -22
- package/lib/index.d.mts +213 -22
- package/lib/index.mjs +503 -201
- package/lib/index.mjs.map +1 -1
- package/lib/styles.css +1 -1
- package/package.json +16 -16
- package/src/components/ComparisonTable/ComparisonTable.module.css +503 -0
- package/src/components/ComparisonTable/ComparisonTable.tsx +104 -0
- package/src/components/ComparisonTable/components/Cell/Cell.tsx +44 -0
- package/src/components/ComparisonTable/components/ControlCell/ControlCell.tsx +21 -0
- package/src/components/ComparisonTable/components/DesktopRow/DesktopRow.tsx +59 -0
- package/src/components/ComparisonTable/components/DesktopTable/DesktopTable.tsx +150 -0
- package/src/components/ComparisonTable/components/FeatureCell/FeatureCell.module.css +56 -0
- package/src/components/ComparisonTable/components/FeatureCell/FeatureCell.tsx +96 -0
- package/src/components/ComparisonTable/components/HeaderCell/HeaderCell.tsx +59 -0
- package/src/components/ComparisonTable/components/MobileRow/MobileRow.tsx +77 -0
- package/src/components/ComparisonTable/components/MobileTable/MobileTable.tsx +103 -0
- package/src/components/ComparisonTable/components/Section/Section.tsx +75 -0
- package/src/components/ComparisonTable/components/SectionToggle/SectionToggle.tsx +63 -0
- package/src/components/ComparisonTable/components/SubHeaderCell/SubHeaderCell.tsx +62 -0
- package/src/components/ComparisonTable/index.ts +22 -0
- package/src/components/ComparisonTable/types/comparison-column.ts +22 -0
- package/src/components/ComparisonTable/types/comparison-row.ts +23 -0
- package/src/components/ComparisonTable/types/comparison-section.ts +39 -0
- package/src/components/ComparisonTable/types/comparison-sub-row.ts +8 -0
- package/src/components/ComparisonTable/utils/group-rows.ts +69 -0
- package/src/components/ComparisonTable/utils/use-section-state.ts +45 -0
- package/src/components/FeaturePost/FeaturePost.module.css +24 -2
- package/src/components/FeaturePost/FeaturePost.tsx +26 -25
- package/src/components/FeaturePost/types/feature-post-cta-footer.ts +4 -3
- package/src/components/Highlights/Highlights.tsx +5 -32
- package/src/components/ProductCard/ProductCard.tsx +14 -14
- package/src/components/ProductCard/ProductCardPrice/ProductCardPrice.tsx +11 -3
- package/src/components/ProductCard/ProductCardPriceIncrease/ProductCardPriceIncrease.module.css +1 -2
- package/src/components/ProductCard/ProductCardPriceIncrease/ProductCardPriceIncrease.tsx +14 -3
- package/src/components/ProductCardGrid/ProductCardGrid.tsx +8 -8
- package/src/components/ProductCardGrid/components/CardGrid/CardGrid.tsx +6 -6
- package/src/components/index.ts +1 -0
- package/versions.json +1 -1
|
@@ -11,67 +11,45 @@ var VerticalSpace = require('@arc-ui/components/VerticalSpace');
|
|
|
11
11
|
var Rule = require('@arc-ui/components/Rule');
|
|
12
12
|
var VisuallyHidden = require('@arc-ui/components/VisuallyHidden');
|
|
13
13
|
var Icon = require('@arc-ui/components/Icon');
|
|
14
|
+
var ProductCardPriceIncrease = require('../_shared/cjs/ProductCardPriceIncrease-BP39clav.cjs');
|
|
14
15
|
|
|
15
|
-
var styles$
|
|
16
|
+
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"};
|
|
16
17
|
|
|
17
18
|
var ProductCard = function (_a) {
|
|
18
19
|
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 = tslib_es6.__rest(_a, ["heading", "headingLevel", "topSlot", "divider", "bottomSlot", "promoted", "button"]);
|
|
19
20
|
var headingId = React.useId();
|
|
20
|
-
return (React.createElement("div", tslib_es6.__assign({ className: styles$
|
|
21
|
-
React.createElement("div", { className: styles$
|
|
22
|
-
promoted && (React.createElement("div", { className: styles$
|
|
21
|
+
return (React.createElement("div", tslib_es6.__assign({ className: styles$1.productCard }, filterAttrs.filterAttrs(props), { role: "group", "aria-labelledby": headingId }),
|
|
22
|
+
React.createElement("div", { className: styles$1.productCardTop },
|
|
23
|
+
promoted && (React.createElement("div", { className: styles$1.productCardPromoted },
|
|
23
24
|
React.createElement(Surface.Surface, { background: promoted.background, paddingVertical: "16", paddingHorizontal: "24" },
|
|
24
25
|
React.createElement(VisuallyHidden.VisuallyHidden, null, "Promotional offer. "),
|
|
25
26
|
React.createElement(Text.Text, { size: "s" }, promoted.content)))),
|
|
26
|
-
React.createElement("div", { className: styles$
|
|
27
|
+
React.createElement("div", { className: styles$1.productCardTopSection },
|
|
27
28
|
React.createElement(Heading.Heading, { id: headingId, size: "m", level: headingLevel, color: "brand" }, heading),
|
|
28
29
|
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
29
30
|
topSlot)),
|
|
30
|
-
React.createElement("div", { className: styles$
|
|
31
|
-
divider ? (React.createElement("div", { className: styles$
|
|
31
|
+
React.createElement("div", { className: styles$1.productCardBottom },
|
|
32
|
+
divider ? (React.createElement("div", { className: styles$1.divider },
|
|
32
33
|
React.createElement(Rule.Rule, null))) : (React.createElement(VerticalSpace.VerticalSpace, { size: "16" })),
|
|
33
34
|
bottomSlot,
|
|
34
35
|
React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
|
|
35
|
-
React.createElement("div", { className: styles$
|
|
36
|
+
React.createElement("div", { className: styles$1.ctaWrapper },
|
|
36
37
|
React.createElement(ButtonV2.ButtonV2, tslib_es6.__assign({ label: "Explore ".concat(heading), buttonStyle: "secondary", isFullWidth: true }, button))))));
|
|
37
38
|
};
|
|
38
39
|
|
|
39
|
-
var styles
|
|
40
|
+
var styles = {"benefitList":"ProductCardBenefits-module_benefitList__Qb1io","benefitItem":"ProductCardBenefits-module_benefitItem__nJqa6"};
|
|
40
41
|
|
|
41
42
|
var ProductCardBenefits = function (_a) {
|
|
42
43
|
var _b = _a.heading, heading = _b === void 0 ? "Includes:" : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "4" : _c, benefits = _a.benefits;
|
|
43
44
|
return (React.createElement(React.Fragment, null,
|
|
44
45
|
React.createElement(Heading.Heading, { size: "xs", level: headingLevel }, heading),
|
|
45
46
|
React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
|
|
46
|
-
React.createElement("ul", { className: styles
|
|
47
|
+
React.createElement("ul", { className: styles.benefitList }, benefits.map(function (benefit, index) { return (React.createElement("li", { key: index, className: styles.benefitItem },
|
|
47
48
|
React.createElement(Icon.Icon, { icon: benefit.icon, color: "brand", size: 24 }),
|
|
48
49
|
benefit.benefit)); }))));
|
|
49
50
|
};
|
|
50
51
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
var ProductCardPriceIncrease = function (_a) {
|
|
54
|
-
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;
|
|
55
|
-
return (React.createElement(React.Fragment, null,
|
|
56
|
-
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
57
|
-
React.createElement(Heading.Heading, { size: "xs", level: headingLevel }, heading),
|
|
58
|
-
React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
|
|
59
|
-
React.createElement("div", { className: styles$1.priceIncreaseWrapper },
|
|
60
|
-
React.createElement("div", { className: styles$1.priceIncreaseBorder }),
|
|
61
|
-
React.createElement("ul", { className: styles$1.priceIncreaseList }, items.map(function (item, index) { return (React.createElement("li", { key: index, className: styles$1.priceIncreaseItem }, item)); })))));
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
var styles = {"productCardPrice":"ProductCardPrice-module_productCardPrice__6k4kU"};
|
|
65
|
-
|
|
66
|
-
var ProductCardPrice = function (_a) {
|
|
67
|
-
var prefix = _a.prefix, value = _a.value, suffix = _a.suffix;
|
|
68
|
-
return (React.createElement("div", { className: styles.productCardPrice },
|
|
69
|
-
prefix && (React.createElement(Text.Text, { tone: "muted", size: "s" }, prefix)),
|
|
70
|
-
React.createElement(Heading.Heading, { color: "brand", size: "m" }, value),
|
|
71
|
-
suffix && (React.createElement(Text.Text, { tone: "muted", size: "s" }, suffix))));
|
|
72
|
-
};
|
|
73
|
-
|
|
52
|
+
exports.ProductCardPrice = ProductCardPriceIncrease.ProductCardPrice;
|
|
53
|
+
exports.ProductCardPriceIncrease = ProductCardPriceIncrease.ProductCardPriceIncrease;
|
|
74
54
|
exports.ProductCard = ProductCard;
|
|
75
55
|
exports.ProductCardBenefits = ProductCardBenefits;
|
|
76
|
-
exports.ProductCardPrice = ProductCardPrice;
|
|
77
|
-
exports.ProductCardPriceIncrease = ProductCardPriceIncrease;
|
|
@@ -9,64 +9,42 @@ import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
|
|
|
9
9
|
import { Rule } from '@arc-ui/components/Rule';
|
|
10
10
|
import { VisuallyHidden } from '@arc-ui/components/VisuallyHidden';
|
|
11
11
|
import { Icon } from '@arc-ui/components/Icon';
|
|
12
|
+
export { a as ProductCardPrice, P as ProductCardPriceIncrease } from '../_shared/esm/ProductCardPriceIncrease-CJyG2wv-.mjs';
|
|
12
13
|
|
|
13
|
-
var styles$
|
|
14
|
+
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"};
|
|
14
15
|
|
|
15
16
|
var ProductCard = function (_a) {
|
|
16
17
|
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"]);
|
|
17
18
|
var headingId = useId();
|
|
18
|
-
return (React__default.createElement("div", __assign({ className: styles$
|
|
19
|
-
React__default.createElement("div", { className: styles$
|
|
20
|
-
promoted && (React__default.createElement("div", { className: styles$
|
|
19
|
+
return (React__default.createElement("div", __assign({ className: styles$1.productCard }, filterAttrs(props), { role: "group", "aria-labelledby": headingId }),
|
|
20
|
+
React__default.createElement("div", { className: styles$1.productCardTop },
|
|
21
|
+
promoted && (React__default.createElement("div", { className: styles$1.productCardPromoted },
|
|
21
22
|
React__default.createElement(Surface, { background: promoted.background, paddingVertical: "16", paddingHorizontal: "24" },
|
|
22
23
|
React__default.createElement(VisuallyHidden, null, "Promotional offer. "),
|
|
23
24
|
React__default.createElement(Text, { size: "s" }, promoted.content)))),
|
|
24
|
-
React__default.createElement("div", { className: styles$
|
|
25
|
+
React__default.createElement("div", { className: styles$1.productCardTopSection },
|
|
25
26
|
React__default.createElement(Heading, { id: headingId, size: "m", level: headingLevel, color: "brand" }, heading),
|
|
26
27
|
React__default.createElement(VerticalSpace, { size: "16" }),
|
|
27
28
|
topSlot)),
|
|
28
|
-
React__default.createElement("div", { className: styles$
|
|
29
|
-
divider ? (React__default.createElement("div", { className: styles$
|
|
29
|
+
React__default.createElement("div", { className: styles$1.productCardBottom },
|
|
30
|
+
divider ? (React__default.createElement("div", { className: styles$1.divider },
|
|
30
31
|
React__default.createElement(Rule, null))) : (React__default.createElement(VerticalSpace, { size: "16" })),
|
|
31
32
|
bottomSlot,
|
|
32
33
|
React__default.createElement(VerticalSpace, { size: "24" }),
|
|
33
|
-
React__default.createElement("div", { className: styles$
|
|
34
|
+
React__default.createElement("div", { className: styles$1.ctaWrapper },
|
|
34
35
|
React__default.createElement(ButtonV2, __assign({ label: "Explore ".concat(heading), buttonStyle: "secondary", isFullWidth: true }, button))))));
|
|
35
36
|
};
|
|
36
37
|
|
|
37
|
-
var styles
|
|
38
|
+
var styles = {"benefitList":"ProductCardBenefits-module_benefitList__Qb1io","benefitItem":"ProductCardBenefits-module_benefitItem__nJqa6"};
|
|
38
39
|
|
|
39
40
|
var ProductCardBenefits = function (_a) {
|
|
40
41
|
var _b = _a.heading, heading = _b === void 0 ? "Includes:" : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "4" : _c, benefits = _a.benefits;
|
|
41
42
|
return (React__default.createElement(React__default.Fragment, null,
|
|
42
43
|
React__default.createElement(Heading, { size: "xs", level: headingLevel }, heading),
|
|
43
44
|
React__default.createElement(VerticalSpace, { size: "12" }),
|
|
44
|
-
React__default.createElement("ul", { className: styles
|
|
45
|
+
React__default.createElement("ul", { className: styles.benefitList }, benefits.map(function (benefit, index) { return (React__default.createElement("li", { key: index, className: styles.benefitItem },
|
|
45
46
|
React__default.createElement(Icon, { icon: benefit.icon, color: "brand", size: 24 }),
|
|
46
47
|
benefit.benefit)); }))));
|
|
47
48
|
};
|
|
48
49
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
var ProductCardPriceIncrease = function (_a) {
|
|
52
|
-
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;
|
|
53
|
-
return (React__default.createElement(React__default.Fragment, null,
|
|
54
|
-
React__default.createElement(VerticalSpace, { size: "16" }),
|
|
55
|
-
React__default.createElement(Heading, { size: "xs", level: headingLevel }, heading),
|
|
56
|
-
React__default.createElement(VerticalSpace, { size: "12" }),
|
|
57
|
-
React__default.createElement("div", { className: styles$1.priceIncreaseWrapper },
|
|
58
|
-
React__default.createElement("div", { className: styles$1.priceIncreaseBorder }),
|
|
59
|
-
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)); })))));
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
var styles = {"productCardPrice":"ProductCardPrice-module_productCardPrice__6k4kU"};
|
|
63
|
-
|
|
64
|
-
var ProductCardPrice = function (_a) {
|
|
65
|
-
var prefix = _a.prefix, value = _a.value, suffix = _a.suffix;
|
|
66
|
-
return (React__default.createElement("div", { className: styles.productCardPrice },
|
|
67
|
-
prefix && (React__default.createElement(Text, { tone: "muted", size: "s" }, prefix)),
|
|
68
|
-
React__default.createElement(Heading, { color: "brand", size: "m" }, value),
|
|
69
|
-
suffix && (React__default.createElement(Text, { tone: "muted", size: "s" }, suffix))));
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
export { ProductCard, ProductCardBenefits, ProductCardPrice, ProductCardPriceIncrease };
|
|
50
|
+
export { ProductCard, ProductCardBenefits };
|
|
@@ -5,7 +5,7 @@ var React = require('react');
|
|
|
5
5
|
var index = require('../_shared/cjs/index-B7Z7sgRq.cjs');
|
|
6
6
|
var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
|
|
7
7
|
var useMediaQuery = require('@arc-ui/components/use-media-query');
|
|
8
|
-
var index_es = require('../_shared/cjs/index.es-
|
|
8
|
+
var index_es = require('../_shared/cjs/index.es-oEhoU2Bd.cjs');
|
|
9
9
|
var SectionHeading = require('../_shared/cjs/SectionHeading-XCMdv8eZ.cjs');
|
|
10
10
|
var ButtonV2 = require('@arc-ui/components/ButtonV2');
|
|
11
11
|
var InformationCard = require('@arc-ui/components/InformationCard');
|
|
@@ -3,7 +3,7 @@ import React__default, { useState, useRef, useEffect } from 'react';
|
|
|
3
3
|
import { c as classNames } from '../_shared/esm/index-BSO2EFem.mjs';
|
|
4
4
|
import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
|
|
5
5
|
import { useMediaQuery } from '@arc-ui/components/use-media-query';
|
|
6
|
-
import { A as ArcSizeBreakpointsS } from '../_shared/esm/index.es-
|
|
6
|
+
import { A as ArcSizeBreakpointsS } from '../_shared/esm/index.es-DujqqZXe.mjs';
|
|
7
7
|
import { S as SectionHeading } from '../_shared/esm/SectionHeading-lyXLUtdr.mjs';
|
|
8
8
|
import { ButtonV2 } from '@arc-ui/components/ButtonV2';
|
|
9
9
|
import { InformationCard } from '@arc-ui/components/InformationCard';
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var index = require('../_shared/cjs/index-B7Z7sgRq.cjs');
|
|
6
|
-
var index_es = require('../_shared/cjs/index.es-
|
|
6
|
+
var index_es = require('../_shared/cjs/index.es-oEhoU2Bd.cjs');
|
|
7
7
|
var Carousel = require('@arc-ui/components/Carousel');
|
|
8
8
|
var Heading = require('@arc-ui/components/Heading');
|
|
9
9
|
var useMediaQuery = require('@arc-ui/components/use-media-query');
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-BVXMhEem.mjs';
|
|
2
2
|
import React__default, { useId } from 'react';
|
|
3
3
|
import { c as classNames } from '../_shared/esm/index-BSO2EFem.mjs';
|
|
4
|
-
import { a as ArcSizeBreakpointsL, b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-
|
|
4
|
+
import { a as ArcSizeBreakpointsL, b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-DujqqZXe.mjs';
|
|
5
5
|
import { Carousel } from '@arc-ui/components/Carousel';
|
|
6
6
|
import { Heading } from '@arc-ui/components/Heading';
|
|
7
7
|
import { useMediaQuery } from '@arc-ui/components/use-media-query';
|
package/lib/Summary/Summary.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
|
|
4
4
|
var React = require('react');
|
|
5
|
-
var index_es = require('../_shared/cjs/index.es-
|
|
5
|
+
var index_es = require('../_shared/cjs/index.es-oEhoU2Bd.cjs');
|
|
6
6
|
var Heading = require('@arc-ui/components/Heading');
|
|
7
7
|
var Text = require('@arc-ui/components/Text');
|
|
8
8
|
var Box = require('@arc-ui/components/Box');
|
package/lib/Summary/Summary.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-BVXMhEem.mjs';
|
|
2
2
|
import React__default from 'react';
|
|
3
|
-
import { b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-
|
|
3
|
+
import { b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-DujqqZXe.mjs';
|
|
4
4
|
import { Heading } from '@arc-ui/components/Heading';
|
|
5
5
|
import { Text } from '@arc-ui/components/Text';
|
|
6
6
|
import { Box } from '@arc-ui/components/Box';
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var Heading = require('@arc-ui/components/Heading');
|
|
5
|
+
var Text = require('@arc-ui/components/Text');
|
|
6
|
+
var VerticalSpace = require('@arc-ui/components/VerticalSpace');
|
|
7
|
+
|
|
8
|
+
var styles$1 = {"productCardPrice":"ProductCardPrice-module_productCardPrice__6k4kU"};
|
|
9
|
+
|
|
10
|
+
var ProductCardPrice = function (_a) {
|
|
11
|
+
var prefix = _a.prefix, value = _a.value, suffix = _a.suffix;
|
|
12
|
+
return (React.createElement("div", { className: styles$1.productCardPrice },
|
|
13
|
+
prefix && (React.createElement(Text.Text, { tone: "muted", size: "s" }, prefix)),
|
|
14
|
+
React.createElement("div", { style: { display: "flex", alignItems: "baseline" } },
|
|
15
|
+
React.createElement(Heading.Heading, { color: "brand", size: "s" }, value.slice(0, 1)),
|
|
16
|
+
React.createElement(Heading.Heading, { color: "brand", size: "l" }, value.slice(1, -3)),
|
|
17
|
+
React.createElement(Heading.Heading, { color: "brand", size: "s" }, value.slice(-3))),
|
|
18
|
+
suffix && (React.createElement(Text.Text, { tone: "muted", size: "s" }, suffix))));
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
var styles = {"priceIncreaseWrapper":"ProductCardPriceIncrease-module_priceIncreaseWrapper__Psknf","priceIncreaseBorder":"ProductCardPriceIncrease-module_priceIncreaseBorder__NC2eA","priceIncreaseList":"ProductCardPriceIncrease-module_priceIncreaseList__qsmOQ","priceIncreaseItem":"ProductCardPriceIncrease-module_priceIncreaseItem__f-x-D"};
|
|
22
|
+
|
|
23
|
+
var ProductCardPriceIncrease = function (_a) {
|
|
24
|
+
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;
|
|
25
|
+
return (React.createElement(React.Fragment, null,
|
|
26
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
27
|
+
React.createElement(Heading.Heading, { size: "xs", level: headingLevel }, heading),
|
|
28
|
+
React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
|
|
29
|
+
React.createElement("div", { className: styles.priceIncreaseWrapper },
|
|
30
|
+
!hideBorder && React.createElement("div", { className: styles.priceIncreaseBorder }),
|
|
31
|
+
React.createElement("ul", { className: styles.priceIncreaseList }, items.map(function (item, index) { return (React.createElement("li", { key: index, className: styles.priceIncreaseItem },
|
|
32
|
+
React.createElement(React.Fragment, null,
|
|
33
|
+
React.createElement("b", null, item.slice(0, 6)),
|
|
34
|
+
React.createElement(React.Fragment, null, item.slice(6))))); })))));
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
exports.ProductCardPrice = ProductCardPrice;
|
|
38
|
+
exports.ProductCardPriceIncrease = ProductCardPriceIncrease;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import { Heading } from '@arc-ui/components/Heading';
|
|
3
|
+
import { Text } from '@arc-ui/components/Text';
|
|
4
|
+
import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
|
|
5
|
+
|
|
6
|
+
var styles$1 = {"productCardPrice":"ProductCardPrice-module_productCardPrice__6k4kU"};
|
|
7
|
+
|
|
8
|
+
var ProductCardPrice = function (_a) {
|
|
9
|
+
var prefix = _a.prefix, value = _a.value, suffix = _a.suffix;
|
|
10
|
+
return (React__default.createElement("div", { className: styles$1.productCardPrice },
|
|
11
|
+
prefix && (React__default.createElement(Text, { tone: "muted", size: "s" }, prefix)),
|
|
12
|
+
React__default.createElement("div", { style: { display: "flex", alignItems: "baseline" } },
|
|
13
|
+
React__default.createElement(Heading, { color: "brand", size: "s" }, value.slice(0, 1)),
|
|
14
|
+
React__default.createElement(Heading, { color: "brand", size: "l" }, value.slice(1, -3)),
|
|
15
|
+
React__default.createElement(Heading, { color: "brand", size: "s" }, value.slice(-3))),
|
|
16
|
+
suffix && (React__default.createElement(Text, { tone: "muted", size: "s" }, suffix))));
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
var styles = {"priceIncreaseWrapper":"ProductCardPriceIncrease-module_priceIncreaseWrapper__Psknf","priceIncreaseBorder":"ProductCardPriceIncrease-module_priceIncreaseBorder__NC2eA","priceIncreaseList":"ProductCardPriceIncrease-module_priceIncreaseList__qsmOQ","priceIncreaseItem":"ProductCardPriceIncrease-module_priceIncreaseItem__f-x-D"};
|
|
20
|
+
|
|
21
|
+
var ProductCardPriceIncrease = function (_a) {
|
|
22
|
+
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;
|
|
23
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
24
|
+
React__default.createElement(VerticalSpace, { size: "16" }),
|
|
25
|
+
React__default.createElement(Heading, { size: "xs", level: headingLevel }, heading),
|
|
26
|
+
React__default.createElement(VerticalSpace, { size: "12" }),
|
|
27
|
+
React__default.createElement("div", { className: styles.priceIncreaseWrapper },
|
|
28
|
+
!hideBorder && React__default.createElement("div", { className: styles.priceIncreaseBorder }),
|
|
29
|
+
React__default.createElement("ul", { className: styles.priceIncreaseList }, items.map(function (item, index) { return (React__default.createElement("li", { key: index, className: styles.priceIncreaseItem },
|
|
30
|
+
React__default.createElement(React__default.Fragment, null,
|
|
31
|
+
React__default.createElement("b", null, item.slice(0, 6)),
|
|
32
|
+
React__default.createElement(React__default.Fragment, null, item.slice(6))))); })))));
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
export { ProductCardPriceIncrease as P, ProductCardPrice as a };
|