@seeqdev/qomponents 0.0.170 → 0.0.172
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 +32 -32
- package/dist/example/src/ComplexSelectExample.tsx +81 -81
- package/dist/example/src/Example.tsx +638 -638
- package/dist/example/src/index.css +103 -103
- 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 +13 -13
- package/dist/index.esm.js +14 -14
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +14 -14
- package/dist/index.js.map +1 -1
- package/dist/src/Tabs/Tabs.types.d.ts +5 -0
- package/dist/styles.css +3868 -3872
- package/package.json +89 -89
|
@@ -1,103 +1,103 @@
|
|
|
1
|
-
@import '@seeqdev/qomponents/dist/styles.css';
|
|
2
|
-
@import '@fortawesome/fontawesome-free/css/all.css';
|
|
3
|
-
@import 'tailwindcss';
|
|
4
|
-
|
|
5
|
-
.tw-light {
|
|
6
|
-
background-color: white;
|
|
7
|
-
color: #1a1a1a;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.tw-dark {
|
|
11
|
-
background-color: rgb(36, 36, 34);
|
|
12
|
-
color: rgb(194, 188, 176);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.formPanel {
|
|
16
|
-
align-items: center;
|
|
17
|
-
width: 500px;
|
|
18
|
-
display: flex;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.header {
|
|
22
|
-
font-size: larger;
|
|
23
|
-
font-weight: bold;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.backdrop {
|
|
27
|
-
margin: 0;
|
|
28
|
-
display: flex;
|
|
29
|
-
justify-content: center;
|
|
30
|
-
align-items: center;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.scroll-container {
|
|
34
|
-
margin: auto;
|
|
35
|
-
max-height: 100%;
|
|
36
|
-
overflow: auto;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.flex-container {
|
|
40
|
-
margin-top: 30px;
|
|
41
|
-
margin-bottom: 70px;
|
|
42
|
-
display: flex;
|
|
43
|
-
flex-direction: column;
|
|
44
|
-
justify-content: center;
|
|
45
|
-
width: 500px;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.formRow {
|
|
49
|
-
display: flex;
|
|
50
|
-
flex-direction: row;
|
|
51
|
-
margin-bottom: 15px;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.formColumn {
|
|
55
|
-
display: flex;
|
|
56
|
-
flex-direction: column;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.buttonRow {
|
|
60
|
-
display: flex;
|
|
61
|
-
justify-content: center;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.labelWidth {
|
|
65
|
-
width: 150px;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.formElementWidth {
|
|
69
|
-
width: 350px;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.mr-10 {
|
|
73
|
-
margin-right: 10px;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.ml-10 {
|
|
77
|
-
margin-left: 10px;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.mb-10 {
|
|
81
|
-
margin-bottom: 10px;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
/* styles for complexSelect*/
|
|
85
|
-
.selectOptionWrapperDiv {
|
|
86
|
-
display: flex;
|
|
87
|
-
flex-direction: row;
|
|
88
|
-
align-items: center;
|
|
89
|
-
height: 34px;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.selectOptionDiv {
|
|
93
|
-
display: flex;
|
|
94
|
-
flex-direction: column;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.selectOptionSubText {
|
|
98
|
-
font-size: smaller;
|
|
99
|
-
padding: 0;
|
|
100
|
-
margin-top: -6px;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
/* end styles for complexSelect*/
|
|
1
|
+
@import '@seeqdev/qomponents/dist/styles.css';
|
|
2
|
+
@import '@fortawesome/fontawesome-free/css/all.css';
|
|
3
|
+
@import 'tailwindcss';
|
|
4
|
+
|
|
5
|
+
.tw-light {
|
|
6
|
+
background-color: white;
|
|
7
|
+
color: #1a1a1a;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.tw-dark {
|
|
11
|
+
background-color: rgb(36, 36, 34);
|
|
12
|
+
color: rgb(194, 188, 176);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.formPanel {
|
|
16
|
+
align-items: center;
|
|
17
|
+
width: 500px;
|
|
18
|
+
display: flex;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.header {
|
|
22
|
+
font-size: larger;
|
|
23
|
+
font-weight: bold;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.backdrop {
|
|
27
|
+
margin: 0;
|
|
28
|
+
display: flex;
|
|
29
|
+
justify-content: center;
|
|
30
|
+
align-items: center;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.scroll-container {
|
|
34
|
+
margin: auto;
|
|
35
|
+
max-height: 100%;
|
|
36
|
+
overflow: auto;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.flex-container {
|
|
40
|
+
margin-top: 30px;
|
|
41
|
+
margin-bottom: 70px;
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: column;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
width: 500px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.formRow {
|
|
49
|
+
display: flex;
|
|
50
|
+
flex-direction: row;
|
|
51
|
+
margin-bottom: 15px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.formColumn {
|
|
55
|
+
display: flex;
|
|
56
|
+
flex-direction: column;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.buttonRow {
|
|
60
|
+
display: flex;
|
|
61
|
+
justify-content: center;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.labelWidth {
|
|
65
|
+
width: 150px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.formElementWidth {
|
|
69
|
+
width: 350px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.mr-10 {
|
|
73
|
+
margin-right: 10px;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.ml-10 {
|
|
77
|
+
margin-left: 10px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.mb-10 {
|
|
81
|
+
margin-bottom: 10px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* styles for complexSelect*/
|
|
85
|
+
.selectOptionWrapperDiv {
|
|
86
|
+
display: flex;
|
|
87
|
+
flex-direction: row;
|
|
88
|
+
align-items: center;
|
|
89
|
+
height: 34px;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.selectOptionDiv {
|
|
93
|
+
display: flex;
|
|
94
|
+
flex-direction: column;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.selectOptionSubText {
|
|
98
|
+
font-size: smaller;
|
|
99
|
+
padding: 0;
|
|
100
|
+
margin-top: -6px;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* 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,13 +1,13 @@
|
|
|
1
|
-
import { defineConfig } from 'vite';
|
|
2
|
-
import react from '@vitejs/plugin-react';
|
|
3
|
-
import tailwindcss from '@tailwindcss/vite'
|
|
4
|
-
|
|
5
|
-
// https://vitejs.dev/config/
|
|
6
|
-
export default defineConfig({
|
|
7
|
-
plugins: [react(), tailwindcss()],
|
|
8
|
-
css: {
|
|
9
|
-
postcss: {
|
|
10
|
-
plugins: [],
|
|
11
|
-
},
|
|
12
|
-
},
|
|
13
|
-
});
|
|
1
|
+
import { defineConfig } from 'vite';
|
|
2
|
+
import react from '@vitejs/plugin-react';
|
|
3
|
+
import tailwindcss from '@tailwindcss/vite'
|
|
4
|
+
|
|
5
|
+
// https://vitejs.dev/config/
|
|
6
|
+
export default defineConfig({
|
|
7
|
+
plugins: [react(), tailwindcss()],
|
|
8
|
+
css: {
|
|
9
|
+
postcss: {
|
|
10
|
+
plugins: [],
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
});
|
package/dist/index.esm.js
CHANGED
|
@@ -91,7 +91,7 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
|
|
|
91
91
|
const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
|
|
92
92
|
const style = type === 'color' && color ? { color } : {};
|
|
93
93
|
const sizeClass = size ? `fa-${size}` : small ? 'fa-sm' : large ? 'fa-lg' : '';
|
|
94
|
-
const appliedClassNames = `${iconPrefixString} ${icon} ${sizeClass}
|
|
94
|
+
const appliedClassNames = `${iconPrefixString} ${icon} ${sizeClass}
|
|
95
95
|
${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none tw-outline-none`;
|
|
96
96
|
const tooltipData = getQTipData(tooltipProps);
|
|
97
97
|
return (jsx$1("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
|
|
@@ -4973,13 +4973,13 @@ const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP
|
|
|
4973
4973
|
const arrowBaseClasses = 'before:tw-content-[\'\'] before:tw-absolute before:tw-border-8';
|
|
4974
4974
|
const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';
|
|
4975
4975
|
const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';
|
|
4976
|
-
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent
|
|
4976
|
+
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent
|
|
4977
4977
|
before:tw-border-l-transparent before:tw-border-r-black`;
|
|
4978
|
-
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
|
|
4978
|
+
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
|
|
4979
4979
|
before:tw-border-l-black before:tw-border-r-transparent`;
|
|
4980
|
-
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black
|
|
4980
|
+
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black
|
|
4981
4981
|
before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;
|
|
4982
|
-
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent
|
|
4982
|
+
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent
|
|
4983
4983
|
before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;
|
|
4984
4984
|
const placements = {
|
|
4985
4985
|
top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,
|
|
@@ -4987,7 +4987,7 @@ const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP
|
|
|
4987
4987
|
right: `tw-translate-x-full -tw-right-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowRight}`,
|
|
4988
4988
|
bottom: `-tw-bottom-2 tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowBottom}`,
|
|
4989
4989
|
};
|
|
4990
|
-
return (jsxs("div", { className: "tw-group tw-relative tw-inline-block", children: [children, jsx$1("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms]
|
|
4990
|
+
return (jsxs("div", { className: "tw-group tw-relative tw-inline-block", children: [children, jsx$1("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms]
|
|
4991
4991
|
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]}`, children: text })] }));
|
|
4992
4992
|
};
|
|
4993
4993
|
|
|
@@ -14444,8 +14444,8 @@ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
|
14444
14444
|
const Dialog = Root$4;
|
|
14445
14445
|
const DialogPortal = Portal$1;
|
|
14446
14446
|
const DialogClose = Close;
|
|
14447
|
-
const DialogContent = React__default.forwardRef(({ className, children, ...props }, ref) => (jsxs(DialogPortal, { children: [jsx$1("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\
|
|
14448
|
-
tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
|
|
14447
|
+
const DialogContent = React__default.forwardRef(({ className, children, ...props }, ref) => (jsxs(DialogPortal, { children: [jsx$1("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 " }), jsxs(Content$2, { ref: ref, className: `tw-fixed tw-left-[50%] tw-top-0 tw-my-6 tw-translate-x-[-50%] tw-z-[1010] tw-grid
|
|
14448
|
+
tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
|
|
14449
14449
|
tw-rounded-lg ${className}`, ...props, children: [jsx$1(DialogTitle$1, { className: "tw-hidden" }), children] })] })));
|
|
14450
14450
|
DialogContent.displayName = Content$2.displayName;
|
|
14451
14451
|
const DialogHeader = (props) => (jsx$1("div", { className: "tw-w-full tw-justify-between", children: jsx$1("div", { ...props }) }));
|
|
@@ -14505,7 +14505,7 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
|
|
|
14505
14505
|
'tw-max-w-4xl': size === '4xl',
|
|
14506
14506
|
'tw-max-w-5xl': size === '5xl',
|
|
14507
14507
|
'tw-max-w-6xl': size === '6xl',
|
|
14508
|
-
}, dialogClassName), children: [jsxs(DialogHeader, { className: "modal-header tw-flex tw-w-full tw-justify-between tw-border-sq-disabled-gray\
|
|
14508
|
+
}, dialogClassName), children: [jsxs(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", children: [jsx$1("div", { className: "tw-flex tw-w-full", children: renderTitle() }), !hideCloseIcon && (jsx$1(DialogClose, { autoFocus: false, className: "[&:has(:focus-visible)]:none tw-opacity-70 tw-bg-transparent hover:tw-opacity-100 close tw-text-base tw-cursor-pointer tw-ml-4", "data-testid": "closeButton", children: jsx$1("span", { className: "tw-cursor-pointer", children: "\u00D7" }) }))] }), jsx$1(DialogDescription, { className: "modal-body tw-px-6 tw-py-4 tw-overflow-y-auto", asChild: true, children: children }), !hideFooterButtons && (jsx$1(DialogFooter, { className: "modal-footer tw-px-6 tw-py-4", children: modalFooter ?? (jsxs("div", { className: "tw-flex tw-w-full tw-justify-between", "data-testid": "modalFooter", children: [jsx$1("div", { className: "tw-flex tw-justify-start", children: customButton && (jsx$1(Button, { label: customButtonLabel, onClick: onClickCustomButton, disabled: disableCustomButton, extraClassNames: "tw-justify-start tw-min-w-[100px]", testId: "customButton", variant: customButtonVariant })) }), jsxs("div", { className: "tw-flex tw-justify-end", children: [jsx$1("div", { className: "tw-flex tw-items-center", children: middleFooterSection }), !hideCancelButton && (jsx$1(DialogClose, { asChild: true, children: jsx$1(Button, { label: cancelButtonLabel, extraClassNames: "tw-mr-5 tw-min-w-[100px]", tooltip: cancelButtonTooltip, variant: "outline", stopPropagation: false, testId: "cancelButton" }) })), !hideSubmitButton && (jsx$1(Button, { label: submitButtonLabel, onClick: handleSubmit, disabled: disableSubmitButton || isLoading, variant: submitButtonVariant, stopPropagation: stopPropagationSubmitButton, tooltip: submitButtonTooltip, icon: isLoading ? 'fc-loading-notch tw-animate-spin' : undefined, iconPosition: "left", testId: "submitButton", extraClassNames: "tw-min-w-[100px]" }))] })] })) }))] }) })) : (jsx$1(Fragment, {}));
|
|
14509
14509
|
};
|
|
14510
14510
|
|
|
14511
14511
|
function createCollection(name) {
|
|
@@ -14963,11 +14963,11 @@ const Tabs = ({ tabs, defaultActiveTab, activeTab, onTabSelect, extraClassNames,
|
|
|
14963
14963
|
return;
|
|
14964
14964
|
onTabSelect && onTabSelect(tabId);
|
|
14965
14965
|
};
|
|
14966
|
-
return (jsxs(Root2$2, { className: `tw-flex tw-flex-col tw-min-w-[300px] tw-max-w-full tw-flex-grow focus-visible:tw-outline-none ${extraClassNames || ''}`, defaultValue: defaultActiveTab, "data-testid": testId, id: id, value: activeTab, onValueChange: handleTabSelect, children: [jsx$1(List, { className: `tw-flex tw-flex-row tw-flex-wrap tw-z-[1001]`, children: tabs.map(({ id, icon, label, tabExtraClassNames, testId: tabsTestId, disabled }, index) => (jsx$1(Trigger$2, { className: `tw-bg-sq-white dark:tw-bg-sq-dark-background tw-h-[25px] focus-visible:tw-outline-none tw-min-w-[100px] tw-px-4 tw-border-solid dark:tw-border-gray-700 tw-flex tw-flex-1 tw-justify-center tw-items-center tw-border-r-[2px] last:tw-border-r-0 ${stretchTabs ? '' : 'tw-max-w-max tw-min-w-fit'} ${tabExtraClassNames || ''} ${activeTab === id
|
|
14966
|
+
return (jsxs(Root2$2, { className: `tw-flex tw-flex-col tw-min-w-[300px] tw-max-w-full tw-flex-grow focus-visible:tw-outline-none ${extraClassNames || ''}`, defaultValue: defaultActiveTab, "data-testid": testId, id: id, value: activeTab, onValueChange: handleTabSelect, children: [jsx$1(List, { className: `tw-flex tw-flex-row tw-flex-wrap tw-z-[1001]`, children: tabs.map(({ id, icon, label, tabExtraClassNames, testId: tabsTestId, disabled, tabLabelExtraClassNames = '' }, index) => (jsx$1(Trigger$2, { className: `tw-bg-sq-white dark:tw-bg-sq-dark-background tw-h-[25px] focus-visible:tw-outline-none tw-min-w-[100px] tw-px-4 tw-border-solid dark:tw-border-gray-700 tw-flex tw-flex-1 tw-justify-center tw-items-center tw-border-r-[2px] last:tw-border-r-0 ${stretchTabs ? '' : 'tw-max-w-max tw-min-w-fit'} ${tabExtraClassNames || ''} ${activeTab === id
|
|
14967
14967
|
? 'tw-border-b-sq-color-dark dark:tw-border-b-sq-color-dark tw-border-b-[3px]'
|
|
14968
14968
|
: 'hover:tw-bg-sq-light-gray tw-border-b-[1px] hover:dark:tw-bg-gray-700'}`, "data-testid": tabsTestId, disabled: disabled, value: id, children: jsxs("span", { className: "tw-flex tw-items-center tw-overflow-hidden tw-pb-[3px]", children: [icon && jsx$1(Icon, { icon: icon, testId: `${id}_tab-icon`, extraClassNames: "tw-text-[0.9375rem] tw-mr-[7px] tw-flex-shrink-0" }), jsx$1("span", { className: `tw-text-[0.875rem] tw-font-medium tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis ${activeTab === id
|
|
14969
14969
|
? 'dark:tw-text-sq-dark-text tw-text-gray-500'
|
|
14970
|
-
: 'dark:tw-text-sq-color-dark-dark tw-text-sq-color-dark'}`, children: label })] }) }, `${label}-${id}-${index}`))) }), tabs.map((tab, index) => (jsx$1(Content$1, { className: `tw-bg-sq-white dark:tw-bg-sq-dark-background tw-overflow-y-auto -tw-mt-[1px] tw-border-t-[1px] dark:tw-border-gray-700 tw-z-[500] tw-flex tw-flex-col tw-flex-grow focus-visible:tw-outline-none ${tab.tabContentExtraClassNames || ''}`, value: tab.id, children: tab.content }, `${tab.label}_${index}_content`)))] }));
|
|
14970
|
+
: 'dark:tw-text-sq-color-dark-dark tw-text-sq-color-dark'} ${tabLabelExtraClassNames}`, children: label })] }) }, `${label}-${id}-${index}`))) }), tabs.map((tab, index) => (jsx$1(Content$1, { className: `tw-bg-sq-white dark:tw-bg-sq-dark-background tw-overflow-y-auto -tw-mt-[1px] tw-border-t-[1px] dark:tw-border-gray-700 tw-z-[500] tw-flex tw-flex-col tw-flex-grow focus-visible:tw-outline-none ${tab.tabContentExtraClassNames || ''}`, value: tab.id, children: tab.content }, `${tab.label}_${index}_content`)))] }));
|
|
14971
14971
|
};
|
|
14972
14972
|
|
|
14973
14973
|
var COLLAPSIBLE_NAME = "Collapsible";
|
|
@@ -15434,8 +15434,8 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
|
|
|
15434
15434
|
};
|
|
15435
15435
|
React.useEffect(() => clearHoverTimeout, []);
|
|
15436
15436
|
const renderContent = () => {
|
|
15437
|
-
return (jsx$1(Content2$3, { 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", children: jsxs("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
|
|
15438
|
-
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
|
|
15437
|
+
return (jsx$1(Content2$3, { 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", children: jsxs("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
|
|
15438
|
+
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
|
|
15439
15439
|
${extraPopoverClassNames || ''}`, children: [hasArrow && (jsx$1(Arrow2$2, { asChild: true, children: jsx$1("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" }) })), children] }) }));
|
|
15440
15440
|
};
|
|
15441
15441
|
const renderPopover = (popoverOpenState) => {
|
|
@@ -16579,7 +16579,7 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
|
|
|
16579
16579
|
* @param tooltipProps - props to pass to the tooltip
|
|
16580
16580
|
*/
|
|
16581
16581
|
const SvgIcon = ({ onClick, icon, color, type = 'default', extraClassNames, viewBox = '0 0 19 19', id, testId, customId, ...tooltipProps }) => {
|
|
16582
|
-
const appliedClassNames = `${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none
|
|
16582
|
+
const appliedClassNames = `${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none
|
|
16583
16583
|
tw-outline-none`;
|
|
16584
16584
|
const tooltipData = getQTipData(tooltipProps);
|
|
16585
16585
|
const appliedType = type === 'default' ? 'currentColor' : 'rgb(var(--sq-icon))';
|