npm - @primer/react-brand - Versions diffs - 0.68.0-rc.59bbed40 → 0.68.0-rc.5bd56cbb - Mend

@primer/react-brand 0.68.0-rc.59bbed40 → 0.68.0-rc.5bd56cbb

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.

Files changed (1465) hide show

package/esm/PricingOptions/PricingOptions.js ADDED Viewed

@@ -0,0 +1,362 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { Text as t } from "../Text/Text.js";
+import { Heading as n } from "../Heading/Heading.js";
+import { CheckIcon as r, TriangleDownIcon as i, XIcon as a } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { Button as o } from "../Button/Button.js";
+import { useWindowSize as s } from "../hooks/useWindowSize.js";
+import { Accordion as c } from "../Accordion/Accordion.js";
+import { UnorderedList as l } from "../list/UnorderedList/UnorderedList.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/pricing-options/pricing-options-B9TarQsR.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/pricing-options/colors-with-modes-DBi2l0Re.css';/* empty css                                                                                                           */
+/* empty css                                                                                                             */
+import u from "./PricingOptions.module.js";
+import { Tooltip as d } from "../Tooltip/Tooltip.js";
+import f, { forwardRef as p, useMemo as m } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/PricingOptions/PricingOptions.tsx
+var v = {
+	root: "PricingOptions",
+	item: "PricingOptions__item",
+	labelRow: "PricingOptions__labels",
+	heading: "PricingOptions__heading",
+	label: "PricingOptions__label",
+	description: "PricingOptions__description",
+	price: "PricingOptions__price",
+	actionsMessage: "PricingOptions__actionsMessage",
+	primaryAction: "PricingOptions__primaryAction",
+	secondaryAction: "PricingOptions__secondaryAction",
+	menuAction: "PricingOptions__menuAction",
+	featureList: "PricingOptions__featureList",
+	featureListHeading: "PricingOptions__featureListHeading",
+	featureListItem: "PricingOptions__featureListItem",
+	featureListGroupHeading: "PricingOptions__featureListGroupHeading",
+	footnote: "PricingOptions__footnote"
+}, y = f.createContext({
+	align: "start",
+	allFeatureListsExpanded: !1,
+	featureListUserInteracted: !1,
+	updateFeatureListExpanded: () => {},
+	setFeatureListUserInteracted: () => {}
+}), b = ({ children: e, align: t = "start" }) => {
+	let [n, r] = f.useState(!1), [i, a] = f.useState(!1);
+	return /* @__PURE__ */ g(y.Provider, {
+		value: {
+			allFeatureListsExpanded: n,
+			updateFeatureListExpanded: (e) => {
+				r(() => e);
+			},
+			align: t,
+			featureListUserInteracted: i,
+			setFeatureListUserInteracted: a
+		},
+		children: e
+	});
+}, x = () => f.useContext(y), S = "What's included", C = ({ children: e }) => /* @__PURE__ */ g(h, { children: e }), w = p(({ align: t = "start", children: n, className: r, "data-testid": i, variant: a = "default", ...o }, s) => {
+	let c = m(() => f.Children.toArray(n).filter((e) => f.isValidElement(e) && typeof e.type != "string" && e.type === T), [n]).slice(0, 4), l = m(() => c.map((e) => {
+		let t = f.Children.toArray(e.props.children).find((e) => f.isValidElement(e) && typeof e.type != "string" && e.type === C);
+		return f.isValidElement(t) ? t : null;
+	}), [c]), d = l.some((e) => e !== null);
+	return /* @__PURE__ */ g(b, {
+		align: t,
+		children: /* @__PURE__ */ _("div", {
+			className: e(u.PricingOptions, u[`PricingOptions--layout-${a.includes("default") ? "default" : "cards"}`], u[`PricingOptions--items${c.length}`], u[`PricingOptions--appearance-${a.includes("gradient") ? "gradient" : "solid"}`], r),
+			"data-testid": i || v.root,
+			ref: s,
+			...o,
+			children: [c, d && /* @__PURE__ */ g("div", {
+				className: u.PricingOptions__labels,
+				"data-testid": v.labelRow,
+				style: { "--brand-pricing-options-column-count": c.length },
+				children: l.map((t, n) => {
+					let r = !!t?.props.children;
+					return /* @__PURE__ */ g("div", {
+						className: e(u["PricingOptions__label-cell"], r ? u["PricingOptions__label-cell--has-label"] : u["PricingOptions__label-cell--empty"]),
+						"data-testid": t?.props["data-testid"] || v.label,
+						children: t?.props.children ? /* @__PURE__ */ g("span", {
+							className: u.PricingOptions__label,
+							children: t.props.children
+						}) : null
+					}, n);
+				})
+			})]
+		})
+	});
+}), T = p(({ "data-testid": t, children: n, className: r, leadingComponent: i, ...a }, o) => {
+	let { align: s } = x(), { Heading: c, Description: l, Price: d, FeatureList: p, Actions: h, ActionsMessage: y, Footnote: b } = m(() => f.Children.toArray(n), [n]).reduce((e, t) => (f.isValidElement(t) && typeof t.type != "string" && (t.type === k && (e.FeatureList = t), (t.type === P || t.type === F || t.type === I) && e.Actions.push(t), t.type === N && (e.ActionsMessage = t), t.type === L && (e.Footnote = t), t.type === D && (e.Heading = t), t.type === E && (e.Description = t), t.type === O && (e.Price = t)), e), {
+		FeatureList: null,
+		Actions: [],
+		ActionsMessage: null,
+		Footnote: null,
+		Heading: null,
+		Description: null,
+		Price: null
+	});
+	return /* @__PURE__ */ _("div", {
+		className: e(u.PricingOptions__item, i && u["PricingOptions__item--has-leading-component"], u[`PricingOptions__item--align-${s}`], r),
+		"data-testid": t || v.item,
+		ref: o,
+		...a,
+		children: [
+			/* @__PURE__ */ g("div", {
+				className: u.PricingOptions__header,
+				children: c
+			}),
+			l,
+			d,
+			i && /* @__PURE__ */ g("div", {
+				className: u["PricingOptions__leading-component"],
+				children: i
+			}),
+			(h.length > 0 || y) && /* @__PURE__ */ _("div", {
+				className: u.PricingOptions__actions,
+				children: [h, y]
+			}),
+			p,
+			b
+		]
+	});
+}), E = p(({ children: n, className: r, "data-testid": i, ...a }, o) => /* @__PURE__ */ g(t, {
+	as: "p",
+	className: e(u.PricingOptions__description, r),
+	"data-testid": i || v.description,
+	ref: o,
+	size: "200",
+	variant: "muted",
+	...a,
+	children: n
+})), D = p(({ as: t = "h3", children: r, "data-testid": i, size: a = "5", className: o, ...s }, c) => /* @__PURE__ */ g(n, {
+	as: t,
+	className: e(u.PricingOptions__heading, u[`PricingOptions__heading--size-${a}`], o),
+	"data-testid": i || v.heading,
+	ref: c,
+	size: a,
+	...s,
+	children: r
+})), O = p(({ children: n, className: r, currencyCode: i = "USD", currencySymbol: a = "$", "data-testid": o, originalPrice: s, trailingText: c, ...l }, d) => /* @__PURE__ */ _(t, {
+	as: "p",
+	className: e(u.PricingOptions__price, r),
+	"data-testid": o || v.price,
+	ref: d,
+	weight: "normal",
+	...l,
+	children: [
+		/* @__PURE__ */ _("span", {
+			className: u["PricingOptions__price-amount"],
+			children: [
+				/* @__PURE__ */ g(t, {
+					as: "span",
+					className: u["PricingOptions__price-currency-symbol"],
+					size: "500",
+					weight: "normal",
+					children: a
+				}),
+				/* @__PURE__ */ g(t, {
+					as: "span",
+					className: u["PricingOptions__price-value"],
+					size: "500",
+					weight: "normal",
+					children: n
+				}),
+				/* @__PURE__ */ g(t, {
+					as: "span",
+					className: u["PricingOptions__price-currency-code"],
+					size: "100",
+					weight: "normal",
+					children: i
+				})
+			]
+		}),
+		s && /* @__PURE__ */ _("del", {
+			className: u["PricingOptions__price-original-price"],
+			children: [/* @__PURE__ */ g(t, {
+				size: "400",
+				variant: "muted",
+				weight: "normal",
+				children: a
+			}), /* @__PURE__ */ g(t, {
+				className: u["PricingOptions__price-original-price-value"],
+				size: "300",
+				variant: "muted",
+				weight: "normal",
+				children: s
+			})]
+		}),
+		c && /* @__PURE__ */ g(t, {
+			as: "span",
+			className: u["PricingOptions__price-trailing-text"],
+			size: "200",
+			variant: "muted",
+			children: c
+		})
+	]
+})), k = p(({ children: t, className: n, "data-testid": r, hasDivider: a = !0, expanded: o, accordionAs: d = "h4", ...p }, m) => {
+	let { allFeatureListsExpanded: h, updateFeatureListExpanded: y, featureListUserInteracted: b, setFeatureListUserInteracted: C } = x(), { isMedium: w, isXLarge: T, isSmall: E } = s();
+	f.useEffect(() => {
+		(o === void 0 || typeof o == "object") && C(!1);
+	}, [
+		w,
+		T,
+		E,
+		C,
+		o
+	]);
+	let D = f.useMemo(() => {
+		if (b) return h;
+		if (typeof o == "boolean") return o;
+		if (o === void 0) return !!(T || w);
+		let { narrow: e, regular: t, wide: n } = o;
+		return T ? n : w ? t : e;
+	}, [
+		o,
+		h,
+		w,
+		T,
+		b
+	]), O = /* @__PURE__ */ g(R.FeatureListHeading, { children: S }), k = f.Children.toArray(t).reduce((e, t) => (f.isValidElement(t) && t.type === A ? O = t : f.isValidElement(t) && t.type === M ? (e.length === 0 && e.push({
+		Heading: null,
+		Items: []
+	}), e[e.length - 1].Items.push(t)) : f.isValidElement(t) && t.type === j && e.push({
+		Heading: t,
+		Items: []
+	}), e), []).map(({ Heading: e, Items: t }, n) => /* @__PURE__ */ _("div", {
+		className: u["PricingOptions__feature-list-set"],
+		children: [e, /* @__PURE__ */ g(l, {
+			variant: "checked",
+			...p,
+			children: t
+		})]
+	}, n));
+	return /* @__PURE__ */ g("div", {
+		ref: m,
+		className: e(u["PricingOptions__feature-list"], a && u["PricingOptions__feature-list--has-divider"], n),
+		"data-testid": r || v.featureList,
+		children: /* @__PURE__ */ _(c, {
+			className: u["PricingOptions__feature-list-accordion"],
+			open: D,
+			onToggle: (e) => {
+				C(!0), y(e.currentTarget.open);
+			},
+			children: [/* @__PURE__ */ _(c.Heading, {
+				as: d,
+				className: u["PricingOptions__feature-list-accordion-heading"],
+				children: [O, /* @__PURE__ */ g(i, { className: u["PricingOptions__feature-list-accordion-chevron"] })]
+			}), /* @__PURE__ */ g(c.Content, {
+				className: u["PricingOptions__feature-list-accordion-content"],
+				children: k
+			})]
+		})
+	});
+}), A = p(({ children: e, className: t, "data-testid": n, ...r }, i) => /* @__PURE__ */ g("div", {
+	className: t,
+	"data-testid": n || v.featureListHeading,
+	ref: i,
+	...r,
+	children: e
+})), j = p(({ children: t, className: r, "data-testid": i, ...a }, o) => /* @__PURE__ */ g(n, {
+	as: "h4",
+	className: e(u["PricingOptions__feature-list-group-heading"], r),
+	"data-testid": i || v.featureListGroupHeading,
+	ref: o,
+	size: "subhead-medium",
+	...a,
+	children: t
+})), M = p(({ children: t, className: n, infoTooltip: i, leadingVisual: o, leadingVisualFill: s, variant: c = "included", "data-testid": f, ...p }, m) => {
+	let h = o ?? (c === "included" ? r : a), y = c === "included" ? "Includes" : "Does not include", b = s ?? (c === "included" ? "var(--brand-color-accent-primary)" : "var(--brand-color-text-muted)");
+	return /* @__PURE__ */ _(l.Item, {
+		className: e(u["PricingOptions__feature-list-item"], { [u["PricingOptions__feature-list-item--excluded"]]: c === "excluded" }, i && u["PricingOptions__feature-list-item--has-info"], n),
+		"data-testid": f || v.featureListItem,
+		leadingVisual: h,
+		leadingVisualAriaLabel: y,
+		leadingVisualFill: b,
+		ref: m,
+		...p,
+		children: [t, i && /* @__PURE__ */ g(d, {
+			text: i,
+			direction: "n",
+			children: /* @__PURE__ */ g("button", {
+				type: "button",
+				className: u["PricingOptions__feature-list-item-info"],
+				"aria-label": `More information about ${typeof t == "string" ? t : "this feature"}`,
+				children: /* @__PURE__ */ _("svg", {
+					viewBox: "0 0 4 8",
+					fill: "none",
+					xmlns: "http://www.w3.org/2000/svg",
+					"aria-hidden": "true",
+					children: [/* @__PURE__ */ g("path", {
+						d: "M0.75 3C0.33579 3 0 3.33579 0 3.75C0 4.16421 0.33579 4.5 0.75 4.5H1V6.5H0.75C0.33579 6.5 0 6.8358 0 7.25C0 7.6642 0.33579 8 0.75 8H2.75C3.16421 8 3.5 7.6642 3.5 7.25C3.5 6.8358 3.16421 6.5 2.75 6.5H2.5V3.75C2.5 3.33579 2.16421 3 1.75 3H0.75Z",
+						fill: "currentColor"
+					}), /* @__PURE__ */ g("path", {
+						d: "M2.5 1C2.5 1.55228 2.05229 2 1.5 2C0.94772 2 0.5 1.55228 0.5 1C0.5 0.44772 0.94772 0 1.5 0C2.05229 0 2.5 0.44772 2.5 1Z",
+						fill: "currentColor"
+					})]
+				})
+			})
+		})]
+	});
+}), N = p(({ children: t, className: n, "data-testid": r, leadingComponent: i, ...a }, o) => /* @__PURE__ */ _("div", {
+	ref: o,
+	className: e(u["PricingOptions__actions-message"], n),
+	"data-testid": r || v.actionsMessage,
+	...a,
+	children: [i && /* @__PURE__ */ g("span", {
+		className: u["PricingOptions__actions-message-leading-component"],
+		children: i
+	}), /* @__PURE__ */ g("div", {
+		className: u["PricingOptions__actions-message-content"],
+		children: t
+	})]
+})), P = p(({ as: t, children: n, className: r, "data-testid": i, ...a }, s) => /* @__PURE__ */ g(o, {
+	ref: s,
+	as: t,
+	"data-testid": i || v.primaryAction,
+	className: e(u["PricingOptions__primary-action"], r),
+	size: "medium",
+	variant: "accent",
+	block: !0,
+	...a,
+	children: n
+})), F = p(({ as: t, children: n, className: r, "data-testid": i, ...a }, s) => /* @__PURE__ */ g(o, {
+	ref: s,
+	as: t,
+	className: e(u["PricingOptions__primary-action"], r),
+	"data-testid": i || v.secondaryAction,
+	variant: "secondary",
+	block: !0,
+	...a,
+	children: n
+})), I = p(({ children: t, className: n, "data-testid": r, ...i }, a) => /* @__PURE__ */ g("div", {
+	ref: a,
+	className: e(u["PricingOptions__menu-action"], n),
+	"data-testid": r || v.menuAction,
+	...i,
+	children: t
+})), L = p(({ children: n, className: r, "data-testid": i, ...a }, o) => /* @__PURE__ */ g(t, {
+	as: "p",
+	className: e(u.PricingOptions__footnote, r),
+	"data-testid": i || v.footnote,
+	ref: o,
+	size: "100",
+	variant: "muted",
+	weight: "light",
+	...a,
+	children: n
+})), R = Object.assign(w, {
+	ActionsMessage: N,
+	Description: E,
+	FeatureList: k,
+	FeatureListHeading: A,
+	FeatureListGroupHeading: j,
+	FeatureListItem: M,
+	Footnote: L,
+	Label: C,
+	Heading: D,
+	Item: T,
+	MenuAction: I,
+	Price: O,
+	PrimaryAction: P,
+	SecondaryAction: F,
+	testIds: v
+});
+//#endregion
+export { R as PricingOptions };
+//# sourceMappingURL=PricingOptions.js.map

