@fluidattacks/design 8.4.0 → 8.6.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/components/button/index.stories.d.ts +2 -1
- package/dist/components/button/styles.js +56 -39
- package/dist/components/button/types.d.ts +1 -1
- package/dist/components/collapsible-card/index.d.ts +5 -0
- package/dist/components/collapsible-card/index.js +41 -0
- package/dist/components/collapsible-card/index.stories.d.ts +7 -0
- package/dist/components/collapsible-card/index.test.d.ts +1 -0
- package/dist/components/collapsible-card/styles.d.ts +5 -0
- package/dist/components/collapsible-card/styles.js +48 -0
- package/dist/components/collapsible-card/types.d.ts +14 -0
- package/dist/components/comparison-table/index.d.ts +4 -0
- package/dist/components/comparison-table/index.js +32 -0
- package/dist/components/comparison-table/index.stories.d.ts +8 -0
- package/dist/components/comparison-table/index.test.d.ts +1 -0
- package/dist/components/comparison-table/styles.d.ts +8 -0
- package/dist/components/comparison-table/styles.js +114 -0
- package/dist/components/comparison-table/types.d.ts +33 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +286 -282
- package/package.json +1 -1
|
@@ -12,5 +12,6 @@ declare const Default: import('storybook/internal/csf').AnnotatedStoryFn<import(
|
|
|
12
12
|
declare const Secondary: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<IButtonStoryProps>>;
|
|
13
13
|
declare const Tertiary: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<IButtonStoryProps>>;
|
|
14
14
|
declare const Ghost: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<IButtonStoryProps>>;
|
|
15
|
-
|
|
15
|
+
declare const TextLink: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<IButtonStoryProps>>;
|
|
16
|
+
export { Default, Secondary, Tertiary, Ghost, TextLink };
|
|
16
17
|
export default config;
|
|
@@ -2,99 +2,116 @@ import { styled as n } from "styled-components";
|
|
|
2
2
|
import { variantBuilder as t } from "../@core/variants/utils.js";
|
|
3
3
|
import { BaseButtonComponent as i } from "../@core/styles.js";
|
|
4
4
|
const { getVariant: l } = t(
|
|
5
|
-
(
|
|
5
|
+
(r) => ({
|
|
6
6
|
ghost: `
|
|
7
7
|
background: transparent;
|
|
8
8
|
border: none;
|
|
9
|
-
color: ${
|
|
10
|
-
--btn-padding-x: ${
|
|
11
|
-
--btn-padding-y: ${
|
|
12
|
-
--btn-spacing: ${
|
|
9
|
+
color: ${r.palette.gray[800]};
|
|
10
|
+
--btn-padding-x: ${r.spacing[0.5]};
|
|
11
|
+
--btn-padding-y: ${r.spacing[0.625]};
|
|
12
|
+
--btn-spacing: ${r.spacing[0.25]};
|
|
13
13
|
|
|
14
14
|
&:disabled {
|
|
15
|
-
color: ${
|
|
15
|
+
color: ${r.palette.gray[400]};
|
|
16
16
|
cursor: not-allowed;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
&:hover:not([disabled]) {
|
|
20
|
-
background-color: ${
|
|
21
|
-
color: ${
|
|
20
|
+
background-color: ${r.palette.gray[100]};
|
|
21
|
+
color: ${r.palette.gray[800]};
|
|
22
22
|
}
|
|
23
23
|
`,
|
|
24
24
|
link: `
|
|
25
25
|
--btn-padding-x: 0;
|
|
26
26
|
--btn-padding-y: 0;
|
|
27
|
-
color: ${
|
|
27
|
+
color: ${r.palette.gray[800]};
|
|
28
28
|
|
|
29
29
|
&:hover {
|
|
30
|
-
color: ${
|
|
30
|
+
color: ${r.palette.gray[500]};
|
|
31
31
|
}
|
|
32
32
|
`,
|
|
33
33
|
primary: `
|
|
34
|
-
background: ${
|
|
34
|
+
background: ${r.palette.primary[500]};
|
|
35
35
|
border: none;
|
|
36
|
-
color: ${
|
|
37
|
-
--btn-spacing: ${
|
|
36
|
+
color: ${r.palette.white};
|
|
37
|
+
--btn-spacing: ${r.spacing[0.25]};
|
|
38
38
|
|
|
39
39
|
&:disabled {
|
|
40
|
-
background: ${
|
|
41
|
-
color: ${
|
|
40
|
+
background: ${r.palette.gray[200]};
|
|
41
|
+
color: ${r.palette.gray[400]};
|
|
42
42
|
cursor: not-allowed;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
&:hover:not([disabled]) {
|
|
46
|
-
background-color: ${
|
|
47
|
-
color: ${
|
|
46
|
+
background-color: ${r.palette.primary[700]};
|
|
47
|
+
color: ${r.palette.white};
|
|
48
48
|
}
|
|
49
49
|
`,
|
|
50
50
|
secondary: `
|
|
51
|
-
background: ${
|
|
51
|
+
background: ${r.palette.gray[800]};
|
|
52
52
|
border: none;
|
|
53
|
-
color: ${
|
|
54
|
-
--btn-spacing: ${
|
|
53
|
+
color: ${r.palette.white};
|
|
54
|
+
--btn-spacing: ${r.spacing[0.25]};
|
|
55
55
|
|
|
56
56
|
&:disabled {
|
|
57
|
-
background: ${
|
|
58
|
-
color: ${
|
|
57
|
+
background: ${r.palette.gray[200]};
|
|
58
|
+
color: ${r.palette.gray[400]};
|
|
59
59
|
cursor: not-allowed;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
&:hover:not([disabled]) {
|
|
63
|
-
background-color: ${
|
|
64
|
-
color: ${
|
|
63
|
+
background-color: ${r.palette.gray[600]};
|
|
64
|
+
color: ${r.palette.white};
|
|
65
65
|
}
|
|
66
66
|
`,
|
|
67
67
|
tertiary: `
|
|
68
68
|
background: transparent;
|
|
69
|
-
border: 1px solid ${
|
|
70
|
-
color: ${
|
|
71
|
-
--btn-spacing: ${
|
|
69
|
+
border: 1px solid ${r.palette.primary[500]};
|
|
70
|
+
color: ${r.palette.primary[500]};
|
|
71
|
+
--btn-spacing: ${r.spacing[0.25]};
|
|
72
72
|
|
|
73
73
|
&:disabled {
|
|
74
74
|
background: transparent;
|
|
75
|
-
border: 1px solid ${
|
|
76
|
-
color: ${
|
|
75
|
+
border: 1px solid ${r.palette.gray[200]};
|
|
76
|
+
color: ${r.palette.gray[300]};
|
|
77
77
|
cursor: not-allowed;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
&:hover:not([disabled]) {
|
|
81
|
-
background-color: ${
|
|
82
|
-
color: ${
|
|
81
|
+
background-color: ${r.palette.primary[500]};
|
|
82
|
+
color: ${r.palette.white};
|
|
83
|
+
}
|
|
84
|
+
`,
|
|
85
|
+
textLink: `
|
|
86
|
+
background: transparent;
|
|
87
|
+
border: none;
|
|
88
|
+
color: ${r.palette.primary[500]};
|
|
89
|
+
--btn-padding-x: 0;
|
|
90
|
+
--btn-padding-y: 0;
|
|
91
|
+
|
|
92
|
+
&:disabled {
|
|
93
|
+
color: ${r.palette.gray[300]};
|
|
94
|
+
cursor: not-allowed;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&:hover:not([disabled]) {
|
|
98
|
+
color: ${r.palette.primary[400]};
|
|
99
|
+
text-decoration: underline;
|
|
83
100
|
}
|
|
84
101
|
`
|
|
85
102
|
})
|
|
86
103
|
), c = n(i)`
|
|
87
|
-
${({ theme:
|
|
104
|
+
${({ theme: r, justify: o, $variant: a }) => `
|
|
88
105
|
align-items: center;
|
|
89
106
|
border-radius: var(--btn-spacing);
|
|
90
107
|
cursor: pointer;
|
|
91
108
|
display: inline-flex;
|
|
92
|
-
font-family: ${
|
|
93
|
-
font-size: ${
|
|
94
|
-
font-weight: ${
|
|
109
|
+
font-family: ${r.typography.type.primary};
|
|
110
|
+
font-size: ${r.typography.text.md};
|
|
111
|
+
font-weight: ${r.typography.weight.regular};
|
|
95
112
|
gap: var(--btn-spacing);
|
|
96
113
|
justify-content: ${o ?? "center"};
|
|
97
|
-
line-height: ${
|
|
114
|
+
line-height: ${r.spacing[1.25]};
|
|
98
115
|
padding: var(--btn-padding-y) var(--btn-padding-x);
|
|
99
116
|
position: relative;
|
|
100
117
|
text-align: start;
|
|
@@ -105,11 +122,11 @@ const { getVariant: l } = t(
|
|
|
105
122
|
text-decoration: underline;
|
|
106
123
|
}
|
|
107
124
|
|
|
108
|
-
@media screen and (max-width: ${
|
|
109
|
-
${
|
|
125
|
+
@media screen and (max-width: ${r.breakpoints.mobile}) {
|
|
126
|
+
${a === "link" || a === "textLink" ? "" : `--btn-padding-y: ${r.spacing[1]}`};
|
|
110
127
|
}
|
|
111
128
|
|
|
112
|
-
${l(
|
|
129
|
+
${l(r, a ?? "primary")}
|
|
113
130
|
`}
|
|
114
131
|
`;
|
|
115
132
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ButtonHTMLAttributes } from 'react';
|
|
2
2
|
import { IBorderModifiable, IDisplayModifiable, IIconModifiable, IMarginModifiable, IPaddingModifiable } from '../@core';
|
|
3
3
|
import { TPlace } from '../tooltip/types';
|
|
4
|
-
type TVariant = "primary" | "secondary" | "tertiary" | "ghost" | "link";
|
|
4
|
+
type TVariant = "primary" | "secondary" | "tertiary" | "ghost" | "link" | "textLink";
|
|
5
5
|
/**
|
|
6
6
|
* Button component props.
|
|
7
7
|
* @interface IButtonProps
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { PropsWithChildren } from 'react';
|
|
2
|
+
import { ICollapsibleCardProps } from './types';
|
|
3
|
+
declare const CollapsibleCard: ({ children, expanded, title, }: Readonly<PropsWithChildren<ICollapsibleCardProps>>) => JSX.Element;
|
|
4
|
+
export { CollapsibleCard };
|
|
5
|
+
export type { ICollapsibleCardProps };
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { jsxs as t, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { useId as p, useState as m, useCallback as C } from "react";
|
|
3
|
+
import { useTheme as h } from "styled-components";
|
|
4
|
+
import { CollapsibleContainer as f, CardToggle as u, CardTitle as g, CardContent as x } from "./styles.js";
|
|
5
|
+
import { Icon as T } from "../icon/index.js";
|
|
6
|
+
const k = ({
|
|
7
|
+
children: r,
|
|
8
|
+
expanded: i = !1,
|
|
9
|
+
title: a
|
|
10
|
+
}) => {
|
|
11
|
+
const l = h(), n = p(), [o, d] = m(i), c = C(() => {
|
|
12
|
+
d((s) => !s);
|
|
13
|
+
}, []);
|
|
14
|
+
return /* @__PURE__ */ t(f, { children: [
|
|
15
|
+
/* @__PURE__ */ t(
|
|
16
|
+
u,
|
|
17
|
+
{
|
|
18
|
+
"aria-controls": n,
|
|
19
|
+
"aria-expanded": o,
|
|
20
|
+
onClick: c,
|
|
21
|
+
type: "button",
|
|
22
|
+
children: [
|
|
23
|
+
/* @__PURE__ */ e(g, { children: a }),
|
|
24
|
+
/* @__PURE__ */ e(
|
|
25
|
+
T,
|
|
26
|
+
{
|
|
27
|
+
icon: o ? "chevron-up" : "chevron-down",
|
|
28
|
+
iconColor: l.palette.gray[700],
|
|
29
|
+
iconSize: "md",
|
|
30
|
+
iconType: "fa-light"
|
|
31
|
+
}
|
|
32
|
+
)
|
|
33
|
+
]
|
|
34
|
+
}
|
|
35
|
+
),
|
|
36
|
+
o ? /* @__PURE__ */ e(x, { id: n, children: r }) : void 0
|
|
37
|
+
] });
|
|
38
|
+
};
|
|
39
|
+
export {
|
|
40
|
+
k as CollapsibleCard
|
|
41
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Meta } from '@storybook/react-vite';
|
|
2
|
+
import { ICollapsibleCardProps } from './types';
|
|
3
|
+
declare const config: Meta;
|
|
4
|
+
declare const Default: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ICollapsibleCardProps>;
|
|
5
|
+
declare const Expanded: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ICollapsibleCardProps>;
|
|
6
|
+
export { Default, Expanded };
|
|
7
|
+
export default config;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
declare const CollapsibleContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
2
|
+
declare const CardToggle: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
|
|
3
|
+
declare const CardTitle: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
|
|
4
|
+
declare const CardContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
5
|
+
export { CardContent, CardTitle, CardToggle, CollapsibleContainer };
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { styled as n } from "styled-components";
|
|
2
|
+
const i = n.div`
|
|
3
|
+
${({ theme: a }) => `
|
|
4
|
+
background-color: ${a.palette.white};
|
|
5
|
+
border: 1px solid ${a.palette.gray[300]};
|
|
6
|
+
border-radius: ${a.spacing[0.25]};
|
|
7
|
+
`}
|
|
8
|
+
`, o = n.button`
|
|
9
|
+
${({ theme: a }) => `
|
|
10
|
+
align-items: center;
|
|
11
|
+
background: none;
|
|
12
|
+
border: none;
|
|
13
|
+
border-radius: ${a.spacing[0.25]};
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
display: flex;
|
|
16
|
+
gap: ${a.spacing[0.75]};
|
|
17
|
+
justify-content: space-between;
|
|
18
|
+
padding: ${a.spacing[0.75]};
|
|
19
|
+
width: 100%;
|
|
20
|
+
|
|
21
|
+
> :last-child {
|
|
22
|
+
flex-shrink: 0;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&[aria-expanded="true"] {
|
|
26
|
+
padding-bottom: ${a.spacing[0.625]};
|
|
27
|
+
}
|
|
28
|
+
`}
|
|
29
|
+
`, r = n.span`
|
|
30
|
+
${({ theme: a }) => `
|
|
31
|
+
color: ${a.palette.gray[400]};
|
|
32
|
+
font-family: ${a.typography.type.primary};
|
|
33
|
+
font-size: ${a.typography.text.sm};
|
|
34
|
+
font-weight: ${a.typography.weight.bold};
|
|
35
|
+
line-height: 18px;
|
|
36
|
+
text-align: start;
|
|
37
|
+
`}
|
|
38
|
+
`, p = n.div`
|
|
39
|
+
${({ theme: a }) => `
|
|
40
|
+
padding: 0 ${a.spacing[0.75]} ${a.spacing[0.75]};
|
|
41
|
+
`}
|
|
42
|
+
`;
|
|
43
|
+
export {
|
|
44
|
+
p as CardContent,
|
|
45
|
+
r as CardTitle,
|
|
46
|
+
o as CardToggle,
|
|
47
|
+
i as CollapsibleContainer
|
|
48
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Collapsible card component props. The content, passed as children, is
|
|
3
|
+
* mounted only while the card is open.
|
|
4
|
+
* @interface ICollapsibleCardProps
|
|
5
|
+
* @property { boolean } [expanded] - Whether the card starts open. Later
|
|
6
|
+
* changes to it are ignored; the card keeps its own open state.
|
|
7
|
+
* @property { string } title - Title shown in the header, which also names
|
|
8
|
+
* the toggle button.
|
|
9
|
+
*/
|
|
10
|
+
interface ICollapsibleCardProps {
|
|
11
|
+
expanded?: boolean;
|
|
12
|
+
title: string;
|
|
13
|
+
}
|
|
14
|
+
export type { ICollapsibleCardProps };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { IComparisonRow, IComparisonTableProps } from './types';
|
|
2
|
+
declare const ComparisonTable: ({ currentHeader, labelHeader, previousHeader, rows, }: Readonly<IComparisonTableProps>) => JSX.Element;
|
|
3
|
+
export { ComparisonTable };
|
|
4
|
+
export type { IComparisonRow, IComparisonTableProps };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { jsx as r, jsxs as n } from "react/jsx-runtime";
|
|
2
|
+
import { ComparisonFrame as p, StyledComparisonTable as m, ComparisonRow as u } from "./styles.js";
|
|
3
|
+
const i = "—", s = (e) => e === void 0 || e.trim() === "" ? void 0 : e, b = (e, o) => e === o ? "unchanged" : e === void 0 ? "added" : "changed", g = ({
|
|
4
|
+
currentHeader: e,
|
|
5
|
+
labelHeader: o,
|
|
6
|
+
previousHeader: h,
|
|
7
|
+
rows: l
|
|
8
|
+
}) => /* @__PURE__ */ r(p, { children: /* @__PURE__ */ n(m, { children: [
|
|
9
|
+
/* @__PURE__ */ r("thead", { children: /* @__PURE__ */ n("tr", { children: [
|
|
10
|
+
/* @__PURE__ */ r("th", { scope: "col", children: o }),
|
|
11
|
+
/* @__PURE__ */ r("th", { scope: "col", children: h }),
|
|
12
|
+
/* @__PURE__ */ r("th", { scope: "col", children: e })
|
|
13
|
+
] }) }),
|
|
14
|
+
/* @__PURE__ */ r("tbody", { children: l.map((t, a) => {
|
|
15
|
+
const c = s(t.previous), d = s(t.current);
|
|
16
|
+
return /* @__PURE__ */ n(
|
|
17
|
+
u,
|
|
18
|
+
{
|
|
19
|
+
$status: b(c, d),
|
|
20
|
+
children: [
|
|
21
|
+
/* @__PURE__ */ r("th", { scope: "row", children: t.label }),
|
|
22
|
+
/* @__PURE__ */ r("td", { children: c ?? i }),
|
|
23
|
+
/* @__PURE__ */ r("td", { children: d ?? i })
|
|
24
|
+
]
|
|
25
|
+
},
|
|
26
|
+
a
|
|
27
|
+
);
|
|
28
|
+
}) })
|
|
29
|
+
] }) });
|
|
30
|
+
export {
|
|
31
|
+
g as ComparisonTable
|
|
32
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Meta, StoryFn } from '@storybook/react-vite';
|
|
2
|
+
import { IComparisonTableProps } from './types';
|
|
3
|
+
declare const config: Meta;
|
|
4
|
+
declare const Default: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, IComparisonTableProps>;
|
|
5
|
+
declare const WithoutPrevious: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, IComparisonTableProps>;
|
|
6
|
+
declare const Narrow: StoryFn<IComparisonTableProps>;
|
|
7
|
+
export { Default, Narrow, WithoutPrevious };
|
|
8
|
+
export default config;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { TComparisonStatus } from './types';
|
|
2
|
+
interface IStyledComparisonRow {
|
|
3
|
+
$status: TComparisonStatus;
|
|
4
|
+
}
|
|
5
|
+
declare const ComparisonFrame: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
6
|
+
declare const StyledComparisonTable: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>>> & string;
|
|
7
|
+
declare const ComparisonRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "$status"> & IStyledComparisonRow, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "$status"> & IStyledComparisonRow, never>>> & string;
|
|
8
|
+
export { ComparisonFrame, ComparisonRow, StyledComparisonTable };
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import { styled as o } from "styled-components";
|
|
2
|
+
import { variantBuilder as r } from "../@core/variants/utils.js";
|
|
3
|
+
const { getVariant: i } = r(
|
|
4
|
+
(t) => {
|
|
5
|
+
const a = `
|
|
6
|
+
background-color: ${t.palette.warning[200]}26;
|
|
7
|
+
|
|
8
|
+
> th {
|
|
9
|
+
box-shadow: inset 2px 0 0 ${t.palette.warning[500]};
|
|
10
|
+
padding-left: calc(${t.spacing[0.625]} + 2px);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
> td:nth-of-type(2) {
|
|
14
|
+
color: ${t.palette.warning[600]};
|
|
15
|
+
font-weight: ${t.typography.weight.bold};
|
|
16
|
+
}
|
|
17
|
+
`;
|
|
18
|
+
return {
|
|
19
|
+
added: a,
|
|
20
|
+
changed: `
|
|
21
|
+
${a}
|
|
22
|
+
|
|
23
|
+
> td:nth-of-type(1) {
|
|
24
|
+
color: ${t.palette.gray[800]};
|
|
25
|
+
font-weight: ${t.typography.weight.bold};
|
|
26
|
+
}
|
|
27
|
+
`,
|
|
28
|
+
unchanged: ""
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
), l = o.div`
|
|
32
|
+
${({ theme: t }) => `
|
|
33
|
+
background-color: ${t.palette.white};
|
|
34
|
+
border: 1px solid ${t.palette.gray[100]};
|
|
35
|
+
border-radius: ${t.spacing[0.25]};
|
|
36
|
+
container-type: inline-size;
|
|
37
|
+
overflow: hidden;
|
|
38
|
+
`}
|
|
39
|
+
`, n = o.table`
|
|
40
|
+
${({ theme: t }) => `
|
|
41
|
+
border-collapse: collapse;
|
|
42
|
+
font-family: ${t.typography.type.primary};
|
|
43
|
+
font-size: ${t.typography.text.md};
|
|
44
|
+
line-height: ${t.spacing[1.25]};
|
|
45
|
+
table-layout: fixed;
|
|
46
|
+
width: 100%;
|
|
47
|
+
|
|
48
|
+
th,
|
|
49
|
+
td {
|
|
50
|
+
border-bottom: 1px solid ${t.palette.gray[200]};
|
|
51
|
+
border-right: 1px solid ${t.palette.gray[200]};
|
|
52
|
+
padding: 0 ${t.spacing[0.625]};
|
|
53
|
+
text-align: start;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
th:last-child,
|
|
57
|
+
td:last-child {
|
|
58
|
+
border-color: ${t.palette.gray[100]};
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
thead th {
|
|
62
|
+
background-color: ${t.palette.gray[600]};
|
|
63
|
+
color: ${t.palette.white};
|
|
64
|
+
font-weight: ${t.typography.weight.bold};
|
|
65
|
+
overflow: hidden;
|
|
66
|
+
padding-bottom: ${t.spacing[0.25]};
|
|
67
|
+
padding-top: ${t.spacing[0.25]};
|
|
68
|
+
white-space: pre;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
thead th:first-child {
|
|
72
|
+
width: 150px;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* Beside a 150px label column, a header line of about 80px only fits
|
|
76
|
+
down to a 330px table. Narrower, the label column gives width back to
|
|
77
|
+
the values and headers also wrap at spaces. A fixed-layout table
|
|
78
|
+
ignores min() on a cell width, hence the query rather than one rule. */
|
|
79
|
+
@container (max-width: 330px) {
|
|
80
|
+
thead th {
|
|
81
|
+
white-space: pre-line;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
thead th:first-child {
|
|
85
|
+
width: 40%;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
tbody tr {
|
|
90
|
+
height: ${t.spacing[1.75]};
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
tbody th,
|
|
94
|
+
tbody td {
|
|
95
|
+
color: ${t.palette.gray[600]};
|
|
96
|
+
font-weight: ${t.typography.weight.regular};
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
tbody tr:last-child > * {
|
|
100
|
+
border-bottom: none;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
tbody tr:last-child > td:last-child {
|
|
104
|
+
border-right: none;
|
|
105
|
+
}
|
|
106
|
+
`}
|
|
107
|
+
`, p = o.tr`
|
|
108
|
+
${({ $status: t, theme: a }) => i(a, t)}
|
|
109
|
+
`;
|
|
110
|
+
export {
|
|
111
|
+
l as ComparisonFrame,
|
|
112
|
+
p as ComparisonRow,
|
|
113
|
+
n as StyledComparisonTable
|
|
114
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Comparison table row.
|
|
3
|
+
* @interface IComparisonRow
|
|
4
|
+
* @property {string} current - Value after the change.
|
|
5
|
+
* @property {string} label - Name of the compared property.
|
|
6
|
+
* @property {string} [previous] - Value before the change. Leave it undefined
|
|
7
|
+
* when there is no previous value. A blank value counts as missing, and its
|
|
8
|
+
* cell shows an em dash.
|
|
9
|
+
*/
|
|
10
|
+
interface IComparisonRow {
|
|
11
|
+
current: string;
|
|
12
|
+
label: string;
|
|
13
|
+
previous?: string;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Comparison table component props. A row is highlighted when its previous
|
|
17
|
+
* and current values differ, which includes every row without a previous
|
|
18
|
+
* value. Headers break where they hold a "\n", and also wrap at spaces when
|
|
19
|
+
* the table is narrower than 330px.
|
|
20
|
+
* @interface IComparisonTableProps
|
|
21
|
+
* @property {string} currentHeader - Header of the current values column.
|
|
22
|
+
* @property {string} labelHeader - Header of the property names column.
|
|
23
|
+
* @property {string} previousHeader - Header of the previous values column.
|
|
24
|
+
* @property {IComparisonRow[]} rows - Rows to compare, in display order.
|
|
25
|
+
*/
|
|
26
|
+
interface IComparisonTableProps {
|
|
27
|
+
currentHeader: string;
|
|
28
|
+
labelHeader: string;
|
|
29
|
+
previousHeader: string;
|
|
30
|
+
rows: IComparisonRow[];
|
|
31
|
+
}
|
|
32
|
+
type TComparisonStatus = "added" | "changed" | "unchanged";
|
|
33
|
+
export type { IComparisonRow, IComparisonTableProps, TComparisonStatus };
|
package/dist/index.d.ts
CHANGED
|
@@ -12,7 +12,9 @@ export * from './components/checkbox';
|
|
|
12
12
|
export * from './components/circular-progress';
|
|
13
13
|
export * from './components/cloud-image';
|
|
14
14
|
export * from './components/code-snippet';
|
|
15
|
+
export * from './components/collapsible-card';
|
|
15
16
|
export * from './components/colors';
|
|
17
|
+
export * from './components/comparison-table';
|
|
16
18
|
export * from './components/conditions-dialog';
|
|
17
19
|
export * from './components/confirm-dialog';
|
|
18
20
|
export * from './components/container';
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import './assets/styles/global.css';/* empty css */
|
|
2
2
|
import { variantBuilder as t } from "./components/@core/variants/utils.js";
|
|
3
|
-
import { hiddenProps as
|
|
3
|
+
import { hiddenProps as m } from "./components/@core/constants.js";
|
|
4
4
|
import { BaseButtonComponent as x, BaseComponent as a, BaseSpanComponent as n, BaseTextComponent as i } from "./components/@core/styles.js";
|
|
5
|
-
import { getStyledConfig as l, setBorder as u, setDisplay as d, setInteraction as C, setMargin as g, setPadding as c, setPosition as S, setText as
|
|
6
|
-
import { Accordion as
|
|
5
|
+
import { getStyledConfig as l, setBorder as u, setDisplay as d, setInteraction as C, setMargin as g, setPadding as c, setPosition as S, setText as T } from "./components/@core/utils.js";
|
|
6
|
+
import { Accordion as b } from "./components/accordion/index.js";
|
|
7
7
|
import { AdvancedBadge as h } from "./components/advanced-badge/index.js";
|
|
8
8
|
import { AdvisoriesCard as D } from "./components/advisories-card/index.js";
|
|
9
9
|
import { Alert as v } from "./components/alert/index.js";
|
|
@@ -22,135 +22,137 @@ import { Checkbox as Y } from "./components/checkbox/index.js";
|
|
|
22
22
|
import { CircularProgress as $ } from "./components/circular-progress/index.js";
|
|
23
23
|
import { CloudImage as or } from "./components/cloud-image/index.js";
|
|
24
24
|
import { CodeSnippet as tr } from "./components/code-snippet/index.js";
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
30
|
-
import {
|
|
31
|
-
import {
|
|
32
|
-
import {
|
|
33
|
-
import {
|
|
34
|
-
import {
|
|
35
|
-
import {
|
|
36
|
-
import {
|
|
37
|
-
import {
|
|
38
|
-
import {
|
|
39
|
-
import {
|
|
40
|
-
import {
|
|
41
|
-
import {
|
|
42
|
-
import {
|
|
43
|
-
import {
|
|
44
|
-
import {
|
|
45
|
-
import {
|
|
46
|
-
import {
|
|
47
|
-
import {
|
|
48
|
-
import {
|
|
49
|
-
import {
|
|
50
|
-
import {
|
|
51
|
-
import {
|
|
52
|
-
import {
|
|
53
|
-
import {
|
|
54
|
-
import {
|
|
55
|
-
import {
|
|
56
|
-
import {
|
|
57
|
-
import {
|
|
58
|
-
import {
|
|
59
|
-
import {
|
|
60
|
-
import {
|
|
61
|
-
import {
|
|
62
|
-
import {
|
|
63
|
-
import {
|
|
64
|
-
import {
|
|
65
|
-
import {
|
|
66
|
-
import {
|
|
67
|
-
import {
|
|
68
|
-
import {
|
|
69
|
-
import {
|
|
70
|
-
import {
|
|
71
|
-
import {
|
|
72
|
-
import {
|
|
73
|
-
import {
|
|
74
|
-
import {
|
|
75
|
-
import {
|
|
76
|
-
import {
|
|
77
|
-
import {
|
|
78
|
-
import {
|
|
79
|
-
import {
|
|
80
|
-
import {
|
|
81
|
-
import {
|
|
82
|
-
import {
|
|
83
|
-
import {
|
|
84
|
-
import {
|
|
85
|
-
import {
|
|
86
|
-
import {
|
|
87
|
-
import {
|
|
88
|
-
import {
|
|
89
|
-
import {
|
|
90
|
-
import {
|
|
91
|
-
import {
|
|
92
|
-
import {
|
|
93
|
-
import {
|
|
94
|
-
import {
|
|
95
|
-
import {
|
|
96
|
-
import {
|
|
97
|
-
import {
|
|
98
|
-
import {
|
|
99
|
-
import {
|
|
100
|
-
import {
|
|
101
|
-
import {
|
|
102
|
-
import {
|
|
103
|
-
import {
|
|
104
|
-
import {
|
|
105
|
-
import {
|
|
106
|
-
import {
|
|
107
|
-
import {
|
|
108
|
-
import {
|
|
109
|
-
import {
|
|
110
|
-
import {
|
|
111
|
-
import {
|
|
112
|
-
import {
|
|
113
|
-
import {
|
|
114
|
-
import {
|
|
115
|
-
import {
|
|
116
|
-
import {
|
|
117
|
-
import {
|
|
118
|
-
import {
|
|
119
|
-
import {
|
|
120
|
-
import {
|
|
121
|
-
import {
|
|
122
|
-
import {
|
|
123
|
-
import {
|
|
124
|
-
import {
|
|
125
|
-
import {
|
|
126
|
-
import {
|
|
127
|
-
import {
|
|
128
|
-
import {
|
|
129
|
-
import {
|
|
130
|
-
import {
|
|
131
|
-
import {
|
|
132
|
-
import {
|
|
133
|
-
import {
|
|
134
|
-
import {
|
|
135
|
-
import {
|
|
136
|
-
import {
|
|
137
|
-
import {
|
|
138
|
-
import {
|
|
139
|
-
import {
|
|
140
|
-
import {
|
|
141
|
-
import {
|
|
142
|
-
import {
|
|
143
|
-
import {
|
|
144
|
-
import {
|
|
145
|
-
import {
|
|
146
|
-
import {
|
|
147
|
-
import {
|
|
148
|
-
import {
|
|
149
|
-
import {
|
|
150
|
-
import {
|
|
25
|
+
import { CollapsibleCard as mr } from "./components/collapsible-card/index.js";
|
|
26
|
+
import { CustomThemeProvider as xr, icons as ar, theme as nr } from "./components/colors/index.js";
|
|
27
|
+
import { ComparisonTable as sr } from "./components/comparison-table/index.js";
|
|
28
|
+
import { useConditionsDialog as ur } from "./components/conditions-dialog/index.js";
|
|
29
|
+
import { useConfirmDialog as Cr } from "./components/confirm-dialog/index.js";
|
|
30
|
+
import { Container as cr } from "./components/container/index.js";
|
|
31
|
+
import { CopyButton as Tr } from "./components/copy-button/index.js";
|
|
32
|
+
import { Divider as br } from "./components/divider/index.js";
|
|
33
|
+
import { Drawer as hr } from "./components/drawer/index.js";
|
|
34
|
+
import { Dropdown as Dr } from "./components/dropdown/index.js";
|
|
35
|
+
import { EmptyState as vr } from "./components/empty-state/index.js";
|
|
36
|
+
import { FATag as Lr } from "./components/fa-tag/index.js";
|
|
37
|
+
import { FilePreview as Mr } from "./components/file-preview/index.js";
|
|
38
|
+
import { Filters as kr } from "./components/filters/index.js";
|
|
39
|
+
import { Form as Vr } from "./components/form/index.js";
|
|
40
|
+
import { GridContainer as Rr } from "./components/grid-container/index.js";
|
|
41
|
+
import { GroupSelector as Nr } from "./components/group-selector/index.js";
|
|
42
|
+
import { Icon as zr } from "./components/icon/index.js";
|
|
43
|
+
import { IconButton as Hr } from "./components/icon-button/index.js";
|
|
44
|
+
import { IndicatorCardDB as Xr } from "./components/indicator-card-db/index.js";
|
|
45
|
+
import { ComboBox as jr } from "./components/inputs/fields/combobox/index.js";
|
|
46
|
+
import { InputDate as Jr } from "./components/inputs/fields/date/index.js";
|
|
47
|
+
import { InputDateRange as Yr } from "./components/inputs/fields/date-range/index.js";
|
|
48
|
+
import { InputDateTime as $r } from "./components/inputs/fields/date-time/index.js";
|
|
49
|
+
import { Editable as oo } from "./components/inputs/fields/editable/index.js";
|
|
50
|
+
import { InputArray as to } from "./components/inputs/fields/input-array/index.js";
|
|
51
|
+
import { InputFile as mo } from "./components/inputs/fields/input-file/index.js";
|
|
52
|
+
import { InputSection as xo } from "./components/inputs/fields/input-section/index.js";
|
|
53
|
+
import { InputTags as no } from "./components/inputs/fields/input-tags/index.js";
|
|
54
|
+
import { InputNumber as so } from "./components/inputs/fields/number/index.js";
|
|
55
|
+
import { InputNumberRange as uo } from "./components/inputs/fields/number-range/index.js";
|
|
56
|
+
import { PhoneInput as go } from "./components/inputs/fields/phone/index.js";
|
|
57
|
+
import { TextArea as So } from "./components/inputs/fields/text-area/index.js";
|
|
58
|
+
import { TextInput as Io } from "./components/inputs/fields/text-input/index.js";
|
|
59
|
+
import { OutlineContainer as Bo } from "./components/inputs/outline-container/index.js";
|
|
60
|
+
import { ErrorMessage as Fo } from "./components/inputs/styles.js";
|
|
61
|
+
import { ItemCardDB as Po } from "./components/item-card-db/index.js";
|
|
62
|
+
import { LanguageSwitcher as yo } from "./components/language-switcher/index.js";
|
|
63
|
+
import { ButtonToolbarCenter as Ao, ButtonToolbarRow as Mo, ButtonToolbarStartRow as Oo } from "./components/layout/categories/buttons/index.js";
|
|
64
|
+
import { Col as wo } from "./components/layout/categories/column/index.js";
|
|
65
|
+
import { Gap as Eo } from "./components/layout/categories/gap/index.js";
|
|
66
|
+
import { Row as Wo } from "./components/layout/categories/row/index.js";
|
|
67
|
+
import { Link as Uo } from "./components/link/index.js";
|
|
68
|
+
import { ListItem as Go } from "./components/list-item/index.js";
|
|
69
|
+
import { LittleFlag as Ko } from "./components/little-flag/index.js";
|
|
70
|
+
import { Loading as _o } from "./components/loading/index.js";
|
|
71
|
+
import { Logo as qo } from "./components/logo/index.js";
|
|
72
|
+
import { Lottie as Qo } from "./components/lottie/index.js";
|
|
73
|
+
import { Menu as Zo } from "./components/menu/index.js";
|
|
74
|
+
import { MessageBanner as re } from "./components/message-banner/index.js";
|
|
75
|
+
import { Modal as ee } from "./components/modal/index.js";
|
|
76
|
+
import { Notification as pe } from "./components/notification/index.js";
|
|
77
|
+
import { NotificationSign as fe } from "./components/notification-sign/index.js";
|
|
78
|
+
import { OAuthSelector as ae } from "./components/oauth-selector/index.js";
|
|
79
|
+
import { OptionCard as ie } from "./components/option-card/index.js";
|
|
80
|
+
import { PackageCard as le } from "./components/package-card/index.js";
|
|
81
|
+
import { PaginatorDb as de } from "./components/paginator-db/index.js";
|
|
82
|
+
import { PremiumFeature as ge } from "./components/premium-feature/index.js";
|
|
83
|
+
import { PriorityCards as Se } from "./components/priority-cards/index.js";
|
|
84
|
+
import { PriorityScore as Ie } from "./components/priority-score/index.js";
|
|
85
|
+
import { ProgressBar as Be } from "./components/progress-bar/index.js";
|
|
86
|
+
import { ProgressIndicator as Fe } from "./components/progress-indicator/index.js";
|
|
87
|
+
import { PopUp as Pe } from "./components/pop-up/index.js";
|
|
88
|
+
import { RadioButton as ye } from "./components/radio-button/index.js";
|
|
89
|
+
import { RankPosition as Ae } from "./components/rank-position/index.js";
|
|
90
|
+
import { RulesCard as Oe } from "./components/rules-card/index.js";
|
|
91
|
+
import { ScrollUpButton as we } from "./components/scroll-button/index.js";
|
|
92
|
+
import { Search as Ee } from "./components/search/index.js";
|
|
93
|
+
import { SearchDropdown as We } from "./components/search-dropdown/index.js";
|
|
94
|
+
import { SegmentedControl as Ue } from "./components/segmented-control/index.js";
|
|
95
|
+
import { SegmentedProgressBar as Ge } from "./components/segmented-progress-bar/index.js";
|
|
96
|
+
import { SeverityBadge as Ke } from "./components/severity-badge/index.js";
|
|
97
|
+
import { SeverityIndicator as _e } from "./components/severity-indicator/index.js";
|
|
98
|
+
import { SeverityOverview as qe } from "./components/severity-overview/index.js";
|
|
99
|
+
import { ShowOnHover as Qe } from "./components/show-on-hover/index.js";
|
|
100
|
+
import { SlideOutMenu as Ze } from "./components/slide-out-menu/index.js";
|
|
101
|
+
import { Slider as rt } from "./components/slider/index.js";
|
|
102
|
+
import { StepLapse as et } from "./components/step-lapse/index.js";
|
|
103
|
+
import { SummaryCard as pt } from "./components/summary-card/index.js";
|
|
104
|
+
import { Table as ft } from "./components/table/index.js";
|
|
105
|
+
import { TableButton as at } from "./components/table-button/index.js";
|
|
106
|
+
import { TableContent as it } from "./components/table-content/index.js";
|
|
107
|
+
import { TableOfContents as lt } from "./components/table-of-contents/index.js";
|
|
108
|
+
import { Tabs as dt } from "./components/tabs/index.js";
|
|
109
|
+
import { Tag as gt } from "./components/tag/index.js";
|
|
110
|
+
import { TimeLine as St } from "./components/timeline/index.js";
|
|
111
|
+
import { Toggle as It } from "./components/toggle/index.js";
|
|
112
|
+
import { Tooltip as Bt } from "./components/tooltip/index.js";
|
|
113
|
+
import { Tour as Ft, baseStep as Dt, defaultOptions as Pt } from "./components/tour/index.js";
|
|
114
|
+
import { Tree as yt } from "./components/tree/index.js";
|
|
115
|
+
import { TruncatedList as At } from "./components/truncated-list/index.js";
|
|
116
|
+
import { Heading as Ot } from "./components/typography/heading/index.js";
|
|
117
|
+
import { Span as wt } from "./components/typography/span/index.js";
|
|
118
|
+
import { Text as Et } from "./components/typography/text/index.js";
|
|
119
|
+
import { WeaknessesCard as Wt } from "./components/weaknesses-card/index.js";
|
|
120
|
+
import { DesignsContext as Ut } from "./context/react/index.js";
|
|
121
|
+
import { DesignsProvider as Gt } from "./globals/designs-provider/index.js";
|
|
122
|
+
import { GlobalTypography as Kt } from "./globals/global-typography/index.js";
|
|
123
|
+
import { DesignTokensCss as _t } from "./globals/design-tokens-css/index.js";
|
|
124
|
+
import { useActiveSection as qt } from "./hooks/use-active-section.js";
|
|
125
|
+
import { useCarousel as Qt } from "./hooks/use-carousel.js";
|
|
126
|
+
import { useClickOutside as Zt } from "./hooks/use-click-outside.js";
|
|
127
|
+
import { useCloudinaryImage as rp } from "./hooks/use-cloudinary-image.js";
|
|
128
|
+
import { useColumnsModal as ep } from "./hooks/use-columns-modal.js";
|
|
129
|
+
import { useDebouncedCallback as pp } from "./hooks/use-debounced-callback.js";
|
|
130
|
+
import { useFiltersValues as fp } from "./hooks/use-filters.js";
|
|
131
|
+
import { useModal as ap } from "./hooks/use-modal.js";
|
|
132
|
+
import { useMountEffect as ip } from "./hooks/use-mount-effect.js";
|
|
133
|
+
import { useSearch as lp } from "./hooks/use-search.js";
|
|
134
|
+
import { formatDate as dp, formatDateTime as Cp, formatDateTimeInInput as gp } from "./utils/date.js";
|
|
135
|
+
import { EXCLUDE_TOKEN as Sp, analyzeFilterValue as Tp, formatCheckboxesFilterValue as Ip, formatIncludeExcludeFilterValue as bp, formatTextFilterValue as Bp, getPreservedValues as hp, normalizeCheckboxesFilterValue as Fp, parseCheckboxesFilterValue as Dp, parseIncludeExcludeFilterValue as Pp, parseTextFilterValue as vp } from "./utils/filters.js";
|
|
136
|
+
import { normalizeDate as Lp, normalizeNumber as Ap } from "./utils/normalizers.js";
|
|
137
|
+
import { openUrl as Op } from "./utils/open-url.js";
|
|
138
|
+
import { clearStorage as wp, getPathname as Vp, getStorageItem as Ep } from "./utils/storage.js";
|
|
139
|
+
import { safeUrl as Wp } from "./utils/url.js";
|
|
140
|
+
import { ActiveFilters as Up } from "./components/filters/active-filters/index.js";
|
|
141
|
+
import { ColumnsModal as Gp } from "./components/modal/columns-modal/index.js";
|
|
142
|
+
import { Controller as Kp, useController as Xp, useFieldArray as _p, useFormContext as jp, useWatch as qp } from "./node_modules/react-hook-form/dist/index.esm.js";
|
|
143
|
+
import { InnerForm as Qp } from "./components/form/inner-form/index.js";
|
|
144
|
+
import { ItemContent as Zp } from "./components/table-content/item-content/index.js";
|
|
145
|
+
import { ListItemsWrapper as rm } from "./components/list-item/styles.js";
|
|
146
|
+
import { ModalConfirm as em } from "./components/modal/modal-confirm/index.js";
|
|
147
|
+
import { ModalFooter as pm } from "./components/modal/footer/index.js";
|
|
148
|
+
import { OptionContainer as fm } from "./components/oauth-selector/option-container/index.js";
|
|
149
|
+
import { ProgressStep as am } from "./components/progress-indicator/step/index.js";
|
|
150
|
+
import { TimeLineCard as im } from "./components/timeline/card/index.js";
|
|
151
|
+
import { partitionFilters as lm } from "./components/filters/utils.js";
|
|
152
|
+
import { useNumberFormatter as dm } from "./node_modules/react-aria/dist/private/i18n/useNumberFormatter.js";
|
|
151
153
|
export {
|
|
152
|
-
|
|
153
|
-
|
|
154
|
+
b as Accordion,
|
|
155
|
+
Up as ActiveFilters,
|
|
154
156
|
h as AdvancedBadge,
|
|
155
157
|
D as AdvisoriesCard,
|
|
156
158
|
v as Alert,
|
|
@@ -160,9 +162,9 @@ export {
|
|
|
160
162
|
n as BaseSpanComponent,
|
|
161
163
|
i as BaseTextComponent,
|
|
162
164
|
M as Button,
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
165
|
+
Ao as ButtonToolbarCenter,
|
|
166
|
+
Mo as ButtonToolbarRow,
|
|
167
|
+
Oo as ButtonToolbarStartRow,
|
|
166
168
|
j as CardContainer,
|
|
167
169
|
k as CardHeader,
|
|
168
170
|
V as CardWithImage,
|
|
@@ -175,161 +177,163 @@ export {
|
|
|
175
177
|
$ as CircularProgress,
|
|
176
178
|
or as CloudImage,
|
|
177
179
|
tr as CodeSnippet,
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
Lr as
|
|
198
|
-
Mr as
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
180
|
+
wo as Col,
|
|
181
|
+
mr as CollapsibleCard,
|
|
182
|
+
Gp as ColumnsModal,
|
|
183
|
+
jr as ComboBox,
|
|
184
|
+
sr as ComparisonTable,
|
|
185
|
+
cr as Container,
|
|
186
|
+
Kp as Controller,
|
|
187
|
+
Tr as CopyButton,
|
|
188
|
+
xr as CustomThemeProvider,
|
|
189
|
+
_t as DesignTokensCss,
|
|
190
|
+
Ut as DesignsContext,
|
|
191
|
+
Gt as DesignsProvider,
|
|
192
|
+
br as Divider,
|
|
193
|
+
hr as Drawer,
|
|
194
|
+
Dr as Dropdown,
|
|
195
|
+
Sp as EXCLUDE_TOKEN,
|
|
196
|
+
oo as Editable,
|
|
197
|
+
vr as EmptyState,
|
|
198
|
+
Fo as ErrorMessage,
|
|
199
|
+
Lr as FATag,
|
|
200
|
+
Mr as FilePreview,
|
|
201
|
+
kr as Filters,
|
|
202
|
+
Vr as Form,
|
|
203
|
+
Eo as Gap,
|
|
204
|
+
Kt as GlobalTypography,
|
|
205
|
+
Rr as GridContainer,
|
|
206
|
+
Nr as GroupSelector,
|
|
207
|
+
Ot as Heading,
|
|
208
|
+
zr as Icon,
|
|
209
|
+
Hr as IconButton,
|
|
206
210
|
X as IndicatorCard,
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
211
|
+
Xr as IndicatorCardDB,
|
|
212
|
+
Qp as InnerForm,
|
|
213
|
+
to as InputArray,
|
|
214
|
+
Jr as InputDate,
|
|
215
|
+
Yr as InputDateRange,
|
|
216
|
+
$r as InputDateTime,
|
|
217
|
+
mo as InputFile,
|
|
218
|
+
so as InputNumber,
|
|
219
|
+
uo as InputNumberRange,
|
|
220
|
+
xo as InputSection,
|
|
221
|
+
no as InputTags,
|
|
222
|
+
Po as ItemCardDB,
|
|
223
|
+
Zp as ItemContent,
|
|
224
|
+
yo as LanguageSwitcher,
|
|
225
|
+
Uo as Link,
|
|
226
|
+
Go as ListItem,
|
|
227
|
+
rm as ListItemsWrapper,
|
|
228
|
+
Ko as LittleFlag,
|
|
229
|
+
_o as Loading,
|
|
230
|
+
qo as Logo,
|
|
231
|
+
Qo as Lottie,
|
|
232
|
+
Zo as Menu,
|
|
233
|
+
re as MessageBanner,
|
|
234
|
+
ee as Modal,
|
|
235
|
+
em as ModalConfirm,
|
|
236
|
+
pm as ModalFooter,
|
|
237
|
+
pe as Notification,
|
|
238
|
+
fe as NotificationSign,
|
|
239
|
+
ae as OAuthSelector,
|
|
240
|
+
ie as OptionCard,
|
|
241
|
+
fm as OptionContainer,
|
|
242
|
+
Bo as OutlineContainer,
|
|
243
|
+
le as PackageCard,
|
|
244
|
+
de as PaginatorDb,
|
|
245
|
+
go as PhoneInput,
|
|
246
|
+
Pe as PopUp,
|
|
247
|
+
ge as PremiumFeature,
|
|
248
|
+
Se as PriorityCards,
|
|
249
|
+
Ie as PriorityScore,
|
|
250
|
+
Be as ProgressBar,
|
|
251
|
+
Fe as ProgressIndicator,
|
|
252
|
+
am as ProgressStep,
|
|
253
|
+
ye as RadioButton,
|
|
254
|
+
Ae as RankPosition,
|
|
255
|
+
Wo as Row,
|
|
256
|
+
Oe as RulesCard,
|
|
257
|
+
we as ScrollUpButton,
|
|
258
|
+
Ee as Search,
|
|
259
|
+
We as SearchDropdown,
|
|
260
|
+
Ue as SegmentedControl,
|
|
261
|
+
Ge as SegmentedProgressBar,
|
|
262
|
+
Ke as SeverityBadge,
|
|
263
|
+
_e as SeverityIndicator,
|
|
264
|
+
qe as SeverityOverview,
|
|
265
|
+
Qe as ShowOnHover,
|
|
266
|
+
Ze as SlideOutMenu,
|
|
267
|
+
rt as Slider,
|
|
268
|
+
wt as Span,
|
|
269
|
+
et as StepLapse,
|
|
270
|
+
pt as SummaryCard,
|
|
271
|
+
ft as Table,
|
|
272
|
+
at as TableButton,
|
|
273
|
+
it as TableContent,
|
|
274
|
+
lt as TableOfContents,
|
|
275
|
+
dt as Tabs,
|
|
276
|
+
gt as Tag,
|
|
277
|
+
Et as Text,
|
|
278
|
+
So as TextArea,
|
|
279
|
+
Io as TextInput,
|
|
280
|
+
St as TimeLine,
|
|
281
|
+
im as TimeLineCard,
|
|
282
|
+
It as Toggle,
|
|
283
|
+
Bt as Tooltip,
|
|
284
|
+
Ft as Tour,
|
|
285
|
+
yt as Tree,
|
|
286
|
+
At as TruncatedList,
|
|
287
|
+
Wt as WeaknessesCard,
|
|
288
|
+
Tp as analyzeFilterValue,
|
|
289
|
+
Dt as baseStep,
|
|
290
|
+
wp as clearStorage,
|
|
291
|
+
Pt as defaultOptions,
|
|
292
|
+
Ip as formatCheckboxesFilterValue,
|
|
293
|
+
dp as formatDate,
|
|
294
|
+
Cp as formatDateTime,
|
|
295
|
+
gp as formatDateTimeInInput,
|
|
296
|
+
bp as formatIncludeExcludeFilterValue,
|
|
297
|
+
Bp as formatTextFilterValue,
|
|
298
|
+
Vp as getPathname,
|
|
299
|
+
hp as getPreservedValues,
|
|
300
|
+
Ep as getStorageItem,
|
|
297
301
|
l as getStyledConfig,
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
302
|
+
m as hiddenProps,
|
|
303
|
+
ar as icons,
|
|
304
|
+
Fp as normalizeCheckboxesFilterValue,
|
|
305
|
+
Lp as normalizeDate,
|
|
306
|
+
Ap as normalizeNumber,
|
|
307
|
+
Op as openUrl,
|
|
308
|
+
Dp as parseCheckboxesFilterValue,
|
|
309
|
+
Pp as parseIncludeExcludeFilterValue,
|
|
310
|
+
vp as parseTextFilterValue,
|
|
311
|
+
lm as partitionFilters,
|
|
312
|
+
Wp as safeUrl,
|
|
309
313
|
u as setBorder,
|
|
310
314
|
d as setDisplay,
|
|
311
315
|
C as setInteraction,
|
|
312
316
|
g as setMargin,
|
|
313
317
|
c as setPadding,
|
|
314
318
|
S as setPosition,
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
319
|
+
T as setText,
|
|
320
|
+
nr as theme,
|
|
321
|
+
qt as useActiveSection,
|
|
322
|
+
Qt as useCarousel,
|
|
323
|
+
Zt as useClickOutside,
|
|
324
|
+
rp as useCloudinaryImage,
|
|
325
|
+
ep as useColumnsModal,
|
|
326
|
+
ur as useConditionsDialog,
|
|
327
|
+
Cr as useConfirmDialog,
|
|
328
|
+
Xp as useController,
|
|
329
|
+
pp as useDebouncedCallback,
|
|
330
|
+
_p as useFieldArray,
|
|
331
|
+
fp as useFiltersValues,
|
|
332
|
+
jp as useFormContext,
|
|
333
|
+
ap as useModal,
|
|
334
|
+
ip as useMountEffect,
|
|
335
|
+
dm as useNumberFormatter,
|
|
336
|
+
lp as useSearch,
|
|
337
|
+
qp as useWatch,
|
|
334
338
|
t as variantBuilder
|
|
335
339
|
};
|
package/package.json
CHANGED