@buildcanada/components 0.3.3 → 0.3.5

package/dist/content/Card/Card.d.ts

@@ -0,0 +1,62 @@
+export type CardVariant = "default" | "project" | "memo" | "feature" | "stat" | "profile";
+export interface CardProps {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    variant?: CardVariant;
+    href?: string;
+    onClick?: () => void;
+}
+export declare function Card({ children, className, style, variant, href, onClick, }: CardProps): import("react/jsx-runtime").JSX.Element;
+/*******************************************************************************
+ * Card Subcomponents
+ ******************************************************************************/
+export interface CardImageProps {
+    src: string;
+    alt: string;
+    className?: string;
+}
+export declare function CardImage({ src, alt, className }: CardImageProps): import("react/jsx-runtime").JSX.Element;
+export interface CardIconProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function CardIcon({ children, className }: CardIconProps): import("react/jsx-runtime").JSX.Element;
+export interface CardContentProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function CardContent({ children, className }: CardContentProps): import("react/jsx-runtime").JSX.Element;
+export interface CardTitleProps {
+    children: React.ReactNode;
+    className?: string;
+    as?: "h2" | "h3" | "h4" | "h5" | "h6";
+}
+export declare function CardTitle({ children, className, as: Component }: CardTitleProps): import("react/jsx-runtime").JSX.Element;
+export interface CardDescriptionProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function CardDescription({ children, className }: CardDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export interface CardMetaProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function CardMeta({ children, className }: CardMetaProps): import("react/jsx-runtime").JSX.Element;
+export interface CardStatProps {
+    value: string | number;
+    label: string;
+    change?: string;
+    changeDirection?: "up" | "down" | "neutral";
+    className?: string;
+}
+export declare function CardStat({ value, label, change, changeDirection, className }: CardStatProps): import("react/jsx-runtime").JSX.Element;
+export interface CardAuthorProps {
+    name: string;
+    role?: string;
+    avatar?: string;
+    className?: string;
+}
+export declare function CardAuthor({ name, role, avatar, className }: CardAuthorProps): import("react/jsx-runtime").JSX.Element;
+export default Card;
+//# sourceMappingURL=Card.d.ts.map

package/dist/content/Card/Card.d.ts.map

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

package/dist/content/Card/Card.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from "classnames";
+export function Card({ children, className, style, variant = "default", href, onClick, }) {
+    const isInteractive = Boolean(href || onClick);
+    const isButton = Boolean(onClick);
+    const classes = cx("bc-card", `bc-card--${variant}`, {
+        "bc-card--interactive": isInteractive,
+        "bc-card--button": isButton,
+    }, className);
+    if (href) {
+        return (_jsx("a", { href: href, className: classes, style: style, children: children }));
+    }
+    if (onClick) {
+        return (_jsx("button", { type: "button", className: classes, style: style, onClick: onClick, children: children }));
+    }
+    return (_jsx("div", { className: classes, style: style, children: children }));
+}
+export function CardImage({ src, alt, className }) {
+    return (_jsx("div", { className: cx("bc-card__image", className), children: _jsx("img", { src: src, alt: alt }) }));
+}
+export function CardIcon({ children, className }) {
+    return _jsx("div", { className: cx("bc-card__icon", className), children: children });
+}
+export function CardContent({ children, className }) {
+    return _jsx("div", { className: cx("bc-card__content", className), children: children });
+}
+export function CardTitle({ children, className, as: Component = "h3" }) {
+    return _jsx(Component, { className: cx("bc-card__title", className), children: children });
+}
+export function CardDescription({ children, className }) {
+    return _jsx("p", { className: cx("bc-card__description", className), children: children });
+}
+export function CardMeta({ children, className }) {
+    return _jsx("div", { className: cx("bc-card__meta", className), children: children });
+}
+export function CardStat({ value, label, change, changeDirection, className }) {
+    return (_jsxs("div", { className: cx("bc-card__stat", className), children: [_jsx("span", { className: "bc-card__stat-value", children: value }), _jsx("span", { className: "bc-card__stat-label", children: label }), change && (_jsx("span", { className: cx("bc-card__stat-change", {
+                    "bc-card__stat-change--up": changeDirection === "up",
+                    "bc-card__stat-change--down": changeDirection === "down",
+                }), children: change }))] }));
+}
+export function CardAuthor({ name, role, avatar, className }) {
+    return (_jsxs("div", { className: cx("bc-card__author", className), children: [avatar && (_jsx("img", { src: avatar, alt: name, className: "bc-card__author-avatar" })), _jsxs("div", { className: "bc-card__author-info", children: [_jsx("span", { className: "bc-card__author-name", children: name }), role && _jsx("span", { className: "bc-card__author-role", children: role })] })] }));
+}
+export default Card;

package/dist/content/Card/Card.scss

@@ -0,0 +1,281 @@
+@use "../../styles/tokens" as *;
+@use "../../styles/typography" as *;
+
+/*******************************************************************************
+ * Card Component
+ ******************************************************************************/
+
+.bc-card {
+  display: flex;
+  flex-direction: column;
+  background-color: $white;
+  border: 1px solid $border-muted;
+  border-radius: $radius-none;
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
+  transition: box-shadow $transition-fast, transform $transition-fast;
+
+  /***************************************************************************
+   * Variant: Default Card
+   ***************************************************************************/
+
+  &--default {
+    .bc-card__content {
+      padding: $space-3;
+    }
+
+    .bc-card__title {
+      @include h3;
+      margin: 0 0 $space-1;
+    }
+
+    .bc-card__description {
+      @include body-2;
+      color: $text-secondary;
+      margin: 0;
+    }
+
+    .bc-card__meta {
+      @include micro;
+      color: $text-muted;
+      margin-top: $space-2;
+    }
+  }
+
+  // Interactive cards (when rendered as a or button)
+  &--interactive {
+    cursor: pointer;
+
+    &:hover {
+      box-shadow: $shadow-md;
+      transform: translateY(-2px);
+    }
+
+    &:focus-visible {
+      outline: 2px solid $auburn;
+      outline-offset: 2px;
+    }
+  }
+
+  // Button-specific styles
+  &--button {
+    border: 1px solid $border-muted;
+    text-align: left;
+    width: 100%;
+  }
+
+  /***************************************************************************
+   * Variant: Project Card
+   ***************************************************************************/
+
+  &--project {
+    .bc-card__image {
+      aspect-ratio: 16 / 9;
+    }
+
+    .bc-card__content {
+      padding: $space-3;
+    }
+
+    .bc-card__title {
+      @include h3;
+      margin: 0 0 $space-1;
+    }
+
+    .bc-card__description {
+      @include body-3;
+      color: $text-secondary;
+      margin: 0;
+    }
+  }
+
+  /***************************************************************************
+   * Variant: Memo Card
+   ***************************************************************************/
+
+  &--memo {
+    .bc-card__content {
+      padding: $space-3;
+    }
+
+    .bc-card__title {
+      @include h3;
+      margin: 0 0 $space-1;
+    }
+
+    .bc-card__description {
+      @include body-2;
+      color: $text-secondary;
+      margin: 0 0 $space-2;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+  }
+
+  /***************************************************************************
+   * Variant: Feature Card
+   ***************************************************************************/
+
+  &--feature {
+    text-align: center;
+    padding: $space-4;
+
+    .bc-card__icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 64px;
+      height: 64px;
+      margin: 0 auto $space-2;
+      background-color: $linen;
+      border-radius: $radius-none;
+      color: $auburn;
+      font-size: 1.5rem;
+    }
+
+    .bc-card__title {
+      @include h4;
+      margin: 0 0 $space-1;
+    }
+
+    .bc-card__description {
+      @include body-3;
+      color: $text-secondary;
+      margin: 0;
+    }
+  }
+
+  /***************************************************************************
+   * Variant: Stat Card
+   ***************************************************************************/
+
+  &--stat {
+    padding: $space-3;
+    background-color: $linen;
+    border: none;
+
+    .bc-card__stat {
+      display: flex;
+      flex-direction: column;
+      gap: calc($space-1 / 2);
+    }
+
+    .bc-card__stat-value {
+      @include display-2;
+      color: $charcoal;
+    }
+
+    .bc-card__stat-label {
+      @include label;
+      color: $text-secondary;
+    }
+
+    .bc-card__stat-change {
+      @include mono-sm;
+      color: $text-secondary;
+
+      &--up {
+        color: $emerald-600;
+      }
+
+      &--down {
+        color: $auburn;
+      }
+    }
+  }
+
+  /***************************************************************************
+   * Variant: Profile Card
+   ***************************************************************************/
+
+  &--profile {
+    text-align: center;
+    padding: $space-4;
+
+    .bc-card__image {
+      width: 120px;
+      height: 120px;
+      margin: 0 auto $space-2;
+      border-radius: $radius-full;
+      overflow: hidden;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .bc-card__title {
+      @include h4;
+      margin: 0 0 calc($space-1 / 2);
+    }
+
+    .bc-card__description {
+      @include body-3;
+      color: $text-secondary;
+      margin: 0;
+    }
+
+    .bc-card__meta {
+      display: flex;
+      justify-content: center;
+      gap: $space-1;
+      margin-top: $space-2;
+    }
+  }
+
+  /***************************************************************************
+   * Subcomponents
+   ***************************************************************************/
+
+  &__image {
+    width: 100%;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__author {
+    display: flex;
+    align-items: center;
+    gap: $space-1;
+    margin-top: auto;
+    padding-top: $space-2;
+  }
+
+  &__author-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: $radius-full;
+    object-fit: cover;
+  }
+
+  &__author-info {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__author-name {
+    @include label-sm;
+    color: $text-primary;
+  }
+
+  &__author-role {
+    @include body-3;
+    color: $text-secondary;
+  }
+}

package/dist/content/Card/index.d.ts

@@ -0,0 +1,3 @@
+export { Card, CardImage, CardIcon, CardContent, CardTitle, CardDescription, CardMeta, CardStat, CardAuthor, type CardProps, type CardVariant, type CardImageProps, type CardIconProps, type CardContentProps, type CardTitleProps, type CardDescriptionProps, type CardMetaProps, type CardStatProps, type CardAuthorProps, } from "./Card.js";
+export { default } from "./Card.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/content/Card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/content/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,WAAW,EACX,SAAS,EACT,eAAe,EACf,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,eAAe,GACvB,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA"}

package/dist/content/Card/index.js

@@ -0,0 +1,2 @@
+export { Card, CardImage, CardIcon, CardContent, CardTitle, CardDescription, CardMeta, CardStat, CardAuthor, } from "./Card.js";
+export { default } from "./Card.js";

package/dist/content/Hero/Hero.d.ts

@@ -0,0 +1,28 @@
+export type HeroVariant = "home" | "page" | "centered";
+export type HeroBackground = "white" | "linen" | "charcoal";
+export interface HeroProps {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    variant?: HeroVariant;
+    background?: HeroBackground;
+}
+export declare function Hero({ children, className, style, variant, background, }: HeroProps): import("react/jsx-runtime").JSX.Element;
+export interface HeroTitleProps {
+    children: React.ReactNode;
+    className?: string;
+    as?: "h1" | "h2";
+}
+export declare function HeroTitle({ children, className, as: Component }: HeroTitleProps): import("react/jsx-runtime").JSX.Element;
+export interface HeroSubtitleProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function HeroSubtitle({ children, className }: HeroSubtitleProps): import("react/jsx-runtime").JSX.Element;
+export interface HeroActionsProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function HeroActions({ children, className }: HeroActionsProps): import("react/jsx-runtime").JSX.Element;
+export default Hero;
+//# sourceMappingURL=Hero.d.ts.map

package/dist/content/Hero/Hero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../src/content/Hero/Hero.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,CAAA;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,CAAA;AAE3D,MAAM,WAAW,SAAS;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,UAAU,CAAC,EAAE,cAAc,CAAA;CAC9B;AAED,wBAAgB,IAAI,CAAC,EACjB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,OAAgB,EAChB,UAAoB,GACvB,EAAE,SAAS,2CAaX;AAED,MAAM,WAAW,cAAc;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;CACnB;AAED,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,SAAgB,EAAE,EAAE,cAAc,2CAEtF;AAED,MAAM,WAAW,iBAAiB;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CAEtE;AAED,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAEpE;AAED,eAAe,IAAI,CAAA"}

package/dist/content/Hero/Hero.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cx from "classnames";
+export function Hero({ children, className, style, variant = "page", background = "linen", }) {
+    const classes = cx("bc-hero", `bc-hero--${variant}`, `bc-hero--bg-${background}`, className);
+    return (_jsx("div", { className: classes, style: style, children: _jsx("div", { className: "bc-hero__inner", children: children }) }));
+}
+export function HeroTitle({ children, className, as: Component = "h1" }) {
+    return _jsx(Component, { className: cx("bc-hero__title", className), children: children });
+}
+export function HeroSubtitle({ children, className }) {
+    return _jsx("p", { className: cx("bc-hero__subtitle", className), children: children });
+}
+export function HeroActions({ children, className }) {
+    return _jsx("div", { className: cx("bc-hero__actions", className), children: children });
+}
+export default Hero;

package/dist/content/Hero/Hero.scss

@@ -0,0 +1,150 @@
+@use "../../styles/tokens" as *;
+@use "../../styles/typography" as *;
+
+/*******************************************************************************
+ * Hero Component
+ ******************************************************************************/
+
+.bc-hero {
+  width: 100%;
+  padding: $space-8 0;
+
+  @include md-up {
+    padding: $space-10 0;
+  }
+
+  /***************************************************************************
+   * Background Variants
+   ***************************************************************************/
+
+  &--bg-white {
+    background-color: $white;
+    color: $text-primary;
+  }
+
+  &--bg-linen {
+    background-color: $linen;
+    color: $text-primary;
+  }
+
+  &--bg-charcoal {
+    background-color: $charcoal;
+    color: $text-inverse;
+
+    .bc-hero__subtitle {
+      color: rgba($white, 0.8);
+    }
+  }
+
+  /***************************************************************************
+   * Inner Container
+   ***************************************************************************/
+
+  &__inner {
+    max-width: 1024px;
+    margin: 0 auto;
+    padding: 0 $space-3;
+
+    @include md-up {
+      padding: 0 $space-5;
+    }
+  }
+
+  /***************************************************************************
+   * Variant: Home (large, centered)
+   ***************************************************************************/
+
+  &--home {
+    padding: $space-10 0;
+
+    @include md-up {
+      padding: $space-16 0;
+    }
+
+    .bc-hero__inner {
+      text-align: center;
+      max-width: 900px;
+    }
+
+    .bc-hero__title {
+      @include display-1;
+      margin: 0 0 $space-3;
+    }
+
+    .bc-hero__subtitle {
+      @include body-lg;
+      max-width: 640px;
+      margin: 0 auto $space-4;
+    }
+  }
+
+  /***************************************************************************
+   * Variant: Page (standard page header)
+   ***************************************************************************/
+
+  &--page {
+    padding: $space-6 0;
+
+    @include md-up {
+      padding: $space-8 0;
+    }
+
+    .bc-hero__title {
+      @include display-2;
+      margin: 0 0 $space-2;
+    }
+
+    .bc-hero__subtitle {
+      @include body-1;
+      color: $text-secondary;
+      margin: 0;
+      max-width: 640px;
+    }
+  }
+
+  /***************************************************************************
+   * Variant: Centered
+   ***************************************************************************/
+
+  &--centered {
+    .bc-hero__inner {
+      text-align: center;
+    }
+
+    .bc-hero__title {
+      @include display-2;
+      margin: 0 0 $space-2;
+    }
+
+    .bc-hero__subtitle {
+      @include body-1;
+      color: $text-secondary;
+      margin: 0 auto;
+      max-width: 640px;
+    }
+  }
+
+  /***************************************************************************
+   * Subcomponents
+   ***************************************************************************/
+
+  &__title {
+    color: inherit;
+  }
+
+  &__subtitle {
+    color: $text-secondary;
+  }
+
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $space-2;
+    margin-top: $space-4;
+
+    .bc-hero--home &,
+    .bc-hero--centered & {
+      justify-content: center;
+    }
+  }
+}

package/dist/content/Hero/index.d.ts

@@ -0,0 +1,3 @@
+export { Hero, HeroTitle, HeroSubtitle, HeroActions, type HeroProps, type HeroVariant, type HeroBackground, type HeroTitleProps, type HeroSubtitleProps, type HeroActionsProps, } from "./Hero.js";
+export { default } from "./Hero.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/content/Hero/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/content/Hero/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,WAAW,EACX,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACxB,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA"}

