@festo-ui/react 10.0.1-dev.852 → 10.1.0

package/dist/forms/segment/segment-control/SegmentControl.js

@@ -0,0 +1,59 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef, useRef } from "react";
+import { IconWrapper } from "../../../components/icon-wrapper/IconWrapper.js";
+const SegmentControl = /*#__PURE__*/ forwardRef(({ label, checked, disabled, name, value, icon, onChange, id, className, iconOnly, ...props }, ref)=>{
+    const componentId = useRef(id ?? (Math.random() * Date.now()).toString().replace('.', '-'));
+    let viewMode = 'text';
+    if (icon) viewMode = iconOnly ? 'icon' : 'icon-text';
+    const handleChange = (event)=>{
+        if (onChange) onChange(value, event);
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("input", {
+                className: "fwe-segment-input",
+                type: "radio",
+                id: componentId.current,
+                name: name,
+                value: value,
+                checked: checked,
+                disabled: disabled,
+                onChange: (e)=>handleChange(e),
+                ...props
+            }),
+            /*#__PURE__*/ jsxs("label", {
+                className: classnames('fwe-segment-label', className),
+                htmlFor: componentId.current,
+                ref: ref,
+                children: [
+                    'icon' === viewMode && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "fwe-sr-only",
+                                children: label
+                            }),
+                            /*#__PURE__*/ jsx(IconWrapper, {
+                                icon: icon
+                            })
+                        ]
+                    }),
+                    'text' === viewMode && label,
+                    'icon-text' === viewMode && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(IconWrapper, {
+                                icon: icon
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "fwe-ml-xxs",
+                                children: label
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+});
+SegmentControl.displayName = 'SegmentControl';
+export { SegmentControl };

package/dist/forms/select/Select.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import { type Ref } from 'react';
+export interface SelectOption<T> {
+    readonly data: T;
+    readonly label: ReactNode;
+    readonly disabled?: boolean;
+}
+export interface SelectProps<T> extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'value' | 'defaultValue'> {
+    readonly value?: T;
+    readonly defaultValue?: T;
+    readonly name?: string;
+    readonly disabled?: boolean;
+    readonly required?: boolean;
+    readonly label?: string;
+    readonly options?: SelectOption<T>[];
+    readonly hint?: string;
+    readonly error?: string;
+    readonly placeholder?: string;
+    readonly onChange?: (value: T) => void;
+}
+declare function SelectComponent<T>({ defaultValue, value: controlled, label, options, onChange, disabled, name, id: idProp, hint, error, placeholder, className, ...props }: SelectProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare const Select: <T>(props: SelectProps<T> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReturnType<typeof SelectComponent>;
+export {};

package/dist/forms/select/Select.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/react";
+import classnames from "classnames";
+import { forwardRef, useMemo } from "react";
+import { useControlled } from "../../utils/useControlled.js";
+import { useId } from "../../utils/useId.js";
+function SelectComponent({ defaultValue = '', value: controlled, label, options = [], onChange, disabled, name, id: idProp, hint, error, placeholder, className, ...props }, ref) {
+    const id = useId(idProp);
+    const labelId = `${id}-label`;
+    const [value, setValue] = useControlled({
+        controlled,
+        default: defaultValue,
+        onChange
+    });
+    const selectedOption = useMemo(()=>options.find((option)=>option.data === value && !option.disabled), [
+        options,
+        value
+    ]);
+    function handleChange(option) {
+        if (!option || option.disabled) return;
+        setValue(option.data);
+    }
+    return /*#__PURE__*/ jsx(Listbox, {
+        value: selectedOption ?? null,
+        onChange: handleChange,
+        disabled: disabled,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: classnames(className, 'fwe-select-wrapper', {
+                'fwe-disabled': disabled
+            }),
+            ref: ref,
+            ...props,
+            children: [
+                /*#__PURE__*/ jsx(ListboxButton, {
+                    className: classnames('fwe-select', {
+                        'fwe-invalid': error
+                    }),
+                    id: id,
+                    "aria-labelledby": label ? labelId : void 0,
+                    disabled: disabled,
+                    children: selectedOption ? selectedOption.label : placeholder ?? ''
+                }),
+                /*#__PURE__*/ jsx("label", {
+                    className: "fwe-select-label",
+                    id: labelId,
+                    htmlFor: id,
+                    children: label || ''
+                }),
+                /*#__PURE__*/ jsx(ListboxOptions, {
+                    className: "fwe-options-container",
+                    as: "ul",
+                    portal: false,
+                    style: {
+                        minWidth: 'var(--button-width)'
+                    },
+                    anchor: {
+                        to: 'bottom start',
+                        gap: 12,
+                        padding: 8
+                    },
+                    children: options.map((option)=>/*#__PURE__*/ jsx(ListboxOption, {
+                            value: option,
+                            disabled: option.disabled,
+                            as: "li",
+                            className: ({ focus, selected, disabled: isDisabled })=>classnames('fwe-combobox-option', {
+                                    'fwe-selected': selected,
+                                    'fwe-focus': focus,
+                                    'fwe-disabled': isDisabled
+                                }),
+                            children: option.label
+                        }, String(option.data)))
+                }),
+                name && /*#__PURE__*/ jsx("input", {
+                    type: "hidden",
+                    name: name,
+                    value: String(value ?? ''),
+                    disabled: disabled
+                }),
+                hint && !error && /*#__PURE__*/ jsx("div", {
+                    className: "fwe-select-description",
+                    children: hint
+                }),
+                error && /*#__PURE__*/ jsx("div", {
+                    className: "fwe-select-invalid",
+                    children: error
+                })
+            ]
+        })
+    });
+}
+const Select = /*#__PURE__*/ forwardRef(SelectComponent);
+Select.displayName = 'Select';
+export { Select };

package/dist/forms/slider/Slider.css

@@ -0,0 +1,50 @@
+label.fwe-slider {
+  display: block;
+  position: relative;
+}
+
+label.fwe-slider .fr-slider-indicator {
+  background: var(--fwe-hero);
+  height: 2px;
+  position: absolute;
+  bottom: 22px;
+  left: 0;
+}
+
+label.fwe-slider .fr-slider-indicator.disabled {
+  background: var(--fwe-border);
+}
+
+label.fwe-slider.fr-slider-value {
+  height: 56px;
+}
+
+label.fwe-slider.fr-slider-value .fr-slider-indicator {
+  bottom: 38px;
+}
+
+label.fwe-slider.fr-slider-label {
+  height: 67px;
+}
+
+label.fwe-slider.fr-slider-label .fr-slider-indicator {
+  bottom: 22px;
+}
+
+label.fwe-slider.fr-slider-value-label {
+  height: 83px;
+}
+
+label.fwe-slider.fr-slider-value-label .fr-slider-indicator {
+  bottom: 38px;
+}
+
+label.fwe-slider .fr-slider-value {
+  color: var(--fwe-text);
+  font-size: var(--fwe-font-size-base);
+  user-select: none;
+  margin-bottom: 0;
+  position: absolute;
+  bottom: 0;
+}
+

package/dist/forms/slider/Slider.d.ts

@@ -0,0 +1,14 @@
+import './Slider.scss';
+import { type ComponentPropsWithoutRef } from 'react';
+export interface SliderProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'onChange' | 'value' | 'defaultValue' | 'min' | 'max' | 'step'> {
+    readonly min: number;
+    readonly max: number;
+    readonly step?: number;
+    readonly value: number;
+    readonly onChangeCommitted?: (value: number) => void;
+    readonly label?: string;
+    readonly showValue?: boolean;
+    readonly onChange?: (value: number, event: React.ChangeEvent<HTMLInputElement>) => void;
+    readonly widthOffset?: number;
+}
+export declare const Slider: (props: SliderProps & import("react").RefAttributes<HTMLLabelElement>) => React.ReactElement | null;

package/dist/forms/slider/Slider.js

@@ -0,0 +1,98 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./Slider.css";
+import classnames from "classnames";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { useForkRef } from "../../utils/useForkRef.js";
+import { useId } from "../../utils/useId.js";
+const Slider = /*#__PURE__*/ forwardRef(({ disabled = false, label, name, max, min, onChange, onChangeCommitted, step, value, showValue = true, className, id: idProps, widthOffset = 8, ...props }, ref)=>{
+    const id = useId(idProps);
+    const [innerValue, setInnerValue] = useState(value);
+    const [left, setLeft] = useState(null);
+    const [numberOffset, setNumberOffset] = useState(0);
+    const labelEl = useRef(null);
+    const handleRef = useForkRef(ref, labelEl);
+    const classes = classnames('fwe-slider', {
+        'fr-slider-value': !label && showValue
+    }, {
+        'fr-slider-label': label && !showValue
+    }, {
+        'fr-slider-value-label': label && showValue
+    }, className);
+    useEffect(()=>{
+        setInnerValue(value);
+    }, [
+        value
+    ]);
+    const updateValuePosition = useCallback(()=>{
+        if (labelEl.current) {
+            const { width } = labelEl.current.getBoundingClientRect();
+            const diff = max - min;
+            setLeft((innerValue - min) / diff * (width - widthOffset));
+            setNumberOffset(8 - 6 * innerValue.toString().length);
+        }
+    }, [
+        innerValue,
+        max,
+        min,
+        widthOffset
+    ]);
+    const handleAfterChange = ()=>{
+        if (onChangeCommitted) onChangeCommitted(innerValue);
+    };
+    const handleChange = (e)=>{
+        const newValue = Number.parseFloat(e.target.value);
+        setInnerValue(newValue);
+        if (onChange) onChange(newValue, e);
+    };
+    useEffect(()=>{
+        function handleResize() {
+            updateValuePosition();
+        }
+        window.addEventListener('resize', handleResize);
+        handleResize();
+        return ()=>window.removeEventListener('resize', handleResize);
+    }, [
+        updateValuePosition
+    ]);
+    return /*#__PURE__*/ jsxs("label", {
+        ref: handleRef,
+        className: classes,
+        htmlFor: id,
+        children: [
+            label && /*#__PURE__*/ jsx("span", {
+                children: label
+            }),
+            /*#__PURE__*/ jsx("input", {
+                id: id,
+                className: "fwe-slider-input",
+                type: "range",
+                name: name,
+                disabled: disabled,
+                min: min,
+                max: max,
+                step: step,
+                onChange: handleChange,
+                value: innerValue,
+                onKeyUp: handleAfterChange,
+                onMouseUp: handleAfterChange,
+                onTouchEnd: handleAfterChange,
+                ...props
+            }),
+            showValue && null !== left && /*#__PURE__*/ jsx("span", {
+                className: "fr-slider-value",
+                style: {
+                    left: `${left + numberOffset}px`
+                },
+                children: innerValue
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: `fr-slider-indicator${disabled ? ' disabled' : ''}`,
+                style: {
+                    width: `${left}px`
+                }
+            })
+        ]
+    });
+});
+Slider.displayName = 'Slider';
+export { Slider };

package/dist/forms/switch/Switch.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export interface SwitchProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'onChange' | 'value' | 'defaultValue' | 'checked'> {
+    readonly labelPosition?: 'before' | 'after' | 'below';
+    readonly large?: boolean;
+    readonly title: string;
+    readonly value?: boolean;
+    readonly defaultValue?: boolean;
+    readonly onChange?: (value: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const Switch: (props: SwitchProps & import("react").RefAttributes<HTMLLabelElement>) => React.ReactElement | null;

package/dist/forms/switch/Switch.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef } from "react";
+import { useControlled } from "../../utils/useControlled.js";
+import { useId } from "../../utils/useId.js";
+const Switch = /*#__PURE__*/ forwardRef(({ labelPosition = 'after', large = false, title, name, required = false, value, defaultValue, disabled = false, onChange, className, id: idProps, ...props }, ref)=>{
+    const id = useId(idProps);
+    const labelClassName = classnames('fwe-switch', {
+        [`fwe-switch-label-${labelPosition}`]: true
+    }, {
+        'fwe-switch-lg': large
+    }, className);
+    const [currentValue, setCurrentValue] = useControlled({
+        controlled: value,
+        default: defaultValue
+    });
+    const handleChange = (event)=>{
+        const newValue = !currentValue;
+        setCurrentValue(newValue);
+        if (onChange) onChange(newValue, event);
+    };
+    return /*#__PURE__*/ jsxs("label", {
+        className: labelClassName,
+        htmlFor: id,
+        ref: ref,
+        children: [
+            /*#__PURE__*/ jsx("input", {
+                type: "checkbox",
+                name: name,
+                required: required,
+                disabled: disabled,
+                checked: currentValue,
+                onChange: handleChange,
+                id: id,
+                ...props
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "fwe-switch-track"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "fwe-switch-label-content",
+                children: title
+            })
+        ]
+    });
+});
+Switch.displayName = 'Switch';
+export { Switch };

package/dist/forms/text-area/TextArea.css

@@ -0,0 +1,14 @@
+label.fwe-input-text .fwe-input-text-count {
+  line-height: var(--fwe-line-height-base);
+  color: var(--fwe-text-disabled);
+  font-size: var(--fwe-font-size-small);
+  display: block;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+label.fwe-input-text .fr-textarea {
+  overflow: visible;
+}
+

package/dist/forms/text-area/TextArea.d.ts

@@ -0,0 +1,13 @@
+import './TextArea.scss';
+import React, { type ComponentPropsWithoutRef } from 'react';
+export interface TextAreaProps extends Omit<ComponentPropsWithoutRef<'textarea'>, 'onChange' | 'value' | 'defaultValue'> {
+    readonly value?: string;
+    readonly defaultValue?: string;
+    readonly onChange?: (value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    readonly label: string;
+    readonly hint?: string;
+    readonly error?: string;
+    readonly rows?: number;
+    readonly id?: string;
+}
+export declare const TextArea: (props: TextAreaProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null;

package/dist/forms/text-area/TextArea.js

@@ -0,0 +1,116 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./TextArea.css";
+import classnames from "classnames";
+import react, { forwardRef, useEffect, useLayoutEffect, useState } from "react";
+import { useId } from "../../utils/useId.js";
+const TextArea = /*#__PURE__*/ forwardRef(({ onChange, label, error, hint, value, defaultValue, rows, maxLength, className, id: idProps, ...props }, ref)=>{
+    const controlled = void 0 !== value;
+    const [innerValue, setInnerValue] = useState(controlled ? value : defaultValue ?? '');
+    const id = useId(idProps);
+    const hintClasses = classnames('fwe-input-text-info');
+    const shadowRef = react.useRef(null);
+    const textareaRef = react.useRef(null);
+    const [height, setHeight] = useState(void 0);
+    const resizeToContent = react.useCallback(()=>{
+        const input = textareaRef.current;
+        const shadow = shadowRef.current;
+        const minRows = 2;
+        if (shadow && input) {
+            shadow.value = input.value || innerValue || 'x';
+            shadow.style.width = input.clientWidth.toString();
+            const newHeight = Math.max(24 * minRows, shadow.scrollHeight);
+            setHeight(newHeight + 4 + 4 + 1);
+        }
+    }, [
+        innerValue
+    ]);
+    useEffect(()=>{
+        if (controlled) setInnerValue(value);
+    }, [
+        value,
+        controlled
+    ]);
+    useLayoutEffect(()=>{
+        if (rows) return;
+        resizeToContent();
+    }, [
+        rows,
+        resizeToContent
+    ]);
+    useEffect(()=>{
+        if (rows) return;
+        const handleResize = ()=>resizeToContent();
+        window.addEventListener('resize', handleResize);
+        return ()=>{
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [
+        rows,
+        resizeToContent
+    ]);
+    function handleChange(event) {
+        if (!controlled) setInnerValue(event.target.value);
+        if (!rows) resizeToContent();
+        if (onChange) onChange(event.target.value, event);
+    }
+    return /*#__PURE__*/ jsxs("label", {
+        className: classnames('fwe-input-text', className),
+        htmlFor: id,
+        ref: ref,
+        children: [
+            /*#__PURE__*/ jsx("textarea", {
+                style: {
+                    ...!rows && {
+                        height,
+                        overflow: 'hidden'
+                    }
+                },
+                ref: textareaRef,
+                className: classnames('fr-textarea', `fwe-row-${rows}`),
+                autoComplete: "off",
+                onChange: handleChange,
+                maxLength: maxLength,
+                defaultValue: defaultValue,
+                value: value,
+                id: id,
+                ...props
+            }),
+            /*#__PURE__*/ jsx("textarea", {
+                style: {
+                    visibility: 'hidden',
+                    position: 'absolute',
+                    overflow: 'hidden',
+                    height: 0,
+                    top: 0,
+                    left: 0,
+                    transform: 'translateZ(0)',
+                    padding: '0'
+                },
+                ref: shadowRef,
+                readOnly: true
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "fwe-input-text-label",
+                children: label
+            }),
+            hint && /*#__PURE__*/ jsx("span", {
+                className: hintClasses,
+                children: hint
+            }),
+            void 0 !== error && /*#__PURE__*/ jsx("span", {
+                className: "fwe-input-text-invalid",
+                children: error
+            }),
+            !!maxLength && void 0 !== innerValue && /*#__PURE__*/ jsxs("span", {
+                className: "fwe-input-text-count",
+                children: [
+                    innerValue.length,
+                    " /",
+                    maxLength
+                ]
+            })
+        ]
+    });
+});
+TextArea.displayName = 'TextArea';
+export { TextArea };

package/dist/forms/text-input/TextInput.css

@@ -0,0 +1,31 @@
+label.fwe-input-text input[type="text"][aria-invalid="true"], label.fwe-input-text input[type="password"][aria-invalid="true"], label.fwe-input-text input[type="date"][aria-invalid="true"], label.fwe-input-text input[type="datetime-local"][aria-invalid="true"], label.fwe-input-text input[type="number"][aria-invalid="true"] {
+  box-shadow: none;
+  outline: none;
+  border-bottom: 1px solid var(--fwe-red) !important;
+}
+
+label.fwe-input-text input[type="text"][aria-invalid="true"]:focus, label.fwe-input-text input[type="password"][aria-invalid="true"]:focus, label.fwe-input-text input[type="date"][aria-invalid="true"]:focus, label.fwe-input-text input[type="datetime-local"][aria-invalid="true"]:focus, label.fwe-input-text input[type="number"][aria-invalid="true"]:focus {
+  border-bottom: 1px solid var(--fwe-red) !important;
+}
+
+label.fwe-input-text input[type="text"][aria-invalid="true"]:disabled, label.fwe-input-text input[type="password"][aria-invalid="true"]:disabled, label.fwe-input-text input[type="date"][aria-invalid="true"]:disabled, label.fwe-input-text input[type="datetime-local"][aria-invalid="true"]:disabled, label.fwe-input-text input[type="number"][aria-invalid="true"]:disabled {
+  border-bottom: 1px solid var(--fwe-control-disabled) !important;
+}
+
+label.fwe-input-text input[type="text"][aria-invalid="true"]:disabled ~ .fwe-input-text-label, label.fwe-input-text input[type="text"][aria-invalid="true"]:disabled ~ .fwe-input-text-invalid, label.fwe-input-text input[type="text"][aria-invalid="true"]:disabled ~ .fwe-input-text-info, label.fwe-input-text input[type="password"][aria-invalid="true"]:disabled ~ .fwe-input-text-label, label.fwe-input-text input[type="password"][aria-invalid="true"]:disabled ~ .fwe-input-text-invalid, label.fwe-input-text input[type="password"][aria-invalid="true"]:disabled ~ .fwe-input-text-info, label.fwe-input-text input[type="date"][aria-invalid="true"]:disabled ~ .fwe-input-text-label, label.fwe-input-text input[type="date"][aria-invalid="true"]:disabled ~ .fwe-input-text-invalid, label.fwe-input-text input[type="date"][aria-invalid="true"]:disabled ~ .fwe-input-text-info, label.fwe-input-text input[type="datetime-local"][aria-invalid="true"]:disabled ~ .fwe-input-text-label, label.fwe-input-text input[type="datetime-local"][aria-invalid="true"]:disabled ~ .fwe-input-text-invalid, label.fwe-input-text input[type="datetime-local"][aria-invalid="true"]:disabled ~ .fwe-input-text-info, label.fwe-input-text input[type="number"][aria-invalid="true"]:disabled ~ .fwe-input-text-label, label.fwe-input-text input[type="number"][aria-invalid="true"]:disabled ~ .fwe-input-text-invalid, label.fwe-input-text input[type="number"][aria-invalid="true"]:disabled ~ .fwe-input-text-info {
+  color: var(--fwe-text-disabled);
+}
+
+label.fwe-input-text input[type="text"][aria-invalid="true"] ~ .fwe-input-text-info, label.fwe-input-text input[type="password"][aria-invalid="true"] ~ .fwe-input-text-info, label.fwe-input-text input[type="date"][aria-invalid="true"] ~ .fwe-input-text-info, label.fwe-input-text input[type="datetime-local"][aria-invalid="true"] ~ .fwe-input-text-info, label.fwe-input-text input[type="number"][aria-invalid="true"] ~ .fwe-input-text-info {
+  display: none;
+}
+
+label.fwe-input-text input[type="text"][aria-invalid="true"] ~ .fwe-input-text-invalid, label.fwe-input-text input[type="password"][aria-invalid="true"] ~ .fwe-input-text-invalid, label.fwe-input-text input[type="date"][aria-invalid="true"] ~ .fwe-input-text-invalid, label.fwe-input-text input[type="datetime-local"][aria-invalid="true"] ~ .fwe-input-text-invalid, label.fwe-input-text input[type="number"][aria-invalid="true"] ~ .fwe-input-text-invalid {
+  display: block;
+}
+
+label.fwe-input-text:has(input:disabled) {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+

package/dist/forms/text-input/TextInput.d.ts

@@ -0,0 +1,13 @@
+import './TextInput.scss';
+import React, { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export interface TextInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'onChange'> {
+    readonly?: boolean;
+    value?: string;
+    defaultValue?: string;
+    label?: string;
+    hint?: string;
+    error?: string;
+    icon?: ReactNode;
+    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const TextInput: (props: TextInputProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null;