@lax-wp/design-system 0.13.33-beta.6 → 0.13.33

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-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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"}
+{"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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"}

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-4 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-[18px] 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-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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"}
+{"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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"}

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

@@ -1,2 +1,2 @@
-"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;
+"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;
 //# 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-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"}
+{"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"}

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 b, { useContext as N } from "react";
-import { ComparisonContext as w } from "../ComparisonContext.es.js";
+import x, { useContext as w } from "react";
+import { ComparisonContext as N } 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: s
+  tabsComponent: c
 }) => {
-  const { setLayout: x, title: c, layout: m, returnUrl: o, onReturn: t, headerTabConfig: a } = N(w), { t: d } = F(), h = C(), f = () => {
+  const { setLayout: b, title: s, layout: m, returnUrl: o, onReturn: t, headerTabConfig: a } = w(N), { 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: 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,
+      /* @__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,
       {
         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-8 w-[42px]"
+            "cursor-pointer rounded-lg flex items-center justify-center h-[32px] w-[42px]"
           ),
-          onClick: () => x(r),
-          children: b.cloneElement(k, {
+          onClick: () => b(r),
+          children: x.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 size-10 flex items-center justify-center",
+          className: "border border-[#FECDCA] rounded-lg cursor-pointer h-[40px] w-[40px] flex items-center justify-center",
           onClick: f,
           children: /* @__PURE__ */ e(A, { fill: "#D92D20" })
         }
       ) }) : null
     ] })
   ] });
