@fairgarden/design 0.1.0-0.canary.0

package/content/profile/Profile.js

@@ -0,0 +1,230 @@
+'use client';
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { cva } from 'class-variance-authority';
+import { Avatar } from '../../feedback/avatar';
+import { Link } from '../../actions/link';
+import { cx, resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants, } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './profile.module.css';
+/*
+ * Profile & Team (§12.15): people and organizations (authors, staff,
+ * partner groups, speakers). Avatar (§10.12) holds byline, author and
+ * bio portraits; team photos are plain `img` figures. Species use §12.2 and
+ * testimonials §12.8.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: profile.module.css; CVA function `profile`.
+ * - Axes: `kind` → byline | author | bio | team → `kindByline`, `author`,
+ *   `kindBio`, `team` (axis-prefixed: `byline` and `bio` are also parts);
+ *   `primary`, `secondary` → scales module classes.
+ * - Compound variants: none.
+ * - Defaults: none (`kind` is required); color axes: none.
+ * - Color fallback: inherits the scope, and passes both props to the Avatar.
+ * - States: Avatar swaps Image and Fallback by its loading status, with no
+ *   styling attribute; the name and social links are Links (§9.3), which own
+ *   their hover and press; `member:has(nameLink:focus-visible)` (or the
+ *   root's) → the ring around the item.
+ * - Parts: base, portrait (Avatar Root: the module passes the §10.12 size
+ *   per kind: byline sm, author md, bio lg stepping to the xl diameter from
+ *   768 px of container), portraitImage / initials (AvatarImage /
+ *   AvatarFallback, composed by the consumer), teamPhoto, details (the bio
+ *   row's text column), name, nameLink, role, bio, links, byline (the
+ *   byline kind's root), date, teamList (the team grid; `team` is the kind's
+ *   class) and member.
+ * - Scope: none in this module; the initials face is the Avatar's own.
+ * - Container: `base` is the inline-size container `profile`; the team list
+ *   and the bio row query it. Baseline without support: team cells in a
+ *   grid auto-fit with minmax tracks at the 152 px compact minimum, capped
+ *   at 5 (1-up at --xs-n-below); the bio row as two columns that wrap
+ *   (flex-wrap) to a stack when portrait and text no longer fit; byline and
+ *   author block need no reflow. Thresholds (§5.10.2): below 360 the bio
+ *   row stacks and team 1-up; 2-up from 360; 4-up and the xl portrait from
+ *   768; up to 5-up from 1024 [D163].
+ */
+export const profile = cva(styles.base, {
+    variants: {
+        kind: {
+            byline: styles.kindByline,
+            author: styles.author,
+            bio: styles.kindBio,
+            team: styles.team,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+const ProfileContext = React.createContext({
+    kind: 'author',
+    primary: undefined,
+    secondary: undefined,
+});
+ProfileContext.displayName = 'ProfileContext';
+/** The §10.12 Avatar size the module passes per kind (§12.15 Tokens). */
+const portraitSizes = {
+    byline: 'sm',
+    author: 'md',
+    bio: 'lg',
+};
+/**
+ * The profile module. A byline holds `ProfilePortrait`, `ProfileName` and
+ * `ProfileDate`; an author block `ProfilePortrait`, `ProfileName`,
+ * `ProfileBio`; a bio row `ProfilePortrait` and `ProfileDetails` (name,
+ * role, bio, links); a team `ProfileTeam` of `ProfileMember`s, each with a
+ * `ProfileTeamPhoto`, `ProfileName` and `ProfileRole`. Use real portraits
+ * or initials; never overlay names on photos, never dim former members.
+ */
+export function Profile(props) {
+    const { render, ref, className, kind, primary, secondary, ...rest } = props;
+    const scope = useScopeAttributes();
+    const context = React.useMemo(() => ({ kind, primary: primary ?? undefined, secondary: secondary ?? undefined }), [kind, primary, secondary]);
+    const element = useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({
+            ...scope,
+            className: profile({ kind, primary, secondary, className }),
+        }, rest),
+    });
+    return React.createElement(ProfileContext.Provider, { value: context }, element);
+}
+/**
+ * The portrait: an Avatar sized by the kind (byline 32 px, author 40 px,
+ * bio 64 px stepping to 128 px from 768 px of container), with its ring per
+ * §10.12, taking the module's `primary` and `secondary` unless given its
+ * own. Compose `AvatarImage` (empty alt where the name is adjacent) and
+ * `AvatarFallback` (1–2 initials) inside; the fallback keeps the spacing.
+ */
+export function ProfilePortrait(props) {
+    const { size, primary, secondary, className, ...rest } = props;
+    const context = React.useContext(ProfileContext);
+    const resolvedSize = size ?? (context.kind === 'team' ? 'lg' : portraitSizes[context.kind]);
+    return (React.createElement(Avatar, { ...rest, size: resolvedSize, primary: primary ?? context.primary, secondary: secondary ?? context.secondary, className: resolveClassName(className, (extra) => cx(styles.portrait, extra)) }));
+}
+/**
+ * A team member's photo: a plain `img`, square at the cell's full width,
+ * `--radius-2-25`, framed in a `--border-size-1` `--role-hairline` line.
+ * Give it empty alt when the name follows.
+ */
+export function ProfileTeamPhoto(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'img',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.teamPhoto, className) }, rest),
+    });
+}
+/** The bio row's text column beside the portrait: name, role, bio and links. */
+export function ProfileDetails(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.details, className) }, rest),
+    });
+}
+/**
+ * The name in `--primary12`: `type-itemhead` for the author block, bio row
+ * and team, `type-body-ui` at `--font-weight-6` in a byline ("By Name").
+ * Renders `<h3>`, or `<span>` in a byline. Wrap a `ProfileNameLink` inside
+ * to link the profile.
+ */
+export function ProfileName(props) {
+    const { render, ref, className, ...rest } = props;
+    const { kind } = React.useContext(ProfileContext);
+    const isByline = kind === 'byline';
+    return useRender({
+        defaultTagName: isByline ? 'span' : 'h3',
+        render,
+        ref,
+        props: mergeProps({ className: cx(isByline ? styles.nameUi : styles.name, className) }, rest),
+    });
+}
+/**
+ * The profile's one link, inside `ProfileName`: a §9.3 title Link whose hit
+ * area stretches over the member (or the whole profile). Hover, focus and
+ * press underline the name; the item draws the focus ring.
+ */
+export function ProfileNameLink(props) {
+    const { className, ...rest } = props;
+    return React.createElement(Link, { ...rest, kind: "title", className: cx(styles.nameLink, className) });
+}
+/**
+ * Role or affiliation: `type-label` caps in `--primary12`. Former members
+ * say so in words ("Former board chair"); never dim them.
+ */
+export function ProfileRole(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.role, className) }, rest),
+    });
+}
+/** A short bio or description, 3–5 lines of `type-body-ui` in `--primary12`; prints in full. */
+export function ProfileBio(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.bio, className) }, rest),
+    });
+}
+/**
+ * Social and contact links, a `ul` of `li > Link`: text links with the
+ * `--role-accent` underline, or inline-tier icons. They sit above a
+ * stretched name link as their own tab stops. In print, write handles in
+ * text; icon-only links are omitted.
+ */
+export function ProfileLinks(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'ul',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.links, className) }, rest),
+    });
+}
+/** The byline date, after a "·" separator: `type-caption` in `--primary12`. Pass `dateTime`. */
+export function ProfileDate(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'time',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.date, className) }, rest),
+    });
+}
+/**
+ * The team grid: 1-up below 360 px of container, 2-up from 360, 4-up from
+ * 768, up to 5-up from 1024 (auto-fit at 152 px without container-query
+ * support). Prints 3-up.
+ */
+export function ProfileTeam(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'ul',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.teamList, className) }, rest),
+    });
+}
+/** One team member: photo → name → role. A `ProfileNameLink` links the whole cell. */
+export function ProfileMember(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'li',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.member, className) }, rest),
+    });
+}
+//# sourceMappingURL=Profile.js.map

