@lax-wp/design-system 0.15.1 → 0.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/components/forms/base-input-field/BaseInputField.cjs.js +1 -1
  2. package/dist/components/forms/base-input-field/BaseInputField.cjs.js.map +1 -1
  3. package/dist/components/forms/base-input-field/BaseInputField.es.js +9 -9
  4. package/dist/components/forms/base-input-field/BaseInputField.es.js.map +1 -1
  5. package/dist/components/forms/currency-input/CurrencyInputField.cjs.js +1 -1
  6. package/dist/components/forms/currency-input/CurrencyInputField.cjs.js.map +1 -1
  7. package/dist/components/forms/currency-input/CurrencyInputField.es.js +13 -13
  8. package/dist/components/forms/currency-input/CurrencyInputField.es.js.map +1 -1
  9. package/dist/components/forms/percentage-input/PercentageInputField.cjs.js +1 -1
  10. package/dist/components/forms/percentage-input/PercentageInputField.cjs.js.map +1 -1
  11. package/dist/components/forms/percentage-input/PercentageInputField.es.js +35 -35
  12. package/dist/components/forms/percentage-input/PercentageInputField.es.js.map +1 -1
  13. package/dist/components/forms/text-area-field/TextAreaField.cjs.js +1 -1
  14. package/dist/components/forms/text-area-field/TextAreaField.cjs.js.map +1 -1
  15. package/dist/components/forms/text-area-field/TextAreaField.es.js +58 -59
  16. package/dist/components/forms/text-area-field/TextAreaField.es.js.map +1 -1
  17. package/package.json +1 -1
