@lax-wp/design-system 0.13.33 → 0.13.35

package/dist/components/forms/base-input-field/BaseInputField.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInputField.es.js","sources":["../../../../src/components/forms/base-input-field/BaseInputField.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport cn from \"classnames\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React, { forwardRef, useState } from \"react\";\nimport { useTranslation } from 'react-i18next';\nimport { Tooltip as AntTooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport { Label } from \"../../data-display/label/Label\";\nimport type { LabelType } from \"../../data-display/label/Label\";\nimport { NoteAddOutlined, BoltOutlined } from \"@mui/icons-material\";\nimport { AIExtractedIndicator } from \"../../icons/AIExtractedIndicator\";\nimport { AIStarIcon } from \"../../icons/AIStarIcon\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport Tooltip from \"../../tooltip/Tooltip\";\nimport {\n  getConfidenceScoreBadgeClass,\n  getConfidenceScoreBadgeColor,\n  getConfidenceScoreBadgeFill,\n  getConfidenceScoreBadgeTextColor,\n  shouldShowConfidenceScore,\n} from \"../../../utils/confidenceScoreUtils\";\n\n/**\n * Confidence score type\n */\nexport type ConfidenceScoreType = \"low\" | \"medium\" | \"high\";\n\n/**\n * Bounding boxes interface\n */\nexport type SourceMetaBBox = {\n  b: number;\n  l: number;\n  r: number;\n  t: number;\n};\n\nexport type SourceMetaItem = {\n  bbox: SourceMetaBBox;\n  confidence_score?: number;\n  is_primary?: boolean;\n  match_score?: number;\n  match_type?: string;\n  page_height: number;\n  page_width: number;\n  source_page: number;\n  source_text?: string;\n};\n\n/**\n * Risk details interface\n */\nexport interface RiskDetails {\n  color?: string;\n  description?: string;\n  hexBgColor?: string;\n  hexBorderColor?: string;\n  [key: string]: any;\n}\n\n/**\n * Risk details card component props\n */\nexport interface RiskDetailsCardProps {\n  riskDetails: RiskDetails;\n  maxWidth?: string;\n  showAllRisksSuggestions?: boolean;\n}\n\n/**\n * Eye icon for password visibility toggle\n */\nconst EyeIcon = ({ className, size = 16 }: { className?: string; size?: number }) => (\n  <svg\n    width={size}\n    height={size}\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className={className}\n  >\n    <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" />\n    <circle cx=\"12\" cy=\"12\" r=\"3\" />\n  </svg>\n);\n\n/**\n * Eye off icon for password visibility toggle\n */\nconst EyeOffIcon = ({ className, size = 16 }: { className?: string; size?: number }) => (\n  <svg\n    width={size}\n    height={size}\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className={className}\n  >\n    <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\" />\n    <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\" />\n  </svg>\n);\n\n/**\n * Close icon for clearable input\n */\nconst CloseIcon = ({ className, size = 16 }: { className?: string; size?: number }) => (\n  <svg\n    width={size}\n    height={size}\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className={className}\n  >\n    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n  </svg>\n);\n\n/**\n * Revert icon for revert back value\n */\nconst RevertIcon = ({ className, size = 16 }: { className?: string; size?: number }) => (\n  <svg\n    width={size}\n    height={size}\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className={className}\n  >\n    <path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\" />\n    <path d=\"M3 3v5h5\" />\n  </svg>\n);\n\n/** Visual emphasis for the input surface (background + border) */\nexport type BaseInputFieldEmphasis = \"default\" | \"modified\" | \"deleted\" | \"success\";\n\n/**\n * Props for the BaseInputField component\n */\nexport type TBaseInputFieldProps = any & {\n  /** Current value of the input */\n  value: string;\n  /** Callback function called when the input value changes */\n  onChange(data: any): void;\n  /** Callback function for key down events */\n  onKeyDown?: void;\n  /** Error message to display */\n  errorMessage: string;\n  /** Default value for the input */\n  defaultValue?: string;\n  /** Whether the input is disabled */\n  disabled?: boolean;\n  /** Maximum value for number inputs */\n  max?: number;\n  /** Minimum value for number inputs */\n  min?: number;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Whether the required indicator shows as conditional */\n  isRequiredConditional?: boolean;\n  /** Background color class */\n  bg?: string;\n  /** Tags to display with the label */\n  tags?: (string | LabelType)[];\n  /** Text color class */\n  color?: string;\n  /** Unique identifier for the input */\n  id: string;\n  /** Label text for the input */\n  label?: string;\n  /** Optional extra content in the label row (e.g. actions, badges) */\n  labelExtra?: React.ReactNode;\n  /** Input type (text, email, password, number, etc.) */\n  type?: string;\n  /** Value to revert back to */\n  revertBackValue?: any;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Whether this is a password field with visibility toggle */\n  isPasswordField?: boolean;\n  /** Callback to set password visibility */\n  setIsPasswordVisible?: any;\n  /** Tooltip text */\n  tooltip?: string;\n  /** Whether to preserve original case in the label */\n  originalCase?: boolean;\n  /** Icon or element to display at the end of the input */\n  suffixIcon?: React.ReactNode;\n  /** Text size class */\n  textSize?: string;\n  /** Whether the value was AI extracted */\n  isAiExtracted?: boolean;\n  /** Whether this is a GTN field */\n  isGTN?: boolean;\n  /** Confidence score shown as a compact badge */\n  confidenceScore?: number;\n  /** Confidence classification for badge styling */\n  confidenceType?: ConfidenceScoreType;\n  /** Optional tooltip content for confidence score badge */\n  confidenceTooltip?: React.ReactNode;\n  /** GTN name for document integration */\n  gtnName?: any;\n  /** Success message to display */\n  successMessage?: string;\n  /** Additional CSS classes for the input element */\n  inputClassName?: string;\n  /** Inline styles for the input element */\n  inputStyle?: React.CSSProperties;\n  /** Additional CSS classes for the label */\n  labelClassName?: string;\n  /** Whether this is a live field */\n  isLiveField?: boolean;\n  /** Callback function for blur events */\n  onBlur?: () => void;\n  /** Whether the input is clearable */\n  isClearable?: boolean;\n  /** Additional CSS classes for the wrapper */\n  className?: string;\n  /** Ref for the input element */\n  inputRef?: React.RefObject<HTMLInputElement>;\n  /** Risk details data */\n  riskDetails?: RiskDetails;\n  /** Whether risk analysis is open */\n  isRiskAnalysisOpen?: boolean;\n  /** Custom risk details card component */\n  RiskDetailsCard?: React.ComponentType<RiskDetailsCardProps>;\n  /** Bounding box for confidence score */\n  sourceMeta?: SourceMetaItem[];\n  /** Handler for adding GTN to document */\n  onAddGTNToDocument?: (keyValuePair: { key: string; value: string }) => void;\n  /** Callback function for confidence score click */\n  onConfidenceScoreClick?: (sourceMeta: SourceMetaItem[]) => void;\n  /** Input surface style: `'modified'` — `--Warning-50` / `--Warning-200`; `'deleted'` — `--Error-50` / `--Error-200`, text `#475467`; `'success'` — `--Success-50` / `--Success-200`, text `#101828`. */\n  inputEmphasis?: BaseInputFieldEmphasis;\n};\n\n/**\n * A feature-rich input field component with label, validation, GTN integration,\n * risk analysis support, and comprehensive styling options.\n *\n * @example\n * ```tsx\n * <BaseInputField\n *   id=\"email\"\n *   label=\"Email Address\"\n *   type=\"email\"\n *   value={email}\n *   onChange={setEmail}\n *   placeholder=\"Enter your email\"\n *   required\n *   errorMessage={emailError}\n * />\n * ```\n */\nexport const BaseInputField = forwardRef<HTMLInputElement, TBaseInputFieldProps>(\n  (\n    {\n      id,\n      label,\n      labelExtra,\n      onChange,\n      errorMessage,\n      successMessage,\n      required,\n      isRequiredConditional = false,\n      bg,\n      tags,\n      color,\n      className,\n      isPasswordField,\n      setIsPasswordVisible,\n      inputRef,\n      tooltip,\n      suffixIcon,\n      revertBackValue,\n      originalCase = false,\n      textSize,\n      isAiExtracted = false,\n      isGTN = false,\n      confidenceScore,\n      confidenceType = \"high\",\n      confidenceTooltip,\n      gtnName = null,\n      inputClassName = \"\",\n      inputStyle = {},\n      labelClassName,\n      onBlur,\n      isLiveField = false,\n      isClearable = false,\n      riskDetails,\n      isRiskAnalysisOpen = false,\n      RiskDetailsCard,\n      onAddGTNToDocument,\n      sourceMeta = [],\n      inputEmphasis = \"default\",\n      onConfidenceScoreClick,\n      ...props\n    },\n    ref\n  ) => {\n    const { t } = useTranslation();\n    const showRiskSkin = Boolean(isRiskAnalysisOpen && riskDetails?.color);\n    const emphasisModifiedSkin =\n      inputEmphasis === \"modified\" &&\n      !errorMessage &&\n      !successMessage &&\n      !showRiskSkin;\n    const emphasisDeletedSkin =\n      inputEmphasis === \"deleted\" &&\n      !errorMessage &&\n      !successMessage &&\n      !showRiskSkin;\n    const emphasisSuccessSkin =\n      inputEmphasis === \"success\" &&\n      !errorMessage &&\n      !successMessage &&\n      !showRiskSkin;\n    const [showPassword, setShowPassword] = useState(false);\n    const [isHovered, setIsHovered] = useState(false);\n    const handleAddGTNToDocument = (value: string) => {\n      if (onAddGTNToDocument) {\n        const keyValuePair = {\n          key: gtnName,\n          value,\n        };\n        onAddGTNToDocument(keyValuePair);\n      }\n    };\n\n    return (\n      <div\n        className={cn(\n          \"flex gap-0.5 relative\",\n          isHovered && isGTN\n            ? \"border rounded-lg border-primary-100 bg-primary-50 p-1 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-neutral-50 dark:focus:border-neutral-50\"\n            : \"\"\n        )}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      >\n        {isGTN && !isHovered ? (\n          <div className=\"w-1 h-1 bg-primary-600 rounded-full animate-blink mt-1.5\" />\n        ) : null}\n        <div className={cn(\"flex flex-col w-full\", className)}>\n          <style>\n            {`\n              .dark input:-webkit-autofill,\n              .dark input:-webkit-autofill:hover,\n              .dark input:-webkit-autofill:focus {\n                -webkit-text-fill-color: white !important;\n                -webkit-box-shadow: 0 0 0px 1000px var(--input-bg-color) inset !important;\n                transition: background-color 5000s ease-in-out 0s;\n              }\n              \n              input:-webkit-autofill,\n              input:-webkit-autofill:hover,\n              input:-webkit-autofill:focus {\n                -webkit-text-fill-color: #111827 !important;\n                -webkit-box-shadow: 0 0 0px 1000px white inset !important;\n                transition: background-color 5000s ease-in-out 0s;\n              }\n            `}\n          </style>\n          {(label || labelExtra) && (\n            <label\n              id={id}\n              htmlFor=\"text\"\n              className={`mb-1 text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${!originalCase ? \"capitalize\" : \"\"\n                } ${labelClassName || \"!uppercse\"}`}\n            >\n              <div className=\"flex flex-wrap items-center justify-between w-full\">\n                <div className=\"inline-flex flex-wrap items-center gap-1\">\n                  {(label || required || isRequiredConditional) && (\n                    <InputLabel label={label ?? \"\"} required={required || false} isRequiredConditional={isRequiredConditional || false} />\n                  )}\n                  {revertBackValue?.length > 0 &&\n                    revertBackValue !== props.value && (\n                      <AntTooltip placement=\"top\" title={revertBackValue}>\n                        <button\n                          className=\"cursor-pointer\"\n                          onClick={() => onChange(revertBackValue)}\n                          type=\"button\"\n                        >\n                          <RevertIcon\n                            size={16}\n                            className=\"cursor-pointer pb-0.5 text-primary-600\"\n                          />\n                        </button>\n                      </AntTooltip>\n                    )}\n                  {isLiveField && (\n                    <BoltOutlined\n                      sx={{\n                        fontSize: 16,\n                        color: \"var(--color-primary-600)\",\n                        rotate: \"15deg\",\n                      }}\n                    />\n                  )}\n                  {isAiExtracted && !shouldShowConfidenceScore(confidenceScore) && <AIExtractedIndicator />}\n                  <Label labels={tags} />\n                  {tooltip && (\n                    <AntTooltip placement=\"top\" title={tooltip}>\n                      <div className=\"cursor-pointer\">\n                        <HelpIcon />\n                      </div>\n                    </AntTooltip>\n                  )}\n                  {labelExtra}\n                </div>\n                <div className=\"flex items-center gap-1\">\n                  {(shouldShowConfidenceScore(confidenceScore) && confidenceType) ? (\n                    <Tooltip\n                      placement=\"top-end\"\n                      title={confidenceTooltip || \"\"}\n                      className=\"cursor-pointer\"\n                    >\n                      <div\n                        className={cn(\n                          \"inline-flex min-w-[50px] items-center gap-1 rounded-md px-1 py-0.5\",\n                          getConfidenceScoreBadgeClass(confidenceType)\n                        )}\n                        onClick={() => onConfidenceScoreClick?.(sourceMeta)}\n                      >\n                        <AIStarIcon\n                          size={12}\n                          fill={getConfidenceScoreBadgeColor(confidenceType)}\n                          fillSecondary={getConfidenceScoreBadgeFill(confidenceType)}\n                        />\n                        <span\n                          className={cn(\n                            \"text-xs font-medium leading-4\",\n                            getConfidenceScoreBadgeTextColor(confidenceType)\n                          )}\n                        >\n                          {confidenceScore}%\n                        </span>\n                      </div>\n                    </Tooltip>\n                  ) : null}\n\n                  {isGTN && isHovered && onAddGTNToDocument ? (\n                    <button\n                      id={`btn-base-input-field-add-to-document-${id}`}\n                      className=\"cursor-pointer\"\n                      onClick={() => handleAddGTNToDocument(props?.value)}\n                      type=\"button\"\n                    >\n                      <AntTooltip placement=\"top\" title={t(\"Add to document\")}>\n                        <NoteAddOutlined\n                          className=\"text-primary-600\"\n                          sx={{\n                            fontSize: 16,\n                          }}\n                        />\n                      </AntTooltip>\n                    </button>\n                  ) : null}\n                </div>\n              </div>\n            </label>\n          )}\n          <label className=\"relative block\">\n            <div className=\"relative\">\n              <input\n                {...props}\n                ref={inputRef || ref}\n                id={id || label}\n                key={id}\n                required={required}\n                style={\n                  {\n                    \"--input-bg-color\":\n                      \"var(--tw-bg-opacity, 1) rgb(var(--bg-color))\",\n                    ...inputStyle,\n                  } as React.CSSProperties\n                }\n                className={cn(\n                  \"border border-solid h-[32px] text-neutral-900 dark:text-black-100 block w-full px-3 py-1.5 font-medium disabled:opacity-70 focus:outline-none focus:ring-0 dark:disabled:placeholder:!text-black-400\",\n                  textSize ? textSize : \"text-sm\",\n                  color ? color : \"text-neutral-900 dark:text-black-100\",\n                  bg && bg,\n                  inputClassName ? inputClassName : \"\",\n                  errorMessage\n                    ? cn(\n                        \"rounded-md border-red-300 dark:border-red-500 bg-white hover:border-red-400 dark:bg-black-600 dark:hover:border-red-400 focus:border-red-600 focus:shadow-[0_0_0_1.5px_rgba(239,68,68,0.22)] dark:focus:border-red-500 dark:focus:shadow-[0_0_0_1.5px_rgba(248,113,113,0.25)]\",\n                      )\n                    : successMessage\n                      ? cn(\n                          \"rounded-md border-green-300 bg-white hover:border-green-400 dark:border-green-600 dark:bg-black-600 dark:hover:border-green-500 focus:border-green-600 focus:shadow-[0_0_0_1.5px_rgba(34,197,94,0.22)] dark:focus:border-green-500\",\n                        )\n                      : showRiskSkin && riskDetails?.color\n                        ? cn(\n                            \"rounded-md hover:border-primary-500 dark:hover:border-primary-400 focus:border-primary-600 dark:focus:border-primary-400 focus:shadow-[0_0_0_1.5px_var(--color-primary-100)] dark:focus:shadow-[0_0_0_1.5px_var(--color-primary-950)]\",\n                            `bg-${riskDetails.color}-50 border-${riskDetails.color}-300`,\n                          )\n                        : emphasisDeletedSkin\n                          ? \"rounded-lg border border-solid border-[var(--Error-200,#FECACA)] bg-[var(--Error-50,#FEF2F2)] !text-[#475467] focus:border-[var(--Error-200,#FECACA)] focus:shadow-[0_0_0_2px_rgba(254_202_202_/_0.45)] dark:border-[var(--Error-200,#FECACA)] dark:bg-[var(--Error-50,#FEF2F2)] dark:!text-[#475467] disabled:!opacity-100 disabled:!bg-[var(--Error-50,#FEF2F2)] dark:disabled:!bg-[var(--Error-50,#FEF2F2)]\"\n                          : emphasisModifiedSkin\n                            ? \"rounded-lg border border-solid border-[var(--Warning-200,#FEDF89)] bg-[var(--Warning-50,#FFFAEB)] text-neutral-900 dark:text-black-100 focus:border-[var(--Warning-200,#FEDF89)] focus:shadow-[0_0_0_2px_rgba(254_223_137_/_0.45)] dark:border-[var(--Warning-200,#FEDF89)] dark:bg-[var(--Warning-50,#FFFAEB)] disabled:!opacity-100 disabled:!bg-[var(--Warning-50,#FFFAEB)] dark:disabled:!bg-[var(--Warning-50,#FFFAEB)]\"\n                            : emphasisSuccessSkin\n                              ? \"rounded-lg border border-solid border-[var(--Success-200,#BBF7D0)] bg-[var(--Success-50,#F0FDF4)] !text-[#101828] focus:border-[var(--Success-200,#BBF7D0)] focus:shadow-[0_0_0_2px_rgba(187_247_208_/_0.45)] dark:border-[var(--Success-200,#BBF7D0)] dark:bg-[var(--Success-50,#F0FDF4)] dark:!text-[#101828] disabled:!opacity-100 disabled:!bg-[var(--Success-50,#F0FDF4)] dark:disabled:!bg-[var(--Success-50,#F0FDF4)] disabled:!text-[#101828] dark:disabled:!text-[#101828]\"\n                              : \"rounded-md border-neutral-200 bg-white hover:border-primary-500 dark:border-black-600 dark:bg-black-600 dark:hover:border-primary-400 focus:border-primary-600 dark:focus:border-primary-400 focus:shadow-[0_0_0_1.5px_var(--color-primary-100)] dark:focus:shadow-[0_0_0_1.5px_var(--color-primary-950)] disabled:!bg-neutral-50 dark:disabled:!bg-black-800\"\n                )}\n                onChange={(e) => {\n                  onChange(e.target.value);\n                }}\n                onClick={(e) => e.stopPropagation()}\n                autoComplete=\"off\"\n                onBlur={onBlur}\n              />\n              {isPasswordField ? (\n                <button\n                  className=\"absolute inset-y-0 flex items-center cursor-pointer right-2\"\n                  onClick={() => {\n                    setShowPassword(!showPassword);\n                    setIsPasswordVisible?.(!showPassword);\n                  }}\n                  type=\"button\"\n                >\n                  {showPassword ? (\n                    <EyeIcon className=\"text-gray-400\" size={16} />\n                  ) : (\n                    <EyeOffIcon className=\"text-gray-400\" size={16} />\n                  )}\n                </button>\n              ) : isClearable && props.value ? (\n                <button\n                  id={`btn-input-field-clear-${id}`}\n                  className=\"absolute inset-y-0 flex items-center cursor-pointer right-2 focus:outline-none\"\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    onChange(\"\");\n                  }}\n                  type=\"button\"\n                >\n                  <CloseIcon\n                    className=\"text-neutral-200 dark:text-black-500\"\n                    size={16}\n                  />\n                </button>\n              ) : suffixIcon ? (\n                <div className=\"absolute inset-y-0 flex items-center right-2\">\n                  {suffixIcon}\n                </div>\n              ) : null}\n            </div>\n          </label>\n          <AnimatePresence>\n            {errorMessage && (\n              <motion.div\n                initial={{ opacity: 0, y: -10 }}\n                animate={{ opacity: 1, y: 0 }}\n                exit={{ opacity: 0, y: -10 }}\n                transition={{ duration: 0.2 }}\n              >\n                <Typography\n                  className=\"mt-1 text-error-500\"\n                  appearance=\"custom\"\n                  size=\"extra-small\"\n                  variant=\"medium\"\n                >\n                  {errorMessage}\n                </Typography>\n              </motion.div>\n            )}\n          </AnimatePresence>\n          <AnimatePresence>\n            {successMessage && (\n              <motion.div\n                initial={{ opacity: 0, y: -10 }}\n                animate={{ opacity: 1, y: 0 }}\n                exit={{ opacity: 0, y: -10 }}\n                transition={{ duration: 0.2 }}\n              >\n                <Typography\n                  className=\"mt-1 text-success-500 dark:text-success-300\"\n                  appearance=\"custom\"\n                  size=\"extra-small\"\n                  variant=\"medium\"\n                >\n                  {successMessage}\n                </Typography>\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </div>\n\n        {isHovered &&\n          riskDetails &&\n          isRiskAnalysisOpen &&\n          RiskDetailsCard && (\n            <div\n              role=\"tooltip\"\n              tabIndex={0}\n              className=\"absolute left-0 right-0 top-[95%] mt-1 z-50 bg-white dark:bg-black-600 rounded-xl\"\n              onClick={(e) => e.stopPropagation()}\n              onMouseDown={(e) => e.preventDefault()}\n              onKeyDown={(e) => {\n                if (e.key === \"Escape\") {\n                  setIsHovered(false);\n                }\n              }}\n            >\n              <RiskDetailsCard riskDetails={riskDetails} />\n            </div>\n          )}\n      </div>\n    );\n  }\n);\n\nBaseInputField.displayName = \"BaseInputField\";\n\nexport default BaseInputField;\n\n"],"names":["EyeIcon","className","size","jsxs","jsx","EyeOffIcon","CloseIcon","RevertIcon","BaseInputField","forwardRef","id","label","labelExtra","onChange","errorMessage","successMessage","required","isRequiredConditional","bg","tags","color","isPasswordField","setIsPasswordVisible","inputRef","tooltip","suffixIcon","revertBackValue","originalCase","textSize","isAiExtracted","isGTN","confidenceScore","confidenceType","confidenceTooltip","gtnName","inputClassName","inputStyle","labelClassName","onBlur","isLiveField","isClearable","riskDetails","isRiskAnalysisOpen","RiskDetailsCard","onAddGTNToDocument","sourceMeta","inputEmphasis","onConfidenceScoreClick","props","ref","t","useTranslation","showRiskSkin","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","showPassword","setShowPassword","useState","isHovered","setIsHovered","handleAddGTNToDocument","value","cn","InputLabel","AntTooltip","BoltOutlined","shouldShowConfidenceScore","AIExtractedIndicator","Label","HelpIcon","Tooltip","getConfidenceScoreBadgeClass","AIStarIcon","getConfidenceScoreBadgeColor","getConfidenceScoreBadgeFill","getConfidenceScoreBadgeTextColor","NoteAddOutlined","createElement","e","AnimatePresence","motion","Typography"],"mappings":"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"}
+{"version":3,"file":"BaseInputField.es.js","sources":["../../../../src/components/forms/base-input-field/BaseInputField.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport cn from \"classnames\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React, { forwardRef, useState } from \"react\";\nimport { useTranslation } from 'react-i18next';\nimport { Tooltip as AntTooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { Label } from \"../../data-display/label/Label\";\nimport type { LabelType } from \"../../data-display/label/Label\";\nimport { NoteAddOutlined, BoltOutlined } from \"@mui/icons-material\";\nimport { AIExtractedIndicator } from \"../../icons/AIExtractedIndicator\";\nimport { AIStarIcon } from \"../../icons/AIStarIcon\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport Tooltip from \"../../tooltip/Tooltip\";\nimport {\n  getConfidenceScoreBadgeClass,\n  getConfidenceScoreBadgeColor,\n  getConfidenceScoreBadgeFill,\n  getConfidenceScoreBadgeTextColor,\n  shouldShowConfidenceScore,\n} from \"../../../utils/confidenceScoreUtils\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\n\n/**\n * Confidence score type\n */\nexport type ConfidenceScoreType = \"low\" | \"medium\" | \"high\";\n\n/**\n * Bounding boxes interface\n */\nexport type SourceMetaBBox = {\n  b: number;\n  l: number;\n  r: number;\n  t: number;\n};\n\nexport type SourceMetaItem = {\n  bbox: SourceMetaBBox;\n  confidence_score?: number;\n  is_primary?: boolean;\n  match_score?: number;\n  match_type?: string;\n  page_height: number;\n  page_width: number;\n  source_page: number;\n  source_text?: string;\n};\n\n/**\n * Risk details interface\n */\nexport interface RiskDetails {\n  color?: string;\n  description?: string;\n  hexBgColor?: string;\n  hexBorderColor?: string;\n  [key: string]: any;\n}\n\n/**\n * Risk details card component props\n */\nexport interface RiskDetailsCardProps {\n  riskDetails: RiskDetails;\n  maxWidth?: string;\n  showAllRisksSuggestions?: boolean;\n}\n\n/**\n * Eye icon for password visibility toggle\n */\nconst EyeIcon = ({ className, size = 16 }: { className?: string; size?: number }) => (\n  <svg\n    width={size}\n    height={size}\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className={className}\n  >\n    <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" />\n    <circle cx=\"12\" cy=\"12\" r=\"3\" />\n  </svg>\n);\n\n/**\n * Eye off icon for password visibility toggle\n */\nconst EyeOffIcon = ({ className, size = 16 }: { className?: string; size?: number }) => (\n  <svg\n    width={size}\n    height={size}\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className={className}\n  >\n    <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\" />\n    <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\" />\n  </svg>\n);\n\n/**\n * Close icon for clearable input\n */\nconst CloseIcon = ({ className, size = 16 }: { className?: string; size?: number }) => (\n  <svg\n    width={size}\n    height={size}\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className={className}\n  >\n    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n  </svg>\n);\n\n/**\n * Revert icon for revert back value\n */\nconst RevertIcon = ({ className, size = 16 }: { className?: string; size?: number }) => (\n  <svg\n    width={size}\n    height={size}\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className={className}\n  >\n    <path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\" />\n    <path d=\"M3 3v5h5\" />\n  </svg>\n);\n\n/** Visual emphasis for the input surface (background + border) */\nexport type BaseInputFieldEmphasis = \"default\" | \"modified\" | \"deleted\" | \"success\";\n\n/**\n * Props for the BaseInputField component\n */\nexport type TBaseInputFieldProps = any & {\n  /** Current value of the input */\n  value: string;\n  /** Callback function called when the input value changes */\n  onChange(data: any): void;\n  /** Callback function for key down events */\n  onKeyDown?: void;\n  /** Error message to display */\n  errorMessage: string;\n  /** Default value for the input */\n  defaultValue?: string;\n  /** Whether the input is disabled */\n  disabled?: boolean;\n  /** Maximum value for number inputs */\n  max?: number;\n  /** Minimum value for number inputs */\n  min?: number;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Whether the required indicator shows as conditional */\n  isRequiredConditional?: boolean;\n  /** Background color class */\n  bg?: string;\n  /** Tags to display with the label */\n  tags?: (string | LabelType)[];\n  /** Text color class */\n  color?: string;\n  /** Unique identifier for the input */\n  id: string;\n  /** Label text for the input */\n  label?: string;\n  /** Optional extra content in the label row (e.g. actions, badges) */\n  labelExtra?: React.ReactNode;\n  /** Input type (text, email, password, number, etc.) */\n  type?: string;\n  /** Value to revert back to */\n  revertBackValue?: any;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Whether this is a password field with visibility toggle */\n  isPasswordField?: boolean;\n  /** Callback to set password visibility */\n  setIsPasswordVisible?: any;\n  /** Tooltip text */\n  tooltip?: string;\n  /** Whether to preserve original case in the label */\n  originalCase?: boolean;\n  /** Icon or element to display at the end of the input */\n  suffixIcon?: React.ReactNode;\n  /** Text size class */\n  textSize?: string;\n  /** Whether the value was AI extracted */\n  isAiExtracted?: boolean;\n  /** Whether this is a GTN field */\n  isGTN?: boolean;\n  /** Confidence score shown as a compact badge */\n  confidenceScore?: number;\n  /** Confidence classification for badge styling */\n  confidenceType?: ConfidenceScoreType;\n  /** Optional tooltip content for confidence score badge */\n  confidenceTooltip?: React.ReactNode;\n  /** GTN name for document integration */\n  gtnName?: any;\n  /** Success message to display */\n  successMessage?: string;\n  /** Additional CSS classes for the input element */\n  inputClassName?: string;\n  /** Inline styles for the input element */\n  inputStyle?: React.CSSProperties;\n  /** Additional CSS classes for the label */\n  labelClassName?: string;\n  /** Whether this is a live field */\n  isLiveField?: boolean;\n  /** Callback function for blur events */\n  onBlur?: () => void;\n  /** Whether the input is clearable */\n  isClearable?: boolean;\n  /** Additional CSS classes for the wrapper */\n  className?: string;\n  /** Ref for the input element */\n  inputRef?: React.RefObject<HTMLInputElement>;\n  /** Risk details data */\n  riskDetails?: RiskDetails;\n  /** Whether risk analysis is open */\n  isRiskAnalysisOpen?: boolean;\n  /** Custom risk details card component */\n  RiskDetailsCard?: React.ComponentType<RiskDetailsCardProps>;\n  /** Bounding box for confidence score */\n  sourceMeta?: SourceMetaItem[];\n  /** Handler for adding GTN to document */\n  onAddGTNToDocument?: (keyValuePair: { key: string; value: string }) => void;\n  /** Callback function for confidence score click */\n  onConfidenceScoreClick?: (sourceMeta: SourceMetaItem[]) => void;\n  /** Input surface style: `'modified'` — `--Warning-50` / `--Warning-200`; `'deleted'` — `--Error-50` / `--Error-200`, text `#475467`; `'success'` — `--Success-50` / `--Success-200`, text `#101828`. */\n  inputEmphasis?: BaseInputFieldEmphasis;\n};\n\n/**\n * A feature-rich input field component with label, validation, GTN integration,\n * risk analysis support, and comprehensive styling options.\n *\n * @example\n * ```tsx\n * <BaseInputField\n *   id=\"email\"\n *   label=\"Email Address\"\n *   type=\"email\"\n *   value={email}\n *   onChange={setEmail}\n *   placeholder=\"Enter your email\"\n *   required\n *   errorMessage={emailError}\n * />\n * ```\n */\nexport const BaseInputField = forwardRef<HTMLInputElement, TBaseInputFieldProps>(\n  (\n    {\n      id,\n      label,\n      labelExtra,\n      onChange,\n      errorMessage,\n      successMessage,\n      required,\n      isRequiredConditional = false,\n      bg,\n      tags,\n      color,\n      className,\n      isPasswordField,\n      setIsPasswordVisible,\n      inputRef,\n      tooltip,\n      suffixIcon,\n      revertBackValue,\n      originalCase = false,\n      textSize,\n      isAiExtracted = false,\n      isGTN = false,\n      confidenceScore,\n      confidenceType = \"high\",\n      confidenceTooltip,\n      gtnName = null,\n      inputClassName = \"\",\n      inputStyle = {},\n      labelClassName,\n      onBlur,\n      isLiveField = false,\n      isClearable = false,\n      riskDetails,\n      isRiskAnalysisOpen = false,\n      RiskDetailsCard,\n      onAddGTNToDocument,\n      sourceMeta = [],\n      inputEmphasis = \"default\",\n      onConfidenceScoreClick,\n      ...props\n    },\n    ref\n  ) => {\n    const { t } = useTranslation();\n    const showRiskSkin = Boolean(isRiskAnalysisOpen && riskDetails?.color);\n    const emphasisModifiedSkin =\n      inputEmphasis === \"modified\" &&\n      !errorMessage &&\n      !successMessage &&\n      !showRiskSkin;\n    const emphasisDeletedSkin =\n      inputEmphasis === \"deleted\" &&\n      !errorMessage &&\n      !successMessage &&\n      !showRiskSkin;\n    const emphasisSuccessSkin =\n      inputEmphasis === \"success\" &&\n      !errorMessage &&\n      !successMessage &&\n      !showRiskSkin;\n    const [showPassword, setShowPassword] = useState(false);\n    const [isHovered, setIsHovered] = useState(false);\n    const handleAddGTNToDocument = (value: string) => {\n      if (onAddGTNToDocument) {\n        const keyValuePair = {\n          key: gtnName,\n          value,\n        };\n        onAddGTNToDocument(keyValuePair);\n      }\n    };\n\n    return (\n      <div\n        className={cn(\n          \"flex gap-0.5 relative\",\n          isHovered && isGTN\n            ? \"border rounded-lg border-primary-100 bg-primary-50 p-1 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-neutral-50 dark:focus:border-neutral-50\"\n            : \"\"\n        )}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      >\n        {isGTN && !isHovered ? (\n          <div className=\"w-1 h-1 bg-primary-600 rounded-full animate-blink mt-1.5\" />\n        ) : null}\n        <div className={cn(\"flex flex-col w-full\", className)}>\n          <style>\n            {`\n              .dark input:-webkit-autofill,\n              .dark input:-webkit-autofill:hover,\n              .dark input:-webkit-autofill:focus {\n                -webkit-text-fill-color: white !important;\n                -webkit-box-shadow: 0 0 0px 1000px var(--input-bg-color) inset !important;\n                transition: background-color 5000s ease-in-out 0s;\n              }\n              \n              input:-webkit-autofill,\n              input:-webkit-autofill:hover,\n              input:-webkit-autofill:focus {\n                -webkit-text-fill-color: #111827 !important;\n                -webkit-box-shadow: 0 0 0px 1000px white inset !important;\n                transition: background-color 5000s ease-in-out 0s;\n              }\n            `}\n          </style>\n          {(label || labelExtra) && (\n            <label\n              id={id}\n              htmlFor=\"text\"\n              className={`mb-1 text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${!originalCase ? \"capitalize\" : \"\"\n                } ${labelClassName || \"!uppercse\"}`}\n            >\n              <div className=\"flex flex-wrap items-center justify-between w-full\">\n                <div className=\"inline-flex flex-wrap items-center gap-1\">\n                  {(label || required || isRequiredConditional) && (\n                    <InputLabel label={label ?? \"\"} required={required || false} isRequiredConditional={isRequiredConditional || false} />\n                  )}\n                  {revertBackValue?.length > 0 &&\n                    revertBackValue !== props.value && (\n                      <AntTooltip placement=\"top\" title={revertBackValue}>\n                        <button\n                          className=\"cursor-pointer\"\n                          onClick={() => onChange(revertBackValue)}\n                          type=\"button\"\n                        >\n                          <RevertIcon\n                            className=\"cursor-pointer pb-0.5 text-primary-600 w-4 h-4\"\n                          />\n                        </button>\n                      </AntTooltip>\n                    )}\n                  {isLiveField && (\n                    <BoltOutlined\n                      sx={{\n                        fontSize: 16,\n                        color: \"var(--color-primary-600)\",\n                        rotate: \"15deg\",\n                      }}\n                    />\n                  )}\n                  {isAiExtracted && !shouldShowConfidenceScore(confidenceScore) && <AIExtractedIndicator />}\n                  <Label labels={tags} />\n                  {tooltip && (\n                    <AntTooltip placement=\"top\" title={tooltip}>\n                      <div className=\"cursor-pointer\">\n                        <HelpIcon className=\"w-icon-sm h-icon-sm\" />\n                      </div>\n                    </AntTooltip>\n                  )}\n                  {labelExtra}\n                </div>\n                <div className=\"flex items-center gap-1\">\n                  {(shouldShowConfidenceScore(confidenceScore) && confidenceType) ? (\n                    <Tooltip\n                      placement=\"top-end\"\n                      title={confidenceTooltip || \"\"}\n                      className=\"cursor-pointer\"\n                    >\n                      <div\n                        className={cn(\n                          \"inline-flex min-w-12 items-center gap-1 rounded-md px-1 py-0.5\",\n                          getConfidenceScoreBadgeClass(confidenceType)\n                        )}\n                        onClick={() => onConfidenceScoreClick?.(sourceMeta)}\n                      >\n                        <AIStarIcon\n                          size={12}\n                          fill={getConfidenceScoreBadgeColor(confidenceType)}\n                          fillSecondary={getConfidenceScoreBadgeFill(confidenceType)}\n                        />\n                        <span\n                          className={cn(\n                            \"text-xs font-medium leading-4\",\n                            getConfidenceScoreBadgeTextColor(confidenceType)\n                          )}\n                        >\n                          {confidenceScore}%\n                        </span>\n                      </div>\n                    </Tooltip>\n                  ) : null}\n\n                  {isGTN && isHovered && onAddGTNToDocument ? (\n                    <button\n                      id={`btn-base-input-field-add-to-document-${id}`}\n                      className=\"cursor-pointer\"\n                      onClick={() => handleAddGTNToDocument(props?.value)}\n                      type=\"button\"\n                    >\n                      <AntTooltip placement=\"top\" title={t(\"Add to document\")}>\n                        <NoteAddOutlined\n                          className=\"text-primary-600\"\n                          sx={{\n                            fontSize: 16,\n                          }}\n                        />\n                      </AntTooltip>\n                    </button>\n                  ) : null}\n                </div>\n              </div>\n            </label>\n          )}\n          <label className=\"relative block\">\n            <div className=\"relative\">\n              <input\n                {...props}\n                ref={inputRef || ref}\n                id={id || label}\n                key={id}\n                required={required}\n                style={\n                  {\n                    \"--input-bg-color\":\n                      \"var(--tw-bg-opacity, 1) rgb(var(--bg-color))\",\n                    ...inputStyle,\n                  } as React.CSSProperties\n                }\n                className={cn(\n                  \"border border-solid h-8 text-neutral-900 dark:text-black-100 block w-full px-3 py-1.5 font-medium disabled:opacity-70 focus:outline-none focus:ring-0 dark:disabled:placeholder:!text-black-400\",\n                  textSize ? textSize : \"text-sm\",\n                  color ? color : \"text-neutral-900 dark:text-black-100\",\n                  bg && bg,\n                  inputClassName ? inputClassName : \"\",\n                  errorMessage\n                    ? cn(\n                        \"rounded-md border-red-300 dark:border-red-500 bg-white hover:border-red-400 dark:bg-black-600 dark:hover:border-red-400 focus:border-red-600 focus:shadow-[0_0_0_1.5px_rgba(239,68,68,0.22)] dark:focus:border-red-500 dark:focus:shadow-[0_0_0_1.5px_rgba(248,113,113,0.25)]\",\n                      )\n                    : successMessage\n                      ? cn(\n                          \"rounded-md border-green-300 bg-white hover:border-green-400 dark:border-green-600 dark:bg-black-600 dark:hover:border-green-500 focus:border-green-600 focus:shadow-[0_0_0_1.5px_rgba(34,197,94,0.22)] dark:focus:border-green-500\",\n                        )\n                      : showRiskSkin && riskDetails?.color\n                        ? cn(\n                            \"rounded-md hover:border-primary-500 dark:hover:border-primary-400 focus:border-primary-600 dark:focus:border-primary-400 focus:shadow-[0_0_0_1.5px_var(--color-primary-100)] dark:focus:shadow-[0_0_0_1.5px_var(--color-primary-950)]\",\n                            `bg-${riskDetails.color}-50 border-${riskDetails.color}-300`,\n                          )\n                        : emphasisDeletedSkin\n                          ? \"rounded-lg border border-solid border-[var(--Error-200,#FECACA)] bg-[var(--Error-50,#FEF2F2)] !text-[#475467] focus:border-[var(--Error-200,#FECACA)] focus:shadow-[0_0_0_2px_rgba(254_202_202_/_0.45)] dark:border-[var(--Error-200,#FECACA)] dark:bg-[var(--Error-50,#FEF2F2)] dark:!text-[#475467] disabled:!opacity-100 disabled:!bg-[var(--Error-50,#FEF2F2)] dark:disabled:!bg-[var(--Error-50,#FEF2F2)]\"\n                          : emphasisModifiedSkin\n                            ? \"rounded-lg border border-solid border-[var(--Warning-200,#FEDF89)] bg-[var(--Warning-50,#FFFAEB)] text-neutral-900 dark:text-black-100 focus:border-[var(--Warning-200,#FEDF89)] focus:shadow-[0_0_0_2px_rgba(254_223_137_/_0.45)] dark:border-[var(--Warning-200,#FEDF89)] dark:bg-[var(--Warning-50,#FFFAEB)] disabled:!opacity-100 disabled:!bg-[var(--Warning-50,#FFFAEB)] dark:disabled:!bg-[var(--Warning-50,#FFFAEB)]\"\n                            : emphasisSuccessSkin\n                              ? \"rounded-lg border border-solid border-[var(--Success-200,#BBF7D0)] bg-[var(--Success-50,#F0FDF4)] !text-[#101828] focus:border-[var(--Success-200,#BBF7D0)] focus:shadow-[0_0_0_2px_rgba(187_247_208_/_0.45)] dark:border-[var(--Success-200,#BBF7D0)] dark:bg-[var(--Success-50,#F0FDF4)] dark:!text-[#101828] disabled:!opacity-100 disabled:!bg-[var(--Success-50,#F0FDF4)] dark:disabled:!bg-[var(--Success-50,#F0FDF4)] disabled:!text-[#101828] dark:disabled:!text-[#101828]\"\n                              : \"rounded-md border-neutral-200 bg-white hover:border-primary-500 dark:border-black-600 dark:bg-black-600 dark:hover:border-primary-400 focus:border-primary-600 dark:focus:border-primary-400 focus:shadow-[0_0_0_1.5px_var(--color-primary-100)] dark:focus:shadow-[0_0_0_1.5px_var(--color-primary-950)] disabled:!bg-neutral-50 dark:disabled:!bg-black-800\"\n                )}\n                onChange={(e) => {\n                  onChange(e.target.value);\n                }}\n                onClick={(e) => e.stopPropagation()}\n                autoComplete=\"off\"\n                onBlur={onBlur}\n              />\n              {isPasswordField ? (\n                <button\n                  className=\"absolute inset-y-0 flex items-center cursor-pointer right-2\"\n                  onClick={() => {\n                    setShowPassword(!showPassword);\n                    setIsPasswordVisible?.(!showPassword);\n                  }}\n                  type=\"button\"\n                >\n                  {showPassword ? (\n                    <EyeIcon className=\"text-gray-400 w-4 h-4\" />\n                  ) : (\n                    <EyeOffIcon className=\"text-gray-400 w-4 h-4\" />\n                  )}\n                </button>\n              ) : isClearable && props.value ? (\n                <button\n                  id={`btn-input-field-clear-${id}`}\n                  className=\"absolute inset-y-0 flex items-center cursor-pointer right-2 focus:outline-none\"\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    onChange(\"\");\n                  }}\n                  type=\"button\"\n                >\n                  <CloseIcon\n                    className=\"text-neutral-200 dark:text-black-500 w-4 h-4\"\n                  />\n                </button>\n              ) : suffixIcon ? (\n                <div className=\"absolute inset-y-0 flex items-center right-2\">\n                  {suffixIcon}\n                </div>\n              ) : null}\n            </div>\n          </label>\n          <AnimatePresence>\n            {errorMessage && (\n              <motion.div\n                initial={{ opacity: 0, y: -10 }}\n                animate={{ opacity: 1, y: 0 }}\n                exit={{ opacity: 0, y: -10 }}\n                transition={{ duration: 0.2 }}\n              >\n                <Typography\n                  className=\"mt-1 text-error-500\"\n                  appearance=\"custom\"\n                  size=\"extra-small\"\n                  variant=\"medium\"\n                >\n                  {errorMessage}\n                </Typography>\n              </motion.div>\n            )}\n          </AnimatePresence>\n          <AnimatePresence>\n            {successMessage && (\n              <motion.div\n                initial={{ opacity: 0, y: -10 }}\n                animate={{ opacity: 1, y: 0 }}\n                exit={{ opacity: 0, y: -10 }}\n                transition={{ duration: 0.2 }}\n              >\n                <Typography\n                  className=\"mt-1 text-success-500 dark:text-success-300\"\n                  appearance=\"custom\"\n                  size=\"extra-small\"\n                  variant=\"medium\"\n                >\n                  {successMessage}\n                </Typography>\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </div>\n\n        {isHovered &&\n          riskDetails &&\n          isRiskAnalysisOpen &&\n          RiskDetailsCard && (\n            <div\n              role=\"tooltip\"\n              tabIndex={0}\n              className=\"absolute left-0 right-0 top-[95%] mt-1 z-50 bg-white dark:bg-black-600 rounded-xl\"\n              onClick={(e) => e.stopPropagation()}\n              onMouseDown={(e) => e.preventDefault()}\n              onKeyDown={(e) => {\n                if (e.key === \"Escape\") {\n                  setIsHovered(false);\n                }\n              }}\n            >\n              <RiskDetailsCard riskDetails={riskDetails} />\n            </div>\n          )}\n      </div>\n    );\n  }\n);\n\nBaseInputField.displayName = \"BaseInputField\";\n\nexport default BaseInputField;\n\n"],"names":["EyeIcon","className","size","jsxs","jsx","EyeOffIcon","CloseIcon","RevertIcon","BaseInputField","forwardRef","id","label","labelExtra","onChange","errorMessage","successMessage","required","isRequiredConditional","bg","tags","color","isPasswordField","setIsPasswordVisible","inputRef","tooltip","suffixIcon","revertBackValue","originalCase","textSize","isAiExtracted","isGTN","confidenceScore","confidenceType","confidenceTooltip","gtnName","inputClassName","inputStyle","labelClassName","onBlur","isLiveField","isClearable","riskDetails","isRiskAnalysisOpen","RiskDetailsCard","onAddGTNToDocument","sourceMeta","inputEmphasis","onConfidenceScoreClick","props","ref","t","useTranslation","showRiskSkin","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","showPassword","setShowPassword","useState","isHovered","setIsHovered","handleAddGTNToDocument","value","cn","InputLabel","AntTooltip","BoltOutlined","shouldShowConfidenceScore","AIExtractedIndicator","Label","HelpIcon","Tooltip","getConfidenceScoreBadgeClass","AIStarIcon","getConfidenceScoreBadgeColor","getConfidenceScoreBadgeFill","getConfidenceScoreBadgeTextColor","NoteAddOutlined","createElement","e","AnimatePresence","motion","Typography"],"mappings":"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"}

