@hashicorp/mds-react 0.9.4 → 0.9.5
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/components/badge/style.module.scss +8 -6
- package/components/badge-count/style.module.scss +7 -6
- package/components/breadcrumbs/truncation-button/index.js +6 -6
- package/components/breadcrumbs/truncation-button/index.js.map +1 -1
- package/components/button/button-primitive.d.ts +5 -0
- package/components/button/button-primitive.js +59 -0
- package/components/button/button-primitive.js.map +1 -0
- package/components/button/index.d.ts +2 -4
- package/components/button/index.js +21 -71
- package/components/button/index.js.map +1 -1
- package/components/card/index.js +9 -9
- package/components/card/index.js.map +1 -1
- package/components/form/error/index.js +7 -7
- package/components/form/error/index.js.map +1 -1
- package/components/form/fieldset/index.d.ts +1 -2
- package/components/form/fieldset/index.js.map +1 -1
- package/components/form/file-input/form-file-input.module.scss +2 -2
- package/components/form/radio/index.d.ts +3 -5
- package/components/form/radio/index.js.map +1 -1
- package/components/form/radio-card/RadioCardStory.css +21 -0
- package/components/icon-tile/style.module.scss +12 -10
- package/components/inline-link/index.js +12 -11
- package/components/inline-link/index.js.map +1 -1
- package/components/modal/modal.module.css +5 -0
- package/components/tabs/index.js +63 -65
- package/components/tabs/index.js.map +1 -1
- package/package.json +1 -1
- package/patterns/card/person-card/index.js +37 -35
- package/patterns/card/person-card/index.js.map +1 -1
- package/patterns/card/primitives.js +16 -16
- package/patterns/card/primitives.js.map +1 -1
- package/style.css +1 -1
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@use 'sass:map';
|
|
2
|
+
|
|
1
3
|
$colors: ('highlight', 'success', 'warning', 'critical');
|
|
2
4
|
$sizes: ('small', 'medium', 'large');
|
|
3
5
|
$border-width: 1px;
|
|
@@ -55,18 +57,18 @@ $size-props: (
|
|
|
55
57
|
|
|
56
58
|
@each $size in $sizes {
|
|
57
59
|
.size-#{$size} {
|
|
58
|
-
gap: map
|
|
59
|
-
min-height: map
|
|
60
|
+
gap: map.get($size-props, $size, 'gap');
|
|
61
|
+
min-height: map.get($size-props, $size, 'height');
|
|
60
62
|
padding: calc(
|
|
61
|
-
#{map
|
|
63
|
+
#{map.get($size-props, $size, 'padding-vertical')} - #{$border-width}
|
|
62
64
|
)
|
|
63
65
|
calc(
|
|
64
|
-
#{map
|
|
66
|
+
#{map.get($size-props, $size, 'padding-horizontal')} - #{$border-width}
|
|
65
67
|
);
|
|
66
68
|
|
|
67
69
|
.text {
|
|
68
|
-
font-size: map
|
|
69
|
-
line-height: map
|
|
70
|
+
font-size: map.get($size-props, $size, 'font-size');
|
|
71
|
+
line-height: map.get($size-props, $size, 'line-height');
|
|
70
72
|
}
|
|
71
73
|
}
|
|
72
74
|
}
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
//
|
|
9
9
|
|
|
10
10
|
@use 'sass:math';
|
|
11
|
+
@use 'sass:map';
|
|
11
12
|
|
|
12
13
|
$sizes: ('small', 'medium', 'large');
|
|
13
14
|
$border-width: 1px;
|
|
@@ -56,16 +57,16 @@ $size-props: (
|
|
|
56
57
|
|
|
57
58
|
@each $size in $sizes {
|
|
58
59
|
.size-#{$size} {
|
|
59
|
-
min-height: map
|
|
60
|
+
min-height: map.get($size-props, $size, 'height');
|
|
60
61
|
padding: calc(
|
|
61
|
-
#{map
|
|
62
|
+
#{map.get($size-props, $size, 'padding-vertical')} - #{$border-width}
|
|
62
63
|
)
|
|
63
64
|
calc(
|
|
64
|
-
#{map
|
|
65
|
+
#{map.get($size-props, $size, 'padding-horizontal')} - #{$border-width}
|
|
65
66
|
);
|
|
66
|
-
font-size: map
|
|
67
|
-
line-height: map
|
|
68
|
-
border-radius: math.div(map
|
|
67
|
+
font-size: map.get($size-props, $size, 'font-size');
|
|
68
|
+
line-height: map.get($size-props, $size, 'line-height');
|
|
69
|
+
border-radius: math.div(map.get($size-props, $size, 'height'), 2);
|
|
69
70
|
}
|
|
70
71
|
}
|
|
71
72
|
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as o } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
3
|
+
import { FlightIcon as e } from "../../flight-icon/index.js";
|
|
4
4
|
import { useMenuPrimitive as i } from "../../menu-primitive/use-menu-primitive.js";
|
|
5
|
-
import
|
|
6
|
-
const
|
|
5
|
+
import m from "../style.module.scss.js";
|
|
6
|
+
const u = ({
|
|
7
7
|
ariaLabel: t = "show more"
|
|
8
8
|
}) => {
|
|
9
9
|
const { isOpen: n, onClickToggle: r } = i();
|
|
@@ -11,15 +11,15 @@ const l = ({
|
|
|
11
11
|
"button",
|
|
12
12
|
{
|
|
13
13
|
type: "button",
|
|
14
|
-
className:
|
|
14
|
+
className: m["truncation-button"],
|
|
15
15
|
"aria-label": t,
|
|
16
16
|
"aria-expanded": n,
|
|
17
17
|
onClick: r,
|
|
18
|
-
children: /* @__PURE__ */ o(e, {})
|
|
18
|
+
children: /* @__PURE__ */ o(e, { name: "more-horizontal" })
|
|
19
19
|
}
|
|
20
20
|
);
|
|
21
21
|
};
|
|
22
22
|
export {
|
|
23
|
-
|
|
23
|
+
u as TruncationButton
|
|
24
24
|
};
|
|
25
25
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/breadcrumbs/truncation-button/index.tsx"],"sourcesContent":["'use client'\n\nimport {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/breadcrumbs/truncation-button/index.tsx"],"sourcesContent":["'use client'\n\nimport { FlightIcon } from '../../flight-icon'\nimport { useMenuPrimitive } from '../../menu-primitive/use-menu-primitive'\nimport s from '../style.module.scss'\n\nexport const TruncationButton = ({\n\tariaLabel = 'show more',\n}: {\n\tariaLabel?: string\n}) => {\n\tconst { isOpen, onClickToggle } = useMenuPrimitive()\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName={s['truncation-button']}\n\t\t\taria-label={ariaLabel}\n\t\t\taria-expanded={isOpen}\n\t\t\tonClick={onClickToggle}\n\t\t>\n\t\t\t<FlightIcon name=\"more-horizontal\" />\n\t\t</button>\n\t)\n}\n"],"names":["ariaLabel","useMenuPrimitive","jsx","s","isOpen","onClickToggle","FlightIcon"],"mappings":";;;;;AAMiC,UACpB,CAAA;AAAA,EACb,WAAAA,IAEM;AACL,MAAA;AAEA,sCACC,IAAAC,EAAA;AAAA,SAAC,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA,MAAA;AAAA,MACA,WAAAC,qBAAY;AAAA,MACZ,cAAAH;AAAA,MACA,iBAASI;AAAA,MAET,SAAAC;AAAA,MAAmC,UAAA,gBAAAH,EAAAI,GAAA,EAAA,MAAA,kBAAA,CAAA;AAAA,IACpC;AAAA,EAEF;;"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { ButtonPrimitiveProps } from '.';
|
|
2
|
+
declare const LEGACY_COLORS: readonly ["primary", "secondary", "tertiary", "critical", "custom"];
|
|
3
|
+
export type LegacyButtonColor = (typeof LEGACY_COLORS)[number];
|
|
4
|
+
export declare const ButtonPrimitive: import('react').ForwardRefExoticComponent<ButtonPrimitiveProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
5
|
+
export {};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { jsx as i, jsxs as g, Fragment as v } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as N } from "react";
|
|
3
|
+
import { FlightIcon as y } from "../flight-icon/index.js";
|
|
4
|
+
import { Interactive as b } from "../interactive/index.js";
|
|
5
|
+
import w from "classnames";
|
|
6
|
+
import m from "./styles.module.scss.js";
|
|
7
|
+
const B = {
|
|
8
|
+
small: 12,
|
|
9
|
+
medium: 16,
|
|
10
|
+
large: 24
|
|
11
|
+
}, j = N(
|
|
12
|
+
({
|
|
13
|
+
size: l = "medium",
|
|
14
|
+
color: t = "primary",
|
|
15
|
+
isFullWidth: d,
|
|
16
|
+
isIconOnly: c,
|
|
17
|
+
icon: r,
|
|
18
|
+
iconPosition: n = "leading",
|
|
19
|
+
text: e,
|
|
20
|
+
href: f,
|
|
21
|
+
isHrefExternal: h,
|
|
22
|
+
className: p,
|
|
23
|
+
locale: u,
|
|
24
|
+
...s
|
|
25
|
+
}, I) => {
|
|
26
|
+
const o = c && !!r, a = r && /* @__PURE__ */ i(y, { name: r, size: B[l] });
|
|
27
|
+
return /* @__PURE__ */ i(
|
|
28
|
+
b,
|
|
29
|
+
{
|
|
30
|
+
className: w(
|
|
31
|
+
m.button,
|
|
32
|
+
m[`size-${l}`],
|
|
33
|
+
{
|
|
34
|
+
[m["width-full"]]: d,
|
|
35
|
+
[m["icon-only"]]: o
|
|
36
|
+
},
|
|
37
|
+
t !== "custom" && m[`color-${t}`],
|
|
38
|
+
p
|
|
39
|
+
),
|
|
40
|
+
href: s.disabled ? "" : f,
|
|
41
|
+
isHrefExternal: h,
|
|
42
|
+
"aria-label": o ? e : void 0,
|
|
43
|
+
locale: u,
|
|
44
|
+
...s,
|
|
45
|
+
ref: I,
|
|
46
|
+
children: o && r ? a : /* @__PURE__ */ g(v, { children: [
|
|
47
|
+
r && n === "leading" && a,
|
|
48
|
+
e ? /* @__PURE__ */ i("div", { className: m.text, children: e }) : null,
|
|
49
|
+
r && n === "trailing" && a
|
|
50
|
+
] })
|
|
51
|
+
}
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
);
|
|
55
|
+
j.displayName = "ButtonPrimitive";
|
|
56
|
+
export {
|
|
57
|
+
j as ButtonPrimitive
|
|
58
|
+
};
|
|
59
|
+
//# sourceMappingURL=button-primitive.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button-primitive.js","sources":["../../../src/components/button/button-primitive.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport type { ButtonPrimitiveProps } from '.'\nimport { FlightIcon, type FlightIconSize } from '../flight-icon'\nimport { Interactive } from '../interactive'\nimport classNames from 'classnames'\nimport s from './styles.module.scss'\n\n// These are the only “real” colors our legacy button knows about\nconst LEGACY_COLORS = [\n\t'primary',\n\t'secondary',\n\t'tertiary',\n\t'critical',\n\t'custom',\n] as const\nexport type LegacyButtonColor = (typeof LEGACY_COLORS)[number]\n\nconst ICON_SIZE_MAP = {\n\tsmall: 12,\n\tmedium: 16,\n\tlarge: 24,\n} as const satisfies Record<'small' | 'medium' | 'large', FlightIconSize>\n\nexport const ButtonPrimitive = forwardRef<\n\tHTMLButtonElement,\n\tButtonPrimitiveProps\n>(\n\t(\n\t\t{\n\t\t\tsize = 'medium',\n\t\t\tcolor = 'primary',\n\t\t\tisFullWidth,\n\t\t\tisIconOnly,\n\t\t\ticon,\n\t\t\ticonPosition = 'leading',\n\t\t\ttext,\n\t\t\thref,\n\t\t\tisHrefExternal,\n\t\t\tclassName,\n\t\t\tlocale,\n\t\t\t...rest\n\t\t},\n\t\tref\n\t) => {\n\t\tconst hasIcon = Boolean(icon)\n\t\tconst showIconOnly = isIconOnly && hasIcon\n\n\t\tconst iconElement = icon && (\n\t\t\t<FlightIcon name={icon} size={ICON_SIZE_MAP[size]} />\n\t\t)\n\n\t\treturn (\n\t\t\t<Interactive\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts.button,\n\t\t\t\t\ts[`size-${size}`],\n\t\t\t\t\t{\n\t\t\t\t\t\t[s['width-full']]: isFullWidth,\n\t\t\t\t\t\t[s['icon-only']]: showIconOnly,\n\t\t\t\t\t},\n\t\t\t\t\tcolor !== 'custom' && s[`color-${color}`],\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\thref={rest.disabled ? '' : href}\n\t\t\t\tisHrefExternal={isHrefExternal}\n\t\t\t\taria-label={showIconOnly ? text : undefined}\n\t\t\t\tlocale={locale}\n\t\t\t\t{...rest}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t{showIconOnly && icon ? (\n\t\t\t\t\ticonElement\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{icon && iconPosition === 'leading' && iconElement}\n\t\t\t\t\t\t{text ? <div className={s.text}>{text}</div> : null}\n\t\t\t\t\t\t{icon && iconPosition === 'trailing' && iconElement}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</Interactive>\n\t\t)\n\t}\n)\nButtonPrimitive.displayName = 'ButtonPrimitive'\n"],"names":["ICON_SIZE_MAP","ButtonPrimitive","forwardRef","size","color","isFullWidth","isIconOnly","icon","iconPosition","text","href","isHrefExternal","className","locale","rest","ref","showIconOnly","iconElement","jsx","FlightIcon","Interactive","classNames","s","jsxs","Fragment"],"mappings":";;;;;;AAiBA,MAAMA,IAAgB;AAAA,EACrB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACR,GAEaC,IAAkBC;AAAA,EAI9B,CACC;AAAA,IACC,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEJC,MACI;AAEJ,UAAMC,IAAeV,KADL,EAAQC,GAGlBU,IAAcV,KACnB,gBAAAW,EAACC,GAAA,EAAW,MAAMZ,GAAM,MAAMP,EAAcG,CAAI,EAAA,CAAG;AAGpD,WACC,gBAAAe;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,WAAWC;AAAA,UACVC,EAAE;AAAA,UACFA,EAAE,QAAQnB,CAAI,EAAE;AAAA,UAChB;AAAA,YACC,CAACmB,EAAE,YAAY,CAAC,GAAGjB;AAAA,YACnB,CAACiB,EAAE,WAAW,CAAC,GAAGN;AAAA,UAAA;AAAA,UAEnBZ,MAAU,YAAYkB,EAAE,SAASlB,CAAK,EAAE;AAAA,UACxCQ;AAAA,QAAA;AAAA,QAED,MAAME,EAAK,WAAW,KAAKJ;AAAA,QAC3B,gBAAAC;AAAA,QACA,cAAYK,IAAeP,IAAO;AAAA,QAClC,QAAAI;AAAA,QACC,GAAGC;AAAA,QACJ,KAAAC;AAAA,QAEC,UAAAC,KAAgBT,IAChBU,IAEA,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,UAAAjB,KAAQC,MAAiB,aAAaS;AAAA,UACtCR,IAAO,gBAAAS,EAAC,OAAA,EAAI,WAAWI,EAAE,MAAO,aAAK,IAAS;AAAA,UAC9Cf,KAAQC,MAAiB,cAAcS;AAAA,QAAA,EAAA,CACzC;AAAA,MAAA;AAAA,IAAA;AAAA,EAIJ;AACD;AACAhB,EAAgB,cAAc;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ForwardRefExoticComponent } from 'react';
|
|
2
|
+
import { LegacyButtonColor } from './button-primitive';
|
|
2
3
|
import { FlightIconName } from '../flight-icon';
|
|
3
4
|
export declare const BUTTON_SIZES: readonly ["small", "medium", "large"];
|
|
4
5
|
export type ButtonSize = (typeof BUTTON_SIZES)[number];
|
|
@@ -6,9 +7,7 @@ export declare const BUTTON_ICON_POSITIONS: readonly ["leading", "trailing"];
|
|
|
6
7
|
export type ButtonIconPosition = (typeof BUTTON_ICON_POSITIONS)[number];
|
|
7
8
|
export declare const BUTTON_COLORS: readonly ["primary", "primary-black", "primary-white", "secondary", "secondary-high-contrast", "secondary-white", "secondary-black", "tertiary", "critical", "boundary", "consul", "nomad", "packer", "terraform", "vagrant", "vault", "waypoint", "hashicorp"];
|
|
8
9
|
export type ButtonColor = (typeof BUTTON_COLORS)[number];
|
|
9
|
-
|
|
10
|
-
type LegacyButtonColor = (typeof LEGACY_COLORS)[number];
|
|
11
|
-
interface ButtonPrimitiveProps {
|
|
10
|
+
export interface ButtonPrimitiveProps {
|
|
12
11
|
size?: ButtonSize;
|
|
13
12
|
color?: LegacyButtonColor;
|
|
14
13
|
isFullWidth?: boolean;
|
|
@@ -29,4 +28,3 @@ export interface ButtonProps extends Omit<ButtonPrimitiveProps, 'color'> {
|
|
|
29
28
|
color?: ButtonColor;
|
|
30
29
|
}
|
|
31
30
|
export declare const Button: ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
|
|
32
|
-
export {};
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
const $ = ["small", "medium", "large"], j = ["leading", "trailing"], x = [
|
|
1
|
+
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as i } from "react";
|
|
3
|
+
import e from "classnames";
|
|
4
|
+
import { ButtonPrimitive as n } from "./button-primitive.js";
|
|
5
|
+
import y from "./styles.module.scss.js";
|
|
6
|
+
const w = ["small", "medium", "large"], N = ["leading", "trailing"], C = [
|
|
8
7
|
"primary",
|
|
9
8
|
"primary-black",
|
|
10
9
|
"primary-white",
|
|
@@ -26,7 +25,7 @@ const $ = ["small", "medium", "large"], j = ["leading", "trailing"], x = [
|
|
|
26
25
|
"waypoint",
|
|
27
26
|
"hashicorp"
|
|
28
27
|
// alias to primary
|
|
29
|
-
],
|
|
28
|
+
], p = {
|
|
30
29
|
primary: "primary",
|
|
31
30
|
"primary-black": "custom",
|
|
32
31
|
"primary-white": "custom",
|
|
@@ -45,75 +44,26 @@ const $ = ["small", "medium", "large"], j = ["leading", "trailing"], x = [
|
|
|
45
44
|
vault: "custom",
|
|
46
45
|
waypoint: "custom",
|
|
47
46
|
hashicorp: "primary"
|
|
48
|
-
},
|
|
49
|
-
|
|
50
|
-
medium: 16,
|
|
51
|
-
large: 24
|
|
52
|
-
}, p = d(
|
|
53
|
-
({
|
|
54
|
-
size: o = "medium",
|
|
55
|
-
color: s = "primary",
|
|
56
|
-
isFullWidth: m,
|
|
57
|
-
isIconOnly: i,
|
|
58
|
-
icon: r,
|
|
59
|
-
iconPosition: e = "leading",
|
|
60
|
-
text: t,
|
|
61
|
-
href: h,
|
|
62
|
-
isHrefExternal: g,
|
|
63
|
-
className: f,
|
|
64
|
-
locale: N,
|
|
65
|
-
...u
|
|
66
|
-
}, O) => {
|
|
67
|
-
const n = i && !!r, l = r && /* @__PURE__ */ c(b, { name: r, size: C[o] });
|
|
68
|
-
return /* @__PURE__ */ c(
|
|
69
|
-
w,
|
|
70
|
-
{
|
|
71
|
-
className: y(
|
|
72
|
-
a.button,
|
|
73
|
-
a[`size-${o}`],
|
|
74
|
-
{
|
|
75
|
-
[a["width-full"]]: m,
|
|
76
|
-
[a["icon-only"]]: n
|
|
77
|
-
},
|
|
78
|
-
s !== "custom" && a[`color-${s}`],
|
|
79
|
-
f
|
|
80
|
-
),
|
|
81
|
-
href: u.disabled ? "" : h,
|
|
82
|
-
isHrefExternal: g,
|
|
83
|
-
"aria-label": n ? t : void 0,
|
|
84
|
-
locale: N,
|
|
85
|
-
...u,
|
|
86
|
-
ref: O,
|
|
87
|
-
children: n && r ? l : /* @__PURE__ */ I(v, { children: [
|
|
88
|
-
r && e === "leading" && l,
|
|
89
|
-
t ? /* @__PURE__ */ c("div", { className: a.text, children: t }) : null,
|
|
90
|
-
r && e === "trailing" && l
|
|
91
|
-
] })
|
|
92
|
-
}
|
|
93
|
-
);
|
|
94
|
-
}
|
|
95
|
-
);
|
|
96
|
-
p.displayName = "ButtonPrimitive";
|
|
97
|
-
const T = d(({ color: o = "primary", className: s, ...m }, i) => {
|
|
98
|
-
const r = B[o], t = r === "custom" ? a[`color-${{
|
|
47
|
+
}, u = i(({ color: r = "primary", className: a, ...t }, c) => {
|
|
48
|
+
const o = p[r], s = o === "custom" ? y[`color-${{
|
|
99
49
|
hashicorp: "primary",
|
|
100
50
|
secondary: "secondary-white"
|
|
101
|
-
}[
|
|
102
|
-
return /* @__PURE__ */
|
|
103
|
-
|
|
51
|
+
}[r] ?? r}`] : void 0;
|
|
52
|
+
return /* @__PURE__ */ m(
|
|
53
|
+
n,
|
|
104
54
|
{
|
|
105
|
-
...
|
|
106
|
-
color:
|
|
107
|
-
className:
|
|
108
|
-
ref:
|
|
55
|
+
...t,
|
|
56
|
+
color: o,
|
|
57
|
+
className: e(s, a),
|
|
58
|
+
ref: c
|
|
109
59
|
}
|
|
110
60
|
);
|
|
111
61
|
});
|
|
112
|
-
|
|
62
|
+
u.displayName = "Button";
|
|
113
63
|
export {
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
64
|
+
C as BUTTON_COLORS,
|
|
65
|
+
N as BUTTON_ICON_POSITIONS,
|
|
66
|
+
w as BUTTON_SIZES,
|
|
67
|
+
u as Button
|
|
118
68
|
};
|
|
119
69
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import type { ForwardRefExoticComponent } from 'react'\nimport { forwardRef } from 'react'\nimport classNames from 'classnames'\nimport {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import type { ForwardRefExoticComponent } from 'react'\nimport { forwardRef } from 'react'\nimport classNames from 'classnames'\nimport { ButtonPrimitive, type LegacyButtonColor } from './button-primitive'\nimport s from './styles.module.scss'\nimport type { FlightIconName } from '../flight-icon'\n\nexport const BUTTON_SIZES = ['small', 'medium', 'large'] as const\nexport type ButtonSize = (typeof BUTTON_SIZES)[number]\n\nexport const BUTTON_ICON_POSITIONS = ['leading', 'trailing'] as const\nexport type ButtonIconPosition = (typeof BUTTON_ICON_POSITIONS)[number]\n\nexport const BUTTON_COLORS = [\n\t'primary',\n\t'primary-black',\n\t'primary-white',\n\t'secondary', // deprecated; maps to secondary-white\n\t'secondary-high-contrast', // alternates based on theme\n\t'secondary-white',\n\t'secondary-black',\n\t'tertiary',\n\t'critical',\n\t'boundary',\n\t'consul',\n\t'nomad',\n\t'packer',\n\t'terraform',\n\t'vagrant',\n\t'vault',\n\t'waypoint',\n\t'hashicorp', // alias to primary\n] as const\nexport type ButtonColor = (typeof BUTTON_COLORS)[number]\n\nexport interface ButtonPrimitiveProps {\n\tsize?: ButtonSize\n\tcolor?: LegacyButtonColor\n\tisFullWidth?: boolean\n\tisIconOnly?: boolean\n\ticon?: FlightIconName\n\ticonPosition?: ButtonIconPosition\n\ttext?: string\n\thref?: string\n\tisHrefExternal?: boolean\n\tonClick?: React.MouseEventHandler<HTMLButtonElement>\n\tclassName?: string\n\tlocale?: string\n\tdisabled?: boolean\n\tautoFocus?: boolean\n\ttype?: 'button' | 'submit' | 'reset'\n}\n\n// map HDS “super-set” colors down to our legacy ones\nconst COLOR_MAP: Record<ButtonColor, LegacyButtonColor> = {\n\tprimary: 'primary',\n\t'primary-black': 'custom',\n\t'primary-white': 'custom',\n\tsecondary: 'custom',\n\t'secondary-high-contrast': 'custom',\n\t'secondary-white': 'custom',\n\t'secondary-black': 'custom',\n\ttertiary: 'tertiary',\n\tcritical: 'critical',\n\tboundary: 'custom',\n\tconsul: 'custom',\n\tnomad: 'custom',\n\tpacker: 'custom',\n\tterraform: 'custom',\n\tvagrant: 'custom',\n\tvault: 'custom',\n\twaypoint: 'custom',\n\thashicorp: 'primary',\n}\n\nexport interface ButtonProps extends Omit<ButtonPrimitiveProps, 'color'> {\n\tcolor?: ButtonColor\n}\n\nexport const Button = forwardRef<\n\tHTMLAnchorElement | HTMLButtonElement,\n\tButtonProps\n>(({ color = 'primary', className, ...rest }, ref) => {\n\tconst legacyColor = COLOR_MAP[color]\n\n\tconst remappedColors: Partial<Record<ButtonColor, ButtonColor>> = {\n\t\thashicorp: 'primary',\n\t\tsecondary: 'secondary-white',\n\t}\n\n\tconst customClass =\n\t\tlegacyColor === 'custom'\n\t\t\t? s[`color-${remappedColors[color] ?? color}`]\n\t\t\t: undefined\n\n\treturn (\n\t\t<ButtonPrimitive\n\t\t\t{...rest}\n\t\t\tcolor={legacyColor}\n\t\t\tclassName={classNames(customClass, className)}\n\t\t\tref={ref as ForwardRefExoticComponent<HTMLButtonElement>}\n\t\t/>\n\t)\n})\n\nButton.displayName = 'Button'\n"],"names":["BUTTON_SIZES","BUTTON_ICON_POSITIONS","BUTTON_COLORS","COLOR_MAP","Button","forwardRef","color","className","rest","ref","legacyColor","customClass","s","jsx","ButtonPrimitive","classNames"],"mappings":";;;;;AAOO,MAAMA,IAAe,CAAC,SAAS,UAAU,OAAO,GAG1CC,IAAwB,CAAC,WAAW,UAAU,GAG9CC,IAAgB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AACD,GAsBMC,IAAoD;AAAA,EACzD,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,2BAA2B;AAAA,EAC3B,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AACZ,GAMaC,IAASC,EAGpB,CAAC,EAAE,OAAAC,IAAQ,WAAW,WAAAC,GAAW,GAAGC,EAAA,GAAQC,MAAQ;AACrD,QAAMC,IAAcP,EAAUG,CAAK,GAO7BK,IACLD,MAAgB,WACbE,EAAE,SAP4D;AAAA,IACjE,WAAW;AAAA,IACX,WAAW;AAAA,EAAA,EAKkBN,CAAK,KAAKA,CAAK,EAAE,IAC3C;AAEJ,SACC,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,GAAGN;AAAA,MACJ,OAAOE;AAAA,MACP,WAAWK,EAAWJ,GAAaJ,CAAS;AAAA,MAC5C,KAAAE;AAAA,IAAA;AAAA,EAAA;AAGH,CAAC;AAEDL,EAAO,cAAc;"}
|
package/components/card/index.js
CHANGED
|
@@ -4,12 +4,12 @@ import { forwardRef as x } from "react";
|
|
|
4
4
|
import { CardThumbnail as k } from "./card-thumbnail/index.js";
|
|
5
5
|
import { useMDSLink as A } from "../../utils/mds-context/index.js";
|
|
6
6
|
import { Text as c } from "../text/index.js";
|
|
7
|
-
import
|
|
7
|
+
import h from "classnames";
|
|
8
8
|
import { Badge as E } from "../badge/index.js";
|
|
9
9
|
import { StandaloneLink as g } from "../standalone-link/index.js";
|
|
10
|
-
import {
|
|
10
|
+
import { FlightIcon as L } from "../flight-icon/index.js";
|
|
11
11
|
import e from "./styles.module.css.js";
|
|
12
|
-
const
|
|
12
|
+
const f = x(
|
|
13
13
|
({
|
|
14
14
|
children: r,
|
|
15
15
|
className: o,
|
|
@@ -26,7 +26,7 @@ const h = x(
|
|
|
26
26
|
"div",
|
|
27
27
|
{
|
|
28
28
|
ref: b,
|
|
29
|
-
className:
|
|
29
|
+
className: h(
|
|
30
30
|
e.card,
|
|
31
31
|
{ [e.interactive]: u },
|
|
32
32
|
o
|
|
@@ -78,7 +78,7 @@ const h = x(
|
|
|
78
78
|
);
|
|
79
79
|
}
|
|
80
80
|
);
|
|
81
|
-
|
|
81
|
+
f.displayName = "Card";
|
|
82
82
|
const P = ({
|
|
83
83
|
badges: r,
|
|
84
84
|
description: o,
|
|
@@ -89,7 +89,7 @@ const P = ({
|
|
|
89
89
|
cta: s,
|
|
90
90
|
children: m,
|
|
91
91
|
showArrow: p
|
|
92
|
-
}) => /* @__PURE__ */ d("div", { className:
|
|
92
|
+
}) => /* @__PURE__ */ d("div", { className: h(e.content, { [e["has-thumbnail"]]: n }), children: [
|
|
93
93
|
n && /* @__PURE__ */ a(k, { ...n }),
|
|
94
94
|
/* @__PURE__ */ d("div", { className: e.contentLockup, children: [
|
|
95
95
|
/* @__PURE__ */ a(B, { children: i }),
|
|
@@ -107,7 +107,7 @@ const P = ({
|
|
|
107
107
|
onClickCapture: s.onClickCapture
|
|
108
108
|
}
|
|
109
109
|
),
|
|
110
|
-
p ? /* @__PURE__ */ a("div", { className: e.arrow, children: /* @__PURE__ */ a(L, {}) }) : null,
|
|
110
|
+
p ? /* @__PURE__ */ a("div", { className: e.arrow, children: /* @__PURE__ */ a(L, { name: "arrow-right" }) }) : null,
|
|
111
111
|
m
|
|
112
112
|
] })
|
|
113
113
|
] }), y = ({
|
|
@@ -152,9 +152,9 @@ const P = ({
|
|
|
152
152
|
children: r
|
|
153
153
|
}
|
|
154
154
|
) : null, D = ({ children: r }) => r ? /* @__PURE__ */ a(c.Body, { tag: "span", size: "200", className: e.subheading, color: "primary", children: r }) : null, T = ({ children: r }) => r ? typeof r == "string" ? /* @__PURE__ */ a(c.Body, { tag: "span", size: "200", color: "primary", children: r }) : /* @__PURE__ */ a(v, { children: r }) : null, j = ({ badges: r }) => r && r.length > 0 ? /* @__PURE__ */ a("div", { className: e.badges, children: r.map((o) => /* @__PURE__ */ a(E, { ...o }, o.text)) }) : null;
|
|
155
|
-
|
|
155
|
+
f.displayName = "Card";
|
|
156
156
|
export {
|
|
157
|
-
|
|
157
|
+
f as Card,
|
|
158
158
|
P as CardContent
|
|
159
159
|
};
|
|
160
160
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/card/index.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, type PropsWithChildren } from 'react'\nimport type { CardContentProps, CardProps, CardCtaProps } from './types'\nimport { CardThumbnail } from './card-thumbnail'\nimport { useMDSLink } from '../../utils/mds-context'\nimport { Text } from '../text'\nimport classNames from 'classnames'\nimport { Badge } from '../badge'\nimport { StandaloneLink } from '../standalone-link'\nimport { IconArrowRight24 } from '@hashicorp/flight-icons/svg-react/arrow-right-24'\nimport s from './styles.module.css'\n\nconst Card = forwardRef<HTMLDivElement, CardProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tcontent,\n\t\t\tctaLabel,\n\t\t\thref,\n\t\t\tstandaloneLink,\n\t\t\tisExternal,\n\t\t\tonClickCapture,\n\t\t\t'aria-label': ariaLabel,\n\t\t},\n\t\tref\n\t) => {\n\t\tconst Link = useMDSLink()\n\n\t\tconst isCardLink = href && !ctaLabel\n\n\t\tconst linkProps = isExternal\n\t\t\t? { target: '_blank', rel: 'noopener noreferrer' }\n\t\t\t: {}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts.card,\n\t\t\t\t\t{ [s.interactive]: isCardLink },\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{isCardLink && (\n\t\t\t\t\t<Link\n\t\t\t\t\t\thref={href}\n\t\t\t\t\t\tclassName={s.link}\n\t\t\t\t\t\tdraggable=\"false\"\n\t\t\t\t\t\tonClickCapture={onClickCapture}\n\t\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\t\t{...linkProps}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{content && (\n\t\t\t\t\t<CardContent\n\t\t\t\t\t\tbadges={content.badges}\n\t\t\t\t\t\tdescription={content.description}\n\t\t\t\t\t\teyebrow={content.eyebrow}\n\t\t\t\t\t\theading={content.heading}\n\t\t\t\t\t\tsubheading={content.subheading}\n\t\t\t\t\t\tthumbnail={content.thumbnail}\n\t\t\t\t\t\tshowArrow={content.showArrow && !!isCardLink}\n\t\t\t\t\t\tcta={{\n\t\t\t\t\t\t\tctaLabel,\n\t\t\t\t\t\t\thref,\n\t\t\t\t\t\t\tstandaloneLink,\n\t\t\t\t\t\t\tonClickCapture,\n\t\t\t\t\t\t\tisExternal,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{children}\n\t\t\t\t{children && (\n\t\t\t\t\t<CardCta\n\t\t\t\t\t\tctaLabel={ctaLabel}\n\t\t\t\t\t\thref={href}\n\t\t\t\t\t\tstandaloneLink={standaloneLink}\n\t\t\t\t\t\tonClickCapture={onClickCapture}\n\t\t\t\t\t\tisExternal={isExternal}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t)\n\t}\n)\n\nCard.displayName = 'Card'\n\nexport const CardContent = ({\n\tbadges,\n\tdescription,\n\teyebrow,\n\theading,\n\tthumbnail,\n\tsubheading,\n\tcta,\n\tchildren,\n\tshowArrow,\n}: CardContentProps) => {\n\treturn (\n\t\t<div className={classNames(s.content, { [s['has-thumbnail']]: thumbnail })}>\n\t\t\t{thumbnail && <CardThumbnail {...thumbnail} />}\n\t\t\t<div className={s.contentLockup}>\n\t\t\t\t<CardEyebrow>{eyebrow}</CardEyebrow>\n\t\t\t\t<CardHeading>{heading}</CardHeading>\n\t\t\t\t<CardSubheading>{subheading}</CardSubheading>\n\t\t\t\t<CardDescription>{description}</CardDescription>\n\t\t\t\t<Badges badges={badges} />\n\t\t\t\t{cta && (\n\t\t\t\t\t<CardCta\n\t\t\t\t\t\tctaLabel={cta.ctaLabel}\n\t\t\t\t\t\thref={cta.href}\n\t\t\t\t\t\tstandaloneLink={cta.standaloneLink}\n\t\t\t\t\t\tisExternal={cta.isExternal}\n\t\t\t\t\t\tonClickCapture={cta.onClickCapture}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{showArrow ? (\n\t\t\t\t\t<div className={s.arrow}>\n\t\t\t\t\t\t<IconArrowRight24 />\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\nconst CardCta = ({\n\thref,\n\tctaLabel,\n\tstandaloneLink,\n\tisExternal,\n\tonClickCapture,\n}: CardCtaProps) => {\n\tconst isCardLink = href && !ctaLabel\n\n\tif (standaloneLink) {\n\t\tconst standaloneLinkProps = {\n\t\t\t...standaloneLink,\n\t\t\ticon: standaloneLink.icon || 'chevron-right',\n\t\t\ticonPosition: standaloneLink.iconPosition || 'trailing',\n\t\t}\n\n\t\treturn <StandaloneLink className={s.cta} {...standaloneLinkProps} />\n\t}\n\n\tif (href && !isCardLink && ctaLabel) {\n\t\treturn (\n\t\t\t<StandaloneLink\n\t\t\t\tclassName={s.cta}\n\t\t\t\ttext={ctaLabel}\n\t\t\t\thref={href}\n\t\t\t\ticon=\"chevron-right\"\n\t\t\t\ticonPosition=\"trailing\"\n\t\t\t\tcolor=\"secondary\"\n\t\t\t\tonClickCapture={onClickCapture}\n\t\t\t\tisHrefExternal={isExternal}\n\t\t\t/>\n\t\t)\n\t}\n\n\treturn null\n}\n\nconst CardEyebrow = ({ children }: PropsWithChildren) => {\n\tif (!children) {\n\t\treturn null\n\t}\n\n\tif (Array.isArray(children)) {\n\t\treturn <CardEyebrowList items={Array.from(children)} />\n\t}\n\n\treturn <CardEyebrowText>{children}</CardEyebrowText>\n}\n\nconst CardEyebrowList = ({ items }: { items: string[] }) => (\n\t<ul className={s.meta}>\n\t\t{items.map((item, idx) => (\n\t\t\t<li key={item}>\n\t\t\t\t<CardEyebrowText>{item}</CardEyebrowText>\n\t\t\t\t{idx < items.length - 1 ? (\n\t\t\t\t\t<span className={s.metaSeparator} aria-hidden={true}>\n\t\t\t\t\t\t|\n\t\t\t\t\t</span>\n\t\t\t\t) : null}\n\t\t\t</li>\n\t\t))}\n\t</ul>\n)\n\nconst CardEyebrowText = ({ children }: PropsWithChildren) =>\n\tchildren ? (\n\t\t<Text.Label color=\"faint\" weight=\"medium\">\n\t\t\t{children}\n\t\t</Text.Label>\n\t) : null\n\nconst CardHeading = ({ children }: PropsWithChildren) =>\n\tchildren ? (\n\t\t<Text.DisplayExpressive\n\t\t\ttag=\"span\"\n\t\t\tsize=\"200\"\n\t\t\tweight=\"semibold\"\n\t\t\tcolor=\"strong\"\n\t\t>\n\t\t\t{children}\n\t\t</Text.DisplayExpressive>\n\t) : null\n\nconst CardSubheading = ({ children }: PropsWithChildren) =>\n\tchildren ? (\n\t\t<Text.Body tag=\"span\" size=\"200\" className={s.subheading} color=\"primary\">\n\t\t\t{children}\n\t\t</Text.Body>\n\t) : null\n\nconst CardDescription = ({ children }: PropsWithChildren) => {\n\tif (!children) {\n\t\treturn null\n\t}\n\n\tif (typeof children === 'string') {\n\t\treturn (\n\t\t\t<Text.Body tag=\"span\" size=\"200\" color=\"primary\">\n\t\t\t\t{children}\n\t\t\t</Text.Body>\n\t\t)\n\t}\n\n\treturn <>{children}</>\n}\n\nconst Badges = ({ badges }: { badges: CardContentProps['badges'] }) =>\n\tbadges && badges.length > 0 ? (\n\t\t<div className={s.badges}>\n\t\t\t{badges.map((badge) => (\n\t\t\t\t<Badge key={badge.text} {...badge} />\n\t\t\t))}\n\t\t</div>\n\t) : null\n\nCard.displayName = 'Card'\nexport { Card }\n"],"names":["Card","forwardRef","children","className","content","ctaLabel","href","standaloneLink","isExternal","onClickCapture","ariaLabel","ref","Link","useMDSLink","isCardLink","jsxs","classNames","s","jsx","linkProps","CardContent","CardCta","badges","description","eyebrow","heading","thumbnail","subheading","cta","showArrow","CardThumbnail","CardEyebrow","CardHeading","CardSubheading","CardDescription","IconArrowRight24","standaloneLinkProps","StandaloneLink","CardEyebrowList","CardEyebrowText","items","item","idx","Text","Fragment","Badges","badge","Badge"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/card/index.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, type PropsWithChildren } from 'react'\nimport type { CardContentProps, CardProps, CardCtaProps } from './types'\nimport { CardThumbnail } from './card-thumbnail'\nimport { useMDSLink } from '../../utils/mds-context'\nimport { Text } from '../text'\nimport classNames from 'classnames'\nimport { Badge } from '../badge'\nimport { StandaloneLink } from '../standalone-link'\nimport { FlightIcon } from '../flight-icon'\nimport s from './styles.module.css'\n\nconst Card = forwardRef<HTMLDivElement, CardProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tcontent,\n\t\t\tctaLabel,\n\t\t\thref,\n\t\t\tstandaloneLink,\n\t\t\tisExternal,\n\t\t\tonClickCapture,\n\t\t\t'aria-label': ariaLabel,\n\t\t},\n\t\tref\n\t) => {\n\t\tconst Link = useMDSLink()\n\n\t\tconst isCardLink = href && !ctaLabel\n\n\t\tconst linkProps = isExternal\n\t\t\t? { target: '_blank', rel: 'noopener noreferrer' }\n\t\t\t: {}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts.card,\n\t\t\t\t\t{ [s.interactive]: isCardLink },\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{isCardLink && (\n\t\t\t\t\t<Link\n\t\t\t\t\t\thref={href}\n\t\t\t\t\t\tclassName={s.link}\n\t\t\t\t\t\tdraggable=\"false\"\n\t\t\t\t\t\tonClickCapture={onClickCapture}\n\t\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\t\t{...linkProps}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{content && (\n\t\t\t\t\t<CardContent\n\t\t\t\t\t\tbadges={content.badges}\n\t\t\t\t\t\tdescription={content.description}\n\t\t\t\t\t\teyebrow={content.eyebrow}\n\t\t\t\t\t\theading={content.heading}\n\t\t\t\t\t\tsubheading={content.subheading}\n\t\t\t\t\t\tthumbnail={content.thumbnail}\n\t\t\t\t\t\tshowArrow={content.showArrow && !!isCardLink}\n\t\t\t\t\t\tcta={{\n\t\t\t\t\t\t\tctaLabel,\n\t\t\t\t\t\t\thref,\n\t\t\t\t\t\t\tstandaloneLink,\n\t\t\t\t\t\t\tonClickCapture,\n\t\t\t\t\t\t\tisExternal,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{children}\n\t\t\t\t{children && (\n\t\t\t\t\t<CardCta\n\t\t\t\t\t\tctaLabel={ctaLabel}\n\t\t\t\t\t\thref={href}\n\t\t\t\t\t\tstandaloneLink={standaloneLink}\n\t\t\t\t\t\tonClickCapture={onClickCapture}\n\t\t\t\t\t\tisExternal={isExternal}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t)\n\t}\n)\n\nCard.displayName = 'Card'\n\nexport const CardContent = ({\n\tbadges,\n\tdescription,\n\teyebrow,\n\theading,\n\tthumbnail,\n\tsubheading,\n\tcta,\n\tchildren,\n\tshowArrow,\n}: CardContentProps) => {\n\treturn (\n\t\t<div className={classNames(s.content, { [s['has-thumbnail']]: thumbnail })}>\n\t\t\t{thumbnail && <CardThumbnail {...thumbnail} />}\n\t\t\t<div className={s.contentLockup}>\n\t\t\t\t<CardEyebrow>{eyebrow}</CardEyebrow>\n\t\t\t\t<CardHeading>{heading}</CardHeading>\n\t\t\t\t<CardSubheading>{subheading}</CardSubheading>\n\t\t\t\t<CardDescription>{description}</CardDescription>\n\t\t\t\t<Badges badges={badges} />\n\t\t\t\t{cta && (\n\t\t\t\t\t<CardCta\n\t\t\t\t\t\tctaLabel={cta.ctaLabel}\n\t\t\t\t\t\thref={cta.href}\n\t\t\t\t\t\tstandaloneLink={cta.standaloneLink}\n\t\t\t\t\t\tisExternal={cta.isExternal}\n\t\t\t\t\t\tonClickCapture={cta.onClickCapture}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{showArrow ? (\n\t\t\t\t\t<div className={s.arrow}>\n\t\t\t\t\t\t<FlightIcon name=\"arrow-right\" />\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\nconst CardCta = ({\n\thref,\n\tctaLabel,\n\tstandaloneLink,\n\tisExternal,\n\tonClickCapture,\n}: CardCtaProps) => {\n\tconst isCardLink = href && !ctaLabel\n\n\tif (standaloneLink) {\n\t\tconst standaloneLinkProps = {\n\t\t\t...standaloneLink,\n\t\t\ticon: standaloneLink.icon || 'chevron-right',\n\t\t\ticonPosition: standaloneLink.iconPosition || 'trailing',\n\t\t}\n\n\t\treturn <StandaloneLink className={s.cta} {...standaloneLinkProps} />\n\t}\n\n\tif (href && !isCardLink && ctaLabel) {\n\t\treturn (\n\t\t\t<StandaloneLink\n\t\t\t\tclassName={s.cta}\n\t\t\t\ttext={ctaLabel}\n\t\t\t\thref={href}\n\t\t\t\ticon=\"chevron-right\"\n\t\t\t\ticonPosition=\"trailing\"\n\t\t\t\tcolor=\"secondary\"\n\t\t\t\tonClickCapture={onClickCapture}\n\t\t\t\tisHrefExternal={isExternal}\n\t\t\t/>\n\t\t)\n\t}\n\n\treturn null\n}\n\nconst CardEyebrow = ({ children }: PropsWithChildren) => {\n\tif (!children) {\n\t\treturn null\n\t}\n\n\tif (Array.isArray(children)) {\n\t\treturn <CardEyebrowList items={Array.from(children)} />\n\t}\n\n\treturn <CardEyebrowText>{children}</CardEyebrowText>\n}\n\nconst CardEyebrowList = ({ items }: { items: string[] }) => (\n\t<ul className={s.meta}>\n\t\t{items.map((item, idx) => (\n\t\t\t<li key={item}>\n\t\t\t\t<CardEyebrowText>{item}</CardEyebrowText>\n\t\t\t\t{idx < items.length - 1 ? (\n\t\t\t\t\t<span className={s.metaSeparator} aria-hidden={true}>\n\t\t\t\t\t\t|\n\t\t\t\t\t</span>\n\t\t\t\t) : null}\n\t\t\t</li>\n\t\t))}\n\t</ul>\n)\n\nconst CardEyebrowText = ({ children }: PropsWithChildren) =>\n\tchildren ? (\n\t\t<Text.Label color=\"faint\" weight=\"medium\">\n\t\t\t{children}\n\t\t</Text.Label>\n\t) : null\n\nconst CardHeading = ({ children }: PropsWithChildren) =>\n\tchildren ? (\n\t\t<Text.DisplayExpressive\n\t\t\ttag=\"span\"\n\t\t\tsize=\"200\"\n\t\t\tweight=\"semibold\"\n\t\t\tcolor=\"strong\"\n\t\t>\n\t\t\t{children}\n\t\t</Text.DisplayExpressive>\n\t) : null\n\nconst CardSubheading = ({ children }: PropsWithChildren) =>\n\tchildren ? (\n\t\t<Text.Body tag=\"span\" size=\"200\" className={s.subheading} color=\"primary\">\n\t\t\t{children}\n\t\t</Text.Body>\n\t) : null\n\nconst CardDescription = ({ children }: PropsWithChildren) => {\n\tif (!children) {\n\t\treturn null\n\t}\n\n\tif (typeof children === 'string') {\n\t\treturn (\n\t\t\t<Text.Body tag=\"span\" size=\"200\" color=\"primary\">\n\t\t\t\t{children}\n\t\t\t</Text.Body>\n\t\t)\n\t}\n\n\treturn <>{children}</>\n}\n\nconst Badges = ({ badges }: { badges: CardContentProps['badges'] }) =>\n\tbadges && badges.length > 0 ? (\n\t\t<div className={s.badges}>\n\t\t\t{badges.map((badge) => (\n\t\t\t\t<Badge key={badge.text} {...badge} />\n\t\t\t))}\n\t\t</div>\n\t) : null\n\nCard.displayName = 'Card'\nexport { Card }\n"],"names":["Card","forwardRef","children","className","content","ctaLabel","href","standaloneLink","isExternal","onClickCapture","ariaLabel","ref","Link","useMDSLink","isCardLink","jsxs","classNames","s","jsx","linkProps","CardContent","CardCta","badges","description","eyebrow","heading","thumbnail","subheading","cta","showArrow","CardThumbnail","CardEyebrow","CardHeading","CardSubheading","CardDescription","FlightIcon","standaloneLinkProps","StandaloneLink","CardEyebrowList","CardEyebrowText","items","item","idx","Text","Fragment","Badges","badge","Badge"],"mappings":"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"}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import { jsxs as i, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import c from "classnames";
|
|
3
|
-
import {
|
|
3
|
+
import { FlightIcon as n } from "../../flight-icon/index.js";
|
|
4
4
|
import s from "./form-error.module.css.js";
|
|
5
|
-
const
|
|
5
|
+
const t = ({ children: e, ...o }) => /* @__PURE__ */ r("p", { className: s.message, ...o, children: e }), l = ({ children: e, className: o, controlId: m, ...a }) => /* @__PURE__ */ i(
|
|
6
6
|
"div",
|
|
7
7
|
{
|
|
8
8
|
className: c(s.error, o),
|
|
9
9
|
id: m ? `error-${m}` : void 0,
|
|
10
10
|
...a,
|
|
11
11
|
children: [
|
|
12
|
-
/* @__PURE__ */ r(
|
|
13
|
-
/* @__PURE__ */ r("div", { className: s.content, children: /* @__PURE__ */ r(
|
|
12
|
+
/* @__PURE__ */ r(n, { name: "diamond-fill", className: s.icon }),
|
|
13
|
+
/* @__PURE__ */ r("div", { className: s.content, children: /* @__PURE__ */ r(t, { children: e }) })
|
|
14
14
|
]
|
|
15
15
|
}
|
|
16
16
|
);
|
|
17
|
-
|
|
17
|
+
l.displayName = "Error";
|
|
18
18
|
export {
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
l as Error,
|
|
20
|
+
t as ErrorMessage
|
|
21
21
|
};
|
|
22
22
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/form/error/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { ReactNode } from 'react'\nimport {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/form/error/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { ReactNode } from 'react'\nimport { FlightIcon } from '../../flight-icon'\nimport s from './form-error.module.css'\n\ninterface ErrorMessageProps {\n\tchildren: ReactNode\n}\n\nconst ErrorMessage = ({ children, ...rest }: ErrorMessageProps) => {\n\treturn (\n\t\t<p className={s.message} {...rest}>\n\t\t\t{children}\n\t\t</p>\n\t)\n}\n\ninterface ErrorProps {\n\tchildren: ReactNode\n\tclassName?: string\n\tcontrolId?: string\n}\n\nconst Error = ({ children, className, controlId, ...rest }: ErrorProps) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(s.error, className)}\n\t\t\tid={controlId ? `error-${controlId}` : undefined}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<FlightIcon name=\"diamond-fill\" className={s.icon} />\n\t\t\t<div className={s.content}>\n\t\t\t\t<ErrorMessage>{children}</ErrorMessage>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\nError.displayName = 'Error'\n\nexport type { ErrorProps, ErrorMessageProps }\nexport { Error, ErrorMessage }\n"],"names":["ErrorMessage","children","rest","Error","className","controlId","jsxs","classNames","jsx","FlightIcon"],"mappings":";;;;AASA,MAAMA,IAAe,CAAC,EAAE,UAAAC,GAAU,GAAGC,0BAElC,KAAA,EAAE,WAAW,EAAE,SAAU,GAAGA,GAC3B,UAAAD,GACF,GAUIE,IAAQ,CAAC,EAAE,UAAAF,GAAU,WAAAG,GAAW,WAAAC,GAAW,GAAGH,QAElD,gBAAAI;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC,EAAW,EAAE,OAAOH,CAAS;AAAA,IACxC,IAAIC,IAAY,SAASA,CAAS,KAAK;AAAA,IACtC,GAAGH;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAM,EAACC,GAAA,EAAW,MAAK,gBAAe,WAAW,EAAE,MAAM;AAAA,MACnD,gBAAAD,EAAC,SAAI,WAAW,EAAE,SACjB,UAAA,gBAAAA,EAACR,GAAA,EAAc,UAAAC,GAAS,EAAA,CACzB;AAAA,IAAA;AAAA,EAAA;AAAA;AAKHE,EAAM,cAAc;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
interface FieldsetProps {
|
|
2
|
+
interface FieldsetProps extends React.PropsWithChildren {
|
|
3
3
|
isRequired?: boolean;
|
|
4
4
|
isOptional?: boolean;
|
|
5
5
|
legend?: ReactNode;
|
|
@@ -7,7 +7,6 @@ interface FieldsetProps {
|
|
|
7
7
|
error?: ReactNode;
|
|
8
8
|
className?: string;
|
|
9
9
|
layout?: 'vertical' | 'horizontal';
|
|
10
|
-
children: ReactNode;
|
|
11
10
|
id?: string;
|
|
12
11
|
testingKey?: string;
|
|
13
12
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/form/fieldset/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { useId } from 'react'\nimport { Legend } from '../legend'\nimport { HelperText } from '../helper-text'\nimport { Error } from '../error'\nimport type { ReactNode } from 'react'\nimport s from './form-fieldset.module.css'\n\ninterface FieldsetProps {\n\tisRequired?: boolean\n\tisOptional?: boolean\n\tlegend?: ReactNode\n\thelperText?: ReactNode\n\terror?: ReactNode\n\tclassName?: string\n\tlayout?: 'vertical' | 'horizontal'\n\
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/form/fieldset/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { useId } from 'react'\nimport { Legend } from '../legend'\nimport { HelperText } from '../helper-text'\nimport { Error } from '../error'\nimport type { ReactNode } from 'react'\nimport s from './form-fieldset.module.css'\n\ninterface FieldsetProps extends React.PropsWithChildren {\n\tisRequired?: boolean\n\tisOptional?: boolean\n\tlegend?: ReactNode\n\thelperText?: ReactNode\n\terror?: ReactNode\n\tclassName?: string\n\tlayout?: 'vertical' | 'horizontal'\n\tid?: string\n\ttestingKey?: string\n}\n\nconst Fieldset = ({\n\tisRequired,\n\tisOptional,\n\tlegend,\n\thelperText,\n\terror,\n\tclassName,\n\tlayout,\n\tchildren,\n\tid,\n\ttestingKey,\n\t...rest\n}: FieldsetProps) => {\n\tconst generatedId = useId()\n\tconst fieldsetId = id ?? generatedId\n\n\treturn (\n\t\t<fieldset\n\t\t\tclassName={classNames(s.group, layout ? s[layout] : null, className)}\n\t\t\tid={fieldsetId}\n\t\t\tdata-testid={testingKey}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{legend && (\n\t\t\t\t<Legend\n\t\t\t\t\tisOptional={isOptional}\n\t\t\t\t\tisRequired={isRequired}\n\t\t\t\t\tclassName={s.legend}\n\t\t\t\t>\n\t\t\t\t\t{legend}\n\t\t\t\t</Legend>\n\t\t\t)}\n\t\t\t{helperText && (\n\t\t\t\t<HelperText\n\t\t\t\t\tcontrolId={`${fieldsetId}-help`}\n\t\t\t\t\tclassName={s['helper-text']}\n\t\t\t\t>\n\t\t\t\t\t{helperText}\n\t\t\t\t</HelperText>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tclassName={classNames(s['control-fields-wrapper'], {\n\t\t\t\t\t[s['has-legend']]: legend,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t\t{error && (\n\t\t\t\t<Error controlId={`${fieldsetId}-error`} className={s.error}>\n\t\t\t\t\t{error}\n\t\t\t\t</Error>\n\t\t\t)}\n\t\t</fieldset>\n\t)\n}\n\nFieldset.displayName = 'Fieldset'\n\nexport type { FieldsetProps }\nexport { Fieldset }\n"],"names":["Fieldset","isRequired","isOptional","legend","helperText","error","className","layout","children","id","testingKey","rest","generatedId","useId","fieldsetId","jsxs","classNames","s","jsx","Legend","HelperText","Error"],"mappings":";;;;;;;AAoBA,MAAMA,IAAW,CAAC;AAAA,EACjB,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGC;AACJ,MAAqB;AACpB,QAAMC,IAAcC,EAAA,GACdC,IAAaL,KAAMG;AAEzB,SACC,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAWC,EAAWC,EAAE,OAAOV,IAASU,EAAEV,CAAM,IAAI,MAAMD,CAAS;AAAA,MACnE,IAAIQ;AAAA,MACJ,eAAaJ;AAAA,MACZ,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAR,KACA,gBAAAe;AAAA,UAACC;AAAA,UAAA;AAAA,YACA,YAAAjB;AAAA,YACA,YAAAD;AAAA,YACA,WAAWgB,EAAE;AAAA,YAEZ,UAAAd;AAAA,UAAA;AAAA,QAAA;AAAA,QAGFC,KACA,gBAAAc;AAAA,UAACE;AAAA,UAAA;AAAA,YACA,WAAW,GAAGN,CAAU;AAAA,YACxB,WAAWG,EAAE,aAAa;AAAA,YAEzB,UAAAb;AAAA,UAAA;AAAA,QAAA;AAAA,QAGH,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAWF,EAAWC,EAAE,wBAAwB,GAAG;AAAA,cAClD,CAACA,EAAE,YAAY,CAAC,GAAGd;AAAA,YAAA,CACnB;AAAA,YAEA,UAAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAEDH,KACA,gBAAAa,EAACG,GAAA,EAAM,WAAW,GAAGP,CAAU,UAAU,WAAWG,EAAE,OACpD,UAAAZ,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIJ;AAEAL,EAAS,cAAc;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
@
|
|
2
|
-
@
|
|
1
|
+
@use '../../../styles/mixins/button.scss' as *;
|
|
2
|
+
@use '../../../../../mds-tokens/src/helper-classes/typography' as *;
|
|
3
3
|
|
|
4
4
|
.file-input {
|
|
5
5
|
@extend .mds-typography-legacy-body-200;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { HTMLProps, ReactNode } from 'react';
|
|
2
|
+
import { FieldsetProps } from '../fieldset';
|
|
3
3
|
interface RadioBaseProps {
|
|
4
4
|
id: string;
|
|
5
5
|
required?: boolean;
|
|
@@ -28,9 +28,7 @@ declare const RadioField: {
|
|
|
28
28
|
({ isInvalid, isLoading, isRequired, isOptional, id, label, helperText, error, field, className, testingKey, ...rest }: RadioFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
29
29
|
displayName: string;
|
|
30
30
|
};
|
|
31
|
-
|
|
32
|
-
children: ReactNode;
|
|
33
|
-
}
|
|
31
|
+
type RadioGroupProps = FieldsetProps;
|
|
34
32
|
declare const RadioGroup: {
|
|
35
33
|
Root: {
|
|
36
34
|
({ layout, legend, isOptional, isRequired, children, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/form/radio/index.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/form/radio/index.tsx"],"sourcesContent":["import { useId, type HTMLProps, type ReactNode } from 'react'\nimport { Field } from '../field'\nimport { Fieldset, type FieldsetProps } from '../fieldset'\nimport classNames from 'classnames'\nimport s from './form-radio.module.scss'\n\ninterface RadioBaseProps {\n\tid: string\n\trequired?: boolean\n\tfield: HTMLProps<HTMLInputElement>\n\tclassName?: string\n\ttestingKey?: string\n}\n\nconst RadioBase = ({\n\tid,\n\trequired,\n\tfield,\n\tclassName,\n\ttestingKey,\n}: RadioBaseProps) => {\n\treturn (\n\t\t<input\n\t\t\tid={id}\n\t\t\ttype=\"radio\"\n\t\t\tclassName={classNames(s.radio, className)}\n\t\t\trequired={required}\n\t\t\tdata-testid={testingKey}\n\t\t\t{...field}\n\t\t/>\n\t)\n}\n\nRadioBase.displayName = 'RadioBase'\n\ninterface RadioFieldProps {\n\tisInvalid?: boolean\n\tisLoading?: boolean\n\tisRequired?: boolean\n\tisOptional?: boolean\n\tid?: string\n\tlabel?: ReactNode\n\thelperText?: ReactNode\n\terror?: ReactNode\n\tfield: HTMLProps<HTMLInputElement>\n\tclassName?: string\n\ttestingKey?: string\n}\n\nconst RadioField = ({\n\tisInvalid,\n\tisLoading,\n\tisRequired,\n\tisOptional,\n\tid,\n\tlabel,\n\thelperText,\n\terror,\n\tfield,\n\tclassName,\n\ttestingKey,\n\t...rest\n}: RadioFieldProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\n\treturn (\n\t\t<Field\n\t\t\tlabel={label}\n\t\t\thelperText={helperText}\n\t\t\terror={error}\n\t\t\tisRequired={isRequired}\n\t\t\tisOptional={isOptional}\n\t\t\tid={inputId}\n\t\t\tlayout=\"flag\"\n\t\t\tclassName={className}\n\t\t>\n\t\t\t<RadioBase\n\t\t\t\tid={inputId}\n\t\t\t\trequired={isRequired}\n\t\t\t\tfield={{ ...field, 'aria-describedby': `error-${id}` }}\n\t\t\t\ttestingKey={testingKey}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t</Field>\n\t)\n}\n\nRadioField.displayName = 'RadioField'\n\ntype RadioGroupProps = FieldsetProps\n\nconst RadioGroupRoot = ({\n\tlayout = 'vertical',\n\tlegend,\n\tisOptional,\n\tisRequired,\n\tchildren,\n}: RadioGroupProps) => {\n\treturn (\n\t\t<Fieldset\n\t\t\tlayout={layout}\n\t\t\tlegend={legend}\n\t\t\tisOptional={isOptional}\n\t\t\tisRequired={isRequired}\n\t\t>\n\t\t\t{children}\n\t\t</Fieldset>\n\t)\n}\n\nRadioGroupRoot.displayName = 'RadioGroupRoot'\n\nconst RadioGroupField = (props: RadioFieldProps) => {\n\treturn (\n\t\t<RadioField\n\t\t\t{...props}\n\t\t\ttestingKey={props.testingKey}\n\t\t\tclassName={props.className}\n\t\t/>\n\t)\n}\n\nRadioGroupField.displayName = 'RadioGroupField'\n\nconst RadioGroup = {\n\tRoot: RadioGroupRoot,\n\tField: RadioGroupField,\n}\n\nexport { RadioGroup, RadioBase, RadioField }\n"],"names":["RadioBase","id","required","field","className","testingKey","jsx","classNames","s","RadioField","isInvalid","isLoading","isRequired","isOptional","label","helperText","error","rest","generatedId","useId","inputId","Field","RadioGroupRoot","layout","legend","children","Fieldset","RadioGroupField","props","RadioGroup"],"mappings":";;;;;;AAcA,MAAMA,IAAY,CAAC;AAAA,EAClB,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AACD,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,IAAAL;AAAA,IACA,MAAK;AAAA,IACL,WAAWM,EAAWC,EAAE,OAAOJ,CAAS;AAAA,IACxC,UAAAF;AAAA,IACA,eAAaG;AAAA,IACZ,GAAGF;AAAA,EAAA;AAAA;AAKPH,EAAU,cAAc;AAgBxB,MAAMS,IAAa,CAAC;AAAA,EACnB,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,IAAAZ;AAAA,EACA,OAAAa;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAb;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGY;AACJ,MAAuB;AACtB,QAAMC,IAAcC,EAAA,GACdC,IAAUnB,KAAMiB;AAEtB,SACC,gBAAAZ;AAAA,IAACe;AAAA,IAAA;AAAA,MACA,OAAAP;AAAA,MACA,YAAAC;AAAA,MACA,OAAAC;AAAA,MACA,YAAAJ;AAAA,MACA,YAAAC;AAAA,MACA,IAAIO;AAAA,MACJ,QAAO;AAAA,MACP,WAAAhB;AAAA,MAEA,UAAA,gBAAAE;AAAA,QAACN;AAAA,QAAA;AAAA,UACA,IAAIoB;AAAA,UACJ,UAAUR;AAAA,UACV,OAAO,EAAE,GAAGT,GAAO,oBAAoB,SAASF,CAAE,GAAA;AAAA,UAClD,YAAAI;AAAA,UACC,GAAGY;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;AAEAR,EAAW,cAAc;AAIzB,MAAMa,IAAiB,CAAC;AAAA,EACvB,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,YAAAX;AAAA,EACA,YAAAD;AAAA,EACA,UAAAa;AACD,MAEE,gBAAAnB;AAAA,EAACoB;AAAA,EAAA;AAAA,IACA,QAAAH;AAAA,IACA,QAAAC;AAAA,IACA,YAAAX;AAAA,IACA,YAAAD;AAAA,IAEC,UAAAa;AAAA,EAAA;AAAA;AAKJH,EAAe,cAAc;AAE7B,MAAMK,IAAkB,CAACC,MAEvB,gBAAAtB;AAAA,EAACG;AAAA,EAAA;AAAA,IACC,GAAGmB;AAAA,IACJ,YAAYA,EAAM;AAAA,IAClB,WAAWA,EAAM;AAAA,EAAA;AAAA;AAKpBD,EAAgB,cAAc;AAE9B,MAAME,IAAa;AAAA,EAClB,MAAMP;AAAA,EACN,OAAOK;AACR;"}
|