package/dist/components/forms/percentage-input/PercentageInputField.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PercentageInputField.cjs.js","sources":["../../../../src/components/forms/percentage-input/PercentageInputField.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport cn from \"classnames\";\nimport { forwardRef, useState } from \"react\";\nimport { Tooltip as AntTooltip } from \"antd\";\nimport { useTranslation } from 'react-i18next';\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { Label } from \"../../data-display/label/Label\";\nimport type { LabelType } from \"../../data-display/label/Label\";\nimport { BoltOutlined, NoteAddOutlined } from \"@mui/icons-material\";\nimport { AIExtractedIndicator } from \"../../icons/AIExtractedIndicator\";\nimport { AIStarIcon } from \"../../icons/AIStarIcon\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\nimport {\n getConfidenceScoreBadgeClass,\n getConfidenceScoreBadgeColor,\n getConfidenceScoreBadgeFill,\n getConfidenceScoreBadgeTextColor,\n shouldShowConfidenceScore,\n} from \"../../../utils/confidenceScoreUtils\";\nimport { InputLabel } from \"../shared/InputLabel\";\n\n/**\n * Confidence score type\n */\nexport type ConfidenceScoreType = \"low\" | \"medium\" | \"high\";\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 for risk analysis integration\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 - generic to allow consumer-specific risk types\n */\nexport interface RiskDetailsCardProps<T = any> {\n riskDetails: T;\n maxWidth?: string;\n showAllRisksSuggestions?: boolean;\n}\n\n/** Visual emphasis for the input surface (background + border) */\nexport type PercentageInputFieldEmphasis =\n | \"default\"\n | \"modified\"\n | \"deleted\"\n | \"success\";\n\n/**\n * Props for the PercentageInputField component\n */\nexport interface PercentageInputFieldProps {\n /** Unique identifier for the input */\n id: string;\n /** Label text to display above the input */\n label?: string;\n /** Optional extra content in the label row (e.g. actions, badges) */\n labelExtra?: React.ReactNode;\n /** Current value of the input */\n value: string;\n /** Callback function called when value changes */\n onChange: (data: any) => void;\n /** Error message to display below the input */\n errorMessage?: string;\n /** Default value for the input */\n defaultValue?: string;\n /** Whether the input is disabled */\n disabled?: boolean;\n /** Maximum value allowed */\n max?: number;\n /** Minimum value allowed */\n min?: number;\n /** Whether the field is required */\n required?: boolean;\n /** Whether the required indicator shows as conditional (yellow instead of red) */\n isRequiredConditional?: boolean;\n /** Background color class */\n bg?: string;\n /** Tags/labels to display next to the label */\n tags?: (string | LabelType)[];\n /** Text color class */\n color?: string;\n /** Additional CSS classes for the wrapper */\n className?: string;\n /** Whether to preserve original case in the label */\n originalCase?: boolean;\n /** Tooltip text for the help icon */\n tooltip?: string;\n /** Whether to use simple mode (inline label style) */\n simpleMode?: boolean;\n /** Additional CSS classes for the input field */\n inputFieldClassName?: string;\n /** Whether the value was AI extracted */\n isAiExtracted?: boolean;\n /** Confidence percentage shown as a badge */\n confidenceScore?: number;\n /** Confidence classification for badge styling */\n confidenceType?: ConfidenceScoreType;\n /** Optional tooltip content for confidence badge */\n confidenceTooltip?: React.ReactNode;\n /** Source meta for confidence score */\n sourceMeta?: SourceMetaItem[];\n /** Handler fired when confidence score badge is clicked */\n onConfidenceScoreClick?: (sourceMeta: SourceMetaItem[]) => void;\n /** Whether this is a GTN (Global Term Name) field */\n isGTN?: boolean;\n /** GTN field name for document integration */\n gtnName?: any;\n /** Inline styles for the input element */\n inputStyle?: React.CSSProperties;\n /** Whether to show dollar sign (for simpleMode) */\n withDollarSign?: boolean;\n /** Additional CSS classes for the label */\n labelClassName?: string;\n /** Whether this is a live field */\n isLiveField?: boolean;\n /** Callback function called when input loses focus */\n onBlur?: () => void;\n /** Handler for adding GTN to document */\n onAddGTNToDocument?: (keyValuePair: { key: string; value: string }) => void;\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<any>>;\n /** Input placeholder */\n placeholder?: string\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?: PercentageInputFieldEmphasis;\n}\n\n/**\n * A highly customizable percentage input component with label, validation, and styling support.\n * Features GTN integration, risk analysis support, AI extraction indicator, and comprehensive prop support.\n *\n * @example\n * ```tsx\n * <PercentageInputField\n * id=\"discount\"\n * label=\"Discount Percentage\"\n * value={discount}\n * onChange={(value) => setDiscount(value)}\n * required\n * />\n * ```\n */\nexport const PercentageInputField = forwardRef<\n HTMLInputElement,\n PercentageInputFieldProps\n>(\n (\n {\n id,\n label,\n labelExtra,\n value,\n onChange,\n errorMessage,\n defaultValue,\n disabled,\n max,\n min,\n required = false,\n isRequiredConditional = false,\n bg,\n tags,\n color,\n className,\n originalCase = false,\n tooltip,\n simpleMode = false,\n inputFieldClassName = \"\",\n isAiExtracted = false,\n confidenceScore,\n confidenceType = \"high\",\n confidenceTooltip,\n sourceMeta = [],\n onConfidenceScoreClick,\n isGTN = false,\n gtnName = null,\n inputStyle,\n withDollarSign = true,\n labelClassName,\n isLiveField = false,\n onBlur,\n onAddGTNToDocument,\n riskDetails,\n isRiskAnalysisOpen = false,\n RiskDetailsCard,\n placeholder,\n inputEmphasis = \"default\",\n ...props\n },\n ref\n ) => {\n const { t } = useTranslation();\n const showRiskSkin = Boolean(isRiskAnalysisOpen && riskDetails?.color);\n const emphasisModifiedSkin =\n inputEmphasis === \"modified\" && !errorMessage && !showRiskSkin;\n const emphasisDeletedSkin =\n inputEmphasis === \"deleted\" && !errorMessage && !showRiskSkin;\n const emphasisSuccessSkin =\n inputEmphasis === \"success\" && !errorMessage && !showRiskSkin;\n const [isHovered, setIsHovered] = useState(false);\n\n const handleAddGTNToDocument = (_value: string) => {\n if (onAddGTNToDocument) {\n const keyValuePair = {\n key: gtnName,\n value: _value,\n };\n onAddGTNToDocument(keyValuePair);\n }\n };\n\n // Simple mode rendering\n if (simpleMode) {\n return (\n <label\n id={id}\n className={`mb-1 text-xs font-medium text-gray-600 dark:text-neutral-200 inline-flex items-center gap-1 ${\n !originalCase ? \"capitalize\" : \"\"\n } ${labelClassName || \"\"}`}\n >\n {withDollarSign && (\n <span className=\"absolute inset-y-0 left-1 flex items-center pl-3\">\n {\"$\"}\n </span>\n )}\n <input\n {...props}\n ref={ref}\n onBlur={onBlur}\n type=\"number\"\n required={required}\n className={cn(inputFieldClassName, \"pl-8 h-8\")}\n onChange={(e) => {\n onChange(e.target.value);\n }}\n value={value}\n {...(defaultValue && !value ? { defaultValue: defaultValue } : {})}\n id={id || label}\n style={inputStyle}\n autoComplete=\"off\"\n />\n </label>\n );\n }\n\n // Full mode rendering\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\"\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(\"w-full flex flex-col\", className)}>\n <label\n htmlFor=\"text\"\n className={`mb-1 text-xs font-medium text-gray-600 dark:text-neutral-300 inline-flex items-center gap-1 ${\n !originalCase ? \"uppercase\" : \"\"\n } ${labelClassName || \"\"}`}\n >\n <div className=\"grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-1\">\n <div className=\"inline-flex min-w-0 items-center gap-1 flex-wrap dark:text-black-300\">\n <InputLabel label={label || \"\"} required={required || false} isRequiredConditional={isRequiredConditional || false} />\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 <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 {labelExtra}\n </div>\n\n <div className=\"flex items-center gap-1 justify-self-end\">\n {(shouldShowConfidenceScore(confidenceScore) && confidenceType) ? (\n <Tooltip\n placement=\"top-end\"\n title={confidenceTooltip ?? \"\"}\n hideTooltip={confidenceTooltip === undefined || confidenceTooltip === null}\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 className={cn(\"text-xs font-medium leading-4\", getConfidenceScoreBadgeTextColor(confidenceType))}>\n {confidenceScore}%\n </span>\n </div>\n </Tooltip>\n ) : null}\n {isGTN && isHovered && onAddGTNToDocument ? (\n <button\n id=\"btn-percentage-input-add-to-document\"\n className=\"cursor-pointer\"\n onClick={() => handleAddGTNToDocument(value?.toString())}\n type=\"button\"\n >\n <AntTooltip placement=\"top\" title={t(\"Add to document\")}>\n <NoteAddOutlined\n className=\"text-primary-600\"\n sx={{ fontSize: 16 }}\n />\n </AntTooltip>\n </button>\n ) : null}\n </div>\n </div>\n </label>\n <label className=\"relative block\">\n <input\n {...props}\n ref={ref}\n onBlur={onBlur}\n type=\"number\"\n required={required}\n disabled={disabled}\n min={min}\n max={max}\n className={cn(\n \"h-8 text-gray-900 dark:bg-black-600 dark:text-neutral-200 text-sm rounded-lg focus:outline-none focus:ring-0 block w-full p-2.5 font-inter font-medium disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400\",\n bg,\n errorMessage\n ? \"border border-red-300 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)]\"\n : showRiskSkin && riskDetails?.color\n ? cn(\n `border border-${riskDetails.color}-300 bg-${riskDetails.color}-50`,\n \"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)]\"\n )\n : emphasisDeletedSkin\n ? \"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]\"\n : emphasisModifiedSkin\n ? \"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)]\"\n : emphasisSuccessSkin\n ? \"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]\"\n : \"border border-gray-300 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)]\",\n color || \"\"\n )}\n onChange={(e) => {\n onChange(e.target.value);\n }}\n value={value}\n defaultValue={defaultValue}\n id={id || label}\n style={inputStyle}\n autoComplete=\"off\"\n placeholder={placeholder}\n />\n <span className=\"absolute inset-y-0 right-3 flex items-center z-[1000px] h-full dark:text-black-100\">\n %\n </span>\n </label>\n {errorMessage && (\n <Typography\n className=\"text-error-500 mt-1\"\n appearance=\"custom\"\n size=\"extra-small\"\n variant=\"medium\"\n >\n {errorMessage}\n </Typography>\n )}\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\nPercentageInputField.displayName = \"PercentageInputField\";\n"],"names":["PercentageInputField","forwardRef","id","label","labelExtra","value","onChange","errorMessage","defaultValue","disabled","max","min","required","isRequiredConditional","bg","tags","color","className","originalCase","tooltip","simpleMode","inputFieldClassName","isAiExtracted","confidenceScore","confidenceType","confidenceTooltip","sourceMeta","onConfidenceScoreClick","isGTN","gtnName","inputStyle","withDollarSign","labelClassName","isLiveField","onBlur","onAddGTNToDocument","riskDetails","isRiskAnalysisOpen","RiskDetailsCard","placeholder","inputEmphasis","props","ref","t","useTranslation","showRiskSkin","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","isHovered","setIsHovered","useState","handleAddGTNToDocument","_value","jsxs","jsx","cn","e","InputLabel","BoltOutlined","shouldShowConfidenceScore","AIExtractedIndicator","Label","Tooltip","HelpIcon","getConfidenceScoreBadgeClass","AIStarIcon","getConfidenceScoreBadgeColor","getConfidenceScoreBadgeFill","getConfidenceScoreBadgeTextColor","AntTooltip","NoteAddOutlined","Typography"],"mappings":"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"}
1
+ {"version":3,"file":"PercentageInputField.cjs.js","sources":["../../../../src/components/forms/percentage-input/PercentageInputField.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport cn from \"classnames\";\nimport { forwardRef, useState } from \"react\";\nimport { Tooltip as AntTooltip } from \"antd\";\nimport { useTranslation } from 'react-i18next';\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { Label } from \"../../data-display/label/Label\";\nimport type { LabelType } from \"../../data-display/label/Label\";\nimport { BoltOutlined, NoteAddOutlined } from \"@mui/icons-material\";\nimport { AIExtractedIndicator } from \"../../icons/AIExtractedIndicator\";\nimport { AIStarIcon } from \"../../icons/AIStarIcon\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\nimport {\n getConfidenceScoreBadgeClass,\n getConfidenceScoreBadgeColor,\n getConfidenceScoreBadgeFill,\n getConfidenceScoreBadgeTextColor,\n shouldShowConfidenceScore,\n} from \"../../../utils/confidenceScoreUtils\";\nimport { InputLabel } from \"../shared/InputLabel\";\n\n/**\n * Confidence score type\n */\nexport type ConfidenceScoreType = \"low\" | \"medium\" | \"high\";\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 for risk analysis integration\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 - generic to allow consumer-specific risk types\n */\nexport interface RiskDetailsCardProps<T = any> {\n riskDetails: T;\n maxWidth?: string;\n showAllRisksSuggestions?: boolean;\n}\n\n/** Visual emphasis for the input surface (background + border) */\nexport type PercentageInputFieldEmphasis =\n | \"default\"\n | \"modified\"\n | \"deleted\"\n | \"success\";\n\n/**\n * Props for the PercentageInputField component\n */\nexport interface PercentageInputFieldProps {\n /** Unique identifier for the input */\n id: string;\n /** Label text to display above the input */\n label?: string;\n /** Optional extra content in the label row (e.g. actions, badges) */\n labelExtra?: React.ReactNode;\n /** Current value of the input */\n value: string;\n /** Callback function called when value changes */\n onChange: (data: any) => void;\n /** Error message to display below the input */\n errorMessage?: string;\n /** Default value for the input */\n defaultValue?: string;\n /** Whether the input is disabled */\n disabled?: boolean;\n /** Maximum value allowed */\n max?: number;\n /** Minimum value allowed */\n min?: number;\n /** Whether the field is required */\n required?: boolean;\n /** Whether the required indicator shows as conditional (yellow instead of red) */\n isRequiredConditional?: boolean;\n /** Background color class */\n bg?: string;\n /** Tags/labels to display next to the label */\n tags?: (string | LabelType)[];\n /** Text color class */\n color?: string;\n /** Additional CSS classes for the wrapper */\n className?: string;\n /** Whether to preserve original case in the label */\n originalCase?: boolean;\n /** Tooltip text for the help icon */\n tooltip?: string;\n /** Whether to use simple mode (inline label style) */\n simpleMode?: boolean;\n /** Additional CSS classes for the input field */\n inputFieldClassName?: string;\n /** Whether the value was AI extracted */\n isAiExtracted?: boolean;\n /** Confidence percentage shown as a badge */\n confidenceScore?: number;\n /** Confidence classification for badge styling */\n confidenceType?: ConfidenceScoreType;\n /** Optional tooltip content for confidence badge */\n confidenceTooltip?: React.ReactNode;\n /** Source meta for confidence score */\n sourceMeta?: SourceMetaItem[];\n /** Handler fired when confidence score badge is clicked */\n onConfidenceScoreClick?: (sourceMeta: SourceMetaItem[]) => void;\n /** Whether this is a GTN (Global Term Name) field */\n isGTN?: boolean;\n /** GTN field name for document integration */\n gtnName?: any;\n /** Inline styles for the input element */\n inputStyle?: React.CSSProperties;\n /** Whether to show dollar sign (for simpleMode) */\n withDollarSign?: boolean;\n /** Additional CSS classes for the label */\n labelClassName?: string;\n /** Whether this is a live field */\n isLiveField?: boolean;\n /** Callback function called when input loses focus */\n onBlur?: () => void;\n /** Handler for adding GTN to document */\n onAddGTNToDocument?: (keyValuePair: { key: string; value: string }) => void;\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<any>>;\n /** Input placeholder */\n placeholder?: string\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?: PercentageInputFieldEmphasis;\n}\n\n/**\n * A highly customizable percentage input component with label, validation, and styling support.\n * Features GTN integration, risk analysis support, AI extraction indicator, and comprehensive prop support.\n *\n * @example\n * ```tsx\n * <PercentageInputField\n * id=\"discount\"\n * label=\"Discount Percentage\"\n * value={discount}\n * onChange={(value) => setDiscount(value)}\n * required\n * />\n * ```\n */\nexport const PercentageInputField = forwardRef<\n HTMLInputElement,\n PercentageInputFieldProps\n>(\n (\n {\n id,\n label,\n labelExtra,\n value,\n onChange,\n errorMessage,\n defaultValue,\n disabled,\n max,\n min,\n required = false,\n isRequiredConditional = false,\n bg,\n tags,\n color,\n className,\n originalCase = false,\n tooltip,\n simpleMode = false,\n inputFieldClassName = \"\",\n isAiExtracted = false,\n confidenceScore,\n confidenceType = \"high\",\n confidenceTooltip,\n sourceMeta = [],\n onConfidenceScoreClick,\n isGTN = false,\n gtnName = null,\n inputStyle,\n withDollarSign = true,\n labelClassName,\n isLiveField = false,\n onBlur,\n onAddGTNToDocument,\n riskDetails,\n isRiskAnalysisOpen = false,\n RiskDetailsCard,\n placeholder,\n inputEmphasis = \"default\",\n ...props\n },\n ref\n ) => {\n const { t } = useTranslation();\n const showRiskSkin = Boolean(isRiskAnalysisOpen && riskDetails?.color);\n const emphasisModifiedSkin =\n inputEmphasis === \"modified\" && !errorMessage && !showRiskSkin;\n const emphasisDeletedSkin =\n inputEmphasis === \"deleted\" && !errorMessage && !showRiskSkin;\n const emphasisSuccessSkin =\n inputEmphasis === \"success\" && !errorMessage && !showRiskSkin;\n const [isHovered, setIsHovered] = useState(false);\n\n const handleAddGTNToDocument = (_value: string) => {\n if (onAddGTNToDocument) {\n const keyValuePair = {\n key: gtnName,\n value: _value,\n };\n onAddGTNToDocument(keyValuePair);\n }\n };\n\n // Simple mode rendering\n if (simpleMode) {\n return (\n <label\n id={id}\n className={`mb-1 text-xs font-medium text-gray-600 dark:text-neutral-200 inline-flex items-center gap-1 ${\n !originalCase ? \"capitalize\" : \"\"\n } ${labelClassName || \"\"}`}\n >\n {withDollarSign && (\n <span className=\"absolute inset-y-0 left-1 flex items-center pl-3\">\n {\"$\"}\n </span>\n )}\n <input\n {...props}\n ref={ref}\n onBlur={onBlur}\n type=\"number\"\n required={required}\n className={cn(inputFieldClassName, \"pl-8 h-8\")}\n onChange={(e) => {\n onChange(e.target.value);\n }}\n value={value}\n {...(defaultValue && !value ? { defaultValue: defaultValue } : {})}\n id={id || label}\n style={inputStyle}\n autoComplete=\"off\"\n />\n </label>\n );\n }\n\n // Full mode rendering\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\"\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(\"w-full flex flex-col\", className)}>\n <label\n htmlFor=\"text\"\n className={`mb-1 text-xs font-medium text-gray-600 dark:text-neutral-300 inline-flex items-center gap-1 ${\n !originalCase ? \"uppercase\" : \"\"\n } ${labelClassName || \"\"}`}\n >\n <div className=\"grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-1\">\n <div className=\"inline-flex min-w-0 items-center gap-1 flex-wrap dark:text-black-300\">\n <InputLabel label={label || \"\"} required={required || false} isRequiredConditional={isRequiredConditional || false} />\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 <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 {labelExtra}\n </div>\n\n <div className=\"flex items-center gap-1 justify-self-end\">\n {(shouldShowConfidenceScore(confidenceScore) && confidenceType) ? (\n <Tooltip\n placement=\"top-end\"\n title={confidenceTooltip ?? \"\"}\n hideTooltip={confidenceTooltip === undefined || confidenceTooltip === null}\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 className={cn(\"text-xs font-medium leading-4\", getConfidenceScoreBadgeTextColor(confidenceType))}>\n {confidenceScore}%\n </span>\n </div>\n </Tooltip>\n ) : null}\n {isGTN && isHovered && onAddGTNToDocument ? (\n <button\n id=\"btn-percentage-input-add-to-document\"\n className=\"cursor-pointer\"\n onClick={() => handleAddGTNToDocument(value?.toString())}\n type=\"button\"\n >\n <AntTooltip placement=\"top\" title={t(\"Add to document\")}>\n <NoteAddOutlined\n className=\"text-primary-600\"\n sx={{ fontSize: 16 }}\n />\n </AntTooltip>\n </button>\n ) : null}\n </div>\n </div>\n </label>\n <label className=\"relative block\">\n <input\n {...props}\n ref={ref}\n onBlur={onBlur}\n type=\"number\"\n required={required}\n disabled={disabled}\n min={min}\n max={max}\n className={cn(\n \"h-8 text-gray-900 dark:bg-black-600 dark:text-neutral-200 text-sm rounded-lg focus:outline-none focus:ring-0 block w-full p-2.5 font-inter font-medium placeholder:text-neutral-400 dark:placeholder:text-black-300 disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400\",\n bg,\n errorMessage\n ? \"border border-red-300 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)]\"\n : showRiskSkin && riskDetails?.color\n ? cn(\n `border border-${riskDetails.color}-300 bg-${riskDetails.color}-50`,\n \"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)]\"\n )\n : emphasisDeletedSkin\n ? \"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]\"\n : emphasisModifiedSkin\n ? \"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)]\"\n : emphasisSuccessSkin\n ? \"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]\"\n : \"border border-gray-300 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)]\",\n color || \"\"\n )}\n onChange={(e) => {\n onChange(e.target.value);\n }}\n value={value}\n defaultValue={defaultValue}\n id={id || label}\n style={inputStyle}\n autoComplete=\"off\"\n placeholder={placeholder}\n />\n <span className=\"absolute inset-y-0 right-3 flex items-center z-[1000px] h-full dark:text-black-100\">\n %\n </span>\n </label>\n {errorMessage && (\n <Typography\n className=\"text-error-500 mt-1\"\n appearance=\"custom\"\n size=\"extra-small\"\n variant=\"medium\"\n >\n {errorMessage}\n </Typography>\n )}\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\nPercentageInputField.displayName = \"PercentageInputField\";\n"],"names":["PercentageInputField","forwardRef","id","label","labelExtra","value","onChange","errorMessage","defaultValue","disabled","max","min","required","isRequiredConditional","bg","tags","color","className","originalCase","tooltip","simpleMode","inputFieldClassName","isAiExtracted","confidenceScore","confidenceType","confidenceTooltip","sourceMeta","onConfidenceScoreClick","isGTN","gtnName","inputStyle","withDollarSign","labelClassName","isLiveField","onBlur","onAddGTNToDocument","riskDetails","isRiskAnalysisOpen","RiskDetailsCard","placeholder","inputEmphasis","props","ref","t","useTranslation","showRiskSkin","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","isHovered","setIsHovered","useState","handleAddGTNToDocument","_value","jsxs","jsx","cn","e","InputLabel","BoltOutlined","shouldShowConfidenceScore","AIExtractedIndicator","Label","Tooltip","HelpIcon","getConfidenceScoreBadgeClass","AIStarIcon","getConfidenceScoreBadgeColor","getConfidenceScoreBadgeFill","getConfidenceScoreBadgeTextColor","AntTooltip","NoteAddOutlined","Typography"],"mappings":"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"}
package/dist/components/forms/percentage-input/PercentageInputField.es.js CHANGED
@@ -1,7 +1,7 @@
1
- import { jsxs as o, jsx as r } from "react/jsx-runtime";
2
- import a from "../../../_virtual/index.es.js";
3
- import { forwardRef as er, useState as or } from "react";
4
- import { Tooltip as ar } from "antd";
1
+ import { jsxs as a, jsx as r } from "react/jsx-runtime";
2
+ import o from "../../../_virtual/index.es.js";
3
+ import { forwardRef as er, useState as ar } from "react";
4
+ import { Tooltip as or } from "antd";
5
5
  import { useTranslation as tr } from "react-i18next";