package/dist/content/Hero/index.js

@@ -0,0 +1,2 @@
+export { Hero, HeroTitle, HeroSubtitle, HeroActions, } from "./Hero.js";
+export { default } from "./Hero.js";

package/dist/content/StatBlock/StatBlock.d.ts

@@ -0,0 +1,15 @@
+export type StatBlockSize = "sm" | "md" | "lg";
+export type StatBlockTrend = "up" | "down" | "neutral";
+export interface StatBlockProps {
+    value: string | number;
+    label: string;
+    description?: string;
+    change?: string;
+    trend?: StatBlockTrend;
+    size?: StatBlockSize;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function StatBlock({ value, label, description, change, trend, size, className, style, }: StatBlockProps): import("react/jsx-runtime").JSX.Element;
+export default StatBlock;
+//# sourceMappingURL=StatBlock.d.ts.map

package/dist/content/StatBlock/StatBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatBlock.d.ts","sourceRoot":"","sources":["../../../src/content/StatBlock/StatBlock.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAC9C,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;AAEtD,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,cAAc,CAAA;IACtB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC9B;AAED,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,KAAK,EACL,WAAW,EACX,MAAM,EACN,KAAK,EACL,IAAW,EACX,SAAS,EACT,KAAK,GACR,EAAE,cAAc,2CAwBhB;AAED,eAAe,SAAS,CAAA"}

package/dist/content/StatBlock/StatBlock.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from "classnames";
+export function StatBlock({ value, label, description, change, trend, size = "md", className, style, }) {
+    const classes = cx("bc-stat-block", `bc-stat-block--${size}`, className);
+    return (_jsxs("div", { className: classes, style: style, children: [_jsx("span", { className: "bc-stat-block__value", children: value }), _jsx("span", { className: "bc-stat-block__label", children: label }), description && (_jsx("span", { className: "bc-stat-block__description", children: description })), change && (_jsxs("span", { className: cx("bc-stat-block__change", {
+                    "bc-stat-block__change--up": trend === "up",
+                    "bc-stat-block__change--down": trend === "down",
+                }), children: [trend === "up" && "↑ ", trend === "down" && "↓ ", change] }))] }));
+}
+export default StatBlock;