@lax-wp/design-system 0.13.33 → 0.13.35

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

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

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

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

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

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

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

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

package/dist/components/navigation/tabs/TabOptions.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("@mui/icons-material"),I=require("antd"),S=require("../../../_virtual/index.cjs.js"),c=require("react"),p=require("../../button/Button.cjs.js"),l=require("../../data-display/typography/Typography.cjs.js"),C=require("../../forms/base-input-field/BaseInputField.cjs.js"),L=require("../../forms/select-field/SelectField.cjs.js"),g=require("../../forms/toggle/Toggle.cjs.js"),M=require("../../button/IconButton.cjs.js"),m=require("./types.cjs.js"),q=({fontSize:s=24})=>e.jsx("svg",{width:s,height:s,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),z=({fontSize:s=24})=>e.jsx("svg",{width:s,height:s,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),A=[{label:"Default",value:"default",icon:e.jsx(a.FormatListBulletedOutlined,{sx:{height:"14px",width:"14px"}})},{label:"A-Z",value:"asc",icon:e.jsx(q,{fontSize:24})},{label:"Z-A",value:"desc",icon:e.jsx(z,{fontSize:24})}],B=({savedConfig:s,onApplyFilter:j,setUnsavedChanges:y,handleTabSort:b,onSearchChange:x,hasSuffixRecord:v=!1})=>{const[w,o]=c.useState(!1),[r,d]=c.useState(m.INITIAL_TAB_OPTION_CONFIG),[i,h]=c.useState(""),n=(t,u)=>{d(T=>({...T,[t]:u}))},k=()=>{d({filterType:{label:"Contains",value:"contains"},sortOrder:"default",showCounts:!0,lockOrder:!1}),h(""),x("","contains")},N=()=>{j({filterType:r.filterType,sortOrder:r.sortOrder,showCounts:r.showCounts,lockOrder:r.lockOrder}),b(r.sortOrder),y(!0),o(!1),i&&x(i,r.filterType.value)};c.useEffect(()=>{s&&JSON.stringify(s)!==JSON.stringify(r)&&d(s)},[s]);const O=e.jsxs("div",{children:[e.jsxs("div",{className:"p-5 space-y-5",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsxs(l.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(a.Search,{sx:{height:"14px",width:"14px"}})," Filter Tabs"]}),e.jsxs("div",{className:"grid grid-cols-[150px_3fr] gap-2",children:[e.jsx(L.SelectField,{showSearch:!1,allowClear:!1,value:r.filterType,onChange:t=>n("filterType",t),options:[{label:"Contains",value:"contains"},{label:"Does not contain",value:"does-not-contain"}]}),e.jsx(C.BaseInputField,{id:"base-input-field-tab-options-filter",placeholder:"Insert value",value:i,onChange:t=>h(t),isClearable:!0})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(l.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(a.SwapVertOutlined,{sx:{height:"14px",width:"14px"}})," Sort"]}),e.jsx("div",{className:"grid grid-cols-3 gap-2",children:A.map(t=>{const u=r.sortOrder===t.value;return e.jsxs(p,{appearance:"outline",status:u?"secondary":"secondary-neutral",id:`sort-option-${t.value}`,onClick:()=>n("sortOrder",t.value),className:"w-full",children:[t.icon,t.label]},t.value)})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(l.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(a.VisibilityOutlined,{sx:{height:"14px",width:"14px"}})," Display Options"]}),v&&e.jsxs("div",{className:"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg",children:e.jsx(a.TagOutlined,{sx:{height:"16px",width:"16px"},className:"text-neutral-800 dark:text-white"})}),e.jsxs("div",{className:"flex flex-col gap-0",children:[e.jsx(l.Typography,{size:"small",variant:"medium",appearance:"title",children:"Show Counts"}),e.jsx(l.Typography,{size:"extra-small",variant:"regular",appearance:"subtitle",children:"Display item counts on tabs"})]})]}),e.jsx("div",{className:"flex items-center justify-end",children:e.jsx(g.Toggle,{isChecked:r.showCounts,onChange:t=>n("showCounts",t),hideStatus:!0,icon:{checkedIcon:e.jsx(a.RemoveRedEyeOutlined,{sx:{fontSize:12},className:"cursor-pointer !block text-primary-600 dark:text-primary-400"}),uncheckedIcon:e.jsx(a.VisibilityOffOutlined,{sx:{fontSize:12},className:"cursor-pointer !block text-neutral-700 dark:text-neutral-300"})},withIcon:!0})})]}),e.jsxs("div",{className:"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg",children:e.jsx(a.LockOutlined,{sx:{height:"16px",width:"16px"},className:"text-neutral-800 dark:text-white"})}),e.jsxs("div",{className:"flex flex-col gap-0",children:[e.jsx(l.Typography,{size:"small",variant:"medium",appearance:"title",children:"Lock Order"}),e.jsx(l.Typography,{size:"extra-small",variant:"regular",appearance:"subtitle",children:"Prevent tab reordering"})]})]}),e.jsx("div",{className:"flex items-center justify-end",children:e.jsx(g.Toggle,{isChecked:r.lockOrder,onChange:t=>n("lockOrder",t),hideStatus:!0,withIcon:!0,icon:{checkedIcon:e.jsx(a.LockOutlined,{sx:{fontSize:12},className:"cursor-pointer !block text-primary-600 dark:text-primary-400"}),uncheckedIcon:e.jsx(a.LockOpenRounded,{sx:{fontSize:12},className:"cursor-pointer !block text-neutral-700"})}})})]})]})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5",children:[e.jsx(p,{id:"btn-tab-options-reset",appearance:"outline",status:"cancel",className:"w-full",onClick:k,children:"Reset"}),e.jsx(p,{id:"btn-tab-options-apply",appearance:"filled",status:"primary",className:"w-full",onClick:N,disabled:JSON.stringify(s)===JSON.stringify(r)&&i==="",children:"Apply"})]})]});return e.jsx(I.Popover,{classNames:{body:"rounded-md w-[348px] !p-0"},placement:"bottomLeft",content:O,trigger:["click"],arrow:!1,open:w,onOpenChange:o,children:e.jsx("div",{className:"border-l border-neutral-200 dark:border-neutral-800 pl-2",children:e.jsxs(M,{tooltip:"Manage Tabs",variant:"ghost",className:"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative",onClick:()=>o(!0),children:[e.jsx(a.Tune,{sx:{height:"20px",width:"20px"}}),JSON.stringify(r)!==JSON.stringify(m.INITIAL_TAB_OPTION_CONFIG)&&e.jsx(f,{className:"text-primary-600"})]})})})},f=({className:s})=>e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"5",height:"5",viewBox:"0 0 4 4",fill:"none",className:S("absolute top-0.5 right-0.5",s),children:e.jsx("circle",{cx:"2",cy:"2",r:"2",fill:"currentColor"})});exports.Indicator=f;exports.TabOptions=B;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("@mui/icons-material"),I=require("antd"),C=require("../../../_virtual/index.cjs.js"),c=require("react"),p=require("../../button/Button.cjs.js"),l=require("../../data-display/typography/Typography.cjs.js"),S=require("../../forms/base-input-field/BaseInputField.cjs.js"),L=require("../../forms/select-field/SelectField.cjs.js"),g=require("../../forms/toggle/Toggle.cjs.js"),M=require("../../button/IconButton.cjs.js"),m=require("./types.cjs.js"),q=({fontSize:s=24})=>e.jsx("svg",{width:s,height:s,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),A=({fontSize:s=24})=>e.jsx("svg",{width:s,height:s,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),B=[{label:"Default",value:"default",icon:e.jsx(a.FormatListBulletedOutlined,{sx:{height:"14px",width:"14px"}})},{label:"A-Z",value:"asc",icon:e.jsx(q,{fontSize:24})},{label:"Z-A",value:"desc",icon:e.jsx(A,{fontSize:24})}],F=({savedConfig:s,onApplyFilter:f,setUnsavedChanges:y,handleTabSort:b,onSearchChange:x,hasSuffixRecord:v=!1})=>{const[w,o]=c.useState(!1),[r,d]=c.useState(m.INITIAL_TAB_OPTION_CONFIG),[i,h]=c.useState(""),n=(t,u)=>{d(T=>({...T,[t]:u}))},k=()=>{d({filterType:{label:"Contains",value:"contains"},sortOrder:"default",showCounts:!0,lockOrder:!1}),h(""),x("","contains")},N=()=>{f({filterType:r.filterType,sortOrder:r.sortOrder,showCounts:r.showCounts,lockOrder:r.lockOrder}),b(r.sortOrder),y(!0),o(!1),i&&x(i,r.filterType.value)};c.useEffect(()=>{s&&JSON.stringify(s)!==JSON.stringify(r)&&d(s)},[s]);const O=e.jsxs("div",{children:[e.jsxs("div",{className:"p-5 space-y-5",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsxs(l.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(a.Search,{sx:{height:"14px",width:"14px"}})," Filter Tabs"]}),e.jsxs("div",{className:"grid grid-cols-[150px_3fr] gap-2",children:[e.jsx(L.SelectField,{showSearch:!1,allowClear:!1,value:r.filterType,onChange:t=>n("filterType",t),options:[{label:"Contains",value:"contains"},{label:"Does not contain",value:"does-not-contain"}]}),e.jsx(S.BaseInputField,{id:"base-input-field-tab-options-filter",placeholder:"Insert value",value:i,onChange:t=>h(t),isClearable:!0})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(l.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(a.SwapVertOutlined,{sx:{height:"14px",width:"14px"}})," Sort"]}),e.jsx("div",{className:"grid grid-cols-3 gap-2",children:B.map(t=>{const u=r.sortOrder===t.value;return e.jsxs(p,{appearance:"outline",status:u?"secondary":"secondary-neutral",id:`sort-option-${t.value}`,onClick:()=>n("sortOrder",t.value),className:"w-full",children:[t.icon,t.label]},t.value)})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(l.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(a.VisibilityOutlined,{sx:{height:"14px",width:"14px"}})," Display Options"]}),v&&e.jsxs("div",{className:"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg",children:e.jsx(a.TagOutlined,{sx:{height:"16px",width:"16px"},className:"text-neutral-800 dark:text-white"})}),e.jsxs("div",{className:"flex flex-col gap-0",children:[e.jsx(l.Typography,{size:"small",variant:"medium",appearance:"title",children:"Show Counts"}),e.jsx(l.Typography,{size:"extra-small",variant:"regular",appearance:"subtitle",children:"Display item counts on tabs"})]})]}),e.jsx("div",{className:"flex items-center justify-end",children:e.jsx(g.Toggle,{isChecked:r.showCounts,onChange:t=>n("showCounts",t),hideStatus:!0,icon:{checkedIcon:e.jsx(a.RemoveRedEyeOutlined,{sx:{fontSize:12},className:"cursor-pointer !block text-primary-600 dark:text-primary-400"}),uncheckedIcon:e.jsx(a.VisibilityOffOutlined,{sx:{fontSize:12},className:"cursor-pointer !block text-neutral-700 dark:text-neutral-300"})},withIcon:!0})})]}),e.jsxs("div",{className:"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg",children:e.jsx(a.LockOutlined,{sx:{height:"16px",width:"16px"},className:"text-neutral-800 dark:text-white"})}),e.jsxs("div",{className:"flex flex-col gap-0",children:[e.jsx(l.Typography,{size:"small",variant:"medium",appearance:"title",children:"Lock Order"}),e.jsx(l.Typography,{size:"extra-small",variant:"regular",appearance:"subtitle",children:"Prevent tab reordering"})]})]}),e.jsx("div",{className:"flex items-center justify-end",children:e.jsx(g.Toggle,{isChecked:r.lockOrder,onChange:t=>n("lockOrder",t),hideStatus:!0,withIcon:!0,icon:{checkedIcon:e.jsx(a.LockOutlined,{className:"cursor-pointer !block text-primary-600 dark:text-primary-400 w-2xs h-2xs"}),uncheckedIcon:e.jsx(a.LockOpenRounded,{className:"cursor-pointer !block text-neutral-700 w-2xs h-2xs"})}})})]})]})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5",children:[e.jsx(p,{id:"btn-tab-options-reset",appearance:"outline",status:"cancel",className:"w-full",onClick:k,children:"Reset"}),e.jsx(p,{id:"btn-tab-options-apply",appearance:"filled",status:"primary",className:"w-full",onClick:N,disabled:JSON.stringify(s)===JSON.stringify(r)&&i==="",children:"Apply"})]})]});return e.jsx(I.Popover,{classNames:{body:"rounded-md w-[348px] !p-0"},placement:"bottomLeft",content:O,trigger:["click"],arrow:!1,open:w,onOpenChange:o,children:e.jsx("div",{className:"border-l border-neutral-200 dark:border-neutral-800 pl-2",children:e.jsxs(M,{tooltip:"Manage Tabs",variant:"ghost",className:"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative",onClick:()=>o(!0),children:[e.jsx(a.Tune,{sx:{height:"20px",width:"20px"}}),JSON.stringify(r)!==JSON.stringify(m.INITIAL_TAB_OPTION_CONFIG)&&e.jsx(j,{className:"text-primary-600"})]})})})},j=({className:s})=>e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"5",height:"5",viewBox:"0 0 4 4",fill:"none",className:C("absolute top-0.5 right-0.5",s),children:e.jsx("circle",{cx:"2",cy:"2",r:"2",fill:"currentColor"})});exports.Indicator=j;exports.TabOptions=F;
 //# sourceMappingURL=TabOptions.cjs.js.map

