@commercetools/nimbus 2.0.1 → 2.1.0

package/dist/chunks/localized-field-CtLqzEnl.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"localized-field-CtLqzEnl.cjs.js","sources":["../../src/components/localized-field/localized-field.i18n.ts","../../src/components/localized-field/localized-field.slots.tsx","../../src/components/localized-field/utils/localized-field.utils.tsx","../../src/components/localized-field/components/localized-field.locale-field.tsx","../../src/components/localized-field/components/localized-field.root.tsx","../../src/components/localized-field/localized-field.tsx"],"sourcesContent":["import { defineMessages } from \"react-intl\";\n\nexport const messages = defineMessages({\n  missingRequiredField: {\n    id: \"Nimbus.LocalizedField.missingRequiredField\",\n    description: \"Error message for missing required value\",\n    defaultMessage: \"This field is required. Provide at least one value.\",\n  },\n  infoBoxTriggerAriaLabel: {\n    id: \"Nimbus.LocalizedField.infoBoxTriggerAriaLabel\",\n    description: \"aria label for button that triggers more info dialog\",\n    defaultMessage: \"more info\",\n  },\n  showLanguages: {\n    id: \"Nimbus.LocalizedField.showLanguages\",\n    description:\n      \"Label for showing all language inputs when toggle button is pressed\",\n    defaultMessage: \"Show all languages\",\n  },\n  hideLanguages: {\n    id: \"Nimbus.LocalizedField.hideLanguages\",\n    description:\n      \"Label for hiding all language inputs when toggle button is pressed\",\n    defaultMessage: \"Hide all languages\",\n  },\n  showCurrencies: {\n    id: \"Nimbus.LocalizedField.showCurrencies\",\n    description:\n      \"Label for showing all currency inputs when toggle button is pressed\",\n    defaultMessage: \"Show all currencies\",\n  },\n  hideCurrencies: {\n    id: \"Nimbus.LocalizedField.hideCurrencies\",\n    description:\n      \"Label for hiding all currency inputs when toggle button is pressed\",\n    defaultMessage: \"Hide all currencies\",\n  },\n});\n","import { createSlotRecipeContext } from \"@chakra-ui/react\";\nimport type {\n  LocalizedFieldRootSlotProps,\n  LocalizedFieldLabelSlotProps,\n  LocalizedFieldInfoDialogSlotProps,\n  LocalizedFieldFieldsContainerSlotProps,\n  LocalizedFieldDescriptionSlotProps,\n  LocalizedFieldErrorSlotProps,\n  LocalizedFieldToggleButtonContainerSlotProps,\n  LocalizedFieldLocaleFieldRootSlotProps,\n  LocalizedFieldLocaleFieldLabelSlotProps,\n  LocalizedFieldLocaleFieldInputSlotProps,\n} from \"./localized-field.types\";\n\nconst { withProvider, withContext } = createSlotRecipeContext({\n  key: \"localizedField\",\n});\n\n// Root Slot\nexport const LocalizedFieldRootSlot = withProvider<\n  HTMLFieldSetElement,\n  LocalizedFieldRootSlotProps\n>(\"fieldset\", \"root\");\n\n// Label Slot\nexport const LocalizedFieldLabelSlot = withContext<\n  HTMLLabelElement,\n  LocalizedFieldLabelSlotProps\n>(\"legend\", \"label\");\n\n// InfoDialog Slot\nexport const LocalizedFieldInfoDialogSlot = withContext<\n  HTMLDivElement,\n  LocalizedFieldInfoDialogSlotProps\n>(\"div\", \"infoDialog\");\n\n// FieldsContainer Slot\nexport const LocalizedFieldFieldsContainerSlot = withContext<\n  HTMLDivElement,\n  LocalizedFieldFieldsContainerSlotProps\n>(\"div\", \"fieldsContainer\");\n\n// Description Slot\nexport const LocalizedFieldDescriptionSlot = withContext<\n  HTMLDivElement,\n  LocalizedFieldDescriptionSlotProps\n>(\"div\", \"description\");\n\n// Error Slot\nexport const LocalizedFieldErrorSlot = withContext<\n  HTMLDivElement,\n  LocalizedFieldErrorSlotProps\n>(\"div\", \"error\");\n\n// ToggleButtonContainer Slot\nexport const LocalizedFieldToggleButtonContainerSlot = withContext<\n  HTMLDivElement,\n  LocalizedFieldToggleButtonContainerSlotProps\n>(\"div\", \"toggleButtonContainer\");\n\n// LocaleFieldRoot Slot\nexport const LocalizedFieldLocaleFieldRootSlot = withContext<\n  HTMLDivElement,\n  LocalizedFieldLocaleFieldRootSlotProps\n>(\"div\", \"localeFieldRoot\");\n\n// FieldLabel Slot\nexport const LocalizedFieldLocaleFieldLabelSlot = withContext<\n  HTMLDivElement,\n  LocalizedFieldLocaleFieldLabelSlotProps\n>(\"div\", \"localeFieldLabel\");\n\n// FieldInput Slot\nexport const LocalizedFieldLocaleFieldInputSlot = withContext<\n  HTMLDivElement,\n  LocalizedFieldLocaleFieldInputSlotProps\n>(\"div\", \"localeFieldInput\");\n","import { FormattedMessage } from \"react-intl\";\nimport {\n  FormField,\n  type CurrencyCode,\n  type MoneyInputValue,\n  type MoneyValue,\n  type FieldErrorsData,\n  MoneyInput,\n} from \"@/components\";\nimport { messages } from \"../localized-field.i18n\";\nimport type { LocalizedString } from \"../localized-field.types\";\n\ntype LanguagesSplitByDefaultLocale = {\n  related: string[];\n  unrelated: string[];\n};\n\ntype TouchedLocalizedString = { [locale: string]: boolean };\n\ntype CustomFormikErrors<Values> = {\n  [K in keyof Values]?: FieldErrorsData;\n};\n\nexport const RequiredValueErrorMessage = () => (\n  <FormField.Error>\n    <FormattedMessage {...messages.missingRequiredField} />\n  </FormField.Error>\n);\n\nexport const getLocaleFieldAttribute = (\n  fieldGroupAttr?: string,\n  locale?: string\n): string | undefined =>\n  fieldGroupAttr && locale ? `${fieldGroupAttr}.${locale}` : undefined;\n\n// gets the language tag of a given locale, e.g. `de` in `de-DE`\nexport const getLanguageForLocale = (locale: string): string =>\n  locale.split(\"-\")[0];\n\n// splits the locales into two groups:\n//  - the 'related' array contains locales with the same language tag as the default locale,\n//    e.g. if the default locale is de-DE, related would be ['de-DE', 'de-CH']\n//  - the 'unrelated' array contains locales with a different different language tag from the default locale\n//.   e.g. if the default locale is de-DE, unrelated would be ['pt-BR', 'en-GB', 'zh-Hans']\nexport const splitLanguages = (\n  defaultLocale: string,\n  locales: string[]\n): LanguagesSplitByDefaultLocale => {\n  const defaultLanguage = getLanguageForLocale(defaultLocale);\n  const related = locales.filter(\n    (locale) => getLanguageForLocale(locale) === defaultLanguage\n  );\n  const unrelated = locales.filter(\n    (locale) => getLanguageForLocale(locale) !== defaultLanguage\n  );\n  return {\n    unrelated,\n    related,\n  };\n};\n\n// sorts locales with the following priority:\n// - The selected locale is placed first (e.g pt-BR)\n// - All locales using the same language tag as the selected language\n//   follow (e.g. pt, pt-PT). They are sorted alphabetically.\n// - All other locales follow, sorted alphabetically as well\nexport const sortLocalesByDefaultLocaleLanguage = (\n  defaultLocale: string,\n  allLocales: string[]\n): string[] => {\n  const { related, unrelated } = splitLanguages(\n    defaultLocale,\n    allLocales.filter((locale: string) => locale !== defaultLocale)\n  );\n\n  return [defaultLocale, ...related.sort(), ...unrelated.sort()];\n};\n\nexport const sortCurrencies = (\n  defaultCurrency: CurrencyCode,\n  allCurrencies: CurrencyCode[]\n) => {\n  const remainingCurrencies = allCurrencies.filter(\n    (currency) => currency !== defaultCurrency\n  );\n  return [defaultCurrency, ...remainingCurrencies.sort()];\n};\n\nexport const getHasInvalidLocalizedFields = <TErrors extends object>(\n  errors?: TErrors,\n  defaultLocaleOrCurrency?: string\n): boolean => {\n  if (errors && Object.keys(errors).length > 0 && defaultLocaleOrCurrency) {\n    return Object.keys(errors).some(\n      (localeOrCurrency) => localeOrCurrency !== defaultLocaleOrCurrency\n    );\n  }\n  return false;\n};\n\nexport const createLocalizedString = (\n  locales: string[],\n  existingLocalizedString: LocalizedString\n): LocalizedString => {\n  const localesInLocalizedString = Array.from(\n    new Set([...locales, ...Object.keys(existingLocalizedString)])\n  );\n\n  return localesInLocalizedString.reduce<LocalizedString>(\n    (localizedString, locale) => ({\n      ...localizedString,\n      [locale]: existingLocalizedString?.[locale] || \"\",\n    }),\n    {}\n  );\n};\n\n// Note: I prefer `isLocalizedStringEmpty`, but keeping this as `isEmpty` for api consistency with UI Kit\nexport const isEmpty = (localizedString?: LocalizedString): boolean => {\n  if (!localizedString) return true;\n  return Object.values(localizedString).every(\n    (value?: string) => !value || value?.trim().length === 0\n  );\n};\n\nexport const omitEmptyTranslations = <Translations extends LocalizedString>(\n  localizedString: Translations\n): LocalizedString => {\n  // TODO: is it necessary to create a util that enforces a consistent warning/error format, e.g.\n  // `<COMPONENT_NAME> - Warning: <WARNING_MESSAGE>`\n  if (typeof localizedString !== \"object\") {\n    console.warn(\n      \"Nimbus Localized Field - Warning: omitEmptyTranslations must be called with an object\"\n    );\n  }\n\n  return Object.entries(localizedString).reduce<LocalizedString>(\n    (localizedStringWithoutEmptyTranslations, [locale, value]) => {\n      if (value && value.trim().length > 0) {\n        return {\n          ...localizedStringWithoutEmptyTranslations,\n          [locale]: value,\n        };\n      }\n      return localizedStringWithoutEmptyTranslations;\n    },\n    {}\n  );\n};\n\nexport const isTouched = (touched?: TouchedLocalizedString): boolean => {\n  if (touched) {\n    return Object.values(touched).some(Boolean);\n  }\n  return false;\n};\n\n/**\n * Use this function to convert the Formik `errors` object type to\n * our custom field errors type.\n * This is primarly useful when using TypeScript.\n */\nexport function toFieldErrors<FormValues>(\n  errors: unknown\n): CustomFormikErrors<FormValues> {\n  return errors as CustomFormikErrors<FormValues>;\n}\n\nexport const convertToMoneyValues = (\n  values: MoneyInputValue[],\n  currency: string\n): Array<MoneyValue | null> =>\n  Object.values(values).map<MoneyValue | null>((value) => {\n    return MoneyInput.convertToMoneyValue(value, currency);\n  });\n\nexport const parseMoneyValues = (\n  moneyValues: MoneyValue[] = [],\n  locale: string\n): Record<CurrencyCode, MoneyInputValue> =>\n  moneyValues.reduce<Record<CurrencyCode, MoneyInputValue>>(\n    (allValues, moneyValue) => {\n      const value = MoneyInput.parseMoneyValue(moneyValue, locale);\n      return {\n        ...allValues,\n        [value.currencyCode]: value,\n      };\n    },\n    {} as Record<CurrencyCode, MoneyInputValue>\n  );\n\nexport const getHighPrecisionCurrencies = (\n  values: Record<CurrencyCode, MoneyInputValue>,\n  locale: string\n): CurrencyCode[] => {\n  const typedCurrencyCodes = Object.keys(values) as CurrencyCode[];\n  return typedCurrencyCodes.filter((currencyCode) =>\n    MoneyInput.isHighPrecision(values[currencyCode], locale)\n  );\n};\n\nexport const getEmptyCurrencies = (\n  values: Record<CurrencyCode, MoneyInputValue>\n): CurrencyCode[] => {\n  const typedCurrencyCodes = Object.keys(values) as CurrencyCode[];\n  return typedCurrencyCodes.filter((currencyCode) =>\n    MoneyInput.isEmpty(values[currencyCode])\n  );\n};\n","import { useCallback } from \"react\";\nimport {\n  FormField,\n  Icon,\n  TextInput,\n  MoneyInput,\n  type CustomEvent,\n  MultilineTextInput,\n  RichTextInput,\n  type MoneyInputValue,\n  type CurrencyCode,\n} from \"@/components\";\nimport { WarningAmber } from \"@commercetools/nimbus-icons\";\nimport {\n  LocalizedFieldLocaleFieldRootSlot,\n  LocalizedFieldLocaleFieldInputSlot,\n  LocalizedFieldLocaleFieldLabelSlot,\n} from \"../localized-field.slots\";\nimport type { LocalizedFieldLocaleFieldProps } from \"../localized-field.types\";\n\n/**\n * LocalizedFieldLocaleField - Individual locale or currency input field\n *\n * Renders a single input field for a specific locale or currency with integrated\n * label, description, warning, and error message display. Supports text, multiline,\n * richText, and money input types.\n *\n * @supportsStyleProps\n */\nexport const LocalizedFieldLocaleField = ({\n  type,\n  size,\n  localeOrCurrency,\n  id,\n  name,\n  inputValue: inputValueFromProps,\n  description,\n  warning,\n  error,\n  onChange,\n  onBlur,\n  onFocus,\n  isRequired,\n  isReadOnly,\n  isDisabled,\n  isInvalid,\n  touched,\n  ...otherProps\n}: LocalizedFieldLocaleFieldProps) => {\n  let InputComponent:\n    | typeof TextInput\n    | typeof MultilineTextInput\n    | typeof MoneyInput\n    | typeof RichTextInput;\n  switch (type) {\n    case \"text\":\n    default:\n      InputComponent = TextInput;\n      break;\n    case \"multiLine\":\n      InputComponent = MultilineTextInput;\n      break;\n    case \"money\":\n      InputComponent = MoneyInput;\n      break;\n    case \"richText\":\n      InputComponent = RichTextInput;\n      break;\n  }\n\n  const getInputValue = () => {\n    if (type === \"money\") {\n      return inputValueFromProps\n        ? (inputValueFromProps as MoneyInputValue)\n        : ({ amount: \"\", currencyCode: localeOrCurrency } as MoneyInputValue);\n    }\n    return inputValueFromProps ? inputValueFromProps : \"\";\n  };\n\n  const inputValue = getInputValue();\n\n  const handleChange = useCallback(\n    (value: string | CustomEvent | undefined) => {\n      // The `MoneyInput` onChange event value is a custom value,\n      // and the `MoneyInput` modifies the input id and name since it is in a `group`,\n      // so we need to build a separate return object for the MoneInput to return\n      // the expected values\n      const isMoneyInputEvent = typeof value === \"object\";\n      const changeValue = {\n        target: isMoneyInputEvent\n          ? {\n              id: value.target.id,\n              name: value.target.name,\n              locale: undefined,\n              currency: localeOrCurrency as CurrencyCode,\n              value: value.target.value,\n            }\n          : { id, name, locale: localeOrCurrency, currency: undefined, value },\n      };\n      onChange(changeValue);\n    },\n    [id, name, localeOrCurrency, onChange]\n  );\n\n  return (\n    <LocalizedFieldLocaleFieldRootSlot asChild>\n      <FormField.Root\n        isDisabled={isDisabled}\n        isReadOnly={isReadOnly}\n        isInvalid={(isInvalid || !!error) && touched}\n        direction=\"row\"\n        size={size}\n        id={id}\n      >\n        <LocalizedFieldLocaleFieldLabelSlot\n          display={type === \"money\" ? \"none\" : undefined}\n          {...(isDisabled && { \"data-disabled\": isDisabled })}\n          asChild\n        >\n          <FormField.Label>\n            {localeOrCurrency.toLocaleUpperCase()}\n          </FormField.Label>\n        </LocalizedFieldLocaleFieldLabelSlot>\n        <FormField.Input>\n          <LocalizedFieldLocaleFieldInputSlot\n            aria-required={isRequired}\n            asChild\n          >\n            <InputComponent\n              {...otherProps}\n              size={size}\n              value={inputValue as string & MoneyInputValue}\n              onChange={handleChange}\n              onBlur={(e: React.FocusEvent | CustomEvent) =>\n                onBlur?.(e, localeOrCurrency)\n              }\n              onFocus={(e: React.FocusEvent | CustomEvent) =>\n                onFocus?.(e, localeOrCurrency)\n              }\n              isRequired={isRequired}\n              isDisabled={isDisabled}\n              isReadOnly={isReadOnly}\n              isInvalid={(isInvalid || !!error) && touched}\n            />\n          </LocalizedFieldLocaleFieldInputSlot>\n        </FormField.Input>\n        {(description || (warning && touched)) && (\n          <FormField.Description\n            role={warning && touched ? \"status\" : undefined}\n            color={warning && touched ? \"warning.11\" : undefined}\n            display=\"flex\"\n            gap=\"100\"\n            alignItems=\"center\"\n          >\n            {warning && touched ? (\n              <>\n                <Icon colorPalette=\"warning\">\n                  <WarningAmber />\n                </Icon>\n                {warning}\n              </>\n            ) : (\n              description\n            )}\n          </FormField.Description>\n        )}\n        {error && touched && <FormField.Error>{error}</FormField.Error>}\n      </FormField.Root>\n    </LocalizedFieldLocaleFieldRootSlot>\n  );\n};\n","import { useState, useMemo } from \"react\";\nimport { useIntl } from \"react-intl\";\nimport {\n  Collection as RaCollection,\n  Dialog as RaDialog,\n  DialogTrigger as RaDialogTrigger,\n} from \"react-aria-components\";\nimport { useField, useId } from \"react-aria\";\nimport {\n  ErrorOutline,\n  HelpOutline,\n  Language,\n  Payments,\n  WarningAmber,\n} from \"@commercetools/nimbus-icons\";\nimport {\n  Box,\n  Button,\n  FieldErrors,\n  Icon,\n  IconButton,\n  Stack,\n  type CurrencyCode,\n} from \"@/components\";\nimport { Popover } from \"../../popover\";\nimport { messages } from \"../localized-field.i18n\";\nimport {\n  LocalizedFieldRootSlot,\n  LocalizedFieldLabelSlot,\n  LocalizedFieldInfoDialogSlot,\n  LocalizedFieldFieldsContainerSlot,\n  LocalizedFieldDescriptionSlot,\n  LocalizedFieldErrorSlot,\n  LocalizedFieldToggleButtonContainerSlot,\n} from \"../localized-field.slots\";\nimport type {\n  LocalizedFieldProps,\n  MergedLocaleFieldData,\n  LocalizedCurrency,\n} from \"../localized-field.types\";\n\nimport {\n  getHasInvalidLocalizedFields,\n  getLocaleFieldAttribute,\n  sortCurrencies,\n  sortLocalesByDefaultLocaleLanguage,\n} from \"../utils/localized-field.utils\";\nimport { LocalizedFieldLocaleField } from \"./localized-field.locale-field\";\n\n/**\n * LocalizedField - Root component for managing localized input fields\n *\n * Provides a fieldset container for multiple locale-specific or currency-specific input fields\n * with expand/collapse functionality and integrated validation display. Supports text, multiline,\n * richText, and money input types.\n *\n * @supportsStyleProps\n */\nexport const LocalizedField = ({\n  type = \"text\",\n  id,\n  name,\n  defaultLocaleOrCurrency,\n  valuesByLocaleOrCurrency,\n  placeholdersByLocaleOrCurrency,\n  descriptionsByLocaleOrCurrency,\n  warningsByLocaleOrCurrency,\n  errorsByLocaleOrCurrency,\n  label,\n  hint,\n  description,\n  warning,\n  warnings,\n  renderWarning,\n  error,\n  errors,\n  renderError,\n  touched,\n  isRequired,\n  isDisabled,\n  isReadOnly,\n  onChange,\n  onBlur,\n  onFocus,\n  defaultExpanded = false,\n  displayAllLocalesOrCurrencies = false,\n  size,\n  autoFocus,\n  [\"data-track-component\"]: dataTrackComponent,\n  [\"data-testid\"]: dataTestId,\n  [\"data-test\"]: dataTest,\n  // DOM & Style props for wrapper container\n  ...rest\n}: LocalizedFieldProps) => {\n  const [expanded, setExpanded] = useState(\n    displayAllLocalesOrCurrencies || defaultExpanded\n  );\n\n  const { formatMessage } = useIntl();\n\n  // Used to associate more info dialog with fieldset via `aria-controls`\n  const localeFieldsContainerId = useId();\n  // Used to associate more info dialog with fieldset via `aria-details`\n  const moreDetailsButtonId = useId();\n\n  // Either `error` exists, or there are `true` fields in the UI Kit compat `errors` object\n  const hasError: boolean = Boolean(\n    error || (errors && Object.values(errors).some((error) => error === true))\n  );\n\n  // Either `warning` exists, or there are `true` fields in the UI Kit compat `warnings` object\n  const hasWarning: boolean = Boolean(\n    warning || (warnings && Object.values(warnings).some(Boolean))\n  );\n\n  // FieldGroup is invalid if a non-field-specific error is passed and the group has been touched\n  // When FieldGroup is invalid, all fields will display error styling without displaying a field-specific error message\n  const isInvalid: boolean = !!(hasError && touched);\n\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n    useField({\n      id,\n      label,\n      description,\n      errorMessage: error,\n      isInvalid,\n    });\n\n  // Array of locales/currencies to display as input fields\n  const localizationKeys: string[] | CurrencyCode[] = Object.keys(\n    valuesByLocaleOrCurrency\n  );\n\n  // Merge all -ByLocaleOrCurrencies data for each field\n  const allDataForFields = useMemo(() => {\n    const sortedFieldData =\n      type === \"money\"\n        ? sortCurrencies(\n            defaultLocaleOrCurrency as CurrencyCode,\n            localizationKeys as CurrencyCode[]\n          )\n        : sortLocalesByDefaultLocaleLanguage(\n            defaultLocaleOrCurrency,\n            localizationKeys\n          );\n\n    return sortedFieldData.reduce(\n      (allFieldData: MergedLocaleFieldData[], localizationKey) => {\n        const allDataForLocale = {\n          localeOrCurrency: localizationKey,\n          inputValue:\n            type === \"money\"\n              ? (valuesByLocaleOrCurrency as LocalizedCurrency)[localizationKey]\n              : (valuesByLocaleOrCurrency[localizationKey] as string),\n          placeholder: placeholdersByLocaleOrCurrency?.[localizationKey],\n          description: descriptionsByLocaleOrCurrency?.[localizationKey],\n          warning: warningsByLocaleOrCurrency?.[localizationKey],\n          error: errorsByLocaleOrCurrency?.[localizationKey],\n          // autoFocus default/first locale field\n          ...(localizationKey === defaultLocaleOrCurrency && autoFocus\n            ? { autoFocus }\n            : {}),\n          isInvalid,\n          isRequired,\n          isDisabled,\n          isReadOnly,\n        };\n        if (\n          expanded ||\n          // Only display defaultLocaleOrInput field if fieldGroup is not expanded\n          (!expanded && localizationKey === defaultLocaleOrCurrency)\n        ) {\n          return [...allFieldData, allDataForLocale];\n        }\n        return allFieldData;\n      },\n      []\n    );\n  }, [\n    valuesByLocaleOrCurrency,\n    placeholdersByLocaleOrCurrency,\n    descriptionsByLocaleOrCurrency,\n    warningsByLocaleOrCurrency,\n    errorsByLocaleOrCurrency,\n    defaultLocaleOrCurrency,\n    expanded,\n    isInvalid,\n    isRequired,\n    isDisabled,\n    isReadOnly,\n  ]);\n\n  const groupHasInvalidLocalizedFields = getHasInvalidLocalizedFields(\n    errorsByLocaleOrCurrency,\n    defaultLocaleOrCurrency\n  );\n\n  const shouldExpandInvalidFields =\n    (groupHasInvalidLocalizedFields || hasError) && touched;\n  // If there are fields that are invalid, ensure that field group\n  // shows all fields so that invalid field is visible\n  if (shouldExpandInvalidFields && !expanded) {\n    setExpanded(true);\n  }\n\n  return (\n    <LocalizedFieldRootSlot\n      {...rest}\n      {...fieldProps}\n      aria-details={hint ? moreDetailsButtonId : undefined}\n      type={type}\n      size={size}\n      name={name}\n    >\n      {label && (\n        <Stack direction=\"row\" gap=\"0\">\n          <LocalizedFieldLabelSlot {...labelProps}>\n            {label}\n            {isRequired && <sup aria-hidden=\"true\">*</sup>}\n          </LocalizedFieldLabelSlot>\n          {hint && (\n            <RaDialogTrigger>\n              <IconButton\n                id={moreDetailsButtonId}\n                aria-label={formatMessage(messages.infoBoxTriggerAriaLabel)}\n                size=\"2xs\"\n                colorPalette=\"info\"\n                variant=\"link\"\n              >\n                <HelpOutline />\n              </IconButton>\n\n              <Popover padding={0}>\n                <LocalizedFieldInfoDialogSlot asChild>\n                  <RaDialog>\n                    <Box p=\"300\">{hint}</Box>\n                  </RaDialog>\n                </LocalizedFieldInfoDialogSlot>\n              </Popover>\n            </RaDialogTrigger>\n          )}\n        </Stack>\n      )}\n      <LocalizedFieldFieldsContainerSlot\n        id={localeFieldsContainerId}\n        data-expanded={expanded}\n      >\n        <RaCollection items={allDataForFields}>\n          {(item) => {\n            return (\n              <LocalizedFieldLocaleField\n                {...item}\n                size={size}\n                type={type}\n                onChange={onChange}\n                onBlur={onBlur}\n                onFocus={onFocus}\n                touched={touched}\n                // Format field attributes to match uikit pattern\n                id={getLocaleFieldAttribute(\n                  fieldProps.id,\n                  item.localeOrCurrency\n                )}\n                name={getLocaleFieldAttribute(name, item.localeOrCurrency)}\n                data-test={getLocaleFieldAttribute(\n                  dataTest,\n                  item.localeOrCurrency\n                )}\n                data-testid={getLocaleFieldAttribute(\n                  dataTestId,\n                  item.localeOrCurrency\n                )}\n                data-track-component={getLocaleFieldAttribute(\n                  dataTrackComponent,\n                  item.localeOrCurrency\n                )}\n              />\n            );\n          }}\n        </RaCollection>\n      </LocalizedFieldFieldsContainerSlot>\n\n      {!displayAllLocalesOrCurrencies && localizationKeys.length > 1 && (\n        <LocalizedFieldToggleButtonContainerSlot>\n          <Button\n            aria-controls={localeFieldsContainerId}\n            aria-describedby={labelProps.id}\n            aria-expanded={expanded}\n            onPress={() => setExpanded(!expanded)}\n            isDisabled={isDisabled || (shouldExpandInvalidFields && expanded)}\n            variant=\"ghost\"\n            size=\"2xs\"\n            colorPalette=\"primary\"\n          >\n            <Box\n              as={type === \"money\" ? Payments : Language}\n              display=\"inline-flex\"\n              boxSize=\"400\"\n              verticalAlign=\"text-bottom\"\n              mr=\"100\"\n            />\n            {type === \"money\"\n              ? expanded\n                ? formatMessage(messages.hideCurrencies)\n                : formatMessage(messages.showCurrencies)\n              : expanded\n                ? formatMessage(messages.hideLanguages)\n                : formatMessage(messages.showLanguages)}\n          </Button>\n        </LocalizedFieldToggleButtonContainerSlot>\n      )}\n      {(description || (hasWarning && touched)) && (\n        <LocalizedFieldDescriptionSlot\n          role={hasWarning && touched ? \"status\" : undefined}\n          color={hasWarning && touched ? \"warning.11\" : undefined}\n          // In order to associate the warnings from both the warning and legacy warnings props with the fieldset,\n          // we must associate, them to this element with aria-labelledby\n          aria-labelledby={`${descriptionProps.id}-warning`}\n          {...descriptionProps}\n        >\n          {/** Warnings are for compat with UI Kit localized fields */}\n          {hasWarning && touched ? (\n            <>\n              <Icon colorPalette=\"warning\">\n                <WarningAmber />\n              </Icon>\n              <Stack gap=\"0\" id={`${descriptionProps.id}-warning`}>\n                {warning}\n                {warnings && hasWarning && (\n                  <FieldErrors\n                    errors={warnings}\n                    renderError={renderWarning}\n                    colorPalette=\"warning\"\n                    role={undefined}\n                  />\n                )}\n              </Stack>\n            </>\n          ) : (\n            description\n          )}\n        </LocalizedFieldDescriptionSlot>\n      )}\n      {isInvalid && (\n        <LocalizedFieldErrorSlot\n          // In order to associate the errors from both the error and legacy errors props with the fieldset,\n          // we must associate them to this element with aria-labelledby.\n          aria-labelledby={`${errorMessageProps.id}-error`}\n          role=\"alert\"\n          {...errorMessageProps}\n        >\n          <Icon>\n            <ErrorOutline />\n          </Icon>\n          <Stack gap=\"0\" id={`${errorMessageProps.id}-error`}>\n            {error}\n            {errors && hasError && (\n              <FieldErrors\n                errors={errors}\n                renderError={renderError}\n                role={undefined}\n              />\n            )}\n          </Stack>\n        </LocalizedFieldErrorSlot>\n      )}\n    </LocalizedFieldRootSlot>\n  );\n};\n","import { LocalizedFieldRoot } from \"./components\";\nimport {\n  getLocaleFieldAttribute,\n  createLocalizedString,\n  isEmpty,\n  omitEmptyTranslations,\n  isTouched,\n  RequiredValueErrorMessage,\n  toFieldErrors,\n  convertToMoneyValues,\n  parseMoneyValues,\n  getHighPrecisionCurrencies,\n  getEmptyCurrencies,\n} from \"./utils/localized-field.utils\";\n\n/**\n * LocalizedField component with utility methods for managing localized input fields.\n *\n * This component provides a fieldset for managing multiple locale-specific or currency-specific\n * input fields with expand/collapse functionality and integrated validation display.\n *\n * **Utility Methods** (for compatibility with UI Kit):\n * - `getId` / `getName`: Format field attributes with locale suffix\n * - `isTouched`: Check if any locale field has been touched\n * - `isEmpty`: Check if all locale fields are empty\n * - `createLocalizedString`: Create empty localized string object\n * - `omitEmptyTranslations`: Remove empty translations from localized object\n * - `RequiredValueErrorMessage`: Standard error message component\n * - `toFieldErrors`: Convert errors to field error format\n * - `convertToMoneyValues` / `parseMoneyValues`: Money value conversion utilities\n * - `getHighPrecisionCurrencies` / `getEmptyCurrencies`: Currency utilities\n *\n * @example\n * ```tsx\n * <LocalizedField\n *   type=\"text\"\n *   label=\"Product Name\"\n *   defaultLocaleOrCurrency=\"en\"\n *   valuesByLocaleOrCurrency={{ en: \"Product\", de: \"Produkt\" }}\n *   onChange={(e) => console.log(e.target.locale, e.target.value)}\n * />\n * ```\n */\nexport const LocalizedField = Object.assign(LocalizedFieldRoot, {\n  // Add util methods here for compat with uikit - see https://github.com/commercetools/ui-kit/blob/e97e0c7e8f3e9393981bf1949573212d7c571c90/packages/components/inputs/localized-text-input/src/localized-text-input.tsx#L396\n  getId: getLocaleFieldAttribute,\n  getName: getLocaleFieldAttribute,\n  isTouched,\n  isEmpty,\n  createLocalizedString,\n  omitEmptyTranslations,\n  RequiredValueErrorMessage,\n  toFieldErrors,\n  convertToMoneyValues,\n  parseMoneyValues,\n  getHighPrecisionCurrencies,\n  getEmptyCurrencies,\n});\n"],"names":["messages","defineMessages","withProvider","withContext","createSlotRecipeContext","LocalizedFieldRootSlot","LocalizedFieldLabelSlot","LocalizedFieldInfoDialogSlot","LocalizedFieldFieldsContainerSlot","LocalizedFieldDescriptionSlot","LocalizedFieldErrorSlot","LocalizedFieldToggleButtonContainerSlot","LocalizedFieldLocaleFieldRootSlot","LocalizedFieldLocaleFieldLabelSlot","LocalizedFieldLocaleFieldInputSlot","RequiredValueErrorMessage","jsx","FormField","FormattedMessage","getLocaleFieldAttribute","fieldGroupAttr","locale","getLanguageForLocale","splitLanguages","defaultLocale","locales","defaultLanguage","related","sortLocalesByDefaultLocaleLanguage","allLocales","unrelated","sortCurrencies","defaultCurrency","allCurrencies","remainingCurrencies","currency","getHasInvalidLocalizedFields","errors","defaultLocaleOrCurrency","localeOrCurrency","createLocalizedString","existingLocalizedString","localizedString","isEmpty","value","omitEmptyTranslations","localizedStringWithoutEmptyTranslations","isTouched","touched","toFieldErrors","convertToMoneyValues","values","MoneyInput","parseMoneyValues","moneyValues","allValues","moneyValue","getHighPrecisionCurrencies","currencyCode","getEmptyCurrencies","LocalizedFieldLocaleField","type","size","id","name","inputValueFromProps","description","warning","error","onChange","onBlur","onFocus","isRequired","isReadOnly","isDisabled","isInvalid","otherProps","InputComponent","TextInput","MultilineTextInput","RichTextInput","inputValue","handleChange","useCallback","changeValue","jsxs","e","Fragment","Icon","WarningAmber","LocalizedField","valuesByLocaleOrCurrency","placeholdersByLocaleOrCurrency","descriptionsByLocaleOrCurrency","warningsByLocaleOrCurrency","errorsByLocaleOrCurrency","label","hint","warnings","renderWarning","renderError","defaultExpanded","displayAllLocalesOrCurrencies","autoFocus","dataTrackComponent","dataTestId","dataTest","rest","expanded","setExpanded","useState","formatMessage","useIntl","localeFieldsContainerId","useId","moreDetailsButtonId","hasError","hasWarning","labelProps","fieldProps","descriptionProps","errorMessageProps","useField","localizationKeys","allDataForFields","useMemo","allFieldData","localizationKey","allDataForLocale","shouldExpandInvalidFields","Stack","RaDialogTrigger","IconButton","HelpOutline","Popover","RaDialog","Box","RaCollection","item","Button","Payments","Language","FieldErrors","ErrorOutline","LocalizedFieldRoot"],"mappings":"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"}

