@lax-wp/design-system 0.13.33 → 0.13.34

package/dist/components/buttons/option-button/OptionButton.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"OptionButton.cjs.js","sources":["../../../../src/components/buttons/option-button/OptionButton.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport cn from \"classnames\";\nimport { useCallback, type FC, type ReactNode } from \"react\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { Toggle } from \"../../forms/toggle/Toggle\";\nimport Tooltip from \"../../tooltip/Tooltip\";\nimport { escapeRegExp } from \"../../../utils/utilities\";\nimport { ShortcutKbd } from \"../../shortcut-kbd/ShortcutKbd\";\n\n/**\n * Check icon component for showing tick state\n */\nconst CheckSmall = ({\n  className = \"\",\n  fill = \"var(--color-primary-600)\",\n  size = 24,\n}: {\n  className?: string;\n  fill?: string;\n  size?: number;\n}) => (\n  <svg\n    className={className}\n    width={size}\n    height={size}\n    viewBox=\"0 0 20 20\"\n    fill={fill}\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g mask=\"url(#mask0_6752_28309)\">\n      <path\n        d=\"M8.33317 11.3333L13.2498 6.41667C13.4026 6.26389 13.5971 6.1875 13.8332 6.1875C14.0693 6.1875 14.2637 6.26389 14.4165 6.41667C14.5693 6.56944 14.6457 6.76389 14.6457 7C14.6457 7.23611 14.5693 7.43056 14.4165 7.58333L8.9165 13.0833C8.74984 13.25 8.55539 13.3333 8.33317 13.3333C8.11095 13.3333 7.9165 13.25 7.74984 13.0833L5.58317 10.9167C5.43039 10.7639 5.354 10.5694 5.354 10.3333C5.354 10.0972 5.43039 9.90278 5.58317 9.75C5.73595 9.59722 5.93039 9.52083 6.1665 9.52083C6.40262 9.52083 6.59706 9.59722 6.74984 9.75L8.33317 11.3333Z\"\n        fill={fill}\n      />\n    </g>\n  </svg>\n);\n\n/**\n * Props for the OptionButton component\n */\nexport interface OptionButtonProps {\n  /** Unique identifier for the button */\n  id?: string;\n  /** Click handler for the button */\n  onClick?(e?: any): void;\n  /** Icon to display before the text */\n  icon?: ReactNode;\n  /** Button text content */\n  text: string;\n  /** Additional CSS classes */\n  className?: string;\n  /** Whether the button is disabled */\n  isDisabled?: boolean;\n  /** Callback when the button is closed */\n  onClose?(): void;\n  /** Whether the button should be hidden */\n  notVisible?: boolean;\n  /** Whether to hide hover effects */\n  hideHoverEffect?: boolean;\n  /** Icon to display after the text (trailing) */\n  leadingIcon?: ReactNode;\n  /** Suffix record object for badge content lookup by text */\n  suffixRecord?: Record<string, string | number>;\n  /** Whether to stop event propagation on click */\n  stopPropagation?: boolean;\n  /** Toggle functionality callback */\n  onToggle?: () => void;\n  /** Whether the toggle is checked (if onToggle is provided) */\n  isChecked?: boolean;\n  /** Text to highlight within the button text */\n  highlight?: string;\n  /** Whether to truncate text */\n  truncateText?: boolean;\n  /** Whether to show a checkmark tick */\n  showTick?: boolean;\n  /** Custom width for the text container */\n  width?: string;\n  /** Tooltip text to display */\n  tooltip?: string;\n  /** Whether the flow is available (controls button enabled state) */\n  isFlowAvailable?: boolean;\n  /** Array of keyboard shortcut keys to display inline in the button (e.g., ['Meta', 'S'] or ['Ctrl', 'Enter']) */\n  shortcuts?: string[];\n  /** Custom CSS classes for the text */\n  textClassName?: string;\n  /** Trailing chevron/expand indicator rendered inside the hover area (e.g. submenu arrow) */\n  chevron?: ReactNode;\n}\n\n/**\n * OptionButton component provides a flexible button for lists, menus, and option selections.\n * Based on the web portal implementation for consistency across apps.\n *\n * @example\n * ```tsx\n * <OptionButton\n *   text=\"Save Document\"\n *   icon={<SaveIcon />}\n *   onClick={() => console.log('Save clicked')}\n * />\n * ```\n */\nexport const OptionButton: FC<OptionButtonProps> = ({\n  id,\n  onClick,\n  icon,\n  text,\n  className,\n  isDisabled,\n  onClose,\n  notVisible,\n  hideHoverEffect,\n  leadingIcon,\n  suffixRecord,\n  stopPropagation,\n  onToggle,\n  isChecked = false,\n  highlight,\n  truncateText = false,\n  showTick = false,\n  width = \"100%\",\n  tooltip,\n  isFlowAvailable = true,\n  shortcuts,\n  textClassName,\n  chevron,\n}) => {\n  const handleClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (onClose) onClose();\n      e.preventDefault();\n      onClick?.(e);\n      if (stopPropagation) e.stopPropagation();\n    },\n    [onClose, onClick, stopPropagation]\n  );\n\n  const highlightSubstring = (value: string, search: string) => {\n    if (!search) return value;\n    if (!value || (typeof value !== \"string\" && typeof value !== \"number\"))\n      return value;\n\n    const escapedSearch = escapeRegExp(search);\n    const regex = new RegExp(`(${escapedSearch?.trim()})`, \"gi\");\n    const searchValue = value?.toString()?.split(regex);\n    return (\n      <span className=\"overflow-clip text-ellipsis\">\n        {searchValue[0]}\n        <span className=\"bg-yellow-300 dark:bg-primary-100 dark:text-black-900 rounded-sm\">\n          {searchValue[1]}\n        </span>\n        {searchValue?.slice(2)?.join(\"\")}\n      </span>\n    );\n  };\n\n  const handleToggle = useCallback(\n    (e: React.MouseEvent) => {\n      onToggle?.();\n      e.stopPropagation();\n    },\n    [onToggle]\n  );\n\n  const isDestructiveAction = (() => {\n    const destructiveKeywords = [\n      \"delete\",\n      \"remove\",\n      \"clear\",\n      \"terminate session\",\n      \"terminate sessions\",\n      \"terminate all sessions\",\n    ];\n    return destructiveKeywords.some((keyword) =>\n      text?.toLowerCase().includes(keyword)\n    );\n  })();\n\n  const isButtonDisabled = isDisabled || !isFlowAvailable;\n\n  if (notVisible) {\n    return null;\n  }\n\n  const isInteractive = Boolean(onClick || onToggle);\n  const Element = isInteractive ? \"button\" : \"div\";\n\n  return (\n    <Element\n      id={id}\n      className={cn(\n        \"w-full p-1 bg-white dark:bg-black-800 group\",\n        className,\n        isButtonDisabled && \"opacity-60\"\n      )}\n      {...(isInteractive\n        ? {\n            onClick: onToggle ? () => null : handleClick,\n            disabled: isButtonDisabled,\n          }\n        : {})}\n      onMouseMove={(e) => e.stopPropagation()}\n    >\n      <div\n        className={cn(\n          \"option-button-inner flex w-full justify-start items-center gap-2 px-2 py-1 rounded-lg transition-all duration-300 ease-in-out\",\n          !hideHoverEffect &&\n            \"hover:bg-gray-50 dark:hover:bg-black-600 hover:shadow-md dark:hover:shadow-lg dark:hover:shadow-primary-500/20\"\n        )}\n      >\n        {icon ? (\n          <div\n            className={cn(\n              \"h-5 w-5 flex-shrink-0 flex items-center text-neutral-900 dark:text-white transition-colors duration-300 ease-in-out\",\n              isDestructiveAction\n                ? \"group-hover:!text-red-600\"\n                : \"group-hover:text-primary-600 dark:group-hover:text-primary-400\"\n            )}\n          >\n            <Tooltip placement=\"top\" title={tooltip}>\n              {icon}\n            </Tooltip>\n          </div>\n        ) : null}\n\n        <div className=\"flex gap-2 flex-1 min-w-0 text-left justify-between items-center\">\n          <div\n            className={cn(\"flex-1 min-w-0\", truncateText && \"max-w-[150px]\")}\n            style={{ width }}\n          >\n            <Typography\n              className={cn(\n                \"font-medium text-sm truncate transition-colors duration-300 ease-in-out\",\n                isDestructiveAction\n                  ? \"group-hover:!text-red-600\"\n                  : \"group-hover:!text-primary-600 dark:group-hover:!text-primary-400\",\n                textClassName\n              )}\n              appearance=\"custom\"\n            >\n              {highlight ? highlightSubstring(text, highlight) : text}\n            </Typography>\n          </div>\n          {suffixRecord?.[text] ? (\n            <span className=\"flex-shrink-0 text-neutral-500 dark:text-neutral-200 bg-neutral-100 dark:bg-black-700 border-[#D0D5DD] dark:border-black-700 text-xs leading-[18px] font-normal border rounded-full px-2 py-0.5\">\n              {suffixRecord[text] || \"\"}\n            </span>\n          ) : null}\n          {showTick ? (\n            <div className=\"flex-shrink-0\">\n              <CheckSmall fill=\"var(--color-primary-600)\" />\n            </div>\n          ) : null}\n        </div>\n        {leadingIcon ? (\n          <>\n            {tooltip ? (\n              <Tooltip placement=\"top\" title={tooltip}>\n                <div\n                  className={cn(\n                    \"flex-shrink-0 transition-colors duration-300 ease-in-out\",\n                    isDestructiveAction\n                      ? \"group-hover:!text-red-600\"\n                      : \"group-hover:text-primary-600 dark:group-hover:text-primary-400\"\n                  )}\n                >\n                  {leadingIcon}\n                </div>\n              </Tooltip>\n            ) : (\n              <div\n                className={cn(\n                  \"flex-shrink-0 transition-colors duration-300 ease-in-out\",\n                  isDestructiveAction\n                    ? \"group-hover:!text-red-600\"\n                    : \"group-hover:text-primary-600 dark:group-hover:text-primary-400\"\n                )}\n              >\n                {leadingIcon}\n              </div>\n            )}\n          </>\n        ) : null}\n\n        {shortcuts ? (\n          <div className=\"flex items-center justify-end flex-shrink-0\">\n            <ShortcutKbd variant=\"light\" shortcuts={shortcuts} />\n          </div>\n        ) : null}\n        {onToggle ? (\n          <div className=\"flex-shrink-0\">\n            <Toggle\n              onChange={handleToggle as any}\n              isChecked={isChecked}\n              isDisabled={isDisabled}\n              hideStatus\n            />\n          </div>\n        ) : null}\n        {chevron ? (\n          <div\n            className={cn(\n              \"flex-shrink-0 flex items-center text-neutral-500 dark:text-neutral-400 transition-colors duration-300 ease-in-out\",\n              isDestructiveAction\n                ? \"group-hover:!text-red-600\"\n                : \"group-hover:text-primary-600 dark:group-hover:text-primary-400\"\n            )}\n          >\n            {chevron}\n          </div>\n        ) : null}\n      </div>\n    </Element>\n  );\n};\n\nOptionButton.displayName = \"OptionButton\";\n"],"names":["CheckSmall","className","fill","size","jsx","OptionButton","id","onClick","icon","text","isDisabled","onClose","notVisible","hideHoverEffect","leadingIcon","suffixRecord","stopPropagation","onToggle","isChecked","highlight","truncateText","showTick","width","tooltip","isFlowAvailable","shortcuts","textClassName","chevron","handleClick","useCallback","e","highlightSubstring","value","search","escapedSearch","escapeRegExp","regex","searchValue","jsxs","handleToggle","isDestructiveAction","keyword","isButtonDisabled","isInteractive","Element","cn","Tooltip","Typography","ShortcutKbd","Toggle"],"mappings":"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"}
+{"version":3,"file":"OptionButton.cjs.js","sources":["../../../../src/components/buttons/option-button/OptionButton.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport cn from \"classnames\";\nimport { useCallback, type FC, type ReactNode } from \"react\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { Toggle } from \"../../forms/toggle/Toggle\";\nimport Tooltip from \"../../tooltip/Tooltip\";\nimport { escapeRegExp } from \"../../../utils/utilities\";\nimport { ShortcutKbd } from \"../../shortcut-kbd/ShortcutKbd\";\n\n/**\n * Check icon component for showing tick state\n */\nconst CheckSmall = ({\n  className = \"\",\n  fill = \"var(--color-primary-600)\",\n  size = 24,\n}: {\n  className?: string;\n  fill?: string;\n  size?: number;\n}) => (\n  <svg\n    className={className}\n    width={size}\n    height={size}\n    viewBox=\"0 0 20 20\"\n    fill={fill}\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g mask=\"url(#mask0_6752_28309)\">\n      <path\n        d=\"M8.33317 11.3333L13.2498 6.41667C13.4026 6.26389 13.5971 6.1875 13.8332 6.1875C14.0693 6.1875 14.2637 6.26389 14.4165 6.41667C14.5693 6.56944 14.6457 6.76389 14.6457 7C14.6457 7.23611 14.5693 7.43056 14.4165 7.58333L8.9165 13.0833C8.74984 13.25 8.55539 13.3333 8.33317 13.3333C8.11095 13.3333 7.9165 13.25 7.74984 13.0833L5.58317 10.9167C5.43039 10.7639 5.354 10.5694 5.354 10.3333C5.354 10.0972 5.43039 9.90278 5.58317 9.75C5.73595 9.59722 5.93039 9.52083 6.1665 9.52083C6.40262 9.52083 6.59706 9.59722 6.74984 9.75L8.33317 11.3333Z\"\n        fill={fill}\n      />\n    </g>\n  </svg>\n);\n\n/**\n * Props for the OptionButton component\n */\nexport interface OptionButtonProps {\n  /** Unique identifier for the button */\n  id?: string;\n  /** Click handler for the button */\n  onClick?(e?: any): void;\n  /** Icon to display before the text */\n  icon?: ReactNode;\n  /** Button text content */\n  text: string;\n  /** Additional CSS classes */\n  className?: string;\n  /** Whether the button is disabled */\n  isDisabled?: boolean;\n  /** Callback when the button is closed */\n  onClose?(): void;\n  /** Whether the button should be hidden */\n  notVisible?: boolean;\n  /** Whether to hide hover effects */\n  hideHoverEffect?: boolean;\n  /** Icon to display after the text (trailing) */\n  leadingIcon?: ReactNode;\n  /** Suffix record object for badge content lookup by text */\n  suffixRecord?: Record<string, string | number>;\n  /** Whether to stop event propagation on click */\n  stopPropagation?: boolean;\n  /** Toggle functionality callback */\n  onToggle?: () => void;\n  /** Whether the toggle is checked (if onToggle is provided) */\n  isChecked?: boolean;\n  /** Text to highlight within the button text */\n  highlight?: string;\n  /** Whether to truncate text */\n  truncateText?: boolean;\n  /** Whether to show a checkmark tick */\n  showTick?: boolean;\n  /** Custom width for the text container */\n  width?: string;\n  /** Tooltip text to display */\n  tooltip?: string;\n  /** Whether the flow is available (controls button enabled state) */\n  isFlowAvailable?: boolean;\n  /** Array of keyboard shortcut keys to display inline in the button (e.g., ['Meta', 'S'] or ['Ctrl', 'Enter']) */\n  shortcuts?: string[];\n  /** Custom CSS classes for the text */\n  textClassName?: string;\n  /** Trailing chevron/expand indicator rendered inside the hover area (e.g. submenu arrow) */\n  chevron?: ReactNode;\n}\n\n/**\n * OptionButton component provides a flexible button for lists, menus, and option selections.\n * Based on the web portal implementation for consistency across apps.\n *\n * @example\n * ```tsx\n * <OptionButton\n *   text=\"Save Document\"\n *   icon={<SaveIcon />}\n *   onClick={() => console.log('Save clicked')}\n * />\n * ```\n */\nexport const OptionButton: FC<OptionButtonProps> = ({\n  id,\n  onClick,\n  icon,\n  text,\n  className,\n  isDisabled,\n  onClose,\n  notVisible,\n  hideHoverEffect,\n  leadingIcon,\n  suffixRecord,\n  stopPropagation,\n  onToggle,\n  isChecked = false,\n  highlight,\n  truncateText = false,\n  showTick = false,\n  width = \"100%\",\n  tooltip,\n  isFlowAvailable = true,\n  shortcuts,\n  textClassName,\n  chevron,\n}) => {\n  const handleClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (onClose) onClose();\n      e.preventDefault();\n      onClick?.(e);\n      if (stopPropagation) e.stopPropagation();\n    },\n    [onClose, onClick, stopPropagation]\n  );\n\n  const highlightSubstring = (value: string, search: string) => {\n    if (!search) return value;\n    if (!value || (typeof value !== \"string\" && typeof value !== \"number\"))\n      return value;\n\n    const escapedSearch = escapeRegExp(search);\n    const regex = new RegExp(`(${escapedSearch?.trim()})`, \"gi\");\n    const searchValue = value?.toString()?.split(regex);\n    return (\n      <span className=\"overflow-clip text-ellipsis\">\n        {searchValue[0]}\n        <span className=\"bg-yellow-300 dark:bg-primary-100 dark:text-black-900 rounded-sm\">\n          {searchValue[1]}\n        </span>\n        {searchValue?.slice(2)?.join(\"\")}\n      </span>\n    );\n  };\n\n  const handleToggle = useCallback(\n    (e: React.MouseEvent) => {\n      onToggle?.();\n      e.stopPropagation();\n    },\n    [onToggle]\n  );\n\n  const isDestructiveAction = (() => {\n    const destructiveKeywords = [\n      \"delete\",\n      \"remove\",\n      \"clear\",\n      \"terminate session\",\n      \"terminate sessions\",\n      \"terminate all sessions\",\n    ];\n    return destructiveKeywords.some((keyword) =>\n      text?.toLowerCase().includes(keyword)\n    );\n  })();\n\n  const isButtonDisabled = isDisabled || !isFlowAvailable;\n\n  if (notVisible) {\n    return null;\n  }\n\n  const isInteractive = Boolean(onClick || onToggle);\n  const Element = isInteractive ? \"button\" : \"div\";\n\n  return (\n    <Element\n      id={id}\n      className={cn(\n        \"w-full p-1 bg-white dark:bg-black-800 group\",\n        className,\n        isButtonDisabled && \"opacity-60\"\n      )}\n      {...(isInteractive\n        ? {\n            onClick: onToggle ? () => null : handleClick,\n            disabled: isButtonDisabled,\n          }\n        : {})}\n      onMouseMove={(e) => e.stopPropagation()}\n    >\n      <div\n        className={cn(\n          \"option-button-inner flex w-full justify-start items-center gap-2 px-2 py-1 rounded-lg transition-all duration-300 ease-in-out\",\n          !hideHoverEffect &&\n            \"hover:bg-gray-50 dark:hover:bg-black-600 hover:shadow-md dark:hover:shadow-lg dark:hover:shadow-primary-500/20\"\n        )}\n      >\n        {icon ? (\n          <div\n            className={cn(\n              \"h-5 w-5 flex-shrink-0 flex items-center text-neutral-900 dark:text-white transition-colors duration-300 ease-in-out\",\n              isDestructiveAction\n                ? \"group-hover:!text-red-600\"\n                : \"group-hover:text-primary-600 dark:group-hover:text-primary-400\"\n            )}\n          >\n            <Tooltip placement=\"top\" title={tooltip}>\n              {icon}\n            </Tooltip>\n          </div>\n        ) : null}\n\n        <div className=\"flex gap-2 flex-1 min-w-0 text-left justify-between items-center\">\n          <div\n            className={cn(\"flex-1 min-w-0\", truncateText && \"max-w-[150px]\")}\n            style={{ width }}\n          >\n            <Typography\n              className={cn(\n                \"font-medium text-sm truncate transition-colors duration-300 ease-in-out\",\n                isDestructiveAction\n                  ? \"group-hover:!text-red-600\"\n                  : \"group-hover:!text-primary-600 dark:group-hover:!text-primary-400\",\n                textClassName\n              )}\n              appearance=\"custom\"\n            >\n              {highlight ? highlightSubstring(text, highlight) : text}\n            </Typography>\n          </div>\n          {suffixRecord?.[text] ? (\n            <span className=\"flex-shrink-0 text-neutral-500 dark:text-neutral-200 bg-neutral-100 dark:bg-black-700 border-[#D0D5DD] dark:border-black-700 text-xs leading-4 font-normal border rounded-full px-2 py-0.5\">\n              {suffixRecord[text] || \"\"}\n            </span>\n          ) : null}\n          {showTick ? (\n            <div className=\"flex-shrink-0\">\n              <CheckSmall fill=\"var(--color-primary-600)\" />\n            </div>\n          ) : null}\n        </div>\n        {leadingIcon ? (\n          <>\n            {tooltip ? (\n              <Tooltip placement=\"top\" title={tooltip}>\n                <div\n                  className={cn(\n                    \"flex-shrink-0 transition-colors duration-300 ease-in-out\",\n                    isDestructiveAction\n                      ? \"group-hover:!text-red-600\"\n                      : \"group-hover:text-primary-600 dark:group-hover:text-primary-400\"\n                  )}\n                >\n                  {leadingIcon}\n                </div>\n              </Tooltip>\n            ) : (\n              <div\n                className={cn(\n                  \"flex-shrink-0 transition-colors duration-300 ease-in-out\",\n                  isDestructiveAction\n                    ? \"group-hover:!text-red-600\"\n                    : \"group-hover:text-primary-600 dark:group-hover:text-primary-400\"\n                )}\n              >\n                {leadingIcon}\n              </div>\n            )}\n          </>\n        ) : null}\n\n        {shortcuts ? (\n          <div className=\"flex items-center justify-end flex-shrink-0\">\n            <ShortcutKbd variant=\"light\" shortcuts={shortcuts} />\n          </div>\n        ) : null}\n        {onToggle ? (\n          <div className=\"flex-shrink-0\">\n            <Toggle\n              onChange={handleToggle as any}\n              isChecked={isChecked}\n              isDisabled={isDisabled}\n              hideStatus\n            />\n          </div>\n        ) : null}\n        {chevron ? (\n          <div\n            className={cn(\n              \"flex-shrink-0 flex items-center text-neutral-500 dark:text-neutral-400 transition-colors duration-300 ease-in-out\",\n              isDestructiveAction\n                ? \"group-hover:!text-red-600\"\n                : \"group-hover:text-primary-600 dark:group-hover:text-primary-400\"\n            )}\n          >\n            {chevron}\n          </div>\n        ) : null}\n      </div>\n    </Element>\n  );\n};\n\nOptionButton.displayName = \"OptionButton\";\n"],"names":["CheckSmall","className","fill","size","jsx","OptionButton","id","onClick","icon","text","isDisabled","onClose","notVisible","hideHoverEffect","leadingIcon","suffixRecord","stopPropagation","onToggle","isChecked","highlight","truncateText","showTick","width","tooltip","isFlowAvailable","shortcuts","textClassName","chevron","handleClick","useCallback","e","highlightSubstring","value","search","escapedSearch","escapeRegExp","regex","searchValue","jsxs","handleToggle","isDestructiveAction","keyword","isButtonDisabled","isInteractive","Element","cn","Tooltip","Typography","ShortcutKbd","Toggle"],"mappings":"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"}

