@lax-wp/design-system 0.14.54 → 0.14.55

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

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),A=require("@mui/icons-material"),E=require("antd"),u=require("react"),x=require("../../data-display/typography/Typography.cjs.js"),v=require("../../tooltip/Tooltip.cjs.js"),K=require("../../../hooks/useEventListener.cjs.js"),V=require("../../icon/icons.generated.cjs.js"),I=({steps:t,currentStep:s,appearance:a="linear",labelPosition:r="inline",onClick:d,isStepClickable:k,className:C,showIndex:B=!0,disableOneMore:y=!1,isMainSideBarOpen:b=!1,isAuthoringOpen:z=!1})=>{const g=u.useRef(null),[m,w]=u.useState(0),[j,L]=u.useState(0),[h,R]=u.useState(0),[q,F]=u.useState(""),[W,D]=u.useState(""),S=()=>r==="top"||r==="top-right"?"flex-col":r==="bottom"||r==="bottom-right"?"flex-col-reverse":a==="linear"?"flex-row":"flex-col",N=()=>{setTimeout(()=>{w(0);const i=210,l=225;let n=0,o=0;for(let c=0;c<t.length&&(g?.current?.clientWidth&&g?.current?.clientWidth>n+l+i);c++)n+=l,o=c+1;w(o),g?.current?.clientWidth&&g?.current?.clientWidth<480&&w(t?.length)},300)};u.useEffect(()=>{N()},[b,t,s]),u.useEffect(()=>{setTimeout(()=>{N()},300)},[z]),u.useEffect(()=>{if(m>0)if(m>s){let i=t?.slice(m,t?.length)?.map(n=>n?.label)?.join(", "),l=m;y&&l===t.length-1&&(l=t.length,i=""),L(0),R(l),D(i)}else{const i=Math.floor((m+1)/2),l=s+i-t?.length;let n=s+i,o=s-Math.max(m-i,0)-(l>0?l:0),c=t?.slice(0,o)?.map(p=>p?.label)?.join(", "),f=t?.slice(n,t?.length)?.map(p=>p?.label)?.join(", ");y&&o===1&&(o=0,c=""),y&&n===t.length-1&&(n=t.length,f=""),L(o),R(n),F(c),D(f)}},[m,z,b,t,s]),K.useEventListener("resize",N);const $=(i,l,n=!1)=>{const o=!!i?.isLocked||!!i?.isDisabled||(k?!k(l,i):!1),c=!!d&&!o,f=()=>{c&&d?.(l)},p=d?{role:"button",tabIndex:c?0:-1,"aria-disabled":!c,onClick:f,onKeyDown:T=>{(T.key==="Enter"||T.key===" ")&&(T.preventDefault(),f())}}:{},M=d?c?"cursor-pointer rounded-sm transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600":"cursor-not-allowed":"";return e.jsx("div",{"aria-current":l===s?"step":void 0,className:`flex ${l<t.length-1||a=="parallel"?"flex flex-grow":""}  min-w-[200px]`,children:e.jsxs("div",{className:"w-full flex flex-col",children:[e.jsxs("div",{className:`flex ${S()} ${r==="inline"&&a==="linear"?"items-center":""}`,children:[e.jsxs("div",{...p,className:`${r==="inline"?"max-w-[70%]":"w-full"} flex flex-col ${M}`,children:[e.jsx("div",{className:`flex ${r==="top-right"||r==="bottom-right"?"justify-end":""}`,children:e.jsx(v,{title:o&&i?.disabledTooltipText||i?.tooltipText,children:e.jsxs(x.Typography,{size:"small",variant:"medium",className:`truncate flex items-center ${l<=s?"text-primary-600 dark:text-primary-300":"text-neutral-400 dark:text-neutral-100"}`,appearance:"custom",children:[B?e.jsx("div",{className:`${a==="parallel"?"flex items-center":`w-6 h-6 ${l<=s?"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(A.Lock,{sx:{fontSize:16}})}):e.jsx(e.Fragment,{children:s>l&&a==="linear"?e.jsx(V.CheckIcon,{size:18,className:"text-white dark:text-white"}):e.jsx(x.Typography,{size:`${a==="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<=s?"":"dark:text-black-200"}`,children:i?.label})]})})}),r!=="inline"||a==="parallel"?e.jsx("div",{className:`flex ${r==="top-right"||r==="bottom-right"?"justify-end":a==="linear"?"ml-8":""}`,children:e.jsx(x.Typography,{size:"extra-small",variant:"medium",className:`truncate ${l===s?"text-neutral-900 dark:text-white":"text-neutral-400 dark:text-neutral-600"}`,appearance:"custom",children:i?.description||""})}):null]}),l<t.length-(a==="linear"&&r==="inline"?1:0)&&!n?e.jsx("div",{className:`w-full flex-grow h-0.5 min-w-[70px]  ${r!=="inline"||a==="parallel"?"my-2":""} ${l<=s-(a==="linear"&&r==="inline"?1:0)?"bg-primary-600":"bg-neutral-300"}`}):null]}),r==="inline"&&a==="linear"?e.jsx("div",{className:`w-fit max-w-full ${M}`,onClick:f,children:e.jsx(x.Typography,{size:"extra-small",variant:"medium",className:`ml-8 truncate ${l===s?"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:g,children:[j>0?e.jsxs("div",{className:`flex ${a==="parallel"?"flex-col":""}`,children:[d?e.jsx(E.Dropdown,{menu:{items:t.slice(0,j).map((i,l)=>({label:e.jsx("div",{className:"px-2 py-1",children:$(i,l,!0)}),key:l}))},trigger:["click"],children:e.jsx(x.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-m>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(v,{title:q,children:e.jsxs("div",{className:"min-w-max",children:[j," More..."]})})})}):e.jsx(x.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-m>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(v,{title:q,children:e.jsxs("div",{className:"min-w-max",children:[j," More..."]})})}),e.jsx("div",{className:`h-0.5 min-w-[40px] px-2 mr-2 bg-primary-600 ${a==="parallel"?"mt-2":"mt-[11px]"}`})]}):null,e.jsx("div",{className:"w-full flex flex-wrap gap-3 ",children:t?.map((i,l)=>j<=l&&l<h?$(i,l):null)}),t.length-h>0?e.jsxs("div",{className:"flex flex-col",children:[d?e.jsx(E.Dropdown,{menu:{items:t.slice(h,t?.length).map((i,l)=>({label:e.jsx("div",{className:"px-2 py-1",children:$(i,l+h,!0)}),key:l}))},trigger:["click"],children:e.jsx(x.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-h>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(v,{title:W,children:e.jsxs("div",{className:"min-w-max",children:[t.length-h," More..."]})})})}):e.jsx(x.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-h>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(v,{title:W,children:e.jsxs("div",{className:"min-w-max",children:[t.length-h," More..."]})})}),e.jsx("div",{className:`h-0.5 min-w-[40px] px-2 ml-2 bg-neutral-300 ${a==="parallel"?"mt-2":"hidden"}`})]}):null]})};I.displayName="Stepper";module.exports=I;
+"use strict";const e=require("react/jsx-runtime"),K=require("@mui/icons-material"),M=require("antd"),h=require("react"),x=require("../../data-display/typography/Typography.cjs.js"),j=require("../../tooltip/Tooltip.cjs.js"),S=require("../../../hooks/useEventListener.cjs.js"),V=require("../../icon/icons.generated.cjs.js"),E=({steps:t,currentStep:a,appearance:i="linear",labelPosition:s="inline",onClick:m,isStepClickable:$,className:I,showIndex:B=!0,disableOneMore:w=!1,isMainSideBarOpen:k=!1,isAuthoringOpen:T=!1})=>{const p=h.useRef(null),[u,y]=h.useState(0),[v,z]=h.useState(0),[d,R]=h.useState(0),[L,C]=h.useState(""),[q,W]=h.useState(""),F=()=>s==="top"||s==="top-right"?"flex-col":s==="bottom"||s==="bottom-right"?"flex-col-reverse":i==="linear"?"flex-row":"flex-col",N=()=>{setTimeout(()=>{y(0);const r=210,l=225;let o=0,c=0;for(let n=0;n<t.length&&(p?.current?.clientWidth&&p?.current?.clientWidth>o+l+r);n++)o+=l,c=n+1;y(c),p?.current?.clientWidth&&p?.current?.clientWidth<480&&y(t?.length)},300)};h.useEffect(()=>{N()},[k,t,a]),h.useEffect(()=>{setTimeout(()=>{N()},300)},[T]),h.useEffect(()=>{if(u>0)if(u>a){let r=t?.slice(u,t?.length)?.map(o=>o?.label)?.join(", "),l=u;w&&l===t.length-1&&(l=t.length,r=""),z(0),R(l),W(r)}else{const r=Math.floor((u+1)/2),l=a+r-t?.length;let o=a+r,c=a-Math.max(u-r,0)-(l>0?l:0),n=t?.slice(0,c)?.map(g=>g?.label)?.join(", "),f=t?.slice(o,t?.length)?.map(g=>g?.label)?.join(", ");w&&c===1&&(c=0,n=""),w&&o===t.length-1&&(o=t.length,f=""),z(c),R(o),C(n),W(f)}},[u,T,k,t,a]),S.useEventListener("resize",N);const b=(r,l,o=!1)=>{const c=!!r?.isLocked||!!r?.isDisabled||($?!$(l,r):!1),n=!!m&&!c,f=l<=a,g=()=>{n&&m?.(l)},A=m?{role:"button",tabIndex:n?0:-1,"aria-disabled":!n,onClick:g,onKeyDown:_=>{(_.key==="Enter"||_.key===" ")&&(_.preventDefault(),g())}}:{},D=m?n?"group cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 rounded-sm":"group cursor-not-allowed":"",H=m?`rounded-full transition-colors duration-200 w-24 h-9 ${n?f?"group-hover:bg-primary-50 dark:group-hover:bg-primary-950":"group-hover:bg-neutral-100 dark:group-hover:bg-black-700":"group-hover:bg-neutral-50 dark:group-hover:bg-black-800"}`:"";return e.jsx("div",{"aria-current":l===a?"step":void 0,className:`flex ${l<t.length-1||i=="parallel"?"flex flex-grow":""}  min-w-[200px]`,children:e.jsxs("div",{className:"w-full flex flex-col",children:[e.jsxs("div",{className:`flex ${F()} ${s==="inline"&&i==="linear"?"items-center":""}`,children:[e.jsxs("div",{...A,className:`${s==="inline"?"max-w-[70%]":"w-full"} flex flex-col ${D}`,children:[e.jsx("div",{className:`flex ${s==="top-right"||s==="bottom-right"?"justify-end":""} ${H}`,children:e.jsx(j,{title:c&&r?.disabledTooltipText||r?.tooltipText,className:"w-full",children:e.jsxs(x.Typography,{size:"small",variant:"medium",className:`truncate flex items-center justify-center gap-2 h-9 ${l<=a?"text-primary-600 dark:text-primary-300":"text-neutral-400 dark:text-neutral-100"}`,appearance:"custom",children:[B?e.jsx("div",{className:`${i==="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 transition-transform duration-200 ${m?c?`group-hover:animate-nudge ${f?"group-hover:shadow-[0_0_0_4px_rgba(1,109,207,0.10)] dark:group-hover:shadow-[0_0_0_4px_rgba(138,192,242,0.15)]":"group-hover:shadow-[0_0_0_4px_rgba(102,112,133,0.10)] dark:group-hover:shadow-[0_0_0_4px_rgba(152,162,179,0.15)]"}`:`group-hover:scale-105 ${f?"group-hover:shadow-[0_0_0_4px_rgba(1,109,207,0.18)] dark:group-hover:shadow-[0_0_0_4px_rgba(138,192,242,0.25)]":"group-hover:shadow-[0_0_0_4px_rgba(102,112,133,0.15)] dark:group-hover:shadow-[0_0_0_4px_rgba(152,162,179,0.25)]"}`:""}`}`,children:r?.isLocked?e.jsx("div",{className:"flex items-center justify-center",children:e.jsx(K.Lock,{sx:{fontSize:16}})}):e.jsx(e.Fragment,{children:a>l&&i==="linear"?e.jsx(V.CheckIcon,{size:18,className:"text-white dark:text-white"}):e.jsx(x.Typography,{size:`${i==="parallel"?"small":"extra-small"}`,variant:"medium",className:"text-neutral-100",appearance:"custom",children:l+1})})}):null,e.jsx("div",{className:`truncate mr-3 ${l<=a?"":"dark:text-black-200"}`,children:r?.label})]})})}),s!=="inline"||i==="parallel"?e.jsx("div",{className:`flex ${s==="top-right"||s==="bottom-right"?"justify-end":i==="linear"?"ml-8":""}`,children:e.jsx(x.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:r?.description||""})}):null]}),l<t.length-(i==="linear"&&s==="inline"?1:0)&&!o?e.jsx("div",{className:`w-full flex-grow h-0.5 min-w-[70px]  ${s!=="inline"||i==="parallel"?"my-2":""} ${l<=a-(i==="linear"&&s==="inline"?1:0)?"bg-primary-600":"bg-neutral-300"}`}):null]}),s==="inline"&&i==="linear"?e.jsx("div",{className:`w-fit max-w-full ${D}`,onClick:g,children:e.jsx(x.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:r?.description||""})}):null]})},l)};return e.jsxs("div",{className:`w-full flex ${I}`,ref:p,children:[v>0?e.jsxs("div",{className:`flex ${i==="parallel"?"flex-col":""}`,children:[m?e.jsx(M.Dropdown,{menu:{items:t.slice(0,v).map((r,l)=>({label:e.jsx("div",{className:"px-2 py-1",children:b(r,l,!0)}),key:l}))},trigger:["click"],children:e.jsx(x.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-u>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(j,{title:L,children:e.jsxs("div",{className:"min-w-max",children:[v," More..."]})})})}):e.jsx(x.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-u>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(j,{title:L,children:e.jsxs("div",{className:"min-w-max",children:[v," More..."]})})}),e.jsx("div",{className:`h-0.5 min-w-[40px] px-2 mr-2 bg-primary-600 ${i==="parallel"?"mt-2":"mt-[11px]"}`})]}):null,e.jsx("div",{className:"w-full flex flex-wrap",children:t?.map((r,l)=>v<=l&&l<d?b(r,l):null)}),t.length-d>0?e.jsxs("div",{className:"flex flex-col",children:[m?e.jsx(M.Dropdown,{menu:{items:t.slice(d,t?.length).map((r,l)=>({label:e.jsx("div",{className:"px-2 py-1",children:b(r,l+d,!0)}),key:l}))},trigger:["click"],children:e.jsx(x.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-d>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(j,{title:q,children:e.jsxs("div",{className:"min-w-max",children:[t.length-d," More..."]})})})}):e.jsx(x.Typography,{size:"small",variant:"medium",className:`px-2 ${t.length-d>0?"cursor-pointer":"cursor-not-allowed"}`,appearance:"subtitle",children:e.jsx(j,{title:q,children:e.jsxs("div",{className:"min-w-max",children:[t.length-d," More..."]})})}),e.jsx("div",{className:`h-0.5 min-w-[40px] px-2 ml-2 bg-neutral-300 ${i==="parallel"?"mt-2":"hidden"}`})]}):null]})};E.displayName="Stepper";module.exports=E;
 //# 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 type { KeyboardEvent } from 'react';\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  /** Prevents navigating to this step (e.g. validation not satisfied yet). Locked steps are always non-navigable. */\n  isDisabled?: boolean;\n  /** Tooltip shown when the step cannot be navigated to. Falls back to `tooltipText`. */\n  disabledTooltipText?: string;\n};\n\nexport type TStepperProps = {\n  steps: TStep[];\n  currentStep: number;\n  /**\n   * Called when a navigable step title is clicked (or activated with Enter/Space).\n   * Steps that are locked, disabled or rejected by `isStepClickable` never invoke it.\n   */\n  onClick?: (index: number) => void;\n  /**\n   * Optional gate for step navigation, so consumers can enforce their own validation\n   * and step-access rules (e.g. only allow jumping to already visited steps).\n   * Returning `false` renders the step title as non-navigable.\n   */\n  isStepClickable?: (index: number, step: TStep) => boolean;\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 *   // only allow jumping to steps the user has already reached\n *   isStepClickable={(index) => index <= furthestVisitedStep}\n * />\n * ```\n *\n * Step titles are clickable whenever `onClick` is provided. A step is not navigable\n * when it is `isLocked`, `isDisabled`, or rejected by `isStepClickable`.\n */\nconst Stepper = ({\n  steps,\n  currentStep,\n  appearance = 'linear',\n  labelPosition = 'inline',\n  onClick,\n  isStepClickable,\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    const isStepBlocked = Boolean(step?.isLocked) || Boolean(step?.isDisabled) || (isStepClickable ? !isStepClickable(index, step) : false);\n    const isNavigable = Boolean(onClick) && !isStepBlocked;\n\n    const handleStepActivate = () => {\n      if (!isNavigable) return;\n      onClick?.(index);\n    };\n\n    /** Applied to the step title/description so only they react to clicks, not the connector line. */\n    const titleInteractionProps = onClick\n      ? {\n          role: 'button' as const,\n          tabIndex: isNavigable ? 0 : -1,\n          'aria-disabled': !isNavigable,\n          onClick: handleStepActivate,\n          onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n              event.preventDefault();\n              handleStepActivate();\n            }\n          },\n        }\n      : {};\n\n    const titleInteractionClassName = onClick\n      ? isNavigable\n        ? 'cursor-pointer rounded-sm transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600'\n        : 'cursor-not-allowed'\n      : '';\n\n    return (\n      <div\n        key={index}\n        aria-current={index === currentStep ? 'step' : undefined}\n        className={`flex ${index < steps.length - 1 || appearance == 'parallel' ? 'flex flex-grow' : ''}  min-w-[200px]`}\n      >\n        <div className={`w-full flex flex-col`}>\n          <div className={`flex ${getLabelDescriptionPosition()} ${labelPosition === 'inline' && appearance === 'linear' ? 'items-center' : ''}`}>\n            <div\n              {...titleInteractionProps}\n              className={`${labelPosition === 'inline' ? 'max-w-[70%]' : 'w-full'} flex flex-col ${titleInteractionClassName}`}\n            >\n              <div className={`flex ${labelPosition === 'top-right' || labelPosition === 'bottom-right' ? 'justify-end' : ''}`}>\n                <Tooltip title={isStepBlocked ? step?.disabledTooltipText || step?.tooltipText : 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            <div className={`w-fit max-w-full ${titleInteractionClassName}`} onClick={handleStepActivate}>\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            </div>\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","isStepClickable","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","isStepBlocked","isNavigable","handleStepActivate","titleInteractionProps","event","titleInteractionClassName","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 type { KeyboardEvent } from 'react';\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  /** Prevents navigating to this step (e.g. validation not satisfied yet). Locked steps are always non-navigable. */\n  isDisabled?: boolean;\n  /** Tooltip shown when the step cannot be navigated to. Falls back to `tooltipText`. */\n  disabledTooltipText?: string;\n};\n\nexport type TStepperProps = {\n  steps: TStep[];\n  currentStep: number;\n  /**\n   * Called when a navigable step title is clicked (or activated with Enter/Space).\n   * Steps that are locked, disabled or rejected by `isStepClickable` never invoke it.\n   */\n  onClick?: (index: number) => void;\n  /**\n   * Optional gate for step navigation, so consumers can enforce their own validation\n   * and step-access rules (e.g. only allow jumping to already visited steps).\n   * Returning `false` renders the step title as non-navigable.\n   */\n  isStepClickable?: (index: number, step: TStep) => boolean;\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 *   // only allow jumping to steps the user has already reached\n *   isStepClickable={(index) => index <= furthestVisitedStep}\n * />\n * ```\n *\n * Step titles are clickable whenever `onClick` is provided. A step is not navigable\n * when it is `isLocked`, `isDisabled`, or rejected by `isStepClickable`.\n */\nconst Stepper = ({\n  steps,\n  currentStep,\n  appearance = 'linear',\n  labelPosition = 'inline',\n  onClick,\n  isStepClickable,\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    const isStepBlocked = Boolean(step?.isLocked) || Boolean(step?.isDisabled) || (isStepClickable ? !isStepClickable(index, step) : false);\n    const isNavigable = Boolean(onClick) && !isStepBlocked;\n    /** Steps already reached (done/current) get the primary-tinted hover, upcoming steps get the neutral one. */\n    const isReached = index <= currentStep;\n\n    const handleStepActivate = () => {\n      if (!isNavigable) return;\n      onClick?.(index);\n    };\n\n    /** Applied to the step title/description so only they react to clicks, not the connector line. */\n    const titleInteractionProps = onClick\n      ? {\n          role: 'button' as const,\n          tabIndex: isNavigable ? 0 : -1,\n          'aria-disabled': !isNavigable,\n          onClick: handleStepActivate,\n          onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n              event.preventDefault();\n              handleStepActivate();\n            }\n          },\n        }\n      : {};\n\n    /**\n     * `group` lets the icon+label row and the dot (both nested below) react to hovering the\n     * whole title via `group-hover:*`, even though the visible pill background only paints on\n     * the icon+label row itself — not the description under it.\n     */\n    const titleInteractionClassName = onClick\n      ? isNavigable\n        ? 'group cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 rounded-sm'\n        : 'group cursor-not-allowed'\n      : '';\n\n    /**\n     * Background for the icon+label row only (never the description below it), and sized to\n     * the row's own natural box — no padding is added, so the pill can never need to paint\n     * outside the element's existing bounds. That matters because the Stepper is often nested\n     * inside headers/panels with little to no vertical slack (fixed row heights, `overflow-hidden`\n     * wrappers), where even reserved-but-added padding gets visibly clipped.\n     */\n    const titleRowHoverClassName = onClick\n      ? `rounded-full transition-colors duration-200 w-24 h-9 ${\n          isNavigable\n            ? isReached\n              ? 'group-hover:bg-primary-50 dark:group-hover:bg-primary-950'\n              : 'group-hover:bg-neutral-100 dark:group-hover:bg-black-700'\n            : 'group-hover:bg-neutral-50 dark:group-hover:bg-black-800'\n        }`\n      : '';\n\n    return (\n      <div\n        key={index}\n        aria-current={index === currentStep ? 'step' : undefined}\n        className={`flex ${index < steps.length - 1 || appearance == 'parallel' ? 'flex flex-grow' : ''}  min-w-[200px]`}\n      >\n        <div className={`w-full flex flex-col`}>\n          <div className={`flex ${getLabelDescriptionPosition()} ${labelPosition === 'inline' && appearance === 'linear' ? 'items-center' : ''}`}>\n            <div\n              {...titleInteractionProps}\n              className={`${labelPosition === 'inline' ? 'max-w-[70%]' : 'w-full'} flex flex-col ${titleInteractionClassName}`}\n            >\n              <div\n                className={`flex ${\n                  labelPosition === 'top-right' || labelPosition === 'bottom-right' ? 'justify-end' : ''\n                } ${titleRowHoverClassName}`}\n              >\n                <Tooltip title={isStepBlocked ? step?.disabledTooltipText || step?.tooltipText : step?.tooltipText} className='w-full'>\n                  <Typography\n                    size='small'\n                    variant='medium'\n                    className={`truncate flex items-center justify-center gap-2 h-9 ${\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 transition-transform duration-200 ${\n                                onClick\n                                  ? isStepBlocked\n                                    ? `group-hover:animate-nudge ${\n                                        isReached\n                                          ? 'group-hover:shadow-[0_0_0_4px_rgba(1,109,207,0.10)] dark:group-hover:shadow-[0_0_0_4px_rgba(138,192,242,0.15)]'\n                                          : 'group-hover:shadow-[0_0_0_4px_rgba(102,112,133,0.10)] dark:group-hover:shadow-[0_0_0_4px_rgba(152,162,179,0.15)]'\n                                      }`\n                                    : `group-hover:scale-105 ${\n                                        isReached\n                                          ? 'group-hover:shadow-[0_0_0_4px_rgba(1,109,207,0.18)] dark:group-hover:shadow-[0_0_0_4px_rgba(138,192,242,0.25)]'\n                                          : 'group-hover:shadow-[0_0_0_4px_rgba(102,112,133,0.15)] dark:group-hover:shadow-[0_0_0_4px_rgba(152,162,179,0.25)]'\n                                      }`\n                                  : ''\n                              }`\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 mr-3 ${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            <div className={`w-fit max-w-full ${titleInteractionClassName}`} onClick={handleStepActivate}>\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            </div>\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'>\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","isStepClickable","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","isStepBlocked","isNavigable","isReached","handleStepActivate","titleInteractionProps","event","titleInteractionClassName","titleRowHoverClassName","jsx","jsxs","Tooltip","Typography","Lock","Fragment","CheckIcon","Dropdown"],"mappings":"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"}

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

@@ -1,116 +1,122 @@
 import { jsxs as c, jsx as l, Fragment as A } from "react/jsx-runtime";
 import { Lock as G } from "@mui/icons-material";
-import { Dropdown as E } from "antd";
-import { useRef as H, useState as N, useEffect as z } from "react";
-import { Typography as u } from "../../data-display/typography/Typography.es.js";
-import p from "../../tooltip/Tooltip.es.js";
-import { useEventListener as J } from "../../../hooks/useEventListener.es.js";
-import { CheckIcon as Q } from "../../icon/icons.generated.es.js";
-const U = ({
+import { Dropdown as C } from "antd";
+import { useRef as J, useState as w, useEffect as T } from "react";
+import { Typography as f } from "../../data-display/typography/Typography.es.js";
+import N from "../../tooltip/Tooltip.es.js";
+import { useEventListener as Q } from "../../../hooks/useEventListener.es.js";
+import { CheckIcon as U } from "../../icon/icons.generated.es.js";
+const X = ({
   steps: t,
-  currentStep: n,
+  currentStep: i,
   appearance: a = "linear",
-  labelPosition: r = "inline",
-  onClick: f,
-  isStepClickable: j,
-  className: F,
-  showIndex: K = !0,
-  disableOneMore: $ = !1,
-  isMainSideBarOpen: L = !1,
-  isAuthoringOpen: W = !1
+  labelPosition: o = "inline",
+  onClick: d,
+  isStepClickable: z,
+  className: E,
+  showIndex: F = !0,
+  disableOneMore: b = !1,
+  isMainSideBarOpen: j = !1,
+  isAuthoringOpen: R = !1
 }) => {
-  const g = H(null), [d, y] = N(0), [v, M] = N(0), [h, R] = N(0), [D, V] = N(""), [C, I] = N(""), q = () => r === "top" || r === "top-right" ? "flex-col" : r === "bottom" || r === "bottom-right" ? "flex-col-reverse" : a === "linear" ? "flex-row" : "flex-col", k = () => {
+  const p = J(null), [h, _] = w(0), [v, L] = w(0), [u, W] = w(0), [M, H] = w(""), [D, I] = w(""), K = () => o === "top" || o === "top-right" ? "flex-col" : o === "bottom" || o === "bottom-right" ? "flex-col-reverse" : a === "linear" ? "flex-row" : "flex-col", $ = () => {
     setTimeout(() => {
-      y(0);
-      const i = 210, e = 225;
-      let m = 0, s = 0;
-      for (let o = 0; o < t.length && (g?.current?.clientWidth && g?.current?.clientWidth > m + e + i); o++)
-        m += e, s = o + 1;
-      y(s), g?.current?.clientWidth && g?.current?.clientWidth < 480 && y(t?.length);
+      _(0);
+      const r = 210, e = 225;
+      let s = 0, m = 0;
+      for (let n = 0; n < t.length && (p?.current?.clientWidth && p?.current?.clientWidth > s + e + r); n++)
+        s += e, m = n + 1;
+      _(m), p?.current?.clientWidth && p?.current?.clientWidth < 480 && _(t?.length);
     }, 300);
   };
-  z(() => {
-    k();
-  }, [L, t, n]), z(() => {
+  T(() => {
+    $();
+  }, [j, t, i]), T(() => {
     setTimeout(() => {
-      k();
+      $();
     }, 300);
-  }, [W]), z(() => {
-    if (d > 0)
-      if (d > n) {
-        let i = t?.slice(d, t?.length)?.map((m) => m?.label)?.join(", "), e = d;
-        $ && e === t.length - 1 && (e = t.length, i = ""), M(0), R(e), I(i);
+  }, [R]), T(() => {
+    if (h > 0)
+      if (h > i) {
+        let r = t?.slice(h, t?.length)?.map((s) => s?.label)?.join(", "), e = h;
+        b && e === t.length - 1 && (e = t.length, r = ""), L(0), W(e), I(r);
       } else {
-        const i = Math.floor((d + 1) / 2), e = n + i - t?.length;
-        let m = n + i, s = n - Math.max(d - i, 0) - (e > 0 ? e : 0), o = t?.slice(0, s)?.map((w) => w?.label)?.join(", "), x = t?.slice(m, t?.length)?.map((w) => w?.label)?.join(", ");
-        $ && s === 1 && (s = 0, o = ""), $ && m === t.length - 1 && (m = t.length, x = ""), M(s), R(m), V(o), I(x);
+        const r = Math.floor((h + 1) / 2), e = i + r - t?.length;
+        let s = i + r, m = i - Math.max(h - r, 0) - (e > 0 ? e : 0), n = t?.slice(0, m)?.map((g) => g?.label)?.join(", "), x = t?.slice(s, t?.length)?.map((g) => g?.label)?.join(", ");
+        b && m === 1 && (m = 0, n = ""), b && s === t.length - 1 && (s = t.length, x = ""), L(m), W(s), H(n), I(x);
       }
-  }, [d, W, L, t, n]), J("resize", k);
-  const b = (i, e, m = !1) => {
-    const s = !!i?.isLocked || !!i?.isDisabled || (j ? !j(e, i) : !1), o = !!f && !s, x = () => {
-      o && f?.(e);
-    }, w = f ? {
+  }, [h, R, j, t, i]), Q("resize", $);
+  const k = (r, e, s = !1) => {
+    const m = !!r?.isLocked || !!r?.isDisabled || (z ? !z(e, r) : !1), n = !!d && !m, x = e <= i, g = () => {
+      n && d?.(e);
+    }, V = d ? {
       role: "button",
-      tabIndex: o ? 0 : -1,
-      "aria-disabled": !o,
-      onClick: x,
-      onKeyDown: (T) => {
-        (T.key === "Enter" || T.key === " ") && (T.preventDefault(), x());
+      tabIndex: n ? 0 : -1,
+      "aria-disabled": !n,
+      onClick: g,
+      onKeyDown: (y) => {
+        (y.key === "Enter" || y.key === " ") && (y.preventDefault(), g());
       }
-    } : {}, B = f ? o ? "cursor-pointer rounded-sm transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600" : "cursor-not-allowed" : "";
+    } : {}, B = d ? n ? "group cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 rounded-sm" : "group cursor-not-allowed" : "", q = d ? `rounded-full transition-colors duration-200 w-24 h-9 ${n ? x ? "group-hover:bg-primary-50 dark:group-hover:bg-primary-950" : "group-hover:bg-neutral-100 dark:group-hover:bg-black-700" : "group-hover:bg-neutral-50 dark:group-hover:bg-black-800"}` : "";
     return /* @__PURE__ */ l(
       "div",
       {
-        "aria-current": e === n ? "step" : void 0,
+        "aria-current": e === i ? "step" : void 0,
         className: `flex ${e < t.length - 1 || a == "parallel" ? "flex flex-grow" : ""}  min-w-[200px]`,
         children: /* @__PURE__ */ c("div", { className: "w-full flex flex-col", children: [
-          /* @__PURE__ */ c("div", { className: `flex ${q()} ${r === "inline" && a === "linear" ? "items-center" : ""}`, children: [
+          /* @__PURE__ */ c("div", { className: `flex ${K()} ${o === "inline" && a === "linear" ? "items-center" : ""}`, children: [
             /* @__PURE__ */ c(
               "div",
               {
-                ...w,
-                className: `${r === "inline" ? "max-w-[70%]" : "w-full"} flex flex-col ${B}`,
+                ...V,
+                className: `${o === "inline" ? "max-w-[70%]" : "w-full"} flex flex-col ${B}`,
                 children: [
-                  /* @__PURE__ */ l("div", { className: `flex ${r === "top-right" || r === "bottom-right" ? "justify-end" : ""}`, children: /* @__PURE__ */ l(p, { title: s && i?.disabledTooltipText || i?.tooltipText, children: /* @__PURE__ */ c(
-                    u,
+                  /* @__PURE__ */ l(
+                    "div",
                     {
-                      size: "small",
-                      variant: "medium",
-                      className: `truncate flex items-center ${e <= n ? "text-primary-600 dark:text-primary-300" : "text-neutral-400 dark:text-neutral-100"}`,
-                      appearance: "custom",
-                      children: [
-                        K ? /* @__PURE__ */ l(
-                          "div",
-                          {
-                            className: `${a === "parallel" ? "flex items-center" : `w-6 h-6 ${e <= n ? "bg-primary-600" : "bg-neutral-400 dark:bg-black-400"} rounded-full flex items-center justify-center text-white`}`,
-                            children: i?.isLocked ? /* @__PURE__ */ l("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ l(G, { sx: { fontSize: 16 } }) }) : /* @__PURE__ */ l(A, { children: n > e && a === "linear" ? /* @__PURE__ */ l(Q, { size: 18, className: "text-white dark:text-white" }) : /* @__PURE__ */ l(
-                              u,
+                      className: `flex ${o === "top-right" || o === "bottom-right" ? "justify-end" : ""} ${q}`,
+                      children: /* @__PURE__ */ l(N, { title: m && r?.disabledTooltipText || r?.tooltipText, className: "w-full", children: /* @__PURE__ */ c(
+                        f,
+                        {
+                          size: "small",
+                          variant: "medium",
+                          className: `truncate flex items-center justify-center gap-2 h-9 ${e <= i ? "text-primary-600 dark:text-primary-300" : "text-neutral-400 dark:text-neutral-100"}`,
+                          appearance: "custom",
+                          children: [
+                            F ? /* @__PURE__ */ l(
+                              "div",
                               {
-                                size: `${a === "parallel" ? "small" : "extra-small"}`,
-                                variant: "medium",
-                                className: "text-neutral-100",
-                                appearance: "custom",
-                                children: e + 1
+                                className: `${a === "parallel" ? "flex items-center" : `w-6 h-6 ${e <= i ? "bg-primary-600" : "bg-neutral-400 dark:bg-black-400"} rounded-full flex items-center justify-center text-white transition-transform duration-200 ${d ? m ? `group-hover:animate-nudge ${x ? "group-hover:shadow-[0_0_0_4px_rgba(1,109,207,0.10)] dark:group-hover:shadow-[0_0_0_4px_rgba(138,192,242,0.15)]" : "group-hover:shadow-[0_0_0_4px_rgba(102,112,133,0.10)] dark:group-hover:shadow-[0_0_0_4px_rgba(152,162,179,0.15)]"}` : `group-hover:scale-105 ${x ? "group-hover:shadow-[0_0_0_4px_rgba(1,109,207,0.18)] dark:group-hover:shadow-[0_0_0_4px_rgba(138,192,242,0.25)]" : "group-hover:shadow-[0_0_0_4px_rgba(102,112,133,0.15)] dark:group-hover:shadow-[0_0_0_4px_rgba(152,162,179,0.25)]"}` : ""}`}`,
+                                children: r?.isLocked ? /* @__PURE__ */ l("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ l(G, { sx: { fontSize: 16 } }) }) : /* @__PURE__ */ l(A, { children: i > e && a === "linear" ? /* @__PURE__ */ l(U, { size: 18, className: "text-white dark:text-white" }) : /* @__PURE__ */ l(
+                                  f,
+                                  {
+                                    size: `${a === "parallel" ? "small" : "extra-small"}`,
+                                    variant: "medium",
+                                    className: "text-neutral-100",
+                                    appearance: "custom",
+                                    children: e + 1
+                                  }
+                                ) })
                               }
-                            ) })
-                          }
-                        ) : null,
-                        /* @__PURE__ */ l("div", { className: `truncate ${r === "inline" ? "mx-2" : "ml-2"} ${e <= n ? "" : "dark:text-black-200"}`, children: i?.label })
-                      ]
+                            ) : null,
+                            /* @__PURE__ */ l("div", { className: `truncate mr-3 ${e <= i ? "" : "dark:text-black-200"}`, children: r?.label })
+                          ]
+                        }
+                      ) })
                     }
-                  ) }) }),
-                  r !== "inline" || a === "parallel" ? /* @__PURE__ */ l(
+                  ),
+                  o !== "inline" || a === "parallel" ? /* @__PURE__ */ l(
                     "div",
                     {
-                      className: `flex ${r === "top-right" || r === "bottom-right" ? "justify-end" : a === "linear" ? "ml-8" : ""}`,
+                      className: `flex ${o === "top-right" || o === "bottom-right" ? "justify-end" : a === "linear" ? "ml-8" : ""}`,
                       children: /* @__PURE__ */ l(
-                        u,
+                        f,
                         {
                           size: "extra-small",
                           variant: "medium",
-                          className: `truncate ${e === n ? "text-neutral-900 dark:text-white" : "text-neutral-400 dark:text-neutral-600"}`,
+                          className: `truncate ${e === i ? "text-neutral-900 dark:text-white" : "text-neutral-400 dark:text-neutral-600"}`,
                           appearance: "custom",
-                          children: i?.description || ""
+                          children: r?.description || ""
                         }
                       )
                     }
@@ -118,21 +124,21 @@ const U = ({
                 ]
               }
             ),
-            e < t.length - (a === "linear" && r === "inline" ? 1 : 0) && !m ? /* @__PURE__ */ l(
+            e < t.length - (a === "linear" && o === "inline" ? 1 : 0) && !s ? /* @__PURE__ */ l(
               "div",
               {
-                className: `w-full flex-grow h-0.5 min-w-[70px]  ${r !== "inline" || a === "parallel" ? "my-2" : ""} ${e <= n - (a === "linear" && r === "inline" ? 1 : 0) ? "bg-primary-600" : "bg-neutral-300"}`
+                className: `w-full flex-grow h-0.5 min-w-[70px]  ${o !== "inline" || a === "parallel" ? "my-2" : ""} ${e <= i - (a === "linear" && o === "inline" ? 1 : 0) ? "bg-primary-600" : "bg-neutral-300"}`
               }
             ) : null
           ] }),
-          r === "inline" && a === "linear" ? /* @__PURE__ */ l("div", { className: `w-fit max-w-full ${B}`, onClick: x, children: /* @__PURE__ */ l(
-            u,
+          o === "inline" && a === "linear" ? /* @__PURE__ */ l("div", { className: `w-fit max-w-full ${B}`, onClick: g, children: /* @__PURE__ */ l(
+            f,
             {
               size: "extra-small",
               variant: "medium",
-              className: `ml-8 truncate ${e === n ? "text-neutral-900 dark:text-white" : "text-neutral-400 dark:text-neutral-600"}`,
+              className: `ml-8 truncate ${e === i ? "text-neutral-900 dark:text-white" : "text-neutral-400 dark:text-neutral-600"}`,
               appearance: "custom",
-              children: i?.description || ""
+              children: r?.description || ""
             }
           ) }) : null
         ] })
@@ -140,26 +146,26 @@ const U = ({
       e
     );
   };
-  return /* @__PURE__ */ c("div", { className: `w-full flex ${F}`, ref: g, children: [
+  return /* @__PURE__ */ c("div", { className: `w-full flex ${E}`, ref: p, children: [
     v > 0 ? /* @__PURE__ */ c("div", { className: `flex ${a === "parallel" ? "flex-col" : ""}`, children: [
-      f ? /* @__PURE__ */ l(
-        E,
+      d ? /* @__PURE__ */ l(
+        C,
         {
           menu: {
-            items: t.slice(0, v).map((i, e) => ({
-              label: /* @__PURE__ */ l("div", { className: "px-2 py-1", children: b(i, e, !0) }),
+            items: t.slice(0, v).map((r, e) => ({
+              label: /* @__PURE__ */ l("div", { className: "px-2 py-1", children: k(r, e, !0) }),
               key: e
             }))
           },
           trigger: ["click"],
           children: /* @__PURE__ */ l(
-            u,
+            f,
             {
               size: "small",
               variant: "medium",
-              className: `px-2 ${t.length - d > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
+              className: `px-2 ${t.length - h > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
               appearance: "subtitle",
-              children: /* @__PURE__ */ l(p, { title: D, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
+              children: /* @__PURE__ */ l(N, { title: M, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
                 v,
                 " More..."
               ] }) })
@@ -167,13 +173,13 @@ const U = ({
           )
         }
       ) : /* @__PURE__ */ l(
-        u,
+        f,
         {
           size: "small",
           variant: "medium",
-          className: `px-2 ${t.length - d > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
+          className: `px-2 ${t.length - h > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
           appearance: "subtitle",
-          children: /* @__PURE__ */ l(p, { title: D, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
+          children: /* @__PURE__ */ l(N, { title: M, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
             v,
             " More..."
           ] }) })
@@ -181,41 +187,41 @@ const U = ({
       ),
       /* @__PURE__ */ l("div", { className: `h-0.5 min-w-[40px] px-2 mr-2 bg-primary-600 ${a === "parallel" ? "mt-2" : "mt-[11px]"}` })
     ] }) : null,
-    /* @__PURE__ */ l("div", { className: "w-full flex flex-wrap gap-3 ", children: t?.map((i, e) => v <= e && e < h ? b(i, e) : null) }),
-    t.length - h > 0 ? /* @__PURE__ */ c("div", { className: "flex flex-col", children: [
-      f ? /* @__PURE__ */ l(
-        E,
+    /* @__PURE__ */ l("div", { className: "w-full flex flex-wrap", children: t?.map((r, e) => v <= e && e < u ? k(r, e) : null) }),
+    t.length - u > 0 ? /* @__PURE__ */ c("div", { className: "flex flex-col", children: [
+      d ? /* @__PURE__ */ l(
+        C,
         {
           menu: {
-            items: t.slice(h, t?.length).map((i, e) => ({
-              label: /* @__PURE__ */ l("div", { className: "px-2 py-1", children: b(i, e + h, !0) }),
+            items: t.slice(u, t?.length).map((r, e) => ({
+              label: /* @__PURE__ */ l("div", { className: "px-2 py-1", children: k(r, e + u, !0) }),
               key: e
             }))
           },
           trigger: ["click"],
           children: /* @__PURE__ */ l(
-            u,
+            f,
             {
               size: "small",
               variant: "medium",
-              className: `px-2 ${t.length - h > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
+              className: `px-2 ${t.length - u > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
               appearance: "subtitle",
-              children: /* @__PURE__ */ l(p, { title: C, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
-                t.length - h,
+              children: /* @__PURE__ */ l(N, { title: D, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
+                t.length - u,
                 " More..."
               ] }) })
             }
           )
         }
       ) : /* @__PURE__ */ l(
-        u,
+        f,
         {
           size: "small",
           variant: "medium",
-          className: `px-2 ${t.length - h > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
+          className: `px-2 ${t.length - u > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
           appearance: "subtitle",
-          children: /* @__PURE__ */ l(p, { title: C, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
-            t.length - h,
+          children: /* @__PURE__ */ l(N, { title: D, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
+            t.length - u,
             " More..."
           ] }) })
         }
@@ -224,8 +230,8 @@ const U = ({
     ] }) : null
   ] });
 };
-U.displayName = "Stepper";
+X.displayName = "Stepper";
 export {
-  U as default
+  X as default
 };
 //# sourceMappingURL=Stepper.es.js.map

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 type { KeyboardEvent } from 'react';\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  /** Prevents navigating to this step (e.g. validation not satisfied yet). Locked steps are always non-navigable. */\n  isDisabled?: boolean;\n  /** Tooltip shown when the step cannot be navigated to. Falls back to `tooltipText`. */\n  disabledTooltipText?: string;\n};\n\nexport type TStepperProps = {\n  steps: TStep[];\n  currentStep: number;\n  /**\n   * Called when a navigable step title is clicked (or activated with Enter/Space).\n   * Steps that are locked, disabled or rejected by `isStepClickable` never invoke it.\n   */\n  onClick?: (index: number) => void;\n  /**\n   * Optional gate for step navigation, so consumers can enforce their own validation\n   * and step-access rules (e.g. only allow jumping to already visited steps).\n   * Returning `false` renders the step title as non-navigable.\n   */\n  isStepClickable?: (index: number, step: TStep) => boolean;\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 *   // only allow jumping to steps the user has already reached\n *   isStepClickable={(index) => index <= furthestVisitedStep}\n * />\n * ```\n *\n * Step titles are clickable whenever `onClick` is provided. A step is not navigable\n * when it is `isLocked`, `isDisabled`, or rejected by `isStepClickable`.\n */\nconst Stepper = ({\n  steps,\n  currentStep,\n  appearance = 'linear',\n  labelPosition = 'inline',\n  onClick,\n  isStepClickable,\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    const isStepBlocked = Boolean(step?.isLocked) || Boolean(step?.isDisabled) || (isStepClickable ? !isStepClickable(index, step) : false);\n    const isNavigable = Boolean(onClick) && !isStepBlocked;\n\n    const handleStepActivate = () => {\n      if (!isNavigable) return;\n      onClick?.(index);\n    };\n\n    /** Applied to the step title/description so only they react to clicks, not the connector line. */\n    const titleInteractionProps = onClick\n      ? {\n          role: 'button' as const,\n          tabIndex: isNavigable ? 0 : -1,\n          'aria-disabled': !isNavigable,\n          onClick: handleStepActivate,\n          onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n              event.preventDefault();\n              handleStepActivate();\n            }\n          },\n        }\n      : {};\n\n    const titleInteractionClassName = onClick\n      ? isNavigable\n        ? 'cursor-pointer rounded-sm transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600'\n        : 'cursor-not-allowed'\n      : '';\n\n    return (\n      <div\n        key={index}\n        aria-current={index === currentStep ? 'step' : undefined}\n        className={`flex ${index < steps.length - 1 || appearance == 'parallel' ? 'flex flex-grow' : ''}  min-w-[200px]`}\n      >\n        <div className={`w-full flex flex-col`}>\n          <div className={`flex ${getLabelDescriptionPosition()} ${labelPosition === 'inline' && appearance === 'linear' ? 'items-center' : ''}`}>\n            <div\n              {...titleInteractionProps}\n              className={`${labelPosition === 'inline' ? 'max-w-[70%]' : 'w-full'} flex flex-col ${titleInteractionClassName}`}\n            >\n              <div className={`flex ${labelPosition === 'top-right' || labelPosition === 'bottom-right' ? 'justify-end' : ''}`}>\n                <Tooltip title={isStepBlocked ? step?.disabledTooltipText || step?.tooltipText : 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            <div className={`w-fit max-w-full ${titleInteractionClassName}`} onClick={handleStepActivate}>\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            </div>\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","isStepClickable","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","isStepBlocked","isNavigable","handleStepActivate","titleInteractionProps","event","titleInteractionClassName","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 type { KeyboardEvent } from 'react';\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  /** Prevents navigating to this step (e.g. validation not satisfied yet). Locked steps are always non-navigable. */\n  isDisabled?: boolean;\n  /** Tooltip shown when the step cannot be navigated to. Falls back to `tooltipText`. */\n  disabledTooltipText?: string;\n};\n\nexport type TStepperProps = {\n  steps: TStep[];\n  currentStep: number;\n  /**\n   * Called when a navigable step title is clicked (or activated with Enter/Space).\n   * Steps that are locked, disabled or rejected by `isStepClickable` never invoke it.\n   */\n  onClick?: (index: number) => void;\n  /**\n   * Optional gate for step navigation, so consumers can enforce their own validation\n   * and step-access rules (e.g. only allow jumping to already visited steps).\n   * Returning `false` renders the step title as non-navigable.\n   */\n  isStepClickable?: (index: number, step: TStep) => boolean;\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 *   // only allow jumping to steps the user has already reached\n *   isStepClickable={(index) => index <= furthestVisitedStep}\n * />\n * ```\n *\n * Step titles are clickable whenever `onClick` is provided. A step is not navigable\n * when it is `isLocked`, `isDisabled`, or rejected by `isStepClickable`.\n */\nconst Stepper = ({\n  steps,\n  currentStep,\n  appearance = 'linear',\n  labelPosition = 'inline',\n  onClick,\n  isStepClickable,\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    const isStepBlocked = Boolean(step?.isLocked) || Boolean(step?.isDisabled) || (isStepClickable ? !isStepClickable(index, step) : false);\n    const isNavigable = Boolean(onClick) && !isStepBlocked;\n    /** Steps already reached (done/current) get the primary-tinted hover, upcoming steps get the neutral one. */\n    const isReached = index <= currentStep;\n\n    const handleStepActivate = () => {\n      if (!isNavigable) return;\n      onClick?.(index);\n    };\n\n    /** Applied to the step title/description so only they react to clicks, not the connector line. */\n    const titleInteractionProps = onClick\n      ? {\n          role: 'button' as const,\n          tabIndex: isNavigable ? 0 : -1,\n          'aria-disabled': !isNavigable,\n          onClick: handleStepActivate,\n          onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n              event.preventDefault();\n              handleStepActivate();\n            }\n          },\n        }\n      : {};\n\n    /**\n     * `group` lets the icon+label row and the dot (both nested below) react to hovering the\n     * whole title via `group-hover:*`, even though the visible pill background only paints on\n     * the icon+label row itself — not the description under it.\n     */\n    const titleInteractionClassName = onClick\n      ? isNavigable\n        ? 'group cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 rounded-sm'\n        : 'group cursor-not-allowed'\n      : '';\n\n    /**\n     * Background for the icon+label row only (never the description below it), and sized to\n     * the row's own natural box — no padding is added, so the pill can never need to paint\n     * outside the element's existing bounds. That matters because the Stepper is often nested\n     * inside headers/panels with little to no vertical slack (fixed row heights, `overflow-hidden`\n     * wrappers), where even reserved-but-added padding gets visibly clipped.\n     */\n    const titleRowHoverClassName = onClick\n      ? `rounded-full transition-colors duration-200 w-24 h-9 ${\n          isNavigable\n            ? isReached\n              ? 'group-hover:bg-primary-50 dark:group-hover:bg-primary-950'\n              : 'group-hover:bg-neutral-100 dark:group-hover:bg-black-700'\n            : 'group-hover:bg-neutral-50 dark:group-hover:bg-black-800'\n        }`\n      : '';\n\n    return (\n      <div\n        key={index}\n        aria-current={index === currentStep ? 'step' : undefined}\n        className={`flex ${index < steps.length - 1 || appearance == 'parallel' ? 'flex flex-grow' : ''}  min-w-[200px]`}\n      >\n        <div className={`w-full flex flex-col`}>\n          <div className={`flex ${getLabelDescriptionPosition()} ${labelPosition === 'inline' && appearance === 'linear' ? 'items-center' : ''}`}>\n            <div\n              {...titleInteractionProps}\n              className={`${labelPosition === 'inline' ? 'max-w-[70%]' : 'w-full'} flex flex-col ${titleInteractionClassName}`}\n            >\n              <div\n                className={`flex ${\n                  labelPosition === 'top-right' || labelPosition === 'bottom-right' ? 'justify-end' : ''\n                } ${titleRowHoverClassName}`}\n              >\n                <Tooltip title={isStepBlocked ? step?.disabledTooltipText || step?.tooltipText : step?.tooltipText} className='w-full'>\n                  <Typography\n                    size='small'\n                    variant='medium'\n                    className={`truncate flex items-center justify-center gap-2 h-9 ${\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 transition-transform duration-200 ${\n                                onClick\n                                  ? isStepBlocked\n                                    ? `group-hover:animate-nudge ${\n                                        isReached\n                                          ? 'group-hover:shadow-[0_0_0_4px_rgba(1,109,207,0.10)] dark:group-hover:shadow-[0_0_0_4px_rgba(138,192,242,0.15)]'\n                                          : 'group-hover:shadow-[0_0_0_4px_rgba(102,112,133,0.10)] dark:group-hover:shadow-[0_0_0_4px_rgba(152,162,179,0.15)]'\n                                      }`\n                                    : `group-hover:scale-105 ${\n                                        isReached\n                                          ? 'group-hover:shadow-[0_0_0_4px_rgba(1,109,207,0.18)] dark:group-hover:shadow-[0_0_0_4px_rgba(138,192,242,0.25)]'\n                                          : 'group-hover:shadow-[0_0_0_4px_rgba(102,112,133,0.15)] dark:group-hover:shadow-[0_0_0_4px_rgba(152,162,179,0.25)]'\n                                      }`\n                                  : ''\n                              }`\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 mr-3 ${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            <div className={`w-fit max-w-full ${titleInteractionClassName}`} onClick={handleStepActivate}>\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            </div>\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'>\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","isStepClickable","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","isStepBlocked","isNavigable","isReached","handleStepActivate","titleInteractionProps","event","titleInteractionClassName","titleRowHoverClassName","jsx","jsxs","Tooltip","Typography","Lock","Fragment","CheckIcon","Dropdown"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lax-wp/design-system",
   "private": false,
-  "version": "0.14.54",
+  "version": "0.14.55",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",