pixel-react 1.7.2 → 1.7.3

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.
Files changed (52) hide show
  1. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  2. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  3. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  4. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  5. package/lib/components/AddButton/AddButton.d.ts +5 -0
  6. package/lib/components/AddButton/AddButton.stories.d.ts +6 -0
  7. package/lib/components/AddButton/index.d.ts +1 -0
  8. package/lib/components/AddButton/types.d.ts +4 -0
  9. package/lib/components/AddVariables/AddVariables.d.ts +5 -0
  10. package/lib/components/AddVariables/index.d.ts +1 -0
  11. package/lib/components/AddVariables/types.d.ts +35 -0
  12. package/lib/components/AttachImage/AttachImage.stories.d.ts +7 -0
  13. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +6 -0
  14. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +8 -0
  15. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +7 -0
  16. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +8 -0
  17. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +6 -0
  18. package/lib/components/Drawer/Types.d.ts +4 -0
  19. package/lib/components/EditTextField/EditTextField.stories.d.ts +10 -0
  20. package/lib/components/Editor/Editor.stories.d.ts +6 -0
  21. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +4 -0
  22. package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
  23. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +14 -0
  24. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +24 -0
  25. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +2 -0
  26. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +1 -0
  27. package/lib/components/Select/Select.stories.d.ts +1 -0
  28. package/lib/components/StatusCard/StatusCard.stories.d.ts +11 -0
  29. package/lib/index.d.ts +4 -0
  30. package/lib/index.esm.js +22 -23
  31. package/lib/index.esm.js.map +1 -1
  32. package/lib/index.js +22 -23
  33. package/lib/index.js.map +1 -1
  34. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
  35. package/package.json +1 -1
  36. package/src/assets/icons/approval_pending.svg +8 -8
  37. package/src/assets/icons/configuration.svg +3 -3
  38. package/src/assets/icons/defects.svg +8 -8
  39. package/src/assets/icons/element.svg +4 -4
  40. package/src/assets/icons/project_element.svg +4 -4
  41. package/src/assets/icons/step_group.svg +10 -10
  42. package/src/assets/icons/variable.svg +3 -3
  43. package/src/assets/icons/web_service_icon.svg +3 -3
  44. package/src/components/AppHeader/AppHeader.scss +2 -2
  45. package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +16 -17
  46. package/src/components/Drawer/Drawer.scss +2 -2
  47. package/src/components/Drawer/Drawer.stories.tsx +1 -0
  48. package/src/components/Drawer/Drawer.tsx +2 -1
  49. package/src/components/Drawer/Types.ts +4 -0
  50. package/src/components/Editor/VariableDropdown.scss +1 -0
  51. package/src/components/Icon/iconList.ts +0 -2
  52. /package/lib/components/ExcelFile/{ColorBarselector → ColorBarSelector}/ColorBarSelector.d.ts +0 -0
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ import './AddButton.scss';
3
+ import { AddButtonProps } from './types';
4
+ declare const AddButton: React.FC<AddButtonProps>;
5
+ export default AddButton;
@@ -0,0 +1,6 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import AddButton from './AddButton';
3
+ declare const meta: Meta<typeof AddButton>;
4
+ type Story = StoryObj<typeof AddButton>;
5
+ export declare const PrimaryAddButton: Story;
6
+ export default meta;
@@ -0,0 +1 @@
1
+ export { default } from './AddButton';
@@ -0,0 +1,4 @@
1
+ export interface AddButtonProps {
2
+ name: string;
3
+ onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
4
+ }
@@ -0,0 +1,5 @@
1
+ import { AddVariableProps } from './types';
2
+ import './AddVariables.scss';
3
+ import React from 'react';
4
+ declare const AddVariables: React.FC<AddVariableProps>;
5
+ export default AddVariables;
@@ -0,0 +1 @@
1
+ export { default } from './AddVariables';
@@ -0,0 +1,35 @@
1
+ export type dynamicObject = {
2
+ [key: string]: any;
3
+ };
4
+ export interface AddVariableProps {
5
+ /**
6
+ * Label for the field
7
+ */
8
+ label?: string;
9
+ /**
10
+ * List of variables
11
+ */
12
+ variableList?: dynamicObject[];
13
+ /**
14
+ * Place holder for the input field
15
+ */
16
+ placeholder?: string;
17
+ /**
18
+ * Function to handle input change
19
+ * @param value
20
+ * @returns
21
+ */
22
+ onChange: (value: string) => void;
23
+ /**
24
+ * Function to handle create variable icon click
25
+ */
26
+ onCreateVariableClick?: () => void;
27
+ /**
28
+ * Value of the input field
29
+ */
30
+ value: string;
31
+ /**
32
+ * Width of the dropdown
33
+ */
34
+ dropdownWidth?: string;
35
+ }
@@ -0,0 +1,7 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import AttachImage from './AttachImage';
3
+ import { AttachImageProps } from './types';
4
+ declare const meta: Meta<typeof AttachImage>;
5
+ export default meta;
6
+ type Story = StoryObj<AttachImageProps>;
7
+ export declare const Default: Story;
@@ -0,0 +1,6 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import BarChart from './BarChart';
3
+ declare const meta: Meta<typeof BarChart>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof BarChart>;
6
+ export declare const BarChartDashboard: Story;
@@ -0,0 +1,8 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import IconRadialChart from './IconRadialChart';
3
+ declare const meta: Meta<typeof IconRadialChart>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof IconRadialChart>;
6
+ export declare const Default: Story;
7
+ export declare const Mobile: Story;
8
+ export declare const WithoutIcon: Story;
@@ -0,0 +1,7 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import LineChart from './LineChart';
3
+ import { LineChartProps } from './types';
4
+ declare const meta: Meta<typeof LineChart>;
5
+ export default meta;
6
+ export declare const DefaultLineChart: StoryObj<LineChartProps>;
7
+ export declare const StatusLineChart: StoryObj<LineChartProps>;
@@ -0,0 +1,8 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import MultiRadialChart from './MultiRadialChart';
3
+ declare const meta: Meta<typeof MultiRadialChart>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof MultiRadialChart>;
6
+ export declare const Default: Story;
7
+ export declare const numberLegend: Story;
8
+ export declare const PillLegend: Story;
@@ -0,0 +1,6 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import ConnectingBranch from './ConnectingBranch';
3
+ declare const meta: Meta<typeof ConnectingBranch>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof ConnectingBranch>;
6
+ export declare const Default: Story;
@@ -150,4 +150,8 @@ export interface DrawerProps {
150
150
  * Position from right
151
151
  */
152
152
  right?: string | number;
153
+ /**
154
+ * Custom overflow for the drawer
155
+ */
156
+ overflow?: string;
153
157
  }
