pixel-react 1.7.9 → 1.8.0

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 (46) 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/AllProjectsDropdown/types.d.ts +2 -0
  13. package/lib/components/AttachImage/AttachImage.stories.d.ts +7 -0
  14. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +6 -0
  15. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +8 -0
  16. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +7 -0
  17. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +8 -0
  18. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +6 -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 +2 -0
  30. package/lib/index.esm.js +15 -18
  31. package/lib/index.esm.js.map +1 -1
  32. package/lib/index.js +15 -18
  33. package/lib/index.js.map +1 -1
  34. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
  35. package/package.json +2 -2
  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/AllProjectsDropdown/types.ts +2 -0
  45. package/src/components/AppHeader/AppHeader.scss +6 -2
  46. /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
+ }
@@ -2,6 +2,8 @@ export interface optionsType {
2
2
  label: string;
3
3
  value: string;
4
4
  iconName: string;
5
+ platform?: string;
6
+ appType?: string;
5
7
  }
6
8
  export interface AllProjectsDropdownProps {
7
9
  options: optionsType[];
@@ -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;
@@ -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
@@ -1995,6 +1995,8 @@ interface optionsType {
1995
1995
  label: string;
1996
1996
  value: string;
1997
1997
  iconName: string;
1998
+ platform?: string;
1999
+ appType?: string;
1998
2000
  }
1999
2001
  interface AllProjectsDropdownProps {
2000
2002
  options: optionsType[];
package/lib/index.esm.js CHANGED
@@ -8021,7 +8021,7 @@ function createFormControl(props = {}) {
8021
8021
  timer = setTimeout(callback, wait);
8022
8022
  };
8023
8023
  const _updateValid = async (shouldUpdateValid) => {
8024
- if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
8024
+ if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
8025
8025
  const isValid = _options.resolver
8026
8026
  ? isEmptyObject((await _executeSchema()).errors)
8027
8027
  : await executeBuiltInValidation(_fields, true);
@@ -8033,7 +8033,7 @@ function createFormControl(props = {}) {
8033
8033
  }
8034
8034
  };
8035
8035
  const _updateIsValidating = (names, isValidating) => {
8036
- if (!_options.disabled &&
8036
+ if (!props.disabled &&
8037
8037
  (_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
8038
8038
  (names || Array.from(_names.mount)).forEach((name) => {
8039
8039
  if (name) {
@@ -8049,7 +8049,7 @@ function createFormControl(props = {}) {
8049
8049
  }
8050
8050
  };
8051
8051
  const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
8052
- if (args && method && !_options.disabled) {
8052
+ if (args && method && !props.disabled) {
8053
8053
  _state.action = true;
8054
8054
  if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
8055
8055
  const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
@@ -8113,7 +8113,7 @@ function createFormControl(props = {}) {
8113
8113
  const output = {
8114
8114
  name,
8115
8115
  };
8116
- if (!_options.disabled) {
8116
+ if (!props.disabled) {
8117
8117
  const disabledField = !!(get$1(_fields, name) &&
8118
8118
  get$1(_fields, name)._f &&
8119
8119
  get$1(_fields, name)._f.disabled);
@@ -8249,7 +8249,7 @@ function createFormControl(props = {}) {
8249
8249
  }
8250
8250
  _names.unMount = new Set();
8251
8251
  };
8252
- const _getDirty = (name, data) => !_options.disabled &&
8252
+ const _getDirty = (name, data) => !props.disabled &&
8253
8253
  (name && data && set$1(_formValues, name, data),
8254
8254
  !deepEqual(getValues(), _defaultValues));
8255
8255
  const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
@@ -8565,7 +8565,7 @@ function createFormControl(props = {}) {
8565
8565
  };
8566
8566
  const register = (name, options = {}) => {
8567
8567
  let field = get$1(_fields, name);
8568
- const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
8568
+ const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
8569
8569
  set$1(_fields, name, {
8570
8570
  ...(field || {}),
8571
8571
  _f: {
@@ -8581,7 +8581,7 @@ function createFormControl(props = {}) {
8581
8581
  field,
8582
8582
  disabled: isBoolean(options.disabled)
8583
8583
  ? options.disabled
8584
- : _options.disabled,
8584
+ : props.disabled,
8585
8585
  name,
8586
8586
  value: options.value,
8587
8587
  });
@@ -8591,7 +8591,7 @@ function createFormControl(props = {}) {
8591
8591
  }
8592
8592
  return {
8593
8593
  ...(disabledIsDefined
8594
- ? { disabled: options.disabled || _options.disabled }
8594
+ ? { disabled: options.disabled || props.disabled }
8595
8595
  : {}),
8596
8596
  ...(_options.progressive
8597
8597
  ? {
@@ -8675,12 +8675,6 @@ function createFormControl(props = {}) {
8675
8675
  e.preventDefault && e.preventDefault();
8676
8676
  e.persist && e.persist();
8677
8677
  }
8678
- if (_options.disabled) {
8679
- if (onInvalid) {
8680
- await onInvalid({ ..._formState.errors }, e);
8681
- }
8682
- return;
8683
- }
8684
8678
  let fieldValues = cloneObject(_formValues);
8685
8679
  _subjects.state.next({
8686
8680
  isSubmitting: true,
@@ -8859,9 +8853,7 @@ function createFormControl(props = {}) {
8859
8853
  : fieldReference.ref;
8860
8854
  if (fieldRef.focus) {
8861
8855
  fieldRef.focus();
8862
- options.shouldSelect &&
8863
- isFunction$1(fieldRef.select) &&
8864
- fieldRef.select();
8856
+ options.shouldSelect && fieldRef.select();
8865
8857
  }
8866
8858
  }
8867
8859
  };
@@ -9062,6 +9054,11 @@ function useForm(props = {}) {
9062
9054
  values: control._getWatch(),
9063
9055
  });
9064
9056
  }, [props.shouldUnregister, control]);
9057
+ React__default.useEffect(() => {
9058
+ if (_formControl.current) {
9059
+ _formControl.current.watch = _formControl.current.watch.bind({});
9060
+ }
9061
+ }, [formState]);
9065
9062
  _formControl.current.formState = getProxyFormState(formState, control);
9066
9063
  return _formControl.current;
9067
9064
  }
@@ -23690,7 +23687,7 @@ const PieChart = ({
23690
23687
  });
23691
23688
  };
23692
23689
 
23693
- 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}";
23690
+ 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: 4px;\n padding-bottom: 16px;\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: 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-quickmenu-container .ff-app-header-nav-bar-quickmenu-item:last-child {\n margin: 0px;\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}";
23694
23691
  styleInject(css_248z$D);
23695
23692
 
23696
23693
  const AppHeader = ({