-}, $ = b.memo(j);
+}, $ = x.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-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":"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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-[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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"}

package/dist/components/data-display/infinite-table/PendingEditsFloatingBar.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),W=require("../../../utils/formatters.cjs.js"),f=require("@mui/icons-material"),o=require("framer-motion"),r=require("react"),q=require("react-dom"),ee={hidden:{opacity:0,y:-8,scale:.95},visible:{opacity:1,y:0,scale:1,transition:{type:"spring",stiffness:400,damping:25}},exit:{opacity:0,y:-8,scale:.95,transition:{duration:.1}}},L={hidden:{opacity:0},visible:{opacity:1,transition:{staggerChildren:.03,delayChildren:.05}}},R={hidden:{opacity:0,y:-8},visible:{opacity:1,y:0,transition:{type:"spring",stiffness:400,damping:25}}},te=({pendingEditsCount:b,pendingEditsList:m,rowsWithPendingEdits:u,fieldOperationLoading:d,onClearAll:P,onSaveAll:E,onScrollToCell:K})=>{const[_,N]=r.useState(!1),[x,S]=r.useState(!1),[s,I]=r.useState(null),[l,z]=r.useState(null),[D,F]=r.useState(!1),[i,w]=r.useState(""),[h,C]=r.useState(!1),[g,U]=r.useState(null),v=r.useRef(null),c=r.useRef(null),y=r.useRef(null),T=r.useRef(null),M=r.useRef(null),$=r.useRef(null),G=r.useMemo(()=>s?m.filter(e=>e.rowId===s):m,[m,s]),B=r.useMemo(()=>{if(!i)return u;const e=i.toLowerCase();return u.filter(a=>`row ${a.rowIndex+1}`.toLowerCase().includes(e))},[u,i]),J=r.useMemo(()=>{if(!s)return`All Rows (${m.length})`;const e=u.find(a=>a.rowId===s);return e?`Row ${e.rowIndex+1} (${e.editCount})`:`All Rows (${m.length})`},[s,u,m.length]);r.useEffect(()=>{s&&!u.find(e=>e.rowId===s)&&I(null)},[u,s]),r.useEffect(()=>{const e=a=>{const n=a.target;!T.current?.contains(n)&&!$.current?.contains(n)&&(C(!1),w(""))};return h&&document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[h]);const A=r.useCallback(()=>{v.current&&(clearTimeout(v.current),v.current=null),N(!0)},[]),H=r.useCallback(()=>{v.current=setTimeout(()=>N(!1),300)},[]),k=r.useCallback((e,a,n,j)=>{const p=Math.max(0,window.innerWidth-n),O=Math.max(0,window.innerHeight-j);return{x:Math.min(Math.max(e,0),p),y:Math.min(Math.max(a,0),O)}},[]),V=r.useCallback(e=>{e.preventDefault();const a=e.currentTarget.closest(".pending-edits-floating-bar");if(!a)return;const n=a.getBoundingClientRect();c.current={x:e.clientX,y:e.clientY,barX:l?.x??n.left,barY:l?.y??n.top,barWidth:n.width,barHeight:n.height},F(!0)},[l]);r.useEffect(()=>{if(!D)return;const e=n=>{if(!c.current)return;const j=c.current.barX+n.clientX-c.current.x,p=c.current.barY+n.clientY-c.current.y;z(k(j,p,c.current.barWidth,c.current.barHeight))},a=()=>{F(!1),c.current=null};return document.addEventListener("mousemove",e),document.addEventListener("mouseup",a),()=>{document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",a)}},[D,k]),r.useEffect(()=>{if(!l||!y.current)return;const e=()=>{if(!y.current)return;const a=y.current.getBoundingClientRect(),n=k(l.x,l.y,a.width,a.height);(n.x!==l.x||n.y!==l.y)&&z(n)};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[l,k]);const X=(e,a)=>{if(typeof e=="boolean")return e?"Yes":"No";if(e==null||e==="")return"-";const n=String(e);if(/^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}(:\d{2})?)?/.test(n)){const p=n.includes("T");return W.formatDate(n,{withTime:p,skipTimezone:!0})||n}return a?`${n} ${a}`:n},Q=e=>{N(!1),K(e.rowId,e.columnKey,e.rowIndex)},Y=e=>{I(e),C(!1),w("")};if(b===0)return null;const Z=t.jsxs(o.motion.div,{ref:y,className:"pending-edits-floating-bar fixed z-[9999]",style:{zIndex:2147483646,...l?{left:l.x,top:l.y}:{bottom:24,left:"50%",transform:"translateX(-50%)"}},initial:{opacity:0,scale:.9},animate:{opacity:1,scale:1},transition:{type:"spring",stiffness:300,damping:25},children:[t.jsx(o.AnimatePresence,{children:_&&!x&&t.jsx(o.motion.div,{className:"absolute w-80",style:{bottom:"100%",left:"50%",marginLeft:"-160px",marginBottom:"4px"},initial:{opacity:0,y:10,scale:.95},animate:{opacity:1,y:0,scale:1},exit:{opacity:0,y:10,scale:.95},transition:{type:"spring",stiffness:300,damping:24},onMouseEnter:A,onMouseLeave:H,children:t.jsxs("div",{className:"bg-white dark:bg-black-700 rounded-lg shadow-xl border border-neutral-200 dark:border-black-600 py-2 overflow-hidden",children:[t.jsx("div",{className:"px-3 py-1.5 text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider border-b border-neutral-100 dark:border-black-600",children:"Pending Changes"}),u.length>1&&t.jsx("div",{className:"px-3 py-2 border-b border-neutral-100 dark:border-black-600",ref:T,children:t.jsxs("div",{className:"relative",children:[t.jsxs("button",{ref:M,onClick:()=>{M.current&&U(M.current.getBoundingClientRect()),C(!h)},className:"w-full text-xs px-2 py-1.5 rounded border border-neutral-200 dark:border-black-500 bg-neutral-50 dark:bg-black-600 text-neutral-700 dark:text-neutral-200 focus:outline-none focus:ring-1 focus:ring-primary-500 flex items-center justify-between gap-2",children:[t.jsx("span",{className:"truncate",children:J}),t.jsx(o.motion.div,{animate:{rotate:h?180:0},transition:{duration:.2},children:t.jsx(f.KeyboardArrowDownRounded,{sx:{fontSize:16},className:"text-neutral-400"})})]}),h&&g&&q.createPortal(t.jsx(o.AnimatePresence,{children:t.jsxs(o.motion.div,{ref:$,className:"fixed bg-white dark:bg-black-700 rounded-lg shadow-xl border border-neutral-200 dark:border-black-600 overflow-hidden",style:{zIndex:2147483647,top:g.bottom+4,left:g.left,width:g.width},variants:ee,initial:"hidden",animate:"visible",exit:"exit",children:[t.jsx("div",{className:"p-2 border-b border-neutral-100 dark:border-black-600",children:t.jsxs("div",{className:"relative flex items-center",children:[t.jsx(f.SearchRounded,{sx:{fontSize:14},className:"absolute left-2 text-neutral-400 dark:text-neutral-500 z-10 pointer-events-none"}),t.jsx("input",{type:"text",value:i,onChange:e=>w(e.target.value),placeholder:"Search rows...",className:"w-full text-xs pl-7 pr-7 py-1.5 rounded border border-neutral-200 dark:border-black-500 bg-white dark:bg-black-600 text-neutral-700 dark:text-neutral-200 focus:outline-none focus:ring-1 focus:ring-primary-500 placeholder:text-neutral-400",autoFocus:!0}),i&&t.jsx("button",{onClick:()=>w(""),className:"absolute right-2 z-10 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300",children:t.jsx(f.CloseRounded,{sx:{fontSize:14}})})]})}),t.jsxs(o.motion.div,{className:"max-h-40 overflow-y-auto",variants:L,initial:"hidden",animate:"visible",children:[(!i||"all rows".includes(i.toLowerCase()))&&t.jsxs(o.motion.button,{variants:R,onClick:()=>Y(null),className:`w-full text-left px-3 py-2 text-xs transition-colors ${s?"text-neutral-700 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-black-600":"bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300"}`,children:["All Rows (",m.length," changes)"]}),B.map(e=>t.jsxs(o.motion.button,{variants:R,onClick:()=>Y(e.rowId),className:`w-full text-left px-3 py-2 text-xs transition-colors ${s===e.rowId?"bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300":"text-neutral-700 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-black-600"}`,children:["Row ",e.rowIndex+1," (",e.editCount," ",e.editCount===1?"change":"changes",")"]},e.rowId)),B.length===0&&i&&!"all rows".includes(i.toLowerCase())&&t.jsx(o.motion.div,{variants:R,className:"px-3 py-2 text-xs text-neutral-500 dark:text-neutral-400",children:"No rows found"})]})]})}),document.body)]})}),t.jsx(o.motion.div,{className:"max-h-52 overflow-y-auto",variants:L,initial:"hidden",animate:"visible",children:G?.map((e,a)=>t.jsxs(o.motion.button,{variants:R,onClick:()=>Q(e),className:"w-full px-3 py-2 text-left hover:bg-neutral-50 dark:hover:bg-black-600 transition-colors",whileHover:{backgroundColor:"rgba(0,0,0,0.03)"},whileTap:{scale:.98},children:[t.jsxs("div",{className:"text-xs font-bold text-neutral-700 dark:text-neutral-300 mb-1",children:[e.fieldName," ",!s&&t.jsxs("span",{className:"font-normal text-neutral-500 dark:text-neutral-400",children:["(Row ",e.rowIndex+1,")"]})]}),t.jsxs("div",{className:"flex items-center gap-1.5 text-sm",children:[t.jsx("span",{className:"text-neutral-400 dark:text-neutral-500 line-through truncate max-w-[100px]",children:X(e.originalValue,e.originalMeta?.currency_code)}),t.jsx("span",{className:"text-neutral-400 dark:text-neutral-500 flex-shrink-0",children:"→"}),t.jsx("span",{className:"text-primary-600 dark:text-primary-400 font-medium truncate max-w-[100px]",children:X(e.value,e.meta?.currency_code)})]})]},`${e.rowId}-${e.columnKey}-${a}`))})]})})}),t.jsxs(o.motion.div,{className:"flex items-center bg-white dark:bg-black-700 shadow-lg border border-neutral-200 dark:border-black-600 overflow-hidden",animate:{padding:x?"8px":"12px 16px",gap:x?"0px":"12px",borderRadius:x?"9999px":"8px"},transition:{type:"spring",stiffness:300,damping:25},children:[t.jsx(o.AnimatePresence,{mode:"wait",children:x?t.jsx(o.motion.div,{initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.8},onMouseDown:V,onClick:()=>S(!1),className:"flex items-center justify-center cursor-grab active:cursor-grabbing flex-shrink-0",style:{width:"32px",height:"32px",borderRadius:"9999px",backgroundColor:"var(--color-primary-600)",color:"white"},title:"Drag to move / Click to expand",whileHover:{backgroundColor:"var(--color-primary-700)",scale:1.05},whileTap:{scale:.95},children:t.jsx("span",{className:"text-xs font-bold",children:b})},"minimized"):t.jsx(o.motion.button,{initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.8},onClick:()=>S(!0),className:"flex items-center justify-center flex-shrink-0",style:{width:"24px",height:"24px",borderRadius:"4px",backgroundColor:"transparent",color:"var(--color-neutral-400)"},title:"Minimize",whileHover:{backgroundColor:"var(--color-neutral-100)",color:"var(--color-neutral-600)"},whileTap:{scale:.9},children:t.jsx(f.RemoveOutlined,{sx:{fontSize:16}})},"minimize-btn")}),t.jsxs(o.motion.div,{className:"flex items-center gap-3",animate:{width:x?0:"auto",opacity:x?0:1},transition:{type:"spring",stiffness:300,damping:25},style:{overflow:"hidden",pointerEvents:x?"none":"auto"},children:[t.jsx("div",{onMouseDown:V,className:"cursor-grab active:cursor-grabbing text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 flex items-center",title:"Drag to move",children:t.jsx(f.DragIndicator,{sx:{fontSize:18}})}),t.jsx("div",{className:"relative",onMouseEnter:A,onMouseLeave:H,children:t.jsxs("span",{className:"text-sm font-medium text-neutral-700 dark:text-neutral-200 cursor-pointer hover:text-primary-600 dark:hover:text-primary-400 whitespace-nowrap",children:[b," unsaved ",b===1?"change":"changes"]})}),t.jsx("div",{className:"h-4 w-px bg-neutral-200 dark:bg-black-600 flex-shrink-0"}),t.jsx(o.motion.button,{onClick:P,disabled:!!d,className:`px-3 py-1.5 text-sm font-medium rounded-md whitespace-nowrap flex-shrink-0 ${d?"text-neutral-400 dark:text-neutral-500 cursor-not-allowed":"text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-black-600"}`,whileHover:d?void 0:{scale:1.02},whileTap:d?void 0:{scale:.98},children:"Cancel"}),t.jsx(o.motion.button,{onClick:E,disabled:!!d,className:`px-3 py-1.5 text-sm font-medium rounded-md whitespace-nowrap flex-shrink-0 ${d?"text-white bg-primary-400 cursor-not-allowed":"text-white bg-primary-600 hover:bg-primary-700"}`,whileHover:d?void 0:{scale:1.02},whileTap:d?void 0:{scale:.98},children:"Save All"})]})]})]});return q.createPortal(Z,document.body)};exports.PendingEditsFloatingBar=te;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),ee=require("../../../utils/formatters.cjs.js"),f=require("@mui/icons-material"),o=require("framer-motion"),r=require("react"),V=require("react-dom"),q=require("./constants.cjs.js"),te={hidden:{opacity:0,y:-8,scale:.95},visible:{opacity:1,y:0,scale:1,transition:{type:"spring",stiffness:400,damping:25}},exit:{opacity:0,y:-8,scale:.95,transition:{duration:.1}}},X={hidden:{opacity:0},visible:{opacity:1,transition:{staggerChildren:.03,delayChildren:.05}}},R={hidden:{opacity:0,y:-8},visible:{opacity:1,y:0,transition:{type:"spring",stiffness:400,damping:25}}},re=({pendingEditsCount:b,pendingEditsList:m,rowsWithPendingEdits:u,fieldOperationLoading:d,onClearAll:Y,onSaveAll:O,onScrollToCell:E})=>{const[G,N]=r.useState(!1),[x,I]=r.useState(!1),[s,S]=r.useState(null),[l,T]=r.useState(null),[F,z]=r.useState(!1),[i,w]=r.useState(""),[h,C]=r.useState(!1),[g,K]=r.useState(null),v=r.useRef(null),c=r.useRef(null),y=r.useRef(null),D=r.useRef(null),M=r.useRef(null),A=r.useRef(null),U=r.useMemo(()=>s?m.filter(e=>e.rowId===s):m,[m,s]),B=r.useMemo(()=>{if(!i)return u;const e=i.toLowerCase();return u.filter(a=>`row ${a.rowIndex+1}`.toLowerCase().includes(e))},[u,i]),J=r.useMemo(()=>{if(!s)return`All Rows (${m.length})`;const e=u.find(a=>a.rowId===s);return e?`Row ${e.rowIndex+1} (${e.editCount})`:`All Rows (${m.length})`},[s,u,m.length]);r.useEffect(()=>{s&&!u.find(e=>e.rowId===s)&&S(null)},[u,s]),r.useEffect(()=>{const e=a=>{const n=a.target;!D.current?.contains(n)&&!A.current?.contains(n)&&(C(!1),w(""))};return h&&document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[h]);const $=r.useCallback(()=>{v.current&&(clearTimeout(v.current),v.current=null),N(!0)},[]),L=r.useCallback(()=>{v.current=setTimeout(()=>N(!1),300)},[]),k=r.useCallback((e,a,n,j)=>{const p=Math.max(0,window.innerWidth-n),W=Math.max(0,window.innerHeight-j);return{x:Math.min(Math.max(e,0),p),y:Math.min(Math.max(a,0),W)}},[]),_=r.useCallback(e=>{e.preventDefault();const a=e.currentTarget.closest(".pending-edits-floating-bar");if(!a)return;const n=a.getBoundingClientRect();c.current={x:e.clientX,y:e.clientY,barX:l?.x??n.left,barY:l?.y??n.top,barWidth:n.width,barHeight:n.height},z(!0)},[l]);r.useEffect(()=>{if(!F)return;const e=n=>{if(!c.current)return;const j=c.current.barX+n.clientX-c.current.x,p=c.current.barY+n.clientY-c.current.y;T(k(j,p,c.current.barWidth,c.current.barHeight))},a=()=>{z(!1),c.current=null};return document.addEventListener("mousemove",e),document.addEventListener("mouseup",a),()=>{document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",a)}},[F,k]),r.useEffect(()=>{if(!l||!y.current)return;const e=()=>{if(!y.current)return;const a=y.current.getBoundingClientRect(),n=k(l.x,l.y,a.width,a.height);(n.x!==l.x||n.y!==l.y)&&T(n)};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[l,k]);const H=(e,a)=>{if(typeof e=="boolean")return e?"Yes":"No";if(e==null||e==="")return"-";const n=String(e);if(/^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}(:\d{2})?)?/.test(n)){const p=n.includes("T");return ee.formatDate(n,{withTime:p,skipTimezone:!0})||n}return a?`${n} ${a}`:n},Q=e=>{N(!1),E(e.rowId,e.columnKey,e.rowIndex)},P=e=>{S(e),C(!1),w("")};if(b===0)return null;const Z=t.jsxs(o.motion.div,{ref:y,className:"pending-edits-floating-bar fixed z-[9999]",style:{zIndex:2147483646,...l?{left:l.x,top:l.y}:{bottom:24,left:"50%",transform:"translateX(-50%)"}},initial:{opacity:0,scale:.9},animate:{opacity:1,scale:1},transition:{type:"spring",stiffness:300,damping:25},children:[t.jsx(o.AnimatePresence,{children:G&&!x&&t.jsx(o.motion.div,{className:"absolute w-80",style:{bottom:"100%",left:"50%",marginLeft:q.FLOATING_BAR_TOOLTIP_MARGIN_LEFT,marginBottom:q.FLOATING_BAR_TOOLTIP_MARGIN_BOTTOM},initial:{opacity:0,y:10,scale:.95},animate:{opacity:1,y:0,scale:1},exit:{opacity:0,y:10,scale:.95},transition:{type:"spring",stiffness:300,damping:24},onMouseEnter:$,onMouseLeave:L,children:t.jsxs("div",{className:"bg-white dark:bg-black-700 rounded-lg shadow-xl border border-neutral-200 dark:border-black-600 py-2 overflow-hidden",children:[t.jsx("div",{className:"px-3 py-1.5 text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider border-b border-neutral-100 dark:border-black-600",children:"Pending Changes"}),u.length>1&&t.jsx("div",{className:"px-3 py-2 border-b border-neutral-100 dark:border-black-600",ref:D,children:t.jsxs("div",{className:"relative",children:[t.jsxs("button",{ref:M,onClick:()=>{M.current&&K(M.current.getBoundingClientRect()),C(!h)},className:"w-full text-xs px-2 py-1.5 rounded border border-neutral-200 dark:border-black-500 bg-neutral-50 dark:bg-black-600 text-neutral-700 dark:text-neutral-200 focus:outline-none focus:ring-1 focus:ring-primary-500 flex items-center justify-between gap-2",children:[t.jsx("span",{className:"truncate",children:J}),t.jsx(o.motion.div,{animate:{rotate:h?180:0},transition:{duration:.2},children:t.jsx(f.KeyboardArrowDownRounded,{sx:{fontSize:16},className:"text-neutral-400"})})]}),h&&g&&V.createPortal(t.jsx(o.AnimatePresence,{children:t.jsxs(o.motion.div,{ref:A,className:"fixed bg-white dark:bg-black-700 rounded-lg shadow-xl border border-neutral-200 dark:border-black-600 overflow-hidden",style:{zIndex:2147483647,top:g.bottom+4,left:g.left,width:g.width},variants:te,initial:"hidden",animate:"visible",exit:"exit",children:[t.jsx("div",{className:"p-2 border-b border-neutral-100 dark:border-black-600",children:t.jsxs("div",{className:"relative flex items-center",children:[t.jsx(f.SearchRounded,{sx:{fontSize:14},className:"absolute left-2 text-neutral-400 dark:text-neutral-500 z-10 pointer-events-none"}),t.jsx("input",{type:"text",value:i,onChange:e=>w(e.target.value),placeholder:"Search rows...",className:"w-full text-xs pl-7 pr-7 py-1.5 rounded border border-neutral-200 dark:border-black-500 bg-white dark:bg-black-600 text-neutral-700 dark:text-neutral-200 focus:outline-none focus:ring-1 focus:ring-primary-500 placeholder:text-neutral-400",autoFocus:!0}),i&&t.jsx("button",{onClick:()=>w(""),className:"absolute right-2 z-10 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300",children:t.jsx(f.CloseRounded,{sx:{fontSize:14}})})]})}),t.jsxs(o.motion.div,{className:"max-h-40 overflow-y-auto",variants:X,initial:"hidden",animate:"visible",children:[(!i||"all rows".includes(i.toLowerCase()))&&t.jsxs(o.motion.button,{variants:R,onClick:()=>P(null),className:`w-full text-left px-3 py-2 text-xs transition-colors ${s?"text-neutral-700 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-black-600":"bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300"}`,children:["All Rows (",m.length," changes)"]}),B.map(e=>t.jsxs(o.motion.button,{variants:R,onClick:()=>P(e.rowId),className:`w-full text-left px-3 py-2 text-xs transition-colors ${s===e.rowId?"bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300":"text-neutral-700 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-black-600"}`,children:["Row ",e.rowIndex+1," (",e.editCount," ",e.editCount===1?"change":"changes",")"]},e.rowId)),B.length===0&&i&&!"all rows".includes(i.toLowerCase())&&t.jsx(o.motion.div,{variants:R,className:"px-3 py-2 text-xs text-neutral-500 dark:text-neutral-400",children:"No rows found"})]})]})}),document.body)]})}),t.jsx(o.motion.div,{className:"max-h-52 overflow-y-auto",variants:X,initial:"hidden",animate:"visible",children:U?.map((e,a)=>t.jsxs(o.motion.button,{variants:R,onClick:()=>Q(e),className:"w-full px-3 py-2 text-left hover:bg-neutral-50 dark:hover:bg-black-600 transition-colors",whileHover:{backgroundColor:"rgba(0,0,0,0.03)"},whileTap:{scale:.98},children:[t.jsxs("div",{className:"text-xs font-bold text-neutral-700 dark:text-neutral-300 mb-1",children:[e.fieldName," ",!s&&t.jsxs("span",{className:"font-normal text-neutral-500 dark:text-neutral-400",children:["(Row ",e.rowIndex+1,")"]})]}),t.jsxs("div",{className:"flex items-center gap-1.5 text-sm",children:[t.jsx("span",{className:"text-neutral-400 dark:text-neutral-500 line-through truncate max-w-[100px]",children:H(e.originalValue,e.originalMeta?.currency_code)}),t.jsx("span",{className:"text-neutral-400 dark:text-neutral-500 flex-shrink-0",children:"→"}),t.jsx("span",{className:"text-primary-600 dark:text-primary-400 font-medium truncate max-w-[100px]",children:H(e.value,e.meta?.currency_code)})]})]},`${e.rowId}-${e.columnKey}-${a}`))})]})})}),t.jsxs(o.motion.div,{className:"flex items-center bg-white dark:bg-black-700 shadow-lg border border-neutral-200 dark:border-black-600 overflow-hidden",animate:{padding:x?"8px":"12px 16px",gap:x?"0px":"12px",borderRadius:x?"9999px":"8px"},transition:{type:"spring",stiffness:300,damping:25},children:[t.jsx(o.AnimatePresence,{mode:"wait",children:x?t.jsx(o.motion.div,{initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.8},onMouseDown:_,onClick:()=>I(!1),className:"flex items-center justify-center cursor-grab active:cursor-grabbing flex-shrink-0",style:{width:"32px",height:"32px",borderRadius:"9999px",backgroundColor:"var(--color-primary-600)",color:"white"},title:"Drag to move / Click to expand",whileHover:{backgroundColor:"var(--color-primary-700)",scale:1.05},whileTap:{scale:.95},children:t.jsx("span",{className:"text-xs font-bold",children:b})},"minimized"):t.jsx(o.motion.button,{initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.8},onClick:()=>I(!0),className:"flex items-center justify-center flex-shrink-0",style:{width:"24px",height:"24px",borderRadius:"4px",backgroundColor:"transparent",color:"var(--color-neutral-400)"},title:"Minimize",whileHover:{backgroundColor:"var(--color-neutral-100)",color:"var(--color-neutral-600)"},whileTap:{scale:.9},children:t.jsx(f.RemoveOutlined,{sx:{fontSize:16}})},"minimize-btn")}),t.jsxs(o.motion.div,{className:"flex items-center gap-3",animate:{width:x?0:"auto",opacity:x?0:1},transition:{type:"spring",stiffness:300,damping:25},style:{overflow:"hidden",pointerEvents:x?"none":"auto"},children:[t.jsx("div",{onMouseDown:_,className:"cursor-grab active:cursor-grabbing text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 flex items-center",title:"Drag to move",children:t.jsx(f.DragIndicator,{sx:{fontSize:18}})}),t.jsx("div",{className:"relative",onMouseEnter:$,onMouseLeave:L,children:t.jsxs("span",{className:"text-sm font-medium text-neutral-700 dark:text-neutral-200 cursor-pointer hover:text-primary-600 dark:hover:text-primary-400 whitespace-nowrap",children:[b," unsaved ",b===1?"change":"changes"]})}),t.jsx("div",{className:"h-4 w-px bg-neutral-200 dark:bg-black-600 flex-shrink-0"}),t.jsx(o.motion.button,{onClick:Y,disabled:!!d,className:`px-3 py-1.5 text-sm font-medium rounded-md whitespace-nowrap flex-shrink-0 ${d?"text-neutral-400 dark:text-neutral-500 cursor-not-allowed":"text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-black-600"}`,whileHover:d?void 0:{scale:1.02},whileTap:d?void 0:{scale:.98},children:"Cancel"}),t.jsx(o.motion.button,{onClick:O,disabled:!!d,className:`px-3 py-1.5 text-sm font-medium rounded-md whitespace-nowrap flex-shrink-0 ${d?"text-white bg-primary-400 cursor-not-allowed":"text-white bg-primary-600 hover:bg-primary-700"}`,whileHover:d?void 0:{scale:1.02},whileTap:d?void 0:{scale:.98},children:"Save All"})]})]})]});return V.createPortal(Z,document.body)};exports.PendingEditsFloatingBar=re;
 //# sourceMappingURL=PendingEditsFloatingBar.cjs.js.map

