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

package/dist/components/forms/toggle/Toggle.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.es.js","sources":["../../../../src/components/forms/toggle/Toggle.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, type ReactNode, useState } from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { Tooltip as AntTooltip } from \"antd\";\nimport { useTranslation } from 'react-i18next';\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { TOGGLE_LABEL_DIRECTION } from \"../../../constants/toggle\";\nimport type { TToggleDirection } from \"../../../constants/toggle\";\nimport { BoltOutlined, NoteAddOutlined } from \"@mui/icons-material\";\nimport { AIExtractedIndicator } from \"../../icons/AIExtractedIndicator\";\nimport { AIStarIcon } from \"../../icons/AIStarIcon\";\nimport { Label, type LabelType } from \"../../data-display/label/Label\";\nimport Tooltip from \"../../tooltip/Tooltip\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport {\n  getConfidenceScoreBadgeClass,\n  getConfidenceScoreBadgeColor,\n  getConfidenceScoreBadgeFill,\n  getConfidenceScoreBadgeTextColor,\n  shouldShowConfidenceScore,\n} from \"../../../utils/confidenceScoreUtils\";\n\n// Re-export LabelType from Label component for external use\nexport type { LabelType };\n\n/** Visual emphasis for the toggle container (background + border) */\nexport type ToggleEmphasis = \"default\" | \"modified\" | \"deleted\" | \"success\";\n\n/**\n * Confidence score type\n */\nexport type ConfidenceScoreType = \"low\" | \"medium\" | \"high\";\n\nexport type SourceMetaBBox = {\n  b: number;\n  l: number;\n  r: number;\n  t: number;\n};\n\nexport type SourceMetaItem = {\n  bbox: SourceMetaBBox;\n  confidence_score?: number;\n  is_primary?: boolean;\n  match_score?: number;\n  match_type?: string;\n  page_height: number;\n  page_width: number;\n  source_page: number;\n  source_text?: string;\n};\n\n/**\n * Props for the Toggle component\n */\nexport interface ToggleProps {\n  /** Whether this is a GTN (Global Term Name) field */\n  isGTN?: boolean;\n  /** Unique identifier for the toggle */\n  id?: string;\n  /** Whether the toggle is checked */\n  isChecked: boolean;\n  /** Callback function called when toggle state changes */\n  onChange: (val: boolean) => void;\n  /** Label text or element to display */\n  label?: ReactNode;\n  /** Whether to preserve original case in the label */\n  originalCase?: boolean;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Whether the required indicator shows as conditional (yellow instead of red) */\n  isRequiredConditional?: boolean;\n  /** Tags/labels to display next to the label */\n  tags?: (string | LabelType)[];\n  /** Whether to hide the status text (Yes/No) */\n  hideStatus?: boolean;\n  /** Label direction relative to toggle */\n  labelDirection?: TToggleDirection;\n  /** Custom status text instead of Yes/No */\n  statusText?: string;\n  /** Whether to show icons in the toggle */\n  withIcon?: boolean;\n  /** Whether the value was AI extracted */\n  isAiExtracted?: boolean;\n  /** Confidence percentage shown as a badge */\n  confidenceScore?: number;\n  /** Confidence classification for badge styling */\n  confidenceType?: ConfidenceScoreType;\n  /** Optional tooltip content for confidence badge */\n  confidenceTooltip?: ReactNode;\n  /** Source meta for confidence score */\n  sourceMeta?: SourceMetaItem[];\n  /** Handler fired when confidence score badge is clicked */\n  onConfidenceScoreClick?: (sourceMeta: SourceMetaItem[]) => void;\n  /** Tooltip text to display */\n  tooltip?: string;\n  /** Additional CSS classes for the toggle input */\n  className?: string;\n  /** Whether the toggle is disabled. Pass a string to disable with a tooltip message. */\n  disabled?: boolean | string;\n  /**\n   * @deprecated Use `disabled` instead.\n   */\n  isDisabled?: boolean | string;\n  /** Custom icons for checked/unchecked states */\n  icon?: {\n    checkedIcon: ReactNode;\n    uncheckedIcon: ReactNode;\n  };\n  /** Whether to stop click propagation */\n  stopClickPropagation?: boolean;\n  /** GTN field name for document integration */\n  gtnName?: any;\n  /** Visual variant for the toggle */\n  variant?: 'primary' | 'secondary';\n  /** Additional CSS classes for the label */\n  labelClassName?: string;\n  /** Whether this is a live field */\n  isLiveField?: boolean;\n  /** Message to display below the toggle */\n  message?: string;\n  /** Type of message to display */\n  messageType?: \"success\" | \"error\" | \"info\" | \"default\";\n  /** Additional CSS classes for the wrapper container */\n  wrapperClassName?: string;\n  /** Help text to display below the label */\n  helpText?: string;\n  /** Optional extra content in the label row (e.g. actions, badges) */\n  labelExtra?: React.ReactNode;\n  /** Size variant for the toggle */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Custom render function for GTN add to document button */\n  renderGTNAddButton?: (onClick: () => void) => ReactNode;\n  /** Handler for adding GTN to document */\n  onAddGTNToDocument?: (keyValuePair: { key: string; value: string }) => void;\n  /** Container surface style: `'modified'` — Warning-50/Warning-200; `'deleted'` — Error-50/Error-200; `'success'` — Success-50/Success-200 */\n  inputEmphasis?: ToggleEmphasis;\n}\n\n/**\n * Get toggle class names based on state and options\n */\nconst getToggleClassNames = (\n  isChecked: boolean,\n  withIcon: boolean,\n  isDisabled: boolean,\n  size: \"small\" | \"medium\" | \"large\" = \"medium\"\n): string => {\n  const sizeClasses = {\n    small: \"w-7 h-4 after:h-3 after:w-3 after:top-0.5 after:left-0.5\",\n    medium: \"w-9 h-5 after:h-4 after:w-4 after:top-0.5 after:left-0.5\",\n    large: \"w-11 h-6 after:h-5 after:w-5 after:top-0.5 after:left-0.5\",\n  };\n\n  const translateClasses = {\n    small: \"peer-checked:after:translate-x-3\",\n    medium: \"peer-checked:after:translate-x-full\",\n    large: \"peer-checked:after:translate-x-5\",\n  };\n\n  return cn(\n    \"p-0.5 rounded-full peer after:content-[''] after:absolute after:rounded-full after:transition-all bg-gray-200 dark:bg-black-400 peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-white dark:peer-focus-visible:ring-primary-400 dark:peer-focus-visible:ring-offset-black-900 peer-focus-visible:shadow-[0_0_0_3px_var(--color-primary-100)] dark:peer-focus-visible:shadow-[0_0_0_3px_var(--color-primary-950)]\",\n    sizeClasses[size],\n    translateClasses[size],\n    {\n      'peer-checked:bg-primary-600 dark:peer-checked:bg-primary-700 peer-checked:after:translate-x-full after:bg-white dark:after:bg-primary-500':\n        isChecked,\n      'after:bg-white dark:after:bg-black-500': !isChecked,\n      'text-white dark:text-black-900': withIcon,\n      'cursor-not-allowed opacity-70': isDisabled,\n    }\n  );\n};\n\n/**\n * Default Check icon component\n */\nconst CheckIcon = ({ size = 18, fill = '#016DCF' }: { size?: number; fill?: string }) => (\n  <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\n    <path\n      d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z\"\n      fill={fill}\n    />\n  </svg>\n);\n\n/**\n * Default Close icon component\n */\nconst CloseIcon = ({ size = 18, fill = '#101828' }: { size?: number; fill?: string }) => (\n  <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\n    <path\n      d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"\n      fill={fill}\n    />\n  </svg>\n);\n\n/**\n * A highly customizable toggle component with label, validation, and styling support.\n * Features multiple sizes, variants, icon support, GTN integration, and comprehensive prop support.\n *\n * @example\n * ```tsx\n * <Toggle\n *   id=\"notifications\"\n *   label=\"Enable Notifications\"\n *   isChecked={notificationsEnabled}\n *   onChange={(checked) => setNotificationsEnabled(checked)}\n *   required\n * />\n * ```\n */\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n  (\n    {\n      isGTN = false,\n      isChecked,\n      id,\n      onChange,\n      label,\n      required,\n      isRequiredConditional = false,\n      hideStatus = false,\n      labelDirection = TOGGLE_LABEL_DIRECTION.TOP,\n      statusText,\n      withIcon = false,\n      tags,\n      isAiExtracted = false,\n      confidenceScore,\n      confidenceType = \"high\",\n      confidenceTooltip,\n      sourceMeta = [],\n      onConfidenceScoreClick,\n      tooltip = '',\n      className = '',\n      disabled,\n      isDisabled = false,\n      icon,\n      stopClickPropagation = true,\n      gtnName: _gtnName,\n      variant: _variant = 'primary',\n      labelClassName,\n      isLiveField = false,\n      message,\n      messageType = \"default\",\n      wrapperClassName,\n      helpText,\n      labelExtra,\n      size = \"medium\",\n      renderGTNAddButton,\n      onAddGTNToDocument,\n      inputEmphasis = \"default\",\n    },\n    ref\n  ) => {\n    const { t } = useTranslation();\n    const emphasisModifiedSkin = inputEmphasis === \"modified\";\n    const emphasisDeletedSkin = inputEmphasis === \"deleted\";\n    const emphasisSuccessSkin = inputEmphasis === \"success\";\n    const resolvedDisabled = disabled ?? isDisabled;\n    const isDisabledBool = !!resolvedDisabled;\n    const disabledTooltip = typeof resolvedDisabled === 'string' ? resolvedDisabled : undefined;\n    const isLabelDirectionTop = labelDirection === TOGGLE_LABEL_DIRECTION.TOP;\n    const isLabelDirectionLeft = labelDirection === TOGGLE_LABEL_DIRECTION.LEFT;\n    const isLabelDirectionRight = labelDirection === TOGGLE_LABEL_DIRECTION.RIGHT;\n    const [isHovered, setIsHovered] = useState(false);\n\n    const handleAddGTNToDocument = () => {\n      if (onAddGTNToDocument) {\n        const keyValuePair = {\n          key: _gtnName,\n          value: isChecked ? 'Yes' : 'No',\n        };\n        onAddGTNToDocument(keyValuePair);\n      }\n    };\n\n    const getMessageTypographyClass = (): string => {\n      if (messageType === \"error\") return \"text-red-500 dark:text-red-400\";\n      if (messageType === \"success\")\n        return \"text-green-500 dark:text-green-400\";\n      if (messageType === \"info\") return \"text-primary-500 dark:text-primary-400\";\n      return \"text-neutral-500 dark:text-neutral-400\";\n    };\n\n    const _defaultRenderLabels = (labels?: (string | LabelType)[]) => {\n      if (!labels || labels.length === 0) return null;\n      return (\n        <span className=\"inline-flex gap-1 ml-1\">\n          {labels.map((tag, index) => {\n            const label = typeof tag === 'string' ? tag : tag.label;\n            const color = typeof tag === 'string' ? undefined : tag.color;\n            return (\n              <span\n                key={index}\n                className=\"px-1.5 py-0.5 text-xs rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300\"\n                style={color ? { backgroundColor: color } : undefined}\n              >\n                {label}\n              </span>\n            );\n          })}\n        </span>\n      );\n    };\n\n    return (\n      <div\n        className={cn(\n          'flex gap-0.5',\n          isHovered && isGTN ? 'border rounded-lg border-primary-100 bg-primary-50 p-1' : '',\n          wrapperClassName\n        )}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        onClick={(e) => {\n          if (stopClickPropagation) e.stopPropagation();\n        }}\n      >\n        {isGTN && !isHovered ? (\n          <div className=\"w-1 h-1 bg-primary-600 rounded-full animate-pulse mt-1.5\" />\n        ) : null}\n        <div className={cn(\n          \"w-full flex flex-col\",\n          emphasisModifiedSkin && \"rounded-lg border border-solid border-[var(--Warning-200,#FEDF89)] bg-[var(--Warning-50,#FFFAEB)] px-2 py-1.5\",\n          emphasisDeletedSkin && \"rounded-lg border border-solid border-[var(--Error-200,#FECACA)] bg-[var(--Error-50,#FEF2F2)] px-2 py-1.5\",\n          emphasisSuccessSkin && \"rounded-lg border border-solid border-[var(--Success-200,#BBF7D0)] bg-[var(--Success-50,#F0FDF4)] px-2 py-1.5\",\n        )}>\n          {isLabelDirectionTop && label && (\n            <div className=\"grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-1\">\n              <h1\n                className={cn(\n                  'mb-1 min-w-0 font-inter text-neutral-600 font-medium text-xs flex items-center gap-0.5 flex-wrap',\n                  labelClassName\n                )}\n              >\n                <InputLabel label={label || \"\"} required={required || false} isRequiredConditional={isRequiredConditional || false} />\n                {isLiveField && <BoltOutlined sx={{ fontSize: 16, color: 'var(--color-primary-600)', rotate: '15deg' }} />}\n                {isAiExtracted && !shouldShowConfidenceScore(confidenceScore) && <AIExtractedIndicator />}\n                <Label labels={tags || []} />\n                {tooltip && (\n                  <Tooltip placement='top' title={tooltip}>\n                    <div className='cursor-pointer'>\n                      <HelpIcon />\n                    </div>\n                  </Tooltip>\n                )}\n                {labelExtra}\n              </h1>\n              <div className=\"flex items-center gap-1 justify-self-end\">\n                {(shouldShowConfidenceScore(confidenceScore) && confidenceType) ? (\n                  <Tooltip\n                    placement='top-end'\n                    title={confidenceTooltip ?? ''}\n                    hideTooltip={confidenceTooltip === undefined || confidenceTooltip === null}\n                    className='cursor-pointer'\n                  >\n                    <div\n                      className={cn(\n                        'inline-flex min-w-[50px] items-center gap-1 rounded-md px-1 py-0.5',\n                        getConfidenceScoreBadgeClass(confidenceType)\n                      )}\n                      onClick={() => onConfidenceScoreClick?.(sourceMeta)}\n                    >\n                      <AIStarIcon\n                        size={12}\n                        fill={getConfidenceScoreBadgeColor(confidenceType)}\n                        fillSecondary={getConfidenceScoreBadgeFill(confidenceType)}\n                      />\n                      <span className={cn('text-xs font-medium leading-4', getConfidenceScoreBadgeTextColor(confidenceType))}>\n                        {confidenceScore}%\n                      </span>\n                    </div>\n                  </Tooltip>\n                ) : null}\n                {isGTN && isHovered ? (\n                  renderGTNAddButton ? (\n                    renderGTNAddButton(handleAddGTNToDocument)\n                  ) : (\n                    <button\n                      id=\"btn-toggle-add-to-document\"\n                      className=\"cursor-pointer\"\n                      onClick={handleAddGTNToDocument}\n                      type=\"button\"\n                    >\n                      <AntTooltip placement=\"top\" title={t(\"Add to document\")}>\n                        <NoteAddOutlined className=\"text-primary-600\" sx={{ fontSize: 16 }} />\n                      </AntTooltip>\n                    </button>\n                  )\n                ) : null}\n              </div>\n            </div>\n          )}\n\n          {/* Help text */}\n          {helpText && (\n            <Typography\n              className=\"mb-2 text-neutral-600 dark:text-neutral-400\"\n              appearance=\"custom\"\n              size=\"extra-small\"\n              variant=\"regular\"\n            >\n              {helpText}\n            </Typography>\n          )}\n\n          <div className=\"flex\">\n            {isLabelDirectionLeft && (\n              <Typography\n                size=\"small\"\n                variant=\"medium\"\n                className={cn('mr-2 text-neutral-700 dark:text-black-200', labelClassName)}\n                appearance=\"custom\"\n              >\n                {label}\n              </Typography>\n            )}\n\n            <label\n              className={cn(\n                'relative inline-flex items-center',\n                isLabelDirectionRight || statusText ? '' : 'w-min',\n                !isDisabledBool ? 'cursor-pointer' : 'cursor-not-allowed opacity-50'\n              )}\n              onClick={(e) => e.stopPropagation()}\n            >\n              <input\n                ref={ref}\n                type=\"checkbox\"\n                id={id}\n                onChange={(e) => !isDisabledBool && onChange(e.target.checked)}\n                value=\"\"\n                disabled={isDisabledBool}\n                checked={isChecked}\n                className={cn('sr-only peer w-full', className)}\n                aria-required={required}\n                aria-invalid={\n                  message && messageType === \"error\" ? \"true\" : \"false\"\n                }\n                aria-describedby={\n                  message || helpText ? `${id}-description` : undefined\n                }\n              />\n              <div className={getToggleClassNames(isChecked, withIcon, isDisabledBool, size)}>\n                {withIcon ? (\n                  <div className=\"flex items-center justify-center h-full w-full\">\n                    <div\n                      className={cn(\n                        \"z-10 transition-all transform\",\n                        size === \"small\" &&\n                        (isChecked\n                          ? \"translate-x-2\"\n                          : \"translate-x-[-6px]\"),\n                        size === \"medium\" &&\n                        (isChecked\n                          ? \"translate-x-[8.5px]\"\n                          : \"translate-x-[-8px]\"),\n                        size === \"large\" &&\n                        (isChecked\n                          ? \"translate-x-2.5\"\n                          : \"translate-x-[-10px]\")\n                      )}\n                    >\n                      {isChecked ? (\n                        icon?.checkedIcon ? (\n                          icon.checkedIcon\n                        ) : (\n                          <CheckIcon size={18} fill=\"#016DCF\" />\n                        )\n                      ) : icon?.uncheckedIcon ? (\n                        icon.uncheckedIcon\n                      ) : (\n                        <CloseIcon size={18} fill=\"#101828\" />\n                      )}\n                    </div>\n                  </div>\n                ) : null}\n              </div>\n              {disabledTooltip && (\n                <Tooltip placement=\"top\" title={disabledTooltip} className=\"-ml-2\">\n                  <span className={cn(\n                    'absolute inset-y-0 left-0',\n                    size === 'small' && 'w-7',\n                    size === 'medium' && 'w-9',\n                    size === 'large' && 'w-11',\n                  )} />\n                </Tooltip>\n              )}\n\n              {isLabelDirectionRight && (\n                <Typography\n                  size=\"small\"\n                  variant=\"medium\"\n                  className={cn('ml-2 text-neutral-700 dark:text-black-300', labelClassName)}\n                  appearance=\"custom\"\n                >\n                  {label}\n                </Typography>\n              )}\n\n              {hideStatus ? null : (\n                <Typography\n                  size=\"small\"\n                  variant=\"medium\"\n                  className=\"ml-2 text-neutral-900 dark:text-black-100\"\n                  appearance=\"custom\"\n                >\n                  {statusText ? statusText : isChecked ? 'Yes' : 'No'}\n                </Typography>\n              )}\n            </label>\n          </div>\n\n          {/* Message */}\n          <AnimatePresence>\n            {message && (\n              <motion.div\n                initial={{ opacity: 0, y: -10 }}\n                animate={{ opacity: 1, y: 0 }}\n                exit={{ opacity: 0, y: -10 }}\n                transition={{ duration: 0.2 }}\n                id={`${id}-description`}\n                role={messageType === \"error\" ? \"alert\" : undefined}\n              >\n                <Typography\n                  className={cn(\"mt-1\", getMessageTypographyClass())}\n                  appearance=\"custom\"\n                  size=\"extra-small\"\n                  variant=\"medium\"\n                >\n                  {message}\n                </Typography>\n              </motion.div>\n            )}\n          </AnimatePresence>\n\n          {/* Help text description for accessibility */}\n          {helpText && !message && (\n            <div id={`${id}-description`} className=\"sr-only\">\n              {helpText}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nToggle.displayName = \"Toggle\";\n"],"names":["getToggleClassNames","isChecked","withIcon","isDisabled","size","sizeClasses","translateClasses","cn","CheckIcon","fill","jsx","CloseIcon","Toggle","forwardRef","isGTN","id","onChange","label","required","isRequiredConditional","hideStatus","labelDirection","TOGGLE_LABEL_DIRECTION","statusText","tags","isAiExtracted","confidenceScore","confidenceType","confidenceTooltip","sourceMeta","onConfidenceScoreClick","tooltip","className","disabled","icon","stopClickPropagation","_gtnName","_variant","labelClassName","isLiveField","message","messageType","wrapperClassName","helpText","labelExtra","renderGTNAddButton","onAddGTNToDocument","inputEmphasis","ref","t","useTranslation","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","resolvedDisabled","isDisabledBool","disabledTooltip","isLabelDirectionTop","isLabelDirectionLeft","isLabelDirectionRight","isHovered","setIsHovered","useState","handleAddGTNToDocument","getMessageTypographyClass","jsxs","e","InputLabel","BoltOutlined","shouldShowConfidenceScore","AIExtractedIndicator","Label","Tooltip","HelpIcon","getConfidenceScoreBadgeClass","AIStarIcon","getConfidenceScoreBadgeColor","getConfidenceScoreBadgeFill","getConfidenceScoreBadgeTextColor","AntTooltip","NoteAddOutlined","Typography","AnimatePresence","motion"],"mappings":"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"}
+{"version":3,"file":"Toggle.es.js","sources":["../../../../src/components/forms/toggle/Toggle.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, type ReactNode, useState } from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { Tooltip as AntTooltip } from \"antd\";\nimport { useTranslation } from 'react-i18next';\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { TOGGLE_LABEL_DIRECTION } from \"../../../constants/toggle\";\nimport type { TToggleDirection } from \"../../../constants/toggle\";\nimport { BoltOutlined, NoteAddOutlined } from \"@mui/icons-material\";\nimport { AIExtractedIndicator } from \"../../icons/AIExtractedIndicator\";\nimport { AIStarIcon } from \"../../icons/AIStarIcon\";\nimport { Label, type LabelType } from \"../../data-display/label/Label\";\nimport Tooltip from \"../../tooltip/Tooltip\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport {\n  getConfidenceScoreBadgeClass,\n  getConfidenceScoreBadgeColor,\n  getConfidenceScoreBadgeFill,\n  getConfidenceScoreBadgeTextColor,\n  shouldShowConfidenceScore,\n} from \"../../../utils/confidenceScoreUtils\";\n\n// Re-export LabelType from Label component for external use\nexport type { LabelType };\n\n/** Visual emphasis for the toggle container (background + border) */\nexport type ToggleEmphasis = \"default\" | \"modified\" | \"deleted\" | \"success\";\n\n/**\n * Confidence score type\n */\nexport type ConfidenceScoreType = \"low\" | \"medium\" | \"high\";\n\nexport type SourceMetaBBox = {\n  b: number;\n  l: number;\n  r: number;\n  t: number;\n};\n\nexport type SourceMetaItem = {\n  bbox: SourceMetaBBox;\n  confidence_score?: number;\n  is_primary?: boolean;\n  match_score?: number;\n  match_type?: string;\n  page_height: number;\n  page_width: number;\n  source_page: number;\n  source_text?: string;\n};\n\n/**\n * Props for the Toggle component\n */\nexport interface ToggleProps {\n  /** Whether this is a GTN (Global Term Name) field */\n  isGTN?: boolean;\n  /** Unique identifier for the toggle */\n  id?: string;\n  /** Whether the toggle is checked */\n  isChecked: boolean;\n  /** Callback function called when toggle state changes */\n  onChange: (val: boolean) => void;\n  /** Label text or element to display */\n  label?: ReactNode;\n  /** Whether to preserve original case in the label */\n  originalCase?: boolean;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Whether the required indicator shows as conditional (yellow instead of red) */\n  isRequiredConditional?: boolean;\n  /** Tags/labels to display next to the label */\n  tags?: (string | LabelType)[];\n  /** Whether to hide the status text (Yes/No) */\n  hideStatus?: boolean;\n  /** Label direction relative to toggle */\n  labelDirection?: TToggleDirection;\n  /** Custom status text instead of Yes/No */\n  statusText?: string;\n  /** Whether to show icons in the toggle */\n  withIcon?: boolean;\n  /** Whether the value was AI extracted */\n  isAiExtracted?: boolean;\n  /** Confidence percentage shown as a badge */\n  confidenceScore?: number;\n  /** Confidence classification for badge styling */\n  confidenceType?: ConfidenceScoreType;\n  /** Optional tooltip content for confidence badge */\n  confidenceTooltip?: ReactNode;\n  /** Source meta for confidence score */\n  sourceMeta?: SourceMetaItem[];\n  /** Handler fired when confidence score badge is clicked */\n  onConfidenceScoreClick?: (sourceMeta: SourceMetaItem[]) => void;\n  /** Tooltip text to display */\n  tooltip?: string;\n  /** Additional CSS classes for the toggle input */\n  className?: string;\n  /** Whether the toggle is disabled. Pass a string to disable with a tooltip message. */\n  disabled?: boolean | string;\n  /**\n   * @deprecated Use `disabled` instead.\n   */\n  isDisabled?: boolean | string;\n  /** Custom icons for checked/unchecked states */\n  icon?: {\n    checkedIcon: ReactNode;\n    uncheckedIcon: ReactNode;\n  };\n  /** Whether to stop click propagation */\n  stopClickPropagation?: boolean;\n  /** GTN field name for document integration */\n  gtnName?: any;\n  /** Visual variant for the toggle */\n  variant?: 'primary' | 'secondary';\n  /** Additional CSS classes for the label */\n  labelClassName?: string;\n  /** Whether this is a live field */\n  isLiveField?: boolean;\n  /** Message to display below the toggle */\n  message?: string;\n  /** Type of message to display */\n  messageType?: \"success\" | \"error\" | \"info\" | \"default\";\n  /** Additional CSS classes for the wrapper container */\n  wrapperClassName?: string;\n  /** Help text to display below the label */\n  helpText?: string;\n  /** Optional extra content in the label row (e.g. actions, badges) */\n  labelExtra?: React.ReactNode;\n  /** Size variant for the toggle */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Custom render function for GTN add to document button */\n  renderGTNAddButton?: (onClick: () => void) => ReactNode;\n  /** Handler for adding GTN to document */\n  onAddGTNToDocument?: (keyValuePair: { key: string; value: string }) => void;\n  /** Container surface style: `'modified'` — Warning-50/Warning-200; `'deleted'` — Error-50/Error-200; `'success'` — Success-50/Success-200 */\n  inputEmphasis?: ToggleEmphasis;\n}\n\n/**\n * Get toggle class names based on state and options\n */\nconst getToggleClassNames = (\n  isChecked: boolean,\n  withIcon: boolean,\n  isDisabled: boolean,\n  size: \"small\" | \"medium\" | \"large\" = \"medium\"\n): string => {\n  const sizeClasses = {\n    small: \"w-7 h-4 after:h-3 after:w-3 after:top-0.5 after:left-0.5\",\n    medium: \"w-9 h-5 after:h-4 after:w-4 after:top-0.5 after:left-0.5\",\n    large: \"w-11 h-6 after:h-5 after:w-5 after:top-0.5 after:left-0.5\",\n  };\n\n  const translateClasses = {\n    small: \"peer-checked:after:translate-x-3\",\n    medium: \"peer-checked:after:translate-x-full\",\n    large: \"peer-checked:after:translate-x-5\",\n  };\n\n  return cn(\n    \"p-0.5 rounded-full peer after:content-[''] after:absolute after:rounded-full after:transition-all bg-gray-200 dark:bg-black-400 peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-white dark:peer-focus-visible:ring-primary-400 dark:peer-focus-visible:ring-offset-black-900 peer-focus-visible:shadow-[0_0_0_3px_var(--color-primary-100)] dark:peer-focus-visible:shadow-[0_0_0_3px_var(--color-primary-950)]\",\n    sizeClasses[size],\n    translateClasses[size],\n    {\n      'peer-checked:bg-primary-600 dark:peer-checked:bg-primary-700 peer-checked:after:translate-x-full after:bg-white dark:after:bg-primary-500':\n        isChecked,\n      'after:bg-white dark:after:bg-black-500': !isChecked,\n      'text-white dark:text-black-900': withIcon,\n      'cursor-not-allowed opacity-70': isDisabled,\n    }\n  );\n};\n\n/**\n * Default Check icon component\n */\nconst CheckIcon = ({ size = 18, fill = '#016DCF' }: { size?: number; fill?: string }) => (\n  <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\n    <path\n      d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z\"\n      fill={fill}\n    />\n  </svg>\n);\n\n/**\n * Default Close icon component\n */\nconst CloseIcon = ({ size = 18, fill = '#101828' }: { size?: number; fill?: string }) => (\n  <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\n    <path\n      d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"\n      fill={fill}\n    />\n  </svg>\n);\n\n/**\n * A highly customizable toggle component with label, validation, and styling support.\n * Features multiple sizes, variants, icon support, GTN integration, and comprehensive prop support.\n *\n * @example\n * ```tsx\n * <Toggle\n *   id=\"notifications\"\n *   label=\"Enable Notifications\"\n *   isChecked={notificationsEnabled}\n *   onChange={(checked) => setNotificationsEnabled(checked)}\n *   required\n * />\n * ```\n */\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n  (\n    {\n      isGTN = false,\n      isChecked,\n      id,\n      onChange,\n      label,\n      required,\n      isRequiredConditional = false,\n      hideStatus = false,\n      labelDirection = TOGGLE_LABEL_DIRECTION.TOP,\n      statusText,\n      withIcon = false,\n      tags,\n      isAiExtracted = false,\n      confidenceScore,\n      confidenceType = \"high\",\n      confidenceTooltip,\n      sourceMeta = [],\n      onConfidenceScoreClick,\n      tooltip = '',\n      className = '',\n      disabled,\n      isDisabled = false,\n      icon,\n      stopClickPropagation = true,\n      gtnName: _gtnName,\n      variant: _variant = 'primary',\n      labelClassName,\n      isLiveField = false,\n      message,\n      messageType = \"default\",\n      wrapperClassName,\n      helpText,\n      labelExtra,\n      size = \"medium\",\n      renderGTNAddButton,\n      onAddGTNToDocument,\n      inputEmphasis = \"default\",\n    },\n    ref\n  ) => {\n    const { t } = useTranslation();\n    const emphasisModifiedSkin = inputEmphasis === \"modified\";\n    const emphasisDeletedSkin = inputEmphasis === \"deleted\";\n    const emphasisSuccessSkin = inputEmphasis === \"success\";\n    const resolvedDisabled = disabled ?? isDisabled;\n    const isDisabledBool = !!resolvedDisabled;\n    const disabledTooltip = typeof resolvedDisabled === 'string' ? resolvedDisabled : undefined;\n    const isLabelDirectionTop = labelDirection === TOGGLE_LABEL_DIRECTION.TOP;\n    const isLabelDirectionLeft = labelDirection === TOGGLE_LABEL_DIRECTION.LEFT;\n    const isLabelDirectionRight = labelDirection === TOGGLE_LABEL_DIRECTION.RIGHT;\n    const [isHovered, setIsHovered] = useState(false);\n\n    const handleAddGTNToDocument = () => {\n      if (onAddGTNToDocument) {\n        const keyValuePair = {\n          key: _gtnName,\n          value: isChecked ? 'Yes' : 'No',\n        };\n        onAddGTNToDocument(keyValuePair);\n      }\n    };\n\n    const getMessageTypographyClass = (): string => {\n      if (messageType === \"error\") return \"text-red-500 dark:text-red-400\";\n      if (messageType === \"success\")\n        return \"text-green-500 dark:text-green-400\";\n      if (messageType === \"info\") return \"text-primary-500 dark:text-primary-400\";\n      return \"text-neutral-500 dark:text-neutral-400\";\n    };\n\n    const _defaultRenderLabels = (labels?: (string | LabelType)[]) => {\n      if (!labels || labels.length === 0) return null;\n      return (\n        <span className=\"inline-flex gap-1 ml-1\">\n          {labels.map((tag, index) => {\n            const label = typeof tag === 'string' ? tag : tag.label;\n            const color = typeof tag === 'string' ? undefined : tag.color;\n            return (\n              <span\n                key={index}\n                className=\"px-1.5 py-0.5 text-xs rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300\"\n                style={color ? { backgroundColor: color } : undefined}\n              >\n                {label}\n              </span>\n            );\n          })}\n        </span>\n      );\n    };\n\n    return (\n      <div\n        className={cn(\n          'flex gap-0.5',\n          isHovered && isGTN ? 'border rounded-lg border-primary-100 bg-primary-50 p-1' : '',\n          wrapperClassName\n        )}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        onClick={(e) => {\n          if (stopClickPropagation) e.stopPropagation();\n        }}\n      >\n        {isGTN && !isHovered ? (\n          <div className=\"w-1 h-1 bg-primary-600 rounded-full animate-pulse mt-1.5\" />\n        ) : null}\n        <div className={cn(\n          \"w-full flex flex-col\",\n          emphasisModifiedSkin && \"rounded-lg border border-solid border-[var(--Warning-200,#FEDF89)] bg-[var(--Warning-50,#FFFAEB)] px-2 py-1.5\",\n          emphasisDeletedSkin && \"rounded-lg border border-solid border-[var(--Error-200,#FECACA)] bg-[var(--Error-50,#FEF2F2)] px-2 py-1.5\",\n          emphasisSuccessSkin && \"rounded-lg border border-solid border-[var(--Success-200,#BBF7D0)] bg-[var(--Success-50,#F0FDF4)] px-2 py-1.5\",\n        )}>\n          {isLabelDirectionTop && label && (\n            <div className=\"grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-1\">\n              <h1\n                className={cn(\n                  'mb-1 min-w-0 font-inter text-neutral-600 font-medium text-xs flex items-center gap-0.5 flex-wrap',\n                  labelClassName\n                )}\n              >\n                <InputLabel label={label || \"\"} required={required || false} isRequiredConditional={isRequiredConditional || false} />\n                {isLiveField && <BoltOutlined sx={{ fontSize: 16, color: 'var(--color-primary-600)', rotate: '15deg' }} />}\n                {isAiExtracted && !shouldShowConfidenceScore(confidenceScore) && <AIExtractedIndicator />}\n                <Label labels={tags || []} />\n                {tooltip && (\n                  <Tooltip placement='top' title={tooltip}>\n                    <div className='cursor-pointer'>\n                      <HelpIcon />\n                    </div>\n                  </Tooltip>\n                )}\n                {labelExtra}\n              </h1>\n              <div className=\"flex items-center gap-1 justify-self-end\">\n                {(shouldShowConfidenceScore(confidenceScore) && confidenceType) ? (\n                  <Tooltip\n                    placement='top-end'\n                    title={confidenceTooltip ?? ''}\n                    hideTooltip={confidenceTooltip === undefined || confidenceTooltip === null}\n                    className='cursor-pointer'\n                  >\n                    <div\n                      className={cn(\n                        'inline-flex min-w-[50px] items-center gap-1 rounded-md px-1 py-0.5',\n                        getConfidenceScoreBadgeClass(confidenceType)\n                      )}\n                      onClick={() => onConfidenceScoreClick?.(sourceMeta)}\n                    >\n                      <AIStarIcon\n                        size={12}\n                        fill={getConfidenceScoreBadgeColor(confidenceType)}\n                        fillSecondary={getConfidenceScoreBadgeFill(confidenceType)}\n                      />\n                      <span className={cn('text-xs font-medium leading-4', getConfidenceScoreBadgeTextColor(confidenceType))}>\n                        {confidenceScore}%\n                      </span>\n                    </div>\n                  </Tooltip>\n                ) : null}\n                {isGTN && isHovered ? (\n                  renderGTNAddButton ? (\n                    renderGTNAddButton(handleAddGTNToDocument)\n                  ) : (\n                    <button\n                      id=\"btn-toggle-add-to-document\"\n                      className=\"cursor-pointer\"\n                      onClick={handleAddGTNToDocument}\n                      type=\"button\"\n                    >\n                      <AntTooltip placement=\"top\" title={t(\"Add to document\")}>\n                        <NoteAddOutlined className=\"text-primary-600\" sx={{ fontSize: 16 }} />\n                      </AntTooltip>\n                    </button>\n                  )\n                ) : null}\n              </div>\n            </div>\n          )}\n\n          {/* Help text */}\n          {helpText && (\n            <Typography\n              className=\"mb-2 text-neutral-600 dark:text-neutral-400\"\n              appearance=\"custom\"\n              size=\"extra-small\"\n              variant=\"regular\"\n            >\n              {helpText}\n            </Typography>\n          )}\n\n          <div className=\"flex\">\n            {isLabelDirectionLeft && (\n              <Typography\n                size=\"small\"\n                variant=\"medium\"\n                className={cn('mr-2 text-neutral-700 dark:text-black-200', labelClassName)}\n                appearance=\"custom\"\n              >\n                {label}\n              </Typography>\n            )}\n\n            <label\n              className={cn(\n                'relative inline-flex items-center',\n                isLabelDirectionRight || statusText ? '' : 'w-min',\n                !isDisabledBool ? 'cursor-pointer' : 'cursor-not-allowed opacity-50'\n              )}\n              onClick={(e) => e.stopPropagation()}\n            >\n              <input\n                ref={ref}\n                type=\"checkbox\"\n                id={id}\n                onChange={(e) => !isDisabledBool && onChange(e.target.checked)}\n                value=\"\"\n                disabled={isDisabledBool}\n                checked={isChecked}\n                className={cn('sr-only peer w-full', className)}\n                aria-required={required}\n                aria-invalid={\n                  message && messageType === \"error\" ? \"true\" : \"false\"\n                }\n                aria-describedby={\n                  message || helpText ? `${id}-description` : undefined\n                }\n              />\n              <div className={getToggleClassNames(isChecked, withIcon, isDisabledBool, size)}>\n                {withIcon ? (\n                  <div className=\"flex items-center justify-center h-full w-full\">\n                    <div\n                      className={cn(\n                        \"z-10 transition-all transform\",\n                        size === \"small\" &&\n                        (isChecked\n                          ? \"translate-x-2\"\n                          : \"-translate-x-1.5\"),\n                        size === \"medium\" &&\n                        (isChecked\n                          ? \"translate-x-2\"\n                          : \"-translate-x-2\"),\n                        size === \"large\" &&\n                        (isChecked\n                          ? \"translate-x-2.5\"\n                          : \"-translate-x-2.5\")\n                      )}\n                    >\n                      {isChecked ? (\n                        icon?.checkedIcon ? (\n                          icon.checkedIcon\n                        ) : (\n                          <CheckIcon size={18} fill=\"#016DCF\" />\n                        )\n                      ) : icon?.uncheckedIcon ? (\n                        icon.uncheckedIcon\n                      ) : (\n                        <CloseIcon size={18} fill=\"#101828\" />\n                      )}\n                    </div>\n                  </div>\n                ) : null}\n              </div>\n              {disabledTooltip && (\n                <Tooltip placement=\"top\" title={disabledTooltip} className=\"-ml-2\">\n                  <span className={cn(\n                    'absolute inset-y-0 left-0',\n                    size === 'small' && 'w-7',\n                    size === 'medium' && 'w-9',\n                    size === 'large' && 'w-11',\n                  )} />\n                </Tooltip>\n              )}\n\n              {isLabelDirectionRight && (\n                <Typography\n                  size=\"small\"\n                  variant=\"medium\"\n                  className={cn('ml-2 text-neutral-700 dark:text-black-300', labelClassName)}\n                  appearance=\"custom\"\n                >\n                  {label}\n                </Typography>\n              )}\n\n              {hideStatus ? null : (\n                <Typography\n                  size=\"small\"\n                  variant=\"medium\"\n                  className=\"ml-2 text-neutral-900 dark:text-black-100\"\n                  appearance=\"custom\"\n                >\n                  {statusText ? statusText : isChecked ? 'Yes' : 'No'}\n                </Typography>\n              )}\n            </label>\n          </div>\n\n          {/* Message */}\n          <AnimatePresence>\n            {message && (\n              <motion.div\n                initial={{ opacity: 0, y: -10 }}\n                animate={{ opacity: 1, y: 0 }}\n                exit={{ opacity: 0, y: -10 }}\n                transition={{ duration: 0.2 }}\n                id={`${id}-description`}\n                role={messageType === \"error\" ? \"alert\" : undefined}\n              >\n                <Typography\n                  className={cn(\"mt-1\", getMessageTypographyClass())}\n                  appearance=\"custom\"\n                  size=\"extra-small\"\n                  variant=\"medium\"\n                >\n                  {message}\n                </Typography>\n              </motion.div>\n            )}\n          </AnimatePresence>\n\n          {/* Help text description for accessibility */}\n          {helpText && !message && (\n            <div id={`${id}-description`} className=\"sr-only\">\n              {helpText}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nToggle.displayName = \"Toggle\";\n"],"names":["getToggleClassNames","isChecked","withIcon","isDisabled","size","sizeClasses","translateClasses","cn","CheckIcon","fill","jsx","CloseIcon","Toggle","forwardRef","isGTN","id","onChange","label","required","isRequiredConditional","hideStatus","labelDirection","TOGGLE_LABEL_DIRECTION","statusText","tags","isAiExtracted","confidenceScore","confidenceType","confidenceTooltip","sourceMeta","onConfidenceScoreClick","tooltip","className","disabled","icon","stopClickPropagation","_gtnName","_variant","labelClassName","isLiveField","message","messageType","wrapperClassName","helpText","labelExtra","renderGTNAddButton","onAddGTNToDocument","inputEmphasis","ref","t","useTranslation","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","resolvedDisabled","isDisabledBool","disabledTooltip","isLabelDirectionTop","isLabelDirectionLeft","isLabelDirectionRight","isHovered","setIsHovered","useState","handleAddGTNToDocument","getMessageTypographyClass","jsxs","e","InputLabel","BoltOutlined","shouldShowConfidenceScore","AIExtractedIndicator","Label","Tooltip","HelpIcon","getConfidenceScoreBadgeClass","AIStarIcon","getConfidenceScoreBadgeColor","getConfidenceScoreBadgeFill","getConfidenceScoreBadgeTextColor","AntTooltip","NoteAddOutlined","Typography","AnimatePresence","motion"],"mappings":"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"}

package/dist/components/navigation/accordion/Accordion.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),A=require("@mui/icons-material"),s=require("../../../_virtual/index.cjs.js"),T=require("framer-motion");require("react");const h=require("../../data-display/typography/Typography.cjs.js"),E=require("../../button/IconButton.cjs.js"),M=require("../../button/Radio.cjs.js"),j=require("../../icon/icons.generated.cjs.js"),p=({children:n,title:f,toggle:N,isOpen:t,hoveringIndex:v,index:y,viewOnly:i,onTitleClick:l,isChecked:b,onSelect:o,subTitle:g,noSpace:c,isDraggable:d,sortableConfig:a,headerClass:q,icon:k,additionalHeader:w,mainClass:z,id:I,childrenClass:$,withAnimation:u=!1,...m})=>{const x=s(!c&&"p-4",$);return e.jsxs("div",{id:I,className:`${!c&&"mb-4"}  ${t?"pb-1":""} ${z||""}`,style:a?.style,...m,children:[e.jsxs("div",{className:s("flex items-center justify-between cursor-pointer border border-neutral-200 dark:border-none bg-neutral-100 dark:bg-black-600 px-3 py-1 rounded-lg",q),onClick:N,...m,children:[e.jsxs("div",{onClick:r=>l?l(r):null,className:`${d&&"flex"} w-full`,children:[d&&!i&&e.jsx("button",{id:"btn-accordion-outline-drag-indicator",className:"flex items-center justify-center w-icon h-icon hover:transform hover:scale-125 transition-all duration-200 ease-in-out",...a?.attributes,...a?.listeners,children:e.jsx(j.DragIndicatorIcon,{size:16,className:"text-neutral-400 dark:text-neutral-400"})}),e.jsxs("div",{className:"flex items-center gap-1 w-full",children:[o&&e.jsx(M,{isChecked:b,onSelect:r=>{r.stopPropagation(),o()},className:"h-4 w-4 accent-[#366FE3]"}),e.jsxs("div",{className:"flex gap-2 items-center",children:[k,e.jsx(h.Typography,{size:"small",appearance:"body",variant:"medium",className:"whitespace-nowrap",children:f})]}),e.jsx(h.Typography,{size:"extra-small",appearance:"title",variant:"medium",className:"ml-1",children:g}),w,e.jsx("span",{children:v===y&&!i&&e.jsx(E,{variant:"ghost",children:e.jsx(j.EditIcon,{size:16,className:"ml-[8px] text-neutral-400 dark:text-neutral-400"})})})]})]}),e.jsx(A.ChevronLeft,{sx:{fontSize:18},className:s("text-neutral-600 dark:text-neutral-400",t?"rotate-90":"-rotate-90",u&&"transition-transform duration-300 ease-in-out")})]}),u?e.jsx(T.motion.div,{initial:!1,animate:{height:t?"auto":0},transition:{duration:.3,ease:[.4,0,.2,1]},style:{overflow:"hidden"},children:e.jsx("div",{className:x,children:n})}):t?e.jsx("div",{className:x,children:n}):null]})};p.displayName="Accordion";exports.Accordion=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),A=require("@mui/icons-material"),s=require("../../../_virtual/index.cjs.js"),T=require("framer-motion");require("react");const h=require("../../data-display/typography/Typography.cjs.js"),E=require("../../button/IconButton.cjs.js"),M=require("../../button/Radio.cjs.js"),j=require("../../icon/icons.generated.cjs.js"),p=({children:n,title:f,toggle:N,isOpen:t,hoveringIndex:v,index:y,viewOnly:i,onTitleClick:l,isChecked:b,onSelect:o,subTitle:g,noSpace:c,isDraggable:d,sortableConfig:a,headerClass:q,icon:k,additionalHeader:w,mainClass:I,id:z,childrenClass:$,withAnimation:u=!1,...m})=>{const x=s(!c&&"p-4",$);return e.jsxs("div",{id:z,className:`${!c&&"mb-4"}  ${t?"pb-1":""} ${I||""}`,style:a?.style,...m,children:[e.jsxs("div",{className:s("flex items-center justify-between cursor-pointer border border-neutral-200 dark:border-none bg-neutral-100 dark:bg-black-600 px-3 py-1 rounded-lg",q),onClick:N,...m,children:[e.jsxs("div",{onClick:r=>l?l(r):null,className:`${d&&"flex"} w-full`,children:[d&&!i&&e.jsx("button",{id:"btn-accordion-outline-drag-indicator",className:"flex items-center justify-center w-icon h-icon hover:transform hover:scale-125 transition-all duration-200 ease-in-out",...a?.attributes,...a?.listeners,children:e.jsx(j.DragIndicatorIcon,{size:16,className:"text-neutral-400 dark:text-neutral-400"})}),e.jsxs("div",{className:"flex items-center gap-1 w-full",children:[o&&e.jsx(M,{isChecked:b,onSelect:r=>{r.stopPropagation(),o()},className:"h-4 w-4 accent-[#366FE3]"}),e.jsxs("div",{className:"flex gap-2 items-center",children:[k,e.jsx(h.Typography,{size:"small",appearance:"body",variant:"medium",className:"whitespace-nowrap",children:f})]}),e.jsx(h.Typography,{size:"extra-small",appearance:"title",variant:"medium",className:"ml-1",children:g}),w,e.jsx("span",{children:v===y&&!i&&e.jsx(E,{variant:"ghost",children:e.jsx(j.EditIcon,{className:"ml-2 h-4 w-4 text-neutral-400 dark:text-neutral-400"})})})]})]}),e.jsx(A.ChevronLeft,{sx:{fontSize:18},className:s("text-neutral-600 dark:text-neutral-400",t?"rotate-90":"-rotate-90",u&&"transition-transform duration-300 ease-in-out")})]}),u?e.jsx(T.motion.div,{initial:!1,animate:{height:t?"auto":0},transition:{duration:.3,ease:[.4,0,.2,1]},style:{overflow:"hidden"},children:e.jsx("div",{className:x,children:n})}):t?e.jsx("div",{className:x,children:n}):null]})};p.displayName="Accordion";exports.Accordion=p;
 //# sourceMappingURL=Accordion.cjs.js.map