@@ -0,0 +1,10 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import EditTextField from './EditTextField';
3
+ import '../../assets/styles/_colors.scss';
4
+ import './EditTextField.scss';
5
+ declare const meta: Meta<typeof EditTextField>;
6
+ type Story = StoryObj<typeof EditTextField>;
7
+ export declare const textFieldWithLabel: Story;
8
+ export declare const textFieldWithOutLabel: Story;
9
+ export declare const openTextField: Story;
10
+ export default meta;
@@ -0,0 +1,6 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import { EditorProps } from './types';
3
+ declare const meta: Meta<EditorProps>;
4
+ export default meta;
5
+ type Story = StoryObj<EditorProps>;
6
+ export declare const Default: Story;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import './ContextMenu.scss';
3
+ declare const ContextMenu: React.FC<ContextMenuProps>;
4
+ export default ContextMenu;
@@ -0,0 +1,6 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import ExcelFile from './ExcelFile/ExcelFile';
3
+ declare const meta: Meta<typeof ExcelFile>;
4
+ type Story = StoryObj<typeof ExcelFile>;
5
+ export declare const Default: Story;
6
+ export default meta;
@@ -0,0 +1,14 @@
1
+ import { CellBase } from "./ExcelFile/Excel";
2
+ interface ChangeExcelStylesOptions {
3
+ sheetName: string;
4
+ styleType: string;
5
+ value: string;
6
+ selectedCell: {
7
+ row: number;
8
+ column: number;
9
+ }[];
10
+ }
11
+ export default function ChangeExcelStyles(setWorksheetsData: React.Dispatch<React.SetStateAction<{
12
+ [key: string]: Matrix<CellBase>;
13
+ }>>, options: ChangeExcelStylesOptions): void;
14
+ export {};
@@ -0,0 +1,24 @@
1
+ interface CellStyle {
2
+ color?: string;
3
+ backgroundColor?: string;
4
+ bold?: boolean;
5
+ italic?: boolean;
6
+ name?: string;
7
+ border: {
8
+ top: string;
9
+ bottom: string;
10
+ left: string;
11
+ right: string;
12
+ };
13
+ alignment: {
14
+ horizontal?: string;
15
+ vertical?: string;
16
+ wrapText?: boolean;
17
+ };
18
+ }
19
+ interface CellData {
20
+ style?: CellStyle;
21
+ }
22
+ type ImportExcelStylesData = Array<Array<CellData>>;
23
+ export default function ImportExcelStyles(data: ImportExcelStylesData | null): void;
24
+ export {};
@@ -6,6 +6,8 @@ declare const meta: Meta<typeof LabelEditTextField>;
6
6
  type Story = StoryObj<typeof LabelEditTextField>;
