@lax-wp/design-system 0.13.29 → 0.13.33-beta.0

package/dist/components/forms/dynamic-data-input/DynamicDataInputField.es.js

@@ -39,21 +39,21 @@ const Ie = ie(
     sourceMeta: X = [],
     onConfidenceScoreClick: Y,
     labelClassName: Z,
-    disabled: S = !1,
+    disabled: $ = !1,
     isLiveField: W = !1,
     onAddGTNToDocument: h,
     riskDetails: r,
     isRiskAnalysisOpen: y = !1,
-    RiskDetailsCard: $,
+    RiskDetailsCard: S,
     primaryColorShades: T,
-    isRecording: Se = !1,
-    isPlaying: $e = !1,
-    setDisableActions: z,
-    showDeprecatedFieldWarning: R,
+    isRecording: $e = !1,
+    isPlaying: Se = !1,
+    setDisableActions: R,
+    showDeprecatedFieldWarning: z,
     DynamicDataModal: B
   }, G) => {
     const { t: ee } = de(), [f, k] = C(!1), [i, s] = C(o), [a, E] = C(!1), P = se(null), V = G || P, D = () => {
-      z?.(!a), E(!a);
+      R?.(!a), E(!a);
     }, te = (t) => {
       if (t.keyCode === 9 || t.key === "Enter") {
         const c = V.current || P.current;
@@ -67,12 +67,12 @@ const Ie = ie(
         value: t
       });
     }, ae = () => {
-      const t = "border h-[32px] text-sm rounded-lg block w-full p-2.5 font-inter font-medium", c = m ? "border-red-300" : y && r?.color ? `border-${r?.color}-300` : "border-gray-300 dark:border-black-600", oe = "placeholder:text-neutral-900 dark:placeholder:text-black-400", ne = `${y && r?.color ? `bg-${r?.color}-50` : "bg-gray-200 dark:bg-black-600 "} ${w || "text-neutral-900 dark:text-black-200"}`;
+      const t = "border h-8 text-sm rounded-lg block w-full p-2.5 font-inter font-medium", c = m ? "border-red-300" : y && r?.color ? `border-${r?.color}-300` : "border-gray-300 dark:border-black-600", oe = "placeholder:text-neutral-900 dark:placeholder:text-black-400", ne = `${y && r?.color ? `bg-${r?.color}-50` : "bg-gray-200 dark:bg-black-600 "} ${w || "text-neutral-900 dark:text-black-200"}`;
       return `${t} ${c} ${ne} ${oe}`;
     };
     return j(() => {
-      a && !p && (R?.(), E(!1));
-    }, [a, p, R]), j(() => {
+      a && !p && (z?.(), E(!1));
+    }, [a, p, z]), j(() => {
       s(o);
     }, [o]), /* @__PURE__ */ l(
       "div",
@@ -190,12 +190,11 @@ const Ie = ie(
                   onClick: le,
                   className: "absolute inset-y-0 right-1 flex items-center px-2 focus:border-transparent",
                   variant: "ghost",
-                  disabled: S,
+                  disabled: $,
                   children: /* @__PURE__ */ e(
                     be,
                     {
-                      className: "text-neutral-900 dark:text-black-300",
-                      sx: { fontSize: 16 }
+                      className: "text-neutral-900 dark:text-black-300 w-xs h-xs"
                     }
                   )
                 }
@@ -207,12 +206,11 @@ const Ie = ie(
                   onClick: D,
                   className: "absolute inset-y-0 right-8 flex items-center px-2 focus:border-transparent",
                   variant: "ghost",
-                  disabled: S,
+                  disabled: $,
                   children: /* @__PURE__ */ e(
                     xe,
                     {
-                      className: "text-neutral-900 dark:text-black-300",
-                      sx: { fontSize: 16 }
+                      className: "text-neutral-900 dark:text-black-300 w-xs h-xs"
                     }
                   )
                 }
@@ -241,7 +239,7 @@ const Ie = ie(
               }
             )
           ] }),
