@lax-wp/design-system 0.3.114 → 0.3.115

package/dist/components/forms/dynamic-data-input/DynamicDataInputField.d.ts

@@ -0,0 +1,118 @@
+import type { LabelType } from "../../data-display/label/Label";
+/**
+ * Risk details interface for risk analysis integration
+ */
+export interface RiskDetails {
+    color?: string;
+    description?: string;
+    hexBgColor?: string;
+    hexBorderColor?: string;
+    [key: string]: any;
+}
+/**
+ * Risk details card component props - generic to allow consumer-specific risk types
+ */
+export interface RiskDetailsCardProps<T = any> {
+    riskDetails: T;
+    maxWidth?: string;
+    showAllRisksSuggestions?: boolean;
+}
+/**
+ * Props for the DynamicDataModal component
+ */
+export interface DynamicDataModalProps {
+    isVisible: boolean;
+    onSelect: (data: string | number | readonly string[] | undefined) => void;
+    onClose: () => void;
+    dataKey: string;
+    dataSource: string;
+}
+/**
+ * Props for the DynamicDataInputField component
+ */
+export interface DynamicDataInputFieldProps {
+    /** Unique identifier for the input */
+    id: string;
+    /** Label text to display above the input */
+    label: string;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Color for the input text */
+    color?: string;
+    /** Current value of the input */
+    value: string | number | readonly string[] | undefined;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the required indicator shows as conditional (yellow instead of red) */
+    isRequiredConditional?: boolean;
+    /** Tags/labels to display next to the label */
+    tags?: (string | LabelType)[];
+    /** Error message to display below the input */
+    errorMessage?: string;
+    /** Default value for the input */
+    defaultValue?: string | number | readonly string[] | undefined;
+    /** Data source for dynamic data */
+    dataSource: string;
+    /** Data key for dynamic data */
+    dataKey: string;
+    /** Tooltip text for the help icon */
+    tooltip?: string;
+    /** Whether this is a GTN (Global Term Name) field */
+    isGTN?: boolean;
+    /** GTN field name for document integration */
+    gtnName?: string;
+    /** Whether the value was AI extracted */
+    isAiExtracted?: boolean;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Callback function called when value changes */
+    onChange: (value: string | number | readonly string[] | undefined) => void;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Whether this is a live field */
+    isLiveField?: boolean;
+    /** Whether to preserve original case in the label */
+    originalCase?: boolean;
+    /** Handler for adding GTN to document */
+    onAddGTNToDocument?: (keyValuePair: {
+        key: string;
+        value: string;
+    }) => void;
+    /** Risk details data */
+    riskDetails?: RiskDetails;
+    /** Whether risk analysis is open */
+    isRiskAnalysisOpen?: boolean;
+    /** Custom risk details card component */
+    RiskDetailsCard?: React.ComponentType<RiskDetailsCardProps<any>>;
+    /** Primary color shades for styling */
+    primaryColorShades?: Record<number, string>;
+    /** Whether recording is active (for pilot context) */
+    isRecording?: boolean;
+    /** Whether playback is active (for pilot context) */
+    isPlaying?: boolean;
+    /** Callback to set disable actions state */
+    setDisableActions?: (disabled: boolean) => void;
+    /** Toast function for deprecated field warning */
+    showDeprecatedFieldWarning?: () => void;
+    /** Dynamic data modal component */
+    DynamicDataModal?: React.ComponentType<DynamicDataModalProps>;
+}
+/**
+ * A highly customizable dynamic data input component with label, validation, and styling support.
+ * Features dynamic data modal integration, GTN support, risk analysis support,
+ * and comprehensive prop support for various use cases.
+ *
+ * @example
+ * ```tsx
+ * <DynamicDataInputField
+ *   id="dynamic-field"
+ *   label="Dynamic Field"
+ *   value={fieldValue}
+ *   onChange={(value) => setFieldValue(value)}
+ *   dataSource="sourceTable"
+ *   dataKey="fieldKey"
+ *   required
+ * />
+ * ```
+ */
+export declare const DynamicDataInputField: import("react").ForwardRefExoticComponent<DynamicDataInputFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/forms/field-options/FieldOptions.d.ts