package/content/profile/Profile.js.map

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

package/content/profile/index.d.ts

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

package/content/profile/index.d.ts.map

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

package/content/profile/index.js

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

package/content/profile/index.js.map

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

package/content/profile/profile.module.css

@@ -0,0 +1,272 @@
+/*
+ * Profile & Team (§12.15). The root `base` is the inline-size container
+ * `profile`; the team list and the bio row query it. Parts: base (the
+ * byline, author block or bio row itself), portrait (an Avatar, styled by
+ * §10.12), teamPhoto, details, name (`nameUi` in a byline), nameLink (a
+ * title Link), role, bio, links, date, teamList, member. Colors are role
+ * variables only; local custom properties carry dimensions only:
+ *   --profile-gap   the team gutter (= --fgd-space-margin) [D42]
+ */
+
+/* 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. */
+.name {
+  composes: typeItemhead from '../../utils/type.module.css';
+}
+
+.nameUi {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.role {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.bio {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.date {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base {
+    --profile-gap: var(--fgd-space-margin);
+
+    position: relative; /* a stretched name link covers the whole profile */
+    container: profile / inline-size;
+    /* Size containment leaves no intrinsic width: fill the box, never collapse as a flex or shrink-to-fit item. */
+    inline-size: 100%;
+    min-inline-size: 0;
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  .name,
+  .nameUi,
+  .role,
+  .bio {
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  .date {
+    color: var(--primary12);
+    white-space: nowrap;
+  }
+
+  /* Social and contact links sit above a stretched name link, as their own tab stops. */
+  .links {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--size-px-2) var(--size-px-2-5);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .details {
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-px-2-5);
+    min-inline-size: 0;
+  }
+
+  /* Team photo: square at the cell's width, the species-card frame (§12.2). */
+  .teamPhoto {
+    display: block;
+    box-sizing: border-box;
+    inline-size: 100%;
+    aspect-ratio: var(--ratio-square);
+    object-fit: cover;
+    border: var(--border-size-1) solid var(--role-hairline);
+    border-radius: var(--radius-2-25);
+  }
+
+  /* Team baseline (§1.11.11): auto-fit at the 152 px compact minimum, capped at 5. */
+  .teamList {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(100%, max(152px, calc((100% - 4 * var(--profile-gap)) / 5))), 1fr)
+    );
+    gap: var(--size-px-7) var(--profile-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .member {
+    position: relative; /* the stretched name link's positioned ancestor */
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-px-2);
+    min-inline-size: 0;
+  }
+
+  .member .teamPhoto {
+    margin-block-end: var(--size-px-1);
+  }
+
+  @media (max-width: 359.98px) {
+    .teamList {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  /* Container (§5.10.2): 1-up below 360 px, 2-up from 360, 4-up from 768, up to 5 from 1024. */
+  @container profile (width < 360px) {
+    .teamList {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  @container profile (360px <= width < 768px) {
+    .teamList {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @container profile (768px <= width < 1024px) {
+    .teamList {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  @container profile (width >= 1024px) {
+    .teamList {
+      grid-template-columns: repeat(
+        auto-fit,
+        minmax(calc((100% - 4 * var(--profile-gap)) / 5), 1fr)
+      );
+    }
+  }
+}
+
+@layer variants {
+  /* Team: the root hosts the grid; each member is its own link anchor. */
+  .team {
+    display: block;
+  }
+
+  /* Byline: inline, portrait · "By Name" · date, one line where it fits. */
+  .kindByline {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--size-px-2);
+  }
+
+  .nameUi {
+    font-weight: var(--font-weight-6);
+  }
+
+  .kindByline .date::before {
+    content: '\00B7';
+    content: '\00B7' / '';
+    margin-inline-end: var(--size-px-2);
+  }
+
+  /* Author block: portrait → 24 → serif name → 24 → description, stacked. */
+  .author {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--size-px-5);
+  }
+
+  /*
+   * Bio row: portrait at the start, text beside it, even on
+   * phones; the pair wraps to a stack when the text column would drop under
+   * its minimum, and always below 360 px of container.
+   */
+  .kindBio {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--size-px-5);
+  }
+
+  .kindBio .details {
+    flex: 1 1 var(--size-px-12);
+  }
+
+  /* The bio portrait steps from 64 px to the 128 px xl diameter (fixed steps, never fluid). */
+  @media (min-width: 768px) {
+    .kindBio .portrait {
+      --avatar-size: var(--fgd-size-avatar-xl);
+      --avatar-initials: var(--fgd-font-size-display);
+    }
+  }
+
+  @container profile (width < 360px) {
+    .kindBio .details {
+      flex-basis: 100%;
+    }
+  }
+
+  @container profile (width < 768px) {
+    .kindBio .portrait {
+      --avatar-size: var(--size-px-9);
+      --avatar-initials: var(--font-size-4);
+    }
+  }
+
+  @container profile (width >= 768px) {
+    .kindBio .portrait {
+      --avatar-size: var(--fgd-size-avatar-xl);
+      --avatar-initials: var(--fgd-font-size-display);
+    }
+  }
+}
+
+@layer states {
+  /* A linked profile's ring sits around the item, keyboard only [D45]; it replaces the link's own. */
+  .base .nameLink:focus-visible {
+    outline: none;
+  }
+
+  .member:has(.nameLink:focus-visible),
+  .author:has(.nameLink:focus-visible),
+  .kindBio:has(.nameLink:focus-visible),
+  .kindByline:has(.nameLink:focus-visible) {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+}
+
+@layer print {
+  @media print {
+    /* Team grids print 3-up; portraits at most 20 mm; photos grayscale in their frame; bios in full. */
+    .base {
+      --profile-gap: var(--size-px-5);
+    }
+
+    .author,
+    .kindBio,
+    .kindByline {
+      break-inside: avoid;
+    }
+
+    .teamList {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .member {
+      break-inside: avoid;
+    }
+
+    .teamPhoto {
+      max-block-size: var(--fgd-print-figure-max);
+      filter: grayscale(1);
+    }
+
+    .kindBio .portrait {
+      --avatar-size: var(--size-px-9);
+      --avatar-initials: var(--font-size-4);
+    }
+  }
+}

package/content/quote/Quote.d.ts

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+import { type AvatarProps } from '../../feedback/avatar';
+export declare const quote: (props?: ({
+    kind?: "block" | "band" | "framed" | "pull" | "epigraph" | null | undefined;
+    duplicate?: boolean | 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;
+type QuoteVariants = VariantProps<typeof quote>;
+/** The five quote builds (§12.8). */
+export type QuoteKind = 'band' | 'framed' | 'pull' | 'block' | 'epigraph';
+type QuoteKindProps = {
+    /** A pull quote: `type-quote` followed by a short rule, no attribution. */
+    kind: 'pull';
+    /**
+     * The pull quote repeats text from the article: it renders as an
+     * `aside` hidden from assistive technology and is hidden in print
+     * [D174]. Default `false`: a pull quote with unique text is a `figure`
+     * and prints.
+     */
+    duplicate?: boolean;
+} | {
+    /**
+     * `band`: a centered testimonial alone on a light or saturated ground.
+     * `framed`: a testimonial in a `--border-size-2` outline with a heavy
+     * open-quote glyph. `block`: a quoted passage in `type-body` behind a
+     * `--border-size-2-25` left rule. `epigraph`: 1–2 lines of display bold
+     * italic at a drawing's corner, with no quote marks.
+     */
+    kind: Exclude<QuoteKind, 'pull'>;
+    /** Pull quotes only. */
+    duplicate?: never;
+};
+/** Props for Quote: `figure` props, `render`, the kind (and `duplicate`) and the color axes. */
+export type QuoteProps = useRender.ComponentProps<'figure'> & QuoteKindProps & {
+    /**
+     * Primary Radix scale: text, mark, rules, frame and attribution. Never
+     * defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: QuoteVariants['primary'];
+    /**
+     * Secondary Radix scale: only a linked source's underline
+     * (`--role-accent`). Never defaulted.
+     */
+    secondary?: QuoteVariants['secondary'];
+};
+/**
+ * The quote: a `figure` holding `QuoteText` (the `blockquote`) and, for
+ * testimonials, a `QuoteAttribution` (`figcaption`) with `QuoteName`,
+ * `QuoteRole`, an optional `QuotePortrait` and an optional `QuoteSource`.
+ * Keep band and framed testimonials to 40 words; never put quotes in a
+ * carousel.
+ */
+export declare function Quote(props: QuoteProps): React.JSX.Element;
+/** Props for QuoteText: `blockquote` props and `render`. */
+export type QuoteTextProps = useRender.ComponentProps<'blockquote'>;
+/**
+ * The quoted words, a `blockquote` (pass `cite` for a source URL):
+ * `type-quote` for band, framed and pull; `type-body` behind the left rule
+ * for block; display bold italic for epigraph. Curly quotes only; pull
+ * quotes hang their punctuation. A pull quote closes with its short rule.
+ */
+export declare function QuoteText(props: QuoteTextProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for QuoteAttribution: `figcaption` props and `render`. */
+export type QuoteAttributionProps = useRender.ComponentProps<'figcaption'>;
+/**
+ * Who said it, `--size-px-5` below the quote: `QuotePortrait`, then
+ * `QuoteName` over `QuoteRole` (a line break, never a pipe), then an
+ * optional `QuoteSource`.
+ */
+export declare function QuoteAttribution(props: QuoteAttributionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for QuoteName: `span` props and `render`. */
+export type QuoteNameProps = useRender.ComponentProps<'span'>;
+/** The person's name: `type-label` caps in `--primary12`, on its own line. */
+export declare function QuoteName(props: QuoteNameProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for QuoteRole: `span` props and `render`. */
+export type QuoteRoleProps = useRender.ComponentProps<'span'>;
+/** Role or affiliation under the name: `type-caption` in `--primary12`. */
+export declare function QuoteRole(props: QuoteRoleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for QuotePortrait: Avatar props; `size` defaults to `md`. */
+export type QuotePortraitProps = AvatarProps;
+/**
+ * The portrait: an Avatar at 40 px (`md`) with its `--role-rule` ring,
+ * taking the quote's `primary` and `secondary` unless given its own. Compose
+ * `AvatarImage` (empty alt, since the name is adjacent) and
+ * `AvatarFallback` inside. Prints grayscale, at most 20 mm.
+ */
+export declare function QuotePortrait(props: QuotePortraitProps): React.JSX.Element;
+/** Props for QuoteSource: `cite` props and `render`. */
+export type QuoteSourceProps = useRender.ComponentProps<'cite'>;
+/**
+ * The source title in a `cite` (`type-caption`, upright). Link it with a
+ * `Link` inside, which owns the `--role-accent` underline and its states.
+ */
+export declare function QuoteSource(props: QuoteSourceProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export {};
+//# sourceMappingURL=Quote.d.ts.map

package/content/quote/Quote.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Quote.d.ts","sourceRoot":"","sources":["../../src/content/quote/Quote.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAoChE,eAAO,MAAM,KAAK;;;;;8EAmBhB,CAAA;AAEF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAA;AAE/C,qCAAqC;AACrC,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAA;AAezE,KAAK,cAAc,GACf;IACE,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,GACD;IACE;;;;;;OAMG;IACH,IAAI,EAAE,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;IAChC,wBAAwB;IACxB,SAAS,CAAC,EAAE,KAAK,CAAA;CAClB,CAAA;AAEL,gGAAgG;AAChG,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC,GACzD,cAAc,GAAG;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAA;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAA;CACvC,CAAA;AAEH;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,qBA4CtC;AAED,4DAA4D;AAC5D,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;AAEnE;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,0EAoB9C;AAED,mEAAmE;AACnE,MAAM,MAAM,qBAAqB,GAAG,SAAS,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;AAE1E;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,0EAQ5D;AAED,sDAAsD;AACtD,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;AAE7D,8EAA8E;AAC9E,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,0EAQ9C;AAED,sDAAsD;AACtD,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;AAE7D,2EAA2E;AAC3E,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,0EAQ9C;AAED,sEAAsE;AACtE,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAA;AAE5C;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAYtD;AAED,wDAAwD;AACxD,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;AAE/D;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,0EAQlD"}