@lax-wp/design-system 0.13.39 → 0.13.41

package/dist/components/button/IconButton.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const t=require("react/jsx-runtime");require("react");const h=require("../tooltip/Tooltip.cjs.js"),g=({children:o,className:a,variant:n="default",onClick:s,disabled:r,tooltip:l,tooltipPlacement:u="top",noborder:e,id:d,type:c="button"})=>{const i="flex items-center justify-center",b={default:`bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-700 rounded-lg ${e?"":"border border-neutral-300 dark:border-neutral-800"} p-2 hover:opacity-80`,secondary:`bg-transparent rounded-lg ${e?"":"border border-neutral-300 dark:border-black-400"} p-2 hover:opacity-80`,native:`bg-transparent rounded-lg ${e?"":"border border-neutral-300"} p-2 hover:opacity-80`,ghost:"text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600 dark:hover:text-neutral-200 dark:hover:bg-neutral-800 p-1 cursor-pointer rounded-full hover:scale-75 transition-all duration-500 ease-in-out"},p=r?"cursor-not-allowed opacity-50":"cursor-pointer";return t.jsx(h,{title:l,placement:u,delayShow:!0,children:t.jsx("button",{id:d,disabled:r,className:`${i} ${b[n]} ${a||""} ${p}`,onClick:s,type:c,children:o})})};module.exports=g;
+"use strict";const t=require("react/jsx-runtime");require("react");const p=require("../tooltip/Tooltip.cjs.js"),g=({children:o,className:a,variant:n="default",onClick:s,disabled:r,tooltip:l,tooltipPlacement:u="top",noborder:e,id:d,type:c="button"})=>{const i="flex items-center justify-center",b={default:`bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-700 rounded-lg ${e?"":"border border-neutral-300 dark:border-neutral-800"} h-8 w-8 hover:opacity-80`,secondary:`bg-transparent rounded-lg ${e?"":"border border-neutral-300 dark:border-black-400"} h-8 w-8 hover:opacity-80`,native:`bg-transparent rounded-lg ${e?"":"border border-neutral-300"} h-8 w-8 hover:opacity-80`,ghost:"text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600 dark:hover:text-neutral-200 dark:hover:bg-neutral-800 p-1 cursor-pointer rounded-full hover:scale-75 transition-all duration-500 ease-in-out"},h=r?"cursor-not-allowed opacity-50":"cursor-pointer";return t.jsx(p,{title:l,placement:u,delayShow:!0,children:t.jsx("button",{id:d,disabled:r,className:`${i} ${b[n]} ${a||""} ${h}`,onClick:s,type:c,children:o})})};module.exports=g;
 //# sourceMappingURL=IconButton.cjs.js.map

package/dist/components/button/IconButton.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs.js","sources":["../../../src/components/button/IconButton.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface IconButtonProps {\n  children: ReactNode;\n  className?: string;\n  onClick?(event: React.MouseEvent<HTMLButtonElement>): void;\n  variant?: 'default' | 'secondary' | 'native' | 'ghost';\n  disabled?: boolean;\n  tooltip?: string | ReactNode;\n  tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';\n  noborder?: boolean;\n  id?: string;\n  type?: 'button' | 'submit' | 'reset';\n}\n\nconst IconButton: React.FC<IconButtonProps> = ({\n  children,\n  className,\n  variant = 'default',\n  onClick,\n  disabled,\n  tooltip,\n  tooltipPlacement = 'top',\n  noborder,\n  id,\n  type = 'button',\n}) => {\n  const baseClasses = 'flex items-center justify-center';\n  const variantClasses = {\n    default: `bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-700 rounded-lg ${\n      noborder ? '' : 'border border-neutral-300 dark:border-neutral-800'\n    } p-2 hover:opacity-80`,\n    secondary: `bg-transparent rounded-lg ${noborder ? '' : 'border border-neutral-300 dark:border-black-400'} p-2 hover:opacity-80`,\n    native: `bg-transparent rounded-lg ${noborder ? '' : 'border border-neutral-300'} p-2 hover:opacity-80`,\n    ghost:\n      'text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600 dark:hover:text-neutral-200 dark:hover:bg-neutral-800 p-1 cursor-pointer rounded-full hover:scale-75 transition-all duration-500 ease-in-out',\n  };\n  const disabledClasses = disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer';\n\n  return (\n    <Tooltip title={tooltip} placement={tooltipPlacement} delayShow>\n      <button\n        id={id}\n        disabled={disabled}\n        className={`${baseClasses} ${variantClasses[variant]} ${className || ''} ${disabledClasses}`}\n        onClick={onClick}\n        type={type}\n      >\n        {children}\n      </button>\n    </Tooltip>\n  );\n};\n\nexport default IconButton;\n"],"names":["IconButton","children","className","variant","onClick","disabled","tooltip","tooltipPlacement","noborder","id","type","baseClasses","variantClasses","disabledClasses","Tooltip","jsx"],"mappings":"gHAgBMA,EAAwC,CAAC,CAC7C,SAAAC,EACA,UAAAC,EACA,QAAAC,EAAU,UACV,QAAAC,EACA,SAAAC,EACA,QAAAC,EACA,iBAAAC,EAAmB,MACnB,SAAAC,EACA,GAAAC,EACA,KAAAC,EAAO,QACT,IAAM,CACJ,MAAMC,EAAc,mCACdC,EAAiB,CACrB,QAAS,sFACPJ,EAAW,GAAK,mDAClB,wBACA,UAAW,6BAA6BA,EAAW,GAAK,iDAAiD,wBACzG,OAAQ,6BAA6BA,EAAW,GAAK,2BAA2B,wBAChF,MACE,2MAAA,EAEEK,EAAkBR,EAAW,gCAAkC,iBAErE,aACGS,EAAA,CAAQ,MAAOR,EAAS,UAAWC,EAAkB,UAAS,GAC7D,SAAAQ,EAAAA,IAAC,SAAA,CACC,GAAAN,EACA,SAAAJ,EACA,UAAW,GAAGM,CAAW,IAAIC,EAAeT,CAAO,CAAC,IAAID,GAAa,EAAE,IAAIW,CAAe,GAC1F,QAAAT,EACA,KAAAM,EAEC,SAAAT,CAAA,CAAA,EAEL,CAEJ"}
+{"version":3,"file":"IconButton.cjs.js","sources":["../../../src/components/button/IconButton.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface IconButtonProps {\n  children: ReactNode;\n  className?: string;\n  onClick?(event: React.MouseEvent<HTMLButtonElement>): void;\n  variant?: 'default' | 'secondary' | 'native' | 'ghost';\n  disabled?: boolean;\n  tooltip?: string | ReactNode;\n  tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';\n  noborder?: boolean;\n  id?: string;\n  type?: 'button' | 'submit' | 'reset';\n}\n\nconst IconButton: React.FC<IconButtonProps> = ({\n  children,\n  className,\n  variant = 'default',\n  onClick,\n  disabled,\n  tooltip,\n  tooltipPlacement = 'top',\n  noborder,\n  id,\n  type = 'button',\n}) => {\n  const baseClasses = 'flex items-center justify-center';\n  const variantClasses = {\n    default: `bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-700 rounded-lg ${\n      noborder ? '' : 'border border-neutral-300 dark:border-neutral-800'\n    } h-8 w-8 hover:opacity-80`,\n    secondary: `bg-transparent rounded-lg ${noborder ? '' : 'border border-neutral-300 dark:border-black-400'} h-8 w-8 hover:opacity-80`,\n    native: `bg-transparent rounded-lg ${noborder ? '' : 'border border-neutral-300'} h-8 w-8 hover:opacity-80`,\n    ghost:\n      'text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600 dark:hover:text-neutral-200 dark:hover:bg-neutral-800 p-1 cursor-pointer rounded-full hover:scale-75 transition-all duration-500 ease-in-out',\n  };\n  const disabledClasses = disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer';\n\n  return (\n    <Tooltip title={tooltip} placement={tooltipPlacement} delayShow>\n      <button\n        id={id}\n        disabled={disabled}\n        className={`${baseClasses} ${variantClasses[variant]} ${className || ''} ${disabledClasses}`}\n        onClick={onClick}\n        type={type}\n      >\n        {children}\n      </button>\n    </Tooltip>\n  );\n};\n\nexport default IconButton;\n"],"names":["IconButton","children","className","variant","onClick","disabled","tooltip","tooltipPlacement","noborder","id","type","baseClasses","variantClasses","disabledClasses","Tooltip","jsx"],"mappings":"gHAgBMA,EAAwC,CAAC,CAC7C,SAAAC,EACA,UAAAC,EACA,QAAAC,EAAU,UACV,QAAAC,EACA,SAAAC,EACA,QAAAC,EACA,iBAAAC,EAAmB,MACnB,SAAAC,EACA,GAAAC,EACA,KAAAC,EAAO,QACT,IAAM,CACJ,MAAMC,EAAc,mCACdC,EAAiB,CACrB,QAAS,sFACPJ,EAAW,GAAK,mDAClB,4BACA,UAAW,6BAA6BA,EAAW,GAAK,iDAAiD,4BACzG,OAAQ,6BAA6BA,EAAW,GAAK,2BAA2B,4BAChF,MACE,2MAAA,EAEEK,EAAkBR,EAAW,gCAAkC,iBAErE,aACGS,EAAA,CAAQ,MAAOR,EAAS,UAAWC,EAAkB,UAAS,GAC7D,SAAAQ,EAAAA,IAAC,SAAA,CACC,GAAAN,EACA,SAAAJ,EACA,UAAW,GAAGM,CAAW,IAAIC,EAAeT,CAAO,CAAC,IAAID,GAAa,EAAE,IAAIW,CAAe,GAC1F,QAAAT,EACA,KAAAM,EAEC,SAAAT,CAAA,CAAA,EAEL,CAEJ"}