7
7
  export declare const textField: Story;
8
8
  export declare const textFieldWithOutLabel: Story;
9
+ export declare const openTextFieldWithOutLabel: Story;
9
10
  export declare const textFieldWithDropdown: Story;
10
11
  export declare const textFieldWithHighlight: Story;
12
+ export declare const openLabelEditTextField: Story;
11
13
  export default meta;
@@ -7,4 +7,5 @@ export declare const Default2: Story;
7
7
  export declare const Default3: Story;
8
8
  export declare const EmailGroup: Story;
9
9
  export declare const Controlled: Story;
10
+ export declare const Labels: Story;
10
11
  export default meta;
@@ -10,4 +10,5 @@ export declare const Disable: Story;
10
10
  export declare const WithInitialValue: Story;
11
11
  export declare const OptionSelection: Story;
12
12
  export declare const CustomJSX: Story;
13
+ export declare const updateOptionFromOutside: Story;
13
14
  export default meta;
@@ -0,0 +1,11 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import Card from './StatusCard';
3
+ import { CardProps } from './types';
4
+ declare const meta: Meta<typeof Card>;
5
+ export default meta;
6
+ type Story = StoryObj<CardProps>;
7
+ export declare const Passed: Story;
8
+ export declare const Failed: Story;
9
+ export declare const Warning: Story;
10
+ export declare const Skipped: Story;
11
+ export declare const Flaky: Story;
package/lib/index.d.ts CHANGED
@@ -227,6 +227,10 @@ interface DrawerProps {
227
227
  * Position from right
228
228
  */
229
229
  right?: string | number;
230
+ /**
231
+ * Custom overflow for the drawer
232
+ */
233
+ overflow?: string;
230
234
  }
231
235
 
232
236
  declare const Drawer: FC<DrawerProps>;
package/lib/index.esm.js CHANGED
@@ -1024,7 +1024,7 @@ const Button$1 = /*#__PURE__*/forwardRef(({
1024
1024
  });
1025
1025
  });
1026
1026
 