package/dist/components/navigation/accordion/Accordion.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.cjs.js","sources":["../../../../src/components/navigation/accordion/Accordion.tsx"],"sourcesContent":["import { ChevronLeft } from '@mui/icons-material';\nimport cn from 'classnames';\nimport { motion } from 'framer-motion';\nimport { type FC, type HTMLAttributes } from 'react';\n\nimport { Typography } from '../../data-display/typography/Typography';\nimport IconButton from '../../button/IconButton';\nimport Radio from '../../button/Radio';\nimport { DragIndicatorIcon, EditIcon } from '../../icon';\n\nexport type AccordionProps = HTMLAttributes<HTMLDivElement> & {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  title: any;\n  toggle: () => void;\n  isOpen: boolean;\n  hoveringIndex?: number | null;\n  index?: number;\n  viewOnly?: boolean;\n  onTitleClick?: (e: React.MouseEvent) => void;\n  onSelect?: () => void;\n  isChecked?: boolean;\n  subTitle?: string;\n  noSpace?: boolean;\n  isDraggable?: boolean;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  sortableConfig?: Record<string, any>;\n  headerClass?: string;\n  icon?: JSX.Element;\n  additionalHeader?: JSX.Element;\n  id: string;\n  isEditMode?: boolean;\n  mainClass?: string;\n  childrenClass?: string;\n  /** When true, expands and collapses the panel with a smooth height animation. Default false. */\n  withAnimation?: boolean;\n};\n\n/**\n * Accordion component for collapsible content sections\n *\n * @example\n * ```tsx\n * <Accordion\n *   id=\"my-accordion\"\n *   title=\"Section Title\"\n *   isOpen={isOpen}\n *   toggle={() => setIsOpen(!isOpen)}\n * >\n *   <div>Accordion content</div>\n * </Accordion>\n * ```\n */\nexport const Accordion: FC<AccordionProps> = ({\n  children,\n  title,\n  toggle,\n  isOpen,\n  hoveringIndex,\n  index,\n  viewOnly,\n  onTitleClick,\n  isChecked,\n  onSelect,\n  subTitle,\n  noSpace,\n  isDraggable,\n  sortableConfig,\n  headerClass,\n  icon,\n  additionalHeader,\n  mainClass,\n  id,\n  childrenClass,\n  withAnimation = false,\n  ...props\n}) => {\n  const contentClassName = cn(!noSpace && 'p-4', childrenClass);\n\n  return (\n    <div id={id} className={`${!noSpace && 'mb-4'}  ${isOpen ? 'pb-1' : ''} ${mainClass || ''}`} style={sortableConfig?.style} {...props}>\n      <div\n        className={cn(\n          'flex items-center justify-between cursor-pointer border border-neutral-200 dark:border-none bg-neutral-100 dark:bg-black-600 px-3 py-1 rounded-lg',\n          headerClass,\n        )}\n        onClick={toggle}\n        {...props}\n      >\n        <div onClick={(e) => (onTitleClick ? onTitleClick(e) : null)} className={`${isDraggable && 'flex'} w-full`}>\n          {isDraggable && !viewOnly && (\n            <button\n              id={`btn-accordion-outline-drag-indicator`}\n              className='flex items-center justify-center w-icon h-icon hover:transform hover:scale-125 transition-all duration-200 ease-in-out'\n              {...sortableConfig?.attributes}\n              {...sortableConfig?.listeners}\n            >\n              <DragIndicatorIcon size={16} className='text-neutral-400 dark:text-neutral-400' />\n            </button>\n          )}\n\n          <div className={`flex items-center gap-1 w-full`}>\n            {onSelect && (\n              <Radio\n                isChecked={isChecked}\n                onSelect={(e) => {\n                  e.stopPropagation();\n                  onSelect();\n                }}\n                className='h-4 w-4 accent-[#366FE3]'\n              />\n            )}\n            <div className='flex gap-2 items-center'>\n              {icon}\n\n              <Typography size='small' appearance='body' variant='medium' className='whitespace-nowrap'>\n                {title}\n              </Typography>\n            </div>\n            <Typography size='extra-small' appearance='title' variant='medium' className={`ml-1`}>\n              {subTitle}\n            </Typography>\n            {additionalHeader}\n            <span>\n              {hoveringIndex === index && !viewOnly && (\n                <IconButton variant='ghost'>\n                  <EditIcon size={16} className='ml-[8px] text-neutral-400 dark:text-neutral-400' />\n                </IconButton>\n              )}\n            </span>\n          </div>\n        </div>\n        <ChevronLeft\n          sx={{ fontSize: 18 }}\n          className={cn(\n            'text-neutral-600 dark:text-neutral-400',\n            isOpen ? 'rotate-90' : '-rotate-90',\n            withAnimation && 'transition-transform duration-300 ease-in-out',\n          )}\n        />\n      </div>\n      {withAnimation ? (\n        <motion.div\n          initial={false}\n          animate={{\n            height: isOpen ? 'auto' : 0,\n          }}\n          transition={{\n            duration: 0.3,\n            ease: [0.4, 0, 0.2, 1],\n          }}\n          style={{ overflow: 'hidden' }}\n        >\n          <div className={contentClassName}>{children}</div>\n        </motion.div>\n      ) : isOpen ? (\n        <div className={contentClassName}>{children}</div>\n      ) : null}\n    </div>\n  );\n};\n\nAccordion.displayName = 'Accordion';\n\n\n\n"],"names":["Accordion","children","title","toggle","isOpen","hoveringIndex","index","viewOnly","onTitleClick","isChecked","onSelect","subTitle","noSpace","isDraggable","sortableConfig","headerClass","icon","additionalHeader","mainClass","id","childrenClass","withAnimation","props","contentClassName","cn","jsxs","e","jsx","DragIndicatorIcon","Radio","Typography","IconButton","EditIcon","ChevronLeft","motion"],"mappings":"mbAoDaA,EAAgC,CAAC,CAC5C,SAAAC,EACA,MAAAC,EACA,OAAAC,EACA,OAAAC,EACA,cAAAC,EAAA,MACAC,EACA,SAAAC,EACA,aAAAC,EACA,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,QAAAC,EACA,YAAAC,EACA,eAAAC,EACA,YAAAC,EACA,KAAAC,EACA,iBAAAC,EACA,UAAAC,EACA,GAAAC,EACA,cAAAC,EACA,cAAAC,EAAgB,GAChB,GAAGC,CACL,IAAM,CACJ,MAAMC,EAAmBC,EAAG,CAACZ,GAAW,MAAOQ,CAAa,EAE5D,OACEK,EAAAA,KAAC,OAAI,GAAAN,EAAQ,UAAW,GAAG,CAACP,GAAW,MAAM,KAAKR,EAAS,OAAS,EAAE,IAAIc,GAAa,EAAE,GAAI,MAAOJ,GAAgB,MAAQ,GAAGQ,EAC7H,SAAA,CAAAG,EAAAA,KAAC,MAAA,CACC,UAAWD,EACT,oJACAT,CAAA,EAEF,QAASZ,EACR,GAAGmB,EAEJ,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,QAAUC,GAAOlB,EAAeA,EAAakB,CAAC,EAAI,KAAO,UAAW,GAAGb,GAAe,MAAM,UAC9F,SAAA,CAAAA,GAAe,CAACN,GACfoB,EAAAA,IAAC,SAAA,CACC,GAAI,uCACJ,UAAU,yHACT,GAAGb,GAAgB,WACnB,GAAGA,GAAgB,UAEpB,SAAAa,EAAAA,IAACC,oBAAA,CAAkB,KAAM,GAAI,UAAU,wCAAA,CAAyC,CAAA,CAAA,EAIpFH,EAAAA,KAAC,MAAA,CAAI,UAAW,iCACb,SAAA,CAAAf,GACCiB,EAAAA,IAACE,EAAA,CACC,UAAApB,EACA,SAAWiB,GAAM,CACfA,EAAE,gBAAA,EACFhB,EAAA,CACF,EACA,UAAU,0BAAA,CAAA,EAGde,EAAAA,KAAC,MAAA,CAAI,UAAU,0BACZ,SAAA,CAAAT,EAEDW,EAAAA,IAACG,EAAAA,WAAA,CAAW,KAAK,QAAQ,WAAW,OAAO,QAAQ,SAAS,UAAU,oBACnE,SAAA5B,CAAA,CACH,CAAA,EACF,EACAyB,EAAAA,IAACG,EAAAA,WAAA,CAAW,KAAK,cAAc,WAAW,QAAQ,QAAQ,SAAS,UAAW,OAC3E,SAAAnB,CAAA,CACH,EACCM,QACA,OAAA,CACE,SAAAZ,IAAkBC,GAAS,CAACC,GAC3BoB,MAACI,EAAA,CAAW,QAAQ,QAClB,eAACC,EAAAA,SAAA,CAAS,KAAM,GAAI,UAAU,kDAAkD,EAClF,CAAA,CAEJ,CAAA,CAAA,CACF,CAAA,EACF,EACAL,EAAAA,IAACM,EAAAA,YAAA,CACC,GAAI,CAAE,SAAU,EAAA,EAChB,UAAWT,EACT,yCACApB,EAAS,YAAc,aACvBiB,GAAiB,+CAAA,CACnB,CAAA,CACF,CAAA,CAAA,EAEDA,EACCM,EAAAA,IAACO,EAAAA,OAAO,IAAP,CACC,QAAS,GACT,QAAS,CACP,OAAQ9B,EAAS,OAAS,CAAA,EAE5B,WAAY,CACV,SAAU,GACV,KAAM,CAAC,GAAK,EAAG,GAAK,CAAC,CAAA,EAEvB,MAAO,CAAE,SAAU,QAAA,EAEnB,SAAAuB,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAmB,SAAAtB,CAAA,CAAS,CAAA,CAAA,EAE5CG,EACFuB,EAAAA,IAAC,OAAI,UAAWJ,EAAmB,SAAAtB,EAAS,EAC1C,IAAA,EACN,CAEJ,EAEAD,EAAU,YAAc"}
+{"version":3,"file":"Accordion.cjs.js","sources":["../../../../src/components/navigation/accordion/Accordion.tsx"],"sourcesContent":["import { ChevronLeft } from '@mui/icons-material';\nimport cn from 'classnames';\nimport { motion } from 'framer-motion';\nimport { type FC, type HTMLAttributes } from 'react';\n\nimport { Typography } from '../../data-display/typography/Typography';\nimport IconButton from '../../button/IconButton';\nimport Radio from '../../button/Radio';\nimport { DragIndicatorIcon, EditIcon } from '../../icon';\n\nexport type AccordionProps = HTMLAttributes<HTMLDivElement> & {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  title: any;\n  toggle: () => void;\n  isOpen: boolean;\n  hoveringIndex?: number | null;\n  index?: number;\n  viewOnly?: boolean;\n  onTitleClick?: (e: React.MouseEvent) => void;\n  onSelect?: () => void;\n  isChecked?: boolean;\n  subTitle?: string;\n  noSpace?: boolean;\n  isDraggable?: boolean;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  sortableConfig?: Record<string, any>;\n  headerClass?: string;\n  icon?: JSX.Element;\n  additionalHeader?: JSX.Element;\n  id: string;\n  isEditMode?: boolean;\n  mainClass?: string;\n  childrenClass?: string;\n  /** When true, expands and collapses the panel with a smooth height animation. Default false. */\n  withAnimation?: boolean;\n};\n\n/**\n * Accordion component for collapsible content sections\n *\n * @example\n * ```tsx\n * <Accordion\n *   id=\"my-accordion\"\n *   title=\"Section Title\"\n *   isOpen={isOpen}\n *   toggle={() => setIsOpen(!isOpen)}\n * >\n *   <div>Accordion content</div>\n * </Accordion>\n * ```\n */\nexport const Accordion: FC<AccordionProps> = ({\n  children,\n  title,\n  toggle,\n  isOpen,\n  hoveringIndex,\n  index,\n  viewOnly,\n  onTitleClick,\n  isChecked,\n  onSelect,\n  subTitle,\n  noSpace,\n  isDraggable,\n  sortableConfig,\n  headerClass,\n  icon,\n  additionalHeader,\n  mainClass,\n  id,\n  childrenClass,\n  withAnimation = false,\n  ...props\n}) => {\n  const contentClassName = cn(!noSpace && 'p-4', childrenClass);\n\n  return (\n    <div id={id} className={`${!noSpace && 'mb-4'}  ${isOpen ? 'pb-1' : ''} ${mainClass || ''}`} style={sortableConfig?.style} {...props}>\n      <div\n        className={cn(\n          'flex items-center justify-between cursor-pointer border border-neutral-200 dark:border-none bg-neutral-100 dark:bg-black-600 px-3 py-1 rounded-lg',\n          headerClass,\n        )}\n        onClick={toggle}\n        {...props}\n      >\n        <div onClick={(e) => (onTitleClick ? onTitleClick(e) : null)} className={`${isDraggable && 'flex'} w-full`}>\n          {isDraggable && !viewOnly && (\n            <button\n              id={`btn-accordion-outline-drag-indicator`}\n              className='flex items-center justify-center w-icon h-icon hover:transform hover:scale-125 transition-all duration-200 ease-in-out'\n              {...sortableConfig?.attributes}\n              {...sortableConfig?.listeners}\n            >\n              <DragIndicatorIcon size={16} className='text-neutral-400 dark:text-neutral-400' />\n            </button>\n          )}\n\n          <div className={`flex items-center gap-1 w-full`}>\n            {onSelect && (\n              <Radio\n                isChecked={isChecked}\n                onSelect={(e) => {\n                  e.stopPropagation();\n                  onSelect();\n                }}\n                className='h-4 w-4 accent-[#366FE3]'\n              />\n            )}\n            <div className='flex gap-2 items-center'>\n              {icon}\n\n              <Typography size='small' appearance='body' variant='medium' className='whitespace-nowrap'>\n                {title}\n              </Typography>\n            </div>\n            <Typography size='extra-small' appearance='title' variant='medium' className={`ml-1`}>\n              {subTitle}\n            </Typography>\n            {additionalHeader}\n            <span>\n              {hoveringIndex === index && !viewOnly && (\n                <IconButton variant='ghost'>\n                  <EditIcon className='ml-2 h-4 w-4 text-neutral-400 dark:text-neutral-400' />\n                </IconButton>\n              )}\n            </span>\n          </div>\n        </div>\n        <ChevronLeft\n          sx={{ fontSize: 18 }}\n          className={cn(\n            'text-neutral-600 dark:text-neutral-400',\n            isOpen ? 'rotate-90' : '-rotate-90',\n            withAnimation && 'transition-transform duration-300 ease-in-out',\n          )}\n        />\n      </div>\n      {withAnimation ? (\n        <motion.div\n          initial={false}\n          animate={{\n            height: isOpen ? 'auto' : 0,\n          }}\n          transition={{\n            duration: 0.3,\n            ease: [0.4, 0, 0.2, 1],\n          }}\n          style={{ overflow: 'hidden' }}\n        >\n          <div className={contentClassName}>{children}</div>\n        </motion.div>\n      ) : isOpen ? (\n        <div className={contentClassName}>{children}</div>\n      ) : null}\n    </div>\n  );\n};\n\nAccordion.displayName = 'Accordion';\n\n\n\n"],"names":["Accordion","children","title","toggle","isOpen","hoveringIndex","index","viewOnly","onTitleClick","isChecked","onSelect","subTitle","noSpace","isDraggable","sortableConfig","headerClass","icon","additionalHeader","mainClass","id","childrenClass","withAnimation","props","contentClassName","cn","jsxs","e","jsx","DragIndicatorIcon","Radio","Typography","IconButton","EditIcon","ChevronLeft","motion"],"mappings":"mbAoDaA,EAAgC,CAAC,CAC5C,SAAAC,EACA,MAAAC,EACA,OAAAC,EACA,OAAAC,EACA,cAAAC,EAAA,MACAC,EACA,SAAAC,EACA,aAAAC,EACA,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,QAAAC,EACA,YAAAC,EACA,eAAAC,EACA,YAAAC,EACA,KAAAC,EACA,iBAAAC,EACA,UAAAC,EACA,GAAAC,EACA,cAAAC,EACA,cAAAC,EAAgB,GAChB,GAAGC,CACL,IAAM,CACJ,MAAMC,EAAmBC,EAAG,CAACZ,GAAW,MAAOQ,CAAa,EAE5D,OACEK,EAAAA,KAAC,OAAI,GAAAN,EAAQ,UAAW,GAAG,CAACP,GAAW,MAAM,KAAKR,EAAS,OAAS,EAAE,IAAIc,GAAa,EAAE,GAAI,MAAOJ,GAAgB,MAAQ,GAAGQ,EAC7H,SAAA,CAAAG,EAAAA,KAAC,MAAA,CACC,UAAWD,EACT,oJACAT,CAAA,EAEF,QAASZ,EACR,GAAGmB,EAEJ,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,QAAUC,GAAOlB,EAAeA,EAAakB,CAAC,EAAI,KAAO,UAAW,GAAGb,GAAe,MAAM,UAC9F,SAAA,CAAAA,GAAe,CAACN,GACfoB,EAAAA,IAAC,SAAA,CACC,GAAI,uCACJ,UAAU,yHACT,GAAGb,GAAgB,WACnB,GAAGA,GAAgB,UAEpB,SAAAa,EAAAA,IAACC,oBAAA,CAAkB,KAAM,GAAI,UAAU,wCAAA,CAAyC,CAAA,CAAA,EAIpFH,EAAAA,KAAC,MAAA,CAAI,UAAW,iCACb,SAAA,CAAAf,GACCiB,EAAAA,IAACE,EAAA,CACC,UAAApB,EACA,SAAWiB,GAAM,CACfA,EAAE,gBAAA,EACFhB,EAAA,CACF,EACA,UAAU,0BAAA,CAAA,EAGde,EAAAA,KAAC,MAAA,CAAI,UAAU,0BACZ,SAAA,CAAAT,EAEDW,EAAAA,IAACG,EAAAA,WAAA,CAAW,KAAK,QAAQ,WAAW,OAAO,QAAQ,SAAS,UAAU,oBACnE,SAAA5B,CAAA,CACH,CAAA,EACF,EACAyB,EAAAA,IAACG,EAAAA,WAAA,CAAW,KAAK,cAAc,WAAW,QAAQ,QAAQ,SAAS,UAAW,OAC3E,SAAAnB,CAAA,CACH,EACCM,EACDU,MAAC,OAAA,CACE,SAAAtB,IAAkBC,GAAS,CAACC,GAC3BoB,EAAAA,IAACI,EAAA,CAAW,QAAQ,QAClB,SAAAJ,MAACK,EAAAA,SAAA,CAAS,UAAU,sDAAsD,EAC5E,CAAA,CAEJ,CAAA,CAAA,CACF,CAAA,EACF,EACAL,EAAAA,IAACM,EAAAA,YAAA,CACC,GAAI,CAAE,SAAU,EAAA,EAChB,UAAWT,EACT,yCACApB,EAAS,YAAc,aACvBiB,GAAiB,+CAAA,CACnB,CAAA,CACF,CAAA,CAAA,EAEDA,EACCM,EAAAA,IAACO,EAAAA,OAAO,IAAP,CACC,QAAS,GACT,QAAS,CACP,OAAQ9B,EAAS,OAAS,CAAA,EAE5B,WAAY,CACV,SAAU,GACV,KAAM,CAAC,GAAK,EAAG,GAAK,CAAC,CAAA,EAEvB,MAAO,CAAE,SAAU,QAAA,EAEnB,SAAAuB,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAmB,SAAAtB,CAAA,CAAS,CAAA,CAAA,EAE5CG,EACFuB,EAAAA,IAAC,OAAI,UAAWJ,EAAmB,SAAAtB,EAAS,EAC1C,IAAA,EACN,CAEJ,EAEAD,EAAU,YAAc"}

