@lax-wp/design-system 0.14.38 → 0.14.40

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 { KeyboardArrowDownIcon } from \"../../icon\";\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  className?: string\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  className\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] h-8 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 ${className}`}\n          disabled={disabled}\n          aria-haspopup='dialog'\n          aria-expanded={open}\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='regular'\n              appearance='subtitle'\n            >\n              Select Icon\n            </Typography>\n          )}\n          <span className='flex shrink-0 items-center gap-1'>\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            <KeyboardArrowDownIcon\n              className={classNames(\n                'h-4 w-4 shrink-0 text-neutral-400 transition-transform duration-200',\n                { 'rotate-180': open }\n              )}\n            />\n          </span>\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","KeyboardArrowDownIcon","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  className?: string\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  className\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] h-8 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 ${className}`}\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='regular'\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":"yyBAYMA,EAAmB,OAAO,KAAKC,CAAQ,EAAE,OAAQC,GACrDA,GAAM,SAAS,SAAS,CAC1B,EAGMC,EAAkB,CACtB,GAAIH,GAAoB,CAAA,EACxB,IAAII,EAAAA,eAAiB,CAAA,GAAI,IAAKC,GAAS,QAAQA,CAAI,EAAE,CACvD,EAGMC,EAAkBC,GAA6B,CAEnD,GAAIA,GAAU,WAAW,OAAO,EAAG,CACjC,MAAMF,EAAOE,GAAU,QAAQ,QAAS,EAAE,EAC1C,OAAOC,sBAAoBH,GAAQ,EAAE,GAAKA,CAC5C,CAIA,OAAOE,EAAS,WAAW,WAAY,KAAK,EAAE,KAAA,CAChD,EAwBME,EAAoB,CAAC,CACzB,SAAAC,EACA,aAAAC,EACA,QAAAC,CACF,IAAsC,CACpC,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAAA,SAAiB,EAAE,EAGjDC,GAAiBb,GAAmB,CAAA,GAAI,OAAQD,GAAS,CAC7D,GAAIA,GAAM,WAAW,OAAO,EAAG,CAE7B,MAAMG,EAAOH,GAAM,QAAQ,QAAS,EAAE,EACtC,OACEG,GACI,eACA,SAASQ,GAAY,QAAQ,eAAiB,EAAE,GACpDL,EAAAA,oBAAoBH,GAAQ,EAAE,GAC1B,YAAA,GACA,SAASQ,GAAY,KAAA,GAAQ,YAAA,GAAiB,EAAE,CAExD,CACA,OAAOX,GACH,QACA,eACA,SAASW,GAAY,KAAA,GAAQ,YAAA,GAAiB,EAAE,CACtD,CAAC,EAEKI,EAAc,CAACC,EAAcC,IAA4B,CAE7D,GADAA,EAAM,gBAAA,EACFR,IAAiBO,EAAM,CACzBR,IAAW,IAAI,EACf,MACF,CACAA,IAAWQ,CAAI,EACfN,IAAU,EAAK,CACjB,EAEA,OACEQ,EAAAA,KAAC,MAAA,CACC,UAAU,sBACV,UAAYC,GAAM,CACZA,EAAE,MAAQ,UACZA,EAAE,eAAA,EACFA,EAAE,gBAAA,EAEN,EAEA,SAAA,CAAAC,EAAAA,IAACC,EAAAA,WAAA,CACC,GAAI,0BACJ,YAAY,kBACZ,SAAWC,GAAUV,EAAcU,GAAS,EAAE,EAC9C,YACEF,EAAAA,IAACrB,EAAS,OAAT,CAAgB,UAAU,4BAAA,CAA6B,CAAA,CAAA,EAG5DqB,EAAAA,IAACG,EAAAA,cAAA,CACC,YAAa,EACb,SAAU,KAAK,MAAMT,GAAe,QAAU,GAAK,CAAC,EACpD,YAAa,GACb,UAAW,GACX,MAAO,IACP,OAAQ,IAEP,SAAA,CAAC,CAAE,YAAAU,EAAa,SAAAC,EAAU,MAAAC,KAAqC,CAC9D,MAAMC,EAAYF,EAAW,EAAID,EAC3BnB,EAAWS,IAAgBa,CAAS,EAC1C,OAAOtB,EACLe,EAAAA,IAAC,MAAA,CAAI,MAAAM,EAAc,UAAU,MAC3B,SAAAN,EAAAA,IAACQ,EAAAA,QAAA,CAAQ,MAAOxB,EAAeC,CAAQ,EAAG,UAAU,SAClD,SAAAe,EAAAA,IAACS,EAAAA,WAAA,CACD,KAAK,SACH,UAAWC,EACT,6FACA,CACE,oCACErB,IAAiBJ,CAAA,CACrB,EAEF,QAAUY,GAAUF,EAAYV,EAAUY,CAAK,EAC/C,UAAYE,GAAM,CACZA,EAAE,MAAQ,UACZA,EAAE,eAAA,EACFA,EAAE,gBAAA,EAEN,EAEA,SAAAC,EAAAA,IAACW,EAAA,CACC,SAAA1B,EACA,UAAU,4CAAA,CAAA,CACZ,CAAA,CACF,CACF,EACF,EACE,IACN,CAAA,CAAA,CACF,CAAA,CAAA,CAGN,EASa0B,EAAe,CAAC,CAAE,SAAA1B,EAAU,GAAA2B,EAAI,UAAAC,EAAW,WAAAC,KAAoC,CAE1F,GAAI7B,GAAU,aAAa,OAAO,EAAG,CACnC,MAAMF,EAAOE,GAAU,QAAQ,QAAS,EAAE,EAC1C,OAAO8B,qBAAmBhC,GAAQ,GAAI+B,GAAc,EAAK,GAAKd,EAAAA,IAAC,OAAI,SAAA,GAAA,CAAC,CACtE,CACA,MAAMgB,EAAOrC,IAAWM,CAAiC,EAMzD,OAAK+B,EAIEhB,EAAAA,IAACgB,EAAA,CAAK,GAAAJ,EAAQ,UAAAC,EAAsB,WAAAC,CAAA,CAAwB,EAH1Dd,EAAAA,IAAC,OAAI,SAAA,GAAA,CAAC,CAIjB,EAEMiB,EAAiB,CAAC,CACtB,aAAA5B,EACA,SAAAD,EACA,MAAA8B,EACA,SAAAC,EAAW,GACX,WAAAC,EAAa,GACb,SAAAC,EAAW,GACX,aAAAC,EACA,iBAAAC,EAAmB,SACnB,UAAAV,CACF,IAA8B,CAC5B,KAAM,CAACW,EAAMlC,CAAO,EAAIG,EAAAA,SAAS,EAAK,EAChCgC,EAAgBC,EAAAA,OAAO,EAAK,EAC5BC,EAAYD,EAAAA,OAA0B,IAAI,EAC1CE,EAAaF,EAAAA,OAAO,EAAK,EAE/BG,EAAAA,UAAU,IAAM,CACVD,EAAW,SAAW,CAACJ,GACzBG,EAAU,SAAS,MAAA,EAErBC,EAAW,QAAUJ,CACvB,EAAG,CAACA,CAAI,CAAC,EACT,MAAMM,EAAmB/B,GAAwB,CAC/CA,EAAE,gBAAA,EACFX,IAAW,EAAE,CACf,EAEA,OACEY,EAAAA,IAAC+B,EAAAA,QAAA,CACC,MAAO,GACP,UAAWR,EACX,QAAQ,QACR,kBAAoBS,GAAgBA,GAAa,eAAiB,SAAS,KAC3E,KAAAR,EACA,aAAeS,GAAY,CACrBA,GACER,EAAc,SAChBnC,EAAQ,EAAI,EAEdmC,EAAc,QAAU,IAExBnC,EAAQ,EAAK,CAEjB,EACA,QAASU,EAAAA,IAACb,EAAA,CAAkB,SAAAC,EAAoB,aAAAC,EAA4B,QAAAC,EAAkB,EAE9F,SAAAQ,EAAAA,KAAC,MAAA,CAAI,UAAU,sBACZ,SAAA,CAAAoB,EACClB,EAAAA,IAACkC,cAAW,MAAOhB,GAAS,GAAI,SAAUC,GAAY,GAAO,EAC3D,KACJrB,EAAAA,KAAC,SAAA,CACC,IAAK6B,EACL,KAAK,SACL,GAAI,wBAAwBtC,EAAe,WAAa,YAAY,GACpE,UAAW,mEACTgC,EAAW,gEAAkE,4BAC/E,IAAIC,EAAe,iBAAmB,wDAAwD,4CAA4CT,CAAS,GACnJ,SAAAQ,EACA,QAAUtB,GAAM,CACd,GAAIsB,EAAU,CACZtB,EAAE,eAAA,EACFA,EAAE,gBAAA,EACF,MACF,CACIA,EAAE,OAAS,IACb0B,EAAc,QAAU,GAE5B,EACA,UAAY1B,GAAM,CACZA,EAAE,MAAQ,UACZA,EAAE,eAAA,EACGyB,GACWzB,EAAE,cAA8B,QAAQ,MAAM,GACpC,cAAc,uBAAuB,GAClD,MAAA,EAGjB,EAEC,SAAA,CAAAV,QACEsB,EAAA,CAAa,SAAUtB,EAAc,UAAU,6CAA6C,EAE7FW,EAAAA,IAACmC,EAAAA,WAAA,CACC,KAAK,QACL,QAAQ,UACR,WAAW,WACZ,SAAA,aAAA,CAAA,EAIF9C,GAAgB+B,GAAc,CAACC,EAC9BrB,EAAAA,IAACrB,EAAS,aAAT,CACC,UAAU,8IACV,QAASmD,CAAA,CAAA,EAGZ,IAAA,CAAA,CAAA,EAGFR,GACCtB,EAAAA,IAACmC,EAAAA,WAAA,CAAW,KAAK,cAAc,UAAU,2BACtC,SAAAb,CAAA,CACH,CAAA,CAAA,CAEJ,CAAA,CAAA,CAGN,EAEac,EAAaC,EAAM,KAAK,IACnC,QAAQ,QAAQ,CACd,QAAUC,GACRtC,EAAAA,IAACuC,EAAAA,UAAS,SAAUvC,EAAAA,IAAC,MAAA,CAAI,UAAU,yEAAyE,EAC1G,SAAAA,EAAAA,IAACiB,EAAA,CAAgB,GAAGqB,EAAO,CAAA,CAC7B,CAAA,CAEH,CACH"}

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

