@seeqdev/qomponents 0.0.153 → 0.0.154
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/README.md +135 -135
- package/dist/FontCustom.woff +0 -0
- package/dist/FontCustom.woff2 +0 -0
- package/dist/example/.eslintrc.cjs +14 -14
- package/dist/example/README.md +33 -33
- package/dist/example/index.html +13 -13
- package/dist/example/package.json +30 -30
- package/dist/example/src/ComplexSelectExample.tsx +81 -81
- package/dist/example/src/Example.tsx +408 -408
- package/dist/example/src/index.css +102 -102
- package/dist/example/src/main.tsx +10 -10
- package/dist/example/src/vite-env.d.ts +1 -1
- package/dist/example/tsconfig.json +33 -33
- package/dist/example/tsconfig.node.json +12 -12
- package/dist/example/vite.config.ts +12 -12
- package/dist/index.esm.js +13 -13
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +13 -13
- package/dist/index.js.map +1 -1
- package/dist/styles.css +3819 -3811
- package/package.json +88 -88
|
@@ -1,102 +1,102 @@
|
|
|
1
|
-
@import '@seeqdev/qomponents/dist/styles.css';
|
|
2
|
-
@import '@fortawesome/fontawesome-free/css/all.css';
|
|
3
|
-
|
|
4
|
-
.tw-light {
|
|
5
|
-
background-color: white;
|
|
6
|
-
color: #1a1a1a;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.tw-dark {
|
|
10
|
-
background-color: rgb(36, 36, 34);
|
|
11
|
-
color: rgb(194, 188, 176);
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.formPanel {
|
|
15
|
-
align-items: center;
|
|
16
|
-
width: 500px;
|
|
17
|
-
display: flex;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.header {
|
|
21
|
-
font-size: larger;
|
|
22
|
-
font-weight: bold;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.backdrop {
|
|
26
|
-
margin: 0;
|
|
27
|
-
display: flex;
|
|
28
|
-
justify-content: center;
|
|
29
|
-
align-items: center;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.scroll-container {
|
|
33
|
-
margin: auto;
|
|
34
|
-
max-height: 100%;
|
|
35
|
-
overflow: auto;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.flex-container {
|
|
39
|
-
margin-top: 30px;
|
|
40
|
-
margin-bottom: 70px;
|
|
41
|
-
display: flex;
|
|
42
|
-
flex-direction: column;
|
|
43
|
-
justify-content: center;
|
|
44
|
-
width: 500px;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.formRow {
|
|
48
|
-
display: flex;
|
|
49
|
-
flex-direction: row;
|
|
50
|
-
margin-bottom: 15px;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.formColumn {
|
|
54
|
-
display: flex;
|
|
55
|
-
flex-direction: column;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.buttonRow {
|
|
59
|
-
display: flex;
|
|
60
|
-
justify-content: center;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.labelWidth {
|
|
64
|
-
width: 150px;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.formElementWidth {
|
|
68
|
-
width: 350px;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.mr-10 {
|
|
72
|
-
margin-right: 10px;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.ml-10 {
|
|
76
|
-
margin-left: 10px;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.mb-10 {
|
|
80
|
-
margin-bottom: 10px;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
/* styles for complexSelect*/
|
|
84
|
-
.selectOptionWrapperDiv {
|
|
85
|
-
display: flex;
|
|
86
|
-
flex-direction: row;
|
|
87
|
-
align-items: center;
|
|
88
|
-
height: 34px;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.selectOptionDiv {
|
|
92
|
-
display: flex;
|
|
93
|
-
flex-direction: column;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.selectOptionSubText {
|
|
97
|
-
font-size: smaller;
|
|
98
|
-
padding: 0;
|
|
99
|
-
margin-top: -6px;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
/* end styles for complexSelect*/
|
|
1
|
+
@import '@seeqdev/qomponents/dist/styles.css';
|
|
2
|
+
@import '@fortawesome/fontawesome-free/css/all.css';
|
|
3
|
+
|
|
4
|
+
.tw-light {
|
|
5
|
+
background-color: white;
|
|
6
|
+
color: #1a1a1a;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.tw-dark {
|
|
10
|
+
background-color: rgb(36, 36, 34);
|
|
11
|
+
color: rgb(194, 188, 176);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.formPanel {
|
|
15
|
+
align-items: center;
|
|
16
|
+
width: 500px;
|
|
17
|
+
display: flex;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.header {
|
|
21
|
+
font-size: larger;
|
|
22
|
+
font-weight: bold;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.backdrop {
|
|
26
|
+
margin: 0;
|
|
27
|
+
display: flex;
|
|
28
|
+
justify-content: center;
|
|
29
|
+
align-items: center;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.scroll-container {
|
|
33
|
+
margin: auto;
|
|
34
|
+
max-height: 100%;
|
|
35
|
+
overflow: auto;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.flex-container {
|
|
39
|
+
margin-top: 30px;
|
|
40
|
+
margin-bottom: 70px;
|
|
41
|
+
display: flex;
|
|
42
|
+
flex-direction: column;
|
|
43
|
+
justify-content: center;
|
|
44
|
+
width: 500px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.formRow {
|
|
48
|
+
display: flex;
|
|
49
|
+
flex-direction: row;
|
|
50
|
+
margin-bottom: 15px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.formColumn {
|
|
54
|
+
display: flex;
|
|
55
|
+
flex-direction: column;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.buttonRow {
|
|
59
|
+
display: flex;
|
|
60
|
+
justify-content: center;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.labelWidth {
|
|
64
|
+
width: 150px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.formElementWidth {
|
|
68
|
+
width: 350px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.mr-10 {
|
|
72
|
+
margin-right: 10px;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.ml-10 {
|
|
76
|
+
margin-left: 10px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.mb-10 {
|
|
80
|
+
margin-bottom: 10px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* styles for complexSelect*/
|
|
84
|
+
.selectOptionWrapperDiv {
|
|
85
|
+
display: flex;
|
|
86
|
+
flex-direction: row;
|
|
87
|
+
align-items: center;
|
|
88
|
+
height: 34px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.selectOptionDiv {
|
|
92
|
+
display: flex;
|
|
93
|
+
flex-direction: column;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.selectOptionSubText {
|
|
97
|
+
font-size: smaller;
|
|
98
|
+
padding: 0;
|
|
99
|
+
margin-top: -6px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* end styles for complexSelect*/
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import ReactDOM from 'react-dom/client';
|
|
3
|
-
import Example from './Example';
|
|
4
|
-
import './index.css';
|
|
5
|
-
|
|
6
|
-
ReactDOM.createRoot(document.body as HTMLElement).render(
|
|
7
|
-
<React.StrictMode>
|
|
8
|
-
<Example />
|
|
9
|
-
</React.StrictMode>,
|
|
10
|
-
);
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import ReactDOM from 'react-dom/client';
|
|
3
|
+
import Example from './Example';
|
|
4
|
+
import './index.css';
|
|
5
|
+
|
|
6
|
+
ReactDOM.createRoot(document.body as HTMLElement).render(
|
|
7
|
+
<React.StrictMode>
|
|
8
|
+
<Example />
|
|
9
|
+
</React.StrictMode>,
|
|
10
|
+
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/// <reference types="vite/client" />
|
|
1
|
+
/// <reference types="vite/client" />
|
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"target": "ES2020",
|
|
4
|
-
"useDefineForClassFields": true,
|
|
5
|
-
"lib": [
|
|
6
|
-
"ES2020",
|
|
7
|
-
"DOM",
|
|
8
|
-
"DOM.Iterable"
|
|
9
|
-
],
|
|
10
|
-
"module": "ESNext",
|
|
11
|
-
"skipLibCheck": true,
|
|
12
|
-
"moduleResolution": "node",
|
|
13
|
-
"allowImportingTsExtensions": true,
|
|
14
|
-
"resolveJsonModule": true,
|
|
15
|
-
"isolatedModules": true,
|
|
16
|
-
"noEmit": true,
|
|
17
|
-
"jsx": "react",
|
|
18
|
-
/* Linting */
|
|
19
|
-
"strict": true,
|
|
20
|
-
"noUnusedLocals": true,
|
|
21
|
-
"noUnusedParameters": true,
|
|
22
|
-
"noFallthroughCasesInSwitch": true,
|
|
23
|
-
"allowSyntheticDefaultImports": true
|
|
24
|
-
},
|
|
25
|
-
"include": [
|
|
26
|
-
"src"
|
|
27
|
-
],
|
|
28
|
-
"references": [
|
|
29
|
-
{
|
|
30
|
-
"path": "./tsconfig.node.json"
|
|
31
|
-
}
|
|
32
|
-
]
|
|
33
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2020",
|
|
4
|
+
"useDefineForClassFields": true,
|
|
5
|
+
"lib": [
|
|
6
|
+
"ES2020",
|
|
7
|
+
"DOM",
|
|
8
|
+
"DOM.Iterable"
|
|
9
|
+
],
|
|
10
|
+
"module": "ESNext",
|
|
11
|
+
"skipLibCheck": true,
|
|
12
|
+
"moduleResolution": "node",
|
|
13
|
+
"allowImportingTsExtensions": true,
|
|
14
|
+
"resolveJsonModule": true,
|
|
15
|
+
"isolatedModules": true,
|
|
16
|
+
"noEmit": true,
|
|
17
|
+
"jsx": "react",
|
|
18
|
+
/* Linting */
|
|
19
|
+
"strict": true,
|
|
20
|
+
"noUnusedLocals": true,
|
|
21
|
+
"noUnusedParameters": true,
|
|
22
|
+
"noFallthroughCasesInSwitch": true,
|
|
23
|
+
"allowSyntheticDefaultImports": true
|
|
24
|
+
},
|
|
25
|
+
"include": [
|
|
26
|
+
"src"
|
|
27
|
+
],
|
|
28
|
+
"references": [
|
|
29
|
+
{
|
|
30
|
+
"path": "./tsconfig.node.json"
|
|
31
|
+
}
|
|
32
|
+
]
|
|
33
|
+
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"composite": true,
|
|
4
|
-
"skipLibCheck": true,
|
|
5
|
-
"module": "ESNext",
|
|
6
|
-
"moduleResolution": "node",
|
|
7
|
-
"allowSyntheticDefaultImports": true
|
|
8
|
-
},
|
|
9
|
-
"include": [
|
|
10
|
-
"vite.config.ts"
|
|
11
|
-
]
|
|
12
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"composite": true,
|
|
4
|
+
"skipLibCheck": true,
|
|
5
|
+
"module": "ESNext",
|
|
6
|
+
"moduleResolution": "node",
|
|
7
|
+
"allowSyntheticDefaultImports": true
|
|
8
|
+
},
|
|
9
|
+
"include": [
|
|
10
|
+
"vite.config.ts"
|
|
11
|
+
]
|
|
12
|
+
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { defineConfig } from 'vite';
|
|
2
|
-
import react from '@vitejs/plugin-react';
|
|
3
|
-
|
|
4
|
-
// https://vitejs.dev/config/
|
|
5
|
-
export default defineConfig({
|
|
6
|
-
plugins: [react()],
|
|
7
|
-
css: {
|
|
8
|
-
postcss: {
|
|
9
|
-
plugins: [],
|
|
10
|
-
},
|
|
11
|
-
},
|
|
12
|
-
});
|
|
1
|
+
import { defineConfig } from 'vite';
|
|
2
|
+
import react from '@vitejs/plugin-react';
|
|
3
|
+
|
|
4
|
+
// https://vitejs.dev/config/
|
|
5
|
+
export default defineConfig({
|
|
6
|
+
plugins: [react()],
|
|
7
|
+
css: {
|
|
8
|
+
postcss: {
|
|
9
|
+
plugins: [],
|
|
10
|
+
},
|
|
11
|
+
},
|
|
12
|
+
});
|
package/dist/index.esm.js
CHANGED
|
@@ -89,7 +89,7 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
|
|
|
89
89
|
const fontAwesomePrefix = iconPrefix ? iconPrefix : 'fa-sharp fa-regular';
|
|
90
90
|
const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
|
|
91
91
|
const style = type === 'color' && color ? { color } : {};
|
|
92
|
-
const appliedClassNames = `${iconPrefixString} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''}
|
|
92
|
+
const appliedClassNames = `${iconPrefixString} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''}
|
|
93
93
|
${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none tw-outline-none`;
|
|
94
94
|
const tooltipData = getQTipData(tooltipProps);
|
|
95
95
|
return (React__default.createElement("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
|
|
@@ -4751,13 +4751,13 @@ const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP
|
|
|
4751
4751
|
const arrowBaseClasses = 'before:tw-content-[\'\'] before:tw-absolute before:tw-border-8';
|
|
4752
4752
|
const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';
|
|
4753
4753
|
const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';
|
|
4754
|
-
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent
|
|
4754
|
+
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent
|
|
4755
4755
|
before:tw-border-l-transparent before:tw-border-r-black`;
|
|
4756
|
-
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
|
|
4756
|
+
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
|
|
4757
4757
|
before:tw-border-l-black before:tw-border-r-transparent`;
|
|
4758
|
-
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black
|
|
4758
|
+
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black
|
|
4759
4759
|
before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;
|
|
4760
|
-
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent
|
|
4760
|
+
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent
|
|
4761
4761
|
before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;
|
|
4762
4762
|
const placements = {
|
|
4763
4763
|
top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,
|
|
@@ -4767,7 +4767,7 @@ const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP
|
|
|
4767
4767
|
};
|
|
4768
4768
|
return (React__default.createElement("div", { className: "tw-group tw-relative tw-inline-block" },
|
|
4769
4769
|
children,
|
|
4770
|
-
React__default.createElement("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms]
|
|
4770
|
+
React__default.createElement("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms]
|
|
4771
4771
|
tw-absolute tw-opacity-0 group-hover:tw-opacity-100 tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white ${placements[position]}` }, text)));
|
|
4772
4772
|
};
|
|
4773
4773
|
|
|
@@ -13758,9 +13758,9 @@ const Dialog = $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9;
|
|
|
13758
13758
|
const DialogPortal = $5d3850c4d0b4e6c7$export$602eac185826482c;
|
|
13759
13759
|
const DialogClose = $5d3850c4d0b4e6c7$export$f39c2d165cd861fe;
|
|
13760
13760
|
const DialogContent = React__default.forwardRef(({ className, children, ...props }, ref) => (React__default.createElement(DialogPortal, null,
|
|
13761
|
-
React__default.createElement("div", { className: "tw-select-none tw-fixed tw-w-full tw-h-full tw-opacity-50 tw-inset-0 tw-z-[1009] tw-bg-sq-dark-background\n data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0\n data-[state=open]:fade-in-0 " }),
|
|
13762
|
-
React__default.createElement($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, { ref: ref, className: `tw-fixed tw-left-[50%] tw-top-0 tw-my-6 tw-translate-x-[-50%] tw-z-[1010] tw-grid
|
|
13763
|
-
tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
|
|
13761
|
+
React__default.createElement("div", { className: "tw-select-none tw-fixed tw-w-full tw-h-full tw-opacity-50 tw-inset-0 tw-z-[1009] tw-bg-sq-dark-background\r\n data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0\r\n data-[state=open]:fade-in-0 " }),
|
|
13762
|
+
React__default.createElement($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, { ref: ref, className: `tw-fixed tw-left-[50%] tw-top-0 tw-my-6 tw-translate-x-[-50%] tw-z-[1010] tw-grid
|
|
13763
|
+
tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
|
|
13764
13764
|
tw-rounded-lg ${className}`, ...props }, children))));
|
|
13765
13765
|
DialogContent.displayName = $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2.displayName;
|
|
13766
13766
|
const DialogHeader = (props) => (React__default.createElement("div", { className: "tw-w-full tw-justify-between" },
|
|
@@ -13832,7 +13832,7 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
|
|
|
13832
13832
|
'tw-max-w-5xl': size === '5xl',
|
|
13833
13833
|
'tw-max-w-6xl': size === '6xl',
|
|
13834
13834
|
}, dialogClassName) },
|
|
13835
|
-
React__default.createElement(DialogHeader, { className: "modal-header tw-flex tw-w-full tw-justify-between tw-border-sq-disabled-gray\n dark:tw-border-sq-dark-disabled-gray tw-border-0 tw-border-b tw-px-6 tw-py-4" },
|
|
13835
|
+
React__default.createElement(DialogHeader, { className: "modal-header tw-flex tw-w-full tw-justify-between tw-border-sq-disabled-gray\r\n dark:tw-border-sq-dark-disabled-gray tw-border-0 tw-border-b tw-px-6 tw-py-4" },
|
|
13836
13836
|
React__default.createElement("div", { className: "tw-flex tw-w-full" }, renderTitle()),
|
|
13837
13837
|
!hideCloseIcon && (React__default.createElement(DialogClose, { autoFocus: false, className: "[&:has(:focus-visible)]:none tw-opacity-70 tw-bg-transparent hover:tw-opacity-100 close tw-cursor-pointer tw-ml-4", "data-testid": "closeButton" },
|
|
13838
13838
|
React__default.createElement("span", { className: "tw-cursor-pointer" }, "\u00D7")))),
|
|
@@ -14761,8 +14761,8 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
|
|
|
14761
14761
|
React.useEffect(() => clearHoverTimeout, []);
|
|
14762
14762
|
const renderContent = () => {
|
|
14763
14763
|
return (React.createElement($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw-outline-none tw-outline-none tw-w-full tw-h-full" },
|
|
14764
|
-
React.createElement("div", { "data-testid": containerTestId, className: `${bgStyles$2} ${borderStyles$2} tw-relative tw-z-[1200] tw-min-w-6 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
|
|
14765
|
-
data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade tw-text-sq-text-color
|
|
14764
|
+
React.createElement("div", { "data-testid": containerTestId, className: `${bgStyles$2} ${borderStyles$2} tw-relative tw-z-[1200] tw-min-w-6 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
|
|
14765
|
+
data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade tw-text-sq-text-color
|
|
14766
14766
|
${extraPopoverClassNames || ''}` },
|
|
14767
14767
|
hasArrow && (React.createElement($cb5cc270b50c6fcd$export$21b07c8f274aebd5, { asChild: true },
|
|
14768
14768
|
React.createElement("div", { className: "tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-mt-[-7px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500" }))),
|
|
@@ -15874,7 +15874,7 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
|
|
|
15874
15874
|
* @param tooltipProps - props to pass to the tooltip
|
|
15875
15875
|
*/
|
|
15876
15876
|
const SvgIcon = ({ onClick, icon, color, type = 'default', extraClassNames, viewBox = '0 0 19 19', id, testId, customId, ...tooltipProps }) => {
|
|
15877
|
-
const appliedClassNames = `${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none
|
|
15877
|
+
const appliedClassNames = `${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none
|
|
15878
15878
|
tw-outline-none`;
|
|
15879
15879
|
const tooltipData = getQTipData(tooltipProps);
|
|
15880
15880
|
const appliedType = type === 'default' ? 'currentColor' : 'rgb(var(--sq-icon))';
|