@hazelcast/ui 1.3.3-next.23 → 1.3.3-next.25
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/lib/Card.module.scss +36 -35
- package/lib/Table/Cell.module.scss +7 -3
- package/lib/Table/EnhancedRenderers.js +2 -1
- package/lib/Table/EnhancedRenderers.js.map +1 -1
- package/lib/Table/Header.module.scss +8 -7
- package/lib/Table/Row.module.scss +7 -16
- package/lib/Table/Table.module.scss +2 -0
- package/lib/Tooltip.d.ts +1 -0
- package/lib/Tooltip.js +3 -3
- package/lib/Tooltip.js.map +1 -1
- package/lib/TruncatedText.d.ts +1 -0
- package/lib/TruncatedText.js +2 -2
- package/lib/TruncatedText.js.map +1 -1
- package/package.json +2 -2
- package/styles/typography/fonts/UbuntuMono-Bold.woff2 +0 -0
- package/styles/typography/fonts/UbuntuMono-BoldItalic.woff2 +0 -0
- package/styles/typography/fonts/UbuntuMono-Italic.woff2 +0 -0
- package/styles/typography/fonts/UbuntuMono-Regular.woff2 +0 -0
- package/styles/typography/ubuntu-mono.css +31 -0
package/lib/Card.module.scss
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
@use '../styles/constants' as c;
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
$padding: c.$grid * 5;
|
|
3
|
+
$padding: c.$grid * 5;
|
|
5
4
|
|
|
5
|
+
.wrapper {
|
|
6
6
|
background: c.$colorNeutralWhite;
|
|
7
7
|
|
|
8
8
|
.heading {
|
|
@@ -35,12 +35,6 @@
|
|
|
35
35
|
@include c.typographyBodyNormal;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
&.noTitle {
|
|
39
|
-
.content {
|
|
40
|
-
margin-top: 0;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
38
|
.caption {
|
|
45
39
|
display: flex;
|
|
46
40
|
margin-bottom: $padding;
|
|
@@ -49,43 +43,50 @@
|
|
|
49
43
|
flex: 1;
|
|
50
44
|
}
|
|
51
45
|
}
|
|
46
|
+
}
|
|
52
47
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
48
|
+
.bordered {
|
|
49
|
+
padding: $padding;
|
|
50
|
+
border-radius: c.$borderRadius;
|
|
51
|
+
border: c.$borderWidth solid c.$colorNeutral;
|
|
57
52
|
|
|
58
|
-
|
|
59
|
-
|
|
53
|
+
.heading {
|
|
54
|
+
@include c.typographyH3;
|
|
60
55
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
56
|
+
display: flex;
|
|
57
|
+
align-items: center;
|
|
58
|
+
margin: 0;
|
|
64
59
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
60
|
+
.icon {
|
|
61
|
+
margin-right: c.$grid * 2.5;
|
|
62
|
+
}
|
|
68
63
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
64
|
+
.title {
|
|
65
|
+
margin: 0;
|
|
66
|
+
font-size: c.$fontSizeBodyNormal !important;
|
|
67
|
+
line-height: c.$lineHeightBodyNormal !important;
|
|
73
68
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
}
|
|
69
|
+
&.space {
|
|
70
|
+
margin-right: c.$grid * 2.5;
|
|
77
71
|
}
|
|
78
72
|
}
|
|
73
|
+
}
|
|
79
74
|
|
|
80
|
-
|
|
81
|
-
|
|
75
|
+
.content {
|
|
76
|
+
@include c.typographyBodyNormal;
|
|
82
77
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
78
|
+
margin-top: c.$grid * 4;
|
|
79
|
+
padding: 0;
|
|
80
|
+
}
|
|
86
81
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
82
|
+
.caption {
|
|
83
|
+
margin: (-$padding) (-$padding) $padding;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.noTitle {
|
|
88
|
+
.content {
|
|
89
|
+
margin-top: 0;
|
|
90
|
+
padding-top: 0;
|
|
90
91
|
}
|
|
91
92
|
}
|
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
position: relative;
|
|
7
7
|
display: flex;
|
|
8
8
|
align-items: center;
|
|
9
|
-
height: c.$grid *
|
|
9
|
+
height: c.$grid * 12;
|
|
10
10
|
padding-right: c.$grid * 5;
|
|
11
11
|
padding-left: c.$grid * 5;
|
|
12
12
|
color: c.$colorText;
|
|
13
13
|
background-color: inherit;
|
|
14
|
+
font-family: 'Ubuntu Mono', monospace;
|
|
14
15
|
|
|
15
|
-
@include c.typographyBodySmall;
|
|
16
16
|
@include h.overflowEllipsis;
|
|
17
17
|
|
|
18
18
|
&.alignLeft {
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
&:not(:last-of-type) {
|
|
35
|
-
border-right: c.$borderWidth solid c.$
|
|
35
|
+
border-right: c.$borderWidth solid c.$colorNeutralWhite;
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
|
|
@@ -51,3 +51,7 @@
|
|
|
51
51
|
.selectable {
|
|
52
52
|
user-select: none;
|
|
53
53
|
}
|
|
54
|
+
|
|
55
|
+
.truncated {
|
|
56
|
+
font-family: 'Ubuntu Mono', monospace;
|
|
57
|
+
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TruncatedText } from '../TruncatedText';
|
|
3
|
+
import styles from './Cell.module.scss';
|
|
3
4
|
export const EnhancedHeaderFooterRenderer = ({ column, columnResizing, type }) => {
|
|
4
5
|
const value = column[type];
|
|
5
6
|
if (typeof value === 'string') {
|
|
@@ -11,6 +12,6 @@ export const EnhancedCellRenderer = ({ cell, hasCellRenderer, columnResizing })
|
|
|
11
12
|
if (hasCellRenderer) {
|
|
12
13
|
return cell.render('Cell');
|
|
13
14
|
}
|
|
14
|
-
return React.createElement(TruncatedText, { text: cell.value, forceUpdateToken: columnResizing.isResizingColumn });
|
|
15
|
+
return React.createElement(TruncatedText, { text: cell.value, forceUpdateToken: columnResizing.isResizingColumn, tooltipClassName: styles.truncated });
|
|
15
16
|
};
|
|
16
17
|
//# sourceMappingURL=EnhancedRenderers.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EnhancedRenderers.js","sourceRoot":"","sources":["../../src/Table/EnhancedRenderers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;
|
|
1
|
+
{"version":3,"file":"EnhancedRenderers.js","sourceRoot":"","sources":["../../src/Table/EnhancedRenderers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAEhD,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAkBvC,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAmB,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAwC,EAAE,EAAE;IACvI,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC1B,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,oBAAC,aAAa,IAAC,IAAI,EAAE,KAAK,EAAE,gBAAgB,EAAE,cAAc,CAAC,gBAAgB,GAAI,CAAA;KACzF;IAED,OAAO,MAAM,CAAC,MAAM,CAAC,IAAI,CAAiB,CAAA;AAC5C,CAAC,CAAA;AAQD,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAmB,EAAE,IAAI,EAAE,eAAe,EAAE,cAAc,EAAgC,EAAE,EAAE;IAChI,IAAI,eAAe,EAAE;QACnB,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CAAiB,CAAA;KAC3C;IAED,OAAO,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,gBAAgB,EAAE,cAAc,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,CAAC,SAAS,GAAI,CAAA;AACnI,CAAC,CAAA"}
|
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
display: flex;
|
|
7
7
|
justify-content: center;
|
|
8
8
|
align-items: center;
|
|
9
|
-
width:
|
|
9
|
+
width: 20px;
|
|
10
10
|
height: 100%;
|
|
11
11
|
top: 0;
|
|
12
|
-
right: -
|
|
12
|
+
right: -10px;
|
|
13
13
|
z-index: c.$zIndex100;
|
|
14
14
|
cursor: col-resize;
|
|
15
15
|
user-select: none;
|
|
@@ -20,9 +20,9 @@
|
|
|
20
20
|
/* doiuse-enable css-touch-action */
|
|
21
21
|
|
|
22
22
|
.separator {
|
|
23
|
-
width:
|
|
24
|
-
height:
|
|
25
|
-
background: c.$
|
|
23
|
+
width: 1px;
|
|
24
|
+
height: 100%;
|
|
25
|
+
background: c.$colorNeutralWhite;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
.resizing,
|
|
@@ -37,10 +37,11 @@
|
|
|
37
37
|
.th {
|
|
38
38
|
display: flex;
|
|
39
39
|
align-items: center;
|
|
40
|
-
height: c.$grid *
|
|
40
|
+
height: c.$grid * 12;
|
|
41
41
|
padding-left: c.$grid * 5;
|
|
42
42
|
padding-right: c.$grid * 5;
|
|
43
43
|
color: c.$colorText;
|
|
44
|
+
background: #e9f0f9;
|
|
44
45
|
|
|
45
46
|
@include c.typographyBodySmall('bold');
|
|
46
47
|
@include h.overflowEllipsis;
|
|
@@ -78,7 +79,7 @@
|
|
|
78
79
|
}
|
|
79
80
|
|
|
80
81
|
&:hover {
|
|
81
|
-
background-color:
|
|
82
|
+
background-color: #ccdff5;
|
|
82
83
|
}
|
|
83
84
|
}
|
|
84
85
|
|
|
@@ -1,13 +1,8 @@
|
|
|
1
1
|
@use '../../styles/constants' as c;
|
|
2
2
|
@use '../../styles/helpers' as h;
|
|
3
3
|
|
|
4
|
-
@mixin rowBase {
|
|
5
|
-
background-color: c.$colorNeutralLighter;
|
|
6
|
-
margin-bottom: c.$grid * 1.25;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
4
|
.row {
|
|
10
|
-
@include
|
|
5
|
+
@include c.typographyBodySmall;
|
|
11
6
|
|
|
12
7
|
&.clickable {
|
|
13
8
|
cursor: pointer;
|
|
@@ -18,18 +13,17 @@
|
|
|
18
13
|
// Do not remove outline for high-contrast modes
|
|
19
14
|
// https://stackoverflow.com/a/52616313
|
|
20
15
|
outline: c.$outlineWidth solid transparent;
|
|
21
|
-
background-color:
|
|
16
|
+
background-color: #e2e7fa;
|
|
22
17
|
}
|
|
23
18
|
|
|
24
19
|
&:hover {
|
|
25
|
-
|
|
20
|
+
font-weight: bold;
|
|
21
|
+
background-color: #e2e7fa;
|
|
26
22
|
}
|
|
27
23
|
}
|
|
28
24
|
}
|
|
29
25
|
|
|
30
26
|
.linkRow {
|
|
31
|
-
@include rowBase;
|
|
32
|
-
|
|
33
27
|
cursor: pointer;
|
|
34
28
|
|
|
35
29
|
.link {
|
|
@@ -42,15 +36,12 @@
|
|
|
42
36
|
// Do not remove outline for high-contrast modes
|
|
43
37
|
// https://stackoverflow.com/a/52616313
|
|
44
38
|
outline: c.$outlineWidth solid transparent;
|
|
45
|
-
background-color:
|
|
39
|
+
background-color: #e2e7fa;
|
|
46
40
|
}
|
|
47
41
|
|
|
48
42
|
&:hover {
|
|
49
|
-
|
|
43
|
+
font-weight: bold;
|
|
44
|
+
background-color: #e2e7fa;
|
|
50
45
|
}
|
|
51
46
|
}
|
|
52
47
|
}
|
|
53
|
-
|
|
54
|
-
.headerRow {
|
|
55
|
-
margin-bottom: c.$grid * 1.25;
|
|
56
|
-
}
|
package/lib/Tooltip.d.ts
CHANGED
|
@@ -13,6 +13,7 @@ export type TooltipProps = {
|
|
|
13
13
|
padding?: number;
|
|
14
14
|
placement?: Placement;
|
|
15
15
|
visible?: boolean;
|
|
16
|
+
className?: string;
|
|
16
17
|
hoverAbleTooltip?: boolean;
|
|
17
18
|
children: (ref: React.Dispatch<React.SetStateAction<HTMLElement | null>>, onMouseEnter?: MouseEventHandler, onMouseLeave?: MouseEventHandler) => ReactNode;
|
|
18
19
|
popperRef?: MutableRefObject<PopperRef | undefined>;
|
package/lib/Tooltip.js
CHANGED
|
@@ -22,7 +22,7 @@ const TooltipContext = createContext(null);
|
|
|
22
22
|
* ### Usage
|
|
23
23
|
* Wrap the target element with Tooltip component and use the "content" property to define what should be displayed inside the tooltip.
|
|
24
24
|
*/
|
|
25
|
-
export const Tooltip = ({ id, content, hideTimeoutDuration = 100, offset = 10, padding = 10, placement = 'top', visible: visibilityOverride, children, popperRef, wordBreak, updateToken, tooltipContainer = 'body', hoverAbleTooltip = true, disabled = false, zIndex = 20, arrow = true, color, }) => {
|
|
25
|
+
export const Tooltip = ({ id, content, hideTimeoutDuration = 100, offset = 10, padding = 10, placement = 'top', visible: visibilityOverride, children, popperRef, wordBreak, updateToken, tooltipContainer = 'body', hoverAbleTooltip = true, disabled = false, zIndex = 20, arrow = true, color, className, }) => {
|
|
26
26
|
const [isShown, setShown] = useState(false);
|
|
27
27
|
const timeoutRef = useRef(null);
|
|
28
28
|
const context = useContext(TooltipContext);
|
|
@@ -127,12 +127,12 @@ export const Tooltip = ({ id, content, hideTimeoutDuration = 100, offset = 10, p
|
|
|
127
127
|
onMouseLeave(e);
|
|
128
128
|
}),
|
|
129
129
|
content !== undefined && (React.createElement(React.Fragment, null,
|
|
130
|
-
React.createElement("span", { ...(id && { id }), className: styles.tooltipSr, role: "tooltip", "data-test": "tooltip-sr" }, content),
|
|
130
|
+
React.createElement("span", { ...(id && { id }), className: cn(styles.tooltipSr, className), role: "tooltip", "data-test": "tooltip-sr" }, content),
|
|
131
131
|
tooltipPortalContainer &&
|
|
132
132
|
ReactDOM.createPortal(React.createElement(React.Fragment, null,
|
|
133
133
|
React.createElement("span", { ref: setPopperElement, className: cn(styles.overlay, {
|
|
134
134
|
[styles.hidden]: !isTooltipVisible,
|
|
135
|
-
}, color && [styles[color]]), style: { ...popper.styles.popper, ...{ zIndex: context ? zIndex + 1 : zIndex }, wordBreak }, "data-test": "tooltip-overlay", "aria-hidden": true, ...popper.attributes.popper },
|
|
135
|
+
}, color && [styles[color]], className), style: { ...popper.styles.popper, ...{ zIndex: context ? zIndex + 1 : zIndex }, wordBreak }, "data-test": "tooltip-overlay", "aria-hidden": true, ...popper.attributes.popper },
|
|
136
136
|
content,
|
|
137
137
|
arrow && (React.createElement("span", { ref: setArrowElement, className: styles.arrow, style: popper.styles.arrow, "data-test": "tooltip-arrow", ...popper.attributes.arrow })))), tooltipPortalContainer)))));
|
|
138
138
|
};
|
package/lib/Tooltip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,WAAW,EACX,QAAQ,EACR,mBAAmB,EAGnB,eAAe,EACf,aAAa,EACb,UAAU,EACV,OAAO,EACP,MAAM,EACN,SAAS,GAGV,MAAM,OAAO,CAAA;AACd,OAAO,QAAQ,MAAM,WAAW,CAAA;AAEhC,OAAO,EAAiC,SAAS,EAAE,MAAM,cAAc,CAAA;AACvE,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AACzC,OAAO,EAAE,kBAAkB,EAAmB,MAAM,gBAAgB,CAAA;AAEpE,OAAO,MAAM,MAAM,uBAAuB,CAAA;AAE1C,MAAM,cAAc,GAAG,aAAa,CAK1B,IAAI,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":"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"}
|
package/lib/TruncatedText.d.ts
CHANGED
package/lib/TruncatedText.js
CHANGED
|
@@ -5,7 +5,7 @@ import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
|
|
|
5
5
|
import { useUID } from 'react-uid';
|
|
6
6
|
import { Tooltip } from './Tooltip';
|
|
7
7
|
import styles from './TruncatedText.module.scss';
|
|
8
|
-
export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisible, tooltipPlacement = 'top', hoverAbleTooltip, multiline, }) => {
|
|
8
|
+
export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisible, tooltipPlacement = 'top', hoverAbleTooltip, multiline, tooltipClassName, }) => {
|
|
9
9
|
const textRef = useRef(null);
|
|
10
10
|
const [tooltip, setTooltip] = useState();
|
|
11
11
|
const idTooltip = useUID();
|
|
@@ -17,7 +17,7 @@ export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisibl
|
|
|
17
17
|
// https://codepen.io/triple-j/pen/wadKQB
|
|
18
18
|
setTooltip(span.offsetWidth < span.scrollWidth || span.offsetHeight < span.scrollHeight ? text : undefined);
|
|
19
19
|
}, [text, forceUpdateToken]);
|
|
20
|
-
return (React.createElement(Tooltip, { id: idTooltip, content: tooltip, visible: tooltipVisible, placement: tooltipPlacement, updateToken: forceUpdateToken, hoverAbleTooltip: hoverAbleTooltip }, (ref) => (React.createElement("div", { ref: mergeRefs([textRef, ref]), className: cn(styles.truncatedText, { [styles.multiline]: multiline }, className) },
|
|
20
|
+
return (React.createElement(Tooltip, { id: idTooltip, content: tooltip, visible: tooltipVisible, className: tooltipClassName, placement: tooltipPlacement, updateToken: forceUpdateToken, hoverAbleTooltip: hoverAbleTooltip }, (ref) => (React.createElement("div", { ref: mergeRefs([textRef, ref]), className: cn(styles.truncatedText, { [styles.multiline]: multiline }, className) },
|
|
21
21
|
React.createElement("span", { "aria-labelledby": tooltip ? idTooltip : undefined }, text)))));
|
|
22
22
|
};
|
|
23
23
|
//# sourceMappingURL=TruncatedText.js.map
|
package/lib/TruncatedText.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../src/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAuC,MAAM,OAAO,CAAA;AACxF,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAEjD,OAAO,MAAM,MAAM,6BAA6B,CAAA;
|
|
1
|
+
{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../src/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAuC,MAAM,OAAO,CAAA;AACxF,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAEjD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAchD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,IAAI,EACJ,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,gBAAgB,GAAG,KAAK,EACxB,gBAAgB,EAChB,SAAS,EACT,gBAAgB,GACjB,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC5C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAA0B,CAAA;IAChE,MAAM,SAAS,GAAG,MAAM,EAAE,CAAA;IAE1B,yBAAyB,CAAC,GAAG,EAAE;QAC7B,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAA;QAE5B,IAAI,IAAI,KAAK,IAAI,EAAE;YACjB,OAAM;SACP;QAED,yCAAyC;QACzC,UAAU,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IAC7G,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAE5B,OAAO,CACL,oBAAC,OAAO,IACN,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,gBAAgB,EAC3B,SAAS,EAAE,gBAAgB,EAC3B,WAAW,EAAE,gBAAgB,EAC7B,gBAAgB,EAAE,gBAAgB,IAEjC,CAAC,GAAG,EAAE,EAAE,CAAC,CACR,6BAAK,GAAG,EAAE,SAAS,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,SAAS,CAAC;QACpH,iDAAuB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IAAG,IAAI,CAAQ,CACjE,CACP,CACO,CACX,CAAA;AACH,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hazelcast/ui",
|
|
3
|
-
"version": "1.3.3-next.
|
|
3
|
+
"version": "1.3.3-next.25+f817741",
|
|
4
4
|
"description": "Hazelcast design system components",
|
|
5
5
|
"author": "",
|
|
6
6
|
"homepage": "https://github.com/hazelcast/frontend-shared#readme",
|
|
@@ -121,5 +121,5 @@
|
|
|
121
121
|
"react": "^17 || ^18",
|
|
122
122
|
"react-dom": "^17 || ^18"
|
|
123
123
|
},
|
|
124
|
-
"gitHead": "
|
|
124
|
+
"gitHead": "f8177415a8b2d82431a2bfc74e044c587bc94adc"
|
|
125
125
|
}
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
@font-face {
|
|
2
|
+
font-family: 'Ubuntu Mono';
|
|
3
|
+
font-style: normal;
|
|
4
|
+
font-display: swap;
|
|
5
|
+
font-weight: 400;
|
|
6
|
+
src: url('./fonts/UbuntuMono-Regular.woff2') format('woff2');
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@font-face {
|
|
10
|
+
font-family: 'Ubuntu Mono';
|
|
11
|
+
font-style: italic;
|
|
12
|
+
font-display: swap;
|
|
13
|
+
font-weight: 400;
|
|
14
|
+
src: url('./fonts/UbuntuMono-Italic.woff2') format('woff2');
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@font-face {
|
|
18
|
+
font-family: 'Ubuntu Mono';
|
|
19
|
+
font-style: normal;
|
|
20
|
+
font-display: swap;
|
|
21
|
+
font-weight: 500;
|
|
22
|
+
src: url('./fonts/UbuntuMono-Bold.woff2') format('woff2');
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@font-face {
|
|
26
|
+
font-family: 'Ubuntu Mono';
|
|
27
|
+
font-style: italic;
|
|
28
|
+
font-display: swap;
|
|
29
|
+
font-weight: 500;
|
|
30
|
+
src: url('./fonts/UbuntuMono-BoldItalic.woff2') format('woff2');
|
|
31
|
+
}
|