@ultraviolet/plus 3.0.0-beta.16 → 3.0.0-beta.18
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/CodeEditor/CodeEditor.d.ts +1 -1
- package/dist/components/CodeEditor/CodeEditor.js +41 -11
- package/dist/components/ContentCard/Skeleton.d.ts +1 -1
- package/dist/components/ContentCard/Skeleton.js +13 -8
- package/dist/components/ContentCard/index.js +131 -51
- package/dist/components/ContentCardGroup/Card.js +63 -22
- package/dist/components/ContentCardGroup/SkeletonCard.d.ts +1 -1
- package/dist/components/ContentCardGroup/SkeletonCard.js +1 -1
- package/dist/components/ContentCardGroup/index.js +11 -6
- package/dist/components/ContentCardGroup/styles.css.js +1 -0
- package/dist/components/Conversation/index.d.ts +9 -9
- package/dist/components/Conversation/index.js +23 -6
- package/dist/components/CustomerSatisfaction/index.d.ts +1 -1
- package/dist/components/CustomerSatisfaction/index.js +68 -39
- package/dist/components/EstimateCost/Components/CustomUnitInput.d.ts +1 -1
- package/dist/components/EstimateCost/Components/CustomUnitInput.js +47 -27
- package/dist/components/EstimateCost/Components/Item.d.ts +1 -1
- package/dist/components/EstimateCost/Components/Item.js +303 -203
- package/dist/components/EstimateCost/Components/LineThrough.d.ts +1 -1
- package/dist/components/EstimateCost/Components/LineThrough.js +8 -2
- package/dist/components/EstimateCost/Components/NumberInput.d.ts +1 -1
- package/dist/components/EstimateCost/Components/NumberInput.js +17 -9
- package/dist/components/EstimateCost/Components/Region.d.ts +1 -1
- package/dist/components/EstimateCost/Components/Region.js +43 -25
- package/dist/components/EstimateCost/Components/Regular.d.ts +1 -1
- package/dist/components/EstimateCost/Components/Regular.js +20 -16
- package/dist/components/EstimateCost/Components/Strong.d.ts +1 -1
- package/dist/components/EstimateCost/Components/Strong.js +11 -10
- package/dist/components/EstimateCost/Components/Unit.d.ts +1 -1
- package/dist/components/EstimateCost/Components/Unit.js +20 -13
- package/dist/components/EstimateCost/Components/Zone.d.ts +1 -1
- package/dist/components/EstimateCost/Components/Zone.js +41 -24
- package/dist/components/EstimateCost/EstimateCost.d.ts +11 -11
- package/dist/components/EstimateCost/EstimateCost.js +61 -10
- package/dist/components/EstimateCost/EstimateCostContent.d.ts +1 -1
- package/dist/components/EstimateCost/EstimateCostContent.js +264 -120
- package/dist/components/EstimateCost/EstimateCostProvider.d.ts +1 -1
- package/dist/components/EstimateCost/EstimateCostProvider.js +24 -21
- package/dist/components/EstimateCost/OverlayComponent.d.ts +1 -1
- package/dist/components/EstimateCost/OverlayComponent.js +53 -41
- package/dist/components/EstimateCost/OverlayContext.d.ts +1 -1
- package/dist/components/EstimateCost/OverlayContext.js +2 -4
- package/dist/components/FAQ/index.d.ts +1 -1
- package/dist/components/FAQ/index.js +1 -1
- package/dist/components/InfoTable/InfoTable.d.ts +3 -3
- package/dist/components/InfoTable/InfoTable.js +10 -4
- package/dist/components/InfoTable/components/Cell.d.ts +1 -1
- package/dist/components/InfoTable/components/Cell.js +24 -4
- package/dist/components/InfoTable/components/Row.d.ts +1 -1
- package/dist/components/InfoTable/components/Row.js +16 -10
- package/dist/components/InfoTable/styles.css.d.ts +0 -1
- package/dist/components/InfoTable/styles.css.js +0 -2
- package/dist/components/Navigation/Footer.d.ts +1 -1
- package/dist/components/Navigation/Footer.js +34 -19
- package/dist/components/Navigation/Header.d.ts +1 -1
- package/dist/components/Navigation/Header.js +12 -9
- package/dist/components/Navigation/Navigation.d.ts +5 -5
- package/dist/components/Navigation/Navigation.js +2 -5
- package/dist/components/Navigation/NavigationContent.d.ts +1 -1
- package/dist/components/Navigation/NavigationContent.js +56 -18
- package/dist/components/Navigation/NavigationProvider.d.ts +1 -1
- package/dist/components/Navigation/NavigationProvider.js +108 -70
- package/dist/components/Navigation/components/Group.d.ts +1 -1
- package/dist/components/Navigation/components/Group.js +20 -19
- package/dist/components/Navigation/components/Item.d.ts +1 -1
- package/dist/components/Navigation/components/Item.js +551 -254
- package/dist/components/Navigation/components/ItemProvider.d.ts +1 -1
- package/dist/components/Navigation/components/ItemProvider.js +2 -4
- package/dist/components/Navigation/components/PinnedItems.d.ts +1 -1
- package/dist/components/Navigation/components/PinnedItems.js +91 -37
- package/dist/components/Navigation/components/Separator.d.ts +1 -1
- package/dist/components/Navigation/components/Separator.js +1 -1
- package/dist/components/Navigation/styles.css.js +0 -1
- package/dist/components/Navigation/variables.css.js +1 -0
- package/dist/components/OfferList/OfferList.d.ts +3 -3
- package/dist/components/OfferList/OfferList.js +41 -9
- package/dist/components/OfferList/OfferListProvider.d.ts +1 -1
- package/dist/components/OfferList/OfferListProvider.js +25 -15
- package/dist/components/OfferList/components/Banner.d.ts +1 -1
- package/dist/components/OfferList/components/Banner.js +30 -8
- package/dist/components/OfferList/components/Cell.d.ts +1 -1
- package/dist/components/OfferList/components/Cell.js +12 -5
- package/dist/components/OfferList/components/Row.d.ts +1 -1
- package/dist/components/OfferList/components/Row.js +135 -42
- package/dist/components/OrderSummary/NonScrollableContent.d.ts +1 -1
- package/dist/components/OrderSummary/NonScrollableContent.js +68 -22
- package/dist/components/OrderSummary/Provider.js +1 -4
- package/dist/components/OrderSummary/ScrollableContent.d.ts +1 -1
- package/dist/components/OrderSummary/ScrollableContent.js +174 -33
- package/dist/components/OrderSummary/constants.js +7 -1
- package/dist/components/OrderSummary/helpers.js +36 -18
- package/dist/components/OrderSummary/index.d.ts +1 -1
- package/dist/components/OrderSummary/index.js +135 -48
- package/dist/components/Plans/FeatureHint.d.ts +1 -1
- package/dist/components/Plans/FeatureHint.js +26 -8
- package/dist/components/Plans/PlanHeader.d.ts +1 -1
- package/dist/components/Plans/PlanHeader.js +79 -25
- package/dist/components/Plans/index.d.ts +1 -1
- package/dist/components/Plans/index.js +142 -53
- package/dist/components/Plans/styles.css.js +0 -1
- package/dist/components/SteppedListCard/Step.d.ts +1 -1
- package/dist/components/SteppedListCard/Step.js +42 -2
- package/dist/components/SteppedListCard/SteppedListCard.d.ts +2 -2
- package/dist/components/SteppedListCard/SteppedListCard.js +66 -19
- package/dist/components/SteppedListCard/SteppedListContent.d.ts +1 -1
- package/dist/components/SteppedListCard/SteppedListContent.js +13 -11
- package/dist/components/SteppedListCard/helper.js +3 -1
- package/dist/plus.css +1 -1
- package/package.json +6 -6
|
@@ -26,5 +26,5 @@ type CodeEditorProps = {
|
|
|
26
26
|
lineNumbers?: boolean;
|
|
27
27
|
style?: CSSProperties;
|
|
28
28
|
};
|
|
29
|
-
export declare const CodeEditor: ({ value, onChange, extensions, onBlur, height, readOnly, autoCompletion, disabled, label, copyButton, id, helper, labelDescription, "aria-label": ariaLabel, "data-testid": dataTestId, className, error, lineNumbers, style, }: CodeEditorProps) => import("
|
|
29
|
+
export declare const CodeEditor: ({ value, onChange, extensions, onBlur, height, readOnly, autoCompletion, disabled, label, copyButton, id, helper, labelDescription, "aria-label": ariaLabel, "data-testid": dataTestId, className, error, lineNumbers, style, }: CodeEditorProps) => import("react/jsx-runtime").JSX.Element;
|
|
30
30
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs, jsx } from "
|
|
2
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
3
3
|
import { langs } from "@uiw/codemirror-extensions-langs";
|
|
4
4
|
import { material } from "@uiw/codemirror-theme-material";
|
|
5
5
|
import CodeMirror from "@uiw/react-codemirror";
|
|
@@ -28,17 +28,47 @@ const CodeEditor = ({
|
|
|
28
28
|
}) => /* @__PURE__ */ jsxs(Stack, { className: disabled ? disabledStack : "", gap: 0.5, style, children: [
|
|
29
29
|
label ? /* @__PURE__ */ jsx(Label, { labelDescription, children: label }) : null,
|
|
30
30
|
/* @__PURE__ */ jsxs("div", { className: codeEditor[disabled ? "disabled" : "default"], children: [
|
|
31
|
-
/* @__PURE__ */ jsx(
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
31
|
+
/* @__PURE__ */ jsx(
|
|
32
|
+
CodeMirror,
|
|
33
|
+
{
|
|
34
|
+
"aria-disabled": disabled,
|
|
35
|
+
"aria-label": ariaLabel,
|
|
36
|
+
basicSetup: {
|
|
37
|
+
autocompletion: autoCompletion,
|
|
38
|
+
highlightActiveLine: false,
|
|
39
|
+
highlightActiveLineGutter: false,
|
|
40
|
+
lineNumbers
|
|
41
|
+
},
|
|
42
|
+
className,
|
|
43
|
+
"data-testid": dataTestId,
|
|
44
|
+
editable: !disabled || !readOnly,
|
|
45
|
+
extensions: [langs[extensions]?.() ?? langs["sh"]],
|
|
46
|
+
height,
|
|
47
|
+
id,
|
|
48
|
+
onBlur,
|
|
49
|
+
onChange,
|
|
50
|
+
onUpdate: () => {
|
|
51
|
+
if (disabled) {
|
|
52
|
+
document.getSelection()?.empty();
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
readOnly: readOnly || disabled,
|
|
56
|
+
theme: material,
|
|
57
|
+
value,
|
|
58
|
+
width: "100%"
|
|
39
59
|
}
|
|
40
|
-
|
|
41
|
-
copyButton$1 && !disabled ? /* @__PURE__ */ jsx(
|
|
60
|
+
),
|
|
61
|
+
copyButton$1 && !disabled ? /* @__PURE__ */ jsx(
|
|
62
|
+
CopyButton,
|
|
63
|
+
{
|
|
64
|
+
bordered: true,
|
|
65
|
+
className: copyButton,
|
|
66
|
+
sentiment: "neutral",
|
|
67
|
+
size: "small",
|
|
68
|
+
value,
|
|
69
|
+
children: typeof copyButton$1 === "string" ? copyButton$1 : void 0
|
|
70
|
+
}
|
|
71
|
+
) : null
|
|
42
72
|
] }),
|
|
43
73
|
error && typeof error !== "boolean" ? /* @__PURE__ */ jsx(Text, { as: "span", sentiment: "danger", variant: "caption", children: error }) : null,
|
|
44
74
|
!error && helper ? /* @__PURE__ */ jsx(Text, { as: "span", prominence: "weak", sentiment: "neutral", variant: "caption", children: helper }) : null
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
type SkeletonProps = {
|
|
2
2
|
direction: 'row' | 'column';
|
|
3
3
|
};
|
|
4
|
-
export declare const Skeleton: ({ direction }: SkeletonProps) => import("
|
|
4
|
+
export declare const Skeleton: ({ direction }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
export {};
|
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs, jsx } from "
|
|
2
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
3
3
|
import { Stack, Skeleton as Skeleton$1 } from "@ultraviolet/ui";
|
|
4
4
|
import { assignInlineVars } from "@vanilla-extract/dynamic";
|
|
5
5
|
import { skeletonImage, skeletonWidthVar, skeletonHeightVar, paddedStack } from "./styles.css.js";
|
|
6
|
-
const Skeleton = ({
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
6
|
+
const Skeleton = ({ direction }) => /* @__PURE__ */ jsxs(Stack, { direction, children: [
|
|
7
|
+
/* @__PURE__ */ jsx(
|
|
8
|
+
Skeleton$1,
|
|
9
|
+
{
|
|
10
|
+
className: skeletonImage[direction],
|
|
11
|
+
style: assignInlineVars({
|
|
12
|
+
[skeletonHeightVar]: direction === "column" ? "120px" : "unset",
|
|
13
|
+
[skeletonWidthVar]: direction === "row" ? "220px" : "100%"
|
|
14
|
+
}),
|
|
15
|
+
variant: "square"
|
|
16
|
+
}
|
|
17
|
+
),
|
|
13
18
|
/* @__PURE__ */ jsxs(Stack, { className: paddedStack, gap: 2, children: [
|
|
14
19
|
/* @__PURE__ */ jsx(Skeleton$1, { variant: "line" }),
|
|
15
20
|
/* @__PURE__ */ jsx(Skeleton$1, { variant: "line" }),
|
|
@@ -1,62 +1,142 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx, jsxs } from "
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { OpenInNewIcon } from "@ultraviolet/icons";
|
|
4
4
|
import { Stack, Text } from "@ultraviolet/ui";
|
|
5
5
|
import { assignInlineVars } from "@vanilla-extract/dynamic";
|
|
6
6
|
import { forwardRef, useRef, useState, useMemo, useEffect } from "react";
|
|
7
7
|
import { Skeleton } from "./Skeleton.js";
|
|
8
8
|
import { cardClass, activeClass, fullHeight, imageClass, subContainerHeightVar, subContainer, iconStack, iconContainer } from "./styles.css.js";
|
|
9
|
-
const ContentCard = forwardRef(
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
9
|
+
const ContentCard = forwardRef(
|
|
10
|
+
({
|
|
11
|
+
image,
|
|
12
|
+
direction = "column",
|
|
13
|
+
icon,
|
|
14
|
+
subtitle,
|
|
15
|
+
title,
|
|
16
|
+
headingTag = "h3",
|
|
17
|
+
description,
|
|
18
|
+
children,
|
|
19
|
+
href,
|
|
20
|
+
target = "_blank",
|
|
21
|
+
onClick,
|
|
22
|
+
disabled,
|
|
23
|
+
loading,
|
|
24
|
+
className,
|
|
25
|
+
style
|
|
26
|
+
}, ref) => {
|
|
27
|
+
const subContainerRef = useRef(null);
|
|
28
|
+
const [subContainerHeight, setSubContainerHeight] = useState(
|
|
29
|
+
subContainerRef?.current?.offsetHeight
|
|
30
|
+
);
|
|
31
|
+
const Container = useMemo(() => {
|
|
32
|
+
if (href) {
|
|
33
|
+
return "a";
|
|
34
|
+
}
|
|
35
|
+
if (onClick) {
|
|
36
|
+
return "button";
|
|
37
|
+
}
|
|
38
|
+
return "div";
|
|
39
|
+
}, [href, onClick]);
|
|
40
|
+
useEffect(
|
|
41
|
+
() => setSubContainerHeight(subContainerRef?.current?.offsetHeight),
|
|
42
|
+
[subContainerRef]
|
|
43
|
+
);
|
|
44
|
+
return /* @__PURE__ */ jsx(
|
|
45
|
+
Container,
|
|
46
|
+
{
|
|
47
|
+
className: `${className ? `${className} ` : ""}${cardClass}${onClick || href ? ` ${activeClass}` : ""}`,
|
|
48
|
+
disabled,
|
|
49
|
+
href: !disabled ? href : void 0,
|
|
50
|
+
onClick: !disabled ? onClick : void 0,
|
|
51
|
+
ref,
|
|
52
|
+
role: onClick && !href ? "button" : void 0,
|
|
53
|
+
style,
|
|
54
|
+
target,
|
|
55
|
+
children: loading ? /* @__PURE__ */ jsx(Skeleton, { direction }) : /* @__PURE__ */ jsxs(Stack, { className: fullHeight, direction, children: [
|
|
56
|
+
image ? /* @__PURE__ */ jsx(
|
|
57
|
+
"img",
|
|
58
|
+
{
|
|
59
|
+
alt: "",
|
|
60
|
+
className: imageClass[direction],
|
|
61
|
+
"data-disabled": disabled,
|
|
62
|
+
height: direction === "column" ? 120 : void 0,
|
|
63
|
+
src: image,
|
|
64
|
+
style: assignInlineVars({
|
|
65
|
+
[subContainerHeightVar]: subContainerHeight ? `${subContainerHeight.toString()}px` : void 0
|
|
66
|
+
}),
|
|
67
|
+
width: direction === "row" ? 220 : void 0
|
|
68
|
+
}
|
|
69
|
+
) : null,
|
|
70
|
+
/* @__PURE__ */ jsxs(Stack, { direction, flex: 1, gap: 2, children: [
|
|
71
|
+
/* @__PURE__ */ jsxs(
|
|
72
|
+
Stack,
|
|
73
|
+
{
|
|
74
|
+
alignItems: !subtitle && !description && !children ? "center" : void 0,
|
|
75
|
+
className: subContainer[!href ? "noHref" : direction],
|
|
76
|
+
direction,
|
|
77
|
+
flex: "1 1 auto",
|
|
78
|
+
gap: 2,
|
|
79
|
+
ref: subContainerRef,
|
|
80
|
+
children: [
|
|
81
|
+
icon ?? null,
|
|
82
|
+
/* @__PURE__ */ jsxs(Stack, { flex: "1 1 auto", gap: 2, justifyContent: "space-between", children: [
|
|
83
|
+
/* @__PURE__ */ jsxs(Stack, { gap: 0.5, children: [
|
|
84
|
+
/* @__PURE__ */ jsxs(Stack, { children: [
|
|
85
|
+
subtitle ? /* @__PURE__ */ jsx(
|
|
86
|
+
Text,
|
|
87
|
+
{
|
|
88
|
+
as: "small",
|
|
89
|
+
disabled,
|
|
90
|
+
prominence: "weak",
|
|
91
|
+
sentiment: "neutral",
|
|
92
|
+
variant: "caption",
|
|
93
|
+
children: subtitle
|
|
94
|
+
}
|
|
95
|
+
) : null,
|
|
96
|
+
/* @__PURE__ */ jsx(
|
|
97
|
+
Text,
|
|
98
|
+
{
|
|
99
|
+
as: headingTag,
|
|
100
|
+
disabled,
|
|
101
|
+
sentiment: "neutral",
|
|
102
|
+
variant: "bodyStrong",
|
|
103
|
+
children: title
|
|
104
|
+
}
|
|
105
|
+
)
|
|
106
|
+
] }),
|
|
107
|
+
description ? /* @__PURE__ */ jsx(
|
|
108
|
+
Text,
|
|
109
|
+
{
|
|
110
|
+
as: "p",
|
|
111
|
+
disabled,
|
|
112
|
+
sentiment: "neutral",
|
|
113
|
+
variant: "bodySmall",
|
|
114
|
+
children: description
|
|
115
|
+
}
|
|
116
|
+
) : null
|
|
117
|
+
] }),
|
|
118
|
+
children ? /* @__PURE__ */ jsx(Stack, { children }) : null
|
|
119
|
+
] })
|
|
120
|
+
]
|
|
121
|
+
}
|
|
122
|
+
),
|
|
123
|
+
href ? /* @__PURE__ */ jsx(
|
|
124
|
+
Stack,
|
|
125
|
+
{
|
|
126
|
+
alignItems: direction === "column" ? "flex-end" : "center",
|
|
127
|
+
className: iconStack[direction],
|
|
128
|
+
direction,
|
|
129
|
+
flex: 1,
|
|
130
|
+
justifyContent: direction === "column" ? "center" : "end",
|
|
131
|
+
children: /* @__PURE__ */ jsx("div", { className: iconContainer, children: /* @__PURE__ */ jsx(OpenInNewIcon, { disabled, sentiment: "neutral" }) })
|
|
132
|
+
}
|
|
133
|
+
) : null
|
|
134
|
+
] })
|
|
54
135
|
] })
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
});
|
|
136
|
+
}
|
|
137
|
+
);
|
|
138
|
+
}
|
|
139
|
+
);
|
|
60
140
|
export {
|
|
61
141
|
ContentCard
|
|
62
142
|
};
|
|
@@ -1,30 +1,71 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx, jsxs } from "
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { OpenInNewIcon } from "@ultraviolet/icons";
|
|
4
4
|
import { Stack, Text } from "@ultraviolet/ui";
|
|
5
5
|
import { forwardRef } from "react";
|
|
6
6
|
import { styledWrapper, fullHeightStack, customStack, iconWrapper } from "./styles.css.js";
|
|
7
|
-
const Card = forwardRef(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
/* @__PURE__ */
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
7
|
+
const Card = forwardRef(
|
|
8
|
+
({
|
|
9
|
+
title,
|
|
10
|
+
titleAs,
|
|
11
|
+
subtitle,
|
|
12
|
+
subtitleAs,
|
|
13
|
+
description,
|
|
14
|
+
children,
|
|
15
|
+
href,
|
|
16
|
+
target = "_blank",
|
|
17
|
+
style
|
|
18
|
+
}, ref) => /* @__PURE__ */ jsx(
|
|
19
|
+
"a",
|
|
20
|
+
{
|
|
21
|
+
className: styledWrapper,
|
|
22
|
+
href,
|
|
23
|
+
ref,
|
|
24
|
+
style,
|
|
25
|
+
target,
|
|
26
|
+
children: /* @__PURE__ */ jsxs(
|
|
27
|
+
Stack,
|
|
28
|
+
{
|
|
29
|
+
alignItems: "center",
|
|
30
|
+
className: fullHeightStack,
|
|
31
|
+
direction: "row",
|
|
32
|
+
gap: 2,
|
|
33
|
+
justifyContent: "space-between",
|
|
34
|
+
children: [
|
|
35
|
+
/* @__PURE__ */ jsxs(Stack, { className: customStack, gap: "0.5", children: [
|
|
36
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
37
|
+
subtitle ? /* @__PURE__ */ jsx(
|
|
38
|
+
Text,
|
|
39
|
+
{
|
|
40
|
+
as: subtitleAs || "h5",
|
|
41
|
+
oneLine: true,
|
|
42
|
+
prominence: "weak",
|
|
43
|
+
sentiment: "neutral",
|
|
44
|
+
variant: "caption",
|
|
45
|
+
children: subtitle
|
|
46
|
+
}
|
|
47
|
+
) : null,
|
|
48
|
+
/* @__PURE__ */ jsx(
|
|
49
|
+
Text,
|
|
50
|
+
{
|
|
51
|
+
as: titleAs || "h3",
|
|
52
|
+
oneLine: true,
|
|
53
|
+
sentiment: "neutral",
|
|
54
|
+
variant: "bodyStrong",
|
|
55
|
+
children: title
|
|
56
|
+
}
|
|
57
|
+
)
|
|
58
|
+
] }),
|
|
59
|
+
description ? /* @__PURE__ */ jsx(Text, { as: "p", oneLine: true, sentiment: "neutral", variant: "bodySmall", children: description }) : null,
|
|
60
|
+
children
|
|
61
|
+
] }),
|
|
62
|
+
/* @__PURE__ */ jsx("div", { className: iconWrapper, children: /* @__PURE__ */ jsx(OpenInNewIcon, { sentiment: "neutral" }) })
|
|
63
|
+
]
|
|
64
|
+
}
|
|
65
|
+
)
|
|
66
|
+
}
|
|
67
|
+
)
|
|
68
|
+
);
|
|
28
69
|
export {
|
|
29
70
|
Card
|
|
30
71
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const SkeletonCard: () => import("
|
|
1
|
+
export declare const SkeletonCard: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx, jsxs } from "
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Stack, Skeleton } from "@ultraviolet/ui";
|
|
4
4
|
import { skeletonWrapper, squareSkeleton } from "./styles.css.js";
|
|
5
5
|
const SkeletonCard = () => /* @__PURE__ */ jsx("div", { className: skeletonWrapper, children: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
|
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx, Fragment } from "
|
|
2
|
+
import { jsx, Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { Stack } from "@ultraviolet/ui";
|
|
4
4
|
import { forwardRef, Children } from "react";
|
|
5
5
|
import { Card } from "./Card.js";
|
|
6
6
|
import { SkeletonCard } from "./SkeletonCard.js";
|
|
7
7
|
import { groupCardWrapper } from "./styles.css.js";
|
|
8
|
-
const BaseContentCardGroup = forwardRef(({
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
const BaseContentCardGroup = forwardRef(({ children, loading, style }, ref) => /* @__PURE__ */ jsx(
|
|
9
|
+
Stack,
|
|
10
|
+
{
|
|
11
|
+
className: groupCardWrapper,
|
|
12
|
+
direction: "column",
|
|
13
|
+
ref,
|
|
14
|
+
style,
|
|
15
|
+
children: !loading ? children : /* @__PURE__ */ jsx(Fragment, { children: Children.map(children, (_child, index) => /* @__PURE__ */ jsx(SkeletonCard, {}, index)) })
|
|
16
|
+
}
|
|
17
|
+
));
|
|
13
18
|
const ContentCardGroup = Object.assign(BaseContentCardGroup, {
|
|
14
19
|
Card
|
|
15
20
|
});
|
|
@@ -3,31 +3,31 @@ declare const Conversation: {
|
|
|
3
3
|
({ children, style, }: {
|
|
4
4
|
children: ReactNode;
|
|
5
5
|
style?: CSSProperties;
|
|
6
|
-
}): import("
|
|
6
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
Date: ({ children, style, }: {
|
|
8
8
|
children: ReactNode;
|
|
9
9
|
style?: CSSProperties;
|
|
10
|
-
}) => import("
|
|
11
|
-
Message: ({ className, children, avatar, align, style, }: MessageProps) => import("
|
|
10
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
Message: ({ className, children, avatar, align, style, }: MessageProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
MessageInfos: ({ children, align, style, }: {
|
|
13
13
|
children: ReactNode;
|
|
14
14
|
align: "left" | "right";
|
|
15
15
|
style?: CSSProperties;
|
|
16
|
-
}) => import("
|
|
16
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
17
17
|
Tag: ({ children, style, }: {
|
|
18
18
|
children: ReactNode;
|
|
19
19
|
style?: CSSProperties;
|
|
20
|
-
}) => import("
|
|
20
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
21
21
|
};
|
|
22
22
|
export declare const MessageInfos: ({ children, align, style, }: {
|
|
23
23
|
children: ReactNode;
|
|
24
24
|
align: "left" | "right";
|
|
25
25
|
style?: CSSProperties;
|
|
26
|
-
}) => import("
|
|
26
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
27
27
|
export declare const Date: ({ children, style, }: {
|
|
28
28
|
children: ReactNode;
|
|
29
29
|
style?: CSSProperties;
|
|
30
|
-
}) => import("
|
|
30
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
31
31
|
type MessageProps = {
|
|
32
32
|
className?: string;
|
|
33
33
|
children: ReactNode;
|
|
@@ -35,9 +35,9 @@ type MessageProps = {
|
|
|
35
35
|
align?: 'left' | 'right';
|
|
36
36
|
style?: CSSProperties;
|
|
37
37
|
};
|
|
38
|
-
export declare const Message: ({ className, children, avatar, align, style, }: MessageProps) => import("
|
|
38
|
+
export declare const Message: ({ className, children, avatar, align, style, }: MessageProps) => import("react/jsx-runtime").JSX.Element;
|
|
39
39
|
export declare const MessageTag: ({ children, style, }: {
|
|
40
40
|
children: ReactNode;
|
|
41
41
|
style?: CSSProperties;
|
|
42
|
-
}) => import("
|
|
42
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
43
43
|
export { Conversation };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx, jsxs } from "
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Stack, Text, Tag } from "@ultraviolet/ui";
|
|
4
4
|
import { styledText, conversationContainer, conversationBubble, conversationRawMessage, conversationAvatar, conversationInfos, conversationTag } from "./styles.css.js";
|
|
5
5
|
const Conversation = ({
|
|
@@ -14,17 +14,34 @@ const MessageInfos = ({
|
|
|
14
14
|
const Date = ({
|
|
15
15
|
children,
|
|
16
16
|
style
|
|
17
|
-
}) => /* @__PURE__ */ jsx(
|
|
17
|
+
}) => /* @__PURE__ */ jsx(
|
|
18
|
+
Text,
|
|
19
|
+
{
|
|
20
|
+
as: "p",
|
|
21
|
+
className: styledText,
|
|
22
|
+
prominence: "weak",
|
|
23
|
+
style,
|
|
24
|
+
variant: "bodySmall",
|
|
25
|
+
children
|
|
26
|
+
}
|
|
27
|
+
);
|
|
18
28
|
const Message = ({
|
|
19
29
|
className,
|
|
20
30
|
children,
|
|
21
31
|
avatar,
|
|
22
32
|
align = "right",
|
|
23
33
|
style
|
|
24
|
-
}) => /* @__PURE__ */ jsxs(
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
34
|
+
}) => /* @__PURE__ */ jsxs(
|
|
35
|
+
"div",
|
|
36
|
+
{
|
|
37
|
+
className: `${className ? `${className} ` : ""}${conversationContainer[align]}`,
|
|
38
|
+
style,
|
|
39
|
+
children: [
|
|
40
|
+
/* @__PURE__ */ jsx("div", { className: conversationBubble, children: /* @__PURE__ */ jsx("div", { className: conversationRawMessage[align], children }) }),
|
|
41
|
+
/* @__PURE__ */ jsx("div", { className: conversationAvatar, children: avatar })
|
|
42
|
+
]
|
|
43
|
+
}
|
|
44
|
+
);
|
|
28
45
|
const MessageTag = ({
|
|
29
46
|
children,
|
|
30
47
|
style
|
|
@@ -28,5 +28,5 @@ type CustomerSatisfactionProps = {
|
|
|
28
28
|
className?: string;
|
|
29
29
|
style?: CSSProperties;
|
|
30
30
|
};
|
|
31
|
-
export declare const CustomerSatisfaction: ({ value, onChange, "data-testid": dataTestId, className, style, }: CustomerSatisfactionProps) => import("
|
|
31
|
+
export declare const CustomerSatisfaction: ({ value, onChange, "data-testid": dataTestId, className, style, }: CustomerSatisfactionProps) => import("react/jsx-runtime").JSX.Element;
|
|
32
32
|
export {};
|