@@ -0,0 +1,5 @@
+import { type TFieldOptionsProps } from './types';
+/**
+ * FieldOptions component for managing a list of field values with drag-and-drop sorting
+ */
+export declare const FieldOptions: (props: TFieldOptionsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/field-options/Header.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+import { type TFieldOptionsProps } from './types';
+type TProps = Pick<TFieldOptionsProps, 'value' | 'onOptionChange' | 'onSaveOption' | 'onDeleteAll' | 'required' | 'errorMessage'> & {
+    hasChoices: boolean;
+};
+export declare const Header: FC<TProps>;
+export {};

package/dist/components/forms/field-options/Icon.d.ts

@@ -0,0 +1,6 @@
+import { FC, SVGAttributes } from 'react';
+type IconProps = SVGAttributes<SVGSVGElement> & {
+    size?: string;
+};
+export declare const CloseIcon: FC<IconProps>;
+export {};

package/dist/components/forms/field-options/Item.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { TFieldOptionsProps } from './types';
+type TProps = Pick<TFieldOptionsProps, 'value' | 'onDeleteItem'> & {
+    index: number;
+};
+export declare const Item: FC<TProps>;
+export {};

package/dist/components/forms/field-options/index.d.ts

@@ -0,0 +1,2 @@
+export { FieldOptions } from './FieldOptions';
+export type { TFieldOptionsProps } from './types';

package/dist/components/forms/field-options/types.d.ts

@@ -0,0 +1,11 @@
+export type TFieldOptionsProps = {
+    value: string;
+    onSaveOption(): void;
+    onOptionChange(value: string): void;
+    onDeleteItem(index: number): void;
+    onChoicesUpdate(nextChoices: string[]): void;
+    onDeleteAll?(): void;
+    choices: string[];
+    required?: boolean;
+    errorMessage?: string;
+};

package/dist/components/forms/file-upload-dragger/FileUpload.d.ts

@@ -0,0 +1,83 @@
+import { FC } from 'react';
+/**
+ * Context interface for global agreement draggable functionality
+ */
+export interface GlobalAgreementDraggableContext {
+    isOpenedAnotherFileUpload?: boolean;
+    setIsOpenedAnotherFileUpload?: (value: boolean) => void;
+}
+/**
+ * File upload service interface
+ */
+export interface FileUploadService {
+    uploadFileToFileServer: (formData: FormData, queryParams: string) => Promise<{
+        fileUrl: string;
+        fileName: string;
+    }>;
+    deleteFileFromFileServer: (fileName: string, queryParams: string) => Promise<void>;
+}
+/**
+ * System messages interface
+ */
+export interface SystemMessages {
+    fileSizeLimit: (size: string, unit: string) => string;
+}
+export type FileUploadDraggerProps = {
+    /** Callback to receive the uploaded file */
+    getFile: (file: any, fileName?: string) => any;
+    /** Description text to display */
+    description?: string;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Whether the upload is disabled */
+    disabled?: boolean;
+    /** Default file to display */
+    defaultFile?: any;
+    /** Accepted file types */
+    acceptedFiles?: string;
+    /** Whether loading state is active */
+    isLoading?: boolean;
+    /** Convert file to base64 */
+    asBase64?: boolean;
+    /** Upload to file server */
+    toFileServer?: boolean;
+    /** Whether file is currently uploading */
+    fileUploading?: boolean;
+    /** Callback to set file uploading state */
+    setFileUploading?: (fileUploading: boolean) => void;
+    /** Upload to document server path */
+    uploadToDocServer?: boolean;
+    /** Unique identifier for the upload */
+    id?: string;
+    /** Allow multiple file uploads */
+    multiple?: boolean;
+    /** Get original file name */
+    getRealFileName?: boolean;
+    /** Callback when file is deleted */
+    onDelete?: () => void;
+    /** Hide the selected file display */
+    hideSelectedFile?: boolean;
+    /** Maximum file size in bytes */
+    maxSize?: number;
+    /** Toast function for notifications */
+    toast?: {
+        error: (message: string, options?: {
+            toastId: string;
+        }) => void;
+    };
+    /** File upload service */
+    fileUploadService?: FileUploadService;
+    /** System messages */
+    systemMessages?: SystemMessages;
+    /** Build query params function */
+    buildQueryParams?: (params: Record<string, string | null>) => string;
+    /** Get token function */
+    getToken?: () => string | null;
+    /** Context for global agreement draggable */
+    globalAgreementDraggableContext?: GlobalAgreementDraggableContext;
+    /** Custom click to upload text */
+    clickToUploadText?: string;
+    /** Custom drag and drop text */
+    dragAndDropText?: string;
+};
+export declare const FileUpload: FC<FileUploadDraggerProps>;

package/dist/components/forms/file-upload-dragger/icons.d.ts

@@ -0,0 +1,12 @@
+import { FC, SVGProps } from 'react';
+interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+    fill?: string;
+    size?: number;
+    className?: string;
+}
+export declare const TrashOutlineIcon: FC<IconProps>;
+export declare const DownloadIcon: FC<IconProps>;
+export declare const FilePdfIcon: FC<IconProps>;
+export declare const FileDescriptionIcon: FC<IconProps>;
+export declare const SpinnerIcon: FC<IconProps>;
+export {};