@@ -1,46 +1,45 @@
-import { jsx as t, jsxs as h } from "react/jsx-runtime";
-import x from "../../../_virtual/index.es.js";
-import I, { Suspense as P, useState as y, useRef as b, useEffect as S } from "react";
-import { FixedSizeGrid as D } from "react-window";
-import * as g from "@mui/icons-material";
-import { IconButton as R } from "@mui/material";
+import { jsx as t, jsxs as b } from "react/jsx-runtime";
+import N from "../../../_virtual/index.es.js";
+import I, { Suspense as P, useState as x, useRef as g, useEffect as S } from "react";
+import { FixedSizeGrid as R } from "react-window";
+import * as h from "@mui/icons-material";
+import { IconButton as D } from "@mui/material";
 import { Popover as L, Tooltip as E } from "antd";
 import { Typography as w } from "../../data-display/typography/Typography.es.js";
 import { InputField as O } from "../input-field/InputField.es.js";
-import { COUNTRY_CODES as T, countryNameFromCode as C } from "../../../types/icon-picker.es.js";
+import { COUNTRY_CODES as T, countryNameFromCode as y } from "../../../types/icon-picker.es.js";
 import { getFlagComponent as $ } from "../../../utils/countryFlags.es.js";
 import { InputLabel as j } from "../shared/InputLabel.es.js";
