zcomponents-ui 1.2.4 → 1.4.0

package/dist/react-hook-form.d.ts

@@ -1,265 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { FieldValues, Control, Path, RegisterOptions } from 'react-hook-form';
-import { ReactElement, FocusEventHandler, MouseEventHandler, RefObject, ReactNode, Ref, KeyboardEventHandler, ChangeEventHandler } from 'react';
-
-type ZDropOption = string | number | {
-    [key: string]: any;
-};
-type ZDropSingleValue = ZDropOption | null | undefined;
-type ZDropMultipleValue = ZDropOption[];
-type ZDropValue = ZDropSingleValue | ZDropMultipleValue;
-type OptionsRef = {
-    current: (HTMLLIElement | null)[];
-};
-type ValueRenderer = ({ option, onRemove, }: {
-    option: ZDropOption;
-    onRemove: MouseEventHandler;
-}) => ReactElement;
-type OptionRenderer = (option: ZDropOption, isSelected: boolean, currentSearchedValue: string | undefined) => ReactElement;
-type ExpandToggleRenderer = (isListVisible: boolean) => ReactElement;
-type InputOptionRemove = (e: React.MouseEvent | React.KeyboardEvent, option: ZDropOption) => void;
-type Clear = "always" | "whenChanged" | "whenSearched" | "none";
-interface InputStyleClasses {
-    input?: string;
-    inputValue?: string;
-    inputMultipleValue?: string;
-    inputMultipleSearch?: string;
-}
-interface ToggleStyleClasses {
-    expandToggle?: string;
-    expandToggleIcon?: string;
-}
-interface ListStyleClasses {
-    list?: string;
-    listItem?: string;
-    noData?: string;
-}
-interface StyleClasses extends InputStyleClasses, ToggleStyleClasses, ListStyleClasses {
-    container?: string;
-    label?: string;
-    inputField?: string;
-    clearButton?: string;
-    removeButton?: string;
-}
-type SearchFilter = ({ options, currentValue, labelKey, }: {
-    options: ZDropOption[];
-    currentValue: string;
-    labelKey: string;
-}) => ZDropOption[];
-interface ZDropBaseProps {
-    name: string;
-    options?: ZDropOption[];
-    value?: ZDropValue;
-    valueKey?: string;
-    label?: string | ReactElement;
-    labelKey?: string;
-    placeholder?: string;
-    isMultiple?: boolean;
-    isDisabled?: boolean;
-    isSearchable?: boolean;
-    clear?: Clear;
-    searchFilterDelay?: number;
-    searchFilter?: SearchFilter;
-    shouldReturnObjectOnChange?: boolean;
-    onChange?: Function;
-    onBlur?: FocusEventHandler<HTMLDivElement>;
-    onClear?: Function;
-    valueRenderer?: ValueRenderer;
-    optionRenderer?: OptionRenderer;
-    expandToggleRenderer?: ExpandToggleRenderer;
-    clearIcon?: ReactElement;
-    noDataContent?: string | ReactElement;
-    isAutoHeightEnabled?: boolean;
-    autoHeightPosition?: "top" | "bottom";
-    listMaxHeightLimiter?: number;
-    styleClasses?: StyleClasses;
-}
-interface ZDropWithReferenceElementProps extends ZDropBaseProps {
-    referenceElementClassName?: string;
-    positionToReferenceElement?: "top" | "bottom";
-    isAutoHeightEnabled?: never;
-    autoHeightPosition?: never;
-}
-interface ZDropWithAutoHeightProps extends ZDropBaseProps {
-    referenceElementClassName?: never;
-    positionToReferenceElement?: never;
-    isAutoHeightEnabled?: true;
-    autoHeightPosition?: "top" | "bottom";
-}
-type ZDropProps = ZDropWithReferenceElementProps | ZDropWithAutoHeightProps;
-interface ZDropLabelProps {
-    name?: string;
-    label?: string | ReactElement;
-    className?: string;
-}
-interface ZDropListAutoHeightWrapperProps {
-    containerRef: RefObject<HTMLDivElement | null>;
-    position?: "top" | "bottom";
-    children: ReactNode;
-}
-interface ZDropListWrapperProps {
-    referenceElementClassName: string;
-    positionToReferenceElement?: "top" | "bottom";
-    listMaxHeightLimiter?: number;
-    children: ReactNode;
-}
-interface ZDropListProps {
-    options: ZDropOption[];
-    selectedValue: ZDropValue;
-    valueKey: string;
-    labelKey: string;
-    optionsRef: OptionsRef;
-    optionRenderer?: OptionRenderer;
-    onOptionClick: Function;
-    onOptionKeyDown: Function;
-    noDataContent?: string | ReactElement;
-    currentSearchedValue?: string;
-    listStyleClasses?: ListStyleClasses;
-    isListWrapperEnabled?: boolean;
-    isAutoHeightEnabled?: boolean;
-}
-interface ZDropListItemProps {
-    option: ZDropOption;
-    index: number;
-    children?: ReactElement;
-    labelKey?: string;
-    innerRef: Ref<HTMLLIElement | null>;
-    onOptionClick: Function;
-    onOptionKeyDown: Function;
-    className?: string;
-    optionClassName?: string;
-}
-interface ZDropListNoDataProps {
-    noDataContent?: string | ReactElement;
-    className?: string;
-}
-interface ZDropListVisibilityToggleProps {
-    expandToggleRenderer?: ExpandToggleRenderer;
-    onClick: MouseEventHandler<HTMLSpanElement>;
-    isListVisible: boolean;
-    toggleStyleClasses?: ToggleStyleClasses;
-}
-interface ZDropClearButtonProps {
-    hasValueChanged: boolean;
-    currentSearchedValue: string;
-    onInputClear: Function;
-    isListVisible: boolean;
-    isClearableOnlyWhenChange: boolean;
-    isClearableOnlyWhenSearch: boolean;
-    className?: string;
-    clearIcon?: ReactElement;
-}
-interface ZDropInputProps {
-    name: string;
-    options: ZDropOption[];
-    selectedValue: ZDropValue;
-    currentSearchedValue?: string;
-    setCurrentSearchedValue?: Function;
-    valueKey: string;
-    labelKey: string;
-    placeholder?: string;
-    isMultiple: boolean;
-    isDisabled: boolean;
-    isSearchable: boolean;
-    isListVisible: boolean;
-    setIsListVisible: Function;
-    isInputItemVisible: boolean;
-    valueRenderer?: ValueRenderer;
-    inputRef: RefObject<HTMLInputElement | null>;
-    inputRefMultipleValueRenderer: RefObject<HTMLInputElement | null>;
-    inputRefSingleValueRenderer: RefObject<HTMLInputElement | null>;
-    onInputClick: MouseEventHandler;
-    onInputItemClick: MouseEventHandler;
-    onInputKeyDown: KeyboardEventHandler;
-    onInputChange: ChangeEventHandler;
-    onInputOptionRemove: InputOptionRemove;
-    inputStyleClasses?: InputStyleClasses;
-}
-interface ZDropSingleInputProps {
-    name: string;
-    options: ZDropOption[];
-    selectedValue: ZDropSingleValue;
-    currentSearchedValue?: string;
-    setCurrentSearchedValue?: Function;
-    valueKey: string;
-    labelKey: string;
-    placeholder?: string;
-    isListVisible: boolean;
-    isDisabled?: boolean;
-    isSearchable?: boolean;
-    valueRenderer?: ValueRenderer;
-    inputRef: RefObject<HTMLInputElement | null>;
-    inputRefSingleValueRenderer: RefObject<HTMLInputElement | null>;
-    isInputItemVisible?: boolean;
-    onInputClick: MouseEventHandler;
-    onInputItemClick: MouseEventHandler;
-    onInputKeyDown: KeyboardEventHandler;
-    onInputChange: ChangeEventHandler;
-    onInputOptionRemove: InputOptionRemove;
-    inputClassName?: string;
-    inputValueClassName?: string;
-}
-interface ZDropSingleInputValueRendererProps {
-    name: string;
-    selectedValue: ZDropSingleValue;
-    selectedOption?: ZDropOption;
-    isSearchable: boolean;
-    valueRenderer: ValueRenderer;
-    inputValue: string | number;
-    isListVisible: boolean;
-    placeholder?: string;
-    inputRefSingleValueRenderer?: RefObject<HTMLInputElement | null>;
-    isInputItemVisible?: boolean;
-    onChange: ChangeEventHandler<HTMLInputElement>;
-    onInputItemClick: MouseEventHandler<HTMLDivElement>;
-    onInputOptionRemove: InputOptionRemove;
-    inputValueClassName?: string;
-}
-interface ZDropMultipleInputProps {
-    isListVisible: boolean;
-    setIsListVisible: Function;
-    name: string;
-    selectedValue: ZDropMultipleValue;
-    valueKey: string;
-    labelKey: string;
-    placeholder?: string;
-    isDisabled?: boolean;
-    isSearchable?: boolean;
-    currentSearchedValue?: string;
-    valueRenderer?: ValueRenderer;
-    inputRefMultipleValueRenderer: RefObject<HTMLInputElement | null>;
-    onInputClick: MouseEventHandler;
-    onInputKeyDown: KeyboardEventHandler;
-    onInputChange: ChangeEventHandler;
-    onInputOptionRemove: InputOptionRemove;
-    inputClassName?: string;
-    inputMultipleValueClassName?: string;
-    inputMultipleSearchClassName?: string;
-}
-interface ZDropMultipleInputItemProps {
-    option: ZDropOption;
-    labelType: string;
-    valueRenderer?: ValueRenderer;
-    onInputOptionRemove: InputOptionRemove;
-    inputMultipleValueClassName?: string;
-    isDisabled?: boolean;
-}
-interface ZDropDefaultSearchFilter {
-    options: ZDropOption[];
-    currentValue: string;
-    labelKey: string;
-}
-
-type ZDropFieldProps<TFieldValues extends FieldValues = FieldValues> = Omit<ZDropProps, "value" | "onChange" | "name"> & {
-    control: Control<TFieldValues>;
-    name: Path<TFieldValues>;
-    rules?: RegisterOptions<TFieldValues, Path<TFieldValues>>;
-    onChangeTransform?: (zDropValue: unknown) => unknown;
-    valueSelector?: (fieldValue: unknown) => unknown;
-    errorClassName?: string;
-    errorRenderer?: (message: string) => React.ReactNode;
-};
-declare function ZDropField<TFieldValues extends FieldValues = FieldValues>(props: ZDropFieldProps<TFieldValues>): react_jsx_runtime.JSX.Element;
-
-export { ZDropField };
-export type { Clear, ExpandToggleRenderer, InputOptionRemove, InputStyleClasses, ListStyleClasses, OptionRenderer, OptionsRef, SearchFilter, StyleClasses, ToggleStyleClasses, ValueRenderer, ZDropBaseProps, ZDropClearButtonProps, ZDropDefaultSearchFilter, ZDropInputProps, ZDropLabelProps, ZDropListAutoHeightWrapperProps, ZDropListItemProps, ZDropListNoDataProps, ZDropListProps, ZDropListVisibilityToggleProps, ZDropListWrapperProps, ZDropMultipleInputItemProps, ZDropMultipleInputProps, ZDropMultipleValue, ZDropOption, ZDropProps, ZDropSingleInputProps, ZDropSingleInputValueRendererProps, ZDropSingleValue, ZDropValue, ZDropWithAutoHeightProps, ZDropWithReferenceElementProps };
+export { C as Clear, E as ExpandToggleRenderer, I as InputOptionRemove, h as InputStyleClasses, L as ListStyleClasses, g as OptionRenderer, O as OptionsRef, S as SearchFilter, T as ToggleStyleClasses, V as ValueRenderer, j as ZDropBaseProps, t as ZDropClearButtonProps, z as ZDropDefaultSearchFilter, a as ZDropField, u as ZDropInputProps, m as ZDropLabelProps, n as ZDropListAutoHeightWrapperProps, q as ZDropListItemProps, r as ZDropListNoDataProps, p as ZDropListProps, s as ZDropListVisibilityToggleProps, o as ZDropListWrapperProps, y as ZDropMultipleInputItemProps, x as ZDropMultipleInputProps, e as ZDropMultipleValue, c as ZDropOption, Z as ZDropProps, v as ZDropSingleInputProps, w as ZDropSingleInputValueRendererProps, d as ZDropSingleValue, i as ZDropStyleClasses, f as ZDropValue, l as ZDropWithAutoHeightProps, k as ZDropWithReferenceElementProps } from './integrations-react-hook-form.d-ChOcioDB.js';
+import 'react/jsx-runtime';
+import 'react-hook-form';
+import 'react';

