@fairgarden/design 0.1.0-alpha.0

package/components/PreviewCard/PreviewCard.js

@@ -0,0 +1,123 @@
+'use client';
+import * as React from 'react';
+import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { cva } from 'class-variance-authority';
+import { Link } from '../Link';
+import { cx, resolveClassName } from '../../utils/className';
+import { OVERLAY_COLLISION_PADDING, OVERLAY_SIDE_OFFSET, OverlayScope, OverlayTail, overlayActionClassName, overlayAttributes, overlayScales, } from '../../utils/overlay';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import styles from './preview-card.module.css';
+/*
+ * Preview Card (§10.15): a hover preview of a linked page, for pointer
+ * users only. No case shows one; derived from P2, P7, [D79] and [D92].
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: preview-card.module.css; CVA function `previewCard`.
+ * - Axes: `primary`, `secondary` → scales module classes, applied inside
+ *   the popup's scope.
+ * - Compound variants: none. Defaults: none; color axes: none.
+ * - Color fallback: the popup takes the `white` preset's defaults.
+ * - States: Popup data-starting-style / data-ending-style → the clip reveal
+ *   from the trigger side (data-side), instant under --motionNotOK and on
+ *   data-instant [D91]; Arrow data-side → the tail's edge. Opens after
+ *   600 ms of hover and closes 300 ms after leave.
+ * - Parts: positioner, base (the popup), arrow and tail, thumb, title,
+ *   description, domain.
+ * - Scope: the popup renders in its Base UI Portal as a nested `white`
+ *   scope (`page` scheme, no data-theme) with the --border-size-2
+ *   --primary12 frame [D92, D139, D156].
+ * - Container: none; inherits its context. Shown only with hover and a
+ *   fine pointer; on touch the link simply navigates.
+ */
+export const previewCard = cva(styles.base, {
+    variants: {
+        // Color axes: never defaulted [D133]; PreviewCardPopup computes the overlay preset's defaults.
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+/** Groups the parts of a preview card (Base UI PreviewCard.Root). */
+export function PreviewCard(props) {
+    return React.createElement(BasePreviewCard.Root, { ...props });
+}
+/**
+ * The link that opens the card on hover. Renders a Link (§9.3), `inline`
+ * by default, so it navigates and prints like any link [D79]. The card is
+ * never the only route to its information.
+ */
+export function PreviewCardTrigger(props) {
+    const { delay = 600, closeDelay = 300, handle, payload, ...linkProps } = props;
+    return (React.createElement(BasePreviewCard.Trigger, { delay: delay, closeDelay: closeDelay, handle: handle, payload: payload, render: React.createElement(Link, { ...linkProps }) }));
+}
+/**
+ * The preview panel, rendered in its Base UI Portal as a nested `white`
+ * scope: --primary1 face, --border-size-2 --primary12 frame, --ds-radius-8,
+ * 240–360 px wide. Compose `PreviewCardThumb`, `PreviewCardTitle`,
+ * `PreviewCardDescription` and `PreviewCardDomain` inside it, and
+ * `PreviewCardArrow` for the tail. It holds at most one link.
+ */
+export function PreviewCardPopup(props) {
+    const { primary, secondary, side, align = 'start', sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = OVERLAY_COLLISION_PADDING, container, className, children, ...rest } = props;
+    const scales = overlayScales(primary, secondary);
+    return (React.createElement(BasePreviewCard.Portal, { container: container },
+        React.createElement(BasePreviewCard.Positioner, { className: styles.positioner, side: side, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding },
+            React.createElement(BasePreviewCard.Popup, { ...rest, ...overlayAttributes, className: resolveClassName(className, (extra) => previewCard({
+                    primary: scales.primary,
+                    secondary: scales.secondary,
+                    className: cx(overlayActionClassName, extra),
+                })) },
+                React.createElement(OverlayScope, null, children)))));
+}
+/** The tail: a --ds-space-12 × 6 px triangle whose --border-size-2 edge continues the frame. */
+export function PreviewCardArrow(props) {
+    const { className, ...rest } = props;
+    return (React.createElement(BasePreviewCard.Arrow, { ...rest, className: resolveClassName(className, (extra) => cx(styles.arrow, extra)) },
+        React.createElement(OverlayTail, { className: styles.tail })));
+}
+/**
+ * The page's thumbnail: a --ratio-widescreen photograph with the nested
+ * radius (--ds-radius-8 − --size-px-3, floored at --radius-1) [D40].
+ * Give it `alt` (empty when the title already names it).
+ */
+export function PreviewCardThumb(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'img',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.thumb, className) }, rest),
+    });
+}
+/** The linked page's title, in `type-itemhead` --primary12. */
+export function PreviewCardTitle(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.title, className) }, rest),
+    });
+}
+/** A one-line description, in `type-body-ui` --primary12. */
+export function PreviewCardDescription(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.description, className) }, rest),
+    });
+}
+/** The page's domain, in `type-data` --role-muted (mono measures). */
+export function PreviewCardDomain(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.domain, className) }, rest),
+    });
+}
+//# sourceMappingURL=PreviewCard.js.map