package/dist/components/navigation/tabs/TabOptions.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabOptions.cjs.js","sources":["../../../../src/components/navigation/tabs/TabOptions.tsx"],"sourcesContent":["import {\n  FormatListBulletedOutlined,\n  LockOpenRounded,\n  LockOutlined,\n  RemoveRedEyeOutlined,\n  Search,\n  SwapVertOutlined,\n  TagOutlined,\n  Tune,\n  VisibilityOffOutlined,\n  VisibilityOutlined,\n} from '@mui/icons-material';\nimport { Popover } from 'antd';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport Button from '../../button/Button';\nimport { Typography } from '../../data-display/typography/Typography';\nimport { BaseInputField } from '../../forms/base-input-field/BaseInputField';\nimport { SelectField } from '../../forms/select-field/SelectField';\nimport { Toggle } from '../../forms/toggle/Toggle';\nimport IconButton from '../../button/IconButton';\nimport type { TabOptionConfig } from './types';\nimport { INITIAL_TAB_OPTION_CONFIG } from './types';\n\ntype TabOptionsProps = {\n  savedConfig: TabOptionConfig;\n  onApplyFilter: (config: TabOptionConfig) => void;\n  setUnsavedChanges: (unsavedChanges: boolean) => void;\n  handleTabSort: (order: 'asc' | 'desc') => void;\n  onSearchChange: (searchValue: string, filterType: 'contains' | 'does-not-contain') => void;\n  hasSuffixRecord: boolean;\n};\n\nconst SortAlphabetDownIcon = ({ fontSize = 24 }: { fontSize?: number }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SortAlphabetUpIcon = ({ fontSize = 24 }: { fontSize?: number }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SORT_OPTIONS = [\n  {\n    label: 'Default',\n    value: 'default',\n    icon: <FormatListBulletedOutlined sx={{ height: '14px', width: '14px' }} />,\n  },\n  {\n    label: 'A-Z',\n    value: 'asc',\n    icon: <SortAlphabetDownIcon fontSize={24} />,\n  },\n  {\n    label: 'Z-A',\n    value: 'desc',\n    icon: <SortAlphabetUpIcon fontSize={24} />,\n  },\n];\n\nexport const TabOptions = ({\n  savedConfig,\n  onApplyFilter,\n  setUnsavedChanges,\n  handleTabSort,\n  onSearchChange,\n  hasSuffixRecord = false,\n}: TabOptionsProps) => {\n  const [isTabOptionsVisible, setIsTabOptionsVisible] = useState(false);\n  const [tabOptionConfig, setTabOptionConfig] = useState<TabOptionConfig>(INITIAL_TAB_OPTION_CONFIG);\n  const [filterValue, setFilterValue] = useState('');\n\n  const handleConfigChange = <K extends keyof typeof tabOptionConfig>(key: K, value: (typeof tabOptionConfig)[K]) => {\n    setTabOptionConfig((prev) => ({\n      ...prev,\n      [key]: value,\n    }));\n  };\n\n  const handleReset = () => {\n    setTabOptionConfig({\n      filterType: { label: 'Contains', value: 'contains' },\n      sortOrder: 'default',\n      showCounts: true,\n      lockOrder: false,\n    });\n    setFilterValue('');\n    onSearchChange('', 'contains');\n  };\n\n  const applyFilter = () => {\n    onApplyFilter({\n      filterType: tabOptionConfig.filterType,\n      sortOrder: tabOptionConfig.sortOrder,\n      showCounts: tabOptionConfig.showCounts,\n      lockOrder: tabOptionConfig.lockOrder,\n    });\n    handleTabSort(tabOptionConfig.sortOrder as 'asc' | 'desc');\n    setUnsavedChanges(true);\n    setIsTabOptionsVisible(false);\n    if (filterValue) {\n      onSearchChange(filterValue, tabOptionConfig.filterType.value);\n    }\n  };\n\n  useEffect(() => {\n    if (savedConfig && JSON.stringify(savedConfig) !== JSON.stringify(tabOptionConfig)) {\n      setTabOptionConfig(savedConfig);\n    }\n  }, [savedConfig]);\n\n  const content = (\n    <div>\n      <div className=\"p-5 space-y-5\">\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <Search sx={{ height: '14px', width: '14px' }} /> Filter Tabs\n          </Typography>\n          <div className=\"grid grid-cols-[150px_3fr] gap-2\">\n            <SelectField\n              showSearch={false}\n              allowClear={false}\n              value={tabOptionConfig.filterType}\n              onChange={(value) => handleConfigChange('filterType', value)}\n              options={[\n                { label: 'Contains', value: 'contains' },\n                { label: 'Does not contain', value: 'does-not-contain' },\n              ]}\n            />\n            <BaseInputField\n              id=\"base-input-field-tab-options-filter\"\n              placeholder=\"Insert value\"\n              value={filterValue}\n              onChange={(value: string) => setFilterValue(value)}\n              isClearable\n            />\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <SwapVertOutlined sx={{ height: '14px', width: '14px' }} /> Sort\n          </Typography>\n          <div className=\"grid grid-cols-3 gap-2\">\n            {SORT_OPTIONS.map((option) => {\n              const isActive = tabOptionConfig.sortOrder === option.value;\n              return (\n                <Button\n                  appearance=\"outline\"\n                  status={isActive ? 'secondary' : 'secondary-neutral'}\n                  id={`sort-option-${option.value}`}\n                  onClick={() => handleConfigChange('sortOrder', option.value as 'default' | 'asc' | 'desc')}\n                  className=\"w-full\"\n                  key={option.value}\n                >\n                  {option.icon}\n                  {option.label}\n                </Button>\n              );\n            })}\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <VisibilityOutlined sx={{ height: '14px', width: '14px' }} /> Display Options\n          </Typography>\n          {hasSuffixRecord && (\n            <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n                  <TagOutlined sx={{ height: '16px', width: '16px' }} className=\"text-neutral-800 dark:text-white\" />\n                </div>\n                <div className=\"flex flex-col gap-0\">\n                  <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                    Show Counts\n                  </Typography>\n                  <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                    Display item counts on tabs\n                  </Typography>\n                </div>\n              </div>\n              <div className=\"flex items-center justify-end\">\n                <Toggle\n                  isChecked={tabOptionConfig.showCounts}\n                  onChange={(v) => handleConfigChange('showCounts', v)}\n                  hideStatus\n                  icon={{\n                    checkedIcon: <RemoveRedEyeOutlined sx={{ fontSize: 12 }} className=\"cursor-pointer !block text-primary-600 dark:text-primary-400\" />,\n                    uncheckedIcon: <VisibilityOffOutlined sx={{ fontSize: 12 }} className=\"cursor-pointer !block text-neutral-700 dark:text-neutral-300\" />,\n                  }}\n                  withIcon\n                />\n              </div>\n            </div>\n          )}\n          <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n            <div className=\"flex items-center gap-2\">\n              <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n                <LockOutlined sx={{ height: '16px', width: '16px' }} className=\"text-neutral-800 dark:text-white\" />\n              </div>\n              <div className=\"flex flex-col gap-0\">\n                <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                  Lock Order\n                </Typography>\n                <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                  Prevent tab reordering\n                </Typography>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-end\">\n              <Toggle\n                isChecked={tabOptionConfig.lockOrder}\n                onChange={(v) => handleConfigChange('lockOrder', v)}\n                hideStatus\n                withIcon\n                icon={{\n                  checkedIcon: <LockOutlined sx={{ fontSize: 12 }} className=\"cursor-pointer !block text-primary-600 dark:text-primary-400\" />,\n                  uncheckedIcon: <LockOpenRounded sx={{ fontSize: 12 }} className=\"cursor-pointer !block text-neutral-700\" />,\n                }}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5\">\n        <Button id=\"btn-tab-options-reset\" appearance=\"outline\" status=\"cancel\" className=\"w-full\" onClick={handleReset}>\n          Reset\n        </Button>\n        <Button\n          id=\"btn-tab-options-apply\"\n          appearance=\"filled\"\n          status=\"primary\"\n          className=\"w-full\"\n          onClick={applyFilter}\n          disabled={JSON.stringify(savedConfig) === JSON.stringify(tabOptionConfig) && filterValue === ''}\n        >\n          Apply\n        </Button>\n      </div>\n    </div>\n  );\n\n  return (\n    <Popover\n      classNames={{\n        body: 'rounded-md w-[348px] !p-0',\n      }}\n      placement=\"bottomLeft\"\n      content={content}\n      trigger={['click']}\n      arrow={false}\n      open={isTabOptionsVisible}\n      onOpenChange={setIsTabOptionsVisible}\n    >\n      <div className=\"border-l border-neutral-200 dark:border-neutral-800 pl-2\">\n        <IconButton\n          tooltip=\"Manage Tabs\"\n          variant=\"ghost\"\n          className=\"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative\"\n          onClick={() => setIsTabOptionsVisible(true)}\n        >\n          <Tune sx={{ height: '20px', width: '20px' }} />\n          {JSON.stringify(tabOptionConfig) !== JSON.stringify(INITIAL_TAB_OPTION_CONFIG) && <Indicator className=\"text-primary-600\" />}\n        </IconButton>\n      </div>\n    </Popover>\n  );\n};\n\nexport const Indicator = ({ className }: { className?: string }) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"5\"\n      height=\"5\"\n      viewBox=\"0 0 4 4\"\n      fill=\"none\"\n      className={classNames('absolute top-0.5 right-0.5', className)}\n    >\n      <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\n    </svg>\n  );\n};\n"],"names":["SortAlphabetDownIcon","fontSize","jsx","SortAlphabetUpIcon","SORT_OPTIONS","FormatListBulletedOutlined","TabOptions","savedConfig","onApplyFilter","setUnsavedChanges","handleTabSort","onSearchChange","hasSuffixRecord","isTabOptionsVisible","setIsTabOptionsVisible","useState","tabOptionConfig","setTabOptionConfig","INITIAL_TAB_OPTION_CONFIG","filterValue","setFilterValue","handleConfigChange","key","value","prev","handleReset","applyFilter","useEffect","content","jsxs","Typography","Search","SelectField","BaseInputField","SwapVertOutlined","option","isActive","Button","VisibilityOutlined","TagOutlined","Toggle","v","RemoveRedEyeOutlined","VisibilityOffOutlined","LockOutlined","LockOpenRounded","Popover","IconButton","Tune","Indicator","className","classNames"],"mappings":"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"}
+{"version":3,"file":"TabOptions.cjs.js","sources":["../../../../src/components/navigation/tabs/TabOptions.tsx"],"sourcesContent":["import {\n  FormatListBulletedOutlined,\n  LockOpenRounded,\n  LockOutlined,\n  RemoveRedEyeOutlined,\n  Search,\n  SwapVertOutlined,\n  TagOutlined,\n  Tune,\n  VisibilityOffOutlined,\n  VisibilityOutlined,\n} from '@mui/icons-material';\nimport { Popover } from 'antd';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport Button from '../../button/Button';\nimport { Typography } from '../../data-display/typography/Typography';\nimport { BaseInputField } from '../../forms/base-input-field/BaseInputField';\nimport { SelectField } from '../../forms/select-field/SelectField';\nimport { Toggle } from '../../forms/toggle/Toggle';\nimport IconButton from '../../button/IconButton';\nimport type { TabOptionConfig } from './types';\nimport { INITIAL_TAB_OPTION_CONFIG } from './types';\n\ntype TabOptionsProps = {\n  savedConfig: TabOptionConfig;\n  onApplyFilter: (config: TabOptionConfig) => void;\n  setUnsavedChanges: (unsavedChanges: boolean) => void;\n  handleTabSort: (order: 'asc' | 'desc') => void;\n  onSearchChange: (searchValue: string, filterType: 'contains' | 'does-not-contain') => void;\n  hasSuffixRecord: boolean;\n};\n\nconst SortAlphabetDownIcon = ({ fontSize = 24 }: { fontSize?: number }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SortAlphabetUpIcon = ({ fontSize = 24 }: { fontSize?: number }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SORT_OPTIONS = [\n  {\n    label: 'Default',\n    value: 'default',\n    icon: <FormatListBulletedOutlined sx={{ height: '14px', width: '14px' }} />,\n  },\n  {\n    label: 'A-Z',\n    value: 'asc',\n    icon: <SortAlphabetDownIcon fontSize={24} />,\n  },\n  {\n    label: 'Z-A',\n    value: 'desc',\n    icon: <SortAlphabetUpIcon fontSize={24} />,\n  },\n];\n\nexport const TabOptions = ({\n  savedConfig,\n  onApplyFilter,\n  setUnsavedChanges,\n  handleTabSort,\n  onSearchChange,\n  hasSuffixRecord = false,\n}: TabOptionsProps) => {\n  const [isTabOptionsVisible, setIsTabOptionsVisible] = useState(false);\n  const [tabOptionConfig, setTabOptionConfig] = useState<TabOptionConfig>(INITIAL_TAB_OPTION_CONFIG);\n  const [filterValue, setFilterValue] = useState('');\n\n  const handleConfigChange = <K extends keyof typeof tabOptionConfig>(key: K, value: (typeof tabOptionConfig)[K]) => {\n    setTabOptionConfig((prev) => ({\n      ...prev,\n      [key]: value,\n    }));\n  };\n\n  const handleReset = () => {\n    setTabOptionConfig({\n      filterType: { label: 'Contains', value: 'contains' },\n      sortOrder: 'default',\n      showCounts: true,\n      lockOrder: false,\n    });\n    setFilterValue('');\n    onSearchChange('', 'contains');\n  };\n\n  const applyFilter = () => {\n    onApplyFilter({\n      filterType: tabOptionConfig.filterType,\n      sortOrder: tabOptionConfig.sortOrder,\n      showCounts: tabOptionConfig.showCounts,\n      lockOrder: tabOptionConfig.lockOrder,\n    });\n    handleTabSort(tabOptionConfig.sortOrder as 'asc' | 'desc');\n    setUnsavedChanges(true);\n    setIsTabOptionsVisible(false);\n    if (filterValue) {\n      onSearchChange(filterValue, tabOptionConfig.filterType.value);\n    }\n  };\n\n  useEffect(() => {\n    if (savedConfig && JSON.stringify(savedConfig) !== JSON.stringify(tabOptionConfig)) {\n      setTabOptionConfig(savedConfig);\n    }\n  }, [savedConfig]);\n\n  const content = (\n    <div>\n      <div className=\"p-5 space-y-5\">\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <Search sx={{ height: '14px', width: '14px' }} /> Filter Tabs\n          </Typography>\n          <div className=\"grid grid-cols-[150px_3fr] gap-2\">\n            <SelectField\n              showSearch={false}\n              allowClear={false}\n              value={tabOptionConfig.filterType}\n              onChange={(value) => handleConfigChange('filterType', value)}\n              options={[\n                { label: 'Contains', value: 'contains' },\n                { label: 'Does not contain', value: 'does-not-contain' },\n              ]}\n            />\n            <BaseInputField\n              id=\"base-input-field-tab-options-filter\"\n              placeholder=\"Insert value\"\n              value={filterValue}\n              onChange={(value: string) => setFilterValue(value)}\n              isClearable\n            />\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <SwapVertOutlined sx={{ height: '14px', width: '14px' }} /> Sort\n          </Typography>\n          <div className=\"grid grid-cols-3 gap-2\">\n            {SORT_OPTIONS.map((option) => {\n              const isActive = tabOptionConfig.sortOrder === option.value;\n              return (\n                <Button\n                  appearance=\"outline\"\n                  status={isActive ? 'secondary' : 'secondary-neutral'}\n                  id={`sort-option-${option.value}`}\n                  onClick={() => handleConfigChange('sortOrder', option.value as 'default' | 'asc' | 'desc')}\n                  className=\"w-full\"\n                  key={option.value}\n                >\n                  {option.icon}\n                  {option.label}\n                </Button>\n              );\n            })}\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <VisibilityOutlined sx={{ height: '14px', width: '14px' }} /> Display Options\n          </Typography>\n          {hasSuffixRecord && (\n            <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n                  <TagOutlined sx={{ height: '16px', width: '16px' }} className=\"text-neutral-800 dark:text-white\" />\n                </div>\n                <div className=\"flex flex-col gap-0\">\n                  <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                    Show Counts\n                  </Typography>\n                  <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                    Display item counts on tabs\n                  </Typography>\n                </div>\n              </div>\n              <div className=\"flex items-center justify-end\">\n                <Toggle\n                  isChecked={tabOptionConfig.showCounts}\n                  onChange={(v) => handleConfigChange('showCounts', v)}\n                  hideStatus\n                  icon={{\n                    checkedIcon: <RemoveRedEyeOutlined sx={{ fontSize: 12 }} className=\"cursor-pointer !block text-primary-600 dark:text-primary-400\" />,\n                    uncheckedIcon: <VisibilityOffOutlined sx={{ fontSize: 12 }} className=\"cursor-pointer !block text-neutral-700 dark:text-neutral-300\" />,\n                  }}\n                  withIcon\n                />\n              </div>\n            </div>\n          )}\n          <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n            <div className=\"flex items-center gap-2\">\n              <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n                <LockOutlined sx={{ height: '16px', width: '16px' }} className=\"text-neutral-800 dark:text-white\" />\n              </div>\n              <div className=\"flex flex-col gap-0\">\n                <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                  Lock Order\n                </Typography>\n                <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                  Prevent tab reordering\n                </Typography>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-end\">\n              <Toggle\n                isChecked={tabOptionConfig.lockOrder}\n                onChange={(v) => handleConfigChange('lockOrder', v)}\n                hideStatus\n                withIcon\n                icon={{\n                  checkedIcon: <LockOutlined className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-2xs h-2xs\" />,\n                  uncheckedIcon: <LockOpenRounded className=\"cursor-pointer !block text-neutral-700 w-2xs h-2xs\" />,\n                }}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5\">\n        <Button id=\"btn-tab-options-reset\" appearance=\"outline\" status=\"cancel\" className=\"w-full\" onClick={handleReset}>\n          Reset\n        </Button>\n        <Button\n          id=\"btn-tab-options-apply\"\n          appearance=\"filled\"\n          status=\"primary\"\n          className=\"w-full\"\n          onClick={applyFilter}\n          disabled={JSON.stringify(savedConfig) === JSON.stringify(tabOptionConfig) && filterValue === ''}\n        >\n          Apply\n        </Button>\n      </div>\n    </div>\n  );\n\n  return (\n    <Popover\n      classNames={{\n        body: 'rounded-md w-[348px] !p-0',\n      }}\n      placement=\"bottomLeft\"\n      content={content}\n      trigger={['click']}\n      arrow={false}\n      open={isTabOptionsVisible}\n      onOpenChange={setIsTabOptionsVisible}\n    >\n      <div className=\"border-l border-neutral-200 dark:border-neutral-800 pl-2\">\n        <IconButton\n          tooltip=\"Manage Tabs\"\n          variant=\"ghost\"\n          className=\"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative\"\n          onClick={() => setIsTabOptionsVisible(true)}\n        >\n          <Tune sx={{ height: '20px', width: '20px' }} />\n          {JSON.stringify(tabOptionConfig) !== JSON.stringify(INITIAL_TAB_OPTION_CONFIG) && <Indicator className=\"text-primary-600\" />}\n        </IconButton>\n      </div>\n    </Popover>\n  );\n};\n\nexport const Indicator = ({ className }: { className?: string }) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"5\"\n      height=\"5\"\n      viewBox=\"0 0 4 4\"\n      fill=\"none\"\n      className={classNames('absolute top-0.5 right-0.5', className)}\n    >\n      <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\n    </svg>\n  );\n};\n"],"names":["SortAlphabetDownIcon","fontSize","jsx","SortAlphabetUpIcon","SORT_OPTIONS","FormatListBulletedOutlined","TabOptions","savedConfig","onApplyFilter","setUnsavedChanges","handleTabSort","onSearchChange","hasSuffixRecord","isTabOptionsVisible","setIsTabOptionsVisible","useState","tabOptionConfig","setTabOptionConfig","INITIAL_TAB_OPTION_CONFIG","filterValue","setFilterValue","handleConfigChange","key","value","prev","handleReset","applyFilter","useEffect","content","jsxs","Typography","Search","SelectField","BaseInputField","SwapVertOutlined","option","isActive","Button","VisibilityOutlined","TagOutlined","Toggle","v","RemoveRedEyeOutlined","VisibilityOffOutlined","LockOutlined","LockOpenRounded","Popover","IconButton","Tune","Indicator","className","classNames"],"mappings":"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"}

package/dist/components/navigation/tabs/TabOptions.es.js

@@ -1,5 +1,5 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { Search as T, SwapVertOutlined as I, VisibilityOutlined as L, TagOutlined as M, VisibilityOffOutlined as z, RemoveRedEyeOutlined as j, LockOutlined as f, LockOpenRounded as V, Tune as A, FormatListBulletedOutlined as B } from "@mui/icons-material";
+import { Search as S, SwapVertOutlined as I, VisibilityOutlined as L, TagOutlined as M, VisibilityOffOutlined as j, RemoveRedEyeOutlined as z, LockOutlined as x, LockOpenRounded as V, Tune as A, FormatListBulletedOutlined as B } from "@mui/icons-material";
 import { Popover as F } from "antd";
 import H from "../../../_virtual/index.es.js";
 import { useState as p, useEffect as J } from "react";
@@ -7,7 +7,7 @@ import u from "../../button/Button.es.js";
 import { Typography as i } from "../../data-display/typography/Typography.es.js";
 import { BaseInputField as R } from "../../forms/base-input-field/BaseInputField.es.js";
 import { SelectField as D } from "../../forms/select-field/SelectField.es.js";
-import { Toggle as x } from "../../forms/toggle/Toggle.es.js";
+import { Toggle as f } from "../../forms/toggle/Toggle.es.js";
 import _ from "../../button/IconButton.es.js";
 import { INITIAL_TAB_OPTION_CONFIG as g } from "./types.es.js";
 const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height: a, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e("path", { d: "M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), E = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height: a, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e("path", { d: "M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), W = [
@@ -29,14 +29,14 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
 ], le = ({
   savedConfig: a,
   onApplyFilter: b,
-  setUnsavedChanges: v,
-  handleTabSort: w,
+  setUnsavedChanges: w,
+  handleTabSort: v,
   onSearchChange: h,
   hasSuffixRecord: k = !1
 }) => {
   const [y, o] = p(!1), [l, c] = p(g), [s, m] = p(""), n = (r, d) => {
-    c((S) => ({
-      ...S,
+    c((T) => ({
+      ...T,
       [r]: d
     }));
   }, N = () => {
@@ -52,7 +52,7 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
       sortOrder: l.sortOrder,
       showCounts: l.showCounts,
       lockOrder: l.lockOrder
-    }), w(l.sortOrder), v(!0), o(!1), s && h(s, l.filterType.value);
+    }), v(l.sortOrder), w(!0), o(!1), s && h(s, l.filterType.value);
   };
   J(() => {
     a && JSON.stringify(a) !== JSON.stringify(l) && c(a);
@@ -61,7 +61,7 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
     /* @__PURE__ */ t("div", { className: "p-5 space-y-5", children: [
       /* @__PURE__ */ t("div", { className: "space-y-2", children: [
         /* @__PURE__ */ t(i, { size: "extra-small", variant: "regular", className: "!text-neutral-600 dark:!text-neutral-400 uppercase", appearance: "title", children: [
-          /* @__PURE__ */ e(T, { sx: { height: "14px", width: "14px" } }),
+          /* @__PURE__ */ e(S, { sx: { height: "14px", width: "14px" } }),
           " Filter Tabs"
         ] }),
         /* @__PURE__ */ t("div", { className: "grid grid-cols-[150px_3fr] gap-2", children: [
@@ -128,14 +128,14 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
             ] })
           ] }),
           /* @__PURE__ */ e("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ e(
-            x,
+            f,
             {
               isChecked: l.showCounts,
               onChange: (r) => n("showCounts", r),
               hideStatus: !0,
               icon: {
-                checkedIcon: /* @__PURE__ */ e(j, { sx: { fontSize: 12 }, className: "cursor-pointer !block text-primary-600 dark:text-primary-400" }),
-                uncheckedIcon: /* @__PURE__ */ e(z, { sx: { fontSize: 12 }, className: "cursor-pointer !block text-neutral-700 dark:text-neutral-300" })
+                checkedIcon: /* @__PURE__ */ e(z, { sx: { fontSize: 12 }, className: "cursor-pointer !block text-primary-600 dark:text-primary-400" }),
+                uncheckedIcon: /* @__PURE__ */ e(j, { sx: { fontSize: 12 }, className: "cursor-pointer !block text-neutral-700 dark:text-neutral-300" })
               },
               withIcon: !0
             }
@@ -143,22 +143,22 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
         ] }),
         /* @__PURE__ */ t("div", { className: "rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3", children: [
           /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg", children: /* @__PURE__ */ e(f, { sx: { height: "16px", width: "16px" }, className: "text-neutral-800 dark:text-white" }) }),
+            /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg", children: /* @__PURE__ */ e(x, { sx: { height: "16px", width: "16px" }, className: "text-neutral-800 dark:text-white" }) }),
             /* @__PURE__ */ t("div", { className: "flex flex-col gap-0", children: [
               /* @__PURE__ */ e(i, { size: "small", variant: "medium", appearance: "title", children: "Lock Order" }),
               /* @__PURE__ */ e(i, { size: "extra-small", variant: "regular", appearance: "subtitle", children: "Prevent tab reordering" })
             ] })
           ] }),
           /* @__PURE__ */ e("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ e(
-            x,
+            f,
             {
               isChecked: l.lockOrder,
               onChange: (r) => n("lockOrder", r),
               hideStatus: !0,
               withIcon: !0,
               icon: {
-                checkedIcon: /* @__PURE__ */ e(f, { sx: { fontSize: 12 }, className: "cursor-pointer !block text-primary-600 dark:text-primary-400" }),
-                uncheckedIcon: /* @__PURE__ */ e(V, { sx: { fontSize: 12 }, className: "cursor-pointer !block text-neutral-700" })
+                checkedIcon: /* @__PURE__ */ e(x, { className: "cursor-pointer !block text-primary-600 dark:text-primary-400 w-2xs h-2xs" }),
+                uncheckedIcon: /* @__PURE__ */ e(V, { className: "cursor-pointer !block text-neutral-700 w-2xs h-2xs" })
               }
             }
           ) })