package/dist/components/button/IconButton.es.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import "react";
-import h from "../tooltip/Tooltip.es.js";
+import p from "../tooltip/Tooltip.es.js";
 const f = ({
   children: o,
   className: a,
@@ -14,17 +14,17 @@ const f = ({
   type: c = "button"
 }) => {
   const i = "flex items-center justify-center", b = {
-    default: `bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-700 rounded-lg ${r ? "" : "border border-neutral-300 dark:border-neutral-800"} p-2 hover:opacity-80`,
-    secondary: `bg-transparent rounded-lg ${r ? "" : "border border-neutral-300 dark:border-black-400"} p-2 hover:opacity-80`,
-    native: `bg-transparent rounded-lg ${r ? "" : "border border-neutral-300"} p-2 hover:opacity-80`,
+    default: `bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-700 rounded-lg ${r ? "" : "border border-neutral-300 dark:border-neutral-800"} h-8 w-8 hover:opacity-80`,
+    secondary: `bg-transparent rounded-lg ${r ? "" : "border border-neutral-300 dark:border-black-400"} h-8 w-8 hover:opacity-80`,
+    native: `bg-transparent rounded-lg ${r ? "" : "border border-neutral-300"} h-8 w-8 hover:opacity-80`,
     ghost: "text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600 dark:hover:text-neutral-200 dark:hover:bg-neutral-800 p-1 cursor-pointer rounded-full hover:scale-75 transition-all duration-500 ease-in-out"
-  }, p = e ? "cursor-not-allowed opacity-50" : "cursor-pointer";
-  return /* @__PURE__ */ t(h, { title: s, placement: u, delayShow: !0, children: /* @__PURE__ */ t(
+  }, h = e ? "cursor-not-allowed opacity-50" : "cursor-pointer";
+  return /* @__PURE__ */ t(p, { title: s, placement: u, delayShow: !0, children: /* @__PURE__ */ t(
     "button",
     {
       id: d,
       disabled: e,
-      className: `${i} ${b[n]} ${a || ""} ${p}`,
+      className: `${i} ${b[n]} ${a || ""} ${h}`,
       onClick: l,
       type: c,
       children: o

package/dist/components/button/IconButton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.es.js","sources":["../../../src/components/button/IconButton.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface IconButtonProps {\n  children: ReactNode;\n  className?: string;\n  onClick?(event: React.MouseEvent<HTMLButtonElement>): void;\n  variant?: 'default' | 'secondary' | 'native' | 'ghost';\n  disabled?: boolean;\n  tooltip?: string | ReactNode;\n  tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';\n  noborder?: boolean;\n  id?: string;\n  type?: 'button' | 'submit' | 'reset';\n}\n\nconst IconButton: React.FC<IconButtonProps> = ({\n  children,\n  className,\n  variant = 'default',\n  onClick,\n  disabled,\n  tooltip,\n  tooltipPlacement = 'top',\n  noborder,\n  id,\n  type = 'button',\n}) => {\n  const baseClasses = 'flex items-center justify-center';\n  const variantClasses = {\n    default: `bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-700 rounded-lg ${\n      noborder ? '' : 'border border-neutral-300 dark:border-neutral-800'\n    } p-2 hover:opacity-80`,\n    secondary: `bg-transparent rounded-lg ${noborder ? '' : 'border border-neutral-300 dark:border-black-400'} p-2 hover:opacity-80`,\n    native: `bg-transparent rounded-lg ${noborder ? '' : 'border border-neutral-300'} p-2 hover:opacity-80`,\n    ghost:\n      'text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600 dark:hover:text-neutral-200 dark:hover:bg-neutral-800 p-1 cursor-pointer rounded-full hover:scale-75 transition-all duration-500 ease-in-out',\n  };\n  const disabledClasses = disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer';\n\n  return (\n    <Tooltip title={tooltip} placement={tooltipPlacement} delayShow>\n      <button\n        id={id}\n        disabled={disabled}\n        className={`${baseClasses} ${variantClasses[variant]} ${className || ''} ${disabledClasses}`}\n        onClick={onClick}\n        type={type}\n      >\n        {children}\n      </button>\n    </Tooltip>\n  );\n};\n\nexport default IconButton;\n"],"names":["IconButton","children","className","variant","onClick","disabled","tooltip","tooltipPlacement","noborder","id","type","baseClasses","variantClasses","disabledClasses","Tooltip","jsx"],"mappings":";;;AAgBA,MAAMA,IAAwC,CAAC;AAAA,EAC7C,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,MAAAC,IAAO;AACT,MAAM;AACJ,QAAMC,IAAc,oCACdC,IAAiB;AAAA,IACrB,SAAS,sFACPJ,IAAW,KAAK,mDAClB;AAAA,IACA,WAAW,6BAA6BA,IAAW,KAAK,iDAAiD;AAAA,IACzG,QAAQ,6BAA6BA,IAAW,KAAK,2BAA2B;AAAA,IAChF,OACE;AAAA,EAAA,GAEEK,IAAkBR,IAAW,kCAAkC;AAErE,2BACGS,GAAA,EAAQ,OAAOR,GAAS,WAAWC,GAAkB,WAAS,IAC7D,UAAA,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAN;AAAA,MACA,UAAAJ;AAAA,MACA,WAAW,GAAGM,CAAW,IAAIC,EAAeT,CAAO,CAAC,IAAID,KAAa,EAAE,IAAIW,CAAe;AAAA,MAC1F,SAAAT;AAAA,MACA,MAAAM;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;"}
+{"version":3,"file":"IconButton.es.js","sources":["../../../src/components/button/IconButton.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface IconButtonProps {\n  children: ReactNode;\n  className?: string;\n  onClick?(event: React.MouseEvent<HTMLButtonElement>): void;\n  variant?: 'default' | 'secondary' | 'native' | 'ghost';\n  disabled?: boolean;\n  tooltip?: string | ReactNode;\n  tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';\n  noborder?: boolean;\n  id?: string;\n  type?: 'button' | 'submit' | 'reset';\n}\n\nconst IconButton: React.FC<IconButtonProps> = ({\n  children,\n  className,\n  variant = 'default',\n  onClick,\n  disabled,\n  tooltip,\n  tooltipPlacement = 'top',\n  noborder,\n  id,\n  type = 'button',\n}) => {\n  const baseClasses = 'flex items-center justify-center';\n  const variantClasses = {\n    default: `bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-700 rounded-lg ${\n      noborder ? '' : 'border border-neutral-300 dark:border-neutral-800'\n    } h-8 w-8 hover:opacity-80`,\n    secondary: `bg-transparent rounded-lg ${noborder ? '' : 'border border-neutral-300 dark:border-black-400'} h-8 w-8 hover:opacity-80`,\n    native: `bg-transparent rounded-lg ${noborder ? '' : 'border border-neutral-300'} h-8 w-8 hover:opacity-80`,\n    ghost:\n      'text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600 dark:hover:text-neutral-200 dark:hover:bg-neutral-800 p-1 cursor-pointer rounded-full hover:scale-75 transition-all duration-500 ease-in-out',\n  };\n  const disabledClasses = disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer';\n\n  return (\n    <Tooltip title={tooltip} placement={tooltipPlacement} delayShow>\n      <button\n        id={id}\n        disabled={disabled}\n        className={`${baseClasses} ${variantClasses[variant]} ${className || ''} ${disabledClasses}`}\n        onClick={onClick}\n        type={type}\n      >\n        {children}\n      </button>\n    </Tooltip>\n  );\n};\n\nexport default IconButton;\n"],"names":["IconButton","children","className","variant","onClick","disabled","tooltip","tooltipPlacement","noborder","id","type","baseClasses","variantClasses","disabledClasses","Tooltip","jsx"],"mappings":";;;AAgBA,MAAMA,IAAwC,CAAC;AAAA,EAC7C,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,MAAAC,IAAO;AACT,MAAM;AACJ,QAAMC,IAAc,oCACdC,IAAiB;AAAA,IACrB,SAAS,sFACPJ,IAAW,KAAK,mDAClB;AAAA,IACA,WAAW,6BAA6BA,IAAW,KAAK,iDAAiD;AAAA,IACzG,QAAQ,6BAA6BA,IAAW,KAAK,2BAA2B;AAAA,IAChF,OACE;AAAA,EAAA,GAEEK,IAAkBR,IAAW,kCAAkC;AAErE,2BACGS,GAAA,EAAQ,OAAOR,GAAS,WAAWC,GAAkB,WAAS,IAC7D,UAAA,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAN;AAAA,MACA,UAAAJ;AAAA,MACA,WAAW,GAAGM,CAAW,IAAIC,EAAeT,CAAO,CAAC,IAAID,KAAa,EAAE,IAAIW,CAAe;AAAA,MAC1F,SAAAT;AAAA,MACA,MAAAM;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;"}

package/dist/components/cards/card-main/CardMain.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("react"),i=require("../../../_virtual/index.cjs.js"),l=require("../../data-display/banner/Banner.cjs.js"),o=require("../../../constants/layout.cjs.js"),M=require("../../../hooks/useScrollToTop.cjs.js"),g=require("../../layout/Helmet.cjs.js"),c=({title:s,children:u,noPadding:d,className:x,noBanner:a,noScrollbar:m,mode:t,displayId:n})=>{const r=t===o.MODES.EDIT||t===o.MODES.FOCUS_EDIT?"edit":t===o.MODES.COMPARISON?"compare":null,b=p.useMemo(()=>r==="edit"&&n&&!a||r==="compare",[r,n,a]);return M.useScrollToTop(),e.jsxs(e.Fragment,{children:[s?e.jsx(g.Helmet,{title:s}):null,e.jsxs("div",{style:{marginLeft:"var(--sidebar-ml, 0px)"},className:i(" relative h-[calc(100vh-56px)] overflow-y-auto flex flex-col bg-primary-800 dark:bg-black-800",`ease-in-out duration-${o.OPEN_DURATION_MS}`,x),children:[r==="edit"&&n&&!a?e.jsx(l.Banner,{status:"warning",children:`You're currently editing ${n||""}`}):r==="compare"?e.jsx(l.Banner,{status:"success",children:"You are now in Comparison Mode"}):null,e.jsx("div",{className:i(`flex-1 overflow-y-auto overflow-x-hidden bg-gray-50 dark:bg-black-700 ${m?"hide-scrollbar":""}`,d?"p-0":"p-base",b?"rounded-tl-none":"!rounded-tl-xl"),id:"app-body-container",children:u})]})]})};c.displayName="CardMain";exports.CardMain=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),s=require("../../../_virtual/index.cjs.js"),l=require("../../data-display/banner/Banner.cjs.js"),o=require("../../../constants/layout.cjs.js"),p=require("../../../hooks/useScrollToTop.cjs.js"),M=require("../../layout/Helmet.cjs.js"),c=({title:i,children:u,noPadding:d,className:m,noBanner:a,noScrollbar:x,mode:t,displayId:n})=>{const r=t===o.MODES.EDIT||t===o.MODES.FOCUS_EDIT?"edit":t===o.MODES.COMPARISON?"compare":null,b=g.useMemo(()=>r==="edit"&&n&&!a||r==="compare",[r,n,a]);return p.useScrollToTop(),e.jsxs(e.Fragment,{children:[i?e.jsx(M.Helmet,{title:i}):null,e.jsxs("div",{style:{marginLeft:"var(--sidebar-ml, 0px)"},className:s(" relative h-[calc(100vh-56px)] overflow-y-auto flex flex-col bg-primary-800 dark:bg-black-800",`transition-[margin-left] ease-in-out duration-${o.OPEN_DURATION_MS}`,m),children:[r==="edit"&&n&&!a?e.jsx(l.Banner,{status:"warning",children:`You're currently editing ${n||""}`}):r==="compare"?e.jsx(l.Banner,{status:"success",children:"You are now in Comparison Mode"}):null,e.jsx("div",{className:s(`flex-1 overflow-y-auto overflow-x-hidden bg-gray-50 dark:bg-black-700 ${x?"hide-scrollbar":""}`,d?"p-0":"p-base",b?"rounded-tl-none":"!rounded-tl-xl"),id:"app-body-container",children:u})]})]})};c.displayName="CardMain";exports.CardMain=c;
 //# sourceMappingURL=CardMain.cjs.js.map

package/dist/components/cards/card-main/CardMain.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardMain.cjs.js","sources":["../../../../src/components/cards/card-main/CardMain.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { useMemo } from 'react';\nimport cn from 'classnames';\nimport { Banner } from '../../data-display/banner/Banner';\nimport { MODES, OPEN_DURATION_MS } from '../../../constants/layout';\nimport { useScrollToTop } from '../../../hooks/useScrollToTop';\nimport { Helmet } from '../../layout';\n\nexport type CardMainProps = {\n  title?: string;\n  children: ReactNode;\n  noPadding?: boolean;\n  className?: string;\n  noHeight?: boolean;\n  noBanner?: boolean;\n  noScrollbar?: boolean;\n  /** Current mode - can be 'edit', 'focusEdit', 'comparison' */\n  mode?: string | null;\n  /** Display ID to show in banner */\n  displayId?: string | null;\n  /** Whether the main sidebar is expanded */\n  isMainSideBarOpen?: boolean;\n};\n\n/**\n * CardMain component for main content areas with optional edit/comparison banners\n *\n * @example\n * ```tsx\n * <CardMain title=\"Page Title\" mode=\"edit\" displayId=\"DOC-001\">\n *   <div>Page content</div>\n * </CardMain>\n * ```\n */\nexport const CardMain: FC<CardMainProps> = ({\n  title,\n  children,\n  noPadding,\n  className,\n  noBanner,\n  noScrollbar,\n  mode,\n  displayId,\n}) => {\n  const currentMode = mode === MODES.EDIT || mode === MODES.FOCUS_EDIT ? 'edit' : mode === MODES.COMPARISON ? 'compare' : null;\n\n  const isBannerVisible = useMemo(() => {\n    return (currentMode === 'edit' && displayId && !noBanner) || currentMode === 'compare';\n  }, [currentMode, displayId, noBanner]);\n\n\n  useScrollToTop()\n  return (\n    <>\n      {!!title ? <Helmet title={title} /> : null}\n      <div\n      style={{\n        marginLeft: 'var(--sidebar-ml, 0px)'\n      }}\n        className={cn(\n          ` relative h-[calc(100vh-56px)] overflow-y-auto flex flex-col bg-primary-800 dark:bg-black-800`,\n          `ease-in-out duration-${OPEN_DURATION_MS}`,\n          className,\n        )}\n      >\n        {currentMode === 'edit' && displayId && !noBanner ? (\n          <Banner status='warning'>{`You're currently editing ${displayId || ''}`}</Banner>\n        ) : currentMode === 'compare' ? (\n          <Banner status='success'>{`You are now in Comparison Mode`}</Banner>\n        ) : null}\n\n        <div\n          className={cn(\n            `flex-1 overflow-y-auto overflow-x-hidden bg-gray-50 dark:bg-black-700 ${noScrollbar ? 'hide-scrollbar' : ''}`,\n            noPadding ? 'p-0' : 'p-base',\n            isBannerVisible ? 'rounded-tl-none' : '!rounded-tl-xl',\n          )}\n          id='app-body-container'\n        >\n          {children}\n        </div>\n      </div>\n    </>\n  );\n};\n\nCardMain.displayName = 'CardMain';\n\n\n\n"],"names":["CardMain","title","children","noPadding","className","noBanner","noScrollbar","mode","displayId","currentMode","MODES","isBannerVisible","useMemo","useScrollToTop","jsxs","Fragment","jsx","Helmet","cn","OPEN_DURATION_MS","Banner"],"mappings":"iXAkCaA,EAA8B,CAAC,CAC1C,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,SAAAC,EACA,YAAAC,EACA,KAAAC,EACA,UAAAC,CACF,IAAM,CACJ,MAAMC,EAAcF,IAASG,QAAM,MAAQH,IAASG,EAAAA,MAAM,WAAa,OAASH,IAASG,EAAAA,MAAM,WAAa,UAAY,KAElHC,EAAkBC,EAAAA,QAAQ,IACtBH,IAAgB,QAAUD,GAAa,CAACH,GAAaI,IAAgB,UAC5E,CAACA,EAAaD,EAAWH,CAAQ,CAAC,EAGrCQ,OAAAA,iBAAA,EAEEC,EAAAA,KAAAC,WAAA,CACG,SAAA,CAAEd,EAAQe,EAAAA,IAACC,EAAAA,OAAA,CAAO,MAAAhB,EAAc,EAAK,KACtCa,EAAAA,KAAC,MAAA,CACD,MAAO,CACL,WAAY,wBAAA,EAEZ,UAAWI,EACT,gGACA,wBAAwBC,EAAAA,gBAAgB,GACxCf,CAAA,EAGD,SAAA,CAAAK,IAAgB,QAAUD,GAAa,CAACH,QACtCe,EAAAA,OAAA,CAAO,OAAO,UAAW,SAAA,4BAA4BZ,GAAa,EAAE,EAAA,CAAG,EACtEC,IAAgB,UAClBO,EAAAA,IAACI,EAAAA,QAAO,OAAO,UAAW,0CAAiC,EACzD,KAEJJ,EAAAA,IAAC,MAAA,CACC,UAAWE,EACT,yEAAyEZ,EAAc,iBAAmB,EAAE,GAC5GH,EAAY,MAAQ,SACpBQ,EAAkB,kBAAoB,gBAAA,EAExC,GAAG,qBAEF,SAAAT,CAAA,CAAA,CACH,CAAA,CAAA,CACF,EACF,CAEJ,EAEAF,EAAS,YAAc"}
+{"version":3,"file":"CardMain.cjs.js","sources":["../../../../src/components/cards/card-main/CardMain.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { useMemo } from 'react';\nimport cn from 'classnames';\nimport { Banner } from '../../data-display/banner/Banner';\nimport { MODES, OPEN_DURATION_MS } from '../../../constants/layout';\nimport { useScrollToTop } from '../../../hooks/useScrollToTop';\nimport { Helmet } from '../../layout';\n\nexport type CardMainProps = {\n  title?: string;\n  children: ReactNode;\n  noPadding?: boolean;\n  className?: string;\n  noHeight?: boolean;\n  noBanner?: boolean;\n  noScrollbar?: boolean;\n  /** Current mode - can be 'edit', 'focusEdit', 'comparison' */\n  mode?: string | null;\n  /** Display ID to show in banner */\n  displayId?: string | null;\n  /** Whether the main sidebar is expanded */\n  isMainSideBarOpen?: boolean;\n};\n\n/**\n * CardMain component for main content areas with optional edit/comparison banners\n *\n * @example\n * ```tsx\n * <CardMain title=\"Page Title\" mode=\"edit\" displayId=\"DOC-001\">\n *   <div>Page content</div>\n * </CardMain>\n * ```\n */\nexport const CardMain: FC<CardMainProps> = ({\n  title,\n  children,\n  noPadding,\n  className,\n  noBanner,\n  noScrollbar,\n  mode,\n  displayId,\n}) => {\n  const currentMode = mode === MODES.EDIT || mode === MODES.FOCUS_EDIT ? 'edit' : mode === MODES.COMPARISON ? 'compare' : null;\n\n  const isBannerVisible = useMemo(() => {\n    return (currentMode === 'edit' && displayId && !noBanner) || currentMode === 'compare';\n  }, [currentMode, displayId, noBanner]);\n\n\n  useScrollToTop()\n  return (\n    <>\n      {!!title ? <Helmet title={title} /> : null}\n      <div\n      style={{\n        marginLeft: 'var(--sidebar-ml, 0px)'\n      }}\n        className={cn(\n          ` relative h-[calc(100vh-56px)] overflow-y-auto flex flex-col bg-primary-800 dark:bg-black-800`,\n          // Scope the transition to margin-left (the sidebar push). Without an explicit\n          // transition-property, `duration-*` falls back to CSS's default `all`, which\n          // also animates background-color over 500ms — that made the rounded-tl corner\n          // flash a mismatched triangle on theme toggle. The background now flips with\n          // the `dark` class and is handled by the view transition.\n          `transition-[margin-left] ease-in-out duration-${OPEN_DURATION_MS}`,\n          className,\n        )}\n      >\n        {currentMode === 'edit' && displayId && !noBanner ? (\n          <Banner status='warning'>{`You're currently editing ${displayId || ''}`}</Banner>\n        ) : currentMode === 'compare' ? (\n          <Banner status='success'>{`You are now in Comparison Mode`}</Banner>\n        ) : null}\n\n        <div\n          className={cn(\n            `flex-1 overflow-y-auto overflow-x-hidden bg-gray-50 dark:bg-black-700 ${noScrollbar ? 'hide-scrollbar' : ''}`,\n            noPadding ? 'p-0' : 'p-base',\n            isBannerVisible ? 'rounded-tl-none' : '!rounded-tl-xl',\n          )}\n          id='app-body-container'\n        >\n          {children}\n        </div>\n      </div>\n    </>\n  );\n};\n\nCardMain.displayName = 'CardMain';\n\n\n\n"],"names":["CardMain","title","children","noPadding","className","noBanner","noScrollbar","mode","displayId","currentMode","MODES","isBannerVisible","useMemo","useScrollToTop","jsxs","Fragment","jsx","Helmet","cn","OPEN_DURATION_MS","Banner"],"mappings":"iXAkCaA,EAA8B,CAAC,CAC1C,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,SAAAC,EACA,YAAAC,EACA,KAAAC,EACA,UAAAC,CACF,IAAM,CACJ,MAAMC,EAAcF,IAASG,QAAM,MAAQH,IAASG,EAAAA,MAAM,WAAa,OAASH,IAASG,EAAAA,MAAM,WAAa,UAAY,KAElHC,EAAkBC,EAAAA,QAAQ,IACtBH,IAAgB,QAAUD,GAAa,CAACH,GAAaI,IAAgB,UAC5E,CAACA,EAAaD,EAAWH,CAAQ,CAAC,EAGrCQ,OAAAA,iBAAA,EAEEC,EAAAA,KAAAC,WAAA,CACG,SAAA,CAAEd,EAAQe,EAAAA,IAACC,EAAAA,OAAA,CAAO,MAAAhB,EAAc,EAAK,KACtCa,EAAAA,KAAC,MAAA,CACD,MAAO,CACL,WAAY,wBAAA,EAEZ,UAAWI,EACT,gGAMA,iDAAiDC,EAAAA,gBAAgB,GACjEf,CAAA,EAGD,SAAA,CAAAK,IAAgB,QAAUD,GAAa,CAACH,QACtCe,EAAAA,OAAA,CAAO,OAAO,UAAW,SAAA,4BAA4BZ,GAAa,EAAE,EAAA,CAAG,EACtEC,IAAgB,UAClBO,EAAAA,IAACI,EAAAA,QAAO,OAAO,UAAW,0CAAiC,EACzD,KAEJJ,EAAAA,IAAC,MAAA,CACC,UAAWE,EACT,yEAAyEZ,EAAc,iBAAmB,EAAE,GAC5GH,EAAY,MAAQ,SACpBQ,EAAkB,kBAAoB,gBAAA,EAExC,GAAG,qBAEF,SAAAT,CAAA,CAAA,CACH,CAAA,CAAA,CACF,EACF,CAEJ,EAEAF,EAAS,YAAc"}

package/dist/components/cards/card-main/CardMain.es.js

@@ -1,13 +1,13 @@
-import { jsxs as n, Fragment as b, jsx as o } from "react/jsx-runtime";
-import { useMemo as x } from "react";
-import c from "../../../_virtual/index.es.js";
-import { Banner as m } from "../../data-display/banner/Banner.es.js";
-import { MODES as t, OPEN_DURATION_MS as g } from "../../../constants/layout.es.js";
+import { jsxs as l, Fragment as b, jsx as o } from "react/jsx-runtime";
+import { useMemo as g } from "react";
+import m from "../../../_virtual/index.es.js";
+import { Banner as s } from "../../data-display/banner/Banner.es.js";
+import { MODES as t, OPEN_DURATION_MS as x } from "../../../constants/layout.es.js";
 import { useScrollToTop as h } from "../../../hooks/useScrollToTop.es.js";
 import { Helmet as v } from "../../layout/Helmet.es.js";
 const M = ({
-  title: l,
-  children: s,
+  title: n,
+  children: c,
   noPadding: d,
   className: u,
   noBanner: a,
@@ -15,32 +15,37 @@ const M = ({
   mode: i,
   displayId: e
 }) => {
-  const r = i === t.EDIT || i === t.FOCUS_EDIT ? "edit" : i === t.COMPARISON ? "compare" : null, f = x(() => r === "edit" && e && !a || r === "compare", [r, e, a]);
-  return h(), /* @__PURE__ */ n(b, { children: [
-    l ? /* @__PURE__ */ o(v, { title: l }) : null,
-    /* @__PURE__ */ n(
+  const r = i === t.EDIT || i === t.FOCUS_EDIT ? "edit" : i === t.COMPARISON ? "compare" : null, f = g(() => r === "edit" && e && !a || r === "compare", [r, e, a]);
+  return h(), /* @__PURE__ */ l(b, { children: [
+    n ? /* @__PURE__ */ o(v, { title: n }) : null,
+    /* @__PURE__ */ l(
       "div",
       {
         style: {
           marginLeft: "var(--sidebar-ml, 0px)"
         },
-        className: c(
+        className: m(
           " relative h-[calc(100vh-56px)] overflow-y-auto flex flex-col bg-primary-800 dark:bg-black-800",
-          `ease-in-out duration-${g}`,
+          // Scope the transition to margin-left (the sidebar push). Without an explicit
+          // transition-property, `duration-*` falls back to CSS's default `all`, which
+          // also animates background-color over 500ms — that made the rounded-tl corner
+          // flash a mismatched triangle on theme toggle. The background now flips with
+          // the `dark` class and is handled by the view transition.
+          `transition-[margin-left] ease-in-out duration-${x}`,
           u
         ),
         children: [
-          r === "edit" && e && !a ? /* @__PURE__ */ o(m, { status: "warning", children: `You're currently editing ${e || ""}` }) : r === "compare" ? /* @__PURE__ */ o(m, { status: "success", children: "You are now in Comparison Mode" }) : null,
+          r === "edit" && e && !a ? /* @__PURE__ */ o(s, { status: "warning", children: `You're currently editing ${e || ""}` }) : r === "compare" ? /* @__PURE__ */ o(s, { status: "success", children: "You are now in Comparison Mode" }) : null,
           /* @__PURE__ */ o(
             "div",
             {
-              className: c(
+              className: m(
                 `flex-1 overflow-y-auto overflow-x-hidden bg-gray-50 dark:bg-black-700 ${p ? "hide-scrollbar" : ""}`,
                 d ? "p-0" : "p-base",
                 f ? "rounded-tl-none" : "!rounded-tl-xl"
               ),
               id: "app-body-container",
-              children: s
+              children: c
             }
           )
         ]

package/dist/components/cards/card-main/CardMain.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardMain.es.js","sources":["../../../../src/components/cards/card-main/CardMain.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { useMemo } from 'react';\nimport cn from 'classnames';\nimport { Banner } from '../../data-display/banner/Banner';\nimport { MODES, OPEN_DURATION_MS } from '../../../constants/layout';\nimport { useScrollToTop } from '../../../hooks/useScrollToTop';\nimport { Helmet } from '../../layout';\n\nexport type CardMainProps = {\n  title?: string;\n  children: ReactNode;\n  noPadding?: boolean;\n  className?: string;\n  noHeight?: boolean;\n  noBanner?: boolean;\n  noScrollbar?: boolean;\n  /** Current mode - can be 'edit', 'focusEdit', 'comparison' */\n  mode?: string | null;\n  /** Display ID to show in banner */\n  displayId?: string | null;\n  /** Whether the main sidebar is expanded */\n  isMainSideBarOpen?: boolean;\n};\n\n/**\n * CardMain component for main content areas with optional edit/comparison banners\n *\n * @example\n * ```tsx\n * <CardMain title=\"Page Title\" mode=\"edit\" displayId=\"DOC-001\">\n *   <div>Page content</div>\n * </CardMain>\n * ```\n */\nexport const CardMain: FC<CardMainProps> = ({\n  title,\n  children,\n  noPadding,\n  className,\n  noBanner,\n  noScrollbar,\n  mode,\n  displayId,\n}) => {\n  const currentMode = mode === MODES.EDIT || mode === MODES.FOCUS_EDIT ? 'edit' : mode === MODES.COMPARISON ? 'compare' : null;\n\n  const isBannerVisible = useMemo(() => {\n    return (currentMode === 'edit' && displayId && !noBanner) || currentMode === 'compare';\n  }, [currentMode, displayId, noBanner]);\n\n\n  useScrollToTop()\n  return (\n    <>\n      {!!title ? <Helmet title={title} /> : null}\n      <div\n      style={{\n        marginLeft: 'var(--sidebar-ml, 0px)'\n      }}\n        className={cn(\n          ` relative h-[calc(100vh-56px)] overflow-y-auto flex flex-col bg-primary-800 dark:bg-black-800`,\n          `ease-in-out duration-${OPEN_DURATION_MS}`,\n          className,\n        )}\n      >\n        {currentMode === 'edit' && displayId && !noBanner ? (\n          <Banner status='warning'>{`You're currently editing ${displayId || ''}`}</Banner>\n        ) : currentMode === 'compare' ? (\n          <Banner status='success'>{`You are now in Comparison Mode`}</Banner>\n        ) : null}\n\n        <div\n          className={cn(\n            `flex-1 overflow-y-auto overflow-x-hidden bg-gray-50 dark:bg-black-700 ${noScrollbar ? 'hide-scrollbar' : ''}`,\n            noPadding ? 'p-0' : 'p-base',\n            isBannerVisible ? 'rounded-tl-none' : '!rounded-tl-xl',\n          )}\n          id='app-body-container'\n        >\n          {children}\n        </div>\n      </div>\n    </>\n  );\n};\n\nCardMain.displayName = 'CardMain';\n\n\n\n"],"names":["CardMain","title","children","noPadding","className","noBanner","noScrollbar","mode","displayId","currentMode","MODES","isBannerVisible","useMemo","useScrollToTop","jsxs","Fragment","jsx","Helmet","cn","OPEN_DURATION_MS","Banner"],"mappings":";;;;;;;AAkCO,MAAMA,IAA8B,CAAC;AAAA,EAC1C,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AACF,MAAM;AACJ,QAAMC,IAAcF,MAASG,EAAM,QAAQH,MAASG,EAAM,aAAa,SAASH,MAASG,EAAM,aAAa,YAAY,MAElHC,IAAkBC,EAAQ,MACtBH,MAAgB,UAAUD,KAAa,CAACH,KAAaI,MAAgB,WAC5E,CAACA,GAAaD,GAAWH,CAAQ,CAAC;AAGrC,SAAAQ,EAAA,GAEE,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAEd,IAAQ,gBAAAe,EAACC,GAAA,EAAO,OAAAhB,GAAc,IAAK;AAAA,IACtC,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACD,OAAO;AAAA,UACL,YAAY;AAAA,QAAA;AAAA,QAEZ,WAAWI;AAAA,UACT;AAAA,UACA,wBAAwBC,CAAgB;AAAA,UACxCf;AAAA,QAAA;AAAA,QAGD,UAAA;AAAA,UAAAK,MAAgB,UAAUD,KAAa,CAACH,sBACtCe,GAAA,EAAO,QAAO,WAAW,UAAA,4BAA4BZ,KAAa,EAAE,GAAA,CAAG,IACtEC,MAAgB,YAClB,gBAAAO,EAACI,KAAO,QAAO,WAAW,4CAAiC,IACzD;AAAA,UAEJ,gBAAAJ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWE;AAAA,gBACT,yEAAyEZ,IAAc,mBAAmB,EAAE;AAAA,gBAC5GH,IAAY,QAAQ;AAAA,gBACpBQ,IAAkB,oBAAoB;AAAA,cAAA;AAAA,cAExC,IAAG;AAAA,cAEF,UAAAT;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAEAF,EAAS,cAAc;"}
+{"version":3,"file":"CardMain.es.js","sources":["../../../../src/components/cards/card-main/CardMain.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { useMemo } from 'react';\nimport cn from 'classnames';\nimport { Banner } from '../../data-display/banner/Banner';\nimport { MODES, OPEN_DURATION_MS } from '../../../constants/layout';\nimport { useScrollToTop } from '../../../hooks/useScrollToTop';\nimport { Helmet } from '../../layout';\n\nexport type CardMainProps = {\n  title?: string;\n  children: ReactNode;\n  noPadding?: boolean;\n  className?: string;\n  noHeight?: boolean;\n  noBanner?: boolean;\n  noScrollbar?: boolean;\n  /** Current mode - can be 'edit', 'focusEdit', 'comparison' */\n  mode?: string | null;\n  /** Display ID to show in banner */\n  displayId?: string | null;\n  /** Whether the main sidebar is expanded */\n  isMainSideBarOpen?: boolean;\n};\n\n/**\n * CardMain component for main content areas with optional edit/comparison banners\n *\n * @example\n * ```tsx\n * <CardMain title=\"Page Title\" mode=\"edit\" displayId=\"DOC-001\">\n *   <div>Page content</div>\n * </CardMain>\n * ```\n */\nexport const CardMain: FC<CardMainProps> = ({\n  title,\n  children,\n  noPadding,\n  className,\n  noBanner,\n  noScrollbar,\n  mode,\n  displayId,\n}) => {\n  const currentMode = mode === MODES.EDIT || mode === MODES.FOCUS_EDIT ? 'edit' : mode === MODES.COMPARISON ? 'compare' : null;\n\n  const isBannerVisible = useMemo(() => {\n    return (currentMode === 'edit' && displayId && !noBanner) || currentMode === 'compare';\n  }, [currentMode, displayId, noBanner]);\n\n\n  useScrollToTop()\n  return (\n    <>\n      {!!title ? <Helmet title={title} /> : null}\n      <div\n      style={{\n        marginLeft: 'var(--sidebar-ml, 0px)'\n      }}\n        className={cn(\n          ` relative h-[calc(100vh-56px)] overflow-y-auto flex flex-col bg-primary-800 dark:bg-black-800`,\n          // Scope the transition to margin-left (the sidebar push). Without an explicit\n          // transition-property, `duration-*` falls back to CSS's default `all`, which\n          // also animates background-color over 500ms — that made the rounded-tl corner\n          // flash a mismatched triangle on theme toggle. The background now flips with\n          // the `dark` class and is handled by the view transition.\n          `transition-[margin-left] ease-in-out duration-${OPEN_DURATION_MS}`,\n          className,\n        )}\n      >\n        {currentMode === 'edit' && displayId && !noBanner ? (\n          <Banner status='warning'>{`You're currently editing ${displayId || ''}`}</Banner>\n        ) : currentMode === 'compare' ? (\n          <Banner status='success'>{`You are now in Comparison Mode`}</Banner>\n        ) : null}\n\n        <div\n          className={cn(\n            `flex-1 overflow-y-auto overflow-x-hidden bg-gray-50 dark:bg-black-700 ${noScrollbar ? 'hide-scrollbar' : ''}`,\n            noPadding ? 'p-0' : 'p-base',\n            isBannerVisible ? 'rounded-tl-none' : '!rounded-tl-xl',\n          )}\n          id='app-body-container'\n        >\n          {children}\n        </div>\n      </div>\n    </>\n  );\n};\n\nCardMain.displayName = 'CardMain';\n\n\n\n"],"names":["CardMain","title","children","noPadding","className","noBanner","noScrollbar","mode","displayId","currentMode","MODES","isBannerVisible","useMemo","useScrollToTop","jsxs","Fragment","jsx","Helmet","cn","OPEN_DURATION_MS","Banner"],"mappings":";;;;;;;AAkCO,MAAMA,IAA8B,CAAC;AAAA,EAC1C,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AACF,MAAM;AACJ,QAAMC,IAAcF,MAASG,EAAM,QAAQH,MAASG,EAAM,aAAa,SAASH,MAASG,EAAM,aAAa,YAAY,MAElHC,IAAkBC,EAAQ,MACtBH,MAAgB,UAAUD,KAAa,CAACH,KAAaI,MAAgB,WAC5E,CAACA,GAAaD,GAAWH,CAAQ,CAAC;AAGrC,SAAAQ,EAAA,GAEE,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAEd,IAAQ,gBAAAe,EAACC,GAAA,EAAO,OAAAhB,GAAc,IAAK;AAAA,IACtC,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACD,OAAO;AAAA,UACL,YAAY;AAAA,QAAA;AAAA,QAEZ,WAAWI;AAAA,UACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMA,iDAAiDC,CAAgB;AAAA,UACjEf;AAAA,QAAA;AAAA,QAGD,UAAA;AAAA,UAAAK,MAAgB,UAAUD,KAAa,CAACH,sBACtCe,GAAA,EAAO,QAAO,WAAW,UAAA,4BAA4BZ,KAAa,EAAE,GAAA,CAAG,IACtEC,MAAgB,YAClB,gBAAAO,EAACI,KAAO,QAAO,WAAW,4CAAiC,IACzD;AAAA,UAEJ,gBAAAJ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWE;AAAA,gBACT,yEAAyEZ,IAAc,mBAAmB,EAAE;AAAA,gBAC5GH,IAAY,QAAQ;AAAA,gBACpBQ,IAAkB,oBAAoB;AAAA,cAAA;AAAA,cAExC,IAAG;AAAA,cAEF,UAAAT;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAEAF,EAAS,cAAc;"}

package/dist/components/data-display/tag/Tag.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),N=require("../../../_virtual/index.cjs.js"),_=require("react"),L=require("react-router-dom"),O=require("../../icons/CloseIcon.cjs.js"),I=require("../../tooltip/Tooltip.cjs.js"),k={primary:"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400",success:"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300",warning:"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300",error:"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300",neutral:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",red:"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300",green:"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300",blue:"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300",teal:"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300",orange:"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300",peach:"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300",navy:"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300",gray:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",grey:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",yellow:"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300",purple:"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300"},C=/^#[0-9a-fA-F]{6}$/,W=/^(?:[a-z][a-z\d+\-.]*:|\/\/)/i,B=(e,r)=>r?"":e?k[e.toLowerCase()]??k.primary:k.primary,F=e=>{const r=e.trim().toLowerCase();return C.test(r)?r:void 0},P=e=>W.test(e),X=e=>{switch(e){case"xs":return"text-3xs leading-3 px-1 border-[0.5px] rounded";case"lg":return"text-sm leading-5 px-1.5 border rounded-md";case"sm":return"text-2xs leading-4 px-1 border-[0.5px] rounded";default:return"text-xs leading-4 px-1.5 border rounded-md"}},j=_.forwardRef(({label:e,href:r,color:l,size:v="md",className:R,onClick:s,onMouseDown:n,truncate:i,isHashColor:E=!1,theme:g,icon:$,removable:S=!1,onRemove:m,onUpload:h,acceptsUpload:w=!1,tooltip:A=!1,"aria-label":b,role:x},c)=>{const d=typeof l=="string"&&(E||C.test(l))?F(l):void 0,q=!!d,y={maxWidth:"100%",...d?{backgroundColor:`${d}26`,borderColor:`${d}59`,color:d}:{}},o=!!(s||w||r),z=!!(r&&P(r)),H=a=>{const T=a.target.files?.[0];T&&h&&h(T),a.target.value=""},p=N("inline-flex items-center transition-colors font-medium",B(l,q),X(v),o&&"cursor-pointer hover:opacity-80",R),f=t.jsxs("div",{className:"flex items-center gap-0.5 min-w-0 overflow-hidden",style:{maxWidth:"100%"},children:[$,i?t.jsx("p",{title:e,className:N("overflow-hidden whitespace-nowrap text-ellipsis",o&&"cursor-pointer"),style:{maxWidth:"100%"},children:e.length>i?`${e.slice(0,i)}...`:e}):t.jsx("p",{className:"overflow-hidden whitespace-nowrap text-ellipsis",style:{maxWidth:"100%"},children:e}),w&&t.jsx("input",{type:"file",onChange:H,className:"absolute inset-0 h-full w-full cursor-pointer opacity-0","aria-label":`Upload file for ${e}`}),S&&m&&t.jsx("button",{onClick:m,className:"ml-1 flex-shrink-0","aria-label":`Remove ${e}`,type:"button",children:t.jsx(O.CloseIcon,{size:12,className:"cursor-pointer"})})]}),u=A?t.jsx(I,{title:e,delayShow:!0,children:f}):f;return r?z?t.jsx("a",{ref:c,href:r,className:p,style:y,onMouseDown:n,onClick:s,"aria-label":b||`Tag: ${e}`,role:x,"data-theme":g,children:u}):t.jsx(L.Link,{ref:c,to:r,className:p,style:y,onMouseDown:n,onClick:s,"aria-label":b||`Tag: ${e}`,role:x,"data-theme":g,children:u}):t.jsx("div",{ref:c,className:p,style:y,onMouseDown:n,onClick:s,onKeyDown:o?a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),a.currentTarget.click())}:void 0,"aria-label":b||`Tag: ${e}`,role:x??(o?"button":void 0),tabIndex:o?0:void 0,"data-theme":g,children:u})});j.displayName="Tag";exports.Tag=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),N=require("../../../_virtual/index.cjs.js"),_=require("react"),L=require("react-router-dom"),O=require("../../icons/CloseIcon.cjs.js"),I=require("../../tooltip/Tooltip.cjs.js"),k={primary:"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400",success:"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300",warning:"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300",error:"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300",neutral:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",red:"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300",green:"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300",blue:"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300",teal:"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300",orange:"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300",peach:"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300",navy:"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300",gray:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",grey:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",yellow:"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300",purple:"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300"},C=/^#[0-9a-fA-F]{6}$/,W=/^(?:[a-z][a-z\d+\-.]*:|\/\/)/i,B=(e,r)=>r?"":e?k[e.toLowerCase()]??k.primary:k.primary,F=e=>{const r=e.trim().toLowerCase();return C.test(r)?r:void 0},P=e=>W.test(e),X=e=>{switch(e){case"xs":return"text-3xs leading-3 px-1 border-[0.5px] rounded";case"lg":return"text-sm leading-5 px-1.5 border rounded-md";case"sm":return"text-2xs leading-4 px-1 border-[0.5px] rounded";default:return"text-xs leading-4 px-1.5 border rounded-md"}},j=_.forwardRef(({label:e,href:r,color:l,size:v="md",className:R,onClick:s,onMouseDown:n,truncate:i,isHashColor:E=!1,theme:g,icon:$,removable:S=!1,onRemove:m,onUpload:h,acceptsUpload:w=!1,tooltip:A=!1,"aria-label":b,role:x},c)=>{const d=typeof l=="string"&&(E||C.test(l))?F(l):void 0,q=!!d,y={maxWidth:"100%",...d?{backgroundColor:`${d}26`,borderColor:`${d}59`,color:d}:{}},o=!!(s||w||r),z=!!(r&&P(r)),H=a=>{const T=a.target.files?.[0];T&&h&&h(T),a.target.value=""},p=N("inline-flex items-center font-medium",B(l,q),X(v),o&&"cursor-pointer hover:opacity-80",R),f=t.jsxs("div",{className:"flex items-center gap-0.5 min-w-0 overflow-hidden",style:{maxWidth:"100%"},children:[$,i?t.jsx("p",{title:e,className:N("overflow-hidden whitespace-nowrap text-ellipsis",o&&"cursor-pointer"),style:{maxWidth:"100%"},children:e.length>i?`${e.slice(0,i)}...`:e}):t.jsx("p",{className:"overflow-hidden whitespace-nowrap text-ellipsis",style:{maxWidth:"100%"},children:e}),w&&t.jsx("input",{type:"file",onChange:H,className:"absolute inset-0 h-full w-full cursor-pointer opacity-0","aria-label":`Upload file for ${e}`}),S&&m&&t.jsx("button",{onClick:m,className:"ml-1 flex-shrink-0","aria-label":`Remove ${e}`,type:"button",children:t.jsx(O.CloseIcon,{size:12,className:"cursor-pointer"})})]}),u=A?t.jsx(I,{title:e,delayShow:!0,children:f}):f;return r?z?t.jsx("a",{ref:c,href:r,className:p,style:y,onMouseDown:n,onClick:s,"aria-label":b||`Tag: ${e}`,role:x,"data-theme":g,children:u}):t.jsx(L.Link,{ref:c,to:r,className:p,style:y,onMouseDown:n,onClick:s,"aria-label":b||`Tag: ${e}`,role:x,"data-theme":g,children:u}):t.jsx("div",{ref:c,className:p,style:y,onMouseDown:n,onClick:s,onKeyDown:o?a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),a.currentTarget.click())}:void 0,"aria-label":b||`Tag: ${e}`,role:x??(o?"button":void 0),tabIndex:o?0:void 0,"data-theme":g,children:u})});j.displayName="Tag";exports.Tag=j;
 //# sourceMappingURL=Tag.cjs.js.map

package/dist/components/data-display/tag/Tag.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs.js","sources":["../../../../src/components/data-display/tag/Tag.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, type CSSProperties, type Ref } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { CloseIcon } from \"../../icons/CloseIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\n\n/**\n * Available tag size options\n */\nexport type TagSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n/**\n * Available color names for tags\n */\nexport type TagColor =\n  | \"primary\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"neutral\"\n  | \"red\"\n  | \"green\"\n  | \"blue\"\n  | \"teal\"\n  | \"yellow\"\n  | \"orange\"\n  | \"peach\"\n  | \"purple\"\n  | \"navy\"\n  | \"gray\"\n  | \"grey\";\n\nexport type ThemeMode = \"light\" | \"dark\";\n\n/**\n * Upload handler function type\n */\nexport type UploadHandler = (file: File) => void | Promise<void>;\n\n/**\n * Props for the Tag component\n */\nexport interface TagProps {\n  /** The text content to display */\n  label: string;\n  /** Router path or external URL */\n  href?: string;\n  /** Color name or hex color value (example: #3B82F6 or red) */\n  color?: string;\n  /** Size variant */\n  size?: TagSize;\n  /** Additional CSS classes */\n  className?: string;\n  /** Click handler for the tag */\n  onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Mouse down handler */\n  onMouseDown?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Maximum character length before truncation */\n  truncate?: number;\n  /** Treat `color` as a hex color string (e.g. `#3B82F6` or `3b82f6`). When true, the value is applied as a hex regardless of named-color matches. */\n  isHashColor?: boolean;\n  /** Theme mode */\n  theme?: ThemeMode;\n  /** Icon to display before the label */\n  icon?: React.ReactNode;\n  /** Whether the tag is removable (shows close button) */\n  removable?: boolean;\n  /** Handler for remove button click */\n  onRemove?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Upload handler function */\n  onUpload?: UploadHandler;\n  /** Whether the tag accepts file uploads */\n  acceptsUpload?: boolean;\n  /** Whether to show a tooltip with the label on hover */\n  tooltip?: boolean;\n  /** Custom aria-label for accessibility */\n  \"aria-label\"?: string;\n  /** ARIA role override */\n  role?: React.AriaRole;\n}\n\n/**\n * Tag component displays labels with customizable colors and styling\n *\n * @example\n * ```tsx\n * <Tag label=\"React\" color=\"blue\" size=\"md\" />\n * <Tag label=\"TypeScript\" color=\"#3178c6\" isHashColor />\n * <Tag label=\"Removable\" removable onRemove={handleRemove} />\n * <Tag label=\"Upload\" acceptsUpload onUpload={handleUpload} />\n * ```\n */\nconst TAG_COLOR_CLASSES: Record<TagColor, string> = {\n  primary: \"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400\",\n  success: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n  warning: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n  error: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n  neutral: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  red: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n  green: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n  blue: \"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300\",\n  teal: \"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300\",\n  orange: \"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300\",\n  peach: \"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300\",\n  navy: \"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300\",\n  gray: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  grey: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  yellow: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n  purple: \"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300\",\n};\n\nconst HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/;\nconst EXTERNAL_HREF_PATTERN = /^(?:[a-z][a-z\\d+\\-.]*:|\\/\\/)/i;\n\nconst getColorClasses = (color?: string, isHexColor?: boolean): string => {\n  if (isHexColor) return \"\";\n  if (!color) return TAG_COLOR_CLASSES.primary;\n  return TAG_COLOR_CLASSES[color.toLowerCase() as TagColor] ?? TAG_COLOR_CLASSES.primary;\n};\n\n/**\n * Normalize a 6-digit hex color string to lowercase `#rrggbb`.\n * Returns `undefined` if the value isn't a valid 6-digit hex.\n */\nconst normalizeHex = (value: string): string | undefined => {\n  const trimmed = value.trim().toLowerCase();\n  return HEX_COLOR_PATTERN.test(trimmed) ? trimmed : undefined;\n};\n\nconst isExternalHref = (href: string): boolean => EXTERNAL_HREF_PATTERN.test(href);\n\n/**\n * Get size-based styling classes\n */\nconst getSizeClasses = (size: TagSize): string => {\n  switch (size) {\n    case \"xs\":\n      return \"text-3xs leading-3 px-1 border-[0.5px] rounded\";\n    case \"lg\":\n      return \"text-sm leading-5 px-1.5 border rounded-md\";\n    case \"sm\":\n      return \"text-2xs leading-4 px-1 border-[0.5px] rounded\";\n    default: // md\n      return \"text-xs leading-4 px-1.5 border rounded-md\";\n  }\n};\n\nexport const Tag = forwardRef<HTMLElement, TagProps>(\n  (\n    {\n      label,\n      href,\n      color,\n      size = 'md',\n      className,\n      onClick,\n      onMouseDown,\n      truncate,\n      isHashColor = false,\n      theme,\n      icon,\n      removable = false,\n      onRemove,\n      onUpload,\n      acceptsUpload = false,\n      tooltip = false,\n      \"aria-label\": ariaLabel,\n      role,\n    },\n    ref\n  ) => {\n    const normalizedHex =\n      typeof color === \"string\" && (isHashColor || HEX_COLOR_PATTERN.test(color))\n        ? normalizeHex(color)\n        : undefined;\n    const isHexColor = Boolean(normalizedHex);\n    const tagStyle: CSSProperties = {\n      maxWidth: \"100%\",\n      ...(normalizedHex\n        ? {\n          backgroundColor: `${normalizedHex}26`,\n          borderColor: `${normalizedHex}59`,\n          color: normalizedHex,\n        }\n        : {}),\n    };\n    const isInteractive = Boolean(onClick || acceptsUpload || href);\n    const shouldRenderAnchor = Boolean(href && isExternalHref(href));\n\n    /**\n     * Handle file upload\n     */\n    const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {\n      const file = event.target.files?.[0];\n      if (file && onUpload) {\n        onUpload(file);\n      }\n      // Reset input value to allow same file selection\n      event.target.value = '';\n    };\n\n    const tagClassName = cn(\n      \"inline-flex items-center transition-colors font-medium\",\n      getColorClasses(color, isHexColor),\n      getSizeClasses(size),\n      isInteractive && \"cursor-pointer hover:opacity-80\",\n      className\n    );\n\n    const inner = (\n      <div className=\"flex items-center gap-0.5 min-w-0 overflow-hidden\" style={{ maxWidth: \"100%\" }}>\n        {icon}\n\n        {truncate ? (\n          <p\n            title={label}\n            className={cn(\n              \"overflow-hidden whitespace-nowrap text-ellipsis\",\n              isInteractive && \"cursor-pointer\"\n            )}\n            style={{ maxWidth: \"100%\" }}\n          >\n            {label.length > truncate ? `${label.slice(0, truncate)}...` : label}\n          </p>\n        ) : (\n          <p className=\"overflow-hidden whitespace-nowrap text-ellipsis\" style={{ maxWidth: \"100%\" }}>\n            {label}\n          </p>\n        )}\n\n        {acceptsUpload && (\n          <input\n            type=\"file\"\n            onChange={handleFileUpload}\n            className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n            aria-label={`Upload file for ${label}`}\n          />\n        )}\n\n        {removable && onRemove && (\n          <button\n            onClick={onRemove}\n            className=\"ml-1 flex-shrink-0\"\n            aria-label={`Remove ${label}`}\n            type=\"button\"\n          >\n            <CloseIcon size={12} className=\"cursor-pointer\" />\n          </button>\n        )}\n      </div>\n    );\n\n    const content = tooltip ? <Tooltip title={label} delayShow>{inner}</Tooltip> : inner;\n\n    if (href) {\n      if (shouldRenderAnchor) {\n        return (\n          <a\n            ref={ref as Ref<HTMLAnchorElement>}\n            href={href}\n            className={tagClassName}\n            style={tagStyle}\n            onMouseDown={onMouseDown}\n            onClick={onClick}\n            aria-label={ariaLabel || `Tag: ${label}`}\n            role={role}\n            data-theme={theme}\n          >\n            {content}\n          </a>\n        );\n      }\n\n      return (\n        <Link\n          ref={ref as Ref<HTMLAnchorElement>}\n          to={href}\n          className={tagClassName}\n          style={tagStyle}\n          onMouseDown={onMouseDown}\n          onClick={onClick}\n          aria-label={ariaLabel || `Tag: ${label}`}\n          role={role}\n          data-theme={theme}\n        >\n          {content}\n        </Link>\n      );\n    }\n\n    return (\n      <div\n        ref={ref as Ref<HTMLDivElement>}\n        className={tagClassName}\n        style={tagStyle}\n        onMouseDown={onMouseDown}\n        onClick={onClick}\n        onKeyDown={\n          isInteractive\n            ? (event) => {\n              if (event.key === \"Enter\" || event.key === \" \") {\n                event.preventDefault();\n                event.currentTarget.click();\n              }\n            }\n            : undefined\n        }\n        aria-label={ariaLabel || `Tag: ${label}`}\n        role={role ?? (isInteractive ? \"button\" : undefined)}\n        tabIndex={isInteractive ? 0 : undefined}\n        data-theme={theme}\n      >\n        {content}\n      </div>\n    );\n  }\n);\n\nTag.displayName = \"Tag\";\n"],"names":["TAG_COLOR_CLASSES","HEX_COLOR_PATTERN","EXTERNAL_HREF_PATTERN","getColorClasses","color","isHexColor","normalizeHex","value","trimmed","isExternalHref","href","getSizeClasses","size","Tag","forwardRef","label","className","onClick","onMouseDown","truncate","isHashColor","theme","icon","removable","onRemove","onUpload","acceptsUpload","tooltip","ariaLabel","role","ref","normalizedHex","tagStyle","isInteractive","shouldRenderAnchor","handleFileUpload","event","file","tagClassName","cn","inner","jsx","CloseIcon","content","Tooltip","Link"],"mappings":"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"}
+{"version":3,"file":"Tag.cjs.js","sources":["../../../../src/components/data-display/tag/Tag.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, type CSSProperties, type Ref } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { CloseIcon } from \"../../icons/CloseIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\n\n/**\n * Available tag size options\n */\nexport type TagSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n/**\n * Available color names for tags\n */\nexport type TagColor =\n  | \"primary\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"neutral\"\n  | \"red\"\n  | \"green\"\n  | \"blue\"\n  | \"teal\"\n  | \"yellow\"\n  | \"orange\"\n  | \"peach\"\n  | \"purple\"\n  | \"navy\"\n  | \"gray\"\n  | \"grey\";\n\nexport type ThemeMode = \"light\" | \"dark\";\n\n/**\n * Upload handler function type\n */\nexport type UploadHandler = (file: File) => void | Promise<void>;\n\n/**\n * Props for the Tag component\n */\nexport interface TagProps {\n  /** The text content to display */\n  label: string;\n  /** Router path or external URL */\n  href?: string;\n  /** Color name or hex color value (example: #3B82F6 or red) */\n  color?: string;\n  /** Size variant */\n  size?: TagSize;\n  /** Additional CSS classes */\n  className?: string;\n  /** Click handler for the tag */\n  onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Mouse down handler */\n  onMouseDown?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Maximum character length before truncation */\n  truncate?: number;\n  /** Treat `color` as a hex color string (e.g. `#3B82F6` or `3b82f6`). When true, the value is applied as a hex regardless of named-color matches. */\n  isHashColor?: boolean;\n  /** Theme mode */\n  theme?: ThemeMode;\n  /** Icon to display before the label */\n  icon?: React.ReactNode;\n  /** Whether the tag is removable (shows close button) */\n  removable?: boolean;\n  /** Handler for remove button click */\n  onRemove?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Upload handler function */\n  onUpload?: UploadHandler;\n  /** Whether the tag accepts file uploads */\n  acceptsUpload?: boolean;\n  /** Whether to show a tooltip with the label on hover */\n  tooltip?: boolean;\n  /** Custom aria-label for accessibility */\n  \"aria-label\"?: string;\n  /** ARIA role override */\n  role?: React.AriaRole;\n}\n\n/**\n * Tag component displays labels with customizable colors and styling\n *\n * @example\n * ```tsx\n * <Tag label=\"React\" color=\"blue\" size=\"md\" />\n * <Tag label=\"TypeScript\" color=\"#3178c6\" isHashColor />\n * <Tag label=\"Removable\" removable onRemove={handleRemove} />\n * <Tag label=\"Upload\" acceptsUpload onUpload={handleUpload} />\n * ```\n */\nconst TAG_COLOR_CLASSES: Record<TagColor, string> = {\n  primary: \"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400\",\n  success: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n  warning: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n  error: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n  neutral: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  red: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n  green: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n  blue: \"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300\",\n  teal: \"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300\",\n  orange: \"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300\",\n  peach: \"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300\",\n  navy: \"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300\",\n  gray: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  grey: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  yellow: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n  purple: \"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300\",\n};\n\nconst HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/;\nconst EXTERNAL_HREF_PATTERN = /^(?:[a-z][a-z\\d+\\-.]*:|\\/\\/)/i;\n\nconst getColorClasses = (color?: string, isHexColor?: boolean): string => {\n  if (isHexColor) return \"\";\n  if (!color) return TAG_COLOR_CLASSES.primary;\n  return TAG_COLOR_CLASSES[color.toLowerCase() as TagColor] ?? TAG_COLOR_CLASSES.primary;\n};\n\n/**\n * Normalize a 6-digit hex color string to lowercase `#rrggbb`.\n * Returns `undefined` if the value isn't a valid 6-digit hex.\n */\nconst normalizeHex = (value: string): string | undefined => {\n  const trimmed = value.trim().toLowerCase();\n  return HEX_COLOR_PATTERN.test(trimmed) ? trimmed : undefined;\n};\n\nconst isExternalHref = (href: string): boolean => EXTERNAL_HREF_PATTERN.test(href);\n\n/**\n * Get size-based styling classes\n */\nconst getSizeClasses = (size: TagSize): string => {\n  switch (size) {\n    case \"xs\":\n      return \"text-3xs leading-3 px-1 border-[0.5px] rounded\";\n    case \"lg\":\n      return \"text-sm leading-5 px-1.5 border rounded-md\";\n    case \"sm\":\n      return \"text-2xs leading-4 px-1 border-[0.5px] rounded\";\n    default: // md\n      return \"text-xs leading-4 px-1.5 border rounded-md\";\n  }\n};\n\nexport const Tag = forwardRef<HTMLElement, TagProps>(\n  (\n    {\n      label,\n      href,\n      color,\n      size = 'md',\n      className,\n      onClick,\n      onMouseDown,\n      truncate,\n      isHashColor = false,\n      theme,\n      icon,\n      removable = false,\n      onRemove,\n      onUpload,\n      acceptsUpload = false,\n      tooltip = false,\n      \"aria-label\": ariaLabel,\n      role,\n    },\n    ref\n  ) => {\n    const normalizedHex =\n      typeof color === \"string\" && (isHashColor || HEX_COLOR_PATTERN.test(color))\n        ? normalizeHex(color)\n        : undefined;\n    const isHexColor = Boolean(normalizedHex);\n    const tagStyle: CSSProperties = {\n      maxWidth: \"100%\",\n      ...(normalizedHex\n        ? {\n          backgroundColor: `${normalizedHex}26`,\n          borderColor: `${normalizedHex}59`,\n          color: normalizedHex,\n        }\n        : {}),\n    };\n    const isInteractive = Boolean(onClick || acceptsUpload || href);\n    const shouldRenderAnchor = Boolean(href && isExternalHref(href));\n\n    /**\n     * Handle file upload\n     */\n    const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {\n      const file = event.target.files?.[0];\n      if (file && onUpload) {\n        onUpload(file);\n      }\n      // Reset input value to allow same file selection\n      event.target.value = '';\n    };\n\n    const tagClassName = cn(\n      \"inline-flex items-center font-medium\",\n      getColorClasses(color, isHexColor),\n      getSizeClasses(size),\n      isInteractive && \"cursor-pointer hover:opacity-80\",\n      className\n    );\n\n    const inner = (\n      <div className=\"flex items-center gap-0.5 min-w-0 overflow-hidden\" style={{ maxWidth: \"100%\" }}>\n        {icon}\n\n        {truncate ? (\n          <p\n            title={label}\n            className={cn(\n              \"overflow-hidden whitespace-nowrap text-ellipsis\",\n              isInteractive && \"cursor-pointer\"\n            )}\n            style={{ maxWidth: \"100%\" }}\n          >\n            {label.length > truncate ? `${label.slice(0, truncate)}...` : label}\n          </p>\n        ) : (\n          <p className=\"overflow-hidden whitespace-nowrap text-ellipsis\" style={{ maxWidth: \"100%\" }}>\n            {label}\n          </p>\n        )}\n\n        {acceptsUpload && (\n          <input\n            type=\"file\"\n            onChange={handleFileUpload}\n            className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n            aria-label={`Upload file for ${label}`}\n          />\n        )}\n\n        {removable && onRemove && (\n          <button\n            onClick={onRemove}\n            className=\"ml-1 flex-shrink-0\"\n            aria-label={`Remove ${label}`}\n            type=\"button\"\n          >\n            <CloseIcon size={12} className=\"cursor-pointer\" />\n          </button>\n        )}\n      </div>\n    );\n\n    const content = tooltip ? <Tooltip title={label} delayShow>{inner}</Tooltip> : inner;\n\n    if (href) {\n      if (shouldRenderAnchor) {\n        return (\n          <a\n            ref={ref as Ref<HTMLAnchorElement>}\n            href={href}\n            className={tagClassName}\n            style={tagStyle}\n            onMouseDown={onMouseDown}\n            onClick={onClick}\n            aria-label={ariaLabel || `Tag: ${label}`}\n            role={role}\n            data-theme={theme}\n          >\n            {content}\n          </a>\n        );\n      }\n\n      return (\n        <Link\n          ref={ref as Ref<HTMLAnchorElement>}\n          to={href}\n          className={tagClassName}\n          style={tagStyle}\n          onMouseDown={onMouseDown}\n          onClick={onClick}\n          aria-label={ariaLabel || `Tag: ${label}`}\n          role={role}\n          data-theme={theme}\n        >\n          {content}\n        </Link>\n      );\n    }\n\n    return (\n      <div\n        ref={ref as Ref<HTMLDivElement>}\n        className={tagClassName}\n        style={tagStyle}\n        onMouseDown={onMouseDown}\n        onClick={onClick}\n        onKeyDown={\n          isInteractive\n            ? (event) => {\n              if (event.key === \"Enter\" || event.key === \" \") {\n                event.preventDefault();\n                event.currentTarget.click();\n              }\n            }\n            : undefined\n        }\n        aria-label={ariaLabel || `Tag: ${label}`}\n        role={role ?? (isInteractive ? \"button\" : undefined)}\n        tabIndex={isInteractive ? 0 : undefined}\n        data-theme={theme}\n      >\n        {content}\n      </div>\n    );\n  }\n);\n\nTag.displayName = \"Tag\";\n"],"names":["TAG_COLOR_CLASSES","HEX_COLOR_PATTERN","EXTERNAL_HREF_PATTERN","getColorClasses","color","isHexColor","normalizeHex","value","trimmed","isExternalHref","href","getSizeClasses","size","Tag","forwardRef","label","className","onClick","onMouseDown","truncate","isHashColor","theme","icon","removable","onRemove","onUpload","acceptsUpload","tooltip","ariaLabel","role","ref","normalizedHex","tagStyle","isInteractive","shouldRenderAnchor","handleFileUpload","event","file","tagClassName","cn","inner","jsx","CloseIcon","content","Tooltip","Link"],"mappings":"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"}

package/dist/components/data-display/tag/Tag.es.js

@@ -67,7 +67,7 @@ const k = {
       const N = a.target.files?.[0];
       N && f && f(N), a.target.value = "";
     }, y = T(
-      "inline-flex items-center transition-colors font-medium",
+      "inline-flex items-center font-medium",
       j(l, H),
       G(v),
       o && "cursor-pointer hover:opacity-80",

package/dist/components/data-display/tag/Tag.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.es.js","sources":["../../../../src/components/data-display/tag/Tag.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, type CSSProperties, type Ref } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { CloseIcon } from \"../../icons/CloseIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\n\n/**\n * Available tag size options\n */\nexport type TagSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n/**\n * Available color names for tags\n */\nexport type TagColor =\n  | \"primary\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"neutral\"\n  | \"red\"\n  | \"green\"\n  | \"blue\"\n  | \"teal\"\n  | \"yellow\"\n  | \"orange\"\n  | \"peach\"\n  | \"purple\"\n  | \"navy\"\n  | \"gray\"\n  | \"grey\";\n\nexport type ThemeMode = \"light\" | \"dark\";\n\n/**\n * Upload handler function type\n */\nexport type UploadHandler = (file: File) => void | Promise<void>;\n\n/**\n * Props for the Tag component\n */\nexport interface TagProps {\n  /** The text content to display */\n  label: string;\n  /** Router path or external URL */\n  href?: string;\n  /** Color name or hex color value (example: #3B82F6 or red) */\n  color?: string;\n  /** Size variant */\n  size?: TagSize;\n  /** Additional CSS classes */\n  className?: string;\n  /** Click handler for the tag */\n  onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Mouse down handler */\n  onMouseDown?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Maximum character length before truncation */\n  truncate?: number;\n  /** Treat `color` as a hex color string (e.g. `#3B82F6` or `3b82f6`). When true, the value is applied as a hex regardless of named-color matches. */\n  isHashColor?: boolean;\n  /** Theme mode */\n  theme?: ThemeMode;\n  /** Icon to display before the label */\n  icon?: React.ReactNode;\n  /** Whether the tag is removable (shows close button) */\n  removable?: boolean;\n  /** Handler for remove button click */\n  onRemove?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Upload handler function */\n  onUpload?: UploadHandler;\n  /** Whether the tag accepts file uploads */\n  acceptsUpload?: boolean;\n  /** Whether to show a tooltip with the label on hover */\n  tooltip?: boolean;\n  /** Custom aria-label for accessibility */\n  \"aria-label\"?: string;\n  /** ARIA role override */\n  role?: React.AriaRole;\n}\n\n/**\n * Tag component displays labels with customizable colors and styling\n *\n * @example\n * ```tsx\n * <Tag label=\"React\" color=\"blue\" size=\"md\" />\n * <Tag label=\"TypeScript\" color=\"#3178c6\" isHashColor />\n * <Tag label=\"Removable\" removable onRemove={handleRemove} />\n * <Tag label=\"Upload\" acceptsUpload onUpload={handleUpload} />\n * ```\n */\nconst TAG_COLOR_CLASSES: Record<TagColor, string> = {\n  primary: \"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400\",\n  success: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n  warning: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n  error: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n  neutral: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  red: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n  green: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n  blue: \"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300\",\n  teal: \"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300\",\n  orange: \"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300\",\n  peach: \"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300\",\n  navy: \"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300\",\n  gray: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  grey: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  yellow: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n  purple: \"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300\",\n};\n\nconst HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/;\nconst EXTERNAL_HREF_PATTERN = /^(?:[a-z][a-z\\d+\\-.]*:|\\/\\/)/i;\n\nconst getColorClasses = (color?: string, isHexColor?: boolean): string => {\n  if (isHexColor) return \"\";\n  if (!color) return TAG_COLOR_CLASSES.primary;\n  return TAG_COLOR_CLASSES[color.toLowerCase() as TagColor] ?? TAG_COLOR_CLASSES.primary;\n};\n\n/**\n * Normalize a 6-digit hex color string to lowercase `#rrggbb`.\n * Returns `undefined` if the value isn't a valid 6-digit hex.\n */\nconst normalizeHex = (value: string): string | undefined => {\n  const trimmed = value.trim().toLowerCase();\n  return HEX_COLOR_PATTERN.test(trimmed) ? trimmed : undefined;\n};\n\nconst isExternalHref = (href: string): boolean => EXTERNAL_HREF_PATTERN.test(href);\n\n/**\n * Get size-based styling classes\n */\nconst getSizeClasses = (size: TagSize): string => {\n  switch (size) {\n    case \"xs\":\n      return \"text-3xs leading-3 px-1 border-[0.5px] rounded\";\n    case \"lg\":\n      return \"text-sm leading-5 px-1.5 border rounded-md\";\n    case \"sm\":\n      return \"text-2xs leading-4 px-1 border-[0.5px] rounded\";\n    default: // md\n      return \"text-xs leading-4 px-1.5 border rounded-md\";\n  }\n};\n\nexport const Tag = forwardRef<HTMLElement, TagProps>(\n  (\n    {\n      label,\n      href,\n      color,\n      size = 'md',\n      className,\n      onClick,\n      onMouseDown,\n      truncate,\n      isHashColor = false,\n      theme,\n      icon,\n      removable = false,\n      onRemove,\n      onUpload,\n      acceptsUpload = false,\n      tooltip = false,\n      \"aria-label\": ariaLabel,\n      role,\n    },\n    ref\n  ) => {\n    const normalizedHex =\n      typeof color === \"string\" && (isHashColor || HEX_COLOR_PATTERN.test(color))\n        ? normalizeHex(color)\n        : undefined;\n    const isHexColor = Boolean(normalizedHex);\n    const tagStyle: CSSProperties = {\n      maxWidth: \"100%\",\n      ...(normalizedHex\n        ? {\n          backgroundColor: `${normalizedHex}26`,\n          borderColor: `${normalizedHex}59`,\n          color: normalizedHex,\n        }\n        : {}),\n    };\n    const isInteractive = Boolean(onClick || acceptsUpload || href);\n    const shouldRenderAnchor = Boolean(href && isExternalHref(href));\n\n    /**\n     * Handle file upload\n     */\n    const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {\n      const file = event.target.files?.[0];\n      if (file && onUpload) {\n        onUpload(file);\n      }\n      // Reset input value to allow same file selection\n      event.target.value = '';\n    };\n\n    const tagClassName = cn(\n      \"inline-flex items-center transition-colors font-medium\",\n      getColorClasses(color, isHexColor),\n      getSizeClasses(size),\n      isInteractive && \"cursor-pointer hover:opacity-80\",\n      className\n    );\n\n    const inner = (\n      <div className=\"flex items-center gap-0.5 min-w-0 overflow-hidden\" style={{ maxWidth: \"100%\" }}>\n        {icon}\n\n        {truncate ? (\n          <p\n            title={label}\n            className={cn(\n              \"overflow-hidden whitespace-nowrap text-ellipsis\",\n              isInteractive && \"cursor-pointer\"\n            )}\n            style={{ maxWidth: \"100%\" }}\n          >\n            {label.length > truncate ? `${label.slice(0, truncate)}...` : label}\n          </p>\n        ) : (\n          <p className=\"overflow-hidden whitespace-nowrap text-ellipsis\" style={{ maxWidth: \"100%\" }}>\n            {label}\n          </p>\n        )}\n\n        {acceptsUpload && (\n          <input\n            type=\"file\"\n            onChange={handleFileUpload}\n            className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n            aria-label={`Upload file for ${label}`}\n          />\n        )}\n\n        {removable && onRemove && (\n          <button\n            onClick={onRemove}\n            className=\"ml-1 flex-shrink-0\"\n            aria-label={`Remove ${label}`}\n            type=\"button\"\n          >\n            <CloseIcon size={12} className=\"cursor-pointer\" />\n          </button>\n        )}\n      </div>\n    );\n\n    const content = tooltip ? <Tooltip title={label} delayShow>{inner}</Tooltip> : inner;\n\n    if (href) {\n      if (shouldRenderAnchor) {\n        return (\n          <a\n            ref={ref as Ref<HTMLAnchorElement>}\n            href={href}\n            className={tagClassName}\n            style={tagStyle}\n            onMouseDown={onMouseDown}\n            onClick={onClick}\n            aria-label={ariaLabel || `Tag: ${label}`}\n            role={role}\n            data-theme={theme}\n          >\n            {content}\n          </a>\n        );\n      }\n\n      return (\n        <Link\n          ref={ref as Ref<HTMLAnchorElement>}\n          to={href}\n          className={tagClassName}\n          style={tagStyle}\n          onMouseDown={onMouseDown}\n          onClick={onClick}\n          aria-label={ariaLabel || `Tag: ${label}`}\n          role={role}\n          data-theme={theme}\n        >\n          {content}\n        </Link>\n      );\n    }\n\n    return (\n      <div\n        ref={ref as Ref<HTMLDivElement>}\n        className={tagClassName}\n        style={tagStyle}\n        onMouseDown={onMouseDown}\n        onClick={onClick}\n        onKeyDown={\n          isInteractive\n            ? (event) => {\n              if (event.key === \"Enter\" || event.key === \" \") {\n                event.preventDefault();\n                event.currentTarget.click();\n              }\n            }\n            : undefined\n        }\n        aria-label={ariaLabel || `Tag: ${label}`}\n        role={role ?? (isInteractive ? \"button\" : undefined)}\n        tabIndex={isInteractive ? 0 : undefined}\n        data-theme={theme}\n      >\n        {content}\n      </div>\n    );\n  }\n);\n\nTag.displayName = \"Tag\";\n"],"names":["TAG_COLOR_CLASSES","HEX_COLOR_PATTERN","EXTERNAL_HREF_PATTERN","getColorClasses","color","isHexColor","normalizeHex","value","trimmed","isExternalHref","href","getSizeClasses","size","Tag","forwardRef","label","className","onClick","onMouseDown","truncate","isHashColor","theme","icon","removable","onRemove","onUpload","acceptsUpload","tooltip","ariaLabel","role","ref","normalizedHex","tagStyle","isInteractive","shouldRenderAnchor","handleFileUpload","event","file","tagClassName","cn","inner","jsx","CloseIcon","content","Tooltip","Link"],"mappings":"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"}
+{"version":3,"file":"Tag.es.js","sources":["../../../../src/components/data-display/tag/Tag.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, type CSSProperties, type Ref } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { CloseIcon } from \"../../icons/CloseIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\n\n/**\n * Available tag size options\n */\nexport type TagSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n/**\n * Available color names for tags\n */\nexport type TagColor =\n  | \"primary\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"neutral\"\n  | \"red\"\n  | \"green\"\n  | \"blue\"\n  | \"teal\"\n  | \"yellow\"\n  | \"orange\"\n  | \"peach\"\n  | \"purple\"\n  | \"navy\"\n  | \"gray\"\n  | \"grey\";\n\nexport type ThemeMode = \"light\" | \"dark\";\n\n/**\n * Upload handler function type\n */\nexport type UploadHandler = (file: File) => void | Promise<void>;\n\n/**\n * Props for the Tag component\n */\nexport interface TagProps {\n  /** The text content to display */\n  label: string;\n  /** Router path or external URL */\n  href?: string;\n  /** Color name or hex color value (example: #3B82F6 or red) */\n  color?: string;\n  /** Size variant */\n  size?: TagSize;\n  /** Additional CSS classes */\n  className?: string;\n  /** Click handler for the tag */\n  onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Mouse down handler */\n  onMouseDown?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Maximum character length before truncation */\n  truncate?: number;\n  /** Treat `color` as a hex color string (e.g. `#3B82F6` or `3b82f6`). When true, the value is applied as a hex regardless of named-color matches. */\n  isHashColor?: boolean;\n  /** Theme mode */\n  theme?: ThemeMode;\n  /** Icon to display before the label */\n  icon?: React.ReactNode;\n  /** Whether the tag is removable (shows close button) */\n  removable?: boolean;\n  /** Handler for remove button click */\n  onRemove?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Upload handler function */\n  onUpload?: UploadHandler;\n  /** Whether the tag accepts file uploads */\n  acceptsUpload?: boolean;\n  /** Whether to show a tooltip with the label on hover */\n  tooltip?: boolean;\n  /** Custom aria-label for accessibility */\n  \"aria-label\"?: string;\n  /** ARIA role override */\n  role?: React.AriaRole;\n}\n\n/**\n * Tag component displays labels with customizable colors and styling\n *\n * @example\n * ```tsx\n * <Tag label=\"React\" color=\"blue\" size=\"md\" />\n * <Tag label=\"TypeScript\" color=\"#3178c6\" isHashColor />\n * <Tag label=\"Removable\" removable onRemove={handleRemove} />\n * <Tag label=\"Upload\" acceptsUpload onUpload={handleUpload} />\n * ```\n */\nconst TAG_COLOR_CLASSES: Record<TagColor, string> = {\n  primary: \"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400\",\n  success: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n  warning: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n  error: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n  neutral: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  red: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n  green: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n  blue: \"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300\",\n  teal: \"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300\",\n  orange: \"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300\",\n  peach: \"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300\",\n  navy: \"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300\",\n  gray: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  grey: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  yellow: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n  purple: \"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300\",\n};\n\nconst HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/;\nconst EXTERNAL_HREF_PATTERN = /^(?:[a-z][a-z\\d+\\-.]*:|\\/\\/)/i;\n\nconst getColorClasses = (color?: string, isHexColor?: boolean): string => {\n  if (isHexColor) return \"\";\n  if (!color) return TAG_COLOR_CLASSES.primary;\n  return TAG_COLOR_CLASSES[color.toLowerCase() as TagColor] ?? TAG_COLOR_CLASSES.primary;\n};\n\n/**\n * Normalize a 6-digit hex color string to lowercase `#rrggbb`.\n * Returns `undefined` if the value isn't a valid 6-digit hex.\n */\nconst normalizeHex = (value: string): string | undefined => {\n  const trimmed = value.trim().toLowerCase();\n  return HEX_COLOR_PATTERN.test(trimmed) ? trimmed : undefined;\n};\n\nconst isExternalHref = (href: string): boolean => EXTERNAL_HREF_PATTERN.test(href);\n\n/**\n * Get size-based styling classes\n */\nconst getSizeClasses = (size: TagSize): string => {\n  switch (size) {\n    case \"xs\":\n      return \"text-3xs leading-3 px-1 border-[0.5px] rounded\";\n    case \"lg\":\n      return \"text-sm leading-5 px-1.5 border rounded-md\";\n    case \"sm\":\n      return \"text-2xs leading-4 px-1 border-[0.5px] rounded\";\n    default: // md\n      return \"text-xs leading-4 px-1.5 border rounded-md\";\n  }\n};\n\nexport const Tag = forwardRef<HTMLElement, TagProps>(\n  (\n    {\n      label,\n      href,\n      color,\n      size = 'md',\n      className,\n      onClick,\n      onMouseDown,\n      truncate,\n      isHashColor = false,\n      theme,\n      icon,\n      removable = false,\n      onRemove,\n      onUpload,\n      acceptsUpload = false,\n      tooltip = false,\n      \"aria-label\": ariaLabel,\n      role,\n    },\n    ref\n  ) => {\n    const normalizedHex =\n      typeof color === \"string\" && (isHashColor || HEX_COLOR_PATTERN.test(color))\n        ? normalizeHex(color)\n        : undefined;\n    const isHexColor = Boolean(normalizedHex);\n    const tagStyle: CSSProperties = {\n      maxWidth: \"100%\",\n      ...(normalizedHex\n        ? {\n          backgroundColor: `${normalizedHex}26`,\n          borderColor: `${normalizedHex}59`,\n          color: normalizedHex,\n        }\n        : {}),\n    };\n    const isInteractive = Boolean(onClick || acceptsUpload || href);\n    const shouldRenderAnchor = Boolean(href && isExternalHref(href));\n\n    /**\n     * Handle file upload\n     */\n    const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {\n      const file = event.target.files?.[0];\n      if (file && onUpload) {\n        onUpload(file);\n      }\n      // Reset input value to allow same file selection\n      event.target.value = '';\n    };\n\n    const tagClassName = cn(\n      \"inline-flex items-center font-medium\",\n      getColorClasses(color, isHexColor),\n      getSizeClasses(size),\n      isInteractive && \"cursor-pointer hover:opacity-80\",\n      className\n    );\n\n    const inner = (\n      <div className=\"flex items-center gap-0.5 min-w-0 overflow-hidden\" style={{ maxWidth: \"100%\" }}>\n        {icon}\n\n        {truncate ? (\n          <p\n            title={label}\n            className={cn(\n              \"overflow-hidden whitespace-nowrap text-ellipsis\",\n              isInteractive && \"cursor-pointer\"\n            )}\n            style={{ maxWidth: \"100%\" }}\n          >\n            {label.length > truncate ? `${label.slice(0, truncate)}...` : label}\n          </p>\n        ) : (\n          <p className=\"overflow-hidden whitespace-nowrap text-ellipsis\" style={{ maxWidth: \"100%\" }}>\n            {label}\n          </p>\n        )}\n\n        {acceptsUpload && (\n          <input\n            type=\"file\"\n            onChange={handleFileUpload}\n            className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n            aria-label={`Upload file for ${label}`}\n          />\n        )}\n\n        {removable && onRemove && (\n          <button\n            onClick={onRemove}\n            className=\"ml-1 flex-shrink-0\"\n            aria-label={`Remove ${label}`}\n            type=\"button\"\n          >\n            <CloseIcon size={12} className=\"cursor-pointer\" />\n          </button>\n        )}\n      </div>\n    );\n\n    const content = tooltip ? <Tooltip title={label} delayShow>{inner}</Tooltip> : inner;\n\n    if (href) {\n      if (shouldRenderAnchor) {\n        return (\n          <a\n            ref={ref as Ref<HTMLAnchorElement>}\n            href={href}\n            className={tagClassName}\n            style={tagStyle}\n            onMouseDown={onMouseDown}\n            onClick={onClick}\n            aria-label={ariaLabel || `Tag: ${label}`}\n            role={role}\n            data-theme={theme}\n          >\n            {content}\n          </a>\n        );\n      }\n\n      return (\n        <Link\n          ref={ref as Ref<HTMLAnchorElement>}\n          to={href}\n          className={tagClassName}\n          style={tagStyle}\n          onMouseDown={onMouseDown}\n          onClick={onClick}\n          aria-label={ariaLabel || `Tag: ${label}`}\n          role={role}\n          data-theme={theme}\n        >\n          {content}\n        </Link>\n      );\n    }\n\n    return (\n      <div\n        ref={ref as Ref<HTMLDivElement>}\n        className={tagClassName}\n        style={tagStyle}\n        onMouseDown={onMouseDown}\n        onClick={onClick}\n        onKeyDown={\n          isInteractive\n            ? (event) => {\n              if (event.key === \"Enter\" || event.key === \" \") {\n                event.preventDefault();\n                event.currentTarget.click();\n              }\n            }\n            : undefined\n        }\n        aria-label={ariaLabel || `Tag: ${label}`}\n        role={role ?? (isInteractive ? \"button\" : undefined)}\n        tabIndex={isInteractive ? 0 : undefined}\n        data-theme={theme}\n      >\n        {content}\n      </div>\n    );\n  }\n);\n\nTag.displayName = \"Tag\";\n"],"names":["TAG_COLOR_CLASSES","HEX_COLOR_PATTERN","EXTERNAL_HREF_PATTERN","getColorClasses","color","isHexColor","normalizeHex","value","trimmed","isExternalHref","href","getSizeClasses","size","Tag","forwardRef","label","className","onClick","onMouseDown","truncate","isHashColor","theme","icon","removable","onRemove","onUpload","acceptsUpload","tooltip","ariaLabel","role","ref","normalizedHex","tagStyle","isInteractive","shouldRenderAnchor","handleFileUpload","event","file","tagClassName","cn","inner","jsx","CloseIcon","content","Tooltip","Link"],"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"),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;
+"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"),o=require("react"),x=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"),m=require("../../forms/toggle/Toggle.cjs.js"),M=require("../../button/IconButton.cjs.js"),j=require("./types.cjs.js"),q=require("../../icon/icons.generated.cjs.js"),A=({fontSize:s=24,className:i})=>e.jsx("svg",{width:s,height:s,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:i,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"})}),B=({fontSize:s=24,className:i})=>e.jsx("svg",{width:s,height:s,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:i,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"})}),F=[{label:"Default",value:"default",icon:e.jsx(q.FormatListBulletedIcon,{className:"w-icon h-icon"})},{label:"A-Z",value:"asc",icon:e.jsx(A,{className:"w-icon h-icon"})},{label:"Z-A",value:"desc",icon:e.jsx(B,{className:"w-icon h-icon"})}],V=({savedConfig:s,onApplyFilter:i,setUnsavedChanges:b,handleTabSort:f,onSearchChange:h,hasSuffixRecord:w=!1})=>{const[v,d]=o.useState(!1),[r,u]=o.useState(j.INITIAL_TAB_OPTION_CONFIG),[n,g]=o.useState(""),c=(t,p)=>{u(T=>({...T,[t]:p}))},N=()=>{u({filterType:{label:"Contains",value:"contains"},sortOrder:"default",showCounts:!0,lockOrder:!1}),g(""),h("","contains")},k=()=>{i({filterType:r.filterType,sortOrder:r.sortOrder,showCounts:r.showCounts,lockOrder:r.lockOrder}),f(r.sortOrder),b(!0),d(!1),n&&h(n,r.filterType.value)};o.useEffect(()=>{s&&JSON.stringify(s)!==JSON.stringify(r)&&u(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=>c("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:n,onChange:t=>g(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:F.map(t=>{const p=r.sortOrder===t.value;return e.jsxs(x,{appearance:"outline",status:p?"secondary":"secondary-neutral",id:`sort-option-${t.value}`,onClick:()=>c("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"]}),w&&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(m.Toggle,{isChecked:r.showCounts,onChange:t=>c("showCounts",t),hideStatus:!0,icon:{checkedIcon:e.jsx(a.RemoveRedEyeOutlined,{className:"cursor-pointer !block text-primary-600 dark:text-primary-400 w-1.5 h-1.5"}),uncheckedIcon:e.jsx(a.VisibilityOffOutlined,{className:"cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-1.5 h-1.5"})},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(m.Toggle,{isChecked:r.lockOrder,onChange:t=>c("lockOrder",t),hideStatus:!0,withIcon:!0,icon:{checkedIcon:e.jsx(a.LockOutlined,{className:"cursor-pointer !block text-primary-600 dark:text-primary-400 w-1.5 h-1.5"}),uncheckedIcon:e.jsx(a.LockOpenRounded,{className:"cursor-pointer !block text-neutral-700 w-1.5 h-1.5"})}})})]})]})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5",children:[e.jsx(x,{id:"btn-tab-options-reset",appearance:"outline",status:"cancel",className:"w-full",onClick:N,children:"Reset"}),e.jsx(x,{id:"btn-tab-options-apply",appearance:"filled",status:"primary",className:"w-full",onClick:k,disabled:JSON.stringify(s)===JSON.stringify(r)&&n==="",children:"Apply"})]})]});return e.jsx(I.Popover,{classNames:{body:"rounded-md w-[348px] !p-0"},placement:"bottomLeft",content:O,trigger:["click"],arrow:!1,open:v,onOpenChange:d,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:()=>d(!0),children:[e.jsx(a.Tune,{sx:{height:"20px",width:"20px"}}),JSON.stringify(r)!==JSON.stringify(j.INITIAL_TAB_OPTION_CONFIG)&&e.jsx(y,{className:"text-primary-600"})]})})})},y=({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=y;exports.TabOptions=V;
 //# 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 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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"}
+{"version":3,"file":"TabOptions.cjs.js","sources":["../../../../src/components/navigation/tabs/TabOptions.tsx"],"sourcesContent":["import {\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';\nimport { FormatListBulletedIcon } from '../../icon';\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, className }: { fontSize?: number; className?: string }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\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, className }: { fontSize?: number; className?: string }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\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: <FormatListBulletedIcon className='w-icon h-icon' />,\n  },\n  {\n    label: 'A-Z',\n    value: 'asc',\n    icon: <SortAlphabetDownIcon className='w-icon h-icon' />,\n  },\n  {\n    label: 'Z-A',\n    value: 'desc',\n    icon: <SortAlphabetUpIcon className='w-icon h-icon' />,\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 className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-1.5 h-1.5\" />,\n                    uncheckedIcon: <VisibilityOffOutlined className=\"cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-1.5 h-1.5\" />,\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-1.5 h-1.5\" />,\n                  uncheckedIcon: <LockOpenRounded className=\"cursor-pointer !block text-neutral-700 w-1.5 h-1.5\" />,\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","className","jsx","SortAlphabetUpIcon","SORT_OPTIONS","FormatListBulletedIcon","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","classNames"],"mappings":"0mBAiCMA,EAAuB,CAAC,CAAE,SAAAC,EAAW,GAAI,UAAAC,CAAA,IAC7CC,EAAAA,IAAC,MAAA,CAAI,MAAOF,EAAU,OAAQA,EAAU,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAA6B,UAAAC,EACzG,SAAAC,EAAAA,IAAC,OAAA,CAAK,EAAE,mEAAmE,OAAO,eAAe,YAAY,MAAM,cAAc,QAAQ,eAAe,QAAQ,EAClK,EAGIC,EAAqB,CAAC,CAAE,SAAAH,EAAW,GAAI,UAAAC,CAAA,IAC3CC,EAAAA,IAAC,MAAA,CAAI,MAAOF,EAAU,OAAQA,EAAU,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAA6B,UAAAC,EACzG,SAAAC,EAAAA,IAAC,OAAA,CAAK,EAAE,+DAA+D,OAAO,eAAe,YAAY,MAAM,cAAc,QAAQ,eAAe,QAAQ,EAC9J,EAGIE,EAAe,CACnB,CACE,MAAO,UACP,MAAO,UACP,KAAMF,EAAAA,IAACG,EAAAA,uBAAA,CAAuB,UAAU,eAAA,CAAgB,CAAA,EAE1D,CACE,MAAO,MACP,MAAO,MACP,KAAMH,EAAAA,IAACH,EAAA,CAAqB,UAAU,eAAA,CAAgB,CAAA,EAExD,CACE,MAAO,MACP,MAAO,OACP,KAAMG,EAAAA,IAACC,EAAA,CAAmB,UAAU,eAAA,CAAgB,CAAA,CAExD,EAEaG,EAAa,CAAC,CACzB,YAAAC,EACA,cAAAC,EACA,kBAAAC,EACA,cAAAC,EACA,eAAAC,EACA,gBAAAC,EAAkB,EACpB,IAAuB,CACrB,KAAM,CAACC,EAAqBC,CAAsB,EAAIC,EAAAA,SAAS,EAAK,EAC9D,CAACC,EAAiBC,CAAkB,EAAIF,EAAAA,SAA0BG,EAAAA,yBAAyB,EAC3F,CAACC,EAAaC,CAAc,EAAIL,EAAAA,SAAS,EAAE,EAE3CM,EAAqB,CAAyCC,EAAQC,IAAuC,CACjHN,EAAoBO,IAAU,CAC5B,GAAGA,EACH,CAACF,CAAG,EAAGC,CAAA,EACP,CACJ,EAEME,EAAc,IAAM,CACxBR,EAAmB,CACjB,WAAY,CAAE,MAAO,WAAY,MAAO,UAAA,EACxC,UAAW,UACX,WAAY,GACZ,UAAW,EAAA,CACZ,EACDG,EAAe,EAAE,EACjBT,EAAe,GAAI,UAAU,CAC/B,EAEMe,EAAc,IAAM,CACxBlB,EAAc,CACZ,WAAYQ,EAAgB,WAC5B,UAAWA,EAAgB,UAC3B,WAAYA,EAAgB,WAC5B,UAAWA,EAAgB,SAAA,CAC5B,EACDN,EAAcM,EAAgB,SAA2B,EACzDP,EAAkB,EAAI,EACtBK,EAAuB,EAAK,EACxBK,GACFR,EAAeQ,EAAaH,EAAgB,WAAW,KAAK,CAEhE,EAEAW,EAAAA,UAAU,IAAM,CACVpB,GAAe,KAAK,UAAUA,CAAW,IAAM,KAAK,UAAUS,CAAe,GAC/EC,EAAmBV,CAAW,CAElC,EAAG,CAACA,CAAW,CAAC,EAEhB,MAAMqB,SACH,MAAA,CACC,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAU,gBACb,SAAA,CAAAA,EAAAA,KAAC,MAAA,CAAI,UAAU,YACb,SAAA,CAAAA,EAAAA,KAACC,EAAAA,WAAA,CAAW,KAAK,cAAc,QAAQ,UAAU,UAAU,qDAAqD,WAAW,QACzH,SAAA,CAAA5B,MAAC6B,EAAAA,QAAO,GAAI,CAAE,OAAQ,OAAQ,MAAO,QAAU,EAAE,cAAA,EACnD,EACAF,EAAAA,KAAC,MAAA,CAAI,UAAU,mCACb,SAAA,CAAA3B,EAAAA,IAAC8B,EAAAA,YAAA,CACC,WAAY,GACZ,WAAY,GACZ,MAAOhB,EAAgB,WACvB,SAAWO,GAAUF,EAAmB,aAAcE,CAAK,EAC3D,QAAS,CACP,CAAE,MAAO,WAAY,MAAO,UAAA,EAC5B,CAAE,MAAO,mBAAoB,MAAO,kBAAA,CAAmB,CACzD,CAAA,EAEFrB,EAAAA,IAAC+B,EAAAA,eAAA,CACC,GAAG,sCACH,YAAY,eACZ,MAAOd,EACP,SAAWI,GAAkBH,EAAeG,CAAK,EACjD,YAAW,EAAA,CAAA,CACb,CAAA,CACF,CAAA,EACF,EACAM,EAAAA,KAAC,MAAA,CAAI,UAAU,YACb,SAAA,CAAAA,EAAAA,KAACC,EAAAA,WAAA,CAAW,KAAK,cAAc,QAAQ,UAAU,UAAU,qDAAqD,WAAW,QACzH,SAAA,CAAA5B,MAACgC,EAAAA,kBAAiB,GAAI,CAAE,OAAQ,OAAQ,MAAO,QAAU,EAAE,OAAA,EAC7D,QACC,MAAA,CAAI,UAAU,yBACZ,SAAA9B,EAAa,IAAK+B,GAAW,CAC5B,MAAMC,EAAWpB,EAAgB,YAAcmB,EAAO,MACtD,OACEN,EAAAA,KAACQ,EAAA,CACC,WAAW,UACX,OAAQD,EAAW,YAAc,oBACjC,GAAI,eAAeD,EAAO,KAAK,GAC/B,QAAS,IAAMd,EAAmB,YAAac,EAAO,KAAmC,EACzF,UAAU,SAGT,SAAA,CAAAA,EAAO,KACPA,EAAO,KAAA,CAAA,EAHHA,EAAO,KAAA,CAMlB,CAAC,CAAA,CACH,CAAA,EACF,EACAN,EAAAA,KAAC,MAAA,CAAI,UAAU,YACb,SAAA,CAAAA,EAAAA,KAACC,EAAAA,WAAA,CAAW,KAAK,cAAc,QAAQ,UAAU,UAAU,qDAAqD,WAAW,QACzH,SAAA,CAAA5B,MAACoC,EAAAA,oBAAmB,GAAI,CAAE,OAAQ,OAAQ,MAAO,QAAU,EAAE,kBAAA,EAC/D,EACC1B,GACCiB,EAAAA,KAAC,MAAA,CAAI,UAAU,4GACb,SAAA,CAAAA,EAAAA,KAAC,MAAA,CAAI,UAAU,0BACb,SAAA,CAAA3B,EAAAA,IAAC,MAAA,CAAI,UAAU,mFACb,SAAAA,EAAAA,IAACqC,EAAAA,aAAY,GAAI,CAAE,OAAQ,OAAQ,MAAO,MAAA,EAAU,UAAU,mCAAmC,EACnG,EACAV,EAAAA,KAAC,MAAA,CAAI,UAAU,sBACb,SAAA,CAAA3B,EAAAA,IAAC4B,EAAAA,YAAW,KAAK,QAAQ,QAAQ,SAAS,WAAW,QAAQ,SAAA,aAAA,CAE7D,EACA5B,EAAAA,IAAC4B,EAAAA,YAAW,KAAK,cAAc,QAAQ,UAAU,WAAW,WAAW,SAAA,6BAAA,CAEvE,CAAA,CAAA,CACF,CAAA,EACF,EACA5B,EAAAA,IAAC,MAAA,CAAI,UAAU,gCACb,SAAAA,EAAAA,IAACsC,EAAAA,OAAA,CACC,UAAWxB,EAAgB,WAC3B,SAAWyB,GAAMpB,EAAmB,aAAcoB,CAAC,EACnD,WAAU,GACV,KAAM,CACJ,YAAavC,EAAAA,IAACwC,EAAAA,qBAAA,CAAqB,UAAU,0EAAA,CAA2E,EACxH,cAAexC,EAAAA,IAACyC,EAAAA,sBAAA,CAAsB,UAAU,0EAAA,CAA2E,CAAA,EAE7H,SAAQ,EAAA,CAAA,CACV,CACF,CAAA,EACF,EAEFd,EAAAA,KAAC,MAAA,CAAI,UAAU,4GACb,SAAA,CAAAA,EAAAA,KAAC,MAAA,CAAI,UAAU,0BACb,SAAA,CAAA3B,EAAAA,IAAC,MAAA,CAAI,UAAU,mFACb,SAAAA,EAAAA,IAAC0C,EAAAA,cAAa,GAAI,CAAE,OAAQ,OAAQ,MAAO,MAAA,EAAU,UAAU,mCAAmC,EACpG,EACAf,EAAAA,KAAC,MAAA,CAAI,UAAU,sBACb,SAAA,CAAA3B,EAAAA,IAAC4B,EAAAA,YAAW,KAAK,QAAQ,QAAQ,SAAS,WAAW,QAAQ,SAAA,YAAA,CAE7D,EACA5B,EAAAA,IAAC4B,EAAAA,YAAW,KAAK,cAAc,QAAQ,UAAU,WAAW,WAAW,SAAA,wBAAA,CAEvE,CAAA,CAAA,CACF,CAAA,EACF,EACA5B,EAAAA,IAAC,MAAA,CAAI,UAAU,gCACb,SAAAA,EAAAA,IAACsC,EAAAA,OAAA,CACC,UAAWxB,EAAgB,UAC3B,SAAWyB,GAAMpB,EAAmB,YAAaoB,CAAC,EAClD,WAAU,GACV,SAAQ,GACR,KAAM,CACJ,YAAavC,EAAAA,IAAC0C,EAAAA,aAAA,CAAa,UAAU,0EAAA,CAA2E,EAChH,cAAe1C,EAAAA,IAAC2C,EAAAA,gBAAA,CAAgB,UAAU,oDAAA,CAAqD,CAAA,CACjG,CAAA,CACF,CACF,CAAA,CAAA,CACF,CAAA,CAAA,CACF,CAAA,EACF,EACAhB,EAAAA,KAAC,MAAA,CAAI,UAAU,iFACb,SAAA,CAAA3B,EAAAA,IAACmC,EAAA,CAAO,GAAG,wBAAwB,WAAW,UAAU,OAAO,SAAS,UAAU,SAAS,QAASZ,EAAa,SAAA,QAEjH,EACAvB,EAAAA,IAACmC,EAAA,CACC,GAAG,wBACH,WAAW,SACX,OAAO,UACP,UAAU,SACV,QAASX,EACT,SAAU,KAAK,UAAUnB,CAAW,IAAM,KAAK,UAAUS,CAAe,GAAKG,IAAgB,GAC9F,SAAA,OAAA,CAAA,CAED,CAAA,CACF,CAAA,EACF,EAGF,OACEjB,EAAAA,IAAC4C,EAAAA,QAAA,CACC,WAAY,CACV,KAAM,2BAAA,EAER,UAAU,aACV,QAAAlB,EACA,QAAS,CAAC,OAAO,EACjB,MAAO,GACP,KAAMf,EACN,aAAcC,EAEd,SAAAZ,EAAAA,IAAC,MAAA,CAAI,UAAU,2DACb,SAAA2B,EAAAA,KAACkB,EAAA,CACC,QAAQ,cACR,QAAQ,QACR,UAAU,gFACV,QAAS,IAAMjC,EAAuB,EAAI,EAE1C,SAAA,CAAAZ,MAAC8C,EAAAA,MAAK,GAAI,CAAE,OAAQ,OAAQ,MAAO,QAAU,EAC5C,KAAK,UAAUhC,CAAe,IAAM,KAAK,UAAUE,2BAAyB,GAAKhB,MAAC+C,EAAA,CAAU,UAAU,kBAAA,CAAmB,CAAA,CAAA,CAAA,CAC5H,CACF,CAAA,CAAA,CAGN,EAEaA,EAAY,CAAC,CAAE,UAAAhD,KAExBC,EAAAA,IAAC,MAAA,CACC,MAAM,6BACN,MAAM,IACN,OAAO,IACP,QAAQ,UACR,KAAK,OACL,UAAWgD,EAAW,6BAA8BjD,CAAS,EAE7D,SAAAC,EAAAA,IAAC,UAAO,GAAG,IAAI,GAAG,IAAI,EAAE,IAAI,KAAK,cAAA,CAAe,CAAA,CAAA"}

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

@@ -1,77 +1,78 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-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 { Search as I, SwapVertOutlined as S, VisibilityOutlined as L, TagOutlined as M, VisibilityOffOutlined as j, RemoveRedEyeOutlined as V, LockOutlined as g, LockOpenRounded as A, Tune 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";
-import u from "../../button/Button.es.js";
+import { useState as u, useEffect as J } from "react";
+import h 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 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 = [
+import { SelectField as z } from "../../forms/select-field/SelectField.es.js";
+import { Toggle as x } from "../../forms/toggle/Toggle.es.js";
+import D from "../../button/IconButton.es.js";
+import { INITIAL_TAB_OPTION_CONFIG as b } from "./types.es.js";
+import { FormatListBulletedIcon as _ } from "../../icon/icons.generated.es.js";
+const P = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { width: a, height: a, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: s, 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, className: s }) => /* @__PURE__ */ e("svg", { width: a, height: a, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: s, 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 = [
   {
     label: "Default",
     value: "default",
-    icon: /* @__PURE__ */ e(B, { sx: { height: "14px", width: "14px" } })
+    icon: /* @__PURE__ */ e(_, { className: "w-icon h-icon" })
   },
   {
     label: "A-Z",
     value: "asc",
-    icon: /* @__PURE__ */ e(P, { fontSize: 24 })
+    icon: /* @__PURE__ */ e(P, { className: "w-icon h-icon" })
   },
   {
     label: "Z-A",
     value: "desc",
-    icon: /* @__PURE__ */ e(E, { fontSize: 24 })
+    icon: /* @__PURE__ */ e(E, { className: "w-icon h-icon" })
   }
-], le = ({
+], ie = ({
   savedConfig: a,
-  onApplyFilter: b,
+  onApplyFilter: s,
   setUnsavedChanges: w,
   handleTabSort: v,
-  onSearchChange: h,
-  hasSuffixRecord: k = !1
+  onSearchChange: m,
+  hasSuffixRecord: N = !1
 }) => {
-  const [y, o] = p(!1), [l, c] = p(g), [s, m] = p(""), n = (r, d) => {
-    c((T) => ({
+  const [k, c] = u(!1), [l, d] = u(b), [n, f] = u(""), o = (r, p) => {
+    d((T) => ({
       ...T,
-      [r]: d
+      [r]: p
     }));
-  }, N = () => {
-    c({
+  }, y = () => {
+    d({
       filterType: { label: "Contains", value: "contains" },
       sortOrder: "default",
       showCounts: !0,
       lockOrder: !1
-    }), m(""), h("", "contains");
+    }), f(""), m("", "contains");
   }, O = () => {
-    b({
+    s({
       filterType: l.filterType,
       sortOrder: l.sortOrder,
       showCounts: l.showCounts,
       lockOrder: l.lockOrder
-    }), v(l.sortOrder), w(!0), o(!1), s && h(s, l.filterType.value);
+    }), v(l.sortOrder), w(!0), c(!1), n && m(n, l.filterType.value);
   };
   J(() => {
-    a && JSON.stringify(a) !== JSON.stringify(l) && c(a);
+    a && JSON.stringify(a) !== JSON.stringify(l) && d(a);
   }, [a]);
   const C = /* @__PURE__ */ t("div", { children: [
     /* @__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(S, { sx: { height: "14px", width: "14px" } }),
+          /* @__PURE__ */ e(I, { sx: { height: "14px", width: "14px" } }),
           " Filter Tabs"
         ] }),
         /* @__PURE__ */ t("div", { className: "grid grid-cols-[150px_3fr] gap-2", children: [
           /* @__PURE__ */ e(
-            D,
+            z,
             {
               showSearch: !1,
               allowClear: !1,
               value: l.filterType,
-              onChange: (r) => n("filterType", r),
+              onChange: (r) => o("filterType", r),
               options: [
                 { label: "Contains", value: "contains" },
                 { label: "Does not contain", value: "does-not-contain" }
@@ -83,8 +84,8 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
             {
               id: "base-input-field-tab-options-filter",
               placeholder: "Insert value",
-              value: s,
-              onChange: (r) => m(r),
+              value: n,
+              onChange: (r) => f(r),
               isClearable: !0
             }
           )
@@ -92,18 +93,18 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
       ] }),
       /* @__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(I, { sx: { height: "14px", width: "14px" } }),
+          /* @__PURE__ */ e(S, { sx: { height: "14px", width: "14px" } }),
           " Sort"
         ] }),
         /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-2", children: W.map((r) => {
-          const d = l.sortOrder === r.value;
+          const p = l.sortOrder === r.value;
           return /* @__PURE__ */ t(
-            u,
+            h,
             {
               appearance: "outline",
-              status: d ? "secondary" : "secondary-neutral",
+              status: p ? "secondary" : "secondary-neutral",
               id: `sort-option-${r.value}`,
-              onClick: () => n("sortOrder", r.value),
+              onClick: () => o("sortOrder", r.value),
               className: "w-full",
               children: [
                 r.icon,
@@ -119,7 +120,7 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
           /* @__PURE__ */ e(L, { sx: { height: "14px", width: "14px" } }),
           " Display Options"
         ] }),
-        k && /* @__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: [
+        N && /* @__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(M, { sx: { height: "16px", width: "16px" }, className: "text-neutral-800 dark:text-white" }) }),
             /* @__PURE__ */ t("div", { className: "flex flex-col gap-0", children: [
@@ -128,14 +129,14 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
             ] })
           ] }),
           /* @__PURE__ */ e("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ e(
-            f,
+            x,
             {
               isChecked: l.showCounts,
-              onChange: (r) => n("showCounts", r),
+              onChange: (r) => o("showCounts", r),
               hideStatus: !0,
               icon: {
-                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" })
+                checkedIcon: /* @__PURE__ */ e(V, { className: "cursor-pointer !block text-primary-600 dark:text-primary-400 w-1.5 h-1.5" }),
+                uncheckedIcon: /* @__PURE__ */ e(j, { className: "cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-1.5 h-1.5" })
               },
               withIcon: !0
             }
@@ -143,22 +144,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(x, { 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(g, { 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(
-            f,
+            x,
             {
               isChecked: l.lockOrder,
-              onChange: (r) => n("lockOrder", r),
+              onChange: (r) => o("lockOrder", r),
               hideStatus: !0,
               withIcon: !0,
               icon: {
-                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" })
+                checkedIcon: /* @__PURE__ */ e(g, { className: "cursor-pointer !block text-primary-600 dark:text-primary-400 w-1.5 h-1.5" }),
+                uncheckedIcon: /* @__PURE__ */ e(A, { className: "cursor-pointer !block text-neutral-700 w-1.5 h-1.5" })
               }
             }
           ) })
@@ -166,16 +167,16 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
       ] })
     ] }),
     /* @__PURE__ */ t("div", { className: "grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5", children: [
-      /* @__PURE__ */ e(u, { id: "btn-tab-options-reset", appearance: "outline", status: "cancel", className: "w-full", onClick: N, children: "Reset" }),
+      /* @__PURE__ */ e(h, { id: "btn-tab-options-reset", appearance: "outline", status: "cancel", className: "w-full", onClick: y, children: "Reset" }),
       /* @__PURE__ */ e(
-        u,
+        h,
         {
           id: "btn-tab-options-apply",
           appearance: "filled",
           status: "primary",
           className: "w-full",
           onClick: O,
-          disabled: JSON.stringify(a) === JSON.stringify(l) && s === "",
+          disabled: JSON.stringify(a) === JSON.stringify(l) && n === "",
           children: "Apply"
         }
       )
@@ -191,18 +192,18 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
       content: C,
       trigger: ["click"],
       arrow: !1,
-      open: y,
-      onOpenChange: o,
+      open: k,
+      onOpenChange: c,
       children: /* @__PURE__ */ e("div", { className: "border-l border-neutral-200 dark:border-neutral-800 pl-2", children: /* @__PURE__ */ t(
-        _,
+        D,
         {
           tooltip: "Manage Tabs",
           variant: "ghost",
           className: "!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative",
-          onClick: () => o(!0),
+          onClick: () => c(!0),
           children: [
-            /* @__PURE__ */ e(A, { sx: { height: "20px", width: "20px" } }),
-            JSON.stringify(l) !== JSON.stringify(g) && /* @__PURE__ */ e(Z, { className: "text-primary-600" })
+            /* @__PURE__ */ e(B, { sx: { height: "20px", width: "20px" } }),
+            JSON.stringify(l) !== JSON.stringify(b) && /* @__PURE__ */ e(Z, { className: "text-primary-600" })
           ]
         }
       ) })
@@ -222,6 +223,6 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
 );
 export {
   Z as Indicator,
-  le as TabOptions
+  ie as TabOptions
 };
 //# sourceMappingURL=TabOptions.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabOptions.es.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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"}
+{"version":3,"file":"TabOptions.es.js","sources":["../../../../src/components/navigation/tabs/TabOptions.tsx"],"sourcesContent":["import {\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';\nimport { FormatListBulletedIcon } from '../../icon';\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, className }: { fontSize?: number; className?: string }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\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, className }: { fontSize?: number; className?: string }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\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: <FormatListBulletedIcon className='w-icon h-icon' />,\n  },\n  {\n    label: 'A-Z',\n    value: 'asc',\n    icon: <SortAlphabetDownIcon className='w-icon h-icon' />,\n  },\n  {\n    label: 'Z-A',\n    value: 'desc',\n    icon: <SortAlphabetUpIcon className='w-icon h-icon' />,\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 className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-1.5 h-1.5\" />,\n                    uncheckedIcon: <VisibilityOffOutlined className=\"cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-1.5 h-1.5\" />,\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-1.5 h-1.5\" />,\n                  uncheckedIcon: <LockOpenRounded className=\"cursor-pointer !block text-neutral-700 w-1.5 h-1.5\" />,\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","className","jsx","SortAlphabetUpIcon","SORT_OPTIONS","FormatListBulletedIcon","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","classNames"],"mappings":"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"}

package/package.json

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