package/dist/components/forms/formula-input/FormulaInput.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+export interface FormulaInputProps {
+    /** Current value of the input */
+    value: string;
+    /** Callback when value changes */
+    onChange: (value: string) => void;
+    /** Callback when input receives focus */
+    onFocus?: () => void;
+    /** Callback when input loses focus */
+    onBlur?: () => void;
+    /** Label for the input field */
+    label?: string;
+    /** Unique identifier for the input */
+    id: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Tooltip text displayed next to the label */
+    tooltip?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Width of the input */
+    width?: string;
+    /** List of suggestions for autocomplete */
+    suggestions?: string[];
+    /** Whether to show the raw value instead of pills */
+    showRawValue?: boolean;
+}
+declare const _default: React.NamedExoticComponent<FormulaInputProps>;
+export default _default;

package/dist/components/forms/formula-input/index.d.ts

@@ -0,0 +1,3 @@
+export { default as FormulaInput } from './FormulaInput';
+export type { FormulaInputProps } from './FormulaInput';
+export { convertToPills, convertFromPills, getCursorPosition, setCursorPosition, getTextBeforeCursor, getCursorCoordinates, insertTextAtCursor, } from './utils';

package/dist/components/forms/formula-input/utils.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Converts {{variable}} syntax to styled pill marks
+ */
+export declare const convertToPills: (str: string) => string;
+/**
+ * Converts pill marks back to {{variable}} syntax
+ */
+export declare const convertFromPills: (str: string) => string;
+/**
+ * Gets the current cursor position in the contenteditable element
+ */
+export declare const getCursorPosition: () => number;
+/**
+ * Sets the cursor position in a contenteditable element
+ */
+export declare const setCursorPosition: (element: HTMLElement, position: number) => void;
+/**
+ * Gets the text content before the cursor, useful for detecting {{ trigger
+ */
+export declare const getTextBeforeCursor: () => string;
+/**
+ * Gets cursor coordinates for positioning the suggestion dropdown
+ */
+export declare const getCursorCoordinates: () => {
+    x: number;
+    y: number;
+};
+/**
+ * Inserts text at the current cursor position
+ */
+export declare const insertTextAtCursor: (text: string) => void;