-          f && r && y && $ && /* @__PURE__ */ e(
+          f && r && y && S && /* @__PURE__ */ e(
             "div",
             {
               role: "tooltip",
@@ -252,7 +250,7 @@ const Ie = ie(
               onKeyDown: (t) => {
                 t.key === "Escape" && k(!1);
               },
-              children: /* @__PURE__ */ e($, { riskDetails: r })
+              children: /* @__PURE__ */ e(S, { riskDetails: r })
             }
           )
         ]

package/dist/components/forms/dynamic-data-input/DynamicDataInputField.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicDataInputField.es.js","sources":["../../../../src/components/forms/dynamic-data-input/DynamicDataInputField.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport cn from \"classnames\";\nimport { forwardRef, useEffect, useRef, 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, CloseRounded, NoteAddOutlined, TableChartRounded } 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 IconButton from \"../../button/IconButton\";\nimport { InputLabel } from \"../shared/InputLabel\";\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\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/**\n * Props for the DynamicDataModal component\n */\nexport interface DynamicDataModalProps {\n  isVisible: boolean;\n  onSelect: (data: string | number | readonly string[] | undefined) => void;\n  onClose: () => void;\n  dataKey: string;\n  dataSource: string;\n}\n\n/**\n * Props for the DynamicDataInputField component\n */\nexport interface DynamicDataInputFieldProps {\n  /** Unique identifier for the input */\n  id: string;\n  /** Label text to display above the input */\n  label: string;\n  /** Placeholder text for the input */\n  placeholder?: string;\n  /** Color for the input text */\n  color?: string;\n  /** Current value of the input */\n  value: string | number | readonly string[] | undefined;\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  /** Tags/labels to display next to the label */\n  tags?: (string | LabelType)[];\n  /** Error message to display below the input */\n  errorMessage?: string;\n  /** Default value for the input */\n  defaultValue?: string | number | readonly string[] | undefined;\n  /** Data source for dynamic data */\n  dataSource: string;\n  /** Data key for dynamic data */\n  dataKey: string;\n  /** Tooltip text for the help icon */\n  tooltip?: string;\n  /** Whether this is a GTN (Global Term Name) field */\n  isGTN?: boolean;\n  /** GTN field name for document integration */\n  gtnName?: 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 the input is disabled */\n  disabled?: boolean;\n  /** Callback function called when value changes */\n  onChange: (value: string | number | readonly string[] | undefined) => void;\n  /** Additional CSS classes for the label */\n  labelClassName?: string;\n  /** Whether this is a live field */\n  isLiveField?: boolean;\n  /** Whether to preserve original case in the label */\n  originalCase?: boolean;\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  /** Primary color shades for styling */\n  primaryColorShades?: Record<number, string>;\n  /** Whether recording is active (for pilot context) */\n  isRecording?: boolean;\n  /** Whether playback is active (for pilot context) */\n  isPlaying?: boolean;\n  /** Callback to set disable actions state */\n  setDisableActions?: (disabled: boolean) => void;\n  /** Toast function for deprecated field warning */\n  showDeprecatedFieldWarning?: () => void;\n  /** Dynamic data modal component */\n  DynamicDataModal?: React.ComponentType<DynamicDataModalProps>;\n}\n\n/**\n * A highly customizable dynamic data input component with label, validation, and styling support.\n * Features dynamic data modal integration, GTN support, risk analysis support,\n * and comprehensive prop support for various use cases.\n *\n * @example\n * ```tsx\n * <DynamicDataInputField\n *   id=\"dynamic-field\"\n *   label=\"Dynamic Field\"\n *   value={fieldValue}\n *   onChange={(value) => setFieldValue(value)}\n *   dataSource=\"sourceTable\"\n *   dataKey=\"fieldKey\"\n *   required\n * />\n * ```\n */\nexport const DynamicDataInputField = forwardRef<\n  HTMLInputElement,\n  DynamicDataInputFieldProps\n>(\n  (\n    {\n      id,\n      label,\n      placeholder,\n      value,\n      onChange,\n      errorMessage,\n      defaultValue,\n      required = false,\n      isRequiredConditional = false,\n      dataSource,\n      dataKey,\n      tags,\n      tooltip = \"\",\n      originalCase = false,\n      color = \"\",\n      isGTN = false,\n      gtnName,\n      isAiExtracted = false,\n      confidenceScore,\n      confidenceType = \"high\",\n      confidenceTooltip,\n      sourceMeta = [],\n      onConfidenceScoreClick,\n      labelClassName,\n      disabled = false,\n      isLiveField = false,\n      onAddGTNToDocument,\n      riskDetails,\n      isRiskAnalysisOpen = false,\n      RiskDetailsCard,\n      primaryColorShades,\n      isRecording: _isRecording = false,\n      isPlaying: _isPlaying = false,\n      setDisableActions,\n      showDeprecatedFieldWarning,\n      DynamicDataModal,\n    },\n    ref\n  ) => {\n    const { t } = useTranslation();\n    const [isHovered, setIsHovered] = useState(false);\n    const [inputValue, setInputValue] = useState<\n      string | number | readonly string[] | undefined\n    >(value);\n    const [showDynamicDataModal, setShowDynamicDataModal] = useState(false);\n\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // Use forwarded ref or internal ref\n    const combinedRef = (ref as React.RefObject<HTMLInputElement>) || inputRef;\n\n    const toggleDynamicDataModal = () => {\n      if (showDynamicDataModal) {\n        setDisableActions?.(false);\n      } else {\n        setDisableActions?.(true);\n      }\n      setShowDynamicDataModal(!showDynamicDataModal);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.keyCode === 9 || event.key === \"Enter\") {\n        const currentRef = combinedRef.current || inputRef.current;\n        if (currentRef) {\n          if (inputValue !== null) {\n            onChange(inputValue);\n          }\n          setInputValue(inputValue);\n          currentRef.blur();\n        }\n      }\n    };\n\n    const handleClear = () => {\n      setInputValue(\"\");\n      onChange(\"\");\n    };\n\n    const handleAddGTNToDocument = (_value: string) => {\n      if (onAddGTNToDocument && gtnName) {\n        const keyValuePair = {\n          key: gtnName,\n          value: _value,\n        };\n        onAddGTNToDocument(keyValuePair);\n      }\n    };\n\n    const getClassName = (): string => {\n      const baseClasses =\n        \"border h-[32px] text-sm rounded-lg block w-full p-2.5 font-inter font-medium\";\n      const borderColor = errorMessage\n        ? \"border-red-300\"\n        : isRiskAnalysisOpen && riskDetails?.color\n        ? `border-${riskDetails?.color}-300`\n        : \"border-gray-300 dark:border-black-600\";\n      const placeholderColor = `placeholder:text-neutral-900 dark:placeholder:text-black-400`;\n      const backgroundColor = `${\n        isRiskAnalysisOpen && riskDetails?.color\n          ? `bg-${riskDetails?.color}-50`\n          : \"bg-gray-200 dark:bg-black-600 \"\n      } ${color ? color : \"text-neutral-900 dark:text-black-200\"}`;\n\n      return `${baseClasses} ${borderColor} ${backgroundColor} ${placeholderColor}`;\n    };\n\n    useEffect(() => {\n      if (showDynamicDataModal && !dataSource) {\n        showDeprecatedFieldWarning?.();\n        setShowDynamicDataModal(false);\n      }\n    }, [showDynamicDataModal, dataSource, showDeprecatedFieldWarning]);\n\n    // Sync inputValue with value prop\n    useEffect(() => {\n      setInputValue(value);\n    }, [value]);\n\n    return (\n      <div\n        className={cn(\n          `flex gap-0.5 w-full relative`,\n          isHovered && isGTN\n            ? \"border rounded-lg border-primary-100 bg-primary-50 p-1\"\n            : \"\",\n          { \"error-field\": !!errorMessage }\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\n        <div className={cn(`flex flex-col w-full`)}>\n          <label\n            htmlFor=\"text\"\n            className={`text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${\n              !originalCase ? \"capitalize\" : \"\"\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\">\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 />\n                    </div>\n                  </Tooltip>\n                )}\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-dynamic-data-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                        sx={{\n                          fontSize: 16,\n                          color:\n                            primaryColorShades?.[600] || \"var(--color-primary-600)\",\n                        }}\n                      />\n                    </AntTooltip>\n                  </button>\n                ) : null}\n              </div>\n            </div>\n          </label>\n          <label className=\"relative block mt-1\">\n            <input\n              id={id}\n              ref={combinedRef}\n              required={required}\n              placeholder={placeholder}\n              className={getClassName()}\n              onChange={(e) => {\n                onChange(e.target.value);\n                setInputValue(e.target?.value);\n              }}\n              onKeyDown={handleKeyDown}\n              value={inputValue !== null ? inputValue : value}\n              defaultValue={defaultValue}\n              disabled={true}\n            />\n\n            <IconButton\n              id={`btn-dynamic-data-input-rx-cross`}\n              onClick={handleClear}\n              className=\"absolute inset-y-0 right-1 flex items-center px-2 focus:border-transparent\"\n              variant=\"ghost\"\n              disabled={disabled}\n            >\n              <CloseRounded\n                className=\"text-neutral-900 dark:text-black-300\"\n                sx={{ fontSize: 16 }}\n              />\n            </IconButton>\n\n            <IconButton\n              id={`btn-dynamic-data-input-ai-outline-pic-center`}\n              onClick={toggleDynamicDataModal}\n              className=\"absolute inset-y-0 right-8 flex items-center px-2 focus:border-transparent\"\n              variant=\"ghost\"\n              disabled={disabled}\n            >\n              <TableChartRounded\n                className=\"text-neutral-900 dark:text-black-300\"\n                sx={{ fontSize: 16 }}\n              />\n            </IconButton>\n          </label>\n\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\n          {showDynamicDataModal && DynamicDataModal && (\n            <DynamicDataModal\n              isVisible={showDynamicDataModal}\n              onSelect={(data) => {\n                onChange(data);\n                setInputValue(data);\n              }}\n              onClose={toggleDynamicDataModal}\n              dataKey={dataKey}\n              dataSource={dataSource}\n            />\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\nDynamicDataInputField.displayName = \"DynamicDataInputField\";\n\n"],"names":["DynamicDataInputField","forwardRef","id","label","placeholder","value","onChange","errorMessage","defaultValue","required","isRequiredConditional","dataSource","dataKey","tags","tooltip","originalCase","color","isGTN","gtnName","isAiExtracted","confidenceScore","confidenceType","confidenceTooltip","sourceMeta","onConfidenceScoreClick","labelClassName","disabled","isLiveField","onAddGTNToDocument","riskDetails","isRiskAnalysisOpen","RiskDetailsCard","primaryColorShades","_isRecording","_isPlaying","setDisableActions","showDeprecatedFieldWarning","DynamicDataModal","ref","t","useTranslation","isHovered","setIsHovered","useState","inputValue","setInputValue","showDynamicDataModal","setShowDynamicDataModal","inputRef","useRef","combinedRef","toggleDynamicDataModal","handleKeyDown","event","currentRef","handleClear","handleAddGTNToDocument","_value","getClassName","baseClasses","borderColor","placeholderColor","backgroundColor","useEffect","jsxs","cn","jsx","InputLabel","BoltOutlined","shouldShowConfidenceScore","AIExtractedIndicator","Label","Tooltip","HelpIcon","getConfidenceScoreBadgeClass","AIStarIcon","getConfidenceScoreBadgeColor","getConfidenceScoreBadgeFill","getConfidenceScoreBadgeTextColor","AntTooltip","NoteAddOutlined","e","IconButton","CloseRounded","TableChartRounded","Typography","data"],"mappings":"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"}
+{"version":3,"file":"DynamicDataInputField.es.js","sources":["../../../../src/components/forms/dynamic-data-input/DynamicDataInputField.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport cn from \"classnames\";\nimport { forwardRef, useEffect, useRef, 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, CloseRounded, NoteAddOutlined, TableChartRounded } 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 IconButton from \"../../button/IconButton\";\nimport { InputLabel } from \"../shared/InputLabel\";\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\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/**\n * Props for the DynamicDataModal component\n */\nexport interface DynamicDataModalProps {\n  isVisible: boolean;\n  onSelect: (data: string | number | readonly string[] | undefined) => void;\n  onClose: () => void;\n  dataKey: string;\n  dataSource: string;\n}\n\n/**\n * Props for the DynamicDataInputField component\n */\nexport interface DynamicDataInputFieldProps {\n  /** Unique identifier for the input */\n  id: string;\n  /** Label text to display above the input */\n  label: string;\n  /** Placeholder text for the input */\n  placeholder?: string;\n  /** Color for the input text */\n  color?: string;\n  /** Current value of the input */\n  value: string | number | readonly string[] | undefined;\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  /** Tags/labels to display next to the label */\n  tags?: (string | LabelType)[];\n  /** Error message to display below the input */\n  errorMessage?: string;\n  /** Default value for the input */\n  defaultValue?: string | number | readonly string[] | undefined;\n  /** Data source for dynamic data */\n  dataSource: string;\n  /** Data key for dynamic data */\n  dataKey: string;\n  /** Tooltip text for the help icon */\n  tooltip?: string;\n  /** Whether this is a GTN (Global Term Name) field */\n  isGTN?: boolean;\n  /** GTN field name for document integration */\n  gtnName?: 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 the input is disabled */\n  disabled?: boolean;\n  /** Callback function called when value changes */\n  onChange: (value: string | number | readonly string[] | undefined) => void;\n  /** Additional CSS classes for the label */\n  labelClassName?: string;\n  /** Whether this is a live field */\n  isLiveField?: boolean;\n  /** Whether to preserve original case in the label */\n  originalCase?: boolean;\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  /** Primary color shades for styling */\n  primaryColorShades?: Record<number, string>;\n  /** Whether recording is active (for pilot context) */\n  isRecording?: boolean;\n  /** Whether playback is active (for pilot context) */\n  isPlaying?: boolean;\n  /** Callback to set disable actions state */\n  setDisableActions?: (disabled: boolean) => void;\n  /** Toast function for deprecated field warning */\n  showDeprecatedFieldWarning?: () => void;\n  /** Dynamic data modal component */\n  DynamicDataModal?: React.ComponentType<DynamicDataModalProps>;\n}\n\n/**\n * A highly customizable dynamic data input component with label, validation, and styling support.\n * Features dynamic data modal integration, GTN support, risk analysis support,\n * and comprehensive prop support for various use cases.\n *\n * @example\n * ```tsx\n * <DynamicDataInputField\n *   id=\"dynamic-field\"\n *   label=\"Dynamic Field\"\n *   value={fieldValue}\n *   onChange={(value) => setFieldValue(value)}\n *   dataSource=\"sourceTable\"\n *   dataKey=\"fieldKey\"\n *   required\n * />\n * ```\n */\nexport const DynamicDataInputField = forwardRef<\n  HTMLInputElement,\n  DynamicDataInputFieldProps\n>(\n  (\n    {\n      id,\n      label,\n      placeholder,\n      value,\n      onChange,\n      errorMessage,\n      defaultValue,\n      required = false,\n      isRequiredConditional = false,\n      dataSource,\n      dataKey,\n      tags,\n      tooltip = \"\",\n      originalCase = false,\n      color = \"\",\n      isGTN = false,\n      gtnName,\n      isAiExtracted = false,\n      confidenceScore,\n      confidenceType = \"high\",\n      confidenceTooltip,\n      sourceMeta = [],\n      onConfidenceScoreClick,\n      labelClassName,\n      disabled = false,\n      isLiveField = false,\n      onAddGTNToDocument,\n      riskDetails,\n      isRiskAnalysisOpen = false,\n      RiskDetailsCard,\n      primaryColorShades,\n      isRecording: _isRecording = false,\n      isPlaying: _isPlaying = false,\n      setDisableActions,\n      showDeprecatedFieldWarning,\n      DynamicDataModal,\n    },\n    ref\n  ) => {\n    const { t } = useTranslation();\n    const [isHovered, setIsHovered] = useState(false);\n    const [inputValue, setInputValue] = useState<\n      string | number | readonly string[] | undefined\n    >(value);\n    const [showDynamicDataModal, setShowDynamicDataModal] = useState(false);\n\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // Use forwarded ref or internal ref\n    const combinedRef = (ref as React.RefObject<HTMLInputElement>) || inputRef;\n\n    const toggleDynamicDataModal = () => {\n      if (showDynamicDataModal) {\n        setDisableActions?.(false);\n      } else {\n        setDisableActions?.(true);\n      }\n      setShowDynamicDataModal(!showDynamicDataModal);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.keyCode === 9 || event.key === \"Enter\") {\n        const currentRef = combinedRef.current || inputRef.current;\n        if (currentRef) {\n          if (inputValue !== null) {\n            onChange(inputValue);\n          }\n          setInputValue(inputValue);\n          currentRef.blur();\n        }\n      }\n    };\n\n    const handleClear = () => {\n      setInputValue(\"\");\n      onChange(\"\");\n    };\n\n    const handleAddGTNToDocument = (_value: string) => {\n      if (onAddGTNToDocument && gtnName) {\n        const keyValuePair = {\n          key: gtnName,\n          value: _value,\n        };\n        onAddGTNToDocument(keyValuePair);\n      }\n    };\n\n    const getClassName = (): string => {\n      const baseClasses =\n        \"border h-8 text-sm rounded-lg block w-full p-2.5 font-inter font-medium\";\n      const borderColor = errorMessage\n        ? \"border-red-300\"\n        : isRiskAnalysisOpen && riskDetails?.color\n        ? `border-${riskDetails?.color}-300`\n        : \"border-gray-300 dark:border-black-600\";\n      const placeholderColor = `placeholder:text-neutral-900 dark:placeholder:text-black-400`;\n      const backgroundColor = `${\n        isRiskAnalysisOpen && riskDetails?.color\n          ? `bg-${riskDetails?.color}-50`\n          : \"bg-gray-200 dark:bg-black-600 \"\n      } ${color ? color : \"text-neutral-900 dark:text-black-200\"}`;\n\n      return `${baseClasses} ${borderColor} ${backgroundColor} ${placeholderColor}`;\n    };\n\n    useEffect(() => {\n      if (showDynamicDataModal && !dataSource) {\n        showDeprecatedFieldWarning?.();\n        setShowDynamicDataModal(false);\n      }\n    }, [showDynamicDataModal, dataSource, showDeprecatedFieldWarning]);\n\n    // Sync inputValue with value prop\n    useEffect(() => {\n      setInputValue(value);\n    }, [value]);\n\n    return (\n      <div\n        className={cn(\n          `flex gap-0.5 w-full relative`,\n          isHovered && isGTN\n            ? \"border rounded-lg border-primary-100 bg-primary-50 p-1\"\n            : \"\",\n          { \"error-field\": !!errorMessage }\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\n        <div className={cn(`flex flex-col w-full`)}>\n          <label\n            htmlFor=\"text\"\n            className={`text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${\n              !originalCase ? \"capitalize\" : \"\"\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\">\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 />\n                    </div>\n                  </Tooltip>\n                )}\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-dynamic-data-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                        sx={{\n                          fontSize: 16,\n                          color:\n                            primaryColorShades?.[600] || \"var(--color-primary-600)\",\n                        }}\n                      />\n                    </AntTooltip>\n                  </button>\n                ) : null}\n              </div>\n            </div>\n          </label>\n          <label className=\"relative block mt-1\">\n            <input\n              id={id}\n              ref={combinedRef}\n              required={required}\n              placeholder={placeholder}\n              className={getClassName()}\n              onChange={(e) => {\n                onChange(e.target.value);\n                setInputValue(e.target?.value);\n              }}\n              onKeyDown={handleKeyDown}\n              value={inputValue !== null ? inputValue : value}\n              defaultValue={defaultValue}\n              disabled={true}\n            />\n\n            <IconButton\n              id={`btn-dynamic-data-input-rx-cross`}\n              onClick={handleClear}\n              className=\"absolute inset-y-0 right-1 flex items-center px-2 focus:border-transparent\"\n              variant=\"ghost\"\n              disabled={disabled}\n            >\n              <CloseRounded\n                className=\"text-neutral-900 dark:text-black-300 w-xs h-xs\"\n              />\n            </IconButton>\n\n            <IconButton\n              id={`btn-dynamic-data-input-ai-outline-pic-center`}\n              onClick={toggleDynamicDataModal}\n              className=\"absolute inset-y-0 right-8 flex items-center px-2 focus:border-transparent\"\n              variant=\"ghost\"\n              disabled={disabled}\n            >\n              <TableChartRounded\n                className=\"text-neutral-900 dark:text-black-300 w-xs h-xs\"\n              />\n            </IconButton>\n          </label>\n\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\n          {showDynamicDataModal && DynamicDataModal && (\n            <DynamicDataModal\n              isVisible={showDynamicDataModal}\n              onSelect={(data) => {\n                onChange(data);\n                setInputValue(data);\n              }}\n              onClose={toggleDynamicDataModal}\n              dataKey={dataKey}\n              dataSource={dataSource}\n            />\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\nDynamicDataInputField.displayName = \"DynamicDataInputField\";\n\n"],"names":["DynamicDataInputField","forwardRef","id","label","placeholder","value","onChange","errorMessage","defaultValue","required","isRequiredConditional","dataSource","dataKey","tags","tooltip","originalCase","color","isGTN","gtnName","isAiExtracted","confidenceScore","confidenceType","confidenceTooltip","sourceMeta","onConfidenceScoreClick","labelClassName","disabled","isLiveField","onAddGTNToDocument","riskDetails","isRiskAnalysisOpen","RiskDetailsCard","primaryColorShades","_isRecording","_isPlaying","setDisableActions","showDeprecatedFieldWarning","DynamicDataModal","ref","t","useTranslation","isHovered","setIsHovered","useState","inputValue","setInputValue","showDynamicDataModal","setShowDynamicDataModal","inputRef","useRef","combinedRef","toggleDynamicDataModal","handleKeyDown","event","currentRef","handleClear","handleAddGTNToDocument","_value","getClassName","baseClasses","borderColor","placeholderColor","backgroundColor","useEffect","jsxs","cn","jsx","InputLabel","BoltOutlined","shouldShowConfidenceScore","AIExtractedIndicator","Label","Tooltip","HelpIcon","getConfidenceScoreBadgeClass","AIStarIcon","getConfidenceScoreBadgeColor","getConfidenceScoreBadgeFill","getConfidenceScoreBadgeTextColor","AntTooltip","NoteAddOutlined","e","IconButton","CloseRounded","TableChartRounded","Typography","data"],"mappings":"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"}