package/dist/chunks/localized-field-XLDcWlU1.es.js

@@ -0,0 +1,470 @@
+import { jsx as i, jsxs as c, Fragment as re } from "react/jsx-runtime";
+import { defineMessages as me, FormattedMessage as pe, useIntl as fe } from "react-intl";
+import { M as S } from "./money-input-BEek-VSq.es.js";
+import { F as I } from "./form-field-BqlkPY29.es.js";
+import { useCallback as he, useState as be, useMemo as Fe } from "react";
+import { k as Le, h as ve } from "./Dialog-DUbUCf4o.es.js";
+import { c as xe } from "./CollectionBuilder-ZlIN4SR4.es.js";
+import { WarningAmber as ne, HelpOutline as Ie, Payments as Me, Language as $e, ErrorOutline as we } from "@commercetools/nimbus-icons";
+import { P as Ce } from "./popover-BAIwOPdC.es.js";
+import { createSlotRecipeContext as je } from "@chakra-ui/react";
+import { R as Ee } from "./rich-text-input-CZqXRWdM.es.js";
+import { M as ke } from "./multiline-text-input-D5vbZHyU.es.js";
+import { I as W } from "./icon-CenxuChf.es.js";
+import { T as ze } from "./text-input-DOTYCJyJ.es.js";
+import { a as te } from "./mergeProps-Dsl8k3Ig.es.js";
+import { $ as Se } from "./useField-CHrpmkxe.es.js";
+import { F as ie } from "./field-errors-ClQprmQz.es.js";
+import { S as D } from "./stack-CoNreM7B.es.js";
+import { I as Pe } from "./icon-button-DgL7XNUZ.es.js";
+import { B as oe } from "./box-DuBoAZvq.es.js";
+import { B as Te } from "./button-czddlTvJ.es.js";
+const M = /* @__PURE__ */ me({
+  missingRequiredField: {
+    id: "Nimbus.LocalizedField.missingRequiredField",
+    description: "Error message for missing required value",
+    defaultMessage: "This field is required. Provide at least one value."
+  },
+  infoBoxTriggerAriaLabel: {
+    id: "Nimbus.LocalizedField.infoBoxTriggerAriaLabel",
+    description: "aria label for button that triggers more info dialog",
+    defaultMessage: "more info"
+  },
+  showLanguages: {
+    id: "Nimbus.LocalizedField.showLanguages",
+    description: "Label for showing all language inputs when toggle button is pressed",
+    defaultMessage: "Show all languages"
+  },
+  hideLanguages: {
+    id: "Nimbus.LocalizedField.hideLanguages",
+    description: "Label for hiding all language inputs when toggle button is pressed",
+    defaultMessage: "Hide all languages"
+  },
+  showCurrencies: {
+    id: "Nimbus.LocalizedField.showCurrencies",
+    description: "Label for showing all currency inputs when toggle button is pressed",
+    defaultMessage: "Show all currencies"
+  },
+  hideCurrencies: {
+    id: "Nimbus.LocalizedField.hideCurrencies",
+    description: "Label for hiding all currency inputs when toggle button is pressed",
+    defaultMessage: "Hide all currencies"
+  }
+}), { withProvider: ye, withContext: p } = /* @__PURE__ */ je({
+  key: "localizedField"
+}), Be = /* @__PURE__ */ ye("fieldset", "root"), He = /* @__PURE__ */ p("legend", "label"), Ne = /* @__PURE__ */ p("div", "infoDialog"), Ve = /* @__PURE__ */ p("div", "fieldsContainer"), Re = /* @__PURE__ */ p("div", "description"), Ae = /* @__PURE__ */ p("div", "error"), De = /* @__PURE__ */ p("div", "toggleButtonContainer"), qe = /* @__PURE__ */ p("div", "localeFieldRoot"), We = /* @__PURE__ */ p("div", "localeFieldLabel"), Ue = /* @__PURE__ */ p("div", "localeFieldInput"), Je = () => /* @__PURE__ */ i(I.Error, { children: /* @__PURE__ */ i(pe, { ...M.missingRequiredField }) }), F = (e, t) => e && t ? `${e}.${t}` : void 0, q = (e) => e.split("-")[0], Qe = (e, t) => {
+  const o = q(e), r = t.filter(
+    (l) => q(l) === o
+  );
+  return {
+    unrelated: t.filter(
+      (l) => q(l) !== o
+    ),
+    related: r
+  };
+}, Xe = (e, t) => {
+  const { related: o, unrelated: r } = Qe(
+    e,
+    t.filter((n) => n !== e)
+  );
+  return [e, ...o.sort(), ...r.sort()];
+}, Ye = (e, t) => {
+  const o = t.filter(
+    (r) => r !== e
+  );
+  return [e, ...o.sort()];
+}, Ze = (e, t) => e && Object.keys(e).length > 0 && t ? Object.keys(e).some(
+  (o) => o !== t
+) : !1, _e = (e, t) => Array.from(
+  /* @__PURE__ */ new Set([...e, ...Object.keys(t)])
+).reduce(
+  (r, n) => ({
+    ...r,
+    [n]: t?.[n] || ""
+  }),
+  {}
+), Ge = (e) => e ? Object.values(e).every(
+  (t) => !t || t?.trim().length === 0
+) : !0, Oe = (e) => (typeof e != "object" && console.warn(
+  "Nimbus Localized Field - Warning: omitEmptyTranslations must be called with an object"
+), Object.entries(e).reduce(
+  (t, [o, r]) => r && r.trim().length > 0 ? {
+    ...t,
+    [o]: r
+  } : t,
+  {}
+)), Ke = (e) => e ? Object.values(e).some(Boolean) : !1;
+function et(e) {
+  return e;
+}
+const tt = (e, t) => Object.values(e).map((o) => S.convertToMoneyValue(o, t)), it = (e = [], t) => e.reduce(
+  (o, r) => {
+    const n = S.parseMoneyValue(r, t);
+    return {
+      ...o,
+      [n.currencyCode]: n
+    };
+  },
+  {}
+), ot = (e, t) => Object.keys(e).filter(
+  (r) => S.isHighPrecision(e[r], t)
+), rt = (e) => Object.keys(e).filter(
+  (o) => S.isEmpty(e[o])
+), nt = ({
+  type: e,
+  size: t,
+  localeOrCurrency: o,
+  id: r,
+  name: n,
+  inputValue: l,
+  description: $,
+  warning: f,
+  error: h,
+  onChange: L,
+  onBlur: w,
+  onFocus: C,
+  isRequired: j,
+  isReadOnly: b,
+  isDisabled: v,
+  isInvalid: x,
+  touched: s,
+  ...B
+}) => {
+  let a;
+  switch (e) {
+    case "text":
+    default:
+      a = ze;
+      break;
+    case "multiLine":
+      a = ke;
+      break;
+    case "money":
+      a = S;
+      break;
+    case "richText":
+      a = Ee;
+      break;
+  }
+  const E = e === "money" ? l || { amount: "", currencyCode: o } : l || "", T = he(
+    (d) => {
+      const H = {
+        target: typeof d == "object" ? {
+          id: d.target.id,
+          name: d.target.name,
+          locale: void 0,
+          currency: o,
+          value: d.target.value
+        } : { id: r, name: n, locale: o, currency: void 0, value: d }
+      };
+      L(H);
+    },
+    [r, n, o, L]
+  );
+  return /* @__PURE__ */ i(qe, { asChild: !0, children: /* @__PURE__ */ c(
+    I.Root,
+    {
+      isDisabled: v,
+      isReadOnly: b,
+      isInvalid: (x || !!h) && s,
+      direction: "row",
+      size: t,
+      id: r,
+      children: [
+        /* @__PURE__ */ i(
+          We,
+          {
+            display: e === "money" ? "none" : void 0,
+            ...v && { "data-disabled": v },
+            asChild: !0,
+            children: /* @__PURE__ */ i(I.Label, { children: o.toLocaleUpperCase() })
+          }
+        ),
+        /* @__PURE__ */ i(I.Input, { children: /* @__PURE__ */ i(
+          Ue,
+          {
+            "aria-required": j,
+            asChild: !0,
+            children: /* @__PURE__ */ i(
+              a,
+              {
+                ...B,
+                size: t,
+                value: E,
+                onChange: T,
+                onBlur: (d) => w?.(d, o),
+                onFocus: (d) => C?.(d, o),
+                isRequired: j,
+                isDisabled: v,
+                isReadOnly: b,
+                isInvalid: (x || !!h) && s
+              }
+            )
+          }
+        ) }),
+        ($ || f && s) && /* @__PURE__ */ i(
+          I.Description,
+          {
+            role: f && s ? "status" : void 0,
+            color: f && s ? "warning.11" : void 0,
+            display: "flex",
+            gap: "100",
+            alignItems: "center",
+            children: f && s ? /* @__PURE__ */ c(re, { children: [
+              /* @__PURE__ */ i(W, { colorPalette: "warning", children: /* @__PURE__ */ i(ne, {}) }),
+              f
+            ] }) : $
+          }
+        ),
+        h && s && /* @__PURE__ */ i(I.Error, { children: h })
+      ]
+    }
+  ) });
+}, at = ({
+  type: e = "text",
+  id: t,
+  name: o,
+  defaultLocaleOrCurrency: r,
+  valuesByLocaleOrCurrency: n,
+  placeholdersByLocaleOrCurrency: l,
+  descriptionsByLocaleOrCurrency: $,
+  warningsByLocaleOrCurrency: f,
+  errorsByLocaleOrCurrency: h,
+  label: L,
+  hint: w,
+  description: C,
+  warning: j,
+  warnings: b,
+  renderWarning: v,
+  error: x,
+  errors: s,
+  renderError: B,
+  touched: a,
+  isRequired: P,
+  isDisabled: E,
+  isReadOnly: T,
+  onChange: d,
+  onBlur: U,
+  onFocus: H,
+  defaultExpanded: ae = !1,
+  displayAllLocalesOrCurrencies: J = !1,
+  size: Q,
+  autoFocus: X,
+  ["data-track-component"]: se,
+  ["data-testid"]: le,
+  ["data-test"]: de,
+  // DOM & Style props for wrapper container
+  ...ce
+}) => {
+  const [g, Y] = be(
+    J || ae
+  ), { formatMessage: k } = fe(), Z = te(), _ = te(), N = !!(x || s && Object.values(s).some((u) => u === !0)), z = !!(j || b && Object.values(b).some(Boolean)), y = !!(N && a), { labelProps: G, fieldProps: O, descriptionProps: V, errorMessageProps: R } = Se({
+    id: t,
+    label: L,
+    description: C,
+    errorMessage: x,
+    isInvalid: y
+  }), A = Object.keys(
+    n
+  ), ge = Fe(() => (e === "money" ? Ye(
+    r,
+    A
+  ) : Xe(
+    r,
+    A
+  )).reduce(
+    (ee, m) => {
+      const ue = {
+        localeOrCurrency: m,
+        inputValue: n[m],
+        placeholder: l?.[m],
+        description: $?.[m],
+        warning: f?.[m],
+        error: h?.[m],
+        // autoFocus default/first locale field
+        ...m === r && X ? { autoFocus: X } : {},
+        isInvalid: y,
+        isRequired: P,
+        isDisabled: E,
+        isReadOnly: T
+      };
+      return g || // Only display defaultLocaleOrInput field if fieldGroup is not expanded
+      !g && m === r ? [...ee, ue] : ee;
+    },
+    []
+  ), [
+    n,
+    l,
+    $,
+    f,
+    h,
+    r,
+    g,
+    y,
+    P,
+    E,
+    T
+  ]), K = (Ze(
+    h,
+    r
+  ) || N) && a;
+  return K && !g && Y(!0), /* @__PURE__ */ c(
+    Be,
+    {
+      ...ce,
+      ...O,
+      "aria-details": w ? _ : void 0,
+      type: e,
+      size: Q,
+      name: o,
+      children: [
+        L && /* @__PURE__ */ c(D, { direction: "row", gap: "0", children: [
+          /* @__PURE__ */ c(He, { ...G, children: [
+            L,
+            P && /* @__PURE__ */ i("sup", { "aria-hidden": "true", children: "*" })
+          ] }),
+          w && /* @__PURE__ */ c(Le, { children: [
+            /* @__PURE__ */ i(
+              Pe,
+              {
+                id: _,
+                "aria-label": k(M.infoBoxTriggerAriaLabel),
+                size: "2xs",
+                colorPalette: "info",
+                variant: "link",
+                children: /* @__PURE__ */ i(Ie, {})
+              }
+            ),
+            /* @__PURE__ */ i(Ce, { padding: 0, children: /* @__PURE__ */ i(Ne, { asChild: !0, children: /* @__PURE__ */ i(ve, { children: /* @__PURE__ */ i(oe, { p: "300", children: w }) }) }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ i(
+          Ve,
+          {
+            id: Z,
+            "data-expanded": g,
+            children: /* @__PURE__ */ i(xe, { items: ge, children: (u) => /* @__PURE__ */ i(
+              nt,
+              {
+                ...u,
+                size: Q,
+                type: e,
+                onChange: d,
+                onBlur: U,
+                onFocus: H,
+                touched: a,
+                id: F(
+                  O.id,
+                  u.localeOrCurrency
+                ),
+                name: F(o, u.localeOrCurrency),
+                "data-test": F(
+                  de,
+                  u.localeOrCurrency
+                ),
+                "data-testid": F(
+                  le,
+                  u.localeOrCurrency
+                ),
+                "data-track-component": F(
+                  se,
+                  u.localeOrCurrency
+                )
+              }
+            ) })
+          }
+        ),
+        !J && A.length > 1 && /* @__PURE__ */ i(De, { children: /* @__PURE__ */ c(
+          Te,
+          {
+            "aria-controls": Z,
+            "aria-describedby": G.id,
+            "aria-expanded": g,
+            onPress: () => Y(!g),
+            isDisabled: E || K && g,
+            variant: "ghost",
+            size: "2xs",
+            colorPalette: "primary",
+            children: [
+              /* @__PURE__ */ i(
+                oe,
+                {
+                  as: e === "money" ? Me : $e,
+                  display: "inline-flex",
+                  boxSize: "400",
+                  verticalAlign: "text-bottom",
+                  mr: "100"
+                }
+              ),
+              k(e === "money" ? g ? M.hideCurrencies : M.showCurrencies : g ? M.hideLanguages : M.showLanguages)
+            ]
+          }
+        ) }),
+        (C || z && a) && /* @__PURE__ */ i(
+          Re,
+          {
+            role: z && a ? "status" : void 0,
+            color: z && a ? "warning.11" : void 0,
+            "aria-labelledby": `${V.id}-warning`,
+            ...V,
+            children: z && a ? /* @__PURE__ */ c(re, { children: [
+              /* @__PURE__ */ i(W, { colorPalette: "warning", children: /* @__PURE__ */ i(ne, {}) }),
+              /* @__PURE__ */ c(D, { gap: "0", id: `${V.id}-warning`, children: [
+                j,
+                b && z && /* @__PURE__ */ i(
+                  ie,
+                  {
+                    errors: b,
+                    renderError: v,
+                    colorPalette: "warning",
+                    role: void 0
+                  }
+                )
+              ] })
+            ] }) : C
+          }
+        ),
+        y && /* @__PURE__ */ c(
+          Ae,
+          {
+            "aria-labelledby": `${R.id}-error`,
+            role: "alert",
+            ...R,
+            children: [
+              /* @__PURE__ */ i(W, { children: /* @__PURE__ */ i(we, {}) }),
+              /* @__PURE__ */ c(D, { gap: "0", id: `${R.id}-error`, children: [
+                x,
+                s && N && /* @__PURE__ */ i(
+                  ie,
+                  {
+                    errors: s,
+                    renderError: B,
+                    role: void 0
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, kt = /* @__PURE__ */ Object.assign(at, {
+  // Add util methods here for compat with uikit - see https://github.com/commercetools/ui-kit/blob/e97e0c7e8f3e9393981bf1949573212d7c571c90/packages/components/inputs/localized-text-input/src/localized-text-input.tsx#L396
+  getId: F,
+  getName: F,
+  isTouched: Ke,
+  isEmpty: Ge,
+  createLocalizedString: _e,
+  omitEmptyTranslations: Oe,
+  RequiredValueErrorMessage: Je,
+  toFieldErrors: et,
+  convertToMoneyValues: tt,
+  parseMoneyValues: it,
+  getHighPrecisionCurrencies: ot,
+  getEmptyCurrencies: rt
+});
+export {
+  kt as L
+};
+//# sourceMappingURL=localized-field-XLDcWlU1.es.js.map