package/dist/components/buttons/option-button/OptionButton.es.js

@@ -136,7 +136,7 @@ const H = ({
                   )
                 }
               ),
-              f?.[o] ? /* @__PURE__ */ e("span", { className: "flex-shrink-0 text-neutral-500 dark:text-neutral-200 bg-neutral-100 dark:bg-black-700 border-[#D0D5DD] dark:border-black-700 text-xs leading-[18px] font-normal border rounded-full px-2 py-0.5", children: f[o] || "" }) : null,
+              f?.[o] ? /* @__PURE__ */ e("span", { className: "flex-shrink-0 text-neutral-500 dark:text-neutral-200 bg-neutral-100 dark:bg-black-700 border-[#D0D5DD] dark:border-black-700 text-xs leading-4 font-normal border rounded-full px-2 py-0.5", children: f[o] || "" }) : null,
               E ? /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e(H, { fill: "var(--color-primary-600)" }) }) : null
             ] }),
             p ? /* @__PURE__ */ e(V, { children: m ? /* @__PURE__ */ e(C, { placement: "top", title: m, children: /* @__PURE__ */ e(

package/dist/components/buttons/option-button/OptionButton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"OptionButton.es.js","sources":["../../../../src/components/buttons/option-button/OptionButton.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport cn from \"classnames\";\nimport { useCallback, type FC, type ReactNode } from \"react\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { Toggle } from \"../../forms/toggle/Toggle\";\nimport Tooltip from \"../../tooltip/Tooltip\";\nimport { escapeRegExp } from \"../../../utils/utilities\";\nimport { ShortcutKbd } from \"../../shortcut-kbd/ShortcutKbd\";\n\n/**\n * Check icon component for showing tick state\n */\nconst CheckSmall = ({\n  className = \"\",\n  fill = \"var(--color-primary-600)\",\n  size = 24,\n}: {\n  className?: string;\n  fill?: string;\n  size?: number;\n}) => (\n  <svg\n    className={className}\n    width={size}\n    height={size}\n    viewBox=\"0 0 20 20\"\n    fill={fill}\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g mask=\"url(#mask0_6752_28309)\">\n      <path\n        d=\"M8.33317 11.3333L13.2498 6.41667C13.4026 6.26389 13.5971 6.1875 13.8332 6.1875C14.0693 6.1875 14.2637 6.26389 14.4165 6.41667C14.5693 6.56944 14.6457 6.76389 14.6457 7C14.6457 7.23611 14.5693 7.43056 14.4165 7.58333L8.9165 13.0833C8.74984 13.25 8.55539 13.3333 8.33317 13.3333C8.11095 13.3333 7.9165 13.25 7.74984 13.0833L5.58317 10.9167C5.43039 10.7639 5.354 10.5694 5.354 10.3333C5.354 10.0972 5.43039 9.90278 5.58317 9.75C5.73595 9.59722 5.93039 9.52083 6.1665 9.52083C6.40262 9.52083 6.59706 9.59722 6.74984 9.75L8.33317 11.3333Z\"\n        fill={fill}\n      />\n    </g>\n  </svg>\n);\n\n/**\n * Props for the OptionButton component\n */\nexport interface OptionButtonProps {\n  /** Unique identifier for the button */\n  id?: string;\n  /** Click handler for the button */\n  onClick?(e?: any): void;\n  /** Icon to display before the text */\n  icon?: ReactNode;\n  /** Button text content */\n  text: string;\n  /** Additional CSS classes */\n  className?: string;\n  /** Whether the button is disabled */\n  isDisabled?: boolean;\n  /** Callback when the button is closed */\n  onClose?(): void;\n  /** Whether the button should be hidden */\n  notVisible?: boolean;\n  /** Whether to hide hover effects */\n  hideHoverEffect?: boolean;\n  /** Icon to display after the text (trailing) */\n  leadingIcon?: ReactNode;\n  /** Suffix record object for badge content lookup by text */\n  suffixRecord?: Record<string, string | number>;\n  /** Whether to stop event propagation on click */\n  stopPropagation?: boolean;\n  /** Toggle functionality callback */\n  onToggle?: () => void;\n  /** Whether the toggle is checked (if onToggle is provided) */\n  isChecked?: boolean;\n  /** Text to highlight within the button text */\n  highlight?: string;\n  /** Whether to truncate text */\n  truncateText?: boolean;\n  /** Whether to show a checkmark tick */\n  showTick?: boolean;\n  /** Custom width for the text container */\n  width?: string;\n  /** Tooltip text to display */\n  tooltip?: string;\n  /** Whether the flow is available (controls button enabled state) */\n  isFlowAvailable?: boolean;\n  /** Array of keyboard shortcut keys to display inline in the button (e.g., ['Meta', 'S'] or ['Ctrl', 'Enter']) */\n  shortcuts?: string[];\n  /** Custom CSS classes for the text */\n  textClassName?: string;\n  /** Trailing chevron/expand indicator rendered inside the hover area (e.g. submenu arrow) */\n  chevron?: ReactNode;\n}\n\n/**\n * OptionButton component provides a flexible button for lists, menus, and option selections.\n * Based on the web portal implementation for consistency across apps.\n *\n * @example\n * ```tsx\n * <OptionButton\n *   text=\"Save Document\"\n *   icon={<SaveIcon />}\n *   onClick={() => console.log('Save clicked')}\n * />\n * ```\n */\nexport const OptionButton: FC<OptionButtonProps> = ({\n  id,\n  onClick,\n  icon,\n  text,\n  className,\n  isDisabled,\n  onClose,\n  notVisible,\n  hideHoverEffect,\n  leadingIcon,\n  suffixRecord,\n  stopPropagation,\n  onToggle,\n  isChecked = false,\n  highlight,\n  truncateText = false,\n  showTick = false,\n  width = \"100%\",\n  tooltip,\n  isFlowAvailable = true,\n  shortcuts,\n  textClassName,\n  chevron,\n}) => {\n  const handleClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (onClose) onClose();\n      e.preventDefault();\n      onClick?.(e);\n      if (stopPropagation) e.stopPropagation();\n    },\n    [onClose, onClick, stopPropagation]\n  );\n\n  const highlightSubstring = (value: string, search: string) => {\n    if (!search) return value;\n    if (!value || (typeof value !== \"string\" && typeof value !== \"number\"))\n      return value;\n\n    const escapedSearch = escapeRegExp(search);\n    const regex = new RegExp(`(${escapedSearch?.trim()})`, \"gi\");\n    const searchValue = value?.toString()?.split(regex);\n    return (\n      <span className=\"overflow-clip text-ellipsis\">\n        {searchValue[0]}\n        <span className=\"bg-yellow-300 dark:bg-primary-100 dark:text-black-900 rounded-sm\">\n          {searchValue[1]}\n        </span>\n        {searchValue?.slice(2)?.join(\"\")}\n      </span>\n    );\n  };\n\n  const handleToggle = useCallback(\n    (e: React.MouseEvent) => {\n      onToggle?.();\n      e.stopPropagation();\n    },\n    [onToggle]\n  );\n\n  const isDestructiveAction = (() => {\n    const destructiveKeywords = [\n      \"delete\",\n      \"remove\",\n      \"clear\",\n      \"terminate session\",\n      \"terminate sessions\",\n      \"terminate all sessions\",\n    ];\n    return destructiveKeywords.some((keyword) =>\n      text?.toLowerCase().includes(keyword)\n    );\n  })();\n\n  const isButtonDisabled = isDisabled || !isFlowAvailable;\n\n  if (notVisible) {\n    return null;\n  }\n\n  const isInteractive = Boolean(onClick || onToggle);\n  const Element = isInteractive ? \"button\" : \"div\";\n\n  return (\n    <Element\n      id={id}\n      className={cn(\n        \"w-full p-1 bg-white dark:bg-black-800 group\",\n        className,\n        isButtonDisabled && \"opacity-60\"\n      )}\n      {...(isInteractive\n        ? {\n            onClick: onToggle ? () => null : handleClick,\n            disabled: isButtonDisabled,\n          }\n        : {})}\n      onMouseMove={(e) => e.stopPropagation()}\n    >\n      <div\n        className={cn(\n          \"option-button-inner flex w-full justify-start items-center gap-2 px-2 py-1 rounded-lg transition-all duration-300 ease-in-out\",\n          !hideHoverEffect &&\n            \"hover:bg-gray-50 dark:hover:bg-black-600 hover:shadow-md dark:hover:shadow-lg dark:hover:shadow-primary-500/20\"\n        )}\n      >\n        {icon ? (\n          <div\n            className={cn(\n              \"h-5 w-5 flex-shrink-0 flex items-center text-neutral-900 dark:text-white transition-colors duration-300 ease-in-out\",\n              isDestructiveAction\n                ? \"group-hover:!text-red-600\"\n                : \"group-hover:text-primary-600 dark:group-hover:text-primary-400\"\n            )}\n          >\n            <Tooltip placement=\"top\" title={tooltip}>\n              {icon}\n            </Tooltip>\n          </div>\n        ) : null}\n\n        <div className=\"flex gap-2 flex-1 min-w-0 text-left justify-between items-center\">\n          <div\n            className={cn(\"flex-1 min-w-0\", truncateText && \"max-w-[150px]\")}\n            style={{ width }}\n          >\n            <Typography\n              className={cn(\n                \"font-medium text-sm truncate transition-colors duration-300 ease-in-out\",\n                isDestructiveAction\n                  ? \"group-hover:!text-red-600\"\n                  : \"group-hover:!text-primary-600 dark:group-hover:!text-primary-400\",\n                textClassName\n              )}\n              appearance=\"custom\"\n            >\n              {highlight ? highlightSubstring(text, highlight) : text}\n            </Typography>\n          </div>\n          {suffixRecord?.[text] ? (\n            <span className=\"flex-shrink-0 text-neutral-500 dark:text-neutral-200 bg-neutral-100 dark:bg-black-700 border-[#D0D5DD] dark:border-black-700 text-xs leading-[18px] font-normal border rounded-full px-2 py-0.5\">\n              {suffixRecord[text] || \"\"}\n            </span>\n          ) : null}\n          {showTick ? (\n            <div className=\"flex-shrink-0\">\n              <CheckSmall fill=\"var(--color-primary-600)\" />\n            </div>\n          ) : null}\n        </div>\n        {leadingIcon ? (\n          <>\n            {tooltip ? (\n              <Tooltip placement=\"top\" title={tooltip}>\n                <div\n                  className={cn(\n                    \"flex-shrink-0 transition-colors duration-300 ease-in-out\",\n                    isDestructiveAction\n                      ? \"group-hover:!text-red-600\"\n                      : \"group-hover:text-primary-600 dark:group-hover:text-primary-400\"\n                  )}\n                >\n                  {leadingIcon}\n                </div>\n              </Tooltip>\n            ) : (\n              <div\n                className={cn(\n                  \"flex-shrink-0 transition-colors duration-300 ease-in-out\",\n                  isDestructiveAction\n                    ? \"group-hover:!text-red-600\"\n                    : \"group-hover:text-primary-600 dark:group-hover:text-primary-400\"\n                )}\n              >\n                {leadingIcon}\n              </div>\n            )}\n          </>\n        ) : null}\n\n        {shortcuts ? (\n          <div className=\"flex items-center justify-end flex-shrink-0\">\n            <ShortcutKbd variant=\"light\" shortcuts={shortcuts} />\n          </div>\n        ) : null}\n        {onToggle ? (\n          <div className=\"flex-shrink-0\">\n            <Toggle\n              onChange={handleToggle as any}\n              isChecked={isChecked}\n              isDisabled={isDisabled}\n              hideStatus\n            />\n          </div>\n        ) : null}\n        {chevron ? (\n          <div\n            className={cn(\n              \"flex-shrink-0 flex items-center text-neutral-500 dark:text-neutral-400 transition-colors duration-300 ease-in-out\",\n              isDestructiveAction\n                ? \"group-hover:!text-red-600\"\n                : \"group-hover:text-primary-600 dark:group-hover:text-primary-400\"\n            )}\n          >\n            {chevron}\n          </div>\n        ) : null}\n      </div>\n    </Element>\n  );\n};\n\nOptionButton.displayName = \"OptionButton\";\n"],"names":["CheckSmall","className","fill","size","jsx","OptionButton","id","onClick","icon","text","isDisabled","onClose","notVisible","hideHoverEffect","leadingIcon","suffixRecord","stopPropagation","onToggle","isChecked","highlight","truncateText","showTick","width","tooltip","isFlowAvailable","shortcuts","textClassName","chevron","handleClick","useCallback","e","highlightSubstring","value","search","escapedSearch","escapeRegExp","regex","searchValue","jsxs","handleToggle","isDestructiveAction","keyword","isButtonDisabled","isInteractive","cn","Tooltip","Typography","ShortcutKbd","Toggle"],"mappings":"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"}
+{"version":3,"file":"OptionButton.es.js","sources":["../../../../src/components/buttons/option-button/OptionButton.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport cn from \"classnames\";\nimport { useCallback, type FC, type ReactNode } from \"react\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { Toggle } from \"../../forms/toggle/Toggle\";\nimport Tooltip from \"../../tooltip/Tooltip\";\nimport { escapeRegExp } from \"../../../utils/utilities\";\nimport { ShortcutKbd } from \"../../shortcut-kbd/ShortcutKbd\";\n\n/**\n * Check icon component for showing tick state\n */\nconst CheckSmall = ({\n  className = \"\",\n  fill = \"var(--color-primary-600)\",\n  size = 24,\n}: {\n  className?: string;\n  fill?: string;\n  size?: number;\n}) => (\n  <svg\n    className={className}\n    width={size}\n    height={size}\n    viewBox=\"0 0 20 20\"\n    fill={fill}\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g mask=\"url(#mask0_6752_28309)\">\n      <path\n        d=\"M8.33317 11.3333L13.2498 6.41667C13.4026 6.26389 13.5971 6.1875 13.8332 6.1875C14.0693 6.1875 14.2637 6.26389 14.4165 6.41667C14.5693 6.56944 14.6457 6.76389 14.6457 7C14.6457 7.23611 14.5693 7.43056 14.4165 7.58333L8.9165 13.0833C8.74984 13.25 8.55539 13.3333 8.33317 13.3333C8.11095 13.3333 7.9165 13.25 7.74984 13.0833L5.58317 10.9167C5.43039 10.7639 5.354 10.5694 5.354 10.3333C5.354 10.0972 5.43039 9.90278 5.58317 9.75C5.73595 9.59722 5.93039 9.52083 6.1665 9.52083C6.40262 9.52083 6.59706 9.59722 6.74984 9.75L8.33317 11.3333Z\"\n        fill={fill}\n      />\n    </g>\n  </svg>\n);\n\n/**\n * Props for the OptionButton component\n */\nexport interface OptionButtonProps {\n  /** Unique identifier for the button */\n  id?: string;\n  /** Click handler for the button */\n  onClick?(e?: any): void;\n  /** Icon to display before the text */\n  icon?: ReactNode;\n  /** Button text content */\n  text: string;\n  /** Additional CSS classes */\n  className?: string;\n  /** Whether the button is disabled */\n  isDisabled?: boolean;\n  /** Callback when the button is closed */\n  onClose?(): void;\n  /** Whether the button should be hidden */\n  notVisible?: boolean;\n  /** Whether to hide hover effects */\n  hideHoverEffect?: boolean;\n  /** Icon to display after the text (trailing) */\n  leadingIcon?: ReactNode;\n  /** Suffix record object for badge content lookup by text */\n  suffixRecord?: Record<string, string | number>;\n  /** Whether to stop event propagation on click */\n  stopPropagation?: boolean;\n  /** Toggle functionality callback */\n  onToggle?: () => void;\n  /** Whether the toggle is checked (if onToggle is provided) */\n  isChecked?: boolean;\n  /** Text to highlight within the button text */\n  highlight?: string;\n  /** Whether to truncate text */\n  truncateText?: boolean;\n  /** Whether to show a checkmark tick */\n  showTick?: boolean;\n  /** Custom width for the text container */\n  width?: string;\n  /** Tooltip text to display */\n  tooltip?: string;\n  /** Whether the flow is available (controls button enabled state) */\n  isFlowAvailable?: boolean;\n  /** Array of keyboard shortcut keys to display inline in the button (e.g., ['Meta', 'S'] or ['Ctrl', 'Enter']) */\n  shortcuts?: string[];\n  /** Custom CSS classes for the text */\n  textClassName?: string;\n  /** Trailing chevron/expand indicator rendered inside the hover area (e.g. submenu arrow) */\n  chevron?: ReactNode;\n}\n\n/**\n * OptionButton component provides a flexible button for lists, menus, and option selections.\n * Based on the web portal implementation for consistency across apps.\n *\n * @example\n * ```tsx\n * <OptionButton\n *   text=\"Save Document\"\n *   icon={<SaveIcon />}\n *   onClick={() => console.log('Save clicked')}\n * />\n * ```\n */\nexport const OptionButton: FC<OptionButtonProps> = ({\n  id,\n  onClick,\n  icon,\n  text,\n  className,\n  isDisabled,\n  onClose,\n  notVisible,\n  hideHoverEffect,\n  leadingIcon,\n  suffixRecord,\n  stopPropagation,\n  onToggle,\n  isChecked = false,\n  highlight,\n  truncateText = false,\n  showTick = false,\n  width = \"100%\",\n  tooltip,\n  isFlowAvailable = true,\n  shortcuts,\n  textClassName,\n  chevron,\n}) => {\n  const handleClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (onClose) onClose();\n      e.preventDefault();\n      onClick?.(e);\n      if (stopPropagation) e.stopPropagation();\n    },\n    [onClose, onClick, stopPropagation]\n  );\n\n  const highlightSubstring = (value: string, search: string) => {\n    if (!search) return value;\n    if (!value || (typeof value !== \"string\" && typeof value !== \"number\"))\n      return value;\n\n    const escapedSearch = escapeRegExp(search);\n    const regex = new RegExp(`(${escapedSearch?.trim()})`, \"gi\");\n    const searchValue = value?.toString()?.split(regex);\n    return (\n      <span className=\"overflow-clip text-ellipsis\">\n        {searchValue[0]}\n        <span className=\"bg-yellow-300 dark:bg-primary-100 dark:text-black-900 rounded-sm\">\n          {searchValue[1]}\n        </span>\n        {searchValue?.slice(2)?.join(\"\")}\n      </span>\n    );\n  };\n\n  const handleToggle = useCallback(\n    (e: React.MouseEvent) => {\n      onToggle?.();\n      e.stopPropagation();\n    },\n    [onToggle]\n  );\n\n  const isDestructiveAction = (() => {\n    const destructiveKeywords = [\n      \"delete\",\n      \"remove\",\n      \"clear\",\n      \"terminate session\",\n      \"terminate sessions\",\n      \"terminate all sessions\",\n    ];\n    return destructiveKeywords.some((keyword) =>\n      text?.toLowerCase().includes(keyword)\n    );\n  })();\n\n  const isButtonDisabled = isDisabled || !isFlowAvailable;\n\n  if (notVisible) {\n    return null;\n  }\n\n  const isInteractive = Boolean(onClick || onToggle);\n  const Element = isInteractive ? \"button\" : \"div\";\n\n  return (\n    <Element\n      id={id}\n      className={cn(\n        \"w-full p-1 bg-white dark:bg-black-800 group\",\n        className,\n        isButtonDisabled && \"opacity-60\"\n      )}\n      {...(isInteractive\n        ? {\n            onClick: onToggle ? () => null : handleClick,\n            disabled: isButtonDisabled,\n          }\n        : {})}\n      onMouseMove={(e) => e.stopPropagation()}\n    >\n      <div\n        className={cn(\n          \"option-button-inner flex w-full justify-start items-center gap-2 px-2 py-1 rounded-lg transition-all duration-300 ease-in-out\",\n          !hideHoverEffect &&\n            \"hover:bg-gray-50 dark:hover:bg-black-600 hover:shadow-md dark:hover:shadow-lg dark:hover:shadow-primary-500/20\"\n        )}\n      >\n        {icon ? (\n          <div\n            className={cn(\n              \"h-5 w-5 flex-shrink-0 flex items-center text-neutral-900 dark:text-white transition-colors duration-300 ease-in-out\",\n              isDestructiveAction\n                ? \"group-hover:!text-red-600\"\n                : \"group-hover:text-primary-600 dark:group-hover:text-primary-400\"\n            )}\n          >\n            <Tooltip placement=\"top\" title={tooltip}>\n              {icon}\n            </Tooltip>\n          </div>\n        ) : null}\n\n        <div className=\"flex gap-2 flex-1 min-w-0 text-left justify-between items-center\">\n          <div\n            className={cn(\"flex-1 min-w-0\", truncateText && \"max-w-[150px]\")}\n            style={{ width }}\n          >\n            <Typography\n              className={cn(\n                \"font-medium text-sm truncate transition-colors duration-300 ease-in-out\",\n                isDestructiveAction\n                  ? \"group-hover:!text-red-600\"\n                  : \"group-hover:!text-primary-600 dark:group-hover:!text-primary-400\",\n                textClassName\n              )}\n              appearance=\"custom\"\n            >\n              {highlight ? highlightSubstring(text, highlight) : text}\n            </Typography>\n          </div>\n          {suffixRecord?.[text] ? (\n            <span className=\"flex-shrink-0 text-neutral-500 dark:text-neutral-200 bg-neutral-100 dark:bg-black-700 border-[#D0D5DD] dark:border-black-700 text-xs leading-4 font-normal border rounded-full px-2 py-0.5\">\n              {suffixRecord[text] || \"\"}\n            </span>\n          ) : null}\n          {showTick ? (\n            <div className=\"flex-shrink-0\">\n              <CheckSmall fill=\"var(--color-primary-600)\" />\n            </div>\n          ) : null}\n        </div>\n        {leadingIcon ? (\n          <>\n            {tooltip ? (\n              <Tooltip placement=\"top\" title={tooltip}>\n                <div\n                  className={cn(\n                    \"flex-shrink-0 transition-colors duration-300 ease-in-out\",\n                    isDestructiveAction\n                      ? \"group-hover:!text-red-600\"\n                      : \"group-hover:text-primary-600 dark:group-hover:text-primary-400\"\n                  )}\n                >\n                  {leadingIcon}\n                </div>\n              </Tooltip>\n            ) : (\n              <div\n                className={cn(\n                  \"flex-shrink-0 transition-colors duration-300 ease-in-out\",\n                  isDestructiveAction\n                    ? \"group-hover:!text-red-600\"\n                    : \"group-hover:text-primary-600 dark:group-hover:text-primary-400\"\n                )}\n              >\n                {leadingIcon}\n              </div>\n            )}\n          </>\n        ) : null}\n\n        {shortcuts ? (\n          <div className=\"flex items-center justify-end flex-shrink-0\">\n            <ShortcutKbd variant=\"light\" shortcuts={shortcuts} />\n          </div>\n        ) : null}\n        {onToggle ? (\n          <div className=\"flex-shrink-0\">\n            <Toggle\n              onChange={handleToggle as any}\n              isChecked={isChecked}\n              isDisabled={isDisabled}\n              hideStatus\n            />\n          </div>\n        ) : null}\n        {chevron ? (\n          <div\n            className={cn(\n              \"flex-shrink-0 flex items-center text-neutral-500 dark:text-neutral-400 transition-colors duration-300 ease-in-out\",\n              isDestructiveAction\n                ? \"group-hover:!text-red-600\"\n                : \"group-hover:text-primary-600 dark:group-hover:text-primary-400\"\n            )}\n          >\n            {chevron}\n          </div>\n        ) : null}\n      </div>\n    </Element>\n  );\n};\n\nOptionButton.displayName = \"OptionButton\";\n"],"names":["CheckSmall","className","fill","size","jsx","OptionButton","id","onClick","icon","text","isDisabled","onClose","notVisible","hideHoverEffect","leadingIcon","suffixRecord","stopPropagation","onToggle","isChecked","highlight","truncateText","showTick","width","tooltip","isFlowAvailable","shortcuts","textClassName","chevron","handleClick","useCallback","e","highlightSubstring","value","search","escapedSearch","escapeRegExp","regex","searchValue","jsxs","handleToggle","isDestructiveAction","keyword","isButtonDisabled","isInteractive","cn","Tooltip","Typography","ShortcutKbd","Toggle"],"mappings":"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"}

package/dist/components/data-display/comparison/components/Header.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),f=require("../../../../_virtual/index.cjs.js"),a=require("react"),g=require("../ComparisonContext.cjs.js"),o=require("../constants.cjs.js"),b=require("../../../tooltip/Tooltip.cjs.js"),j=require("../../../button/Button.cjs.js"),y=require("../../../../hooks/useIsDarkMode.cjs.js"),N=require("react-i18next"),w=require("../../../icon/icons.generated.cjs.js"),I=require("../icons/ExitIcon.cjs.js"),C=require("../icons/LayoutOneIcon.cjs.js"),O=require("../icons/LayoutTwoIcon.cjs.js"),q=require("../icons/LayoutThreeIcon.cjs.js"),T=[{icon:e.jsx(C.LayoutOneIcon,{className:"text-black-900 dark:text-white"}),key:o.COMPARISON_LAYOUT.ONE,tooltip:"One column"},{icon:e.jsx(O.LayoutTwoIcon,{className:"text-black-900 dark:text-white"}),key:o.COMPARISON_LAYOUT.TWO,tooltip:"Two column"},{icon:e.jsx(q.LayoutThreeIcon,{className:"text-black-900 dark:text-white"}),key:o.COMPARISON_LAYOUT.THREE,tooltip:"Three column"}],A=({onNavigateBack:c,tabsComponent:i})=>{const{setLayout:h,title:l,layout:d,returnUrl:s,onReturn:t,headerTabConfig:n}=a.useContext(g.ComparisonContext),{t:x}=N.useTranslation(),k=y.useIsDarkMode(),u=()=>{t?t():s&&c&&c(s?.toString()||"/home")};return e.jsxs("div",{className:"flex flex-wrap items-center justify-between p-4 border-y border-y-[#EAECF0] bg-[#F9FAFB] dark:bg-black-800 gap-2 flex-col sm:flex-row",children:[t?e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(j,{id:"btn-comparison-go-back",status:"no-background",className:"!p-0 !border-0 hover:!opacity-70",onClick:u,children:e.jsx(w.ArrowBackIcon,{size:20,className:"text-neutral-900 dark:text-white"})}),e.jsx("span",{className:"text-lg font-inter font-bold text-neutral-900 dark:text-white",children:l})]}):e.jsx("p",{className:"text-lg font-inter font-bold text-neutral-900 dark:text-white",children:l}),i&&e.jsx("div",{className:"flex justify-center",children:e.jsx(i,{variant:"secondary",tabs:n?.tabs||[],...n?.tabState,tabKey:n?.tabKey||"",size:"sm",draggable:!1,showAllItems:!0,className:"p-1 border-none bg-neutral-100 dark:bg-black-700 rounded-lg"})}),e.jsxs("div",{className:"flex gap-5 items-center",children:[e.jsx("div",{className:"bg-neutral-100 dark:bg-black-700 rounded-lg p-1 flex items-center",children:T.map(({icon:p,key:r,tooltip:m})=>e.jsx(b,{title:m?x(m):"",children:e.jsx("div",{className:f(d===r?"bg-white dark:bg-black-500":"","cursor-pointer rounded-lg flex items-center justify-center h-[32px] w-[42px]"),onClick:()=>h(r),children:a.cloneElement(p,{fill:d===r?k?"#FFFFFF":"#101828":"#98A2B3"})})},r))}),!t&&s?e.jsx(b,{title:x("Exit"),children:e.jsx("div",{className:"border border-[#FECDCA] rounded-lg cursor-pointer h-[40px] w-[40px] flex items-center justify-center",onClick:u,children:e.jsx(I.ExitIcon,{fill:"#D92D20"})})}):null]})]})},F=a.memo(A);module.exports=F;
+"use strict";const e=require("react/jsx-runtime"),g=require("../../../../_virtual/index.cjs.js"),a=require("react"),j=require("../ComparisonContext.cjs.js"),o=require("../constants.cjs.js"),b=require("../../../tooltip/Tooltip.cjs.js"),p=require("../../../button/Button.cjs.js"),y=require("../../../../hooks/useIsDarkMode.cjs.js"),N=require("react-i18next"),w=require("../../../icon/icons.generated.cjs.js"),I=require("../icons/ExitIcon.cjs.js"),C=require("../icons/LayoutOneIcon.cjs.js"),O=require("../icons/LayoutTwoIcon.cjs.js"),q=require("../icons/LayoutThreeIcon.cjs.js"),T=[{icon:e.jsx(C.LayoutOneIcon,{className:"text-black-900 dark:text-white"}),key:o.COMPARISON_LAYOUT.ONE,tooltip:"One column"},{icon:e.jsx(O.LayoutTwoIcon,{className:"text-black-900 dark:text-white"}),key:o.COMPARISON_LAYOUT.TWO,tooltip:"Two column"},{icon:e.jsx(q.LayoutThreeIcon,{className:"text-black-900 dark:text-white"}),key:o.COMPARISON_LAYOUT.THREE,tooltip:"Three column"}],A=({onNavigateBack:c,tabsComponent:i})=>{const{setLayout:h,title:l,layout:d,returnUrl:s,onReturn:t,headerTabConfig:n}=a.useContext(j.ComparisonContext),{t:u}=N.useTranslation(),k=y.useIsDarkMode(),x=()=>{t?t():s&&c&&c(s?.toString()||"/home")};return e.jsxs("div",{className:"flex flex-wrap items-center justify-between p-4 border-y border-y-[#EAECF0] bg-[#F9FAFB] dark:bg-black-800 gap-2 flex-col sm:flex-row",children:[t?e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(p,{id:"btn-comparison-go-back",status:"no-background",className:"!p-0 !border-0 hover:!opacity-70",onClick:x,children:e.jsx(w.ArrowBackIcon,{size:20,className:"text-neutral-900 dark:text-white"})}),e.jsx("span",{className:"text-lg font-inter font-bold text-neutral-900 dark:text-white",children:l})]}):e.jsx("p",{className:"text-lg font-inter font-bold text-neutral-900 dark:text-white",children:l}),i&&e.jsx("div",{className:"flex justify-center",children:e.jsx(i,{variant:"secondary",tabs:n?.tabs||[],...n?.tabState,tabKey:n?.tabKey||"",size:"sm",draggable:!1,showAllItems:!0,className:"p-1 border-none bg-neutral-100 dark:bg-black-700 rounded-lg"})}),e.jsxs("div",{className:"flex gap-5 items-center",children:[e.jsx("div",{className:"bg-neutral-100 dark:bg-black-700 rounded-lg p-1 flex items-center",children:T.map(({icon:f,key:r,tooltip:m})=>e.jsx(b,{title:m?u(m):"",children:e.jsx("div",{className:g(d===r?"bg-white dark:bg-black-500":"","cursor-pointer rounded-lg flex items-center justify-center h-8 w-[42px]"),onClick:()=>h(r),children:a.cloneElement(f,{fill:d===r?k?"#FFFFFF":"#101828":"#98A2B3"})})},r))}),!t&&s?e.jsx(b,{title:u("Exit"),children:e.jsx("div",{className:"border border-[#FECDCA] rounded-lg cursor-pointer size-10 flex items-center justify-center",onClick:x,children:e.jsx(I.ExitIcon,{fill:"#D92D20"})})}):null]})]})},F=a.memo(A);module.exports=F;
 //# sourceMappingURL=Header.cjs.js.map

