@fanvue/ui 3.19.1 → 3.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/charts.d.ts +11 -2
- package/dist/cjs/components/ButtonStack/ButtonStack.cjs +44 -0
- package/dist/cjs/components/ButtonStack/ButtonStack.cjs.map +1 -0
- package/dist/cjs/components/Card/Card.cjs +45 -11
- package/dist/cjs/components/Card/Card.cjs.map +1 -1
- package/dist/cjs/components/Chart/ChartCard.cjs +6 -4
- package/dist/cjs/components/Chart/ChartCard.cjs.map +1 -1
- package/dist/cjs/components/Chart/ChartSeriesToggle.cjs +13 -26
- package/dist/cjs/components/Chart/ChartSeriesToggle.cjs.map +1 -1
- package/dist/cjs/components/CriticalBanner/CriticalBanner.cjs +109 -0
- package/dist/cjs/components/CriticalBanner/CriticalBanner.cjs.map +1 -0
- package/dist/cjs/components/Icons/GifIcon.cjs +12 -12
- package/dist/cjs/components/Icons/GifIcon.cjs.map +1 -1
- package/dist/cjs/index.cjs +4 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/components/ButtonStack/ButtonStack.mjs +27 -0
- package/dist/components/ButtonStack/ButtonStack.mjs.map +1 -0
- package/dist/components/Card/Card.mjs +45 -11
- package/dist/components/Card/Card.mjs.map +1 -1
- package/dist/components/Chart/ChartCard.mjs +6 -4
- package/dist/components/Chart/ChartCard.mjs.map +1 -1
- package/dist/components/Chart/ChartSeriesToggle.mjs +14 -27
- package/dist/components/Chart/ChartSeriesToggle.mjs.map +1 -1
- package/dist/components/CriticalBanner/CriticalBanner.mjs +92 -0
- package/dist/components/CriticalBanner/CriticalBanner.mjs.map +1 -0
- package/dist/components/Icons/GifIcon.mjs +12 -12
- package/dist/components/Icons/GifIcon.mjs.map +1 -1
- package/dist/index.d.ts +120 -6
- package/dist/index.mjs +4 -0
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -5
package/dist/charts.d.ts
CHANGED
|
@@ -7,11 +7,17 @@ import { ResponsiveContainer } from 'recharts';
|
|
|
7
7
|
import { Tooltip } from 'recharts';
|
|
8
8
|
import { ValueType } from 'recharts/types/component/DefaultTooltipContent';
|
|
9
9
|
|
|
10
|
+
/** Visual hierarchy of the card. Primary is for prominent, content-carrying cards; secondary for supporting cards within denser layouts. */
|
|
11
|
+
export declare type CardHierarchy = "primary" | "secondary";
|
|
12
|
+
|
|
10
13
|
/**
|
|
11
14
|
* Wraps any chart with a structured header containing title, subtitle,
|
|
12
15
|
* optional trend chip, date range label, info tooltip, and a loading
|
|
13
16
|
* skeleton state.
|
|
14
17
|
*
|
|
18
|
+
* The surface treatment comes from the underlying {@link Card} and is driven by
|
|
19
|
+
* the `hierarchy` prop.
|
|
20
|
+
*
|
|
15
21
|
* @example
|
|
16
22
|
* ```tsx
|
|
17
23
|
* <ChartCard
|
|
@@ -29,6 +35,8 @@ export declare const ChartCard: React_2.ForwardRefExoticComponent<ChartCardProps
|
|
|
29
35
|
|
|
30
36
|
/** Props for {@link ChartCard}. */
|
|
31
37
|
export declare interface ChartCardProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "title"> {
|
|
38
|
+
/** Surface treatment of the underlying {@link Card}. @default "primary" */
|
|
39
|
+
hierarchy?: CardHierarchy;
|
|
32
40
|
/** Card title text. Pass translated string for i18n. */
|
|
33
41
|
title: React_2.ReactNode;
|
|
34
42
|
/** Large subtitle value (e.g. formatted price or count). */
|
|
@@ -238,8 +246,9 @@ export declare interface ChartPieLegendProps extends React_2.HTMLAttributes<HTML
|
|
|
238
246
|
}
|
|
239
247
|
|
|
240
248
|
/**
|
|
241
|
-
* Renders a grid of toggleable
|
|
242
|
-
* on a multi-series chart. Each toggle shows a
|
|
249
|
+
* Renders a grid of toggleable {@link Chip}s that control which series are
|
|
250
|
+
* visible on a multi-series chart. Each toggle shows a series colour dot and a
|
|
251
|
+
* label, and exposes its state through `aria-pressed`.
|
|
243
252
|
*
|
|
244
253
|
* @example
|
|
245
254
|
* ```tsx
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
5
|
+
const React = require("react");
|
|
6
|
+
const cn = require("../../utils/cn.cjs");
|
|
7
|
+
function _interopNamespaceDefault(e) {
|
|
8
|
+
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
9
|
+
if (e) {
|
|
10
|
+
for (const k in e) {
|
|
11
|
+
if (k !== "default") {
|
|
12
|
+
const d = Object.getOwnPropertyDescriptor(e, k);
|
|
13
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
get: () => e[k]
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
n.default = e;
|
|
21
|
+
return Object.freeze(n);
|
|
22
|
+
}
|
|
23
|
+
const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
|
|
24
|
+
const ButtonStack = React__namespace.forwardRef(
|
|
25
|
+
({ direction = "horizontal", className, children, ...props }, ref) => {
|
|
26
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
27
|
+
"div",
|
|
28
|
+
{
|
|
29
|
+
ref,
|
|
30
|
+
className: cn.cn(
|
|
31
|
+
"flex gap-2",
|
|
32
|
+
direction === "horizontal" && "flex-row [&>*]:min-w-0 [&>*]:flex-1",
|
|
33
|
+
direction === "vertical" && "flex-col [&>*]:w-full",
|
|
34
|
+
className
|
|
35
|
+
),
|
|
36
|
+
...props,
|
|
37
|
+
children
|
|
38
|
+
}
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
);
|
|
42
|
+
ButtonStack.displayName = "ButtonStack";
|
|
43
|
+
exports.ButtonStack = ButtonStack;
|
|
44
|
+
//# sourceMappingURL=ButtonStack.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonStack.cjs","sources":["../../../../src/components/ButtonStack/ButtonStack.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Layout orientation of the buttons within a {@link ButtonStack}. */\nexport type ButtonStackDirection = \"horizontal\" | \"vertical\";\n\nexport interface ButtonStackProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Layout orientation. `horizontal` places buttons side by side with equal\n * widths for primary + secondary action pairs; `vertical` stacks them\n * full-width for mobile screens and narrow panels.\n * @default \"horizontal\"\n */\n direction?: ButtonStackDirection;\n /** Buttons to arrange — typically two {@link Button} elements. */\n children: React.ReactNode;\n}\n\n/**\n * A layout helper that arranges action buttons either side by side\n * (`horizontal`) or stacked (`vertical`). Compose it with {@link Button}\n * children rather than reimplementing button styles.\n *\n * In `horizontal` mode each child stretches to an equal width; in `vertical`\n * mode each child spans the full width of the container. Buttons keep their\n * own sizing, so pass a matching `size` to each child for consistent heights.\n *\n * @example\n * ```tsx\n * <ButtonStack direction=\"horizontal\">\n * <Button variant=\"outline\">Cancel</Button>\n * <Button variant=\"primary\">Confirm</Button>\n * </ButtonStack>\n * ```\n */\nexport const ButtonStack = React.forwardRef<HTMLDivElement, ButtonStackProps>(\n ({ direction = \"horizontal\", className, children, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn(\n \"flex gap-2\",\n direction === \"horizontal\" && \"flex-row [&>*]:min-w-0 [&>*]:flex-1\",\n direction === \"vertical\" && \"flex-col [&>*]:w-full\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nButtonStack.displayName = \"ButtonStack\";\n"],"names":["React","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmCO,MAAM,cAAcA,iBAAM;AAAA,EAC/B,CAAC,EAAE,YAAY,cAAc,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AACpE,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,cAAc,gBAAgB;AAAA,UAC9B,cAAc,cAAc;AAAA,UAC5B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,YAAY,cAAc;;"}
|
|
@@ -21,35 +21,62 @@ function _interopNamespaceDefault(e) {
|
|
|
21
21
|
return Object.freeze(n);
|
|
22
22
|
}
|
|
23
23
|
const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
|
|
24
|
-
const
|
|
24
|
+
const CardContext = React__namespace.createContext({
|
|
25
|
+
hierarchy: "primary",
|
|
26
|
+
type: "default"
|
|
27
|
+
});
|
|
28
|
+
const useCardContext = () => React__namespace.useContext(CardContext);
|
|
29
|
+
const LEGACY_VARIANT_CLASSES = {
|
|
25
30
|
outlined: "border border-neutral-alphas-200 bg-surface-primary shadow-sm",
|
|
26
31
|
elevated: "border border-neutral-alphas-200 bg-surface-primary shadow-md",
|
|
27
32
|
filled: "bg-surface-secondary",
|
|
28
33
|
ghost: "bg-transparent"
|
|
29
34
|
};
|
|
35
|
+
const HIERARCHY_CLASSES = {
|
|
36
|
+
primary: "rounded-lg border border-border-primary bg-surface-primary",
|
|
37
|
+
secondary: "rounded-md border border-border-strong bg-surface-secondary shadow-sm"
|
|
38
|
+
};
|
|
39
|
+
const INTERACTIVE_CLASSES = "isolate cursor-pointer after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:bg-content-primary after:opacity-0 after:transition-opacity after:content-[''] hover:after:opacity-5";
|
|
30
40
|
const Card = React__namespace.forwardRef(
|
|
31
|
-
({
|
|
32
|
-
|
|
41
|
+
({
|
|
42
|
+
className,
|
|
43
|
+
hierarchy = "primary",
|
|
44
|
+
type = "default",
|
|
45
|
+
interactive = false,
|
|
46
|
+
variant,
|
|
47
|
+
fullWidth = true,
|
|
48
|
+
noPadding = false,
|
|
49
|
+
children,
|
|
50
|
+
...props
|
|
51
|
+
}, ref) => {
|
|
52
|
+
const isLegacy = variant !== void 0;
|
|
53
|
+
const padding = noPadding ? void 0 : isLegacy ? "p-4" : hierarchy === "secondary" ? "p-4" : "p-6";
|
|
54
|
+
const contextValue = React__namespace.useMemo(
|
|
55
|
+
() => ({ hierarchy, type }),
|
|
56
|
+
[hierarchy, type]
|
|
57
|
+
);
|
|
58
|
+
return /* @__PURE__ */ jsxRuntime.jsx(CardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
33
59
|
"div",
|
|
34
60
|
{
|
|
35
61
|
ref,
|
|
36
62
|
className: cn.cn(
|
|
37
|
-
"flex flex-col overflow-hidden
|
|
38
|
-
|
|
63
|
+
"relative flex flex-col overflow-hidden",
|
|
64
|
+
isLegacy ? cn.cn("rounded-md", LEGACY_VARIANT_CLASSES[variant]) : HIERARCHY_CLASSES[hierarchy],
|
|
65
|
+
padding,
|
|
39
66
|
fullWidth && "w-full",
|
|
40
|
-
|
|
67
|
+
interactive && INTERACTIVE_CLASSES,
|
|
41
68
|
className
|
|
42
69
|
),
|
|
43
70
|
...props,
|
|
44
71
|
children
|
|
45
72
|
}
|
|
46
|
-
);
|
|
73
|
+
) });
|
|
47
74
|
}
|
|
48
75
|
);
|
|
49
76
|
Card.displayName = "Card";
|
|
50
77
|
const CardHeader = React__namespace.forwardRef(
|
|
51
78
|
({ className, action, children, ...props }, ref) => {
|
|
52
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn.cn("flex items-
|
|
79
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn.cn("flex min-h-8 items-center gap-2", className), ...props, children: [
|
|
53
80
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children }),
|
|
54
81
|
action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: action })
|
|
55
82
|
] });
|
|
@@ -58,11 +85,16 @@ const CardHeader = React__namespace.forwardRef(
|
|
|
58
85
|
CardHeader.displayName = "CardHeader";
|
|
59
86
|
const CardTitle = React__namespace.forwardRef(
|
|
60
87
|
({ className, children, ...props }, ref) => {
|
|
88
|
+
const { hierarchy } = useCardContext();
|
|
61
89
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
62
90
|
"h3",
|
|
63
91
|
{
|
|
64
92
|
ref,
|
|
65
|
-
className: cn.cn(
|
|
93
|
+
className: cn.cn(
|
|
94
|
+
hierarchy === "secondary" ? "typography-body-small-14px-regular" : "typography-header-heading-xs",
|
|
95
|
+
"text-content-primary",
|
|
96
|
+
className
|
|
97
|
+
),
|
|
66
98
|
...props,
|
|
67
99
|
children
|
|
68
100
|
}
|
|
@@ -86,13 +118,15 @@ const CardDescription = React__namespace.forwardRef(
|
|
|
86
118
|
CardDescription.displayName = "CardDescription";
|
|
87
119
|
const CardContent = React__namespace.forwardRef(
|
|
88
120
|
({ className, children, ...props }, ref) => {
|
|
89
|
-
|
|
121
|
+
const { type } = useCardContext();
|
|
122
|
+
const padding = type === "container" ? void 0 : type === "header-only" ? "pt-6" : "py-6";
|
|
123
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn.cn("flex-1", padding, className), ...props, children });
|
|
90
124
|
}
|
|
91
125
|
);
|
|
92
126
|
CardContent.displayName = "CardContent";
|
|
93
127
|
const CardFooter = React__namespace.forwardRef(
|
|
94
128
|
({ className, children, ...props }, ref) => {
|
|
95
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn.cn("flex items-center gap-
|
|
129
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn.cn("flex w-full items-center gap-2", className), ...props, children });
|
|
96
130
|
}
|
|
97
131
|
);
|
|
98
132
|
CardFooter.displayName = "CardFooter";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.cjs","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Visual style variant of the card. */\nexport type CardVariant = \"outlined\" | \"elevated\" | \"filled\" | \"ghost\";\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Visual style variant of the card. @default \"outlined\" */\n variant?: CardVariant;\n /** When `true`, the card will take the full width of its container. @default true */\n fullWidth?: boolean;\n /** When `true`, removes all internal padding. @default false */\n noPadding?: boolean;\n}\n\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Icon element displayed at the trailing end of the header. */\n action?: React.ReactNode;\n}\n\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nexport interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nexport interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst VARIANT_CLASSES: Record<CardVariant, string> = {\n outlined: \"border border-neutral-alphas-200 bg-surface-primary shadow-sm\",\n elevated: \"border border-neutral-alphas-200 bg-surface-primary shadow-md\",\n filled: \"bg-surface-secondary\",\n ghost: \"bg-transparent\",\n};\n\n/**\n * A composable card component with multiple visual variants. Use with\n * {@link CardHeader}, {@link CardTitle}, {@link CardDescription},\n * {@link CardContent}, and {@link CardFooter} for structured layouts.\n *\n * @example\n * ```tsx\n * <Card variant=\"outlined\">\n * <CardHeader action={<HomeIcon className=\"size-5\" />}>\n * <CardTitle>Card title</CardTitle>\n * <CardDescription>Card description text</CardDescription>\n * </CardHeader>\n * <CardContent>Content goes here</CardContent>\n * <CardFooter>\n * <Button variant=\"secondary\">Label</Button>\n * <Button variant=\"primary\">Label</Button>\n * </CardFooter>\n * </Card>\n * ```\n */\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n (\n { className, variant = \"outlined\", fullWidth = true, noPadding = false, children, ...props },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n className={cn(\n \"flex flex-col overflow-hidden rounded-md\",\n !noPadding && \"p-4\",\n fullWidth && \"w-full\",\n VARIANT_CLASSES[variant],\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\nCard.displayName = \"Card\";\n\n/**\n * Header section of a {@link Card}. Renders a flex row with text content\n * on the left and an optional trailing action element (e.g. icon) on the right.\n */\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n ({ className, action, children, ...props }, ref) => {\n return (\n <div ref={ref} className={cn(\"flex items-start gap-3\", className)} {...props}>\n <div className=\"min-w-0 flex-1\">{children}</div>\n {action && <div className=\"shrink-0\">{action}</div>}\n </div>\n );\n },\n);\nCardHeader.displayName = \"CardHeader\";\n\n/** Title element rendered inside a {@link CardHeader}. */\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <h3\n ref={ref}\n className={cn(\"typography-body-default-16px-semibold text-content-primary\", className)}\n {...props}\n >\n {children}\n </h3>\n );\n },\n);\nCardTitle.displayName = \"CardTitle\";\n\n/** Description text rendered below the {@link CardTitle} inside a {@link CardHeader}. */\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <p\n ref={ref}\n className={cn(\"typography-description-12px-regular text-content-secondary\", className)}\n {...props}\n >\n {children}\n </p>\n );\n },\n);\nCardDescription.displayName = \"CardDescription\";\n\n/** Flexible content area of a {@link Card}. Adds vertical padding between header and footer. */\nexport const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <div ref={ref} className={cn(\"flex-1 py-4\", className)} {...props}>\n {children}\n </div>\n );\n },\n);\nCardContent.displayName = \"CardContent\";\n\n/** Footer section of a {@link Card}. Renders children in a horizontal row with a gap. */\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <div ref={ref} className={cn(\"flex items-center gap-3\", className)} {...props}>\n {children}\n </div>\n );\n },\n);\nCardFooter.displayName = \"CardFooter\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,kBAA+C;AAAA,EACnD,UAAU;AAAA,EACV,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AACT;AAsBO,MAAM,OAAOA,iBAAM;AAAA,EACxB,CACE,EAAE,WAAW,UAAU,YAAY,YAAY,MAAM,YAAY,OAAO,UAAU,GAAG,MAAA,GACrF,QACG;AACH,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,CAAC,aAAa;AAAA,UACd,aAAa;AAAA,UACb,gBAAgB,OAAO;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,KAAK,cAAc;AAMZ,MAAM,aAAaF,iBAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,QAAQ,UAAU,GAAG,MAAA,GAAS,QAAQ;AAClD,WACEG,gCAAC,SAAI,KAAU,WAAWD,MAAG,0BAA0B,SAAS,GAAI,GAAG,OACrE,UAAA;AAAA,MAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,kBAAkB,SAAA,CAAS;AAAA,MACzC,UAAUA,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,UAAA,OAAA,CAAO;AAAA,IAAA,GAC/C;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAGlB,MAAM,YAAYD,iBAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,8DAA8D,SAAS;AAAA,QACpF,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,UAAU,cAAc;AAGjB,MAAM,kBAAkBF,iBAAM;AAAA,EACnC,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,8DAA8D,SAAS;AAAA,QACpF,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,gBAAgB,cAAc;AAGvB,MAAM,cAAcF,iBAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,+BAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,eAAe,SAAS,GAAI,GAAG,OACzD,SAAA,CACH;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAGnB,MAAM,aAAaF,iBAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,+BAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,2BAA2B,SAAS,GAAI,GAAG,OACrE,SAAA,CACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"Card.cjs","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Visual hierarchy of the card. Primary is for prominent, content-carrying cards; secondary for supporting cards within denser layouts. */\nexport type CardHierarchy = \"primary\" | \"secondary\";\n\n/** Structural type of the card. `default` has header, content and footer; `header-only` drops the footer; `container` is a bare surface. */\nexport type CardType = \"default\" | \"header-only\" | \"container\";\n\n/**\n * Legacy visual style variant.\n * @deprecated Use {@link CardHierarchy} via the `hierarchy` prop instead. Retained for backwards compatibility.\n */\nexport type CardVariant = \"outlined\" | \"elevated\" | \"filled\" | \"ghost\";\n\ninterface CardContextValue {\n hierarchy: CardHierarchy;\n type: CardType;\n}\n\nconst CardContext = React.createContext<CardContextValue>({\n hierarchy: \"primary\",\n type: \"default\",\n});\n\nconst useCardContext = () => React.useContext(CardContext);\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Visual hierarchy of the card. @default \"primary\" */\n hierarchy?: CardHierarchy;\n /** Structural type of the card. @default \"default\" */\n type?: CardType;\n /** When `true`, applies the hover treatment for clickable cards. @default false */\n interactive?: boolean;\n /**\n * Legacy visual style variant.\n * @deprecated Use `hierarchy` instead. When set, the card keeps its legacy V1 appearance for backwards compatibility.\n */\n variant?: CardVariant;\n /** When `true`, the card will take the full width of its container. @default true */\n fullWidth?: boolean;\n /** When `true`, removes all internal padding. @default false */\n noPadding?: boolean;\n}\n\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Icon element displayed at the trailing end of the header. */\n action?: React.ReactNode;\n}\n\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nexport interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nexport interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst LEGACY_VARIANT_CLASSES: Record<CardVariant, string> = {\n outlined: \"border border-neutral-alphas-200 bg-surface-primary shadow-sm\",\n elevated: \"border border-neutral-alphas-200 bg-surface-primary shadow-md\",\n filled: \"bg-surface-secondary\",\n ghost: \"bg-transparent\",\n};\n\nconst HIERARCHY_CLASSES: Record<CardHierarchy, string> = {\n primary: \"rounded-lg border border-border-primary bg-surface-primary\",\n secondary: \"rounded-md border border-border-strong bg-surface-secondary shadow-sm\",\n};\n\nconst INTERACTIVE_CLASSES =\n \"isolate cursor-pointer after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:bg-content-primary after:opacity-0 after:transition-opacity after:content-[''] hover:after:opacity-5\";\n\n/**\n * A composable card component built on the V2 design system. Compose it with\n * {@link CardHeader}, {@link CardTitle}, {@link CardDescription},\n * {@link CardContent}, and {@link CardFooter} for structured layouts.\n *\n * The `hierarchy` prop drives the surface treatment (Primary vs Secondary) and\n * the `type` prop drives the internal spacing (Default / Header Only / Container).\n *\n * @example\n * ```tsx\n * <Card hierarchy=\"primary\">\n * <CardHeader action={<HomeIcon className=\"size-5\" />}>\n * <CardTitle>Card title</CardTitle>\n * <CardDescription>Card description text</CardDescription>\n * </CardHeader>\n * <CardContent>Content goes here</CardContent>\n * <CardFooter>\n * <Button variant=\"secondary\">Label</Button>\n * <Button variant=\"primary\">Label</Button>\n * </CardFooter>\n * </Card>\n * ```\n */\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n (\n {\n className,\n hierarchy = \"primary\",\n type = \"default\",\n interactive = false,\n variant,\n fullWidth = true,\n noPadding = false,\n children,\n ...props\n },\n ref,\n ) => {\n const isLegacy = variant !== undefined;\n const padding = noPadding\n ? undefined\n : isLegacy\n ? \"p-4\"\n : hierarchy === \"secondary\"\n ? \"p-4\"\n : \"p-6\";\n\n const contextValue = React.useMemo<CardContextValue>(\n () => ({ hierarchy, type }),\n [hierarchy, type],\n );\n\n return (\n <CardContext.Provider value={contextValue}>\n <div\n ref={ref}\n className={cn(\n \"relative flex flex-col overflow-hidden\",\n isLegacy\n ? cn(\"rounded-md\", LEGACY_VARIANT_CLASSES[variant])\n : HIERARCHY_CLASSES[hierarchy],\n padding,\n fullWidth && \"w-full\",\n interactive && INTERACTIVE_CLASSES,\n className,\n )}\n {...props}\n >\n {children}\n </div>\n </CardContext.Provider>\n );\n },\n);\nCard.displayName = \"Card\";\n\n/**\n * Header section of a {@link Card}. Renders a flex row with text content\n * on the left and an optional trailing action element (e.g. icon) on the right.\n */\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n ({ className, action, children, ...props }, ref) => {\n return (\n <div ref={ref} className={cn(\"flex min-h-8 items-center gap-2\", className)} {...props}>\n <div className=\"min-w-0 flex-1\">{children}</div>\n {action && <div className=\"shrink-0\">{action}</div>}\n </div>\n );\n },\n);\nCardHeader.displayName = \"CardHeader\";\n\n/** Title element rendered inside a {@link CardHeader}. Adapts its type scale to the card `hierarchy`. */\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(\n ({ className, children, ...props }, ref) => {\n const { hierarchy } = useCardContext();\n return (\n <h3\n ref={ref}\n className={cn(\n hierarchy === \"secondary\"\n ? \"typography-body-small-14px-regular\"\n : \"typography-header-heading-xs\",\n \"text-content-primary\",\n className,\n )}\n {...props}\n >\n {children}\n </h3>\n );\n },\n);\nCardTitle.displayName = \"CardTitle\";\n\n/** Description text rendered below the {@link CardTitle} inside a {@link CardHeader}. */\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <p\n ref={ref}\n className={cn(\"typography-description-12px-regular text-content-secondary\", className)}\n {...props}\n >\n {children}\n </p>\n );\n },\n);\nCardDescription.displayName = \"CardDescription\";\n\n/**\n * Flexible content area of a {@link Card}. Its vertical padding follows the card\n * `type`: `default` pads top and bottom, `header-only` pads only the top, and\n * `container` removes the built-in padding entirely.\n */\nexport const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n ({ className, children, ...props }, ref) => {\n const { type } = useCardContext();\n const padding = type === \"container\" ? undefined : type === \"header-only\" ? \"pt-6\" : \"py-6\";\n return (\n <div ref={ref} className={cn(\"flex-1\", padding, className)} {...props}>\n {children}\n </div>\n );\n },\n);\nCardContent.displayName = \"CardContent\";\n\n/** Footer section of a {@link Card}. Renders children in a horizontal row with a gap. */\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <div ref={ref} className={cn(\"flex w-full items-center gap-2\", className)} {...props}>\n {children}\n </div>\n );\n },\n);\nCardFooter.displayName = \"CardFooter\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,cAAcA,iBAAM,cAAgC;AAAA,EACxD,WAAW;AAAA,EACX,MAAM;AACR,CAAC;AAED,MAAM,iBAAiB,MAAMA,iBAAM,WAAW,WAAW;AAiCzD,MAAM,yBAAsD;AAAA,EAC1D,UAAU;AAAA,EACV,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,MAAM,oBAAmD;AAAA,EACvD,SAAS;AAAA,EACT,WAAW;AACb;AAEA,MAAM,sBACJ;AAyBK,MAAM,OAAOA,iBAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,cAAc;AAAA,IACd;AAAA,IACA,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,WAAW,YAAY;AAC7B,UAAM,UAAU,YACZ,SACA,WACE,QACA,cAAc,cACZ,QACA;AAER,UAAM,eAAeA,iBAAM;AAAA,MACzB,OAAO,EAAE,WAAW;MACpB,CAAC,WAAW,IAAI;AAAA,IAAA;AAGlB,WACEC,2BAAAA,IAAC,YAAY,UAAZ,EAAqB,OAAO,cAC3B,UAAAA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,WACIA,GAAAA,GAAG,cAAc,uBAAuB,OAAO,CAAC,IAChD,kBAAkB,SAAS;AAAA,UAC/B;AAAA,UACA,aAAa;AAAA,UACb,eAAe;AAAA,UACf;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAMZ,MAAM,aAAaF,iBAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,QAAQ,UAAU,GAAG,MAAA,GAAS,QAAQ;AAClD,WACEG,gCAAC,SAAI,KAAU,WAAWD,MAAG,mCAAmC,SAAS,GAAI,GAAG,OAC9E,UAAA;AAAA,MAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,kBAAkB,SAAA,CAAS;AAAA,MACzC,UAAUA,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,UAAA,OAAA,CAAO;AAAA,IAAA,GAC/C;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAGlB,MAAM,YAAYD,iBAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,UAAM,EAAE,UAAA,IAAc,eAAA;AACtB,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT,cAAc,cACV,uCACA;AAAA,UACJ;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,UAAU,cAAc;AAGjB,MAAM,kBAAkBF,iBAAM;AAAA,EACnC,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,8DAA8D,SAAS;AAAA,QACpF,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,gBAAgB,cAAc;AAOvB,MAAM,cAAcF,iBAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,UAAM,EAAE,KAAA,IAAS,eAAA;AACjB,UAAM,UAAU,SAAS,cAAc,SAAY,SAAS,gBAAgB,SAAS;AACrF,WACEC,2BAAAA,IAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,UAAU,SAAS,SAAS,GAAI,GAAG,OAC7D,SAAA,CACH;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAGnB,MAAM,aAAaF,iBAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,+BAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,kCAAkC,SAAS,GAAI,GAAG,OAC5E,SAAA,CACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;;;;;;;"}
|
|
@@ -33,6 +33,7 @@ const TREND_CLASSES = {
|
|
|
33
33
|
const ChartCard = React__namespace.forwardRef(
|
|
34
34
|
({
|
|
35
35
|
className,
|
|
36
|
+
hierarchy = "primary",
|
|
36
37
|
title,
|
|
37
38
|
subtitle,
|
|
38
39
|
tooltip,
|
|
@@ -43,7 +44,7 @@ const ChartCard = React__namespace.forwardRef(
|
|
|
43
44
|
children,
|
|
44
45
|
...props
|
|
45
46
|
}, ref) => {
|
|
46
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Card.Card, { ref,
|
|
47
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Card.Card, { ref, hierarchy, noPadding: true, className, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 p-4", children: [
|
|
47
48
|
loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
48
49
|
/* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { animation: "wave", variant: "rounded", className: "h-4 w-32" }),
|
|
49
50
|
/* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { animation: "wave", variant: "rounded", className: "h-7 w-44" }),
|
|
@@ -56,9 +57,10 @@ const ChartCard = React__namespace.forwardRef(
|
|
|
56
57
|
IconButton.IconButton,
|
|
57
58
|
{
|
|
58
59
|
variant: "tertiary",
|
|
59
|
-
size: "
|
|
60
|
+
size: "32",
|
|
60
61
|
"aria-label": tooltipAriaLabel,
|
|
61
|
-
|
|
62
|
+
className: "text-content-tertiary hover:text-content-primary focus-visible:text-content-primary active:text-content-primary",
|
|
63
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(InfoCircleIcon.InfoCircleIcon, {})
|
|
62
64
|
}
|
|
63
65
|
) }),
|
|
64
66
|
/* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipContent, { children: tooltip })
|
|
@@ -79,7 +81,7 @@ const ChartCard = React__namespace.forwardRef(
|
|
|
79
81
|
] }),
|
|
80
82
|
dateInfo && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-description-12px-regular text-content-tertiary", children: dateInfo })
|
|
81
83
|
] }),
|
|
82
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto", children })
|
|
84
|
+
children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto", children })
|
|
83
85
|
] }) });
|
|
84
86
|
}
|
|
85
87
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartCard.cjs","sources":["../../../../src/components/Chart/ChartCard.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Card } from \"../Card/Card\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { InfoCircleIcon } from \"../Icons/InfoCircleIcon\";\nimport { Skeleton } from \"../Skeleton/Skeleton\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../Tooltip/Tooltip\";\n\n/** Props for {@link ChartCard}. */\nexport interface ChartCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n /** Card title text. Pass translated string for i18n. */\n title: React.ReactNode;\n /** Large subtitle value (e.g. formatted price or count). */\n subtitle?: React.ReactNode;\n /** Tooltip text shown next to the title. Pass translated string for i18n. */\n tooltip?: React.ReactNode;\n /** Accessible label for the info tooltip trigger. Override for i18n. @default \"More info\" */\n tooltipAriaLabel?: string;\n /** Date range or period label shown below the subtitle. */\n dateInfo?: React.ReactNode;\n /** Trend indicator chip config. Only rendered when {@link subtitle} is also provided. */\n trendChip?: {\n /** Display label (e.g. \"12.5%\"). */\n label: React.ReactNode;\n /** Whether the trend is positive (green) or negative (red). */\n trend: \"positive\" | \"negative\";\n };\n /** Show loading skeleton instead of content. @default false */\n loading?: boolean;\n /** Chart content rendered below the header. */\n children?: React.ReactNode;\n}\n\nconst TREND_CLASSES: Record<\"positive\" | \"negative\", string> = {\n positive: \"bg-success-surface text-success-content\",\n negative: \"bg-error-surface text-error-content\",\n};\n\n/**\n * Wraps any chart with a structured header containing title, subtitle,\n * optional trend chip, date range label, info tooltip, and a loading\n * skeleton state.\n *\n * @example\n * ```tsx\n * <ChartCard\n * title=\"Revenue\"\n * subtitle=\"$4,523\"\n * trendChip={{ label: \"+12.5%\", trend: \"positive\" }}\n * dateInfo=\"Jan 1 – Mar 17\"\n * tooltip=\"Total revenue for the selected period.\"\n * >\n * <MyLineChart />\n * </ChartCard>\n * ```\n */\nexport const ChartCard = React.forwardRef<HTMLDivElement, ChartCardProps>(\n (\n {\n className,\n title,\n subtitle,\n tooltip,\n tooltipAriaLabel = \"More info\",\n dateInfo,\n trendChip,\n loading = false,\n children,\n ...props\n },\n ref,\n ) => {\n return (\n <Card ref={ref}
|
|
1
|
+
{"version":3,"file":"ChartCard.cjs","sources":["../../../../src/components/Chart/ChartCard.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Card, type CardHierarchy } from \"../Card/Card\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { InfoCircleIcon } from \"../Icons/InfoCircleIcon\";\nimport { Skeleton } from \"../Skeleton/Skeleton\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../Tooltip/Tooltip\";\n\n/** Props for {@link ChartCard}. */\nexport interface ChartCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n /** Surface treatment of the underlying {@link Card}. @default \"primary\" */\n hierarchy?: CardHierarchy;\n /** Card title text. Pass translated string for i18n. */\n title: React.ReactNode;\n /** Large subtitle value (e.g. formatted price or count). */\n subtitle?: React.ReactNode;\n /** Tooltip text shown next to the title. Pass translated string for i18n. */\n tooltip?: React.ReactNode;\n /** Accessible label for the info tooltip trigger. Override for i18n. @default \"More info\" */\n tooltipAriaLabel?: string;\n /** Date range or period label shown below the subtitle. */\n dateInfo?: React.ReactNode;\n /** Trend indicator chip config. Only rendered when {@link subtitle} is also provided. */\n trendChip?: {\n /** Display label (e.g. \"12.5%\"). */\n label: React.ReactNode;\n /** Whether the trend is positive (green) or negative (red). */\n trend: \"positive\" | \"negative\";\n };\n /** Show loading skeleton instead of content. @default false */\n loading?: boolean;\n /** Chart content rendered below the header. */\n children?: React.ReactNode;\n}\n\nconst TREND_CLASSES: Record<\"positive\" | \"negative\", string> = {\n positive: \"bg-success-surface text-success-content\",\n negative: \"bg-error-surface text-error-content\",\n};\n\n/**\n * Wraps any chart with a structured header containing title, subtitle,\n * optional trend chip, date range label, info tooltip, and a loading\n * skeleton state.\n *\n * The surface treatment comes from the underlying {@link Card} and is driven by\n * the `hierarchy` prop.\n *\n * @example\n * ```tsx\n * <ChartCard\n * title=\"Revenue\"\n * subtitle=\"$4,523\"\n * trendChip={{ label: \"+12.5%\", trend: \"positive\" }}\n * dateInfo=\"Jan 1 – Mar 17\"\n * tooltip=\"Total revenue for the selected period.\"\n * >\n * <MyLineChart />\n * </ChartCard>\n * ```\n */\nexport const ChartCard = React.forwardRef<HTMLDivElement, ChartCardProps>(\n (\n {\n className,\n hierarchy = \"primary\",\n title,\n subtitle,\n tooltip,\n tooltipAriaLabel = \"More info\",\n dateInfo,\n trendChip,\n loading = false,\n children,\n ...props\n },\n ref,\n ) => {\n return (\n <Card ref={ref} hierarchy={hierarchy} noPadding className={className} {...props}>\n <div className=\"flex flex-col gap-2 p-4\">\n {loading ? (\n <>\n <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-4 w-32\" />\n <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-7 w-44\" />\n <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-3 w-24\" />\n </>\n ) : (\n <>\n <div className=\"flex items-center gap-1.5\">\n <span className=\"typography-body-small-14px-semibold text-content-primary\">\n {title}\n </span>\n {tooltip && (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <IconButton\n variant=\"tertiary\"\n size=\"32\"\n aria-label={tooltipAriaLabel}\n className=\"text-content-tertiary hover:text-content-primary focus-visible:text-content-primary active:text-content-primary\"\n icon={<InfoCircleIcon />}\n />\n </TooltipTrigger>\n <TooltipContent>{tooltip}</TooltipContent>\n </Tooltip>\n </TooltipProvider>\n )}\n </div>\n {subtitle && (\n <div className=\"flex flex-wrap items-center gap-2\">\n <span className=\"typography-header-heading-sm text-content-primary\">\n {subtitle}\n </span>\n {trendChip && (\n <span\n className={cn(\n \"typography-description-12px-semibold whitespace-nowrap rounded-full px-2 py-0.5\",\n TREND_CLASSES[trendChip.trend],\n )}\n >\n {trendChip.label}\n </span>\n )}\n </div>\n )}\n {dateInfo && (\n <span className=\"typography-description-12px-regular text-content-tertiary\">\n {dateInfo}\n </span>\n )}\n </>\n )}\n {children && <div className=\"mt-auto\">{children}</div>}\n </div>\n </Card>\n );\n },\n);\nChartCard.displayName = \"ChartCard\";\n"],"names":["React","jsx","Card","jsxs","Fragment","Skeleton","TooltipProvider","Tooltip","TooltipTrigger","IconButton","InfoCircleIcon","TooltipContent","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAM,gBAAyD;AAAA,EAC7D,UAAU;AAAA,EACV,UAAU;AACZ;AAuBO,MAAM,YAAYA,iBAAM;AAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,WACEC,2BAAAA,IAACC,KAAAA,MAAA,EAAK,KAAU,WAAsB,WAAS,MAAC,WAAuB,GAAG,OACxE,UAAAC,gCAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,MAAA,UACCA,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,QAAAH,+BAACI,SAAAA,YAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,YAAW;AAAA,uCACjEA,SAAAA,UAAA,EAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,YAAW;AAAA,uCACjEA,SAAAA,UAAA,EAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,WAAA,CAAW;AAAA,MAAA,EAAA,CACpE,IAEAF,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,QAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,4DACb,UAAA,OACH;AAAA,UACC,WACCA,2BAAAA,IAACK,yBAAA,EACC,UAAAH,gCAACI,QAAAA,SAAA,EACC,UAAA;AAAA,YAAAN,2BAAAA,IAACO,QAAAA,gBAAA,EAAe,SAAO,MACrB,UAAAP,2BAAAA;AAAAA,cAACQ,WAAAA;AAAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,cAAY;AAAA,gBACZ,WAAU;AAAA,gBACV,qCAAOC,eAAAA,gBAAA,CAAA,CAAe;AAAA,cAAA;AAAA,YAAA,GAE1B;AAAA,YACAT,2BAAAA,IAACU,QAAAA,kBAAgB,UAAA,QAAA,CAAQ;AAAA,UAAA,EAAA,CAC3B,EAAA,CACF;AAAA,QAAA,GAEJ;AAAA,QACC,YACCR,2BAAAA,KAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,qDACb,UAAA,UACH;AAAA,UACC,aACCA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWW,GAAAA;AAAAA,gBACT;AAAA,gBACA,cAAc,UAAU,KAAK;AAAA,cAAA;AAAA,cAG9B,UAAA,UAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb,GAEJ;AAAA,QAED,YACCX,2BAAAA,IAAC,QAAA,EAAK,WAAU,6DACb,UAAA,SAAA,CACH;AAAA,MAAA,GAEJ;AAAA,MAED,YAAYA,2BAAAA,IAAC,OAAA,EAAI,WAAU,WAAW,SAAA,CAAS;AAAA,IAAA,EAAA,CAClD,EAAA,CACF;AAAA,EAEJ;AACF;AACA,UAAU,cAAc;;"}
|
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
4
4
|
const jsxRuntime = require("react/jsx-runtime");
|
|
5
5
|
const React = require("react");
|
|
6
6
|
const cn = require("../../utils/cn.cjs");
|
|
7
|
+
const Chip = require("../Chip/Chip.cjs");
|
|
7
8
|
function _interopNamespaceDefault(e) {
|
|
8
9
|
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
9
10
|
if (e) {
|
|
@@ -32,32 +33,18 @@ const ChartSeriesToggle = React__namespace.forwardRef(
|
|
|
32
33
|
}
|
|
33
34
|
onValueChange(next);
|
|
34
35
|
};
|
|
35
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn.cn("grid grid-cols-2 gap-2 sm:grid-cols-3", className), ...props, children: items.map((item) =>
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
"
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
children: [
|
|
48
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
49
|
-
"span",
|
|
50
|
-
{
|
|
51
|
-
className: "size-2 shrink-0 rounded-full",
|
|
52
|
-
style: { backgroundColor: item.color }
|
|
53
|
-
}
|
|
54
|
-
),
|
|
55
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
|
|
56
|
-
]
|
|
57
|
-
},
|
|
58
|
-
item.key
|
|
59
|
-
);
|
|
60
|
-
}) });
|
|
36
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn.cn("grid grid-cols-2 gap-2 sm:grid-cols-3", className), ...props, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
37
|
+
Chip.Chip,
|
|
38
|
+
{
|
|
39
|
+
size: "32",
|
|
40
|
+
className: "justify-start",
|
|
41
|
+
selected: value.has(item.key),
|
|
42
|
+
onClick: () => toggle(item.key),
|
|
43
|
+
leftIcon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-2 rounded-full", style: { backgroundColor: item.color } }),
|
|
44
|
+
children: item.label
|
|
45
|
+
},
|
|
46
|
+
item.key
|
|
47
|
+
)) });
|
|
61
48
|
}
|
|
62
49
|
);
|
|
63
50
|
ChartSeriesToggle.displayName = "ChartSeriesToggle";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartSeriesToggle.cjs","sources":["../../../../src/components/Chart/ChartSeriesToggle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** A single toggleable series in a {@link ChartSeriesToggle}. */\nexport interface ChartSeriesToggleItem {\n /** Unique key matching the data series key and ChartConfig key. */\n key: string;\n /** Human-readable label. Pass translated string for i18n. */\n label: React.ReactNode;\n /** Series color (CSS value). Shown as indicator dot. */\n color: string;\n}\n\n/** Props for {@link ChartSeriesToggle}. */\nexport interface ChartSeriesToggleProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Available series that can be toggled. */\n items: ChartSeriesToggleItem[];\n /** Set of currently visible series keys. */\n value: Set<string>;\n /** Called when a series is toggled. Receives the updated Set. */\n onValueChange: (value: Set<string>) => void;\n}\n\n/**\n * Renders a grid of toggleable
|
|
1
|
+
{"version":3,"file":"ChartSeriesToggle.cjs","sources":["../../../../src/components/Chart/ChartSeriesToggle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Chip } from \"../Chip/Chip\";\n\n/** A single toggleable series in a {@link ChartSeriesToggle}. */\nexport interface ChartSeriesToggleItem {\n /** Unique key matching the data series key and ChartConfig key. */\n key: string;\n /** Human-readable label. Pass translated string for i18n. */\n label: React.ReactNode;\n /** Series color (CSS value). Shown as indicator dot. */\n color: string;\n}\n\n/** Props for {@link ChartSeriesToggle}. */\nexport interface ChartSeriesToggleProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Available series that can be toggled. */\n items: ChartSeriesToggleItem[];\n /** Set of currently visible series keys. */\n value: Set<string>;\n /** Called when a series is toggled. Receives the updated Set. */\n onValueChange: (value: Set<string>) => void;\n}\n\n/**\n * Renders a grid of toggleable {@link Chip}s that control which series are\n * visible on a multi-series chart. Each toggle shows a series colour dot and a\n * label, and exposes its state through `aria-pressed`.\n *\n * @example\n * ```tsx\n * const [visible, setVisible] = useState(new Set([\"subscription\", \"message\", \"tip\"]));\n *\n * <ChartSeriesToggle\n * items={[\n * { key: \"subscription\", label: \"Subscription\", color: \"var(--color-special-chart-teal)\" },\n * { key: \"message\", label: \"Message\", color: \"var(--color-special-chart-sky)\" },\n * { key: \"tip\", label: \"Tip\", color: \"var(--color-special-chart-orange)\" },\n * ]}\n * value={visible}\n * onValueChange={setVisible}\n * />\n * ```\n */\nexport const ChartSeriesToggle = React.forwardRef<HTMLDivElement, ChartSeriesToggleProps>(\n ({ className, items, value, onValueChange, ...props }, ref) => {\n const toggle = (key: string) => {\n const next = new Set(value);\n if (next.has(key)) {\n next.delete(key);\n } else {\n next.add(key);\n }\n onValueChange(next);\n };\n\n return (\n <div ref={ref} className={cn(\"grid grid-cols-2 gap-2 sm:grid-cols-3\", className)} {...props}>\n {items.map((item) => (\n <Chip\n key={item.key}\n size=\"32\"\n className=\"justify-start\"\n selected={value.has(item.key)}\n onClick={() => toggle(item.key)}\n leftIcon={\n <span className=\"size-2 rounded-full\" style={{ backgroundColor: item.color }} />\n }\n >\n {item.label}\n </Chip>\n ))}\n </div>\n );\n },\n);\n\nChartSeriesToggle.displayName = \"ChartSeriesToggle\";\n"],"names":["React","jsx","cn","Chip"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA4CO,MAAM,oBAAoBA,iBAAM;AAAA,EACrC,CAAC,EAAE,WAAW,OAAO,OAAO,eAAe,GAAG,MAAA,GAAS,QAAQ;AAC7D,UAAM,SAAS,CAAC,QAAgB;AAC9B,YAAM,OAAO,IAAI,IAAI,KAAK;AAC1B,UAAI,KAAK,IAAI,GAAG,GAAG;AACjB,aAAK,OAAO,GAAG;AAAA,MACjB,OAAO;AACL,aAAK,IAAI,GAAG;AAAA,MACd;AACA,oBAAc,IAAI;AAAA,IACpB;AAEA,WACEC,2BAAAA,IAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,yCAAyC,SAAS,GAAI,GAAG,OACnF,UAAA,MAAM,IAAI,CAAC,SACVD,2BAAAA;AAAAA,MAACE,KAAAA;AAAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,UAAU,MAAM,IAAI,KAAK,GAAG;AAAA,QAC5B,SAAS,MAAM,OAAO,KAAK,GAAG;AAAA,QAC9B,UACEF,2BAAAA,IAAC,QAAA,EAAK,WAAU,uBAAsB,OAAO,EAAE,iBAAiB,KAAK,MAAA,EAAM,CAAG;AAAA,QAG/E,UAAA,KAAK;AAAA,MAAA;AAAA,MATD,KAAK;AAAA,IAAA,CAWb,GACH;AAAA,EAEJ;AACF;AAEA,kBAAkB,cAAc;;"}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
5
|
+
const React = require("react");
|
|
6
|
+
const cn = require("../../utils/cn.cjs");
|
|
7
|
+
const Button = require("../Button/Button.cjs");
|
|
8
|
+
const WarningIcon = require("../Icons/WarningIcon.cjs");
|
|
9
|
+
function _interopNamespaceDefault(e) {
|
|
10
|
+
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
11
|
+
if (e) {
|
|
12
|
+
for (const k in e) {
|
|
13
|
+
if (k !== "default") {
|
|
14
|
+
const d = Object.getOwnPropertyDescriptor(e, k);
|
|
15
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
16
|
+
enumerable: true,
|
|
17
|
+
get: () => e[k]
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
n.default = e;
|
|
23
|
+
return Object.freeze(n);
|
|
24
|
+
}
|
|
25
|
+
const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
|
|
26
|
+
function CriticalBannerCta({
|
|
27
|
+
ctaLabel,
|
|
28
|
+
ctaProps
|
|
29
|
+
}) {
|
|
30
|
+
const isDisabled = ctaProps?.disabled ?? false;
|
|
31
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
32
|
+
Button.Button,
|
|
33
|
+
{
|
|
34
|
+
variant: "white",
|
|
35
|
+
size: "40",
|
|
36
|
+
...ctaProps,
|
|
37
|
+
className: cn.cn(
|
|
38
|
+
!isDisabled && "text-alerts-critical-banner-background hover:text-alerts-critical-banner-background active:text-alerts-critical-banner-background",
|
|
39
|
+
ctaProps?.className
|
|
40
|
+
),
|
|
41
|
+
children: ctaLabel
|
|
42
|
+
}
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
const CriticalBanner = React__namespace.forwardRef(
|
|
46
|
+
({
|
|
47
|
+
className,
|
|
48
|
+
children,
|
|
49
|
+
layout = "trailing",
|
|
50
|
+
title,
|
|
51
|
+
icon,
|
|
52
|
+
ctaLabel,
|
|
53
|
+
ctaProps,
|
|
54
|
+
action,
|
|
55
|
+
role = "alert",
|
|
56
|
+
...props
|
|
57
|
+
}, ref) => {
|
|
58
|
+
const isUnder = layout === "under";
|
|
59
|
+
const cta = action ?? (ctaLabel !== void 0 && ctaLabel !== null && ctaLabel !== false ? /* @__PURE__ */ jsxRuntime.jsx(CriticalBannerCta, { ctaLabel, ctaProps }) : null);
|
|
60
|
+
const iconNode = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-alerts-critical-banner-icons", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(WarningIcon.WarningIcon, { filled: true, size: 32 }) });
|
|
61
|
+
const textColumn = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-1 break-words pt-1 text-alerts-critical-banner-content", children: [
|
|
62
|
+
title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-header-heading-xs", children: title }),
|
|
63
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-body-default-16px-regular", children })
|
|
64
|
+
] });
|
|
65
|
+
if (isUnder) {
|
|
66
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
67
|
+
"div",
|
|
68
|
+
{
|
|
69
|
+
ref,
|
|
70
|
+
role,
|
|
71
|
+
className: cn.cn(
|
|
72
|
+
"flex w-full min-w-[260px] items-start gap-4 rounded-md bg-alerts-critical-banner-background p-6",
|
|
73
|
+
className
|
|
74
|
+
),
|
|
75
|
+
...props,
|
|
76
|
+
children: [
|
|
77
|
+
iconNode,
|
|
78
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col items-start gap-6", children: [
|
|
79
|
+
textColumn,
|
|
80
|
+
cta !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: cta })
|
|
81
|
+
] })
|
|
82
|
+
]
|
|
83
|
+
}
|
|
84
|
+
);
|
|
85
|
+
}
|
|
86
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
87
|
+
"div",
|
|
88
|
+
{
|
|
89
|
+
ref,
|
|
90
|
+
role,
|
|
91
|
+
className: cn.cn(
|
|
92
|
+
"flex w-full min-w-[260px] items-center gap-6 rounded-md bg-alerts-critical-banner-background p-6",
|
|
93
|
+
className
|
|
94
|
+
),
|
|
95
|
+
...props,
|
|
96
|
+
children: [
|
|
97
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-4", children: [
|
|
98
|
+
iconNode,
|
|
99
|
+
textColumn
|
|
100
|
+
] }),
|
|
101
|
+
cta !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: cta })
|
|
102
|
+
]
|
|
103
|
+
}
|
|
104
|
+
);
|
|
105
|
+
}
|
|
106
|
+
);
|
|
107
|
+
CriticalBanner.displayName = "CriticalBanner";
|
|
108
|
+
exports.CriticalBanner = CriticalBanner;
|
|
109
|
+
//# sourceMappingURL=CriticalBanner.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CriticalBanner.cjs","sources":["../../../../src/components/CriticalBanner/CriticalBanner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button, type ButtonProps } from \"../Button/Button\";\nimport { WarningIcon } from \"../Icons/WarningIcon\";\n\n/**\n * Placement of the call-to-action relative to the message.\n *\n * - `\"trailing\"` keeps the action inline, aligned to the end of the banner.\n * - `\"under\"` stacks the action beneath the message (use when the CTA label is\n * too long to sit comfortably on the same line).\n */\nexport type CriticalBannerLayout = \"trailing\" | \"under\";\n\nexport interface CriticalBannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n /** Body copy describing the blocking situation. */\n children: React.ReactNode;\n /** Placement of the call-to-action relative to the message. @default \"trailing\" */\n layout?: CriticalBannerLayout;\n /** Optional bold heading shown above the body copy. */\n title?: React.ReactNode;\n /** Leading icon. Overrides the default filled warning icon. */\n icon?: React.ReactNode;\n /** Label for the built-in white call-to-action button. Ignored when `action` is set. */\n ctaLabel?: React.ReactNode;\n /**\n * Props forwarded to the built-in call-to-action button (e.g. `onClick`).\n * `asChild` is intentionally excluded — the built-in CTA renders `ctaLabel`\n * as text; for a link or fully custom element use the `action` prop instead.\n */\n ctaProps?: Omit<ButtonProps, \"variant\" | \"size\" | \"children\" | \"asChild\">;\n /** Custom action node rendered in place of the built-in call-to-action button. */\n action?: React.ReactNode;\n}\n\nfunction CriticalBannerCta({\n ctaLabel,\n ctaProps,\n}: {\n ctaLabel: React.ReactNode;\n ctaProps?: CriticalBannerProps[\"ctaProps\"];\n}) {\n // Only tint the label red for enabled states; when disabled, let Button keep\n // its own `text-content-disabled` treatment instead of overriding it.\n const isDisabled = ctaProps?.disabled ?? false;\n return (\n <Button\n variant=\"white\"\n size=\"40\"\n {...ctaProps}\n className={cn(\n !isDisabled &&\n \"text-alerts-critical-banner-background hover:text-alerts-critical-banner-background active:text-alerts-critical-banner-background\",\n ctaProps?.className,\n )}\n >\n {ctaLabel}\n </Button>\n );\n}\n\n/**\n * A full-width, high-priority banner reserved for situations that block or\n * significantly impact a user's ability to use the platform — account\n * suspensions, blocking payment failures, identity verification requirements,\n * or critical security notices. It sits at the very top of a page and is\n * intentionally disruptive, so use it sparingly; for non-blocking messaging use\n * {@link Alert} or {@link Banner} instead.\n *\n * Renders with `role=\"alert\"` so assistive technology conveys its urgency;\n * override `role` for a less assertive treatment when appropriate.\n *\n * @example\n * ```tsx\n * <CriticalBanner\n * title=\"Payment failed\"\n * layout=\"trailing\"\n * ctaLabel=\"Update payment\"\n * ctaProps={{ onClick: handleUpdate }}\n * >\n * We couldn't process your last payment. Update your details to keep your account active.\n * </CriticalBanner>\n * ```\n */\nexport const CriticalBanner = React.forwardRef<HTMLDivElement, CriticalBannerProps>(\n (\n {\n className,\n children,\n layout = \"trailing\",\n title,\n icon,\n ctaLabel,\n ctaProps,\n action,\n role = \"alert\",\n ...props\n },\n ref,\n ) => {\n const isUnder = layout === \"under\";\n\n const cta =\n action ??\n (ctaLabel !== undefined && ctaLabel !== null && ctaLabel !== false ? (\n <CriticalBannerCta ctaLabel={ctaLabel} ctaProps={ctaProps} />\n ) : null);\n\n const iconNode = (\n <span className=\"shrink-0 text-alerts-critical-banner-icons\" aria-hidden=\"true\">\n {icon ?? <WarningIcon filled size={32} />}\n </span>\n );\n\n const textColumn = (\n <div className=\"flex min-w-0 flex-col gap-1 break-words pt-1 text-alerts-critical-banner-content\">\n {title && <div className=\"typography-header-heading-xs\">{title}</div>}\n <div className=\"typography-body-default-16px-regular\">{children}</div>\n </div>\n );\n\n if (isUnder) {\n return (\n <div\n ref={ref}\n role={role}\n className={cn(\n \"flex w-full min-w-[260px] items-start gap-4 rounded-md bg-alerts-critical-banner-background p-6\",\n className,\n )}\n {...props}\n >\n {iconNode}\n <div className=\"flex min-w-0 flex-1 flex-col items-start gap-6\">\n {textColumn}\n {cta !== null && <div className=\"shrink-0\">{cta}</div>}\n </div>\n </div>\n );\n }\n\n return (\n <div\n ref={ref}\n role={role}\n className={cn(\n \"flex w-full min-w-[260px] items-center gap-6 rounded-md bg-alerts-critical-banner-background p-6\",\n className,\n )}\n {...props}\n >\n <div className=\"flex min-w-0 flex-1 items-start gap-4\">\n {iconNode}\n {textColumn}\n </div>\n {cta !== null && <div className=\"shrink-0\">{cta}</div>}\n </div>\n );\n },\n);\n\nCriticalBanner.displayName = \"CriticalBanner\";\n"],"names":["jsx","Button","cn","React","WarningIcon","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AACF,GAGG;AAGD,QAAM,aAAa,UAAU,YAAY;AACzC,SACEA,2BAAAA;AAAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,WAAWC,GAAAA;AAAAA,QACT,CAAC,cACC;AAAA,QACF,UAAU;AAAA,MAAA;AAAA,MAGX,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAyBO,MAAM,iBAAiBC,iBAAM;AAAA,EAClC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,UAAU,WAAW;AAE3B,UAAM,MACJ,WACC,aAAa,UAAa,aAAa,QAAQ,aAAa,QAC3DH,2BAAAA,IAAC,mBAAA,EAAkB,UAAoB,SAAA,CAAoB,IACzD;AAEN,UAAM,WACJA,2BAAAA,IAAC,QAAA,EAAK,WAAU,8CAA6C,eAAY,QACtE,UAAA,QAAQA,2BAAAA,IAACI,YAAAA,aAAA,EAAY,QAAM,MAAC,MAAM,IAAI,GACzC;AAGF,UAAM,aACJC,2BAAAA,KAAC,OAAA,EAAI,WAAU,oFACZ,UAAA;AAAA,MAAA,SAASL,2BAAAA,IAAC,OAAA,EAAI,WAAU,gCAAgC,UAAA,OAAM;AAAA,MAC/DA,2BAAAA,IAAC,OAAA,EAAI,WAAU,wCAAwC,SAAA,CAAS;AAAA,IAAA,GAClE;AAGF,QAAI,SAAS;AACX,aACEK,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,WAAWH,GAAAA;AAAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAED,GAAG;AAAA,UAEH,UAAA;AAAA,YAAA;AAAA,YACDG,2BAAAA,KAAC,OAAA,EAAI,WAAU,kDACZ,UAAA;AAAA,cAAA;AAAA,cACA,QAAQ,QAAQL,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,UAAA,IAAA,CAAI;AAAA,YAAA,EAAA,CAClD;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN;AAEA,WACEK,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAWH,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAG,2BAAAA,KAAC,OAAA,EAAI,WAAU,yCACZ,UAAA;AAAA,YAAA;AAAA,YACA;AAAA,UAAA,GACH;AAAA,UACC,QAAQ,QAAQL,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,UAAA,IAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGtD;AACF;AAEA,eAAe,cAAc;;"}
|