@seeqdev/qomponents 0.0.174 → 0.0.176
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/index.esm.js +361 -341
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +361 -341
- package/dist/index.js.map +1 -1
- package/dist/src/Alert/Alert.types.d.ts +0 -1
- package/dist/src/ButtonGroup/ButtonGroup.types.d.ts +0 -1
- package/dist/src/ButtonWithDropdown/ButtonWithDropdown.types.d.ts +0 -1
- package/dist/src/Carousel/Carousel.types.d.ts +0 -1
- package/dist/src/Checkbox/Checkbox.types.d.ts +0 -1
- package/dist/src/Collapse/Collapse.types.d.ts +0 -1
- package/dist/src/Icon/Icon.types.d.ts +0 -1
- package/dist/src/InputGroup/InputGroup.types.d.ts +0 -1
- package/dist/src/SeeqActionDropdown/SeeqActionDropdown.types.d.ts +0 -1
- package/dist/src/Slider/Slider.types.d.ts +0 -1
- package/dist/src/SvgIcon/SvgIcon.types.d.ts +0 -1
- package/dist/src/TextArea/TextArea.types.d.ts +0 -1
- package/dist/src/TextField/TextField.types.d.ts +0 -1
- package/dist/styles.css +3453 -2772
- package/package.json +4 -5
package/dist/index.js
CHANGED
|
@@ -66,34 +66,34 @@ const getQTipData = ({ tooltip, tooltipPlacement, isHtmlTooltip, tooltipTestId,
|
|
|
66
66
|
: undefined;
|
|
67
67
|
|
|
68
68
|
const colorClassesThemeLight = {
|
|
69
|
-
'theme': 'tw
|
|
70
|
-
'white': 'tw
|
|
71
|
-
'dark-gray': 'tw
|
|
72
|
-
'warning': 'tw
|
|
73
|
-
'darkish-gray': 'tw
|
|
74
|
-
'gray': 'tw
|
|
69
|
+
'theme': 'tw-text-sq-color-dark',
|
|
70
|
+
'white': 'tw-text-white',
|
|
71
|
+
'dark-gray': 'tw-text-sq-fairly-dark-gray',
|
|
72
|
+
'warning': 'tw-text-sq-warning-color',
|
|
73
|
+
'darkish-gray': 'tw-text-sq-darkish-gray',
|
|
74
|
+
'gray': 'tw-text-sq-disabled-gray',
|
|
75
75
|
'color': '',
|
|
76
|
-
'info': 'tw
|
|
77
|
-
'text': 'tw
|
|
76
|
+
'info': 'tw-text-sq-link',
|
|
77
|
+
'text': 'tw-text-sq-text-color',
|
|
78
78
|
'inherit': '',
|
|
79
|
-
'danger': 'tw
|
|
80
|
-
'theme-light': 'tw
|
|
81
|
-
'success': 'tw
|
|
79
|
+
'danger': 'tw-text-sq-danger-color',
|
|
80
|
+
'theme-light': 'tw-text-sq-color-light',
|
|
81
|
+
'success': 'tw-text-sq-success-color',
|
|
82
82
|
};
|
|
83
83
|
const colorClassesThemeDark = {
|
|
84
|
-
'theme': '
|
|
84
|
+
'theme': 'dark:tw-text-sq-color-dark-dark',
|
|
85
85
|
'white': '',
|
|
86
|
-
'dark-gray': 'tw
|
|
86
|
+
'dark-gray': 'tw-text-sq-fairly-dark-gray',
|
|
87
87
|
'warning': '',
|
|
88
|
-
'darkish-gray': 'tw
|
|
89
|
-
'gray': '
|
|
88
|
+
'darkish-gray': 'tw-text-sq-darkish-gray',
|
|
89
|
+
'gray': 'dark:tw-text-sq-dark-disabled-gray',
|
|
90
90
|
'color': '',
|
|
91
|
-
'info': '
|
|
92
|
-
'text': '
|
|
91
|
+
'info': 'dark:tw-text-sq-link-dark',
|
|
92
|
+
'text': 'dark:tw-text-sq-dark-text',
|
|
93
93
|
'inherit': '',
|
|
94
|
-
'danger': 'tw
|
|
95
|
-
'theme-light': 'tw
|
|
96
|
-
'success': 'tw
|
|
94
|
+
'danger': 'tw-text-sq-danger-color',
|
|
95
|
+
'theme-light': 'tw-text-sq-color-light',
|
|
96
|
+
'success': 'tw-text-sq-success-color',
|
|
97
97
|
};
|
|
98
98
|
/**
|
|
99
99
|
* Icon:
|
|
@@ -105,14 +105,14 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
|
|
|
105
105
|
const errorMessage = color === undefined || color === ''
|
|
106
106
|
? 'Icon with type="color" must have prop color specified.'
|
|
107
107
|
: 'Icon with prop color must have type="color".';
|
|
108
|
-
return jsxRuntime.jsx("div", { className: "tw
|
|
108
|
+
return jsxRuntime.jsx("div", { className: "tw-text-sq-danger-color", children: errorMessage });
|
|
109
109
|
}
|
|
110
110
|
const fontAwesomePrefix = iconPrefix ? iconPrefix : 'fa-sharp fa-regular';
|
|
111
111
|
const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
|
|
112
112
|
const style = type === 'color' && color ? { color } : {};
|
|
113
113
|
const sizeClass = size ? `fa-${size}` : small ? 'fa-sm' : large ? 'fa-lg' : '';
|
|
114
114
|
const appliedClassNames = `${iconPrefixString} ${icon} ${sizeClass}
|
|
115
|
-
${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'tw
|
|
115
|
+
${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none tw-outline-none`;
|
|
116
116
|
const tooltipData = getQTipData(tooltipProps);
|
|
117
117
|
return (jsxRuntime.jsx("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
|
|
118
118
|
};
|
|
@@ -123,61 +123,77 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
|
|
|
123
123
|
* - include tooltips and/or icons
|
|
124
124
|
*/
|
|
125
125
|
const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, iconPosition = 'left', iconPrefix = undefined, preventBlur = false, isHtmlTooltip = false, tooltipTestId, }) => {
|
|
126
|
-
const baseClasses = 'tw
|
|
126
|
+
const baseClasses = 'tw-px-2.5 tw-rounded-md focus:tw-ring-0 focus-visible:tw-outline-none aria-disabled:tw-cursor-not-allowed disabled:tw-pointer-events-none';
|
|
127
127
|
const baseClassesByVariant = {
|
|
128
|
-
'outline': 'tw
|
|
129
|
-
'theme': 'tw
|
|
130
|
-
'danger': 'tw
|
|
131
|
-
'tw
|
|
132
|
-
'theme-light': 'tw
|
|
133
|
-
'no-border': 'tw
|
|
134
|
-
'warning': 'tw
|
|
128
|
+
'outline': 'disabled:tw-opacity-50 aria-disabled:tw-opacity-50 tw-border-solid tw-border',
|
|
129
|
+
'theme': 'disabled:tw-opacity-50 aria-disabled:tw-opacity-50 tw-border-solid tw-border',
|
|
130
|
+
'danger': 'tw-bg-sq-danger-color disabled:tw-opacity-50 aria-disabled:tw-opacity-50 ' +
|
|
131
|
+
'tw-border-solid tw-border tw-border-sq-danger-color',
|
|
132
|
+
'theme-light': 'disabled:tw-opacity-50 aria-disabled:tw-opacity-50 tw-border-solid tw-border',
|
|
133
|
+
'no-border': 'disabled:tw-opacity-50 aria-disabled:tw-opacity-50',
|
|
134
|
+
'warning': 'tw-bg-sq-warning-color tw-border-solid tw-border tw-border-sq-warning-color ' +
|
|
135
|
+
'disabled:tw-opacity-50 aria-disabled:tw-opacity-50',
|
|
135
136
|
};
|
|
136
137
|
const textClassesByVariantLightTheme = {
|
|
137
|
-
'outline': 'tw
|
|
138
|
-
'theme': 'tw
|
|
139
|
-
'theme-light': 'tw
|
|
140
|
-
'danger': 'tw
|
|
141
|
-
'no-border': 'tw
|
|
142
|
-
'warning': 'tw
|
|
138
|
+
'outline': 'tw-text-sq-text-color',
|
|
139
|
+
'theme': 'tw-text-white',
|
|
140
|
+
'theme-light': 'tw-text-white',
|
|
141
|
+
'danger': 'tw-text-white',
|
|
142
|
+
'no-border': 'tw-text-sq-text-color',
|
|
143
|
+
'warning': 'tw-text-white',
|
|
143
144
|
};
|
|
144
145
|
const textClassesByVariantDarkTheme = {
|
|
145
|
-
'outline': '
|
|
146
|
-
'theme': '
|
|
147
|
-
'theme-light': '
|
|
148
|
-
'danger': '
|
|
149
|
-
'no-border': '
|
|
150
|
-
'warning': '
|
|
146
|
+
'outline': 'dark:tw-text-sq-dark-text',
|
|
147
|
+
'theme': 'dark:tw-text-white',
|
|
148
|
+
'theme-light': 'dark:tw-text-white',
|
|
149
|
+
'danger': 'dark:tw-text-white',
|
|
150
|
+
'no-border': 'dark:tw-text-sq-dark-text',
|
|
151
|
+
'warning': 'dark:tw-text-white',
|
|
151
152
|
};
|
|
152
153
|
const classesByVariantLightTheme = {
|
|
153
|
-
'outline': 'tw
|
|
154
|
-
|
|
155
|
-
'theme': 'tw:bg-sq-theme-dark tw:hover:bg-sq-theme-highlight tw:border-sq-theme-dark' +
|
|
156
|
-
' tw:hover:border-sq-theme-highlight',
|
|
154
|
+
'outline': 'tw-bg-white tw-border-sq-disabled-gray',
|
|
155
|
+
'theme': 'tw-bg-sq-color-dark tw-border-sq-color-dark',
|
|
157
156
|
'danger': '',
|
|
158
|
-
'theme-light': 'tw
|
|
157
|
+
'theme-light': 'tw-bg-sq-icon',
|
|
159
158
|
'no-border': '',
|
|
160
159
|
'warning': '',
|
|
161
160
|
};
|
|
162
161
|
const classesByVariantDarkTheme = {
|
|
163
|
-
'outline': '
|
|
164
|
-
|
|
165
|
-
' tw:dark:active:border-sq-theme-dark',
|
|
166
|
-
'theme': 'tw:dark:bg-sq-theme-dark tw:dark:hover:bg-sq-theme-highlight tw:dark:border-sq-theme-dark' +
|
|
167
|
-
' tw:dark:hover:border-sq-theme-highlight',
|
|
162
|
+
'outline': 'dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-disabled-gray',
|
|
163
|
+
'theme': 'dark:tw-bg-sq-color-dark dark:tw-border-sq-color-dark',
|
|
168
164
|
'danger': '',
|
|
169
|
-
'theme-light': '
|
|
170
|
-
|
|
165
|
+
'theme-light': 'dark:tw-bg-sq-icon-dark dark:tw-border-sq-icon-dark',
|
|
166
|
+
'no-border': '',
|
|
167
|
+
'warning': '',
|
|
168
|
+
};
|
|
169
|
+
const activeClassesByVariantLightTheme = {
|
|
170
|
+
'outline': 'hover:tw-bg-sq-light-gray focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark' +
|
|
171
|
+
' active:tw-border-sq-color-dark',
|
|
172
|
+
'theme': 'hover:tw-bg-sq-color-highlight hover:tw-border-sq-color-highlight',
|
|
173
|
+
'danger': 'hover:tw-bg-sq-danger-color-hover hover:tw-border-sq-danger-color-hover',
|
|
174
|
+
'theme-light': 'hover:tw-bg-sq-link hover:tw-border-sq-link',
|
|
175
|
+
'no-border': '',
|
|
176
|
+
'warning': '',
|
|
177
|
+
};
|
|
178
|
+
const activeClassesByVariantDarkTheme = {
|
|
179
|
+
'outline': 'dark:hover:tw-bg-sq-highlight-color-dark dark:focus:tw-bg-sq-multi-gray-dark' +
|
|
180
|
+
' dark:active:tw-bg-sq-multi-gray-dark dark:focus:tw-border-sq-color-dark dark:active:tw-border-sq-color-dark',
|
|
181
|
+
'theme': 'dark:hover:tw-bg-sq-color-highlight dark:hover:tw-border-sq-color-highlight',
|
|
182
|
+
'danger': 'dark:hover:tw-bg-sq-danger-color-hover dark:hover:tw-border-sq-danger-color-hover',
|
|
183
|
+
'theme-light': 'dark:hover:tw-bg-sq-link-dark dark:hover:tw-border-sq-link-dark',
|
|
171
184
|
'no-border': '',
|
|
172
185
|
'warning': '',
|
|
173
186
|
};
|
|
174
187
|
const sizeClasses = {
|
|
175
|
-
xs: 'tw
|
|
176
|
-
sm: 'tw
|
|
177
|
-
lg: 'tw
|
|
188
|
+
xs: 'tw-text-xs tw-py-0.5',
|
|
189
|
+
sm: 'tw-text-sm tw-py-1',
|
|
190
|
+
lg: 'tw-text-xl tw-py-1',
|
|
178
191
|
};
|
|
179
|
-
const appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
|
|
180
192
|
let tooltipData = undefined;
|
|
193
|
+
let appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
|
|
194
|
+
if (!disabled) {
|
|
195
|
+
appliedClasses += ` ${activeClassesByVariantLightTheme[variant]} ${activeClassesByVariantDarkTheme[variant]}`;
|
|
196
|
+
}
|
|
181
197
|
if (tooltip) {
|
|
182
198
|
tooltipData = {
|
|
183
199
|
'data-qtip-text': tooltip,
|
|
@@ -187,13 +203,15 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
|
|
|
187
203
|
'data-qtip-delay': tooltipOptions?.delay ?? DEFAULT_TOOL_TIP_DELAY,
|
|
188
204
|
};
|
|
189
205
|
}
|
|
190
|
-
const iconClass = iconPosition === 'left' ? 'tw
|
|
206
|
+
const iconClass = iconPosition === 'left' ? 'tw-mr-1' : 'tw-ml-1';
|
|
191
207
|
const iconElement = icon && (jsxRuntime.jsx(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label
|
|
192
208
|
? `${iconClass} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]}`
|
|
193
209
|
: '', testId: `${id}_spinner` }));
|
|
194
|
-
return (jsxRuntime.jsxs("button", { id: id, ...tooltipData, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
|
|
210
|
+
return (jsxRuntime.jsxs("button", { id: id, ...tooltipData, disabled: disabled && !tooltip, "aria-disabled": disabled, "data-testid": testId, tabIndex: disabled ? -1 : undefined, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
|
|
195
211
|
stopPropagation && e.stopPropagation();
|
|
196
|
-
|
|
212
|
+
if (!disabled) {
|
|
213
|
+
onClick?.(e);
|
|
214
|
+
}
|
|
197
215
|
}, onMouseDown: (e) => {
|
|
198
216
|
if (preventBlur) {
|
|
199
217
|
e.preventDefault();
|
|
@@ -4779,30 +4797,31 @@ function getSvgIconPath(icon) {
|
|
|
4779
4797
|
}
|
|
4780
4798
|
|
|
4781
4799
|
const popoverBorderStyles = [
|
|
4782
|
-
'tw
|
|
4783
|
-
'tw
|
|
4784
|
-
'tw
|
|
4785
|
-
'tw
|
|
4786
|
-
'
|
|
4800
|
+
'tw-border-solid',
|
|
4801
|
+
'tw-border',
|
|
4802
|
+
'tw-rounded-md',
|
|
4803
|
+
'tw-border-sq-disabled-gray',
|
|
4804
|
+
'dark:tw-border-gray-500',
|
|
4787
4805
|
].join(' ');
|
|
4788
4806
|
const triggerBackgroundStyles = [
|
|
4789
|
-
'tw
|
|
4790
|
-
'
|
|
4791
|
-
'
|
|
4792
|
-
'
|
|
4793
|
-
'
|
|
4794
|
-
'
|
|
4807
|
+
'tw-bg-transparent',
|
|
4808
|
+
'hover:tw-bg-sq-worksheetspanel-gray',
|
|
4809
|
+
'active:tw-bg-sq-worksheetspanel-gray',
|
|
4810
|
+
'dark:tw-bg-transparent',
|
|
4811
|
+
'dark:hover:tw-bg-sq-field-disabled-gray',
|
|
4812
|
+
'dark:active:tw-bg-sq-field-disabled-gray',
|
|
4795
4813
|
].join(' ');
|
|
4796
4814
|
const activeBackgroundStyles = [
|
|
4797
4815
|
'active',
|
|
4798
|
-
'tw
|
|
4799
|
-
'tw
|
|
4800
|
-
'tw
|
|
4801
|
-
'
|
|
4802
|
-
'
|
|
4816
|
+
'tw-bg-sq-overlay-gray',
|
|
4817
|
+
'hover:tw-bg-sq-overlay-gray',
|
|
4818
|
+
'active:tw-bg-sq-overlay-gray',
|
|
4819
|
+
'dark:tw-bg-sq-dark-disabled-gray',
|
|
4820
|
+
'dark:hover:tw-border-sq-dark-disabled-gray',
|
|
4821
|
+
'dark:active:tw-bg-sq-dark-disabled-gray',
|
|
4803
4822
|
].join(' ');
|
|
4804
|
-
const bgStyles$3 = ['tw
|
|
4805
|
-
const disabledClasses$4 = ['tw
|
|
4823
|
+
const bgStyles$3 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
4824
|
+
const disabledClasses$4 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
4806
4825
|
const PopoverContent = React__namespace.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (jsxRuntime.jsx(Content2$3, { ref: ref, align: align, sideOffset: sideOffset, ...props, asChild: true })));
|
|
4807
4826
|
const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIcon = false, tooltipText, id, popoverContent, extraClassNames, testId, tooltipTestId, tooltipOptions, isActive = false, isHtmlTooltip = false, hasArrow = false, disabled = false, isPrimaryAnSvg = false, primaryIconExtraClassNames = false, iconHeight = 24, iconWidth = 24, primaryIconViewbox = '0 0 24 24', onClick, onHide, }) => {
|
|
4808
4827
|
let tooltipData = undefined;
|
|
@@ -4820,12 +4839,12 @@ const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIco
|
|
|
4820
4839
|
onHide && onHide();
|
|
4821
4840
|
}
|
|
4822
4841
|
};
|
|
4823
|
-
return (jsxRuntime.jsxs(Root2$3, { defaultOpen: false, onOpenChange: onOpenChange, children: [jsxRuntime.jsx(Trigger$3, { id: id, className: `tw
|
|
4842
|
+
return (jsxRuntime.jsxs(Root2$3, { defaultOpen: false, onOpenChange: onOpenChange, children: [jsxRuntime.jsx(Trigger$3, { id: id, className: `tw-border-none tw-mx-[1.5px] first:tw-ml-0 last:tw-mr-0 ${isActive ? 'active' : ''}`, disabled: disabled, "data-testid": testId, onClick: (e) => {
|
|
4824
4843
|
onClick && onClick(e);
|
|
4825
|
-
}, children: jsxRuntime.jsxs("div", { ...tooltipData, className: `tw
|
|
4826
|
-
' tw
|
|
4827
|
-
'
|
|
4828
|
-
popoverBorderStyles, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw
|
|
4844
|
+
}, children: jsxRuntime.jsxs("div", { ...tooltipData, className: `tw-flex tw-flex-col tw-items-center tw-rounded-md ${isSmall ? 'tw-py-[1px] tw-px-1' : 'tw-px-2 tw-py-[5px]'} ${disabled ? disabledClasses$4 : isActive ? activeBackgroundStyles : triggerBackgroundStyles} ${extraClassNames || ''}`, children: [jsxRuntime.jsxs("span", { className: "tw-nowrap", children: [isPrimaryAnSvg ? (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw-text-sq-text-color dark:tw-text-sq-dark-text ${primaryIconExtraClassNames || ''}`, viewBox: primaryIconViewbox, height: `${iconHeight}px`, width: `${iconWidth}px`, fill: "currentColor", "data-testid": testId, children: jsxRuntime.jsx("path", { d: getSvgIconPath(icon) }) })) : (jsxRuntime.jsx(Icon, { icon: icon, testId: "firstIcon", type: "text", large: !isSmall && !label && !secondIcon && !forceSmallIcon, extraClassNames: `tw-text-sq-text-color dark:tw-text-sq-dark-text` })), secondIcon && jsxRuntime.jsx(Icon, { icon: secondIcon, type: "text", testId: "secondIcon" }), popoverContent ? (jsxRuntime.jsx(Icon, { icon: "fc-arrow-dropdown", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-ml-[3px] tw-text-[0.5rem]", type: "text" })) : undefined] }), !isSmall && (jsxRuntime.jsx("small", { className: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-text-[0.625rem]", children: label }))] }) }), !!popoverContent ? (jsxRuntime.jsx(PopoverContent, { sideOffset: 2, align: "start", children: jsxRuntime.jsxs("div", { className: bgStyles$3 +
|
|
4845
|
+
' tw-relative tw-z-[1000] tw-min-w-6 tw-p-[0.5rem] focus-visible:tw-outline-none tw-outline-none data-[state=open]:animate-in data-[state=closed]:animate-out' +
|
|
4846
|
+
' data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2' +
|
|
4847
|
+
popoverBorderStyles, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("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" }) })), popoverContent] }) })) : undefined] }));
|
|
4829
4848
|
};
|
|
4830
4849
|
|
|
4831
4850
|
const setValidInputDimension = (width, height) => {
|
|
@@ -4842,24 +4861,24 @@ const setValidInputDimension = (width, height) => {
|
|
|
4842
4861
|
return inputStyle;
|
|
4843
4862
|
};
|
|
4844
4863
|
|
|
4845
|
-
const errorClasses$4 = 'tw
|
|
4864
|
+
const errorClasses$4 = 'tw-border-sq-danger-color';
|
|
4846
4865
|
const borderColorClasses$4 = [
|
|
4847
|
-
'tw
|
|
4848
|
-
'
|
|
4849
|
-
'
|
|
4850
|
-
'
|
|
4851
|
-
'
|
|
4852
|
-
'
|
|
4866
|
+
'tw-border-sq-disabled-gray',
|
|
4867
|
+
'dark:tw-border-sq-dark-disabled-gray',
|
|
4868
|
+
'dark:focus:tw-border-sq-color-dark-dark',
|
|
4869
|
+
'dark:active:tw-border-sq-color-dark-dark',
|
|
4870
|
+
'focus:tw-border-sq-color-dark',
|
|
4871
|
+
'active:tw-border-sq-color-dark',
|
|
4853
4872
|
].join(' ');
|
|
4854
|
-
const baseClasses$6 = 'tw
|
|
4855
|
-
'
|
|
4856
|
-
'
|
|
4857
|
-
'
|
|
4858
|
-
const darkTheme$3 = '
|
|
4859
|
-
const lightTheme$3 = 'tw
|
|
4873
|
+
const baseClasses$6 = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
|
|
4874
|
+
' disabled:tw-pointer-events-none disabled:tw-bg-sq-light-gray disabled:dark:tw-bg-sq-dark-disabled-gray' +
|
|
4875
|
+
' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-placeholder-gray-400' +
|
|
4876
|
+
' dark:tw-placeholder-sq-dark-text-lighter specTextField';
|
|
4877
|
+
const darkTheme$3 = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
|
|
4878
|
+
const lightTheme$3 = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
|
|
4860
4879
|
const sizeClasses = {
|
|
4861
|
-
sm: 'tw
|
|
4862
|
-
lg: 'tw
|
|
4880
|
+
sm: 'tw-text-sm',
|
|
4881
|
+
lg: 'tw-text-xl',
|
|
4863
4882
|
};
|
|
4864
4883
|
/**
|
|
4865
4884
|
* Textfield.
|
|
@@ -4901,12 +4920,12 @@ const TextField = React.forwardRef((props, ref) => {
|
|
|
4901
4920
|
internalRef.current.value = `${value}`;
|
|
4902
4921
|
}
|
|
4903
4922
|
}, [value]);
|
|
4904
|
-
let borderRadius = 'tw
|
|
4923
|
+
let borderRadius = 'tw-rounded-md';
|
|
4905
4924
|
if (inputGroup === 'left') {
|
|
4906
|
-
borderRadius = 'tw
|
|
4925
|
+
borderRadius = 'tw-rounded-l-md tw-border-r-0 focus:tw-border-r' + ' active:tw-border-r';
|
|
4907
4926
|
}
|
|
4908
4927
|
else if (inputGroup === 'right') {
|
|
4909
|
-
borderRadius = 'tw
|
|
4928
|
+
borderRadius = 'tw-rounded-r-md tw-border-l-0 focus:tw-border-l active:tw-border-l';
|
|
4910
4929
|
}
|
|
4911
4930
|
const appliedClasses = `${baseClasses$6} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$3} ${darkTheme$3} ${borderRadius} ${showError ? errorClasses$4 : borderColorClasses$4} `;
|
|
4912
4931
|
const inputProp = setValidInputDimension(inputWidth, inputHeight)
|
|
@@ -4919,18 +4938,18 @@ const TextField = React.forwardRef((props, ref) => {
|
|
|
4919
4938
|
inputLenghtProp.maxLength = maxLength;
|
|
4920
4939
|
if (minLength)
|
|
4921
4940
|
inputLenghtProp.minLength = minLength;
|
|
4922
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, min: min, max: max, ...inputLenghtProp, ...inputProp, ...tooltipData }), errorText && showError && jsxRuntime.jsx("div", { className: "tw
|
|
4941
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, min: min, max: max, ...inputLenghtProp, ...inputProp, ...tooltipData }), errorText && showError && jsxRuntime.jsx("div", { className: "tw-text-sq-danger-color tw-text-xs tw-mt-1", children: errorText })] }));
|
|
4923
4942
|
});
|
|
4924
4943
|
|
|
4925
|
-
const alignment = 'tw
|
|
4926
|
-
const labelClasses = 'tw
|
|
4927
|
-
const baseClasses$5 = 'tw
|
|
4928
|
-
'
|
|
4929
|
-
'
|
|
4930
|
-
'
|
|
4931
|
-
'
|
|
4932
|
-
const checkboxClasses = `tw
|
|
4933
|
-
const radioClasses = `tw
|
|
4944
|
+
const alignment = 'tw-flex';
|
|
4945
|
+
const labelClasses = 'tw-ml-1.5 tw-text-sm tw--mt-0.5';
|
|
4946
|
+
const baseClasses$5 = 'tw-border-1 tw-h-3.5 tw-w-3.5 focus:tw-ring-0 focus:tw-ring-offset-0 tw-outline-none focus:tw-outline-none' +
|
|
4947
|
+
' dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-text dark:hover:tw-bg-sq-dark-background' +
|
|
4948
|
+
' checked:tw-text-white checked:tw-border-sq-text-color checked:hover:tw-border-sq-color-dark' +
|
|
4949
|
+
' checked:active:tw-border-sq-color-dark checked:focus:tw-border-sq-color-dark disabled:tw-border-sq-disabled-gray' +
|
|
4950
|
+
' dark:disabled:tw-border-sq-fairly-dark-gray dark:checked:focus:tw-bg-sq-dark-background';
|
|
4951
|
+
const checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses$5}`;
|
|
4952
|
+
const radioClasses = `tw-form-radio ${baseClasses$5}`;
|
|
4934
4953
|
/**
|
|
4935
4954
|
* Checkbox and Radio Box Component.
|
|
4936
4955
|
*/
|
|
@@ -4938,25 +4957,26 @@ const Checkbox = (props) => {
|
|
|
4938
4957
|
const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, defaultChecked, id, name, extraClassNames, extraLabelClassNames, testId, ...tooltipProps } = props;
|
|
4939
4958
|
const assignedId = id ?? 'checkbox_' + Math.random();
|
|
4940
4959
|
const tooltipData = getQTipData(tooltipProps);
|
|
4941
|
-
return (jsxRuntime.jsxs("span", { className: `${alignment} ${extraClassNames}`, children: [jsxRuntime.jsx("input", { value: value, type: type, "data-testid": testId, name: name, id: assignedId, readOnly: !onChange, checked: checked, defaultChecked: defaultChecked, className: `${type === 'checkbox' ? checkboxClasses : radioClasses} ${disabled ? 'tw
|
|
4942
|
-
|
|
4943
|
-
|
|
4944
|
-
};
|
|
4945
|
-
|
|
4946
|
-
|
|
4947
|
-
|
|
4948
|
-
'
|
|
4949
|
-
|
|
4950
|
-
|
|
4951
|
-
|
|
4952
|
-
const
|
|
4960
|
+
return (jsxRuntime.jsxs("span", { className: `${alignment} ${extraClassNames}`, children: [jsxRuntime.jsx("input", { value: value, type: type, "data-testid": testId, name: name, id: assignedId, readOnly: !onChange, checked: checked, defaultChecked: defaultChecked, className: `${type === 'checkbox' ? checkboxClasses : radioClasses} ${disabled ? 'tw-cursor-not-allowed' : 'tw-cursor-pointer'}`, disabled: disabled, onClick: onClick, onChange: onChange, onKeyDown: onKeyDown, ...tooltipData }), label &&
|
|
4961
|
+
jsxRuntime.jsx("label", { htmlFor: assignedId, className: `${labelClasses} ${extraLabelClassNames} ${disabled
|
|
4962
|
+
? 'tw-cursor-not-allowed dark:tw-text-sq-fairly-dark-gray tw-text-sq-fairly-dark-gray'
|
|
4963
|
+
: 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'}`, children: label })] }));
|
|
4964
|
+
};
|
|
4965
|
+
|
|
4966
|
+
const baseClasses$4 = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-md tw-w-full' +
|
|
4967
|
+
' disabled:tw-pointer-events-none disabled:tw-bg-sq-light-gray disabled:dark:tw-bg-sq-dark-disabled-gray' +
|
|
4968
|
+
' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-text-sm';
|
|
4969
|
+
const darkTheme$2 = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text ' +
|
|
4970
|
+
'dark:tw-placeholder-sq-dark-text-lighter disabled:dark:tw-text-sq-dark-text-lighter';
|
|
4971
|
+
const lightTheme$2 = 'tw-text-sq-text-color tw-placeholder-gray-400 disabled:tw-text-sq-darkish-gray';
|
|
4972
|
+
const errorClasses$3 = 'tw-border-sq-danger-color';
|
|
4953
4973
|
const borderColorClasses$3 = [
|
|
4954
|
-
'tw
|
|
4955
|
-
'
|
|
4956
|
-
'
|
|
4957
|
-
'
|
|
4958
|
-
'
|
|
4959
|
-
'
|
|
4974
|
+
'tw-border-sq-disabled-gray',
|
|
4975
|
+
'dark:tw-border-sq-dark-disabled-gray',
|
|
4976
|
+
'dark:focus:tw-border-sq-color-dark-dark',
|
|
4977
|
+
'dark:active:tw-border-sq-color-dark-dark',
|
|
4978
|
+
'focus:tw-border-sq-color-dark',
|
|
4979
|
+
'active:tw-border-sq-color-dark',
|
|
4960
4980
|
].join(' ');
|
|
4961
4981
|
/**
|
|
4962
4982
|
* TextArea.
|
|
@@ -5005,25 +5025,25 @@ const TextArea = React.forwardRef(({ readonly = false, disabled = false, onChang
|
|
|
5005
5025
|
* display correctly.
|
|
5006
5026
|
*/
|
|
5007
5027
|
const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP_DELAY, }) => {
|
|
5008
|
-
const arrowBaseClasses =
|
|
5009
|
-
const centerArrowVertically = '
|
|
5010
|
-
const centerArrowHorizontally = '
|
|
5011
|
-
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically}
|
|
5012
|
-
|
|
5013
|
-
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically}
|
|
5014
|
-
|
|
5015
|
-
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally}
|
|
5016
|
-
|
|
5017
|
-
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally}
|
|
5018
|
-
|
|
5028
|
+
const arrowBaseClasses = 'before:tw-content-[\'\'] before:tw-absolute before:tw-border-8';
|
|
5029
|
+
const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';
|
|
5030
|
+
const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';
|
|
5031
|
+
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent
|
|
5032
|
+
before:tw-border-l-transparent before:tw-border-r-black`;
|
|
5033
|
+
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
|
|
5034
|
+
before:tw-border-l-black before:tw-border-r-transparent`;
|
|
5035
|
+
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black
|
|
5036
|
+
before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;
|
|
5037
|
+
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent
|
|
5038
|
+
before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;
|
|
5019
5039
|
const placements = {
|
|
5020
|
-
top:
|
|
5021
|
-
left:
|
|
5022
|
-
right: `tw
|
|
5023
|
-
bottom:
|
|
5040
|
+
top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,
|
|
5041
|
+
left: `-tw-translate-x-full -tw-left-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowLeft}`,
|
|
5042
|
+
right: `tw-translate-x-full -tw-right-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowRight}`,
|
|
5043
|
+
bottom: `-tw-bottom-2 tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowBottom}`,
|
|
5024
5044
|
};
|
|
5025
|
-
return (jsxRuntime.jsxs("div", { className: "tw
|
|
5026
|
-
tw
|
|
5045
|
+
return (jsxRuntime.jsxs("div", { className: "tw-group tw-relative tw-inline-block", children: [children, jsxRuntime.jsx("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms]
|
|
5046
|
+
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 })] }));
|
|
5027
5047
|
};
|
|
5028
5048
|
|
|
5029
5049
|
/*! @license DOMPurify 3.2.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.3/LICENSE */
|
|
@@ -7509,8 +7529,8 @@ const QTip = () => {
|
|
|
7509
7529
|
: positionTooltip();
|
|
7510
7530
|
}
|
|
7511
7531
|
};
|
|
7512
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { onMouseEnter: () => setOverTooltip(true), onMouseLeave: () => setOverTooltip(false), "data-testid": tooltipTestId, ref: tooltipRef, className: 'tw
|
|
7513
|
-
(show ? 'tw
|
|
7532
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { onMouseEnter: () => setOverTooltip(true), onMouseLeave: () => setOverTooltip(false), "data-testid": tooltipTestId, ref: tooltipRef, className: 'tw-absolute tw-rounded tw-bg-black tw-max-w-96 tw-p-2 tw-text-xs tw-text-white tw-z-[9999] fade-in ' +
|
|
7533
|
+
(show ? 'tw-visible' : 'tw-invisible tw-pointer-events-none'), children: [html ? jsxRuntime.jsx(HTMLTip, { text: tooltipText }) : tooltipText, jsxRuntime.jsx("div", { className: "tw-absolute tw-w-[10px] tw-h-[10px] tw-rotate-45 tw-bg-black", ref: tooltipArrowRef })] }) }));
|
|
7514
7534
|
};
|
|
7515
7535
|
|
|
7516
7536
|
function _typeof$1(o) {
|
|
@@ -13925,75 +13945,70 @@ var CreatableSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
13925
13945
|
});
|
|
13926
13946
|
var CreatableSelect$1 = CreatableSelect;
|
|
13927
13947
|
|
|
13928
|
-
const baseClasses$3 = ['focus:tw
|
|
13929
|
-
const containerStyles = ['tw
|
|
13930
|
-
const errorClasses$2 = 'tw
|
|
13931
|
-
const borderColorClasses$2 = ['tw
|
|
13932
|
-
const borderStyles$3 = [
|
|
13933
|
-
|
|
13934
|
-
'tw
|
|
13935
|
-
'tw
|
|
13936
|
-
'
|
|
13937
|
-
'
|
|
13938
|
-
'
|
|
13939
|
-
'dark:
|
|
13940
|
-
'dark:active:tw:border-sq-theme-dark-dark',
|
|
13948
|
+
const baseClasses$3 = ['focus:tw-ring-0', 'disabled:tw-cursor-not-allowed'].join(' ');
|
|
13949
|
+
const containerStyles = ['tw-bg-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
13950
|
+
const errorClasses$2 = 'tw-border-sq-danger-color';
|
|
13951
|
+
const borderColorClasses$2 = ['tw-border-sq-disabled-gray', 'dark:tw-border-sq-dark-disabled-gray'].join(' ');
|
|
13952
|
+
const borderStyles$3 = ['tw-border-solid', 'tw-border'].join(' ');
|
|
13953
|
+
const borderActiveClasses = [
|
|
13954
|
+
'hover:tw-border-sq-color-dark',
|
|
13955
|
+
'focus-within:tw-border-sq-color-dark',
|
|
13956
|
+
'active:tw-border-sq-color-dark',
|
|
13957
|
+
'dark:hover:tw-border-sq-color-dark-dark',
|
|
13958
|
+
'dark:focus-within:tw-border-sq-color-dark-dark',
|
|
13959
|
+
'dark:active:tw-border-sq-color-dark-dark',
|
|
13941
13960
|
].join(' ');
|
|
13942
|
-
const textStyles = ['tw
|
|
13961
|
+
const textStyles = ['tw-text-sq-text-color', 'dark:tw-text-sq-dark-text', 'tw-text-sm'].join(' ');
|
|
13943
13962
|
const textActiveStyles = [
|
|
13944
|
-
'
|
|
13945
|
-
'
|
|
13946
|
-
'
|
|
13947
|
-
'tw:dark:text-sq-dark-disabled-gray',
|
|
13948
|
-
'tw:dark:hover:text-sq-theme-dark-dark',
|
|
13949
|
-
'dark:focus:tw:text-sq-theme-dark-dark',
|
|
13950
|
-
'dark:active:tw:text-sq-theme-dark-dark',
|
|
13963
|
+
'hover:tw-text-sq-color-dark',
|
|
13964
|
+
'dark:tw-text-sq-dark-disabled-gray',
|
|
13965
|
+
'dark:hover:tw-text-sq-color-dark-dark',
|
|
13951
13966
|
].join(' ');
|
|
13952
13967
|
const menuStyles = [
|
|
13953
|
-
'tw
|
|
13954
|
-
'tw
|
|
13955
|
-
'tw
|
|
13956
|
-
'tw
|
|
13957
|
-
'
|
|
13958
|
-
'tw
|
|
13959
|
-
'tw
|
|
13960
|
-
'!tw
|
|
13968
|
+
'tw-border-solid',
|
|
13969
|
+
'tw-border',
|
|
13970
|
+
'tw-rounded-b',
|
|
13971
|
+
'tw-border-sq-disabled-gray',
|
|
13972
|
+
'dark:tw-border-sq-dark-disabled-gray',
|
|
13973
|
+
'tw-whitespace-nowrap',
|
|
13974
|
+
'tw-min-w-fit',
|
|
13975
|
+
'!tw-z-[9999]',
|
|
13961
13976
|
].join(' ');
|
|
13962
13977
|
const menuListStyles = [
|
|
13963
|
-
'tw
|
|
13964
|
-
'tw
|
|
13965
|
-
'
|
|
13966
|
-
'tw
|
|
13967
|
-
'!tw
|
|
13978
|
+
'tw-rounded-b',
|
|
13979
|
+
'tw-bg-white',
|
|
13980
|
+
'dark:tw-bg-sq-dark-background',
|
|
13981
|
+
'tw-min-w-fit',
|
|
13982
|
+
'!tw-z-[9999]',
|
|
13968
13983
|
'specSelectMenu',
|
|
13969
13984
|
].join(' ');
|
|
13970
13985
|
const groupHeadingStyles = [
|
|
13971
|
-
'tw
|
|
13972
|
-
'
|
|
13973
|
-
'tw
|
|
13974
|
-
'tw
|
|
13975
|
-
'tw
|
|
13986
|
+
'tw-bg-sq-light-gray',
|
|
13987
|
+
'dark:tw-bg-sq-dark-disabled-gray',
|
|
13988
|
+
'tw-text-sq-darkish-gray',
|
|
13989
|
+
'tw-py-1',
|
|
13990
|
+
'tw-px-2.5',
|
|
13976
13991
|
'specSelectGroupHeading',
|
|
13977
13992
|
].join(' ');
|
|
13978
13993
|
const optionStyles = [
|
|
13979
|
-
'
|
|
13980
|
-
'
|
|
13981
|
-
'
|
|
13982
|
-
'tw
|
|
13983
|
-
'tw
|
|
13994
|
+
'hover:tw-bg-sq-gray-highlight',
|
|
13995
|
+
'hover:tw-cursor-pointer',
|
|
13996
|
+
'dark:hover:tw-bg-sq-gray-highlight-dark',
|
|
13997
|
+
'tw-py-1',
|
|
13998
|
+
'tw-px-2.5',
|
|
13984
13999
|
'specSelectOption',
|
|
13985
14000
|
].join(' ');
|
|
13986
|
-
const disabledClasses$3 = ['tw
|
|
13987
|
-
const dropDownIndicatorStyles = `tw
|
|
13988
|
-
const placeholderStyles = ['tw
|
|
14001
|
+
const disabledClasses$3 = ['tw-bg-sq-field-disabled-gray', '!tw-cursor-not-allowed', 'tw-opacity-50'].join(' ');
|
|
14002
|
+
const dropDownIndicatorStyles = `tw-text-sq-disabled-gray ${textActiveStyles} specOpenIt`;
|
|
14003
|
+
const placeholderStyles = ['tw-text-gray-400', 'dark:tw-text-sq-dark-text-lighter', 'specOpenSelect'].join(' ');
|
|
13989
14004
|
const multiValueStyles = [
|
|
13990
|
-
'tw
|
|
13991
|
-
'
|
|
13992
|
-
'tw
|
|
13993
|
-
'tw
|
|
13994
|
-
'tw
|
|
13995
|
-
'tw
|
|
13996
|
-
'tw
|
|
14005
|
+
'tw-bg-sq-disabled-gray',
|
|
14006
|
+
'dark:tw-bg-sq-multi-gray-dark',
|
|
14007
|
+
'tw-text-sm',
|
|
14008
|
+
'tw-py-0.5',
|
|
14009
|
+
'tw-px-1',
|
|
14010
|
+
'tw-m-0.5',
|
|
14011
|
+
'tw-rounded-sm',
|
|
13997
14012
|
'specOpenSelect',
|
|
13998
14013
|
].join(' ');
|
|
13999
14014
|
/**
|
|
@@ -14058,38 +14073,38 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
|
|
|
14058
14073
|
filterOption: filterOption ? filterOption : filterConfig ? createFilter(filterConfig) : undefined,
|
|
14059
14074
|
classNames: {
|
|
14060
14075
|
control: ({ menuIsOpen }) => {
|
|
14061
|
-
let border = menuIsOpen ? 'tw
|
|
14076
|
+
let border = menuIsOpen ? 'tw-rounded-t-md' : 'tw-rounded-md';
|
|
14062
14077
|
// if it's on the left side of the input group make sure the right side is straight and not curved
|
|
14063
14078
|
if (inputGroup === 'left') {
|
|
14064
|
-
border = menuIsOpen ? 'tw
|
|
14079
|
+
border = menuIsOpen ? 'tw-rounded-tl-md' : 'tw-rounded-l-md';
|
|
14065
14080
|
}
|
|
14066
14081
|
else if (inputGroup === 'right') {
|
|
14067
|
-
border = menuIsOpen ? 'tw
|
|
14082
|
+
border = menuIsOpen ? 'tw-rounded-tr-md' : 'tw-rounded-r-md';
|
|
14068
14083
|
}
|
|
14069
|
-
const appliedClasses = `${borderStyles$3} ${border} ${showError ? errorClasses$2 : borderColorClasses$2} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} ${controlClassNames}`;
|
|
14070
|
-
return `${appliedClasses} ${baseClasses$3} ${containerStyles} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw
|
|
14084
|
+
const appliedClasses = `${borderStyles$3} ${isDisabled ? '' : borderActiveClasses} ${border} ${showError ? errorClasses$2 : borderColorClasses$2} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} ${controlClassNames}`;
|
|
14085
|
+
return `${appliedClasses} ${baseClasses$3} ${containerStyles} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw-pl-2 tw-pr-1' : 'tw-pl-2.5 tw-pr-1.5'}`;
|
|
14071
14086
|
},
|
|
14072
14087
|
placeholder: () => placeholderStyles,
|
|
14073
14088
|
container: ({ selectProps }) => {
|
|
14074
|
-
const containerBorderStyles = selectProps?.menuIsOpen ? 'tw
|
|
14075
|
-
return `${textStyles} ${extraClassNames} ${containerBorderStyles}`;
|
|
14089
|
+
const containerBorderStyles = selectProps?.menuIsOpen ? 'tw-rounded-t-md' : 'tw-rounded-md';
|
|
14090
|
+
return `${textStyles} ${extraClassNames} ${containerBorderStyles} !tw-pointer-events-auto`;
|
|
14076
14091
|
},
|
|
14077
14092
|
input: () => textStyles + ' specSelectInput',
|
|
14078
14093
|
menuList: () => menuListStyles,
|
|
14079
14094
|
menu: () => menuStyles,
|
|
14080
|
-
menuPortal: () => '!tw
|
|
14095
|
+
menuPortal: () => '!tw-z-[9000]',
|
|
14081
14096
|
dropdownIndicator: () => dropDownIndicatorStyles,
|
|
14082
14097
|
option: ({ isSelected, isDisabled }) => {
|
|
14083
14098
|
let classes = optionStyles;
|
|
14084
14099
|
if (isDisabled) {
|
|
14085
14100
|
classes += ' specDisabledOption ';
|
|
14086
14101
|
}
|
|
14087
|
-
return isSelected ? classes + ' tw
|
|
14102
|
+
return isSelected ? classes + ' tw-bg-sq-colored-hover dark:tw-bg-sq-colored-hover-dark' : classes;
|
|
14088
14103
|
},
|
|
14089
14104
|
singleValue: () => 'specOpenSelect',
|
|
14090
14105
|
multiValue: () => multiValueStyles,
|
|
14091
|
-
multiValueRemove: () => '
|
|
14092
|
-
clearIndicator: () => 'tw
|
|
14106
|
+
multiValueRemove: () => 'hover:tw-text-sq-danger-color specSelectMultiValueRemove',
|
|
14107
|
+
clearIndicator: () => 'tw-text-sq-disabled-gray hover:tw-text-sq-danger-color specClearSelect',
|
|
14093
14108
|
group: () => 'specSelectGroup',
|
|
14094
14109
|
groupHeading: () => groupHeadingStyles,
|
|
14095
14110
|
},
|
|
@@ -14479,11 +14494,11 @@ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
|
14479
14494
|
const Dialog = Root$4;
|
|
14480
14495
|
const DialogPortal = Portal$1;
|
|
14481
14496
|
const DialogClose = Close;
|
|
14482
|
-
const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntime.jsxs(DialogPortal, { children: [jsxRuntime.jsx("div", { className: "tw
|
|
14483
|
-
tw
|
|
14484
|
-
tw
|
|
14497
|
+
const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntime.jsxs(DialogPortal, { children: [jsxRuntime.jsx("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 " }), jsxRuntime.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
|
|
14498
|
+
tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
|
|
14499
|
+
tw-rounded-lg ${className}`, ...props, children: [jsxRuntime.jsx(DialogTitle$1, { className: "tw-hidden" }), children] })] })));
|
|
14485
14500
|
DialogContent.displayName = Content$2.displayName;
|
|
14486
|
-
const DialogHeader = (props) => (jsxRuntime.jsx("div", { className: "tw
|
|
14501
|
+
const DialogHeader = (props) => (jsxRuntime.jsx("div", { className: "tw-w-full tw-justify-between", children: jsxRuntime.jsx("div", { ...props }) }));
|
|
14487
14502
|
DialogHeader.displayName = 'DialogHeader';
|
|
14488
14503
|
const DialogFooter = (props) => jsxRuntime.jsx("div", { ...props });
|
|
14489
14504
|
DialogFooter.displayName = 'DialogFooter';
|
|
@@ -14521,26 +14536,26 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
|
|
|
14521
14536
|
let titleIconElement = jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
14522
14537
|
if (titleIcon) {
|
|
14523
14538
|
if (typeof titleIcon === 'string') {
|
|
14524
|
-
titleIconElement = (jsxRuntime.jsx(Icon, { icon: titleIcon, testId: "modalTitleIcon", extraClassNames: "tw
|
|
14539
|
+
titleIconElement = (jsxRuntime.jsx(Icon, { icon: titleIcon, testId: "modalTitleIcon", extraClassNames: "tw-flex tw-text-xl tw-mt-1" }));
|
|
14525
14540
|
}
|
|
14526
14541
|
else {
|
|
14527
|
-
titleIconElement = jsxRuntime.jsx("div", { className: "tw
|
|
14542
|
+
titleIconElement = jsxRuntime.jsx("div", { className: "tw-mt-1.5", children: titleIcon });
|
|
14528
14543
|
}
|
|
14529
14544
|
}
|
|
14530
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [titleIcon && titleIconPosition === 'left' ? jsxRuntime.jsx("div", { className: "tw
|
|
14545
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [titleIcon && titleIconPosition === 'left' ? jsxRuntime.jsx("div", { className: "tw-flex tw-mr-2", children: titleIconElement }) : jsxRuntime.jsx(jsxRuntime.Fragment, {}), jsxRuntime.jsx(DialogTitle, { asChild: true, children: isTitleEditable ? (jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-items-center", children: [jsxRuntime.jsx(TextField, { extraClassNames: inputExtraClassNames, value: title, type: "text", testId: "modalTitle", onChange: onTitleChanged, placeholder: titlePlaceholder, required: titleRequired, showError: !!titleError }), titleError && jsxRuntime.jsx("p", { className: "tw-text-sq-danger-color tw-min-w-fit tw-pl-2 tw-mb-0", children: titleError })] })) : (customHeader ?? (jsxRuntime.jsxs("div", { "data-testid": "modalTitle", className: "modal-title", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [jsxRuntime.jsx("h3", { children: title }), titleSuffixLabel && jsxRuntime.jsx("span", { className: "tw-text-xl tw-pl-0.5", children: titleSuffixLabel })] }), subtitle && (jsxRuntime.jsx("div", { className: "tw-italic tw-text-sm tw-text-left tw-mt-1", "data-testid": "modal-subtitle", children: subtitle }))] }))) }), titleIcon && titleIconPosition === 'right' ? jsxRuntime.jsx("div", { className: "tw-flex tw-ml-4", children: titleIconElement }) : jsxRuntime.jsx(jsxRuntime.Fragment, {})] }));
|
|
14531
14546
|
};
|
|
14532
|
-
return open ? (jsxRuntime.jsx(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal, children: jsxRuntime.jsxs(DialogContent, { onPointerDownOutside: (e) => (onPointerDownOutside ? onPointerDownOutside(e) : e.preventDefault()), onInteractOutside: (e) => (onInteractOutside ? onInteractOutside(e) : e.preventDefault()), "data-testid": testId, className: classNames(`modalContent tw
|
|
14533
|
-
'tw
|
|
14534
|
-
'tw
|
|
14535
|
-
'tw
|
|
14536
|
-
'tw
|
|
14537
|
-
'tw
|
|
14538
|
-
'tw
|
|
14539
|
-
'tw
|
|
14540
|
-
'tw
|
|
14541
|
-
'tw
|
|
14542
|
-
'tw
|
|
14543
|
-
}, dialogClassName), children: [jsxRuntime.jsxs(DialogHeader, { className: "modal-header tw
|
|
14547
|
+
return open ? (jsxRuntime.jsx(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal, children: jsxRuntime.jsxs(DialogContent, { onPointerDownOutside: (e) => (onPointerDownOutside ? onPointerDownOutside(e) : e.preventDefault()), onInteractOutside: (e) => (onInteractOutside ? onInteractOutside(e) : e.preventDefault()), "data-testid": testId, className: classNames(`modalContent tw-w-full !tw-p-0 tw-border-none tw-shadow-none dark:tw-text-sq-dark-text !tw-gap-0`, {
|
|
14548
|
+
'tw-max-w-xs': size === 'xs',
|
|
14549
|
+
'tw-max-w-sm': size === 'sm',
|
|
14550
|
+
'tw-max-w-md': size === 'md',
|
|
14551
|
+
'tw-max-w-lg': size === 'lg',
|
|
14552
|
+
'tw-max-w-xl': size === 'xl',
|
|
14553
|
+
'tw-max-w-2xl': size === '2xl',
|
|
14554
|
+
'tw-max-w-3xl': size === '3xl',
|
|
14555
|
+
'tw-max-w-4xl': size === '4xl',
|
|
14556
|
+
'tw-max-w-5xl': size === '5xl',
|
|
14557
|
+
'tw-max-w-6xl': size === '6xl',
|
|
14558
|
+
}, dialogClassName), children: [jsxRuntime.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: [jsxRuntime.jsx("div", { className: "tw-flex tw-w-full", children: renderTitle() }), !hideCloseIcon && (jsxRuntime.jsx(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: jsxRuntime.jsx("span", { className: "tw-cursor-pointer", children: "\u00D7" }) }))] }), jsxRuntime.jsx(DialogDescription, { className: "modal-body tw-px-6 tw-py-4 tw-overflow-y-auto", asChild: true, children: children }), !hideFooterButtons && (jsxRuntime.jsx(DialogFooter, { className: "modal-footer tw-px-6 tw-py-4", children: modalFooter ?? (jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-justify-between", "data-testid": "modalFooter", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-justify-start", children: customButton && (jsxRuntime.jsx(Button, { label: customButtonLabel, onClick: onClickCustomButton, disabled: disableCustomButton, extraClassNames: "tw-justify-start tw-min-w-[100px]", testId: "customButton", variant: customButtonVariant })) }), jsxRuntime.jsxs("div", { className: "tw-flex tw-justify-end", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-items-center", children: middleFooterSection }), !hideCancelButton && (jsxRuntime.jsx(DialogClose, { asChild: true, children: jsxRuntime.jsx(Button, { label: cancelButtonLabel, extraClassNames: "tw-mr-5 tw-min-w-[100px]", tooltip: cancelButtonTooltip, variant: "outline", stopPropagation: false, testId: "cancelButton" }) })), !hideSubmitButton && (jsxRuntime.jsx(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]" }))] })] })) }))] }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
|
|
14544
14559
|
};
|
|
14545
14560
|
|
|
14546
14561
|
function createCollection(name) {
|
|
@@ -14998,11 +15013,11 @@ const Tabs = ({ tabs, defaultActiveTab, activeTab, onTabSelect, extraClassNames,
|
|
|
14998
15013
|
return;
|
|
14999
15014
|
onTabSelect && onTabSelect(tabId);
|
|
15000
15015
|
};
|
|
15001
|
-
return (jsxRuntime.jsxs(Root2$2, { className: `tw
|
|
15002
|
-
? 'tw
|
|
15003
|
-
: '
|
|
15004
|
-
? '
|
|
15005
|
-
: '
|
|
15016
|
+
return (jsxRuntime.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: [jsxRuntime.jsx(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) => (jsxRuntime.jsx(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
|
|
15017
|
+
? 'tw-border-b-sq-color-dark dark:tw-border-b-sq-color-dark tw-border-b-[3px]'
|
|
15018
|
+
: 'hover:tw-bg-sq-light-gray tw-border-b-[1px] hover:dark:tw-bg-gray-700'}`, "data-testid": tabsTestId, disabled: disabled, value: id, children: jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-overflow-hidden tw-pb-[3px]", children: [icon && jsxRuntime.jsx(Icon, { icon: icon, testId: `${id}_tab-icon`, extraClassNames: "tw-text-[0.9375rem] tw-mr-[7px] tw-flex-shrink-0" }), jsxRuntime.jsx("span", { className: `tw-text-[0.875rem] tw-font-medium tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis ${activeTab === id
|
|
15019
|
+
? 'dark:tw-text-sq-dark-text tw-text-gray-500'
|
|
15020
|
+
: 'dark:tw-text-sq-color-dark-dark tw-text-sq-color-dark'} ${tabLabelExtraClassNames}`, children: label })] }) }, `${label}-${id}-${index}`))) }), tabs.map((tab, index) => (jsxRuntime.jsx(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`)))] }));
|
|
15006
15021
|
};
|
|
15007
15022
|
|
|
15008
15023
|
var COLLAPSIBLE_NAME = "Collapsible";
|
|
@@ -15427,18 +15442,18 @@ var Trigger2 = AccordionTrigger;
|
|
|
15427
15442
|
var Content2$2 = AccordionContent;
|
|
15428
15443
|
|
|
15429
15444
|
const Accordion = ({ accordionItems, defaultValue, value, onItemSelect, disabled, extraClassNames, testId, }) => {
|
|
15430
|
-
return (jsxRuntime.jsx(Root2$1, { className: `tw
|
|
15445
|
+
return (jsxRuntime.jsx(Root2$1, { className: `tw-rounded-md tw-w-full focus-visible:tw-outline-none ${extraClassNames || ''}`, type: "single", defaultValue: defaultValue, value: value, collapsible: true, "data-testid": testId, onValueChange: (_value) => onItemSelect(_value), children: accordionItems.map((item) => (jsxRuntime.jsxs(Item, { className: `tw-bg-transparent tw-p-0 tw-flex tw-flex-col tw-w-full`, disabled: disabled, value: item.value, children: [jsxRuntime.jsx(Trigger2, { disabled: disabled, className: `tw-w-full tw-cursor-default focus-visible:tw-outline-none`, children: item.trigger }), jsxRuntime.jsx(Content2$2, { className: `data-[state=open]:tw-animate-slideDown data-[state=closed]:tw-animate-slideUp tw-overflow-hidden focus-visible:tw-outline-none ${item.contentClassNames || ''}`, children: item.content })] }, item.value))) }));
|
|
15431
15446
|
};
|
|
15432
15447
|
|
|
15433
|
-
const bgStyles$2 = ['tw
|
|
15448
|
+
const bgStyles$2 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
15434
15449
|
const borderStyles$2 = [
|
|
15435
|
-
'tw
|
|
15436
|
-
'tw
|
|
15437
|
-
'tw
|
|
15438
|
-
'tw
|
|
15439
|
-
'
|
|
15450
|
+
'tw-border-solid',
|
|
15451
|
+
'tw-border',
|
|
15452
|
+
'tw-rounded-popover',
|
|
15453
|
+
'tw-border-sq-disabled-gray',
|
|
15454
|
+
'dark:tw-border-gray-500',
|
|
15440
15455
|
].join(' ');
|
|
15441
|
-
const disabledClasses$2 = ['tw
|
|
15456
|
+
const disabledClasses$2 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
15442
15457
|
const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, containerTestId, onInteractOutside, onPointerDownOutside, isTriggerAsChild = false, shouldTriggerFullWidth = false, disabled = false, align = 'end', alignOffset = -35, placement = 'bottom', placementOffset = 2, isHoverEnabled = false, hoverOpenDelay = 300, onOpenChange, isOpen, isCloseOnContentClick = false, isPortal = false, ...tooltipProps }) => {
|
|
15443
15458
|
const tooltipData = getQTipData(tooltipProps);
|
|
15444
15459
|
const timeout = React.useRef(null);
|
|
@@ -15469,12 +15484,12 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
|
|
|
15469
15484
|
};
|
|
15470
15485
|
React__namespace.useEffect(() => clearHoverTimeout, []);
|
|
15471
15486
|
const renderContent = () => {
|
|
15472
|
-
return (jsxRuntime.jsx(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
|
|
15473
|
-
|
|
15474
|
-
${extraPopoverClassNames || ''}`, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("div", { className: "tw
|
|
15487
|
+
return (jsxRuntime.jsx(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: jsxRuntime.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
|
|
15488
|
+
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
|
|
15489
|
+
${extraPopoverClassNames || ''}`, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("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] }) }));
|
|
15475
15490
|
};
|
|
15476
15491
|
const renderPopover = (popoverOpenState) => {
|
|
15477
|
-
return (jsxRuntime.jsxs(Root2$3, { open: popoverOpenState, defaultOpen: false, onOpenChange: onOpenChange, children: [trigger ? (jsxRuntime.jsx(Trigger$3, { id: id, asChild: isTriggerAsChild, className: `
|
|
15492
|
+
return (jsxRuntime.jsxs(Root2$3, { open: popoverOpenState, defaultOpen: false, onOpenChange: onOpenChange, children: [trigger ? (jsxRuntime.jsx(Trigger$3, { id: id, asChild: isTriggerAsChild, className: `focus-visible:tw-outline-none tw-outline-none ${shouldTriggerFullWidth ? 'tw-w-full tw-h-full' : ''}`, disabled: disabled, children: jsxRuntime.jsx("div", { ...tooltipData, onMouseOver: onHoverStart, onMouseOut: onHoverEnd, className: `tw-bg-transparent focus-visible:tw-outline-none tw-outline-none ${disabled ? disabledClasses$2 : ''} ${shouldTriggerFullWidth ? 'tw-flex tw-flex-col tw-items-center tw-justify-center' : 'tw-inline'} ${extraTriggerClassNames || ''}`, children: trigger }) })) : (jsxRuntime.jsx(Trigger$3, { asChild: true, children: jsxRuntime.jsx("div", {}) })), isPortal ? jsxRuntime.jsx(Portal$2, { children: renderContent() }) : renderContent()] }));
|
|
15478
15493
|
};
|
|
15479
15494
|
return isHoverEnabled ? renderPopover(isHoveredOpen) : renderPopover(isOpen);
|
|
15480
15495
|
};
|
|
@@ -16539,65 +16554,65 @@ var SubTrigger2 = DropdownMenuSubTrigger;
|
|
|
16539
16554
|
var SubContent2 = DropdownMenuSubContent;
|
|
16540
16555
|
|
|
16541
16556
|
const borderStyles$1 = [
|
|
16542
|
-
'tw
|
|
16543
|
-
'tw
|
|
16544
|
-
'tw
|
|
16545
|
-
'tw
|
|
16546
|
-
'
|
|
16557
|
+
'tw-border-solid',
|
|
16558
|
+
'tw-border',
|
|
16559
|
+
'tw-rounded-popover',
|
|
16560
|
+
'tw-border-sq-disabled-gray',
|
|
16561
|
+
'dark:tw-border-gray-500',
|
|
16547
16562
|
].join(' ');
|
|
16548
|
-
const bgStyles$1 = ['tw
|
|
16549
|
-
const disabledClasses$1 = ['tw
|
|
16563
|
+
const bgStyles$1 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
16564
|
+
const disabledClasses$1 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
16550
16565
|
const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames = '', contentExtraClassNames = '', containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 5, alignOffset = -35, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, onContainerClick, ...tooltipProps }) => {
|
|
16551
16566
|
const tooltipData = getQTipData(tooltipProps);
|
|
16552
|
-
return (jsxRuntime.jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsxRuntime.jsx(Trigger, { id: id, className: `tw
|
|
16567
|
+
return (jsxRuntime.jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsxRuntime.jsx(Trigger, { id: id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, disabled: disabled, children: jsxRuntime.jsx("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none ${disabled ? disabledClasses$1 : ''} ${extraClassNames}`, children: triggerIcon }) }), jsxRuntime.jsx(Portal2, { children: jsxRuntime.jsx(Content2, { onClick: onContainerClick, sideOffset: placementOffset, side: placement, align: align, alignOffset: alignOffset, asChild: true, onCloseAutoFocus: (e) => !setFocusOnTriggerOnClose && e.preventDefault(), className: "focus-visible:tw-outline-none tw-outline-none", children: jsxRuntime.jsxs("div", { "data-testid": containerTestId, className: `${bgStyles$1} tw-relative tw-z-[1200] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ${borderStyles$1} ${contentExtraClassNames}`, children: [hasArrow && (jsxRuntime.jsx(Arrow2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] 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 tw-mt-[-7px]" }) })), dropdownItems.map((item, index) => {
|
|
16553
16568
|
const tooltipData = getQTipData(item);
|
|
16554
16569
|
if (item.isLabel) {
|
|
16555
|
-
return (jsxRuntime.jsxs(Label2, { className: item.itemExtraClassNames, ...tooltipData, children: [item.icon && (jsxRuntime.jsx(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", color: item.iconColor, extraClassNames: "tw
|
|
16570
|
+
return (jsxRuntime.jsxs(Label2, { className: item.itemExtraClassNames, ...tooltipData, children: [item.icon && (jsxRuntime.jsx(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", color: item.iconColor, extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" })), jsxRuntime.jsx("div", { "data-testid": item.labelTestId, className: `tw-text-[0.8125rem] tw-ml-1 ${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}`, children: item.label })] }, (item.id || '') + index));
|
|
16556
16571
|
}
|
|
16557
16572
|
if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
|
|
16558
|
-
return (jsxRuntime.jsxs(Sub2, { children: [jsxRuntime.jsxs(SubTrigger2, { id: id, className: `tw
|
|
16559
|
-
? '!tw
|
|
16560
|
-
: 'tw
|
|
16561
|
-
return (jsxRuntime.jsxs(Item2, { onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, className: "tw
|
|
16562
|
-
? 'tw
|
|
16563
|
-
: 'tw
|
|
16573
|
+
return (jsxRuntime.jsxs(Sub2, { children: [jsxRuntime.jsxs(SubTrigger2, { id: id, className: `tw-cursor-pointer tw-flex tw-justify-between dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-h-[27px] tw-pl-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none ${item.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled, ...tooltipData, children: [jsxRuntime.jsxs("div", { className: "tw-flex", children: [item.icon && (jsxRuntime.jsx(Icon, { icon: item.icon, extraClassNames: `tw-w-[18px] ${item.disabled
|
|
16574
|
+
? '!tw-text-sq-disabled-gray'
|
|
16575
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-white'} ${item.iconExtraClassNames || ''}` })), jsxRuntime.jsx("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[0.8125rem] tw-ml-1 ${item.disabled && '!tw-opacity-30'} tw-not-italic tw-font-semibold ${item.labelClasses}`, children: item.label })] }), jsxRuntime.jsx(Icon, { small: true, icon: "fc-arrow-dropdown -tw-rotate-90", extraClassNames: `${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-w-[18px] tw-ml-4 tw-text-[0.5rem] tw-justify-center tw-flex` })] }), jsxRuntime.jsx(Portal2, { children: jsxRuntime.jsx(SubContent2, { className: "focus-visible:tw-outline-none tw-outline-none", children: jsxRuntime.jsx("div", { "data-testid": containerTestId, className: `${bgStyles$1} tw-relative tw-z-[1000] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ${borderStyles$1}`, children: item.subMenuItems.map((subItem, subIndex) => {
|
|
16576
|
+
return (jsxRuntime.jsxs(Item2, { onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, className: "tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none", disabled: subItem.disabled, children: [subItem.iconClass && (jsxRuntime.jsx(Icon, { icon: subItem.iconClass, type: "text", extraClassNames: `tw-w-[18px] ${item.disabled && '!tw-opacity-30'}` })), jsxRuntime.jsx("div", { className: `tw-text-[0.8125rem] tw-ml-1 ${subItem.disabled
|
|
16577
|
+
? 'tw-text-sq-disabled-gray'
|
|
16578
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}`, children: subItem.label })] }, subItem.label + subIndex));
|
|
16564
16579
|
}) }) }) })] }, (item.id || item.icon || '') + index));
|
|
16565
16580
|
}
|
|
16566
16581
|
return (jsxRuntime.jsxs("div", { ...tooltipData, children: [jsxRuntime.jsxs(Item2, { "data-customid": item.itemCustomId, onSelect: (e) => {
|
|
16567
16582
|
item.onClick(e);
|
|
16568
|
-
}, className: `tw
|
|
16583
|
+
}, className: `tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-min-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none ${item.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled, children: [item.icon && (jsxRuntime.jsx(Icon, { icon: item.icon, testId: item.iconTestId, type: (item.iconType || 'text'), color: item.iconColor, customId: item.iconCustomId, extraClassNames: `tw-w-[18px] ${item.disabled && '!tw-opacity-30'} ${item.iconExtraClassNames || ''}` })), jsxRuntime.jsx("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[0.8125rem] tw-ml-1 ${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses || ''}`, children: item.label })] }, (item.id || item.icon || '') + index), item.hasDivider && (jsxRuntime.jsx(Separator2, { "data-testid": `dropdown-divider-${index}`, className: "tw-h-[1px] tw-bg-sq-disabled-gray dark:tw-bg-gray-500 tw-my-[8px]" }))] }, (item.id || '') + index));
|
|
16569
16584
|
})] }) }) })] }));
|
|
16570
16585
|
};
|
|
16571
16586
|
|
|
16572
|
-
const baseClasses$2 = 'tw
|
|
16573
|
-
' tw
|
|
16574
|
-
const darkTheme$1 = '
|
|
16575
|
-
const lightTheme$1 = 'tw
|
|
16576
|
-
const errorClasses$1 = 'tw
|
|
16577
|
-
const borderColorClasses$1 = 'tw
|
|
16587
|
+
const baseClasses$2 = 'tw-mx-auto tw-p-4 tw-leading-normal tw-outline-none tw-py-2 tw-px-3 tw-rounded-[10px] tw-w-full tw-relative' +
|
|
16588
|
+
' tw-border-solid tw-border tw-text-sm tw-flex tw-flex-col tw-justify-center tw-items-center';
|
|
16589
|
+
const darkTheme$1 = 'dark:tw-bg-sq-colored-hover-dark dark:tw-text-sq-dark-text';
|
|
16590
|
+
const lightTheme$1 = 'tw-text-sq-text-color tw-bg-sq-colored-hover';
|
|
16591
|
+
const errorClasses$1 = 'tw-border-sq-danger-color';
|
|
16592
|
+
const borderColorClasses$1 = 'tw-border-sq-color-dark';
|
|
16578
16593
|
/**
|
|
16579
16594
|
* Alert.
|
|
16580
16595
|
*/
|
|
16581
16596
|
const Alert = ({ children, dismissible = true, onClose, show = true, variant, testId = 'alert-id', id, extraClassNames, ...tooltipProps }) => {
|
|
16582
16597
|
const appliedTheme = {
|
|
16583
16598
|
theme: `${lightTheme$1} ${darkTheme$1}`,
|
|
16584
|
-
formulaError: 'tw
|
|
16585
|
-
danger: 'tw
|
|
16586
|
-
warning: 'tw
|
|
16587
|
-
gray: 'tw
|
|
16599
|
+
formulaError: 'tw-text-red-800 tw-bg-red-200 !tw-rounded-[4px]',
|
|
16600
|
+
danger: 'tw-text-sq-text-color tw-bg-sq-danger-color',
|
|
16601
|
+
warning: 'tw-bg-sq-bg-warning-color tw-text-sq-text-color',
|
|
16602
|
+
gray: 'tw-bg-sq-light-gray tw-text-sq-text-color dark:tw-bg-sq-worksheetspanel-gray-dark dark:tw-text-sq-dark-text',
|
|
16588
16603
|
};
|
|
16589
16604
|
const appliedBorderTheme = {
|
|
16590
16605
|
theme: borderColorClasses$1,
|
|
16591
16606
|
danger: errorClasses$1,
|
|
16592
|
-
warning: 'tw
|
|
16593
|
-
gray: 'tw
|
|
16594
|
-
formulaError: 'tw
|
|
16607
|
+
warning: 'tw-border-none',
|
|
16608
|
+
gray: 'tw-border-sq-darkish-gray',
|
|
16609
|
+
formulaError: 'tw-border-red-100',
|
|
16595
16610
|
};
|
|
16596
16611
|
const appliedClasses = `${baseClasses$2} ${appliedTheme[variant]} ${extraClassNames} ${appliedBorderTheme[variant]}`;
|
|
16597
16612
|
if (!show) {
|
|
16598
16613
|
return jsxRuntime.jsx("div", {});
|
|
16599
16614
|
}
|
|
16600
|
-
return (jsxRuntime.jsxs("div", { "data-testid": testId, id: id, className: appliedClasses, children: [children, dismissible && (jsxRuntime.jsx(Icon, { icon: "fc-delete", type: variant.match(/danger|warning|formulaError/) ? 'color' : 'theme', color: variant.match(/danger|warning|formulaError/) ? 'inherit' : undefined, extraClassNames: `tw
|
|
16615
|
+
return (jsxRuntime.jsxs("div", { "data-testid": testId, id: id, className: appliedClasses, children: [children, dismissible && (jsxRuntime.jsx(Icon, { icon: "fc-delete", type: variant.match(/danger|warning|formulaError/) ? 'color' : 'theme', color: variant.match(/danger|warning|formulaError/) ? 'inherit' : undefined, extraClassNames: `tw-self-end tw-text-[0.6875rem] tw-cursor-pointer tw-absolute tw-right-[10px] tw-top-[10px] ${variant.match(/danger|warning|gray|formulaError/) ? 'tw-text-sq-text-color dark:tw-text-sq-dark-text' : ''}`, testId: `${testId}-close-btn`, onClick: onClose, ...tooltipProps }))] }));
|
|
16601
16616
|
};
|
|
16602
16617
|
|
|
16603
16618
|
/**
|
|
@@ -16616,40 +16631,47 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
|
|
|
16616
16631
|
* @param tooltipProps - props to pass to the tooltip
|
|
16617
16632
|
*/
|
|
16618
16633
|
const SvgIcon = ({ onClick, icon, color, type = 'default', extraClassNames, viewBox = '0 0 19 19', id, testId, customId, ...tooltipProps }) => {
|
|
16619
|
-
const appliedClassNames = `${onClick ? 'tw
|
|
16620
|
-
tw
|
|
16634
|
+
const appliedClassNames = `${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none
|
|
16635
|
+
tw-outline-none`;
|
|
16621
16636
|
const tooltipData = getQTipData(tooltipProps);
|
|
16622
16637
|
const appliedType = type === 'default' ? 'currentColor' : 'rgb(var(--sq-icon))';
|
|
16623
|
-
return (jsxRuntime.jsx("div", { onClick: onClick, ...tooltipData, className: `svgContainer ${appliedClassNames}`, children: jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw
|
|
16638
|
+
return (jsxRuntime.jsx("div", { onClick: onClick, ...tooltipData, className: `svgContainer ${appliedClassNames}`, children: jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw-sq-icon dark:tw-text-white`, viewBox: viewBox, fill: color ? color : appliedType, "data-testid": testId, children: jsxRuntime.jsx("path", { d: getSvgIconPath(icon) }) }) }));
|
|
16624
16639
|
};
|
|
16625
16640
|
|
|
16626
16641
|
const SeeqActionDropdownItem = (item) => {
|
|
16627
16642
|
let renderIcon = jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
16628
16643
|
if (item.icon) {
|
|
16629
|
-
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw
|
|
16644
|
+
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw-rounded-[3px] tw-h-8 tw-w-8 tw-p-1 tw-flex tw-justify-center tw-items-center tw-bg-sq-color-dark' +
|
|
16645
|
+
' dark:tw-text-sq-white tw-text-[22px] tw-text-sq-white ' +
|
|
16646
|
+
item.iconExtraClassNames, ...item })) : (jsxRuntime.jsx(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-rounded-[3px] tw-h-8 tw-w-8 tw-flex tw-justify-center tw-items-center tw-bg-sq-color-dark dark:tw-text-sq-white tw-text-[1.375rem] tw-text-sq-white ' +
|
|
16647
|
+
item.iconExtraClassNames }));
|
|
16630
16648
|
}
|
|
16631
|
-
return (jsxRuntime.jsxs("div", { className: "tw
|
|
16649
|
+
return (jsxRuntime.jsxs("div", { className: "tw-flex-col tw-flex tw-p-[10px] tw-pl-5 tw-w-[600px]", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end", children: [renderIcon, jsxRuntime.jsx("h4", { className: "tw-text-base tw-font-[600] tw-leading-[20px] mb-0", children: item.display })] }), jsxRuntime.jsx("div", { className: "tw-text-[0.8125rem] tw-font-normal", children: item.text })] }));
|
|
16632
16650
|
};
|
|
16633
16651
|
const ViewWorkbench = (item) => {
|
|
16634
16652
|
let renderIcon = jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
16635
16653
|
if (item.icon) {
|
|
16636
|
-
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw
|
|
16654
|
+
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw-flex tw-w-5 tw-justify-center tw-items-center tw-text-[1.25rem] dark:tw-text-sq-white' +
|
|
16655
|
+
' tw-text-sq-text-color ' +
|
|
16656
|
+
item.iconExtraClassNames, type: "default", ...item })) : (jsxRuntime.jsx(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-flex tw-justify-center tw-items-center tw-text-[1.25rem] dark:tw-text-sq-white' +
|
|
16657
|
+
' tw-text-sq-text-color ' +
|
|
16658
|
+
item.iconExtraClassNames }));
|
|
16637
16659
|
}
|
|
16638
|
-
return (jsxRuntime.jsx("div", { className: "tw
|
|
16660
|
+
return (jsxRuntime.jsx("div", { className: "tw-flex-col tw-flex tw-p-[10px]", children: jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end", children: [renderIcon, jsxRuntime.jsx("div", { className: "tw-text-[0.8125rem]", children: item.display })] }) }));
|
|
16639
16661
|
};
|
|
16640
16662
|
const InsertSeeqContent = (item) => {
|
|
16641
|
-
return (jsxRuntime.jsxs("div", { className: "tw
|
|
16663
|
+
return (jsxRuntime.jsxs("div", { className: "tw-flex-col tw-flex tw-justify-start tw-p-[10px] tw-font-normal tw-text-left tw-text-sq-text-color dark:tw-text-sq-dark-text", children: [jsxRuntime.jsx("h5", { className: "tw-text-[1rem] tw-font-medium tw-text-sq-color-dark tw-leading-[18px]", children: item.display }), jsxRuntime.jsx("div", { className: "tw-text-[0.8125rem] tw-text-sq-text-color dark:tw-text-sq-dark-text !tw-mt-1", children: item.text })] }));
|
|
16642
16664
|
};
|
|
16643
16665
|
|
|
16644
16666
|
const borderStyles = [
|
|
16645
|
-
'tw
|
|
16646
|
-
'tw
|
|
16647
|
-
'tw
|
|
16648
|
-
'tw
|
|
16649
|
-
'
|
|
16667
|
+
'tw-border-solid',
|
|
16668
|
+
'tw-border',
|
|
16669
|
+
'tw-rounded-md',
|
|
16670
|
+
'tw-border-sq-disabled-gray',
|
|
16671
|
+
'dark:tw-border-gray-500',
|
|
16650
16672
|
].join(' ');
|
|
16651
|
-
const bgStyles = ['tw
|
|
16652
|
-
const disabledClasses = ['tw
|
|
16673
|
+
const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
16674
|
+
const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
16653
16675
|
const renderItem = (variant, item) => {
|
|
16654
16676
|
switch (variant) {
|
|
16655
16677
|
case 'create-workbench':
|
|
@@ -16664,31 +16686,31 @@ const renderItem = (variant, item) => {
|
|
|
16664
16686
|
};
|
|
16665
16687
|
const SeeqActionDropdown = ({ seeqActionDropdownItems, trigger, id, extraClassNames, containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 5, alignOffset = -35, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, variant, ...tooltipProps }) => {
|
|
16666
16688
|
const tooltipData = getQTipData(tooltipProps);
|
|
16667
|
-
return (jsxRuntime.jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsxRuntime.jsx(Trigger, { id: id, "data-testid": id, className: `tw
|
|
16668
|
-
' tw
|
|
16669
|
-
'
|
|
16670
|
-
' forceFont
|
|
16671
|
-
borderStyles, children: [hasArrow && (jsxRuntime.jsx(Arrow2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw
|
|
16689
|
+
return (jsxRuntime.jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsxRuntime.jsx(Trigger, { id: id, "data-testid": id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, asChild: true, disabled: disabled, children: jsxRuntime.jsx("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none ${disabled ? disabledClasses : ''} ${extraClassNames || ''}`, children: trigger }) }), jsxRuntime.jsx(Content2, { sideOffset: placementOffset, side: placement, align: align, alignOffset: alignOffset, asChild: true, onCloseAutoFocus: (e) => !setFocusOnTriggerOnClose && e.preventDefault(), className: "focus-visible:tw-outline-none tw-outline-none", children: jsxRuntime.jsxs("div", { "data-testid": containerTestId, className: bgStyles +
|
|
16690
|
+
' tw-relative tw-z-[1200] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none' +
|
|
16691
|
+
' data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out' +
|
|
16692
|
+
' forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ' +
|
|
16693
|
+
borderStyles, children: [hasArrow && (jsxRuntime.jsx(Arrow2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] 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 tw-mt-[-7px]" }) })), seeqActionDropdownItems.map((item, index) => {
|
|
16672
16694
|
return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Item2, { onSelect: (e) => {
|
|
16673
16695
|
item.action(e);
|
|
16674
|
-
}, className: `tw
|
|
16696
|
+
}, className: `tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-relative tw-select-none tw-outline-none data-[disabled]:tw-text-sq-disabled-gray data-[disabled]:tw-pointer-events-none`, "data-testid": item.testId, disabled: !item.enabled, children: renderItem(variant, item) }), item.divider && (jsxRuntime.jsx(Separator2, { "data-testid": `dropdown-divider-${index}`, className: "tw-h-[1px] tw-bg-sq-disabled-gray dark:tw-bg-gray-500 tw-my-[8px]" }))] }, item.display + index));
|
|
16675
16697
|
})] }) })] }));
|
|
16676
16698
|
};
|
|
16677
16699
|
|
|
16678
|
-
const baseClasses$1 = 'tw
|
|
16679
|
-
const errorClasses = 'tw
|
|
16700
|
+
const baseClasses$1 = 'tw-flex tw-outline-none tw-rounded-md tw-w-full tw-relative tw-flex-wrap';
|
|
16701
|
+
const errorClasses = 'tw-border-sq-danger-color';
|
|
16680
16702
|
const borderColorClasses = [
|
|
16681
|
-
'tw
|
|
16682
|
-
'
|
|
16683
|
-
'
|
|
16684
|
-
'
|
|
16685
|
-
'
|
|
16686
|
-
'
|
|
16703
|
+
'tw-border-sq-disabled-gray',
|
|
16704
|
+
'dark:tw-border-sq-dark-disabled-gray',
|
|
16705
|
+
'dark:focus:tw-border-sq-color-dark-dark',
|
|
16706
|
+
'dark:active:tw-border-sq-color-dark-dark',
|
|
16707
|
+
'focus:tw-border-sq-color-dark',
|
|
16708
|
+
'active:tw-border-sq-color-dark',
|
|
16687
16709
|
].join(' ');
|
|
16688
|
-
const fieldBorderRadius = 'tw
|
|
16689
|
-
const fieldClasses = 'tw
|
|
16690
|
-
const darkTheme = '
|
|
16691
|
-
const lightTheme = 'tw
|
|
16710
|
+
const fieldBorderRadius = 'tw-rounded-l-md tw-rounded-r-none';
|
|
16711
|
+
const fieldClasses = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3' + 'tw-p-1 tw-border-solid tw-border';
|
|
16712
|
+
const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
|
|
16713
|
+
const lightTheme = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
|
|
16692
16714
|
/**
|
|
16693
16715
|
* InputGroup.
|
|
16694
16716
|
*/
|
|
@@ -16698,10 +16720,8 @@ const InputGroup = React.forwardRef((props, ref) => {
|
|
|
16698
16720
|
const appliedClasses = `${baseClasses$1} ${extraClassNames}`;
|
|
16699
16721
|
const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${fieldBorderRadius} ${showError ? errorClasses : borderColorClasses} `;
|
|
16700
16722
|
const elementsToAppend = append.filter(Boolean);
|
|
16701
|
-
return (jsxRuntime.jsxs("div", { id: `input-group-${id}`, className: appliedClasses, children: [field ? (jsxRuntime.jsx("div", { "data-testid": testId, className: `tw
|
|
16702
|
-
return item?.variant === 'button' ? (jsxRuntime.jsx(Button, { extraClassNames: `$
|
|
16703
|
-
index ? 'tw:-ml-px' : 'tw:ml-0'
|
|
16704
|
-
} tw:focus:z-40 tw:focus:border tw:rounded-none tw:last:rounded-r-md`, ...item.buttonProps }, index)) : (jsxRuntime.jsx("div", { className: `${borderColorClasses} ${index ? 'tw:-ml-px' : 'tw:ml-0'} tw:flex tw:items-center tw:justify-center tw:rounded-none tw:last:rounded-r-md tw:active:z-30 tw:active:border tw:border`, children: item?.element }, index));
|
|
16723
|
+
return (jsxRuntime.jsxs("div", { id: `input-group-${id}`, className: appliedClasses, children: [field ? (jsxRuntime.jsx("div", { "data-testid": testId, className: `tw-flex tw-flex-1 tw-cursor-pointer active:tw-z-50 ${fieldAppliedClasses}`, children: field })) : (jsxRuntime.jsx(TextField, { testId: testId, readonly: readonly, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, name: name, ref: ref, showError: showError, value: value, required: required, placeholder: placeholder, autoComplete: autoComplete, autoFocus: autoFocus, id: id, type: type, disabled: disabled, step: step, min: min, max: max, maxLength: maxLength, minLength: minLength, extraClassNames: `tw-flex tw-flex-1 tw-w-full focus:tw-z-30 tw-rounded-r-none last:tw-rounded-r-md ${extraClassNames}`, ...tooltipData })), elementsToAppend.map((item, index) => {
|
|
16724
|
+
return item?.variant === 'button' ? (jsxRuntime.jsx(Button, { extraClassNames: `${index ? 'tw-ml-[-1px]' : 'tw-ml-0'} focus:tw-z-40 focus:tw-border tw-rounded-none last:tw-rounded-r-md`, ...item.buttonProps }, index)) : (jsxRuntime.jsx("div", { className: `${borderColorClasses} ${index ? 'tw-ml-[-1px]' : 'tw-ml-0'} tw-flex tw-items-center tw-justify-center tw-rounded-none last:tw-rounded-r-md active:tw-z-30 active:tw-border tw-border`, children: item?.element }, index));
|
|
16705
16725
|
})] }));
|
|
16706
16726
|
});
|
|
16707
16727
|
|
|
@@ -27431,7 +27451,7 @@ var Thumb = SliderThumb;
|
|
|
27431
27451
|
*/
|
|
27432
27452
|
const Slider = (props) => {
|
|
27433
27453
|
const { onValueChange, onPointerUp, id, value, name, disabled = false, rootExtraClassNames = '', trackExtraClassNames = '', rangeExtraClassNames = '', thumbExtraClassNames = '', step, min, max, } = props;
|
|
27434
|
-
return (jsxRuntime.jsxs(Root$1, { className: `tw
|
|
27454
|
+
return (jsxRuntime.jsxs(Root$1, { className: `tw-relative tw-flex tw-h-5 tw-w-full tw-touch-none tw-select-none tw-items-center ${rootExtraClassNames}`, defaultValue: [value], value: [value], onValueChange: (value) => onValueChange && onValueChange(value), onPointerUp: (e) => onPointerUp && onPointerUp(e), name: name, id: id, max: max, min: min, disabled: disabled, step: step, children: [jsxRuntime.jsx(Track, { className: `tw-relative tw-h-[5px] tw-grow tw-rounded-[4px] tw-bg-sq-dark-gray dark:tw-bg-sq-dark-disabled-gray ${trackExtraClassNames}`, children: jsxRuntime.jsx(Range, { className: `tw-absolute tw-h-full tw-rounded-full ${rangeExtraClassNames}` }) }), jsxRuntime.jsx(Thumb, { className: `tw-block tw-h-[15px] tw-w-[15px] tw-rounded-full tw-bg-sq-color-dark active:tw-bg-sq-color-dark-dark focus:outline-none focus-visible:tw-outline-none aria-disabled:tw-bg-sq-dark-gray dark:aria-disabled:tw-bg-sq-dark-disabled-gray tw-transition tw-ease-in-out ${thumbExtraClassNames}`, "aria-disabled": disabled })] }));
|
|
27435
27455
|
};
|
|
27436
27456
|
|
|
27437
27457
|
var PROGRESS_NAME = "Progress";
|
|
@@ -28700,7 +28720,7 @@ function validateWCAG2Parms(parms) {
|
|
|
28700
28720
|
};
|
|
28701
28721
|
}
|
|
28702
28722
|
|
|
28703
|
-
const baseLabelClasses = 'tw
|
|
28723
|
+
const baseLabelClasses = 'tw-left-1 tw-text-xs tw-text-sq-text-color dark:tw-text-sq-dark-text tw-items-center tw-h-[18px]';
|
|
28704
28724
|
const ProgressIndicator = (props) => {
|
|
28705
28725
|
const { value, color = undefined, testId, label, extraClasses = '', labelClasses = '', valuesLength, max, index, totalValue, ...tooltipProps } = props;
|
|
28706
28726
|
const tooltipData = getQTipData(tooltipProps);
|
|
@@ -28713,19 +28733,19 @@ const ProgressIndicator = (props) => {
|
|
|
28713
28733
|
if (totalValue >= max) {
|
|
28714
28734
|
// If progress is 100%, round both ends
|
|
28715
28735
|
if (index === 0 && valuesLength === 1) {
|
|
28716
|
-
roundedCorners = 'tw
|
|
28736
|
+
roundedCorners = 'tw-rounded-[15px]';
|
|
28717
28737
|
}
|
|
28718
28738
|
else if (index === 0) {
|
|
28719
|
-
roundedCorners = 'tw
|
|
28739
|
+
roundedCorners = 'tw-rounded-l-[15px]';
|
|
28720
28740
|
}
|
|
28721
28741
|
else if (index === valuesLength - 1) {
|
|
28722
|
-
roundedCorners = 'tw
|
|
28742
|
+
roundedCorners = 'tw-rounded-r-[15px]';
|
|
28723
28743
|
}
|
|
28724
28744
|
}
|
|
28725
28745
|
else {
|
|
28726
28746
|
// Otherwise, only round the leftmost indicator
|
|
28727
28747
|
if (index === 0) {
|
|
28728
|
-
roundedCorners = 'tw
|
|
28748
|
+
roundedCorners = 'tw-rounded-l-[15px]';
|
|
28729
28749
|
}
|
|
28730
28750
|
}
|
|
28731
28751
|
React.useEffect(() => {
|
|
@@ -28737,13 +28757,13 @@ const ProgressIndicator = (props) => {
|
|
|
28737
28757
|
return () => clearTimeout(timeout);
|
|
28738
28758
|
}, [value]);
|
|
28739
28759
|
const bgColor = color || undefined;
|
|
28740
|
-
const bgClass = color ? '' : 'tw
|
|
28760
|
+
const bgClass = color ? '' : 'tw-bg-sq-color-dark';
|
|
28741
28761
|
const computeTextClass = (elem) => {
|
|
28742
28762
|
const computedStyle = getComputedStyle(elem);
|
|
28743
28763
|
const backgroundColor = computedStyle.backgroundColor;
|
|
28744
28764
|
const textColorClass = tinycolor(backgroundColor).isDark()
|
|
28745
|
-
? 'tw
|
|
28746
|
-
: 'tw
|
|
28765
|
+
? 'tw-text-sq-white dark:tw-text-sq-white'
|
|
28766
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-text-color';
|
|
28747
28767
|
setTextColorClass(textColorClass);
|
|
28748
28768
|
};
|
|
28749
28769
|
React.useEffect(() => {
|
|
@@ -28751,35 +28771,35 @@ const ProgressIndicator = (props) => {
|
|
|
28751
28771
|
computeTextClass(indicatorElementRef.current);
|
|
28752
28772
|
}
|
|
28753
28773
|
}, [!!indicatorElementRef.current]);
|
|
28754
|
-
return (React.createElement(Indicator, { className: `tw
|
|
28774
|
+
return (React.createElement(Indicator, { className: `tw-ease-[cubic-bezier(0.65, 0, 0.35, 1)] tw-w-full tw-h-[18px] tw-duration-[660ms] tw-flex tw-justify-center tw-items-center ${valuesLength === 1 ? '' : 'tw-overflow-hidden'} ${roundedCorners} ${bgClass} ${extraClasses}`, ...tooltipData, "data-qtip-text": tooltipProps.tooltip ? tooltipProps.tooltip : `${value}%`, "data-testid": `progress-bar-indicator-${testId ? testId : value}`, key: `${index}-${value}`, ref: indicatorElementRef, style: {
|
|
28755
28775
|
// Background color will default to the theme color if undefined
|
|
28756
28776
|
backgroundColor: bgColor,
|
|
28757
28777
|
animation: 'width 660ms forwards',
|
|
28758
28778
|
width: `${animatedWidth}%`,
|
|
28759
|
-
} }, label ? (jsxRuntime.jsx("span", { className: `${baseLabelClasses} ${labelClasses} ${textColorClass} ${valuesLength === 1 ? 'tw
|
|
28779
|
+
} }, label ? (jsxRuntime.jsx("span", { className: `${baseLabelClasses} ${labelClasses} ${textColorClass} ${valuesLength === 1 ? 'tw-absolute tw-z-50' : ''}`, children: label })) : undefined));
|
|
28760
28780
|
};
|
|
28761
28781
|
const ProgressBar = ({ values = [], max = 100, containerExtraClasses = '', zeroValueLabel = 'No progress yet', }) => {
|
|
28762
28782
|
const totalValue = values.reduce((acc, { value }) => acc + value, 0);
|
|
28763
|
-
return (jsxRuntime.jsx(Root, { className: `tw
|
|
28764
|
-
return
|
|
28765
|
-
})) : (jsxRuntime.jsx("div", { className: `${baseLabelClasses} tw
|
|
28783
|
+
return (jsxRuntime.jsx(Root, { className: `tw-relative tw-h-[18px] tw-w-full tw-overflow-hidden tw-rounded-[15px] tw-bg-sq-dark-gray dark:tw-bg-sq-dark-disabled-gray tw-flex tw-flex-1 ${containerExtraClasses}`, max: max, value: totalValue, children: totalValue > 0 ? (values.map((props, i) => {
|
|
28784
|
+
return React.createElement(ProgressIndicator, { ...props, max: max, valuesLength: values.length, index: i, totalValue: totalValue, key: i });
|
|
28785
|
+
})) : (jsxRuntime.jsx("div", { className: `${baseLabelClasses} tw-mx-auto tw-overflow-hidden`, children: zeroValueLabel })) }));
|
|
28766
28786
|
};
|
|
28767
28787
|
|
|
28768
|
-
const baseClasses = 'tw
|
|
28788
|
+
const baseClasses = 'tw-flex tw-outline-none tw-w-full tw-relative tw-flex-wrap';
|
|
28769
28789
|
const activeClassesByVariantLightTheme = {
|
|
28770
|
-
'outline': '!tw
|
|
28771
|
-
'theme': 'tw
|
|
28790
|
+
'outline': '!tw-bg-sq-disabled-gray tw-border-sq-color-dark',
|
|
28791
|
+
'theme': 'tw-bg-sq-color-highlight',
|
|
28772
28792
|
'danger': '',
|
|
28773
28793
|
'theme-light': '',
|
|
28774
|
-
'no-border': '!tw
|
|
28794
|
+
'no-border': '!tw-bg-sq-disabled-gray',
|
|
28775
28795
|
'warning': '',
|
|
28776
28796
|
};
|
|
28777
28797
|
const activeClassesByVariantDarkTheme = {
|
|
28778
|
-
'outline': '
|
|
28779
|
-
'theme': '
|
|
28798
|
+
'outline': 'dark:!tw-bg-sq-multi-gray-dark dark:tw-border-sq-color-dark',
|
|
28799
|
+
'theme': 'dark:tw-bg-sq-color-highlight',
|
|
28780
28800
|
'danger': '',
|
|
28781
28801
|
'theme-light': '',
|
|
28782
|
-
'no-border': '
|
|
28802
|
+
'no-border': 'dark:!tw-bg-sq-multi-gray-dark',
|
|
28783
28803
|
'warning': '',
|
|
28784
28804
|
};
|
|
28785
28805
|
/**
|
|
@@ -28791,7 +28811,7 @@ const ButtonGroup = (props) => {
|
|
|
28791
28811
|
const appliedClasses = `${baseClasses} ${extraClassNames}`;
|
|
28792
28812
|
return (jsxRuntime.jsx("div", { id: id ? `button-group-${id}` : undefined, "data-testid": testId, className: appliedClasses, ...tooltipData, children: buttons
|
|
28793
28813
|
.filter(Boolean)
|
|
28794
|
-
.map((item, index) => item?.variant === 'button' ? (jsxRuntime.jsx(Button, { ...item.buttonProps, extraClassNames: `tw
|
|
28814
|
+
.map((item, index) => item?.variant === 'button' ? (jsxRuntime.jsx(Button, { ...item.buttonProps, extraClassNames: `tw-ml-[-1px] focus:tw-z-40 tw-outline-none focus:tw-border tw-rounded-none first:tw-rounded-l-md last:tw-rounded-r-md ${item.buttonProps?.isActive
|
|
28795
28815
|
? `${activeClassesByVariantLightTheme[item?.buttonProps?.variant ?? 'outline']} ${activeClassesByVariantDarkTheme[item?.buttonProps?.variant ?? 'outline']} `
|
|
28796
28816
|
: ''} ${item.buttonProps.extraClassNames}`, onClick: () => onChange && onChange(item?.buttonProps?.value) }, index)) : (item?.element)) }));
|
|
28797
28817
|
};
|
|
@@ -28801,7 +28821,7 @@ const ButtonGroup = (props) => {
|
|
|
28801
28821
|
* - Easily create a carousel with custom slides.
|
|
28802
28822
|
* - Supports automatic sliding, navigation arrows, and slide indicators.
|
|
28803
28823
|
*/
|
|
28804
|
-
const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '', onSlide = () => { }, autoSlide, showIndicators = true, continuous = true, interval = 4000, prevIcon = 'fc-arrow-dropdown tw
|
|
28824
|
+
const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '', onSlide = () => { }, autoSlide, showIndicators = true, continuous = true, interval = 4000, prevIcon = 'fc-arrow-dropdown tw-rotate-90', nextIcon = 'fc-arrow-dropdown -tw-rotate-90', showArrows = true, iconExtraClassNames = '', carouselItems = [], }) => {
|
|
28805
28825
|
const [currentIndex, setCurrentIndex] = React.useState(activeIndex);
|
|
28806
28826
|
const changeSlide = (nextIndex) => {
|
|
28807
28827
|
const newIndex = (nextIndex + carouselItems.length) % carouselItems.length;
|
|
@@ -28863,7 +28883,7 @@ const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '
|
|
|
28863
28883
|
transition: { type: 'spring', damping: 20, stiffness: 100 },
|
|
28864
28884
|
}),
|
|
28865
28885
|
};
|
|
28866
|
-
return (jsxRuntime.jsxs("div", { "data-testid": testId, className: `tw
|
|
28886
|
+
return (jsxRuntime.jsxs("div", { "data-testid": testId, className: `tw-flex tw-flex-col tw-items-center tw-justify-center tw-w-full tw-overflow-hidden ${extraClassNames}`, children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-w-full tw-h-max tw-gap-1", children: [showArrows && (jsxRuntime.jsx(Button, { icon: prevIcon, size: "lg", variant: "no-border", testId: "carousel-prev", extraClassNames: `${currentIndex === 0 && !continuous ? 'tw-invisible' : ''} ${iconExtraClassNames} tw-animate-fadeIn`, onClick: onBackClick })), jsxRuntime.jsx("div", { className: "tw-h-full tw-w-full tw-overflow-hidden", children: jsxRuntime.jsx(motion.div, { custom: 1, initial: "initial", animate: "animate", exit: "exit", variants: slideVariants, className: "tw-w-full", children: carouselItems[currentIndex] }, currentIndex) }), showArrows && (jsxRuntime.jsx(Button, { icon: nextIcon, testId: "carousel-next", size: "lg", variant: "no-border", extraClassNames: `${currentIndex === carouselItems.length - 1 && !continuous ? 'tw-invisible' : ''} ${iconExtraClassNames} tw-animate-fadeIn`, onClick: onForwardClick }))] }), showIndicators && (jsxRuntime.jsx("div", { className: "tw-flex tw-gap-1 tw-mt-2", children: carouselItems.map((_, i) => (jsxRuntime.jsx("div", { className: `tw-w-2 tw-h-2 tw-rounded-full tw-cursor-pointer ${i === currentIndex ? 'tw-bg-sq-color-dark' : 'tw-bg-sq-darkish-gray'}`, onClick: () => changeSlide(i) }, i))) }))] }));
|
|
28867
28887
|
};
|
|
28868
28888
|
|
|
28869
28889
|
const buttonTypes = ['button', 'reset', 'submit', 'link'];
|