package/dist/components/data-display/comparison/components/Header.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.cjs.js","sources":["../../../../../src/components/data-display/comparison/components/Header.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport React, { useContext } from \"react\";\n\nimport { ComparisonContext } from \"../ComparisonContext\";\nimport { COMPARISON_LAYOUT } from \"../constants\";\nimport {\n  ExitIcon,\n  LayoutOneIcon,\n  LayoutTwoIcon,\n  LayoutThreeIcon,\n} from \"../icons\";\nimport Tooltip from \"../../../tooltip/Tooltip\";\nimport { ArrowBackIcon } from \"../../../icon\";\nimport Button from \"../../../button/Button\";\nimport { useIsDarkMode } from \"../../../../hooks/useIsDarkMode\";\nimport { useTranslation } from \"react-i18next\";\n\nexport interface ComparisonHeaderProps {\n  /** Optional navigation function to go back */\n  onNavigateBack?: (url: string) => void;\n  /** Custom tabs component to render in the header */\n  tabsComponent?: React.ElementType;\n}\n\nconst LAYOUTS: Array<{\n  icon: React.ReactNode;\n  key: COMPARISON_LAYOUT;\n  tooltip: string;\n}> = [\n  {\n    icon: <LayoutOneIcon className=\"text-black-900 dark:text-white\" />,\n    key: COMPARISON_LAYOUT.ONE,\n    tooltip: \"One column\",\n  },\n  {\n    icon: <LayoutTwoIcon className=\"text-black-900 dark:text-white\" />,\n    key: COMPARISON_LAYOUT.TWO,\n    tooltip: \"Two column\",\n  },\n  {\n    icon: <LayoutThreeIcon className=\"text-black-900 dark:text-white\" />,\n    key: COMPARISON_LAYOUT.THREE,\n    tooltip: \"Three column\",\n  },\n];\n\nconst Header: React.FC<ComparisonHeaderProps> = ({\n  onNavigateBack,\n  tabsComponent: TabsComponent,\n}) => {\n  const { setLayout, title, layout, returnUrl, onReturn, headerTabConfig } =\n    useContext(ComparisonContext);\n  const { t } = useTranslation();\n  const isDarkMode = useIsDarkMode();\n\n  const goBack = () => {\n    if (onReturn) {\n      onReturn();\n    } else if (returnUrl && onNavigateBack) {\n      onNavigateBack(returnUrl?.toString() || \"/home\");\n    }\n  };\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-between p-4 border-y border-y-[#EAECF0] bg-[#F9FAFB] dark:bg-black-800 gap-2 flex-col sm:flex-row\">\n      {onReturn ? (\n        <div className=\"flex items-center gap-2\">\n          <Button\n            id=\"btn-comparison-go-back\"\n            status=\"no-background\"\n            className=\"!p-0 !border-0 hover:!opacity-70\"\n            onClick={goBack}\n          >\n            <ArrowBackIcon\n              size={20}\n              className=\"text-neutral-900 dark:text-white\"\n            />\n          </Button>\n          <span className=\"text-lg font-inter font-bold text-neutral-900 dark:text-white\">\n            {title}\n          </span>\n        </div>\n      ) : (\n        <p className=\"text-lg font-inter font-bold text-neutral-900 dark:text-white\">\n          {title}\n        </p>\n      )}\n      {TabsComponent && (\n        <div className=\"flex justify-center\">\n          <TabsComponent\n            variant=\"secondary\"\n            tabs={headerTabConfig?.tabs || []}\n            {...headerTabConfig?.tabState}\n            tabKey={headerTabConfig?.tabKey || \"\"}\n            size=\"sm\"\n            draggable={false}\n            showAllItems={true}\n            className=\"p-1 border-none bg-neutral-100 dark:bg-black-700 rounded-lg\"\n          />\n        </div>\n      )}\n      <div className=\"flex gap-5 items-center\">\n        <div className=\"bg-neutral-100 dark:bg-black-700 rounded-lg p-1 flex items-center\">\n          {LAYOUTS.map(({ icon, key, tooltip }) => (\n            <Tooltip key={key} title={tooltip ? t(tooltip) : \"\"}>\n              <div\n                className={cn(\n                  layout === key ? \"bg-white dark:bg-black-500\" : \"\",\n                  \"cursor-pointer rounded-lg flex items-center justify-center h-[32px] w-[42px]\"\n                )}\n                onClick={() => setLayout(key)}\n              >\n                {React.cloneElement(icon as unknown as React.ReactElement, {\n                  fill:\n                    layout === key\n                      ? isDarkMode\n                        ? \"#FFFFFF\"\n                        : \"#101828\"\n                      : \"#98A2B3\",\n                })}\n              </div>\n            </Tooltip>\n          ))}\n        </div>\n        {!onReturn && returnUrl ? (\n          <Tooltip title={t(\"Exit\")}>\n            <div\n              className=\"border border-[#FECDCA] rounded-lg cursor-pointer h-[40px] w-[40px] flex items-center justify-center\"\n              onClick={goBack}\n            >\n              <ExitIcon fill=\"#D92D20\" />\n            </div>\n          </Tooltip>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default React.memo(Header);\n"],"names":["LAYOUTS","jsx","LayoutOneIcon","COMPARISON_LAYOUT","LayoutTwoIcon","LayoutThreeIcon","Header","onNavigateBack","TabsComponent","setLayout","title","layout","returnUrl","onReturn","headerTabConfig","useContext","ComparisonContext","t","useTranslation","isDarkMode","useIsDarkMode","goBack","jsxs","Button","ArrowBackIcon","icon","key","tooltip","Tooltip","cn","React","ExitIcon","Header$1"],"mappings":"gkBAwBMA,EAID,CACH,CACE,KAAMC,EAAAA,IAACC,EAAAA,cAAA,CAAc,UAAU,gCAAA,CAAiC,EAChE,IAAKC,EAAAA,kBAAkB,IACvB,QAAS,YAAA,EAEX,CACE,KAAMF,EAAAA,IAACG,EAAAA,cAAA,CAAc,UAAU,gCAAA,CAAiC,EAChE,IAAKD,EAAAA,kBAAkB,IACvB,QAAS,YAAA,EAEX,CACE,KAAMF,EAAAA,IAACI,EAAAA,gBAAA,CAAgB,UAAU,gCAAA,CAAiC,EAClE,IAAKF,EAAAA,kBAAkB,MACvB,QAAS,cAAA,CAEb,EAEMG,EAA0C,CAAC,CAC/C,eAAAC,EACA,cAAeC,CACjB,IAAM,CACJ,KAAM,CAAE,UAAAC,EAAW,MAAAC,EAAO,OAAAC,EAAQ,UAAAC,EAAW,SAAAC,EAAU,gBAAAC,CAAA,EACrDC,EAAAA,WAAWC,mBAAiB,EACxB,CAAE,EAAAC,CAAA,EAAMC,iBAAA,EACRC,EAAaC,EAAAA,cAAA,EAEbC,EAAS,IAAM,CACfR,EACFA,EAAA,EACSD,GAAaL,GACtBA,EAAeK,GAAW,SAAA,GAAc,OAAO,CAEnD,EAEA,OACEU,EAAAA,KAAC,MAAA,CAAI,UAAU,wIACZ,SAAA,CAAAT,EACCS,EAAAA,KAAC,MAAA,CAAI,UAAU,0BACb,SAAA,CAAArB,EAAAA,IAACsB,EAAA,CACC,GAAG,yBACH,OAAO,gBACP,UAAU,mCACV,QAASF,EAET,SAAApB,EAAAA,IAACuB,EAAAA,cAAA,CACC,KAAM,GACN,UAAU,kCAAA,CAAA,CACZ,CAAA,EAEFvB,EAAAA,IAAC,OAAA,CAAK,UAAU,gEACb,SAAAS,CAAA,CACH,CAAA,EACF,EAEAT,EAAAA,IAAC,IAAA,CAAE,UAAU,gEACV,SAAAS,EACH,EAEDF,GACCP,EAAAA,IAAC,MAAA,CAAI,UAAU,sBACb,SAAAA,EAAAA,IAACO,EAAA,CACC,QAAQ,YACR,KAAMM,GAAiB,MAAQ,CAAA,EAC9B,GAAGA,GAAiB,SACrB,OAAQA,GAAiB,QAAU,GACnC,KAAK,KACL,UAAW,GACX,aAAc,GACd,UAAU,6DAAA,CAAA,EAEd,EAEFQ,EAAAA,KAAC,MAAA,CAAI,UAAU,0BACb,SAAA,CAAArB,MAAC,OAAI,UAAU,oEACZ,WAAQ,IAAI,CAAC,CAAE,KAAAwB,EAAM,IAAAC,EAAK,QAAAC,CAAA,UACxBC,EAAA,CAAkB,MAAOD,EAAUV,EAAEU,CAAO,EAAI,GAC/C,SAAA1B,EAAAA,IAAC,MAAA,CACC,UAAW4B,EACTlB,IAAWe,EAAM,6BAA+B,GAChD,8EAAA,EAEF,QAAS,IAAMjB,EAAUiB,CAAG,EAE3B,SAAAI,EAAM,aAAaL,EAAuC,CACzD,KACEd,IAAWe,EACPP,EACE,UACA,UACF,SAAA,CACP,CAAA,CAAA,GAfSO,CAiBd,CACD,EACH,EACC,CAACb,GAAYD,EACZX,EAAAA,IAAC2B,GAAQ,MAAOX,EAAE,MAAM,EACtB,SAAAhB,EAAAA,IAAC,MAAA,CACC,UAAU,uGACV,QAASoB,EAET,SAAApB,EAAAA,IAAC8B,EAAAA,SAAA,CAAS,KAAK,SAAA,CAAU,CAAA,CAAA,EAE7B,EACE,IAAA,CAAA,CACN,CAAA,EACF,CAEJ,EAEAC,EAAeF,EAAM,KAAKxB,CAAM"}
+{"version":3,"file":"Header.cjs.js","sources":["../../../../../src/components/data-display/comparison/components/Header.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport React, { useContext } from \"react\";\n\nimport { ComparisonContext } from \"../ComparisonContext\";\nimport { COMPARISON_LAYOUT } from \"../constants\";\nimport {\n  ExitIcon,\n  LayoutOneIcon,\n  LayoutTwoIcon,\n  LayoutThreeIcon,\n} from \"../icons\";\nimport Tooltip from \"../../../tooltip/Tooltip\";\nimport { ArrowBackIcon } from \"../../../icon\";\nimport Button from \"../../../button/Button\";\nimport { useIsDarkMode } from \"../../../../hooks/useIsDarkMode\";\nimport { useTranslation } from \"react-i18next\";\n\nexport interface ComparisonHeaderProps {\n  /** Optional navigation function to go back */\n  onNavigateBack?: (url: string) => void;\n  /** Custom tabs component to render in the header */\n  tabsComponent?: React.ElementType;\n}\n\nconst LAYOUTS: Array<{\n  icon: React.ReactNode;\n  key: COMPARISON_LAYOUT;\n  tooltip: string;\n}> = [\n  {\n    icon: <LayoutOneIcon className=\"text-black-900 dark:text-white\" />,\n    key: COMPARISON_LAYOUT.ONE,\n    tooltip: \"One column\",\n  },\n  {\n    icon: <LayoutTwoIcon className=\"text-black-900 dark:text-white\" />,\n    key: COMPARISON_LAYOUT.TWO,\n    tooltip: \"Two column\",\n  },\n  {\n    icon: <LayoutThreeIcon className=\"text-black-900 dark:text-white\" />,\n    key: COMPARISON_LAYOUT.THREE,\n    tooltip: \"Three column\",\n  },\n];\n\nconst Header: React.FC<ComparisonHeaderProps> = ({\n  onNavigateBack,\n  tabsComponent: TabsComponent,\n}) => {\n  const { setLayout, title, layout, returnUrl, onReturn, headerTabConfig } =\n    useContext(ComparisonContext);\n  const { t } = useTranslation();\n  const isDarkMode = useIsDarkMode();\n\n  const goBack = () => {\n    if (onReturn) {\n      onReturn();\n    } else if (returnUrl && onNavigateBack) {\n      onNavigateBack(returnUrl?.toString() || \"/home\");\n    }\n  };\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-between p-4 border-y border-y-[#EAECF0] bg-[#F9FAFB] dark:bg-black-800 gap-2 flex-col sm:flex-row\">\n      {onReturn ? (\n        <div className=\"flex items-center gap-2\">\n          <Button\n            id=\"btn-comparison-go-back\"\n            status=\"no-background\"\n            className=\"!p-0 !border-0 hover:!opacity-70\"\n            onClick={goBack}\n          >\n            <ArrowBackIcon\n              size={20}\n              className=\"text-neutral-900 dark:text-white\"\n            />\n          </Button>\n          <span className=\"text-lg font-inter font-bold text-neutral-900 dark:text-white\">\n            {title}\n          </span>\n        </div>\n      ) : (\n        <p className=\"text-lg font-inter font-bold text-neutral-900 dark:text-white\">\n          {title}\n        </p>\n      )}\n      {TabsComponent && (\n        <div className=\"flex justify-center\">\n          <TabsComponent\n            variant=\"secondary\"\n            tabs={headerTabConfig?.tabs || []}\n            {...headerTabConfig?.tabState}\n            tabKey={headerTabConfig?.tabKey || \"\"}\n            size=\"sm\"\n            draggable={false}\n            showAllItems={true}\n            className=\"p-1 border-none bg-neutral-100 dark:bg-black-700 rounded-lg\"\n          />\n        </div>\n      )}\n      <div className=\"flex gap-5 items-center\">\n        <div className=\"bg-neutral-100 dark:bg-black-700 rounded-lg p-1 flex items-center\">\n          {LAYOUTS.map(({ icon, key, tooltip }) => (\n            <Tooltip key={key} title={tooltip ? t(tooltip) : \"\"}>\n              <div\n                className={cn(\n                  layout === key ? \"bg-white dark:bg-black-500\" : \"\",\n                  \"cursor-pointer rounded-lg flex items-center justify-center h-8 w-[42px]\"\n                )}\n                onClick={() => setLayout(key)}\n              >\n                {React.cloneElement(icon as unknown as React.ReactElement, {\n                  fill:\n                    layout === key\n                      ? isDarkMode\n                        ? \"#FFFFFF\"\n                        : \"#101828\"\n                      : \"#98A2B3\",\n                })}\n              </div>\n            </Tooltip>\n          ))}\n        </div>\n        {!onReturn && returnUrl ? (\n          <Tooltip title={t(\"Exit\")}>\n            <div\n              className=\"border border-[#FECDCA] rounded-lg cursor-pointer size-10 flex items-center justify-center\"\n              onClick={goBack}\n            >\n              <ExitIcon fill=\"#D92D20\" />\n            </div>\n          </Tooltip>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default React.memo(Header);\n"],"names":["LAYOUTS","jsx","LayoutOneIcon","COMPARISON_LAYOUT","LayoutTwoIcon","LayoutThreeIcon","Header","onNavigateBack","TabsComponent","setLayout","title","layout","returnUrl","onReturn","headerTabConfig","useContext","ComparisonContext","t","useTranslation","isDarkMode","useIsDarkMode","goBack","jsxs","Button","ArrowBackIcon","icon","key","tooltip","Tooltip","cn","React","ExitIcon","Header$1"],"mappings":"gkBAwBMA,EAID,CACH,CACE,KAAMC,EAAAA,IAACC,EAAAA,cAAA,CAAc,UAAU,gCAAA,CAAiC,EAChE,IAAKC,EAAAA,kBAAkB,IACvB,QAAS,YAAA,EAEX,CACE,KAAMF,EAAAA,IAACG,EAAAA,cAAA,CAAc,UAAU,gCAAA,CAAiC,EAChE,IAAKD,EAAAA,kBAAkB,IACvB,QAAS,YAAA,EAEX,CACE,KAAMF,EAAAA,IAACI,EAAAA,gBAAA,CAAgB,UAAU,gCAAA,CAAiC,EAClE,IAAKF,EAAAA,kBAAkB,MACvB,QAAS,cAAA,CAEb,EAEMG,EAA0C,CAAC,CAC/C,eAAAC,EACA,cAAeC,CACjB,IAAM,CACJ,KAAM,CAAE,UAAAC,EAAW,MAAAC,EAAO,OAAAC,EAAQ,UAAAC,EAAW,SAAAC,EAAU,gBAAAC,CAAA,EACrDC,EAAAA,WAAWC,mBAAiB,EACxB,CAAE,EAAAC,CAAA,EAAMC,iBAAA,EACRC,EAAaC,EAAAA,cAAA,EAEbC,EAAS,IAAM,CACfR,EACFA,EAAA,EACSD,GAAaL,GACtBA,EAAeK,GAAW,SAAA,GAAc,OAAO,CAEnD,EAEA,OACEU,EAAAA,KAAC,MAAA,CAAI,UAAU,wIACZ,SAAA,CAAAT,EACCS,EAAAA,KAAC,MAAA,CAAI,UAAU,0BACb,SAAA,CAAArB,EAAAA,IAACsB,EAAA,CACC,GAAG,yBACH,OAAO,gBACP,UAAU,mCACV,QAASF,EAET,SAAApB,EAAAA,IAACuB,EAAAA,cAAA,CACC,KAAM,GACN,UAAU,kCAAA,CAAA,CACZ,CAAA,EAEFvB,EAAAA,IAAC,OAAA,CAAK,UAAU,gEACb,SAAAS,CAAA,CACH,CAAA,EACF,EAEAT,EAAAA,IAAC,IAAA,CAAE,UAAU,gEACV,SAAAS,EACH,EAEDF,GACCP,EAAAA,IAAC,MAAA,CAAI,UAAU,sBACb,SAAAA,EAAAA,IAACO,EAAA,CACC,QAAQ,YACR,KAAMM,GAAiB,MAAQ,CAAA,EAC9B,GAAGA,GAAiB,SACrB,OAAQA,GAAiB,QAAU,GACnC,KAAK,KACL,UAAW,GACX,aAAc,GACd,UAAU,6DAAA,CAAA,EAEd,EAEFQ,EAAAA,KAAC,MAAA,CAAI,UAAU,0BACb,SAAA,CAAArB,MAAC,OAAI,UAAU,oEACZ,WAAQ,IAAI,CAAC,CAAE,KAAAwB,EAAM,IAAAC,EAAK,QAAAC,CAAA,UACxBC,EAAA,CAAkB,MAAOD,EAAUV,EAAEU,CAAO,EAAI,GAC/C,SAAA1B,EAAAA,IAAC,MAAA,CACC,UAAW4B,EACTlB,IAAWe,EAAM,6BAA+B,GAChD,yEAAA,EAEF,QAAS,IAAMjB,EAAUiB,CAAG,EAE3B,SAAAI,EAAM,aAAaL,EAAuC,CACzD,KACEd,IAAWe,EACPP,EACE,UACA,UACF,SAAA,CACP,CAAA,CAAA,GAfSO,CAiBd,CACD,EACH,EACC,CAACb,GAAYD,EACZX,EAAAA,IAAC2B,GAAQ,MAAOX,EAAE,MAAM,EACtB,SAAAhB,EAAAA,IAAC,MAAA,CACC,UAAU,6FACV,QAASoB,EAET,SAAApB,EAAAA,IAAC8B,EAAAA,SAAA,CAAS,KAAK,SAAA,CAAU,CAAA,CAAA,EAE7B,EACE,IAAA,CAAA,CACN,CAAA,EACF,CAEJ,EAEAC,EAAeF,EAAM,KAAKxB,CAAM"}

