@lax-wp/design-system 0.14.51 → 0.14.52

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

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

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

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

package/dist/components/navigation/stepper/Stepper.d.ts

@@ -3,11 +3,25 @@ export type TStep = {
     description?: string;
     isLocked?: boolean;
     tooltipText?: string;
+    /** Prevents navigating to this step (e.g. validation not satisfied yet). Locked steps are always non-navigable. */
+    isDisabled?: boolean;
+    /** Tooltip shown when the step cannot be navigated to. Falls back to `tooltipText`. */
+    disabledTooltipText?: string;
 };
 export type TStepperProps = {
     steps: TStep[];
     currentStep: number;
+    /**
+     * Called when a navigable step title is clicked (or activated with Enter/Space).
+     * Steps that are locked, disabled or rejected by `isStepClickable` never invoke it.
+     */
     onClick?: (index: number) => void;
+    /**
+     * Optional gate for step navigation, so consumers can enforce their own validation
+     * and step-access rules (e.g. only allow jumping to already visited steps).
+     * Returning `false` renders the step title as non-navigable.
+     */
+    isStepClickable?: (index: number, step: TStep) => boolean;
     appearance?: 'linear' | 'parallel';
     labelPosition?: 'top' | 'bottom' | 'inline' | 'top-right' | 'bottom-right';
     className?: string;
@@ -35,11 +49,16 @@ export type TStepperProps = {
  *   ]}
  *   currentStep={1}
  *   onClick={(index) => setCurrentStep(index)}
+ *   // only allow jumping to steps the user has already reached
+ *   isStepClickable={(index) => index <= furthestVisitedStep}
  * />
  * ```
+ *
+ * Step titles are clickable whenever `onClick` is provided. A step is not navigable
+ * when it is `isLocked`, `isDisabled`, or rejected by `isStepClickable`.
  */
 declare const Stepper: {
-    ({ steps, currentStep, appearance, labelPosition, onClick, className, showIndex, disableOneMore, isMainSideBarOpen, isAuthoringOpen, }: TStepperProps): import("react/jsx-runtime").JSX.Element;
+    ({ steps, currentStep, appearance, labelPosition, onClick, isStepClickable, className, showIndex, disableOneMore, isMainSideBarOpen, isAuthoringOpen, }: TStepperProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Stepper;

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

@@ -1,210 +1,231 @@
-import { jsxs as c, jsx as e, Fragment as q } from "react/jsx-runtime";
+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 D } from "antd";
-import { useRef as H, useState as g, useEffect as T } from "react";
-import { Typography as h } from "../../data-display/typography/Typography.es.js";
-import v from "../../tooltip/Tooltip.es.js";
+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 K } from "../../icon/icons.generated.es.js";
-const Q = ({
+import { CheckIcon as Q } from "../../icon/icons.generated.es.js";
+const U = ({
   steps: t,
   currentStep: n,
   appearance: a = "linear",
   labelPosition: r = "inline",
-  onClick: w,
-  className: E,
-  showIndex: F = !0,
-  disableOneMore: N = !1,
-  isMainSideBarOpen: z = !1,
-  isAuthoringOpen: b = !1
+  onClick: f,
+  isStepClickable: j,
+  className: F,
+  showIndex: K = !0,
+  disableOneMore: $ = !1,
+  isMainSideBarOpen: L = !1,
+  isAuthoringOpen: W = !1
 }) => {
-  const f = H(null), [s, p] = g(0), [x, j] = g(0), [o, W] = g(0), [L, I] = g(""), [M, R] = g(""), V = () => r === "top" || r === "top-right" ? "flex-col" : r === "bottom" || r === "bottom-right" ? "flex-col-reverse" : a === "linear" ? "flex-row" : "flex-col", $ = () => {
+  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 = () => {
     setTimeout(() => {
-      p(0);
-      const i = 210, l = 225;
-      let m = 0, d = 0;
-      for (let u = 0; u < t.length && (f?.current?.clientWidth && f?.current?.clientWidth > m + l + i); u++)
-        m += l, d = u + 1;
-      p(d), f?.current?.clientWidth && f?.current?.clientWidth < 480 && p(t?.length);
+      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);
     }, 300);
   };
-  T(() => {
-    $();
-  }, [z, t, n]), T(() => {
+  z(() => {
+    k();
+  }, [L, t, n]), z(() => {
     setTimeout(() => {
-      $();
+      k();
     }, 300);
-  }, [b]), T(() => {
-    if (s > 0)
-      if (s > n) {
-        let i = t?.slice(s, t?.length)?.map((m) => m?.label)?.join(", "), l = s;
-        N && l === t.length - 1 && (l = t.length, i = ""), j(0), W(l), R(i);
+  }, [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);
       } else {
-        const i = Math.floor((s + 1) / 2), l = n + i - t?.length;
-        let m = n + i, d = n - Math.max(s - i, 0) - (l > 0 ? l : 0), u = t?.slice(0, d)?.map((y) => y?.label)?.join(", "), C = t?.slice(m, t?.length)?.map((y) => y?.label)?.join(", ");
-        N && d === 1 && (d = 0, u = ""), N && m === t.length - 1 && (m = t.length, C = ""), j(d), W(m), I(u), R(C);
+        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);
       }
-  }, [s, b, z, t, n]), J("resize", $);
-  const k = (i, l, m = !1) => /* @__PURE__ */ e(
-    "div",
-    {
-      onClick: () => w?.(l),
-      className: `flex ${l < t.length - 1 || a == "parallel" ? "flex flex-grow" : ""}  min-w-[200px] ${w ? "cursor-pointer" : ""}`,
-      children: /* @__PURE__ */ c("div", { className: "w-full flex flex-col", children: [
-        /* @__PURE__ */ c("div", { className: `flex ${V()} ${r === "inline" && a === "linear" ? "items-center" : ""}`, children: [
-          /* @__PURE__ */ c("div", { className: `${r === "inline" ? "max-w-[70%]" : "w-full"} flex flex-col`, children: [
-            /* @__PURE__ */ e("div", { className: `flex ${r === "top-right" || r === "bottom-right" ? "justify-end" : ""}`, children: /* @__PURE__ */ e(v, { title: i?.tooltipText, children: /* @__PURE__ */ c(
-              h,
+  }, [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 ? {
+      role: "button",
+      tabIndex: o ? 0 : -1,
+      "aria-disabled": !o,
+      onClick: x,
+      onKeyDown: (T) => {
+        (T.key === "Enter" || T.key === " ") && (T.preventDefault(), x());
+      }
+    } : {}, 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" : "";
+    return /* @__PURE__ */ l(
+      "div",
+      {
+        "aria-current": e === n ? "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",
               {
-                size: "small",
-                variant: "medium",
-                className: `truncate flex items-center ${l <= n ? "text-primary-600 dark:text-primary-300" : "text-neutral-400 dark:text-neutral-100"}`,
-                appearance: "custom",
+                ...w,
+                className: `${r === "inline" ? "max-w-[70%]" : "w-full"} flex flex-col ${B}`,
                 children: [
-                  F ? /* @__PURE__ */ e(
+                  /* @__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,
+                    {
+                      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,
+                              {
+                                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 })
+                      ]
+                    }
+                  ) }) }),
+                  r !== "inline" || a === "parallel" ? /* @__PURE__ */ l(
                     "div",
                     {
-                      className: `${a === "parallel" ? "flex items-center" : `w-6 h-6 ${l <= n ? "bg-primary-600" : "bg-neutral-400 dark:bg-black-400"} rounded-full flex items-center justify-center text-white`}`,
-                      children: i?.isLocked ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ e(G, { sx: { fontSize: 16 } }) }) : /* @__PURE__ */ e(q, { children: n > l && a === "linear" ? /* @__PURE__ */ e(K, { size: 18, className: "text-white dark:text-white" }) : /* @__PURE__ */ e(
-                        h,
+                      className: `flex ${r === "top-right" || r === "bottom-right" ? "justify-end" : a === "linear" ? "ml-8" : ""}`,
+                      children: /* @__PURE__ */ l(
+                        u,
                         {
-                          size: `${a === "parallel" ? "small" : "extra-small"}`,
+                          size: "extra-small",
                           variant: "medium",
-                          className: "text-neutral-100",
+                          className: `truncate ${e === n ? "text-neutral-900 dark:text-white" : "text-neutral-400 dark:text-neutral-600"}`,
                           appearance: "custom",
-                          children: l + 1
+                          children: i?.description || ""
                         }
-                      ) })
+                      )
                     }
-                  ) : null,
-                  /* @__PURE__ */ e("div", { className: `truncate ${r === "inline" ? "mx-2" : "ml-2"} ${l <= n ? "" : "dark:text-black-200"}`, children: i?.label })
+                  ) : null
                 ]
               }
-            ) }) }),
-            r !== "inline" || a === "parallel" ? /* @__PURE__ */ e(
+            ),
+            e < t.length - (a === "linear" && r === "inline" ? 1 : 0) && !m ? /* @__PURE__ */ l(
               "div",
               {
-                className: `flex ${r === "top-right" || r === "bottom-right" ? "justify-end" : a === "linear" ? "ml-8" : ""}`,
-                children: /* @__PURE__ */ e(
-                  h,
-                  {
-                    size: "extra-small",
-                    variant: "medium",
-                    className: `truncate ${l === n ? "text-neutral-900 dark:text-white" : "text-neutral-400 dark:text-neutral-600"}`,
-                    appearance: "custom",
-                    children: i?.description || ""
-                  }
-                )
+                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"}`
               }
             ) : null
           ] }),