package/components/PreviewCard/PreviewCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewCard.js","sourceRoot":"","sources":["../../src/components/PreviewCard/PreviewCard.tsx"],"names":[],"mappings":"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"}

package/components/PreviewCard/index.d.ts

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

package/components/PreviewCard/index.d.ts.map

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

package/components/PreviewCard/index.js

@@ -0,0 +1,2 @@
+export * from './PreviewCard';
+//# sourceMappingURL=index.js.map

package/components/PreviewCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/PreviewCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/components/PreviewCard/preview-card.module.css

@@ -0,0 +1,177 @@
+/*
+ * Preview Card (§10.15). CVA function `previewCard` in PreviewCard.tsx.
+ * Parts: positioner (the layer), base (the popup), arrow (the tail's box)
+ * and tail (its drawing), thumb, title, description, domain.
+ *
+ * The anchored overlay surface (§10.1): the `white` scope's --primary1 face,
+ * a --border-size-2 --primary12 frame in both modes [D92, D156],
+ * --ds-radius-8, 240–360 px wide, --size-px-3 padding. Motion is instant or
+ * a clip reveal from the trigger side, never a fade [D91]. Shown only with
+ * hover and a fine pointer. Colors are role variables only; local custom
+ * properties carry dimensions only.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.base {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.title {
+  composes: typeItemhead from '../../utils/type.module.css';
+}
+
+.description {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.domain {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+@layer base {
+  .positioner {
+    z-index: var(--layer-3);
+  }
+
+  .base {
+    --preview-card-tail-inline: var(--ds-space-12);
+    --preview-card-tail-block: calc(var(--ds-space-12) / 2 + var(--border-size-2));
+    --preview-card-bleed: calc(-1 * var(--preview-card-tail-block));
+    --preview-card-clip-from: inset(var(--preview-card-bleed));
+
+    position: relative;
+    display: grid;
+    row-gap: var(--size-px-2);
+    box-sizing: border-box;
+    inline-size: max-content;
+    min-inline-size: min(var(--size-px-13), calc(100vw - 2 * var(--ds-space-margin)));
+    max-inline-size: min(var(--ds-size-overlay-max), calc(100vw - 2 * var(--ds-space-margin)));
+    padding: var(--size-px-3);
+    border: var(--border-size-2) solid var(--primary12);
+    border-radius: var(--ds-radius-8);
+    background-color: var(--primary1);
+    color: var(--primary12);
+    clip-path: inset(var(--preview-card-bleed));
+  }
+
+  /* The thumbnail: 16:9, the nested radius floored at --radius-1 [D40]. */
+  .thumb {
+    display: block;
+    inline-size: 100%;
+    block-size: auto;
+    aspect-ratio: var(--ratio-widescreen);
+    object-fit: cover;
+    border-radius: max(var(--radius-1), calc(var(--ds-radius-8) - var(--size-px-3)));
+  }
+
+  .title,
+  .description {
+    color: var(--primary12);
+  }
+
+  .domain {
+    color: var(--role-muted);
+  }
+
+  .arrow {
+    display: flex;
+    inline-size: var(--preview-card-tail-inline);
+    block-size: var(--preview-card-tail-block);
+  }
+
+  .tail {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+    fill: var(--primary1);
+    stroke: var(--primary12);
+    stroke-width: var(--border-size-2);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .base {
+      transition-property: clip-path;
+      transition-duration: var(--ds-duration-disclosure);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+
+  /* Hover and a fine pointer only: on touch, stylus and coarse pointers the link simply navigates. */
+  @media (hover: none) and (pointer: coarse),(hover: none) and (pointer: fine),(hover) and (pointer: coarse) {
+    .positioner,
+    .base {
+      display: none;
+    }
+  }
+}
+
+@layer states {
+  .base[data-side='bottom'] {
+    --preview-card-clip-from: inset(
+      var(--preview-card-bleed) var(--preview-card-bleed) 100% var(--preview-card-bleed)
+    );
+  }
+
+  .base[data-side='top'] {
+    --preview-card-clip-from: inset(
+      100% var(--preview-card-bleed) var(--preview-card-bleed) var(--preview-card-bleed)
+    );
+  }
+
+  .base[data-side='left'],
+  .base[data-side='inline-start'] {
+    --preview-card-clip-from: inset(
+      var(--preview-card-bleed) var(--preview-card-bleed) var(--preview-card-bleed) 100%
+    );
+  }
+
+  .base[data-side='right'],
+  .base[data-side='inline-end'] {
+    --preview-card-clip-from: inset(
+      var(--preview-card-bleed) 100% var(--preview-card-bleed) var(--preview-card-bleed)
+    );
+  }
+
+  .base[data-starting-style],
+  .base[data-ending-style] {
+    clip-path: var(--preview-card-clip-from);
+  }
+
+  .base[data-instant] {
+    transition: none;
+  }
+
+  .arrow[data-side='bottom'] {
+    inset-block-start: calc(-1 * var(--preview-card-tail-block));
+  }
+
+  .arrow[data-side='top'] {
+    inset-block-end: calc(-1 * var(--preview-card-tail-block));
+    rotate: 180deg;
+  }
+
+  .arrow[data-side='left'],
+  .arrow[data-side='inline-start'] {
+    inset-inline-end: calc(-1 * (var(--preview-card-tail-inline) + var(--preview-card-tail-block)) / 2);
+    rotate: 90deg;
+  }
+
+  .arrow[data-side='right'],
+  .arrow[data-side='inline-end'] {
+    inset-inline-start: calc(-1 * (var(--preview-card-tail-inline) + var(--preview-card-tail-block)) / 2);
+    rotate: -90deg;
+  }
+}
+
+@layer print {
+  @media print {
+    /* Hidden; the link behind the card prints per [D79] (§7.6). */
+    .positioner,
+    .base {
+      display: none;
+    }
+  }
+}

package/components/Pricing/Pricing.d.ts

@@ -0,0 +1,190 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+export declare const pricing: (props?: ({
+    kind?: "inline" | "menu" | "sale" | "tiers" | "matrix" | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Tier classes: `recommended` draws the --ds-stroke-3 --primary12 frame and the badge. */
+export declare const pricingTier: (props?: ({
+    recommended?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type PricingVariants = VariantProps<typeof pricing>;
+/** The five pricing builds (§12.9). */
+export type PricingKind = 'inline' | 'menu' | 'sale' | 'tiers' | 'matrix';
+/** Props for Pricing: `div` props, `render`, the kind and the color axes. */
+export type PricingProps = useRender.ComponentProps<'div'> & {
+    /**
+     * Required. `inline`: "From $49" in running text, figure bold. `menu`: a
+     * mono figure on its own line or at a leader row's end (§12.13). `sale`:
+     * the struck original in `--role-muted`, the current price bold, then
+     * "Save $300" as a word. `tiers`: 2–4 plans as faced cards, stacked, as
+     * columns from 1024 px of container. `matrix`: rows × columns of prices
+     * in a table, one block per row below 360 px of container.
+     */
+    kind: PricingKind;
+    /**
+     * Primary Radix scale: prices, strikes, frames and checks. Never
+     * defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: PricingVariants['primary'];
+    /**
+     * Secondary Radix scale: the tier Radio's selection (`--role-select`) and
+     * the badge. Never defaulted.
+     */
+    secondary?: PricingVariants['secondary'];
+};
+/**
+ * The pricing module. Inline, menu and sale prices hold a `PricingPrice`
+ * (and, for a sale, a `PricingStruck` and a `PricingSave`); pass
+ * `render={<span />}` inside running text. A tier set holds a
+ * `PricingTierList` of `PricingTier`s; a matrix a `PricingMatrix`. Close a
+ * tier set or matrix with `PricingAsOf`. Show the unit and period with
+ * every price, never mark a sale with red alone, and never hide fees.
+ */
+export declare function Pricing(props: PricingProps): React.JSX.Element;
+/** Props for PricingPrice: `data` props, `render` and the hidden label. */
+export type PricingPriceProps = useRender.ComponentProps<'data'> & {
+    /** The machine-readable amount, e.g. `"49.00"`; written as the `data` element's `value`. */
+    value?: string | number;
+    /**
+     * Words for assistive technology only, read before the price: "Now" for
+     * the current price of a sale.
+     */
+    label?: React.ReactNode;
+};
+/**
+ * One price, a `data` element: `PricingQualifier` ("From"), `PricingCurrency`,
+ * `PricingAmount`, `PricingCents` and `PricingPeriod`, in the locale's
+ * order (author the spaces). Kept on one line.
+ */
+export declare function PricingPrice(props: PricingPriceProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for the small price parts: `span` props and `render`. */
+export type PricingPartProps = useRender.ComponentProps<'span'>;
+/** The qualifier, e.g. "From": regular weight, before the figure. */
+export declare function PricingQualifier(props: PricingPartProps): React.JSX.Element;
+/** The currency sign: with the figure inline; `type-caption` beside a tier's figure. */
+export declare function PricingCurrency(props: PricingPartProps): React.JSX.Element;
+/**
+ * The figure, in data numerals: bold in body text (inline, sale), mono
+ * (menu), `type-stat-compact` in a tier.
+ */
+export declare function PricingAmount(props: PricingPartProps): React.JSX.Element;
+/** Optional retail cents as a superscript at 60%, never below `--font-size-0`. */
+export declare function PricingCents(props: PricingPartProps): React.JSX.Element;
+/**
+ * The period or unit, e.g. "/ month", after a thin space the part adds; on
+ * the figure's line, `type-caption` in a tier.
+ */
+export declare function PricingPeriod(props: PricingPartProps): React.JSX.Element;
+/** Props for PricingStruck: `s` props, `render` and the hidden label. */
+export type PricingStruckProps = useRender.ComponentProps<'s'> & {
+    /** Words for assistive technology only, read before the struck price. Default "Was". */
+    label?: React.ReactNode;
+};
+/**
+ * The original price of a sale, struck through at `--ds-stroke-1-5` in
+ * `--role-muted` (never a status color), with a hidden "Was" for assistive
+ * technology. Put a `PricingPrice` inside.
+ */
+export declare function PricingStruck(props: PricingStruckProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** The saving as a word, "Save $300", in `--primary12`: the word carries the sale, not a color. */
+export declare function PricingSave(props: PricingPartProps): React.JSX.Element;
+/** Props for PricingTierList: list props and `render`. */
+export type PricingTierListProps = useRender.ComponentProps<'ul'>;
+/**
+ * The tier set's layout, queried on the `pricing` container: stacked below
+ * 1024 px of container (author the recommended tier first, since visual
+ * order follows source order), columns of one comparison row from 1024,
+ * capped at `--ds-container-content`. When the plans feed a form, wrap it
+ * in a `RadioGroup` and put each tier's `Radio` in its `PricingChoice`.
+ */
+export declare function PricingTierList(props: PricingTierListProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for PricingTier: list-item props, `render`, `recommended` and the badge word. */
+export type PricingTierProps = useRender.ComponentProps<'li'> & VariantProps<typeof pricingTier> & {
+    /**
+     * Marks the recommended plan: a `--ds-stroke-3` `--primary12` frame and
+     * the badge. Default `false`. Never fill-only.
+     */
+    recommended?: boolean;
+    /**
+     * The badge word straddling the top edge. Defaults to "Recommended" on
+     * the recommended tier; pass your own words, or `null` for none.
+     */
+    badge?: React.ReactNode;
+    /** Props for the tier's frame, the faced Card (an `article`), such as `aria-labelledby`. */
+    frameProps?: Omit<useRender.ComponentProps<'article'>, 'children'>;
+};
+/**
+ * One plan: a faced card (`article`) holding `PricingTierName`, a
+ * `PricingPrice`, `PricingSummary`, `PricingFeatures`, an optional
+ * `PricingChoice` (a Radio, when the plan feeds a form) and a
+ * `PricingAction` (a Button, "Choose Basic"). Selected and unavailable
+ * states follow the Radio's `data-checked` and `data-disabled`.
+ */
+export declare function PricingTier(props: PricingTierProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for PricingTierName: heading props and `render` (default `<h3>`). */
+export type PricingTierNameProps = useRender.ComponentProps<'h3'>;
+/** The plan's name: `type-itemhead` in `--primary12`. Renders `<h3>`. */
+export declare function PricingTierName(props: PricingTierNameProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for PricingSummary: paragraph props and `render`. */
+export type PricingSummaryProps = useRender.ComponentProps<'p'>;
+/** The one-line summary: `type-body-ui` in `--primary12`. */
+export declare function PricingSummary(props: PricingSummaryProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for PricingFeatures: list props and `render`. */
+export type PricingFeaturesProps = useRender.ComponentProps<'ul'>;
+/** The feature list, in full under each tier. Omit excluded features; never strike them. */
+export declare function PricingFeatures(props: PricingFeaturesProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for PricingFeature: list-item props and `render`. */
+export type PricingFeatureProps = useRender.ComponentProps<'li'>;
+/** One included feature, led by the inline-tier `check` icon (hidden: the words carry it). */
+export declare function PricingFeature(props: PricingFeatureProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for PricingChoice: `div` props and `render`. */
+export type PricingChoiceProps = useRender.ComponentProps<'div'>;
+/**
+ * The plan choice, the tier Card's `CardChoice`: put the tier's `Radio` here
+ * (its group wraps the tier list). Its `data-checked` selects the tier's
+ * edge; its `data-disabled` marks the tier unavailable (then say
+ * "Unavailable" in `PricingAction`).
+ */
+export declare function PricingChoice(props: PricingChoiceProps): React.JSX.Element;
+/** Props for PricingAction: `div` props and `render`. */
+export type PricingActionProps = useRender.ComponentProps<'div'>;
+/**
+ * The tier's action: a Button with a title-case label ("Start Free Trial"),
+ * or the word "Unavailable". Prints as "Label (short URL)".
+ */
+export declare function PricingAction(props: PricingActionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for PricingMatrix: `table` props, `render` and the scroll region's name. */
+export type PricingMatrixProps = useRender.ComponentProps<'table'> & {
+    /**
+     * Names the scrolling wrapper for assistive technology, which then is a
+     * focusable `region` (so keyboards can scroll a wide matrix).
+     */
+    label?: string;
+};
+/**
+ * The price matrix: a §8.2 table (rows by species or size × retail and
+ * wholesale columns) with `--role-rule` row rules and a `line-double-hair`
+ * total rule above the `tfoot` (the minimum order). Author `thead`,
+ * `tbody` and `tfoot`; use `PricingCell` with a `label` so each value keeps
+ * its column name when rows become blocks below 360 px of container.
+ */
+export declare function PricingMatrix(props: PricingMatrixProps): React.JSX.Element;
+/** Props for PricingCell: `td` props, `render` and the column name. */
+export type PricingCellProps = useRender.ComponentProps<'td'> & {
+    /** The column's name ("Wholesale"), shown before the value only when rows are blocks. */
+    label?: React.ReactNode;
+};
+/** A matrix value cell; its `label` repeats the column header in the block form. */
+export declare function PricingCell(props: PricingCellProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for PricingAsOf: paragraph props and `render`. */
+export type PricingAsOfProps = useRender.ComponentProps<'p'>;
+/**
+ * The provenance line, "Prices as of 1 Sep 2026 (short URL)": `type-caption`
+ * after a tier set or matrix, on screen and in print (§12.9, P10).
+ */
+export declare function PricingAsOf(props: PricingAsOfProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export {};
+//# sourceMappingURL=Pricing.d.ts.map

package/components/Pricing/Pricing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pricing.d.ts","sourceRoot":"","sources":["../../src/components/Pricing/Pricing.tsx"],"names":[],"mappings":"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"}