package/dist/components/data-display/comparison/components/Header.es.js

@@ -1,7 +1,7 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import g from "../../../../_virtual/index.es.js";
-import x, { useContext as w } from "react";
-import { ComparisonContext as N } from "../ComparisonContext.es.js";
+import b, { useContext as N } from "react";
+import { ComparisonContext as w } from "../ComparisonContext.es.js";
 import { COMPARISON_LAYOUT as n } from "../constants.es.js";
 import u from "../../../tooltip/Tooltip.es.js";
 import y from "../../../button/Button.es.js";
@@ -30,9 +30,9 @@ const O = [
   }
 ], j = ({
   onNavigateBack: i,
-  tabsComponent: c
+  tabsComponent: s
 }) => {
-  const { setLayout: b, title: s, layout: m, returnUrl: o, onReturn: t, headerTabConfig: a } = w(N), { t: d } = F(), h = C(), f = () => {
+  const { setLayout: x, title: c, layout: m, returnUrl: o, onReturn: t, headerTabConfig: a } = N(w), { t: d } = F(), h = C(), f = () => {
     t ? t() : o && i && i(o?.toString() || "/home");
   };
   return /* @__PURE__ */ l("div", { className: "flex flex-wrap items-center justify-between p-4 border-y border-y-[#EAECF0] bg-[#F9FAFB] dark:bg-black-800 gap-2 flex-col sm:flex-row", children: [
@@ -53,10 +53,10 @@ const O = [
           )
         }
       ),
-      /* @__PURE__ */ e("span", { className: "text-lg font-inter font-bold text-neutral-900 dark:text-white", children: s })
-    ] }) : /* @__PURE__ */ e("p", { className: "text-lg font-inter font-bold text-neutral-900 dark:text-white", children: s }),
-    c && /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(
-      c,
+      /* @__PURE__ */ e("span", { className: "text-lg font-inter font-bold text-neutral-900 dark:text-white", children: c })
+    ] }) : /* @__PURE__ */ e("p", { className: "text-lg font-inter font-bold text-neutral-900 dark:text-white", children: c }),
+    s && /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(
+      s,
       {
         variant: "secondary",
         tabs: a?.tabs || [],
@@ -74,10 +74,10 @@ const O = [
         {
           className: g(
             m === r ? "bg-white dark:bg-black-500" : "",
-            "cursor-pointer rounded-lg flex items-center justify-center h-[32px] w-[42px]"
+            "cursor-pointer rounded-lg flex items-center justify-center h-8 w-[42px]"
           ),
-          onClick: () => b(r),
-          children: x.cloneElement(k, {
+          onClick: () => x(r),
+          children: b.cloneElement(k, {
             fill: m === r ? h ? "#FFFFFF" : "#101828" : "#98A2B3"
           })
         }
@@ -85,14 +85,14 @@ const O = [
       !t && o ? /* @__PURE__ */ e(u, { title: d("Exit"), children: /* @__PURE__ */ e(
         "div",
         {
-          className: "border border-[#FECDCA] rounded-lg cursor-pointer h-[40px] w-[40px] flex items-center justify-center",
+          className: "border border-[#FECDCA] rounded-lg cursor-pointer size-10 flex items-center justify-center",
           onClick: f,
           children: /* @__PURE__ */ e(A, { fill: "#D92D20" })
         }
       ) }) : null
     ] })
   ] });