package/dist/components/forms/field-options/Item.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../../_virtual/index.cjs.js"),t=require("react-easy-sort"),l=require("./Icon.cjs.js"),d=require("../../icon/icons.generated.cjs.js"),c=s=>{const{value:a,index:i,onDeleteItem:n,userCanManage:r=!1}=s;return e.jsx(t.SortableItem,{children:e.jsxs("div",{className:o("relative flex items-center px-1.5 py-0.5 text-sm text-primary-600 bg-primary-50 dark:bg-black-700 rounded font-medium text-[14px] font-inter border border-primary-100"),children:[r&&e.jsx(t.SortableKnob,{children:e.jsx("button",{id:"btn-data-display-close-modal",className:"pr-2 cursor-move",children:e.jsx(d.DragIndicatorIcon,{size:14,className:"text-primary-600 dark:text-primary-600"})})}),a,r&&e.jsxs("span",{className:"flex items-center gap-2.5 p-0.5 rounded-xl bg-primary-100 ml-auto cursor-pointer","data-dismiss-target":"#badge-dismiss-default","aria-label":"Remove",onClick:()=>{n(i)},children:[e.jsx(l.CloseIcon,{size:"w-2.5 h-2.5"}),e.jsx("span",{className:"sr-only",children:"Remove badge"})]})]})})};exports.Item=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../../_virtual/index.cjs.js"),s=require("react-easy-sort"),l=require("./Icon.cjs.js"),d=require("../../icon/icons.generated.cjs.js"),c=t=>{const{value:a,index:i,onDeleteItem:n,userCanManage:r=!1}=t;return e.jsx(s.SortableItem,{children:e.jsxs("div",{className:o("relative flex items-center px-1.5 py-0.5 text-sm text-primary-600 bg-primary-50 dark:bg-black-700 rounded font-mediumtext-base font-inter border border-primary-100"),children:[r&&e.jsx(s.SortableKnob,{children:e.jsx("button",{id:"btn-data-display-close-modal",className:"pr-2 cursor-move",children:e.jsx(d.DragIndicatorIcon,{size:14,className:"text-primary-600 dark:text-primary-600"})})}),a,r&&e.jsxs("span",{className:"flex items-center gap-2.5 p-0.5 rounded-xl bg-primary-100 ml-auto cursor-pointer","data-dismiss-target":"#badge-dismiss-default","aria-label":"Remove",onClick:()=>{n(i)},children:[e.jsx(l.CloseIcon,{size:"w-2.5 h-2.5"}),e.jsx("span",{className:"sr-only",children:"Remove badge"})]})]})})};exports.Item=c;
 //# sourceMappingURL=Item.cjs.js.map