package/esm/PricingOptions/PricingOptions.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PricingOptions.js","names":[],"sources":["../../src/PricingOptions/PricingOptions.tsx"],"sourcesContent":["import React, {forwardRef, HTMLAttributes, PropsWithChildren, useMemo, Ref, Dispatch} from 'react'\nimport {CheckIcon, TriangleDownIcon, XIcon} from '@primer/octicons-react'\nimport {clsx} from 'clsx'\nimport type {ListItemProps} from '../list/ListItem/ListItem'\nimport type {BaseProps} from '../component-helpers'\n\nimport {\n Accordion,\n Button,\n ButtonBaseProps,\n Heading as HeadingComponent,\n HeadingProps,\n Text,\n Tooltip,\n UnorderedList,\n UnorderedListProps,\n useWindowSize,\n} from '..'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pricing-options/pricing-options.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pricing-options/colors-with-modes.css'\n\n/**\n * Main stylesheet (as a CSS Module)\n */\nimport styles from './PricingOptions.module.css'\n\ntype AlignOptions = 'start' | 'center'\n\nexport type PricingOptionsProps = {\n align?: AlignOptions\n variant?: 'default' | 'default-gradient' | 'cards' | 'cards-gradient'\n ['data-testid']?: string\n} & PropsWithChildren<BaseProps<HTMLDivElement>> &\n HTMLAttributes<HTMLDivElement>\n\nconst testIds = {\n root: 'PricingOptions',\n item: 'PricingOptions__item',\n labelRow: 'PricingOptions__labels',\n heading: 'PricingOptions__heading',\n label: 'PricingOptions__label',\n description: 'PricingOptions__description',\n price: 'PricingOptions__price',\n actionsMessage: 'PricingOptions__actionsMessage',\n primaryAction: 'PricingOptions__primaryAction',\n secondaryAction: 'PricingOptions__secondaryAction',\n menuAction: 'PricingOptions__menuAction',\n featureList: 'PricingOptions__featureList',\n featureListHeading: 'PricingOptions__featureListHeading',\n featureListItem: 'PricingOptions__featureListItem',\n featureListGroupHeading: 'PricingOptions__featureListGroupHeading',\n footnote: 'PricingOptions__footnote',\n}\n\ntype PricingOptionsContextValue = {\n align: AlignOptions\n allFeatureListsExpanded: boolean\n updateFeatureListExpanded: Dispatch<boolean>\n featureListUserInteracted: boolean\n setFeatureListUserInteracted: Dispatch<boolean>\n}\n\nconst PricingOptionsContext = React.createContext<PricingOptionsContextValue>({\n align: 'start',\n allFeatureListsExpanded: false,\n featureListUserInteracted: false,\n updateFeatureListExpanded: () => {},\n setFeatureListUserInteracted: () => {},\n})\n\nconst PricingOptionsProvider = ({children, align = 'start'}: PropsWithChildren<{align: AlignOptions}>) => {\n const [allFeatureListsExpanded, setAllFeatureListsExpanded] = React.useState(false)\n const [featureListUserInteracted, setFeatureListUserInteracted] = React.useState(false)\n\n const updateFeatureListExpanded = (newValue: boolean) => {\n setAllFeatureListsExpanded(() => newValue)\n }\n\n return (\n <PricingOptionsContext.Provider\n value={{\n allFeatureListsExpanded,\n updateFeatureListExpanded,\n align,\n featureListUserInteracted,\n setFeatureListUserInteracted,\n }}\n >\n {children}\n </PricingOptionsContext.Provider>\n )\n}\n\nconst usePricingOptions = (): PricingOptionsContextValue => {\n return React.useContext(PricingOptionsContext)\n}\n\nconst pricingOptionsDefaultFeatureListHeading = \"What's included\"\n\ntype PricingOptionsLabelProps = PropsWithChildren<{\n 'data-testid'?: string\n}>\n\nconst PricingOptionsLabel = ({children}: PricingOptionsLabelProps) => {\n return <>{children}</>\n}\n\nconst PricingOptionsRoot = forwardRef(\n (\n {\n align = 'start',\n children,\n className,\n 'data-testid': testId,\n variant = 'default',\n ...rest\n }: PropsWithChildren<PricingOptionsProps>,\n ref: Ref<HTMLDivElement>,\n ) => {\n const filteredChildren = useMemo(\n () =>\n React.Children.toArray(children).filter(\n child => React.isValidElement(child) && typeof child.type !== 'string' && child.type === PricingOptionsItem,\n ) as React.ReactElement<PropsWithChildren<PricingOptionsItem>>[],\n [children],\n ).slice(0, 4)\n\n const headerLabels = useMemo(\n () =>\n filteredChildren.map(item => {\n const labelChild = React.Children.toArray(item.props.children).find(\n child =>\n React.isValidElement(child) && typeof child.type !== 'string' && child.type === PricingOptionsLabel,\n )\n\n return (\n React.isValidElement(labelChild) ? labelChild : null\n ) as React.ReactElement<PricingOptionsLabelProps> | null\n }),\n [filteredChildren],\n )\n\n const hasHeaderLabels = headerLabels.some(label => label !== null)\n\n return (\n <PricingOptionsProvider align={align}>\n <div\n className={clsx(\n styles.PricingOptions,\n styles[`PricingOptions--layout-${variant.includes('default') ? 'default' : 'cards'}`],\n styles[`PricingOptions--items${filteredChildren.length}`],\n styles[`PricingOptions--appearance-${variant.includes('gradient') ? 'gradient' : 'solid'}`],\n className,\n )}\n data-testid={testId || testIds.root}\n ref={ref}\n {...(rest as HTMLAttributes<HTMLElement>)}\n >\n {filteredChildren}\n\n {hasHeaderLabels && (\n <div\n className={styles['PricingOptions__labels']}\n data-testid={testIds.labelRow}\n style={\n {\n '--brand-pricing-options-column-count': filteredChildren.length,\n } as React.CSSProperties\n }\n >\n {headerLabels.map((headerLabel, index) => {\n const hasLabelContent = Boolean(headerLabel?.props.children)\n\n return (\n <div\n className={clsx(\n styles['PricingOptions__label-cell'],\n hasLabelContent\n ? styles['PricingOptions__label-cell--has-label']\n : styles['PricingOptions__label-cell--empty'],\n )}\n data-testid={headerLabel?.props['data-testid'] || testIds.label}\n key={index}\n >\n {headerLabel?.props.children ? (\n <span className={styles.PricingOptions__label}>{headerLabel.props.children}</span>\n ) : null}\n </div>\n )\n })}\n </div>\n )}\n </div>\n </PricingOptionsProvider>\n )\n },\n)\n\nexport type PricingOptionsItem = {\n ['data-testid']?: string\n /**\n * Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n */\n leadingComponent?: React.ReactElement\n} & PropsWithChildren<BaseProps<HTMLDivElement>>\n\ntype FilteredChildren = {\n FeatureList: React.ReactElement<PricingOptionsFeatureListProps> | null\n Actions: React.ReactElement<PricingOptionsActionsProps>[]\n ActionsMessage: React.ReactElement<PricingOptionsActionsMessageProps> | null\n Footnote: React.ReactElement<PricingOptionsFootnoteProps> | null\n Heading: React.ReactElement<PricingOptionsHeadingProps> | null\n Description: React.ReactElement<PricingOptionsDescriptionProps> | null\n Price: React.ReactElement<PricingOptionsPriceProps> | null\n}\n\nconst PricingOptionsItem = forwardRef(\n (\n {'data-testid': testId, children, className, leadingComponent, ...rest}: PropsWithChildren<PricingOptionsItem>,\n ref: Ref<HTMLDivElement>,\n ) => {\n const {align} = usePricingOptions()\n\n const memoizedChildren = useMemo(() => React.Children.toArray(children), [children])\n\n const filteredChildren = memoizedChildren.reduce<FilteredChildren>(\n (acc, child) => {\n if (React.isValidElement(child) && typeof child.type !== 'string') {\n if (child.type === PricingOptionsFeatureList) {\n acc.FeatureList = child as React.ReactElement<PricingOptionsFeatureListProps> | null\n }\n\n if (\n child.type === PricingOptionsPrimaryAction ||\n child.type === PricingOptionsSecondaryAction ||\n child.type === PricingOptionsMenuAction\n ) {\n acc.Actions.push(child as React.ReactElement<PricingOptionsActionsProps>)\n }\n\n if (child.type === PricingOptionsActionsMessage) {\n acc.ActionsMessage = child as React.ReactElement<PricingOptionsActionsMessageProps>\n }\n\n if (child.type === PricingOptionsFootnote) {\n acc.Footnote = child as React.ReactElement<PricingOptionsFootnoteProps>\n }\n\n if (child.type === PricingOptionsHeading) {\n acc.Heading = child as React.ReactElement<PricingOptionsHeadingProps>\n }\n\n if (child.type === PricingOptionsDescription) {\n acc.Description = child as React.ReactElement<PricingOptionsDescriptionProps>\n }\n\n if (child.type === PricingOptionsPrice) {\n acc.Price = child as React.ReactElement<PricingOptionsPriceProps>\n }\n }\n\n return acc\n },\n {\n FeatureList: null,\n Actions: [],\n ActionsMessage: null,\n Footnote: null,\n Heading: null,\n Description: null,\n Price: null,\n },\n )\n\n const {Heading, Description, Price, FeatureList, Actions, ActionsMessage, Footnote} = filteredChildren\n\n return (\n <div\n className={clsx(\n styles.PricingOptions__item,\n leadingComponent && styles['PricingOptions__item--has-leading-component'],\n styles[`PricingOptions__item--align-${align}`],\n className,\n )}\n data-testid={testId || testIds.item}\n ref={ref}\n {...(rest as HTMLAttributes<HTMLElement>)}\n >\n <div className={styles['PricingOptions__header']}>{Heading}</div>\n {Description}\n {Price}\n {leadingComponent && <div className={styles['PricingOptions__leading-component']}>{leadingComponent}</div>}\n {(Actions.length > 0 || ActionsMessage) && (\n <div className={styles.PricingOptions__actions}>\n {Actions}\n {ActionsMessage}\n </div>\n )}\n {FeatureList}\n {Footnote}\n </div>\n )\n },\n)\n\ntype PricingOptionsDescriptionProps = PropsWithChildren<BaseProps<HTMLParagraphElement>> & {\n 'data-testid'?: string\n}\n\nconst PricingOptionsDescription = forwardRef<HTMLParagraphElement, PricingOptionsDescriptionProps>(\n ({children, className, 'data-testid': testId, ...rest}, ref) => {\n return (\n <Text\n as=\"p\"\n className={clsx(styles.PricingOptions__description, className)}\n data-testid={testId || testIds.description}\n ref={ref}\n size=\"200\"\n variant=\"muted\"\n {...rest}\n >\n {children}\n </Text>\n )\n },\n)\n\ntype PricingOptionsHeadingProps = PropsWithChildren<BaseProps<HTMLHeadingElement>> & {\n 'data-testid'?: string\n} & HeadingProps\n\nconst PricingOptionsHeading = forwardRef<HTMLHeadingElement, PricingOptionsHeadingProps>(\n ({as = 'h3', children, 'data-testid': testId, size = '5', className, ...rest}, ref) => {\n return (\n <HeadingComponent\n as={as}\n className={clsx(styles.PricingOptions__heading, styles[`PricingOptions__heading--size-${size}`], className)}\n data-testid={testId || testIds.heading}\n ref={ref}\n size={size}\n {...rest}\n >\n {children}\n </HeadingComponent>\n )\n },\n)\n\ntype PricingOptionsPriceProps = PropsWithChildren<BaseProps<HTMLParagraphElement>> & {\n currencyCode?: string\n currencySymbol?: string\n 'data-testid'?: string\n originalPrice?: string\n trailingText?: string\n}\n\nconst PricingOptionsPrice = forwardRef<HTMLParagraphElement, PricingOptionsPriceProps>(\n (\n {\n children,\n className,\n currencyCode = 'USD',\n currencySymbol = '$',\n 'data-testid': testId,\n originalPrice,\n trailingText,\n ...rest\n },\n ref,\n ) => {\n return (\n <Text\n as=\"p\"\n className={clsx(styles.PricingOptions__price, className)}\n data-testid={testId || testIds.price}\n ref={ref}\n weight=\"normal\"\n {...rest}\n >\n <span className={styles['PricingOptions__price-amount']}>\n <Text as=\"span\" className={styles['PricingOptions__price-currency-symbol']} size=\"500\" weight=\"normal\">\n {currencySymbol}\n </Text>\n\n <Text as=\"span\" className={styles['PricingOptions__price-value']} size=\"500\" weight=\"normal\">\n {children}\n </Text>\n\n <Text as=\"span\" className={styles['PricingOptions__price-currency-code']} size=\"100\" weight=\"normal\">\n {currencyCode}\n </Text>\n </span>\n\n {originalPrice && (\n <del className={styles['PricingOptions__price-original-price']}>\n <Text size=\"400\" variant=\"muted\" weight=\"normal\">\n {currencySymbol}\n </Text>\n <Text\n className={styles['PricingOptions__price-original-price-value']}\n size=\"300\"\n variant=\"muted\"\n weight=\"normal\"\n >\n {originalPrice}\n </Text>\n </del>\n )}\n\n {trailingText && (\n <Text as=\"span\" className={styles['PricingOptions__price-trailing-text']} size=\"200\" variant=\"muted\">\n {trailingText}\n </Text>\n )}\n </Text>\n )\n },\n)\n\ntype PricingOptionsFeatureListProps = BaseProps<HTMLUListElement> & {\n accordionAs?: HeadingProps['as']\n expanded?: ExpandedProp\n hasDivider?: boolean\n children: React.ReactElement<PricingOptionsFeatureListGroupHeadingProps | PricingOptionsFeatureListItemProps>[]\n 'data-testid'?: string\n}\n\ntype ExpandedProp = boolean | ResponsiveExpandableProps\n\ntype ResponsiveExpandableProps = {\n narrow: boolean\n regular: boolean\n wide: boolean\n}\n\ntype ValidFeatureListChildren = {\n Heading: React.ReactElement<PricingOptionsFeatureListGroupHeadingProps> | null\n Items: React.ReactElement<PricingOptionsFeatureListItemProps>[]\n}[]\n\nconst PricingOptionsFeatureList = forwardRef<HTMLDivElement, PricingOptionsFeatureListProps>(\n ({children, className, 'data-testid': testId, hasDivider = true, expanded, accordionAs = 'h4', ...rest}, ref) => {\n const {\n allFeatureListsExpanded,\n updateFeatureListExpanded,\n featureListUserInteracted,\n setFeatureListUserInteracted,\n } = usePricingOptions()\n const {isMedium: isRegular, isXLarge: isWide, isSmall: isNarrow} = useWindowSize()\n\n React.useEffect(() => {\n if (expanded === undefined || typeof expanded === 'object') {\n setFeatureListUserInteracted(false)\n }\n }, [isRegular, isWide, isNarrow, setFeatureListUserInteracted, expanded])\n\n const shouldBeOpen = React.useMemo(() => {\n if (featureListUserInteracted) {\n return allFeatureListsExpanded\n }\n\n // Important: Fixes layout shift by ensuring that explicit values are preserved.\n if (typeof expanded === 'boolean') {\n return expanded\n }\n // If undefined, should follow some default responsive logic\n if (expanded === undefined) {\n if (isWide) return true\n if (isRegular) return true\n return false\n }\n\n // finally handle responsive objects, and go from largest to smallest viewports\n const {narrow, regular, wide} = expanded\n if (isWide) return wide\n if (isRegular) return regular\n return narrow\n }, [expanded, allFeatureListsExpanded, isRegular, isWide, featureListUserInteracted])\n\n let FeatureListHeading = (\n <PricingOptions.FeatureListHeading>{pricingOptionsDefaultFeatureListHeading}</PricingOptions.FeatureListHeading>\n )\n\n const FilteredChildrenSet = React.Children.toArray(children).reduce<ValidFeatureListChildren>((acc, child) => {\n if (React.isValidElement(child) && child.type === PricingOptionsFeatureListHeading) {\n FeatureListHeading = child\n } else if (React.isValidElement(child) && child.type === PricingOptionsFeatureListItem) {\n if (acc.length === 0) {\n acc.push({Heading: null, Items: []})\n }\n acc[acc.length - 1].Items.push(child as React.ReactElement<PricingOptionsFeatureListItemProps>)\n } else if (React.isValidElement(child) && child.type === PricingOptionsFeatureListGroupHeading) {\n acc.push({\n Heading: child as React.ReactElement<PricingOptionsFeatureListGroupHeadingProps>,\n Items: [],\n })\n }\n\n return acc\n }, [])\n\n const FeatureListItems = FilteredChildrenSet.map(({Heading: HeadingChild, Items}, index) => (\n <div className={styles['PricingOptions__feature-list-set']} key={index}>\n {HeadingChild}\n\n <UnorderedList variant=\"checked\" {...(rest as UnorderedListProps)}>\n {Items}\n </UnorderedList>\n </div>\n ))\n\n return (\n <div\n ref={ref}\n className={clsx(\n styles['PricingOptions__feature-list'],\n hasDivider && styles['PricingOptions__feature-list--has-divider'],\n className,\n )}\n data-testid={testId || testIds.featureList}\n >\n <Accordion\n className={styles['PricingOptions__feature-list-accordion']}\n open={shouldBeOpen}\n onToggle={event => {\n setFeatureListUserInteracted(true)\n updateFeatureListExpanded(event.currentTarget.open)\n }}\n >\n <Accordion.Heading as={accordionAs} className={styles['PricingOptions__feature-list-accordion-heading']}>\n {FeatureListHeading}\n\n <TriangleDownIcon className={styles['PricingOptions__feature-list-accordion-chevron']} />\n </Accordion.Heading>\n <Accordion.Content className={styles['PricingOptions__feature-list-accordion-content']}>\n {FeatureListItems}\n </Accordion.Content>\n </Accordion>\n </div>\n )\n },\n)\n\ntype PricingOptionsFeatureListHeadingProps = PropsWithChildren<BaseProps<HTMLDivElement>> & {\n 'data-testid'?: string\n}\n\nconst PricingOptionsFeatureListHeading = forwardRef<HTMLDivElement, PricingOptionsFeatureListHeadingProps>(\n ({children, className, 'data-testid': testId, ...rest}, ref) => {\n return (\n <div className={className} data-testid={testId || testIds.featureListHeading} ref={ref} {...rest}>\n {children}\n </div>\n )\n },\n)\n\ntype PricingOptionsFeatureListGroupHeadingProps = PropsWithChildren<BaseProps<HTMLHeadingElement>> & {\n as?: Exclude<HeadingProps['as'], 'h1' | 'h2'>\n 'data-testid'?: string\n}\n\nconst PricingOptionsFeatureListGroupHeading = forwardRef<\n HTMLHeadingElement,\n PricingOptionsFeatureListGroupHeadingProps\n>(({children, className, 'data-testid': testId, ...rest}, ref) => {\n return (\n <HeadingComponent\n as=\"h4\"\n className={clsx(styles['PricingOptions__feature-list-group-heading'], className)}\n data-testid={testId || testIds.featureListGroupHeading}\n ref={ref}\n size=\"subhead-medium\"\n {...rest}\n >\n {children}\n </HeadingComponent>\n )\n})\n\ntype PricingOptionsFeatureListItemProps = PropsWithChildren<BaseProps<HTMLLIElement>> & {\n 'data-testid'?: string\n infoTooltip?: string\n variant?: 'included' | 'excluded'\n} & Omit<ListItemProps, 'variant'>\n\nconst PricingOptionsFeatureListItem = forwardRef<HTMLLIElement, PricingOptionsFeatureListItemProps>(\n (\n {\n children,\n className,\n infoTooltip,\n leadingVisual,\n leadingVisualFill,\n variant = 'included',\n 'data-testid': testId,\n ...rest\n },\n ref,\n ) => {\n const itemLeadingVisual = leadingVisual ?? (variant === 'included' ? CheckIcon : XIcon)\n const itemLeadingVisualAriaLabel = variant === 'included' ? 'Includes' : 'Does not include'\n\n const itemLeadingVisualFill =\n leadingVisualFill ??\n (variant === 'included' ? 'var(--brand-color-accent-primary)' : 'var(--brand-color-text-muted)')\n\n return (\n <UnorderedList.Item\n className={clsx(\n styles['PricingOptions__feature-list-item'],\n {[styles['PricingOptions__feature-list-item--excluded']]: variant === 'excluded'},\n infoTooltip && styles['PricingOptions__feature-list-item--has-info'],\n className,\n )}\n data-testid={testId || testIds.featureListItem}\n leadingVisual={itemLeadingVisual}\n leadingVisualAriaLabel={itemLeadingVisualAriaLabel}\n leadingVisualFill={itemLeadingVisualFill}\n ref={ref}\n {...rest}\n >\n {children}\n {infoTooltip && (\n <Tooltip text={infoTooltip} direction=\"n\">\n <button\n type=\"button\"\n className={styles['PricingOptions__feature-list-item-info']}\n aria-label={`More information about ${typeof children === 'string' ? children : 'this feature'}`}\n >\n <svg viewBox=\"0 0 4 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path\n d=\"M0.75 3C0.33579 3 0 3.33579 0 3.75C0 4.16421 0.33579 4.5 0.75 4.5H1V6.5H0.75C0.33579 6.5 0 6.8358 0 7.25C0 7.6642 0.33579 8 0.75 8H2.75C3.16421 8 3.5 7.6642 3.5 7.25C3.5 6.8358 3.16421 6.5 2.75 6.5H2.5V3.75C2.5 3.33579 2.16421 3 1.75 3H0.75Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M2.5 1C2.5 1.55228 2.05229 2 1.5 2C0.94772 2 0.5 1.55228 0.5 1C0.5 0.44772 0.94772 0 1.5 0C2.05229 0 2.5 0.44772 2.5 1Z\"\n fill=\"currentColor\"\n />\n </svg>\n </button>\n </Tooltip>\n )}\n </UnorderedList.Item>\n )\n },\n)\n\ntype AsA = {as: 'a'; href: string; 'data-testid'?: string} & React.AnchorHTMLAttributes<BaseProps<HTMLAnchorElement>> &\n ButtonBaseProps\n\ntype AsButton = {as: 'button'; 'data-testid'?: string} & React.ButtonHTMLAttributes<BaseProps<HTMLButtonElement>> &\n ButtonBaseProps\n\ntype PricingOptionsActionsProps = AsA | AsButton\n\ntype PricingOptionsActionsMessageProps = PropsWithChildren<BaseProps<HTMLDivElement>> & {\n 'data-testid'?: string\n leadingComponent?: React.ReactElement\n}\n\nconst PricingOptionsActionsMessage = forwardRef<HTMLDivElement, PricingOptionsActionsMessageProps>(\n ({children, className, 'data-testid': testId, leadingComponent, ...rest}, ref) => {\n return (\n <div\n ref={ref}\n className={clsx(styles['PricingOptions__actions-message'], className)}\n data-testid={testId || testIds.actionsMessage}\n {...rest}\n >\n {leadingComponent && (\n <span className={styles['PricingOptions__actions-message-leading-component']}>{leadingComponent}</span>\n )}\n <div className={styles['PricingOptions__actions-message-content']}>{children}</div>\n </div>\n )\n },\n)\n\nconst PricingOptionsPrimaryAction = forwardRef<\n HTMLAnchorElement | HTMLButtonElement,\n PropsWithChildren<PricingOptionsActionsProps>\n>(({as, children, className, 'data-testid': testId, ...rest}, ref) => {\n return (\n <Button\n ref={ref as React.Ref<HTMLButtonElement>}\n as={as}\n data-testid={testId || testIds.primaryAction}\n className={clsx(styles['PricingOptions__primary-action'], className)}\n size=\"medium\"\n variant=\"accent\"\n block\n {...rest}\n >\n {children}\n </Button>\n )\n})\n\nconst PricingOptionsSecondaryAction = forwardRef<\n HTMLAnchorElement | HTMLButtonElement,\n PropsWithChildren<PricingOptionsActionsProps>\n>(({as, children, className, 'data-testid': testId, ...rest}, ref) => {\n return (\n <Button\n ref={ref as React.Ref<HTMLButtonElement>}\n as={as}\n className={clsx(styles['PricingOptions__primary-action'], className)}\n data-testid={testId || testIds.secondaryAction}\n variant=\"secondary\"\n block\n {...rest}\n >\n {children}\n </Button>\n )\n})\n\ntype PricingOptionsMenuActionProps = PropsWithChildren<BaseProps<HTMLDivElement>> & {\n 'data-testid'?: string\n}\n\nconst PricingOptionsMenuAction = forwardRef<HTMLDivElement, PricingOptionsMenuActionProps>(\n ({children, className, 'data-testid': testId, ...rest}, ref) => {\n return (\n <div\n ref={ref}\n className={clsx(styles['PricingOptions__menu-action'], className)}\n data-testid={testId || testIds.menuAction}\n {...rest}\n >\n {children}\n </div>\n )\n },\n)\n\ntype PricingOptionsFootnoteProps = PropsWithChildren<BaseProps<HTMLParagraphElement>> & {\n 'data-testid'?: string\n}\n\nconst PricingOptionsFootnote = forwardRef<HTMLParagraphElement, PricingOptionsFootnoteProps>(\n ({children, className, 'data-testid': testId, ...rest}, ref) => {\n return (\n <Text\n as=\"p\"\n className={clsx(styles.PricingOptions__footnote, className)}\n data-testid={testId || testIds.footnote}\n ref={ref}\n size=\"100\"\n variant=\"muted\"\n weight=\"light\"\n {...rest}\n >\n {children}\n </Text>\n )\n },\n)\n\n/**\n * Pricing options component:\n * {@link https://primer.style/brand/components/PricingOptions/ See usage examples}.\n */\nexport const PricingOptions = Object.assign(PricingOptionsRoot, {\n ActionsMessage: PricingOptionsActionsMessage,\n Description: PricingOptionsDescription,\n FeatureList: PricingOptionsFeatureList,\n FeatureListHeading: PricingOptionsFeatureListHeading,\n FeatureListGroupHeading: PricingOptionsFeatureListGroupHeading,\n FeatureListItem: PricingOptionsFeatureListItem,\n Footnote: PricingOptionsFootnote,\n Label: PricingOptionsLabel,\n Heading: PricingOptionsHeading,\n Item: PricingOptionsItem,\n MenuAction: PricingOptionsMenuAction,\n Price: PricingOptionsPrice,\n PrimaryAction: PricingOptionsPrimaryAction,\n SecondaryAction: PricingOptionsSecondaryAction,\n testIds,\n})\n"],"mappings":";;;;;;;;;;;;;;;AAuCA,IAAM,IAAU;CACd,MAAM;CACN,MAAM;CACN,UAAU;CACV,SAAS;CACT,OAAO;CACP,aAAa;CACb,OAAO;CACP,gBAAgB;CAChB,eAAe;CACf,iBAAiB;CACjB,YAAY;CACZ,aAAa;CACb,oBAAoB;CACpB,iBAAiB;CACjB,yBAAyB;CACzB,UAAU;CACX,EAUK,IAAwB,EAAM,cAA0C;CAC5E,OAAO;CACP,yBAAyB;CACzB,2BAA2B;CAC3B,iCAAiC;CACjC,oCAAoC;CACrC,CAAC,EAEI,KAA0B,EAAC,aAAU,WAAQ,cAAuD;CACxG,IAAM,CAAC,GAAyB,KAA8B,EAAM,SAAS,GAAM,EAC7E,CAAC,GAA2B,KAAgC,EAAM,SAAS,GAAM;AAMvF,QACE,kBAAC,EAAsB,UAAvB;EACE,OAAO;GACL;GACA,4BAR6B,MAAsB;AACvD,YAAiC,EAAS;;GAQtC;GACA;GACA;GACD;EAEA;EAC8B,CAAA;GAI/B,UACG,EAAM,WAAW,EAAsB,EAG1C,IAA0C,mBAM1C,KAAuB,EAAC,kBACrB,kBAAA,GAAA,EAAG,aAAY,CAAA,EAGlB,IAAqB,GAEvB,EACE,WAAQ,SACR,aACA,cACA,eAAe,GACf,aAAU,WACV,GAAG,KAEL,MACG;CACH,IAAM,IAAmB,QAErB,EAAM,SAAS,QAAQ,EAAS,CAAC,QAC/B,MAAS,EAAM,eAAe,EAAM,IAAI,OAAO,EAAM,QAAS,YAAY,EAAM,SAAS,EAC1F,EACH,CAAC,EAAS,CACX,CAAC,MAAM,GAAG,EAAE,EAEP,IAAe,QAEjB,EAAiB,KAAI,MAAQ;EAC3B,IAAM,IAAa,EAAM,SAAS,QAAQ,EAAK,MAAM,SAAS,CAAC,MAC7D,MACE,EAAM,eAAe,EAAM,IAAI,OAAO,EAAM,QAAS,YAAY,EAAM,SAAS,EACnF;AAED,SACE,EAAM,eAAe,EAAW,GAAG,IAAa;GAElD,EACJ,CAAC,EAAiB,CACnB,EAEK,IAAkB,EAAa,MAAK,MAAS,MAAU,KAAK;AAElE,QACE,kBAAC,GAAD;EAA+B;YAC7B,kBAAC,OAAD;GACE,WAAW,EACT,EAAO,gBACP,EAAO,0BAA0B,EAAQ,SAAS,UAAU,GAAG,YAAY,YAC3E,EAAO,wBAAwB,EAAiB,WAChD,EAAO,8BAA8B,EAAQ,SAAS,WAAW,GAAG,aAAa,YACjF,EACD;GACD,eAAa,KAAU,EAAQ;GAC1B;GACL,GAAK;aAVP,CAYG,GAEA,KACC,kBAAC,OAAD;IACE,WAAW,EAAO;IAClB,eAAa,EAAQ;IACrB,OACE,EACE,wCAAwC,EAAiB,QAC1D;cAGF,EAAa,KAAK,GAAa,MAAU;KACxC,IAAM,IAAkB,EAAQ,GAAa,MAAM;AAEnD,YACE,kBAAC,OAAD;MACE,WAAW,EACT,EAAO,+BACP,IACI,EAAO,2CACP,EAAO,qCACZ;MACD,eAAa,GAAa,MAAM,kBAAkB,EAAQ;gBAGzD,GAAa,MAAM,WAClB,kBAAC,QAAD;OAAM,WAAW,EAAO;iBAAwB,EAAY,MAAM;OAAgB,CAAA,GAChF;MACA,EALC,EAKD;MAER;IACE,CAAA,CAEJ;;EACiB,CAAA;EAG9B,EAuBK,IAAqB,GAEvB,EAAC,eAAe,GAAQ,aAAU,cAAW,qBAAkB,GAAG,KAClE,MACG;CACH,IAAM,EAAC,aAAS,GAAmB,EAqD7B,EAAC,YAAS,gBAAa,UAAO,gBAAa,YAAS,mBAAgB,gBAnDjD,QAAc,EAAM,SAAS,QAAQ,EAAS,EAAE,CAAC,EAAS,CAE1D,CAAiB,QACvC,GAAK,OACA,EAAM,eAAe,EAAM,IAAI,OAAO,EAAM,QAAS,aACnD,EAAM,SAAS,MACjB,EAAI,cAAc,KAIlB,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,MAEf,EAAI,QAAQ,KAAK,EAAwD,EAGvE,EAAM,SAAS,MACjB,EAAI,iBAAiB,IAGnB,EAAM,SAAS,MACjB,EAAI,WAAW,IAGb,EAAM,SAAS,MACjB,EAAI,UAAU,IAGZ,EAAM,SAAS,MACjB,EAAI,cAAc,IAGhB,EAAM,SAAS,MACjB,EAAI,QAAQ,KAIT,IAET;EACE,aAAa;EACb,SAAS,EAAE;EACX,gBAAgB;EAChB,UAAU;EACV,SAAS;EACT,aAAa;EACb,OAAO;EACR,CAGmF;AAEtF,QACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,sBACP,KAAoB,EAAO,gDAC3B,EAAO,+BAA+B,MACtC,EACD;EACD,eAAa,KAAU,EAAQ;EAC1B;EACL,GAAK;YATP;GAWE,kBAAC,OAAD;IAAK,WAAW,EAAO;cAA4B;IAAc,CAAA;GAChE;GACA;GACA,KAAoB,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAuC;IAAuB,CAAA;IACxG,EAAQ,SAAS,KAAK,MACtB,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB,CACG,GACA,EACG;;GAEP;GACA;GACG;;EAGX,EAMK,IAA4B,GAC/B,EAAC,aAAU,cAAW,eAAe,GAAQ,GAAG,KAAO,MAEpD,kBAAC,GAAD;CACE,IAAG;CACH,WAAW,EAAK,EAAO,6BAA6B,EAAU;CAC9D,eAAa,KAAU,EAAQ;CAC1B;CACL,MAAK;CACL,SAAQ;CACR,GAAI;CAEH;CACI,CAAA,CAGZ,EAMK,IAAwB,GAC3B,EAAC,QAAK,MAAM,aAAU,eAAe,GAAQ,UAAO,KAAK,cAAW,GAAG,KAAO,MAE3E,kBAAC,GAAD;CACM;CACJ,WAAW,EAAK,EAAO,yBAAyB,EAAO,iCAAiC,MAAS,EAAU;CAC3G,eAAa,KAAU,EAAQ;CAC1B;CACC;CACN,GAAI;CAEH;CACgB,CAAA,CAGxB,EAUK,IAAsB,GAExB,EACE,aACA,cACA,kBAAe,OACf,oBAAiB,KACjB,eAAe,GACf,kBACA,iBACA,GAAG,KAEL,MAGE,kBAAC,GAAD;CACE,IAAG;CACH,WAAW,EAAK,EAAO,uBAAuB,EAAU;CACxD,eAAa,KAAU,EAAQ;CAC1B;CACL,QAAO;CACP,GAAI;WANN;EAQE,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAxB;IACE,kBAAC,GAAD;KAAM,IAAG;KAAO,WAAW,EAAO;KAA0C,MAAK;KAAM,QAAO;eAC3F;KACI,CAAA;IAEP,kBAAC,GAAD;KAAM,IAAG;KAAO,WAAW,EAAO;KAAgC,MAAK;KAAM,QAAO;KACjF;KACI,CAAA;IAEP,kBAAC,GAAD;KAAM,IAAG;KAAO,WAAW,EAAO;KAAwC,MAAK;KAAM,QAAO;eACzF;KACI,CAAA;IACF;;EAEN,KACC,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACE,kBAAC,GAAD;IAAM,MAAK;IAAM,SAAQ;IAAQ,QAAO;cACrC;IACI,CAAA,EACP,kBAAC,GAAD;IACE,WAAW,EAAO;IAClB,MAAK;IACL,SAAQ;IACR,QAAO;cAEN;IACI,CAAA,CACH;;EAGP,KACC,kBAAC,GAAD;GAAM,IAAG;GAAO,WAAW,EAAO;GAAwC,MAAK;GAAM,SAAQ;aAC1F;GACI,CAAA;EAEJ;GAGZ,EAuBK,IAA4B,GAC/B,EAAC,aAAU,cAAW,eAAe,GAAQ,gBAAa,IAAM,aAAU,iBAAc,MAAM,GAAG,KAAO,MAAQ;CAC/G,IAAM,EACJ,4BACA,8BACA,8BACA,oCACE,GAAmB,EACjB,EAAC,UAAU,GAAW,UAAU,GAAQ,SAAS,MAAY,GAAe;AAElF,GAAM,gBAAgB;AACpB,GAAI,MAAa,KAAA,KAAa,OAAO,KAAa,aAChD,EAA6B,GAAM;IAEpC;EAAC;EAAW;EAAQ;EAAU;EAA8B;EAAS,CAAC;CAEzE,IAAM,IAAe,EAAM,cAAc;AACvC,MAAI,EACF,QAAO;AAIT,MAAI,OAAO,KAAa,UACtB,QAAO;AAGT,MAAI,MAAa,KAAA,EAGf,QADA,GADI,KACA;EAKN,IAAM,EAAC,WAAQ,YAAS,YAAQ;AAGhC,SAFI,IAAe,IACf,IAAkB,IACf;IACN;EAAC;EAAU;EAAyB;EAAW;EAAQ;EAA0B,CAAC,EAEjF,IACF,kBAAC,EAAe,oBAAhB,EAAA,UAAoC,GAA4E,CAAA,EAqB5G,IAlBsB,EAAM,SAAS,QAAQ,EAAS,CAAC,QAAkC,GAAK,OAC9F,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,IAChD,IAAqB,IACZ,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,KACnD,EAAI,WAAW,KACjB,EAAI,KAAK;EAAC,SAAS;EAAM,OAAO,EAAE;EAAC,CAAC,EAEtC,EAAI,EAAI,SAAS,GAAG,MAAM,KAAK,EAAgE,IACtF,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,KACvD,EAAI,KAAK;EACP,SAAS;EACT,OAAO,EAAE;EACV,CAAC,EAGG,IACN,EAAE,CAEoB,CAAoB,KAAK,EAAC,SAAS,GAAc,YAAQ,MAChF,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,CACG,GAED,kBAAC,GAAD;GAAe,SAAQ;GAAU,GAAK;aACnC;GACa,CAAA,CACZ;IAN2D,EAM3D,CACN;AAEF,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,EAAO,iCACP,KAAc,EAAO,8CACrB,EACD;EACD,eAAa,KAAU,EAAQ;YAE/B,kBAAC,GAAD;GACE,WAAW,EAAO;GAClB,MAAM;GACN,WAAU,MAAS;AAEjB,IADA,EAA6B,GAAK,EAClC,EAA0B,EAAM,cAAc,KAAK;;aALvD,CAQE,kBAAC,EAAU,SAAX;IAAmB,IAAI;IAAa,WAAW,EAAO;cAAtD,CACG,GAED,kBAAC,GAAD,EAAkB,WAAW,EAAO,mDAAqD,CAAA,CACvE;OACpB,kBAAC,EAAU,SAAX;IAAmB,WAAW,EAAO;cAClC;IACiB,CAAA,CACV;;EACR,CAAA;EAGX,EAMK,IAAmC,GACtC,EAAC,aAAU,cAAW,eAAe,GAAQ,GAAG,KAAO,MAEpD,kBAAC,OAAD;CAAgB;CAAW,eAAa,KAAU,EAAQ;CAAyB;CAAK,GAAI;CACzF;CACG,CAAA,CAGX,EAOK,IAAwC,GAG3C,EAAC,aAAU,cAAW,eAAe,GAAQ,GAAG,KAAO,MAEtD,kBAAC,GAAD;CACE,IAAG;CACH,WAAW,EAAK,EAAO,+CAA+C,EAAU;CAChF,eAAa,KAAU,EAAQ;CAC1B;CACL,MAAK;CACL,GAAI;CAEH;CACgB,CAAA,CAErB,EAQI,IAAgC,GAElC,EACE,aACA,cACA,gBACA,kBACA,sBACA,aAAU,YACV,eAAe,GACf,GAAG,KAEL,MACG;CACH,IAAM,IAAoB,MAAkB,MAAY,aAAa,IAAY,IAC3E,IAA6B,MAAY,aAAa,aAAa,oBAEnE,IACJ,MACC,MAAY,aAAa,sCAAsC;AAElE,QACE,kBAAC,EAAc,MAAf;EACE,WAAW,EACT,EAAO,sCACP,GAAE,EAAO,iDAAiD,MAAY,YAAW,EACjF,KAAe,EAAO,gDACtB,EACD;EACD,eAAa,KAAU,EAAQ;EAC/B,eAAe;EACf,wBAAwB;EACxB,mBAAmB;EACd;EACL,GAAI;YAZN,CAcG,GACA,KACC,kBAAC,GAAD;GAAS,MAAM;GAAa,WAAU;aACpC,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,EAAO;IAClB,cAAY,0BAA0B,OAAO,KAAa,WAAW,IAAW;cAEhF,kBAAC,OAAD;KAAK,SAAQ;KAAU,MAAK;KAAO,OAAM;KAA6B,eAAY;eAAlF,CACE,kBAAC,QAAD;MACE,GAAE;MACF,MAAK;MACL,CAAA,EACF,kBAAC,QAAD;MACE,GAAE;MACF,MAAK;MACL,CAAA,CACE;;IACC,CAAA;GACD,CAAA,CAEO;;EAG1B,EAeK,IAA+B,GAClC,EAAC,aAAU,cAAW,eAAe,GAAQ,qBAAkB,GAAG,KAAO,MAEtE,kBAAC,OAAD;CACO;CACL,WAAW,EAAK,EAAO,oCAAoC,EAAU;CACrE,eAAa,KAAU,EAAQ;CAC/B,GAAI;WAJN,CAMG,KACC,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAuD;EAAwB,CAAA,EAEzG,kBAAC,OAAD;EAAK,WAAW,EAAO;EAA6C;EAAe,CAAA,CAC/E;GAGX,EAEK,IAA8B,GAGjC,EAAC,OAAI,aAAU,cAAW,eAAe,GAAQ,GAAG,KAAO,MAE1D,kBAAC,GAAD;CACO;CACD;CACJ,eAAa,KAAU,EAAQ;CAC/B,WAAW,EAAK,EAAO,mCAAmC,EAAU;CACpE,MAAK;CACL,SAAQ;CACR,OAAA;CACA,GAAI;CAEH;CACM,CAAA,CAEX,EAEI,IAAgC,GAGnC,EAAC,OAAI,aAAU,cAAW,eAAe,GAAQ,GAAG,KAAO,MAE1D,kBAAC,GAAD;CACO;CACD;CACJ,WAAW,EAAK,EAAO,mCAAmC,EAAU;CACpE,eAAa,KAAU,EAAQ;CAC/B,SAAQ;CACR,OAAA;CACA,GAAI;CAEH;CACM,CAAA,CAEX,EAMI,IAA2B,GAC9B,EAAC,aAAU,cAAW,eAAe,GAAQ,GAAG,KAAO,MAEpD,kBAAC,OAAD;CACO;CACL,WAAW,EAAK,EAAO,gCAAgC,EAAU;CACjE,eAAa,KAAU,EAAQ;CAC/B,GAAI;CAEH;CACG,CAAA,CAGX,EAMK,IAAyB,GAC5B,EAAC,aAAU,cAAW,eAAe,GAAQ,GAAG,KAAO,MAEpD,kBAAC,GAAD;CACE,IAAG;CACH,WAAW,EAAK,EAAO,0BAA0B,EAAU;CAC3D,eAAa,KAAU,EAAQ;CAC1B;CACL,MAAK;CACL,SAAQ;CACR,QAAO;CACP,GAAI;CAEH;CACI,CAAA,CAGZ,EAMY,IAAiB,OAAO,OAAO,GAAoB;CAC9D,gBAAgB;CAChB,aAAa;CACb,aAAa;CACb,oBAAoB;CACpB,yBAAyB;CACzB,iBAAiB;CACjB,UAAU;CACV,OAAO;CACP,SAAS;CACT,MAAM;CACN,YAAY;CACZ,OAAO;CACP,eAAe;CACf,iBAAiB;CACjB;CACD,CAAC"}