-}, $ = x.memo(j);
+}, $ = b.memo(j);
 export {
   $ as default
 };

package/dist/components/data-display/comparison/components/Header.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.es.js","sources":["../../../../../src/components/data-display/comparison/components/Header.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport React, { useContext } from \"react\";\n\nimport { ComparisonContext } from \"../ComparisonContext\";\nimport { COMPARISON_LAYOUT } from \"../constants\";\nimport {\n  ExitIcon,\n  LayoutOneIcon,\n  LayoutTwoIcon,\n  LayoutThreeIcon,\n} from \"../icons\";\nimport Tooltip from \"../../../tooltip/Tooltip\";\nimport { ArrowBackIcon } from \"../../../icon\";\nimport Button from \"../../../button/Button\";\nimport { useIsDarkMode } from \"../../../../hooks/useIsDarkMode\";\nimport { useTranslation } from \"react-i18next\";\n\nexport interface ComparisonHeaderProps {\n  /** Optional navigation function to go back */\n  onNavigateBack?: (url: string) => void;\n  /** Custom tabs component to render in the header */\n  tabsComponent?: React.ElementType;\n}\n\nconst LAYOUTS: Array<{\n  icon: React.ReactNode;\n  key: COMPARISON_LAYOUT;\n  tooltip: string;\n}> = [\n  {\n    icon: <LayoutOneIcon className=\"text-black-900 dark:text-white\" />,\n    key: COMPARISON_LAYOUT.ONE,\n    tooltip: \"One column\",\n  },\n  {\n    icon: <LayoutTwoIcon className=\"text-black-900 dark:text-white\" />,\n    key: COMPARISON_LAYOUT.TWO,\n    tooltip: \"Two column\",\n  },\n  {\n    icon: <LayoutThreeIcon className=\"text-black-900 dark:text-white\" />,\n    key: COMPARISON_LAYOUT.THREE,\n    tooltip: \"Three column\",\n  },\n];\n\nconst Header: React.FC<ComparisonHeaderProps> = ({\n  onNavigateBack,\n  tabsComponent: TabsComponent,\n}) => {\n  const { setLayout, title, layout, returnUrl, onReturn, headerTabConfig } =\n    useContext(ComparisonContext);\n  const { t } = useTranslation();\n  const isDarkMode = useIsDarkMode();\n\n  const goBack = () => {\n    if (onReturn) {\n      onReturn();\n    } else if (returnUrl && onNavigateBack) {\n      onNavigateBack(returnUrl?.toString() || \"/home\");\n    }\n  };\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-between p-4 border-y border-y-[#EAECF0] bg-[#F9FAFB] dark:bg-black-800 gap-2 flex-col sm:flex-row\">\n      {onReturn ? (\n        <div className=\"flex items-center gap-2\">\n          <Button\n            id=\"btn-comparison-go-back\"\n            status=\"no-background\"\n            className=\"!p-0 !border-0 hover:!opacity-70\"\n            onClick={goBack}\n          >\n            <ArrowBackIcon\n              size={20}\n              className=\"text-neutral-900 dark:text-white\"\n            />\n          </Button>\n          <span className=\"text-lg font-inter font-bold text-neutral-900 dark:text-white\">\n            {title}\n          </span>\n        </div>\n      ) : (\n        <p className=\"text-lg font-inter font-bold text-neutral-900 dark:text-white\">\n          {title}\n        </p>\n      )}\n      {TabsComponent && (\n        <div className=\"flex justify-center\">\n          <TabsComponent\n            variant=\"secondary\"\n            tabs={headerTabConfig?.tabs || []}\n            {...headerTabConfig?.tabState}\n            tabKey={headerTabConfig?.tabKey || \"\"}\n            size=\"sm\"\n            draggable={false}\n            showAllItems={true}\n            className=\"p-1 border-none bg-neutral-100 dark:bg-black-700 rounded-lg\"\n          />\n        </div>\n      )}\n      <div className=\"flex gap-5 items-center\">\n        <div className=\"bg-neutral-100 dark:bg-black-700 rounded-lg p-1 flex items-center\">\n          {LAYOUTS.map(({ icon, key, tooltip }) => (\n            <Tooltip key={key} title={tooltip ? t(tooltip) : \"\"}>\n              <div\n                className={cn(\n                  layout === key ? \"bg-white dark:bg-black-500\" : \"\",\n                  \"cursor-pointer rounded-lg flex items-center justify-center h-[32px] w-[42px]\"\n                )}\n                onClick={() => setLayout(key)}\n              >\n                {React.cloneElement(icon as unknown as React.ReactElement, {\n                  fill:\n                    layout === key\n                      ? isDarkMode\n                        ? \"#FFFFFF\"\n                        : \"#101828\"\n                      : \"#98A2B3\",\n                })}\n              </div>\n            </Tooltip>\n          ))}\n        </div>\n        {!onReturn && returnUrl ? (\n          <Tooltip title={t(\"Exit\")}>\n            <div\n              className=\"border border-[#FECDCA] rounded-lg cursor-pointer h-[40px] w-[40px] flex items-center justify-center\"\n              onClick={goBack}\n            >\n              <ExitIcon fill=\"#D92D20\" />\n            </div>\n          </Tooltip>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default React.memo(Header);\n"],"names":["LAYOUTS","jsx","LayoutOneIcon","COMPARISON_LAYOUT","LayoutTwoIcon","LayoutThreeIcon","Header","onNavigateBack","TabsComponent","setLayout","title","layout","returnUrl","onReturn","headerTabConfig","useContext","ComparisonContext","t","useTranslation","isDarkMode","useIsDarkMode","goBack","jsxs","Button","ArrowBackIcon","icon","key","tooltip","Tooltip","cn","React","ExitIcon","Header$1"],"mappings":"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"}
+{"version":3,"file":"Header.es.js","sources":["../../../../../src/components/data-display/comparison/components/Header.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport React, { useContext } from \"react\";\n\nimport { ComparisonContext } from \"../ComparisonContext\";\nimport { COMPARISON_LAYOUT } from \"../constants\";\nimport {\n  ExitIcon,\n  LayoutOneIcon,\n  LayoutTwoIcon,\n  LayoutThreeIcon,\n} from \"../icons\";\nimport Tooltip from \"../../../tooltip/Tooltip\";\nimport { ArrowBackIcon } from \"../../../icon\";\nimport Button from \"../../../button/Button\";\nimport { useIsDarkMode } from \"../../../../hooks/useIsDarkMode\";\nimport { useTranslation } from \"react-i18next\";\n\nexport interface ComparisonHeaderProps {\n  /** Optional navigation function to go back */\n  onNavigateBack?: (url: string) => void;\n  /** Custom tabs component to render in the header */\n  tabsComponent?: React.ElementType;\n}\n\nconst LAYOUTS: Array<{\n  icon: React.ReactNode;\n  key: COMPARISON_LAYOUT;\n  tooltip: string;\n}> = [\n  {\n    icon: <LayoutOneIcon className=\"text-black-900 dark:text-white\" />,\n    key: COMPARISON_LAYOUT.ONE,\n    tooltip: \"One column\",\n  },\n  {\n    icon: <LayoutTwoIcon className=\"text-black-900 dark:text-white\" />,\n    key: COMPARISON_LAYOUT.TWO,\n    tooltip: \"Two column\",\n  },\n  {\n    icon: <LayoutThreeIcon className=\"text-black-900 dark:text-white\" />,\n    key: COMPARISON_LAYOUT.THREE,\n    tooltip: \"Three column\",\n  },\n];\n\nconst Header: React.FC<ComparisonHeaderProps> = ({\n  onNavigateBack,\n  tabsComponent: TabsComponent,\n}) => {\n  const { setLayout, title, layout, returnUrl, onReturn, headerTabConfig } =\n    useContext(ComparisonContext);\n  const { t } = useTranslation();\n  const isDarkMode = useIsDarkMode();\n\n  const goBack = () => {\n    if (onReturn) {\n      onReturn();\n    } else if (returnUrl && onNavigateBack) {\n      onNavigateBack(returnUrl?.toString() || \"/home\");\n    }\n  };\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-between p-4 border-y border-y-[#EAECF0] bg-[#F9FAFB] dark:bg-black-800 gap-2 flex-col sm:flex-row\">\n      {onReturn ? (\n        <div className=\"flex items-center gap-2\">\n          <Button\n            id=\"btn-comparison-go-back\"\n            status=\"no-background\"\n            className=\"!p-0 !border-0 hover:!opacity-70\"\n            onClick={goBack}\n          >\n            <ArrowBackIcon\n              size={20}\n              className=\"text-neutral-900 dark:text-white\"\n            />\n          </Button>\n          <span className=\"text-lg font-inter font-bold text-neutral-900 dark:text-white\">\n            {title}\n          </span>\n        </div>\n      ) : (\n        <p className=\"text-lg font-inter font-bold text-neutral-900 dark:text-white\">\n          {title}\n        </p>\n      )}\n      {TabsComponent && (\n        <div className=\"flex justify-center\">\n          <TabsComponent\n            variant=\"secondary\"\n            tabs={headerTabConfig?.tabs || []}\n            {...headerTabConfig?.tabState}\n            tabKey={headerTabConfig?.tabKey || \"\"}\n            size=\"sm\"\n            draggable={false}\n            showAllItems={true}\n            className=\"p-1 border-none bg-neutral-100 dark:bg-black-700 rounded-lg\"\n          />\n        </div>\n      )}\n      <div className=\"flex gap-5 items-center\">\n        <div className=\"bg-neutral-100 dark:bg-black-700 rounded-lg p-1 flex items-center\">\n          {LAYOUTS.map(({ icon, key, tooltip }) => (\n            <Tooltip key={key} title={tooltip ? t(tooltip) : \"\"}>\n              <div\n                className={cn(\n                  layout === key ? \"bg-white dark:bg-black-500\" : \"\",\n                  \"cursor-pointer rounded-lg flex items-center justify-center h-8 w-[42px]\"\n                )}\n                onClick={() => setLayout(key)}\n              >\n                {React.cloneElement(icon as unknown as React.ReactElement, {\n                  fill:\n                    layout === key\n                      ? isDarkMode\n                        ? \"#FFFFFF\"\n                        : \"#101828\"\n                      : \"#98A2B3\",\n                })}\n              </div>\n            </Tooltip>\n          ))}\n        </div>\n        {!onReturn && returnUrl ? (\n          <Tooltip title={t(\"Exit\")}>\n            <div\n              className=\"border border-[#FECDCA] rounded-lg cursor-pointer size-10 flex items-center justify-center\"\n              onClick={goBack}\n            >\n              <ExitIcon fill=\"#D92D20\" />\n            </div>\n          </Tooltip>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default React.memo(Header);\n"],"names":["LAYOUTS","jsx","LayoutOneIcon","COMPARISON_LAYOUT","LayoutTwoIcon","LayoutThreeIcon","Header","onNavigateBack","TabsComponent","setLayout","title","layout","returnUrl","onReturn","headerTabConfig","useContext","ComparisonContext","t","useTranslation","isDarkMode","useIsDarkMode","goBack","jsxs","Button","ArrowBackIcon","icon","key","tooltip","Tooltip","cn","React","ExitIcon","Header$1"],"mappings":";;;;;;;;;;;;;;AAwBA,MAAMA,IAID;AAAA,EACH;AAAA,IACE,MAAM,gBAAAC,EAACC,GAAA,EAAc,WAAU,iCAAA,CAAiC;AAAA,IAChE,KAAKC,EAAkB;AAAA,IACvB,SAAS;AAAA,EAAA;AAAA,EAEX;AAAA,IACE,MAAM,gBAAAF,EAACG,GAAA,EAAc,WAAU,iCAAA,CAAiC;AAAA,IAChE,KAAKD,EAAkB;AAAA,IACvB,SAAS;AAAA,EAAA;AAAA,EAEX;AAAA,IACE,MAAM,gBAAAF,EAACI,GAAA,EAAgB,WAAU,iCAAA,CAAiC;AAAA,IAClE,KAAKF,EAAkB;AAAA,IACvB,SAAS;AAAA,EAAA;AAEb,GAEMG,IAA0C,CAAC;AAAA,EAC/C,gBAAAC;AAAA,EACA,eAAeC;AACjB,MAAM;AACJ,QAAM,EAAE,WAAAC,GAAW,OAAAC,GAAO,QAAAC,GAAQ,WAAAC,GAAW,UAAAC,GAAU,iBAAAC,EAAA,IACrDC,EAAWC,CAAiB,GACxB,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IAAaC,EAAA,GAEbC,IAAS,MAAM;AACnB,IAAIR,IACFA,EAAA,IACSD,KAAaL,KACtBA,EAAeK,GAAW,SAAA,KAAc,OAAO;AAAA,EAEnD;AAEA,SACE,gBAAAU,EAAC,OAAA,EAAI,WAAU,yIACZ,UAAA;AAAA,IAAAT,IACC,gBAAAS,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,MAAA,gBAAArB;AAAA,QAACsB;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH,QAAO;AAAA,UACP,WAAU;AAAA,UACV,SAASF;AAAA,UAET,UAAA,gBAAApB;AAAA,YAACuB;AAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,MAEF,gBAAAvB,EAAC,QAAA,EAAK,WAAU,iEACb,UAAAS,EAAA,CACH;AAAA,IAAA,GACF,IAEA,gBAAAT,EAAC,KAAA,EAAE,WAAU,iEACV,UAAAS,GACH;AAAA,IAEDF,KACC,gBAAAP,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA,gBAAAA;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAMM,GAAiB,QAAQ,CAAA;AAAA,QAC9B,GAAGA,GAAiB;AAAA,QACrB,QAAQA,GAAiB,UAAU;AAAA,QACnC,MAAK;AAAA,QACL,WAAW;AAAA,QACX,cAAc;AAAA,QACd,WAAU;AAAA,MAAA;AAAA,IAAA,GAEd;AAAA,IAEF,gBAAAQ,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,MAAA,gBAAArB,EAAC,SAAI,WAAU,qEACZ,YAAQ,IAAI,CAAC,EAAE,MAAAwB,GAAM,KAAAC,GAAK,SAAAC,EAAA,wBACxBC,GAAA,EAAkB,OAAOD,IAAUV,EAAEU,CAAO,IAAI,IAC/C,UAAA,gBAAA1B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW4B;AAAA,YACTlB,MAAWe,IAAM,+BAA+B;AAAA,YAChD;AAAA,UAAA;AAAA,UAEF,SAAS,MAAMjB,EAAUiB,CAAG;AAAA,UAE3B,UAAAI,EAAM,aAAaL,GAAuC;AAAA,YACzD,MACEd,MAAWe,IACPP,IACE,YACA,YACF;AAAA,UAAA,CACP;AAAA,QAAA;AAAA,MAAA,KAfSO,CAiBd,CACD,GACH;AAAA,MACC,CAACb,KAAYD,IACZ,gBAAAX,EAAC2B,KAAQ,OAAOX,EAAE,MAAM,GACtB,UAAA,gBAAAhB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAASoB;AAAA,UAET,UAAA,gBAAApB,EAAC8B,GAAA,EAAS,MAAK,UAAA,CAAU;AAAA,QAAA;AAAA,MAAA,GAE7B,IACE;AAAA,IAAA,EAAA,CACN;AAAA,EAAA,GACF;AAEJ,GAEAC,IAAeF,EAAM,KAAKxB,CAAM;"}