package/dist/components/forms/field-options/Item.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.cjs.js","sources":["../../../../src/components/forms/field-options/Item.tsx"],"sourcesContent":["import cn from 'classnames';\nimport type { FC } from 'react';\nimport { SortableItem, SortableKnob } from 'react-easy-sort';\n\nimport { CloseIcon } from './Icon';\nimport type { TFieldOptionsProps } from './types';\nimport { DragIndicatorIcon } from '../../icon';\n\ntype TProps = Pick<TFieldOptionsProps, 'value' | 'onDeleteItem' | 'userCanManage'> & {\n  index: number;\n};\n\nexport const Item: FC<TProps> = (props) => {\n  const { value, index, onDeleteItem, userCanManage = false } = props;\n\n  return (\n    <SortableItem>\n      <div\n        className={cn(\n          'relative flex items-center px-1.5 py-0.5 text-sm text-primary-600 bg-primary-50 dark:bg-black-700 rounded font-medium text-[14px] font-inter border border-primary-100',\n        )}\n      >\n         {userCanManage && (\n          <SortableKnob>\n            <button id={`btn-data-display-close-modal`} className='pr-2 cursor-move'>\n              <DragIndicatorIcon size={14} className='text-primary-600 dark:text-primary-600' />\n            </button>\n          </SortableKnob>\n        )}\n        {value}\n        {userCanManage && (\n          <span\n            className='flex items-center gap-2.5 p-0.5 rounded-xl bg-primary-100 ml-auto cursor-pointer'\n            data-dismiss-target='#badge-dismiss-default'\n            aria-label='Remove'\n            onClick={() => {\n              onDeleteItem(index);\n            }}\n          >\n            <CloseIcon size='w-2.5 h-2.5' />\n            <span className='sr-only'>{'Remove badge'}</span>\n          </span>\n        )}\n      </div>\n    </SortableItem>\n  );\n};\n\n\n\n"],"names":["Item","props","value","index","onDeleteItem","userCanManage","SortableItem","jsxs","cn","jsx","SortableKnob","DragIndicatorIcon","CloseIcon"],"mappings":"wQAYaA,EAAoBC,GAAU,CACzC,KAAM,CAAE,MAAAC,EAAA,MAAOC,EAAO,aAAAC,EAAc,cAAAC,EAAgB,IAAUJ,EAE9D,aACGK,EAAAA,aAAA,CACC,SAAAC,EAAAA,KAAC,MAAA,CACC,UAAWC,EACT,wKAAA,EAGA,SAAA,CAAAH,GACAI,EAAAA,IAACC,EAAAA,aAAA,CACC,SAAAD,MAAC,SAAA,CAAO,GAAI,+BAAgC,UAAU,mBACpD,SAAAA,EAAAA,IAACE,EAAAA,mBAAkB,KAAM,GAAI,UAAU,wCAAA,CAAyC,EAClF,EACF,EAEDT,EACAG,GACCE,EAAAA,KAAC,OAAA,CACC,UAAU,mFACV,sBAAoB,yBACpB,aAAW,SACX,QAAS,IAAM,CACbH,EAAaD,CAAK,CACpB,EAEA,SAAA,CAAAM,EAAAA,IAACG,EAAAA,UAAA,CAAU,KAAK,aAAA,CAAc,EAC9BH,EAAAA,IAAC,OAAA,CAAK,UAAU,UAAW,SAAA,cAAA,CAAe,CAAA,CAAA,CAAA,CAC5C,CAAA,CAAA,EAGN,CAEJ"}
+{"version":3,"file":"Item.cjs.js","sources":["../../../../src/components/forms/field-options/Item.tsx"],"sourcesContent":["import cn from 'classnames';\nimport type { FC } from 'react';\nimport { SortableItem, SortableKnob } from 'react-easy-sort';\n\nimport { CloseIcon } from './Icon';\nimport type { TFieldOptionsProps } from './types';\nimport { DragIndicatorIcon } from '../../icon';\n\ntype TProps = Pick<TFieldOptionsProps, 'value' | 'onDeleteItem' | 'userCanManage'> & {\n  index: number;\n};\n\nexport const Item: FC<TProps> = (props) => {\n  const { value, index, onDeleteItem, userCanManage = false } = props;\n\n  return (\n    <SortableItem>\n      <div\n        className={cn(\n          'relative flex items-center px-1.5 py-0.5 text-sm text-primary-600 bg-primary-50 dark:bg-black-700 rounded font-mediumtext-base font-inter border border-primary-100',\n        )}\n      >\n         {userCanManage && (\n          <SortableKnob>\n            <button id={`btn-data-display-close-modal`} className='pr-2 cursor-move'>\n              <DragIndicatorIcon size={14} className='text-primary-600 dark:text-primary-600' />\n            </button>\n          </SortableKnob>\n        )}\n        {value}\n        {userCanManage && (\n          <span\n            className='flex items-center gap-2.5 p-0.5 rounded-xl bg-primary-100 ml-auto cursor-pointer'\n            data-dismiss-target='#badge-dismiss-default'\n            aria-label='Remove'\n            onClick={() => {\n              onDeleteItem(index);\n            }}\n          >\n            <CloseIcon size='w-2.5 h-2.5' />\n            <span className='sr-only'>{'Remove badge'}</span>\n          </span>\n        )}\n      </div>\n    </SortableItem>\n  );\n};\n\n\n\n"],"names":["Item","props","value","index","onDeleteItem","userCanManage","SortableItem","jsxs","cn","jsx","SortableKnob","DragIndicatorIcon","CloseIcon"],"mappings":"wQAYaA,EAAoBC,GAAU,CACzC,KAAM,CAAE,MAAAC,EAAA,MAAOC,EAAO,aAAAC,EAAc,cAAAC,EAAgB,IAAUJ,EAE9D,aACGK,EAAAA,aAAA,CACC,SAAAC,EAAAA,KAAC,MAAA,CACC,UAAWC,EACT,qKAAA,EAGA,SAAA,CAAAH,GACAI,EAAAA,IAACC,EAAAA,aAAA,CACC,SAAAD,MAAC,SAAA,CAAO,GAAI,+BAAgC,UAAU,mBACpD,SAAAA,EAAAA,IAACE,EAAAA,mBAAkB,KAAM,GAAI,UAAU,wCAAA,CAAyC,EAClF,EACF,EAEDT,EACAG,GACCE,EAAAA,KAAC,OAAA,CACC,UAAU,mFACV,sBAAoB,yBACpB,aAAW,SACX,QAAS,IAAM,CACbH,EAAaD,CAAK,CACpB,EAEA,SAAA,CAAAM,EAAAA,IAACG,EAAAA,UAAA,CAAU,KAAK,aAAA,CAAc,EAC9BH,EAAAA,IAAC,OAAA,CAAK,UAAU,UAAW,SAAA,cAAA,CAAe,CAAA,CAAA,CAAA,CAC5C,CAAA,CAAA,EAGN,CAEJ"}

package/dist/components/forms/field-options/Item.es.js