package/dist/components/navigation/accordion/Accordion.es.js

@@ -24,15 +24,15 @@ const P = ({
   sortableConfig: r,
   headerClass: k,
   icon: w,
-  additionalHeader: z,
-  mainClass: j,
+  additionalHeader: j,
+  mainClass: z,
   id: I,
   childrenClass: $,
   withAnimation: u = !1,
   ...p
 }) => {
   const f = i(!m && "p-4", $);
-  return /* @__PURE__ */ t("div", { id: I, className: `${!m && "mb-4"}  ${a ? "pb-1" : ""} ${j || ""}`, style: r?.style, ...p, children: [
+  return /* @__PURE__ */ t("div", { id: I, className: `${!m && "mb-4"}  ${a ? "pb-1" : ""} ${z || ""}`, style: r?.style, ...p, children: [
     /* @__PURE__ */ t(
       "div",
       {
@@ -70,8 +70,8 @@ const P = ({
                 /* @__PURE__ */ e(h, { size: "small", appearance: "body", variant: "medium", className: "whitespace-nowrap", children: x })
               ] }),
               /* @__PURE__ */ e(h, { size: "extra-small", appearance: "title", variant: "medium", className: "ml-1", children: g }),
-              z,
-              /* @__PURE__ */ e("span", { children: v === b && !l && /* @__PURE__ */ e(B, { variant: "ghost", children: /* @__PURE__ */ e(L, { size: 16, className: "ml-[8px] text-neutral-400 dark:text-neutral-400" }) }) })
+              j,
+              /* @__PURE__ */ e("span", { children: v === b && !l && /* @__PURE__ */ e(B, { variant: "ghost", children: /* @__PURE__ */ e(L, { className: "ml-2 h-4 w-4 text-neutral-400 dark:text-neutral-400" }) }) })
             ] })
           ] }),
           /* @__PURE__ */ e(

package/dist/components/navigation/accordion/Accordion.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.es.js","sources":["../../../../src/components/navigation/accordion/Accordion.tsx"],"sourcesContent":["import { ChevronLeft } from '@mui/icons-material';\nimport cn from 'classnames';\nimport { motion } from 'framer-motion';\nimport { type FC, type HTMLAttributes } from 'react';\n\nimport { Typography } from '../../data-display/typography/Typography';\nimport IconButton from '../../button/IconButton';\nimport Radio from '../../button/Radio';\nimport { DragIndicatorIcon, EditIcon } from '../../icon';\n\nexport type AccordionProps = HTMLAttributes<HTMLDivElement> & {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  title: any;\n  toggle: () => void;\n  isOpen: boolean;\n  hoveringIndex?: number | null;\n  index?: number;\n  viewOnly?: boolean;\n  onTitleClick?: (e: React.MouseEvent) => void;\n  onSelect?: () => void;\n  isChecked?: boolean;\n  subTitle?: string;\n  noSpace?: boolean;\n  isDraggable?: boolean;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  sortableConfig?: Record<string, any>;\n  headerClass?: string;\n  icon?: JSX.Element;\n  additionalHeader?: JSX.Element;\n  id: string;\n  isEditMode?: boolean;\n  mainClass?: string;\n  childrenClass?: string;\n  /** When true, expands and collapses the panel with a smooth height animation. Default false. */\n  withAnimation?: boolean;\n};\n\n/**\n * Accordion component for collapsible content sections\n *\n * @example\n * ```tsx\n * <Accordion\n *   id=\"my-accordion\"\n *   title=\"Section Title\"\n *   isOpen={isOpen}\n *   toggle={() => setIsOpen(!isOpen)}\n * >\n *   <div>Accordion content</div>\n * </Accordion>\n * ```\n */\nexport const Accordion: FC<AccordionProps> = ({\n  children,\n  title,\n  toggle,\n  isOpen,\n  hoveringIndex,\n  index,\n  viewOnly,\n  onTitleClick,\n  isChecked,\n  onSelect,\n  subTitle,\n  noSpace,\n  isDraggable,\n  sortableConfig,\n  headerClass,\n  icon,\n  additionalHeader,\n  mainClass,\n  id,\n  childrenClass,\n  withAnimation = false,\n  ...props\n}) => {\n  const contentClassName = cn(!noSpace && 'p-4', childrenClass);\n\n  return (\n    <div id={id} className={`${!noSpace && 'mb-4'}  ${isOpen ? 'pb-1' : ''} ${mainClass || ''}`} style={sortableConfig?.style} {...props}>\n      <div\n        className={cn(\n          'flex items-center justify-between cursor-pointer border border-neutral-200 dark:border-none bg-neutral-100 dark:bg-black-600 px-3 py-1 rounded-lg',\n          headerClass,\n        )}\n        onClick={toggle}\n        {...props}\n      >\n        <div onClick={(e) => (onTitleClick ? onTitleClick(e) : null)} className={`${isDraggable && 'flex'} w-full`}>\n          {isDraggable && !viewOnly && (\n            <button\n              id={`btn-accordion-outline-drag-indicator`}\n              className='flex items-center justify-center w-icon h-icon hover:transform hover:scale-125 transition-all duration-200 ease-in-out'\n              {...sortableConfig?.attributes}\n              {...sortableConfig?.listeners}\n            >\n              <DragIndicatorIcon size={16} className='text-neutral-400 dark:text-neutral-400' />\n            </button>\n          )}\n\n          <div className={`flex items-center gap-1 w-full`}>\n            {onSelect && (\n              <Radio\n                isChecked={isChecked}\n                onSelect={(e) => {\n                  e.stopPropagation();\n                  onSelect();\n                }}\n                className='h-4 w-4 accent-[#366FE3]'\n              />\n            )}\n            <div className='flex gap-2 items-center'>\n              {icon}\n\n              <Typography size='small' appearance='body' variant='medium' className='whitespace-nowrap'>\n                {title}\n              </Typography>\n            </div>\n            <Typography size='extra-small' appearance='title' variant='medium' className={`ml-1`}>\n              {subTitle}\n            </Typography>\n            {additionalHeader}\n            <span>\n              {hoveringIndex === index && !viewOnly && (\n                <IconButton variant='ghost'>\n                  <EditIcon size={16} className='ml-[8px] text-neutral-400 dark:text-neutral-400' />\n                </IconButton>\n              )}\n            </span>\n          </div>\n        </div>\n        <ChevronLeft\n          sx={{ fontSize: 18 }}\n          className={cn(\n            'text-neutral-600 dark:text-neutral-400',\n            isOpen ? 'rotate-90' : '-rotate-90',\n            withAnimation && 'transition-transform duration-300 ease-in-out',\n          )}\n        />\n      </div>\n      {withAnimation ? (\n        <motion.div\n          initial={false}\n          animate={{\n            height: isOpen ? 'auto' : 0,\n          }}\n          transition={{\n            duration: 0.3,\n            ease: [0.4, 0, 0.2, 1],\n          }}\n          style={{ overflow: 'hidden' }}\n        >\n          <div className={contentClassName}>{children}</div>\n        </motion.div>\n      ) : isOpen ? (\n        <div className={contentClassName}>{children}</div>\n      ) : null}\n    </div>\n  );\n};\n\nAccordion.displayName = 'Accordion';\n\n\n\n"],"names":["Accordion","children","title","toggle","isOpen","hoveringIndex","index","viewOnly","onTitleClick","isChecked","onSelect","subTitle","noSpace","isDraggable","sortableConfig","headerClass","icon","additionalHeader","mainClass","id","childrenClass","withAnimation","props","contentClassName","cn","jsxs","e","jsx","DragIndicatorIcon","Radio","Typography","IconButton","EditIcon","ChevronLeft","motion"],"mappings":"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"}
+{"version":3,"file":"Accordion.es.js","sources":["../../../../src/components/navigation/accordion/Accordion.tsx"],"sourcesContent":["import { ChevronLeft } from '@mui/icons-material';\nimport cn from 'classnames';\nimport { motion } from 'framer-motion';\nimport { type FC, type HTMLAttributes } from 'react';\n\nimport { Typography } from '../../data-display/typography/Typography';\nimport IconButton from '../../button/IconButton';\nimport Radio from '../../button/Radio';\nimport { DragIndicatorIcon, EditIcon } from '../../icon';\n\nexport type AccordionProps = HTMLAttributes<HTMLDivElement> & {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  title: any;\n  toggle: () => void;\n  isOpen: boolean;\n  hoveringIndex?: number | null;\n  index?: number;\n  viewOnly?: boolean;\n  onTitleClick?: (e: React.MouseEvent) => void;\n  onSelect?: () => void;\n  isChecked?: boolean;\n  subTitle?: string;\n  noSpace?: boolean;\n  isDraggable?: boolean;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  sortableConfig?: Record<string, any>;\n  headerClass?: string;\n  icon?: JSX.Element;\n  additionalHeader?: JSX.Element;\n  id: string;\n  isEditMode?: boolean;\n  mainClass?: string;\n  childrenClass?: string;\n  /** When true, expands and collapses the panel with a smooth height animation. Default false. */\n  withAnimation?: boolean;\n};\n\n/**\n * Accordion component for collapsible content sections\n *\n * @example\n * ```tsx\n * <Accordion\n *   id=\"my-accordion\"\n *   title=\"Section Title\"\n *   isOpen={isOpen}\n *   toggle={() => setIsOpen(!isOpen)}\n * >\n *   <div>Accordion content</div>\n * </Accordion>\n * ```\n */\nexport const Accordion: FC<AccordionProps> = ({\n  children,\n  title,\n  toggle,\n  isOpen,\n  hoveringIndex,\n  index,\n  viewOnly,\n  onTitleClick,\n  isChecked,\n  onSelect,\n  subTitle,\n  noSpace,\n  isDraggable,\n  sortableConfig,\n  headerClass,\n  icon,\n  additionalHeader,\n  mainClass,\n  id,\n  childrenClass,\n  withAnimation = false,\n  ...props\n}) => {\n  const contentClassName = cn(!noSpace && 'p-4', childrenClass);\n\n  return (\n    <div id={id} className={`${!noSpace && 'mb-4'}  ${isOpen ? 'pb-1' : ''} ${mainClass || ''}`} style={sortableConfig?.style} {...props}>\n      <div\n        className={cn(\n          'flex items-center justify-between cursor-pointer border border-neutral-200 dark:border-none bg-neutral-100 dark:bg-black-600 px-3 py-1 rounded-lg',\n          headerClass,\n        )}\n        onClick={toggle}\n        {...props}\n      >\n        <div onClick={(e) => (onTitleClick ? onTitleClick(e) : null)} className={`${isDraggable && 'flex'} w-full`}>\n          {isDraggable && !viewOnly && (\n            <button\n              id={`btn-accordion-outline-drag-indicator`}\n              className='flex items-center justify-center w-icon h-icon hover:transform hover:scale-125 transition-all duration-200 ease-in-out'\n              {...sortableConfig?.attributes}\n              {...sortableConfig?.listeners}\n            >\n              <DragIndicatorIcon size={16} className='text-neutral-400 dark:text-neutral-400' />\n            </button>\n          )}\n\n          <div className={`flex items-center gap-1 w-full`}>\n            {onSelect && (\n              <Radio\n                isChecked={isChecked}\n                onSelect={(e) => {\n                  e.stopPropagation();\n                  onSelect();\n                }}\n                className='h-4 w-4 accent-[#366FE3]'\n              />\n            )}\n            <div className='flex gap-2 items-center'>\n              {icon}\n\n              <Typography size='small' appearance='body' variant='medium' className='whitespace-nowrap'>\n                {title}\n              </Typography>\n            </div>\n            <Typography size='extra-small' appearance='title' variant='medium' className={`ml-1`}>\n              {subTitle}\n            </Typography>\n            {additionalHeader}\n            <span>\n              {hoveringIndex === index && !viewOnly && (\n                <IconButton variant='ghost'>\n                  <EditIcon className='ml-2 h-4 w-4 text-neutral-400 dark:text-neutral-400' />\n                </IconButton>\n              )}\n            </span>\n          </div>\n        </div>\n        <ChevronLeft\n          sx={{ fontSize: 18 }}\n          className={cn(\n            'text-neutral-600 dark:text-neutral-400',\n            isOpen ? 'rotate-90' : '-rotate-90',\n            withAnimation && 'transition-transform duration-300 ease-in-out',\n          )}\n        />\n      </div>\n      {withAnimation ? (\n        <motion.div\n          initial={false}\n          animate={{\n            height: isOpen ? 'auto' : 0,\n          }}\n          transition={{\n            duration: 0.3,\n            ease: [0.4, 0, 0.2, 1],\n          }}\n          style={{ overflow: 'hidden' }}\n        >\n          <div className={contentClassName}>{children}</div>\n        </motion.div>\n      ) : isOpen ? (\n        <div className={contentClassName}>{children}</div>\n      ) : null}\n    </div>\n  );\n};\n\nAccordion.displayName = 'Accordion';\n\n\n\n"],"names":["Accordion","children","title","toggle","isOpen","hoveringIndex","index","viewOnly","onTitleClick","isChecked","onSelect","subTitle","noSpace","isDraggable","sortableConfig","headerClass","icon","additionalHeader","mainClass","id","childrenClass","withAnimation","props","contentClassName","cn","jsxs","e","jsx","DragIndicatorIcon","Radio","Typography","IconButton","EditIcon","ChevronLeft","motion"],"mappings":"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"}

package/dist/components/navigation/stepper/Stepper.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),I=require("@mui/icons-material"),W=require("antd"),m=require("react"),h=require("../../data-display/typography/Typography.cjs.js"),g=require("../../tooltip/Tooltip.cjs.js"),S=require("../../../hooks/useEventListener.cjs.js"),V=require("../../icon/icons.generated.cjs.js"),M=({steps:t,currentStep:a,appearance:s="linear",labelPosition:r="inline",onClick:j,className:C,showIndex:E=!0,disableOneMore:p=!1,isMainSideBarOpen:$=!1,isAuthoringOpen:T=!1})=>{const d=m.useRef(null),[c,v]=m.useState(0),[f,k]=m.useState(0),[o,z]=m.useState(0),[b,D]=m.useState(""),[R,q]=m.useState(""),F=()=>r==="top"||r==="top-right"?"flex-col":r==="bottom"||r==="bottom-right"?"flex-col-reverse":s==="linear"?"flex-row":"flex-col",w=()=>{setTimeout(()=>{v(0);const i=210,l=225;let n=0,x=0;for(let u=0;u<t.length&&(d?.current?.clientWidth&&d?.current?.clientWidth>n+l+i);u++)n+=l,x=u+1;v(x),d?.current?.clientWidth&&d?.current?.clientWidth<480&&v(t?.length)},300)};m.useEffect(()=>{w()},[$,t,a]),m.useEffect(()=>{setTimeout(()=>{w()},300)},[T]),m.useEffect(()=>{if(c>0)if(c>a){let i=t?.slice(c,t?.length)?.map(n=>n?.label)?.join(", "),l=c;p&&l===t.length-1&&(l=t.length,i=""),k(0),z(l),q(i)}else{const i=Math.floor((c+1)/2),l=a+i-t?.length;let n=a+i,x=a-Math.max(c-i,0)-(l>0?l:0),u=t?.slice(0,x)?.map(N=>N?.label)?.join(", "),L=t?.slice(n,t?.length)?.map(N=>N?.label)?.join(", ");p&&x===1&&(x=0,u=""),p&&n===t.length-1&&(n=t.length,L=""),k(x),z(n),D(u),q(L)}},[c,T,$,t,a]),S.useEventListener("resize",w);const y=(i,l,n=!1)=>e.jsx("div",{onClick:()=>j?.(l),className:`flex ${l<t.length-1||s=="parallel"?"flex flex-grow":""}  min-w-[200px] ${j?"cursor-pointer":""}`,children:e.jsxs("div",{className:"w-full flex flex-col",children:[e.jsxs("div",{className:`flex ${F()} ${r==="inline"&&s==="linear"?"items-center":""}`,children:[e.jsxs("div",{className:`${r==="inline"?"max-w-[70%]":"w-full"} flex flex-col`,children:[e.jsx("div",{className:`flex ${r==="top-right"||r==="bottom-right"?"justify-end":""}`,children:e.jsx(g,{title:i?.tooltipText,children:e.jsxs(h.Typography,{size:"small",variant:"medium",className:`truncate flex items-center ${l<=a?"text-primary-600 dark:text-primary-300":"text-neutral-400 dark:text-neutral-100"}`,appearance:"custom",children:[E?e.jsx("div",{className:`${s==="parallel"?"flex items-center":`w-6 min-w-[24px] h-6 ${l<=a?"bg-primary-600":"bg-neutral-400 dark:bg-black-400"} rounded-full flex items-center justify-center text-white`}`,children:i?.isLocked?e.jsx("div",{className:"flex items-center justify-center",children:e.jsx(I.Lock,{sx:{fontSize:16}})}):e.jsx(e.Fragment,{children:a>l&&s==="linear"?e.jsx(V.CheckIcon,{size:18,className:"text-white dark:text-white"}):e.jsx(h.Typography,{size:`${s==="parallel"?"small":"extra-small"}`,variant:"medium",className:"text-neutral-100",appearance:"custom",children:l+1})})}):null,e.jsx("div",{className:`truncate ${r==="inline"?"mx-2":"ml-2"} ${l<=a?"":"dark:text-black-200"}`,children:i?.label})]})})}),r!=="inline"||s==="parallel"?e.jsx("div",{className:`flex ${r==="top-right"||r==="bottom-right"?"justify-end":s==="linear"?"ml-8":""}`,children:e.jsx(h.Typography,{size:"extra-small",variant:"medium",className:`truncate ${l===a?"text-neutral-900 dark:text-white":"text-neutral-400 dark:text-neutral-600"}`,appearance:"custom",children:i?.description||""})}):null]}),l<t.length-(s==="linear"&&r==="inline"?1:0)&&!n?e.jsx("div",{className:`w-full flex-grow h-0.5 min-w-[70px]  ${r!=="inline"||s==="parallel"?"my-2":""} ${l<=a-(s==="linear"&&r==="inline"?1:0)?"bg-primary-600":"bg-neutral-300"}`}):null]}),r==="inline"&&s==="linear"?e.jsx(h.Typography,{size:"extra-small",variant:"medium",className:`ml-8 truncate ${l===a?"text-neutral-900 dark:text-white":"text-neutral-400 dark:text-neutral-600"}`,appearance:"custom",children:i?.description||""}):null]})},l);return e.jsxs("div",{className:`w-full flex ${C}`,ref:d,children:[f>0?e.jsxs("div",{className:`flex ${s==="parallel"?"flex-col":""}`,children:[j?e.jsx(W.Dropdown,{menu:{items:t.slice(0,f).map((i,l)=>({label:e.jsx("div",{className:"px-2 py-1",children:y(i,l,!0)}),key:l}))},trigger:["click"],children:e.jsx(h.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-c>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(g,{title:b,children:e.jsxs("div",{className:"min-w-max",children:[f," More..."]})})})}):e.jsx(h.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-c>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(g,{title:b,children:e.jsxs("div",{className:"min-w-max",children:[f," More..."]})})}),e.jsx("div",{className:`h-0.5 min-w-[40px] px-2 mr-2 bg-primary-600 ${s==="parallel"?"mt-2":"mt-[11px]"}`})]}):null,e.jsx("div",{className:"w-full flex flex-wrap gap-3 ",children:t?.map((i,l)=>f<=l&&l<o?y(i,l):null)}),t.length-o>0?e.jsxs("div",{className:"flex flex-col",children:[j?e.jsx(W.Dropdown,{menu:{items:t.slice(o,t?.length).map((i,l)=>({label:e.jsx("div",{className:"px-2 py-1",children:y(i,l+o,!0)}),key:l}))},trigger:["click"],children:e.jsx(h.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-o>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(g,{title:R,children:e.jsxs("div",{className:"min-w-max",children:[t.length-o," More..."]})})})}):e.jsx(h.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-o>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(g,{title:R,children:e.jsxs("div",{className:"min-w-max",children:[t.length-o," More..."]})})}),e.jsx("div",{className:`h-0.5 min-w-[40px] px-2 ml-2 bg-neutral-300 ${s==="parallel"?"mt-2":"hidden"}`})]}):null]})};M.displayName="Stepper";module.exports=M;
+"use strict";const e=require("react/jsx-runtime"),I=require("@mui/icons-material"),W=require("antd"),m=require("react"),h=require("../../data-display/typography/Typography.cjs.js"),g=require("../../tooltip/Tooltip.cjs.js"),S=require("../../../hooks/useEventListener.cjs.js"),V=require("../../icon/icons.generated.cjs.js"),M=({steps:t,currentStep:a,appearance:s="linear",labelPosition:r="inline",onClick:j,className:C,showIndex:E=!0,disableOneMore:p=!1,isMainSideBarOpen:$=!1,isAuthoringOpen:T=!1})=>{const d=m.useRef(null),[c,v]=m.useState(0),[f,k]=m.useState(0),[o,z]=m.useState(0),[b,D]=m.useState(""),[R,q]=m.useState(""),F=()=>r==="top"||r==="top-right"?"flex-col":r==="bottom"||r==="bottom-right"?"flex-col-reverse":s==="linear"?"flex-row":"flex-col",w=()=>{setTimeout(()=>{v(0);const i=210,l=225;let n=0,x=0;for(let u=0;u<t.length&&(d?.current?.clientWidth&&d?.current?.clientWidth>n+l+i);u++)n+=l,x=u+1;v(x),d?.current?.clientWidth&&d?.current?.clientWidth<480&&v(t?.length)},300)};m.useEffect(()=>{w()},[$,t,a]),m.useEffect(()=>{setTimeout(()=>{w()},300)},[T]),m.useEffect(()=>{if(c>0)if(c>a){let i=t?.slice(c,t?.length)?.map(n=>n?.label)?.join(", "),l=c;p&&l===t.length-1&&(l=t.length,i=""),k(0),z(l),q(i)}else{const i=Math.floor((c+1)/2),l=a+i-t?.length;let n=a+i,x=a-Math.max(c-i,0)-(l>0?l:0),u=t?.slice(0,x)?.map(N=>N?.label)?.join(", "),L=t?.slice(n,t?.length)?.map(N=>N?.label)?.join(", ");p&&x===1&&(x=0,u=""),p&&n===t.length-1&&(n=t.length,L=""),k(x),z(n),D(u),q(L)}},[c,T,$,t,a]),S.useEventListener("resize",w);const y=(i,l,n=!1)=>e.jsx("div",{onClick:()=>j?.(l),className:`flex ${l<t.length-1||s=="parallel"?"flex flex-grow":""}  min-w-[200px] ${j?"cursor-pointer":""}`,children:e.jsxs("div",{className:"w-full flex flex-col",children:[e.jsxs("div",{className:`flex ${F()} ${r==="inline"&&s==="linear"?"items-center":""}`,children:[e.jsxs("div",{className:`${r==="inline"?"max-w-[70%]":"w-full"} flex flex-col`,children:[e.jsx("div",{className:`flex ${r==="top-right"||r==="bottom-right"?"justify-end":""}`,children:e.jsx(g,{title:i?.tooltipText,children:e.jsxs(h.Typography,{size:"small",variant:"medium",className:`truncate flex items-center ${l<=a?"text-primary-600 dark:text-primary-300":"text-neutral-400 dark:text-neutral-100"}`,appearance:"custom",children:[E?e.jsx("div",{className:`${s==="parallel"?"flex items-center":`w-6 h-6 ${l<=a?"bg-primary-600":"bg-neutral-400 dark:bg-black-400"} rounded-full flex items-center justify-center text-white`}`,children:i?.isLocked?e.jsx("div",{className:"flex items-center justify-center",children:e.jsx(I.Lock,{sx:{fontSize:16}})}):e.jsx(e.Fragment,{children:a>l&&s==="linear"?e.jsx(V.CheckIcon,{size:18,className:"text-white dark:text-white"}):e.jsx(h.Typography,{size:`${s==="parallel"?"small":"extra-small"}`,variant:"medium",className:"text-neutral-100",appearance:"custom",children:l+1})})}):null,e.jsx("div",{className:`truncate ${r==="inline"?"mx-2":"ml-2"} ${l<=a?"":"dark:text-black-200"}`,children:i?.label})]})})}),r!=="inline"||s==="parallel"?e.jsx("div",{className:`flex ${r==="top-right"||r==="bottom-right"?"justify-end":s==="linear"?"ml-8":""}`,children:e.jsx(h.Typography,{size:"extra-small",variant:"medium",className:`truncate ${l===a?"text-neutral-900 dark:text-white":"text-neutral-400 dark:text-neutral-600"}`,appearance:"custom",children:i?.description||""})}):null]}),l<t.length-(s==="linear"&&r==="inline"?1:0)&&!n?e.jsx("div",{className:`w-full flex-grow h-0.5 min-w-[70px]  ${r!=="inline"||s==="parallel"?"my-2":""} ${l<=a-(s==="linear"&&r==="inline"?1:0)?"bg-primary-600":"bg-neutral-300"}`}):null]}),r==="inline"&&s==="linear"?e.jsx(h.Typography,{size:"extra-small",variant:"medium",className:`ml-8 truncate ${l===a?"text-neutral-900 dark:text-white":"text-neutral-400 dark:text-neutral-600"}`,appearance:"custom",children:i?.description||""}):null]})},l);return e.jsxs("div",{className:`w-full flex ${C}`,ref:d,children:[f>0?e.jsxs("div",{className:`flex ${s==="parallel"?"flex-col":""}`,children:[j?e.jsx(W.Dropdown,{menu:{items:t.slice(0,f).map((i,l)=>({label:e.jsx("div",{className:"px-2 py-1",children:y(i,l,!0)}),key:l}))},trigger:["click"],children:e.jsx(h.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-c>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(g,{title:b,children:e.jsxs("div",{className:"min-w-max",children:[f," More..."]})})})}):e.jsx(h.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-c>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(g,{title:b,children:e.jsxs("div",{className:"min-w-max",children:[f," More..."]})})}),e.jsx("div",{className:`h-0.5 min-w-[40px] px-2 mr-2 bg-primary-600 ${s==="parallel"?"mt-2":"mt-[11px]"}`})]}):null,e.jsx("div",{className:"w-full flex flex-wrap gap-3 ",children:t?.map((i,l)=>f<=l&&l<o?y(i,l):null)}),t.length-o>0?e.jsxs("div",{className:"flex flex-col",children:[j?e.jsx(W.Dropdown,{menu:{items:t.slice(o,t?.length).map((i,l)=>({label:e.jsx("div",{className:"px-2 py-1",children:y(i,l+o,!0)}),key:l}))},trigger:["click"],children:e.jsx(h.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-o>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(g,{title:R,children:e.jsxs("div",{className:"min-w-max",children:[t.length-o," More..."]})})})}):e.jsx(h.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-o>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(g,{title:R,children:e.jsxs("div",{className:"min-w-max",children:[t.length-o," More..."]})})}),e.jsx("div",{className:`h-0.5 min-w-[40px] px-2 ml-2 bg-neutral-300 ${s==="parallel"?"mt-2":"hidden"}`})]}):null]})};M.displayName="Stepper";module.exports=M;
 //# sourceMappingURL=Stepper.cjs.js.map