package/dist/react-hook-form.esm.js

@@ -1,4 +1,4 @@
-export { Z as ZDropField } from './index-DC_KVC71.js';
+export { Z as ZDropField } from './index-DJALegom.js';
 import 'react/jsx-runtime';
 import 'react-hook-form';
 import 'react';

package/dist/types/components/ZDrop/integrations/react-hook-form/ZDropField/index.d.ts

@@ -1,13 +1,4 @@
-import { Control, FieldValues, Path, type RegisterOptions } from "react-hook-form";
-import type { ZDropProps } from "../../../types/zDropTypes";
-export type ZDropFieldProps<TFieldValues extends FieldValues = FieldValues> = Omit<ZDropProps, "value" | "onChange" | "name"> & {
-    control: Control<TFieldValues>;
-    name: Path<TFieldValues>;
-    rules?: RegisterOptions<TFieldValues, Path<TFieldValues>>;
-    onChangeTransform?: (zDropValue: unknown) => unknown;
-    valueSelector?: (fieldValue: unknown) => unknown;
-    errorClassName?: string;
-    errorRenderer?: (message: string) => React.ReactNode;
-};
-export declare function ZDropField<TFieldValues extends FieldValues = FieldValues>(props: ZDropFieldProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
+import { FieldValues } from "react-hook-form";
+import { ZDropFieldProps } from "./types/zDropFieldTypes";
+export declare const ZDropField: <TFieldValues extends FieldValues = FieldValues>(props: ZDropFieldProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
 export default ZDropField;

package/dist/types/components/ZDrop/integrations/react-hook-form/ZDropField/types/zDropFieldTypes.d.ts

@@ -0,0 +1,12 @@
+import type React from "react";
+import type { Control, FieldValues, Path, RegisterOptions } from "react-hook-form";
+import type { ZDropProps } from "../../../../types/zDropTypes";
+export type ZDropFieldProps<TFieldValues extends FieldValues = FieldValues> = Omit<ZDropProps, "value" | "onChange" | "name"> & {
+    control: Control<TFieldValues>;
+    name: Path<TFieldValues>;
+    rules?: RegisterOptions<TFieldValues, Path<TFieldValues>>;
+    onChangeTransform?: (zDropValue: unknown) => unknown;
+    valueSelector?: (fieldValue: unknown) => unknown;
+    errorClassName?: string;
+    errorRenderer?: (message: string) => React.ReactNode;
+};

package/dist/types/components/ZDrop/types/zDropTypes.d.ts

@@ -31,7 +31,7 @@ export interface ListStyleClasses {
     listItem?: string;
     noData?: string;
 }
-export interface StyleClasses extends InputStyleClasses, ToggleStyleClasses, ListStyleClasses {
+export interface ZDropStyleClasses extends InputStyleClasses, ToggleStyleClasses, ListStyleClasses {
     container?: string;
     label?: string;
     inputField?: string;
@@ -69,7 +69,7 @@ export interface ZDropBaseProps {
     isAutoHeightEnabled?: boolean;
     autoHeightPosition?: "top" | "bottom";
     listMaxHeightLimiter?: number;
-    styleClasses?: StyleClasses;
+    styleClasses?: ZDropStyleClasses;
 }
 export interface ZDropWithReferenceElementProps extends ZDropBaseProps {
     referenceElementClassName?: string;

package/dist/types/components/ZRange/components/ZRangeIndicator/index.d.ts

@@ -0,0 +1,3 @@
+import { ZRangeIndicatorProps } from "../../types/zRangeTypes";
+declare const ZRangeIndicator: (props: ZRangeIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export default ZRangeIndicator;

package/dist/types/components/ZRange/components/ZRangeInputs/index.d.ts

@@ -0,0 +1,3 @@
+import { ZRangeInputsProps } from "../../types/zRangeTypes";
+declare const ZRangeInputs: (props: ZRangeInputsProps) => import("react/jsx-runtime").JSX.Element;
+export default ZRangeInputs;

package/dist/types/components/ZRange/components/ZRangeLabel/index.d.ts

@@ -0,0 +1,3 @@
+import { ZRangeLabelProps } from "../../types/zRangeTypes";
+declare const ZRangeLabel: (props: ZRangeLabelProps) => import("react/jsx-runtime").JSX.Element;
+export default ZRangeLabel;

package/dist/types/components/ZRange/components/ZRangeSliderValue/index.d.ts

@@ -0,0 +1,3 @@
+import { ZRangeThumbProps } from "@components/ZRange/types/zRangeTypes";
+declare const ZRangeSliderValue: (props: ZRangeThumbProps) => import("react/jsx-runtime").JSX.Element;
+export default ZRangeSliderValue;

package/dist/types/components/ZRange/components/ZRangeTrack/index.d.ts

@@ -0,0 +1,3 @@
+import { ZRangeTrackProps } from "@components/ZRange/types/zRangeTypes";
+declare const ZRangeTrack: (props: ZRangeTrackProps) => import("react/jsx-runtime").JSX.Element;
+export default ZRangeTrack;

package/dist/types/components/ZRange/helpers/calculateStepPosition.d.ts

@@ -0,0 +1 @@
+export declare const calculateStepPosition: (currentValue: number, element: HTMLInputElement | null, min: number, max: number) => number;

package/dist/types/components/ZRange/helpers/checkIsInputSwapAllowed.d.ts

@@ -0,0 +1 @@
+export declare const checkIsInputSwapAllowed: (activeIndex: number, comparedIndex: number, clientPosition: number | null | undefined, valuePosition: number) => boolean;

package/dist/types/components/ZRange/helpers/convertToUnit.d.ts

@@ -0,0 +1,6 @@
+type UnitDef = {
+    unit: string;
+    fractionDigits: number;
+};
+export declare const convertToUnit: (rawValue: number, units?: UnitDef[], unitDivisors?: number[], isIndicatorUnitHidden?: boolean, scaleFn?: (x: number) => number) => string;
+export {};

package/dist/types/components/ZRange/helpers/getCssVariablePxValue.d.ts

@@ -0,0 +1 @@
+export declare const getCssVariablePxValue: (element: HTMLElement, cssVariableName: string, fallbackPx: number) => number;

package/dist/types/components/ZRange/helpers/getFractionDigitsFromStep.d.ts

@@ -0,0 +1 @@
+export declare const getFractionDigitsFromStep: (step: number) => number;

package/dist/types/components/ZRange/helpers/getMinMax.d.ts

@@ -0,0 +1,4 @@
+export declare const getMinMax: (firstValue: number, secondValue: number) => {
+    min: number;
+    max: number;
+};

package/dist/types/components/ZRange/index.d.ts

@@ -0,0 +1,3 @@
+import { ZRangeProps } from "./types/zRangeTypes";
+declare const ZRange: (props: ZRangeProps) => import("react/jsx-runtime").JSX.Element;
+export default ZRange;

package/dist/types/components/ZRange/integrations/react-hook-form/ZRangeField/index.d.ts

@@ -0,0 +1,7 @@
+import { type FieldValues, type FieldPath } from "react-hook-form";
+import type { ZRangeFieldProps } from "./types/zRangeFieldTypes";
+type FormUpdateTrigger = "select" | "change";
+export declare const ZRangeField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>(props: ZRangeFieldProps<TFieldValues, TName> & {
+    commitMode?: FormUpdateTrigger;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ZRangeField;

package/dist/types/components/ZRange/integrations/react-hook-form/ZRangeField/types/zRangeFieldTypes.d.ts

@@ -0,0 +1,17 @@
+import type { Control, FieldPath, FieldValues, RegisterOptions } from "react-hook-form";
+import type { ZRangeProps, ZRangeRangeValue } from "../../../../types/zRangeTypes";
+import { ReactNode } from "react";
+type ZRangeFieldBaseProps = Omit<ZRangeProps, "value" | "name" | "onChange" | "onSelect">;
+export type ZRangeFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = ZRangeFieldBaseProps & {
+    control: Control<TFieldValues>;
+    name: TName;
+    rules?: RegisterOptions<TFieldValues, TName>;
+    defaultValue?: ZRangeRangeValue;
+    shouldUnregister?: boolean;
+    onValueChange?: (value: ZRangeRangeValue, name: string) => void;
+    onValueSelect?: (value: ZRangeRangeValue, name: string) => void;
+    hideError?: boolean;
+    errorClassName?: string;
+    errorRenderer?: (message: string) => ReactNode;
+};
+export {};

package/dist/types/components/ZRange/rangeValue.d.ts

@@ -0,0 +1,13 @@
+import { ZRangeSingleValue, ScaleFunction, UnitList } from "./types/zRangeTypes";
+export declare class ZRangeValue {
+    min: ZRangeSingleValue;
+    max: ZRangeSingleValue;
+    unitDivisors?: number[];
+    unitList?: UnitList[];
+    scale?: ScaleFunction;
+    constructor(min: ZRangeSingleValue, max: ZRangeSingleValue, unitDivisors?: number[], unitList?: UnitList[], scale?: ScaleFunction);
+    getMinPosition(): number;
+    getMaxPosition(): number;
+    getRangeMiddle(): number;
+    getValueLabel(forValue: "min" | "max"): string;
+}

package/dist/types/components/ZRange/types/zRangeTypes.d.ts

@@ -0,0 +1,103 @@
+import { ChangeEventHandler, MouseEventHandler, ReactNode, RefObject, TouchEventHandler } from "react";
+import { ZRangeValue } from "../rangeValue";
+export interface UnitList {
+    unit: string;
+    fractionDigits: number;
+}
+export type ScaleFunction = (x: number) => number;
+export type ScaleFunctionWithSchema = (x: number, scaleFunctionSchema: string) => number;
+export interface ZRangeSingleValue {
+    value: number;
+    initialValue: number;
+    inputRef: RefObject<HTMLInputElement | null>;
+    getPosition?: () => number;
+}
+export interface ZRangeRangeValue {
+    min: number;
+    max: number;
+}
+export interface TrackStylesClasses {
+    trackContainer?: string;
+    trackRange?: string;
+    trackSelected?: string;
+}
+export interface IndicatorStylesClasses {
+    indicator?: string;
+    indicatorMin?: string;
+    indicatorMax?: string;
+    indicatorValue?: string;
+    indicatorIcon?: string;
+}
+export interface ZRangeStyleClasses extends TrackStylesClasses, IndicatorStylesClasses {
+    container?: string;
+    label?: string;
+    input?: string;
+    inputActive?: string;
+    sliderValue?: string;
+}
+export interface ZRangeProps {
+    value: ZRangeRangeValue;
+    name: string;
+    min: number;
+    max: number;
+    step?: number;
+    scale?: string;
+    unitDivisors?: number[];
+    unitList?: UnitList[];
+    label?: string | ReactNode;
+    onSelect?: Function;
+    onChange?: Function;
+    icons?: {
+        thumbMin?: ReactNode;
+        thumbMax?: ReactNode;
+        indicatorMin?: ReactNode;
+        indicatorMax?: ReactNode;
+    };
+    stylesClasses?: ZRangeStyleClasses;
+    isIndicatorUnitHidden?: boolean;
+}
+export interface ZRangeLabelProps {
+    label: string | ReactNode;
+    labelClassName?: string;
+}
+export interface ZRangeThumbProps {
+    value: string;
+    icon?: ReactNode;
+    sliderValueClassName?: string;
+}
+export interface ZRangeTrackProps {
+    rangeTrackRef?: RefObject<HTMLDivElement | null>;
+    selectedRangeStyle?: React.CSSProperties;
+    trackStyles: TrackStylesClasses;
+    selectedRangeRef: RefObject<HTMLDivElement | null>;
+}
+export interface ZRangeIndicatorProps {
+    valueIndicatorRef: RefObject<HTMLDivElement | null>;
+    indicatorStyles: IndicatorStylesClasses;
+    indicatorValue?: number | string;
+    rangeTrackRef?: RefObject<HTMLDivElement | null>;
+    inputElement?: HTMLInputElement | null;
+    scaleFunction: ScaleFunction;
+    unitList?: UnitList[];
+    unitDivisors?: number[];
+    scale?: string;
+    icon?: ReactNode;
+    iconKey?: string;
+    isHighlighted: boolean;
+    isIndicatorUnitHidden?: boolean;
+}
+export interface ZRangeInputsProps {
+    rangeValue: ZRangeValue;
+    min: number;
+    max: number;
+    step?: number;
+    inputMinClasses?: string;
+    inputMaxClasses?: string;
+    onInputChange?: ChangeEventHandler<HTMLInputElement>;
+    onMouseDown?: MouseEventHandler<HTMLInputElement>;
+    onTouchStart?: TouchEventHandler<HTMLInputElement>;
+    onMouseMove?: MouseEventHandler<HTMLInputElement>;
+    onTouchMove?: TouchEventHandler<HTMLInputElement>;
+    onMouseUp?: MouseEventHandler<HTMLInputElement>;
+    onTouchEnd?: TouchEventHandler<HTMLInputElement>;
+}

package/dist/types/index.d.ts

@@ -1,5 +1,10 @@
 export { default as ZDrop } from "./components/ZDrop";
-export { ZDropField } from "./components/ZDrop/integrations/react-hook-form/ZDropField";
-export { default as ZDropButton } from "./components/ZDropButton";
 export type * from "./components/ZDrop/types/zDropTypes";
+export { default as ZDropField } from "./components/ZDrop/integrations/react-hook-form/ZDropField";
+export type { ZDropFieldProps } from "./components/ZDrop/integrations/react-hook-form/ZDropField/types/zDropFieldTypes";
+export { default as ZDropButton } from "./components/ZDropButton";
 export type * from "./components/ZDropButton/types/zDropButtonTypes";
+export { default as ZRange } from "./components/ZRange";
+export type * from "./components/ZRange/types/zRangeTypes";
+export { default as ZRangeField } from "./components/ZRange/integrations/react-hook-form/ZRangeField";
+export type { ZRangeFieldProps } from "./components/ZRange/integrations/react-hook-form/ZRangeField/types/zRangeFieldTypes";

package/dist/zcomponents-ui.css

@@ -1,2 +1,2 @@
-.ZDropButton-module_zd-button__XVZ-w *{box-sizing:border-box;margin:0;padding:0}.ZDropButton-module_zd-button__XVZ-w{max-height:-moz-fit-content;max-height:fit-content;min-width:-moz-fit-content;min-width:fit-content;position:relative}.ZDropButton-module_zd-button__toggle__0jdWn{align-items:center;cursor:pointer;display:flex;min-width:100%;padding:0 10px;width:100%}:where(.ZDropButton-module_zd-button__toggle__0jdWn){background:transparent;border:var(--zd-border);border-radius:var(--zd-radius);height:35px;outline:none;transition:border .15s ease-in-out,box-shadow .15s ease-in-out}:where(.ZDropButton-module_zd-button__toggle__0jdWn).ZDropButton-module_active__AHl3a,:where(.ZDropButton-module_zd-button__toggle__0jdWn):focus,:where(.ZDropButton-module_zd-button__toggle__0jdWn):hover{border-color:var(--zd-color-secondary)}:where(.ZDropButton-module_zd-button__toggle-title__OaiVF){color:var(--zd-color-primary);font-size:13px;font-weight:500}.ZDropButton-module_zd-button__toggle-icon__G4tnb{align-items:center;display:flex;justify-content:center;margin-right:6px}:where(.ZDropButton-module_zd-button__toggle-icon__G4tnb){height:30px;width:30px}:where(.ZDropButton-module_zd-button__toggle-icon__G4tnb) img,:where(.ZDropButton-module_zd-button__toggle-icon__G4tnb) svg{height:100%;width:100%}.ZDropButton-module_zd-button__content__FS-6m{margin:1px 0;min-width:100%;overflow-y:auto;position:absolute;width:100%}:where(.ZDropButton-module_zd-button__content__FS-6m){border:1px solid var(--zd-color-primary);border-radius:var(--zd-radius)}.ZDropButton-module_zd-button__search__6Nbrx{height:30px;max-width:100%;min-width:100%;padding:1px 0;width:100%}.ZDropButton-module_zd-button__search-input-field__K2avH{align-items:center;display:flex;height:100%;min-width:100%;position:relative;width:100%}:where(.ZDropButton-module_zd-button__search-input-field__K2avH){border:1px solid var(--zd-color-primary);border-radius:var(--zd-radius)}:where(.ZDropButton-module_zd-button__search-input-field__K2avH):focus-within{border-color:var(--zd-color-secondary)}.ZDropButton-module_zd-button__search-input__1e643{background:transparent;border:none;max-width:100%;padding:2px 5px;width:100%}.ZDropButton-module_zd-button__search-input__1e643:focus{outline:none}.ZDropButton-module_zd-button__search-clear-btn__hJo2h{background:transparent;border:none;cursor:pointer;margin:0 5px;max-height:-moz-fit-content;max-height:fit-content}:where(.ZDropButton-module_zd-button__search-clear-btn-icon__PWwHy){cursor:pointer;display:block;height:15px;max-width:14px;min-width:14px;position:relative}:where(.ZDropButton-module_zd-button__search-clear-btn-icon__PWwHy):after,:where(.ZDropButton-module_zd-button__search-clear-btn-icon__PWwHy):before{background:var(--zd-color-primary);content:"";height:15px;left:6px;position:absolute;width:2px}:where(.ZDropButton-module_zd-button__search-clear-btn-icon__PWwHy):before{transform:rotate(45deg)}:where(.ZDropButton-module_zd-button__search-clear-btn-icon__PWwHy):after{transform:rotate(-45deg)}:where(.ZDropButton-module_zd-button__search-clear-btn-icon__PWwHy):hover:after,:where(.ZDropButton-module_zd-button__search-clear-btn-icon__PWwHy):hover:before{background:var(--zd-color-secondary)}.ZDropButton-module_zd-button__list__prV7p{list-style:none;min-width:100%;overflow-y:auto;width:100%}:where(.ZDropButton-module_zd-button__list__prV7p){border-radius:var(--zd-radius)}.ZDropButton-module_zd-button__list-item__uRK0D{align-items:center;cursor:pointer;display:flex;padding:3px 5px;position:relative;width:100%}:where(.ZDropButton-module_zd-button__list-item__uRK0D){background-color:var(--zd-color-background-transp);color:var(--zd-color-primary);transition:background-color .2s linear}:where(.ZDropButton-module_zd-button__list-item__uRK0D):focus{outline:none}:where(.ZDropButton-module_zd-button__list-item__uRK0D):focus,:where(.ZDropButton-module_zd-button__list-item__uRK0D):hover{background-color:var(--zd-color-secondary-transp)}:where(.ZDropButton-module_zd-button__list-item--active__oPoZA){background-color:var(--zd-color-secondary-transp);color:var(--zd-color-secondary)}.ZDropButton-module_zd-button__list-item-icon__xgqOm{align-items:center;display:flex;justify-content:center;margin-right:10px}:where(.ZDropButton-module_zd-button__list-item-icon__xgqOm){height:40px;width:40px}.ZDropButton-module_zd-button__list-item-icon__xgqOm img,.ZDropButton-module_zd-button__list-item-icon__xgqOm svg{height:100%;width:100%}:where(.ZDropButton-module_zd-button__list-item-title__RHTpc){font-size:14px;font-weight:500}:root{--zd-color-primary:#676767;--zd-color-primary-transp:#67676775;--zd-color-secondary:#0079bd;--zd-color-secondary-transp:#0079bd50;--zd-color-disabled:#ddd;--zd-color-error:#ff4d4f;--zd-color-error-transp:#ffe6e6;--zd-color-background-transp:#ffffffdd;--zd-font-family:Helvetica,Arial,sans-serif;--zd-font-size:14px;--zd-radius:3px;--zd-border:1px solid var(--zd-color-primary);--zd-focus-ring:0 0 0 0.2rem var(--zd-color-secondary-transp)}:where(.ZDrop-module_zd__container__IrQTk) *{margin:0;padding:0}.ZDrop-module_zd__container__IrQTk *{box-sizing:border-box}.ZDrop-module_zd__container__IrQTk{position:relative}:where(.ZDrop-module_zd__container__IrQTk){font-family:var(--zd-font-family);font-size:var(--zd-font-size);height:-moz-fit-content;height:fit-content;max-height:-moz-fit-content;max-height:fit-content;max-width:500px;min-width:200px;width:-moz-fit-content;width:fit-content}.ZDrop-module_zd__label__keSwp{display:block}:where(.ZDrop-module_zd__label__keSwp){color:var(--zd-color-primary);margin:0 0 5px 10px}.ZDrop-module_zd__input-field__Ne8t8{position:relative}:where(.ZDrop-module_zd__input-field__Ne8t8){border:var(--zd-border);border-radius:var(--zd-radius);display:flex;min-height:35px;overflow-y:auto;padding-left:10px;transition:border .15s ease-in-out,box-shadow .15s ease-in-out}.ZDrop-module_zd__input-field__Ne8t8>input{cursor:pointer}:where(.ZDrop-module_zd__input-field__Ne8t8):hover{border-color:var(--zd-color-secondary)}:where(.ZDrop-module_zd__input-field__Ne8t8):focus-within{border-color:var(--zd-color-secondary);box-shadow:var(--zd-focus-ring)}.ZDrop-module_zd__input-field__Ne8t8:focus-within>input{cursor:text}:where(.ZDrop-module_zd__input-field--multiple__kDSP5){padding-left:4px}:where(.ZDrop-module_zd__input-field--disabled__LOUpU){background:var(--zd-color-disabled);cursor:default;pointer-events:none}:where(.ZDrop-module_zd__input__r3qdf){background:transparent;border:none;border-radius:var(--zd-radius);color:var(--zd-color-primary);min-height:100%;padding-right:10px;width:100%}:where(.ZDrop-module_zd__input__r3qdf):focus{outline:none}:where(.ZDrop-module_zd__input__r3qdf):disabled{background:var(--zd-color-disabled)}:where(.ZDrop-module_zd__input__r3qdf)::-moz-placeholder{color:var(--zd-color-primary-transp)}:where(.ZDrop-module_zd__input__r3qdf)::placeholder{color:var(--zd-color-primary-transp)}:where(.ZDrop-module_zd__input-single__tM76E){align-items:center;display:flex;height:auto;max-width:100%;min-height:35px;overflow:hidden;white-space:nowrap}:where(.ZDrop-module_zd__input-single-value__LjXQ3){border:var(--zd-border);border-radius:var(--zd-radius);height:100%;width:-moz-fit-content;width:fit-content}:where(.ZDrop-module_zd__input-single-value-renderer__fhahO){align-items:center;display:flex}:where(.ZDrop-module_zd__input-single-search__j4zof){align-items:center;background:transparent;border:none;color:var(--zd-color-primary);display:flex;flex:1;line-height:35px;max-width:100%;min-height:35px;overflow:hidden;white-space:nowrap}:where(.ZDrop-module_zd__input-single-search__j4zof):focus{outline:none}:where(.ZDrop-module_zd__input-multiple__AzD1G){align-items:center;display:flex;flex-wrap:wrap;height:auto;list-style:none;margin-right:5px;max-width:calc(100% - 47px)}:where(.ZDrop-module_zd__input-multiple-value__4ZAHf){align-items:center;background:var(--zd-color-disabled);border-radius:var(--zd-radius);color:var(--zd-color-primary);cursor:pointer;display:flex;margin:2px;min-width:-moz-fit-content;min-width:fit-content;padding:3px 6px;width:-moz-fit-content;width:fit-content}:where(.ZDrop-module_zd__input-multiple-value__4ZAHf) span{display:flex;min-width:-moz-fit-content;min-width:fit-content;white-space:nowrap;width:-moz-fit-content;width:fit-content}:where(.ZDrop-module_zd__input-multiple-value-remove-btn__gSzGH){align-items:center;background:transparent;border:none;cursor:pointer;display:flex;justify-content:center;margin-left:3px;min-width:10px;position:relative;width:10px}:where(.ZDrop-module_zd__input-multiple-value-remove-btn__gSzGH):focus{outline:none}:where(.ZDrop-module_zd__input-multiple-value-remove-btn-icon__23GYv){align-items:center;display:flex;height:10px;justify-content:center;position:relative;width:10px}:where(.ZDrop-module_zd__input-multiple-value-remove-btn-icon__23GYv):after,:where(.ZDrop-module_zd__input-multiple-value-remove-btn-icon__23GYv):before{background-color:var(--zd-color-primary);content:"";height:10px;position:absolute;width:2px}:where(.ZDrop-module_zd__input-multiple-value-remove-btn-icon__23GYv):before{transform:rotate(45deg)}:where(.ZDrop-module_zd__input-multiple-value-remove-btn-icon__23GYv):after{transform:rotate(-45deg)}:where(.ZDrop-module_zd__input-multiple-value-remove-btn__gSzGH):focus>.ZDrop-module_zd__input-multiple-value-remove-btn-icon__23GYv:after,:where(.ZDrop-module_zd__input-multiple-value-remove-btn__gSzGH):focus>.ZDrop-module_zd__input-multiple-value-remove-btn-icon__23GYv:before,:where(.ZDrop-module_zd__input-multiple-value-remove-btn__gSzGH):hover>.ZDrop-module_zd__input-multiple-value-remove-btn-icon__23GYv:after,:where(.ZDrop-module_zd__input-multiple-value-remove-btn__gSzGH):hover>.ZDrop-module_zd__input-multiple-value-remove-btn-icon__23GYv:before{background-color:var(--zd-color-secondary)}:where(.ZDrop-module_zd__input-multiple-search-wrapper__va0lS){flex:auto;min-width:100%}:where(.ZDrop-module_zd__input-multiple-search__5K3Z9){background:transparent;border:none;color:var(--zd-color-primary);min-width:40px;padding:3px;width:100%}:where(.ZDrop-module_zd__input-multiple-search__5K3Z9):focus{outline:none}:where(.ZDrop-module_zd__input-multiple-placeholder__tx34F){padding-left:6px}.ZDrop-module_inputClearBtnWrapper__S3uiC{position:relative}:where(.ZDrop-module_zd__input-clear-btn-wrapper__drnqP){align-items:center;display:flex;justify-content:center}:where(.ZDrop-module_zd__input-clear-btn__wqpAG){background:none;border:none;max-height:-moz-fit-content;max-height:fit-content}:where(.ZDrop-module_zd__input-clear-btn-icon__4wsoa){cursor:pointer;display:block;height:15px;max-width:14px;min-width:14px;position:relative}:where(.ZDrop-module_zd__input-clear-btn-icon__4wsoa):after,:where(.ZDrop-module_zd__input-clear-btn-icon__4wsoa):before{background:var(--zd-color-primary);content:"";height:15px;left:6px;position:absolute;width:2px}:where(.ZDrop-module_zd__input-clear-btn-icon__4wsoa):before{transform:rotate(45deg)}:where(.ZDrop-module_zd__input-clear-btn-icon__4wsoa):after{transform:rotate(-45deg)}:where(.ZDrop-module_zd__input-clear-btn-icon__4wsoa):hover:after,:where(.ZDrop-module_zd__input-clear-btn-icon__4wsoa):hover:before{background:var(--zd-color-secondary)}.ZDrop-module_zd__expand-toggle__5-2LH{align-items:center;display:flex;min-width:-moz-fit-content;min-width:fit-content;padding:0 10px}.ZDrop-module_zd__expand-toggle-icon__Vznjq{border:solid var(--zd-color-primary);border-width:0 2px 2px 0;cursor:pointer;padding:4px;transform:rotate(135deg);transition:.3s}.ZDrop-module_zd__expand-toggle-icon--active__I4ZEa{color:var(--zd-color-secondary);transform:translateY(-30%) rotate(45deg)}:where(.ZDrop-module_zd__expand-toggle-icon__Vznjq):hover{border-color:var(--zd-color-secondary)}.ZDrop-module_zd__list__q8lwW{max-height:-moz-fit-content;max-height:fit-content;overflow:auto;position:absolute;width:100%;z-index:2}.ZDrop-module_zd__list-wrapper__dWpmK{margin-top:5px;min-width:100%;overflow:auto;position:absolute;z-index:2}:where(.ZDrop-module_zd__list-wrapper__dWpmK){border:var(--zd-border);border-radius:var(--zd-radius)}.ZDrop-module_zd__list-auto-height-wrapper__UxW3X{height:auto;margin-top:5px;overflow:auto;width:100%}:where(.ZDrop-module_zd__list-auto-height-wrapper__UxW3X){border:var(--zd-border);border-radius:var(--zd-radius)}.ZDrop-module_zd__list--auto-height-enabled__qwsev,.ZDrop-module_zd__list--reference-wrapper-enabled__Ufhb0{position:relative}:where(.ZDrop-module_zd__option__Zf2Fo,.ZDrop-module_zd__no-data__7cCZK){color:var(--zd-color-primary);list-style:none;padding:10px 8px}:where(.ZDrop-module_zd__option__Zf2Fo){cursor:pointer}:where(.ZDrop-module_zd__option__Zf2Fo):focus{background:var(--zd-color-secondary-transp);outline:none}:where(.ZDrop-module_zd__option__Zf2Fo):hover{font-weight:700}:where(.ZDrop-module_zd__option--active__u-S9s){color:var(--zd-color-secondary)}:where(.ZDrop-module_zd__error-message__XL-DS){background:var(--zd-color-error-transp);border:1px solid var(--zd-color-error);border-radius:var(--zd-radius);color:var(--zd-color-error);margin-top:5px;padding:8px}
+.ZDropButton-module_zd-button__XVZ-w *{box-sizing:border-box;margin:0;padding:0}.ZDropButton-module_zd-button__XVZ-w{max-height:-moz-fit-content;max-height:fit-content;min-width:-moz-fit-content;min-width:fit-content;position:relative}.ZDropButton-module_zd-button__toggle__0jdWn{align-items:center;cursor:pointer;display:flex;min-width:100%;padding:0 10px;width:100%}:where(.ZDropButton-module_zd-button__toggle__0jdWn){background:transparent;border:var(--zd-border);border-radius:var(--zd-radius);height:35px;outline:none;transition:border .15s ease-in-out,box-shadow .15s ease-in-out}:where(.ZDropButton-module_zd-button__toggle__0jdWn).ZDropButton-module_active__AHl3a,:where(.ZDropButton-module_zd-button__toggle__0jdWn):focus,:where(.ZDropButton-module_zd-button__toggle__0jdWn):hover{border-color:var(--zd-color-secondary)}:where(.ZDropButton-module_zd-button__toggle-title__OaiVF){color:var(--zd-color-primary);font-size:13px;font-weight:500}.ZDropButton-module_zd-button__toggle-icon__G4tnb{align-items:center;display:flex;justify-content:center;margin-right:6px}:where(.ZDropButton-module_zd-button__toggle-icon__G4tnb){height:30px;width:30px}:where(.ZDropButton-module_zd-button__toggle-icon__G4tnb) img,:where(.ZDropButton-module_zd-button__toggle-icon__G4tnb) svg{height:100%;width:100%}.ZDropButton-module_zd-button__content__FS-6m{margin:1px 0;min-width:100%;overflow-y:auto;position:absolute;width:100%}:where(.ZDropButton-module_zd-button__content__FS-6m){border:1px solid var(--zd-color-primary);border-radius:var(--zd-radius)}.ZDropButton-module_zd-button__search__6Nbrx{height:30px;max-width:100%;min-width:100%;padding:1px 0;width:100%}.ZDropButton-module_zd-button__search-input-field__K2avH{align-items:center;display:flex;height:100%;min-width:100%;position:relative;width:100%}:where(.ZDropButton-module_zd-button__search-input-field__K2avH){border:1px solid var(--zd-color-primary);border-radius:var(--zd-radius)}:where(.ZDropButton-module_zd-button__search-input-field__K2avH):focus-within{border-color:var(--zd-color-secondary)}.ZDropButton-module_zd-button__search-input__1e643{background:transparent;border:none;max-width:100%;padding:2px 5px;width:100%}.ZDropButton-module_zd-button__search-input__1e643:focus{outline:none}.ZDropButton-module_zd-button__search-clear-btn__hJo2h{background:transparent;border:none;cursor:pointer;margin:0 5px;max-height:-moz-fit-content;max-height:fit-content}:where(.ZDropButton-module_zd-button__search-clear-btn-icon__PWwHy){cursor:pointer;display:block;height:15px;max-width:14px;min-width:14px;position:relative}:where(.ZDropButton-module_zd-button__search-clear-btn-icon__PWwHy):after,:where(.ZDropButton-module_zd-button__search-clear-btn-icon__PWwHy):before{background:var(--zd-color-primary);content:"";height:15px;left:6px;position:absolute;width:2px}:where(.ZDropButton-module_zd-button__search-clear-btn-icon__PWwHy):before{transform:rotate(45deg)}:where(.ZDropButton-module_zd-button__search-clear-btn-icon__PWwHy):after{transform:rotate(-45deg)}:where(.ZDropButton-module_zd-button__search-clear-btn-icon__PWwHy):hover:after,:where(.ZDropButton-module_zd-button__search-clear-btn-icon__PWwHy):hover:before{background:var(--zd-color-secondary)}.ZDropButton-module_zd-button__list__prV7p{list-style:none;min-width:100%;overflow-y:auto;width:100%}:where(.ZDropButton-module_zd-button__list__prV7p){border-radius:var(--zd-radius)}.ZDropButton-module_zd-button__list-item__uRK0D{align-items:center;cursor:pointer;display:flex;padding:3px 5px;position:relative;width:100%}:where(.ZDropButton-module_zd-button__list-item__uRK0D){background-color:var(--zd-color-background-transp);color:var(--zd-color-primary);transition:background-color .2s linear}:where(.ZDropButton-module_zd-button__list-item__uRK0D):focus{outline:none}:where(.ZDropButton-module_zd-button__list-item__uRK0D):focus,:where(.ZDropButton-module_zd-button__list-item__uRK0D):hover{background-color:var(--zd-color-secondary-transp)}:where(.ZDropButton-module_zd-button__list-item--active__oPoZA){background-color:var(--zd-color-secondary-transp);color:var(--zd-color-secondary)}.ZDropButton-module_zd-button__list-item-icon__xgqOm{align-items:center;display:flex;justify-content:center;margin-right:10px}:where(.ZDropButton-module_zd-button__list-item-icon__xgqOm){height:40px;width:40px}.ZDropButton-module_zd-button__list-item-icon__xgqOm img,.ZDropButton-module_zd-button__list-item-icon__xgqOm svg{height:100%;width:100%}:where(.ZDropButton-module_zd-button__list-item-title__RHTpc){font-size:14px;font-weight:500}:root{--thumb-size:8px;--track-height:4px}.ZRange-module_zr__zQajG{margin-top:20px;position:relative}.ZRange-module_zr__container__XLdRx{position:relative}.ZRange-module_input-label__wrapper__btU-4{pointer-events:none;touch-action:none}.ZRange-module_zr__label__eddhI{background:transparent}:where(.ZRange-module_zr__label__eddhI){color:var(--zd-color-primary);font-size:var(--zd-font-size);font-weight:500}.ZRange-module_zr__value-indicator__xK4H8{border-radius:4px;display:none;font-size:var(--zd-font-size);font-weight:500;left:50%;margin-bottom:5px;min-height:-moz-fit-content;min-height:fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:2px 8px;position:absolute;transform:translateX(-50%);z-index:6}@media (max-width:599px){.ZRange-module_zr__value-indicator__xK4H8{padding:2px 4px}}:where(.ZRange-module_zr__value-indicator__xK4H8){background-color:var(--zd-color-primary);font-size:var(--zd-font-size);white-space:nowrap;width:-moz-fit-content;width:fit-content}@media (max-width:599px){:where(.ZRange-module_zr__value-indicator__xK4H8){font-size:var(--zd-font-size)}}.ZRange-module_zr__value-indicator__xK4H8:before{border-style:solid;border-width:5px 5px 0;content:"";display:block;height:0;left:50%;position:absolute;top:100%;transform:translateX(-50%);width:0}:where(.ZRange-module_zr__value-indicator__xK4H8):before{border-color:var(--zd-color-primary) transparent transparent transparent}.ZRange-module_zr__value-indicator--active__Nb6d5{align-items:center;display:flex;justify-content:space-around}:where(.ZRange-module_zr__value-indicator-icon__iCqcS){align-items:center;display:flex;height:40px;justify-content:center;width:40px}:where(.ZRange-module_zr__value-indicator-icon__iCqcS) img{height:100%;width:100%}.ZRange-module_zr__inputs-wrapper__yzQxk{max-width:100%;position:relative;width:100%}.ZRange-module_zr__input__FOHCA,.ZRange-module_zr__input__FOHCA::-webkit-slider-thumb{-webkit-tap-highlight-color:transparent;appearance:none;-webkit-appearance:none;padding:0}.ZRange-module_zr__input__FOHCA{background:transparent;border:0;box-sizing:border-box;height:0;margin:0;outline:none;padding:0;position:absolute;touch-action:none;transition:.2s ease-in-out;width:100%}.ZRange-module_zr__input-first__m1Qt9{z-index:3}.ZRange-module_zr__input-second__HMhTG{z-index:4}.ZRange-module_zr__input--active__pxd3x{pointer-events:all;z-index:5}:where(.ZRange-module_zr__input--active__pxd3x)::-webkit-slider-thumb{outline:2px solid var(--zd-color-secondary)}.ZRange-module_zr__input__FOHCA::-webkit-slider-runnable-track{background:transparent;border:0;cursor:pointer;height:var(--track-height);margin:auto 0;width:100%}.ZRange-module_zr__input__FOHCA::-mozr-track{background:transparent;border:0;height:var(--track-height);width:100%}.ZRange-module_zr__input__FOHCA::-moz-focus-outer{border:0}.ZRange-module_zr__input__FOHCA::-webkit-slider-thumb{cursor:pointer;height:var(--thumb-size);margin-top:calc((var(--track-height) - var(--thumb-size))/2);pointer-events:all;width:var(--thumb-size)}:where(.ZRange-module_zr__input__FOHCA)::-webkit-slider-thumb{background-color:var(--zd-color-primary);border-radius:4px;box-shadow:0 0 4px 0 #000;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}.ZRange-module_zr__input__FOHCA::-mozr-thumb{cursor:pointer;height:var(--thumb-size);pointer-events:all;width:var(--thumb-size)}:where(.ZRange-module_zr__input__FOHCA::-mozr-thumb){background-color:var(--zd-color-primary);border-radius:4px;box-shadow:0 0 4px 0 #000;transition:.2s ease-in-out}.ZRange-module_zr__slider__pD1kE{height:var(--track-height);overflow:hidden;position:relative;width:100%}.ZRange-module_zr__slider-track__sZvOt{height:var(--track-height);position:absolute;top:0;width:100%}:where(.ZRange-module_zr__slider-track__sZvOt){background-color:var(--zd-color-primary);border-radius:2px}.ZRange-module_zr__slider-track-selected-range__lXJE1{height:var(--track-height);pointer-events:none;position:relative}:where(.ZRange-module_zr__slider-track-selected-range__lXJE1){background-color:var(--zd-color-secondary);border-radius:2px}.ZRange-module_zr__slider-values-wrapper__vxSnT{align-items:center;display:flex;justify-content:space-between;padding:15px 0 10px}:where(.ZRange-module_zr__slider-value__W9jMF){font-weight:500}:where(.ZRange-module_zr__slider-first-value__e7Ik6),:where(.ZRange-module_zr__slider-second-value__itzcB){color:var(--zd-color-primary);font-size:var(--zd-font-size)}:where(.ZRange-module_zr__error-message__QMDqT){background:var(--zd-color-error-transp);border:1px solid var(--zd-color-error);border-radius:var(--zd-radius);color:var(--zd-color-error);margin-top:5px;padding:8px}:root{--zd-color-primary:#676767;--zd-color-primary-transp:#67676775;--zd-color-secondary:#0079bd;--zd-color-secondary-transp:#0079bd50;--zd-color-disabled:#ddd;--zd-color-error:#ff4d4f;--zd-color-error-transp:#ffe6e6;--zd-color-background-transp:#ffffffdd;--zd-font-family:Helvetica,Arial,sans-serif;--zd-font-size:14px;--zd-radius:3px;--zd-border:1px solid var(--zd-color-primary);--zd-focus-ring:0 0 0 0.2rem var(--zd-color-secondary-transp)}:where(.ZDrop-module_zd__container__IrQTk) *{margin:0;padding:0}.ZDrop-module_zd__container__IrQTk *{box-sizing:border-box}.ZDrop-module_zd__container__IrQTk{position:relative}:where(.ZDrop-module_zd__container__IrQTk){font-family:var(--zd-font-family);font-size:var(--zd-font-size);height:-moz-fit-content;height:fit-content;max-height:-moz-fit-content;max-height:fit-content;max-width:500px;min-width:200px;width:-moz-fit-content;width:fit-content}.ZDrop-module_zd__label__keSwp{display:block}:where(.ZDrop-module_zd__label__keSwp){color:var(--zd-color-primary);margin:0 0 5px 10px}.ZDrop-module_zd__input-field__Ne8t8{position:relative}:where(.ZDrop-module_zd__input-field__Ne8t8){border:var(--zd-border);border-radius:var(--zd-radius);display:flex;min-height:35px;overflow-y:auto;padding-left:10px;transition:border .15s ease-in-out,box-shadow .15s ease-in-out}.ZDrop-module_zd__input-field__Ne8t8>input{cursor:pointer}:where(.ZDrop-module_zd__input-field__Ne8t8):hover{border-color:var(--zd-color-secondary)}:where(.ZDrop-module_zd__input-field__Ne8t8):focus-within{border-color:var(--zd-color-secondary);box-shadow:var(--zd-focus-ring)}.ZDrop-module_zd__input-field__Ne8t8:focus-within>input{cursor:text}:where(.ZDrop-module_zd__input-field--multiple__kDSP5){padding-left:4px}:where(.ZDrop-module_zd__input-field--disabled__LOUpU){background:var(--zd-color-disabled);cursor:default;pointer-events:none}:where(.ZDrop-module_zd__input__r3qdf){background:transparent;border:none;border-radius:var(--zd-radius);color:var(--zd-color-primary);min-height:100%;padding-right:10px;width:100%}:where(.ZDrop-module_zd__input__r3qdf):focus{outline:none}:where(.ZDrop-module_zd__input__r3qdf):disabled{background:var(--zd-color-disabled)}:where(.ZDrop-module_zd__input__r3qdf)::-moz-placeholder{color:var(--zd-color-primary-transp)}:where(.ZDrop-module_zd__input__r3qdf)::placeholder{color:var(--zd-color-primary-transp)}:where(.ZDrop-module_zd__input-single__tM76E){align-items:center;display:flex;height:auto;max-width:100%;min-height:35px;overflow:hidden;white-space:nowrap}:where(.ZDrop-module_zd__input-single-value__LjXQ3){border:var(--zd-border);border-radius:var(--zd-radius);height:100%;width:-moz-fit-content;width:fit-content}:where(.ZDrop-module_zd__input-single-value-renderer__fhahO){align-items:center;display:flex}:where(.ZDrop-module_zd__input-single-search__j4zof){align-items:center;background:transparent;border:none;color:var(--zd-color-primary);display:flex;flex:1;line-height:35px;max-width:100%;min-height:35px;overflow:hidden;white-space:nowrap}:where(.ZDrop-module_zd__input-single-search__j4zof):focus{outline:none}:where(.ZDrop-module_zd__input-multiple__AzD1G){align-items:center;display:flex;flex-wrap:wrap;height:auto;list-style:none;margin-right:5px;max-width:calc(100% - 47px)}:where(.ZDrop-module_zd__input-multiple-value__4ZAHf){align-items:center;background:var(--zd-color-disabled);border-radius:var(--zd-radius);color:var(--zd-color-primary);cursor:pointer;display:flex;margin:2px;min-width:-moz-fit-content;min-width:fit-content;padding:3px 6px;width:-moz-fit-content;width:fit-content}:where(.ZDrop-module_zd__input-multiple-value__4ZAHf) span{display:flex;min-width:-moz-fit-content;min-width:fit-content;white-space:nowrap;width:-moz-fit-content;width:fit-content}:where(.ZDrop-module_zd__input-multiple-value-remove-btn__gSzGH){align-items:center;background:transparent;border:none;cursor:pointer;display:flex;justify-content:center;margin-left:3px;min-width:10px;position:relative;width:10px}:where(.ZDrop-module_zd__input-multiple-value-remove-btn__gSzGH):focus{outline:none}:where(.ZDrop-module_zd__input-multiple-value-remove-btn-icon__23GYv){align-items:center;display:flex;height:10px;justify-content:center;position:relative;width:10px}:where(.ZDrop-module_zd__input-multiple-value-remove-btn-icon__23GYv):after,:where(.ZDrop-module_zd__input-multiple-value-remove-btn-icon__23GYv):before{background-color:var(--zd-color-primary);content:"";height:10px;position:absolute;width:2px}:where(.ZDrop-module_zd__input-multiple-value-remove-btn-icon__23GYv):before{transform:rotate(45deg)}:where(.ZDrop-module_zd__input-multiple-value-remove-btn-icon__23GYv):after{transform:rotate(-45deg)}:where(.ZDrop-module_zd__input-multiple-value-remove-btn__gSzGH):focus>.ZDrop-module_zd__input-multiple-value-remove-btn-icon__23GYv:after,:where(.ZDrop-module_zd__input-multiple-value-remove-btn__gSzGH):focus>.ZDrop-module_zd__input-multiple-value-remove-btn-icon__23GYv:before,:where(.ZDrop-module_zd__input-multiple-value-remove-btn__gSzGH):hover>.ZDrop-module_zd__input-multiple-value-remove-btn-icon__23GYv:after,:where(.ZDrop-module_zd__input-multiple-value-remove-btn__gSzGH):hover>.ZDrop-module_zd__input-multiple-value-remove-btn-icon__23GYv:before{background-color:var(--zd-color-secondary)}:where(.ZDrop-module_zd__input-multiple-search-wrapper__va0lS){flex:auto;min-width:100%}:where(.ZDrop-module_zd__input-multiple-search__5K3Z9){background:transparent;border:none;color:var(--zd-color-primary);min-width:40px;padding:3px;width:100%}:where(.ZDrop-module_zd__input-multiple-search__5K3Z9):focus{outline:none}:where(.ZDrop-module_zd__input-multiple-placeholder__tx34F){padding-left:6px}.ZDrop-module_inputClearBtnWrapper__S3uiC{position:relative}:where(.ZDrop-module_zd__input-clear-btn-wrapper__drnqP){align-items:center;display:flex;justify-content:center}:where(.ZDrop-module_zd__input-clear-btn__wqpAG){background:none;border:none;max-height:-moz-fit-content;max-height:fit-content}:where(.ZDrop-module_zd__input-clear-btn-icon__4wsoa){cursor:pointer;display:block;height:15px;max-width:14px;min-width:14px;position:relative}:where(.ZDrop-module_zd__input-clear-btn-icon__4wsoa):after,:where(.ZDrop-module_zd__input-clear-btn-icon__4wsoa):before{background:var(--zd-color-primary);content:"";height:15px;left:6px;position:absolute;width:2px}:where(.ZDrop-module_zd__input-clear-btn-icon__4wsoa):before{transform:rotate(45deg)}:where(.ZDrop-module_zd__input-clear-btn-icon__4wsoa):after{transform:rotate(-45deg)}:where(.ZDrop-module_zd__input-clear-btn-icon__4wsoa):hover:after,:where(.ZDrop-module_zd__input-clear-btn-icon__4wsoa):hover:before{background:var(--zd-color-secondary)}.ZDrop-module_zd__expand-toggle__5-2LH{align-items:center;display:flex;min-width:-moz-fit-content;min-width:fit-content;padding:0 10px}.ZDrop-module_zd__expand-toggle-icon__Vznjq{border:solid var(--zd-color-primary);border-width:0 2px 2px 0;cursor:pointer;padding:4px;transform:rotate(135deg);transition:.3s}.ZDrop-module_zd__expand-toggle-icon--active__I4ZEa{color:var(--zd-color-secondary);transform:translateY(-30%) rotate(45deg)}:where(.ZDrop-module_zd__expand-toggle-icon__Vznjq):hover{border-color:var(--zd-color-secondary)}.ZDrop-module_zd__list__q8lwW{max-height:-moz-fit-content;max-height:fit-content;overflow:auto;position:absolute;width:100%;z-index:2}.ZDrop-module_zd__list-wrapper__dWpmK{margin-top:5px;min-width:100%;overflow:auto;position:absolute;z-index:2}:where(.ZDrop-module_zd__list-wrapper__dWpmK){border:var(--zd-border);border-radius:var(--zd-radius)}.ZDrop-module_zd__list-auto-height-wrapper__UxW3X{height:auto;margin-top:5px;overflow:auto;width:100%}:where(.ZDrop-module_zd__list-auto-height-wrapper__UxW3X){border:var(--zd-border);border-radius:var(--zd-radius)}.ZDrop-module_zd__list--auto-height-enabled__qwsev,.ZDrop-module_zd__list--reference-wrapper-enabled__Ufhb0{position:relative}:where(.ZDrop-module_zd__option__Zf2Fo,.ZDrop-module_zd__no-data__7cCZK){color:var(--zd-color-primary);list-style:none;padding:10px 8px}:where(.ZDrop-module_zd__option__Zf2Fo){cursor:pointer}:where(.ZDrop-module_zd__option__Zf2Fo):focus{background:var(--zd-color-secondary-transp);outline:none}:where(.ZDrop-module_zd__option__Zf2Fo):hover{font-weight:700}:where(.ZDrop-module_zd__option--active__u-S9s){color:var(--zd-color-secondary)}:where(.ZDrop-module_zd__error-message__XL-DS){background:var(--zd-color-error-transp);border:1px solid var(--zd-color-error);border-radius:var(--zd-radius);color:var(--zd-color-error);margin-top:5px;padding:8px}
 /*# sourceMappingURL=zcomponents-ui.css.map */