package/dist/components/forms/creatable-select/CreatableSelect.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),E=require("../../../_virtual/index.cjs.js"),M=require("react-select/creatable"),m=require("@mui/icons-material"),P=require("antd"),V=require("../../data-display/typography/Typography.cjs.js"),T=require("../../icons/HelpIcon.cjs.js"),O=require("../../data-display/label/Label.cjs.js"),$=require("react"),A=require("../shared/InputLabel.cjs.js"),B=require("../../../hooks/useIsDarkMode.cjs.js"),v=({id:l,label:i,errorMessage:n,selectOptions:h,loading:y,isClearable:C,multiSelect:t,selectedValues:c,disabled:d,required:s,value:p,className:S,tooltip:b,tags:j,originalCase:D=!1,onChange:x,filterOption:w,placeholder:k,...I})=>{const r=B.useIsDarkMode(),[L,u]=$.useState(!1),f=(e,o)=>{x&&x(e);const g=document.getElementById(l);if(g){const R=new CustomEvent("pilot-change",{bubbles:!0,detail:{selector:`#${l}`,value:e,type:"change"}});g.dispatchEvent(R)}},z={control:(e,o)=>({...e,borderColor:n&&s?r?"#F04438":"#fda49b":o.isFocused?"var(--color-primary-600)":r?"#434343":"#d9d9d9",backgroundColor:r?"#141414":o.isDisabled?"#f5f5f5":"#fff",borderRadius:"6px",minHeight:"32px",fontSize:"14px",padding:"0 4px 0 12px",opacity:o.isDisabled?.6:1,cursor:o.isDisabled?"not-allowed":"pointer",boxShadow:o.isFocused?r?"0 0 0 1.5px var(--color-primary-950)":"0 0 0 1.5px var(--color-primary-100)":"none","&:hover":{borderColor:n&&s?r?"#F04438":"#fda49b":"var(--color-primary-600)"}}),valueContainer:e=>({...e,fontSize:"14px",padding:0}),input:e=>({...e,margin:"0",padding:"0",color:r?"rgba(255,255,255,0.85)":"inherit"}),indicatorsContainer:e=>({...e,padding:0}),option:(e,o)=>({...e,fontSize:"14px",lineHeight:"22px",padding:"5px 12px",margin:0,backgroundColor:o.isSelected?r?"var(--color-primary-975)":"var(--color-primary-50)":o.isFocused?r?"var(--color-primary-950)":"var(--color-primary-100)":r?"#141414":"#fff",color:o.isDisabled?r?"rgba(255,255,255,0.25)":"#a3a3a3":r?o.isSelected?"var(--color-primary-600)":"rgba(255,255,255,0.85)":"rgba(0,0,0,0.88)",cursor:o.isDisabled?"not-allowed":"pointer",opacity:o.isDisabled?.6:1,"&:hover":{backgroundColor:o.isDisabled?r?"#141414":"#fff":r?"var(--color-primary-950)":"var(--color-primary-100)"},"&:active":{backgroundColor:r?"var(--color-primary-950)":"var(--color-primary-50)"}}),singleValue:(e,o)=>({...e,fontSize:"14px",lineHeight:"20px",color:o.isDisabled?r?"rgba(255,255,255,0.25)":"#a3a3a3":r?"rgba(255,255,255,0.85)":"rgba(0,0,0,0.88)"}),placeholder:e=>({...e,fontSize:"14px",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",color:r?"rgba(255,255,255,0.25)":"#bfbfbf"}),multiValue:e=>({...e,backgroundColor:r?"rgba(255,255,255,0.08)":"#f0f5ff",border:r?"1px solid transparent":"1px solid #adc6ff",borderRadius:"4px"}),multiValueLabel:e=>({...e,color:r?"rgba(255,255,255,0.85)":"var(--color-primary-600)",fontSize:"12px"}),multiValueRemove:e=>({...e,color:r?"rgba(255,255,255,0.85)":"var(--color-primary-600)","&:hover":{backgroundColor:r?"rgba(255,255,255,0.16)":"#e6f4ff",color:r?"#fff":"var(--color-primary-600)"}}),menu:e=>({...e,zIndex:5001,borderRadius:"8px",boxShadow:r?"0 6px 16px 0 rgba(0,0,0,0.45)":"0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)",backgroundColor:r?"#141414":"#fff",border:r?"1px solid #303030":"none",overflow:"hidden"}),menuList:e=>({...e,padding:"0",maxHeight:"256px"})},F=!!c?.length,q=L&&!d&&(C?F||!!p:!1),N=e=>{e.stopPropagation(),e.preventDefault(),f(t?[]:null)},H=()=>a.jsx("div",{className:"flex items-center",children:q?a.jsx(m.CancelRounded,{onClick:N,sx:{fontSize:"16px",cursor:"pointer",color:r?"rgba(255,255,255,0.45)":"rgba(0,0,0,0.25)","&:hover":{color:r?"rgba(255,255,255,0.65)":"rgba(0,0,0,0.45)"}}}):a.jsx(m.ChevronLeftRounded,{className:"-rotate-90",sx:{fontSize:"18px",color:r?"rgba(255,255,255,0.25)":"rgba(0,0,0,0.25)"}})});return a.jsxs("div",{id:l,className:E("w-full flex flex-col gap-1",S),onMouseDown:e=>e.stopPropagation(),role:"group","aria-labelledby":i?l+"Label":void 0,children:[i&&a.jsxs("label",{id:l+"Label",htmlFor:"text",className:`text-xs font-medium text-gray-600 dark:text-black-300 inline-flex items-center gap-1 ${D?"":"capitalize"}`,children:[a.jsx(A.InputLabel,{label:i||"",required:s||!1}),a.jsx(O.Label,{labels:j}),b&&a.jsx(P.Tooltip,{placement:"top",title:b,children:a.jsx("div",{className:"cursor-pointer",children:a.jsx(T.HelpIcon,{})})})]}),a.jsx("div",{onMouseEnter:()=>u(!0),onMouseLeave:()=>u(!1),children:a.jsx(M,{...I,id:"cm"+i,classNamePrefix:"lax-select",required:s,options:h,isClearable:!1,isLoading:y,isDisabled:d,styles:z,isMulti:t,value:t?c:p,onChange:f,filterOption:w,placeholder:k,classNames:{menuList:()=>"nowheel"},components:{DropdownIndicator:H,IndicatorSeparator:()=>null}})}),n&&a.jsx(V.Typography,{className:"text-error-500",appearance:"custom",size:"extra-small",variant:"medium",children:n})]})};v.displayName="CreatableSelectField";exports.CreatableSelectField=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),E=require("../../../_virtual/index.cjs.js"),M=require("react-select/creatable"),g=require("@mui/icons-material"),P=require("antd"),V=require("../../data-display/typography/Typography.cjs.js"),T=require("../../icons/HelpIcon.cjs.js"),O=require("../../data-display/label/Label.cjs.js"),$=require("react"),A=require("../shared/InputLabel.cjs.js"),B=require("../../../hooks/useIsDarkMode.cjs.js"),v=({id:l,label:i,errorMessage:n,selectOptions:h,loading:y,isClearable:C,multiSelect:t,selectedValues:c,disabled:d,required:s,value:p,className:S,tooltip:b,tags:j,originalCase:w=!1,onChange:x,filterOption:D,placeholder:k,...I})=>{const r=B.useIsDarkMode(),[L,u]=$.useState(!1),f=(e,o)=>{x&&x(e);const m=document.getElementById(l);if(m){const H=new CustomEvent("pilot-change",{bubbles:!0,detail:{selector:`#${l}`,value:e,type:"change"}});m.dispatchEvent(H)}},F={control:(e,o)=>({...e,borderColor:n&&s?r?"#F04438":"#fda49b":o.isFocused?"var(--color-primary-600)":r?"#434343":"#d9d9d9",backgroundColor:r?"#141414":o.isDisabled?"#f5f5f5":"#fff",borderRadius:"6px",padding:"0 4px 0 12px",opacity:o.isDisabled?.6:1,cursor:o.isDisabled?"not-allowed":"pointer",boxShadow:o.isFocused?r?"0 0 0 1.5px var(--color-primary-950)":"0 0 0 1.5px var(--color-primary-100)":"none","&:hover":{borderColor:n&&s?r?"#F04438":"#fda49b":"var(--color-primary-600)"}}),valueContainer:e=>({...e,fontSize:"14px",padding:0}),input:e=>({...e,margin:"0",padding:"0",color:r?"rgba(255,255,255,0.85)":"inherit"}),indicatorsContainer:e=>({...e,padding:0}),option:(e,o)=>({...e,fontSize:"14px",lineHeight:"22px",padding:"5px 12px",margin:0,backgroundColor:o.isSelected?r?"var(--color-primary-975)":"var(--color-primary-50)":o.isFocused?r?"var(--color-primary-950)":"var(--color-primary-100)":r?"#141414":"#fff",color:o.isDisabled?r?"rgba(255,255,255,0.25)":"#a3a3a3":r?o.isSelected?"var(--color-primary-600)":"rgba(255,255,255,0.85)":"rgba(0,0,0,0.88)",cursor:o.isDisabled?"not-allowed":"pointer",opacity:o.isDisabled?.6:1,"&:hover":{backgroundColor:o.isDisabled?r?"#141414":"#fff":r?"var(--color-primary-950)":"var(--color-primary-100)"},"&:active":{backgroundColor:r?"var(--color-primary-950)":"var(--color-primary-50)"}}),singleValue:(e,o)=>({...e,fontSize:"14px",lineHeight:"20px",color:o.isDisabled?r?"rgba(255,255,255,0.25)":"#a3a3a3":r?"rgba(255,255,255,0.85)":"rgba(0,0,0,0.88)"}),placeholder:e=>({...e,fontSize:"14px",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",color:r?"rgba(255,255,255,0.25)":"#bfbfbf"}),multiValue:e=>({...e,backgroundColor:r?"rgba(255,255,255,0.08)":"#f0f5ff",border:r?"1px solid transparent":"1px solid #adc6ff",borderRadius:"4px"}),multiValueLabel:e=>({...e,color:r?"rgba(255,255,255,0.85)":"var(--color-primary-600)",fontSize:"12px"}),multiValueRemove:e=>({...e,color:r?"rgba(255,255,255,0.85)":"var(--color-primary-600)","&:hover":{backgroundColor:r?"rgba(255,255,255,0.16)":"#e6f4ff",color:r?"#fff":"var(--color-primary-600)"}}),menu:e=>({...e,zIndex:5001,borderRadius:"8px",boxShadow:r?"0 6px 16px 0 rgba(0,0,0,0.45)":"0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)",backgroundColor:r?"#141414":"#fff",border:r?"1px solid #303030":"none",overflow:"hidden"}),menuList:e=>({...e,padding:"0",maxHeight:"256px"})},z=!!c?.length,N=L&&!d&&(C?z||!!p:!1),q=e=>{e.stopPropagation(),e.preventDefault(),f(t?[]:null)},R=()=>a.jsx("div",{className:"flex items-center",children:N?a.jsx(g.CancelRounded,{onClick:q,sx:{fontSize:"16px",cursor:"pointer",color:r?"rgba(255,255,255,0.45)":"rgba(0,0,0,0.25)","&:hover":{color:r?"rgba(255,255,255,0.65)":"rgba(0,0,0,0.45)"}}}):a.jsx(g.ChevronLeftRounded,{className:"-rotate-90",sx:{fontSize:"18px",color:r?"rgba(255,255,255,0.25)":"rgba(0,0,0,0.25)"}})});return a.jsxs("div",{id:l,className:E("w-full flex flex-col gap-1",S),onMouseDown:e=>e.stopPropagation(),role:"group","aria-labelledby":i?l+"Label":void 0,children:[i&&a.jsxs("label",{id:l+"Label",htmlFor:"text",className:`text-xs font-medium text-gray-600 dark:text-black-300 inline-flex items-center gap-1 ${w?"":"capitalize"}`,children:[a.jsx(A.InputLabel,{label:i||"",required:s||!1}),a.jsx(O.Label,{labels:j}),b&&a.jsx(P.Tooltip,{placement:"top",title:b,children:a.jsx("div",{className:"cursor-pointer",children:a.jsx(T.HelpIcon,{className:"w-icon-sm h-icon-sm"})})})]}),a.jsx("div",{onMouseEnter:()=>u(!0),onMouseLeave:()=>u(!1),children:a.jsx(M,{...I,id:"cm"+i,classNamePrefix:"lax-select",required:s,options:h,isClearable:!1,isLoading:y,isDisabled:d,styles:F,isMulti:t,value:t?c:p,onChange:f,filterOption:D,placeholder:k,classNames:{menuList:()=>"nowheel",control:()=>"!min-h-8 !text-sm"},components:{DropdownIndicator:R,IndicatorSeparator:()=>null}})}),n&&a.jsx(V.Typography,{className:"text-error-500",appearance:"custom",size:"extra-small",variant:"medium",children:n})]})};v.displayName="CreatableSelectField";exports.CreatableSelectField=v;
 //# sourceMappingURL=CreatableSelect.cjs.js.map

package/dist/components/forms/creatable-select/CreatableSelect.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreatableSelect.cjs.js","sources":["../../../../src/components/forms/creatable-select/CreatableSelect.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport cn from \"classnames\";\nimport CreatableSelect from \"react-select/creatable\";\nimport { CancelRounded, ChevronLeftRounded } from \"@mui/icons-material\";\nimport { Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport { Label } from \"../../data-display/label/Label\";\nimport type { LabelType } from \"../../data-display/label/Label\";\nimport { useState, type ComponentProps } from \"react\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { useIsDarkMode } from \"../../../hooks/useIsDarkMode\";\n\n/**\n * Option type for the CreatableSelect component\n */\nexport interface SelectOption {\n  /** The value of the option */\n  value: string | number;\n  /** The label displayed for the option */\n  label: string;\n  /** Whether the option is disabled */\n  isDisabled?: boolean;\n  /** Additional data for the option */\n  data?: Record<string, unknown>;\n}\n\n/**\n * Props for the CreatableSelectField component\n * Matches the lax-web-portal implementation for drop-in replacement\n */\nexport type TProps = {\n  /** Unique identifier for the select */\n  id: string;\n  /** Label text to display above the select */\n  label: string;\n  /** Placeholder text for the select */\n  placeholder?: string;\n  /** Current value for single select */\n  value?: any;\n  /** Callback function called when selection changes */\n  onChange(data: any): void;\n  /** Error message to display below the select */\n  errorMessage?: string;\n  /** Array of available options */\n  selectOptions: any[];\n  /** Whether the select is in loading state */\n  loading?: boolean;\n  /** Whether multiple selections are allowed */\n  multiSelect?: boolean;\n  /** Current values for multi select */\n  selectedValues?: any[];\n  /** Custom filter function for options */\n  filterOption?: any;\n  /** Whether to preserve original case in the label */\n  originalCase?: boolean;\n  /** Whether the select is disabled */\n  disabled?: boolean;\n  /** Whether the select is clearable */\n  isClearable?: boolean;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Tags/labels to display next to the label */\n  tags?: (string | LabelType)[];\n  /** Tooltip text for the help icon */\n  tooltip?: string;\n  /** Additional CSS classes for the wrapper */\n  className?: string;\n};\n\n// Export type alias for backward compatibility\nexport type CreatableSelectProps = TProps & ComponentProps<typeof CreatableSelect>;\n\n/**\n * A creatable select component with label, validation, and styling support.\n * Features dark mode support, accessibility enhancements, and comprehensive prop support.\n * Built on top of react-select/creatable for advanced functionality.\n *\n * This component is designed as a drop-in replacement for the lax-web-portal\n * CreatableSelectField component.\n *\n * @example\n * ```tsx\n * <CreatableSelectField\n *   id=\"tags\"\n *   label=\"Tags\"\n *   selectOptions={tagOptions}\n *   value={selectedTag}\n *   onChange={(newValue) => setSelectedTag(newValue)}\n *   placeholder=\"Select or create tags...\"\n *   multiSelect\n * />\n * ```\n */\nexport const CreatableSelectField = ({\n  id,\n  label,\n  errorMessage,\n  selectOptions,\n  loading,\n  isClearable,\n  multiSelect,\n  selectedValues,\n  disabled,\n  required,\n  value,\n  className,\n  tooltip,\n  tags,\n  originalCase = false,\n  onChange,\n  filterOption,\n  placeholder,\n  ...props\n}: TProps & ComponentProps<typeof CreatableSelect>) => {\n  const isDarkMode = useIsDarkMode();\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleChange = (newValue: any, _actionMeta?: any) => {\n    // Call the original onChange handler\n    if (onChange) {\n      onChange(newValue);\n    }\n\n    // Dispatch pilot-change event for recording\n    const containerElement = document.getElementById(id);\n    if (containerElement) {\n      const pilotChangeEvent = new CustomEvent(\"pilot-change\", {\n        bubbles: true,\n        detail: {\n          selector: `#${id}`,\n          value: newValue,\n          type: \"change\",\n        },\n      });\n      containerElement.dispatchEvent(pilotChangeEvent);\n    }\n  };\n\n  const styleProps = {\n    control: (baseStyles: any, state: any) => ({\n      ...baseStyles,\n      borderColor:\n        errorMessage && required\n          ? isDarkMode ? \"#F04438\" : \"#fda49b\"\n          : state.isFocused\n            ? \"var(--color-primary-600)\"\n            : isDarkMode ? \"#434343\" : \"#d9d9d9\",\n      backgroundColor: isDarkMode\n        ? \"#141414\"\n        : state.isDisabled ? \"#f5f5f5\" : \"#fff\",\n      borderRadius: \"6px\",\n      minHeight: \"32px\",\n      fontSize: \"14px\",\n      padding: \"0 4px 0 12px\",\n      opacity: state.isDisabled ? 0.6 : 1,\n      cursor: state.isDisabled ? \"not-allowed\" : \"pointer\",\n      boxShadow: state.isFocused\n        ? isDarkMode\n          ? \"0 0 0 1.5px var(--color-primary-950)\"\n          : \"0 0 0 1.5px var(--color-primary-100)\"\n        : \"none\",\n      \"&:hover\": {\n        borderColor:\n          errorMessage && required\n            ? isDarkMode ? \"#F04438\" : \"#fda49b\"\n            : \"var(--color-primary-600)\",\n      },\n    }),\n    valueContainer: (baseStyles: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      padding: 0,\n    }),\n    input: (baseStyles: any) => ({\n      ...baseStyles,\n      margin: \"0\",\n      padding: \"0\",\n      color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"inherit\",\n    }),\n    indicatorsContainer: (baseStyles: any) => ({\n      ...baseStyles,\n      padding: 0,\n    }),\n    option: (baseStyles: any, state: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      lineHeight: \"22px\",\n      padding: \"5px 12px\",\n      margin: 0,\n      backgroundColor: state.isSelected\n        ? isDarkMode ? \"var(--color-primary-975)\" : \"var(--color-primary-50)\"\n        : state.isFocused\n          ? isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-100)\"\n        : isDarkMode ? \"#141414\" : \"#fff\",\n      color: state.isDisabled\n        ? isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#a3a3a3\"\n        : isDarkMode\n          ? state.isSelected\n            ? \"var(--color-primary-600)\"\n            : \"rgba(255,255,255,0.85)\"\n          : \"rgba(0,0,0,0.88)\",\n      cursor: state.isDisabled ? \"not-allowed\" : \"pointer\",\n      opacity: state.isDisabled ? 0.6 : 1,\n      \"&:hover\": {\n        backgroundColor: state.isDisabled\n          ? isDarkMode ? \"#141414\" : \"#fff\"\n          : isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-100)\",\n      },\n      \"&:active\": {\n        backgroundColor: isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-50)\",\n      },\n    }),\n    singleValue: (baseStyles: any, state: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      lineHeight: \"20px\",\n      color: state.isDisabled\n        ? isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#a3a3a3\"\n        : isDarkMode ? \"rgba(255,255,255,0.85)\" : \"rgba(0,0,0,0.88)\",\n    }),\n    placeholder: (baseStyles: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      whiteSpace: \"nowrap\" as const,\n      textOverflow: \"ellipsis\",\n      overflow: \"hidden\",\n      color: isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#bfbfbf\",\n    }),\n    multiValue: (baseStyles: any) => ({\n      ...baseStyles,\n      backgroundColor: isDarkMode ? \"rgba(255,255,255,0.08)\" : \"#f0f5ff\",\n      border: isDarkMode ? \"1px solid transparent\" : \"1px solid #adc6ff\",\n      borderRadius: \"4px\",\n    }),\n    multiValueLabel: (baseStyles: any) => ({\n      ...baseStyles,\n      color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"var(--color-primary-600)\",\n      fontSize: \"12px\",\n    }),\n    multiValueRemove: (baseStyles: any) => ({\n      ...baseStyles,\n      color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"var(--color-primary-600)\",\n      \"&:hover\": {\n        backgroundColor: isDarkMode ? \"rgba(255,255,255,0.16)\" : \"#e6f4ff\",\n        color: isDarkMode ? \"#fff\" : \"var(--color-primary-600)\",\n      },\n    }),\n    menu: (baseStyles: any) => ({\n      ...baseStyles,\n      zIndex: 5001,\n      borderRadius: \"8px\",\n      boxShadow: isDarkMode\n        ? \"0 6px 16px 0 rgba(0,0,0,0.45)\"\n        : \"0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)\",\n      backgroundColor: isDarkMode ? \"#141414\" : \"#fff\",\n      border: isDarkMode ? \"1px solid #303030\" : \"none\",\n      overflow: \"hidden\",\n    }),\n    menuList: (baseStyles: any) => ({\n      ...baseStyles,\n      padding: \"0\",\n      maxHeight: \"256px\",\n    }),\n  };\n\n  const hasSelectedValues = !!selectedValues?.length;\n  const hasValue = !!value;\n  const isFieldClearable = isClearable ? hasSelectedValues || hasValue : false;\n  const showClearIcon = isHovered && !disabled && isFieldClearable;\n\n  const handleClear = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    e.preventDefault();\n    handleChange(multiSelect ? [] : null);\n  };\n\n  const DropdownIndicator = () => (\n    <div className=\"flex items-center\">\n      {showClearIcon ? (\n        <CancelRounded\n          onClick={handleClear}\n          sx={{\n            fontSize: \"16px\",\n            cursor: \"pointer\",\n            color: isDarkMode ? \"rgba(255,255,255,0.45)\" : \"rgba(0,0,0,0.25)\",\n            \"&:hover\": {\n              color: isDarkMode ? \"rgba(255,255,255,0.65)\" : \"rgba(0,0,0,0.45)\",\n            },\n          }}\n        />\n      ) : (\n        <ChevronLeftRounded\n          className=\"-rotate-90\"\n          sx={{\n            fontSize: \"18px\",\n            color: isDarkMode ? \"rgba(255,255,255,0.25)\" : \"rgba(0,0,0,0.25)\",\n          }}\n        />\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      id={id}\n      className={cn(\"w-full flex flex-col gap-1\", className)}\n      onMouseDown={(e) => e.stopPropagation()}\n      role=\"group\"\n      aria-labelledby={label ? id + \"Label\" : undefined}\n    >\n      {label && (\n        <label\n          id={id + \"Label\"}\n          htmlFor=\"text\"\n          className={`text-xs font-medium text-gray-600 dark:text-black-300 inline-flex items-center gap-1 ${!originalCase ? \"capitalize\" : \"\"}`}\n        >\n          <InputLabel label={label || \"\"} required={required || false} />\n          <Label labels={tags} />\n          {tooltip && (\n            <Tooltip placement=\"top\" title={tooltip}>\n              <div className=\"cursor-pointer\">\n                <HelpIcon />\n              </div>\n            </Tooltip>\n          )}\n        </label>\n      )}\n\n      <div\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      >\n        <CreatableSelect\n          {...props}\n          id={\"cm\" + label}\n          classNamePrefix=\"lax-select\"\n          required={required}\n          options={selectOptions}\n          isClearable={false}\n          isLoading={loading}\n          isDisabled={disabled}\n          styles={styleProps}\n          isMulti={multiSelect}\n          value={multiSelect ? selectedValues : value}\n          onChange={handleChange}\n          filterOption={filterOption}\n          placeholder={placeholder}\n          classNames={{\n            menuList: () => \"nowheel\",\n          }}\n          components={{\n            DropdownIndicator,\n            IndicatorSeparator: () => null,\n          }}\n        />\n      </div>\n      {errorMessage && (\n        <Typography\n          className=\"text-error-500\"\n          appearance=\"custom\"\n          size=\"extra-small\"\n          variant=\"medium\"\n        >\n          {errorMessage}\n        </Typography>\n      )}\n    </div>\n  );\n};\n\nCreatableSelectField.displayName = \"CreatableSelectField\";\n"],"names":["CreatableSelectField","id","label","errorMessage","selectOptions","loading","isClearable","multiSelect","selectedValues","disabled","required","value","className","tooltip","tags","originalCase","onChange","filterOption","placeholder","props","isDarkMode","useIsDarkMode","isHovered","setIsHovered","useState","handleChange","newValue","_actionMeta","containerElement","pilotChangeEvent","styleProps","baseStyles","state","hasSelectedValues","showClearIcon","handleClear","DropdownIndicator","jsx","CancelRounded","ChevronLeftRounded","jsxs","cn","InputLabel","Label","Tooltip","HelpIcon","CreatableSelect","Typography"],"mappings":"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"}
+{"version":3,"file":"CreatableSelect.cjs.js","sources":["../../../../src/components/forms/creatable-select/CreatableSelect.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport cn from \"classnames\";\nimport CreatableSelect from \"react-select/creatable\";\nimport { CancelRounded, ChevronLeftRounded } from \"@mui/icons-material\";\nimport { Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport { Label } from \"../../data-display/label/Label\";\nimport type { LabelType } from \"../../data-display/label/Label\";\nimport { useState, type ComponentProps } from \"react\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { useIsDarkMode } from \"../../../hooks/useIsDarkMode\";\n\n/**\n * Option type for the CreatableSelect component\n */\nexport interface SelectOption {\n  /** The value of the option */\n  value: string | number;\n  /** The label displayed for the option */\n  label: string;\n  /** Whether the option is disabled */\n  isDisabled?: boolean;\n  /** Additional data for the option */\n  data?: Record<string, unknown>;\n}\n\n/**\n * Props for the CreatableSelectField component\n * Matches the lax-web-portal implementation for drop-in replacement\n */\nexport type TProps = {\n  /** Unique identifier for the select */\n  id: string;\n  /** Label text to display above the select */\n  label: string;\n  /** Placeholder text for the select */\n  placeholder?: string;\n  /** Current value for single select */\n  value?: any;\n  /** Callback function called when selection changes */\n  onChange(data: any): void;\n  /** Error message to display below the select */\n  errorMessage?: string;\n  /** Array of available options */\n  selectOptions: any[];\n  /** Whether the select is in loading state */\n  loading?: boolean;\n  /** Whether multiple selections are allowed */\n  multiSelect?: boolean;\n  /** Current values for multi select */\n  selectedValues?: any[];\n  /** Custom filter function for options */\n  filterOption?: any;\n  /** Whether to preserve original case in the label */\n  originalCase?: boolean;\n  /** Whether the select is disabled */\n  disabled?: boolean;\n  /** Whether the select is clearable */\n  isClearable?: boolean;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Tags/labels to display next to the label */\n  tags?: (string | LabelType)[];\n  /** Tooltip text for the help icon */\n  tooltip?: string;\n  /** Additional CSS classes for the wrapper */\n  className?: string;\n};\n\n// Export type alias for backward compatibility\nexport type CreatableSelectProps = TProps & ComponentProps<typeof CreatableSelect>;\n\n/**\n * A creatable select component with label, validation, and styling support.\n * Features dark mode support, accessibility enhancements, and comprehensive prop support.\n * Built on top of react-select/creatable for advanced functionality.\n *\n * This component is designed as a drop-in replacement for the lax-web-portal\n * CreatableSelectField component.\n *\n * @example\n * ```tsx\n * <CreatableSelectField\n *   id=\"tags\"\n *   label=\"Tags\"\n *   selectOptions={tagOptions}\n *   value={selectedTag}\n *   onChange={(newValue) => setSelectedTag(newValue)}\n *   placeholder=\"Select or create tags...\"\n *   multiSelect\n * />\n * ```\n */\nexport const CreatableSelectField = ({\n  id,\n  label,\n  errorMessage,\n  selectOptions,\n  loading,\n  isClearable,\n  multiSelect,\n  selectedValues,\n  disabled,\n  required,\n  value,\n  className,\n  tooltip,\n  tags,\n  originalCase = false,\n  onChange,\n  filterOption,\n  placeholder,\n  ...props\n}: TProps & ComponentProps<typeof CreatableSelect>) => {\n  const isDarkMode = useIsDarkMode();\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleChange = (newValue: any, _actionMeta?: any) => {\n    // Call the original onChange handler\n    if (onChange) {\n      onChange(newValue);\n    }\n\n    // Dispatch pilot-change event for recording\n    const containerElement = document.getElementById(id);\n    if (containerElement) {\n      const pilotChangeEvent = new CustomEvent(\"pilot-change\", {\n        bubbles: true,\n        detail: {\n          selector: `#${id}`,\n          value: newValue,\n          type: \"change\",\n        },\n      });\n      containerElement.dispatchEvent(pilotChangeEvent);\n    }\n  };\n\n  const styleProps = {\n    control: (baseStyles: any, state: any) => ({\n      ...baseStyles,\n      borderColor:\n        errorMessage && required\n          ? isDarkMode ? \"#F04438\" : \"#fda49b\"\n          : state.isFocused\n            ? \"var(--color-primary-600)\"\n            : isDarkMode ? \"#434343\" : \"#d9d9d9\",\n      backgroundColor: isDarkMode\n        ? \"#141414\"\n        : state.isDisabled ? \"#f5f5f5\" : \"#fff\",\n      borderRadius: \"6px\",\n      padding: \"0 4px 0 12px\",\n      opacity: state.isDisabled ? 0.6 : 1,\n      cursor: state.isDisabled ? \"not-allowed\" : \"pointer\",\n      boxShadow: state.isFocused\n        ? isDarkMode\n          ? \"0 0 0 1.5px var(--color-primary-950)\"\n          : \"0 0 0 1.5px var(--color-primary-100)\"\n        : \"none\",\n      \"&:hover\": {\n        borderColor:\n          errorMessage && required\n            ? isDarkMode ? \"#F04438\" : \"#fda49b\"\n            : \"var(--color-primary-600)\",\n      },\n    }),\n    valueContainer: (baseStyles: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      padding: 0,\n    }),\n    input: (baseStyles: any) => ({\n      ...baseStyles,\n      margin: \"0\",\n      padding: \"0\",\n      color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"inherit\",\n    }),\n    indicatorsContainer: (baseStyles: any) => ({\n      ...baseStyles,\n      padding: 0,\n    }),\n    option: (baseStyles: any, state: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      lineHeight: \"22px\",\n      padding: \"5px 12px\",\n      margin: 0,\n      backgroundColor: state.isSelected\n        ? isDarkMode ? \"var(--color-primary-975)\" : \"var(--color-primary-50)\"\n        : state.isFocused\n          ? isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-100)\"\n        : isDarkMode ? \"#141414\" : \"#fff\",\n      color: state.isDisabled\n        ? isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#a3a3a3\"\n        : isDarkMode\n          ? state.isSelected\n            ? \"var(--color-primary-600)\"\n            : \"rgba(255,255,255,0.85)\"\n          : \"rgba(0,0,0,0.88)\",\n      cursor: state.isDisabled ? \"not-allowed\" : \"pointer\",\n      opacity: state.isDisabled ? 0.6 : 1,\n      \"&:hover\": {\n        backgroundColor: state.isDisabled\n          ? isDarkMode ? \"#141414\" : \"#fff\"\n          : isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-100)\",\n      },\n      \"&:active\": {\n        backgroundColor: isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-50)\",\n      },\n    }),\n    singleValue: (baseStyles: any, state: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      lineHeight: \"20px\",\n      color: state.isDisabled\n        ? isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#a3a3a3\"\n        : isDarkMode ? \"rgba(255,255,255,0.85)\" : \"rgba(0,0,0,0.88)\",\n    }),\n    placeholder: (baseStyles: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      whiteSpace: \"nowrap\" as const,\n      textOverflow: \"ellipsis\",\n      overflow: \"hidden\",\n      color: isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#bfbfbf\",\n    }),\n    multiValue: (baseStyles: any) => ({\n      ...baseStyles,\n      backgroundColor: isDarkMode ? \"rgba(255,255,255,0.08)\" : \"#f0f5ff\",\n      border: isDarkMode ? \"1px solid transparent\" : \"1px solid #adc6ff\",\n      borderRadius: \"4px\",\n    }),\n    multiValueLabel: (baseStyles: any) => ({\n      ...baseStyles,\n      color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"var(--color-primary-600)\",\n      fontSize: \"12px\",\n    }),\n    multiValueRemove: (baseStyles: any) => ({\n      ...baseStyles,\n      color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"var(--color-primary-600)\",\n      \"&:hover\": {\n        backgroundColor: isDarkMode ? \"rgba(255,255,255,0.16)\" : \"#e6f4ff\",\n        color: isDarkMode ? \"#fff\" : \"var(--color-primary-600)\",\n      },\n    }),\n    menu: (baseStyles: any) => ({\n      ...baseStyles,\n      zIndex: 5001,\n      borderRadius: \"8px\",\n      boxShadow: isDarkMode\n        ? \"0 6px 16px 0 rgba(0,0,0,0.45)\"\n        : \"0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)\",\n      backgroundColor: isDarkMode ? \"#141414\" : \"#fff\",\n      border: isDarkMode ? \"1px solid #303030\" : \"none\",\n      overflow: \"hidden\",\n    }),\n    menuList: (baseStyles: any) => ({\n      ...baseStyles,\n      padding: \"0\",\n      maxHeight: \"256px\",\n    }),\n  };\n\n  const hasSelectedValues = !!selectedValues?.length;\n  const hasValue = !!value;\n  const isFieldClearable = isClearable ? hasSelectedValues || hasValue : false;\n  const showClearIcon = isHovered && !disabled && isFieldClearable;\n\n  const handleClear = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    e.preventDefault();\n    handleChange(multiSelect ? [] : null);\n  };\n\n  const DropdownIndicator = () => (\n    <div className=\"flex items-center\">\n      {showClearIcon ? (\n        <CancelRounded\n          onClick={handleClear}\n          sx={{\n            fontSize: \"16px\",\n            cursor: \"pointer\",\n            color: isDarkMode ? \"rgba(255,255,255,0.45)\" : \"rgba(0,0,0,0.25)\",\n            \"&:hover\": {\n              color: isDarkMode ? \"rgba(255,255,255,0.65)\" : \"rgba(0,0,0,0.45)\",\n            },\n          }}\n        />\n      ) : (\n        <ChevronLeftRounded\n          className=\"-rotate-90\"\n          sx={{\n            fontSize: \"18px\",\n            color: isDarkMode ? \"rgba(255,255,255,0.25)\" : \"rgba(0,0,0,0.25)\",\n          }}\n        />\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      id={id}\n      className={cn(\"w-full flex flex-col gap-1\", className)}\n      onMouseDown={(e) => e.stopPropagation()}\n      role=\"group\"\n      aria-labelledby={label ? id + \"Label\" : undefined}\n    >\n      {label && (\n        <label\n          id={id + \"Label\"}\n          htmlFor=\"text\"\n          className={`text-xs font-medium text-gray-600 dark:text-black-300 inline-flex items-center gap-1 ${!originalCase ? \"capitalize\" : \"\"}`}\n        >\n          <InputLabel label={label || \"\"} required={required || false} />\n          <Label labels={tags} />\n          {tooltip && (\n            <Tooltip placement=\"top\" title={tooltip}>\n              <div className=\"cursor-pointer\">\n                <HelpIcon className=\"w-icon-sm h-icon-sm\" />\n              </div>\n            </Tooltip>\n          )}\n        </label>\n      )}\n\n      <div\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      >\n        <CreatableSelect\n          {...props}\n          id={\"cm\" + label}\n          classNamePrefix=\"lax-select\"\n          required={required}\n          options={selectOptions}\n          isClearable={false}\n          isLoading={loading}\n          isDisabled={disabled}\n          styles={styleProps}\n          isMulti={multiSelect}\n          value={multiSelect ? selectedValues : value}\n          onChange={handleChange}\n          filterOption={filterOption}\n          placeholder={placeholder}\n          classNames={{\n            menuList: () => \"nowheel\",\n            control: ()=> \"!min-h-8 !text-sm\"\n          }}\n          components={{\n            DropdownIndicator,\n            IndicatorSeparator: () => null,\n          }}\n        />\n      </div>\n      {errorMessage && (\n        <Typography\n          className=\"text-error-500\"\n          appearance=\"custom\"\n          size=\"extra-small\"\n          variant=\"medium\"\n        >\n          {errorMessage}\n        </Typography>\n      )}\n    </div>\n  );\n};\n\nCreatableSelectField.displayName = \"CreatableSelectField\";\n"],"names":["CreatableSelectField","id","label","errorMessage","selectOptions","loading","isClearable","multiSelect","selectedValues","disabled","required","value","className","tooltip","tags","originalCase","onChange","filterOption","placeholder","props","isDarkMode","useIsDarkMode","isHovered","setIsHovered","useState","handleChange","newValue","_actionMeta","containerElement","pilotChangeEvent","styleProps","baseStyles","state","hasSelectedValues","showClearIcon","handleClear","DropdownIndicator","jsx","CancelRounded","ChevronLeftRounded","jsxs","cn","InputLabel","Label","Tooltip","HelpIcon","CreatableSelect","Typography"],"mappings":"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"}

package/dist/components/forms/creatable-select/CreatableSelect.es.js

@@ -16,9 +16,9 @@ const J = ({
   selectOptions: v,
   loading: h,
   isClearable: y,
-  multiSelect: p,
-  selectedValues: s,
-  disabled: c,
+  multiSelect: s,
+  selectedValues: c,
+  disabled: p,
   required: t,
   value: d,
   className: C,
@@ -50,8 +50,6 @@ const J = ({
       borderColor: n && t ? r ? "#F04438" : "#fda49b" : e.isFocused ? "var(--color-primary-600)" : r ? "#434343" : "#d9d9d9",
       backgroundColor: r ? "#141414" : e.isDisabled ? "#f5f5f5" : "#fff",
       borderRadius: "6px",
-      minHeight: "32px",
-      fontSize: "14px",
       padding: "0 4px 0 12px",
       opacity: e.isDisabled ? 0.6 : 1,
       cursor: e.isDisabled ? "not-allowed" : "pointer",
@@ -139,12 +137,12 @@ const J = ({
       padding: "0",
       maxHeight: "256px"
     })
-  }, I = !!s?.length, N = F && !c && (y ? I || !!d : !1), H = (o) => {
-    o.stopPropagation(), o.preventDefault(), x(p ? [] : null);
-  }, E = () => /* @__PURE__ */ a("div", { className: "flex items-center", children: N ? /* @__PURE__ */ a(
+  }, N = !!c?.length, I = F && !p && (y ? N || !!d : !1), E = (o) => {
+    o.stopPropagation(), o.preventDefault(), x(s ? [] : null);
+  }, H = () => /* @__PURE__ */ a("div", { className: "flex items-center", children: I ? /* @__PURE__ */ a(
     P,
     {
-      onClick: H,
+      onClick: E,
       sx: {
         fontSize: "16px",
         cursor: "pointer",
@@ -182,7 +180,7 @@ const J = ({
             children: [
               /* @__PURE__ */ a(A, { label: i || "", required: t || !1 }),
               /* @__PURE__ */ a(O, { labels: S }),
-              m && /* @__PURE__ */ a(T, { placement: "top", title: m, children: /* @__PURE__ */ a("div", { className: "cursor-pointer", children: /* @__PURE__ */ a(B, {}) }) })
+              m && /* @__PURE__ */ a(T, { placement: "top", title: m, children: /* @__PURE__ */ a("div", { className: "cursor-pointer", children: /* @__PURE__ */ a(B, { className: "w-icon-sm h-icon-sm" }) }) })
             ]
           }
         ),
@@ -201,18 +199,19 @@ const J = ({
                 options: v,
                 isClearable: !1,
                 isLoading: h,
-                isDisabled: c,
+                isDisabled: p,
                 styles: L,
-                isMulti: p,
-                value: p ? s : d,
+                isMulti: s,
+                value: s ? c : d,
                 onChange: x,
                 filterOption: D,
                 placeholder: k,
                 classNames: {
-                  menuList: () => "nowheel"
+                  menuList: () => "nowheel",
+                  control: () => "!min-h-8 !text-sm"
                 },
                 components: {
-                  DropdownIndicator: E,
+                  DropdownIndicator: H,
                   IndicatorSeparator: () => null
                 }
               }

package/dist/components/forms/creatable-select/CreatableSelect.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreatableSelect.es.js","sources":["../../../../src/components/forms/creatable-select/CreatableSelect.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport cn from \"classnames\";\nimport CreatableSelect from \"react-select/creatable\";\nimport { CancelRounded, ChevronLeftRounded } from \"@mui/icons-material\";\nimport { Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport { Label } from \"../../data-display/label/Label\";\nimport type { LabelType } from \"../../data-display/label/Label\";\nimport { useState, type ComponentProps } from \"react\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { useIsDarkMode } from \"../../../hooks/useIsDarkMode\";\n\n/**\n * Option type for the CreatableSelect component\n */\nexport interface SelectOption {\n  /** The value of the option */\n  value: string | number;\n  /** The label displayed for the option */\n  label: string;\n  /** Whether the option is disabled */\n  isDisabled?: boolean;\n  /** Additional data for the option */\n  data?: Record<string, unknown>;\n}\n\n/**\n * Props for the CreatableSelectField component\n * Matches the lax-web-portal implementation for drop-in replacement\n */\nexport type TProps = {\n  /** Unique identifier for the select */\n  id: string;\n  /** Label text to display above the select */\n  label: string;\n  /** Placeholder text for the select */\n  placeholder?: string;\n  /** Current value for single select */\n  value?: any;\n  /** Callback function called when selection changes */\n  onChange(data: any): void;\n  /** Error message to display below the select */\n  errorMessage?: string;\n  /** Array of available options */\n  selectOptions: any[];\n  /** Whether the select is in loading state */\n  loading?: boolean;\n  /** Whether multiple selections are allowed */\n  multiSelect?: boolean;\n  /** Current values for multi select */\n  selectedValues?: any[];\n  /** Custom filter function for options */\n  filterOption?: any;\n  /** Whether to preserve original case in the label */\n  originalCase?: boolean;\n  /** Whether the select is disabled */\n  disabled?: boolean;\n  /** Whether the select is clearable */\n  isClearable?: boolean;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Tags/labels to display next to the label */\n  tags?: (string | LabelType)[];\n  /** Tooltip text for the help icon */\n  tooltip?: string;\n  /** Additional CSS classes for the wrapper */\n  className?: string;\n};\n\n// Export type alias for backward compatibility\nexport type CreatableSelectProps = TProps & ComponentProps<typeof CreatableSelect>;\n\n/**\n * A creatable select component with label, validation, and styling support.\n * Features dark mode support, accessibility enhancements, and comprehensive prop support.\n * Built on top of react-select/creatable for advanced functionality.\n *\n * This component is designed as a drop-in replacement for the lax-web-portal\n * CreatableSelectField component.\n *\n * @example\n * ```tsx\n * <CreatableSelectField\n *   id=\"tags\"\n *   label=\"Tags\"\n *   selectOptions={tagOptions}\n *   value={selectedTag}\n *   onChange={(newValue) => setSelectedTag(newValue)}\n *   placeholder=\"Select or create tags...\"\n *   multiSelect\n * />\n * ```\n */\nexport const CreatableSelectField = ({\n  id,\n  label,\n  errorMessage,\n  selectOptions,\n  loading,\n  isClearable,\n  multiSelect,\n  selectedValues,\n  disabled,\n  required,\n  value,\n  className,\n  tooltip,\n  tags,\n  originalCase = false,\n  onChange,\n  filterOption,\n  placeholder,\n  ...props\n}: TProps & ComponentProps<typeof CreatableSelect>) => {\n  const isDarkMode = useIsDarkMode();\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleChange = (newValue: any, _actionMeta?: any) => {\n    // Call the original onChange handler\n    if (onChange) {\n      onChange(newValue);\n    }\n\n    // Dispatch pilot-change event for recording\n    const containerElement = document.getElementById(id);\n    if (containerElement) {\n      const pilotChangeEvent = new CustomEvent(\"pilot-change\", {\n        bubbles: true,\n        detail: {\n          selector: `#${id}`,\n          value: newValue,\n          type: \"change\",\n        },\n      });\n      containerElement.dispatchEvent(pilotChangeEvent);\n    }\n  };\n\n  const styleProps = {\n    control: (baseStyles: any, state: any) => ({\n      ...baseStyles,\n      borderColor:\n        errorMessage && required\n          ? isDarkMode ? \"#F04438\" : \"#fda49b\"\n          : state.isFocused\n            ? \"var(--color-primary-600)\"\n            : isDarkMode ? \"#434343\" : \"#d9d9d9\",\n      backgroundColor: isDarkMode\n        ? \"#141414\"\n        : state.isDisabled ? \"#f5f5f5\" : \"#fff\",\n      borderRadius: \"6px\",\n      minHeight: \"32px\",\n      fontSize: \"14px\",\n      padding: \"0 4px 0 12px\",\n      opacity: state.isDisabled ? 0.6 : 1,\n      cursor: state.isDisabled ? \"not-allowed\" : \"pointer\",\n      boxShadow: state.isFocused\n        ? isDarkMode\n          ? \"0 0 0 1.5px var(--color-primary-950)\"\n          : \"0 0 0 1.5px var(--color-primary-100)\"\n        : \"none\",\n      \"&:hover\": {\n        borderColor:\n          errorMessage && required\n            ? isDarkMode ? \"#F04438\" : \"#fda49b\"\n            : \"var(--color-primary-600)\",\n      },\n    }),\n    valueContainer: (baseStyles: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      padding: 0,\n    }),\n    input: (baseStyles: any) => ({\n      ...baseStyles,\n      margin: \"0\",\n      padding: \"0\",\n      color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"inherit\",\n    }),\n    indicatorsContainer: (baseStyles: any) => ({\n      ...baseStyles,\n      padding: 0,\n    }),\n    option: (baseStyles: any, state: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      lineHeight: \"22px\",\n      padding: \"5px 12px\",\n      margin: 0,\n      backgroundColor: state.isSelected\n        ? isDarkMode ? \"var(--color-primary-975)\" : \"var(--color-primary-50)\"\n        : state.isFocused\n          ? isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-100)\"\n        : isDarkMode ? \"#141414\" : \"#fff\",\n      color: state.isDisabled\n        ? isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#a3a3a3\"\n        : isDarkMode\n          ? state.isSelected\n            ? \"var(--color-primary-600)\"\n            : \"rgba(255,255,255,0.85)\"\n          : \"rgba(0,0,0,0.88)\",\n      cursor: state.isDisabled ? \"not-allowed\" : \"pointer\",\n      opacity: state.isDisabled ? 0.6 : 1,\n      \"&:hover\": {\n        backgroundColor: state.isDisabled\n          ? isDarkMode ? \"#141414\" : \"#fff\"\n          : isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-100)\",\n      },\n      \"&:active\": {\n        backgroundColor: isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-50)\",\n      },\n    }),\n    singleValue: (baseStyles: any, state: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      lineHeight: \"20px\",\n      color: state.isDisabled\n        ? isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#a3a3a3\"\n        : isDarkMode ? \"rgba(255,255,255,0.85)\" : \"rgba(0,0,0,0.88)\",\n    }),\n    placeholder: (baseStyles: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      whiteSpace: \"nowrap\" as const,\n      textOverflow: \"ellipsis\",\n      overflow: \"hidden\",\n      color: isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#bfbfbf\",\n    }),\n    multiValue: (baseStyles: any) => ({\n      ...baseStyles,\n      backgroundColor: isDarkMode ? \"rgba(255,255,255,0.08)\" : \"#f0f5ff\",\n      border: isDarkMode ? \"1px solid transparent\" : \"1px solid #adc6ff\",\n      borderRadius: \"4px\",\n    }),\n    multiValueLabel: (baseStyles: any) => ({\n      ...baseStyles,\n      color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"var(--color-primary-600)\",\n      fontSize: \"12px\",\n    }),\n    multiValueRemove: (baseStyles: any) => ({\n      ...baseStyles,\n      color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"var(--color-primary-600)\",\n      \"&:hover\": {\n        backgroundColor: isDarkMode ? \"rgba(255,255,255,0.16)\" : \"#e6f4ff\",\n        color: isDarkMode ? \"#fff\" : \"var(--color-primary-600)\",\n      },\n    }),\n    menu: (baseStyles: any) => ({\n      ...baseStyles,\n      zIndex: 5001,\n      borderRadius: \"8px\",\n      boxShadow: isDarkMode\n        ? \"0 6px 16px 0 rgba(0,0,0,0.45)\"\n        : \"0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)\",\n      backgroundColor: isDarkMode ? \"#141414\" : \"#fff\",\n      border: isDarkMode ? \"1px solid #303030\" : \"none\",\n      overflow: \"hidden\",\n    }),\n    menuList: (baseStyles: any) => ({\n      ...baseStyles,\n      padding: \"0\",\n      maxHeight: \"256px\",\n    }),\n  };\n\n  const hasSelectedValues = !!selectedValues?.length;\n  const hasValue = !!value;\n  const isFieldClearable = isClearable ? hasSelectedValues || hasValue : false;\n  const showClearIcon = isHovered && !disabled && isFieldClearable;\n\n  const handleClear = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    e.preventDefault();\n    handleChange(multiSelect ? [] : null);\n  };\n\n  const DropdownIndicator = () => (\n    <div className=\"flex items-center\">\n      {showClearIcon ? (\n        <CancelRounded\n          onClick={handleClear}\n          sx={{\n            fontSize: \"16px\",\n            cursor: \"pointer\",\n            color: isDarkMode ? \"rgba(255,255,255,0.45)\" : \"rgba(0,0,0,0.25)\",\n            \"&:hover\": {\n              color: isDarkMode ? \"rgba(255,255,255,0.65)\" : \"rgba(0,0,0,0.45)\",\n            },\n          }}\n        />\n      ) : (\n        <ChevronLeftRounded\n          className=\"-rotate-90\"\n          sx={{\n            fontSize: \"18px\",\n            color: isDarkMode ? \"rgba(255,255,255,0.25)\" : \"rgba(0,0,0,0.25)\",\n          }}\n        />\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      id={id}\n      className={cn(\"w-full flex flex-col gap-1\", className)}\n      onMouseDown={(e) => e.stopPropagation()}\n      role=\"group\"\n      aria-labelledby={label ? id + \"Label\" : undefined}\n    >\n      {label && (\n        <label\n          id={id + \"Label\"}\n          htmlFor=\"text\"\n          className={`text-xs font-medium text-gray-600 dark:text-black-300 inline-flex items-center gap-1 ${!originalCase ? \"capitalize\" : \"\"}`}\n        >\n          <InputLabel label={label || \"\"} required={required || false} />\n          <Label labels={tags} />\n          {tooltip && (\n            <Tooltip placement=\"top\" title={tooltip}>\n              <div className=\"cursor-pointer\">\n                <HelpIcon />\n              </div>\n            </Tooltip>\n          )}\n        </label>\n      )}\n\n      <div\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      >\n        <CreatableSelect\n          {...props}\n          id={\"cm\" + label}\n          classNamePrefix=\"lax-select\"\n          required={required}\n          options={selectOptions}\n          isClearable={false}\n          isLoading={loading}\n          isDisabled={disabled}\n          styles={styleProps}\n          isMulti={multiSelect}\n          value={multiSelect ? selectedValues : value}\n          onChange={handleChange}\n          filterOption={filterOption}\n          placeholder={placeholder}\n          classNames={{\n            menuList: () => \"nowheel\",\n          }}\n          components={{\n            DropdownIndicator,\n            IndicatorSeparator: () => null,\n          }}\n        />\n      </div>\n      {errorMessage && (\n        <Typography\n          className=\"text-error-500\"\n          appearance=\"custom\"\n          size=\"extra-small\"\n          variant=\"medium\"\n        >\n          {errorMessage}\n        </Typography>\n      )}\n    </div>\n  );\n};\n\nCreatableSelectField.displayName = \"CreatableSelectField\";\n"],"names":["CreatableSelectField","id","label","errorMessage","selectOptions","loading","isClearable","multiSelect","selectedValues","disabled","required","value","className","tooltip","tags","originalCase","onChange","filterOption","placeholder","props","isDarkMode","useIsDarkMode","isHovered","setIsHovered","useState","handleChange","newValue","_actionMeta","containerElement","pilotChangeEvent","styleProps","baseStyles","state","hasSelectedValues","showClearIcon","handleClear","e","DropdownIndicator","jsx","CancelRounded","ChevronLeftRounded","jsxs","cn","InputLabel","Label","Tooltip","HelpIcon","CreatableSelect","Typography"],"mappings":"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"}
+{"version":3,"file":"CreatableSelect.es.js","sources":["../../../../src/components/forms/creatable-select/CreatableSelect.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport cn from \"classnames\";\nimport CreatableSelect from \"react-select/creatable\";\nimport { CancelRounded, ChevronLeftRounded } from \"@mui/icons-material\";\nimport { Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport { Label } from \"../../data-display/label/Label\";\nimport type { LabelType } from \"../../data-display/label/Label\";\nimport { useState, type ComponentProps } from \"react\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { useIsDarkMode } from \"../../../hooks/useIsDarkMode\";\n\n/**\n * Option type for the CreatableSelect component\n */\nexport interface SelectOption {\n  /** The value of the option */\n  value: string | number;\n  /** The label displayed for the option */\n  label: string;\n  /** Whether the option is disabled */\n  isDisabled?: boolean;\n  /** Additional data for the option */\n  data?: Record<string, unknown>;\n}\n\n/**\n * Props for the CreatableSelectField component\n * Matches the lax-web-portal implementation for drop-in replacement\n */\nexport type TProps = {\n  /** Unique identifier for the select */\n  id: string;\n  /** Label text to display above the select */\n  label: string;\n  /** Placeholder text for the select */\n  placeholder?: string;\n  /** Current value for single select */\n  value?: any;\n  /** Callback function called when selection changes */\n  onChange(data: any): void;\n  /** Error message to display below the select */\n  errorMessage?: string;\n  /** Array of available options */\n  selectOptions: any[];\n  /** Whether the select is in loading state */\n  loading?: boolean;\n  /** Whether multiple selections are allowed */\n  multiSelect?: boolean;\n  /** Current values for multi select */\n  selectedValues?: any[];\n  /** Custom filter function for options */\n  filterOption?: any;\n  /** Whether to preserve original case in the label */\n  originalCase?: boolean;\n  /** Whether the select is disabled */\n  disabled?: boolean;\n  /** Whether the select is clearable */\n  isClearable?: boolean;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Tags/labels to display next to the label */\n  tags?: (string | LabelType)[];\n  /** Tooltip text for the help icon */\n  tooltip?: string;\n  /** Additional CSS classes for the wrapper */\n  className?: string;\n};\n\n// Export type alias for backward compatibility\nexport type CreatableSelectProps = TProps & ComponentProps<typeof CreatableSelect>;\n\n/**\n * A creatable select component with label, validation, and styling support.\n * Features dark mode support, accessibility enhancements, and comprehensive prop support.\n * Built on top of react-select/creatable for advanced functionality.\n *\n * This component is designed as a drop-in replacement for the lax-web-portal\n * CreatableSelectField component.\n *\n * @example\n * ```tsx\n * <CreatableSelectField\n *   id=\"tags\"\n *   label=\"Tags\"\n *   selectOptions={tagOptions}\n *   value={selectedTag}\n *   onChange={(newValue) => setSelectedTag(newValue)}\n *   placeholder=\"Select or create tags...\"\n *   multiSelect\n * />\n * ```\n */\nexport const CreatableSelectField = ({\n  id,\n  label,\n  errorMessage,\n  selectOptions,\n  loading,\n  isClearable,\n  multiSelect,\n  selectedValues,\n  disabled,\n  required,\n  value,\n  className,\n  tooltip,\n  tags,\n  originalCase = false,\n  onChange,\n  filterOption,\n  placeholder,\n  ...props\n}: TProps & ComponentProps<typeof CreatableSelect>) => {\n  const isDarkMode = useIsDarkMode();\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleChange = (newValue: any, _actionMeta?: any) => {\n    // Call the original onChange handler\n    if (onChange) {\n      onChange(newValue);\n    }\n\n    // Dispatch pilot-change event for recording\n    const containerElement = document.getElementById(id);\n    if (containerElement) {\n      const pilotChangeEvent = new CustomEvent(\"pilot-change\", {\n        bubbles: true,\n        detail: {\n          selector: `#${id}`,\n          value: newValue,\n          type: \"change\",\n        },\n      });\n      containerElement.dispatchEvent(pilotChangeEvent);\n    }\n  };\n\n  const styleProps = {\n    control: (baseStyles: any, state: any) => ({\n      ...baseStyles,\n      borderColor:\n        errorMessage && required\n          ? isDarkMode ? \"#F04438\" : \"#fda49b\"\n          : state.isFocused\n            ? \"var(--color-primary-600)\"\n            : isDarkMode ? \"#434343\" : \"#d9d9d9\",\n      backgroundColor: isDarkMode\n        ? \"#141414\"\n        : state.isDisabled ? \"#f5f5f5\" : \"#fff\",\n      borderRadius: \"6px\",\n      padding: \"0 4px 0 12px\",\n      opacity: state.isDisabled ? 0.6 : 1,\n      cursor: state.isDisabled ? \"not-allowed\" : \"pointer\",\n      boxShadow: state.isFocused\n        ? isDarkMode\n          ? \"0 0 0 1.5px var(--color-primary-950)\"\n          : \"0 0 0 1.5px var(--color-primary-100)\"\n        : \"none\",\n      \"&:hover\": {\n        borderColor:\n          errorMessage && required\n            ? isDarkMode ? \"#F04438\" : \"#fda49b\"\n            : \"var(--color-primary-600)\",\n      },\n    }),\n    valueContainer: (baseStyles: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      padding: 0,\n    }),\n    input: (baseStyles: any) => ({\n      ...baseStyles,\n      margin: \"0\",\n      padding: \"0\",\n      color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"inherit\",\n    }),\n    indicatorsContainer: (baseStyles: any) => ({\n      ...baseStyles,\n      padding: 0,\n    }),\n    option: (baseStyles: any, state: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      lineHeight: \"22px\",\n      padding: \"5px 12px\",\n      margin: 0,\n      backgroundColor: state.isSelected\n        ? isDarkMode ? \"var(--color-primary-975)\" : \"var(--color-primary-50)\"\n        : state.isFocused\n          ? isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-100)\"\n        : isDarkMode ? \"#141414\" : \"#fff\",\n      color: state.isDisabled\n        ? isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#a3a3a3\"\n        : isDarkMode\n          ? state.isSelected\n            ? \"var(--color-primary-600)\"\n            : \"rgba(255,255,255,0.85)\"\n          : \"rgba(0,0,0,0.88)\",\n      cursor: state.isDisabled ? \"not-allowed\" : \"pointer\",\n      opacity: state.isDisabled ? 0.6 : 1,\n      \"&:hover\": {\n        backgroundColor: state.isDisabled\n          ? isDarkMode ? \"#141414\" : \"#fff\"\n          : isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-100)\",\n      },\n      \"&:active\": {\n        backgroundColor: isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-50)\",\n      },\n    }),\n    singleValue: (baseStyles: any, state: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      lineHeight: \"20px\",\n      color: state.isDisabled\n        ? isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#a3a3a3\"\n        : isDarkMode ? \"rgba(255,255,255,0.85)\" : \"rgba(0,0,0,0.88)\",\n    }),\n    placeholder: (baseStyles: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      whiteSpace: \"nowrap\" as const,\n      textOverflow: \"ellipsis\",\n      overflow: \"hidden\",\n      color: isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#bfbfbf\",\n    }),\n    multiValue: (baseStyles: any) => ({\n      ...baseStyles,\n      backgroundColor: isDarkMode ? \"rgba(255,255,255,0.08)\" : \"#f0f5ff\",\n      border: isDarkMode ? \"1px solid transparent\" : \"1px solid #adc6ff\",\n      borderRadius: \"4px\",\n    }),\n    multiValueLabel: (baseStyles: any) => ({\n      ...baseStyles,\n      color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"var(--color-primary-600)\",\n      fontSize: \"12px\",\n    }),\n    multiValueRemove: (baseStyles: any) => ({\n      ...baseStyles,\n      color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"var(--color-primary-600)\",\n      \"&:hover\": {\n        backgroundColor: isDarkMode ? \"rgba(255,255,255,0.16)\" : \"#e6f4ff\",\n        color: isDarkMode ? \"#fff\" : \"var(--color-primary-600)\",\n      },\n    }),\n    menu: (baseStyles: any) => ({\n      ...baseStyles,\n      zIndex: 5001,\n      borderRadius: \"8px\",\n      boxShadow: isDarkMode\n        ? \"0 6px 16px 0 rgba(0,0,0,0.45)\"\n        : \"0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)\",\n      backgroundColor: isDarkMode ? \"#141414\" : \"#fff\",\n      border: isDarkMode ? \"1px solid #303030\" : \"none\",\n      overflow: \"hidden\",\n    }),\n    menuList: (baseStyles: any) => ({\n      ...baseStyles,\n      padding: \"0\",\n      maxHeight: \"256px\",\n    }),\n  };\n\n  const hasSelectedValues = !!selectedValues?.length;\n  const hasValue = !!value;\n  const isFieldClearable = isClearable ? hasSelectedValues || hasValue : false;\n  const showClearIcon = isHovered && !disabled && isFieldClearable;\n\n  const handleClear = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    e.preventDefault();\n    handleChange(multiSelect ? [] : null);\n  };\n\n  const DropdownIndicator = () => (\n    <div className=\"flex items-center\">\n      {showClearIcon ? (\n        <CancelRounded\n          onClick={handleClear}\n          sx={{\n            fontSize: \"16px\",\n            cursor: \"pointer\",\n            color: isDarkMode ? \"rgba(255,255,255,0.45)\" : \"rgba(0,0,0,0.25)\",\n            \"&:hover\": {\n              color: isDarkMode ? \"rgba(255,255,255,0.65)\" : \"rgba(0,0,0,0.45)\",\n            },\n          }}\n        />\n      ) : (\n        <ChevronLeftRounded\n          className=\"-rotate-90\"\n          sx={{\n            fontSize: \"18px\",\n            color: isDarkMode ? \"rgba(255,255,255,0.25)\" : \"rgba(0,0,0,0.25)\",\n          }}\n        />\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      id={id}\n      className={cn(\"w-full flex flex-col gap-1\", className)}\n      onMouseDown={(e) => e.stopPropagation()}\n      role=\"group\"\n      aria-labelledby={label ? id + \"Label\" : undefined}\n    >\n      {label && (\n        <label\n          id={id + \"Label\"}\n          htmlFor=\"text\"\n          className={`text-xs font-medium text-gray-600 dark:text-black-300 inline-flex items-center gap-1 ${!originalCase ? \"capitalize\" : \"\"}`}\n        >\n          <InputLabel label={label || \"\"} required={required || false} />\n          <Label labels={tags} />\n          {tooltip && (\n            <Tooltip placement=\"top\" title={tooltip}>\n              <div className=\"cursor-pointer\">\n                <HelpIcon className=\"w-icon-sm h-icon-sm\" />\n              </div>\n            </Tooltip>\n          )}\n        </label>\n      )}\n\n      <div\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      >\n        <CreatableSelect\n          {...props}\n          id={\"cm\" + label}\n          classNamePrefix=\"lax-select\"\n          required={required}\n          options={selectOptions}\n          isClearable={false}\n          isLoading={loading}\n          isDisabled={disabled}\n          styles={styleProps}\n          isMulti={multiSelect}\n          value={multiSelect ? selectedValues : value}\n          onChange={handleChange}\n          filterOption={filterOption}\n          placeholder={placeholder}\n          classNames={{\n            menuList: () => \"nowheel\",\n            control: ()=> \"!min-h-8 !text-sm\"\n          }}\n          components={{\n            DropdownIndicator,\n            IndicatorSeparator: () => null,\n          }}\n        />\n      </div>\n      {errorMessage && (\n        <Typography\n          className=\"text-error-500\"\n          appearance=\"custom\"\n          size=\"extra-small\"\n          variant=\"medium\"\n        >\n          {errorMessage}\n        </Typography>\n      )}\n    </div>\n  );\n};\n\nCreatableSelectField.displayName = \"CreatableSelectField\";\n"],"names":["CreatableSelectField","id","label","errorMessage","selectOptions","loading","isClearable","multiSelect","selectedValues","disabled","required","value","className","tooltip","tags","originalCase","onChange","filterOption","placeholder","props","isDarkMode","useIsDarkMode","isHovered","setIsHovered","useState","handleChange","newValue","_actionMeta","containerElement","pilotChangeEvent","styleProps","baseStyles","state","hasSelectedValues","showClearIcon","handleClear","e","DropdownIndicator","jsx","CancelRounded","ChevronLeftRounded","jsxs","cn","InputLabel","Label","Tooltip","HelpIcon","CreatableSelect","Typography"],"mappings":"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"}

package/dist/components/forms/currency-input/CurrencyInputField.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../_virtual/index.cjs.js"),l=require("react"),M=require("antd"),ke=require("react-i18next"),Se=require("../../data-display/typography/Typography.cjs.js"),je=require("../../data-display/label/Label.cjs.js"),Q=require("./currency.constant.cjs.js"),X=require("@mui/icons-material"),Ee=require("../../icons/AIExtractedIndicator.cjs.js"),Ce=require("../../icons/AIStarIcon.cjs.js"),we=require("../../icons/HelpIcon.cjs.js"),Z=require("../../tooltip/Tooltip.cjs.js"),x=require("../../../utils/confidenceScoreUtils.cjs.js"),Ne=require("../search-bar/SearchBar.cjs.js"),_e=require("../../buttons/option-button/OptionButton.cjs.js"),T=require("../../../utils/countryFlags.cjs.js"),Ie=require("../shared/InputLabel.cjs.js"),Be=require("../../../utils/formatters.cjs.js"),V=l.forwardRef(({id:c,label:F,value:o,onChange:B,errorMessage:i,defaultValue:m,required:k=!1,isRequiredConditional:G=!1,tags:ee,className:re,originalCase:q=!1,tooltip:A,simpleMode:te=!1,inputFieldClassName:d="",isAiExtracted:ae=!1,confidenceScore:S,confidenceType:f="high",confidenceTooltip:j,sourceMeta:oe=[],onConfidenceScoreClick:ne,isGTN:E=!1,gtnName:le=null,allowMultiCurrency:$=!1,placeholder:se,disabled:ce=!1,currencyCode:u="USD",inputStyle:de,labelClassName:z,isLiveField:ie=!1,onBlur:ue,autoFocus:D=!1,isRecording:L=!1,isPlaying:O=!1,onAddGTNToDocument:C,riskDetails:s,isRiskAnalysisOpen:p=!1,RiskDetailsCard:U,labelExtra:be,inputEmphasis:w="default",...W},H)=>{const{t:xe}=ke.useTranslation(),me=w==="modified"&&!i&&!(p&&s?.color),fe=w==="deleted"&&!i&&!(p&&s?.color),pe=w==="success"&&!i&&!(p&&s?.color),[b,R]=l.useState(!1),[ge,he]=l.useState([]),[N,K]=l.useState(""),[a,P]=l.useState(u||"USD"),[v,_]=l.useState(!1),ve=r=>{if(C){const t={key:le,value:Be.formatCurrency(r,a)};C(t)}},g=r=>{if(r==null)return"";const t=Number(r);return isNaN(t)?r:t?.toLocaleString("en-US",{minimumFractionDigits:2,maximumFractionDigits:2})},I=r=>{const t=r.target.value,h=t===""||t===null||t===void 0?0:Number(t);B(h,a);const y=document.getElementById(c);if(y&&y.setAttribute("data-selected-value",JSON.stringify({value:h,currency_code:a})),y&&(L||O)){const Fe=new CustomEvent("pilot-change",{bubbles:!0,detail:{selector:`#${c}`,value:{value:h,currency_code:a},type:"change"}});y.dispatchEvent(Fe)}},Y=()=>{R(!0)},J=()=>{R(!1),(o==null||o==="")&&I({target:{value:"0.00"}}),ue?.()},ye=()=>{const r="pl-11 border h-[32px] text-sm block w-full p-2.5 font-inter font-medium focus:outline-none focus:ring-0";return i?n(r,"rounded-md border-red-300 bg-white dark:bg-black-600",d):p&&s?.color?n(r,`rounded-md border-${s.color}-300 bg-${s.color}-50`,"text-neutral-900 dark:text-black-200 disabled:bg-neutral-50 dark:disabled:!bg-black-800",d):fe?n(r,"rounded-lg border border-solid border-[var(--Error-200,#FECACA)] bg-[var(--Error-50,#FEF2F2)] !text-[#475467] focus:border-[var(--Error-200,#FECACA)] focus:shadow-[0_0_0_2px_rgba(254,202,202,0.45)] dark:border-[var(--Error-200,#FECACA)] dark:bg-[var(--Error-50,#FEF2F2)] dark:!text-[#475467] disabled:!opacity-100 disabled:!bg-[var(--Error-50,#FEF2F2)]",d):me?n(r,"rounded-lg border border-solid border-[var(--Warning-200,#FEDF89)] bg-[var(--Warning-50,#FFFAEB)] text-neutral-900 dark:text-black-100 focus:border-[var(--Warning-200,#FEDF89)] focus:shadow-[0_0_0_2px_rgba(254,223,137,0.45)] dark:border-[var(--Warning-200,#FEDF89)] dark:bg-[var(--Warning-50,#FFFAEB)] disabled:!opacity-100 disabled:!bg-[var(--Warning-50,#FFFAEB)]",d):pe?n(r,"rounded-lg border border-solid border-[var(--Success-200,#BBF7D0)] bg-[var(--Success-50,#F0FDF4)] !text-[#101828] focus:border-[var(--Success-200,#BBF7D0)] focus:shadow-[0_0_0_2px_rgba(187,247,208,0.45)] dark:border-[var(--Success-200,#BBF7D0)] dark:bg-[var(--Success-50,#F0FDF4)] dark:!text-[#101828] disabled:!opacity-100 disabled:!bg-[var(--Success-50,#F0FDF4)]",d):n(r,"rounded-lg border-gray-300 dark:border-black-600 bg-white dark:bg-black-600 text-neutral-900 dark:text-black-200 disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400 focus:border-[var(--color-primary-600)] dark:focus:border-[var(--color-primary-400)] focus:shadow-[0_0_0_1.5px_var(--color-primary-100)] dark:focus:shadow-[0_0_0_1.5px_var(--color-primary-950)]",d)};return l.useEffect(()=>{u&&P(u)},[u]),l.useEffect(()=>{if(a){const r=o===""||o===null||o===void 0?0:Number(o);u!==a&&B(r,a);const t=document.getElementById(c);if(t&&(t.setAttribute("data-selected-value",JSON.stringify({value:r,currency_code:a})),L||O)){const h=new CustomEvent("pilot-change",{bubbles:!0,detail:{selector:`#${c}`,value:{value:r,currency_code:a},type:"change"}});t.dispatchEvent(h)}}},[a]),l.useEffect(()=>{const r=Q.CURRENCIES.filter(t=>(t.value+" - "+t.label).toLowerCase().includes(N.toLowerCase())).map(t=>({label:e.jsx(_e.OptionButton,{text:`${t.value} - ${t.label}`,icon:T.getFlagComponent(t.value),showTick:a===t.value,onClick:()=>P(t.value),className:"text-black-900 dark:text-white"}),key:t.value}));he(r)},[N,a]),l.useEffect(()=>{K("")},[a]),te?e.jsxs("label",{id:c,className:`mb-1 text-xs font-medium text-gray-600 h-full inline-flex items-center gap-1 ${q?"":"capitalize"} ${z||""}`,children:[e.jsx("span",{className:"absolute inset-y-0 left-1 top-0.5 flex items-center pl-3",children:"$"}),e.jsx("input",{...W,ref:H,type:b?"number":"text",required:k,className:n(d,"pl-8 h-[32px]"),onChange:I,min:0,onFocus:Y,onBlur:J,value:b?o:g(o),...m&&!o?{defaultValue:b?m:g(m)}:{},id:c||F,autoFocus:D})]}):e.jsxs("div",{className:n("flex gap-0.5 relative",v&&E?"border rounded-lg border-primary-100 bg-primary-50 p-1":""),onMouseEnter:()=>_(!0),onMouseLeave:()=>_(!1),children:[E&&!v?e.jsx("div",{className:"w-1 h-1 bg-primary-600 rounded-full animate-blink mt-1.5"}):null,e.jsxs("div",{className:n("w-full flex flex-col",re),children:[e.jsx("label",{htmlFor:"text",className:`mb-1 text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${q?"":"uppercase"} ${z||""}`,children:e.jsxs("div",{className:"grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-1",children:[e.jsxs("div",{className:"inline-flex min-w-0 items-center gap-1 flex-wrap",children:[e.jsx(Ie.InputLabel,{label:F||"",required:k||!1,isRequiredConditional:G||!1}),ie&&e.jsx(X.BoltOutlined,{sx:{fontSize:16,color:"var(--color-primary-600)",rotate:"15deg"}}),ae&&!x.shouldShowConfidenceScore(S)&&e.jsx(Ee.AIExtractedIndicator,{}),e.jsx(je.Label,{labels:ee}),A&&e.jsx(Z,{placement:"top",title:A,children:e.jsx("div",{className:"cursor-pointer",children:e.jsx(we.HelpIcon,{})})}),be]}),e.jsxs("div",{className:"flex items-center gap-1 justify-self-end",children:[x.shouldShowConfidenceScore(S)&&f?e.jsx(Z,{placement:"top-end",title:j??"",hideTooltip:j==null,className:"cursor-pointer",children:e.jsxs("div",{className:n("inline-flex min-w-[50px] items-center gap-1 rounded-md px-1 py-0.5",x.getConfidenceScoreBadgeClass(f)),onClick:()=>ne?.(oe),children:[e.jsx(Ce.AIStarIcon,{size:12,fill:x.getConfidenceScoreBadgeColor(f),fillSecondary:x.getConfidenceScoreBadgeFill(f)}),e.jsxs("span",{className:n("text-xs font-medium leading-4",x.getConfidenceScoreBadgeTextColor(f)),children:[S,"%"]})]})}):null,E&&v&&C?e.jsx("button",{id:"btn-currency-input-add-to-document",className:"cursor-pointer",onClick:()=>ve(g(o)),type:"button",children:e.jsx(M.Tooltip,{placement:"top",title:xe("Add to document"),children:e.jsx(X.NoteAddOutlined,{className:"text-primary-600",sx:{fontSize:16}})})}):null]})]})}),e.jsxs("label",{className:"relative block",children:[e.jsx("span",{className:"absolute inset-y-0 left-1 flex items-center pl-3 text-neutral-900 dark:text-white",children:Q.CURRENCY_SYMBOLS[a]}),e.jsx("input",{...W,ref:H,placeholder:se,type:b?"number":"text",required:k,disabled:ce,className:ye(),onChange:I,min:0,onFocus:Y,onBlur:J,value:b?o:g(o),defaultValue:b?m:g(m),id:c||F,style:de,autoComplete:"off",autoFocus:D}),e.jsx("span",{className:`absolute inset-y-0 right-2 flex items-center z-[1000px] h-full cursor-pointer dark:text-black-200 ${$?"cursor-pointer":""}`,children:$?e.jsx(M.Dropdown,{menu:{items:[...ge]},trigger:["click"],overlayClassName:"row-option-cell",placement:"bottomRight",overlayStyle:{zIndex:999},getPopupContainer:r=>r.parentElement,popupRender:r=>e.jsxs("div",{style:{maxHeight:"200px",width:"330px",textOverflow:"ellipsis",overflowY:"auto",zIndex:"999px",borderRadius:"6px"},className:"[&>*:nth-child(2)]:!shadow-none [&>*:nth-child(2)>*]:!px-2 flex flex-col gap-2 p-2 bg-white dark:bg-black-700 border border-solid border-neutral-200 dark:border-black-600",children:[e.jsx(Ne.SearchBar,{id:"search-bar-currency-input",value:N,onChange:t=>K(t),className:"mb-2"}),r]}),children:e.jsxs("div",{className:"pl-4 pr-2 py-1.5 text-sm text-gray-700 dark:text-black-200 flex items-center gap-1",children:[T.getFlagComponent(a)," ",a]})}):a})]}),i&&e.jsx(Se.Typography,{className:"text-error-500 mt-1",appearance:"custom",size:"extra-small",variant:"medium",children:i})]}),v&&s&&p&&U&&e.jsx("div",{role:"tooltip",tabIndex:0,className:"absolute left-0 right-0 top-[95%] mt-1 z-50 bg-white dark:bg-black-600 rounded-xl",onClick:r=>r.stopPropagation(),onMouseDown:r=>r.preventDefault(),onKeyDown:r=>{r.key==="Escape"&&_(!1)},children:e.jsx(U,{riskDetails:s})})]})});V.displayName="CurrencyInputField";exports.CurrencyInputField=V;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../_virtual/index.cjs.js"),l=require("react"),M=require("antd"),ke=require("react-i18next"),Se=require("../../data-display/typography/Typography.cjs.js"),je=require("../../data-display/label/Label.cjs.js"),Q=require("./currency.constant.cjs.js"),X=require("@mui/icons-material"),Ee=require("../../icons/AIExtractedIndicator.cjs.js"),Ce=require("../../icons/AIStarIcon.cjs.js"),we=require("../../icons/HelpIcon.cjs.js"),Z=require("../../tooltip/Tooltip.cjs.js"),m=require("../../../utils/confidenceScoreUtils.cjs.js"),Ne=require("../search-bar/SearchBar.cjs.js"),_e=require("../../buttons/option-button/OptionButton.cjs.js"),T=require("../../../utils/countryFlags.cjs.js"),Ie=require("../shared/InputLabel.cjs.js"),Be=require("../../../utils/formatters.cjs.js"),V=l.forwardRef(({id:c,label:F,value:o,onChange:B,errorMessage:i,defaultValue:x,required:k=!1,isRequiredConditional:G=!1,tags:ee,className:re,originalCase:q=!1,tooltip:A,simpleMode:te=!1,inputFieldClassName:d="",isAiExtracted:ae=!1,confidenceScore:S,confidenceType:f="high",confidenceTooltip:j,sourceMeta:oe=[],onConfidenceScoreClick:ne,isGTN:E=!1,gtnName:le=null,allowMultiCurrency:$=!1,placeholder:se,disabled:ce=!1,currencyCode:u="USD",inputStyle:de,labelClassName:z,isLiveField:ie=!1,onBlur:ue,autoFocus:D=!1,isRecording:L=!1,isPlaying:O=!1,onAddGTNToDocument:C,riskDetails:s,isRiskAnalysisOpen:p=!1,RiskDetailsCard:U,labelExtra:be,inputEmphasis:w="default",...W},H)=>{const{t:me}=ke.useTranslation(),xe=w==="modified"&&!i&&!(p&&s?.color),fe=w==="deleted"&&!i&&!(p&&s?.color),pe=w==="success"&&!i&&!(p&&s?.color),[b,R]=l.useState(!1),[ge,he]=l.useState([]),[N,K]=l.useState(""),[a,P]=l.useState(u||"USD"),[v,_]=l.useState(!1),ve=r=>{if(C){const t={key:le,value:Be.formatCurrency(r,a)};C(t)}},g=r=>{if(r==null)return"";const t=Number(r);return isNaN(t)?r:t?.toLocaleString("en-US",{minimumFractionDigits:2,maximumFractionDigits:2})},I=r=>{const t=r.target.value,h=t===""||t===null||t===void 0?0:Number(t);B(h,a);const y=document.getElementById(c);if(y&&y.setAttribute("data-selected-value",JSON.stringify({value:h,currency_code:a})),y&&(L||O)){const Fe=new CustomEvent("pilot-change",{bubbles:!0,detail:{selector:`#${c}`,value:{value:h,currency_code:a},type:"change"}});y.dispatchEvent(Fe)}},J=()=>{R(!0)},Y=()=>{R(!1),(o==null||o==="")&&I({target:{value:"0.00"}}),ue?.()},ye=()=>{const r="pl-11 border h-8 text-sm block w-full p-2.5 font-inter font-medium focus:outline-none focus:ring-0";return i?n(r,"rounded-md border-red-300 bg-white dark:bg-black-600",d):p&&s?.color?n(r,`rounded-md border-${s.color}-300 bg-${s.color}-50`,"text-neutral-900 dark:text-black-200 disabled:bg-neutral-50 dark:disabled:!bg-black-800",d):fe?n(r,"rounded-lg border border-solid border-[var(--Error-200,#FECACA)] bg-[var(--Error-50,#FEF2F2)] !text-[#475467] focus:border-[var(--Error-200,#FECACA)] focus:shadow-[0_0_0_2px_rgba(254,202,202,0.45)] dark:border-[var(--Error-200,#FECACA)] dark:bg-[var(--Error-50,#FEF2F2)] dark:!text-[#475467] disabled:!opacity-100 disabled:!bg-[var(--Error-50,#FEF2F2)]",d):xe?n(r,"rounded-lg border border-solid border-[var(--Warning-200,#FEDF89)] bg-[var(--Warning-50,#FFFAEB)] text-neutral-900 dark:text-black-100 focus:border-[var(--Warning-200,#FEDF89)] focus:shadow-[0_0_0_2px_rgba(254,223,137,0.45)] dark:border-[var(--Warning-200,#FEDF89)] dark:bg-[var(--Warning-50,#FFFAEB)] disabled:!opacity-100 disabled:!bg-[var(--Warning-50,#FFFAEB)]",d):pe?n(r,"rounded-lg border border-solid border-[var(--Success-200,#BBF7D0)] bg-[var(--Success-50,#F0FDF4)] !text-[#101828] focus:border-[var(--Success-200,#BBF7D0)] focus:shadow-[0_0_0_2px_rgba(187,247,208,0.45)] dark:border-[var(--Success-200,#BBF7D0)] dark:bg-[var(--Success-50,#F0FDF4)] dark:!text-[#101828] disabled:!opacity-100 disabled:!bg-[var(--Success-50,#F0FDF4)]",d):n(r,"rounded-lg border-gray-300 dark:border-black-600 bg-white dark:bg-black-600 text-neutral-900 dark:text-black-200 disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400 focus:border-[var(--color-primary-600)] dark:focus:border-[var(--color-primary-400)] focus:shadow-[0_0_0_1.5px_var(--color-primary-100)] dark:focus:shadow-[0_0_0_1.5px_var(--color-primary-950)]",d)};return l.useEffect(()=>{u&&P(u)},[u]),l.useEffect(()=>{if(a){const r=o===""||o===null||o===void 0?0:Number(o);u!==a&&B(r,a);const t=document.getElementById(c);if(t&&(t.setAttribute("data-selected-value",JSON.stringify({value:r,currency_code:a})),L||O)){const h=new CustomEvent("pilot-change",{bubbles:!0,detail:{selector:`#${c}`,value:{value:r,currency_code:a},type:"change"}});t.dispatchEvent(h)}}},[a]),l.useEffect(()=>{const r=Q.CURRENCIES.filter(t=>(t.value+" - "+t.label).toLowerCase().includes(N.toLowerCase())).map(t=>({label:e.jsx(_e.OptionButton,{text:`${t.value} - ${t.label}`,icon:T.getFlagComponent(t.value),showTick:a===t.value,onClick:()=>P(t.value),className:"text-black-900 dark:text-white"}),key:t.value}));he(r)},[N,a]),l.useEffect(()=>{K("")},[a]),te?e.jsxs("label",{id:c,className:`mb-1 text-xs font-medium text-gray-600 h-full inline-flex items-center gap-1 ${q?"":"capitalize"} ${z||""}`,children:[e.jsx("span",{className:"absolute inset-y-0 left-1 top-0.5 flex items-center pl-3",children:"$"}),e.jsx("input",{...W,ref:H,type:b?"number":"text",required:k,className:n(d,"pl-8 h-8"),onChange:I,min:0,onFocus:J,onBlur:Y,value:b?o:g(o),...x&&!o?{defaultValue:b?x:g(x)}:{},id:c||F,autoFocus:D})]}):e.jsxs("div",{className:n("flex gap-0.5 relative",v&&E?"border rounded-lg border-primary-100 bg-primary-50 p-1":""),onMouseEnter:()=>_(!0),onMouseLeave:()=>_(!1),children:[E&&!v?e.jsx("div",{className:"size-1 bg-primary-600 rounded-full animate-blink mt-1.5"}):null,e.jsxs("div",{className:n("w-full flex flex-col",re),children:[e.jsx("label",{htmlFor:"text",className:`mb-1 text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${q?"":"uppercase"} ${z||""}`,children:e.jsxs("div",{className:"grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-1",children:[e.jsxs("div",{className:"inline-flex min-w-0 items-center gap-1 flex-wrap",children:[e.jsx(Ie.InputLabel,{label:F||"",required:k||!1,isRequiredConditional:G||!1}),ie&&e.jsx(X.BoltOutlined,{sx:{fontSize:16,color:"var(--color-primary-600)",rotate:"15deg"}}),ae&&!m.shouldShowConfidenceScore(S)&&e.jsx(Ee.AIExtractedIndicator,{}),e.jsx(je.Label,{labels:ee}),A&&e.jsx(Z,{placement:"top",title:A,children:e.jsx("div",{className:"cursor-pointer",children:e.jsx(we.HelpIcon,{className:"w-icon-sm h-icon-sm"})})}),be]}),e.jsxs("div",{className:"flex items-center gap-1 justify-self-end",children:[m.shouldShowConfidenceScore(S)&&f?e.jsx(Z,{placement:"top-end",title:j??"",hideTooltip:j==null,className:"cursor-pointer",children:e.jsxs("div",{className:n("inline-flex min-w-[50px] items-center gap-1 rounded-md px-1 py-0.5",m.getConfidenceScoreBadgeClass(f)),onClick:()=>ne?.(oe),children:[e.jsx(Ce.AIStarIcon,{size:12,fill:m.getConfidenceScoreBadgeColor(f),fillSecondary:m.getConfidenceScoreBadgeFill(f)}),e.jsxs("span",{className:n("text-xs font-medium leading-4",m.getConfidenceScoreBadgeTextColor(f)),children:[S,"%"]})]})}):null,E&&v&&C?e.jsx("button",{id:"btn-currency-input-add-to-document",className:"cursor-pointer",onClick:()=>ve(g(o)),type:"button",children:e.jsx(M.Tooltip,{placement:"top",title:me("Add to document"),children:e.jsx(X.NoteAddOutlined,{className:"text-primary-600",sx:{fontSize:16}})})}):null]})]})}),e.jsxs("label",{className:"relative block",children:[e.jsx("span",{className:"absolute inset-y-0 left-1 flex items-center pl-3 text-neutral-900 dark:text-white",children:Q.CURRENCY_SYMBOLS[a]}),e.jsx("input",{...W,ref:H,placeholder:se,type:b?"number":"text",required:k,disabled:ce,className:ye(),onChange:I,min:0,onFocus:J,onBlur:Y,value:b?o:g(o),defaultValue:b?x:g(x),id:c||F,style:de,autoComplete:"off",autoFocus:D}),e.jsx("span",{className:`absolute inset-y-0 right-2 flex items-center z-[1000] h-full cursor-pointer dark:text-black-200 ${$?"cursor-pointer":""}`,children:$?e.jsx(M.Dropdown,{menu:{items:[...ge]},trigger:["click"],overlayClassName:"row-option-cell",placement:"bottomRight",overlayStyle:{zIndex:999},getPopupContainer:r=>r.parentElement,popupRender:r=>e.jsxs("div",{className:"[&>*:nth-child(2)]:!shadow-none [&>*:nth-child(2)>*]:!px-2 flex flex-col gap-2 p-2 bg-white dark:bg-black-700 border border-solid border-neutral-200 dark:border-black-600 max-h-[200px] w-[330px] text-ellipsis overflow-y-auto z-[999] rounded-md",children:[e.jsx(Ne.SearchBar,{id:"search-bar-currency-input",value:N,onChange:t=>K(t),className:"mb-2"}),r]}),children:e.jsxs("div",{className:"pl-4 pr-2 py-1.5 text-sm text-gray-700 dark:text-black-200 flex items-center gap-1",children:[T.getFlagComponent(a)," ",a]})}):a})]}),i&&e.jsx(Se.Typography,{className:"text-error-500 mt-1",appearance:"custom",size:"extra-small",variant:"medium",children:i})]}),v&&s&&p&&U&&e.jsx("div",{role:"tooltip",tabIndex:0,className:"absolute left-0 right-0 top-[95%] mt-1 z-50 bg-white dark:bg-black-600 rounded-xl",onClick:r=>r.stopPropagation(),onMouseDown:r=>r.preventDefault(),onKeyDown:r=>{r.key==="Escape"&&_(!1)},children:e.jsx(U,{riskDetails:s})})]})});V.displayName="CurrencyInputField";exports.CurrencyInputField=V;
 //# sourceMappingURL=CurrencyInputField.cjs.js.map