@cube-dev/ui-kit 0.173.0 → 0.174.0

package/dist/components/fields/Picker/Picker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";

package/dist/components/fields/RadioGroup/Radio.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";

package/dist/components/fields/RadioGroup/RadioGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { castNullableStringValue } from "../../../utils/react/nullableValue.js";

package/dist/components/fields/RadioGroup/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 
 //#region src/components/fields/RadioGroup/context.ts

package/dist/components/fields/SearchComboBox/SearchComboBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";

package/dist/components/fields/SearchInput/SearchInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useBufferedValue } from "../../../utils/react/useBufferedValue.js";

package/dist/components/fields/Select/Select.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { forwardRefWithGenerics } from "../../../utils/react/forwardRefWithGenerics.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";

package/dist/components/fields/Slider/Gradation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { SliderGradationElement, SliderGradeElement } from "./elements.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/fields/Slider/HueSlider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { __Slider } from "./Slider.js";
 import { forwardRef, useCallback, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/Slider/RangeSlider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { Gradation } from "./Gradation.js";
 import { _SliderBase } from "./SliderBase.js";
 import { SliderThumb } from "./SliderThumb.js";

package/dist/components/fields/Slider/Slider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { Gradation } from "./Gradation.js";

package/dist/components/fields/Slider/SliderBase.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { forwardRefWithGenerics } from "../../../utils/react/forwardRefWithGenerics.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";

package/dist/components/fields/Slider/SliderThumb.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
 import { SliderThumbElement } from "./elements.js";

package/dist/components/fields/Slider/SliderTrack.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
 import { SliderTrackContainerElement } from "./elements.js";
 import { useMemo } from "react";

package/dist/components/fields/Slider/elements.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 
 //#region src/components/fields/Slider/elements.ts

package/dist/components/fields/Slider/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { __RangeSlider } from "./RangeSlider.js";
 import { __Slider } from "./Slider.js";
 import { __HueSlider } from "./HueSlider.js";

package/dist/components/fields/Switch/Switch.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useId as useId$2 } from "../../../utils/react/useId.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";

package/dist/components/fields/TextArea/TextArea.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useBufferedValue } from "../../../utils/react/useBufferedValue.js";

package/dist/components/fields/TextInput/TextInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useBufferedValue } from "../../../utils/react/useBufferedValue.js";

package/dist/components/fields/TextInput/TextInputBase.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/TextInput/useAutoSizeTextArea.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useEffect, useLayoutEffect, useRef } from "react";
 

package/dist/components/fields/TextInputMapper/TextInputMapper.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/fields/color/ColorPanel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { formatColor, getContrastingColor, toHex } from "./color.js";
 import { CHANNELS, COLOR_SPACES, COLOR_SPACE_HINTS, COLOR_SPACE_LABELS } from "./channels.js";

package/dist/components/fields/color/channels.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { fromOkhst, fromOklch, fromRgb, isAchromatic, maxChroma, normalizeHue, toHex, toOkhst, toOklch, toRgb } from "./color.js";
 
 //#region src/components/fields/color/channels.ts

package/dist/components/fields/color/color.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { contrastRatioFromLuminance, formatHsl, formatOkhsl, formatOkhst, formatOklch, formatRgb, hslToSrgb, okhslToLinearSrgb, okhslToOkhst, okhslToOklch, okhslToSrgb, okhstToOkhsl, oklabToOkhsl, parseHexAlpha, relativeLuminanceFromLinearRgb, srgbToHex, srgbToOkhsl } from "@tenphi/glaze";
 
 //#region src/components/fields/color/color.ts

package/dist/components/fields/color/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 
 //#region src/components/fields/color/context.ts

package/dist/components/form/FieldWrapper/FieldWrapper.d.ts