package/dist/components/data-display/infinite-table/body/cell/DataCell.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),Oe=require("../../../../../hooks/useTheme.cjs.js"),D=require("../../../../../utils/formatters.cjs.js"),Ve=require("../../../../../constants/table.cjs.js"),qe=require("../../../../../providers/design-system-provider/hooks.cjs.js"),U=require("../../../../tooltip/Tooltip.cjs.js"),ze=require("../../../typography/Typography.cjs.js"),Ae=require("@mui/icons-material"),k=require("../../../../../_virtual/index.cjs.js"),a=require("react"),Fe=require("react-router-dom"),Ee=require("../../context.cjs.js"),Ke=require("./InlineEditField.cjs.js"),C=require("../../constants.cjs.js"),g=require("../../../../icon/icons.generated.cjs.js");let Y;const re=e=>{const t=Number(e);if(Number.isNaN(t)||e===null||e===void 0)return"0ms";if(t>=864e5){const w=Math.floor(t/864e5),f=Math.floor(t%864e5/36e5),i=Math.floor(t%36e5/6e4),b=Math.floor(t%6e4/1e3);return`${w}d ${f}h ${i}m ${b}s`}if(t>=36e5){const w=Math.floor(t/36e5),f=Math.floor(t%36e5/6e4),i=Math.floor(t%6e4/1e3);return`${w}h ${f}m ${i}s`}if(t>=6e4){const w=Math.floor(t/6e4),f=Math.floor(t%6e4/1e3);return`${w}m ${f}s`}return t>=1e3?`${(t/1e3).toFixed(2)}s`:`${t}ms`},We=({children:e,withLink:t,linkTo:w,rowData:f,disableRowClick:i})=>t&&!i?o.jsx(Fe.Link,{to:w?.(f?.id,f)||"",children:e}):e,Ue=({cell:e,id:t,nextWidthSum:w,isLastCell:f,rowHovering:i,index:b,isFirstStickyCell:ae,handleCellClick:se,currentData:x,highlightSubstring:M,is_read:ne,is_modified:ue,is_row_modified:ie,is_deleted:R,is_added:I,level:y,inlineEditing:v,isInlineEditing:c,setRowHovering:$,handleCellValueChange:le,cellRef:ce,handleUpdateCellData:me,registerValidation:de,loadingExpand:fe,toggleRowExpand:B,isDraggingOver:pe,isLoading:_,is_incomplete:X,pendingEdit:s,hasPendingEdit:l,pendingValidationError:we})=>{const{cascadingTableConfig:G,originalsOnly:he,maxLevel:be,showNewItem:ye,expandedRows:xe,rowLinkConfig:O,multiSelectConfig:ve,cellEditing:V,cellEditingValue:q,allowInlineEdit:H,fieldOperationLoading:ke,pendingEdits:Te,selectedRowId:z}=a.useContext(Ee.TableContext),Ce=z!=null&&String(z)===String(t),ge=qe.useTableConfig(),A=(e?.column?.key?e?.row?.original?.__cellMetadata?.[e.column.key]:void 0)?.is_locked??e?.column?.is_locked,F=(e?.column?.key?Te?.[t]?.[e.column.key]?.validationError:null)||we||null,P=v===e.column.key&&e?.column?.canEdit&&!A&&!e?.column?.is_disabled,_e=ke===`${t}-${e?.column?.id}`,{theme:je}=Oe.useTheme(),Ne=je==="dark",Le=a.useCallback(()=>$(t),[$,t]),Se=a.useCallback(()=>$(null),[$]),j=ge?.formatDuration,[n,p]=a.useState(e?.column?.dataType==="duration"&&e?.value?j?j(e.value):re(e.value):e.value),[h,J]=a.useState(null),[E,De]=a.useState(!1),[Me,Q]=a.useState(!1),[$e,Z]=a.useState(!1),N=a.useRef(null),L=a.useRef(),S=a.useRef(),{selectedColumnIds:ee=[]}=ve||{},oe=!Object.prototype.hasOwnProperty.call(e?.column?.meta??{},"shouldHighlight")||e?.column?.meta?.shouldHighlight,te=a.useCallback(()=>{N.current&&De(N.current.scrollWidth>N.current.clientWidth)},[]),K=a.useCallback(r=>{L.current&&clearTimeout(L.current),r?Q(!0):L.current=setTimeout(()=>Q(!1),200)},[]),W=a.useCallback(r=>{S.current&&clearTimeout(S.current),r?Z(!0):S.current=setTimeout(()=>Z(!1),200)},[]),T=k({"bg-amber-100 dark:bg-amber-900/30":l,"bg-neutral-100 dark:bg-black-600":i===t&&!c&&!l&&!(R||x?.is_deleted)&&!(I||x?.is_added),"bg-error-200 dark:bg-error-900":i===t&&!c&&!l&&(R||x?.is_deleted),"bg-success-100 dark:bg-success-800":i===t&&!c&&!l&&(I||x?.is_added),"bg-primary-50 dark:bg-black-700":!X&&!ne&&ye&&!_&&i!==t&&!c&&!l,"bg-warning-50 dark:bg-black-500":(X||ue||ie||x?.is_row_modified)&&!_&&i!==t&&!c&&!l,"bg-error-100 dark:bg-error-975":(R||x?.is_deleted)&&!_&&i!==t&&!c&&!l,"bg-success-50 dark:bg-success-900":(I||x?.is_added)&&!_&&i!==t&&!c&&!l,"bg-primary-50 dark:bg-primary-900":(pe||c)&&!l,"bg-primary-50 dark:bg-primary-800":ee?.includes(e.column.id)&&!c&&!l,"bg-primary-100 dark:bg-primary-950":Ce&&i!==t&&!c&&!l&&!_,[Ve.getTableRowBgClassNamesByStatus[e?.row?.original?.__rowBgStatus]]:e?.row?.original?.__rowBgStatus&&!c&&!l}),Re=r=>{e.column?.disableRowClick||se(r)};a.useEffect(()=>(e?.row?.original?.status==="running"&&e.column?.dataType==="duration"&&(Y=setInterval(()=>{const u=new Date(D.formatDate(e?.row?.original?.created_at||e?.row?.original?.executed_on,{withTime:!0,format:"yyyy-MM-dd HH:mm:ss"})),d=Math.abs(new Date().getTime()-new Date(u).getTime());p(j?j(d):re(d))},500)),()=>{Y&&clearInterval(Y)}),[n,e.value,e?.row?.original?.created_at,e?.row?.original?.executed_on,e?.row?.original?.status,e.column?.dataType,j]),a.useEffect(()=>{(e?.column?.tooltipCellKey||e?.column?.type?.toLowerCase()==="url")&&(e?.column?.type?.toLowerCase()==="url"?J(e?.value):J(e?.row?.original?.[String(e?.column?.tooltipCellKey)]))},[e?.column?.tooltipCellKey,e?.row?.original,e?.column?.type,e?.value]),a.useEffect(()=>{if(e?.column?.type?.toLowerCase()==="currency")if(s?.value!==void 0){const r=e?.row?.original?.__rawData,u=e?.column?.Header,d=s?.meta?.currency_code||r?.[u]?.currency_code||"USD";p(D.formatCurrency(s.value,d))}else{const r=e?.row?.original?.__rawData,u=e?.column?.Header;p(D.formatCurrency(e?.value,r?.[u]?.currency_code||"USD"))}},[e?.value,e?.column?.type,e?.column?.Header,e?.row?.original?.__rawData,s?.value,s?.meta?.currency_code]),a.useEffect(()=>{e?.column?.type?.toLowerCase()==="percentage"&&(s?.value!==void 0?p(s.value?.toString()+"%"||""):p(e?.value?.toString()+"%"||""))},[e?.value,e?.column?.type,s?.value]),a.useEffect(()=>{const r=e?.column?.type?.toLowerCase()||"";if(["date","datetime"].includes(r))if(s?.value!==void 0){const u=r==="datetime",d=D.formatDate(s.value,{withTime:u,skipTimezone:!0});p(d||s.value)}else p(e.value)},[e?.value,e?.column?.type,s?.value]),a.useEffect(()=>{const r=e?.column?.type?.toLowerCase()||"";["currency","percentage","duration","boolean","date","datetime"].includes(r)||(s?.value!==void 0?p(s.value):e?.column?.dataType!=="duration"&&p(e.value))},[e?.value,e?.column?.type,e?.column?.dataType,s?.value]),a.useEffect(()=>{if(e?.column?.type?.toLowerCase()==="boolean"&&H){const r=s?.value!==void 0?s.value:e?.value;p(r===!0||r==="true"||r==="True"||r==="Yes"||r===1?"Yes":"No")}},[e?.value,e?.column?.type,H,s?.value]),a.useEffect(()=>()=>{L.current&&clearTimeout(L.current),S.current&&clearTimeout(S.current)},[]);const m=a.isValidElement(n);return o.jsxs("td",{id:e.value,"data-column-key":e?.column?.key,...e.getCellProps(),onClick:O?.isEnabled?void 0:Re,className:k("h-row",{"sticky left-0":e?.column?.sticky,relative:!e?.column?.sticky,"w-full":f,"overflow-visible":v===e.column.key,"overflow-x-hidden overflow-y-visible":v!==e.column.key&&m,"overflow-hidden":v!==e.column.key&&!m},F&&!P?"outline outline-2 outline-error-500 -outline-offset-2 z-[5]":"",`${T||"bg-white dark:bg-black-800"}`),style:{minWidth:`${e.column.width}px`,maxWidth:`${e.column.width}px`,right:e?.column?.sticky?`${w}px`:C.CELL_DEFAULT_RIGHT_OFFSET,paddingLeft:y>0&&b===0?`${y*C.CELL_INDENT_PER_LEVEL_PX}px`:void 0},onMouseEnter:Le,onMouseLeave:Se,children:[o.jsx(We,{withLink:O?.isEnabled,linkTo:O?.linkTo||void 0,rowData:e?.row?.original,disableRowClick:e?.column?.disableRowClick,children:(Array.isArray(V)?V.includes(`${t}-${e?.column?.id}`):V===`${t}-${e?.column?.id}`)?o.jsxs("div",{className:"h-row top-0 font-medium font-inter w-full absolute flex items-center px-4",children:[o.jsx("span",{className:"text-neutral-400 dark:text-black-400 truncate",children:(()=>{const r=`${t}-${e?.column?.id}`,u=typeof q=="object"?q?.[r]:q,d=e?.column?.type?.toLowerCase();if(d==="boolean")return u===!0||u==="true"||u==="True"?"Yes":"No";if((d==="date"||d==="datetime")&&u){const Ie=d==="datetime";return D.formatDate(u,{withTime:Ie,skipTimezone:!0})||String(u)}return u!=null?String(u):n})()}),o.jsx("div",{className:"ml-2 flex items-center gap-1.5",children:o.jsx(g.LoadingSpinnerIcon,{className:"spinner text-neutral-600 dark:text-white",size:12})})]}):v===e.column.key&&e?.column?.canEdit&&!A&&!e?.column?.is_disabled?o.jsx("div",{className:"h-row w-full absolute top-0 left-0 flex items-center",style:{marginLeft:y>0&&b===0?`-${y*C.CELL_INDENT_PER_LEVEL_PX}px`:void 0,width:y>0&&b===0?`calc(100% + ${y*C.CELL_INDENT_PER_LEVEL_PX}px)`:"100%"},children:o.jsx(Ke.InlineEditField,{cell:e,id:t,inlineEditing:v,cellRef:ce,handleCellValueChange:le,handleUpdateCellData:me,registerValidation:de})}):o.jsxs(o.Fragment,{children:[y>0&&b===0&&o.jsx("div",{className:"h-row border-l border-neutral-300 dark:border-black-600 ml-2"}),o.jsx("div",{className:"min-h-6",children:o.jsx(U,{title:h&&e?.column?.type?.toLowerCase()!=="url"?h:void 0,hideTooltip:!h||e?.column?.type?.toLowerCase()==="url",delayShow:!0,placement:"top",children:o.jsxs("div",{className:k(`h-row top-0 font-medium font-inter overflow-index-auto whitespace-nowrap text-ellipsis dark:text-black-200 w-full absolute flex items-center ${T||"bg-white dark:bg-black-800"}`,m?"overflow-x-hidden overflow-y-visible":"overflow-x-hidden",{"border border-b-0 border-t-0 border-primary-600 dark:border-blue-800":ee?.includes(e.column.id)}),style:e?.column?.sticky&&ae?{boxShadow:Ne?C.CELL_STICKY_SHADOW_DARK:C.CELL_STICKY_SHADOW_LIGHT}:{},children:[G?.isCascading&&!he&&b===0&&o.jsx("div",{className:k("w-[22px] h-row flex items-center px-4",`${T||"bg-white dark:bg-black-800"}`),id:"cascading",children:be>y&&(e?.row?.original?.__has_children||G?.showAllDropdown)&&o.jsx("div",{children:fe?o.jsx(g.LoadingSpinnerIcon,{className:"text-neutral-600 dark:text-white",size:8}):o.jsx("div",{children:xe?.[t]?.isOpen?o.jsx(g.KeyboardArrowDownIcon,{size:20,className:"text-neutral-400 dark:text-neutral-400",onClick:r=>{B(),r.stopPropagation()}}):o.jsx(g.KeyboardArrowRightFilledIcon,{size:20,className:"text-neutral-400 dark:text-neutral-400",onClick:r=>{B(),r.stopPropagation()}})})})}),e?.column?.type?.toLowerCase()==="url"&&h?o.jsx(U,{title:o.jsx("div",{onMouseEnter:()=>K(!0),onMouseLeave:()=>K(!1),children:o.jsx("a",{href:h,target:"_blank",rel:"noopener noreferrer",onClick:r=>r.stopPropagation(),children:o.jsxs("div",{className:"flex gap-1 items-center w-full",children:[o.jsx("div",{className:"w-4 h-4",children:o.jsx(g.LinkIcon,{height:16,width:16})}),o.jsx(ze.Typography,{variant:"medium",size:"small",className:"truncate",appearance:"custom",children:h}),o.jsx(Ae.OpenInNewRounded,{sx:{height:"16px",width:"16px",color:"#016DCF"}})]})})}),placement:"top",open:Me,onOpenChange:K,className:"block w-full min-w-0 overflow-hidden",children:o.jsx("div",{className:"w-full h-full flex items-center px-4 min-w-0 overflow-hidden text-primary-400",children:o.jsx("span",{ref:N,onMouseEnter:te,className:"truncate w-full",children:M&&oe&&!a.isValidElement(n)&&typeof n!="object"?M(n):n})})}):o.jsx(U,{title:E&&n&&!m?o.jsx("div",{onMouseEnter:()=>W(!0),onMouseLeave:()=>W(!1),className:"max-h-96 overflow-y-auto whitespace-pre-wrap break-words no-scroll",children:String(n)}):void 0,placement:"top",delayShow:!0,hideTooltip:!!h,open:E&&!h&&!m?$e:void 0,onOpenChange:E&&!h&&!m?W:void 0,className:k("block w-full min-w-0",m?"overflow-x-hidden overflow-y-visible":"overflow-hidden"),children:o.jsx("div",{className:k("w-full h-full flex items-center px-4 min-w-0",m?"overflow-x-hidden overflow-y-visible":"overflow-hidden"),children:o.jsx("span",{ref:m?void 0:N,onMouseEnter:m?void 0:te,className:k(m?"flex min-w-0 max-w-full items-center justify-start gap-1":"truncate w-full"),children:M&&oe&&!a.isValidElement(n)&&typeof n!="object"?M(n):a.isValidElement(n)?typeof n.type=="string"?n:a.cloneElement(n,{...n.props,containerWidth:e.column.width}):n})})})]})})})]})}),F&&!P&&o.jsx("div",{className:"absolute bottom-0 left-0 right-0 h-row flex items-end pointer-events-none z-[5]",children:o.jsx("div",{className:"w-full bg-error-50 dark:bg-error-975 px-1.5 py-0.5 truncate",children:o.jsx("span",{className:"text-error-600 text-[10px] font-medium leading-none",children:F})})}),_e&&!(v===e.column.key&&e?.column?.canEdit&&!A&&!e?.column?.is_disabled)&&o.jsx("div",{className:"absolute top-0 right-0 bg-white dark:bg-black-800 rounded-full w-5 h-5 flex items-center justify-center border border-primary-300 dark:border-primary-600 shadow-sm z-10",children:o.jsx(g.LoadingSpinnerIcon,{className:"text-primary-600 dark:text-white",size:8})})]},b)},Ye=a.memo(Ue);exports.DataCell=Ye;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),Oe=require("../../../../../hooks/useTheme.cjs.js"),D=require("../../../../../utils/formatters.cjs.js"),Ve=require("../../../../../constants/table.cjs.js"),qe=require("../../../../../providers/design-system-provider/hooks.cjs.js"),U=require("../../../../tooltip/Tooltip.cjs.js"),ze=require("../../../typography/Typography.cjs.js"),Ae=require("@mui/icons-material"),k=require("../../../../../_virtual/index.cjs.js"),a=require("react"),Fe=require("react-router-dom"),Ee=require("../../context.cjs.js"),Ke=require("./InlineEditField.cjs.js"),C=require("../../constants.cjs.js"),g=require("../../../../icon/icons.generated.cjs.js");let Y;const re=e=>{const t=Number(e);if(Number.isNaN(t)||e===null||e===void 0)return"0ms";if(t>=864e5){const w=Math.floor(t/864e5),f=Math.floor(t%864e5/36e5),i=Math.floor(t%36e5/6e4),b=Math.floor(t%6e4/1e3);return`${w}d ${f}h ${i}m ${b}s`}if(t>=36e5){const w=Math.floor(t/36e5),f=Math.floor(t%36e5/6e4),i=Math.floor(t%6e4/1e3);return`${w}h ${f}m ${i}s`}if(t>=6e4){const w=Math.floor(t/6e4),f=Math.floor(t%6e4/1e3);return`${w}m ${f}s`}return t>=1e3?`${(t/1e3).toFixed(2)}s`:`${t}ms`},We=({children:e,withLink:t,linkTo:w,rowData:f,disableRowClick:i})=>t&&!i?o.jsx(Fe.Link,{to:w?.(f?.id,f)||"",children:e}):e,Ue=({cell:e,id:t,nextWidthSum:w,isLastCell:f,rowHovering:i,index:b,isFirstStickyCell:ae,handleCellClick:se,currentData:x,highlightSubstring:M,is_read:ne,is_modified:ue,is_row_modified:ie,is_deleted:R,is_added:I,level:y,inlineEditing:v,isInlineEditing:c,setRowHovering:$,handleCellValueChange:le,cellRef:ce,handleUpdateCellData:me,registerValidation:de,loadingExpand:fe,toggleRowExpand:B,isDraggingOver:pe,isLoading:_,is_incomplete:X,pendingEdit:s,hasPendingEdit:l,pendingValidationError:we})=>{const{cascadingTableConfig:G,originalsOnly:he,maxLevel:be,showNewItem:ye,expandedRows:xe,rowLinkConfig:O,multiSelectConfig:ve,cellEditing:V,cellEditingValue:q,allowInlineEdit:H,fieldOperationLoading:ke,pendingEdits:Te,selectedRowId:z}=a.useContext(Ee.TableContext),Ce=z!=null&&String(z)===String(t),ge=qe.useTableConfig(),A=(e?.column?.key?e?.row?.original?.__cellMetadata?.[e.column.key]:void 0)?.is_locked??e?.column?.is_locked,F=(e?.column?.key?Te?.[t]?.[e.column.key]?.validationError:null)||we||null,P=v===e.column.key&&e?.column?.canEdit&&!A&&!e?.column?.is_disabled,_e=ke===`${t}-${e?.column?.id}`,{theme:je}=Oe.useTheme(),Ne=je==="dark",Le=a.useCallback(()=>$(t),[$,t]),Se=a.useCallback(()=>$(null),[$]),j=ge?.formatDuration,[n,p]=a.useState(e?.column?.dataType==="duration"&&e?.value?j?j(e.value):re(e.value):e.value),[h,J]=a.useState(null),[E,De]=a.useState(!1),[Me,Q]=a.useState(!1),[$e,Z]=a.useState(!1),N=a.useRef(null),L=a.useRef(),S=a.useRef(),{selectedColumnIds:ee=[]}=ve||{},oe=!Object.prototype.hasOwnProperty.call(e?.column?.meta??{},"shouldHighlight")||e?.column?.meta?.shouldHighlight,te=a.useCallback(()=>{N.current&&De(N.current.scrollWidth>N.current.clientWidth)},[]),K=a.useCallback(r=>{L.current&&clearTimeout(L.current),r?Q(!0):L.current=setTimeout(()=>Q(!1),200)},[]),W=a.useCallback(r=>{S.current&&clearTimeout(S.current),r?Z(!0):S.current=setTimeout(()=>Z(!1),200)},[]),T=k({"bg-amber-100 dark:bg-amber-900/30":l,"bg-neutral-100 dark:bg-black-600":i===t&&!c&&!l&&!(R||x?.is_deleted)&&!(I||x?.is_added),"bg-error-200 dark:bg-error-900":i===t&&!c&&!l&&(R||x?.is_deleted),"bg-success-100 dark:bg-success-800":i===t&&!c&&!l&&(I||x?.is_added),"bg-primary-50 dark:bg-black-700":!X&&!ne&&ye&&!_&&i!==t&&!c&&!l,"bg-warning-50 dark:bg-black-500":(X||ue||ie||x?.is_row_modified)&&!_&&i!==t&&!c&&!l,"bg-error-100 dark:bg-error-975":(R||x?.is_deleted)&&!_&&i!==t&&!c&&!l,"bg-success-50 dark:bg-success-900":(I||x?.is_added)&&!_&&i!==t&&!c&&!l,"bg-primary-50 dark:bg-primary-900":(pe||c)&&!l,"bg-primary-50 dark:bg-primary-800":ee?.includes(e.column.id)&&!c&&!l,"bg-primary-100 dark:bg-primary-950":Ce&&i!==t&&!c&&!l&&!_,[Ve.getTableRowBgClassNamesByStatus[e?.row?.original?.__rowBgStatus]]:e?.row?.original?.__rowBgStatus&&!c&&!l}),Re=r=>{e.column?.disableRowClick||se(r)};a.useEffect(()=>(e?.row?.original?.status==="running"&&e.column?.dataType==="duration"&&(Y=setInterval(()=>{const u=new Date(D.formatDate(e?.row?.original?.created_at||e?.row?.original?.executed_on,{withTime:!0,format:"yyyy-MM-dd HH:mm:ss"})),d=Math.abs(new Date().getTime()-new Date(u).getTime());p(j?j(d):re(d))},500)),()=>{Y&&clearInterval(Y)}),[n,e.value,e?.row?.original?.created_at,e?.row?.original?.executed_on,e?.row?.original?.status,e.column?.dataType,j]),a.useEffect(()=>{(e?.column?.tooltipCellKey||e?.column?.type?.toLowerCase()==="url")&&(e?.column?.type?.toLowerCase()==="url"?J(e?.value):J(e?.row?.original?.[String(e?.column?.tooltipCellKey)]))},[e?.column?.tooltipCellKey,e?.row?.original,e?.column?.type,e?.value]),a.useEffect(()=>{if(e?.column?.type?.toLowerCase()==="currency")if(s?.value!==void 0){const r=e?.row?.original?.__rawData,u=e?.column?.Header,d=s?.meta?.currency_code||r?.[u]?.currency_code||"USD";p(D.formatCurrency(s.value,d))}else{const r=e?.row?.original?.__rawData,u=e?.column?.Header;p(D.formatCurrency(e?.value,r?.[u]?.currency_code||"USD"))}},[e?.value,e?.column?.type,e?.column?.Header,e?.row?.original?.__rawData,s?.value,s?.meta?.currency_code]),a.useEffect(()=>{e?.column?.type?.toLowerCase()==="percentage"&&(s?.value!==void 0?p(s.value?.toString()+"%"||""):p(e?.value?.toString()+"%"||""))},[e?.value,e?.column?.type,s?.value]),a.useEffect(()=>{const r=e?.column?.type?.toLowerCase()||"";if(["date","datetime"].includes(r))if(s?.value!==void 0){const u=r==="datetime",d=D.formatDate(s.value,{withTime:u,skipTimezone:!0});p(d||s.value)}else p(e.value)},[e?.value,e?.column?.type,s?.value]),a.useEffect(()=>{const r=e?.column?.type?.toLowerCase()||"";["currency","percentage","duration","boolean","date","datetime"].includes(r)||(s?.value!==void 0?p(s.value):e?.column?.dataType!=="duration"&&p(e.value))},[e?.value,e?.column?.type,e?.column?.dataType,s?.value]),a.useEffect(()=>{if(e?.column?.type?.toLowerCase()==="boolean"&&H){const r=s?.value!==void 0?s.value:e?.value;p(r===!0||r==="true"||r==="True"||r==="Yes"||r===1?"Yes":"No")}},[e?.value,e?.column?.type,H,s?.value]),a.useEffect(()=>()=>{L.current&&clearTimeout(L.current),S.current&&clearTimeout(S.current)},[]);const m=a.isValidElement(n);return o.jsxs("td",{id:e.value,"data-column-key":e?.column?.key,...e.getCellProps(),onClick:O?.isEnabled?void 0:Re,className:k("h-row",{"sticky left-0":e?.column?.sticky,relative:!e?.column?.sticky,"w-full":f,"overflow-visible":v===e.column.key,"overflow-x-hidden overflow-y-visible":v!==e.column.key&&m,"overflow-hidden":v!==e.column.key&&!m},F&&!P?"outline outline-2 outline-error-500 -outline-offset-2 z-[5]":"",`${T||"bg-white dark:bg-black-800"}`),style:{minWidth:`${e.column.width}px`,maxWidth:`${e.column.width}px`,right:e?.column?.sticky?`${w}px`:C.CELL_DEFAULT_RIGHT_OFFSET,paddingLeft:y>0&&b===0?`${y*C.CELL_INDENT_PER_LEVEL_PX}px`:void 0},onMouseEnter:Le,onMouseLeave:Se,children:[o.jsx(We,{withLink:O?.isEnabled,linkTo:O?.linkTo||void 0,rowData:e?.row?.original,disableRowClick:e?.column?.disableRowClick,children:(Array.isArray(V)?V.includes(`${t}-${e?.column?.id}`):V===`${t}-${e?.column?.id}`)?o.jsxs("div",{className:"h-row top-0 font-medium font-inter w-full absolute flex items-center px-4",children:[o.jsx("span",{className:"text-neutral-400 dark:text-black-400 truncate",children:(()=>{const r=`${t}-${e?.column?.id}`,u=typeof q=="object"?q?.[r]:q,d=e?.column?.type?.toLowerCase();if(d==="boolean")return u===!0||u==="true"||u==="True"?"Yes":"No";if((d==="date"||d==="datetime")&&u){const Ie=d==="datetime";return D.formatDate(u,{withTime:Ie,skipTimezone:!0})||String(u)}return u!=null?String(u):n})()}),o.jsx("div",{className:"ml-2 flex items-center gap-1.5",children:o.jsx(g.LoadingSpinnerIcon,{className:"spinner text-neutral-600 dark:text-white",size:12})})]}):v===e.column.key&&e?.column?.canEdit&&!A&&!e?.column?.is_disabled?o.jsx("div",{className:"h-row w-full absolute top-0 left-0 flex items-center",style:{marginLeft:y>0&&b===0?`-${y*C.CELL_INDENT_PER_LEVEL_PX}px`:void 0,width:y>0&&b===0?`calc(100% + ${y*C.CELL_INDENT_PER_LEVEL_PX}px)`:"100%"},children:o.jsx(Ke.InlineEditField,{cell:e,id:t,inlineEditing:v,cellRef:ce,handleCellValueChange:le,handleUpdateCellData:me,registerValidation:de})}):o.jsxs(o.Fragment,{children:[y>0&&b===0&&o.jsx("div",{className:"h-row border-l border-neutral-300 dark:border-black-600 ml-2"}),o.jsx("div",{className:"min-h-6",children:o.jsx(U,{title:h&&e?.column?.type?.toLowerCase()!=="url"?h:void 0,hideTooltip:!h||e?.column?.type?.toLowerCase()==="url",delayShow:!0,placement:"top",children:o.jsxs("div",{className:k(`h-row top-0 font-medium font-inter overflow-index-auto whitespace-nowrap text-ellipsis dark:text-black-200 w-full absolute flex items-center ${T||"bg-white dark:bg-black-800"}`,m?"overflow-x-hidden overflow-y-visible":"overflow-x-hidden",{"border border-b-0 border-t-0 border-primary-600 dark:border-blue-800":ee?.includes(e.column.id)}),style:e?.column?.sticky&&ae?{boxShadow:Ne?C.CELL_STICKY_SHADOW_DARK:C.CELL_STICKY_SHADOW_LIGHT}:{},children:[G?.isCascading&&!he&&b===0&&o.jsx("div",{className:k("w-[22px] h-row flex items-center px-4",`${T||"bg-white dark:bg-black-800"}`),id:"cascading",children:be>y&&(e?.row?.original?.__has_children||G?.showAllDropdown)&&o.jsx("div",{children:fe?o.jsx(g.LoadingSpinnerIcon,{className:"text-neutral-600 dark:text-white",size:8}):o.jsx("div",{children:xe?.[t]?.isOpen?o.jsx(g.KeyboardArrowDownIcon,{size:20,className:"text-neutral-400 dark:text-neutral-400",onClick:r=>{B(),r.stopPropagation()}}):o.jsx(g.KeyboardArrowRightFilledIcon,{size:20,className:"text-neutral-400 dark:text-neutral-400",onClick:r=>{B(),r.stopPropagation()}})})})}),e?.column?.type?.toLowerCase()==="url"&&h?o.jsx(U,{title:o.jsx("div",{onMouseEnter:()=>K(!0),onMouseLeave:()=>K(!1),children:o.jsx("a",{href:h,target:"_blank",rel:"noopener noreferrer",onClick:r=>r.stopPropagation(),children:o.jsxs("div",{className:"flex gap-1 items-center w-full",children:[o.jsx("div",{className:"w-4 h-4",children:o.jsx(g.LinkIcon,{height:16,width:16})}),o.jsx(ze.Typography,{variant:"medium",size:"small",className:"truncate",appearance:"custom",children:h}),o.jsx(Ae.OpenInNewRounded,{sx:{height:"16px",width:"16px",color:"#016DCF"}})]})})}),placement:"top",open:Me,onOpenChange:K,className:"block w-full min-w-0 overflow-hidden",children:o.jsx("div",{className:"w-full h-full flex items-center px-4 min-w-0 overflow-hidden text-primary-400",children:o.jsx("span",{ref:N,onMouseEnter:te,className:"truncate w-full",children:M&&oe&&!a.isValidElement(n)&&typeof n!="object"?M(n):n})})}):o.jsx(U,{title:E&&n&&!m?o.jsx("div",{onMouseEnter:()=>W(!0),onMouseLeave:()=>W(!1),className:"max-h-96 overflow-y-auto whitespace-pre-wrap break-words no-scroll",children:String(n)}):void 0,placement:"top",delayShow:!0,hideTooltip:!!h,open:E&&!h&&!m?$e:void 0,onOpenChange:E&&!h&&!m?W:void 0,className:k("block w-full min-w-0",m?"overflow-x-hidden overflow-y-visible":"overflow-hidden"),children:o.jsx("div",{className:k("w-full h-full flex items-center px-4 min-w-0",m?"overflow-x-hidden overflow-y-visible":"overflow-hidden"),children:o.jsx("span",{ref:m?void 0:N,onMouseEnter:m?void 0:te,className:k(m?"flex min-w-0 max-w-full items-center justify-start gap-1":"truncate w-full"),children:M&&oe&&!a.isValidElement(n)&&typeof n!="object"?M(n):a.isValidElement(n)?typeof n.type=="string"?n:a.cloneElement(n,{...n.props,containerWidth:e.column.width}):n})})})]})})})]})}),F&&!P&&o.jsx("div",{className:"absolute bottom-0 left-0 right-0 h-row flex items-end pointer-events-none z-[5]",children:o.jsx("div",{className:"w-full bg-error-50 dark:bg-error-975 px-1.5 py-0.5 truncate",children:o.jsx("span",{className:"text-error-600 text-2xs font-medium leading-none",children:F})})}),_e&&!(v===e.column.key&&e?.column?.canEdit&&!A&&!e?.column?.is_disabled)&&o.jsx("div",{className:"absolute top-0 right-0 bg-white dark:bg-black-800 rounded-full w-5 h-5 flex items-center justify-center border border-primary-300 dark:border-primary-600 shadow-sm z-10",children:o.jsx(g.LoadingSpinnerIcon,{className:"text-primary-600 dark:text-white",size:8})})]},b)},Ye=a.memo(Ue);exports.DataCell=Ye;
 //# sourceMappingURL=DataCell.cjs.js.map