6
6
  import { Typography as lr } from "../../data-display/typography/Typography.es.js";
7
7
  import { Label as dr } from "../../data-display/label/Label.es.js";
@@ -10,7 +10,7 @@ import { AIExtractedIndicator as cr } from "../../icons/AIExtractedIndicator.es.
10
10
  import { AIStarIcon as nr } from "../../icons/AIStarIcon.es.js";
11
11
  import { HelpIcon as mr } from "../../icons/HelpIcon.es.js";
12
12
  import A from "../../tooltip/Tooltip.es.js";
13
- import { shouldShowConfidenceScore as I, getConfidenceScoreBadgeFill as pr, getConfidenceScoreBadgeColor as fr, getConfidenceScoreBadgeTextColor as ur, getConfidenceScoreBadgeClass as br } from "../../../utils/confidenceScoreUtils.es.js";
13
+ import { shouldShowConfidenceScore as I, getConfidenceScoreBadgeFill as pr, getConfidenceScoreBadgeColor as ur, getConfidenceScoreBadgeTextColor as fr, getConfidenceScoreBadgeClass as br } from "../../../utils/confidenceScoreUtils.es.js";
14
14
  import { InputLabel as xr } from "../shared/InputLabel.es.js";
15
15
  const gr = er(
16
16
  ({
@@ -24,7 +24,7 @@ const gr = er(
24
24
  disabled: z,
25
25
  max: D,
26
26
  min: P,
27
- required: f = !1,
27
+ required: u = !1,
28
28
  isRequiredConditional: W = !1,
29
29
  bg: j,
30
30
  tags: H,
@@ -35,7 +35,7 @@ const gr = er(
35
35
  simpleMode: O = !1,
36
36
  inputFieldClassName: R = "",
37
37
  isAiExtracted: q = !1,
38
- confidenceScore: u,
38
+ confidenceScore: f,
39
39
  confidenceType: d = "high",
40
40
  confidenceTooltip: b,
41
41
  sourceMeta: J = [],
@@ -52,16 +52,16 @@ const gr = er(
52
52
  isRiskAnalysisOpen: S = !1,
53
53
  RiskDetailsCard: C,
54
54
  placeholder: Y,
55
- inputEmphasis: _ = "default",
55
+ inputEmphasis: h = "default",
56
56
  ...E
57
57
  }, B) => {
58
- const { t: Z } = tr(), i = !!(S && l?.color), M = _ === "modified" && !t && !i, G = _ === "deleted" && !t && !i, T = _ === "success" && !t && !i, [c, h] = or(!1), rr = (e) => {
58
+ const { t: Z } = tr(), i = !!(S && l?.color), M = h === "modified" && !t && !i, G = h === "deleted" && !t && !i, T = h === "success" && !t && !i, [c, _] = ar(!1), rr = (e) => {
59
59
  g && g({
60
60
  key: U,
61
61
  value: e
62
62
  });
63
63
  };
64
- return O ? /* @__PURE__ */ o(
64
+ return O ? /* @__PURE__ */ a(
65
65
  "label",
66
66
  {
67
67
  id: n,
@@ -75,8 +75,8 @@ const gr = er(
75
75
  ref: B,
76
76
  onBlur: N,
77
77
  type: "number",
78
- required: f,
79
- className: a(R, "pl-8 h-8"),
78
+ required: u,
79
+ className: o(R, "pl-8 h-8"),
80
80
  onChange: (e) => {
81
81
  v(e.target.value);
82
82
  },
@@ -89,26 +89,26 @@ const gr = er(
89
89
  )
90
90
  ]
91
91
  }
92
- ) : /* @__PURE__ */ o(
92
+ ) : /* @__PURE__ */ a(
93
93
  "div",
94
94
  {
95
- className: a(
95
+ className: o(
96
96
  "flex gap-0.5 relative",
97
97
  c && x ? "border rounded-lg border-primary-100 bg-primary-50 p-1" : ""
98
98
  ),
99
- onMouseEnter: () => h(!0),
100
- onMouseLeave: () => h(!1),
99
+ onMouseEnter: () => _(!0),
100
+ onMouseLeave: () => _(!1),
101
101
  children: [
102
102
  x && !c ? /* @__PURE__ */ r("div", { className: "w-1 h-1 bg-primary-600 rounded-full animate-blink mt-1.5" }) : null,
103
- /* @__PURE__ */ o("div", { className: a("w-full flex flex-col", K), children: [
103
+ /* @__PURE__ */ a("div", { className: o("w-full flex flex-col", K), children: [
104
104
  /* @__PURE__ */ r(
105
105
  "label",
106
106
  {
107
107
  htmlFor: "text",
108
108
  className: `mb-1 text-xs font-medium text-gray-600 dark:text-neutral-300 inline-flex items-center gap-1 ${k ? "" : "uppercase"} ${w || ""}`,
109
- children: /* @__PURE__ */ o("div", { className: "grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-1", children: [
110
- /* @__PURE__ */ o("div", { className: "inline-flex min-w-0 items-center gap-1 flex-wrap dark:text-black-300", children: [
111
- /* @__PURE__ */ r(xr, { label: m || "", required: f || !1, isRequiredConditional: W || !1 }),
109
+ children: /* @__PURE__ */ a("div", { className: "grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-1", children: [
110
+ /* @__PURE__ */ a("div", { className: "inline-flex min-w-0 items-center gap-1 flex-wrap dark:text-black-300", children: [
111
+ /* @__PURE__ */ r(xr, { label: m || "", required: u || !1, isRequiredConditional: W || !1 }),
112
112
  X && /* @__PURE__ */ r(
113
113
  sr,
114
114
  {
@@ -119,23 +119,23 @@ const gr = er(
119
119
  }
120
120
  }
121
121
  ),
122
- q && !I(u) && /* @__PURE__ */ r(cr, {}),
122
+ q && !I(f) && /* @__PURE__ */ r(cr, {}),
123
123
  /* @__PURE__ */ r(dr, { labels: H }),
124
124
  F && /* @__PURE__ */ r(A, { placement: "top", title: F, children: /* @__PURE__ */ r("div", { className: "cursor-pointer", children: /* @__PURE__ */ r(mr, { className: "w-icon-sm h-icon-sm" }) }) }),
125
125
  $
126
126
  ] }),
127
- /* @__PURE__ */ o("div", { className: "flex items-center gap-1 justify-self-end", children: [
128
- I(u) && d ? /* @__PURE__ */ r(
127
+ /* @__PURE__ */ a("div", { className: "flex items-center gap-1 justify-self-end", children: [
128
+ I(f) && d ? /* @__PURE__ */ r(
129
129
  A,
130
130
  {
131
131
  placement: "top-end",
132
132
  title: b ?? "",
133
133
  hideTooltip: b == null,
134
134
  className: "cursor-pointer",
135
- children: /* @__PURE__ */ o(
135
+ children: /* @__PURE__ */ a(
136
136
  "div",
137
137
  {
138
- className: a(
138
+ className: o(
139
139
  "inline-flex min-w-[50px] items-center gap-1 rounded-md px-1 py-0.5",
140
140
  br(d)
141
141
  ),
@@ -145,12 +145,12 @@ const gr = er(
145
145
  nr,
146
146
  {
147
147
  size: 12,
148
- fill: fr(d),
148
+ fill: ur(d),
149
149
  fillSecondary: pr(d)
150
150
  }
151
151
  ),
152
- /* @__PURE__ */ o("span", { className: a("text-xs font-medium leading-4", ur(d)), children: [
153
- u,
152
+ /* @__PURE__ */ a("span", { className: o("text-xs font-medium leading-4", fr(d)), children: [
153
+ f,
154
154
  "%"
155
155
  ] })
156
156
  ]
@@ -165,7 +165,7 @@ const gr = er(
165
165
  className: "cursor-pointer",
166
166
  onClick: () => rr(s?.toString()),
167
167
  type: "button",
168
- children: /* @__PURE__ */ r(ar, { placement: "top", title: Z("Add to document"), children: /* @__PURE__ */ r(
168
+ children: /* @__PURE__ */ r(or, { placement: "top", title: Z("Add to document"), children: /* @__PURE__ */ r(
169
169
  ir,
170
170
  {
171
171
  className: "text-primary-600",
@@ -178,7 +178,7 @@ const gr = er(
178
178
  ] })
179
179
  }
180
180
  ),
181
- /* @__PURE__ */ o("label", { className: "relative block", children: [
181
+ /* @__PURE__ */ a("label", { className: "relative block", children: [
182
182
  /* @__PURE__ */ r(
183
183
  "input",
184
184
  {
@@ -186,14 +186,14 @@ const gr = er(
186
186
  ref: B,
187
187
  onBlur: N,
188
188
  type: "number",
189
- required: f,
189
+ required: u,
190
190
  disabled: z,
191
191
  min: P,
192
192
  max: D,
193
- className: a(
194
- "h-8 text-gray-900 dark:bg-black-600 dark:text-neutral-200 text-sm rounded-lg focus:outline-none focus:ring-0 block w-full p-2.5 font-inter font-medium disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400",
193
+ className: o(
194
+ "h-8 text-gray-900 dark:bg-black-600 dark:text-neutral-200 text-sm rounded-lg focus:outline-none focus:ring-0 block w-full p-2.5 font-inter font-medium placeholder:text-neutral-400 dark:placeholder:text-black-300 disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400",
195
195
  j,
196
- t ? "border border-red-300 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)]" : i && l?.color ? a(
196
+ t ? "border border-red-300 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)]" : i && l?.color ? o(
197
197
  `border border-${l.color}-300 bg-${l.color}-50`,
198
198
  "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)]"
199
199
  ) : G ? "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]" : M ? "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)]" : T ? "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]" : "border border-gray-300 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)]",
@@ -232,7 +232,7 @@ const gr = er(
232
232
  onClick: (e) => e.stopPropagation(),
233
233
  onMouseDown: (e) => e.preventDefault(),
234
234
  onKeyDown: (e) => {
235
- e.key === "Escape" && h(!1);
235
+ e.key === "Escape" && _(!1);
236
236
  },
237
237
  children: /* @__PURE__ */ r(C, { riskDetails: l })
238
238
  }
package/dist/components/forms/percentage-input/PercentageInputField.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PercentageInputField.es.js","sources":["../../../../src/components/forms/percentage-input/PercentageInputField.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport cn from \"classnames\";\nimport { forwardRef, useState } from \"react\";\nimport { Tooltip as AntTooltip } from \"antd\";\nimport { useTranslation } from 'react-i18next';\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { Label } from \"../../data-display/label/Label\";\nimport type { LabelType } from \"../../data-display/label/Label\";\nimport { BoltOutlined, NoteAddOutlined } from \"@mui/icons-material\";\nimport { AIExtractedIndicator } from \"../../icons/AIExtractedIndicator\";\nimport { AIStarIcon } from \"../../icons/AIStarIcon\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\nimport {\n getConfidenceScoreBadgeClass,\n getConfidenceScoreBadgeColor,\n getConfidenceScoreBadgeFill,\n getConfidenceScoreBadgeTextColor,\n shouldShowConfidenceScore,\n} from \"../../../utils/confidenceScoreUtils\";\nimport { InputLabel } from \"../shared/InputLabel\";\n\n/**\n * Confidence score type\n */\nexport type ConfidenceScoreType = \"low\" | \"medium\" | \"high\";\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 for risk analysis integration\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 - generic to allow consumer-specific risk types\n */\nexport interface RiskDetailsCardProps<T = any> {\n riskDetails: T;\n maxWidth?: string;\n showAllRisksSuggestions?: boolean;\n}\n\n/** Visual emphasis for the input surface (background + border) */\nexport type PercentageInputFieldEmphasis =\n | \"default\"\n | \"modified\"\n | \"deleted\"\n | \"success\";\n\n/**\n * Props for the PercentageInputField component\n */\nexport interface PercentageInputFieldProps {\n /** Unique identifier for the input */\n id: string;\n /** Label text to display above the input */\n label?: string;\n /** Optional extra content in the label row (e.g. actions, badges) */\n labelExtra?: React.ReactNode;\n /** Current value of the input */\n value: string;\n /** Callback function called when value changes */\n onChange: (data: any) => void;\n /** Error message to display below the input */\n errorMessage?: string;\n /** Default value for the input */\n defaultValue?: string;\n /** Whether the input is disabled */\n disabled?: boolean;\n /** Maximum value allowed */\n max?: number;\n /** Minimum value allowed */\n min?: number;\n /** Whether the field is required */\n required?: boolean;\n /** Whether the required indicator shows as conditional (yellow instead of red) */\n isRequiredConditional?: boolean;\n /** Background color class */\n bg?: string;\n /** Tags/labels to display next to the label */\n tags?: (string | LabelType)[];\n /** Text color class */\n color?: string;\n /** Additional CSS classes for the wrapper */\n className?: string;\n /** Whether to preserve original case in the label */\n originalCase?: boolean;\n /** Tooltip text for the help icon */\n tooltip?: string;\n /** Whether to use simple mode (inline label style) */\n simpleMode?: boolean;\n /** Additional CSS classes for the input field */\n inputFieldClassName?: string;\n /** Whether the value was AI extracted */\n isAiExtracted?: boolean;\n /** Confidence percentage shown as a badge */\n confidenceScore?: number;\n /** Confidence classification for badge styling */\n confidenceType?: ConfidenceScoreType;\n /** Optional tooltip content for confidence badge */\n confidenceTooltip?: React.ReactNode;\n /** Source meta for confidence score */\n sourceMeta?: SourceMetaItem[];\n /** Handler fired when confidence score badge is clicked */\n onConfidenceScoreClick?: (sourceMeta: SourceMetaItem[]) => void;\n /** Whether this is a GTN (Global Term Name) field */\n isGTN?: boolean;\n /** GTN field name for document integration */\n gtnName?: any;\n /** Inline styles for the input element */\n inputStyle?: React.CSSProperties;\n /** Whether to show dollar sign (for simpleMode) */\n withDollarSign?: boolean;\n /** Additional CSS classes for the label */\n labelClassName?: string;\n /** Whether this is a live field */\n isLiveField?: boolean;\n /** Callback function called when input loses focus */\n onBlur?: () => void;\n /** Handler for adding GTN to document */\n onAddGTNToDocument?: (keyValuePair: { key: string; value: string }) => void;\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<any>>;\n /** Input placeholder */\n placeholder?: string\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?: PercentageInputFieldEmphasis;\n}\n\n/**\n * A highly customizable percentage input component with label, validation, and styling support.\n * Features GTN integration, risk analysis support, AI extraction indicator, and comprehensive prop support.\n *\n * @example\n * ```tsx\n * <PercentageInputField\n * id=\"discount\"\n * label=\"Discount Percentage\"\n * value={discount}\n * onChange={(value) => setDiscount(value)}\n * required\n * />\n * ```\n */\nexport const PercentageInputField = forwardRef<\n HTMLInputElement,\n PercentageInputFieldProps\n>(\n (\n {\n id,\n label,\n labelExtra,\n value,\n onChange,\n errorMessage,\n defaultValue,\n disabled,\n max,\n min,\n required = false,\n isRequiredConditional = false,\n bg,\n tags,\n color,\n className,\n originalCase = false,\n tooltip,\n simpleMode = false,\n inputFieldClassName = \"\",\n isAiExtracted = false,\n confidenceScore,\n confidenceType = \"high\",\n confidenceTooltip,\n sourceMeta = [],\n onConfidenceScoreClick,\n isGTN = false,\n gtnName = null,\n inputStyle,\n withDollarSign = true,\n labelClassName,\n isLiveField = false,\n onBlur,\n onAddGTNToDocument,\n riskDetails,\n isRiskAnalysisOpen = false,\n RiskDetailsCard,\n placeholder,\n inputEmphasis = \"default\",\n ...props\n },\n ref\n ) => {\n const { t } = useTranslation();\n const showRiskSkin = Boolean(isRiskAnalysisOpen && riskDetails?.color);\n const emphasisModifiedSkin =\n inputEmphasis === \"modified\" && !errorMessage && !showRiskSkin;\n const emphasisDeletedSkin =\n inputEmphasis === \"deleted\" && !errorMessage && !showRiskSkin;\n const emphasisSuccessSkin =\n inputEmphasis === \"success\" && !errorMessage && !showRiskSkin;\n const [isHovered, setIsHovered] = useState(false);\n\n const handleAddGTNToDocument = (_value: string) => {\n if (onAddGTNToDocument) {\n const keyValuePair = {\n key: gtnName,\n value: _value,\n };\n onAddGTNToDocument(keyValuePair);\n }\n };\n\n // Simple mode rendering\n if (simpleMode) {\n return (\n <label\n id={id}\n className={`mb-1 text-xs font-medium text-gray-600 dark:text-neutral-200 inline-flex items-center gap-1 ${\n !originalCase ? \"capitalize\" : \"\"\n } ${labelClassName || \"\"}`}\n >\n {withDollarSign && (\n <span className=\"absolute inset-y-0 left-1 flex items-center pl-3\">\n {\"$\"}\n </span>\n )}\n <input\n {...props}\n ref={ref}\n onBlur={onBlur}\n type=\"number\"\n required={required}\n className={cn(inputFieldClassName, \"pl-8 h-8\")}\n onChange={(e) => {\n onChange(e.target.value);\n }}\n value={value}\n {...(defaultValue && !value ? { defaultValue: defaultValue } : {})}\n id={id || label}\n style={inputStyle}\n autoComplete=\"off\"\n />\n </label>\n );\n }\n\n // Full mode rendering\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\"\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(\"w-full flex flex-col\", className)}>\n <label\n htmlFor=\"text\"\n className={`mb-1 text-xs font-medium text-gray-600 dark:text-neutral-300 inline-flex items-center gap-1 ${\n !originalCase ? \"uppercase\" : \"\"\n } ${labelClassName || \"\"}`}\n >\n <div className=\"grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-1\">\n <div className=\"inline-flex min-w-0 items-center gap-1 flex-wrap dark:text-black-300\">\n <InputLabel label={label || \"\"} required={required || false} isRequiredConditional={isRequiredConditional || false} />\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 <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 {labelExtra}\n </div>\n\n <div className=\"flex items-center gap-1 justify-self-end\">\n {(shouldShowConfidenceScore(confidenceScore) && confidenceType) ? (\n <Tooltip\n placement=\"top-end\"\n title={confidenceTooltip ?? \"\"}\n hideTooltip={confidenceTooltip === undefined || confidenceTooltip === null}\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 className={cn(\"text-xs font-medium leading-4\", getConfidenceScoreBadgeTextColor(confidenceType))}>\n {confidenceScore}%\n </span>\n </div>\n </Tooltip>\n ) : null}\n {isGTN && isHovered && onAddGTNToDocument ? (\n <button\n id=\"btn-percentage-input-add-to-document\"\n className=\"cursor-pointer\"\n onClick={() => handleAddGTNToDocument(value?.toString())}\n type=\"button\"\n >\n <AntTooltip placement=\"top\" title={t(\"Add to document\")}>\n <NoteAddOutlined\n className=\"text-primary-600\"\n sx={{ fontSize: 16 }}\n />\n </AntTooltip>\n </button>\n ) : null}\n </div>\n </div>\n </label>\n <label className=\"relative block\">\n <input\n {...props}\n ref={ref}\n onBlur={onBlur}\n type=\"number\"\n required={required}\n disabled={disabled}\n min={min}\n max={max}\n className={cn(\n \"h-8 text-gray-900 dark:bg-black-600 dark:text-neutral-200 text-sm rounded-lg focus:outline-none focus:ring-0 block w-full p-2.5 font-inter font-medium disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400\",\n bg,\n errorMessage\n ? \"border border-red-300 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)]\"\n : showRiskSkin && riskDetails?.color\n ? cn(\n `border border-${riskDetails.color}-300 bg-${riskDetails.color}-50`,\n \"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)]\"\n )\n : emphasisDeletedSkin\n ? \"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]\"\n : emphasisModifiedSkin\n ? \"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)]\"\n : emphasisSuccessSkin\n ? \"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]\"\n : \"border border-gray-300 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)]\",\n color || \"\"\n )}\n onChange={(e) => {\n onChange(e.target.value);\n }}\n value={value}\n defaultValue={defaultValue}\n id={id || label}\n style={inputStyle}\n autoComplete=\"off\"\n placeholder={placeholder}\n />\n <span className=\"absolute inset-y-0 right-3 flex items-center z-[1000px] h-full dark:text-black-100\">\n %\n </span>\n </label>\n {errorMessage && (\n <Typography\n className=\"text-error-500 mt-1\"\n appearance=\"custom\"\n size=\"extra-small\"\n variant=\"medium\"\n >\n {errorMessage}\n </Typography>\n )}\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\nPercentageInputField.displayName = \"PercentageInputField\";\n"],"names":["PercentageInputField","forwardRef","id","label","labelExtra","value","onChange","errorMessage","defaultValue","disabled","max","min","required","isRequiredConditional","bg","tags","color","className","originalCase","tooltip","simpleMode","inputFieldClassName","isAiExtracted","confidenceScore","confidenceType","confidenceTooltip","sourceMeta","onConfidenceScoreClick","isGTN","gtnName","inputStyle","withDollarSign","labelClassName","isLiveField","onBlur","onAddGTNToDocument","riskDetails","isRiskAnalysisOpen","RiskDetailsCard","placeholder","inputEmphasis","props","ref","t","useTranslation","showRiskSkin","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","isHovered","setIsHovered","useState","handleAddGTNToDocument","_value","jsxs","jsx","cn","InputLabel","BoltOutlined","shouldShowConfidenceScore","AIExtractedIndicator","Label","Tooltip","HelpIcon","getConfidenceScoreBadgeClass","AIStarIcon","getConfidenceScoreBadgeColor","getConfidenceScoreBadgeFill","getConfidenceScoreBadgeTextColor","AntTooltip","NoteAddOutlined","Typography"],"mappings":"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"}
1
+ {"version":3,"file":"PercentageInputField.es.js","sources":["../../../../src/components/forms/percentage-input/PercentageInputField.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport cn from \"classnames\";\nimport { forwardRef, useState } from \"react\";\nimport { Tooltip as AntTooltip } from \"antd\";\nimport { useTranslation } from 'react-i18next';\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { Label } from \"../../data-display/label/Label\";\nimport type { LabelType } from \"../../data-display/label/Label\";\nimport { BoltOutlined, NoteAddOutlined } from \"@mui/icons-material\";\nimport { AIExtractedIndicator } from \"../../icons/AIExtractedIndicator\";\nimport { AIStarIcon } from \"../../icons/AIStarIcon\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\nimport {\n getConfidenceScoreBadgeClass,\n getConfidenceScoreBadgeColor,\n getConfidenceScoreBadgeFill,\n getConfidenceScoreBadgeTextColor,\n shouldShowConfidenceScore,\n} from \"../../../utils/confidenceScoreUtils\";\nimport { InputLabel } from \"../shared/InputLabel\";\n\n/**\n * Confidence score type\n */\nexport type ConfidenceScoreType = \"low\" | \"medium\" | \"high\";\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 for risk analysis integration\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 - generic to allow consumer-specific risk types\n */\nexport interface RiskDetailsCardProps<T = any> {\n riskDetails: T;\n maxWidth?: string;\n showAllRisksSuggestions?: boolean;\n}\n\n/** Visual emphasis for the input surface (background + border) */\nexport type PercentageInputFieldEmphasis =\n | \"default\"\n | \"modified\"\n | \"deleted\"\n | \"success\";\n\n/**\n * Props for the PercentageInputField component\n */\nexport interface PercentageInputFieldProps {\n /** Unique identifier for the input */\n id: string;\n /** Label text to display above the input */\n label?: string;\n /** Optional extra content in the label row (e.g. actions, badges) */\n labelExtra?: React.ReactNode;\n /** Current value of the input */\n value: string;\n /** Callback function called when value changes */\n onChange: (data: any) => void;\n /** Error message to display below the input */\n errorMessage?: string;\n /** Default value for the input */\n defaultValue?: string;\n /** Whether the input is disabled */\n disabled?: boolean;\n /** Maximum value allowed */\n max?: number;\n /** Minimum value allowed */\n min?: number;\n /** Whether the field is required */\n required?: boolean;\n /** Whether the required indicator shows as conditional (yellow instead of red) */\n isRequiredConditional?: boolean;\n /** Background color class */\n bg?: string;\n /** Tags/labels to display next to the label */\n tags?: (string | LabelType)[];\n /** Text color class */\n color?: string;\n /** Additional CSS classes for the wrapper */\n className?: string;\n /** Whether to preserve original case in the label */\n originalCase?: boolean;\n /** Tooltip text for the help icon */\n tooltip?: string;\n /** Whether to use simple mode (inline label style) */\n simpleMode?: boolean;\n /** Additional CSS classes for the input field */\n inputFieldClassName?: string;\n /** Whether the value was AI extracted */\n isAiExtracted?: boolean;\n /** Confidence percentage shown as a badge */\n confidenceScore?: number;\n /** Confidence classification for badge styling */\n confidenceType?: ConfidenceScoreType;\n /** Optional tooltip content for confidence badge */\n confidenceTooltip?: React.ReactNode;\n /** Source meta for confidence score */\n sourceMeta?: SourceMetaItem[];\n /** Handler fired when confidence score badge is clicked */\n onConfidenceScoreClick?: (sourceMeta: SourceMetaItem[]) => void;\n /** Whether this is a GTN (Global Term Name) field */\n isGTN?: boolean;\n /** GTN field name for document integration */\n gtnName?: any;\n /** Inline styles for the input element */\n inputStyle?: React.CSSProperties;\n /** Whether to show dollar sign (for simpleMode) */\n withDollarSign?: boolean;\n /** Additional CSS classes for the label */\n labelClassName?: string;\n /** Whether this is a live field */\n isLiveField?: boolean;\n /** Callback function called when input loses focus */\n onBlur?: () => void;\n /** Handler for adding GTN to document */\n onAddGTNToDocument?: (keyValuePair: { key: string; value: string }) => void;\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<any>>;\n /** Input placeholder */\n placeholder?: string\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?: PercentageInputFieldEmphasis;\n}\n\n/**\n * A highly customizable percentage input component with label, validation, and styling support.\n * Features GTN integration, risk analysis support, AI extraction indicator, and comprehensive prop support.\n *\n * @example\n * ```tsx\n * <PercentageInputField\n * id=\"discount\"\n * label=\"Discount Percentage\"\n * value={discount}\n * onChange={(value) => setDiscount(value)}\n * required\n * />\n * ```\n */\nexport const PercentageInputField = forwardRef<\n HTMLInputElement,\n PercentageInputFieldProps\n>(\n (\n {\n id,\n label,\n labelExtra,\n value,\n onChange,\n errorMessage,\n defaultValue,\n disabled,\n max,\n min,\n required = false,\n isRequiredConditional = false,\n bg,\n tags,\n color,\n className,\n originalCase = false,\n tooltip,\n simpleMode = false,\n inputFieldClassName = \"\",\n isAiExtracted = false,\n confidenceScore,\n confidenceType = \"high\",\n confidenceTooltip,\n sourceMeta = [],\n onConfidenceScoreClick,\n isGTN = false,\n gtnName = null,\n inputStyle,\n withDollarSign = true,\n labelClassName,\n isLiveField = false,\n onBlur,\n onAddGTNToDocument,\n riskDetails,\n isRiskAnalysisOpen = false,\n RiskDetailsCard,\n placeholder,\n inputEmphasis = \"default\",\n ...props\n },\n ref\n ) => {\n const { t } = useTranslation();\n const showRiskSkin = Boolean(isRiskAnalysisOpen && riskDetails?.color);\n const emphasisModifiedSkin =\n inputEmphasis === \"modified\" && !errorMessage && !showRiskSkin;\n const emphasisDeletedSkin =\n inputEmphasis === \"deleted\" && !errorMessage && !showRiskSkin;\n const emphasisSuccessSkin =\n inputEmphasis === \"success\" && !errorMessage && !showRiskSkin;\n const [isHovered, setIsHovered] = useState(false);\n\n const handleAddGTNToDocument = (_value: string) => {\n if (onAddGTNToDocument) {\n const keyValuePair = {\n key: gtnName,\n value: _value,\n };\n onAddGTNToDocument(keyValuePair);\n }\n };\n\n // Simple mode rendering\n if (simpleMode) {\n return (\n <label\n id={id}\n className={`mb-1 text-xs font-medium text-gray-600 dark:text-neutral-200 inline-flex items-center gap-1 ${\n !originalCase ? \"capitalize\" : \"\"\n } ${labelClassName || \"\"}`}\n >\n {withDollarSign && (\n <span className=\"absolute inset-y-0 left-1 flex items-center pl-3\">\n {\"$\"}\n </span>\n )}\n <input\n {...props}\n ref={ref}\n onBlur={onBlur}\n type=\"number\"\n required={required}\n className={cn(inputFieldClassName, \"pl-8 h-8\")}\n onChange={(e) => {\n onChange(e.target.value);\n }}\n value={value}\n {...(defaultValue && !value ? { defaultValue: defaultValue } : {})}\n id={id || label}\n style={inputStyle}\n autoComplete=\"off\"\n />\n </label>\n );\n }\n\n // Full mode rendering\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\"\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(\"w-full flex flex-col\", className)}>\n <label\n htmlFor=\"text\"\n className={`mb-1 text-xs font-medium text-gray-600 dark:text-neutral-300 inline-flex items-center gap-1 ${\n !originalCase ? \"uppercase\" : \"\"\n } ${labelClassName || \"\"}`}\n >\n <div className=\"grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-1\">\n <div className=\"inline-flex min-w-0 items-center gap-1 flex-wrap dark:text-black-300\">\n <InputLabel label={label || \"\"} required={required || false} isRequiredConditional={isRequiredConditional || false} />\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 <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 {labelExtra}\n </div>\n\n <div className=\"flex items-center gap-1 justify-self-end\">\n {(shouldShowConfidenceScore(confidenceScore) && confidenceType) ? (\n <Tooltip\n placement=\"top-end\"\n title={confidenceTooltip ?? \"\"}\n hideTooltip={confidenceTooltip === undefined || confidenceTooltip === null}\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 className={cn(\"text-xs font-medium leading-4\", getConfidenceScoreBadgeTextColor(confidenceType))}>\n {confidenceScore}%\n </span>\n </div>\n </Tooltip>\n ) : null}\n {isGTN && isHovered && onAddGTNToDocument ? (\n <button\n id=\"btn-percentage-input-add-to-document\"\n className=\"cursor-pointer\"\n onClick={() => handleAddGTNToDocument(value?.toString())}\n type=\"button\"\n >\n <AntTooltip placement=\"top\" title={t(\"Add to document\")}>\n <NoteAddOutlined\n className=\"text-primary-600\"\n sx={{ fontSize: 16 }}\n />\n </AntTooltip>\n </button>\n ) : null}\n </div>\n </div>\n </label>\n <label className=\"relative block\">\n <input\n {...props}\n ref={ref}\n onBlur={onBlur}\n type=\"number\"\n required={required}\n disabled={disabled}\n min={min}\n max={max}\n className={cn(\n \"h-8 text-gray-900 dark:bg-black-600 dark:text-neutral-200 text-sm rounded-lg focus:outline-none focus:ring-0 block w-full p-2.5 font-inter font-medium placeholder:text-neutral-400 dark:placeholder:text-black-300 disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400\",\n bg,\n errorMessage\n ? \"border border-red-300 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)]\"\n : showRiskSkin && riskDetails?.color\n ? cn(\n `border border-${riskDetails.color}-300 bg-${riskDetails.color}-50`,\n \"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)]\"\n )\n : emphasisDeletedSkin\n ? \"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]\"\n : emphasisModifiedSkin\n ? \"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)]\"\n : emphasisSuccessSkin\n ? \"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]\"\n : \"border border-gray-300 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)]\",\n color || \"\"\n )}\n onChange={(e) => {\n onChange(e.target.value);\n }}\n value={value}\n defaultValue={defaultValue}\n id={id || label}\n style={inputStyle}\n autoComplete=\"off\"\n placeholder={placeholder}\n />\n <span className=\"absolute inset-y-0 right-3 flex items-center z-[1000px] h-full dark:text-black-100\">\n %\n </span>\n </label>\n {errorMessage && (\n <Typography\n className=\"text-error-500 mt-1\"\n appearance=\"custom\"\n size=\"extra-small\"\n variant=\"medium\"\n >\n {errorMessage}\n </Typography>\n )}\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\nPercentageInputField.displayName = \"PercentageInputField\";\n"],"names":["PercentageInputField","forwardRef","id","label","labelExtra","value","onChange","errorMessage","defaultValue","disabled","max","min","required","isRequiredConditional","bg","tags","color","className","originalCase","tooltip","simpleMode","inputFieldClassName","isAiExtracted","confidenceScore","confidenceType","confidenceTooltip","sourceMeta","onConfidenceScoreClick","isGTN","gtnName","inputStyle","withDollarSign","labelClassName","isLiveField","onBlur","onAddGTNToDocument","riskDetails","isRiskAnalysisOpen","RiskDetailsCard","placeholder","inputEmphasis","props","ref","t","useTranslation","showRiskSkin","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","isHovered","setIsHovered","useState","handleAddGTNToDocument","_value","jsxs","jsx","cn","InputLabel","BoltOutlined","shouldShowConfidenceScore","AIExtractedIndicator","Label","Tooltip","HelpIcon","getConfidenceScoreBadgeClass","AIStarIcon","getConfidenceScoreBadgeColor","getConfidenceScoreBadgeFill","getConfidenceScoreBadgeTextColor","AntTooltip","NoteAddOutlined","Typography"],"mappings":";;;;;;;;;;;;;;AA4KO,MAAMA,KAAuBC;AAAA,EAIlC,CACE;AAAA,IACE,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,KAAAC;AAAA,IACA,KAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,uBAAAC,IAAwB;AAAA,IACxB,IAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,SAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,qBAAAC,IAAsB;AAAA,IACtB,eAAAC,IAAgB;AAAA,IAChB,iBAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,mBAAAC;AAAA,IACA,YAAAC,IAAa,CAAA;AAAA,IACb,wBAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,SAAAC,IAAU;AAAA,IACV,YAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,gBAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,QAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,oBAAAC,IAAqB;AAAA,IACrB,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAM,EAAE,GAAAC,EAAA,IAAMC,GAAA,GACRC,IAAe,GAAQR,KAAsBD,GAAa,QAC1DU,IACJN,MAAkB,cAAc,CAACjC,KAAgB,CAACsC,GAC9CE,IACJP,MAAkB,aAAa,CAACjC,KAAgB,CAACsC,GAC7CG,IACJR,MAAkB,aAAa,CAACjC,KAAgB,CAACsC,GAC7C,CAACI,GAAWC,CAAY,IAAIC,GAAS,EAAK,GAE1CC,KAAyB,CAACC,MAAmB;AACjD,MAAIlB,KAKFA,EAJqB;AAAA,QACnB,KAAKN;AAAA,QACL,OAAOwB;AAAA,MAAA,CAEsB;AAAA,IAEnC;AAGA,WAAIjC,IAEA,gBAAAkC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAApD;AAAA,QACA,WAAW,+FACRgB,IAA8B,KAAf,YAClB,IAAIc,KAAkB,EAAE;AAAA,QAEvB,UAAA;AAAA,UAAAD,KACC,gBAAAwB,EAAC,QAAA,EAAK,WAAU,oDACb,UAAA,KACH;AAAA,UAEF,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAGd;AAAA,cACJ,KAAAC;AAAA,cACA,QAAAR;AAAA,cACA,MAAK;AAAA,cACL,UAAAtB;AAAA,cACA,WAAW4C,EAAGnC,GAAqB,UAAU;AAAA,cAC7C,UAAU,CAAC,MAAM;AACf,gBAAAf,EAAS,EAAE,OAAO,KAAK;AAAA,cACzB;AAAA,cACA,OAAAD;AAAA,cACC,GAAIG,KAAgB,CAACH,IAAQ,EAAE,cAAAG,EAAA,IAA+B,CAAA;AAAA,cAC/D,IAAIN,KAAMC;AAAA,cACV,OAAO2B;AAAA,cACP,cAAa;AAAA,YAAA;AAAA,UAAA;AAAA,QACf;AAAA,MAAA;AAAA,IAAA,IAOJ,gBAAAwB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWE;AAAA,UACT;AAAA,UACAP,KAAarB,IACT,2DACA;AAAA,QAAA;AAAA,QAEN,cAAc,MAAMsB,EAAa,EAAI;AAAA,QACrC,cAAc,MAAMA,EAAa,EAAK;AAAA,QAErC,UAAA;AAAA,UAAAtB,KAAS,CAACqB,IACT,gBAAAM,EAAC,OAAA,EAAI,WAAU,4DAA2D,IACxE;AAAA,4BACH,OAAA,EAAI,WAAWC,EAAG,wBAAwBvC,CAAS,GAClD,UAAA;AAAA,YAAA,gBAAAsC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,WAAW,+FACRrC,IAA6B,KAAd,WAClB,IAAIc,KAAkB,EAAE;AAAA,gBAExB,UAAA,gBAAAsB,EAAC,OAAA,EAAI,WAAU,kEACb,UAAA;AAAA,kBAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,wEACf,UAAA;AAAA,oBAAA,gBAAAC,EAACE,IAAA,EAAW,OAAOtD,KAAS,IAAI,UAAUS,KAAY,IAAO,uBAAuBC,KAAyB,GAAA,CAAO;AAAA,oBACjHoB,KACC,gBAAAsB;AAAA,sBAACG;AAAA,sBAAA;AAAA,wBACC,IAAI;AAAA,0BACF,UAAU;AAAA,0BACV,OAAO;AAAA,0BACP,QAAQ;AAAA,wBAAA;AAAA,sBACV;AAAA,oBAAA;AAAA,oBAGHpC,KAAiB,CAACqC,EAA0BpC,CAAe,uBAAMqC,IAAA,EAAqB;AAAA,oBACvF,gBAAAL,EAACM,IAAA,EAAM,QAAQ9C,EAAA,CAAM;AAAA,oBACpBI,KACC,gBAAAoC,EAACO,GAAA,EAAQ,WAAU,OAAM,OAAO3C,GAC9B,UAAA,gBAAAoC,EAAC,OAAA,EAAI,WAAU,kBACb,UAAA,gBAAAA,EAACQ,IAAA,EAAS,WAAU,sBAAA,CAAsB,GAC5C,GACF;AAAA,oBAED3D;AAAA,kBAAA,GACH;AAAA,kBAEA,gBAAAkD,EAAC,OAAA,EAAI,WAAU,4CACX,UAAA;AAAA,oBAAAK,EAA0BpC,CAAe,KAAKC,IAC9C,gBAAA+B;AAAA,sBAACO;AAAA,sBAAA;AAAA,wBACC,WAAU;AAAA,wBACV,OAAOrC,KAAqB;AAAA,wBAC5B,aAAgDA,KAAsB;AAAA,wBACtE,WAAU;AAAA,wBAEV,UAAA,gBAAA6B;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,WAAWE;AAAA,8BACT;AAAA,8BACAQ,GAA6BxC,CAAc;AAAA,4BAAA;AAAA,4BAE3C,SAAS,MAAMG,IAAyBD,CAAU;AAAA,4BAEpD,UAAA;AAAA,8BAAA,gBAAA6B;AAAA,gCAACU;AAAA,gCAAA;AAAA,kCACC,MAAM;AAAA,kCACN,MAAMC,GAA6B1C,CAAc;AAAA,kCACjD,eAAe2C,GAA4B3C,CAAc;AAAA,gCAAA;AAAA,8BAAA;AAAA,8BAE3D,gBAAA8B,EAAC,UAAK,WAAWE,EAAG,iCAAiCY,GAAiC5C,CAAc,CAAC,GAClG,UAAA;AAAA,gCAAAD;AAAA,gCAAgB;AAAA,8BAAA,EAAA,CACnB;AAAA,4BAAA;AAAA,0BAAA;AAAA,wBAAA;AAAA,sBACF;AAAA,oBAAA,IAEA;AAAA,oBACHK,KAASqB,KAAad,IACrB,gBAAAoB;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,IAAG;AAAA,wBACH,WAAU;AAAA,wBACV,SAAS,MAAMH,GAAuB/C,GAAO,UAAU;AAAA,wBACvD,MAAK;AAAA,wBAEL,4BAACgE,IAAA,EAAW,WAAU,OAAM,OAAO1B,EAAE,iBAAiB,GACpD,UAAA,gBAAAY;AAAA,0BAACe;AAAA,0BAAA;AAAA,4BACC,WAAU;AAAA,4BACV,IAAI,EAAE,UAAU,GAAA;AAAA,0BAAG;AAAA,wBAAA,EACrB,CACF;AAAA,sBAAA;AAAA,oBAAA,IAEA;AAAA,kBAAA,EAAA,CACN;AAAA,gBAAA,EAAA,CACF;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,gBAAAhB,EAAC,SAAA,EAAM,WAAU,kBACf,UAAA;AAAA,cAAA,gBAAAC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACE,GAAGd;AAAA,kBACJ,KAAAC;AAAA,kBACA,QAAAR;AAAA,kBACA,MAAK;AAAA,kBACL,UAAAtB;AAAA,kBACA,UAAAH;AAAA,kBACA,KAAAE;AAAA,kBACA,KAAAD;AAAA,kBACA,WAAW8C;AAAA,oBACT;AAAA,oBACA1C;AAAA,oBACAP,IACI,4NACAsC,KAAgBT,GAAa,QAC3BoB;AAAA,sBACE,iBAAiBpB,EAAY,KAAK,WAAWA,EAAY,KAAK;AAAA,sBAC9D;AAAA,oBAAA,IAEFW,IACE,+RACAD,IACE,ySACAE,IACE,ySACA;AAAA,oBACZhC,KAAS;AAAA,kBAAA;AAAA,kBAEX,UAAU,CAAC,MAAM;AACf,oBAAAV,EAAS,EAAE,OAAO,KAAK;AAAA,kBACzB;AAAA,kBACA,OAAAD;AAAA,kBACA,cAAAG;AAAA,kBACA,IAAIN,KAAMC;AAAA,kBACV,OAAO2B;AAAA,kBACP,cAAa;AAAA,kBACb,aAAAS;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEF,gBAAAgB,EAAC,QAAA,EAAK,WAAU,sFAAqF,UAAA,IAAA,CAErG;AAAA,YAAA,GACF;AAAA,YACChD,KACC,gBAAAgD;AAAA,cAACgB;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,YAAW;AAAA,gBACX,MAAK;AAAA,gBACL,SAAQ;AAAA,gBAEP,UAAAhE;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,GAEJ;AAAA,UAEC0C,KACCb,KACAC,KACAC,KACE,gBAAAiB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAU;AAAA,cACV,WAAU;AAAA,cACV,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,cAClB,aAAa,CAAC,MAAM,EAAE,eAAA;AAAA,cACtB,WAAW,CAAC,MAAM;AAChB,gBAAI,EAAE,QAAQ,YACZL,EAAa,EAAK;AAAA,cAEtB;AAAA,cAEA,UAAA,gBAAAK,EAACjB,KAAgB,aAAAF,EAAA,CAA0B;AAAA,YAAA;AAAA,UAAA;AAAA,QAC7C;AAAA,MAAA;AAAA,IAAA;AAAA,EAIV;AACF;AAEApC,GAAqB,cAAc;"}
package/dist/components/forms/text-area-field/TextAreaField.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("../../../_virtual/index.cjs.js"),q=require("react"),B=require("antd"),oe=require("react-i18next"),I=require("../../data-display/typography/Typography.cjs.js"),le=require("../../icons/HelpIcon.cjs.js"),ne=require("../../data-display/label/Label.cjs.js"),D=require("@mui/icons-material"),se=require("../../icons/AIExtractedIndicator.cjs.js"),de=require("../../icons/AIStarIcon.cjs.js"),ce=require("../shared/InputLabel.cjs.js"),ie=require("../../tooltip/Tooltip.cjs.js"),n=require("../../../utils/confidenceScoreUtils.cjs.js"),z=q.forwardRef(({label:K,placeholder:W,value:s,onChange:T,row:$=4,errorMessage:t,defaultValue:H,required:k,isRequiredConditional:P=!1,tags:R=[],disabled:d,className:O,inputRef:V,maxLength:l=void 0,tooltip:y="",originalCase:L=!1,isAiExtracted:U=!1,confidenceScore:m,confidenceType:c="high",confidenceTooltip:f,sourceMeta:J=[],onConfidenceScoreClick:Q,isGTN:p=!1,gtnName:X="",noBorder:j=!1,id:w,inputStyle:S,labelClassName:Y,isLiveField:Z=!1,onBlur:M,riskDetails:a,isRiskAnalysisOpen:C=!1,RiskDetailsCard:E,onAddGTNToDocument:_,labelExtra:G,inputEmphasis:g="default",...N},ee)=>{const{t:re}=oe.useTranslation(),[b,h]=q.useState(!1),o=!!(C&&a?.color),v=g==="modified"&&!t&&!o,i=g==="deleted"&&!t&&!o,u=g==="success"&&!t&&!o,te=r=>{if(r.key==="Enter"&&!r.shiftKey){r.preventDefault();const F=r.target.closest("form");if(F){const A=F.querySelector('button[type="submit"]');A?A.click():F.requestSubmit()}}N.onKeyDown?.(r)},ae=()=>{_&&_({key:X,value:s||""})};return e.jsxs("div",{ref:ee,id:w,className:x("flex gap-0.5 relative",b&&p?"border rounded-lg border-primary-100 bg-primary-50 p-1":""),onMouseEnter:()=>h(!0),onMouseLeave:()=>h(!1),children:[p&&!b?e.jsx("div",{className:"w-1 h-1 bg-primary-600 rounded-full animate-blink mt-1.5"}):null,e.jsxs("div",{className:x("w-full flex flex-col"),children:[e.jsx("label",{htmlFor:"text",className:`mb-1 text-xs font-medium text-gray-600 dark:text-black-300 inline-flex items-center gap-1 ${L?"":"capitalize"} ${Y||""}`,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(ce.InputLabel,{label:K||"",required:k||!1,isRequiredConditional:P||!1}),Z&&e.jsx(D.BoltOutlined,{sx:{fontSize:16,color:"var(--color-primary-600)",rotate:"15deg"}}),U&&!n.shouldShowConfidenceScore(m)&&e.jsx(se.AIExtractedIndicator,{}),e.jsx(ne.Label,{labels:R||[]}),y&&e.jsx(B.Tooltip,{placement:"top",title:y,children:e.jsx("div",{className:"cursor-pointer",role:"button",tabIndex:0,onKeyDown:r=>{(r.key==="Enter"||r.key===" ")&&r.preventDefault()},children:e.jsx(le.HelpIcon,{className:"w-icon-sm h-icon-sm"})})}),G]}),e.jsxs("div",{className:"flex items-center gap-1 justify-self-end",children:[n.shouldShowConfidenceScore(m)&&c?e.jsx(ie,{placement:"top-end",title:f??"",hideTooltip:f==null,className:"cursor-pointer",children:e.jsxs("div",{className:x("inline-flex min-w-[50px] items-center gap-1 rounded-md px-1 py-0.5",n.getConfidenceScoreBadgeClass(c)),onClick:()=>Q?.(J),children:[e.jsx(de.AIStarIcon,{size:12,fill:n.getConfidenceScoreBadgeColor(c),fillSecondary:n.getConfidenceScoreBadgeFill(c)}),e.jsxs("span",{className:x("text-xs font-medium leading-4",n.getConfidenceScoreBadgeTextColor(c)),children:[m,"%"]})]})}):null,p&&b?e.jsx("button",{id:"btn-textarea-field-add-to-document",className:"cursor-pointer",onClick:ae,type:"button",children:e.jsx(B.Tooltip,{placement:"top",title:re("Add to document"),children:e.jsx(D.NoteAddOutlined,{className:"text-primary-600",sx:{fontSize:16}})})}):null]})]})}),e.jsx("textarea",{...N,onKeyDown:te,onBlur:M,onChange:r=>T(r.target.value),defaultValue:H,value:s,required:k,className:x("border rounded-lg focus:outline-none focus:ring-0 block w-full py-2.5 px-3 font-inter font-medium text-sm disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400",{"border-red-300":t,"border-gray-300 dark:border-black-700":!t&&!v&&!i&&!u&&!o,"text-neutral-400 dark:text-neutral-500":d&&!i&&!u,"text-neutral-900 dark:text-neutral-50":!d&&!i&&!u,"border-none":j,"focus:border-none":j,"placeholder:text-neutral-400 dark:placeholder:text-black-400":d,"placeholder:text-neutral-400 dark:placeholder:text-black-300":!d,"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)] bg-white dark:bg-black-600":!v&&!i&&!u&&!o&&!t},i&&"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)]",v&&"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)]",u&&"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)]",O,o&&`!bg-${a.color}-50 border-${a.color}-300`),style:o&&a?{backgroundColor:a.hexBgColor||void 0,borderColor:a.hexBorderColor||void 0,...S}:S,rows:$,placeholder:W,disabled:d,maxLength:l||void 0,id:w,ref:V,onClick:r=>r.stopPropagation(),autoComplete:"off"}),l?e.jsxs(I.Typography,{className:"mt-0.5 text-right text-neutral-900 dark:text-white",appearance:"custom",size:"extra-small",children:[e.jsxs("span",{className:`${s?.length>=l?"text-error-500":s?.length>l-Math.min(50,l/5)?"text-warning-500 dark:text-warning-300":""}`,children:[s?.length||0," "]}),"/ ",l]}):null,t&&e.jsx(I.Typography,{className:"text-error-500 mt-1",appearance:"custom",size:"extra-small",variant:"medium",children:t})]}),b&&C&&a&&E&&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"&&h(!1)},children:e.jsx(E,{riskDetails:a})})]})});z.displayName="TextAreaField";exports.TextAreaField=z;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("../../../_virtual/index.cjs.js"),q=require("react"),B=require("antd"),oe=require("react-i18next"),I=require("../../data-display/typography/Typography.cjs.js"),le=require("../../icons/HelpIcon.cjs.js"),se=require("../../data-display/label/Label.cjs.js"),D=require("@mui/icons-material"),ne=require("../../icons/AIExtractedIndicator.cjs.js"),de=require("../../icons/AIStarIcon.cjs.js"),ce=require("../shared/InputLabel.cjs.js"),ie=require("../../tooltip/Tooltip.cjs.js"),s=require("../../../utils/confidenceScoreUtils.cjs.js"),z=q.forwardRef(({label:K,placeholder:W,value:n,onChange:T,row:$=4,errorMessage:t,defaultValue:H,required:k,isRequiredConditional:P=!1,tags:R=[],disabled:b,className:O,inputRef:V,maxLength:l=void 0,tooltip:y="",originalCase:L=!1,isAiExtracted:U=!1,confidenceScore:m,confidenceType:d="high",confidenceTooltip:f,sourceMeta:J=[],onConfidenceScoreClick:Q,isGTN:p=!1,gtnName:X="",noBorder:j=!1,id:w,inputStyle:S,labelClassName:Y,isLiveField:Z=!1,onBlur:M,riskDetails:a,isRiskAnalysisOpen:C=!1,RiskDetailsCard:E,onAddGTNToDocument:_,labelExtra:G,inputEmphasis:g="default",...N},ee)=>{const{t:re}=oe.useTranslation(),[x,h]=q.useState(!1),o=!!(C&&a?.color),v=g==="modified"&&!t&&!o,c=g==="deleted"&&!t&&!o,i=g==="success"&&!t&&!o,te=r=>{if(r.key==="Enter"&&!r.shiftKey){r.preventDefault();const F=r.target.closest("form");if(F){const A=F.querySelector('button[type="submit"]');A?A.click():F.requestSubmit()}}N.onKeyDown?.(r)},ae=()=>{_&&_({key:X,value:n||""})};return e.jsxs("div",{ref:ee,id:w,className:u("flex gap-0.5 relative",x&&p?"border rounded-lg border-primary-100 bg-primary-50 p-1":""),onMouseEnter:()=>h(!0),onMouseLeave:()=>h(!1),children:[p&&!x?e.jsx("div",{className:"w-1 h-1 bg-primary-600 rounded-full animate-blink mt-1.5"}):null,e.jsxs("div",{className:u("w-full flex flex-col"),children:[e.jsx("label",{htmlFor:"text",className:`mb-1 text-xs font-medium text-gray-600 dark:text-black-300 inline-flex items-center gap-1 ${L?"":"capitalize"} ${Y||""}`,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(ce.InputLabel,{label:K||"",required:k||!1,isRequiredConditional:P||!1}),Z&&e.jsx(D.BoltOutlined,{sx:{fontSize:16,color:"var(--color-primary-600)",rotate:"15deg"}}),U&&!s.shouldShowConfidenceScore(m)&&e.jsx(ne.AIExtractedIndicator,{}),e.jsx(se.Label,{labels:R||[]}),y&&e.jsx(B.Tooltip,{placement:"top",title:y,children:e.jsx("div",{className:"cursor-pointer",role:"button",tabIndex:0,onKeyDown:r=>{(r.key==="Enter"||r.key===" ")&&r.preventDefault()},children:e.jsx(le.HelpIcon,{className:"w-icon-sm h-icon-sm"})})}),G]}),e.jsxs("div",{className:"flex items-center gap-1 justify-self-end",children:[s.shouldShowConfidenceScore(m)&&d?e.jsx(ie,{placement:"top-end",title:f??"",hideTooltip:f==null,className:"cursor-pointer",children:e.jsxs("div",{className:u("inline-flex min-w-[50px] items-center gap-1 rounded-md px-1 py-0.5",s.getConfidenceScoreBadgeClass(d)),onClick:()=>Q?.(J),children:[e.jsx(de.AIStarIcon,{size:12,fill:s.getConfidenceScoreBadgeColor(d),fillSecondary:s.getConfidenceScoreBadgeFill(d)}),e.jsxs("span",{className:u("text-xs font-medium leading-4",s.getConfidenceScoreBadgeTextColor(d)),children:[m,"%"]})]})}):null,p&&x?e.jsx("button",{id:"btn-textarea-field-add-to-document",className:"cursor-pointer",onClick:ae,type:"button",children:e.jsx(B.Tooltip,{placement:"top",title:re("Add to document"),children:e.jsx(D.NoteAddOutlined,{className:"text-primary-600",sx:{fontSize:16}})})}):null]})]})}),e.jsx("textarea",{...N,onKeyDown:te,onBlur:M,onChange:r=>T(r.target.value),defaultValue:H,value:n,required:k,className:u("border rounded-lg focus:outline-none focus:ring-0 block w-full py-2.5 px-3 font-inter font-medium text-sm disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400",{"border-red-300":t,"border-gray-300 dark:border-black-700":!t&&!v&&!c&&!i&&!o,"text-neutral-400 dark:text-neutral-500":b&&!c&&!i,"text-neutral-900 dark:text-neutral-50":!b&&!c&&!i,"border-none":j,"focus:border-none":j,"placeholder:text-neutral-400 dark:placeholder:text-black-300":!0,"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)] bg-white dark:bg-black-600":!v&&!c&&!i&&!o&&!t},c&&"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)]",v&&"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)]",i&&"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)]",O,o&&`!bg-${a.color}-50 border-${a.color}-300`),style:o&&a?{backgroundColor:a.hexBgColor||void 0,borderColor:a.hexBorderColor||void 0,...S}:S,rows:$,placeholder:W,disabled:b,maxLength:l||void 0,id:w,ref:V,onClick:r=>r.stopPropagation(),autoComplete:"off"}),l?e.jsxs(I.Typography,{className:"mt-0.5 text-right text-neutral-900 dark:text-white",appearance:"custom",size:"extra-small",children:[e.jsxs("span",{className:`${n?.length>=l?"text-error-500":n?.length>l-Math.min(50,l/5)?"text-warning-500 dark:text-warning-300":""}`,children:[n?.length||0," "]}),"/ ",l]}):null,t&&e.jsx(I.Typography,{className:"text-error-500 mt-1",appearance:"custom",size:"extra-small",variant:"medium",children:t})]}),x&&C&&a&&E&&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"&&h(!1)},children:e.jsx(E,{riskDetails:a})})]})});z.displayName="TextAreaField";exports.TextAreaField=z;
2
2
  //# sourceMappingURL=TextAreaField.cjs.js.map