package/dist/components/forms/icon-picker/IconPicker.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { type SvgIconOwnProps } from '@mui/material';
+export interface IconPickerContentProps {
+    selectedIcon: string | null;
+    onChange: (iconName: string | null) => void;
+    label?: string;
+    required?: boolean;
+    allowClear?: boolean;
+    disabled?: boolean;
+    errorMessage?: string;
+}
+interface IconRendererProps {
+    iconName: string;
+    sx?: SvgIconOwnProps['sx'];
+    className?: string;
+    isHovering?: boolean;
+}
+export declare const IconRenderer: ({ iconName, sx, className, isHovering }: IconRendererProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconPicker: React.LazyExoticComponent<(props: IconPickerContentProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/forms/input-field/InputField.d.ts

@@ -0,0 +1,62 @@
+import React from "react";
+/**
+ * Props for the InputField component
+ */
+export interface InputFieldProps {
+    /** Unique identifier for the input field */
+    id: string;
+    /** The current value of the input field */
+    value?: string;
+    /** Callback function called when the input value changes */
+    onChange: (value: string) => void;
+    /** Callback function called on key down events */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Error message to display below the input */
+    message?: string;
+    /** Success message to display below the input */
+    messageType?: "success" | "error" | "info" | "default";
+    /** Default value for the input field */
+    defaultValue?: string;
+    /** Whether the input field is disabled */
+    disabled?: boolean;
+    /** Maximum value for number inputs */
+    max?: number;
+    /** Minimum value for number inputs */
+    min?: number;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Label text for the input field */
+    label?: string;
+    /** Input type (text, email, password, number, etc.) */
+    type?: string;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Icon or element to display at the end of the input */
+    fieldSuffix?: React.ReactNode;
+    /** Additional CSS classes for the wrapper container */
+    wrapperClassNames?: string;
+    /** Additional CSS classes for the input element */
+    inputClassNames?: string;
+    /** Inline styles for the input element */
+    inputStyle?: React.CSSProperties;
+    /** Additional props to pass to the input element */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+}
+/**
+ * A highly customizable input field component with label, validation, and styling support.
+ *
+ * @example
+ * ```tsx
+ * <InputField
+ *   id="email"
+ *   label="Email Address"
+ *   type="email"
+ *   value={email}
+ *   onChange={setEmail}
+ *   placeholder="Enter your email"
+ *   required
+ *   errorMessage={emailError}
+ * />
+ * ```
+ */
+export declare const InputField: React.ForwardRefExoticComponent<InputFieldProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/forms/master-data-input/MasterDataInputField.d.ts

@@ -0,0 +1,135 @@
+import type { LabelType } from "../../data-display/label/Label";
+/**
+ * Risk details interface for risk analysis integration
+ */
+export interface RiskDetails {
+    color?: string;
+    description?: string;
+    hexBgColor?: string;
+    hexBorderColor?: string;
+    [key: string]: any;
+}
+/**
+ * Risk details card component props - generic to allow consumer-specific risk types
+ */
+export interface RiskDetailsCardProps<T = any> {
+    riskDetails: T;
+    maxWidth?: string;
+    showAllRisksSuggestions?: boolean;
+}
+/**
+ * Props for the MasterDataModal component
+ */
+export interface MasterDataModalProps {
+    isVisible: boolean;
+    onSelected?: (masterDataValue: any, masterDataRow?: any) => void;
+    onClose: () => void;
+    masterDataColumnName?: string;
+    masterDataFilters?: any;
+    masterDataName?: string;
+    masterDataId: string | null;
+    showFilters?: boolean;
+}
+/**
+ * Props for the MasterDataInputField component
+ */
+export interface MasterDataInputFieldProps {
+    /** Unique identifier for the input */
+    id: string;
+    /** Label text to display above the input */
+    label: string;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Current value of the input */
+    value: any;
+    /** Callback function called when value changes */
+    onChange: (value: any, masterDataRowValue?: any) => void;
+    /** Error message to display below the input */
+    errorMessage?: string;
+    /** Callback to set error message */
+    setErrorMessage: (message: string) => void;
+    /** Callback to remove error message */
+    removeErrorMessage: () => void;
+    /** Default value for the input */
+    defaultValue?: any;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the required indicator shows as conditional (yellow instead of red) */
+    isRequiredConditional?: boolean;
+    /** Name of the master data source */
+    masterDataName: string;
+    /** Column name in the master data */
+    masterDataColumnName: string;
+    /** Formula for computing master data value */
+    masterDataFormula?: string;
+    /** Filters for master data */
+    masterDataFilters?: any;
+    /** Tags/labels to display next to the label */
+    tags?: (string | LabelType)[];
+    /** Index for array fields */
+    index?: number;
+    /** Tooltip text for the help icon */
+    tooltip?: string;
+    /** Whether to preserve original case in the label */
+    originalCase?: boolean;
+    /** Color for the input text */
+    color?: string;
+    /** Whether this is a GTN (Global Term Name) field */
+    isGTN?: boolean;
+    /** GTN field name for document integration */
+    gtnName?: any;
+    /** Whether the value was AI extracted */
+    isAiExtracted?: boolean;
+    /** Reference data for formula computation */
+    reference?: any;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Whether this is a live field */
+    isLiveField?: boolean;
+    /** Callback function called when input loses focus */
+    onBlur?: () => void;
+    /** Handler for adding GTN to document */
+    onAddGTNToDocument?: (keyValuePair: {
+        key: string;
+        value: string;
+    }) => void;
+    /** Risk details data */
+    riskDetails?: RiskDetails;
+    /** Whether risk analysis is open */
+    isRiskAnalysisOpen?: boolean;
+    /** Custom risk details card component */
+    RiskDetailsCard?: React.ComponentType<RiskDetailsCardProps<any>>;
+    /** Primary color shades for styling */
+    primaryColorShades?: Record<number, string>;
+    /** Callback to set disable actions state */
+    setDisableActions?: (disabled: boolean) => void;
+    /** Toast function for deprecated field warning */
+    showDeprecatedFieldWarning?: () => void;
+    /** Master data modal component */
+    MasterDataModal?: React.ComponentType<MasterDataModalProps>;
+    /** Function to parse master data formula */
+    parseMasterDataFormula?: (formula: string, row: any) => string;
+}
+/**
+ * A highly customizable master data input component with label, validation, and styling support.
+ * Features master data modal integration, GTN support, risk analysis support,
+ * and comprehensive prop support for various use cases.
+ *
+ * @example
+ * ```tsx
+ * <MasterDataInputField
+ *   id="master-field"
+ *   label="Master Field"
+ *   value={fieldValue}
+ *   onChange={(value, rowValue) => setFieldValue(value)}
+ *   setErrorMessage={(msg) => setError(msg)}
+ *   removeErrorMessage={() => setError('')}
+ *   masterDataName="customers"
+ *   masterDataColumnName="name"
+ *   required
+ * />
+ * ```
+ */
+export declare const MasterDataInputField: import("react").ForwardRefExoticComponent<MasterDataInputFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/forms/md-input/MdInput.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Props for the MdInput component
+ */
+export interface MdInputProps {
+    /** Unique identifier for the markdown input */
+    id?: string;
+    /** Current markdown value */
+    value?: string;
+    /** Callback function called when the markdown value changes */
+    onChange: (value: string) => void;
+    /** Placeholder text for the textarea */
+    placeholder?: string;
+    /** Number of visible text lines for the textarea */
+    rows?: number;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes for the wrapper container */
+    className?: string;
+    /** Additional CSS classes for the textarea */
+    textareaClassName?: string;
+    /** Additional CSS classes for the preview container */
+    previewClassName?: string;
+    /** Initial mode (markdown or preview) */
+    defaultMode?: "markdown" | "preview";
+    /** Current mode (markdown or preview) */
+    mode?: "markdown" | "preview";
+    /** Label text to display above the input */
+    label?: string;
+    /** Whether the field is required */
+    required?: boolean;
+}
+/**
+ * A markdown input component with preview mode support.
+ * Features a toggle switch to switch between markdown editing and preview modes.
+ *
+ * @example
+ * ```tsx
+ * <MdInput
+ *   value={markdown}
+ *   onChange={setMarkdown}
+ *   placeholder="Enter markdown content..."
+ *   defaultMode="markdown"
+ * />
+ * ```
+ */
+export declare const MdInput: ({ id, value, onChange, placeholder, rows: minRows, disabled, className, textareaClassName, previewClassName, defaultMode, mode: modeProp, label, required, }: MdInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/multi-file-upload/MultiFileUpload.d.ts

@@ -0,0 +1,78 @@
+/**
+ * File upload result interface
+ */
+export interface FileUploadResult {
+    filename: string;
+    content?: string;
+    fileUrl?: string;
+    fileName?: string;
+}
+/**
+ * Union type for file change callback parameter
+ */
+export type FileChangeValue = File | File[] | FileUploadResult | FileUploadResult[] | string | string[] | null;
+/**
+ * Props for the MultiFileUpload component
+ */
+export interface MultiFileUploadProps {
+    /** Unique identifier for the upload component */
+    id?: string;
+    /** Callback function called when files are selected/uploaded */
+    onFileChange: (files: FileChangeValue, fileName?: string) => void;
+    /** Description text to display in the upload area */
+    description?: string;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Whether the upload is disabled */
+    disabled?: boolean;
+    /** Default file to display */
+    defaultFile?: File | null;
+    /** Accepted file types (e.g., ".pdf,.doc,.docx") */
+    acceptedFiles?: string;
+    /** Whether the component is in loading state */
+    isLoading?: boolean;
+    /** Whether to convert files to base64 */
+    asBase64?: boolean;
+    /** Whether to upload files to server */
+    toFileServer?: boolean;
+    /** Whether files are currently uploading */
+    fileUploading?: boolean;
+    /** Callback to set file uploading state */
+    setFileUploading?: (fileUploading: boolean | string | null) => void;
+    /** Whether to upload to document server */
+    uploadToDocServer?: boolean;
+    /** Whether to allow multiple file selection */
+    multiple?: boolean;
+    /** Whether to get real file name */
+    getRealFileName?: boolean;
+    /** Maximum file size in bytes (default: 50MB) */
+    maxSize?: number;
+    /** Custom upload handler function */
+    onUpload?: (files: File[]) => Promise<FileUploadResult[]>;
+    /** Custom delete handler function */
+    onDelete?: (fileData?: FileUploadResult) => Promise<void>;
+    /** Additional CSS classes for the wrapper */
+    wrapperClassName?: string;
+    /** Additional CSS classes for the upload area */
+    uploadClassName?: string;
+    /** Whether to show file size */
+    showFileSize?: boolean;
+    /** Custom file size formatter */
+    formatFileSize?: (size: number) => string;
+}
+/**
+ * A highly customizable multi-file upload component with drag-and-drop support.
+ * Features file validation, base64 conversion, server upload, and comprehensive styling options.
+ *
+ * @example
+ * ```tsx
+ * <MultiFileUpload
+ *   id="file-upload"
+ *   description="Upload your documents"
+ *   onFileChange={(files) => console.log(files)}
+ *   multiple
+ *   maxSize={10 * 1024 * 1024} // 10MB
+ * />
+ * ```
+ */
+export declare const MultiFileUpload: import("react").ForwardRefExoticComponent<MultiFileUploadProps & import("react").RefAttributes<HTMLDivElement>>;