package/esm/PricingOptions/PricingOptions.module-Cm3Oq9u6.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__PricingOptions-module__PricingOptions____Z8EC{--brand-pricing-options-item-gap:var(--brand-PricingOptions-items-gap);--brand-pricing-options-container-padding-inline:0;--brand-pricing-options-column-count:1;--brand-pricing-options-template-areas:"labels" "leadingComponent" "header" "description" "price" "actions" "feature-list" "footnote";grid-row-gap:0;grid-row-gap:var(--brand-pricing-options-item-gap,0);row-gap:0;row-gap:var(--brand-pricing-options-item-gap,0);padding-inline:0;padding-inline:var(--brand-pricing-options-container-padding-inline);display:grid}@media screen and (width<=63.24rem){.Primer_Brand__PricingOptions-module__PricingOptions____Z8EC{max-width:488px;margin-inline:auto}}@media (width>=63.25rem){.Primer_Brand__PricingOptions-module__PricingOptions____Z8EC{grid-template-areas:var(--brand-pricing-options-template-areas);grid-template-columns:repeat(var(--brand-pricing-options-column-count), minmax(0, 1fr));-moz-column-gap:0;-moz-column-gap:var(--brand-pricing-options-item-gap,0);column-gap:0;column-gap:var(--brand-pricing-options-item-gap,0);row-gap:0}.Primer_Brand__PricingOptions-module__PricingOptions--items1___ZiN3H{--brand-pricing-options-column-count:1}.Primer_Brand__PricingOptions-module__PricingOptions--items2___H5JcU{--brand-pricing-options-column-count:2}.Primer_Brand__PricingOptions-module__PricingOptions--items3___4AxSI{--brand-pricing-options-column-count:3}.Primer_Brand__PricingOptions-module__PricingOptions--items4___A590C{--brand-pricing-options-column-count:4}}.Primer_Brand__PricingOptions-module__PricingOptions__labels___WHETc{display:none}@media (width>=63.25rem){.Primer_Brand__PricingOptions-module__PricingOptions__labels___WHETc{--brand-pricing-options-column-count:1;grid-area:labels/1/labels/-1;grid-template-columns:repeat(1,minmax(0,1fr));grid-template-columns:repeat(var(--brand-pricing-options-column-count), minmax(0, 1fr));grid-column-gap:0;grid-column-gap:var(--brand-pricing-options-item-gap,0);-moz-column-gap:0;-moz-column-gap:var(--brand-pricing-options-item-gap,0);column-gap:0;column-gap:var(--brand-pricing-options-item-gap,0);display:grid}.Primer_Brand__PricingOptions-module__PricingOptions__label-cell___gs_vJ{min-height:var(--base-size-54);padding-block:var(--base-size-16);background-color:var(--brand-PricingOptions-item-bgColor-solid);align-items:center;display:flex;position:relative}.Primer_Brand__PricingOptions-module__PricingOptions__label-cell--has-label___4n33F:after{content:"";inset-block-start:0;inset-inline-start:0;inset-inline-start:calc(var(--brand-pricing-options-item-gap,0px) / 2 * -1);inset-inline-end:0;height:var(--brand-borderWidth-thin);background-color:var(--brand-color-text-emphasized);z-index:1;position:absolute;inset-inline-end:calc(var(--brand-pricing-options-item-gap,0px) / 2 * -1)}.Primer_Brand__PricingOptions-module__PricingOptions__label-cell--has-label___4n33F:first-child:after{inset-inline-start:0}.Primer_Brand__PricingOptions-module__PricingOptions__label-cell--has-label___4n33F:last-child:after{inset-inline-end:0}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU .Primer_Brand__PricingOptions-module__PricingOptions__label-cell--has-label___4n33F:after{inset-inline:0}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU .Primer_Brand__PricingOptions-module__PricingOptions__labels___WHETc{position:relative}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU .Primer_Brand__PricingOptions-module__PricingOptions__labels___WHETc:after{content:"";inset-block-end:0;inset-inline-start:0;inset-inline-start:calc(var(--brand-pricing-options-container-padding-inline,0px) * -1);inset-inline-end:0;height:var(--brand-borderWidth-thin);background-color:var(--brand-color-border-subtle);position:absolute;inset-inline-end:calc(var(--brand-pricing-options-container-padding-inline,0px) * -1)}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU .Primer_Brand__PricingOptions-module__PricingOptions__label-cell___gs_vJ{margin-inline:calc(var(--brand-pricing-options-item-gap) / 2 * -1);padding-inline:calc(var(--brand-pricing-options-item-gap) / 2)}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU .Primer_Brand__PricingOptions-module__PricingOptions__label-cell___gs_vJ:first-child{margin-inline-start:calc(var(--brand-pricing-options-container-padding-inline) * -1);padding-inline-start:var(--brand-pricing-options-container-padding-inline)}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU .Primer_Brand__PricingOptions-module__PricingOptions__label-cell___gs_vJ:last-child{margin-inline-end:calc(var(--brand-pricing-options-container-padding-inline) * -1);padding-inline-end:var(--brand-pricing-options-container-padding-inline)}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU .Primer_Brand__PricingOptions-module__PricingOptions__label-cell--empty___Zm2CK{background-color:#0000;border-block-start-color:#0000}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU .Primer_Brand__PricingOptions-module__PricingOptions__label-cell___gs_vJ+.Primer_Brand__PricingOptions-module__PricingOptions__label-cell___gs_vJ:before{content:"";width:var(--brand-borderWidth-thin);background-color:var(--brand-color-border-subtle);position:absolute;inset-block:0;inset-inline-start:0}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU.Primer_Brand__PricingOptions-module__PricingOptions--appearance-gradient___zEc_f .Primer_Brand__PricingOptions-module__PricingOptions__label-cell___gs_vJ+.Primer_Brand__PricingOptions-module__PricingOptions__label-cell___gs_vJ:before{-webkit-mask-image:var(--brand-PricingOptions-borderMask);-webkit-mask-image:var(--brand-PricingOptions-borderMask);mask-image:var(--brand-PricingOptions-borderMask)}.Primer_Brand__PricingOptions-module__PricingOptions--layout-cards___Au_tu .Primer_Brand__PricingOptions-module__PricingOptions__label-cell___gs_vJ{padding-inline:var(--base-size-28);border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle)}.Primer_Brand__PricingOptions-module__PricingOptions--layout-cards___Au_tu .Primer_Brand__PricingOptions-module__PricingOptions__label-cell--empty___Zm2CK{opacity:0;pointer-events:none}.Primer_Brand__PricingOptions-module__PricingOptions--layout-cards___Au_tu .Primer_Brand__PricingOptions-module__PricingOptions__label-cell--has-label___4n33F:after{inset-inline:0}}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU{position:relative}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU.Primer_Brand__PricingOptions-module__PricingOptions--appearance-solid___HV0Gd{border:solid 1px var(--brand-color-border-subtle);background-color:var(--brand-PricingOptions-item-bgColor-solid)}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU.Primer_Brand__PricingOptions-module__PricingOptions--appearance-gradient___zEc_f,.Primer_Brand__PricingOptions-module__PricingOptions--layout-cards___Au_tu.Primer_Brand__PricingOptions-module__PricingOptions--appearance-gradient___zEc_f .Primer_Brand__PricingOptions-module__PricingOptions__item___TJ_Q_{background:linear-gradient(180deg, var(--brand-PricingOptions-item-bgColor-gradient-start) 0%, var(--brand-PricingOptions-item-bgColor-gradient-end) 100%)}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU.Primer_Brand__PricingOptions-module__PricingOptions--appearance-gradient___zEc_f:before,.Primer_Brand__PricingOptions-module__PricingOptions--layout-cards___Au_tu.Primer_Brand__PricingOptions-module__PricingOptions--appearance-gradient___zEc_f .Primer_Brand__PricingOptions-module__PricingOptions__item___TJ_Q_:before{content:"";pointer-events:none;border-radius:inherit;-webkit-mask-image:var(--brand-PricingOptions-borderMask);-webkit-mask-image:var(--brand-PricingOptions-borderMask);mask-image:var(--brand-PricingOptions-borderMask);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);position:absolute;inset:0}@media (width>=63.25rem){.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU{padding-inline:var(--brand-pricing-options-container-padding-inline)}}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU .Primer_Brand__PricingOptions-module__PricingOptions__item___TJ_Q_{--brand-pricing-options-item-padding-inline:var(--base-size-24);padding-inline:var(--base-size-24);padding-block:var(--base-size-20);position:relative}@media (width>=63.25rem){.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU .Primer_Brand__PricingOptions-module__PricingOptions__item___TJ_Q_{--brand-pricing-options-item-padding-inline:0;padding-inline:0;padding-block:var(--base-size-40)}}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU .Primer_Brand__PricingOptions-module__PricingOptions__item___TJ_Q_+.Primer_Brand__PricingOptions-module__PricingOptions__item___TJ_Q_:before{content:"";background-color:var(--brand-color-border-subtle);height:1px;position:absolute;inset-inline:0}@media (width>=63.25rem){.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU .Primer_Brand__PricingOptions-module__PricingOptions__item___TJ_Q_+.Primer_Brand__PricingOptions-module__PricingOptions__item___TJ_Q_:before{width:1px;height:auto;margin-block-start:0;margin-inline-start:calc(var(--brand-pricing-options-item-gap) / 2 * -1);inset-block:0;inset-inline:0}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU.Primer_Brand__PricingOptions-module__PricingOptions--appearance-gradient___zEc_f .Primer_Brand__PricingOptions-module__PricingOptions__item___TJ_Q_+.Primer_Brand__PricingOptions-module__PricingOptions__item___TJ_Q_:before{-webkit-mask-image:var(--brand-PricingOptions-borderMask);-webkit-mask-image:var(--brand-PricingOptions-borderMask);mask-image:var(--brand-PricingOptions-borderMask)}}.Primer_Brand__PricingOptions-module__PricingOptions--layout-cards___Au_tu .Primer_Brand__PricingOptions-module__PricingOptions__item___TJ_Q_{--brand-pricing-options-item-padding-inline:var(--base-size-32);padding-inline:var(--base-size-32);padding-block:var(--base-size-32);position:relative}.Primer_Brand__PricingOptions-module__PricingOptions--layout-cards___Au_tu.Primer_Brand__PricingOptions-module__PricingOptions--appearance-solid___HV0Gd .Primer_Brand__PricingOptions-module__PricingOptions__item___TJ_Q_{background-color:var(--brand-PricingOptions-item-bgColor-solid);border:solid var(--brand-borderWidth-thin) var(--brand-color-border-subtle)}@media (width>=48rem){:where(.Primer_Brand__PricingOptions-module__PricingOptions--layout-cards___Au_tu.Primer_Brand__PricingOptions-module__PricingOptions--items4___A590C){row-gap:var(--brand-pricing-options-item-gap)}}@media (width>=63.25rem){.Primer_Brand__PricingOptions-module__PricingOptions--items1___ZiN3H{width:50%;margin-inline:auto}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU.Primer_Brand__PricingOptions-module__PricingOptions--items1___ZiN3H{--brand-pricing-options-container-padding-inline:var(--brand-PricingOptions-items1-container-paddingInline)}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU.Primer_Brand__PricingOptions-module__PricingOptions--items2___H5JcU{--brand-pricing-options-item-gap:var(--brand-PricingOptions-items2-gap);--brand-pricing-options-container-padding-inline:var(--brand-PricingOptions-items2-container-padding-inline)}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU.Primer_Brand__PricingOptions-module__PricingOptions--items3___4AxSI{--brand-pricing-options-item-gap:var(--brand-PricingOptions-items3-gap);--brand-pricing-options-container-padding-inline:var(--brand-PricingOptions-items3-container-padding-inline)}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU.Primer_Brand__PricingOptions-module__PricingOptions--items4___A590C{--brand-pricing-options-item-gap:var(--brand-PricingOptions-items4-gap);--brand-pricing-options-container-padding-inline:var(--brand-PricingOptions-items4-container-padding-inline)}}.Primer_Brand__PricingOptions-module__PricingOptions__item___TJ_Q_{grid-template-areas:var(--brand-pricing-options-template-areas);display:grid}@media (width>=63.25rem){.Primer_Brand__PricingOptions-module__PricingOptions__item___TJ_Q_{grid-row:header/footnote;grid-template-rows:subgrid}.Primer_Brand__PricingOptions-module__PricingOptions__item--has-leading-component___cW15k{grid-row:leadingComponent/footnote}}.Primer_Brand__PricingOptions-module__PricingOptions__item--align-center___ljf3V{justify-items:center}.Primer_Brand__PricingOptions-module__PricingOptions__item--align-center___ljf3V .Primer_Brand__PricingOptions-module__PricingOptions__price___JV14o,.Primer_Brand__PricingOptions-module__PricingOptions__item--align-center___ljf3V .Primer_Brand__PricingOptions-module__PricingOptions__description___UfSpu{text-align:center;justify-content:center}@supports not (grid-template-rows:subgrid){@media (width>=63.28rem){.Primer_Brand__PricingOptions-module__PricingOptions__item___TJ_Q_{grid-template-areas:var(--brand-pricing-options-template-areas);grid-template-rows:auto;grid-template-columns:1fr}}}.Primer_Brand__PricingOptions-module__PricingOptions__header___e90h1{row-gap:var(--base-size-16);grid-area:header;display:flex}.Primer_Brand__PricingOptions-module__PricingOptions__item___TJ_Q_:not(.Primer_Brand__PricingOptions-module__PricingOptions__item--align-center___ljf3V) .Primer_Brand__PricingOptions-module__PricingOptions__header___e90h1{align-items:center;margin-block-end:var(--base-size-16)}.Primer_Brand__PricingOptions-module__PricingOptions__item___TJ_Q_:not(.Primer_Brand__PricingOptions-module__PricingOptions__item--align-center___ljf3V) .Primer_Brand__PricingOptions-module__PricingOptions__heading___s_G_y{margin-block:var(--base-size-16);flex:0 auto;order:1;align-self:flex-start}@media (width>=63.24rem){.Primer_Brand__PricingOptions-module__PricingOptions__item___TJ_Q_:not(.Primer_Brand__PricingOptions-module__PricingOptions__item--align-center___ljf3V) .Primer_Brand__PricingOptions-module__PricingOptions__heading___s_G_y{margin-block:0}}.Primer_Brand__PricingOptions-module__PricingOptions__item--align-center___ljf3V .Primer_Brand__PricingOptions-module__PricingOptions__header___e90h1{justify-content:center}.Primer_Brand__PricingOptions-module__PricingOptions__item--align-center___ljf3V .Primer_Brand__PricingOptions-module__PricingOptions__heading___s_G_y{text-align:center;margin-block-start:0;margin-block-end:var(--base-size-16)}.Primer_Brand__PricingOptions-module__PricingOptions__leading-component___R__BW{grid-row:leadingComponent}.Primer_Brand__PricingOptions-module__PricingOptions__label___bW7ca{color:var(--brand-color-text-default);font-family:var(--brand-fontStack-monospace);font-size:var(--brand-text-size-100);font-weight:var(--brand-text-weight-500);letter-spacing:var(--brand-text-letterSpacing-100);line-height:var(--brand-text-lineHeight-200);text-transform:uppercase}.Primer_Brand__PricingOptions-module__PricingOptions__heading___s_G_y{margin-block:var(--base-size-16);flex:0 auto;order:1;align-self:flex-start}.Primer_Brand__PricingOptions-module__PricingOptions__description___UfSpu{grid-row:description}.Primer_Brand__PricingOptions-module__PricingOptions__price___JV14o{flex-wrap:wrap;grid-row:price;align-items:flex-start;padding-block-start:var(--base-size-20);padding-block-end:var(--base-size-8);display:flex}@media (width<=63.25rem){.Primer_Brand__PricingOptions-module__PricingOptions__price-value___v_DFw,.Primer_Brand__PricingOptions-module__PricingOptions__price-currency-symbol___WCuTj{font-size:var(--brand-text-size-900)}}.Primer_Brand__PricingOptions-module__PricingOptions__price-amount___ZCxoZ{align-items:flex-end;display:flex}.Primer_Brand__PricingOptions-module__PricingOptions__price-currency-code___thhnZ{color:var(--brand-color-text-muted);margin-block-end:var(--base-size-4);margin-inline-start:var(--base-size-4)}.Primer_Brand__PricingOptions-module__PricingOptions__price-original-price___TCleY{align-self:center;margin-inline-start:var(--base-size-8);-webkit-text-decoration:none;text-decoration:none;display:inline-flex}.Primer_Brand__PricingOptions-module__PricingOptions__price-original-price-value___ul7b3{-webkit-text-decoration:line-through;text-decoration:line-through}.Primer_Brand__PricingOptions-module__PricingOptions__price-trailing-text___hVD0k{flex:1 0 100%;display:block}.Primer_Brand__PricingOptions-module__PricingOptions__actions___DEnuZ{gap:var(--base-size-8);flex-direction:column;grid-row:actions;align-items:flex-end;padding-block-start:var(--base-size-20);display:flex}.Primer_Brand__PricingOptions-module__PricingOptions__actions-message___QKv2D{gap:var(--base-size-12);inline-size:100%;max-inline-size:100%;padding:var(--base-size-12);border-block:var(--brand-borderWidth-thin) solid var(--brand-PricingOptions-actionsMessage-borderColor);background-color:var(--brand-PricingOptions-actionsMessage-bgColor);border-inline:0;border-radius:0;align-items:flex-start;display:flex}.Primer_Brand__PricingOptions-module__PricingOptions__actions-message-leading-component___xFobh{color:var(--brand-PricingOptions-actionsMessage-accentColor);flex:none;margin-block-start:var(--base-size-4);display:flex}.Primer_Brand__PricingOptions-module__PricingOptions__actions-message-leading-component___xFobh :where(svg){inline-size:var(--base-size-16);block-size:var(--base-size-16);display:block}.Primer_Brand__PricingOptions-module__PricingOptions__actions-message-content___DBj3R{flex:auto;min-inline-size:0}.Primer_Brand__PricingOptions-module__PricingOptions__actions-message-content___DBj3R :where(p){margin:0}.Primer_Brand__PricingOptions-module__PricingOptions__menu-action___hkpD2,.Primer_Brand__PricingOptions-module__PricingOptions__menu-action___hkpD2>*{width:100%}.Primer_Brand__PricingOptions-module__PricingOptions__menu-action___hkpD2>*>*{width:100%;display:flex}.Primer_Brand__PricingOptions-module__PricingOptions__menu-action___hkpD2>*>*>:first-child{flex:1}.Primer_Brand__PricingOptions-module__PricingOptions__footnote___FjNek{grid-row:footnote;margin-block-start:var(--base-size-8);display:block}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list___Vsv4L{--feature-list-font-size:var(--brand-text-size-200);--feature-list-line-height:var(--brand-text-lineHeight-200);gap:var(--base-size-8);flex-direction:column;grid-row:feature-list;width:100%;margin-block-start:var(--base-size-20);padding-block-start:var(--base-size-20);display:flex}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list--has-divider___gLeTt{margin:0;margin-block-start:var(--base-size-20);padding-block-start:var(--base-size-40);padding-inline:0;position:relative}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list--has-divider___gLeTt:before{content:"";inset-block-start:0;inset-inline-start:0;inset-inline-start:calc(var(--brand-pricing-options-item-padding-inline,0px) * -1);inset-inline-end:0;height:var(--brand-borderWidth-thin);background-color:var(--brand-color-border-subtle);position:absolute;inset-inline-end:calc(var(--brand-pricing-options-item-padding-inline,0px) * -1)}@media (width>=63.25rem){.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU .Primer_Brand__PricingOptions-module__PricingOptions__feature-list--has-divider___gLeTt:before{inset-inline-start:0;inset-inline-start:calc(var(--brand-pricing-options-item-gap,0px) / 2 * -1);inset-inline-end:0;inset-inline-end:calc(var(--brand-pricing-options-item-gap,0px) / 2 * -1)}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU .Primer_Brand__PricingOptions-module__PricingOptions__item___TJ_Q_:first-child .Primer_Brand__PricingOptions-module__PricingOptions__feature-list--has-divider___gLeTt:before,.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU .Primer_Brand__PricingOptions-module__PricingOptions__labels___WHETc+.Primer_Brand__PricingOptions-module__PricingOptions__item___TJ_Q_ .Primer_Brand__PricingOptions-module__PricingOptions__feature-list--has-divider___gLeTt:before{inset-inline-start:0;inset-inline-start:calc(var(--brand-pricing-options-container-padding-inline,0px) * -1)}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU .Primer_Brand__PricingOptions-module__PricingOptions__item___TJ_Q_:last-child .Primer_Brand__PricingOptions-module__PricingOptions__feature-list--has-divider___gLeTt:before{inset-inline-end:0;inset-inline-end:calc(var(--brand-pricing-options-container-padding-inline,0px) * -1)}.Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU.Primer_Brand__PricingOptions-module__PricingOptions--appearance-gradient___zEc_f .Primer_Brand__PricingOptions-module__PricingOptions__feature-list--has-divider___gLeTt:before{-webkit-mask-image:var(--brand-PricingOptions-borderMask);-webkit-mask-image:var(--brand-PricingOptions-borderMask);mask-image:var(--brand-PricingOptions-borderMask)}}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-set___twUwU:nth-child(n+2){margin-block-start:var(--base-size-20)}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-group-heading___zIDHs{color:var(--brand-PricingOptions-featureList-group-heading-color);margin-block-start:var(--base-size-12);margin-block-end:var(--base-size-8)}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-item--excluded___LZ8FG span{color:var(--brand-color-text-muted)}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-item--has-info___PLzAt{flex-wrap:nowrap}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-item--has-info___PLzAt>span{flex:1;justify-content:space-between;align-items:baseline;display:inline-flex}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-item-info___LmJza{all:unset;cursor:pointer;color:var(--brand-color-text-muted);background-color:color-mix(in srgb, var(--brand-color-canvas-invert) 12%, transparent);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);vertical-align:middle;padding:var(--base-size-4);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-inline-start:var(--base-size-8);display:inline-flex}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-item-info___LmJza svg{width:var(--base-size-12);height:var(--base-size-12)}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-item-info___LmJza:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:2px}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list___Vsv4L+.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-group-heading___zIDHs{margin-block-start:var(--base-size-20)}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-item___84hAn,.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-item___84hAn span{font-size:var(--feature-list-font-size)!important;line-height:var(--feature-list-line-height)!important}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-group-heading___zIDHs{font-size:var(--feature-list-font-size)!important}.Primer_Brand__PricingOptions-module__PricingOptions--items4___A590C .Primer_Brand__PricingOptions-module__PricingOptions__feature-list___Vsv4L{--feature-list-font-size:var(--brand-text-size-100);--feature-list-line-height:var(--brand-text-lineHeight-100)}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion___l1_E8{border:0;padding:0}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion___l1_E8:after{content:none!important}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion-heading___6qtWo{padding:var(--base-size-8) 0;margin-block-start:calc(var(--base-size-16) * -1);margin-block-end:var(--base-size-8);padding-inline:0!important}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion___l1_E8 .Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion-heading___6qtWo h1,.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion___l1_E8 .Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion-heading___6qtWo h2,.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion___l1_E8 .Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion-heading___6qtWo h3,.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion___l1_E8 .Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion-heading___6qtWo h4,.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion___l1_E8 .Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion-heading___6qtWo h5,.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion___l1_E8 .Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion-heading___6qtWo h6{font-size:var(--feature-list-font-size);line-height:var(--feature-list-line-height);font-weight:var(--brand-text-subhead-weight-large);gap:var(--base-size-8);justify-content:space-between;align-items:center;width:100%;display:flex}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion___l1_E8 .Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion-heading___6qtWo span{display:none}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion___l1_E8 .Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion-content____D0c9{padding:0;padding-block-start:var(--base-size-8);padding-inline-start:0!important}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion-chevron___6tIUy{margin-inline-end:var(--base-size-4)}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion___l1_E8[open] .Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion-chevron___6tIUy{transform:rotate(180deg)}.Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion-content____D0c9{animation:none!important}

package/esm/PricingOptions/PricingOptions.module.js ADDED Viewed

@@ -0,0 +1,53 @@
+import './PricingOptions.module-Cm3Oq9u6.css';var e = {
+	PricingOptions: "Primer_Brand__PricingOptions-module__PricingOptions____Z8EC",
+	"PricingOptions--items1": "Primer_Brand__PricingOptions-module__PricingOptions--items1___ZiN3H",
+	"PricingOptions--items2": "Primer_Brand__PricingOptions-module__PricingOptions--items2___H5JcU",
+	"PricingOptions--items3": "Primer_Brand__PricingOptions-module__PricingOptions--items3___4AxSI",
+	"PricingOptions--items4": "Primer_Brand__PricingOptions-module__PricingOptions--items4___A590C",
+	PricingOptions__labels: "Primer_Brand__PricingOptions-module__PricingOptions__labels___WHETc",
+	"PricingOptions__label-cell": "Primer_Brand__PricingOptions-module__PricingOptions__label-cell___gs_vJ",
+	"PricingOptions__label-cell--has-label": "Primer_Brand__PricingOptions-module__PricingOptions__label-cell--has-label___4n33F",
+	"PricingOptions--layout-default": "Primer_Brand__PricingOptions-module__PricingOptions--layout-default___5HLMU",
+	"PricingOptions__label-cell--empty": "Primer_Brand__PricingOptions-module__PricingOptions__label-cell--empty___Zm2CK",
+	"PricingOptions--appearance-gradient": "Primer_Brand__PricingOptions-module__PricingOptions--appearance-gradient___zEc_f",
+	"PricingOptions--layout-cards": "Primer_Brand__PricingOptions-module__PricingOptions--layout-cards___Au_tu",
+	"PricingOptions--appearance-solid": "Primer_Brand__PricingOptions-module__PricingOptions--appearance-solid___HV0Gd",
+	PricingOptions__item: "Primer_Brand__PricingOptions-module__PricingOptions__item___TJ_Q_",
+	"PricingOptions__item--has-leading-component": "Primer_Brand__PricingOptions-module__PricingOptions__item--has-leading-component___cW15k",
+	"PricingOptions__item--align-center": "Primer_Brand__PricingOptions-module__PricingOptions__item--align-center___ljf3V",
+	PricingOptions__price: "Primer_Brand__PricingOptions-module__PricingOptions__price___JV14o",
+	PricingOptions__description: "Primer_Brand__PricingOptions-module__PricingOptions__description___UfSpu",
+	PricingOptions__header: "Primer_Brand__PricingOptions-module__PricingOptions__header___e90h1",
+	PricingOptions__heading: "Primer_Brand__PricingOptions-module__PricingOptions__heading___s_G_y",
+	"PricingOptions__leading-component": "Primer_Brand__PricingOptions-module__PricingOptions__leading-component___R__BW",
+	PricingOptions__label: "Primer_Brand__PricingOptions-module__PricingOptions__label___bW7ca",
+	"PricingOptions__price-value": "Primer_Brand__PricingOptions-module__PricingOptions__price-value___v_DFw",
+	"PricingOptions__price-currency-symbol": "Primer_Brand__PricingOptions-module__PricingOptions__price-currency-symbol___WCuTj",
+	"PricingOptions__price-amount": "Primer_Brand__PricingOptions-module__PricingOptions__price-amount___ZCxoZ",
+	"PricingOptions__price-currency-code": "Primer_Brand__PricingOptions-module__PricingOptions__price-currency-code___thhnZ",
+	"PricingOptions__price-original-price": "Primer_Brand__PricingOptions-module__PricingOptions__price-original-price___TCleY",
+	"PricingOptions__price-original-price-value": "Primer_Brand__PricingOptions-module__PricingOptions__price-original-price-value___ul7b3",
+	"PricingOptions__price-trailing-text": "Primer_Brand__PricingOptions-module__PricingOptions__price-trailing-text___hVD0k",
+	PricingOptions__actions: "Primer_Brand__PricingOptions-module__PricingOptions__actions___DEnuZ",
+	"PricingOptions__actions-message": "Primer_Brand__PricingOptions-module__PricingOptions__actions-message___QKv2D",
+	"PricingOptions__actions-message-leading-component": "Primer_Brand__PricingOptions-module__PricingOptions__actions-message-leading-component___xFobh",
+	"PricingOptions__actions-message-content": "Primer_Brand__PricingOptions-module__PricingOptions__actions-message-content___DBj3R",
+	"PricingOptions__menu-action": "Primer_Brand__PricingOptions-module__PricingOptions__menu-action___hkpD2",
+	PricingOptions__footnote: "Primer_Brand__PricingOptions-module__PricingOptions__footnote___FjNek",
+	"PricingOptions__feature-list": "Primer_Brand__PricingOptions-module__PricingOptions__feature-list___Vsv4L",
+	"PricingOptions__feature-list--has-divider": "Primer_Brand__PricingOptions-module__PricingOptions__feature-list--has-divider___gLeTt",
+	"PricingOptions__feature-list-set": "Primer_Brand__PricingOptions-module__PricingOptions__feature-list-set___twUwU",
+	"PricingOptions__feature-list-group-heading": "Primer_Brand__PricingOptions-module__PricingOptions__feature-list-group-heading___zIDHs",
+	"PricingOptions__feature-list-item--excluded": "Primer_Brand__PricingOptions-module__PricingOptions__feature-list-item--excluded___LZ8FG",
+	"PricingOptions__feature-list-item--has-info": "Primer_Brand__PricingOptions-module__PricingOptions__feature-list-item--has-info___PLzAt",
+	"PricingOptions__feature-list-item-info": "Primer_Brand__PricingOptions-module__PricingOptions__feature-list-item-info___LmJza",
+	"PricingOptions__feature-list-item": "Primer_Brand__PricingOptions-module__PricingOptions__feature-list-item___84hAn",
+	"PricingOptions__feature-list-accordion": "Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion___l1_E8",
+	"PricingOptions__feature-list-accordion-heading": "Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion-heading___6qtWo",
+	"PricingOptions__feature-list-accordion-content": "Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion-content____D0c9",
+	"PricingOptions__feature-list-accordion-chevron": "Primer_Brand__PricingOptions-module__PricingOptions__feature-list-accordion-chevron___6tIUy"
+};
+//#endregion
+export { e as default };
+//# sourceMappingURL=PricingOptions.module.js.map

package/esm/PricingOptions/PricingOptions.module.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PricingOptions.module.js","names":[],"sources":["../../src/PricingOptions/PricingOptions.module.css"],"sourcesContent":["/* ---------------------------------------------------------- */\n/* Container */\n/* ---------------------------------------------------------- */\n\n.PricingOptions {\n --brand-pricing-options-item-gap: var(--brand-PricingOptions-items-gap);\n --brand-pricing-options-container-padding-inline: 0;\n --brand-pricing-options-column-count: 1;\n\n /* prettier-ignore */\n --brand-pricing-options-template-areas: \n 'labels'\n 'leadingComponent'\n 'header'\n 'description'\n 'price'\n 'actions'\n 'feature-list'\n 'footnote'\n ;\n\n display: grid;\n row-gap: var(--brand-pricing-options-item-gap, 0);\n padding-inline: var(--brand-pricing-options-container-padding-inline);\n}\n\n@media screen and (max-width: 63.24rem) {\n .PricingOptions {\n margin-inline: auto;\n max-width: 488px;\n }\n}\n\n@media (min-width: 63.25rem) {\n .PricingOptions {\n grid-template-areas: var(--brand-pricing-options-template-areas);\n grid-template-columns: repeat(var(--brand-pricing-options-column-count), minmax(0, 1fr));\n column-gap: var(--brand-pricing-options-item-gap, 0);\n row-gap: 0;\n }\n\n .PricingOptions--items1 {\n --brand-pricing-options-column-count: 1;\n }\n\n .PricingOptions--items2 {\n --brand-pricing-options-column-count: 2;\n }\n\n .PricingOptions--items3 {\n --brand-pricing-options-column-count: 3;\n }\n\n .PricingOptions--items4 {\n --brand-pricing-options-column-count: 4;\n }\n}\n\n.PricingOptions__labels {\n display: none;\n}\n\n@media (min-width: 63.25rem) {\n .PricingOptions__labels {\n --brand-pricing-options-column-count: 1;\n\n display: grid;\n grid-column: 1 / -1;\n grid-row: labels;\n grid-template-columns: repeat(var(--brand-pricing-options-column-count), minmax(0, 1fr));\n column-gap: var(--brand-pricing-options-item-gap, 0);\n }\n\n .PricingOptions__label-cell {\n position: relative;\n display: flex;\n align-items: center;\n min-height: var(--base-size-54);\n padding-block: var(--base-size-16);\n background-color: var(--brand-PricingOptions-item-bgColor-solid);\n }\n\n /* Accent top border — uses ::after so it can overflow into the column gap */\n .PricingOptions__label-cell--has-label::after {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: calc(var(--brand-pricing-options-item-gap, 0px) / 2 * -1);\n inset-inline-end: calc(var(--brand-pricing-options-item-gap, 0px) / 2 * -1);\n height: var(--brand-borderWidth-thin);\n background-color: var(--brand-color-text-emphasized);\n z-index: 1;\n }\n\n /* First cell: don't overflow past container start (cards override below) */\n .PricingOptions__label-cell--has-label:first-child::after {\n inset-inline-start: 0;\n }\n\n /* Last cell: don't overflow past container end (cards override below) */\n .PricingOptions__label-cell--has-label:last-child::after {\n inset-inline-end: 0;\n }\n\n .PricingOptions--layout-default .PricingOptions__label-cell--has-label::after {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n\n /* ---- Default layout labels ---- */\n\n /* Continuous bottom border across entire labels row — uses ::after to extend into container padding */\n .PricingOptions--layout-default .PricingOptions__labels {\n position: relative;\n }\n\n .PricingOptions--layout-default .PricingOptions__labels::after {\n content: '';\n position: absolute;\n inset-block-end: 0;\n inset-inline-start: calc(var(--brand-pricing-options-container-padding-inline, 0px) * -1);\n inset-inline-end: calc(var(--brand-pricing-options-container-padding-inline, 0px) * -1);\n height: var(--brand-borderWidth-thin);\n background-color: var(--brand-color-border-subtle);\n }\n\n .PricingOptions--layout-default .PricingOptions__label-cell {\n margin-inline: calc(var(--brand-pricing-options-item-gap) / 2 * -1);\n padding-inline: calc(var(--brand-pricing-options-item-gap) / 2);\n }\n\n .PricingOptions--layout-default .PricingOptions__label-cell:first-child {\n margin-inline-start: calc(var(--brand-pricing-options-container-padding-inline) * -1);\n padding-inline-start: var(--brand-pricing-options-container-padding-inline);\n }\n\n .PricingOptions--layout-default .PricingOptions__label-cell:last-child {\n margin-inline-end: calc(var(--brand-pricing-options-container-padding-inline) * -1);\n padding-inline-end: var(--brand-pricing-options-container-padding-inline);\n }\n\n /* Empty cells: transparent bg/borders but structurally visible so dividers show */\n .PricingOptions--layout-default .PricingOptions__label-cell--empty {\n background-color: transparent;\n border-block-start-color: transparent;\n }\n\n /* Vertical dividers between label cells, centered in the gap */\n .PricingOptions--layout-default .PricingOptions__label-cell + .PricingOptions__label-cell::before {\n content: '';\n position: absolute;\n inset-block: 0;\n width: var(--brand-borderWidth-thin);\n inset-inline-start: 0;\n background-color: var(--brand-color-border-subtle);\n }\n\n .PricingOptions--layout-default.PricingOptions--appearance-gradient\n .PricingOptions__label-cell\n + .PricingOptions__label-cell::before {\n mask-image: var(--brand-PricingOptions-borderMask);\n }\n\n /* ---- Cards layout labels ---- */\n\n .PricingOptions--layout-cards .PricingOptions__label-cell {\n padding-inline: var(--base-size-28);\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n /* border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted); */\n }\n\n .PricingOptions--layout-cards .PricingOptions__label-cell--empty {\n opacity: 0;\n pointer-events: none;\n }\n\n /* Cards: keep accent border inside the card boundary */\n .PricingOptions--layout-cards .PricingOptions__label-cell--has-label::after {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n}\n\n/* ---------------------------------------------------------- */\n/* Layout: default */\n/* ---------------------------------------------------------- */\n\n.PricingOptions--layout-default {\n position: relative;\n}\n\n.PricingOptions--layout-default.PricingOptions--appearance-solid {\n border: solid 1px var(--brand-color-border-subtle);\n background-color: var(--brand-PricingOptions-item-bgColor-solid);\n}\n\n.PricingOptions--layout-default.PricingOptions--appearance-gradient,\n.PricingOptions--layout-cards.PricingOptions--appearance-gradient .PricingOptions__item {\n background: linear-gradient(\n 180deg,\n var(--brand-PricingOptions-item-bgColor-gradient-start) 0%,\n var(--brand-PricingOptions-item-bgColor-gradient-end) 100%\n );\n}\n\n.PricingOptions--layout-default.PricingOptions--appearance-gradient::before,\n.PricingOptions--layout-cards.PricingOptions--appearance-gradient .PricingOptions__item::before {\n position: absolute;\n content: '';\n inset: 0;\n pointer-events: none;\n border-radius: inherit;\n mask-image: var(--brand-PricingOptions-borderMask);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n}\n\n@media (min-width: 63.25rem) {\n .PricingOptions--layout-default {\n padding-inline: var(--brand-pricing-options-container-padding-inline);\n }\n}\n\n.PricingOptions--layout-default .PricingOptions__item {\n --brand-pricing-options-item-padding-inline: var(--base-size-24);\n\n position: relative; /* Used for positioning the divider between items */\n padding-inline: var(--base-size-24);\n padding-block: var(--base-size-20);\n}\n\n@media (min-width: 63.25rem) {\n .PricingOptions--layout-default .PricingOptions__item {\n --brand-pricing-options-item-padding-inline: 0;\n\n padding-inline: 0;\n padding-block: var(--base-size-40);\n }\n}\n\n/* Horizontal divider between items on small viewports */\n.PricingOptions--layout-default .PricingOptions__item + .PricingOptions__item::before {\n content: '';\n position: absolute;\n inset-inline: 0;\n height: 1px;\n background-color: var(--brand-color-border-subtle);\n}\n\n/* Vertical divider between items on larger viewports */\n@media (min-width: 63.25rem) {\n .PricingOptions--layout-default .PricingOptions__item + .PricingOptions__item::before {\n inset-inline: 0;\n inset-block: 0;\n width: 1px;\n height: auto;\n margin-block-start: 0;\n margin-inline-start: calc(var(--brand-pricing-options-item-gap) / 2 * -1);\n }\n\n .PricingOptions--layout-default.PricingOptions--appearance-gradient\n .PricingOptions__item\n + .PricingOptions__item::before {\n mask-image: var(--brand-PricingOptions-borderMask);\n }\n}\n\n/* ---------------------------------------------------------- */\n/* Layout: cards */\n/* ---------------------------------------------------------- */\n\n.PricingOptions--layout-cards .PricingOptions__item {\n --brand-pricing-options-item-padding-inline: var(--base-size-32);\n\n position: relative;\n padding-inline: var(--base-size-32);\n padding-block: var(--base-size-32);\n}\n\n.PricingOptions--layout-cards.PricingOptions--appearance-solid .PricingOptions__item {\n background-color: var(--brand-PricingOptions-item-bgColor-solid);\n border: solid var(--brand-borderWidth-thin) var(--brand-color-border-subtle);\n}\n\n/* ---------------------------------------------------------- */\n/* Items */\n/* ---------------------------------------------------------- */\n\n@media (min-width: 48rem) {\n :where(.PricingOptions--layout-cards.PricingOptions--items4) {\n row-gap: var(--brand-pricing-options-item-gap);\n }\n}\n\n@media (min-width: 63.25rem) {\n .PricingOptions--items1 {\n width: 50%;\n margin-inline: auto;\n }\n\n .PricingOptions--layout-default.PricingOptions--items1 {\n --brand-pricing-options-container-padding-inline: var(--brand-PricingOptions-items1-container-paddingInline);\n }\n\n .PricingOptions--layout-default.PricingOptions--items2 {\n --brand-pricing-options-item-gap: var(--brand-PricingOptions-items2-gap);\n --brand-pricing-options-container-padding-inline: var(--brand-PricingOptions-items2-container-padding-inline);\n }\n\n .PricingOptions--layout-default.PricingOptions--items3 {\n --brand-pricing-options-item-gap: var(--brand-PricingOptions-items3-gap);\n --brand-pricing-options-container-padding-inline: var(--brand-PricingOptions-items3-container-padding-inline);\n }\n .PricingOptions--layout-default.PricingOptions--items4 {\n --brand-pricing-options-item-gap: var(--brand-PricingOptions-items4-gap);\n --brand-pricing-options-container-padding-inline: var(--brand-PricingOptions-items4-container-padding-inline);\n }\n}\n\n/* ---------------------------------------------------------- */\n/* Item inner layout */\n/* ---------------------------------------------------------- */\n\n.PricingOptions__item {\n display: grid;\n grid-template-areas: var(--brand-pricing-options-template-areas);\n}\n\n@media (min-width: 63.25rem) {\n .PricingOptions__item {\n grid-row: header / footnote;\n grid-template-rows: subgrid;\n }\n\n .PricingOptions__item--has-leading-component {\n grid-row: leadingComponent / footnote;\n }\n}\n\n.PricingOptions__item--align-center {\n justify-items: center;\n}\n\n.PricingOptions__item--align-center .PricingOptions__price,\n.PricingOptions__item--align-center .PricingOptions__description {\n text-align: center;\n justify-content: center;\n}\n\n/*\n * Backwards compatibility for browsers that don't support subgrid.\n * Once subgrid is supported in the last 3 major versions of Safari (i.e., when Safari 18 is released), it can be fully removed.\n * https://caniuse.com/css-subgrid\n */\n@supports not (grid-template-rows: subgrid) {\n @media (min-width: 63.28rem) {\n .PricingOptions__item {\n grid-template-areas: var(--brand-pricing-options-template-areas);\n grid-template-columns: 1fr;\n grid-template-rows: auto;\n }\n }\n}\n\n/* ---------------------------------------------------------- */\n/* Content */\n/* ---------------------------------------------------------- */\n\n.PricingOptions__header {\n display: flex;\n grid-area: header;\n row-gap: var(--base-size-16);\n}\n\n/* When item is left-aligned, keep the heading at the start of the card */\n.PricingOptions__item:not(.PricingOptions__item--align-center) .PricingOptions__header {\n align-items: center;\n margin-block-end: var(--base-size-16);\n}\n\n.PricingOptions__item:not(.PricingOptions__item--align-center) .PricingOptions__heading {\n margin-block: var(--base-size-16);\n flex: 0 1 auto;\n order: 1;\n align-self: flex-start;\n}\n\n@media (min-width: 63.24rem) {\n .PricingOptions__item:not(.PricingOptions__item--align-center) .PricingOptions__heading {\n margin-block: 0;\n }\n}\n\n/* When item is centered, center the heading */\n.PricingOptions__item--align-center .PricingOptions__header {\n justify-content: center;\n}\n\n.PricingOptions__item--align-center .PricingOptions__heading {\n margin-block-start: 0;\n margin-block-end: var(--base-size-16);\n text-align: center;\n}\n\n.PricingOptions__leading-component {\n grid-row: leadingComponent;\n}\n\n.PricingOptions__label {\n color: var(--brand-color-text-default);\n font-family: var(--brand-fontStack-monospace);\n font-size: var(--brand-text-size-100);\n font-weight: var(--brand-text-weight-500);\n letter-spacing: var(--brand-text-letterSpacing-100);\n line-height: var(--brand-text-lineHeight-200);\n text-transform: uppercase;\n}\n\n.PricingOptions__heading {\n margin-block: var(--base-size-16);\n flex: 0 1 auto; /* Minimum width before wrapping */\n order: 1;\n align-self: flex-start;\n}\n\n.PricingOptions__description {\n grid-row: description;\n}\n\n.PricingOptions__price {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n grid-row: price;\n padding-block-start: var(--base-size-20);\n padding-block-end: var(--base-size-8);\n}\n\n@media (max-width: 63.25rem) {\n .PricingOptions__price-value,\n .PricingOptions__price-currency-symbol {\n font-size: var(--brand-text-size-900);\n }\n}\n\n.PricingOptions__price-amount {\n display: flex;\n align-items: flex-end;\n}\n\n.PricingOptions__price-currency-code {\n margin-inline-start: var(--base-size-4);\n margin-block-end: var(--base-size-4);\n color: var(--brand-color-text-muted);\n}\n\n.PricingOptions__price-original-price {\n display: inline-flex;\n align-self: center;\n text-decoration: none;\n margin-inline-start: var(--base-size-8);\n}\n\n.PricingOptions__price-original-price-value {\n text-decoration: line-through;\n}\n\n.PricingOptions__price-trailing-text {\n flex: 1 0 100%;\n display: block;\n}\n\n.PricingOptions__actions {\n grid-row: actions;\n display: flex;\n flex-direction: column;\n gap: var(--base-size-8);\n align-items: flex-end;\n padding-block-start: var(--base-size-20);\n}\n\n.PricingOptions__actions-message {\n display: flex;\n gap: var(--base-size-12);\n align-items: flex-start;\n inline-size: 100%;\n max-inline-size: 100%;\n padding: var(--base-size-12);\n border-block: var(--brand-borderWidth-thin) solid var(--brand-PricingOptions-actionsMessage-borderColor);\n border-inline: 0;\n border-radius: 0;\n background-color: var(--brand-PricingOptions-actionsMessage-bgColor);\n}\n\n.PricingOptions__actions-message-leading-component {\n flex: 0 0 auto;\n display: flex;\n margin-block-start: var(--base-size-4);\n color: var(--brand-PricingOptions-actionsMessage-accentColor);\n}\n\n.PricingOptions__actions-message-leading-component :where(svg) {\n display: block;\n inline-size: var(--base-size-16);\n block-size: var(--base-size-16);\n}\n\n.PricingOptions__actions-message-content {\n flex: 1 1 auto;\n min-inline-size: 0;\n}\n\n.PricingOptions__actions-message-content :where(p) {\n margin: 0;\n}\n\n/* MenuAction: full-width ActionMenu wrapper */\n.PricingOptions__menu-action {\n width: 100%;\n}\n\n.PricingOptions__menu-action > * {\n width: 100%;\n}\n\n/* Force ActionMenu button container to stretch full width */\n.PricingOptions__menu-action > * > * {\n display: flex;\n width: 100%;\n}\n\n/* Make the primary button fill remaining space next to the chevron */\n.PricingOptions__menu-action > * > * > :first-child {\n flex: 1;\n}\n\n.PricingOptions__footnote {\n grid-row: footnote;\n display: block;\n margin-block-start: var(--base-size-8);\n}\n\n/* ---------------------------------------------------------- */\n/* Feature list */\n/* ---------------------------------------------------------- */\n\n.PricingOptions__feature-list {\n --feature-list-font-size: var(--brand-text-size-200);\n --feature-list-line-height: var(--brand-text-lineHeight-200);\n\n display: flex;\n flex-direction: column;\n gap: var(--base-size-8);\n grid-row: feature-list;\n margin-block-start: var(--base-size-20);\n padding-block-start: var(--base-size-20);\n width: 100%;\n}\n\n.PricingOptions__feature-list--has-divider {\n position: relative;\n margin: 0;\n margin-block-start: var(--base-size-20);\n padding-block-start: var(--base-size-40);\n padding-inline: 0;\n}\n\n/* Edge-to-edge divider above feature list */\n.PricingOptions__feature-list--has-divider::before {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: calc(var(--brand-pricing-options-item-padding-inline, 0px) * -1);\n inset-inline-end: calc(var(--brand-pricing-options-item-padding-inline, 0px) * -1);\n height: var(--brand-borderWidth-thin);\n background-color: var(--brand-color-border-subtle);\n}\n\n/* Default layout: extend feature list divider into column gap */\n@media (min-width: 63.25rem) {\n .PricingOptions--layout-default .PricingOptions__feature-list--has-divider::before {\n inset-inline-start: calc(var(--brand-pricing-options-item-gap, 0px) / 2 * -1);\n inset-inline-end: calc(var(--brand-pricing-options-item-gap, 0px) / 2 * -1);\n }\n\n /* First item: don't overflow past container start */\n .PricingOptions--layout-default .PricingOptions__item:first-child .PricingOptions__feature-list--has-divider::before,\n .PricingOptions--layout-default\n .PricingOptions__labels\n + .PricingOptions__item\n .PricingOptions__feature-list--has-divider::before {\n inset-inline-start: calc(var(--brand-pricing-options-container-padding-inline, 0px) * -1);\n }\n\n /* Last item: don't overflow past container end */\n .PricingOptions--layout-default .PricingOptions__item:last-child .PricingOptions__feature-list--has-divider::before {\n inset-inline-end: calc(var(--brand-pricing-options-container-padding-inline, 0px) * -1);\n }\n\n .PricingOptions--layout-default.PricingOptions--appearance-gradient\n .PricingOptions__feature-list--has-divider::before {\n mask-image: var(--brand-PricingOptions-borderMask);\n }\n}\n\n.PricingOptions__feature-list-set:nth-child(n + 2) {\n margin-block-start: var(--base-size-20);\n}\n\n.PricingOptions__feature-list-group-heading {\n color: var(--brand-PricingOptions-featureList-group-heading-color);\n margin-block-start: var(--base-size-12);\n margin-block-end: var(--base-size-8);\n}\n\n.PricingOptions__feature-list-item--excluded span {\n color: var(--brand-color-text-muted);\n}\n\n/* Info tooltip button */\n.PricingOptions__feature-list-item--has-info {\n flex-wrap: nowrap;\n}\n\n.PricingOptions__feature-list-item--has-info > span {\n flex: 1;\n display: inline-flex;\n align-items: baseline;\n justify-content: space-between;\n}\n\n.PricingOptions__feature-list-item-info {\n all: unset;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n cursor: pointer;\n color: var(--brand-color-text-muted);\n background-color: color-mix(in srgb, var(--brand-color-canvas-invert) 12%, transparent);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-radius: 50%;\n margin-inline-start: var(--base-size-8);\n vertical-align: middle;\n padding: var(--base-size-4);\n}\n\n.PricingOptions__feature-list-item-info svg {\n width: var(--base-size-12);\n height: var(--base-size-12);\n}\n\n.PricingOptions__feature-list-item-info:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: 2px;\n}\n\n.PricingOptions__feature-list + .PricingOptions__feature-list-group-heading {\n margin-block-start: var(--base-size-20);\n}\n\n.PricingOptions__feature-list-item,\n.PricingOptions__feature-list-item span {\n font-size: var(--feature-list-font-size) !important;\n line-height: var(--feature-list-line-height) !important;\n}\n\n.PricingOptions__feature-list-group-heading {\n font-size: var(--feature-list-font-size) !important;\n}\n\n.PricingOptions--items4 .PricingOptions__feature-list {\n --feature-list-font-size: var(--brand-text-size-100);\n --feature-list-line-height: var(--brand-text-lineHeight-100);\n}\n\n/*\n * Accordion component overrides\n */\n\n/* paddings and borders */\n.PricingOptions__feature-list-accordion {\n border: 0;\n padding: 0;\n}\n\n/* Remove hover effect */\n.PricingOptions__feature-list-accordion::after {\n content: none !important;\n}\n\n/* Adjust heading spacing */\n.PricingOptions__feature-list-accordion-heading {\n padding: var(--base-size-8) 0;\n padding-inline-start: 0 !important; /* Fixes dotcom specificity issue */\n padding-inline-end: 0 !important;\n margin-block-start: calc(var(--base-size-16) * -1);\n margin-block-end: var(--base-size-8);\n}\n\n/* Accordion heading styling */\n.PricingOptions__feature-list-accordion .PricingOptions__feature-list-accordion-heading :is(h1, h2, h3, h4, h5, h6) {\n font-size: var(--feature-list-font-size);\n line-height: var(--feature-list-line-height);\n font-weight: var(--brand-text-subhead-weight-large);\n gap: var(--base-size-8);\n align-items: center;\n justify-content: space-between;\n display: flex;\n width: 100%;\n}\n\n/* Hide default icon */\n.PricingOptions__feature-list-accordion .PricingOptions__feature-list-accordion-heading span {\n display: none;\n}\n\n/* Adjust content paddings */\n.PricingOptions__feature-list-accordion .PricingOptions__feature-list-accordion-content {\n padding: 0;\n padding-block-start: var(--base-size-8);\n padding-inline-start: 0 !important;\n}\n\n.PricingOptions__feature-list-accordion-chevron {\n margin-inline-end: var(--base-size-4);\n}\n\n/* Chevron up icon */\n.PricingOptions__feature-list-accordion[open] .PricingOptions__feature-list-accordion-chevron {\n transform: rotate(180deg);\n}\n\n.PricingOptions__feature-list-accordion-content {\n animation: none !important;\n}\n"],"mappings":""}

package/esm/PricingOptions/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './PricingOptions';
2	+ //# sourceMappingURL=index.d.ts.map

package/esm/PricingOptions/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/PricingOptions/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA"}