@@ -16,6 +16,7 @@ declare const FieldWrapper: react.ForwardRefExoticComponent<ValidationProps & {
   as?: keyof HTMLElementTagNameMap;
   styles?: _tenphi_tasty0.Styles;
   isRequired?: boolean;
+  isOptional?: boolean;
   isDisabled?: boolean;
   fieldProps?: Props;
   isHidden?: boolean;
@@ -28,8 +29,7 @@ declare const FieldWrapper: react.ForwardRefExoticComponent<ValidationProps & {
   requiredMark?: boolean;
   tooltip?: react.ReactNode;
   extra?: react.ReactNode;
-  necessityLabel?: react.ReactNode;
-  necessityIndicator?: NecessityIndicator;
+  necessityIndicator?: NecessityIndicator | null;
   message?: string | react.ReactNode;
   messageStyles?: _tenphi_tasty0.Styles;
   errorMessage?: string | react.ReactNode;

package/dist/components/form/FieldWrapper/FieldWrapper.js

@@ -1,8 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";
 import { _Text } from "../../content/Text.js";
 import { Space } from "../../layout/Space.js";
+import { useI18n } from "../../../i18n/useI18n.js";
 import { InfoBadge } from "../../content/InfoBadge/InfoBadge.js";
 import { Flex } from "../../layout/Flex.js";
 import { getValidationMods } from "../validation/resolve-validation-props.js";
@@ -86,17 +87,22 @@ const DescriptionElement = tasty({
 * @internal Do not use this component directly.
 */
 const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
-	const { as, labelPosition = "top", label, extra, styles, isRequired, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, errorMessage, Component, isInvalid, isValid, requiredMark = true, tooltip, isHidden, labelSuffix, children } = props;
+	const { as, labelPosition = "top", label, extra, styles, isRequired, isOptional, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, errorMessage, Component, isInvalid, isValid, requiredMark = true, tooltip, isHidden, labelSuffix, children } = props;
+	const { t } = useI18n();
+	const showRequiredMark = !!requiredMark && !!isRequired;
+	const showOptionalNote = !isRequired && !!isOptional;
+	const optionalNote = showOptionalNote ? t("form.optional", "(optional)") : null;
 	const labelComponent = label ? /* @__PURE__ */ jsx(_Label, {
 		as: as === "label" ? "div" : "label",
 		styles: labelStyles,
 		labelPosition,
-		isRequired: requiredMark ? isRequired : false,
+		isRequired: showRequiredMark,
+		isOptional: showOptionalNote,
 		isDisabled,
 		necessityIndicator,
 		isInvalid,
 		isValid,
-		"aria-label": typeof label === "string" ? label : void 0,
+		"aria-label": typeof label === "string" ? optionalNote ? `${label} ${optionalNote}` : label : void 0,
 		...labelProps,
 		children: /* @__PURE__ */ jsxs(Flex, {
 			placeContent: "baseline space-between",
@@ -106,7 +112,8 @@ const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
 				gap: "0.75x",
 				children: [
 					/* @__PURE__ */ jsxs("div", { children: [label, /* @__PURE__ */ jsx(NecessityIndicatorMark, {
-						isRequired: requiredMark ? isRequired : false,
+						isRequired: showRequiredMark,
+						isOptional: showOptionalNote,
 						necessityIndicator
 					})] }),
 					tooltip ? /* @__PURE__ */ jsx(InfoBadge, { tooltip }) : null,

package/dist/components/form/FieldWrapper/FieldWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldWrapper.js","names":["Label","Text"],"sources":["../../../../src/components/form/FieldWrapper/FieldWrapper.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { mergeProps, wrapNodeIfPlain } from '../../../utils/react/index';\nimport { InfoBadge } from '../../content/InfoBadge';\nimport { Text } from '../../content/Text';\nimport { Flex } from '../../layout/Flex';\nimport { Space } from '../../layout/Space';\nimport { Label, NecessityIndicatorMark } from '../Label';\nimport { getValidationMods } from '../validation/index';\n\nimport { CubeFieldWrapperProps } from './types';\n\nconst FieldElement = tasty({\n  qa: 'Field',\n  styles: {\n    display: 'grid',\n    width: 'auto',\n    gridColumns: {\n      '': 'minmax(0, 1fr)',\n      'has-sider': '($full-label-width, auto) minmax(0, 1fr)',\n      'has-split': 'auto auto',\n    },\n    gap: 0,\n    placeItems: {\n      '': 'baseline stretch',\n      'has-split': 'center',\n    },\n    placeContent: {\n      '': 'initial',\n      'has-split': 'space-between',\n    },\n    '$full-label-width': '($label-width + 1x)',\n\n    LabelArea: {\n      display: 'block',\n      width: {\n        '': 'initial',\n        'has-sider': '$label-width',\n      },\n      margin: {\n        '': '1x bottom',\n        'has-sider': '1x right',\n        'has-split': '1x right',\n        ':empty': '0',\n      },\n    },\n\n    InputArea: {\n      display: 'block',\n      flow: 'column',\n      gap: '.5x',\n      gridColumn: {\n        '': 'initial',\n        'has-sider': 2,\n        'has-split': 2,\n      },\n    },\n  },\n});\n\nif (process.env.NODE_ENV === 'development') {\n  FieldElement.displayName = 'FieldWrapperElement';\n}\n\nconst MessageElement = tasty({\n  qa: 'FieldMessage',\n  styles: {\n    preset: 't4',\n    color: {\n      '': '#dark-02',\n      invalid: '#danger-text',\n      valid: '#success-text',\n      disabled: '#dark.40',\n    },\n    textAlign: 'left',\n    userSelect: 'none',\n  },\n});\n\nconst DescriptionElement = tasty({\n  qa: 'FieldDescription',\n  styles: {\n    preset: 't4',\n    color: '#dark-03',\n    textAlign: 'left',\n    userSelect: 'none',\n  },\n});\n\n/**\n * A wrapper for form fields to provide additional decoration for inputs.\n * @internal Do not use this component directly.\n */\nexport const FieldWrapper = forwardRef(function FieldWrapper(\n  props: CubeFieldWrapperProps,\n  ref,\n) {\n  const {\n    as,\n    labelPosition = 'top',\n    label,\n    extra,\n    styles,\n    isRequired,\n    isDisabled,\n    labelStyles,\n    necessityIndicator,\n    labelProps,\n    fieldProps,\n    message,\n    messageStyles,\n    description,\n    errorMessage,\n    Component,\n    isInvalid,\n    isValid,\n    requiredMark = true,\n    tooltip,\n    isHidden,\n    labelSuffix,\n    children,\n  } = props;\n\n  const labelComponent = label ? (\n    <Label\n      as={as === 'label' ? 'div' : 'label'}\n      styles={labelStyles}\n      labelPosition={labelPosition}\n      isRequired={requiredMark ? isRequired : false}\n      isDisabled={isDisabled}\n      necessityIndicator={necessityIndicator}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      aria-label={typeof label === 'string' ? label : undefined}\n      {...labelProps}\n    >\n      <Flex placeContent=\"baseline space-between\" width=\"100%\">\n        <Space placeItems=\"center\" gap=\"0.75x\">\n          <div>\n            {label}\n            {/*\n              `Label` can only append the marker itself when its child is plain\n              text, and the tree below is not — so it is placed here, against\n              the label text, rather than after the full-width `Flex`.\n            */}\n            <NecessityIndicatorMark\n              isRequired={requiredMark ? isRequired : false}\n              necessityIndicator={necessityIndicator}\n            />\n          </div>\n\n          {tooltip ? <InfoBadge tooltip={tooltip} /> : null}\n\n          {labelSuffix ? <div>{labelSuffix}</div> : null}\n        </Space>\n\n        {extra && <Text preset=\"t3\">{extra}</Text>}\n      </Flex>\n    </Label>\n  ) : null;\n\n  // Create description component with proper styling\n  const createDescriptionComponent = () => {\n    if (!description) return null;\n\n    return (\n      <DescriptionElement data-element=\"Description\">\n        {wrapNodeIfPlain(description, () => (\n          <span>{description}</span>\n        ))}\n      </DescriptionElement>\n    );\n  };\n\n  // Description positioning based on label position\n  const descriptionForLabel =\n    labelPosition === 'side' || labelPosition === 'split'\n      ? createDescriptionComponent()\n      : null;\n  const descriptionForInput =\n    labelPosition === 'top' ? createDescriptionComponent() : null;\n\n  const mods = {\n    'has-sider': labelPosition === 'side',\n    'has-split': labelPosition === 'split',\n    'has-description': !!description,\n    ...getValidationMods({ isInvalid, isValid }),\n  };\n\n  // Determine which message to display (errorMessage takes precedence, then message for backward compatibility)\n  const displayMessage = errorMessage || message;\n  const isErrorMessage = !!errorMessage;\n\n  // Merge fieldProps with styles to ensure both are applied\n  const mergedFieldProps = styles\n    ? mergeProps(fieldProps, { styles })\n    : fieldProps;\n\n  return (\n    <>\n      <FieldElement\n        ref={ref}\n        as={as ?? 'div'}\n        mods={mods}\n        isHidden={isHidden}\n        {...mergedFieldProps}\n      >\n        {labelComponent || descriptionForLabel ? (\n          <div data-element=\"LabelArea\">\n            {labelComponent}\n            {descriptionForLabel}\n          </div>\n        ) : null}\n        <div data-element=\"InputArea\">\n          {Component}\n          {descriptionForInput}\n          {displayMessage && !isDisabled && (\n            <MessageElement\n              mods={{\n                ...mods,\n                // Force invalid state for errorMessage regardless of the validation state\n                invalid: isErrorMessage || !!isInvalid,\n              }}\n              styles={messageStyles}\n              role={isErrorMessage || isInvalid ? 'alert' : undefined}\n            >\n              {displayMessage}\n            </MessageElement>\n          )}\n        </div>\n      </FieldElement>\n      {children}\n    </>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"FieldWrapper.js","names":["Label","Text"],"sources":["../../../../src/components/form/FieldWrapper/FieldWrapper.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { mergeProps, wrapNodeIfPlain } from '../../../utils/react/index';\nimport { InfoBadge } from '../../content/InfoBadge';\nimport { Text } from '../../content/Text';\nimport { Flex } from '../../layout/Flex';\nimport { Space } from '../../layout/Space';\nimport { Label, NecessityIndicatorMark } from '../Label';\nimport { getValidationMods } from '../validation/index';\n\nimport { CubeFieldWrapperProps } from './types';\n\nconst FieldElement = tasty({\n  qa: 'Field',\n  styles: {\n    display: 'grid',\n    width: 'auto',\n    gridColumns: {\n      '': 'minmax(0, 1fr)',\n      'has-sider': '($full-label-width, auto) minmax(0, 1fr)',\n      'has-split': 'auto auto',\n    },\n    gap: 0,\n    placeItems: {\n      '': 'baseline stretch',\n      'has-split': 'center',\n    },\n    placeContent: {\n      '': 'initial',\n      'has-split': 'space-between',\n    },\n    '$full-label-width': '($label-width + 1x)',\n\n    LabelArea: {\n      display: 'block',\n      width: {\n        '': 'initial',\n        'has-sider': '$label-width',\n      },\n      margin: {\n        '': '1x bottom',\n        'has-sider': '1x right',\n        'has-split': '1x right',\n        ':empty': '0',\n      },\n    },\n\n    InputArea: {\n      display: 'block',\n      flow: 'column',\n      gap: '.5x',\n      gridColumn: {\n        '': 'initial',\n        'has-sider': 2,\n        'has-split': 2,\n      },\n    },\n  },\n});\n\nif (process.env.NODE_ENV === 'development') {\n  FieldElement.displayName = 'FieldWrapperElement';\n}\n\nconst MessageElement = tasty({\n  qa: 'FieldMessage',\n  styles: {\n    preset: 't4',\n    color: {\n      '': '#dark-02',\n      invalid: '#danger-text',\n      valid: '#success-text',\n      disabled: '#dark.40',\n    },\n    textAlign: 'left',\n    userSelect: 'none',\n  },\n});\n\nconst DescriptionElement = tasty({\n  qa: 'FieldDescription',\n  styles: {\n    preset: 't4',\n    color: '#dark-03',\n    textAlign: 'left',\n    userSelect: 'none',\n  },\n});\n\n/**\n * A wrapper for form fields to provide additional decoration for inputs.\n * @internal Do not use this component directly.\n */\nexport const FieldWrapper = forwardRef(function FieldWrapper(\n  props: CubeFieldWrapperProps,\n  ref,\n) {\n  const {\n    as,\n    labelPosition = 'top',\n    label,\n    extra,\n    styles,\n    isRequired,\n    isOptional,\n    isDisabled,\n    labelStyles,\n    necessityIndicator,\n    labelProps,\n    fieldProps,\n    message,\n    messageStyles,\n    description,\n    errorMessage,\n    Component,\n    isInvalid,\n    isValid,\n    requiredMark = true,\n    tooltip,\n    isHidden,\n    labelSuffix,\n    children,\n  } = props;\n\n  const { t } = useI18n();\n\n  // `requiredMark={false}` drops the required marker, but the field is still\n  // required — so the optional note has to keep losing to it rather than\n  // stepping into the gap and labelling a required field optional.\n  const showRequiredMark = !!requiredMark && !!isRequired;\n  const showOptionalNote = !isRequired && !!isOptional;\n\n  // The `aria-label` below is what the input is named by, so it shadows the\n  // label's own content — including the `(optional)` note, which is the only\n  // thing saying the field is optional. A required field needs no such help:\n  // `aria-required` on the input already announces it.\n  const optionalNote = showOptionalNote\n    ? t('form.optional', '(optional)')\n    : null;\n\n  const labelComponent = label ? (\n    <Label\n      as={as === 'label' ? 'div' : 'label'}\n      styles={labelStyles}\n      labelPosition={labelPosition}\n      isRequired={showRequiredMark}\n      isOptional={showOptionalNote}\n      isDisabled={isDisabled}\n      necessityIndicator={necessityIndicator}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      aria-label={\n        typeof label === 'string'\n          ? optionalNote\n            ? `${label} ${optionalNote}`\n            : label\n          : undefined\n      }\n      {...labelProps}\n    >\n      <Flex placeContent=\"baseline space-between\" width=\"100%\">\n        <Space placeItems=\"center\" gap=\"0.75x\">\n          <div>\n            {label}\n            {/*\n              `Label` can only append the marker itself when its child is plain\n              text, and the tree below is not — so it is placed here, against\n              the label text, rather than after the full-width `Flex`.\n            */}\n            <NecessityIndicatorMark\n              isRequired={showRequiredMark}\n              isOptional={showOptionalNote}\n              necessityIndicator={necessityIndicator}\n            />\n          </div>\n\n          {tooltip ? <InfoBadge tooltip={tooltip} /> : null}\n\n          {labelSuffix ? <div>{labelSuffix}</div> : null}\n        </Space>\n\n        {extra && <Text preset=\"t3\">{extra}</Text>}\n      </Flex>\n    </Label>\n  ) : null;\n\n  // Create description component with proper styling\n  const createDescriptionComponent = () => {\n    if (!description) return null;\n\n    return (\n      <DescriptionElement data-element=\"Description\">\n        {wrapNodeIfPlain(description, () => (\n          <span>{description}</span>\n        ))}\n      </DescriptionElement>\n    );\n  };\n\n  // Description positioning based on label position\n  const descriptionForLabel =\n    labelPosition === 'side' || labelPosition === 'split'\n      ? createDescriptionComponent()\n      : null;\n  const descriptionForInput =\n    labelPosition === 'top' ? createDescriptionComponent() : null;\n\n  const mods = {\n    'has-sider': labelPosition === 'side',\n    'has-split': labelPosition === 'split',\n    'has-description': !!description,\n    ...getValidationMods({ isInvalid, isValid }),\n  };\n\n  // Determine which message to display (errorMessage takes precedence, then message for backward compatibility)\n  const displayMessage = errorMessage || message;\n  const isErrorMessage = !!errorMessage;\n\n  // Merge fieldProps with styles to ensure both are applied\n  const mergedFieldProps = styles\n    ? mergeProps(fieldProps, { styles })\n    : fieldProps;\n\n  return (\n    <>\n      <FieldElement\n        ref={ref}\n        as={as ?? 'div'}\n        mods={mods}\n        isHidden={isHidden}\n        {...mergedFieldProps}\n      >\n        {labelComponent || descriptionForLabel ? (\n          <div data-element=\"LabelArea\">\n            {labelComponent}\n            {descriptionForLabel}\n          </div>\n        ) : null}\n        <div data-element=\"InputArea\">\n          {Component}\n          {descriptionForInput}\n          {displayMessage && !isDisabled && (\n            <MessageElement\n              mods={{\n                ...mods,\n                // Force invalid state for errorMessage regardless of the validation state\n                invalid: isErrorMessage || !!isInvalid,\n              }}\n              styles={messageStyles}\n              role={isErrorMessage || isInvalid ? 'alert' : undefined}\n            >\n              {displayMessage}\n            </MessageElement>\n          )}\n        </div>\n      </FieldElement>\n      {children}\n    </>\n  );\n});\n"],"mappings":"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"}

package/dist/components/form/FieldWrapper/types.d.ts

@@ -10,7 +10,8 @@ import { ReactElement, ReactNode } from "react";
 type CubeFieldWrapperProps = ValidationProps & {
   as?: keyof HTMLElementTagNameMap;
   styles?: Styles; /** Whether the input is required */
-  isRequired?: boolean; /** Whether the input is disabled */
+  isRequired?: boolean; /** Whether the input is optional. Marks the label with an `(optional)` note. */
+  isOptional?: boolean; /** Whether the input is disabled */
   isDisabled?: boolean;
   fieldProps?: Props;
   isHidden?: boolean;
@@ -23,8 +24,7 @@ type CubeFieldWrapperProps = ValidationProps & {
   requiredMark?: boolean;
   tooltip?: ReactNode;
   extra?: ReactNode;
-  necessityLabel?: ReactNode;
-  necessityIndicator?: NecessityIndicator;
+  necessityIndicator?: NecessityIndicator | null;
   /**
    * @deprecated Use `errorMessage` for error messages and `description` for field descriptions instead.
    * Custom message for the field. It will be placed below the label and the input

package/dist/components/form/Form/Field.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { warn } from "../../../utils/warnings.js";
 import { useValidationProps } from "../validation/use-validation-props.js";
@@ -59,12 +59,13 @@ function getValueProps(type, value, onChange, allowsCustomValue) {
 }
 function Field(props) {
 	const allProps = useValidationProps(useFormProps(props));
-	let { children, form, label, extra, necessityLabel, necessityIndicator, tooltip, isHidden, isDisabled, isLoading, styles, labelProps, labelPosition = "top", labelStyles, labelSuffix } = allProps;
+	let { children, form, label, extra, necessityIndicator, tooltip, isHidden, isDisabled, isLoading, isOptional, styles, labelProps, labelPosition = "top", labelStyles, labelSuffix } = allProps;
 	if (typeof children === "function") children = children(form);
 	let child = children == null ? null : Children.only(children);
 	const inputType = (child?.type)?.cubeInputType ?? "Text";
 	const __props = useField(allProps, { defaultValidationTrigger: getDefaultValidateTrigger(inputType) });
 	const { isInvalid, isValid, message, description, errorMessage, isRequired, name, id } = __props;
+	const resolvedNecessityIndicator = necessityIndicator !== void 0 ? necessityIndicator : __props.necessityIndicator;
 	if (!child) return null;
 	if (id) {
 		if (!labelProps) labelProps = {};
@@ -75,9 +76,9 @@ function Field(props) {
 		isDisabled,
 		isInvalid,
 		isValid,
-		necessityIndicator,
-		necessityLabel,
+		necessityIndicator: resolvedNecessityIndicator,
 		isRequired,
+		isOptional,
 		label,
 		labelProps,
 		extra,
@@ -106,11 +107,12 @@ function Field(props) {
 		name,
 		onBlur: __props.onBlur
 	};
-	if (necessityIndicator != null) newProps.necessityIndicator = necessityIndicator;
-	if (necessityLabel) newProps.necessityLabel = necessityLabel;
+	const childDeclaresNecessity = child.props.isRequired != null || child.props.necessityIndicator !== void 0;
+	if (resolvedNecessityIndicator !== void 0 && !(resolvedNecessityIndicator === null && childDeclaresNecessity)) newProps.necessityIndicator = resolvedNecessityIndicator;
 	if (isInvalid) newProps.isInvalid = isInvalid;
 	if (isValid) newProps.isValid = isValid;
 	if (isRequired) newProps.isRequired = isRequired;
+	if (isOptional != null) newProps.isOptional = isOptional;
 	if (label) newProps.label = label;
 	if (extra) newProps.extra = extra;
 	if (tooltip) newProps.tooltip = tooltip;

package/dist/components/form/Form/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","names":[],"sources":["../../../../src/components/form/Form/Field.tsx"],"sourcesContent":["import { Styles } from '@tenphi/tasty';\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  PropsWithChildren,\n  ReactElement,\n  useContext,\n  useMemo,\n} from 'react';\n\nimport { FieldBaseProps, LabelPosition } from '../../../shared/index';\nimport { mergeProps } from '../../../utils/react/index';\nimport { warn } from '../../../utils/warnings';\nimport { FieldWrapper } from '../FieldWrapper/index';\nimport { useValidationProps } from '../validation/index';\n\nimport { useFormProps } from './Form';\nimport { FieldTypes } from './types';\nimport { useField } from './use-field/index';\nimport { CubeFormInstance } from './use-form';\n\nfunction getDefaultValidateTrigger(type) {\n  type = type || '';\n\n  return type === 'Number' || type.includes('Text') ? 'onBlur' : 'onChange';\n}\n\nfunction getValueProps(\n  type?: string,\n  value?,\n  onChange?,\n  allowsCustomValue?: boolean,\n) {\n  type = type || '';\n\n  if (type === 'Number') {\n    return {\n      value: value != null ? value : null,\n      onChange: onChange,\n    };\n  } else if (type === 'Text') {\n    return {\n      value:\n        typeof value === 'string' || typeof value === 'number'\n          ? String(value)\n          : '',\n      onChange: onChange,\n    };\n  } else if (type === 'Checkbox') {\n    return {\n      isSelected: value != null ? value : false,\n      isIndeterminate: false,\n      onChange: onChange,\n    };\n  } else if (type === 'CheckboxGroup') {\n    return {\n      value: value != null ? value : [],\n      onChange: onChange,\n    };\n  } else if (type === 'RangeSlider') {\n    return {\n      value: value != null ? value : undefined,\n      onChange: onChange,\n    };\n  } else if (type === 'ComboBox') {\n    return {\n      selectedKey: !allowsCustomValue ? value ?? null : undefined,\n      inputValue: allowsCustomValue ? value ?? '' : undefined,\n      onInputChange(val) {\n        if (!allowsCustomValue) {\n          return;\n        }\n\n        onChange(val);\n      },\n      onSelectionChange(val: string) {\n        if (val == null && allowsCustomValue) {\n          return;\n        }\n\n        onChange(val);\n      },\n    };\n  } else if (type === 'Select') {\n    return {\n      selectedKey: value ?? null,\n      onSelectionChange: onChange,\n    };\n  }\n\n  return {\n    value: value != null ? value : null,\n    onChange,\n  };\n}\n\nexport interface CubeFieldProps<T extends FieldTypes> extends FieldBaseProps {\n  /** The initial value of the input. */\n  defaultValue?: any;\n  styles?: Styles;\n  children?: ReactElement | ((CubeFormInstance) => ReactElement);\n  /** The form instance */\n  form?: CubeFormInstance<T>;\n}\n\ninterface CubeFullFieldProps<T extends FieldTypes> extends CubeFieldProps<T> {\n  form: CubeFormInstance<T>;\n}\n\ninterface CubeReplaceFieldProps<T extends FieldTypes>\n  extends CubeFieldProps<T> {\n  isRequired?: boolean;\n  onChange?: (any) => void;\n  onSelectionChange?: (any) => void;\n  onBlur: () => void;\n  labelPosition?: LabelPosition;\n}\n\nexport function Field<T extends FieldTypes>(props: CubeFieldProps<T>) {\n  const allProps: CubeFullFieldProps<T> = useValidationProps(\n    useFormProps(props),\n  );\n\n  let {\n    children,\n    form,\n    label,\n    extra,\n    necessityLabel,\n    necessityIndicator,\n    tooltip,\n    isHidden,\n    isDisabled,\n    isLoading,\n    styles,\n    labelProps,\n    labelPosition = 'top',\n    labelStyles,\n    labelSuffix,\n  } = allProps;\n\n  if (typeof children === 'function') {\n    children = children(form);\n  }\n\n  let child = children == null ? null : Children.only(children);\n\n  const inputType = (child?.type as any)?.cubeInputType ?? 'Text';\n\n  const __props = useField<T, CubeFullFieldProps<T>>(allProps, {\n    defaultValidationTrigger: getDefaultValidateTrigger(inputType),\n  });\n\n  const {\n    isInvalid,\n    isValid,\n    message,\n    description,\n    errorMessage,\n    isRequired,\n    name,\n    id,\n  } = __props;\n\n  if (!child) return null;\n\n  if (id) {\n    if (!labelProps) {\n      labelProps = {};\n    }\n\n    labelProps.for = id;\n  }\n\n  if (__props.nonInput) {\n    return (\n      <LegacyFieldProvider>\n        <FieldWrapper\n          isHidden={isHidden}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          isValid={isValid}\n          necessityIndicator={necessityIndicator}\n          necessityLabel={necessityLabel}\n          isRequired={isRequired}\n          label={label}\n          labelProps={labelProps}\n          extra={extra}\n          tooltip={tooltip}\n          message={message}\n          description={description}\n          errorMessage={errorMessage}\n          Component={child}\n          styles={styles}\n          labelPosition={labelPosition}\n          labelStyles={labelStyles}\n          labelSuffix={labelSuffix}\n        />\n      </LegacyFieldProvider>\n    );\n  }\n\n  if (!form) {\n    warn(\n      'Form Field requires declared form instance if field name is specified',\n    );\n\n    return null;\n  }\n\n  if (!__props.field) {\n    return (\n      <LegacyFieldProvider>\n        {cloneElement(\n          child,\n          mergeProps(child.props as any, {\n            ...getValueProps(inputType),\n            label: name,\n            name,\n            id,\n          }),\n        )}\n      </LegacyFieldProvider>\n    );\n  }\n\n  const newProps: CubeReplaceFieldProps<T> = {\n    id,\n    name,\n    onBlur: __props.onBlur,\n  };\n\n  if (necessityIndicator != null) {\n    newProps.necessityIndicator = necessityIndicator;\n  }\n\n  if (necessityLabel) {\n    newProps.necessityLabel = necessityLabel;\n  }\n\n  if (isInvalid) {\n    newProps.isInvalid = isInvalid;\n  }\n\n  if (isValid) {\n    newProps.isValid = isValid;\n  }\n\n  if (isRequired) {\n    newProps.isRequired = isRequired;\n  }\n\n  if (label) {\n    newProps.label = label;\n  }\n\n  if (extra) {\n    newProps.extra = extra;\n  }\n\n  if (tooltip) {\n    newProps.tooltip = tooltip;\n  }\n\n  if (message !== undefined) {\n    newProps.message = message;\n  }\n\n  if (errorMessage !== undefined) {\n    newProps.errorMessage = errorMessage;\n  }\n\n  if (description !== undefined) {\n    newProps.description = description;\n  }\n\n  if (isHidden != null) {\n    newProps.isHidden = isHidden;\n  }\n\n  if (isDisabled != null) {\n    newProps.isDisabled = isDisabled;\n  }\n\n  if (isLoading != null) {\n    newProps.isLoading = isLoading;\n  }\n\n  Object.assign(\n    newProps,\n    getValueProps(\n      inputType,\n      __props.field?.value,\n      __props.onChange,\n      (child.props as any).allowsCustomValue,\n    ),\n  );\n\n  const { onChange, onSelectionChange, ...childProps } = child.props as any;\n\n  // onChange event passed to the child should be executed after Form onChange logic\n  return (\n    <LegacyFieldProvider>\n      {cloneElement(\n        child,\n        mergeProps(\n          childProps,\n          newProps,\n          onChange ? { onChange: __props.onChange } : {},\n          onSelectionChange ? { onSelectionChange: __props.onChange } : {},\n        ),\n      )}\n    </LegacyFieldProvider>\n  );\n}\n\ntype LegacyFieldContextValue = {\n  insideLegacyField: boolean;\n};\n\nconst LegacyFieldContext = createContext<LegacyFieldContextValue>({\n  insideLegacyField: false,\n});\n\nfunction LegacyFieldProvider(props: PropsWithChildren<unknown>) {\n  const value = useMemo(() => ({ insideLegacyField: true }), []);\n  return (\n    <LegacyFieldContext.Provider value={value}>\n      {props.children}\n    </LegacyFieldContext.Provider>\n  );\n}\n\nexport function useInsideLegacyField() {\n  const { insideLegacyField = false } = useContext(LegacyFieldContext);\n\n  return insideLegacyField;\n}\n"],"mappings":"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"}
+{"version":3,"file":"Field.js","names":[],"sources":["../../../../src/components/form/Form/Field.tsx"],"sourcesContent":["import { Styles } from '@tenphi/tasty';\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  PropsWithChildren,\n  ReactElement,\n  useContext,\n  useMemo,\n} from 'react';\n\nimport { FieldBaseProps, LabelPosition } from '../../../shared/index';\nimport { mergeProps } from '../../../utils/react/index';\nimport { warn } from '../../../utils/warnings';\nimport { FieldWrapper } from '../FieldWrapper/index';\nimport { useValidationProps } from '../validation/index';\n\nimport { useFormProps } from './Form';\nimport { FieldTypes } from './types';\nimport { useField } from './use-field/index';\nimport { CubeFormInstance } from './use-form';\n\nfunction getDefaultValidateTrigger(type) {\n  type = type || '';\n\n  return type === 'Number' || type.includes('Text') ? 'onBlur' : 'onChange';\n}\n\nfunction getValueProps(\n  type?: string,\n  value?,\n  onChange?,\n  allowsCustomValue?: boolean,\n) {\n  type = type || '';\n\n  if (type === 'Number') {\n    return {\n      value: value != null ? value : null,\n      onChange: onChange,\n    };\n  } else if (type === 'Text') {\n    return {\n      value:\n        typeof value === 'string' || typeof value === 'number'\n          ? String(value)\n          : '',\n      onChange: onChange,\n    };\n  } else if (type === 'Checkbox') {\n    return {\n      isSelected: value != null ? value : false,\n      isIndeterminate: false,\n      onChange: onChange,\n    };\n  } else if (type === 'CheckboxGroup') {\n    return {\n      value: value != null ? value : [],\n      onChange: onChange,\n    };\n  } else if (type === 'RangeSlider') {\n    return {\n      value: value != null ? value : undefined,\n      onChange: onChange,\n    };\n  } else if (type === 'ComboBox') {\n    return {\n      selectedKey: !allowsCustomValue ? value ?? null : undefined,\n      inputValue: allowsCustomValue ? value ?? '' : undefined,\n      onInputChange(val) {\n        if (!allowsCustomValue) {\n          return;\n        }\n\n        onChange(val);\n      },\n      onSelectionChange(val: string) {\n        if (val == null && allowsCustomValue) {\n          return;\n        }\n\n        onChange(val);\n      },\n    };\n  } else if (type === 'Select') {\n    return {\n      selectedKey: value ?? null,\n      onSelectionChange: onChange,\n    };\n  }\n\n  return {\n    value: value != null ? value : null,\n    onChange,\n  };\n}\n\nexport interface CubeFieldProps<T extends FieldTypes> extends FieldBaseProps {\n  /** The initial value of the input. */\n  defaultValue?: any;\n  styles?: Styles;\n  children?: ReactElement | ((CubeFormInstance) => ReactElement);\n  /** The form instance */\n  form?: CubeFormInstance<T>;\n}\n\ninterface CubeFullFieldProps<T extends FieldTypes> extends CubeFieldProps<T> {\n  form: CubeFormInstance<T>;\n}\n\ninterface CubeReplaceFieldProps<T extends FieldTypes>\n  extends CubeFieldProps<T> {\n  isRequired?: boolean;\n  isOptional?: boolean;\n  onChange?: (any) => void;\n  onSelectionChange?: (any) => void;\n  onBlur: () => void;\n  labelPosition?: LabelPosition;\n}\n\nexport function Field<T extends FieldTypes>(props: CubeFieldProps<T>) {\n  const allProps: CubeFullFieldProps<T> = useValidationProps(\n    useFormProps(props),\n  );\n\n  let {\n    children,\n    form,\n    label,\n    extra,\n    necessityIndicator,\n    tooltip,\n    isHidden,\n    isDisabled,\n    isLoading,\n    isOptional,\n    styles,\n    labelProps,\n    labelPosition = 'top',\n    labelStyles,\n    labelSuffix,\n  } = allProps;\n\n  if (typeof children === 'function') {\n    children = children(form);\n  }\n\n  let child = children == null ? null : Children.only(children);\n\n  const inputType = (child?.type as any)?.cubeInputType ?? 'Text';\n\n  const __props = useField<T, CubeFullFieldProps<T>>(allProps, {\n    defaultValidationTrigger: getDefaultValidateTrigger(inputType),\n  });\n\n  const {\n    isInvalid,\n    isValid,\n    message,\n    description,\n    errorMessage,\n    isRequired,\n    name,\n    id,\n  } = __props;\n\n  // `useField` reports `null` here when `isRequired` came from a `required` rule\n  // rather than from the props, which suppresses the label marker. An indicator\n  // set on the `Field` itself is an explicit request and outranks that.\n  const resolvedNecessityIndicator =\n    necessityIndicator !== undefined\n      ? necessityIndicator\n      : __props.necessityIndicator;\n\n  if (!child) return null;\n\n  if (id) {\n    if (!labelProps) {\n      labelProps = {};\n    }\n\n    labelProps.for = id;\n  }\n\n  if (__props.nonInput) {\n    return (\n      <LegacyFieldProvider>\n        <FieldWrapper\n          isHidden={isHidden}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          isValid={isValid}\n          necessityIndicator={resolvedNecessityIndicator}\n          isRequired={isRequired}\n          isOptional={isOptional}\n          label={label}\n          labelProps={labelProps}\n          extra={extra}\n          tooltip={tooltip}\n          message={message}\n          description={description}\n          errorMessage={errorMessage}\n          Component={child}\n          styles={styles}\n          labelPosition={labelPosition}\n          labelStyles={labelStyles}\n          labelSuffix={labelSuffix}\n        />\n      </LegacyFieldProvider>\n    );\n  }\n\n  if (!form) {\n    warn(\n      'Form Field requires declared form instance if field name is specified',\n    );\n\n    return null;\n  }\n\n  if (!__props.field) {\n    return (\n      <LegacyFieldProvider>\n        {cloneElement(\n          child,\n          mergeProps(child.props as any, {\n            ...getValueProps(inputType),\n            label: name,\n            name,\n            id,\n          }),\n        )}\n      </LegacyFieldProvider>\n    );\n  }\n\n  const newProps: CubeReplaceFieldProps<T> = {\n    id,\n    name,\n    onBlur: __props.onBlur,\n  };\n\n  // A `null` indicator suppresses the marker for a rule-derived `isRequired`. It\n  // must not override a necessity the child input declares for itself, which the\n  // `useField` above never saw.\n  const childDeclaresNecessity =\n    (child.props as any).isRequired != null ||\n    (child.props as any).necessityIndicator !== undefined;\n\n  if (\n    resolvedNecessityIndicator !== undefined &&\n    !(resolvedNecessityIndicator === null && childDeclaresNecessity)\n  ) {\n    newProps.necessityIndicator = resolvedNecessityIndicator;\n  }\n\n  if (isInvalid) {\n    newProps.isInvalid = isInvalid;\n  }\n\n  if (isValid) {\n    newProps.isValid = isValid;\n  }\n\n  if (isRequired) {\n    newProps.isRequired = isRequired;\n  }\n\n  if (isOptional != null) {\n    newProps.isOptional = isOptional;\n  }\n\n  if (label) {\n    newProps.label = label;\n  }\n\n  if (extra) {\n    newProps.extra = extra;\n  }\n\n  if (tooltip) {\n    newProps.tooltip = tooltip;\n  }\n\n  if (message !== undefined) {\n    newProps.message = message;\n  }\n\n  if (errorMessage !== undefined) {\n    newProps.errorMessage = errorMessage;\n  }\n\n  if (description !== undefined) {\n    newProps.description = description;\n  }\n\n  if (isHidden != null) {\n    newProps.isHidden = isHidden;\n  }\n\n  if (isDisabled != null) {\n    newProps.isDisabled = isDisabled;\n  }\n\n  if (isLoading != null) {\n    newProps.isLoading = isLoading;\n  }\n\n  Object.assign(\n    newProps,\n    getValueProps(\n      inputType,\n      __props.field?.value,\n      __props.onChange,\n      (child.props as any).allowsCustomValue,\n    ),\n  );\n\n  const { onChange, onSelectionChange, ...childProps } = child.props as any;\n\n  // onChange event passed to the child should be executed after Form onChange logic\n  return (\n    <LegacyFieldProvider>\n      {cloneElement(\n        child,\n        mergeProps(\n          childProps,\n          newProps,\n          onChange ? { onChange: __props.onChange } : {},\n          onSelectionChange ? { onSelectionChange: __props.onChange } : {},\n        ),\n      )}\n    </LegacyFieldProvider>\n  );\n}\n\ntype LegacyFieldContextValue = {\n  insideLegacyField: boolean;\n};\n\nconst LegacyFieldContext = createContext<LegacyFieldContextValue>({\n  insideLegacyField: false,\n});\n\nfunction LegacyFieldProvider(props: PropsWithChildren<unknown>) {\n  const value = useMemo(() => ({ insideLegacyField: true }), []);\n  return (\n    <LegacyFieldContext.Provider value={value}>\n      {props.children}\n    </LegacyFieldContext.Provider>\n  );\n}\n\nexport function useInsideLegacyField() {\n  const { insideLegacyField = false } = useContext(LegacyFieldContext);\n\n  return insideLegacyField;\n}\n"],"mappings":"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"}

package/dist/components/form/Form/Form.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { Provider, useProviderProps } from "../../../provider.js";

package/dist/components/form/Form/ResetButton/ResetButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { mergeProps } from "../../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useProviderProps } from "../../../../provider.js";

package/dist/components/form/Form/SubmitButton/SubmitButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { useProviderProps } from "../../../../provider.js";
 import { Button } from "../../../actions/Button/Button.js";
 import { useFormProps } from "../Form.js";

package/dist/components/form/Form/SubmitError.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { FormContext } from "./Form.js";
 import { Alert } from "../../content/Alert/Alert.js";

package/dist/components/form/Form/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { useForm } from "./use-form.js";
 import { FormContext, _Form, useFormProps } from "./Form.js";
 import { useField } from "./use-field/use-field.js";

package/dist/components/form/Form/use-field/types.d.ts

@@ -1,5 +1,5 @@
 
-import { FieldCoreProps, ValidateTrigger, ValidationProps, ValidationState } from "../../../../shared/form.js";
+import { FieldCoreProps, NecessityIndicator, ValidateTrigger, ValidationProps, ValidationState } from "../../../../shared/form.js";
 import "../../../../shared/index.js";
 import { CubeFieldData, FieldTypes } from "../types.js";
 import { CubeFormInstance } from "../use-form.js";
@@ -20,6 +20,11 @@ interface UseFieldProps<T extends FieldTypes> extends FieldCoreProps, Validation
   showValid?: boolean;
   /** On which event perform the validation for the field */
   validateTrigger?: ValidateTrigger;
+  /**
+   * The type of necessity indicator. Read only to tell an explicit request for
+   * one apart from an omitted prop — see `suppressNecessityIndicator`.
+   */
+  necessityIndicator?: NecessityIndicator | null;
 }
 type FieldReturnValue<T extends FieldTypes> = ValidationProps & {
   id: string;
@@ -36,6 +41,13 @@ type FieldReturnValue<T extends FieldTypes> = ValidationProps & {
   description?: ReactNode; /** Error message for the field. Always displayed in danger state regardless of validation state */
   errorMessage?: ReactNode;
   isRequired?: boolean;
+  /**
+   * Set to `null` when `isRequired` was derived from a `required` rule rather
+   * than authored, which suppresses the label marker while leaving validation
+   * and `aria-required` in place. Absent otherwise, so an authored indicator
+   * survives the merge in `useFieldProps`.
+   */
+  necessityIndicator?: NecessityIndicator | null;
   onBlur: () => void;
   nonInput: boolean;
   field?: CubeFieldData<keyof FieldTypes & string, T[keyof FieldTypes]>;

package/dist/components/form/Form/use-field/use-field-props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { mergeProps } from "../../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { warn } from "../../../../utils/warnings.js";

package/dist/components/form/Form/use-field/use-field.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.174.0 | Cube Dev Team */
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useIsFirstRender } from "../../../../_internal/hooks/use-is-first-render.js";
 import { resolveValidationProps } from "../../validation/resolve-validation-props.js";
@@ -26,7 +26,7 @@ function removeId(name, id) {
 }
 function useField(props, params) {
 	props = useFormProps(props);
-	let { defaultValue, id, idPrefix, name, form, rules, message, description, errorMessage, validateTrigger = params.defaultValidationTrigger, validationDelay, showValid, shouldUpdate, isRequired: isRequiredProp } = props;
+	let { defaultValue, id, idPrefix, name, form, rules, message, description, errorMessage, validateTrigger = params.defaultValidationTrigger, validationDelay, showValid, shouldUpdate, isRequired: isRequiredProp, necessityIndicator: necessityIndicatorProp } = props;
 	const { isInvalid: isInvalidProp, isValid: isValidProp } = resolveValidationProps(props);
 	const processedRules = useMemo(() => {
 		let finalRules = rules;
@@ -58,6 +58,7 @@ function useField(props, params) {
 	let field = form?.getFieldInstance(fieldName);
 	if (field) field.rules = processedRules;
 	let isRequired = !!processedRules?.find((rule) => "required" in rule && rule.required === true);
+	const suppressNecessityIndicator = isRequired && !isRequiredProp && necessityIndicatorProp === void 0;
 	useEffect(() => {
 		if (!form) return;
 		if (field) form.forceReRender();
@@ -104,6 +105,7 @@ function useField(props, params) {
 		isInvalid: isInvalidProp ?? !!field?.errors?.length,
 		isValid: isValidProp ?? !!(showValid && field?.status === "valid"),
 		...isRequired && { isRequired },
+		...suppressNecessityIndicator && { necessityIndicator: null },
 		message: message !== void 0 ? message : field?.status === "invalid" && field?.errors?.[0],
 		description,
 		errorMessage: errorMessage !== void 0 ? errorMessage : field?.status === "invalid" && field?.errors?.length ? field.errors[0] : void 0,
@@ -118,6 +120,7 @@ function useField(props, params) {
 		fieldId,
 		fieldName,
 		isRequired,
+		suppressNecessityIndicator,
 		message,
 		description,
 		errorMessage,

package/dist/components/form/Form/use-field/use-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-field.js","names":[],"sources":["../../../../../src/components/form/Form/use-field/use-field.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { useEvent, useIsFirstRender } from '../../../../_internal/index';\nimport { ValidateTrigger } from '../../../../shared/index';\nimport { resolveValidationProps } from '../../validation/index';\nimport { useFormProps } from '../Form';\nimport { FieldTypes } from '../types';\nimport { delayValidationRule } from '../validation';\n\nimport { FieldReturnValue, UseFieldProps } from './types';\n\nconst ID_MAP = {};\n\nfunction createId(name) {\n  if (!name) return;\n\n  if (!ID_MAP[name]) {\n    ID_MAP[name] = [];\n  }\n\n  let i = 0;\n  let id;\n\n  do {\n    id = i ? `${name}_${i}` : name;\n    i++;\n  } while (ID_MAP[name].includes(id));\n\n  ID_MAP[name].push(id);\n\n  return id;\n}\n\nfunction removeId(name, id) {\n  if (!ID_MAP[name]) return;\n\n  ID_MAP[name] = ID_MAP[name].filter((_id) => _id !== id);\n}\n\nexport type UseFieldParams = {\n  defaultValidationTrigger?: ValidateTrigger;\n};\n\nexport function useField<T extends FieldTypes, Props extends UseFieldProps<T>>(\n  props: Props,\n  params: UseFieldParams,\n): FieldReturnValue<T> {\n  props = useFormProps(props);\n\n  let {\n    defaultValue,\n    id,\n    idPrefix,\n    name,\n    form,\n    rules,\n    message,\n    description,\n    errorMessage,\n    validateTrigger = params.defaultValidationTrigger,\n    validationDelay,\n    showValid,\n    shouldUpdate,\n    isRequired: isRequiredProp,\n  } = props;\n\n  const { isInvalid: isInvalidProp, isValid: isValidProp } =\n    resolveValidationProps(props);\n\n  const processedRules = useMemo(() => {\n    let finalRules = rules;\n\n    // If isRequired prop is set, ensure there's a required rule\n    if (isRequiredProp) {\n      const hasRequiredRule = finalRules?.some(\n        (rule) => 'required' in rule && rule.required === true,\n      );\n\n      if (!hasRequiredRule) {\n        finalRules = finalRules\n          ? [{ required: true }, ...finalRules]\n          : [{ required: true }];\n      }\n    }\n\n    // Add delay rule if needed\n    if (finalRules && finalRules.length && validationDelay) {\n      return [delayValidationRule(validationDelay), ...finalRules];\n    }\n\n    return finalRules;\n  }, [rules, validationDelay, isRequiredProp]);\n\n  const nonInput = !name;\n  const fieldName: string = name != null ? name : '';\n\n  const isFirstRender = useIsFirstRender();\n  let [fieldId, setFieldId] = useState(\n    id || (idPrefix ? `${idPrefix}_${fieldName}` : fieldName),\n  );\n\n  useEffect(() => {\n    let newId;\n\n    if (!id && !nonInput) {\n      newId = createId(fieldId);\n\n      setFieldId(newId);\n    }\n\n    return () => {\n      if (!id) {\n        removeId(idPrefix ? `${idPrefix}_${fieldName}` : fieldName, newId);\n      }\n\n      if (fieldName && form) {\n        form.removeField(fieldName);\n      }\n    };\n  }, [fieldName]);\n\n  let field = form?.getFieldInstance(fieldName);\n\n  if (field) {\n    field.rules = processedRules;\n  }\n\n  let isRequired = !!processedRules?.find(\n    (rule) => 'required' in rule && rule.required === true,\n  );\n\n  useEffect(() => {\n    if (!form) return;\n\n    if (field) {\n      form.forceReRender();\n    } else {\n      field = form.createField(fieldName);\n    }\n  }, [field]);\n\n  if (form) {\n    if (isFirstRender) {\n      if (!field) {\n        field = form.createField(fieldName, true);\n      }\n\n      if (field?.value == null && defaultValue != null) {\n        form.setFieldValue(fieldName, defaultValue, false, true);\n        form.updateInitialFieldsValue({ [fieldName]: defaultValue });\n\n        field = form?.getFieldInstance(fieldName);\n      }\n    }\n\n    if (!field?.touched && defaultValue != null) {\n      form.setFieldValue(fieldName, defaultValue, false, true);\n    }\n  }\n\n  const onChangeHandler = useEvent((val: any, dontTouch: boolean) => {\n    if (!form) return;\n\n    const field = form.getFieldInstance(fieldName);\n\n    if (shouldUpdate) {\n      const fieldsValue = form.getFieldsValue();\n\n      // check if we should update the value of the field\n      const shouldNotBeUpdated =\n        typeof shouldUpdate === 'boolean'\n          ? !shouldUpdate\n          : !shouldUpdate(fieldsValue, {\n              ...fieldsValue,\n              [fieldName]: val,\n            });\n\n      if (shouldNotBeUpdated) {\n        return;\n      }\n    }\n\n    form.setFieldValue(fieldName, val, !dontTouch);\n\n    if (\n      !dontTouch &&\n      (validateTrigger === 'onChange' ||\n        (field && field.errors && field.errors.length))\n    ) {\n      form.validateField(fieldName).catch(() => {}); // do nothing on fail\n    }\n  });\n\n  const onBlurHandler = useEvent(() => {\n    if (validateTrigger === 'onBlur') {\n      // We need a timeout so the change event can be done.\n      setTimeout(() => {\n        form?.validateField(fieldName).catch(() => {}); // do nothing on fail\n      });\n    }\n  });\n\n  let value = field?.value;\n\n  return useMemo(\n    () => ({\n      id: fieldId,\n      name: fieldName,\n      value,\n      validateTrigger,\n      form,\n      field,\n      nonInput,\n\n      // Explicit validation props always win over the state derived from the form\n      isInvalid: isInvalidProp ?? !!field?.errors?.length,\n      isValid: isValidProp ?? !!(showValid && field?.status === 'valid'),\n      ...(isRequired && { isRequired }),\n      message:\n        message !== undefined\n          ? message\n          : field?.status === 'invalid' && field?.errors?.[0],\n      description,\n      errorMessage:\n        errorMessage !== undefined\n          ? errorMessage\n          : field?.status === 'invalid' && field?.errors?.length\n            ? field.errors[0]\n            : undefined,\n      onBlur: onBlurHandler,\n      onChange: onChangeHandler,\n    }),\n    [\n      form,\n      field,\n      field?.value,\n      field?.errors?.length,\n      field?.status,\n      fieldId,\n      fieldName,\n      isRequired,\n      message,\n      description,\n      errorMessage,\n      onBlurHandler,\n      onChangeHandler,\n      validateTrigger,\n      isInvalidProp,\n      isValidProp,\n      showValid,\n      nonInput,\n    ],\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-field.js","names":[],"sources":["../../../../../src/components/form/Form/use-field/use-field.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { useEvent, useIsFirstRender } from '../../../../_internal/index';\nimport { ValidateTrigger } from '../../../../shared/index';\nimport { resolveValidationProps } from '../../validation/index';\nimport { useFormProps } from '../Form';\nimport { FieldTypes } from '../types';\nimport { delayValidationRule } from '../validation';\n\nimport { FieldReturnValue, UseFieldProps } from './types';\n\nconst ID_MAP = {};\n\nfunction createId(name) {\n  if (!name) return;\n\n  if (!ID_MAP[name]) {\n    ID_MAP[name] = [];\n  }\n\n  let i = 0;\n  let id;\n\n  do {\n    id = i ? `${name}_${i}` : name;\n    i++;\n  } while (ID_MAP[name].includes(id));\n\n  ID_MAP[name].push(id);\n\n  return id;\n}\n\nfunction removeId(name, id) {\n  if (!ID_MAP[name]) return;\n\n  ID_MAP[name] = ID_MAP[name].filter((_id) => _id !== id);\n}\n\nexport type UseFieldParams = {\n  defaultValidationTrigger?: ValidateTrigger;\n};\n\nexport function useField<T extends FieldTypes, Props extends UseFieldProps<T>>(\n  props: Props,\n  params: UseFieldParams,\n): FieldReturnValue<T> {\n  props = useFormProps(props);\n\n  let {\n    defaultValue,\n    id,\n    idPrefix,\n    name,\n    form,\n    rules,\n    message,\n    description,\n    errorMessage,\n    validateTrigger = params.defaultValidationTrigger,\n    validationDelay,\n    showValid,\n    shouldUpdate,\n    isRequired: isRequiredProp,\n    necessityIndicator: necessityIndicatorProp,\n  } = props;\n\n  const { isInvalid: isInvalidProp, isValid: isValidProp } =\n    resolveValidationProps(props);\n\n  const processedRules = useMemo(() => {\n    let finalRules = rules;\n\n    // If isRequired prop is set, ensure there's a required rule\n    if (isRequiredProp) {\n      const hasRequiredRule = finalRules?.some(\n        (rule) => 'required' in rule && rule.required === true,\n      );\n\n      if (!hasRequiredRule) {\n        finalRules = finalRules\n          ? [{ required: true }, ...finalRules]\n          : [{ required: true }];\n      }\n    }\n\n    // Add delay rule if needed\n    if (finalRules && finalRules.length && validationDelay) {\n      return [delayValidationRule(validationDelay), ...finalRules];\n    }\n\n    return finalRules;\n  }, [rules, validationDelay, isRequiredProp]);\n\n  const nonInput = !name;\n  const fieldName: string = name != null ? name : '';\n\n  const isFirstRender = useIsFirstRender();\n  let [fieldId, setFieldId] = useState(\n    id || (idPrefix ? `${idPrefix}_${fieldName}` : fieldName),\n  );\n\n  useEffect(() => {\n    let newId;\n\n    if (!id && !nonInput) {\n      newId = createId(fieldId);\n\n      setFieldId(newId);\n    }\n\n    return () => {\n      if (!id) {\n        removeId(idPrefix ? `${idPrefix}_${fieldName}` : fieldName, newId);\n      }\n\n      if (fieldName && form) {\n        form.removeField(fieldName);\n      }\n    };\n  }, [fieldName]);\n\n  let field = form?.getFieldInstance(fieldName);\n\n  if (field) {\n    field.rules = processedRules;\n  }\n\n  let isRequired = !!processedRules?.find(\n    (rule) => 'required' in rule && rule.required === true,\n  );\n\n  // `isRequired` has two sources with different intent. A `required` rule states\n  // how the field behaves: it is what validation runs, and `aria-required` is\n  // its programmatic mirror, so the flag has to reach the input either way. The\n  // `isRequired` prop additionally states what the label should say. So unless\n  // the prop itself asked for the marker, suppress it — an absent prop and an\n  // explicit `isRequired={false}` both mean \"do not mark this\", the latter\n  // rather more loudly. An explicit `necessityIndicator` overrides either way,\n  // being a request for the marker in its own right.\n  const suppressNecessityIndicator =\n    isRequired && !isRequiredProp && necessityIndicatorProp === undefined;\n\n  useEffect(() => {\n    if (!form) return;\n\n    if (field) {\n      form.forceReRender();\n    } else {\n      field = form.createField(fieldName);\n    }\n  }, [field]);\n\n  if (form) {\n    if (isFirstRender) {\n      if (!field) {\n        field = form.createField(fieldName, true);\n      }\n\n      if (field?.value == null && defaultValue != null) {\n        form.setFieldValue(fieldName, defaultValue, false, true);\n        form.updateInitialFieldsValue({ [fieldName]: defaultValue });\n\n        field = form?.getFieldInstance(fieldName);\n      }\n    }\n\n    if (!field?.touched && defaultValue != null) {\n      form.setFieldValue(fieldName, defaultValue, false, true);\n    }\n  }\n\n  const onChangeHandler = useEvent((val: any, dontTouch: boolean) => {\n    if (!form) return;\n\n    const field = form.getFieldInstance(fieldName);\n\n    if (shouldUpdate) {\n      const fieldsValue = form.getFieldsValue();\n\n      // check if we should update the value of the field\n      const shouldNotBeUpdated =\n        typeof shouldUpdate === 'boolean'\n          ? !shouldUpdate\n          : !shouldUpdate(fieldsValue, {\n              ...fieldsValue,\n              [fieldName]: val,\n            });\n\n      if (shouldNotBeUpdated) {\n        return;\n      }\n    }\n\n    form.setFieldValue(fieldName, val, !dontTouch);\n\n    if (\n      !dontTouch &&\n      (validateTrigger === 'onChange' ||\n        (field && field.errors && field.errors.length))\n    ) {\n      form.validateField(fieldName).catch(() => {}); // do nothing on fail\n    }\n  });\n\n  const onBlurHandler = useEvent(() => {\n    if (validateTrigger === 'onBlur') {\n      // We need a timeout so the change event can be done.\n      setTimeout(() => {\n        form?.validateField(fieldName).catch(() => {}); // do nothing on fail\n      });\n    }\n  });\n\n  let value = field?.value;\n\n  return useMemo(\n    () => ({\n      id: fieldId,\n      name: fieldName,\n      value,\n      validateTrigger,\n      form,\n      field,\n      nonInput,\n\n      // Explicit validation props always win over the state derived from the form\n      isInvalid: isInvalidProp ?? !!field?.errors?.length,\n      isValid: isValidProp ?? !!(showValid && field?.status === 'valid'),\n      ...(isRequired && { isRequired }),\n      ...(suppressNecessityIndicator && { necessityIndicator: null }),\n      message:\n        message !== undefined\n          ? message\n          : field?.status === 'invalid' && field?.errors?.[0],\n      description,\n      errorMessage:\n        errorMessage !== undefined\n          ? errorMessage\n          : field?.status === 'invalid' && field?.errors?.length\n            ? field.errors[0]\n            : undefined,\n      onBlur: onBlurHandler,\n      onChange: onChangeHandler,\n    }),\n    [\n      form,\n      field,\n      field?.value,\n      field?.errors?.length,\n      field?.status,\n      fieldId,\n      fieldName,\n      isRequired,\n      suppressNecessityIndicator,\n      message,\n      description,\n      errorMessage,\n      onBlurHandler,\n      onChangeHandler,\n      validateTrigger,\n      isInvalidProp,\n      isValidProp,\n      showValid,\n      nonInput,\n    ],\n  );\n}\n"],"mappings":";;;;;;;;;AAWA,MAAM,SAAS,EAAE;AAEjB,SAAS,SAAS,MAAM;AACtB,KAAI,CAAC,KAAM;AAEX,KAAI,CAAC,OAAO,MACV,QAAO,QAAQ,EAAE;CAGnB,IAAI,IAAI;CACR,IAAI;AAEJ,IAAG;AACD,OAAK,IAAI,GAAG,KAAK,GAAG,MAAM;AAC1B;UACO,OAAO,MAAM,SAAS,GAAG;AAElC,QAAO,MAAM,KAAK,GAAG;AAErB,QAAO;;AAGT,SAAS,SAAS,MAAM,IAAI;AAC1B,KAAI,CAAC,OAAO,MAAO;AAEnB,QAAO,QAAQ,OAAO,MAAM,QAAQ,QAAQ,QAAQ,GAAG;;AAOzD,SAAgB,SACd,OACA,QACqB;AACrB,SAAQ,aAAa,MAAM;CAE3B,IAAI,EACF,cACA,IACA,UACA,MACA,MACA,OACA,SACA,aACA,cACA,kBAAkB,OAAO,0BACzB,iBACA,WACA,cACA,YAAY,gBACZ,oBAAoB,2BAClB;CAEJ,MAAM,EAAE,WAAW,eAAe,SAAS,gBACzC,uBAAuB,MAAM;CAE/B,MAAM,iBAAiB,cAAc;EACnC,IAAI,aAAa;AAGjB,MAAI,gBAKF;OAAI,CAJoB,YAAY,MACjC,SAAS,cAAc,QAAQ,KAAK,aAAa,KACnD,CAGC,cAAa,aACT,CAAC,EAAE,UAAU,MAAM,EAAE,GAAG,WAAW,GACnC,CAAC,EAAE,UAAU,MAAM,CAAC;;AAK5B,MAAI,cAAc,WAAW,UAAU,gBACrC,QAAO,CAAC,oBAAoB,gBAAgB,EAAE,GAAG,WAAW;AAG9D,SAAO;IACN;EAAC;EAAO;EAAiB;EAAe,CAAC;CAE5C,MAAM,WAAW,CAAC;CAClB,MAAM,YAAoB,QAAQ,OAAO,OAAO;CAEhD,MAAM,gBAAgB,kBAAkB;CACxC,IAAI,CAAC,SAAS,cAAc,SAC1B,OAAO,WAAW,GAAG,SAAS,GAAG,cAAc,WAChD;AAED,iBAAgB;EACd,IAAI;AAEJ,MAAI,CAAC,MAAM,CAAC,UAAU;AACpB,WAAQ,SAAS,QAAQ;AAEzB,cAAW,MAAM;;AAGnB,eAAa;AACX,OAAI,CAAC,GACH,UAAS,WAAW,GAAG,SAAS,GAAG,cAAc,WAAW,MAAM;AAGpE,OAAI,aAAa,KACf,MAAK,YAAY,UAAU;;IAG9B,CAAC,UAAU,CAAC;CAEf,IAAI,QAAQ,MAAM,iBAAiB,UAAU;AAE7C,KAAI,MACF,OAAM,QAAQ;CAGhB,IAAI,aAAa,CAAC,CAAC,gBAAgB,MAChC,SAAS,cAAc,QAAQ,KAAK,aAAa,KACnD;CAUD,MAAM,6BACJ,cAAc,CAAC,kBAAkB,2BAA2B;AAE9D,iBAAgB;AACd,MAAI,CAAC,KAAM;AAEX,MAAI,MACF,MAAK,eAAe;MAEpB,SAAQ,KAAK,YAAY,UAAU;IAEpC,CAAC,MAAM,CAAC;AAEX,KAAI,MAAM;AACR,MAAI,eAAe;AACjB,OAAI,CAAC,MACH,SAAQ,KAAK,YAAY,WAAW,KAAK;AAG3C,OAAI,OAAO,SAAS,QAAQ,gBAAgB,MAAM;AAChD,SAAK,cAAc,WAAW,cAAc,OAAO,KAAK;AACxD,SAAK,yBAAyB,GAAG,YAAY,cAAc,CAAC;AAE5D,YAAQ,MAAM,iBAAiB,UAAU;;;AAI7C,MAAI,CAAC,OAAO,WAAW,gBAAgB,KACrC,MAAK,cAAc,WAAW,cAAc,OAAO,KAAK;;CAI5D,MAAM,kBAAkB,UAAU,KAAU,cAAuB;AACjE,MAAI,CAAC,KAAM;EAEX,MAAM,QAAQ,KAAK,iBAAiB,UAAU;AAE9C,MAAI,cAAc;GAChB,MAAM,cAAc,KAAK,gBAAgB;AAWzC,OAPE,OAAO,iBAAiB,YACpB,CAAC,eACD,CAAC,aAAa,aAAa;IACzB,GAAG;KACF,YAAY;IACd,CAAC,CAGN;;AAIJ,OAAK,cAAc,WAAW,KAAK,CAAC,UAAU;AAE9C,MACE,CAAC,cACA,oBAAoB,cAClB,SAAS,MAAM,UAAU,MAAM,OAAO,QAEzC,MAAK,cAAc,UAAU,CAAC,YAAY,GAAG;GAE/C;CAEF,MAAM,gBAAgB,eAAe;AACnC,MAAI,oBAAoB,SAEtB,kBAAiB;AACf,SAAM,cAAc,UAAU,CAAC,YAAY,GAAG;IAC9C;GAEJ;CAEF,IAAI,QAAQ,OAAO;AAEnB,QAAO,eACE;EACL,IAAI;EACJ,MAAM;EACN;EACA;EACA;EACA;EACA;EAGA,WAAW,iBAAiB,CAAC,CAAC,OAAO,QAAQ;EAC7C,SAAS,eAAe,CAAC,EAAE,aAAa,OAAO,WAAW;EAC1D,GAAI,cAAc,EAAE,YAAY;EAChC,GAAI,8BAA8B,EAAE,oBAAoB,MAAM;EAC9D,SACE,YAAY,SACR,UACA,OAAO,WAAW,aAAa,OAAO,SAAS;EACrD;EACA,cACE,iBAAiB,SACb,eACA,OAAO,WAAW,aAAa,OAAO,QAAQ,SAC5C,MAAM,OAAO,KACb;EACR,QAAQ;EACR,UAAU;EACX,GACD;EACE;EACA;EACA,OAAO;EACP,OAAO,QAAQ;EACf,OAAO;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF"}