-          l < t.length - (a === "linear" && r === "inline" ? 1 : 0) && !m ? /* @__PURE__ */ e(
-            "div",
+          r === "inline" && a === "linear" ? /* @__PURE__ */ l("div", { className: `w-fit max-w-full ${B}`, onClick: x, children: /* @__PURE__ */ l(
+            u,
             {
-              className: `w-full flex-grow h-0.5 min-w-[70px]  ${r !== "inline" || a === "parallel" ? "my-2" : ""} ${l <= n - (a === "linear" && r === "inline" ? 1 : 0) ? "bg-primary-600" : "bg-neutral-300"}`
+              size: "extra-small",
+              variant: "medium",
+              className: `ml-8 truncate ${e === n ? "text-neutral-900 dark:text-white" : "text-neutral-400 dark:text-neutral-600"}`,
+              appearance: "custom",
+              children: i?.description || ""
             }
-          ) : null
-        ] }),
-        r === "inline" && a === "linear" ? /* @__PURE__ */ e(
-          h,
-          {
-            size: "extra-small",
-            variant: "medium",
-            className: `ml-8 truncate ${l === n ? "text-neutral-900 dark:text-white" : "text-neutral-400 dark:text-neutral-600"}`,
-            appearance: "custom",
-            children: i?.description || ""
-          }
-        ) : null
-      ] })
-    },
-    l
-  );
-  return /* @__PURE__ */ c("div", { className: `w-full flex ${E}`, ref: f, children: [
-    x > 0 ? /* @__PURE__ */ c("div", { className: `flex ${a === "parallel" ? "flex-col" : ""}`, children: [
-      w ? /* @__PURE__ */ e(
-        D,
+          ) }) : null
+        ] })
+      },
+      e
+    );
+  };
+  return /* @__PURE__ */ c("div", { className: `w-full flex ${F}`, ref: g, children: [
+    v > 0 ? /* @__PURE__ */ c("div", { className: `flex ${a === "parallel" ? "flex-col" : ""}`, children: [
+      f ? /* @__PURE__ */ l(
+        E,
         {
           menu: {
-            items: t.slice(0, x).map((i, l) => ({
-              label: /* @__PURE__ */ e("div", { className: "px-2 py-1", children: k(i, l, !0) }),
-              key: l
+            items: t.slice(0, v).map((i, e) => ({
+              label: /* @__PURE__ */ l("div", { className: "px-2 py-1", children: b(i, e, !0) }),
+              key: e
             }))
           },
           trigger: ["click"],
-          children: /* @__PURE__ */ e(
-            h,
+          children: /* @__PURE__ */ l(
+            u,
             {
               size: "small",
               variant: "medium",
-              className: `px-2 ${t.length - s > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
+              className: `px-2 ${t.length - d > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
               appearance: "subtitle",
-              children: /* @__PURE__ */ e(v, { title: L, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
-                x,
+              children: /* @__PURE__ */ l(p, { title: D, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
+                v,
                 " More..."
               ] }) })
             }
           )
         }
-      ) : /* @__PURE__ */ e(
-        h,
+      ) : /* @__PURE__ */ l(
+        u,
         {
           size: "small",
           variant: "medium",
-          className: `px-2 ${t.length - s > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
+          className: `px-2 ${t.length - d > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
           appearance: "subtitle",
-          children: /* @__PURE__ */ e(v, { title: L, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
-            x,
+          children: /* @__PURE__ */ l(p, { title: D, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
+            v,
             " More..."
           ] }) })
         }
       ),
-      /* @__PURE__ */ e("div", { className: `h-0.5 min-w-[40px] px-2 mr-2 bg-primary-600 ${a === "parallel" ? "mt-2" : "mt-[11px]"}` })
+      /* @__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__ */ e("div", { className: "w-full flex flex-wrap gap-3 ", children: t?.map((i, l) => x <= l && l < o ? k(i, l) : null) }),
-    t.length - o > 0 ? /* @__PURE__ */ c("div", { className: "flex flex-col", children: [
-      w ? /* @__PURE__ */ e(
-        D,
+    /* @__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,
         {
           menu: {
-            items: t.slice(o, t?.length).map((i, l) => ({
-              label: /* @__PURE__ */ e("div", { className: "px-2 py-1", children: k(i, l + o, !0) }),
-              key: l
+            items: t.slice(h, t?.length).map((i, e) => ({
+              label: /* @__PURE__ */ l("div", { className: "px-2 py-1", children: b(i, e + h, !0) }),
+              key: e
             }))
           },
           trigger: ["click"],
-          children: /* @__PURE__ */ e(
-            h,
+          children: /* @__PURE__ */ l(
+            u,
             {
               size: "small",
               variant: "medium",
-              className: `px-2 ${t.length - o > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
+              className: `px-2 ${t.length - h > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
               appearance: "subtitle",
-              children: /* @__PURE__ */ e(v, { title: M, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
-                t.length - o,
+              children: /* @__PURE__ */ l(p, { title: C, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
+                t.length - h,
                 " More..."
               ] }) })
             }
           )
         }
-      ) : /* @__PURE__ */ e(
-        h,
+      ) : /* @__PURE__ */ l(
+        u,
         {
           size: "small",
           variant: "medium",
-          className: `px-2 ${t.length - o > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
+          className: `px-2 ${t.length - h > 0 ? "cursor-pointer" : "cursor-not-allowed"}`,
           appearance: "subtitle",
-          children: /* @__PURE__ */ e(v, { title: M, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
-            t.length - o,
+          children: /* @__PURE__ */ l(p, { title: C, children: /* @__PURE__ */ c("div", { className: "min-w-max", children: [
+            t.length - h,
             " More..."
           ] }) })
         }
       ),
-      /* @__PURE__ */ e("div", { className: `h-0.5 min-w-[40px] px-2 ml-2 bg-neutral-300 ${a === "parallel" ? "mt-2" : "hidden"}` })
+      /* @__PURE__ */ l("div", { className: `h-0.5 min-w-[40px] px-2 ml-2 bg-neutral-300 ${a === "parallel" ? "mt-2" : "hidden"}` })
     ] }) : null
   ] });
 };
-Q.displayName = "Stepper";
+U.displayName = "Stepper";
 export {
-  Q as default
+  U 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 { useEffect, useRef, useState } from 'react';\n\nimport { Typography } from '../../data-display/typography/Typography';\nimport Tooltip from '../../tooltip/Tooltip';\nimport { useEventListener } from '../../../hooks/useEventListener';\nimport { CheckIcon } from '../../icon';\n\nexport type TStep = {\n  label: string;\n  description?: string;\n  isLocked?: boolean;\n  tooltipText?: string;\n};\n\nexport type TStepperProps = {\n  steps: TStep[];\n  currentStep: number;\n  onClick?: (index: number) => void;\n  appearance?: 'linear' | 'parallel';\n  labelPosition?: 'top' | 'bottom' | 'inline' | 'top-right' | 'bottom-right';\n  className?: string;\n  showIndex?: boolean;\n  disableOneMore?: boolean;\n  lockConfig?: {\n    isLocked?: boolean;\n    tooltipText?: string;\n  };\n  /** Whether the main sidebar is open (affects responsive calculations) */\n  isMainSideBarOpen?: boolean;\n  /** Whether the authoring panel is open (affects responsive calculations) */\n  isAuthoringOpen?: boolean;\n};\n\n/**\n * Stepper component for multi-step workflows\n *\n * @example\n * ```tsx\n * <Stepper\n *   steps={[\n *     { label: 'Step 1', description: 'First step' },\n *     { label: 'Step 2', description: 'Second step' },\n *     { label: 'Step 3', description: 'Third step' },\n *   ]}\n *   currentStep={1}\n *   onClick={(index) => setCurrentStep(index)}\n * />\n * ```\n */\nconst Stepper = ({\n  steps,\n  currentStep,\n  appearance = 'linear',\n  labelPosition = 'inline',\n  onClick,\n  className,\n  showIndex = true,\n  disableOneMore = false,\n  isMainSideBarOpen = false,\n  isAuthoringOpen = false,\n}: TStepperProps) => {\n  const stepsRef = useRef<HTMLDivElement | null>(null);\n  const [visibleStepCounts, setVisibleStepCounts] = useState<number>(0);\n  const [leftMostStep, setLeftMostStep] = useState<number>(0);\n  const [rightMostStep, setRightMostStep] = useState<number>(0);\n  const [leftTooltip, setLeftTooltip] = useState<string>('');\n  const [rightTooltip, setRightTooltip] = useState<string>('');\n\n  const getLabelDescriptionPosition = () => {\n    if (labelPosition === 'top' || labelPosition === 'top-right') {\n      return 'flex-col';\n    } else if (labelPosition === 'bottom' || labelPosition === 'bottom-right') {\n      return 'flex-col-reverse';\n    } else if (appearance === 'linear') {\n      return 'flex-row';\n    } else {\n      return 'flex-col';\n    }\n  };\n\n  const handleClientWidth = () => {\n    setTimeout(() => {\n      setVisibleStepCounts(0);\n      const moreWidth = 210;\n      const stepTitleWidth = 225;\n      let stepWidth = 0;\n      let count = 0;\n      for (let index = 0; index < steps.length; index++) {\n        if (stepsRef?.current?.clientWidth && stepsRef?.current?.clientWidth > stepWidth + stepTitleWidth + moreWidth) {\n          stepWidth += stepTitleWidth;\n          count = index + 1;\n        } else {\n          break;\n        }\n      }\n      setVisibleStepCounts(count);\n      if (stepsRef?.current?.clientWidth && stepsRef?.current?.clientWidth < 480) {\n        setVisibleStepCounts(steps?.length);\n      }\n    }, 300);\n  };\n\n  useEffect(() => {\n    handleClientWidth();\n  }, [isMainSideBarOpen, steps, currentStep]);\n\n  useEffect(() => {\n    setTimeout(() => {\n      handleClientWidth();\n    }, 300);\n  }, [isAuthoringOpen]);\n\n  useEffect(() => {\n    if (visibleStepCounts > 0) {\n      if (visibleStepCounts > currentStep) {\n        let newRightTooltip = steps\n          ?.slice(visibleStepCounts, steps?.length)\n          ?.map((step) => step?.label)\n          ?.join(', ');\n\n        let rightCount = visibleStepCounts;\n        if (disableOneMore && rightCount === steps.length - 1) {\n          rightCount = steps.length;\n          newRightTooltip = '';\n        }\n        setLeftMostStep(0);\n        setRightMostStep(rightCount);\n        setRightTooltip(newRightTooltip);\n      } else {\n        const mid = Math.floor((visibleStepCounts + 1) / 2);\n        const remainingStepsFromRight = currentStep + mid - steps?.length;\n        let rightCount = currentStep + mid;\n        let leftCount = currentStep - Math.max(visibleStepCounts - mid, 0) - (remainingStepsFromRight > 0 ? remainingStepsFromRight : 0);\n        let newLeftTooltip = steps\n          ?.slice(0, leftCount)\n          ?.map((step) => step?.label)\n          ?.join(', ');\n        let newRightTooltip = steps\n          ?.slice(rightCount, steps?.length)\n          ?.map((step) => step?.label)\n          ?.join(', ');\n\n        if (disableOneMore && leftCount === 1) {\n          leftCount = 0;\n          newLeftTooltip = '';\n        }\n\n        if (disableOneMore && rightCount === steps.length - 1) {\n          rightCount = steps.length;\n          newRightTooltip = '';\n        }\n        setLeftMostStep(leftCount);\n        setRightMostStep(rightCount);\n        setLeftTooltip(newLeftTooltip);\n        setRightTooltip(newRightTooltip);\n      }\n    }\n  }, [visibleStepCounts, isAuthoringOpen, isMainSideBarOpen, steps, currentStep]);\n\n  useEventListener('resize', handleClientWidth);\n\n  const stepDetails = (step: TStep, index: number, hideLine = false) => {\n    return (\n      <div\n        key={index}\n        onClick={() => onClick?.(index)}\n        className={`flex ${index < steps.length - 1 || appearance == 'parallel' ? 'flex flex-grow' : ''}  min-w-[200px] ${\n          onClick ? 'cursor-pointer' : ''\n        }`}\n      >\n        <div className={`w-full flex flex-col`}>\n          <div className={`flex ${getLabelDescriptionPosition()} ${labelPosition === 'inline' && appearance === 'linear' ? 'items-center' : ''}`}>\n            <div className={`${labelPosition === 'inline' ? 'max-w-[70%]' : 'w-full'} flex flex-col`}>\n              <div className={`flex ${labelPosition === 'top-right' || labelPosition === 'bottom-right' ? 'justify-end' : ''}`}>\n                <Tooltip title={step?.tooltipText}>\n                  <Typography\n                    size='small'\n                    variant='medium'\n                    className={`truncate flex items-center ${\n                      index <= currentStep ? 'text-primary-600 dark:text-primary-300' : 'text-neutral-400 dark:text-neutral-100'\n                    }`}\n                    appearance='custom'\n                  >\n                    {showIndex ? (\n                      <div\n                        className={`${\n                          appearance === 'parallel'\n                            ? 'flex items-center'\n                            : `w-6 h-6 ${\n                                index <= currentStep ? 'bg-primary-600' : 'bg-neutral-400 dark:bg-black-400'\n                              } rounded-full flex items-center justify-center text-white`\n                        }`}\n                      >\n                        {step?.isLocked ? (\n                          <div className='flex items-center justify-center'>\n                            <Lock sx={{ fontSize: 16 }} />\n                          </div>\n                        ) : (\n                          <>\n                            {currentStep > index && appearance === 'linear' ? (\n                              <CheckIcon size={18} className='text-white dark:text-white' />\n                            ) : (\n                              <Typography\n                                size={`${appearance === 'parallel' ? 'small' : 'extra-small'}`}\n                                variant='medium'\n                                className='text-neutral-100'\n                                appearance='custom'\n                              >\n                                {index + 1}\n                              </Typography>\n                            )}\n                          </>\n                        )}\n                      </div>\n                    ) : null}\n\n                    <div className={`truncate ${labelPosition === 'inline' ? 'mx-2' : 'ml-2'} ${index <= currentStep ? '' : 'dark:text-black-200'}`}>\n                      {step?.label}\n                    </div>\n                  </Typography>\n                </Tooltip>\n              </div>\n\n              {labelPosition !== 'inline' || appearance === 'parallel' ? (\n                <div\n                  className={`flex ${\n                    labelPosition === 'top-right' || labelPosition === 'bottom-right' ? 'justify-end' : appearance === 'linear' ? 'ml-8' : ''\n                  }`}\n                >\n                  <Typography\n                    size='extra-small'\n                    variant='medium'\n                    className={`truncate ${index === currentStep ? 'text-neutral-900 dark:text-white' : 'text-neutral-400 dark:text-neutral-600'}`}\n                    appearance='custom'\n                  >\n                    {step?.description || ''}\n                  </Typography>\n                </div>\n              ) : null}\n            </div>\n            {index < steps.length - (appearance === 'linear' && labelPosition === 'inline' ? 1 : 0) && !hideLine ? (\n              <div\n                className={`w-full flex-grow h-0.5 min-w-[70px]  ${labelPosition !== 'inline' || appearance === 'parallel' ? 'my-2' : ''} ${\n                  index <= currentStep - (appearance === 'linear' && labelPosition === 'inline' ? 1 : 0) ? 'bg-primary-600' : 'bg-neutral-300'\n                }`}\n              />\n            ) : null}\n          </div>\n          {labelPosition === 'inline' && appearance === 'linear' ? (\n            <Typography\n              size='extra-small'\n              variant='medium'\n              className={`ml-8 truncate ${index === currentStep ? 'text-neutral-900 dark:text-white' : 'text-neutral-400 dark:text-neutral-600'}`}\n              appearance='custom'\n            >\n              {step?.description || ''}\n            </Typography>\n          ) : null}\n        </div>\n      </div>\n    );\n  };\n\n  return (\n    <div className={`w-full flex ${className}`} ref={stepsRef}>\n      {leftMostStep > 0 ? (\n        <div className={`flex ${appearance === 'parallel' ? 'flex-col' : ''}`}>\n          {onClick ? (\n            <Dropdown\n              menu={{\n                items: steps.slice(0, leftMostStep).map((step: TStep, index: number) => ({\n                  label: <div className='px-2 py-1'>{stepDetails(step, index, true)}</div>,\n                  key: index,\n                })),\n              }}\n              trigger={['click']}\n            >\n              <Typography\n                size='small'\n                variant='medium'\n                className={`px-2 ${steps.length - visibleStepCounts > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n                appearance='subtitle'\n              >\n                <Tooltip title={leftTooltip}>\n                  <div className='min-w-max'>\n                    {leftMostStep} More...\n                  </div>\n                </Tooltip>\n              </Typography>\n            </Dropdown>\n          ) : (\n            <Typography\n              size='small'\n              variant='medium'\n              className={`px-2 ${steps.length - visibleStepCounts > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n              appearance='subtitle'\n            >\n              <Tooltip title={leftTooltip}>\n                <div className='min-w-max'>\n                  {leftMostStep} More...\n                </div>\n              </Tooltip>\n            </Typography>\n          )}\n          <div className={`h-0.5 min-w-[40px] px-2 mr-2 bg-primary-600 ${appearance === 'parallel' ? 'mt-2' : 'mt-[11px]'}`} />\n        </div>\n      ) : null}\n\n      <div className='w-full flex flex-wrap gap-3 '>\n        {steps?.map((step: TStep, index: number) => {\n          if (leftMostStep <= index && index < rightMostStep) {\n            return stepDetails(step, index);\n          }\n          return null;\n        })}\n      </div>\n\n      {steps.length - rightMostStep > 0 ? (\n        <div className='flex flex-col'>\n          {onClick ? (\n            <Dropdown\n              menu={{\n                items: steps.slice(rightMostStep, steps?.length).map((step: TStep, index: number) => ({\n                  label: <div className='px-2 py-1'>{stepDetails(step, index + rightMostStep, true)}</div>,\n                  key: index,\n                })),\n              }}\n              trigger={['click']}\n            >\n              <Typography\n                size='small'\n                variant='medium'\n                className={`px-2 ${steps.length - rightMostStep > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n                appearance='subtitle'\n              >\n                <Tooltip title={rightTooltip}>\n                  <div className='min-w-max'>\n                    {steps.length - rightMostStep} More...\n                  </div>\n                </Tooltip>\n              </Typography>\n            </Dropdown>\n          ) : (\n            <Typography\n              size='small'\n              variant='medium'\n              className={`px-2 ${steps.length - rightMostStep > 0 ? 'cursor-pointer' : 'cursor-not-allowed'}`}\n              appearance='subtitle'\n            >\n              <Tooltip title={rightTooltip}>\n                <div className='min-w-max'>\n                  {steps.length - rightMostStep} More...\n                </div>\n              </Tooltip>\n            </Typography>\n          )}\n\n          <div className={`h-0.5 min-w-[40px] px-2 ml-2 bg-neutral-300 ${appearance === 'parallel' ? 'mt-2' : 'hidden'}`} />\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nStepper.displayName = 'Stepper';\n\nexport default Stepper;\n\n\n\n"],"names":["Stepper","steps","currentStep","appearance","labelPosition","onClick","className","showIndex","disableOneMore","isMainSideBarOpen","isAuthoringOpen","stepsRef","useRef","visibleStepCounts","setVisibleStepCounts","useState","leftMostStep","setLeftMostStep","rightMostStep","setRightMostStep","leftTooltip","setLeftTooltip","rightTooltip","setRightTooltip","getLabelDescriptionPosition","handleClientWidth","moreWidth","stepTitleWidth","stepWidth","count","index","useEffect","newRightTooltip","step","rightCount","mid","remainingStepsFromRight","leftCount","newLeftTooltip","useEventListener","stepDetails","hideLine","jsx","jsxs","Tooltip","Typography","Lock","Fragment","CheckIcon","Dropdown"],"mappings":"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"}
+{"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":";;;;;;;;AAuEA,MAAMA,IAAU,CAAC;AAAA,EACf,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,eAAAC,IAAgB;AAAA,EAChB,SAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,gBAAAC,IAAiB;AAAA,EACjB,mBAAAC,IAAoB;AAAA,EACpB,iBAAAC,IAAkB;AACpB,MAAqB;AACnB,QAAMC,IAAWC,EAA8B,IAAI,GAC7C,CAACC,GAAmBC,CAAoB,IAAIC,EAAiB,CAAC,GAC9D,CAACC,GAAcC,CAAe,IAAIF,EAAiB,CAAC,GACpD,CAACG,GAAeC,CAAgB,IAAIJ,EAAiB,CAAC,GACtD,CAACK,GAAaC,CAAc,IAAIN,EAAiB,EAAE,GACnD,CAACO,GAAcC,CAAe,IAAIR,EAAiB,EAAE,GAErDS,IAA8B,MAC9BrB,MAAkB,SAASA,MAAkB,cACxC,aACEA,MAAkB,YAAYA,MAAkB,iBAClD,qBACED,MAAe,WACjB,aAEA,YAILuB,IAAoB,MAAM;AAC9B,eAAW,MAAM;AACf,MAAAX,EAAqB,CAAC;AACtB,YAAMY,IAAY,KACZC,IAAiB;AACvB,UAAIC,IAAY,GACZC,IAAQ;AACZ,eAASC,IAAQ,GAAGA,IAAQ9B,EAAM,WAC5BW,GAAU,SAAS,eAAeA,GAAU,SAAS,cAAciB,IAAYD,IAAiBD,IAD5DI;AAEtC,QAAAF,KAAaD,GACbE,IAAQC,IAAQ;AAKpB,MAAAhB,EAAqBe,CAAK,GACtBlB,GAAU,SAAS,eAAeA,GAAU,SAAS,cAAc,OACrEG,EAAqBd,GAAO,MAAM;AAAA,IAEtC,GAAG,GAAG;AAAA,EACR;AAEA,EAAA+B,EAAU,MAAM;AACd,IAAAN,EAAA;AAAA,EACF,GAAG,CAAChB,GAAmBT,GAAOC,CAAW,CAAC,GAE1C8B,EAAU,MAAM;AACd,eAAW,MAAM;AACf,MAAAN,EAAA;AAAA,IACF,GAAG,GAAG;AAAA,EACR,GAAG,CAACf,CAAe,CAAC,GAEpBqB,EAAU,MAAM;AACd,QAAIlB,IAAoB;AACtB,UAAIA,IAAoBZ,GAAa;AACnC,YAAI+B,IAAkBhC,GAClB,MAAMa,GAAmBb,GAAO,MAAM,GACtC,IAAI,CAACiC,MAASA,GAAM,KAAK,GACzB,KAAK,IAAI,GAETC,IAAarB;AACjB,QAAIL,KAAkB0B,MAAelC,EAAM,SAAS,MAClDkC,IAAalC,EAAM,QACnBgC,IAAkB,KAEpBf,EAAgB,CAAC,GACjBE,EAAiBe,CAAU,GAC3BX,EAAgBS,CAAe;AAAA,MACjC,OAAO;AACL,cAAMG,IAAM,KAAK,OAAOtB,IAAoB,KAAK,CAAC,GAC5CuB,IAA0BnC,IAAckC,IAAMnC,GAAO;AAC3D,YAAIkC,IAAajC,IAAckC,GAC3BE,IAAYpC,IAAc,KAAK,IAAIY,IAAoBsB,GAAK,CAAC,KAAKC,IAA0B,IAAIA,IAA0B,IAC1HE,IAAiBtC,GACjB,MAAM,GAAGqC,CAAS,GAClB,IAAI,CAACJ,MAASA,GAAM,KAAK,GACzB,KAAK,IAAI,GACTD,IAAkBhC,GAClB,MAAMkC,GAAYlC,GAAO,MAAM,GAC/B,IAAI,CAACiC,MAASA,GAAM,KAAK,GACzB,KAAK,IAAI;AAEb,QAAIzB,KAAkB6B,MAAc,MAClCA,IAAY,GACZC,IAAiB,KAGf9B,KAAkB0B,MAAelC,EAAM,SAAS,MAClDkC,IAAalC,EAAM,QACnBgC,IAAkB,KAEpBf,EAAgBoB,CAAS,GACzBlB,EAAiBe,CAAU,GAC3Bb,EAAeiB,CAAc,GAC7Bf,EAAgBS,CAAe;AAAA,MACjC;AAAA,EAEJ,GAAG,CAACnB,GAAmBH,GAAiBD,GAAmBT,GAAOC,CAAW,CAAC,GAE9EsC,EAAiB,UAAUd,CAAiB;AAE5C,QAAMe,IAAc,CAACP,GAAaH,GAAeW,IAAW,OAAU;AACpE,UAAMC,IAAgB,EAAQT,GAAM,YAAa,EAAQA,GAAM,eAAgB5B,IAAkB,CAACA,EAAgByB,GAAOG,CAAI,IAAI,KAC3HU,IAAc,EAAQvC,KAAY,CAACsC,GAEnCE,IAAqB,MAAM;AAC/B,MAAKD,KACLvC,IAAU0B,CAAK;AAAA,IACjB,GAGMe,IAAwBzC,IAC1B;AAAA,MACE,MAAM;AAAA,MACN,UAAUuC,IAAc,IAAI;AAAA,MAC5B,iBAAiB,CAACA;AAAA,MAClB,SAASC;AAAA,MACT,WAAW,CAACE,MAAyC;AACnD,SAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACzCA,EAAM,eAAA,GACNF,EAAA;AAAA,MAEJ;AAAA,IAAA,IAEF,CAAA,GAEEG,IAA4B3C,IAC9BuC,IACE,yIACA,uBACF;AAEJ,WACE,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,gBAAclB,MAAU7B,IAAc,SAAS;AAAA,QAC/C,WAAW,QAAQ6B,IAAQ9B,EAAM,SAAS,KAAKE,KAAc,aAAa,mBAAmB,EAAE;AAAA,QAE/F,UAAA,gBAAA+C,EAAC,OAAA,EAAI,WAAW,wBACd,UAAA;AAAA,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAW,QAAQzB,EAAA,CAA6B,IAAIrB,MAAkB,YAAYD,MAAe,WAAW,iBAAiB,EAAE,IAClI,UAAA;AAAA,YAAA,gBAAA+C;AAAA,cAAC;AAAA,cAAA;AAAA,gBACE,GAAGJ;AAAA,gBACJ,WAAW,GAAG1C,MAAkB,WAAW,gBAAgB,QAAQ,kBAAkB4C,CAAyB;AAAA,gBAE9G,UAAA;AAAA,kBAAA,gBAAAC,EAAC,SAAI,WAAW,QAAQ7C,MAAkB,eAAeA,MAAkB,iBAAiB,gBAAgB,EAAE,IAC5G,UAAA,gBAAA6C,EAACE,GAAA,EAAQ,OAAOR,KAAgBT,GAAM,uBAAuBA,GAAM,aACjE,UAAA,gBAAAgB;AAAA,oBAACE;AAAA,oBAAA;AAAA,sBACC,MAAK;AAAA,sBACL,SAAQ;AAAA,sBACR,WAAW,8BACTrB,KAAS7B,IAAc,2CAA2C,wCACpE;AAAA,sBACA,YAAW;AAAA,sBAEV,UAAA;AAAA,wBAAAM,IACC,gBAAAyC;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,WAAW,GACT9C,MAAe,aACX,sBACA,WACE4B,KAAS7B,IAAc,mBAAmB,kCAC5C,2DACN;AAAA,4BAEC,UAAAgC,GAAM,WACL,gBAAAe,EAAC,OAAA,EAAI,WAAU,oCACb,UAAA,gBAAAA,EAACI,GAAA,EAAK,IAAI,EAAE,UAAU,GAAA,GAAM,GAC9B,IAEA,gBAAAJ,EAAAK,GAAA,EACG,UAAApD,IAAc6B,KAAS5B,MAAe,WACrC,gBAAA8C,EAACM,GAAA,EAAU,MAAM,IAAI,WAAU,6BAAA,CAA6B,IAE5D,gBAAAN;AAAA,8BAACG;AAAA,8BAAA;AAAA,gCACC,MAAM,GAAGjD,MAAe,aAAa,UAAU,aAAa;AAAA,gCAC5D,SAAQ;AAAA,gCACR,WAAU;AAAA,gCACV,YAAW;AAAA,gCAEV,UAAA4B,IAAQ;AAAA,8BAAA;AAAA,4BAAA,EACX,CAEJ;AAAA,0BAAA;AAAA,wBAAA,IAGF;AAAA,wBAEJ,gBAAAkB,EAAC,OAAA,EAAI,WAAW,YAAY7C,MAAkB,WAAW,SAAS,MAAM,IAAI2B,KAAS7B,IAAc,KAAK,qBAAqB,IAC1H,aAAM,MAAA,CACT;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBAAA,GAEJ,EAAA,CACF;AAAA,kBAECE,MAAkB,YAAYD,MAAe,aAC5C,gBAAA8C;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAW,QACT7C,MAAkB,eAAeA,MAAkB,iBAAiB,gBAAgBD,MAAe,WAAW,SAAS,EACzH;AAAA,sBAEA,UAAA,gBAAA8C;AAAA,wBAACG;AAAA,wBAAA;AAAA,0BACC,MAAK;AAAA,0BACL,SAAQ;AAAA,0BACR,WAAW,YAAYrB,MAAU7B,IAAc,qCAAqC,wCAAwC;AAAA,0BAC5H,YAAW;AAAA,0BAEV,aAAM,eAAe;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACxB;AAAA,kBAAA,IAEA;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAEL6B,IAAQ9B,EAAM,UAAUE,MAAe,YAAYC,MAAkB,WAAW,IAAI,MAAM,CAACsC,IAC1F,gBAAAO;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,wCAAwC7C,MAAkB,YAAYD,MAAe,aAAa,SAAS,EAAE,IACtH4B,KAAS7B,KAAeC,MAAe,YAAYC,MAAkB,WAAW,IAAI,KAAK,mBAAmB,gBAC9G;AAAA,cAAA;AAAA,YAAA,IAEA;AAAA,UAAA,GACN;AAAA,UACCA,MAAkB,YAAYD,MAAe,WAC5C,gBAAA8C,EAAC,OAAA,EAAI,WAAW,oBAAoBD,CAAyB,IAAI,SAASH,GACxE,UAAA,gBAAAI;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,WAAW,iBAAiBrB,MAAU7B,IAAc,qCAAqC,wCAAwC;AAAA,cACjI,YAAW;AAAA,cAEV,aAAM,eAAe;AAAA,YAAA;AAAA,UAAA,GAE1B,IACE;AAAA,QAAA,EAAA,CACN;AAAA,MAAA;AAAA,MAjGK6B;AAAA,IAAA;AAAA,EAoGX;AAEA,2BACG,OAAA,EAAI,WAAW,eAAexB,CAAS,IAAI,KAAKK,GAC9C,UAAA;AAAA,IAAAK,IAAe,sBACb,OAAA,EAAI,WAAW,QAAQd,MAAe,aAAa,aAAa,EAAE,IAChE,UAAA;AAAA,MAAAE,IACC,gBAAA4C;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,YACJ,OAAOvD,EAAM,MAAM,GAAGgB,CAAY,EAAE,IAAI,CAACiB,GAAaH,OAAmB;AAAA,cACvE,yBAAQ,OAAA,EAAI,WAAU,aAAa,UAAAU,EAAYP,GAAMH,GAAO,EAAI,EAAA,CAAE;AAAA,cAClE,KAAKA;AAAA,YAAA,EACL;AAAA,UAAA;AAAA,UAEJ,SAAS,CAAC,OAAO;AAAA,UAEjB,UAAA,gBAAAkB;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,WAAW,QAAQnD,EAAM,SAASa,IAAoB,IAAI,mBAAmB,oBAAoB;AAAA,cACjG,YAAW;AAAA,cAEX,4BAACqC,GAAA,EAAQ,OAAO9B,GACd,UAAA,gBAAA6B,EAAC,OAAA,EAAI,WAAU,aACZ,UAAA;AAAA,gBAAAjC;AAAA,gBAAa;AAAA,cAAA,EAAA,CAChB,EAAA,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA,IAGF,gBAAAgC;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,WAAW,QAAQnD,EAAM,SAASa,IAAoB,IAAI,mBAAmB,oBAAoB;AAAA,UACjG,YAAW;AAAA,UAEX,4BAACqC,GAAA,EAAQ,OAAO9B,GACd,UAAA,gBAAA6B,EAAC,OAAA,EAAI,WAAU,aACZ,UAAA;AAAA,YAAAjC;AAAA,YAAa;AAAA,UAAA,EAAA,CAChB,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,gBAAAgC,EAAC,SAAI,WAAW,+CAA+C9C,MAAe,aAAa,SAAS,WAAW,GAAA,CAAI;AAAA,IAAA,EAAA,CACrH,IACE;AAAA,IAEJ,gBAAA8C,EAAC,SAAI,WAAU,gCACZ,aAAO,IAAI,CAACf,GAAaH,MACpBd,KAAgBc,KAASA,IAAQZ,IAC5BsB,EAAYP,GAAMH,CAAK,IAEzB,IACR,EAAA,CACH;AAAA,IAEC9B,EAAM,SAASkB,IAAgB,IAC9B,gBAAA+B,EAAC,OAAA,EAAI,WAAU,iBACZ,UAAA;AAAA,MAAA7C,IACC,gBAAA4C;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,YACJ,OAAOvD,EAAM,MAAMkB,GAAelB,GAAO,MAAM,EAAE,IAAI,CAACiC,GAAaH,OAAmB;AAAA,cACpF,OAAO,gBAAAkB,EAAC,OAAA,EAAI,WAAU,aAAa,YAAYf,GAAMH,IAAQZ,GAAe,EAAI,EAAA,CAAE;AAAA,cAClF,KAAKY;AAAA,YAAA,EACL;AAAA,UAAA;AAAA,UAEJ,SAAS,CAAC,OAAO;AAAA,UAEjB,UAAA,gBAAAkB;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,WAAW,QAAQnD,EAAM,SAASkB,IAAgB,IAAI,mBAAmB,oBAAoB;AAAA,cAC7F,YAAW;AAAA,cAEX,4BAACgC,GAAA,EAAQ,OAAO5B,GACd,UAAA,gBAAA2B,EAAC,OAAA,EAAI,WAAU,aACZ,UAAA;AAAA,gBAAAjD,EAAM,SAASkB;AAAA,gBAAc;AAAA,cAAA,EAAA,CAChC,EAAA,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA,IAGF,gBAAA8B;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,WAAW,QAAQnD,EAAM,SAASkB,IAAgB,IAAI,mBAAmB,oBAAoB;AAAA,UAC7F,YAAW;AAAA,UAEX,4BAACgC,GAAA,EAAQ,OAAO5B,GACd,UAAA,gBAAA2B,EAAC,OAAA,EAAI,WAAU,aACZ,UAAA;AAAA,YAAAjD,EAAM,SAASkB;AAAA,YAAc;AAAA,UAAA,EAAA,CAChC,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,MAIJ,gBAAA8B,EAAC,SAAI,WAAW,+CAA+C9C,MAAe,aAAa,SAAS,QAAQ,GAAA,CAAI;AAAA,IAAA,EAAA,CAClH,IACE;AAAA,EAAA,GACN;AAEJ;AAEAH,EAAQ,cAAc;"}

package/package.json

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