@@ -1,15 +1,15 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import s from "../../../_virtual/index.es.js";
+import m from "../../../_virtual/index.es.js";
 import { SortableItem as n, SortableKnob as l } from "react-easy-sort";
 import { CloseIcon as d } from "./Icon.es.js";
 import { DragIndicatorIcon as c } from "../../icon/icons.generated.es.js";
 const g = (t) => {
-  const { value: o, index: i, onDeleteItem: m, userCanManage: r = !1 } = t;
+  const { value: o, index: s, onDeleteItem: i, userCanManage: r = !1 } = t;
   return /* @__PURE__ */ e(n, { children: /* @__PURE__ */ a(
     "div",
     {
-      className: s(
-        "relative flex items-center px-1.5 py-0.5 text-sm text-primary-600 bg-primary-50 dark:bg-black-700 rounded font-medium text-[14px] font-inter border border-primary-100"
+      className: m(
+        "relative flex items-center px-1.5 py-0.5 text-sm text-primary-600 bg-primary-50 dark:bg-black-700 rounded font-mediumtext-base font-inter border border-primary-100"
       ),
       children: [
         r && /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e("button", { id: "btn-data-display-close-modal", className: "pr-2 cursor-move", children: /* @__PURE__ */ e(c, { size: 14, className: "text-primary-600 dark:text-primary-600" }) }) }),
@@ -21,7 +21,7 @@ const g = (t) => {
             "data-dismiss-target": "#badge-dismiss-default",
             "aria-label": "Remove",
             onClick: () => {
-              m(i);
+              i(s);
             },
             children: [
               /* @__PURE__ */ e(d, { size: "w-2.5 h-2.5" }),

package/dist/components/forms/field-options/Item.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.es.js","sources":["../../../../src/components/forms/field-options/Item.tsx"],"sourcesContent":["import cn from 'classnames';\nimport type { FC } from 'react';\nimport { SortableItem, SortableKnob } from 'react-easy-sort';\n\nimport { CloseIcon } from './Icon';\nimport type { TFieldOptionsProps } from './types';\nimport { DragIndicatorIcon } from '../../icon';\n\ntype TProps = Pick<TFieldOptionsProps, 'value' | 'onDeleteItem' | 'userCanManage'> & {\n  index: number;\n};\n\nexport const Item: FC<TProps> = (props) => {\n  const { value, index, onDeleteItem, userCanManage = false } = props;\n\n  return (\n    <SortableItem>\n      <div\n        className={cn(\n          'relative flex items-center px-1.5 py-0.5 text-sm text-primary-600 bg-primary-50 dark:bg-black-700 rounded font-medium text-[14px] font-inter border border-primary-100',\n        )}\n      >\n         {userCanManage && (\n          <SortableKnob>\n            <button id={`btn-data-display-close-modal`} className='pr-2 cursor-move'>\n              <DragIndicatorIcon size={14} className='text-primary-600 dark:text-primary-600' />\n            </button>\n          </SortableKnob>\n        )}\n        {value}\n        {userCanManage && (\n          <span\n            className='flex items-center gap-2.5 p-0.5 rounded-xl bg-primary-100 ml-auto cursor-pointer'\n            data-dismiss-target='#badge-dismiss-default'\n            aria-label='Remove'\n            onClick={() => {\n              onDeleteItem(index);\n            }}\n          >\n            <CloseIcon size='w-2.5 h-2.5' />\n            <span className='sr-only'>{'Remove badge'}</span>\n          </span>\n        )}\n      </div>\n    </SortableItem>\n  );\n};\n\n\n\n"],"names":["Item","props","value","index","onDeleteItem","userCanManage","SortableItem","jsxs","cn","jsx","SortableKnob","DragIndicatorIcon","CloseIcon"],"mappings":";;;;;AAYO,MAAMA,IAAmB,CAACC,MAAU;AACzC,QAAM,EAAE,OAAAC,GAAO,OAAAC,GAAO,cAAAC,GAAc,eAAAC,IAAgB,OAAUJ;AAE9D,2BACGK,GAAA,EACC,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,MAAA;AAAA,MAGA,UAAA;AAAA,QAAAH,KACA,gBAAAI,EAACC,GAAA,EACC,UAAA,gBAAAD,EAAC,UAAA,EAAO,IAAI,gCAAgC,WAAU,oBACpD,UAAA,gBAAAA,EAACE,KAAkB,MAAM,IAAI,WAAU,yCAAA,CAAyC,GAClF,GACF;AAAA,QAEDT;AAAA,QACAG,KACC,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,uBAAoB;AAAA,YACpB,cAAW;AAAA,YACX,SAAS,MAAM;AACb,cAAAH,EAAaD,CAAK;AAAA,YACpB;AAAA,YAEA,UAAA;AAAA,cAAA,gBAAAM,EAACG,GAAA,EAAU,MAAK,cAAA,CAAc;AAAA,cAC9B,gBAAAH,EAAC,QAAA,EAAK,WAAU,WAAW,UAAA,eAAA,CAAe;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAC5C;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;"}
+{"version":3,"file":"Item.es.js","sources":["../../../../src/components/forms/field-options/Item.tsx"],"sourcesContent":["import cn from 'classnames';\nimport type { FC } from 'react';\nimport { SortableItem, SortableKnob } from 'react-easy-sort';\n\nimport { CloseIcon } from './Icon';\nimport type { TFieldOptionsProps } from './types';\nimport { DragIndicatorIcon } from '../../icon';\n\ntype TProps = Pick<TFieldOptionsProps, 'value' | 'onDeleteItem' | 'userCanManage'> & {\n  index: number;\n};\n\nexport const Item: FC<TProps> = (props) => {\n  const { value, index, onDeleteItem, userCanManage = false } = props;\n\n  return (\n    <SortableItem>\n      <div\n        className={cn(\n          'relative flex items-center px-1.5 py-0.5 text-sm text-primary-600 bg-primary-50 dark:bg-black-700 rounded font-mediumtext-base font-inter border border-primary-100',\n        )}\n      >\n         {userCanManage && (\n          <SortableKnob>\n            <button id={`btn-data-display-close-modal`} className='pr-2 cursor-move'>\n              <DragIndicatorIcon size={14} className='text-primary-600 dark:text-primary-600' />\n            </button>\n          </SortableKnob>\n        )}\n        {value}\n        {userCanManage && (\n          <span\n            className='flex items-center gap-2.5 p-0.5 rounded-xl bg-primary-100 ml-auto cursor-pointer'\n            data-dismiss-target='#badge-dismiss-default'\n            aria-label='Remove'\n            onClick={() => {\n              onDeleteItem(index);\n            }}\n          >\n            <CloseIcon size='w-2.5 h-2.5' />\n            <span className='sr-only'>{'Remove badge'}</span>\n          </span>\n        )}\n      </div>\n    </SortableItem>\n  );\n};\n\n\n\n"],"names":["Item","props","value","index","onDeleteItem","userCanManage","SortableItem","jsxs","cn","jsx","SortableKnob","DragIndicatorIcon","CloseIcon"],"mappings":";;;;;AAYO,MAAMA,IAAmB,CAACC,MAAU;AACzC,QAAM,EAAE,OAAAC,GAAO,OAAAC,GAAO,cAAAC,GAAc,eAAAC,IAAgB,OAAUJ;AAE9D,2BACGK,GAAA,EACC,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,MAAA;AAAA,MAGA,UAAA;AAAA,QAAAH,KACA,gBAAAI,EAACC,GAAA,EACC,UAAA,gBAAAD,EAAC,UAAA,EAAO,IAAI,gCAAgC,WAAU,oBACpD,UAAA,gBAAAA,EAACE,KAAkB,MAAM,IAAI,WAAU,yCAAA,CAAyC,GAClF,GACF;AAAA,QAEDT;AAAA,QACAG,KACC,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,uBAAoB;AAAA,YACpB,cAAW;AAAA,YACX,SAAS,MAAM;AACb,cAAAH,EAAaD,CAAK;AAAA,YACpB;AAAA,YAEA,UAAA;AAAA,cAAA,gBAAAM,EAACG,GAAA,EAAU,MAAK,cAAA,CAAc;AAAA,cAC9B,gBAAAH,EAAC,QAAA,EAAK,WAAU,WAAW,UAAA,eAAA,CAAe;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAC5C;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;"}

package/dist/components/forms/icon-picker/IconPicker.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),w=require("../../../_virtual/index.cjs.js"),d=require("react"),C=require("react-window"),v=require("@mui/icons-material"),I=require("@mui/material"),y=require("antd"),k=require("../../data-display/typography/Typography.cjs.js"),P=require("../input-field/InputField.cjs.js"),x=require("../../../types/icon-picker.cjs.js"),S=require("../../../utils/countryFlags.cjs.js"),q=require("../shared/InputLabel.cjs.js");function N(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const c in e)if(c!=="default"){const a=Object.getOwnPropertyDescriptor(e,c);Object.defineProperty(n,c,a.get?a:{enumerable:!0,get:()=>e[c]})}}return n.default=e,Object.freeze(n)}const h=N(v),R=Object.keys(h).filter(e=>e?.endsWith("Rounded")),O=[...R||[],...(x.COUNTRY_CODES||[]).map(e=>`flag-${e}`)],D=e=>{if(e?.startsWith("flag-")){const n=e?.replace("flag-","");return x.countryNameFromCode(n||"")||n}return e.replaceAll(/([A-Z])/g," $1").trim()},T=({onChange:e,selectedIcon:n,setOpen:c})=>{const[a,f]=d.useState(""),l=(O||[]).filter(r=>{if(r?.startsWith("flag-")){const s=r?.replace("flag-","");return s?.toLowerCase()?.includes(a?.trim()?.toLowerCase()||"")||x.countryNameFromCode(s||"")?.toLowerCase()?.includes(a?.trim()?.toLowerCase()||"")}return r?.trim()?.toLowerCase()?.includes(a?.trim()?.toLowerCase()||"")}),p=(r,s)=>{if(s.stopPropagation(),n===r){e?.(null);return}e?.(r),c?.(!1)};return t.jsxs("div",{className:"flex flex-col gap-3",onKeyDown:r=>{r.key==="Enter"&&(r.preventDefault(),r.stopPropagation())},children:[t.jsx(P.InputField,{id:"input-field-icon-picker",placeholder:"Search icons...",onChange:r=>f(r||""),fieldSuffix:t.jsx(h.Search,{sx:{width:16,height:16,color:"rgb(152 162 179)"}})}),t.jsx(C.FixedSizeGrid,{columnCount:5,rowCount:Math.ceil((l?.length||0)/5),columnWidth:40,rowHeight:40,width:220,height:240,children:({columnIndex:r,rowIndex:s,style:m})=>{const g=s*5+r,i=l?.[g];return i?t.jsx("div",{style:{...m,padding:"4px"},children:t.jsx(y.Tooltip,{title:D(i),placement:"bottom",children:t.jsx(I.IconButton,{type:"button",className:w("flex items-center justify-center  !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700",{"!bg-primary-50 dark:!bg-black-800":n===i}),onClick:u=>p(i,u),onKeyDown:u=>{u.key==="Enter"&&(u.preventDefault(),u.stopPropagation())},children:t.jsx(b,{iconName:i,sx:{width:20,height:20},className:"text-neutral-900 dark:text-white"})})})}):null}})]})},b=({iconName:e,sx:n,className:c,isHovering:a})=>{if(e?.startsWith?.("flag-")){const l=e?.replace("flag-","");return S.getFlagComponent?.(l||"",a||!1)||t.jsx("div",{children:"-"})}const f=h?.[e];return f?t.jsx(f,{sx:n,className:c,isHovering:a}):t.jsx("div",{children:"-"})},L=({selectedIcon:e,onChange:n,label:c,required:a=!1,allowClear:f=!0,disabled:l=!1,errorMessage:p,dropdownPosition:r="bottom"})=>{const[s,m]=d.useState(!1),g=d.useRef(!1),i=d.useRef(null),u=d.useRef(!1);d.useEffect(()=>{u.current&&!s&&i.current?.focus(),u.current=s},[s]);const j=o=>{o.stopPropagation(),n?.("")};return t.jsx(y.Popover,{arrow:!1,placement:r,trigger:"click",getPopupContainer:o=>o?.parentElement||document.body,open:s,onOpenChange:o=>{o?(g.current&&m(!0),g.current=!1):m(!1)},content:t.jsx(T,{onChange:n,selectedIcon:e,setOpen:m}),children:t.jsxs("div",{className:"flex flex-col gap-1",children:[c?t.jsx(q.InputLabel,{label:c||"",required:a||!1}):null,t.jsxs("button",{ref:i,type:"button",id:`btn-icon-picker-icon-${e?"selected":"unselected"}`,className:`lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${l?"cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800":"bg-white dark:bg-black-800"} ${p?"border-red-500":"focus:border-primary-600 dark:focus:border-primary-400"} flex items-center justify-between gap-2`,disabled:l,onClick:o=>{if(l){o.preventDefault(),o.stopPropagation();return}o.detail>0&&(g.current=!0)},onKeyDown:o=>{o.key==="Enter"&&(o.preventDefault(),s||o.currentTarget.closest("form")?.querySelector('button[type="submit"]')?.click())},children:[e?t.jsx(b,{iconName:e,sx:{width:20,height:20},className:"text-neutral-900 dark:text-white"}):t.jsx(k.Typography,{size:"small",variant:"medium",appearance:"subtitle",children:"Select Icon"}),e&&f&&!l?t.jsx(h.CloseRounded,{sx:{width:20,height:20},className:"hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500",onClick:j}):null]}),p&&t.jsx(k.Typography,{size:"extra-small",className:"text-red-500 font-medium",children:p})]})})},F=d.lazy(()=>Promise.resolve({default:e=>t.jsx(d.Suspense,{fallback:t.jsx("div",{className:"min-w-[83px] h-[30px] animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md"}),children:t.jsx(L,{...e})})}));exports.IconPicker=F;exports.IconRenderer=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),w=require("../../../_virtual/index.cjs.js"),d=require("react"),C=require("react-window"),v=require("@mui/icons-material"),I=require("@mui/material"),y=require("antd"),k=require("../../data-display/typography/Typography.cjs.js"),N=require("../input-field/InputField.cjs.js"),x=require("../../../types/icon-picker.cjs.js"),P=require("../../../utils/countryFlags.cjs.js"),S=require("../shared/InputLabel.cjs.js");function q(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const c=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(n,a,c.get?c:{enumerable:!0,get:()=>e[a]})}}return n.default=e,Object.freeze(n)}const h=q(v),R=Object.keys(h).filter(e=>e?.endsWith("Rounded")),O=[...R||[],...(x.COUNTRY_CODES||[]).map(e=>`flag-${e}`)],D=e=>{if(e?.startsWith("flag-")){const n=e?.replace("flag-","");return x.countryNameFromCode(n||"")||n}return e.replaceAll(/([A-Z])/g," $1").trim()},T=({onChange:e,selectedIcon:n,setOpen:a})=>{const[c,f]=d.useState(""),l=(O||[]).filter(r=>{if(r?.startsWith("flag-")){const s=r?.replace("flag-","");return s?.toLowerCase()?.includes(c?.trim()?.toLowerCase()||"")||x.countryNameFromCode(s||"")?.toLowerCase()?.includes(c?.trim()?.toLowerCase()||"")}return r?.trim()?.toLowerCase()?.includes(c?.trim()?.toLowerCase()||"")}),p=(r,s)=>{if(s.stopPropagation(),n===r){e?.(null);return}e?.(r),a?.(!1)};return t.jsxs("div",{className:"flex flex-col gap-3",onKeyDown:r=>{r.key==="Enter"&&(r.preventDefault(),r.stopPropagation())},children:[t.jsx(N.InputField,{id:"input-field-icon-picker",placeholder:"Search icons...",onChange:r=>f(r||""),fieldSuffix:t.jsx(h.Search,{className:"!w-4 !h-4 text-neutral-400"})}),t.jsx(C.FixedSizeGrid,{columnCount:5,rowCount:Math.ceil((l?.length||0)/5),columnWidth:40,rowHeight:40,width:220,height:240,children:({columnIndex:r,rowIndex:s,style:m})=>{const g=s*5+r,i=l?.[g];return i?t.jsx("div",{style:m,className:"p-1",children:t.jsx(y.Tooltip,{title:D(i),placement:"bottom",children:t.jsx(I.IconButton,{type:"button",className:w("flex items-center justify-center  !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700",{"!bg-primary-50 dark:!bg-black-800":n===i}),onClick:u=>p(i,u),onKeyDown:u=>{u.key==="Enter"&&(u.preventDefault(),u.stopPropagation())},children:t.jsx(b,{iconName:i,className:"!w-5 !h-5 text-neutral-900 dark:text-white"})})})}):null}})]})},b=({iconName:e,sx:n,className:a,isHovering:c})=>{if(e?.startsWith?.("flag-")){const l=e?.replace("flag-","");return P.getFlagComponent?.(l||"",c||!1)||t.jsx("div",{children:"-"})}const f=h?.[e];return f?t.jsx(f,{sx:n,className:a,isHovering:c}):t.jsx("div",{children:"-"})},L=({selectedIcon:e,onChange:n,label:a,required:c=!1,allowClear:f=!0,disabled:l=!1,errorMessage:p,dropdownPosition:r="bottom"})=>{const[s,m]=d.useState(!1),g=d.useRef(!1),i=d.useRef(null),u=d.useRef(!1);d.useEffect(()=>{u.current&&!s&&i.current?.focus(),u.current=s},[s]);const j=o=>{o.stopPropagation(),n?.("")};return t.jsx(y.Popover,{arrow:!1,placement:r,trigger:"click",getPopupContainer:o=>o?.parentElement||document.body,open:s,onOpenChange:o=>{o?(g.current&&m(!0),g.current=!1):m(!1)},content:t.jsx(T,{onChange:n,selectedIcon:e,setOpen:m}),children:t.jsxs("div",{className:"flex flex-col gap-1",children:[a?t.jsx(S.InputLabel,{label:a||"",required:c||!1}):null,t.jsxs("button",{ref:i,type:"button",id:`btn-icon-picker-icon-${e?"selected":"unselected"}`,className:`lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${l?"cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800":"bg-white dark:bg-black-800"} ${p?"border-red-500":"focus:border-primary-600 dark:focus:border-primary-400"} flex items-center justify-between gap-2`,disabled:l,onClick:o=>{if(l){o.preventDefault(),o.stopPropagation();return}o.detail>0&&(g.current=!0)},onKeyDown:o=>{o.key==="Enter"&&(o.preventDefault(),s||o.currentTarget.closest("form")?.querySelector('button[type="submit"]')?.click())},children:[e?t.jsx(b,{iconName:e,className:"!w-5 !h-5 text-neutral-900 dark:text-white"}):t.jsx(k.Typography,{size:"small",variant:"medium",appearance:"subtitle",children:"Select Icon"}),e&&f&&!l?t.jsx(h.CloseRounded,{className:"!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500",onClick:j}):null]}),p&&t.jsx(k.Typography,{size:"extra-small",className:"text-red-500 font-medium",children:p})]})})},F=d.lazy(()=>Promise.resolve({default:e=>t.jsx(d.Suspense,{fallback:t.jsx("div",{className:"min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md"}),children:t.jsx(L,{...e})})}));exports.IconPicker=F;exports.IconRenderer=b;
 //# sourceMappingURL=IconPicker.cjs.js.map

package/dist/components/forms/icon-picker/IconPicker.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker.cjs.js","sources":["../../../../src/components/forms/icon-picker/IconPicker.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { FixedSizeGrid, type GridChildComponentProps } from 'react-window';\nimport * as AllIcons from '@mui/icons-material';\nimport { IconButton, type SvgIconOwnProps } from '@mui/material';\nimport { Popover, Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputField } from \"../input-field/InputField\";\nimport { COUNTRY_CODES, countryNameFromCode } from \"../../../types/icon-picker\";\nimport { getFlagComponent } from \"../../../utils/countryFlags\";\nimport { InputLabel } from '../shared/InputLabel';\n\nconst roundedIconNames = Object.keys(AllIcons).filter((name) =>\n  name?.endsWith(\"Rounded\")\n);\n\n// Merge icon names and country codes for the picker\nconst mergedIconNames = [\n  ...(roundedIconNames || []),\n  ...(COUNTRY_CODES || []).map((code) => `flag-${code}`),\n];\n\n// Utility function to convert camelCase to human-readable format\nconst formatIconName = (iconName: string): string => {\n  // Handle flag icons\n  if (iconName?.startsWith(\"flag-\")) {\n    const code = iconName?.replace(\"flag-\", \"\");\n    return countryNameFromCode(code || \"\") || code;\n  }\n\n  // Convert camelCase to space-separated words\n  // e.g., \"PersonRounded\" -> \"Person Rounded\"\n  return iconName.replaceAll(/([A-Z])/g, \" $1\").trim();\n};\n\n/** Ant Design `Popover` placement for the icon panel (bottom edge of the trigger). */\nexport type IconPickerDropdownPosition = 'bottom' | 'bottomLeft' | 'bottomRight';\n\nexport interface IconPickerContentProps {\n  selectedIcon: string | null;\n  onChange: (iconName: string | null) => void;\n  label?: string;\n  required?: boolean;\n  allowClear?: boolean;\n  disabled?: boolean;\n  errorMessage?: string;\n  /** Popover placement: `bottom` | `bottomLeft` | `bottomRight`. Default: `bottom`. */\n  dropdownPosition?: IconPickerDropdownPosition;\n}\n\ninterface IconPickerContentInternalProps {\n  onChange: (iconName: string | null) => void;\n  selectedIcon: string | null;\n  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst IconPickerContent = ({\n  onChange,\n  selectedIcon,\n  setOpen,\n}: IconPickerContentInternalProps) => {\n  const [searchTerm, setSearchTerm] = useState<string>(\"\");\n\n  // Filter both icons and flags\n  const filteredIcons = (mergedIconNames || []).filter((name) => {\n    if (name?.startsWith(\"flag-\")) {\n      // For flags, allow search by country code or country name\n      const code = name?.replace(\"flag-\", \"\");\n      return (\n        code\n          ?.toLowerCase()\n          ?.includes(searchTerm?.trim()?.toLowerCase() || \"\") ||\n        countryNameFromCode(code || \"\")\n          ?.toLowerCase()\n          ?.includes(searchTerm?.trim()?.toLowerCase() || \"\")\n      );\n    }\n    return name\n      ?.trim()\n      ?.toLowerCase()\n      ?.includes(searchTerm?.trim()?.toLowerCase() || \"\");\n  });\n\n  const handleClick = (icon: string, event: React.MouseEvent) => {\n    event.stopPropagation();\n    if (selectedIcon === icon) {\n      onChange?.(null);\n      return;\n    }\n    onChange?.(icon);\n    setOpen?.(false);\n  };\n\n  return (\n    <div \n      className=\"flex flex-col gap-3\"\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.preventDefault();\n          e.stopPropagation();\n        }\n      }}\n    >\n      <InputField\n        id={`input-field-icon-picker`}\n        placeholder=\"Search icons...\"\n        onChange={(value) => setSearchTerm(value || \"\")}\n        fieldSuffix={\n          <AllIcons.Search\n            sx={{\n              width: 16,\n              height: 16,\n              color: \"rgb(152 162 179)\", // neutral-400\n            }}\n          />\n        }\n      />\n      <FixedSizeGrid\n        columnCount={5}\n        rowCount={Math.ceil((filteredIcons?.length || 0) / 5)}\n        columnWidth={40}\n        rowHeight={40}\n        width={220}\n        height={240}\n      >\n        {({ columnIndex, rowIndex, style }: GridChildComponentProps) => {\n          const itemIndex = rowIndex * 5 + columnIndex;\n          const iconName = filteredIcons?.[itemIndex];\n          return iconName ? (\n            <div style={{ ...style, padding: \"4px\" }}>\n              <Tooltip title={formatIconName(iconName)} placement='bottom'>\n                <IconButton\n                type='button'\n                  className={classNames(\n                    \"flex items-center justify-center  !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700\",\n                    {\n                      \"!bg-primary-50 dark:!bg-black-800\":\n                        selectedIcon === iconName,\n                    }\n                  )}\n                  onClick={(event) => handleClick(iconName, event)}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter') {\n                      e.preventDefault();\n                      e.stopPropagation();\n                    }\n                  }}\n                >\n                  <IconRenderer\n                    iconName={iconName}\n                    sx={{\n                      width: 20,\n                      height: 20,\n                    }}\n                    className=\"text-neutral-900 dark:text-white\"\n                  />\n                </IconButton>\n              </Tooltip>\n            </div>\n          ) : null;\n        }}\n      </FixedSizeGrid>\n    </div>\n  );\n};\n\ninterface IconRendererProps {\n  iconName: string;\n  sx?: SvgIconOwnProps['sx'];\n  className?: string;\n  isHovering?: boolean;\n}\n\nexport const IconRenderer = ({ iconName, sx, className, isHovering }: IconRendererProps) => {\n  // Render flag if iconName starts with 'flag-'\n  if (iconName?.startsWith?.('flag-')) {\n    const code = iconName?.replace('flag-', '');\n    return getFlagComponent?.(code || '', isHovering || false) || <div>-</div>;\n  }\n  const Icon = AllIcons?.[iconName as keyof typeof AllIcons] as React.ComponentType<{\n    sx?: SvgIconOwnProps['sx'];\n    className?: string;\n    isHovering?: boolean;\n  }>;\n\n  if (!Icon) {\n    return <div>-</div>;\n  }\n\n  return <Icon sx={sx} className={className} isHovering={isHovering} />;\n};\n\nconst IconPickerBase = ({\n  selectedIcon,\n  onChange,\n  label,\n  required = false,\n  allowClear = true,\n  disabled = false,\n  errorMessage,\n  dropdownPosition = 'bottom',\n}: IconPickerContentProps) => {\n  const [open, setOpen] = useState(false);\n  const mouseClickRef = useRef(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const wasOpenRef = useRef(false);\n\n  useEffect(() => {\n    if (wasOpenRef.current && !open) {\n      buttonRef.current?.focus();\n    }\n    wasOpenRef.current = open;\n  }, [open]);\n  const handleClearIcon = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange?.('');\n  };\n\n  return (\n    <Popover\n      arrow={false}\n      placement={dropdownPosition}\n      trigger='click'\n      getPopupContainer={(triggerNode) => triggerNode?.parentElement || document.body}\n      open={open}\n      onOpenChange={(newOpen) => {\n        if (newOpen) {\n          if (mouseClickRef.current) {\n            setOpen(true);\n          }\n          mouseClickRef.current = false;\n        } else {\n          setOpen(false);\n        }\n      }}\n      content={<IconPickerContent onChange={onChange} selectedIcon={selectedIcon} setOpen={setOpen} />}\n    >\n      <div className='flex flex-col gap-1'>\n        {label ? (\n          <InputLabel label={label || \"\"} required={required || false} />\n        ) : null}\n        <button\n          ref={buttonRef}\n          type='button'\n          id={`btn-icon-picker-icon-${selectedIcon ? 'selected' : 'unselected'}`}\n          className={`lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${\n            disabled ? 'cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800' : 'bg-white dark:bg-black-800'\n          } ${errorMessage ? 'border-red-500' : 'focus:border-primary-600 dark:focus:border-primary-400'} flex items-center justify-between gap-2`}\n          disabled={disabled}\n          onClick={(e) => {\n            if (disabled) {\n              e.preventDefault();\n              e.stopPropagation();\n              return;\n            }\n            if (e.detail > 0) {\n              mouseClickRef.current = true;\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              e.preventDefault();\n              if (!open) {\n                const form = (e.currentTarget as HTMLElement).closest('form');\n                const submitBtn = form?.querySelector('button[type=\"submit\"]') as HTMLButtonElement | null;\n                submitBtn?.click();\n              }\n            }\n          }}\n        >\n          {selectedIcon ? (\n            <IconRenderer iconName={selectedIcon} sx={{ width: 20, height: 20 }} className='text-neutral-900 dark:text-white' />\n          ) : (\n            <Typography\n              size='small'\n              variant='medium'\n              appearance='subtitle'\n            >\n              Select Icon\n            </Typography>\n          )}\n          {selectedIcon && allowClear && !disabled ? (\n            <AllIcons.CloseRounded\n              sx={{ width: 20, height: 20 }}\n              className='hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500'\n              onClick={handleClearIcon}\n            />\n          ) : (\n           null\n          )}\n        </button>\n        {errorMessage && (\n          <Typography size='extra-small' className='text-red-500 font-medium'>\n            {errorMessage}\n          </Typography>\n        )}\n      </div>\n    </Popover>\n  );\n};\n\nexport const IconPicker = React.lazy(() =>\n  Promise.resolve({\n    default: (props: IconPickerContentProps) => (\n      <Suspense fallback={<div className='min-w-[83px] h-[30px] animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md' />}>\n        <IconPickerBase {...props} />\n      </Suspense>\n    ),\n  }),\n);\n\n"],"names":["roundedIconNames","AllIcons","name","mergedIconNames","COUNTRY_CODES","code","formatIconName","iconName","countryNameFromCode","IconPickerContent","onChange","selectedIcon","setOpen","searchTerm","setSearchTerm","useState","filteredIcons","handleClick","icon","event","jsxs","e","jsx","InputField","value","FixedSizeGrid","columnIndex","rowIndex","style","itemIndex","Tooltip","IconButton","classNames","IconRenderer","sx","className","isHovering","getFlagComponent","Icon","IconPickerBase","label","required","allowClear","disabled","errorMessage","dropdownPosition","open","mouseClickRef","useRef","buttonRef","wasOpenRef","useEffect","handleClearIcon","Popover","triggerNode","newOpen","InputLabel","Typography","IconPicker","React","props","Suspense"],"mappings":"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"}
+{"version":3,"file":"IconPicker.cjs.js","sources":["../../../../src/components/forms/icon-picker/IconPicker.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { FixedSizeGrid, type GridChildComponentProps } from 'react-window';\nimport * as AllIcons from '@mui/icons-material';\nimport { IconButton, type SvgIconOwnProps } from '@mui/material';\nimport { Popover, Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputField } from \"../input-field/InputField\";\nimport { COUNTRY_CODES, countryNameFromCode } from \"../../../types/icon-picker\";\nimport { getFlagComponent } from \"../../../utils/countryFlags\";\nimport { InputLabel } from '../shared/InputLabel';\n\nconst roundedIconNames = Object.keys(AllIcons).filter((name) =>\n  name?.endsWith(\"Rounded\")\n);\n\n// Merge icon names and country codes for the picker\nconst mergedIconNames = [\n  ...(roundedIconNames || []),\n  ...(COUNTRY_CODES || []).map((code) => `flag-${code}`),\n];\n\n// Utility function to convert camelCase to human-readable format\nconst formatIconName = (iconName: string): string => {\n  // Handle flag icons\n  if (iconName?.startsWith(\"flag-\")) {\n    const code = iconName?.replace(\"flag-\", \"\");\n    return countryNameFromCode(code || \"\") || code;\n  }\n\n  // Convert camelCase to space-separated words\n  // e.g., \"PersonRounded\" -> \"Person Rounded\"\n  return iconName.replaceAll(/([A-Z])/g, \" $1\").trim();\n};\n\n/** Ant Design `Popover` placement for the icon panel (bottom edge of the trigger). */\nexport type IconPickerDropdownPosition = 'bottom' | 'bottomLeft' | 'bottomRight';\n\nexport interface IconPickerContentProps {\n  selectedIcon: string | null;\n  onChange: (iconName: string | null) => void;\n  label?: string;\n  required?: boolean;\n  allowClear?: boolean;\n  disabled?: boolean;\n  errorMessage?: string;\n  /** Popover placement: `bottom` | `bottomLeft` | `bottomRight`. Default: `bottom`. */\n  dropdownPosition?: IconPickerDropdownPosition;\n}\n\ninterface IconPickerContentInternalProps {\n  onChange: (iconName: string | null) => void;\n  selectedIcon: string | null;\n  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst IconPickerContent = ({\n  onChange,\n  selectedIcon,\n  setOpen,\n}: IconPickerContentInternalProps) => {\n  const [searchTerm, setSearchTerm] = useState<string>(\"\");\n\n  // Filter both icons and flags\n  const filteredIcons = (mergedIconNames || []).filter((name) => {\n    if (name?.startsWith(\"flag-\")) {\n      // For flags, allow search by country code or country name\n      const code = name?.replace(\"flag-\", \"\");\n      return (\n        code\n          ?.toLowerCase()\n          ?.includes(searchTerm?.trim()?.toLowerCase() || \"\") ||\n        countryNameFromCode(code || \"\")\n          ?.toLowerCase()\n          ?.includes(searchTerm?.trim()?.toLowerCase() || \"\")\n      );\n    }\n    return name\n      ?.trim()\n      ?.toLowerCase()\n      ?.includes(searchTerm?.trim()?.toLowerCase() || \"\");\n  });\n\n  const handleClick = (icon: string, event: React.MouseEvent) => {\n    event.stopPropagation();\n    if (selectedIcon === icon) {\n      onChange?.(null);\n      return;\n    }\n    onChange?.(icon);\n    setOpen?.(false);\n  };\n\n  return (\n    <div \n      className=\"flex flex-col gap-3\"\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.preventDefault();\n          e.stopPropagation();\n        }\n      }}\n    >\n      <InputField\n        id={`input-field-icon-picker`}\n        placeholder=\"Search icons...\"\n        onChange={(value) => setSearchTerm(value || \"\")}\n        fieldSuffix={\n          <AllIcons.Search className=\"!w-4 !h-4 text-neutral-400\" />\n        }\n      />\n      <FixedSizeGrid\n        columnCount={5}\n        rowCount={Math.ceil((filteredIcons?.length || 0) / 5)}\n        columnWidth={40}\n        rowHeight={40}\n        width={220}\n        height={240}\n      >\n        {({ columnIndex, rowIndex, style }: GridChildComponentProps) => {\n          const itemIndex = rowIndex * 5 + columnIndex;\n          const iconName = filteredIcons?.[itemIndex];\n          return iconName ? (\n            <div style={style} className=\"p-1\">\n              <Tooltip title={formatIconName(iconName)} placement='bottom'>\n                <IconButton\n                type='button'\n                  className={classNames(\n                    \"flex items-center justify-center  !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700\",\n                    {\n                      \"!bg-primary-50 dark:!bg-black-800\":\n                        selectedIcon === iconName,\n                    }\n                  )}\n                  onClick={(event) => handleClick(iconName, event)}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter') {\n                      e.preventDefault();\n                      e.stopPropagation();\n                    }\n                  }}\n                >\n                  <IconRenderer\n                    iconName={iconName}\n                    className=\"!w-5 !h-5 text-neutral-900 dark:text-white\"\n                  />\n                </IconButton>\n              </Tooltip>\n            </div>\n          ) : null;\n        }}\n      </FixedSizeGrid>\n    </div>\n  );\n};\n\ninterface IconRendererProps {\n  iconName: string;\n  sx?: SvgIconOwnProps['sx'];\n  className?: string;\n  isHovering?: boolean;\n}\n\nexport const IconRenderer = ({ iconName, sx, className, isHovering }: IconRendererProps) => {\n  // Render flag if iconName starts with 'flag-'\n  if (iconName?.startsWith?.('flag-')) {\n    const code = iconName?.replace('flag-', '');\n    return getFlagComponent?.(code || '', isHovering || false) || <div>-</div>;\n  }\n  const Icon = AllIcons?.[iconName as keyof typeof AllIcons] as React.ComponentType<{\n    sx?: SvgIconOwnProps['sx'];\n    className?: string;\n    isHovering?: boolean;\n  }>;\n\n  if (!Icon) {\n    return <div>-</div>;\n  }\n\n  return <Icon sx={sx} className={className} isHovering={isHovering} />;\n};\n\nconst IconPickerBase = ({\n  selectedIcon,\n  onChange,\n  label,\n  required = false,\n  allowClear = true,\n  disabled = false,\n  errorMessage,\n  dropdownPosition = 'bottom',\n}: IconPickerContentProps) => {\n  const [open, setOpen] = useState(false);\n  const mouseClickRef = useRef(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const wasOpenRef = useRef(false);\n\n  useEffect(() => {\n    if (wasOpenRef.current && !open) {\n      buttonRef.current?.focus();\n    }\n    wasOpenRef.current = open;\n  }, [open]);\n  const handleClearIcon = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange?.('');\n  };\n\n  return (\n    <Popover\n      arrow={false}\n      placement={dropdownPosition}\n      trigger='click'\n      getPopupContainer={(triggerNode) => triggerNode?.parentElement || document.body}\n      open={open}\n      onOpenChange={(newOpen) => {\n        if (newOpen) {\n          if (mouseClickRef.current) {\n            setOpen(true);\n          }\n          mouseClickRef.current = false;\n        } else {\n          setOpen(false);\n        }\n      }}\n      content={<IconPickerContent onChange={onChange} selectedIcon={selectedIcon} setOpen={setOpen} />}\n    >\n      <div className='flex flex-col gap-1'>\n        {label ? (\n          <InputLabel label={label || \"\"} required={required || false} />\n        ) : null}\n        <button\n          ref={buttonRef}\n          type='button'\n          id={`btn-icon-picker-icon-${selectedIcon ? 'selected' : 'unselected'}`}\n          className={`lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${\n            disabled ? 'cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800' : 'bg-white dark:bg-black-800'\n          } ${errorMessage ? 'border-red-500' : 'focus:border-primary-600 dark:focus:border-primary-400'} flex items-center justify-between gap-2`}\n          disabled={disabled}\n          onClick={(e) => {\n            if (disabled) {\n              e.preventDefault();\n              e.stopPropagation();\n              return;\n            }\n            if (e.detail > 0) {\n              mouseClickRef.current = true;\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              e.preventDefault();\n              if (!open) {\n                const form = (e.currentTarget as HTMLElement).closest('form');\n                const submitBtn = form?.querySelector('button[type=\"submit\"]') as HTMLButtonElement | null;\n                submitBtn?.click();\n              }\n            }\n          }}\n        >\n          {selectedIcon ? (\n            <IconRenderer iconName={selectedIcon} className='!w-5 !h-5 text-neutral-900 dark:text-white' />\n          ) : (\n            <Typography\n              size='small'\n              variant='medium'\n              appearance='subtitle'\n            >\n              Select Icon\n            </Typography>\n          )}\n          {selectedIcon && allowClear && !disabled ? (\n            <AllIcons.CloseRounded\n              className='!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500'\n              onClick={handleClearIcon}\n            />\n          ) : (\n           null\n          )}\n        </button>\n        {errorMessage && (\n          <Typography size='extra-small' className='text-red-500 font-medium'>\n            {errorMessage}\n          </Typography>\n        )}\n      </div>\n    </Popover>\n  );\n};\n\nexport const IconPicker = React.lazy(() =>\n  Promise.resolve({\n    default: (props: IconPickerContentProps) => (\n      <Suspense fallback={<div className='min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md' />}>\n        <IconPickerBase {...props} />\n      </Suspense>\n    ),\n  }),\n);\n\n"],"names":["roundedIconNames","AllIcons","name","mergedIconNames","COUNTRY_CODES","code","formatIconName","iconName","countryNameFromCode","IconPickerContent","onChange","selectedIcon","setOpen","searchTerm","setSearchTerm","useState","filteredIcons","handleClick","icon","event","jsxs","e","jsx","InputField","value","FixedSizeGrid","columnIndex","rowIndex","style","itemIndex","Tooltip","IconButton","classNames","IconRenderer","sx","className","isHovering","getFlagComponent","Icon","IconPickerBase","label","required","allowClear","disabled","errorMessage","dropdownPosition","open","mouseClickRef","useRef","buttonRef","wasOpenRef","useEffect","handleClearIcon","Popover","triggerNode","newOpen","InputLabel","Typography","IconPicker","React","props","Suspense"],"mappings":"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"}