-import { KeyboardArrowDownIcon as W } from "../../icon/icons.generated.es.js";
-const z = Object.keys(g).filter(
+const W = Object.keys(h).filter(
   (e) => e?.endsWith("Rounded")
-), A = [
-  ...z || [],
+), z = [
+  ...W || [],
   ...(T || []).map((e) => `flag-${e}`)
 ], B = (e) => {
   if (e?.startsWith("flag-")) {
     const n = e?.replace("flag-", "");
-    return C(n || "") || n;
+    return y(n || "") || n;
   }
   return e.replaceAll(/([A-Z])/g, " $1").trim();
 }, F = ({
   onChange: e,
   selectedIcon: n,
-  setOpen: m
+  setOpen: f
 }) => {
-  const [c, f] = y(""), a = (A || []).filter((r) => {
+  const [c, m] = x(""), a = (z || []).filter((r) => {
     if (r?.startsWith("flag-")) {
-      const s = r?.replace("flag-", "");
-      return s?.toLowerCase()?.includes(c?.trim()?.toLowerCase() || "") || C(s || "")?.toLowerCase()?.includes(c?.trim()?.toLowerCase() || "");
+      const i = r?.replace("flag-", "");
+      return i?.toLowerCase()?.includes(c?.trim()?.toLowerCase() || "") || y(i || "")?.toLowerCase()?.includes(c?.trim()?.toLowerCase() || "");
     }
     return r?.trim()?.toLowerCase()?.includes(c?.trim()?.toLowerCase() || "");
-  }), d = (r, s) => {
-    if (s.stopPropagation(), n === r) {
+  }), d = (r, i) => {
+    if (i.stopPropagation(), n === r) {
       e?.(null);
       return;
     }
-    e?.(r), m?.(!1);
+    e?.(r), f?.(!1);
   };
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ b(
     "div",
     {
       className: "flex flex-col gap-3",
@@ -53,12 +52,12 @@ const z = Object.keys(g).filter(
           {
             id: "input-field-icon-picker",
             placeholder: "Search icons...",
-            onChange: (r) => f(r || ""),
-            fieldSuffix: /* @__PURE__ */ t(g.Search, { className: "!w-4 !h-4 text-neutral-400" })
+            onChange: (r) => m(r || ""),
+            fieldSuffix: /* @__PURE__ */ t(h.Search, { className: "!w-4 !h-4 text-neutral-400" })
           }
         ),
         /* @__PURE__ */ t(
-          D,
+          R,
           {
             columnCount: 5,
             rowCount: Math.ceil((a?.length || 0) / 5),
@@ -66,26 +65,26 @@ const z = Object.keys(g).filter(
             rowHeight: 40,
             width: 220,
             height: 240,
-            children: ({ columnIndex: r, rowIndex: s, style: l }) => {
-              const p = s * 5 + r, i = a?.[p];
-              return i ? /* @__PURE__ */ t("div", { style: l, className: "p-1", children: /* @__PURE__ */ t(E, { title: B(i), placement: "bottom", children: /* @__PURE__ */ t(
-                R,
+            children: ({ columnIndex: r, rowIndex: i, style: u }) => {
+              const p = i * 5 + r, l = a?.[p];
+              return l ? /* @__PURE__ */ t("div", { style: u, className: "p-1", children: /* @__PURE__ */ t(E, { title: B(l), placement: "bottom", children: /* @__PURE__ */ t(
+                D,
                 {
                   type: "button",
-                  className: x(
+                  className: N(
                     "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
+                      "!bg-primary-50 dark:!bg-black-800": n === l
                     }
                   ),
-                  onClick: (u) => d(i, u),
-                  onKeyDown: (u) => {
-                    u.key === "Enter" && (u.preventDefault(), u.stopPropagation());
+                  onClick: (s) => d(l, s),
+                  onKeyDown: (s) => {
+                    s.key === "Enter" && (s.preventDefault(), s.stopPropagation());
                   },
                   children: /* @__PURE__ */ t(
-                    v,
+                    C,
                     {
-                      iconName: i,
+                      iconName: l,
                       className: "!w-5 !h-5 text-neutral-900 dark:text-white"
                     }
                   )
@@ -97,29 +96,29 @@ const z = Object.keys(g).filter(
       ]
     }
   );
-}, v = ({ iconName: e, sx: n, className: m, isHovering: c }) => {
+}, C = ({ iconName: e, sx: n, className: f, isHovering: c }) => {
   if (e?.startsWith?.("flag-")) {
     const a = e?.replace("flag-", "");
     return $?.(a || "", c || !1) || /* @__PURE__ */ t("div", { children: "-" });
   }
-  const f = g?.[e];
-  return f ? /* @__PURE__ */ t(f, { sx: n, className: m, isHovering: c }) : /* @__PURE__ */ t("div", { children: "-" });
-}, K = ({
+  const m = h?.[e];
+  return m ? /* @__PURE__ */ t(m, { sx: n, className: f, isHovering: c }) : /* @__PURE__ */ t("div", { children: "-" });
+}, A = ({
   selectedIcon: e,
   onChange: n,
-  label: m,
+  label: f,
   required: c = !1,
-  allowClear: f = !0,
+  allowClear: m = !0,
   disabled: a = !1,
   errorMessage: d,
   dropdownPosition: r = "bottom",
-  className: s
+  className: i
 }) => {
-  const [l, p] = y(!1), i = b(!1), u = b(null), k = b(!1);
+  const [u, p] = x(!1), l = g(!1), s = g(null), k = g(!1);
   S(() => {
-    k.current && !l && u.current?.focus(), k.current = l;
-  }, [l]);
-  const N = (o) => {
+    k.current && !u && s.current?.focus(), k.current = u;
+  }, [u]);
+  const v = (o) => {
     o.stopPropagation(), n?.("");
   };
   return /* @__PURE__ */ t(
@@ -129,35 +128,33 @@ const z = Object.keys(g).filter(
       placement: r,
       trigger: "click",
       getPopupContainer: (o) => o?.parentElement || document.body,
-      open: l,
+      open: u,
       onOpenChange: (o) => {
-        o ? (i.current && p(!0), i.current = !1) : p(!1);
+        o ? (l.current && p(!0), l.current = !1) : p(!1);
       },
       content: /* @__PURE__ */ t(F, { onChange: n, selectedIcon: e, setOpen: p }),
-      children: /* @__PURE__ */ h("div", { className: "flex flex-col gap-1", children: [
-        m ? /* @__PURE__ */ t(j, { label: m || "", required: c || !1 }) : null,
-        /* @__PURE__ */ h(
+      children: /* @__PURE__ */ b("div", { className: "flex flex-col gap-1", children: [
+        f ? /* @__PURE__ */ t(j, { label: f || "", required: c || !1 }) : null,
+        /* @__PURE__ */ b(
           "button",
           {
-            ref: u,
+            ref: s,
             type: "button",
             id: `btn-icon-picker-icon-${e ? "selected" : "unselected"}`,
-            className: `lax-form-trigger min-w-[83px] h-8 py-1.5 px-3 rounded-md border ${a ? "cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800" : "bg-white dark:bg-black-800"} ${d ? "border-red-500" : "focus:border-primary-600 dark:focus:border-primary-400"} flex items-center justify-between gap-2 ${s}`,
+            className: `lax-form-trigger min-w-[83px] h-8 py-1.5 px-3 rounded-md border ${a ? "cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800" : "bg-white dark:bg-black-800"} ${d ? "border-red-500" : "focus:border-primary-600 dark:focus:border-primary-400"} flex items-center justify-between gap-2 ${i}`,
             disabled: a,
-            "aria-haspopup": "dialog",
-            "aria-expanded": l,
             onClick: (o) => {
               if (a) {
                 o.preventDefault(), o.stopPropagation();
                 return;
               }
-              o.detail > 0 && (i.current = !0);
+              o.detail > 0 && (l.current = !0);
             },
             onKeyDown: (o) => {
-              o.key === "Enter" && (o.preventDefault(), l || o.currentTarget.closest("form")?.querySelector('button[type="submit"]')?.click());
+              o.key === "Enter" && (o.preventDefault(), u || o.currentTarget.closest("form")?.querySelector('button[type="submit"]')?.click());
             },
             children: [
-              e ? /* @__PURE__ */ t(v, { iconName: e, className: "!w-5 !h-5 text-neutral-900 dark:text-white" }) : /* @__PURE__ */ t(
+              e ? /* @__PURE__ */ t(C, { iconName: e, className: "!w-5 !h-5 text-neutral-900 dark:text-white" }) : /* @__PURE__ */ t(
                 w,
                 {
                   size: "small",
@@ -166,24 +163,13 @@ const z = Object.keys(g).filter(
                   children: "Select Icon"
                 }
               ),
-              /* @__PURE__ */ h("span", { className: "flex shrink-0 items-center gap-1", children: [
-                e && f && !a ? /* @__PURE__ */ t(
-                  g.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: N
-                  }
-                ) : null,
-                /* @__PURE__ */ t(
-                  W,
-                  {
-                    className: x(
-                      "h-4 w-4 shrink-0 text-neutral-400 transition-transform duration-200",
-                      { "rotate-180": l }
-                    )
-                  }
-                )
-              ] })
+              e && m && !a ? /* @__PURE__ */ t(
+                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: v
+                }
+              ) : null
             ]
           }
         ),
@@ -191,13 +177,13 @@ const z = Object.keys(g).filter(
       ] })
     }
   );
-}, re = I.lazy(
+}, ee = I.lazy(
   () => Promise.resolve({
-    default: (e) => /* @__PURE__ */ t(P, { fallback: /* @__PURE__ */ t("div", { className: "min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md" }), children: /* @__PURE__ */ t(K, { ...e }) })
+    default: (e) => /* @__PURE__ */ t(P, { fallback: /* @__PURE__ */ t("div", { className: "min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md" }), children: /* @__PURE__ */ t(A, { ...e }) })
   })
 );
 export {
-  re as IconPicker,
-  v as IconRenderer
+  ee as IconPicker,
+  C as IconRenderer
 };
 //# sourceMappingURL=IconPicker.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconPicker.es.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 { KeyboardArrowDownIcon } from \"../../icon\";\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  className?: string\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  className\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] h-8 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 ${className}`}\n          disabled={disabled}\n          aria-haspopup='dialog'\n          aria-expanded={open}\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='regular'\n              appearance='subtitle'\n            >\n              Select Icon\n            </Typography>\n          )}\n          <span className='flex shrink-0 items-center gap-1'>\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            <KeyboardArrowDownIcon\n              className={classNames(\n                'h-4 w-4 shrink-0 text-neutral-400 transition-transform duration-200',\n                { 'rotate-180': open }\n              )}\n            />\n          </span>\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","KeyboardArrowDownIcon","IconPicker","React","props","Suspense"],"mappings":"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"}
+{"version":3,"file":"IconPicker.es.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  className?: string\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  className\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] h-8 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 ${className}`}\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='regular'\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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"}

package/dist/components/forms/md-input/RichMarkdownInput.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("../../../_virtual/index.cjs.js"),N=require("react"),x=require("@mui/icons-material"),ue=require("../../data-display/modal/Modal.cjs.js"),u=require("../../button/Button.cjs.js"),me=require("../../navigation/tabs/Tabs.cjs.js"),K=require("./MarkdownPreview.cjs.js"),L=require("./listEditing.cjs.js"),O=require("../../tooltip/Tooltip.cjs.js"),A=require("framer-motion"),H=require("../../data-display/typography/Typography.cjs.js"),he=require("../shared/InputLabel.cjs.js"),U=require("../../icon/icons.generated.cjs.js"),fe=["edit","preview"],pe=({className:p,size:n=16})=>e.jsxs("svg",{width:n,height:n,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:p,children:[e.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),V=N.forwardRef(({id:p,value:n="",defaultValue:D,onChange:m,placeholder:W="Enter markdown content...",minRows:G=4,maxRows:J=20,isDisabled:l=!1,className:Q,textareaClassName:X,previewClassName:E,label:v,labelClassName:Y,isRequiredConditional:Z,required:F=!1,showPreviewOnModal:ee=!1,maxLength:a,linkTarget:S="_blank",errorMessage:k,tooltip:_,originalCase:R,suffixIcon:j,isClearable:y,inputref:C,showFormattingHelp:te=!0,onKeyDown:se,noIndent:I=!1,showMinimalPreview:T=!1,acceptAdvanceContent:g=!0},i)=>{const[c,ne]=N.useState("edit"),[ae,M]=N.useState(!1),h=N.useRef(null),r=p||`rich-md-input-${Math.random().toString(36).slice(2,11)}`,re=n.length,d=(t,s="",o="")=>{const f=i?.current||h.current;if(!f)return;const q=f.selectionStart,z=f.selectionEnd,w=n.substring(q,z),oe=w||o,xe=n.substring(0,q)+t+oe+s+n.substring(z);m(xe),setTimeout(()=>{const B=q+t.length+(w?w.length:0);f.focus(),f.setSelectionRange(B,B+(w?0:o.length))},0)},$=t=>{const s=i?.current||h.current;if(!s)return;const o=L.toggleList(n,s.selectionStart,s.selectionEnd,t);a&&o.value.length>a||(m(o.value),setTimeout(()=>{s.focus(),s.setSelectionRange(o.caret,o.caret)},0))},le=()=>{const t=i?.current||h.current;if(!t)return!1;const s=L.continueList(n,t.selectionStart,t.selectionEnd);return!s||a&&s.value.length>a?!1:(m(s.value),setTimeout(()=>{t.focus(),t.setSelectionRange(s.caret,s.caret)},0),!0)},ie=t=>{if(se?.(t),t.key==="Enter"&&!t.shiftKey&&!t.altKey&&!t.metaKey&&!t.ctrlKey&&!t.defaultPrevented){le()&&t.preventDefault();return}if(t.metaKey||t.ctrlKey)switch(t.key.toLowerCase()){case"b":t.preventDefault(),d("**","**","bold text");break;case"i":t.preventDefault(),d("*","*","italic text");break;case"u":t.preventDefault(),d("<u>","</u>","underlined text");break;case"k":t.preventDefault(),d("[","](url)","link text");break;case"e":t.preventDefault(),d("```","```","code");break}},ce=()=>{m(""),(i?.current||h.current)?.focus()},de=(()=>{const t=(n.match(/\n/g)||[]).length+1;return Math.min(J,Math.max(G,t))})(),P=e.jsxs("div",{className:b("flex flex-col",Q),children:[e.jsxs("div",{className:`flex flex-row items-center ${v?"justify-between":"justify-end"} w-full`,children:[v&&e.jsx("label",{id:r,htmlFor:r,className:`mb-1 text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${R?"":"capitalize"} ${Y||"!uppercse"}`,children:e.jsx("div",{className:"flex flex-wrap items-center justify-between w-full",children:e.jsx("div",{className:"inline-flex flex-wrap items-center gap-1",children:e.jsx(he.InputLabel,{label:v||"",required:F||!1,isRequiredConditional:Z||!1})})})}),te&&e.jsx(O,{placement:"bottom-end",title:e.jsxs("div",{className:"flex flex-col items-start justify-center py-2 px-3 min-w-[220px] gap-2 bg-neutral-900 rounded-lg",children:[e.jsxs("div",{className:"flex flex-col items-start justify-start gap-1 w-full",children:[e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"**bold**"})}),e.jsxs("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:["→ ",e.jsx("strong",{children:"bold"})," text"]})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"*italic*"})}),e.jsxs("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:["→ ",e.jsx("em",{children:"italic"})," text"]})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"`code`"})}),e.jsxs("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:["→ ",e.jsx("code",{children:"inline code"})]})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"<u>text</u>"})}),e.jsxs("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:["→ ",e.jsx("u",{children:"underline"})]})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"~~strike~~"})}),e.jsxs("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:["→ ",e.jsx("del",{children:"strike"})]})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"- item"})}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"→ bullet list"})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"1. item"})}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"→ numbered list"})]}),g&&e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"## heading"})}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"→ heading 2"})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"[link](url)"})}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"→ hyperlink"})]})]}),g&&e.jsx(e.Fragment,{children:e.jsxs("div",{className:"flex flex-col items-start justify-start gap-1 w-full",children:[e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"> quote"})}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"→ blockquote"})]}),e.jsxs("div",{className:"flex flex-col items-start justify-start gap-0.5 w-full mt-0.5",children:[e.jsxs("div",{className:"flex flex-row items-center gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"Table:"})]}),e.jsxs("div",{className:"flex flex-col px-1 py-0.5 bg-neutral-700 ml-2 rounded-sm gap-0",children:[e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter whitespace-nowrap",children:"| Header 1 | Header 2 | Header 3 |"}),e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter whitespace-nowrap",children:"| :--- | :---: | ---: |"}),e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter whitespace-nowrap",children:"| Left | Center | Right |"})]})]})]})})]}),children:e.jsx(H.Typography,{className:"mb-2 text-xs font-medium text-primary-700 inline-flex items-center gap-1 cursor-pointer",children:"Formatting help ?"})})]}),e.jsxs("div",{className:b("flex flex-col border shadow-[0px_1px_2px_rgba(0,0,0,0.05)] rounded-lg bg-white dark:bg-black-700 w-full",k?"border-red-300 focus-within:border-red-500 focus-within:shadow-[0_0_0_1.5px_var(--color-red-200)]":"border-[#EAECF0] dark:border-black-600 focus-within:border-primary-600 dark:focus-within:border-primary-400 focus-within:shadow-[0_0_0_1.5px_var(--color-primary-100)] dark:focus-within:shadow-[0_0_0_1.5px_var(--color-primary-950)]"),children:[e.jsxs("div",{className:b("flex flex-row justify-between items-center px-3 py-2 gap-2 h-11 rounded-t-lg bg-[#F9FAFB] dark:bg-black-600 border-b border-[#EAECF0] dark:border-black-600"),children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(u,{id:`${r}-bold`,type:"button",onClick:()=>d("**","**","bold text"),disabled:l||c==="preview",className:"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Bold (Ctrl+B)",children:e.jsx(x.FormatBold,{sx:{fontSize:20,color:"#667085"},className:"dark:text-neutral-400"})}),e.jsx(u,{id:`${r}-italic`,type:"button",onClick:()=>d("*","*","italic text"),disabled:l||c==="preview",className:"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Italic (Ctrl+I)",children:e.jsx(x.FormatItalic,{sx:{fontSize:20,color:"#667085"},className:"dark:text-neutral-400"})}),e.jsx(u,{id:`${r}-underline`,type:"button",onClick:()=>d("<u>","</u>","underlined text"),disabled:l||c==="preview",className:"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Underline (Ctrl+U)",children:e.jsx(x.FormatUnderlined,{sx:{fontSize:20,color:"#667085"},className:"dark:text-neutral-400"})}),e.jsx("div",{className:"w-px h-5 bg-[#EAECF0] dark:bg-black-500 rounded-full"}),e.jsx(u,{id:`${r}-numbered-list`,type:"button",onClick:()=>$("ordered"),disabled:l||c==="preview",className:"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Numbered List",children:e.jsx(x.FormatListNumbered,{sx:{fontSize:20,color:"#667085"},className:"dark:text-neutral-400"})}),e.jsx(u,{id:`${r}-bullet-list`,type:"button",onClick:()=>$("bullet"),disabled:l||c==="preview",className:"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Bullet List",children:e.jsx(x.FormatListBulleted,{sx:{fontSize:20,color:"#667085"},className:"dark:text-neutral-400"})})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[a&&e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("span",{className:"text-sm font-medium text-[#475467] dark:text-neutral-400",children:[re,"/",a]}),e.jsx("div",{className:"w-px h-6 bg-[#EAECF0] dark:bg-black-500 rounded-full"})]}),ee?e.jsx(u,{id:`${r}-expand`,type:"button",onClick:()=>M(!0),disabled:l,className:"!p-0.5 !min-w-0 !h-auto ml-1 !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Expand Preview",children:e.jsx(x.OpenInFull,{sx:{fontSize:16,color:"#667085"},className:"dark:text-neutral-400"})}):e.jsx(me.Tabs,{variant:"switch",tabs:fe,activeTab:c,onTabClick:t=>ne(t),height:"h-5",iconsOnly:!0,tabIcons:{edit:e.jsx(U.EditIcon,{className:"h-md w-md dark:text-neutral-400"}),preview:e.jsx(U.VisibilityIcon,{className:"h-md w-md dark:text-neutral-400"})},className:"rounded-lg"})]})]}),e.jsx("div",{className:"px-3 py-2 relative",children:c==="edit"?e.jsxs(e.Fragment,{children:[e.jsx("textarea",{ref:t=>{typeof i=="function"?i(t):i&&(i.current=t),h.current=t,C&&(C.current=t)},id:r,value:n,defaultValue:D,onChange:t=>{const s=t.target.value;(!a||s.length<=a)&&m(s)},onKeyDown:ie,placeholder:W,rows:de,disabled:l,required:F,maxLength:a,className:b("w-full bg-transparent !focus:ring-0 !focus:border-none","font-inter font-medium text-sm leading-5","text-[#101828] dark:text-neutral-100","placeholder:text-neutral-400 dark:placeholder:text-neutral-500","focus:outline-none resize-none","scrollbar-none","[&::-webkit-scrollbar]:hidden","[-ms-overflow-style:none]","[scrollbar-width:none]",{"text-neutral-400 dark:text-neutral-500 cursor-not-allowed":l},{"pr-20":y||j},X)}),(y||j)&&c==="edit"&&e.jsxs("div",{className:"absolute right-1 top-2 flex items-center gap-1",children:[y&&n&&e.jsx("button",{id:`btn-input-field-clear-${p}`,className:"absolute inset-y-0 flex items-center cursor-pointer top-2 right-1 focus:outline-none",onClick:ce,type:"button",children:e.jsx(pe,{className:"text-neutral-300 dark:text-black-500 hover:text-neutral-400 dark:hover:text-black-400 transition-colors",size:16})}),j&&e.jsx("div",{className:"flex items-center",children:j})]})]}):e.jsx("div",{className:"w-full min-h-[92px] max-h-[400px] overflow-y-auto",children:e.jsx(K.MarkdownPreview,{content:n,linkTarget:S,className:E,noIndent:I,showMinimalPreview:T,acceptAdvanceContent:g})})})]}),e.jsx(ue.Modal,{open:ae,onCancel:()=>M(!1),title:"Markdown Preview",width:900,footer:null,children:e.jsx("div",{className:"max-h-[calc(100vh-200px)] overflow-y-auto p-4",children:e.jsx(K.MarkdownPreview,{content:n,linkTarget:S,className:E,noIndent:I,showMinimalPreview:T,acceptAdvanceContent:g})})}),e.jsx(A.AnimatePresence,{children:k&&e.jsx(A.motion.div,{initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.2},children:e.jsx(H.Typography,{className:"mt-1 text-error-500",appearance:"custom",size:"extra-small",variant:"medium",children:k})})})]});return _?e.jsx(O,{title:_,children:P}):P});V.displayName="RichMarkdownInput";exports.RichMarkdownInput=V;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("../../../_virtual/index.cjs.js"),N=require("react"),d=require("@mui/icons-material"),xe=require("../../data-display/modal/Modal.cjs.js"),u=require("../../button/Button.cjs.js"),ue=require("../../navigation/tabs/Tabs.cjs.js"),K=require("./MarkdownPreview.cjs.js"),O=require("./listEditing.cjs.js"),L=require("../../tooltip/Tooltip.cjs.js"),A=require("framer-motion"),H=require("../../data-display/typography/Typography.cjs.js"),me=require("../shared/InputLabel.cjs.js"),fe=["edit","preview"],he=({className:p,size:n=16})=>e.jsxs("svg",{width:n,height:n,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:p,children:[e.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),U=N.forwardRef(({id:p,value:n="",defaultValue:V,onChange:m,placeholder:D="Enter markdown content...",minRows:W=4,maxRows:G=20,isDisabled:l=!1,className:J,textareaClassName:Q,previewClassName:E,label:v,labelClassName:X,isRequiredConditional:Y,required:F=!1,showPreviewOnModal:Z=!1,maxLength:a,linkTarget:q="_blank",errorMessage:k,tooltip:R,originalCase:_,suffixIcon:j,isClearable:y,inputref:C,showFormattingHelp:ee=!0,onKeyDown:te,noIndent:T=!1,showMinimalPreview:M=!1,acceptAdvanceContent:g=!0},i)=>{const[c,se]=N.useState("edit"),[ne,I]=N.useState(!1),f=N.useRef(null),r=p||`rich-md-input-${Math.random().toString(36).slice(2,11)}`,ae=n.length,o=(t,s="",x="")=>{const h=i?.current||f.current;if(!h)return;const S=h.selectionStart,P=h.selectionEnd,w=n.substring(S,P),oe=w||x,de=n.substring(0,S)+t+oe+s+n.substring(P);m(de),setTimeout(()=>{const B=S+t.length+(w?w.length:0);h.focus(),h.setSelectionRange(B,B+(w?0:x.length))},0)},z=t=>{const s=i?.current||f.current;if(!s)return;const x=O.toggleList(n,s.selectionStart,s.selectionEnd,t);a&&x.value.length>a||(m(x.value),setTimeout(()=>{s.focus(),s.setSelectionRange(x.caret,x.caret)},0))},re=()=>{const t=i?.current||f.current;if(!t)return!1;const s=O.continueList(n,t.selectionStart,t.selectionEnd);return!s||a&&s.value.length>a?!1:(m(s.value),setTimeout(()=>{t.focus(),t.setSelectionRange(s.caret,s.caret)},0),!0)},le=t=>{if(te?.(t),t.key==="Enter"&&!t.shiftKey&&!t.altKey&&!t.metaKey&&!t.ctrlKey&&!t.defaultPrevented){re()&&t.preventDefault();return}if(t.metaKey||t.ctrlKey)switch(t.key.toLowerCase()){case"b":t.preventDefault(),o("**","**","bold text");break;case"i":t.preventDefault(),o("*","*","italic text");break;case"u":t.preventDefault(),o("<u>","</u>","underlined text");break;case"k":t.preventDefault(),o("[","](url)","link text");break;case"e":t.preventDefault(),o("```","```","code");break}},ie=()=>{m(""),(i?.current||f.current)?.focus()},ce=(()=>{const t=(n.match(/\n/g)||[]).length+1;return Math.min(G,Math.max(W,t))})(),$=e.jsxs("div",{className:b("flex flex-col",J),children:[e.jsxs("div",{className:`flex flex-row items-center ${v?"justify-between":"justify-end"} w-full`,children:[v&&e.jsx("label",{id:r,htmlFor:r,className:`mb-1 text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${_?"":"capitalize"} ${X||"!uppercse"}`,children:e.jsx("div",{className:"flex flex-wrap items-center justify-between w-full",children:e.jsx("div",{className:"inline-flex flex-wrap items-center gap-1",children:e.jsx(me.InputLabel,{label:v||"",required:F||!1,isRequiredConditional:Y||!1})})})}),ee&&e.jsx(L,{placement:"bottom-end",title:e.jsxs("div",{className:"flex flex-col items-start justify-center py-2 px-3 min-w-[220px] gap-2 bg-neutral-900 rounded-lg",children:[e.jsxs("div",{className:"flex flex-col items-start justify-start gap-1 w-full",children:[e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"**bold**"})}),e.jsxs("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:["→ ",e.jsx("strong",{children:"bold"})," text"]})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"*italic*"})}),e.jsxs("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:["→ ",e.jsx("em",{children:"italic"})," text"]})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"`code`"})}),e.jsxs("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:["→ ",e.jsx("code",{children:"inline code"})]})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"<u>text</u>"})}),e.jsxs("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:["→ ",e.jsx("u",{children:"underline"})]})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"~~strike~~"})}),e.jsxs("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:["→ ",e.jsx("del",{children:"strike"})]})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"- item"})}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"→ bullet list"})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"1. item"})}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"→ numbered list"})]}),g&&e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"## heading"})}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"→ heading 2"})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"[link](url)"})}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"→ hyperlink"})]})]}),g&&e.jsx(e.Fragment,{children:e.jsxs("div",{className:"flex flex-col items-start justify-start gap-1 w-full",children:[e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"> quote"})}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"→ blockquote"})]}),e.jsxs("div",{className:"flex flex-col items-start justify-start gap-0.5 w-full mt-0.5",children:[e.jsxs("div",{className:"flex flex-row items-center gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"Table:"})]}),e.jsxs("div",{className:"flex flex-col px-1 py-0.5 bg-neutral-700 ml-2 rounded-sm gap-0",children:[e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter whitespace-nowrap",children:"| Header 1 | Header 2 | Header 3 |"}),e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter whitespace-nowrap",children:"| :--- | :---: | ---: |"}),e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter whitespace-nowrap",children:"| Left | Center | Right |"})]})]})]})})]}),children:e.jsx(H.Typography,{className:"mb-2 text-xs font-medium text-primary-700 inline-flex items-center gap-1 cursor-pointer",children:"Formatting help ?"})})]}),e.jsxs("div",{className:b("flex flex-col border shadow-[0px_1px_2px_rgba(0,0,0,0.05)] rounded-lg bg-white dark:bg-black-700 w-full",k?"border-red-300 focus-within:border-red-500 focus-within:shadow-[0_0_0_1.5px_var(--color-red-200)]":"border-[#EAECF0] dark:border-black-600 focus-within:border-primary-600 dark:focus-within:border-primary-400 focus-within:shadow-[0_0_0_1.5px_var(--color-primary-100)] dark:focus-within:shadow-[0_0_0_1.5px_var(--color-primary-950)]"),children:[e.jsxs("div",{className:b("flex flex-row justify-between items-center px-3 py-2 gap-2 h-11 rounded-t-lg bg-[#F9FAFB] dark:bg-black-600 border-b border-[#EAECF0] dark:border-black-600"),children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(u,{id:`${r}-bold`,type:"button",onClick:()=>o("**","**","bold text"),disabled:l||c==="preview",className:"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Bold (Ctrl+B)",children:e.jsx(d.FormatBold,{sx:{fontSize:20,color:"#667085"},className:"dark:text-neutral-400"})}),e.jsx(u,{id:`${r}-italic`,type:"button",onClick:()=>o("*","*","italic text"),disabled:l||c==="preview",className:"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Italic (Ctrl+I)",children:e.jsx(d.FormatItalic,{sx:{fontSize:20,color:"#667085"},className:"dark:text-neutral-400"})}),e.jsx(u,{id:`${r}-underline`,type:"button",onClick:()=>o("<u>","</u>","underlined text"),disabled:l||c==="preview",className:"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Underline (Ctrl+U)",children:e.jsx(d.FormatUnderlined,{sx:{fontSize:20,color:"#667085"},className:"dark:text-neutral-400"})}),e.jsx("div",{className:"w-px h-5 bg-[#EAECF0] dark:bg-black-500 rounded-full"}),e.jsx(u,{id:`${r}-numbered-list`,type:"button",onClick:()=>z("ordered"),disabled:l||c==="preview",className:"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Numbered List",children:e.jsx(d.FormatListNumbered,{sx:{fontSize:20,color:"#667085"},className:"dark:text-neutral-400"})}),e.jsx(u,{id:`${r}-bullet-list`,type:"button",onClick:()=>z("bullet"),disabled:l||c==="preview",className:"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Bullet List",children:e.jsx(d.FormatListBulleted,{sx:{fontSize:20,color:"#667085"},className:"dark:text-neutral-400"})})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[a&&e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("span",{className:"text-sm font-medium text-[#475467] dark:text-neutral-400",children:[ae,"/",a]}),e.jsx("div",{className:"w-px h-6 bg-[#EAECF0] dark:bg-black-500 rounded-full"})]}),Z?e.jsx(u,{id:`${r}-expand`,type:"button",onClick:()=>I(!0),disabled:l,className:"!p-0.5 !min-w-0 !h-auto ml-1 !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Expand Preview",children:e.jsx(d.OpenInFull,{sx:{fontSize:16,color:"#667085"},className:"dark:text-neutral-400"})}):e.jsx(ue.Tabs,{variant:"switch",tabs:fe,activeTab:c,onTabClick:t=>se(t),height:"h-5",iconsOnly:!0,tabIcons:{edit:e.jsx(d.Edit,{sx:{fontSize:16,color:"#667085"},className:"dark:text-neutral-400"}),preview:e.jsx(d.VisibilityOutlined,{sx:{fontSize:16,color:"#667085"},className:"dark:text-neutral-400"})},className:"rounded-lg"})]})]}),e.jsx("div",{className:"px-3 py-2 relative",children:c==="edit"?e.jsxs(e.Fragment,{children:[e.jsx("textarea",{ref:t=>{typeof i=="function"?i(t):i&&(i.current=t),f.current=t,C&&(C.current=t)},id:r,value:n,defaultValue:V,onChange:t=>{const s=t.target.value;(!a||s.length<=a)&&m(s)},onKeyDown:le,placeholder:D,rows:ce,disabled:l,required:F,maxLength:a,className:b("w-full bg-transparent !focus:ring-0 !focus:border-none","font-inter font-medium text-sm leading-5","text-[#101828] dark:text-neutral-100","placeholder:text-neutral-400 dark:placeholder:text-neutral-500","focus:outline-none resize-none","scrollbar-none","[&::-webkit-scrollbar]:hidden","[-ms-overflow-style:none]","[scrollbar-width:none]",{"text-neutral-400 dark:text-neutral-500 cursor-not-allowed":l},{"pr-20":y||j},Q)}),(y||j)&&c==="edit"&&e.jsxs("div",{className:"absolute right-1 top-2 flex items-center gap-1",children:[y&&n&&e.jsx("button",{id:`btn-input-field-clear-${p}`,className:"absolute inset-y-0 flex items-center cursor-pointer top-2 right-1 focus:outline-none",onClick:ie,type:"button",children:e.jsx(he,{className:"text-neutral-300 dark:text-black-500 hover:text-neutral-400 dark:hover:text-black-400 transition-colors",size:16})}),j&&e.jsx("div",{className:"flex items-center",children:j})]})]}):e.jsx("div",{className:"w-full min-h-[92px] max-h-[400px] overflow-y-auto",children:e.jsx(K.MarkdownPreview,{content:n,linkTarget:q,className:E,noIndent:T,showMinimalPreview:M,acceptAdvanceContent:g})})})]}),e.jsx(xe.Modal,{open:ne,onCancel:()=>I(!1),title:"Markdown Preview",width:900,footer:null,children:e.jsx("div",{className:"max-h-[calc(100vh-200px)] overflow-y-auto p-4",children:e.jsx(K.MarkdownPreview,{content:n,linkTarget:q,className:E,noIndent:T,showMinimalPreview:M,acceptAdvanceContent:g})})}),e.jsx(A.AnimatePresence,{children:k&&e.jsx(A.motion.div,{initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.2},children:e.jsx(H.Typography,{className:"mt-1 text-error-500",appearance:"custom",size:"extra-small",variant:"medium",children:k})})})]});return R?e.jsx(L,{title:R,children:$}):$});U.displayName="RichMarkdownInput";exports.RichMarkdownInput=U;
 //# sourceMappingURL=RichMarkdownInput.cjs.js.map