package/dist/components/data-display/infinite-table/PendingEditsFloatingBar.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"PendingEditsFloatingBar.cjs.js","sources":["../../../../src/components/data-display/infinite-table/PendingEditsFloatingBar.tsx"],"sourcesContent":["import { formatDate } from '../../../utils/formatters';\nimport { CloseRounded, DragIndicator, KeyboardArrowDownRounded, RemoveOutlined, SearchRounded } from '@mui/icons-material';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\ninterface PendingEdit {\n  rowId: string;\n  columnKey: string;\n  fieldName: string;\n  value: unknown;\n  originalValue: unknown;\n  meta?: { currency_code?: string | null; [key: string]: unknown | null } | null;\n  originalMeta?: { currency_code?: string | null; [key: string]: unknown | null } | null;\n  rowIndex: number;\n}\n\ninterface RowWithPendingEdits {\n  rowId: string;\n  rowIndex: number;\n  editCount: number;\n}\n\ninterface PendingEditsFloatingBarProps {\n  pendingEditsCount: number;\n  pendingEditsList: PendingEdit[];\n  rowsWithPendingEdits: RowWithPendingEdits[];\n  fieldOperationLoading: string | null;\n  onClearAll: () => void;\n  onSaveAll: () => void;\n  onScrollToCell: (rowId: string, columnKey: string, rowIndex: number) => void;\n}\n\nconst rowFilterDropdownVariants = {\n  hidden: { opacity: 0, y: -8, scale: 0.95 },\n  visible: { opacity: 1, y: 0, scale: 1, transition: { type: 'spring' as const, stiffness: 400, damping: 25 } },\n  exit: { opacity: 0, y: -8, scale: 0.95, transition: { duration: 0.1 } },\n};\n\nconst listContainerVariants = {\n  hidden: { opacity: 0 },\n  visible: { opacity: 1, transition: { staggerChildren: 0.03, delayChildren: 0.05 } },\n};\n\nconst listItemVariants = {\n  hidden: { opacity: 0, y: -8 },\n  visible: { opacity: 1, y: 0, transition: { type: 'spring' as const, stiffness: 400, damping: 25 } },\n};\n\nexport const PendingEditsFloatingBar: React.FC<PendingEditsFloatingBarProps> = ({\n  pendingEditsCount, pendingEditsList, rowsWithPendingEdits, fieldOperationLoading, onClearAll, onSaveAll, onScrollToCell,\n}) => {\n  const [showDropdown, setShowDropdown] = useState(false);\n  const [isMinimized, setIsMinimized] = useState(false);\n  const [rowFilter, setRowFilter] = useState<string | null>(null);\n  const [position, setPosition] = useState<{ x: number; y: number } | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  const [rowFilterSearch, setRowFilterSearch] = useState('');\n  const [showRowFilterDropdown, setShowRowFilterDropdown] = useState(false);\n  const [rowFilterButtonRect, setRowFilterButtonRect] = useState<DOMRect | null>(null);\n\n  const dropdownTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const dragStartRef = useRef<{ x: number; y: number; barX: number; barY: number; barWidth: number; barHeight: number } | null>(null);\n  const floatingBarRef = useRef<HTMLDivElement>(null);\n  const rowFilterRef = useRef<HTMLDivElement>(null);\n  const rowFilterButtonRef = useRef<HTMLButtonElement>(null);\n  const rowFilterDropdownRef = useRef<HTMLDivElement>(null);\n\n  const filteredPendingEditsList = useMemo(() => {\n    if (!rowFilter) return pendingEditsList;\n    return pendingEditsList.filter((edit) => edit.rowId === rowFilter);\n  }, [pendingEditsList, rowFilter]);\n\n  const filteredRowOptions = useMemo(() => {\n    if (!rowFilterSearch) return rowsWithPendingEdits;\n    const searchLower = rowFilterSearch.toLowerCase();\n    return rowsWithPendingEdits.filter((row) => `row ${row.rowIndex + 1}`.toLowerCase().includes(searchLower));\n  }, [rowsWithPendingEdits, rowFilterSearch]);\n\n  const selectedRowLabel = useMemo(() => {\n    if (!rowFilter) return `All Rows (${pendingEditsList.length})`;\n    const row = rowsWithPendingEdits.find((r) => r.rowId === rowFilter);\n    if (!row) return `All Rows (${pendingEditsList.length})`;\n    return `Row ${row.rowIndex + 1} (${row.editCount})`;\n  }, [rowFilter, rowsWithPendingEdits, pendingEditsList.length]);\n\n  useEffect(() => {\n    if (rowFilter && !rowsWithPendingEdits.find((row) => row.rowId === rowFilter)) setRowFilter(null);\n  }, [rowsWithPendingEdits, rowFilter]);\n\n  useEffect(() => {\n    const handleClickOutside = (e: MouseEvent) => {\n      const target = e.target as Node;\n      if (!rowFilterRef.current?.contains(target) && !rowFilterDropdownRef.current?.contains(target)) {\n        setShowRowFilterDropdown(false);\n        setRowFilterSearch('');\n      }\n    };\n    if (showRowFilterDropdown) document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [showRowFilterDropdown]);\n\n  const handleMouseEnter = useCallback(() => {\n    if (dropdownTimeoutRef.current) { clearTimeout(dropdownTimeoutRef.current); dropdownTimeoutRef.current = null; }\n    setShowDropdown(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    dropdownTimeoutRef.current = setTimeout(() => setShowDropdown(false), 300);\n  }, []);\n\n  const clampPositionToViewport = useCallback((nextX: number, nextY: number, barWidth: number, barHeight: number) => {\n    const maxX = Math.max(0, window.innerWidth - barWidth);\n    const maxY = Math.max(0, window.innerHeight - barHeight);\n\n    return {\n      x: Math.min(Math.max(nextX, 0), maxX),\n      y: Math.min(Math.max(nextY, 0), maxY),\n    };\n  }, []);\n\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n    const barElement = e.currentTarget.closest('.pending-edits-floating-bar') as HTMLElement;\n    if (!barElement) return;\n    const rect = barElement.getBoundingClientRect();\n    dragStartRef.current = {\n      x: e.clientX,\n      y: e.clientY,\n      barX: position?.x ?? rect.left,\n      barY: position?.y ?? rect.top,\n      barWidth: rect.width,\n      barHeight: rect.height,\n    };\n    setIsDragging(true);\n  }, [position]);\n\n  useEffect(() => {\n    if (!isDragging) return;\n    const handleMouseMove = (e: MouseEvent) => {\n      if (!dragStartRef.current) return;\n      const nextX = dragStartRef.current.barX + e.clientX - dragStartRef.current.x;\n      const nextY = dragStartRef.current.barY + e.clientY - dragStartRef.current.y;\n      setPosition(clampPositionToViewport(nextX, nextY, dragStartRef.current.barWidth, dragStartRef.current.barHeight));\n    };\n    const handleMouseUp = () => { setIsDragging(false); dragStartRef.current = null; };\n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseup', handleMouseUp);\n    return () => { document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); };\n  }, [isDragging, clampPositionToViewport]);\n\n  useEffect(() => {\n    if (!position || !floatingBarRef.current) return;\n\n    const keepBarInViewport = () => {\n      if (!floatingBarRef.current) return;\n      const rect = floatingBarRef.current.getBoundingClientRect();\n      const clampedPosition = clampPositionToViewport(position.x, position.y, rect.width, rect.height);\n      if (clampedPosition.x !== position.x || clampedPosition.y !== position.y) {\n        setPosition(clampedPosition);\n      }\n    };\n\n    keepBarInViewport();\n    window.addEventListener('resize', keepBarInViewport);\n    return () => window.removeEventListener('resize', keepBarInViewport);\n  }, [position, clampPositionToViewport]);\n\n  const formatValue = (val: unknown, currencyCode?: string | null): string => {\n    if (typeof val === 'boolean') return val ? 'Yes' : 'No';\n    if (val === null || val === undefined || val === '') return '-';\n    const strVal = String(val);\n    const dateRegex = /^\\d{4}-\\d{2}-\\d{2}(T\\d{2}:\\d{2}(:\\d{2})?)?/;\n    if (dateRegex.test(strVal)) {\n      const hasTime = strVal.includes('T');\n      return formatDate(strVal, { withTime: hasTime, skipTimezone: true }) || strVal;\n    }\n    if (currencyCode) return `${strVal} ${currencyCode}`;\n    return strVal;\n  };\n\n  const handleCellClick = (edit: PendingEdit) => { setShowDropdown(false); onScrollToCell(edit.rowId, edit.columnKey, edit.rowIndex); };\n  const handleRowFilterSelect = (rowId: string | null) => { setRowFilter(rowId); setShowRowFilterDropdown(false); setRowFilterSearch(''); };\n\n  if (pendingEditsCount === 0) return null;\n\n  const floatingBar = (\n    <motion.div\n      ref={floatingBarRef}\n      className='pending-edits-floating-bar fixed z-[9999]'\n      style={{\n        zIndex: 2147483646,\n        ...(position ? { left: position.x, top: position.y } : { bottom: 24, left: '50%', transform: 'translateX(-50%)' }),\n      }}\n      initial={{ opacity: 0, scale: 0.9 }}\n      animate={{ opacity: 1, scale: 1 }}\n      transition={{ type: 'spring', stiffness: 300, damping: 25 }}\n    >\n      <AnimatePresence>\n        {showDropdown && !isMinimized && (\n          <motion.div\n            className='absolute w-80'\n            style={{ bottom: '100%', left: '50%', marginLeft: '-160px', marginBottom: '4px' }}\n            initial={{ opacity: 0, y: 10, scale: 0.95 }}\n            animate={{ opacity: 1, y: 0, scale: 1 }}\n            exit={{ opacity: 0, y: 10, scale: 0.95 }}\n            transition={{ type: 'spring', stiffness: 300, damping: 24 }}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n          >\n            <div className='bg-white dark:bg-black-700 rounded-lg shadow-xl border border-neutral-200 dark:border-black-600 py-2 overflow-hidden'>\n              <div className='px-3 py-1.5 text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider border-b border-neutral-100 dark:border-black-600'>Pending Changes</div>\n              {rowsWithPendingEdits.length > 1 && (\n                <div className='px-3 py-2 border-b border-neutral-100 dark:border-black-600' ref={rowFilterRef}>\n                  <div className='relative'>\n                    <button\n                      ref={rowFilterButtonRef}\n                      onClick={() => { if (rowFilterButtonRef.current) setRowFilterButtonRect(rowFilterButtonRef.current.getBoundingClientRect()); setShowRowFilterDropdown(!showRowFilterDropdown); }}\n                      className='w-full text-xs px-2 py-1.5 rounded border border-neutral-200 dark:border-black-500 bg-neutral-50 dark:bg-black-600 text-neutral-700 dark:text-neutral-200 focus:outline-none focus:ring-1 focus:ring-primary-500 flex items-center justify-between gap-2'\n                    >\n                      <span className='truncate'>{selectedRowLabel}</span>\n                      <motion.div animate={{ rotate: showRowFilterDropdown ? 180 : 0 }} transition={{ duration: 0.2 }}>\n                        <KeyboardArrowDownRounded sx={{ fontSize: 16 }} className='text-neutral-400' />\n                      </motion.div>\n                    </button>\n                    {showRowFilterDropdown && rowFilterButtonRect && createPortal(\n                      <AnimatePresence>\n                        <motion.div\n                          ref={rowFilterDropdownRef}\n                          className='fixed bg-white dark:bg-black-700 rounded-lg shadow-xl border border-neutral-200 dark:border-black-600 overflow-hidden'\n                          style={{ zIndex: 2147483647, top: rowFilterButtonRect.bottom + 4, left: rowFilterButtonRect.left, width: rowFilterButtonRect.width }}\n                          variants={rowFilterDropdownVariants}\n                          initial='hidden' animate='visible' exit='exit'\n                        >\n                          <div className='p-2 border-b border-neutral-100 dark:border-black-600'>\n                            <div className='relative flex items-center'>\n                              <SearchRounded sx={{ fontSize: 14 }} className='absolute left-2 text-neutral-400 dark:text-neutral-500 z-10 pointer-events-none' />\n                              <input type='text' value={rowFilterSearch} onChange={(e) => setRowFilterSearch(e.target.value)} placeholder='Search rows...' className='w-full text-xs pl-7 pr-7 py-1.5 rounded border border-neutral-200 dark:border-black-500 bg-white dark:bg-black-600 text-neutral-700 dark:text-neutral-200 focus:outline-none focus:ring-1 focus:ring-primary-500 placeholder:text-neutral-400' autoFocus />\n                              {rowFilterSearch && <button onClick={() => setRowFilterSearch('')} className='absolute right-2 z-10 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300'><CloseRounded sx={{ fontSize: 14 }} /></button>}\n                            </div>\n                          </div>\n                          <motion.div className='max-h-40 overflow-y-auto' variants={listContainerVariants} initial='hidden' animate='visible'>\n                            {(!rowFilterSearch || 'all rows'.includes(rowFilterSearch.toLowerCase())) && (\n                              <motion.button variants={listItemVariants} onClick={() => handleRowFilterSelect(null)} className={`w-full text-left px-3 py-2 text-xs transition-colors ${!rowFilter ? 'bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-700 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-black-600'}`}>\n                                All Rows ({pendingEditsList.length} changes)\n                              </motion.button>\n                            )}\n                            {filteredRowOptions.map((row) => (\n                              <motion.button key={row.rowId} variants={listItemVariants} onClick={() => handleRowFilterSelect(row.rowId)} className={`w-full text-left px-3 py-2 text-xs transition-colors ${rowFilter === row.rowId ? 'bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-700 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-black-600'}`}>\n                                Row {row.rowIndex + 1} ({row.editCount} {row.editCount === 1 ? 'change' : 'changes'})\n                              </motion.button>\n                            ))}\n                            {filteredRowOptions.length === 0 && rowFilterSearch && !'all rows'.includes(rowFilterSearch.toLowerCase()) && (\n                              <motion.div variants={listItemVariants} className='px-3 py-2 text-xs text-neutral-500 dark:text-neutral-400'>No rows found</motion.div>\n                            )}\n                          </motion.div>\n                        </motion.div>\n                      </AnimatePresence>,\n                      document.body,\n                    )}\n                  </div>\n                </div>\n              )}\n              <motion.div className='max-h-52 overflow-y-auto' variants={listContainerVariants} initial='hidden' animate='visible'>\n                {filteredPendingEditsList?.map((edit, idx) => (\n                  <motion.button key={`${edit.rowId}-${edit.columnKey}-${idx}`} variants={listItemVariants} onClick={() => handleCellClick(edit)} className='w-full px-3 py-2 text-left hover:bg-neutral-50 dark:hover:bg-black-600 transition-colors' whileHover={{ backgroundColor: 'rgba(0,0,0,0.03)' }} whileTap={{ scale: 0.98 }}>\n                    <div className='text-xs font-bold text-neutral-700 dark:text-neutral-300 mb-1'>\n                      {edit.fieldName} {!rowFilter && <span className='font-normal text-neutral-500 dark:text-neutral-400'>(Row {edit.rowIndex + 1})</span>}\n                    </div>\n                    <div className='flex items-center gap-1.5 text-sm'>\n                      <span className='text-neutral-400 dark:text-neutral-500 line-through truncate max-w-[100px]'>{formatValue(edit.originalValue, edit.originalMeta?.currency_code)}</span>\n                      <span className='text-neutral-400 dark:text-neutral-500 flex-shrink-0'>→</span>\n                      <span className='text-primary-600 dark:text-primary-400 font-medium truncate max-w-[100px]'>{formatValue(edit.value, edit.meta?.currency_code)}</span>\n                    </div>\n                  </motion.button>\n                ))}\n              </motion.div>\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n\n      <motion.div\n        className='flex items-center bg-white dark:bg-black-700 shadow-lg border border-neutral-200 dark:border-black-600 overflow-hidden'\n        animate={{ padding: isMinimized ? '8px' : '12px 16px', gap: isMinimized ? '0px' : '12px', borderRadius: isMinimized ? '9999px' : '8px' }}\n        transition={{ type: 'spring', stiffness: 300, damping: 25 }}\n      >\n        <AnimatePresence mode='wait'>\n          {isMinimized ? (\n            <motion.div key='minimized' initial={{ opacity: 0, scale: 0.8 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.8 }}\n              onMouseDown={handleMouseDown} onClick={() => setIsMinimized(false)}\n              className='flex items-center justify-center cursor-grab active:cursor-grabbing flex-shrink-0'\n              style={{ width: '32px', height: '32px', borderRadius: '9999px', backgroundColor: 'var(--color-primary-600)', color: 'white' }}\n              title='Drag to move / Click to expand' whileHover={{ backgroundColor: 'var(--color-primary-700)', scale: 1.05 }} whileTap={{ scale: 0.95 }}\n            >\n              <span className='text-xs font-bold'>{pendingEditsCount}</span>\n            </motion.div>\n          ) : (\n            <motion.button key='minimize-btn' initial={{ opacity: 0, scale: 0.8 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.8 }}\n              onClick={() => setIsMinimized(true)} className='flex items-center justify-center flex-shrink-0'\n              style={{ width: '24px', height: '24px', borderRadius: '4px', backgroundColor: 'transparent', color: 'var(--color-neutral-400)' }}\n              title='Minimize' whileHover={{ backgroundColor: 'var(--color-neutral-100)', color: 'var(--color-neutral-600)' }} whileTap={{ scale: 0.9 }}\n            >\n              <RemoveOutlined sx={{ fontSize: 16 }} />\n            </motion.button>\n          )}\n        </AnimatePresence>\n\n        <motion.div className='flex items-center gap-3' animate={{ width: isMinimized ? 0 : 'auto', opacity: isMinimized ? 0 : 1 }}\n          transition={{ type: 'spring', stiffness: 300, damping: 25 }} style={{ overflow: 'hidden', pointerEvents: isMinimized ? 'none' : 'auto' }}\n        >\n          <div onMouseDown={handleMouseDown} className='cursor-grab active:cursor-grabbing text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 flex items-center' title='Drag to move'>\n            <DragIndicator sx={{ fontSize: 18 }} />\n          </div>\n          <div className='relative' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n            <span className='text-sm font-medium text-neutral-700 dark:text-neutral-200 cursor-pointer hover:text-primary-600 dark:hover:text-primary-400 whitespace-nowrap'>\n              {pendingEditsCount} unsaved {pendingEditsCount === 1 ? 'change' : 'changes'}\n            </span>\n          </div>\n          <div className='h-4 w-px bg-neutral-200 dark:bg-black-600 flex-shrink-0' />\n          <motion.button onClick={onClearAll} disabled={!!fieldOperationLoading}\n            className={`px-3 py-1.5 text-sm font-medium rounded-md whitespace-nowrap flex-shrink-0 ${fieldOperationLoading ? 'text-neutral-400 dark:text-neutral-500 cursor-not-allowed' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-black-600'}`}\n            whileHover={!fieldOperationLoading ? { scale: 1.02 } : undefined} whileTap={!fieldOperationLoading ? { scale: 0.98 } : undefined}\n          >\n            Cancel\n          </motion.button>\n          <motion.button onClick={onSaveAll} disabled={!!fieldOperationLoading}\n            className={`px-3 py-1.5 text-sm font-medium rounded-md whitespace-nowrap flex-shrink-0 ${fieldOperationLoading ? 'text-white bg-primary-400 cursor-not-allowed' : 'text-white bg-primary-600 hover:bg-primary-700'}`}\n            whileHover={!fieldOperationLoading ? { scale: 1.02 } : undefined} whileTap={!fieldOperationLoading ? { scale: 0.98 } : undefined}\n          >\n            Save All\n          </motion.button>\n        </motion.div>\n      </motion.div>\n    </motion.div>\n  );\n\n  return createPortal(floatingBar, document.body);\n};\n"],"names":["rowFilterDropdownVariants","listContainerVariants","listItemVariants","PendingEditsFloatingBar","pendingEditsCount","pendingEditsList","rowsWithPendingEdits","fieldOperationLoading","onClearAll","onSaveAll","onScrollToCell","showDropdown","setShowDropdown","useState","isMinimized","setIsMinimized","rowFilter","setRowFilter","position","setPosition","isDragging","setIsDragging","rowFilterSearch","setRowFilterSearch","showRowFilterDropdown","setShowRowFilterDropdown","rowFilterButtonRect","setRowFilterButtonRect","dropdownTimeoutRef","useRef","dragStartRef","floatingBarRef","rowFilterRef","rowFilterButtonRef","rowFilterDropdownRef","filteredPendingEditsList","useMemo","edit","filteredRowOptions","searchLower","row","selectedRowLabel","r","useEffect","handleClickOutside","e","target","handleMouseEnter","useCallback","handleMouseLeave","clampPositionToViewport","nextX","nextY","barWidth","barHeight","maxX","maxY","handleMouseDown","barElement","rect","handleMouseMove","handleMouseUp","keepBarInViewport","clampedPosition","formatValue","val","currencyCode","strVal","hasTime","formatDate","handleCellClick","handleRowFilterSelect","rowId","floatingBar","jsxs","motion","jsx","AnimatePresence","KeyboardArrowDownRounded","createPortal","SearchRounded","CloseRounded","idx","RemoveOutlined","DragIndicator"],"mappings":"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"}
+{"version":3,"file":"PendingEditsFloatingBar.cjs.js","sources":["../../../../src/components/data-display/infinite-table/PendingEditsFloatingBar.tsx"],"sourcesContent":["import { formatDate } from '../../../utils/formatters';\nimport { CloseRounded, DragIndicator, KeyboardArrowDownRounded, RemoveOutlined, SearchRounded } from '@mui/icons-material';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { FLOATING_BAR_TOOLTIP_MARGIN_BOTTOM, FLOATING_BAR_TOOLTIP_MARGIN_LEFT } from './constants';\n\ninterface PendingEdit {\n  rowId: string;\n  columnKey: string;\n  fieldName: string;\n  value: unknown;\n  originalValue: unknown;\n  meta?: { currency_code?: string | null; [key: string]: unknown | null } | null;\n  originalMeta?: { currency_code?: string | null; [key: string]: unknown | null } | null;\n  rowIndex: number;\n}\n\ninterface RowWithPendingEdits {\n  rowId: string;\n  rowIndex: number;\n  editCount: number;\n}\n\ninterface PendingEditsFloatingBarProps {\n  pendingEditsCount: number;\n  pendingEditsList: PendingEdit[];\n  rowsWithPendingEdits: RowWithPendingEdits[];\n  fieldOperationLoading: string | null;\n  onClearAll: () => void;\n  onSaveAll: () => void;\n  onScrollToCell: (rowId: string, columnKey: string, rowIndex: number) => void;\n}\n\nconst rowFilterDropdownVariants = {\n  hidden: { opacity: 0, y: -8, scale: 0.95 },\n  visible: { opacity: 1, y: 0, scale: 1, transition: { type: 'spring' as const, stiffness: 400, damping: 25 } },\n  exit: { opacity: 0, y: -8, scale: 0.95, transition: { duration: 0.1 } },\n};\n\nconst listContainerVariants = {\n  hidden: { opacity: 0 },\n  visible: { opacity: 1, transition: { staggerChildren: 0.03, delayChildren: 0.05 } },\n};\n\nconst listItemVariants = {\n  hidden: { opacity: 0, y: -8 },\n  visible: { opacity: 1, y: 0, transition: { type: 'spring' as const, stiffness: 400, damping: 25 } },\n};\n\nexport const PendingEditsFloatingBar: React.FC<PendingEditsFloatingBarProps> = ({\n  pendingEditsCount, pendingEditsList, rowsWithPendingEdits, fieldOperationLoading, onClearAll, onSaveAll, onScrollToCell,\n}) => {\n  const [showDropdown, setShowDropdown] = useState(false);\n  const [isMinimized, setIsMinimized] = useState(false);\n  const [rowFilter, setRowFilter] = useState<string | null>(null);\n  const [position, setPosition] = useState<{ x: number; y: number } | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  const [rowFilterSearch, setRowFilterSearch] = useState('');\n  const [showRowFilterDropdown, setShowRowFilterDropdown] = useState(false);\n  const [rowFilterButtonRect, setRowFilterButtonRect] = useState<DOMRect | null>(null);\n\n  const dropdownTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const dragStartRef = useRef<{ x: number; y: number; barX: number; barY: number; barWidth: number; barHeight: number } | null>(null);\n  const floatingBarRef = useRef<HTMLDivElement>(null);\n  const rowFilterRef = useRef<HTMLDivElement>(null);\n  const rowFilterButtonRef = useRef<HTMLButtonElement>(null);\n  const rowFilterDropdownRef = useRef<HTMLDivElement>(null);\n\n  const filteredPendingEditsList = useMemo(() => {\n    if (!rowFilter) return pendingEditsList;\n    return pendingEditsList.filter((edit) => edit.rowId === rowFilter);\n  }, [pendingEditsList, rowFilter]);\n\n  const filteredRowOptions = useMemo(() => {\n    if (!rowFilterSearch) return rowsWithPendingEdits;\n    const searchLower = rowFilterSearch.toLowerCase();\n    return rowsWithPendingEdits.filter((row) => `row ${row.rowIndex + 1}`.toLowerCase().includes(searchLower));\n  }, [rowsWithPendingEdits, rowFilterSearch]);\n\n  const selectedRowLabel = useMemo(() => {\n    if (!rowFilter) return `All Rows (${pendingEditsList.length})`;\n    const row = rowsWithPendingEdits.find((r) => r.rowId === rowFilter);\n    if (!row) return `All Rows (${pendingEditsList.length})`;\n    return `Row ${row.rowIndex + 1} (${row.editCount})`;\n  }, [rowFilter, rowsWithPendingEdits, pendingEditsList.length]);\n\n  useEffect(() => {\n    if (rowFilter && !rowsWithPendingEdits.find((row) => row.rowId === rowFilter)) setRowFilter(null);\n  }, [rowsWithPendingEdits, rowFilter]);\n\n  useEffect(() => {\n    const handleClickOutside = (e: MouseEvent) => {\n      const target = e.target as Node;\n      if (!rowFilterRef.current?.contains(target) && !rowFilterDropdownRef.current?.contains(target)) {\n        setShowRowFilterDropdown(false);\n        setRowFilterSearch('');\n      }\n    };\n    if (showRowFilterDropdown) document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [showRowFilterDropdown]);\n\n  const handleMouseEnter = useCallback(() => {\n    if (dropdownTimeoutRef.current) { clearTimeout(dropdownTimeoutRef.current); dropdownTimeoutRef.current = null; }\n    setShowDropdown(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    dropdownTimeoutRef.current = setTimeout(() => setShowDropdown(false), 300);\n  }, []);\n\n  const clampPositionToViewport = useCallback((nextX: number, nextY: number, barWidth: number, barHeight: number) => {\n    const maxX = Math.max(0, window.innerWidth - barWidth);\n    const maxY = Math.max(0, window.innerHeight - barHeight);\n\n    return {\n      x: Math.min(Math.max(nextX, 0), maxX),\n      y: Math.min(Math.max(nextY, 0), maxY),\n    };\n  }, []);\n\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n    const barElement = e.currentTarget.closest('.pending-edits-floating-bar') as HTMLElement;\n    if (!barElement) return;\n    const rect = barElement.getBoundingClientRect();\n    dragStartRef.current = {\n      x: e.clientX,\n      y: e.clientY,\n      barX: position?.x ?? rect.left,\n      barY: position?.y ?? rect.top,\n      barWidth: rect.width,\n      barHeight: rect.height,\n    };\n    setIsDragging(true);\n  }, [position]);\n\n  useEffect(() => {\n    if (!isDragging) return;\n    const handleMouseMove = (e: MouseEvent) => {\n      if (!dragStartRef.current) return;\n      const nextX = dragStartRef.current.barX + e.clientX - dragStartRef.current.x;\n      const nextY = dragStartRef.current.barY + e.clientY - dragStartRef.current.y;\n      setPosition(clampPositionToViewport(nextX, nextY, dragStartRef.current.barWidth, dragStartRef.current.barHeight));\n    };\n    const handleMouseUp = () => { setIsDragging(false); dragStartRef.current = null; };\n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseup', handleMouseUp);\n    return () => { document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); };\n  }, [isDragging, clampPositionToViewport]);\n\n  useEffect(() => {\n    if (!position || !floatingBarRef.current) return;\n\n    const keepBarInViewport = () => {\n      if (!floatingBarRef.current) return;\n      const rect = floatingBarRef.current.getBoundingClientRect();\n      const clampedPosition = clampPositionToViewport(position.x, position.y, rect.width, rect.height);\n      if (clampedPosition.x !== position.x || clampedPosition.y !== position.y) {\n        setPosition(clampedPosition);\n      }\n    };\n\n    keepBarInViewport();\n    window.addEventListener('resize', keepBarInViewport);\n    return () => window.removeEventListener('resize', keepBarInViewport);\n  }, [position, clampPositionToViewport]);\n\n  const formatValue = (val: unknown, currencyCode?: string | null): string => {\n    if (typeof val === 'boolean') return val ? 'Yes' : 'No';\n    if (val === null || val === undefined || val === '') return '-';\n    const strVal = String(val);\n    const dateRegex = /^\\d{4}-\\d{2}-\\d{2}(T\\d{2}:\\d{2}(:\\d{2})?)?/;\n    if (dateRegex.test(strVal)) {\n      const hasTime = strVal.includes('T');\n      return formatDate(strVal, { withTime: hasTime, skipTimezone: true }) || strVal;\n    }\n    if (currencyCode) return `${strVal} ${currencyCode}`;\n    return strVal;\n  };\n\n  const handleCellClick = (edit: PendingEdit) => { setShowDropdown(false); onScrollToCell(edit.rowId, edit.columnKey, edit.rowIndex); };\n  const handleRowFilterSelect = (rowId: string | null) => { setRowFilter(rowId); setShowRowFilterDropdown(false); setRowFilterSearch(''); };\n\n  if (pendingEditsCount === 0) return null;\n\n  const floatingBar = (\n    <motion.div\n      ref={floatingBarRef}\n      className='pending-edits-floating-bar fixed z-[9999]'\n      style={{\n        zIndex: 2147483646,\n        ...(position ? { left: position.x, top: position.y } : { bottom: 24, left: '50%', transform: 'translateX(-50%)' }),\n      }}\n      initial={{ opacity: 0, scale: 0.9 }}\n      animate={{ opacity: 1, scale: 1 }}\n      transition={{ type: 'spring', stiffness: 300, damping: 25 }}\n    >\n      <AnimatePresence>\n        {showDropdown && !isMinimized && (\n          <motion.div\n            className='absolute w-80'\n            style={{ bottom: '100%', left: '50%', marginLeft: FLOATING_BAR_TOOLTIP_MARGIN_LEFT, marginBottom: FLOATING_BAR_TOOLTIP_MARGIN_BOTTOM }}\n            initial={{ opacity: 0, y: 10, scale: 0.95 }}\n            animate={{ opacity: 1, y: 0, scale: 1 }}\n            exit={{ opacity: 0, y: 10, scale: 0.95 }}\n            transition={{ type: 'spring', stiffness: 300, damping: 24 }}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n          >\n            <div className='bg-white dark:bg-black-700 rounded-lg shadow-xl border border-neutral-200 dark:border-black-600 py-2 overflow-hidden'>\n              <div className='px-3 py-1.5 text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider border-b border-neutral-100 dark:border-black-600'>Pending Changes</div>\n              {rowsWithPendingEdits.length > 1 && (\n                <div className='px-3 py-2 border-b border-neutral-100 dark:border-black-600' ref={rowFilterRef}>\n                  <div className='relative'>\n                    <button\n                      ref={rowFilterButtonRef}\n                      onClick={() => { if (rowFilterButtonRef.current) setRowFilterButtonRect(rowFilterButtonRef.current.getBoundingClientRect()); setShowRowFilterDropdown(!showRowFilterDropdown); }}\n                      className='w-full text-xs px-2 py-1.5 rounded border border-neutral-200 dark:border-black-500 bg-neutral-50 dark:bg-black-600 text-neutral-700 dark:text-neutral-200 focus:outline-none focus:ring-1 focus:ring-primary-500 flex items-center justify-between gap-2'\n                    >\n                      <span className='truncate'>{selectedRowLabel}</span>\n                      <motion.div animate={{ rotate: showRowFilterDropdown ? 180 : 0 }} transition={{ duration: 0.2 }}>\n                        <KeyboardArrowDownRounded sx={{ fontSize: 16 }} className='text-neutral-400' />\n                      </motion.div>\n                    </button>\n                    {showRowFilterDropdown && rowFilterButtonRect && createPortal(\n                      <AnimatePresence>\n                        <motion.div\n                          ref={rowFilterDropdownRef}\n                          className='fixed bg-white dark:bg-black-700 rounded-lg shadow-xl border border-neutral-200 dark:border-black-600 overflow-hidden'\n                          style={{ zIndex: 2147483647, top: rowFilterButtonRect.bottom + 4, left: rowFilterButtonRect.left, width: rowFilterButtonRect.width }}\n                          variants={rowFilterDropdownVariants}\n                          initial='hidden' animate='visible' exit='exit'\n                        >\n                          <div className='p-2 border-b border-neutral-100 dark:border-black-600'>\n                            <div className='relative flex items-center'>\n                              <SearchRounded sx={{ fontSize: 14 }} className='absolute left-2 text-neutral-400 dark:text-neutral-500 z-10 pointer-events-none' />\n                              <input type='text' value={rowFilterSearch} onChange={(e) => setRowFilterSearch(e.target.value)} placeholder='Search rows...' className='w-full text-xs pl-7 pr-7 py-1.5 rounded border border-neutral-200 dark:border-black-500 bg-white dark:bg-black-600 text-neutral-700 dark:text-neutral-200 focus:outline-none focus:ring-1 focus:ring-primary-500 placeholder:text-neutral-400' autoFocus />\n                              {rowFilterSearch && <button onClick={() => setRowFilterSearch('')} className='absolute right-2 z-10 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300'><CloseRounded sx={{ fontSize: 14 }} /></button>}\n                            </div>\n                          </div>\n                          <motion.div className='max-h-40 overflow-y-auto' variants={listContainerVariants} initial='hidden' animate='visible'>\n                            {(!rowFilterSearch || 'all rows'.includes(rowFilterSearch.toLowerCase())) && (\n                              <motion.button variants={listItemVariants} onClick={() => handleRowFilterSelect(null)} className={`w-full text-left px-3 py-2 text-xs transition-colors ${!rowFilter ? 'bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-700 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-black-600'}`}>\n                                All Rows ({pendingEditsList.length} changes)\n                              </motion.button>\n                            )}\n                            {filteredRowOptions.map((row) => (\n                              <motion.button key={row.rowId} variants={listItemVariants} onClick={() => handleRowFilterSelect(row.rowId)} className={`w-full text-left px-3 py-2 text-xs transition-colors ${rowFilter === row.rowId ? 'bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-700 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-black-600'}`}>\n                                Row {row.rowIndex + 1} ({row.editCount} {row.editCount === 1 ? 'change' : 'changes'})\n                              </motion.button>\n                            ))}\n                            {filteredRowOptions.length === 0 && rowFilterSearch && !'all rows'.includes(rowFilterSearch.toLowerCase()) && (\n                              <motion.div variants={listItemVariants} className='px-3 py-2 text-xs text-neutral-500 dark:text-neutral-400'>No rows found</motion.div>\n                            )}\n                          </motion.div>\n                        </motion.div>\n                      </AnimatePresence>,\n                      document.body,\n                    )}\n                  </div>\n                </div>\n              )}\n              <motion.div className='max-h-52 overflow-y-auto' variants={listContainerVariants} initial='hidden' animate='visible'>\n                {filteredPendingEditsList?.map((edit, idx) => (\n                  <motion.button key={`${edit.rowId}-${edit.columnKey}-${idx}`} variants={listItemVariants} onClick={() => handleCellClick(edit)} className='w-full px-3 py-2 text-left hover:bg-neutral-50 dark:hover:bg-black-600 transition-colors' whileHover={{ backgroundColor: 'rgba(0,0,0,0.03)' }} whileTap={{ scale: 0.98 }}>\n                    <div className='text-xs font-bold text-neutral-700 dark:text-neutral-300 mb-1'>\n                      {edit.fieldName} {!rowFilter && <span className='font-normal text-neutral-500 dark:text-neutral-400'>(Row {edit.rowIndex + 1})</span>}\n                    </div>\n                    <div className='flex items-center gap-1.5 text-sm'>\n                      <span className='text-neutral-400 dark:text-neutral-500 line-through truncate max-w-[100px]'>{formatValue(edit.originalValue, edit.originalMeta?.currency_code)}</span>\n                      <span className='text-neutral-400 dark:text-neutral-500 flex-shrink-0'>→</span>\n                      <span className='text-primary-600 dark:text-primary-400 font-medium truncate max-w-[100px]'>{formatValue(edit.value, edit.meta?.currency_code)}</span>\n                    </div>\n                  </motion.button>\n                ))}\n              </motion.div>\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n\n      <motion.div\n        className='flex items-center bg-white dark:bg-black-700 shadow-lg border border-neutral-200 dark:border-black-600 overflow-hidden'\n        animate={{ padding: isMinimized ? '8px' : '12px 16px', gap: isMinimized ? '0px' : '12px', borderRadius: isMinimized ? '9999px' : '8px' }}\n        transition={{ type: 'spring', stiffness: 300, damping: 25 }}\n      >\n        <AnimatePresence mode='wait'>\n          {isMinimized ? (\n            <motion.div key='minimized' initial={{ opacity: 0, scale: 0.8 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.8 }}\n              onMouseDown={handleMouseDown} onClick={() => setIsMinimized(false)}\n              className='flex items-center justify-center cursor-grab active:cursor-grabbing flex-shrink-0'\n              style={{ width: '32px', height: '32px', borderRadius: '9999px', backgroundColor: 'var(--color-primary-600)', color: 'white' }}\n              title='Drag to move / Click to expand' whileHover={{ backgroundColor: 'var(--color-primary-700)', scale: 1.05 }} whileTap={{ scale: 0.95 }}\n            >\n              <span className='text-xs font-bold'>{pendingEditsCount}</span>\n            </motion.div>\n          ) : (\n            <motion.button key='minimize-btn' initial={{ opacity: 0, scale: 0.8 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.8 }}\n              onClick={() => setIsMinimized(true)} className='flex items-center justify-center flex-shrink-0'\n              style={{ width: '24px', height: '24px', borderRadius: '4px', backgroundColor: 'transparent', color: 'var(--color-neutral-400)' }}\n              title='Minimize' whileHover={{ backgroundColor: 'var(--color-neutral-100)', color: 'var(--color-neutral-600)' }} whileTap={{ scale: 0.9 }}\n            >\n              <RemoveOutlined sx={{ fontSize: 16 }} />\n            </motion.button>\n          )}\n        </AnimatePresence>\n\n        <motion.div className='flex items-center gap-3' animate={{ width: isMinimized ? 0 : 'auto', opacity: isMinimized ? 0 : 1 }}\n          transition={{ type: 'spring', stiffness: 300, damping: 25 }} style={{ overflow: 'hidden', pointerEvents: isMinimized ? 'none' : 'auto' }}\n        >\n          <div onMouseDown={handleMouseDown} className='cursor-grab active:cursor-grabbing text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 flex items-center' title='Drag to move'>\n            <DragIndicator sx={{ fontSize: 18 }} />\n          </div>\n          <div className='relative' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n            <span className='text-sm font-medium text-neutral-700 dark:text-neutral-200 cursor-pointer hover:text-primary-600 dark:hover:text-primary-400 whitespace-nowrap'>\n              {pendingEditsCount} unsaved {pendingEditsCount === 1 ? 'change' : 'changes'}\n            </span>\n          </div>\n          <div className='h-4 w-px bg-neutral-200 dark:bg-black-600 flex-shrink-0' />\n          <motion.button onClick={onClearAll} disabled={!!fieldOperationLoading}\n            className={`px-3 py-1.5 text-sm font-medium rounded-md whitespace-nowrap flex-shrink-0 ${fieldOperationLoading ? 'text-neutral-400 dark:text-neutral-500 cursor-not-allowed' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-black-600'}`}\n            whileHover={!fieldOperationLoading ? { scale: 1.02 } : undefined} whileTap={!fieldOperationLoading ? { scale: 0.98 } : undefined}\n          >\n            Cancel\n          </motion.button>\n          <motion.button onClick={onSaveAll} disabled={!!fieldOperationLoading}\n            className={`px-3 py-1.5 text-sm font-medium rounded-md whitespace-nowrap flex-shrink-0 ${fieldOperationLoading ? 'text-white bg-primary-400 cursor-not-allowed' : 'text-white bg-primary-600 hover:bg-primary-700'}`}\n            whileHover={!fieldOperationLoading ? { scale: 1.02 } : undefined} whileTap={!fieldOperationLoading ? { scale: 0.98 } : undefined}\n          >\n            Save All\n          </motion.button>\n        </motion.div>\n      </motion.div>\n    </motion.div>\n  );\n\n  return createPortal(floatingBar, document.body);\n};\n"],"names":["rowFilterDropdownVariants","listContainerVariants","listItemVariants","PendingEditsFloatingBar","pendingEditsCount","pendingEditsList","rowsWithPendingEdits","fieldOperationLoading","onClearAll","onSaveAll","onScrollToCell","showDropdown","setShowDropdown","useState","isMinimized","setIsMinimized","rowFilter","setRowFilter","position","setPosition","isDragging","setIsDragging","rowFilterSearch","setRowFilterSearch","showRowFilterDropdown","setShowRowFilterDropdown","rowFilterButtonRect","setRowFilterButtonRect","dropdownTimeoutRef","useRef","dragStartRef","floatingBarRef","rowFilterRef","rowFilterButtonRef","rowFilterDropdownRef","filteredPendingEditsList","useMemo","edit","filteredRowOptions","searchLower","row","selectedRowLabel","r","useEffect","handleClickOutside","e","target","handleMouseEnter","useCallback","handleMouseLeave","clampPositionToViewport","nextX","nextY","barWidth","barHeight","maxX","maxY","handleMouseDown","barElement","rect","handleMouseMove","handleMouseUp","keepBarInViewport","clampedPosition","formatValue","val","currencyCode","strVal","hasTime","formatDate","handleCellClick","handleRowFilterSelect","rowId","floatingBar","jsxs","motion","jsx","AnimatePresence","FLOATING_BAR_TOOLTIP_MARGIN_LEFT","FLOATING_BAR_TOOLTIP_MARGIN_BOTTOM","KeyboardArrowDownRounded","createPortal","SearchRounded","CloseRounded","idx","RemoveOutlined","DragIndicator"],"mappings":"0SAmCMA,GAA4B,CAChC,OAAQ,CAAE,QAAS,EAAG,EAAG,GAAI,MAAO,GAAA,EACpC,QAAS,CAAE,QAAS,EAAG,EAAG,EAAG,MAAO,EAAG,WAAY,CAAE,KAAM,SAAmB,UAAW,IAAK,QAAS,GAAG,EAC1G,KAAM,CAAE,QAAS,EAAG,EAAG,GAAI,MAAO,IAAM,WAAY,CAAE,SAAU,EAAA,CAAI,CACtE,EAEMC,EAAwB,CAC5B,OAAQ,CAAE,QAAS,CAAA,EACnB,QAAS,CAAE,QAAS,EAAG,WAAY,CAAE,gBAAiB,IAAM,cAAe,GAAA,CAAK,CAClF,EAEMC,EAAmB,CACvB,OAAQ,CAAE,QAAS,EAAG,EAAG,EAAA,EACzB,QAAS,CAAE,QAAS,EAAG,EAAG,EAAG,WAAY,CAAE,KAAM,SAAmB,UAAW,IAAK,QAAS,GAAG,CAClG,EAEaC,GAAkE,CAAC,CAC9E,kBAAAC,EAAmB,iBAAAC,EAAkB,qBAAAC,EAAsB,sBAAAC,EAAuB,WAAAC,EAAY,UAAAC,EAAW,eAAAC,CAC3G,IAAM,CACJ,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAAAA,SAAS,EAAK,EAChD,CAACC,EAAaC,CAAc,EAAIF,EAAAA,SAAS,EAAK,EAC9C,CAACG,EAAWC,CAAY,EAAIJ,EAAAA,SAAwB,IAAI,EACxD,CAACK,EAAUC,CAAW,EAAIN,EAAAA,SAA0C,IAAI,EACxE,CAACO,EAAYC,CAAa,EAAIR,EAAAA,SAAS,EAAK,EAC5C,CAACS,EAAiBC,CAAkB,EAAIV,EAAAA,SAAS,EAAE,EACnD,CAACW,EAAuBC,CAAwB,EAAIZ,EAAAA,SAAS,EAAK,EAClE,CAACa,EAAqBC,CAAsB,EAAId,EAAAA,SAAyB,IAAI,EAE7Ee,EAAqBC,EAAAA,OAA6C,IAAI,EACtEC,EAAeD,EAAAA,OAAyG,IAAI,EAC5HE,EAAiBF,EAAAA,OAAuB,IAAI,EAC5CG,EAAeH,EAAAA,OAAuB,IAAI,EAC1CI,EAAqBJ,EAAAA,OAA0B,IAAI,EACnDK,EAAuBL,EAAAA,OAAuB,IAAI,EAElDM,EAA2BC,EAAAA,QAAQ,IAClCpB,EACEX,EAAiB,OAAQgC,GAASA,EAAK,QAAUrB,CAAS,EAD1CX,EAEtB,CAACA,EAAkBW,CAAS,CAAC,EAE1BsB,EAAqBF,EAAAA,QAAQ,IAAM,CACvC,GAAI,CAACd,EAAiB,OAAOhB,EAC7B,MAAMiC,EAAcjB,EAAgB,YAAA,EACpC,OAAOhB,EAAqB,OAAQkC,GAAQ,OAAOA,EAAI,SAAW,CAAC,GAAG,YAAA,EAAc,SAASD,CAAW,CAAC,CAC3G,EAAG,CAACjC,EAAsBgB,CAAe,CAAC,EAEpCmB,EAAmBL,EAAAA,QAAQ,IAAM,CACrC,GAAI,CAACpB,EAAW,MAAO,aAAaX,EAAiB,MAAM,IAC3D,MAAMmC,EAAMlC,EAAqB,KAAMoC,GAAMA,EAAE,QAAU1B,CAAS,EAClE,OAAKwB,EACE,OAAOA,EAAI,SAAW,CAAC,KAAKA,EAAI,SAAS,IAD/B,aAAanC,EAAiB,MAAM,GAEvD,EAAG,CAACW,EAAWV,EAAsBD,EAAiB,MAAM,CAAC,EAE7DsC,EAAAA,UAAU,IAAM,CACV3B,GAAa,CAACV,EAAqB,KAAMkC,GAAQA,EAAI,QAAUxB,CAAS,GAAGC,EAAa,IAAI,CAClG,EAAG,CAACX,EAAsBU,CAAS,CAAC,EAEpC2B,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAsBC,GAAkB,CAC5C,MAAMC,EAASD,EAAE,OACb,CAACb,EAAa,SAAS,SAASc,CAAM,GAAK,CAACZ,EAAqB,SAAS,SAASY,CAAM,IAC3FrB,EAAyB,EAAK,EAC9BF,EAAmB,EAAE,EAEzB,EACA,OAAIC,GAAuB,SAAS,iBAAiB,YAAaoB,CAAkB,EAC7E,IAAM,SAAS,oBAAoB,YAAaA,CAAkB,CAC3E,EAAG,CAACpB,CAAqB,CAAC,EAE1B,MAAMuB,EAAmBC,EAAAA,YAAY,IAAM,CACrCpB,EAAmB,UAAW,aAAaA,EAAmB,OAAO,EAAGA,EAAmB,QAAU,MACzGhB,EAAgB,EAAI,CACtB,EAAG,CAAA,CAAE,EAECqC,EAAmBD,EAAAA,YAAY,IAAM,CACzCpB,EAAmB,QAAU,WAAW,IAAMhB,EAAgB,EAAK,EAAG,GAAG,CAC3E,EAAG,CAAA,CAAE,EAECsC,EAA0BF,EAAAA,YAAY,CAACG,EAAeC,EAAeC,EAAkBC,IAAsB,CACjH,MAAMC,EAAO,KAAK,IAAI,EAAG,OAAO,WAAaF,CAAQ,EAC/CG,EAAO,KAAK,IAAI,EAAG,OAAO,YAAcF,CAAS,EAEvD,MAAO,CACL,EAAG,KAAK,IAAI,KAAK,IAAIH,EAAO,CAAC,EAAGI,CAAI,EACpC,EAAG,KAAK,IAAI,KAAK,IAAIH,EAAO,CAAC,EAAGI,CAAI,CAAA,CAExC,EAAG,CAAA,CAAE,EAECC,EAAkBT,cAAa,GAAwB,CAC3D,EAAE,eAAA,EACF,MAAMU,EAAa,EAAE,cAAc,QAAQ,6BAA6B,EACxE,GAAI,CAACA,EAAY,OACjB,MAAMC,EAAOD,EAAW,sBAAA,EACxB5B,EAAa,QAAU,CACrB,EAAG,EAAE,QACL,EAAG,EAAE,QACL,KAAMZ,GAAU,GAAKyC,EAAK,KAC1B,KAAMzC,GAAU,GAAKyC,EAAK,IAC1B,SAAUA,EAAK,MACf,UAAWA,EAAK,MAAA,EAElBtC,EAAc,EAAI,CACpB,EAAG,CAACH,CAAQ,CAAC,EAEbyB,EAAAA,UAAU,IAAM,CACd,GAAI,CAACvB,EAAY,OACjB,MAAMwC,EAAmBf,GAAkB,CACzC,GAAI,CAACf,EAAa,QAAS,OAC3B,MAAMqB,EAAQrB,EAAa,QAAQ,KAAOe,EAAE,QAAUf,EAAa,QAAQ,EACrEsB,EAAQtB,EAAa,QAAQ,KAAOe,EAAE,QAAUf,EAAa,QAAQ,EAC3EX,EAAY+B,EAAwBC,EAAOC,EAAOtB,EAAa,QAAQ,SAAUA,EAAa,QAAQ,SAAS,CAAC,CAClH,EACM+B,EAAgB,IAAM,CAAExC,EAAc,EAAK,EAAGS,EAAa,QAAU,IAAM,EACjF,gBAAS,iBAAiB,YAAa8B,CAAe,EACtD,SAAS,iBAAiB,UAAWC,CAAa,EAC3C,IAAM,CAAE,SAAS,oBAAoB,YAAaD,CAAe,EAAG,SAAS,oBAAoB,UAAWC,CAAa,CAAG,CACrI,EAAG,CAACzC,EAAY8B,CAAuB,CAAC,EAExCP,EAAAA,UAAU,IAAM,CACd,GAAI,CAACzB,GAAY,CAACa,EAAe,QAAS,OAE1C,MAAM+B,EAAoB,IAAM,CAC9B,GAAI,CAAC/B,EAAe,QAAS,OAC7B,MAAM4B,EAAO5B,EAAe,QAAQ,sBAAA,EAC9BgC,EAAkBb,EAAwBhC,EAAS,EAAGA,EAAS,EAAGyC,EAAK,MAAOA,EAAK,MAAM,GAC3FI,EAAgB,IAAM7C,EAAS,GAAK6C,EAAgB,IAAM7C,EAAS,IACrEC,EAAY4C,CAAe,CAE/B,EAEA,OAAAD,EAAA,EACA,OAAO,iBAAiB,SAAUA,CAAiB,EAC5C,IAAM,OAAO,oBAAoB,SAAUA,CAAiB,CACrE,EAAG,CAAC5C,EAAUgC,CAAuB,CAAC,EAEtC,MAAMc,EAAc,CAACC,EAAcC,IAAyC,CAC1E,GAAI,OAAOD,GAAQ,UAAW,OAAOA,EAAM,MAAQ,KACnD,GAAIA,GAAQ,MAA6BA,IAAQ,GAAI,MAAO,IAC5D,MAAME,EAAS,OAAOF,CAAG,EAEzB,GADkB,6CACJ,KAAKE,CAAM,EAAG,CAC1B,MAAMC,EAAUD,EAAO,SAAS,GAAG,EACnC,OAAOE,GAAAA,WAAWF,EAAQ,CAAE,SAAUC,EAAS,aAAc,EAAA,CAAM,GAAKD,CAC1E,CACA,OAAID,EAAqB,GAAGC,CAAM,IAAID,CAAY,GAC3CC,CACT,EAEMG,EAAmBjC,GAAsB,CAAEzB,EAAgB,EAAK,EAAGF,EAAe2B,EAAK,MAAOA,EAAK,UAAWA,EAAK,QAAQ,CAAG,EAC9HkC,EAAyBC,GAAyB,CAAEvD,EAAauD,CAAK,EAAG/C,EAAyB,EAAK,EAAGF,EAAmB,EAAE,CAAG,EAExI,GAAInB,IAAsB,EAAG,OAAO,KAEpC,MAAMqE,EACJC,EAAAA,KAACC,EAAAA,OAAO,IAAP,CACC,IAAK5C,EACL,UAAU,4CACV,MAAO,CACL,OAAQ,WACR,GAAIb,EAAW,CAAE,KAAMA,EAAS,EAAG,IAAKA,EAAS,CAAA,EAAM,CAAE,OAAQ,GAAI,KAAM,MAAO,UAAW,kBAAA,CAAmB,EAElH,QAAS,CAAE,QAAS,EAAG,MAAO,EAAA,EAC9B,QAAS,CAAE,QAAS,EAAG,MAAO,CAAA,EAC9B,WAAY,CAAE,KAAM,SAAU,UAAW,IAAK,QAAS,EAAA,EAEvD,SAAA,CAAA0D,EAAAA,IAACC,EAAAA,gBAAA,CACE,SAAAlE,GAAgB,CAACG,GAChB8D,EAAAA,IAACD,EAAAA,OAAO,IAAP,CACC,UAAU,gBACV,MAAO,CAAE,OAAQ,OAAQ,KAAM,MAAO,WAAYG,EAAAA,iCAAkC,aAAcC,oCAAA,EAClG,QAAS,CAAE,QAAS,EAAG,EAAG,GAAI,MAAO,GAAA,EACrC,QAAS,CAAE,QAAS,EAAG,EAAG,EAAG,MAAO,CAAA,EACpC,KAAM,CAAE,QAAS,EAAG,EAAG,GAAI,MAAO,GAAA,EAClC,WAAY,CAAE,KAAM,SAAU,UAAW,IAAK,QAAS,EAAA,EACvD,aAAchC,EACd,aAAcE,EAEd,SAAAyB,EAAAA,KAAC,MAAA,CAAI,UAAU,uHACb,SAAA,CAAAE,EAAAA,IAAC,MAAA,CAAI,UAAU,sJAAsJ,SAAA,kBAAe,EACnLtE,EAAqB,OAAS,GAC7BsE,EAAAA,IAAC,MAAA,CAAI,UAAU,8DAA8D,IAAK5C,EAChF,SAAA0C,OAAC,MAAA,CAAI,UAAU,WACb,SAAA,CAAAA,EAAAA,KAAC,SAAA,CACC,IAAKzC,EACL,QAAS,IAAM,CAAMA,EAAmB,SAASN,EAAuBM,EAAmB,QAAQ,uBAAuB,EAAGR,EAAyB,CAACD,CAAqB,CAAG,EAC/K,UAAU,2PAEV,SAAA,CAAAoD,EAAAA,IAAC,OAAA,CAAK,UAAU,WAAY,SAAAnC,EAAiB,EAC7CmC,EAAAA,IAACD,EAAAA,OAAO,IAAP,CAAW,QAAS,CAAE,OAAQnD,EAAwB,IAAM,CAAA,EAAK,WAAY,CAAE,SAAU,EAAA,EACxF,SAAAoD,MAACI,EAAAA,yBAAA,CAAyB,GAAI,CAAE,SAAU,EAAA,EAAM,UAAU,kBAAA,CAAmB,CAAA,CAC/E,CAAA,CAAA,CAAA,EAEDxD,GAAyBE,GAAuBuD,EAAAA,mBAC9CJ,EAAAA,gBAAA,CACC,SAAAH,EAAAA,KAACC,EAAAA,OAAO,IAAP,CACC,IAAKzC,EACL,UAAU,wHACV,MAAO,CAAE,OAAQ,WAAY,IAAKR,EAAoB,OAAS,EAAG,KAAMA,EAAoB,KAAM,MAAOA,EAAoB,KAAA,EAC7H,SAAU1B,GACV,QAAQ,SAAS,QAAQ,UAAU,KAAK,OAExC,SAAA,CAAA4E,EAAAA,IAAC,OAAI,UAAU,wDACb,SAAAF,EAAAA,KAAC,MAAA,CAAI,UAAU,6BACb,SAAA,CAAAE,MAACM,EAAAA,eAAc,GAAI,CAAE,SAAU,EAAA,EAAM,UAAU,kFAAkF,QAChI,QAAA,CAAM,KAAK,OAAO,MAAO5D,EAAiB,SAAW,GAAMC,EAAmB,EAAE,OAAO,KAAK,EAAG,YAAY,iBAAiB,UAAU,gPAAgP,UAAS,GAAC,EAChYD,GAAmBsD,EAAAA,IAAC,SAAA,CAAO,QAAS,IAAMrD,EAAmB,EAAE,EAAG,UAAU,4FAA4F,eAAC4D,EAAAA,aAAA,CAAa,GAAI,CAAE,SAAU,EAAA,EAAM,CAAA,CAAE,CAAA,CAAA,CACjN,CAAA,CACF,EACAT,EAAAA,KAACC,EAAAA,OAAO,IAAP,CAAW,UAAU,2BAA2B,SAAU1E,EAAuB,QAAQ,SAAS,QAAQ,UACvG,SAAA,EAAA,CAACqB,GAAmB,WAAW,SAASA,EAAgB,aAAa,IACrEoD,OAACC,EAAAA,OAAO,OAAP,CAAc,SAAUzE,EAAkB,QAAS,IAAMqE,EAAsB,IAAI,EAAG,UAAW,wDAAyDvD,EAA4F,qFAAhF,6EAAoK,GAAI,SAAA,CAAA,aAClUX,EAAiB,OAAO,WAAA,EACrC,EAEDiC,EAAmB,IAAKE,UACtBmC,EAAAA,OAAO,OAAP,CAA8B,SAAUzE,EAAkB,QAAS,IAAMqE,EAAsB/B,EAAI,KAAK,EAAG,UAAW,wDAAwDxB,IAAcwB,EAAI,MAAQ,8EAAgF,oFAAoF,GAAI,SAAA,CAAA,OAC1WA,EAAI,SAAW,EAAE,KAAGA,EAAI,UAAU,IAAEA,EAAI,YAAc,EAAI,SAAW,UAAU,GAAA,GADlEA,EAAI,KAExB,CACD,EACAF,EAAmB,SAAW,GAAKhB,GAAmB,CAAC,WAAW,SAASA,EAAgB,YAAA,CAAa,GACvGsD,EAAAA,IAACD,EAAAA,OAAO,IAAP,CAAW,SAAUzE,EAAkB,UAAU,2DAA2D,SAAA,eAAA,CAAa,CAAA,CAAA,CAE9H,CAAA,CAAA,CAAA,EAEJ,EACA,SAAS,IAAA,CACX,CAAA,CACF,CAAA,CACF,QAEDyE,EAAAA,OAAO,IAAP,CAAW,UAAU,2BAA2B,SAAU1E,EAAuB,QAAQ,SAAS,QAAQ,UACxG,SAAAkC,GAA0B,IAAI,CAACE,EAAM+C,IACpCV,OAACC,EAAAA,OAAO,OAAP,CAA6D,SAAUzE,EAAkB,QAAS,IAAMoE,EAAgBjC,CAAI,EAAG,UAAU,2FAA2F,WAAY,CAAE,gBAAiB,oBAAsB,SAAU,CAAE,MAAO,KAC3S,SAAA,CAAAqC,EAAAA,KAAC,MAAA,CAAI,UAAU,gEACZ,SAAA,CAAArC,EAAK,UAAU,IAAE,CAACrB,GAAa0D,EAAAA,KAAC,OAAA,CAAK,UAAU,qDAAqD,SAAA,CAAA,QAAMrC,EAAK,SAAW,EAAE,GAAA,CAAA,CAAC,CAAA,EAChI,EACAqC,EAAAA,KAAC,MAAA,CAAI,UAAU,oCACb,SAAA,CAAAE,EAAAA,IAAC,OAAA,CAAK,UAAU,6EAA8E,SAAAZ,EAAY3B,EAAK,cAAeA,EAAK,cAAc,aAAa,CAAA,CAAE,EAChKuC,EAAAA,IAAC,OAAA,CAAK,UAAU,uDAAuD,SAAA,IAAC,EACxEA,EAAAA,IAAC,OAAA,CAAK,UAAU,4EAA6E,SAAAZ,EAAY3B,EAAK,MAAOA,EAAK,MAAM,aAAa,CAAA,CAAE,CAAA,CAAA,CACjJ,CAAA,CAAA,EARkB,GAAGA,EAAK,KAAK,IAAIA,EAAK,SAAS,IAAI+C,CAAG,EAS1D,CACD,CAAA,CACH,CAAA,CAAA,CACF,CAAA,CAAA,EAGN,EAEAV,EAAAA,KAACC,EAAAA,OAAO,IAAP,CACC,UAAU,yHACV,QAAS,CAAE,QAAS7D,EAAc,MAAQ,YAAa,IAAKA,EAAc,MAAQ,OAAQ,aAAcA,EAAc,SAAW,KAAA,EACjI,WAAY,CAAE,KAAM,SAAU,UAAW,IAAK,QAAS,EAAA,EAEvD,SAAA,CAAA8D,EAAAA,IAACC,EAAAA,gBAAA,CAAgB,KAAK,OACnB,SAAA/D,EACC8D,EAAAA,IAACD,EAAAA,OAAO,IAAP,CAA2B,QAAS,CAAE,QAAS,EAAG,MAAO,EAAA,EAAO,QAAS,CAAE,QAAS,EAAG,MAAO,CAAA,EAAK,KAAM,CAAE,QAAS,EAAG,MAAO,EAAA,EAC7H,YAAalB,EAAiB,QAAS,IAAM1C,EAAe,EAAK,EACjE,UAAU,oFACV,MAAO,CAAE,MAAO,OAAQ,OAAQ,OAAQ,aAAc,SAAU,gBAAiB,2BAA4B,MAAO,OAAA,EACpH,MAAM,iCAAiC,WAAY,CAAE,gBAAiB,2BAA4B,MAAO,IAAA,EAAQ,SAAU,CAAE,MAAO,GAAA,EAEpI,SAAA6D,EAAAA,IAAC,OAAA,CAAK,UAAU,oBAAqB,SAAAxE,CAAA,CAAkB,CAAA,EANzC,WAAA,EAShBwE,EAAAA,IAACD,EAAAA,OAAO,OAAP,CAAiC,QAAS,CAAE,QAAS,EAAG,MAAO,EAAA,EAAO,QAAS,CAAE,QAAS,EAAG,MAAO,CAAA,EAAK,KAAM,CAAE,QAAS,EAAG,MAAO,EAAA,EACnI,QAAS,IAAM5D,EAAe,EAAI,EAAG,UAAU,iDAC/C,MAAO,CAAE,MAAO,OAAQ,OAAQ,OAAQ,aAAc,MAAO,gBAAiB,cAAe,MAAO,0BAAA,EACpG,MAAM,WAAW,WAAY,CAAE,gBAAiB,2BAA4B,MAAO,0BAAA,EAA8B,SAAU,CAAE,MAAO,EAAA,EAEpI,eAACsE,iBAAA,CAAe,GAAI,CAAE,SAAU,GAAG,CAAG,CAAA,EALrB,cAAA,EAQvB,EAEAX,EAAAA,KAACC,EAAAA,OAAO,IAAP,CAAW,UAAU,0BAA0B,QAAS,CAAE,MAAO7D,EAAc,EAAI,OAAQ,QAASA,EAAc,EAAI,CAAA,EACrH,WAAY,CAAE,KAAM,SAAU,UAAW,IAAK,QAAS,EAAA,EAAM,MAAO,CAAE,SAAU,SAAU,cAAeA,EAAc,OAAS,MAAA,EAEhI,SAAA,CAAA8D,EAAAA,IAAC,MAAA,CAAI,YAAanB,EAAiB,UAAU,iJAAiJ,MAAM,eAClM,SAAAmB,EAAAA,IAACU,EAAAA,cAAA,CAAc,GAAI,CAAE,SAAU,EAAA,EAAM,EACvC,EACAV,EAAAA,IAAC,MAAA,CAAI,UAAU,WAAW,aAAc7B,EAAkB,aAAcE,EACtE,SAAAyB,EAAAA,KAAC,OAAA,CAAK,UAAU,iJACb,SAAA,CAAAtE,EAAkB,YAAUA,IAAsB,EAAI,SAAW,SAAA,CAAA,CACpE,CAAA,CACF,EACAwE,EAAAA,IAAC,MAAA,CAAI,UAAU,yDAAA,CAA0D,EACzEA,EAAAA,IAACD,EAAAA,OAAO,OAAP,CAAc,QAASnE,EAAY,SAAU,CAAC,CAACD,EAC9C,UAAW,8EAA8EA,EAAwB,4DAA8D,qFAAqF,GACpQ,WAAaA,EAA0C,OAAlB,CAAE,MAAO,MAAoB,SAAWA,EAA0C,OAAlB,CAAE,MAAO,KAC/G,SAAA,QAAA,CAAA,EAGDqE,EAAAA,IAACD,EAAAA,OAAO,OAAP,CAAc,QAASlE,EAAW,SAAU,CAAC,CAACF,EAC7C,UAAW,8EAA8EA,EAAwB,+CAAiD,gDAAgD,GAClN,WAAaA,EAA0C,OAAlB,CAAE,MAAO,MAAoB,SAAWA,EAA0C,OAAlB,CAAE,MAAO,KAC/G,SAAA,UAAA,CAAA,CAED,CAAA,CAAA,CACF,CAAA,CAAA,CACF,CAAA,CAAA,EAIJ,OAAO0E,eAAaR,EAAa,SAAS,IAAI,CAChD"}