package/dist/components/navigation/stepper/Stepper.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.cjs.js","sources":["../../../../src/components/navigation/stepper/Stepper.tsx"],"sourcesContent":["import { Lock } from '@mui/icons-material';\nimport { Dropdown } from 'antd';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { Typography } from '../../data-display/typography/Typography';\nimport Tooltip from '../../tooltip/Tooltip';\nimport { useEventListener } from '../../../hooks/useEventListener';\nimport { CheckIcon } from '../../icon';\n\nexport type TStep = {\n  label: string;\n  description?: string;\n  isLocked?: boolean;\n  tooltipText?: string;\n};\n\nexport type TStepperProps = {\n  steps: TStep[];\n  currentStep: number;\n  onClick?: (index: number) => void;\n  appearance?: 'linear' | 'parallel';\n  labelPosition?: 'top' | 'bottom' | 'inline' | 'top-right' | 'bottom-right';\n  className?: string;\n  showIndex?: boolean;\n  disableOneMore?: boolean;\n  lockConfig?: {\n    isLocked?: boolean;\n    tooltipText?: string;\n  };\n  /** Whether the main sidebar is open (affects responsive calculations) */\n  isMainSideBarOpen?: boolean;\n  /** Whether the authoring panel is open (affects responsive calculations) */\n  isAuthoringOpen?: boolean;\n};\n\n/**\n * Stepper component for multi-step workflows\n *\n * @example\n * ```tsx\n * <Stepper\n *   steps={[\n *     { label: 'Step 1', description: 'First step' },\n *     { label: 'Step 2', description: 'Second step' },\n *     { label: 'Step 3', description: 'Third step' },\n *   ]}\n *   currentStep={1}\n *   onClick={(index) => setCurrentStep(index)}\n * />\n * ```\n */\nconst Stepper = ({\n  steps,\n  currentStep,\n  appearance = 'linear',\n  labelPosition = 'inline',\n  onClick,\n  className,\n  showIndex = true,\n  disableOneMore = false,\n  isMainSideBarOpen = false,\n  isAuthoringOpen = false,\n}: TStepperProps) => {\n  const stepsRef = useRef<HTMLDivElement | null>(null);\n  const [visibleStepCounts, setVisibleStepCounts] = useState<number>(0);\n  const [leftMostStep, setLeftMostStep] = useState<number>(0);\n  const [rightMostStep, setRightMostStep] = useState<number>(0);\n  const [leftTooltip, setLeftTooltip] = useState<string>('');\n  const [rightTooltip, setRightTooltip] = useState<string>('');\n\n  const getLabelDescriptionPosition = () => {\n    if (labelPosition === 'top' || labelPosition === 'top-right') {\n      return 'flex-col';\n    } else if (labelPosition === 'bottom' || labelPosition === 'bottom-right') {\n      return 'flex-col-reverse';\n    } else if (appearance === 'linear') {\n      return 'flex-row';\n    } else {\n      return 'flex-col';\n    }\n  };\n\n  const handleClientWidth = () => {\n    setTimeout(() => {\n      setVisibleStepCounts(0);\n      const moreWidth = 210;\n      const stepTitleWidth = 225;\n      let stepWidth = 0;\n      let count = 0;\n      for (let index = 0; index < steps.length; index++) {\n        if (stepsRef?.current?.clientWidth && stepsRef?.current?.clientWidth > stepWidth + stepTitleWidth + moreWidth) {\n          stepWidth += stepTitleWidth;\n          count = index + 1;\n        } else {\n          break;\n        }\n      }\n      setVisibleStepCounts(count);\n      if (stepsRef?.current?.clientWidth && stepsRef?.current?.clientWidth < 480) {\n        setVisibleStepCounts(steps?.length);\n      }\n    }, 300);\n  };\n\n  useEffect(() => {\n    handleClientWidth();\n  }, [isMainSideBarOpen, steps, currentStep]);\n\n  useEffect(() => {\n    setTimeout(() => {\n      handleClientWidth();\n    }, 300);\n  }, [isAuthoringOpen]);\n\n  useEffect(() => {\n    if (visibleStepCounts > 0) {\n      if (visibleStepCounts > currentStep) {\n        let newRightTooltip = steps\n          ?.slice(visibleStepCounts, steps?.length)\n          ?.map((step) => step?.label)\n          ?.join(', ');\n\n        let rightCount = visibleStepCounts;\n        if (disableOneMore && rightCount === steps.length - 1) {\n          rightCount = steps.length;\n          newRightTooltip = '';\n        }\n        setLeftMostStep(0);\n        setRightMostStep(rightCount);\n        setRightTooltip(newRightTooltip);\n      } else {\n        const mid = Math.floor((visibleStepCounts + 1) / 2);\n        const remainingStepsFromRight = currentStep + mid - steps?.length;\n        let rightCount = currentStep + mid;\n        let leftCount = currentStep - Math.max(visibleStepCounts - mid, 0) - (remainingStepsFromRight > 0 ? remainingStepsFromRight : 0);\n        let newLeftTooltip = steps\n          ?.slice(0, leftCount)\n          ?.map((step) => step?.label)\n          ?.join(', ');\n        let newRightTooltip = steps\n          ?.slice(rightCount, steps?.length)\n          ?.map((step) => step?.label)\n          ?.join(', ');\n\n        if (disableOneMore && leftCount === 1) {\n          leftCount = 0;\n          newLeftTooltip = '';\n        }\n\n        if (disableOneMore && rightCount === steps.length - 1) {\n          rightCount = steps.length;\n          newRightTooltip = '';\n        }\n        setLeftMostStep(leftCount);\n        setRightMostStep(rightCount);\n        setLeftTooltip(newLeftTooltip);\n        setRightTooltip(newRightTooltip);\n      }\n    }\n  }, [visibleStepCounts, isAuthoringOpen, isMainSideBarOpen, steps, currentStep]);\n\n  useEventListener('resize', handleClientWidth);\n\n  const stepDetails = (step: TStep, index: number, hideLine = false) => {\n    return (\n      <div\n        key={index}\n        onClick={() => onClick?.(index)}\n        className={`flex ${index < steps.length - 1 || appearance == 'parallel' ? 'flex flex-grow' : ''}  min-w-[200px] ${\n          onClick ? 'cursor-pointer' : ''\n        }`}\n      >\n        <div className={`w-full flex flex-col`}>\n          <div className={`flex ${getLabelDescriptionPosition()} ${labelPosition === 'inline' && appearance === 'linear' ? 'items-center' : ''}`}>\n            <div className={`${labelPosition === 'inline' ? 'max-w-[70%]' : 'w-full'} flex flex-col`}>\n              <div className={`flex ${labelPosition === 'top-right' || labelPosition === 'bottom-right' ? 'justify-end' : ''}`}>\n                <Tooltip title={step?.tooltipText}>\n                  <Typography\n                    size='small'\n                    variant='medium'\n                    className={`truncate flex items-center ${\n                      index <= currentStep ? 'text-primary-600 dark:text-primary-300' : 'text-neutral-400 dark:text-neutral-100'\n                    }`}\n                    appearance='custom'\n                  >\n                    {showIndex ? (\n                      <div\n                        className={`${\n                          appearance === 'parallel'\n                            ? 'flex items-center'\n                            : `w-6 min-w-[24px] h-6 ${\n                                index <= currentStep ? 'bg-primary-600' : 'bg-neutral-400 dark:bg-black-400'\n                              } rounded-full flex items-center justify-center text-white`\n                        }`}\n                      >\n                        {step?.isLocked ? (\n                          <div className='flex items-center justify-center'>\n                            <Lock sx={{ fontSize: 16 }} />\n                          </div>\n                        ) : (\n                          <>\n                            {currentStep > index && appearance === 'linear' ? (\n                              <CheckIcon size={18} className='text-white dark:text-white' />\n                            ) : (\n                              <Typography\n                                size={`${appearance === 'parallel' ? 'small' : 'extra-small'}`}\n                                variant='medium'\n                                className='text-neutral-100'\n                                appearance='custom'\n                              >\n                                {index + 1}\n                              </Typography>\n                            )}\n                          </>\n                        )}\n                      </div>\n                    ) : null}\n\n                    <div className={`truncate ${labelPosition === 'inline' ? 'mx-2' : 'ml-2'} ${index <= currentStep ? '' : 'dark:text-black-200'}`}>\n                      {step?.label}\n                    </div>\n                  </Typography>\n                </Tooltip>\n              </div>\n\n              {labelPosition !== 'inline' || appearance === 'parallel' ? (\n                <div\n                  className={`flex ${\n                    labelPosition === 'top-right' || labelPosition === 'bottom-right' ? 'justify-end' : appearance === 'linear' ? 'ml-8' : ''\n                  }`}\n                >\n                  <Typography\n                    size='extra-small'\n                    variant='medium'\n                    className={`truncate ${index === currentStep ? 'text-neutral-900 dark:text-white' : 'text-neutral-400 dark:text-neutral-600'}`}\n                    appearance='custom'\n                  >\n                    {step?.description || ''}\n                  </Typography>\n                </div>\n              ) : null}\n            </div>\n            {index < steps.length - (appearance === 'linear' && labelPosition === 'inline' ? 1 : 0) && !hideLine ? (\n              <div\n                className={`w-full flex-grow h-0.5 min-w-[70px]  ${labelPosition !== 'inline' || appearance === 'parallel' ? 'my-2' : ''} ${\n                  index <= currentStep - (appearance === 'linear' && labelPosition === 'inline' ? 1 : 0) ? 'bg-primary-600' : 'bg-neutral-300'\n                }`}\n              />\n            ) : null}\n          </div>\n          {labelPosition === 'inline' && appearance === 'linear' ? (\n            <Typography\n              size='extra-small'\n              variant='medium'\n              className={`ml-8 truncate ${index === currentStep ? 'text-neutral-900 dark:text-white' : 'text-neutral-400 dark:text-neutral-600'}`}\n              appearance='custom'\n            >\n              {step?.description || ''}\n            </Typography>\n          ) : null}\n        </div>\n      </div>\n    );\n  };\n\n  return (\n    <div className={`w-full flex ${className}`} ref={stepsRef}>\n      {leftMostStep > 0 ? (\n        <div className={`flex ${appearance === 'parallel' ? 'flex-col' : ''}`}>\n          {onClick ? (\n            <Dropdown\n              menu={{\n                items: steps.slice(0, leftMostStep).map((step: TStep, index: number) => ({\n                  label: <div className='px-2 py-1'>{stepDetails(step, index, true)}</div>,\n                  key: index,\n                })),\n              }}\n              trigger={['click']}\n            >\n              <Typography\n                size='small'\n                variant='medium'\n                className={`px-2 ${steps.length - visibleStepCounts > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n                appearance='subtitle'\n              >\n                <Tooltip title={leftTooltip}>\n                  <div className='min-w-max'>\n                    {leftMostStep} More...\n                  </div>\n                </Tooltip>\n              </Typography>\n            </Dropdown>\n          ) : (\n            <Typography\n              size='small'\n              variant='medium'\n              className={`px-2 ${steps.length - visibleStepCounts > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n              appearance='subtitle'\n            >\n              <Tooltip title={leftTooltip}>\n                <div className='min-w-max'>\n                  {leftMostStep} More...\n                </div>\n              </Tooltip>\n            </Typography>\n          )}\n          <div className={`h-0.5 min-w-[40px] px-2 mr-2 bg-primary-600 ${appearance === 'parallel' ? 'mt-2' : 'mt-[11px]'}`} />\n        </div>\n      ) : null}\n\n      <div className='w-full flex flex-wrap gap-3 '>\n        {steps?.map((step: TStep, index: number) => {\n          if (leftMostStep <= index && index < rightMostStep) {\n            return stepDetails(step, index);\n          }\n          return null;\n        })}\n      </div>\n\n      {steps.length - rightMostStep > 0 ? (\n        <div className='flex flex-col'>\n          {onClick ? (\n            <Dropdown\n              menu={{\n                items: steps.slice(rightMostStep, steps?.length).map((step: TStep, index: number) => ({\n                  label: <div className='px-2 py-1'>{stepDetails(step, index + rightMostStep, true)}</div>,\n                  key: index,\n                })),\n              }}\n              trigger={['click']}\n            >\n              <Typography\n                size='small'\n                variant='medium'\n                className={`px-2 ${steps.length - rightMostStep > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n                appearance='subtitle'\n              >\n                <Tooltip title={rightTooltip}>\n                  <div className='min-w-max'>\n                    {steps.length - rightMostStep} More...\n                  </div>\n                </Tooltip>\n              </Typography>\n            </Dropdown>\n          ) : (\n            <Typography\n              size='small'\n              variant='medium'\n              className={`px-2 ${steps.length - rightMostStep > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n              appearance='subtitle'\n            >\n              <Tooltip title={rightTooltip}>\n                <div className='min-w-max'>\n                  {steps.length - rightMostStep} More...\n                </div>\n              </Tooltip>\n            </Typography>\n          )}\n\n          <div className={`h-0.5 min-w-[40px] px-2 ml-2 bg-neutral-300 ${appearance === 'parallel' ? 'mt-2' : 'hidden'}`} />\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nStepper.displayName = 'Stepper';\n\nexport default Stepper;\n\n\n\n"],"names":["Stepper","steps","currentStep","appearance","labelPosition","onClick","className","showIndex","disableOneMore","isMainSideBarOpen","isAuthoringOpen","stepsRef","useRef","visibleStepCounts","setVisibleStepCounts","useState","leftMostStep","setLeftMostStep","rightMostStep","setRightMostStep","leftTooltip","setLeftTooltip","rightTooltip","setRightTooltip","getLabelDescriptionPosition","handleClientWidth","moreWidth","stepTitleWidth","stepWidth","count","index","useEffect","newRightTooltip","step","rightCount","mid","remainingStepsFromRight","leftCount","newLeftTooltip","useEventListener","stepDetails","hideLine","jsx","jsxs","Tooltip","Typography","Lock","Fragment","CheckIcon","Dropdown"],"mappings":"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"}
+{"version":3,"file":"Stepper.cjs.js","sources":["../../../../src/components/navigation/stepper/Stepper.tsx"],"sourcesContent":["import { Lock } from '@mui/icons-material';\nimport { Dropdown } from 'antd';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { Typography } from '../../data-display/typography/Typography';\nimport Tooltip from '../../tooltip/Tooltip';\nimport { useEventListener } from '../../../hooks/useEventListener';\nimport { CheckIcon } from '../../icon';\n\nexport type TStep = {\n  label: string;\n  description?: string;\n  isLocked?: boolean;\n  tooltipText?: string;\n};\n\nexport type TStepperProps = {\n  steps: TStep[];\n  currentStep: number;\n  onClick?: (index: number) => void;\n  appearance?: 'linear' | 'parallel';\n  labelPosition?: 'top' | 'bottom' | 'inline' | 'top-right' | 'bottom-right';\n  className?: string;\n  showIndex?: boolean;\n  disableOneMore?: boolean;\n  lockConfig?: {\n    isLocked?: boolean;\n    tooltipText?: string;\n  };\n  /** Whether the main sidebar is open (affects responsive calculations) */\n  isMainSideBarOpen?: boolean;\n  /** Whether the authoring panel is open (affects responsive calculations) */\n  isAuthoringOpen?: boolean;\n};\n\n/**\n * Stepper component for multi-step workflows\n *\n * @example\n * ```tsx\n * <Stepper\n *   steps={[\n *     { label: 'Step 1', description: 'First step' },\n *     { label: 'Step 2', description: 'Second step' },\n *     { label: 'Step 3', description: 'Third step' },\n *   ]}\n *   currentStep={1}\n *   onClick={(index) => setCurrentStep(index)}\n * />\n * ```\n */\nconst Stepper = ({\n  steps,\n  currentStep,\n  appearance = 'linear',\n  labelPosition = 'inline',\n  onClick,\n  className,\n  showIndex = true,\n  disableOneMore = false,\n  isMainSideBarOpen = false,\n  isAuthoringOpen = false,\n}: TStepperProps) => {\n  const stepsRef = useRef<HTMLDivElement | null>(null);\n  const [visibleStepCounts, setVisibleStepCounts] = useState<number>(0);\n  const [leftMostStep, setLeftMostStep] = useState<number>(0);\n  const [rightMostStep, setRightMostStep] = useState<number>(0);\n  const [leftTooltip, setLeftTooltip] = useState<string>('');\n  const [rightTooltip, setRightTooltip] = useState<string>('');\n\n  const getLabelDescriptionPosition = () => {\n    if (labelPosition === 'top' || labelPosition === 'top-right') {\n      return 'flex-col';\n    } else if (labelPosition === 'bottom' || labelPosition === 'bottom-right') {\n      return 'flex-col-reverse';\n    } else if (appearance === 'linear') {\n      return 'flex-row';\n    } else {\n      return 'flex-col';\n    }\n  };\n\n  const handleClientWidth = () => {\n    setTimeout(() => {\n      setVisibleStepCounts(0);\n      const moreWidth = 210;\n      const stepTitleWidth = 225;\n      let stepWidth = 0;\n      let count = 0;\n      for (let index = 0; index < steps.length; index++) {\n        if (stepsRef?.current?.clientWidth && stepsRef?.current?.clientWidth > stepWidth + stepTitleWidth + moreWidth) {\n          stepWidth += stepTitleWidth;\n          count = index + 1;\n        } else {\n          break;\n        }\n      }\n      setVisibleStepCounts(count);\n      if (stepsRef?.current?.clientWidth && stepsRef?.current?.clientWidth < 480) {\n        setVisibleStepCounts(steps?.length);\n      }\n    }, 300);\n  };\n\n  useEffect(() => {\n    handleClientWidth();\n  }, [isMainSideBarOpen, steps, currentStep]);\n\n  useEffect(() => {\n    setTimeout(() => {\n      handleClientWidth();\n    }, 300);\n  }, [isAuthoringOpen]);\n\n  useEffect(() => {\n    if (visibleStepCounts > 0) {\n      if (visibleStepCounts > currentStep) {\n        let newRightTooltip = steps\n          ?.slice(visibleStepCounts, steps?.length)\n          ?.map((step) => step?.label)\n          ?.join(', ');\n\n        let rightCount = visibleStepCounts;\n        if (disableOneMore && rightCount === steps.length - 1) {\n          rightCount = steps.length;\n          newRightTooltip = '';\n        }\n        setLeftMostStep(0);\n        setRightMostStep(rightCount);\n        setRightTooltip(newRightTooltip);\n      } else {\n        const mid = Math.floor((visibleStepCounts + 1) / 2);\n        const remainingStepsFromRight = currentStep + mid - steps?.length;\n        let rightCount = currentStep + mid;\n        let leftCount = currentStep - Math.max(visibleStepCounts - mid, 0) - (remainingStepsFromRight > 0 ? remainingStepsFromRight : 0);\n        let newLeftTooltip = steps\n          ?.slice(0, leftCount)\n          ?.map((step) => step?.label)\n          ?.join(', ');\n        let newRightTooltip = steps\n          ?.slice(rightCount, steps?.length)\n          ?.map((step) => step?.label)\n          ?.join(', ');\n\n        if (disableOneMore && leftCount === 1) {\n          leftCount = 0;\n          newLeftTooltip = '';\n        }\n\n        if (disableOneMore && rightCount === steps.length - 1) {\n          rightCount = steps.length;\n          newRightTooltip = '';\n        }\n        setLeftMostStep(leftCount);\n        setRightMostStep(rightCount);\n        setLeftTooltip(newLeftTooltip);\n        setRightTooltip(newRightTooltip);\n      }\n    }\n  }, [visibleStepCounts, isAuthoringOpen, isMainSideBarOpen, steps, currentStep]);\n\n  useEventListener('resize', handleClientWidth);\n\n  const stepDetails = (step: TStep, index: number, hideLine = false) => {\n    return (\n      <div\n        key={index}\n        onClick={() => onClick?.(index)}\n        className={`flex ${index < steps.length - 1 || appearance == 'parallel' ? 'flex flex-grow' : ''}  min-w-[200px] ${\n          onClick ? 'cursor-pointer' : ''\n        }`}\n      >\n        <div className={`w-full flex flex-col`}>\n          <div className={`flex ${getLabelDescriptionPosition()} ${labelPosition === 'inline' && appearance === 'linear' ? 'items-center' : ''}`}>\n            <div className={`${labelPosition === 'inline' ? 'max-w-[70%]' : 'w-full'} flex flex-col`}>\n              <div className={`flex ${labelPosition === 'top-right' || labelPosition === 'bottom-right' ? 'justify-end' : ''}`}>\n                <Tooltip title={step?.tooltipText}>\n                  <Typography\n                    size='small'\n                    variant='medium'\n                    className={`truncate flex items-center ${\n                      index <= currentStep ? 'text-primary-600 dark:text-primary-300' : 'text-neutral-400 dark:text-neutral-100'\n                    }`}\n                    appearance='custom'\n                  >\n                    {showIndex ? (\n                      <div\n                        className={`${\n                          appearance === 'parallel'\n                            ? 'flex items-center'\n                            : `w-6 h-6 ${\n                                index <= currentStep ? 'bg-primary-600' : 'bg-neutral-400 dark:bg-black-400'\n                              } rounded-full flex items-center justify-center text-white`\n                        }`}\n                      >\n                        {step?.isLocked ? (\n                          <div className='flex items-center justify-center'>\n                            <Lock sx={{ fontSize: 16 }} />\n                          </div>\n                        ) : (\n                          <>\n                            {currentStep > index && appearance === 'linear' ? (\n                              <CheckIcon size={18} className='text-white dark:text-white' />\n                            ) : (\n                              <Typography\n                                size={`${appearance === 'parallel' ? 'small' : 'extra-small'}`}\n                                variant='medium'\n                                className='text-neutral-100'\n                                appearance='custom'\n                              >\n                                {index + 1}\n                              </Typography>\n                            )}\n                          </>\n                        )}\n                      </div>\n                    ) : null}\n\n                    <div className={`truncate ${labelPosition === 'inline' ? 'mx-2' : 'ml-2'} ${index <= currentStep ? '' : 'dark:text-black-200'}`}>\n                      {step?.label}\n                    </div>\n                  </Typography>\n                </Tooltip>\n              </div>\n\n              {labelPosition !== 'inline' || appearance === 'parallel' ? (\n                <div\n                  className={`flex ${\n                    labelPosition === 'top-right' || labelPosition === 'bottom-right' ? 'justify-end' : appearance === 'linear' ? 'ml-8' : ''\n                  }`}\n                >\n                  <Typography\n                    size='extra-small'\n                    variant='medium'\n                    className={`truncate ${index === currentStep ? 'text-neutral-900 dark:text-white' : 'text-neutral-400 dark:text-neutral-600'}`}\n                    appearance='custom'\n                  >\n                    {step?.description || ''}\n                  </Typography>\n                </div>\n              ) : null}\n            </div>\n            {index < steps.length - (appearance === 'linear' && labelPosition === 'inline' ? 1 : 0) && !hideLine ? (\n              <div\n                className={`w-full flex-grow h-0.5 min-w-[70px]  ${labelPosition !== 'inline' || appearance === 'parallel' ? 'my-2' : ''} ${\n                  index <= currentStep - (appearance === 'linear' && labelPosition === 'inline' ? 1 : 0) ? 'bg-primary-600' : 'bg-neutral-300'\n                }`}\n              />\n            ) : null}\n          </div>\n          {labelPosition === 'inline' && appearance === 'linear' ? (\n            <Typography\n              size='extra-small'\n              variant='medium'\n              className={`ml-8 truncate ${index === currentStep ? 'text-neutral-900 dark:text-white' : 'text-neutral-400 dark:text-neutral-600'}`}\n              appearance='custom'\n            >\n              {step?.description || ''}\n            </Typography>\n          ) : null}\n        </div>\n      </div>\n    );\n  };\n\n  return (\n    <div className={`w-full flex ${className}`} ref={stepsRef}>\n      {leftMostStep > 0 ? (\n        <div className={`flex ${appearance === 'parallel' ? 'flex-col' : ''}`}>\n          {onClick ? (\n            <Dropdown\n              menu={{\n                items: steps.slice(0, leftMostStep).map((step: TStep, index: number) => ({\n                  label: <div className='px-2 py-1'>{stepDetails(step, index, true)}</div>,\n                  key: index,\n                })),\n              }}\n              trigger={['click']}\n            >\n              <Typography\n                size='small'\n                variant='medium'\n                className={`px-2 ${steps.length - visibleStepCounts > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n                appearance='subtitle'\n              >\n                <Tooltip title={leftTooltip}>\n                  <div className='min-w-max'>\n                    {leftMostStep} More...\n                  </div>\n                </Tooltip>\n              </Typography>\n            </Dropdown>\n          ) : (\n            <Typography\n              size='small'\n              variant='medium'\n              className={`px-2 ${steps.length - visibleStepCounts > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n              appearance='subtitle'\n            >\n              <Tooltip title={leftTooltip}>\n                <div className='min-w-max'>\n                  {leftMostStep} More...\n                </div>\n              </Tooltip>\n            </Typography>\n          )}\n          <div className={`h-0.5 min-w-[40px] px-2 mr-2 bg-primary-600 ${appearance === 'parallel' ? 'mt-2' : 'mt-[11px]'}`} />\n        </div>\n      ) : null}\n\n      <div className='w-full flex flex-wrap gap-3 '>\n        {steps?.map((step: TStep, index: number) => {\n          if (leftMostStep <= index && index < rightMostStep) {\n            return stepDetails(step, index);\n          }\n          return null;\n        })}\n      </div>\n\n      {steps.length - rightMostStep > 0 ? (\n        <div className='flex flex-col'>\n          {onClick ? (\n            <Dropdown\n              menu={{\n                items: steps.slice(rightMostStep, steps?.length).map((step: TStep, index: number) => ({\n                  label: <div className='px-2 py-1'>{stepDetails(step, index + rightMostStep, true)}</div>,\n                  key: index,\n                })),\n              }}\n              trigger={['click']}\n            >\n              <Typography\n                size='small'\n                variant='medium'\n                className={`px-2 ${steps.length - rightMostStep > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n                appearance='subtitle'\n              >\n                <Tooltip title={rightTooltip}>\n                  <div className='min-w-max'>\n                    {steps.length - rightMostStep} More...\n                  </div>\n                </Tooltip>\n              </Typography>\n            </Dropdown>\n          ) : (\n            <Typography\n              size='small'\n              variant='medium'\n              className={`px-2 ${steps.length - rightMostStep > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n              appearance='subtitle'\n            >\n              <Tooltip title={rightTooltip}>\n                <div className='min-w-max'>\n                  {steps.length - rightMostStep} More...\n                </div>\n              </Tooltip>\n            </Typography>\n          )}\n\n          <div className={`h-0.5 min-w-[40px] px-2 ml-2 bg-neutral-300 ${appearance === 'parallel' ? 'mt-2' : 'hidden'}`} />\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nStepper.displayName = 'Stepper';\n\nexport default Stepper;\n\n\n\n"],"names":["Stepper","steps","currentStep","appearance","labelPosition","onClick","className","showIndex","disableOneMore","isMainSideBarOpen","isAuthoringOpen","stepsRef","useRef","visibleStepCounts","setVisibleStepCounts","useState","leftMostStep","setLeftMostStep","rightMostStep","setRightMostStep","leftTooltip","setLeftTooltip","rightTooltip","setRightTooltip","getLabelDescriptionPosition","handleClientWidth","moreWidth","stepTitleWidth","stepWidth","count","index","useEffect","newRightTooltip","step","rightCount","mid","remainingStepsFromRight","leftCount","newLeftTooltip","useEventListener","stepDetails","hideLine","jsx","jsxs","Tooltip","Typography","Lock","Fragment","CheckIcon","Dropdown"],"mappings":"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"}

package/dist/components/navigation/stepper/Stepper.es.js

@@ -64,7 +64,7 @@ const Q = ({
                   F ? /* @__PURE__ */ e(
                     "div",
                     {
-                      className: `${a === "parallel" ? "flex items-center" : `w-6 min-w-[24px] h-6 ${l <= n ? "bg-primary-600" : "bg-neutral-400 dark:bg-black-400"} rounded-full flex items-center justify-center text-white`}`,
+                      className: `${a === "parallel" ? "flex items-center" : `w-6 h-6 ${l <= n ? "bg-primary-600" : "bg-neutral-400 dark:bg-black-400"} rounded-full flex items-center justify-center text-white`}`,
                       children: i?.isLocked ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ e(G, { sx: { fontSize: 16 } }) }) : /* @__PURE__ */ e(q, { children: n > l && a === "linear" ? /* @__PURE__ */ e(K, { size: 18, className: "text-white dark:text-white" }) : /* @__PURE__ */ e(
                         h,
                         {

package/dist/components/navigation/stepper/Stepper.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.es.js","sources":["../../../../src/components/navigation/stepper/Stepper.tsx"],"sourcesContent":["import { Lock } from '@mui/icons-material';\nimport { Dropdown } from 'antd';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { Typography } from '../../data-display/typography/Typography';\nimport Tooltip from '../../tooltip/Tooltip';\nimport { useEventListener } from '../../../hooks/useEventListener';\nimport { CheckIcon } from '../../icon';\n\nexport type TStep = {\n  label: string;\n  description?: string;\n  isLocked?: boolean;\n  tooltipText?: string;\n};\n\nexport type TStepperProps = {\n  steps: TStep[];\n  currentStep: number;\n  onClick?: (index: number) => void;\n  appearance?: 'linear' | 'parallel';\n  labelPosition?: 'top' | 'bottom' | 'inline' | 'top-right' | 'bottom-right';\n  className?: string;\n  showIndex?: boolean;\n  disableOneMore?: boolean;\n  lockConfig?: {\n    isLocked?: boolean;\n    tooltipText?: string;\n  };\n  /** Whether the main sidebar is open (affects responsive calculations) */\n  isMainSideBarOpen?: boolean;\n  /** Whether the authoring panel is open (affects responsive calculations) */\n  isAuthoringOpen?: boolean;\n};\n\n/**\n * Stepper component for multi-step workflows\n *\n * @example\n * ```tsx\n * <Stepper\n *   steps={[\n *     { label: 'Step 1', description: 'First step' },\n *     { label: 'Step 2', description: 'Second step' },\n *     { label: 'Step 3', description: 'Third step' },\n *   ]}\n *   currentStep={1}\n *   onClick={(index) => setCurrentStep(index)}\n * />\n * ```\n */\nconst Stepper = ({\n  steps,\n  currentStep,\n  appearance = 'linear',\n  labelPosition = 'inline',\n  onClick,\n  className,\n  showIndex = true,\n  disableOneMore = false,\n  isMainSideBarOpen = false,\n  isAuthoringOpen = false,\n}: TStepperProps) => {\n  const stepsRef = useRef<HTMLDivElement | null>(null);\n  const [visibleStepCounts, setVisibleStepCounts] = useState<number>(0);\n  const [leftMostStep, setLeftMostStep] = useState<number>(0);\n  const [rightMostStep, setRightMostStep] = useState<number>(0);\n  const [leftTooltip, setLeftTooltip] = useState<string>('');\n  const [rightTooltip, setRightTooltip] = useState<string>('');\n\n  const getLabelDescriptionPosition = () => {\n    if (labelPosition === 'top' || labelPosition === 'top-right') {\n      return 'flex-col';\n    } else if (labelPosition === 'bottom' || labelPosition === 'bottom-right') {\n      return 'flex-col-reverse';\n    } else if (appearance === 'linear') {\n      return 'flex-row';\n    } else {\n      return 'flex-col';\n    }\n  };\n\n  const handleClientWidth = () => {\n    setTimeout(() => {\n      setVisibleStepCounts(0);\n      const moreWidth = 210;\n      const stepTitleWidth = 225;\n      let stepWidth = 0;\n      let count = 0;\n      for (let index = 0; index < steps.length; index++) {\n        if (stepsRef?.current?.clientWidth && stepsRef?.current?.clientWidth > stepWidth + stepTitleWidth + moreWidth) {\n          stepWidth += stepTitleWidth;\n          count = index + 1;\n        } else {\n          break;\n        }\n      }\n      setVisibleStepCounts(count);\n      if (stepsRef?.current?.clientWidth && stepsRef?.current?.clientWidth < 480) {\n        setVisibleStepCounts(steps?.length);\n      }\n    }, 300);\n  };\n\n  useEffect(() => {\n    handleClientWidth();\n  }, [isMainSideBarOpen, steps, currentStep]);\n\n  useEffect(() => {\n    setTimeout(() => {\n      handleClientWidth();\n    }, 300);\n  }, [isAuthoringOpen]);\n\n  useEffect(() => {\n    if (visibleStepCounts > 0) {\n      if (visibleStepCounts > currentStep) {\n        let newRightTooltip = steps\n          ?.slice(visibleStepCounts, steps?.length)\n          ?.map((step) => step?.label)\n          ?.join(', ');\n\n        let rightCount = visibleStepCounts;\n        if (disableOneMore && rightCount === steps.length - 1) {\n          rightCount = steps.length;\n          newRightTooltip = '';\n        }\n        setLeftMostStep(0);\n        setRightMostStep(rightCount);\n        setRightTooltip(newRightTooltip);\n      } else {\n        const mid = Math.floor((visibleStepCounts + 1) / 2);\n        const remainingStepsFromRight = currentStep + mid - steps?.length;\n        let rightCount = currentStep + mid;\n        let leftCount = currentStep - Math.max(visibleStepCounts - mid, 0) - (remainingStepsFromRight > 0 ? remainingStepsFromRight : 0);\n        let newLeftTooltip = steps\n          ?.slice(0, leftCount)\n          ?.map((step) => step?.label)\n          ?.join(', ');\n        let newRightTooltip = steps\n          ?.slice(rightCount, steps?.length)\n          ?.map((step) => step?.label)\n          ?.join(', ');\n\n        if (disableOneMore && leftCount === 1) {\n          leftCount = 0;\n          newLeftTooltip = '';\n        }\n\n        if (disableOneMore && rightCount === steps.length - 1) {\n          rightCount = steps.length;\n          newRightTooltip = '';\n        }\n        setLeftMostStep(leftCount);\n        setRightMostStep(rightCount);\n        setLeftTooltip(newLeftTooltip);\n        setRightTooltip(newRightTooltip);\n      }\n    }\n  }, [visibleStepCounts, isAuthoringOpen, isMainSideBarOpen, steps, currentStep]);\n\n  useEventListener('resize', handleClientWidth);\n\n  const stepDetails = (step: TStep, index: number, hideLine = false) => {\n    return (\n      <div\n        key={index}\n        onClick={() => onClick?.(index)}\n        className={`flex ${index < steps.length - 1 || appearance == 'parallel' ? 'flex flex-grow' : ''}  min-w-[200px] ${\n          onClick ? 'cursor-pointer' : ''\n        }`}\n      >\n        <div className={`w-full flex flex-col`}>\n          <div className={`flex ${getLabelDescriptionPosition()} ${labelPosition === 'inline' && appearance === 'linear' ? 'items-center' : ''}`}>\n            <div className={`${labelPosition === 'inline' ? 'max-w-[70%]' : 'w-full'} flex flex-col`}>\n              <div className={`flex ${labelPosition === 'top-right' || labelPosition === 'bottom-right' ? 'justify-end' : ''}`}>\n                <Tooltip title={step?.tooltipText}>\n                  <Typography\n                    size='small'\n                    variant='medium'\n                    className={`truncate flex items-center ${\n                      index <= currentStep ? 'text-primary-600 dark:text-primary-300' : 'text-neutral-400 dark:text-neutral-100'\n                    }`}\n                    appearance='custom'\n                  >\n                    {showIndex ? (\n                      <div\n                        className={`${\n                          appearance === 'parallel'\n                            ? 'flex items-center'\n                            : `w-6 min-w-[24px] h-6 ${\n                                index <= currentStep ? 'bg-primary-600' : 'bg-neutral-400 dark:bg-black-400'\n                              } rounded-full flex items-center justify-center text-white`\n                        }`}\n                      >\n                        {step?.isLocked ? (\n                          <div className='flex items-center justify-center'>\n                            <Lock sx={{ fontSize: 16 }} />\n                          </div>\n                        ) : (\n                          <>\n                            {currentStep > index && appearance === 'linear' ? (\n                              <CheckIcon size={18} className='text-white dark:text-white' />\n                            ) : (\n                              <Typography\n                                size={`${appearance === 'parallel' ? 'small' : 'extra-small'}`}\n                                variant='medium'\n                                className='text-neutral-100'\n                                appearance='custom'\n                              >\n                                {index + 1}\n                              </Typography>\n                            )}\n                          </>\n                        )}\n                      </div>\n                    ) : null}\n\n                    <div className={`truncate ${labelPosition === 'inline' ? 'mx-2' : 'ml-2'} ${index <= currentStep ? '' : 'dark:text-black-200'}`}>\n                      {step?.label}\n                    </div>\n                  </Typography>\n                </Tooltip>\n              </div>\n\n              {labelPosition !== 'inline' || appearance === 'parallel' ? (\n                <div\n                  className={`flex ${\n                    labelPosition === 'top-right' || labelPosition === 'bottom-right' ? 'justify-end' : appearance === 'linear' ? 'ml-8' : ''\n                  }`}\n                >\n                  <Typography\n                    size='extra-small'\n                    variant='medium'\n                    className={`truncate ${index === currentStep ? 'text-neutral-900 dark:text-white' : 'text-neutral-400 dark:text-neutral-600'}`}\n                    appearance='custom'\n                  >\n                    {step?.description || ''}\n                  </Typography>\n                </div>\n              ) : null}\n            </div>\n            {index < steps.length - (appearance === 'linear' && labelPosition === 'inline' ? 1 : 0) && !hideLine ? (\n              <div\n                className={`w-full flex-grow h-0.5 min-w-[70px]  ${labelPosition !== 'inline' || appearance === 'parallel' ? 'my-2' : ''} ${\n                  index <= currentStep - (appearance === 'linear' && labelPosition === 'inline' ? 1 : 0) ? 'bg-primary-600' : 'bg-neutral-300'\n                }`}\n              />\n            ) : null}\n          </div>\n          {labelPosition === 'inline' && appearance === 'linear' ? (\n            <Typography\n              size='extra-small'\n              variant='medium'\n              className={`ml-8 truncate ${index === currentStep ? 'text-neutral-900 dark:text-white' : 'text-neutral-400 dark:text-neutral-600'}`}\n              appearance='custom'\n            >\n              {step?.description || ''}\n            </Typography>\n          ) : null}\n        </div>\n      </div>\n    );\n  };\n\n  return (\n    <div className={`w-full flex ${className}`} ref={stepsRef}>\n      {leftMostStep > 0 ? (\n        <div className={`flex ${appearance === 'parallel' ? 'flex-col' : ''}`}>\n          {onClick ? (\n            <Dropdown\n              menu={{\n                items: steps.slice(0, leftMostStep).map((step: TStep, index: number) => ({\n                  label: <div className='px-2 py-1'>{stepDetails(step, index, true)}</div>,\n                  key: index,\n                })),\n              }}\n              trigger={['click']}\n            >\n              <Typography\n                size='small'\n                variant='medium'\n                className={`px-2 ${steps.length - visibleStepCounts > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n                appearance='subtitle'\n              >\n                <Tooltip title={leftTooltip}>\n                  <div className='min-w-max'>\n                    {leftMostStep} More...\n                  </div>\n                </Tooltip>\n              </Typography>\n            </Dropdown>\n          ) : (\n            <Typography\n              size='small'\n              variant='medium'\n              className={`px-2 ${steps.length - visibleStepCounts > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n              appearance='subtitle'\n            >\n              <Tooltip title={leftTooltip}>\n                <div className='min-w-max'>\n                  {leftMostStep} More...\n                </div>\n              </Tooltip>\n            </Typography>\n          )}\n          <div className={`h-0.5 min-w-[40px] px-2 mr-2 bg-primary-600 ${appearance === 'parallel' ? 'mt-2' : 'mt-[11px]'}`} />\n        </div>\n      ) : null}\n\n      <div className='w-full flex flex-wrap gap-3 '>\n        {steps?.map((step: TStep, index: number) => {\n          if (leftMostStep <= index && index < rightMostStep) {\n            return stepDetails(step, index);\n          }\n          return null;\n        })}\n      </div>\n\n      {steps.length - rightMostStep > 0 ? (\n        <div className='flex flex-col'>\n          {onClick ? (\n            <Dropdown\n              menu={{\n                items: steps.slice(rightMostStep, steps?.length).map((step: TStep, index: number) => ({\n                  label: <div className='px-2 py-1'>{stepDetails(step, index + rightMostStep, true)}</div>,\n                  key: index,\n                })),\n              }}\n              trigger={['click']}\n            >\n              <Typography\n                size='small'\n                variant='medium'\n                className={`px-2 ${steps.length - rightMostStep > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n                appearance='subtitle'\n              >\n                <Tooltip title={rightTooltip}>\n                  <div className='min-w-max'>\n                    {steps.length - rightMostStep} More...\n                  </div>\n                </Tooltip>\n              </Typography>\n            </Dropdown>\n          ) : (\n            <Typography\n              size='small'\n              variant='medium'\n              className={`px-2 ${steps.length - rightMostStep > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n              appearance='subtitle'\n            >\n              <Tooltip title={rightTooltip}>\n                <div className='min-w-max'>\n                  {steps.length - rightMostStep} More...\n                </div>\n              </Tooltip>\n            </Typography>\n          )}\n\n          <div className={`h-0.5 min-w-[40px] px-2 ml-2 bg-neutral-300 ${appearance === 'parallel' ? 'mt-2' : 'hidden'}`} />\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nStepper.displayName = 'Stepper';\n\nexport default Stepper;\n\n\n\n"],"names":["Stepper","steps","currentStep","appearance","labelPosition","onClick","className","showIndex","disableOneMore","isMainSideBarOpen","isAuthoringOpen","stepsRef","useRef","visibleStepCounts","setVisibleStepCounts","useState","leftMostStep","setLeftMostStep","rightMostStep","setRightMostStep","leftTooltip","setLeftTooltip","rightTooltip","setRightTooltip","getLabelDescriptionPosition","handleClientWidth","moreWidth","stepTitleWidth","stepWidth","count","index","useEffect","newRightTooltip","step","rightCount","mid","remainingStepsFromRight","leftCount","newLeftTooltip","useEventListener","stepDetails","hideLine","jsx","jsxs","Tooltip","Typography","Lock","Fragment","CheckIcon","Dropdown"],"mappings":"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"}
+{"version":3,"file":"Stepper.es.js","sources":["../../../../src/components/navigation/stepper/Stepper.tsx"],"sourcesContent":["import { Lock } from '@mui/icons-material';\nimport { Dropdown } from 'antd';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { Typography } from '../../data-display/typography/Typography';\nimport Tooltip from '../../tooltip/Tooltip';\nimport { useEventListener } from '../../../hooks/useEventListener';\nimport { CheckIcon } from '../../icon';\n\nexport type TStep = {\n  label: string;\n  description?: string;\n  isLocked?: boolean;\n  tooltipText?: string;\n};\n\nexport type TStepperProps = {\n  steps: TStep[];\n  currentStep: number;\n  onClick?: (index: number) => void;\n  appearance?: 'linear' | 'parallel';\n  labelPosition?: 'top' | 'bottom' | 'inline' | 'top-right' | 'bottom-right';\n  className?: string;\n  showIndex?: boolean;\n  disableOneMore?: boolean;\n  lockConfig?: {\n    isLocked?: boolean;\n    tooltipText?: string;\n  };\n  /** Whether the main sidebar is open (affects responsive calculations) */\n  isMainSideBarOpen?: boolean;\n  /** Whether the authoring panel is open (affects responsive calculations) */\n  isAuthoringOpen?: boolean;\n};\n\n/**\n * Stepper component for multi-step workflows\n *\n * @example\n * ```tsx\n * <Stepper\n *   steps={[\n *     { label: 'Step 1', description: 'First step' },\n *     { label: 'Step 2', description: 'Second step' },\n *     { label: 'Step 3', description: 'Third step' },\n *   ]}\n *   currentStep={1}\n *   onClick={(index) => setCurrentStep(index)}\n * />\n * ```\n */\nconst Stepper = ({\n  steps,\n  currentStep,\n  appearance = 'linear',\n  labelPosition = 'inline',\n  onClick,\n  className,\n  showIndex = true,\n  disableOneMore = false,\n  isMainSideBarOpen = false,\n  isAuthoringOpen = false,\n}: TStepperProps) => {\n  const stepsRef = useRef<HTMLDivElement | null>(null);\n  const [visibleStepCounts, setVisibleStepCounts] = useState<number>(0);\n  const [leftMostStep, setLeftMostStep] = useState<number>(0);\n  const [rightMostStep, setRightMostStep] = useState<number>(0);\n  const [leftTooltip, setLeftTooltip] = useState<string>('');\n  const [rightTooltip, setRightTooltip] = useState<string>('');\n\n  const getLabelDescriptionPosition = () => {\n    if (labelPosition === 'top' || labelPosition === 'top-right') {\n      return 'flex-col';\n    } else if (labelPosition === 'bottom' || labelPosition === 'bottom-right') {\n      return 'flex-col-reverse';\n    } else if (appearance === 'linear') {\n      return 'flex-row';\n    } else {\n      return 'flex-col';\n    }\n  };\n\n  const handleClientWidth = () => {\n    setTimeout(() => {\n      setVisibleStepCounts(0);\n      const moreWidth = 210;\n      const stepTitleWidth = 225;\n      let stepWidth = 0;\n      let count = 0;\n      for (let index = 0; index < steps.length; index++) {\n        if (stepsRef?.current?.clientWidth && stepsRef?.current?.clientWidth > stepWidth + stepTitleWidth + moreWidth) {\n          stepWidth += stepTitleWidth;\n          count = index + 1;\n        } else {\n          break;\n        }\n      }\n      setVisibleStepCounts(count);\n      if (stepsRef?.current?.clientWidth && stepsRef?.current?.clientWidth < 480) {\n        setVisibleStepCounts(steps?.length);\n      }\n    }, 300);\n  };\n\n  useEffect(() => {\n    handleClientWidth();\n  }, [isMainSideBarOpen, steps, currentStep]);\n\n  useEffect(() => {\n    setTimeout(() => {\n      handleClientWidth();\n    }, 300);\n  }, [isAuthoringOpen]);\n\n  useEffect(() => {\n    if (visibleStepCounts > 0) {\n      if (visibleStepCounts > currentStep) {\n        let newRightTooltip = steps\n          ?.slice(visibleStepCounts, steps?.length)\n          ?.map((step) => step?.label)\n          ?.join(', ');\n\n        let rightCount = visibleStepCounts;\n        if (disableOneMore && rightCount === steps.length - 1) {\n          rightCount = steps.length;\n          newRightTooltip = '';\n        }\n        setLeftMostStep(0);\n        setRightMostStep(rightCount);\n        setRightTooltip(newRightTooltip);\n      } else {\n        const mid = Math.floor((visibleStepCounts + 1) / 2);\n        const remainingStepsFromRight = currentStep + mid - steps?.length;\n        let rightCount = currentStep + mid;\n        let leftCount = currentStep - Math.max(visibleStepCounts - mid, 0) - (remainingStepsFromRight > 0 ? remainingStepsFromRight : 0);\n        let newLeftTooltip = steps\n          ?.slice(0, leftCount)\n          ?.map((step) => step?.label)\n          ?.join(', ');\n        let newRightTooltip = steps\n          ?.slice(rightCount, steps?.length)\n          ?.map((step) => step?.label)\n          ?.join(', ');\n\n        if (disableOneMore && leftCount === 1) {\n          leftCount = 0;\n          newLeftTooltip = '';\n        }\n\n        if (disableOneMore && rightCount === steps.length - 1) {\n          rightCount = steps.length;\n          newRightTooltip = '';\n        }\n        setLeftMostStep(leftCount);\n        setRightMostStep(rightCount);\n        setLeftTooltip(newLeftTooltip);\n        setRightTooltip(newRightTooltip);\n      }\n    }\n  }, [visibleStepCounts, isAuthoringOpen, isMainSideBarOpen, steps, currentStep]);\n\n  useEventListener('resize', handleClientWidth);\n\n  const stepDetails = (step: TStep, index: number, hideLine = false) => {\n    return (\n      <div\n        key={index}\n        onClick={() => onClick?.(index)}\n        className={`flex ${index < steps.length - 1 || appearance == 'parallel' ? 'flex flex-grow' : ''}  min-w-[200px] ${\n          onClick ? 'cursor-pointer' : ''\n        }`}\n      >\n        <div className={`w-full flex flex-col`}>\n          <div className={`flex ${getLabelDescriptionPosition()} ${labelPosition === 'inline' && appearance === 'linear' ? 'items-center' : ''}`}>\n            <div className={`${labelPosition === 'inline' ? 'max-w-[70%]' : 'w-full'} flex flex-col`}>\n              <div className={`flex ${labelPosition === 'top-right' || labelPosition === 'bottom-right' ? 'justify-end' : ''}`}>\n                <Tooltip title={step?.tooltipText}>\n                  <Typography\n                    size='small'\n                    variant='medium'\n                    className={`truncate flex items-center ${\n                      index <= currentStep ? 'text-primary-600 dark:text-primary-300' : 'text-neutral-400 dark:text-neutral-100'\n                    }`}\n                    appearance='custom'\n                  >\n                    {showIndex ? (\n                      <div\n                        className={`${\n                          appearance === 'parallel'\n                            ? 'flex items-center'\n                            : `w-6 h-6 ${\n                                index <= currentStep ? 'bg-primary-600' : 'bg-neutral-400 dark:bg-black-400'\n                              } rounded-full flex items-center justify-center text-white`\n                        }`}\n                      >\n                        {step?.isLocked ? (\n                          <div className='flex items-center justify-center'>\n                            <Lock sx={{ fontSize: 16 }} />\n                          </div>\n                        ) : (\n                          <>\n                            {currentStep > index && appearance === 'linear' ? (\n                              <CheckIcon size={18} className='text-white dark:text-white' />\n                            ) : (\n                              <Typography\n                                size={`${appearance === 'parallel' ? 'small' : 'extra-small'}`}\n                                variant='medium'\n                                className='text-neutral-100'\n                                appearance='custom'\n                              >\n                                {index + 1}\n                              </Typography>\n                            )}\n                          </>\n                        )}\n                      </div>\n                    ) : null}\n\n                    <div className={`truncate ${labelPosition === 'inline' ? 'mx-2' : 'ml-2'} ${index <= currentStep ? '' : 'dark:text-black-200'}`}>\n                      {step?.label}\n                    </div>\n                  </Typography>\n                </Tooltip>\n              </div>\n\n              {labelPosition !== 'inline' || appearance === 'parallel' ? (\n                <div\n                  className={`flex ${\n                    labelPosition === 'top-right' || labelPosition === 'bottom-right' ? 'justify-end' : appearance === 'linear' ? 'ml-8' : ''\n                  }`}\n                >\n                  <Typography\n                    size='extra-small'\n                    variant='medium'\n                    className={`truncate ${index === currentStep ? 'text-neutral-900 dark:text-white' : 'text-neutral-400 dark:text-neutral-600'}`}\n                    appearance='custom'\n                  >\n                    {step?.description || ''}\n                  </Typography>\n                </div>\n              ) : null}\n            </div>\n            {index < steps.length - (appearance === 'linear' && labelPosition === 'inline' ? 1 : 0) && !hideLine ? (\n              <div\n                className={`w-full flex-grow h-0.5 min-w-[70px]  ${labelPosition !== 'inline' || appearance === 'parallel' ? 'my-2' : ''} ${\n                  index <= currentStep - (appearance === 'linear' && labelPosition === 'inline' ? 1 : 0) ? 'bg-primary-600' : 'bg-neutral-300'\n                }`}\n              />\n            ) : null}\n          </div>\n          {labelPosition === 'inline' && appearance === 'linear' ? (\n            <Typography\n              size='extra-small'\n              variant='medium'\n              className={`ml-8 truncate ${index === currentStep ? 'text-neutral-900 dark:text-white' : 'text-neutral-400 dark:text-neutral-600'}`}\n              appearance='custom'\n            >\n              {step?.description || ''}\n            </Typography>\n          ) : null}\n        </div>\n      </div>\n    );\n  };\n\n  return (\n    <div className={`w-full flex ${className}`} ref={stepsRef}>\n      {leftMostStep > 0 ? (\n        <div className={`flex ${appearance === 'parallel' ? 'flex-col' : ''}`}>\n          {onClick ? (\n            <Dropdown\n              menu={{\n                items: steps.slice(0, leftMostStep).map((step: TStep, index: number) => ({\n                  label: <div className='px-2 py-1'>{stepDetails(step, index, true)}</div>,\n                  key: index,\n                })),\n              }}\n              trigger={['click']}\n            >\n              <Typography\n                size='small'\n                variant='medium'\n                className={`px-2 ${steps.length - visibleStepCounts > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n                appearance='subtitle'\n              >\n                <Tooltip title={leftTooltip}>\n                  <div className='min-w-max'>\n                    {leftMostStep} More...\n                  </div>\n                </Tooltip>\n              </Typography>\n            </Dropdown>\n          ) : (\n            <Typography\n              size='small'\n              variant='medium'\n              className={`px-2 ${steps.length - visibleStepCounts > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n              appearance='subtitle'\n            >\n              <Tooltip title={leftTooltip}>\n                <div className='min-w-max'>\n                  {leftMostStep} More...\n                </div>\n              </Tooltip>\n            </Typography>\n          )}\n          <div className={`h-0.5 min-w-[40px] px-2 mr-2 bg-primary-600 ${appearance === 'parallel' ? 'mt-2' : 'mt-[11px]'}`} />\n        </div>\n      ) : null}\n\n      <div className='w-full flex flex-wrap gap-3 '>\n        {steps?.map((step: TStep, index: number) => {\n          if (leftMostStep <= index && index < rightMostStep) {\n            return stepDetails(step, index);\n          }\n          return null;\n        })}\n      </div>\n\n      {steps.length - rightMostStep > 0 ? (\n        <div className='flex flex-col'>\n          {onClick ? (\n            <Dropdown\n              menu={{\n                items: steps.slice(rightMostStep, steps?.length).map((step: TStep, index: number) => ({\n                  label: <div className='px-2 py-1'>{stepDetails(step, index + rightMostStep, true)}</div>,\n                  key: index,\n                })),\n              }}\n              trigger={['click']}\n            >\n              <Typography\n                size='small'\n                variant='medium'\n                className={`px-2 ${steps.length - rightMostStep > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n                appearance='subtitle'\n              >\n                <Tooltip title={rightTooltip}>\n                  <div className='min-w-max'>\n                    {steps.length - rightMostStep} More...\n                  </div>\n                </Tooltip>\n              </Typography>\n            </Dropdown>\n          ) : (\n            <Typography\n              size='small'\n              variant='medium'\n              className={`px-2 ${steps.length - rightMostStep > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n              appearance='subtitle'\n            >\n              <Tooltip title={rightTooltip}>\n                <div className='min-w-max'>\n                  {steps.length - rightMostStep} More...\n                </div>\n              </Tooltip>\n            </Typography>\n          )}\n\n          <div className={`h-0.5 min-w-[40px] px-2 ml-2 bg-neutral-300 ${appearance === 'parallel' ? 'mt-2' : 'hidden'}`} />\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nStepper.displayName = 'Stepper';\n\nexport default Stepper;\n\n\n\n"],"names":["Stepper","steps","currentStep","appearance","labelPosition","onClick","className","showIndex","disableOneMore","isMainSideBarOpen","isAuthoringOpen","stepsRef","useRef","visibleStepCounts","setVisibleStepCounts","useState","leftMostStep","setLeftMostStep","rightMostStep","setRightMostStep","leftTooltip","setLeftTooltip","rightTooltip","setRightTooltip","getLabelDescriptionPosition","handleClientWidth","moreWidth","stepTitleWidth","stepWidth","count","index","useEffect","newRightTooltip","step","rightCount","mid","remainingStepsFromRight","leftCount","newLeftTooltip","useEventListener","stepDetails","hideLine","jsx","jsxs","Tooltip","Typography","Lock","Fragment","CheckIcon","Dropdown"],"mappings":"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"}