1027
- var css_248z$1e = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-drawer-container .ff-overlay {\n position: fixed;\n inset: 0;\n background-color: var(--drawer-title-color);\n opacity: 0.5;\n z-index: 999;\n}\n.ff-drawer-container .child-drawer-overlay {\n z-index: 999;\n}\n.ff-drawer-container .ff-drawer {\n margin-bottom: 4px;\n position: fixed;\n right: 0;\n bottom: 0;\n top: 87px;\n background-color: var(--primary-button-text-color);\n z-index: 999;\n transform: translateX(100%);\n opacity: 0;\n}\n.ff-drawer-container .ff-drawer--open {\n transform: translateX(0);\n opacity: 1;\n}\n.ff-drawer-container .ff-drawer--small {\n width: 444px;\n}\n.ff-drawer-container .ff-drawer--medium {\n width: 666px;\n}\n.ff-drawer-container .ff-drawer--large {\n width: 888px;\n}\n.ff-drawer-container .ff-drawer--x-large {\n width: calc(100vw - 10px);\n}\n.ff-drawer-container .ff-drawer--open, .ff-drawer-container .ff-drawer--medium, .ff-drawer-container .ff-drawer--large, .ff-drawer-container .ff-drawer--x-large {\n transition: all 0.4s ease-in-out;\n border-radius: 5px;\n border: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header {\n padding: 4px 8px 4px 8px;\n display: flex;\n gap: 10px;\n border-bottom: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n font-weight: 600;\n color: var(--drawer-title-color);\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-close-icon {\n height: 16px;\n width: 16px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n height: 24px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-expand-collapse-button {\n cursor: pointer;\n background-color: var(--button-bg-color);\n outline: none;\n border: none;\n margin: 0;\n border: 1px solid transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-custom-header {\n background-color: var(--drawer-footer-bg);\n padding: 4px 8px;\n width: 100%;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-body {\n background-color: var(--drawer-footer-bg);\n overflow-y: auto;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 4px 8px 4px 8px;\n display: flex;\n justify-content: space-between;\n border-top: 1px solid var(--drawer-footer-border);\n z-index: 1000;\n background-color: var(--base-bg-color);\n transform: translateY(3px);\n border-radius: 0 0 4px 4px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .button-container {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .ff-custom-footer {\n background-color: var(--drawer-footer-bg);\n padding: 4px 8px;\n}";
1027
+ var css_248z$1e = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-drawer-container .ff-overlay {\n position: fixed;\n inset: 0;\n background-color: var(--drawer-title-color);\n opacity: 0.5;\n z-index: 999;\n}\n.ff-drawer-container .child-drawer-overlay {\n z-index: 999;\n}\n.ff-drawer-container .ff-drawer {\n margin-bottom: 4px;\n position: fixed;\n right: 0;\n bottom: 0;\n top: 87px;\n background-color: var(--primary-button-text-color);\n z-index: 999;\n transform: translateX(100%);\n opacity: 0;\n}\n.ff-drawer-container .ff-drawer--open {\n transform: translateX(0);\n opacity: 1;\n}\n.ff-drawer-container .ff-drawer--small {\n width: 444px;\n}\n.ff-drawer-container .ff-drawer--medium {\n width: 666px;\n}\n.ff-drawer-container .ff-drawer--large {\n width: 888px;\n}\n.ff-drawer-container .ff-drawer--x-large {\n width: calc(100vw - 10px);\n}\n.ff-drawer-container .ff-drawer--open, .ff-drawer-container .ff-drawer--medium, .ff-drawer-container .ff-drawer--large, .ff-drawer-container .ff-drawer--x-large {\n transition: all 0.4s ease-in-out;\n border-radius: 5px;\n border: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header {\n padding: 4px 8px 4px 8px;\n display: flex;\n gap: 10px;\n border-bottom: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n font-weight: 600;\n color: var(--drawer-title-color);\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-close-icon {\n height: 16px;\n width: 16px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n height: 24px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-expand-collapse-button {\n cursor: pointer;\n background-color: var(--button-bg-color);\n outline: none;\n border: none;\n margin: 0;\n border: 1px solid transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-custom-header {\n background-color: var(--drawer-footer-bg);\n width: 100%;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-body {\n background-color: var(--drawer-footer-bg);\n overflow-y: auto;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 4px 8px 4px 8px;\n display: flex;\n justify-content: space-between;\n border-top: 1px solid var(--drawer-footer-border);\n z-index: 1000;\n background-color: var(--base-bg-color);\n transform: translateY(3px);\n border-radius: 0 0 4px 4px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .button-container {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .ff-custom-footer {\n background-color: var(--drawer-footer-bg);\n width: 100%;\n border-radius: 0 0 8px 8px;\n}";
1028
1028
  styleInject(css_248z$1e);
1029
1029
 
1030
1030
  function useEscapeKey(key) {
@@ -1099,7 +1099,8 @@ const Drawer = ({
1099
1099
  top,
1100
1100
  height,
1101
1101
  width,
1102
- right = 0
1102
+ right = 0,
1103
+ overflow
1103
1104
  }) => {
1104
1105
  const [isExpanded, setIsExpanded] = useState(false);
1105
1106
  const handleEsc = useEscapeKey('Escape');
@@ -1140,7 +1141,8 @@ const Drawer = ({
1140
1141
  top,
1141
1142
  height,
1142
1143
  width,
1143
- right
1144
+ right,
1145
+ overflow
1144
1146
  },
1145
1147
  children: [showHeader && jsx("div", {
1146
1148
  className: classNames('ff-drawer-header', {
@@ -7980,7 +7982,7 @@ function createFormControl(props = {}) {
7980
7982
  timer = setTimeout(callback, wait);
7981
7983
  };
7982
7984
  const _updateValid = async (shouldUpdateValid) => {
7983
- if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
7985
+ if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
7984
7986
  const isValid = _options.resolver
7985
7987
  ? isEmptyObject((await _executeSchema()).errors)
7986
7988
  : await executeBuiltInValidation(_fields, true);
@@ -7992,7 +7994,7 @@ function createFormControl(props = {}) {
7992
7994
  }
7993
7995
  };
7994
7996
  const _updateIsValidating = (names, isValidating) => {
7995
- if (!_options.disabled &&
7997
+ if (!props.disabled &&
7996
7998
  (_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
7997
7999
  (names || Array.from(_names.mount)).forEach((name) => {
7998
8000
  if (name) {
@@ -8008,7 +8010,7 @@ function createFormControl(props = {}) {
8008
8010
  }
8009
8011
  };
8010
8012
  const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
8011
- if (args && method && !_options.disabled) {
8013
+ if (args && method && !props.disabled) {
8012
8014
  _state.action = true;
8013
8015
  if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
8014
8016
  const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
@@ -8072,7 +8074,7 @@ function createFormControl(props = {}) {
8072
8074
  const output = {
8073
8075
  name,
8074
8076
  };
8075
- if (!_options.disabled) {
8077
+ if (!props.disabled) {
8076
8078
  const disabledField = !!(get$1(_fields, name) &&
8077
8079
  get$1(_fields, name)._f &&
8078
8080
  get$1(_fields, name)._f.disabled);
@@ -8208,7 +8210,7 @@ function createFormControl(props = {}) {
8208
8210
  }
8209
8211
  _names.unMount = new Set();
8210
8212
  };
8211
- const _getDirty = (name, data) => !_options.disabled &&
8213
+ const _getDirty = (name, data) => !props.disabled &&
8212
8214
  (name && data && set$1(_formValues, name, data),
8213
8215
  !deepEqual(getValues(), _defaultValues));
8214
8216
  const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
@@ -8524,7 +8526,7 @@ function createFormControl(props = {}) {
8524
8526
  };
8525
8527
  const register = (name, options = {}) => {
8526
8528
  let field = get$1(_fields, name);
8527
- const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
8529
+ const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
8528
8530
  set$1(_fields, name, {
8529
8531
  ...(field || {}),
8530
8532
  _f: {
@@ -8540,7 +8542,7 @@ function createFormControl(props = {}) {
8540
8542
  field,
8541
8543
  disabled: isBoolean(options.disabled)
8542
8544
  ? options.disabled
8543
- : _options.disabled,
8545
+ : props.disabled,
8544
8546
  name,
8545
8547
  value: options.value,
8546
8548
  });
@@ -8550,7 +8552,7 @@ function createFormControl(props = {}) {
8550
8552
  }
8551
8553
  return {
8552
8554
  ...(disabledIsDefined
8553
- ? { disabled: options.disabled || _options.disabled }
8555
+ ? { disabled: options.disabled || props.disabled }
8554
8556
  : {}),
8555
8557
  ...(_options.progressive
8556
8558
  ? {
@@ -8634,12 +8636,6 @@ function createFormControl(props = {}) {
8634
8636
  e.preventDefault && e.preventDefault();
8635
8637
  e.persist && e.persist();
8636
8638
  }
8637
- if (_options.disabled) {
8638
- if (onInvalid) {
8639
- await onInvalid({ ..._formState.errors }, e);
8640
- }
8641
- return;
8642
- }
8643
8639
  let fieldValues = cloneObject(_formValues);
8644
8640
  _subjects.state.next({
8645
8641
  isSubmitting: true,
@@ -8818,9 +8814,7 @@ function createFormControl(props = {}) {
8818
8814
  : fieldReference.ref;
8819
8815
  if (fieldRef.focus) {
8820
8816
  fieldRef.focus();
8821
- options.shouldSelect &&
8822
- isFunction$1(fieldRef.select) &&
8823
- fieldRef.select();
8817
+ options.shouldSelect && fieldRef.select();
8824
8818
  }
8825
8819
  }
8826
8820
  };
@@ -9021,6 +9015,11 @@ function useForm(props = {}) {
9021
9015
  values: control._getWatch(),
9022
9016
  });
9023
9017
  }, [props.shouldUnregister, control]);
9018
+ React__default.useEffect(() => {
9019
+ if (_formControl.current) {
9020
+ _formControl.current.watch = _formControl.current.watch.bind({});
9021
+ }
9022
+ }, [formState]);
9024
9023
  _formControl.current.formState = getProxyFormState(formState, control);
9025
9024
  return _formControl.current;
9026
9025
  }
@@ -23630,7 +23629,7 @@ const PieChart = ({
23630
23629
  });
23631
23630
  };
23632
23631
 
23633
- var css_248z$D = ".ff-app-header-main {\n display: flex;\n}\n.ff-app-header-main .ff-app-header {\n display: flex;\n flex-basis: 100%;\n justify-content: space-between;\n background-color: var(--brand-color);\n padding-left: 8px;\n height: 40px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n padding: 4px;\n height: 24px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--brand-color);\n transform: translateY(12px);\n border-radius: 20px;\n padding: 5px;\n z-index: 1000;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items {\n display: flex;\n align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n margin-left: 8px;\n padding: 7px;\n color: var(--ff-header-text-color);\n cursor: pointer;\n display: flex;\n position: relative;\n flex: 1 1 auto;\n overflow: hidden;\n transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;\n max-width: 100px; /* Initial max-width */\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n background: var(--ff-app-header-menu-border-bottom-color);\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n white-space: nowrap;\n align-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected {\n padding: 3px;\n background-color: var(--primary-icon-color);\n border-radius: 20px;\n flex-grow: 12; /* Increase size on hover */\n max-width: 550px;\n opacity: 1;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-nav-bar-item-label {\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n border-radius: 20px;\n padding: 4px 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n margin-right: 3px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n margin: 0;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n color: var(--ff-header-submenu-text-color);\n align-content: center;\n position: relative;\n white-space: nowrap;\n padding-left: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected {\n color: var(--ff-header-submenu-highlight-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 20%;\n width: 70%;\n height: 2px;\n border-radius: 4px;\n box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container {\n display: flex;\n align-items: center;\n overflow: hidden;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item {\n margin-right: 6px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container {\n display: inline;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container .ff-icon-container {\n padding: 2px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected {\n background: var(--brand-color);\n border-radius: 5px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected :hover {\n background: transparent;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected svg path {\n fill: var(--primary-button-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-quickmenu-container {\n animation: quickmenu-expand 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected) .ff-app-header-quickmenu-container {\n animation: quickmenu-collapse 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu {\n width: 40px;\n display: flex;\n justify-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg {\n cursor: pointer;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg path {\n fill: var(--primary-icon-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-content,\n.ff-app-header-main .ff-app-header .ff-app-header-right-content {\n height: 24px;\n padding: 8px;\n align-content: center;\n}\n\n@keyframes oscillate-border-width {\n 0% {\n width: 50%;\n left: 25%;\n }\n 50% {\n width: 70%;\n left: 15%;\n }\n 100% {\n width: 50%;\n left: 25%;\n }\n}\n@keyframes quickmenu-expand {\n from {\n max-height: 0;\n opacity: 0;\n }\n to {\n max-height: 500px; /* Ensure this value covers the full height of your quick menu */\n opacity: 1;\n }\n}\n@keyframes quickmenu-collapse {\n from {\n max-height: 500px;\n opacity: 1;\n }\n to {\n max-height: 0;\n opacity: 0;\n }\n}";
23632
+ var css_248z$D = ".ff-app-header-main {\n display: flex;\n}\n.ff-app-header-main .ff-app-header {\n display: flex;\n flex-basis: 100%;\n justify-content: space-between;\n background-color: var(--brand-color);\n padding-left: 8px;\n height: 40px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n padding: 4px;\n height: 24px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--brand-color);\n transform: translateY(12px);\n border-radius: 20px;\n padding: 5px;\n z-index: 1000;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items {\n display: flex;\n align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n margin-left: 8px;\n padding: 7px;\n color: var(--ff-header-text-color);\n cursor: pointer;\n display: flex;\n position: relative;\n flex: 1 1 auto;\n overflow: hidden;\n transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;\n max-width: 150px; /* Initial max-width */\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n background: var(--ff-app-header-menu-border-bottom-color);\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n white-space: nowrap;\n align-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected {\n padding: 3px;\n background-color: var(--primary-icon-color);\n border-radius: 20px;\n flex-grow: 12; /* Increase size on hover */\n max-width: 700px;\n opacity: 1;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-nav-bar-item-label {\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n border-radius: 20px;\n padding: 4px 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n margin-right: 3px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n margin: 0;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n color: var(--ff-header-submenu-text-color);\n align-content: center;\n position: relative;\n white-space: nowrap;\n padding-left: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected {\n color: var(--ff-header-submenu-highlight-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 20%;\n width: 70%;\n height: 2px;\n border-radius: 4px;\n box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container {\n display: flex;\n align-items: center;\n overflow: hidden;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item {\n margin-right: 6px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container {\n display: inline;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container .ff-icon-container {\n padding: 2px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected {\n background: var(--brand-color);\n border-radius: 5px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected :hover {\n background: transparent;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected svg path {\n fill: var(--primary-button-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-quickmenu-container {\n animation: quickmenu-expand 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected) .ff-app-header-quickmenu-container {\n animation: quickmenu-collapse 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu {\n width: 40px;\n display: flex;\n justify-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg {\n cursor: pointer;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg path {\n fill: var(--primary-icon-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-content,\n.ff-app-header-main .ff-app-header .ff-app-header-right-content {\n height: 24px;\n padding: 8px;\n align-content: center;\n}\n\n@keyframes oscillate-border-width {\n 0% {\n width: 50%;\n left: 25%;\n }\n 50% {\n width: 70%;\n left: 15%;\n }\n 100% {\n width: 50%;\n left: 25%;\n }\n}\n@keyframes quickmenu-expand {\n from {\n max-height: 0;\n opacity: 0;\n }\n to {\n max-height: 500px; /* Ensure this value covers the full height of your quick menu */\n opacity: 1;\n }\n}\n@keyframes quickmenu-collapse {\n from {\n max-height: 500px;\n opacity: 1;\n }\n to {\n max-height: 0;\n opacity: 0;\n }\n}";
23634
23633
  styleInject(css_248z$D);
23635
23634
 
23636
23635
  const AppHeader = ({
@@ -33562,7 +33561,7 @@ const StatusCard = ({
33562
33561
  });
33563
33562
  };
33564
33563
 
33565
- var css_248z$e = ".ff-variable-dropdown {\n height: 300px;\n display: flex;\n flex-direction: column;\n background-color: var(--variable-dropdown-bg);\n border: 1px solid var(--border-color);\n border-radius: 3px;\n z-index: 9999;\n overflow: hidden;\n overflow-y: auto;\n}\n.ff-variable-dropdown.absolute {\n position: absolute;\n}\n.ff-variable-dropdown.relative {\n position: relative;\n}\n\n.ff-variable-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px;\n cursor: pointer;\n}\n.ff-variable-option:hover {\n background-color: var(--hover-color);\n}";
33564
+ var css_248z$e = ".ff-variable-dropdown {\n height: 300px;\n display: flex;\n flex-direction: column;\n background-color: var(--variable-dropdown-bg);\n border: 1px solid var(--border-color);\n border-radius: 3px;\n z-index: 9999;\n overflow: hidden;\n overflow-y: auto;\n}\n.ff-variable-dropdown.absolute {\n position: absolute;\n top: 34px;\n}\n.ff-variable-dropdown.relative {\n position: relative;\n}\n\n.ff-variable-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px;\n cursor: pointer;\n}\n.ff-variable-option:hover {\n background-color: var(--hover-color);\n}";
33566
33565
  styleInject(css_248z$e);
33567
33566
 
33568
33567
  const VariableDropdown = ({
@@ -47748,7 +47747,7 @@ const ConditionalDropdown = ({
47748
47747
  filteredOptions: filteredOptions,
47749
47748
  onSelectVariable: handleDropdownClick
47750
47749
  }) : jsx(VariableDropdown, {
47751
- position: "relative",
47750
+ position: "absolute",
47752
47751
  width: dropdownWidth,
47753
47752
  optionsList: variableList,
47754
47753
  onSelectVariable: handleDropdownClick