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

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

@@ -1,10 +1,10 @@
-"use strict";const e=require("react/jsx-runtime"),K=require("antd");require("antd/es/menu/interface");const a=require("react"),O=require("../tooltip/Tooltip.cjs.js"),u=require("../../hooks/useOS.cjs.js"),$=require("@mui/icons-material"),D=require("../icon/icons.generated.cjs.js"),y=a.forwardRef(({status:r="primary",appearance:n,className:m,disabled:d,children:k,isLoading:c,title:v,id:h,onClick:_,onKeyDown:w,badge:s,type:l="button",options:b,tooltip:f,tooltipPlacement:j="top",shortcuts:p,tooltipShortcuts:C,theme:o="light",autoFocus:F},S)=>{const q=a.useCallback(()=>{switch(n){case"outline":return R();case"ghost":return z();case"dashed":return E();default:return N()}},[n,r,d,o]),N=a.useCallback(()=>{switch(r){case"primary":return"bg-primary-600 text-white focus:border-primary-200 hover:bg-primary-700 disabled:opacity-60";case"secondary":return"bg-primary-50 dark:bg-black-800 text-primary-600 dark:hover:text-primary-400 border border-primary-200 dark:border-primary-600 hover:bg-primary-100 dark:hover:bg-black-800 focus:border-primary-200 hover:border-primary-200 dark:hover:border-primary-400 disabled:opacity-60";case"error":return"bg-error-600 dark:bg-error-500 text-white hover:bg-error-700 dark:hover:bg-error-600 focus:!border-error-300 dark:focus:!border-error-600 dark:focus:bg-error-800 disabled:opacity-60";case"error-secondary":return"bg-error-100 dark:bg-black-800 text-error-600 border !border-error-300 dark:!border-error-900 hover:bg-error-200 focus:!border-error-300 dark:focus:!border-error-400 disabled:opacity-60";case"secondary-neutral":return"bg-white dark:bg-black-800 text-neutral-900 border border-neutral-300 dark:border-black-600 dark:hover:bg-black-600 dark:text-black-200 hover:bg-neutral-100 focus:border-primary-200 disabled:opacity-60";case"warning":return"bg-warning-300 dark:bg-warning-600 text-white border-warning-300 border hover:bg-warning-400 disabled:opacity-60";case"success":return"bg-success-600 text-white border-success-600 border hover:bg-success-700 disabled:opacity-60";case"publish":return"bg-teal-800 text-white border-teal-800 border hover:bg-teal-900 disabled:opacity-60";case"no-background":return"bg-transparent text-neutral-900 dark:text-black-100 border-transparent border";default:return"bg-white dark:bg-black-800 text-neutral-900 dark:text-white border-white border hover:bg-neutral-100 dark:hover:bg-black-600 disabled:opacity-60"}},[r,d,o]),R=a.useCallback(()=>{switch(r){case"primary":return"text-primary-700 dark:text-primary-600 border-primary-700 border dark:border-primary-600 hover:bg-primary-100 disabled:opacity-60";case"secondary":return"text-primary-700 dark:text-primary-600 border-primary-100 dark:border-primary-600 border bg-primary-50 dark:bg-black-800 hover:bg-primary-100 disabled:opacity-60";case"secondary-neutral":return"text-neutral-900 dark:text-white border-neutral-300 dark:border-neutral-700 border bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-600 disabled:opacity-60";case"error":return"text-error-600 dark:text-error-500 !border-error-600 dark:!border-error-500 border hover:bg-[#FEF3F2] disabled:opacity-60";case"warning":return"text-warning-300 dark:text-warning-500 border-warning-300 dark:border-warning-500 border hover:bg-[#FFFAEB] disabled:opacity-60";case"success":return"text-success-600 dark:text-success-500 border-success-600 dark:border-success-500 border hover:bg-[#ECFDF3] disabled:opacity-60";default:return"bg-white dark:bg-black-800 text-neutral-900 dark:text-white border-neutral-300 dark:border-neutral-700 border hover:bg-neutral-100 dark:hover:bg-black-600 disabled:opacity-60"}},[r,o]),z=a.useCallback(()=>{switch(r){case"primary":return"text-primary-700 dark:text-primary-600 border border-transparent dark:border-transparent hover:text-primary-700 disabled:opacity-60";case"secondary":return"text-primary-50 dark:text-primary-900 border border-transparent dark:border-transparent hover:text-primary-100 disabled:opacity-60";case"error":return"text-error-600 dark:text-error-500 border border-transparent dark:border-transparent hover:text-error-600 disabled:opacity-60";case"warning":return"text-warning-300 dark:text-warning-500 border border-transparent dark:border-transparent hover:text-warning-400 disabled:opacity-60";case"success":return"text-success-600 dark:text-success-500 border border-transparent dark:border-transparent hover:text-success-700 disabled:opacity-60";default:return"text-neutral-900 dark:text-white border border-transparent dark:border-transparent hover:text-[#667085] disabled:opacity-60"}},[r,o]),E=a.useCallback(()=>{switch(r){case"primary":return"bg-primary-50 dark:bg-black-700 text-primary-600 dark:text-primary-600 disabled:text-primary-100 hover:bg-primary-100 dark:hover:bg-black-600 [background-repeat:no-repeat] [background-size:1px_100%,100%_1px,1px_100%,100%_1px] [background-position:0_0,0_0,100%_0,0_100%] [background-image:repeating-linear-gradient(3deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(93deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(183deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(273deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px)] dark:[background-image:repeating-linear-gradient(3deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(93deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(183deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(273deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px)]";default:return"bg-primary-50 dark:bg-black-700 text-primary-600 dark:text-primary-600 disabled:text-primary-100 hover:bg-primary-100 dark:hover:bg-black-600 [background-repeat:no-repeat] [background-size:1px_100%,100%_1px,1px_100%,100%_1px] [background-position:0_0,0_0,100%_0,0_100%] [background-image:repeating-linear-gradient(3deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(93deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(183deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(273deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px)] dark:[background-image:repeating-linear-gradient(3deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(93deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(183deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(273deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px)]"}},[r,o]),T=a.useCallback(()=>{if(!n||n==="filled")switch(r){case"primary":return"bg-primary-700 text-primary-100";case"secondary":return"bg-primary-100 text-primary-700 dark:bg-black-700 dark:text-primary-400";case"secondary-neutral":return"bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-black-300";case"error":return"bg-error-700 text-error-100 dark:bg-error-600 dark:text-error-100";case"error-secondary":return"bg-error-200 text-error-700 dark:bg-black-700 dark:text-error-400";case"warning":return"bg-warning-400 text-white dark:bg-warning-700 dark:text-warning-100";case"success":return"bg-success-700 text-success-100";case"publish":return"bg-teal-900 text-teal-200";case"no-background":return"bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-neutral-400";default:return"bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-neutral-400"}switch(r){case"primary":case"secondary":return"bg-primary-100 text-primary-800 dark:bg-primary-950 dark:text-primary-400";case"error":case"error-secondary":return"bg-error-100 text-error-700 dark:bg-error-950 dark:text-error-400";case"warning":return"bg-warning-100 text-warning-700 dark:bg-warning-950 dark:text-warning-400";case"success":return"bg-success-100 text-success-700 dark:bg-success-950 dark:text-success-400";default:return"bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-neutral-400"}},[r,n]),g=u.useOS(),x=a.useMemo(()=>p?.length?p.map(t=>{const i=u.SHORTCUT_KEY_MAP[t];return i?g==="macos"?i.macos:i.other:t}):[],[p,g]),A=()=>e.jsx(e.Fragment,{children:e.jsx(D.LoadingSpinnerIcon,{size:20,className:"inline mr-2 text-white dark:text-white"})}),B=l||(r==="primary"&&n==="filled"?"submit":l);return e.jsx(O,{title:f,placement:j,shortcuts:C,delayShow:!0,children:e.jsxs("button",{ref:S,className:`
+"use strict";const e=require("react/jsx-runtime"),K=require("antd");require("antd/es/menu/interface");const a=require("react"),O=require("../tooltip/Tooltip.cjs.js"),u=require("../../hooks/useOS.cjs.js"),$=require("@mui/icons-material"),D=require("../icon/icons.generated.cjs.js"),y=a.forwardRef(({status:r="primary",appearance:n,className:m,disabled:d,children:k,isLoading:c,title:v,id:h,onClick:_,onKeyDown:w,badge:s,type:l="button",options:b,tooltip:f,tooltipPlacement:j="top",shortcuts:p,tooltipShortcuts:C,theme:o="light",autoFocus:F},S)=>{const q=a.useCallback(()=>{switch(n){case"outline":return R();case"ghost":return E();case"dashed":return T();default:return N()}},[n,r,d,o]),N=a.useCallback(()=>{switch(r){case"primary":return"bg-primary-600 text-white border border-transparent focus:border-primary-200 hover:bg-primary-700 disabled:opacity-60";case"secondary":return"bg-primary-50 dark:bg-black-800 text-primary-600 dark:hover:text-primary-400 border border-primary-200 dark:border-primary-600 hover:bg-primary-100 dark:hover:bg-black-800 focus:border-primary-200 hover:border-primary-200 dark:hover:border-primary-400 disabled:opacity-60";case"error":return"bg-error-600 dark:bg-error-500 text-white border border-transparent hover:bg-error-700 dark:hover:bg-error-600 focus:!border-error-300 dark:focus:!border-error-600 dark:focus:bg-error-800 disabled:opacity-60";case"error-secondary":return"bg-error-100 dark:bg-black-800 text-error-600 border !border-error-300 dark:!border-error-900 hover:bg-error-200 focus:!border-error-300 dark:focus:!border-error-400 disabled:opacity-60";case"secondary-neutral":return"bg-white dark:bg-black-800 text-neutral-900 border border-neutral-300 dark:border-black-600 dark:hover:bg-black-600 dark:text-black-200 hover:bg-neutral-100 focus:border-primary-200 disabled:opacity-60";case"warning":return"bg-warning-300 dark:bg-warning-600 text-white border-warning-300 border hover:bg-warning-400 disabled:opacity-60";case"success":return"bg-success-600 text-white border-success-600 border hover:bg-success-700 disabled:opacity-60";case"publish":return"bg-teal-800 text-white border-teal-800 border hover:bg-teal-900 disabled:opacity-60";case"no-background":return"bg-transparent text-neutral-900 dark:text-black-100 border-transparent border";default:return"bg-white dark:bg-black-800 text-neutral-900 dark:text-white border-white border hover:bg-neutral-100 dark:hover:bg-black-600 disabled:opacity-60"}},[r,d,o]),R=a.useCallback(()=>{switch(r){case"primary":return"text-primary-700 dark:text-primary-600 border-primary-700 border dark:border-primary-600 hover:bg-primary-100 disabled:opacity-60";case"secondary":return"text-primary-700 dark:text-primary-600 border-primary-100 dark:border-primary-600 border bg-primary-50 dark:bg-black-800 hover:bg-primary-100 disabled:opacity-60";case"secondary-neutral":return"text-neutral-900 dark:text-white border-neutral-300 dark:border-neutral-700 border bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-600 disabled:opacity-60";case"error":return"text-error-600 dark:text-error-500 !border-error-600 dark:!border-error-500 border hover:bg-[#FEF3F2] disabled:opacity-60";case"warning":return"text-warning-300 dark:text-warning-500 border-warning-300 dark:border-warning-500 border hover:bg-[#FFFAEB] disabled:opacity-60";case"success":return"text-success-600 dark:text-success-500 border-success-600 dark:border-success-500 border hover:bg-[#ECFDF3] disabled:opacity-60";default:return"bg-white dark:bg-black-800 text-neutral-900 dark:text-white border-neutral-300 dark:border-neutral-700 border hover:bg-neutral-100 dark:hover:bg-black-600 disabled:opacity-60"}},[r,o]),E=a.useCallback(()=>{switch(r){case"primary":return"text-primary-700 dark:text-primary-600 border border-transparent dark:border-transparent hover:text-primary-700 disabled:opacity-60";case"secondary":return"text-primary-50 dark:text-primary-900 border border-transparent dark:border-transparent hover:text-primary-100 disabled:opacity-60";case"error":return"text-error-600 dark:text-error-500 border border-transparent dark:border-transparent hover:text-error-600 disabled:opacity-60";case"warning":return"text-warning-300 dark:text-warning-500 border border-transparent dark:border-transparent hover:text-warning-400 disabled:opacity-60";case"success":return"text-success-600 dark:text-success-500 border border-transparent dark:border-transparent hover:text-success-700 disabled:opacity-60";default:return"text-neutral-900 dark:text-white border border-transparent dark:border-transparent hover:text-[#667085] disabled:opacity-60"}},[r,o]),T=a.useCallback(()=>{switch(r){case"primary":return"bg-primary-50 dark:bg-black-700 text-primary-600 dark:text-primary-600 disabled:text-primary-100 hover:bg-primary-100 dark:hover:bg-black-600 [background-repeat:no-repeat] [background-size:1px_100%,100%_1px,1px_100%,100%_1px] [background-position:0_0,0_0,100%_0,0_100%] [background-image:repeating-linear-gradient(3deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(93deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(183deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(273deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px)] dark:[background-image:repeating-linear-gradient(3deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(93deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(183deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(273deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px)]";default:return"bg-primary-50 dark:bg-black-700 text-primary-600 dark:text-primary-600 disabled:text-primary-100 hover:bg-primary-100 dark:hover:bg-black-600 [background-repeat:no-repeat] [background-size:1px_100%,100%_1px,1px_100%,100%_1px] [background-position:0_0,0_0,100%_0,0_100%] [background-image:repeating-linear-gradient(3deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(93deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(183deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(273deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px)] dark:[background-image:repeating-linear-gradient(3deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(93deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(183deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(273deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px)]"}},[r,o]),z=a.useCallback(()=>{if(!n||n==="filled")switch(r){case"primary":return"bg-primary-700 text-primary-100";case"secondary":return"bg-primary-100 text-primary-700 dark:bg-black-700 dark:text-primary-400";case"secondary-neutral":return"bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-black-300";case"error":return"bg-error-700 text-error-100 dark:bg-error-600 dark:text-error-100";case"error-secondary":return"bg-error-200 text-error-700 dark:bg-black-700 dark:text-error-400";case"warning":return"bg-warning-400 text-white dark:bg-warning-700 dark:text-warning-100";case"success":return"bg-success-700 text-success-100";case"publish":return"bg-teal-900 text-teal-200";case"no-background":return"bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-neutral-400";default:return"bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-neutral-400"}switch(r){case"primary":case"secondary":return"bg-primary-100 text-primary-800 dark:bg-primary-950 dark:text-primary-400";case"error":case"error-secondary":return"bg-error-100 text-error-700 dark:bg-error-950 dark:text-error-400";case"warning":return"bg-warning-100 text-warning-700 dark:bg-warning-950 dark:text-warning-400";case"success":return"bg-success-100 text-success-700 dark:bg-success-950 dark:text-success-400";default:return"bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-neutral-400"}},[r,n]),g=u.useOS(),x=a.useMemo(()=>p?.length?p.map(t=>{const i=u.SHORTCUT_KEY_MAP[t];return i?g==="macos"?i.macos:i.other:t}):[],[p,g]),A=()=>e.jsx(e.Fragment,{children:e.jsx(D.LoadingSpinnerIcon,{className:"inline mr-2 text-white dark:text-white w-5 h-5"})}),B=l||(r==="primary"&&n==="filled"?"submit":l);return e.jsx(O,{title:f,placement:j,shortcuts:C,delayShow:!0,children:e.jsxs("button",{ref:S,className:`
         ${m||""}
         cursor-pointer
         font-inter 
         font-medium 
-        py-[6px] 
-        px-3 
+        py-1.5
+        px-2.5
         rounded-lg 
         text-sm
         whitespace-nowrap
@@ -14,7 +14,7 @@
         justify-center
         gap-1.5
         relative
-        max-h-[32px]
+        max-h-8
          ${q()}
-      `,disabled:d||c,id:h,onClick:_,onKeyDown:w,title:v,type:B,autoFocus:F,children:[c&&A(),k,x.length>0?e.jsx("span",{className:"inline-flex items-center gap-0.5 ml-1 flex-shrink-0",children:x.map((t,i)=>e.jsx("kbd",{className:`inline-flex items-center justify-center min-w-[20px] h-5 px-1 rounded text-[11px] font-medium leading-none ${T()}`,children:t},i))}):null,b?.length?e.jsx("div",{onClick:t=>t.stopPropagation(),children:e.jsx(K.Dropdown,{menu:{items:b},trigger:["click"],overlayClassName:"row-option-cell",placement:"bottomRight",children:e.jsx($.ChevronRightRounded,{className:"rotate-90 text-neutral-300 hover:opacity-50"})})}):null,s?e.jsx("span",{className:"absolute -top-2 -right-2 bg-zinc-500 text-white rounded-full min-w-[1.5rem] min-h-[1.5rem] text-xs flex justify-center items-center",children:s}):null]})})});y.displayName="Button";module.exports=y;
+      `,disabled:d||c,id:h,onClick:_,onKeyDown:w,title:v,type:B,autoFocus:F,children:[c&&A(),k,x.length>0?e.jsx("span",{className:"inline-flex items-center gap-0.5 ml-1 flex-shrink-0",children:x.map((t,i)=>e.jsx("kbd",{className:`inline-flex items-center justify-center min-w-5 h-5 px-1 rounded text-xs font-medium leading-none ${z()}`,children:t},i))}):null,b?.length?e.jsx("div",{onClick:t=>t.stopPropagation(),children:e.jsx(K.Dropdown,{menu:{items:b},trigger:["click"],overlayClassName:"row-option-cell",placement:"bottomRight",children:e.jsx($.ChevronRightRounded,{className:"rotate-90 text-neutral-300 hover:opacity-50"})})}):null,s?e.jsx("span",{className:"absolute -top-2 -right-2 bg-zinc-500 text-white rounded-full min-w-6 min-h-6 text-xs flex justify-center items-center",children:s}):null]})})});y.displayName="Button";module.exports=y;
 //# sourceMappingURL=Button.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import { Dropdown } from 'antd';\nimport { type ItemType } from 'antd/es/menu/interface';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport Tooltip from '../tooltip/Tooltip';\nimport { useOS, SHORTCUT_KEY_MAP } from '../../hooks/useOS';\nimport { ChevronRightRounded } from '@mui/icons-material';\nimport { LoadingSpinnerIcon } from '../icon';\n\nexport interface IButtonProps {\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  isLoading?: boolean;\n  primary?: boolean;\n  title?: string;\n  id: string;\n  status?: IButtonStatus;\n  appearance?: IButtonAppearance;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;\n  badge?: string | number;\n  type?: 'button' | 'submit' | 'reset';\n  options?: ItemType[];\n  tooltip?: string;\n  autoFocus?: boolean;\n  tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';\n  /** Array of keyboard shortcut keys to display inline in the button (e.g., ['Meta', 'S'] or ['Ctrl', 'Enter']) */\n  shortcuts?: string[];\n  /** Array of keyboard shortcut keys to display in the tooltip (e.g., ['Meta', 'S']). Falls back to shortcuts if not provided. */\n  tooltipShortcuts?: string[];\n  theme?: 'light' | 'dark';\n}\n\nexport type IButtonStatus =\n  | 'secondary-neutral'\n  | 'primary'\n  | 'secondary'\n  | 'error'\n  | 'warning'\n  | 'success'\n  | 'error-secondary'\n  | 'cancel'\n  | 'no-background'\n  | 'publish'\n  | 'default';\n\nexport type IButtonAppearance = 'filled' | 'outline' | 'ghost' | 'dashed';\n\nconst Button = forwardRef<HTMLButtonElement, IButtonProps>(({\n  status = 'primary',\n  appearance,\n  className,\n  disabled,\n  children,\n  isLoading,\n  title,\n  id,\n  onClick,\n  onKeyDown,\n  badge,\n  type = 'button',\n  options,\n  tooltip,\n  tooltipPlacement = 'top',\n  shortcuts,\n  tooltipShortcuts,\n  theme = 'light',\n  autoFocus,\n}, ref) => {\n\n  const appearanceStyle = useCallback(() => {\n    switch (appearance) {\n      case 'outline':\n        return outlineStyle();\n      case 'ghost':\n        return ghostStyle();\n      case 'dashed':\n        return dashedStyle();\n      default:\n        return filledStyle();\n    }\n  }, [appearance, status, disabled, theme]);\n\n  const filledStyle = useCallback(() => {\n    switch (status) {\n      case 'primary':\n        return 'bg-primary-600 text-white focus:border-primary-200 hover:bg-primary-700 disabled:opacity-60';\n\n      case 'secondary':\n        return 'bg-primary-50 dark:bg-black-800 text-primary-600 dark:hover:text-primary-400 border border-primary-200 dark:border-primary-600 hover:bg-primary-100 dark:hover:bg-black-800 focus:border-primary-200 hover:border-primary-200 dark:hover:border-primary-400 disabled:opacity-60';\n\n      case 'error':\n        return 'bg-error-600 dark:bg-error-500 text-white hover:bg-error-700 dark:hover:bg-error-600 focus:!border-error-300 dark:focus:!border-error-600 dark:focus:bg-error-800 disabled:opacity-60';\n\n      case 'error-secondary':\n        return 'bg-error-100 dark:bg-black-800 text-error-600 border !border-error-300 dark:!border-error-900 hover:bg-error-200 focus:!border-error-300 dark:focus:!border-error-400 disabled:opacity-60';\n\n      case 'secondary-neutral':\n        return 'bg-white dark:bg-black-800 text-neutral-900 border border-neutral-300 dark:border-black-600 dark:hover:bg-black-600 dark:text-black-200 hover:bg-neutral-100 focus:border-primary-200 disabled:opacity-60';\n\n      case 'warning':\n        return 'bg-warning-300 dark:bg-warning-600 text-white border-warning-300 border hover:bg-warning-400 disabled:opacity-60';\n\n      case 'success':\n        return 'bg-success-600 text-white border-success-600 border hover:bg-success-700 disabled:opacity-60';\n\n      case 'publish':\n        return 'bg-teal-800 text-white border-teal-800 border hover:bg-teal-900 disabled:opacity-60';\n\n      case 'no-background':\n        return 'bg-transparent text-neutral-900 dark:text-black-100 border-transparent border';\n\n      default:\n        return 'bg-white dark:bg-black-800 text-neutral-900 dark:text-white border-white border hover:bg-neutral-100 dark:hover:bg-black-600 disabled:opacity-60';\n    }\n  }, [status, disabled, theme]);\n\n  const outlineStyle = useCallback(() => {\n    switch (status) {\n      case 'primary':\n        return 'text-primary-700 dark:text-primary-600 border-primary-700 border dark:border-primary-600 hover:bg-primary-100 disabled:opacity-60';\n\n      case 'secondary':\n        return 'text-primary-700 dark:text-primary-600 border-primary-100 dark:border-primary-600 border bg-primary-50 dark:bg-black-800 hover:bg-primary-100 disabled:opacity-60';\n\n      case 'secondary-neutral':\n        return 'text-neutral-900 dark:text-white border-neutral-300 dark:border-neutral-700 border bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-600 disabled:opacity-60';\n\n      case 'error':\n        return 'text-error-600 dark:text-error-500 !border-error-600 dark:!border-error-500 border hover:bg-[#FEF3F2] disabled:opacity-60';\n\n      case 'warning':\n        return 'text-warning-300 dark:text-warning-500 border-warning-300 dark:border-warning-500 border hover:bg-[#FFFAEB] disabled:opacity-60';\n\n      case 'success':\n        return 'text-success-600 dark:text-success-500 border-success-600 dark:border-success-500 border hover:bg-[#ECFDF3] disabled:opacity-60';\n\n      default:\n        return 'bg-white dark:bg-black-800 text-neutral-900 dark:text-white border-neutral-300 dark:border-neutral-700 border hover:bg-neutral-100 dark:hover:bg-black-600 disabled:opacity-60';\n    }\n  }, [status, theme]);\n\n  const ghostStyle = useCallback(() => {\n    switch (status) {\n      case 'primary':\n        return 'text-primary-700 dark:text-primary-600 border border-transparent dark:border-transparent hover:text-primary-700 disabled:opacity-60';\n\n      case 'secondary':\n        return 'text-primary-50 dark:text-primary-900 border border-transparent dark:border-transparent hover:text-primary-100 disabled:opacity-60';\n\n      case 'error':\n        return 'text-error-600 dark:text-error-500 border border-transparent dark:border-transparent hover:text-error-600 disabled:opacity-60';\n\n      case 'warning':\n        return 'text-warning-300 dark:text-warning-500 border border-transparent dark:border-transparent hover:text-warning-400 disabled:opacity-60';\n\n      case 'success':\n        return 'text-success-600 dark:text-success-500 border border-transparent dark:border-transparent hover:text-success-700 disabled:opacity-60';\n\n      default:\n        return 'text-neutral-900 dark:text-white border border-transparent dark:border-transparent hover:text-[#667085] disabled:opacity-60';\n    }\n  }, [status, theme]);\n\n  const dashedStyle = useCallback(() => {\n    switch (status) {\n      case 'primary':\n        return 'bg-primary-50 dark:bg-black-700 text-primary-600 dark:text-primary-600 disabled:text-primary-100 hover:bg-primary-100 dark:hover:bg-black-600 [background-repeat:no-repeat] [background-size:1px_100%,100%_1px,1px_100%,100%_1px] [background-position:0_0,0_0,100%_0,0_100%] [background-image:repeating-linear-gradient(3deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(93deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(183deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(273deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px)] dark:[background-image:repeating-linear-gradient(3deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(93deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(183deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(273deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px)]';\n      default:\n        return 'bg-primary-50 dark:bg-black-700 text-primary-600 dark:text-primary-600 disabled:text-primary-100 hover:bg-primary-100 dark:hover:bg-black-600 [background-repeat:no-repeat] [background-size:1px_100%,100%_1px,1px_100%,100%_1px] [background-position:0_0,0_0,100%_0,0_100%] [background-image:repeating-linear-gradient(3deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(93deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(183deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(273deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px)] dark:[background-image:repeating-linear-gradient(3deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(93deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(183deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(273deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px)]';\n    }\n  }, [status, theme]);\n\n  /**\n   * Returns Tailwind classes for inline <kbd> elements that adapt to the button's status and appearance.\n   * Uses a subtle/muted approach � slightly deeper shade of the button's own color.\n   */\n  const getKbdClasses = useCallback((): string => {\n    const isFilled = !appearance || appearance === 'filled';\n\n    if (isFilled) {\n      switch (status) {\n        case 'primary':\n          return 'bg-primary-700 text-primary-100';\n        case 'secondary':\n          return 'bg-primary-100 text-primary-700 dark:bg-black-700 dark:text-primary-400';\n        case 'secondary-neutral':\n          return 'bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-black-300';\n        case 'error':\n          return 'bg-error-700 text-error-100 dark:bg-error-600 dark:text-error-100';\n        case 'error-secondary':\n          return 'bg-error-200 text-error-700 dark:bg-black-700 dark:text-error-400';\n        case 'warning':\n          return 'bg-warning-400 text-white dark:bg-warning-700 dark:text-warning-100';\n        case 'success':\n          return 'bg-success-700 text-success-100';\n        case 'publish':\n          return 'bg-teal-900 text-teal-200';\n        case 'no-background':\n          return 'bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-neutral-400';\n        default:\n          return 'bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-neutral-400';\n      }\n    }\n\n    // outline, ghost, dashed � colored text on transparent/light bg\n    switch (status) {\n      case 'primary':\n      case 'secondary':\n        return 'bg-primary-100 text-primary-800 dark:bg-primary-950 dark:text-primary-400';\n      case 'error':\n      case 'error-secondary':\n        return 'bg-error-100 text-error-700 dark:bg-error-950 dark:text-error-400';\n      case 'warning':\n        return 'bg-warning-100 text-warning-700 dark:bg-warning-950 dark:text-warning-400';\n      case 'success':\n        return 'bg-success-100 text-success-700 dark:bg-success-950 dark:text-success-400';\n      default:\n        return 'bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-neutral-400';\n    }\n  }, [status, appearance]);\n\n  const os = useOS();\n  const displayKeys = useMemo(() => {\n    if (!shortcuts?.length) return [];\n    return shortcuts.map((key) => {\n      const mapping = SHORTCUT_KEY_MAP[key];\n      if (mapping) {\n        return os === 'macos' ? mapping.macos : mapping.other;\n      }\n      return key;\n    });\n  }, [shortcuts, os]);\n\n  const renderSpinner = () => (\n    <>\n      <LoadingSpinnerIcon size={20} className='inline mr-2 text-white dark:text-white' />\n    </>\n  );\n\n  const buttonType = type || ((status === 'primary' && appearance === 'filled') ? 'submit' : type);\n\n  return (\n    <Tooltip title={tooltip} placement={tooltipPlacement} shortcuts={tooltipShortcuts} delayShow>\n      <button\n        ref={ref}\n        className={`\n        ${className || ''}\n        cursor-pointer\n        font-inter \n        font-medium \n        py-[6px] \n        px-3 \n        rounded-lg \n        text-sm\n        whitespace-nowrap\n        disabled:cursor-not-allowed\n        flex\n        items-center\n        justify-center\n        gap-1.5\n        relative\n        max-h-[32px]\n         ${appearanceStyle()}\n      `}\n        disabled={disabled || isLoading}\n        id={id}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        title={title}\n        type={buttonType}\n        autoFocus={autoFocus}\n      >\n        {isLoading && renderSpinner()}\n        {children}\n        {displayKeys.length > 0 ? (\n          <span className='inline-flex items-center gap-0.5 ml-1 flex-shrink-0'>\n            {displayKeys.map((key, index) => (\n              <kbd\n                key={index}\n                className={`inline-flex items-center justify-center min-w-[20px] h-5 px-1 rounded text-[11px] font-medium leading-none ${getKbdClasses()}`}\n              >\n                {key}\n              </kbd>\n            ))}\n          </span>\n        ) : null}\n        {options?.length ? (\n          <div onClick={(e) => e.stopPropagation()}>\n            <Dropdown\n              menu={{\n                items: options,\n              }}\n              trigger={['click']}\n              overlayClassName='row-option-cell'\n              placement='bottomRight'\n            >\n              <ChevronRightRounded className='rotate-90 text-neutral-300 hover:opacity-50' />\n            </Dropdown>\n          </div>\n        ) : null}\n        {badge ? (\n          <span className='absolute -top-2 -right-2 bg-zinc-500 text-white rounded-full min-w-[1.5rem] min-h-[1.5rem] text-xs flex justify-center items-center'>\n            {badge}\n          </span>\n        ) : null}\n      </button>\n    </Tooltip>\n  );\n});\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["Button","forwardRef","status","appearance","className","disabled","children","isLoading","title","id","onClick","onKeyDown","badge","type","options","tooltip","tooltipPlacement","shortcuts","tooltipShortcuts","theme","autoFocus","ref","appearanceStyle","useCallback","outlineStyle","ghostStyle","dashedStyle","filledStyle","getKbdClasses","os","useOS","displayKeys","useMemo","key","mapping","SHORTCUT_KEY_MAP","renderSpinner","jsx","Fragment","LoadingSpinnerIcon","buttonType","Tooltip","jsxs","index","e","Dropdown","ChevronRightRounded"],"mappings":"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"}
+{"version":3,"file":"Button.cjs.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import { Dropdown } from 'antd';\nimport { type ItemType } from 'antd/es/menu/interface';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport Tooltip from '../tooltip/Tooltip';\nimport { useOS, SHORTCUT_KEY_MAP } from '../../hooks/useOS';\nimport { ChevronRightRounded } from '@mui/icons-material';\nimport { LoadingSpinnerIcon } from '../icon';\n\nexport interface IButtonProps {\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  isLoading?: boolean;\n  primary?: boolean;\n  title?: string;\n  id: string;\n  status?: IButtonStatus;\n  appearance?: IButtonAppearance;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;\n  badge?: string | number;\n  type?: 'button' | 'submit' | 'reset';\n  options?: ItemType[];\n  tooltip?: string;\n  autoFocus?: boolean;\n  tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';\n  /** Array of keyboard shortcut keys to display inline in the button (e.g., ['Meta', 'S'] or ['Ctrl', 'Enter']) */\n  shortcuts?: string[];\n  /** Array of keyboard shortcut keys to display in the tooltip (e.g., ['Meta', 'S']). Falls back to shortcuts if not provided. */\n  tooltipShortcuts?: string[];\n  theme?: 'light' | 'dark';\n}\n\nexport type IButtonStatus =\n  | 'secondary-neutral'\n  | 'primary'\n  | 'secondary'\n  | 'error'\n  | 'warning'\n  | 'success'\n  | 'error-secondary'\n  | 'cancel'\n  | 'no-background'\n  | 'publish'\n  | 'default';\n\nexport type IButtonAppearance = 'filled' | 'outline' | 'ghost' | 'dashed';\n\nconst Button = forwardRef<HTMLButtonElement, IButtonProps>(({\n  status = 'primary',\n  appearance,\n  className,\n  disabled,\n  children,\n  isLoading,\n  title,\n  id,\n  onClick,\n  onKeyDown,\n  badge,\n  type = 'button',\n  options,\n  tooltip,\n  tooltipPlacement = 'top',\n  shortcuts,\n  tooltipShortcuts,\n  theme = 'light',\n  autoFocus,\n}, ref) => {\n\n  const appearanceStyle = useCallback(() => {\n    switch (appearance) {\n      case 'outline':\n        return outlineStyle();\n      case 'ghost':\n        return ghostStyle();\n      case 'dashed':\n        return dashedStyle();\n      default:\n        return filledStyle();\n    }\n  }, [appearance, status, disabled, theme]);\n\n  const filledStyle = useCallback(() => {\n    switch (status) {\n      case 'primary':\n        return 'bg-primary-600 text-white border border-transparent focus:border-primary-200 hover:bg-primary-700 disabled:opacity-60';\n\n      case 'secondary':\n        return 'bg-primary-50 dark:bg-black-800 text-primary-600 dark:hover:text-primary-400 border border-primary-200 dark:border-primary-600 hover:bg-primary-100 dark:hover:bg-black-800 focus:border-primary-200 hover:border-primary-200 dark:hover:border-primary-400 disabled:opacity-60';\n\n      case 'error':\n        return 'bg-error-600 dark:bg-error-500 text-white border border-transparent hover:bg-error-700 dark:hover:bg-error-600 focus:!border-error-300 dark:focus:!border-error-600 dark:focus:bg-error-800 disabled:opacity-60';\n\n      case 'error-secondary':\n        return 'bg-error-100 dark:bg-black-800 text-error-600 border !border-error-300 dark:!border-error-900 hover:bg-error-200 focus:!border-error-300 dark:focus:!border-error-400 disabled:opacity-60';\n\n      case 'secondary-neutral':\n        return 'bg-white dark:bg-black-800 text-neutral-900 border border-neutral-300 dark:border-black-600 dark:hover:bg-black-600 dark:text-black-200 hover:bg-neutral-100 focus:border-primary-200 disabled:opacity-60';\n\n      case 'warning':\n        return 'bg-warning-300 dark:bg-warning-600 text-white border-warning-300 border hover:bg-warning-400 disabled:opacity-60';\n\n      case 'success':\n        return 'bg-success-600 text-white border-success-600 border hover:bg-success-700 disabled:opacity-60';\n\n      case 'publish':\n        return 'bg-teal-800 text-white border-teal-800 border hover:bg-teal-900 disabled:opacity-60';\n\n      case 'no-background':\n        return 'bg-transparent text-neutral-900 dark:text-black-100 border-transparent border';\n\n      default:\n        return 'bg-white dark:bg-black-800 text-neutral-900 dark:text-white border-white border hover:bg-neutral-100 dark:hover:bg-black-600 disabled:opacity-60';\n    }\n  }, [status, disabled, theme]);\n\n  const outlineStyle = useCallback(() => {\n    switch (status) {\n      case 'primary':\n        return 'text-primary-700 dark:text-primary-600 border-primary-700 border dark:border-primary-600 hover:bg-primary-100 disabled:opacity-60';\n\n      case 'secondary':\n        return 'text-primary-700 dark:text-primary-600 border-primary-100 dark:border-primary-600 border bg-primary-50 dark:bg-black-800 hover:bg-primary-100 disabled:opacity-60';\n\n      case 'secondary-neutral':\n        return 'text-neutral-900 dark:text-white border-neutral-300 dark:border-neutral-700 border bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-600 disabled:opacity-60';\n\n      case 'error':\n        return 'text-error-600 dark:text-error-500 !border-error-600 dark:!border-error-500 border hover:bg-[#FEF3F2] disabled:opacity-60';\n\n      case 'warning':\n        return 'text-warning-300 dark:text-warning-500 border-warning-300 dark:border-warning-500 border hover:bg-[#FFFAEB] disabled:opacity-60';\n\n      case 'success':\n        return 'text-success-600 dark:text-success-500 border-success-600 dark:border-success-500 border hover:bg-[#ECFDF3] disabled:opacity-60';\n\n      default:\n        return 'bg-white dark:bg-black-800 text-neutral-900 dark:text-white border-neutral-300 dark:border-neutral-700 border hover:bg-neutral-100 dark:hover:bg-black-600 disabled:opacity-60';\n    }\n  }, [status, theme]);\n\n  const ghostStyle = useCallback(() => {\n    switch (status) {\n      case 'primary':\n        return 'text-primary-700 dark:text-primary-600 border border-transparent dark:border-transparent hover:text-primary-700 disabled:opacity-60';\n\n      case 'secondary':\n        return 'text-primary-50 dark:text-primary-900 border border-transparent dark:border-transparent hover:text-primary-100 disabled:opacity-60';\n\n      case 'error':\n        return 'text-error-600 dark:text-error-500 border border-transparent dark:border-transparent hover:text-error-600 disabled:opacity-60';\n\n      case 'warning':\n        return 'text-warning-300 dark:text-warning-500 border border-transparent dark:border-transparent hover:text-warning-400 disabled:opacity-60';\n\n      case 'success':\n        return 'text-success-600 dark:text-success-500 border border-transparent dark:border-transparent hover:text-success-700 disabled:opacity-60';\n\n      default:\n        return 'text-neutral-900 dark:text-white border border-transparent dark:border-transparent hover:text-[#667085] disabled:opacity-60';\n    }\n  }, [status, theme]);\n\n  const dashedStyle = useCallback(() => {\n    switch (status) {\n      case 'primary':\n        return 'bg-primary-50 dark:bg-black-700 text-primary-600 dark:text-primary-600 disabled:text-primary-100 hover:bg-primary-100 dark:hover:bg-black-600 [background-repeat:no-repeat] [background-size:1px_100%,100%_1px,1px_100%,100%_1px] [background-position:0_0,0_0,100%_0,0_100%] [background-image:repeating-linear-gradient(3deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(93deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(183deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(273deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px)] dark:[background-image:repeating-linear-gradient(3deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(93deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(183deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(273deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px)]';\n      default:\n        return 'bg-primary-50 dark:bg-black-700 text-primary-600 dark:text-primary-600 disabled:text-primary-100 hover:bg-primary-100 dark:hover:bg-black-600 [background-repeat:no-repeat] [background-size:1px_100%,100%_1px,1px_100%,100%_1px] [background-position:0_0,0_0,100%_0,0_100%] [background-image:repeating-linear-gradient(3deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(93deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(183deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(273deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px)] dark:[background-image:repeating-linear-gradient(3deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(93deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(183deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(273deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px)]';\n    }\n  }, [status, theme]);\n\n  /**\n   * Returns Tailwind classes for inline <kbd> elements that adapt to the button's status and appearance.\n   * Uses a subtle/muted approach � slightly deeper shade of the button's own color.\n   */\n  const getKbdClasses = useCallback((): string => {\n    const isFilled = !appearance || appearance === 'filled';\n\n    if (isFilled) {\n      switch (status) {\n        case 'primary':\n          return 'bg-primary-700 text-primary-100';\n        case 'secondary':\n          return 'bg-primary-100 text-primary-700 dark:bg-black-700 dark:text-primary-400';\n        case 'secondary-neutral':\n          return 'bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-black-300';\n        case 'error':\n          return 'bg-error-700 text-error-100 dark:bg-error-600 dark:text-error-100';\n        case 'error-secondary':\n          return 'bg-error-200 text-error-700 dark:bg-black-700 dark:text-error-400';\n        case 'warning':\n          return 'bg-warning-400 text-white dark:bg-warning-700 dark:text-warning-100';\n        case 'success':\n          return 'bg-success-700 text-success-100';\n        case 'publish':\n          return 'bg-teal-900 text-teal-200';\n        case 'no-background':\n          return 'bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-neutral-400';\n        default:\n          return 'bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-neutral-400';\n      }\n    }\n\n    // outline, ghost, dashed � colored text on transparent/light bg\n    switch (status) {\n      case 'primary':\n      case 'secondary':\n        return 'bg-primary-100 text-primary-800 dark:bg-primary-950 dark:text-primary-400';\n      case 'error':\n      case 'error-secondary':\n        return 'bg-error-100 text-error-700 dark:bg-error-950 dark:text-error-400';\n      case 'warning':\n        return 'bg-warning-100 text-warning-700 dark:bg-warning-950 dark:text-warning-400';\n      case 'success':\n        return 'bg-success-100 text-success-700 dark:bg-success-950 dark:text-success-400';\n      default:\n        return 'bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-neutral-400';\n    }\n  }, [status, appearance]);\n\n  const os = useOS();\n  const displayKeys = useMemo(() => {\n    if (!shortcuts?.length) return [];\n    return shortcuts.map((key) => {\n      const mapping = SHORTCUT_KEY_MAP[key];\n      if (mapping) {\n        return os === 'macos' ? mapping.macos : mapping.other;\n      }\n      return key;\n    });\n  }, [shortcuts, os]);\n\n  const renderSpinner = () => (\n    <>\n      <LoadingSpinnerIcon className='inline mr-2 text-white dark:text-white w-5 h-5' />\n    </>\n  );\n\n  const buttonType = type || ((status === 'primary' && appearance === 'filled') ? 'submit' : type);\n\n  return (\n    <Tooltip title={tooltip} placement={tooltipPlacement} shortcuts={tooltipShortcuts} delayShow>\n      <button\n        ref={ref}\n        className={`\n        ${className || ''}\n        cursor-pointer\n        font-inter \n        font-medium \n        py-1.5\n        px-2.5\n        rounded-lg \n        text-sm\n        whitespace-nowrap\n        disabled:cursor-not-allowed\n        flex\n        items-center\n        justify-center\n        gap-1.5\n        relative\n        max-h-8\n         ${appearanceStyle()}\n      `}\n        disabled={disabled || isLoading}\n        id={id}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        title={title}\n        type={buttonType}\n        autoFocus={autoFocus}\n      >\n        {isLoading && renderSpinner()}\n        {children}\n        {displayKeys.length > 0 ? (\n          <span className='inline-flex items-center gap-0.5 ml-1 flex-shrink-0'>\n            {displayKeys.map((key, index) => (\n              <kbd\n                key={index}\n                className={`inline-flex items-center justify-center min-w-5 h-5 px-1 rounded text-xs font-medium leading-none ${getKbdClasses()}`}\n              >\n                {key}\n              </kbd>\n            ))}\n          </span>\n        ) : null}\n        {options?.length ? (\n          <div onClick={(e) => e.stopPropagation()}>\n            <Dropdown\n              menu={{\n                items: options,\n              }}\n              trigger={['click']}\n              overlayClassName='row-option-cell'\n              placement='bottomRight'\n            >\n              <ChevronRightRounded className='rotate-90 text-neutral-300 hover:opacity-50' />\n            </Dropdown>\n          </div>\n        ) : null}\n        {badge ? (\n          <span className='absolute -top-2 -right-2 bg-zinc-500 text-white rounded-full min-w-6 min-h-6 text-xs flex justify-center items-center'>\n            {badge}\n          </span>\n        ) : null}\n      </button>\n    </Tooltip>\n  );\n});\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["Button","forwardRef","status","appearance","className","disabled","children","isLoading","title","id","onClick","onKeyDown","badge","type","options","tooltip","tooltipPlacement","shortcuts","tooltipShortcuts","theme","autoFocus","ref","appearanceStyle","useCallback","outlineStyle","ghostStyle","dashedStyle","filledStyle","getKbdClasses","os","useOS","displayKeys","useMemo","key","mapping","SHORTCUT_KEY_MAP","renderSpinner","jsx","Fragment","LoadingSpinnerIcon","buttonType","Tooltip","jsxs","index","e","Dropdown","ChevronRightRounded"],"mappings":"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"}

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

@@ -10,7 +10,7 @@ const Y = D(({
   status: r = "primary",
   appearance: t,
   className: m,
-  disabled: p,
+  disabled: d,
   children: y,
   isLoading: c,
   title: u,
@@ -22,7 +22,7 @@ const Y = D(({
   options: b,
   tooltip: _,
   tooltipPlacement: w = "top",
-  shortcuts: d,
+  shortcuts: p,
   tooltipShortcuts: f,
   theme: n = "light",
   autoFocus: F
@@ -34,18 +34,18 @@ const Y = D(({
       case "ghost":
         return R();
       case "dashed":
-        return z();
+        return E();
       default:
         return C();
     }
-  }, [t, r, p, n]), C = o(() => {
+  }, [t, r, d, n]), C = o(() => {
     switch (r) {
       case "primary":
-        return "bg-primary-600 text-white focus:border-primary-200 hover:bg-primary-700 disabled:opacity-60";
+        return "bg-primary-600 text-white border border-transparent focus:border-primary-200 hover:bg-primary-700 disabled:opacity-60";
       case "secondary":
         return "bg-primary-50 dark:bg-black-800 text-primary-600 dark:hover:text-primary-400 border border-primary-200 dark:border-primary-600 hover:bg-primary-100 dark:hover:bg-black-800 focus:border-primary-200 hover:border-primary-200 dark:hover:border-primary-400 disabled:opacity-60";
       case "error":
-        return "bg-error-600 dark:bg-error-500 text-white hover:bg-error-700 dark:hover:bg-error-600 focus:!border-error-300 dark:focus:!border-error-600 dark:focus:bg-error-800 disabled:opacity-60";
+        return "bg-error-600 dark:bg-error-500 text-white border border-transparent hover:bg-error-700 dark:hover:bg-error-600 focus:!border-error-300 dark:focus:!border-error-600 dark:focus:bg-error-800 disabled:opacity-60";
       case "error-secondary":
         return "bg-error-100 dark:bg-black-800 text-error-600 border !border-error-300 dark:!border-error-900 hover:bg-error-200 focus:!border-error-300 dark:focus:!border-error-400 disabled:opacity-60";
       case "secondary-neutral":
@@ -61,7 +61,7 @@ const Y = D(({
       default:
         return "bg-white dark:bg-black-800 text-neutral-900 dark:text-white border-white border hover:bg-neutral-100 dark:hover:bg-black-600 disabled:opacity-60";
     }
-  }, [r, p, n]), j = o(() => {
+  }, [r, d, n]), j = o(() => {
     switch (r) {
       case "primary":
         return "text-primary-700 dark:text-primary-600 border-primary-700 border dark:border-primary-600 hover:bg-primary-100 disabled:opacity-60";
@@ -93,14 +93,14 @@ const Y = D(({
       default:
         return "text-neutral-900 dark:text-white border border-transparent dark:border-transparent hover:text-[#667085] disabled:opacity-60";
     }
-  }, [r, n]), z = o(() => {
+  }, [r, n]), E = o(() => {
     switch (r) {
       case "primary":
         return "bg-primary-50 dark:bg-black-700 text-primary-600 dark:text-primary-600 disabled:text-primary-100 hover:bg-primary-100 dark:hover:bg-black-600 [background-repeat:no-repeat] [background-size:1px_100%,100%_1px,1px_100%,100%_1px] [background-position:0_0,0_0,100%_0,0_100%] [background-image:repeating-linear-gradient(3deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(93deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(183deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(273deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px)] dark:[background-image:repeating-linear-gradient(3deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(93deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(183deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(273deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px)]";
       default:
         return "bg-primary-50 dark:bg-black-700 text-primary-600 dark:text-primary-600 disabled:text-primary-100 hover:bg-primary-100 dark:hover:bg-black-600 [background-repeat:no-repeat] [background-size:1px_100%,100%_1px,1px_100%,100%_1px] [background-position:0_0,0_0,100%_0,0_100%] [background-image:repeating-linear-gradient(3deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(93deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(183deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(273deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px)] dark:[background-image:repeating-linear-gradient(3deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(93deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(183deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(273deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px)]";
     }
-  }, [r, n]), E = o(() => {
+  }, [r, n]), T = o(() => {
     if (!t || t === "filled")
       switch (r) {
         case "primary":
@@ -138,10 +138,10 @@ const Y = D(({
       default:
         return "bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-neutral-400";
     }
-  }, [r, t]), g = P(), x = M(() => d?.length ? d.map((a) => {
+  }, [r, t]), g = P(), x = M(() => p?.length ? p.map((a) => {
     const i = H[a];
     return i ? g === "macos" ? i.macos : i.other : a;
-  }) : [], [d, g]), T = () => /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(U, { size: 20, className: "inline mr-2 text-white dark:text-white" }) }), B = l || (r === "primary" && t === "filled" ? "submit" : l);
+  }) : [], [p, g]), z = () => /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(U, { className: "inline mr-2 text-white dark:text-white w-5 h-5" }) }), B = l || (r === "primary" && t === "filled" ? "submit" : l);
   return /* @__PURE__ */ e(O, { title: _, placement: w, shortcuts: f, delayShow: !0, children: /* @__PURE__ */ K(
     "button",
     {
@@ -151,8 +151,8 @@ const Y = D(({
         cursor-pointer
         font-inter 
         font-medium 
-        py-[6px] 
-        px-3 
+        py-1.5
+        px-2.5
         rounded-lg 
         text-sm
         whitespace-nowrap
@@ -162,10 +162,10 @@ const Y = D(({
         justify-center
         gap-1.5
         relative
-        max-h-[32px]
+        max-h-8
          ${N()}
       `,
-      disabled: p || c,
+      disabled: d || c,
       id: k,
       onClick: v,
       onKeyDown: h,
@@ -173,12 +173,12 @@ const Y = D(({
       type: B,
       autoFocus: F,
       children: [
-        c && T(),
+        c && z(),
         y,
         x.length > 0 ? /* @__PURE__ */ e("span", { className: "inline-flex items-center gap-0.5 ml-1 flex-shrink-0", children: x.map((a, i) => /* @__PURE__ */ e(
           "kbd",
           {
-            className: `inline-flex items-center justify-center min-w-[20px] h-5 px-1 rounded text-[11px] font-medium leading-none ${E()}`,
+            className: `inline-flex items-center justify-center min-w-5 h-5 px-1 rounded text-xs font-medium leading-none ${T()}`,
             children: a
           },
           i
@@ -195,7 +195,7 @@ const Y = D(({
             children: /* @__PURE__ */ e(I, { className: "rotate-90 text-neutral-300 hover:opacity-50" })
           }
         ) }) : null,
-        s ? /* @__PURE__ */ e("span", { className: "absolute -top-2 -right-2 bg-zinc-500 text-white rounded-full min-w-[1.5rem] min-h-[1.5rem] text-xs flex justify-center items-center", children: s }) : null
+        s ? /* @__PURE__ */ e("span", { className: "absolute -top-2 -right-2 bg-zinc-500 text-white rounded-full min-w-6 min-h-6 text-xs flex justify-center items-center", children: s }) : null
       ]
     }
   ) });

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

@@ -1 +1 @@
-{"version":3,"file":"Button.es.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import { Dropdown } from 'antd';\nimport { type ItemType } from 'antd/es/menu/interface';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport Tooltip from '../tooltip/Tooltip';\nimport { useOS, SHORTCUT_KEY_MAP } from '../../hooks/useOS';\nimport { ChevronRightRounded } from '@mui/icons-material';\nimport { LoadingSpinnerIcon } from '../icon';\n\nexport interface IButtonProps {\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  isLoading?: boolean;\n  primary?: boolean;\n  title?: string;\n  id: string;\n  status?: IButtonStatus;\n  appearance?: IButtonAppearance;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;\n  badge?: string | number;\n  type?: 'button' | 'submit' | 'reset';\n  options?: ItemType[];\n  tooltip?: string;\n  autoFocus?: boolean;\n  tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';\n  /** Array of keyboard shortcut keys to display inline in the button (e.g., ['Meta', 'S'] or ['Ctrl', 'Enter']) */\n  shortcuts?: string[];\n  /** Array of keyboard shortcut keys to display in the tooltip (e.g., ['Meta', 'S']). Falls back to shortcuts if not provided. */\n  tooltipShortcuts?: string[];\n  theme?: 'light' | 'dark';\n}\n\nexport type IButtonStatus =\n  | 'secondary-neutral'\n  | 'primary'\n  | 'secondary'\n  | 'error'\n  | 'warning'\n  | 'success'\n  | 'error-secondary'\n  | 'cancel'\n  | 'no-background'\n  | 'publish'\n  | 'default';\n\nexport type IButtonAppearance = 'filled' | 'outline' | 'ghost' | 'dashed';\n\nconst Button = forwardRef<HTMLButtonElement, IButtonProps>(({\n  status = 'primary',\n  appearance,\n  className,\n  disabled,\n  children,\n  isLoading,\n  title,\n  id,\n  onClick,\n  onKeyDown,\n  badge,\n  type = 'button',\n  options,\n  tooltip,\n  tooltipPlacement = 'top',\n  shortcuts,\n  tooltipShortcuts,\n  theme = 'light',\n  autoFocus,\n}, ref) => {\n\n  const appearanceStyle = useCallback(() => {\n    switch (appearance) {\n      case 'outline':\n        return outlineStyle();\n      case 'ghost':\n        return ghostStyle();\n      case 'dashed':\n        return dashedStyle();\n      default:\n        return filledStyle();\n    }\n  }, [appearance, status, disabled, theme]);\n\n  const filledStyle = useCallback(() => {\n    switch (status) {\n      case 'primary':\n        return 'bg-primary-600 text-white focus:border-primary-200 hover:bg-primary-700 disabled:opacity-60';\n\n      case 'secondary':\n        return 'bg-primary-50 dark:bg-black-800 text-primary-600 dark:hover:text-primary-400 border border-primary-200 dark:border-primary-600 hover:bg-primary-100 dark:hover:bg-black-800 focus:border-primary-200 hover:border-primary-200 dark:hover:border-primary-400 disabled:opacity-60';\n\n      case 'error':\n        return 'bg-error-600 dark:bg-error-500 text-white hover:bg-error-700 dark:hover:bg-error-600 focus:!border-error-300 dark:focus:!border-error-600 dark:focus:bg-error-800 disabled:opacity-60';\n\n      case 'error-secondary':\n        return 'bg-error-100 dark:bg-black-800 text-error-600 border !border-error-300 dark:!border-error-900 hover:bg-error-200 focus:!border-error-300 dark:focus:!border-error-400 disabled:opacity-60';\n\n      case 'secondary-neutral':\n        return 'bg-white dark:bg-black-800 text-neutral-900 border border-neutral-300 dark:border-black-600 dark:hover:bg-black-600 dark:text-black-200 hover:bg-neutral-100 focus:border-primary-200 disabled:opacity-60';\n\n      case 'warning':\n        return 'bg-warning-300 dark:bg-warning-600 text-white border-warning-300 border hover:bg-warning-400 disabled:opacity-60';\n\n      case 'success':\n        return 'bg-success-600 text-white border-success-600 border hover:bg-success-700 disabled:opacity-60';\n\n      case 'publish':\n        return 'bg-teal-800 text-white border-teal-800 border hover:bg-teal-900 disabled:opacity-60';\n\n      case 'no-background':\n        return 'bg-transparent text-neutral-900 dark:text-black-100 border-transparent border';\n\n      default:\n        return 'bg-white dark:bg-black-800 text-neutral-900 dark:text-white border-white border hover:bg-neutral-100 dark:hover:bg-black-600 disabled:opacity-60';\n    }\n  }, [status, disabled, theme]);\n\n  const outlineStyle = useCallback(() => {\n    switch (status) {\n      case 'primary':\n        return 'text-primary-700 dark:text-primary-600 border-primary-700 border dark:border-primary-600 hover:bg-primary-100 disabled:opacity-60';\n\n      case 'secondary':\n        return 'text-primary-700 dark:text-primary-600 border-primary-100 dark:border-primary-600 border bg-primary-50 dark:bg-black-800 hover:bg-primary-100 disabled:opacity-60';\n\n      case 'secondary-neutral':\n        return 'text-neutral-900 dark:text-white border-neutral-300 dark:border-neutral-700 border bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-600 disabled:opacity-60';\n\n      case 'error':\n        return 'text-error-600 dark:text-error-500 !border-error-600 dark:!border-error-500 border hover:bg-[#FEF3F2] disabled:opacity-60';\n\n      case 'warning':\n        return 'text-warning-300 dark:text-warning-500 border-warning-300 dark:border-warning-500 border hover:bg-[#FFFAEB] disabled:opacity-60';\n\n      case 'success':\n        return 'text-success-600 dark:text-success-500 border-success-600 dark:border-success-500 border hover:bg-[#ECFDF3] disabled:opacity-60';\n\n      default:\n        return 'bg-white dark:bg-black-800 text-neutral-900 dark:text-white border-neutral-300 dark:border-neutral-700 border hover:bg-neutral-100 dark:hover:bg-black-600 disabled:opacity-60';\n    }\n  }, [status, theme]);\n\n  const ghostStyle = useCallback(() => {\n    switch (status) {\n      case 'primary':\n        return 'text-primary-700 dark:text-primary-600 border border-transparent dark:border-transparent hover:text-primary-700 disabled:opacity-60';\n\n      case 'secondary':\n        return 'text-primary-50 dark:text-primary-900 border border-transparent dark:border-transparent hover:text-primary-100 disabled:opacity-60';\n\n      case 'error':\n        return 'text-error-600 dark:text-error-500 border border-transparent dark:border-transparent hover:text-error-600 disabled:opacity-60';\n\n      case 'warning':\n        return 'text-warning-300 dark:text-warning-500 border border-transparent dark:border-transparent hover:text-warning-400 disabled:opacity-60';\n\n      case 'success':\n        return 'text-success-600 dark:text-success-500 border border-transparent dark:border-transparent hover:text-success-700 disabled:opacity-60';\n\n      default:\n        return 'text-neutral-900 dark:text-white border border-transparent dark:border-transparent hover:text-[#667085] disabled:opacity-60';\n    }\n  }, [status, theme]);\n\n  const dashedStyle = useCallback(() => {\n    switch (status) {\n      case 'primary':\n        return 'bg-primary-50 dark:bg-black-700 text-primary-600 dark:text-primary-600 disabled:text-primary-100 hover:bg-primary-100 dark:hover:bg-black-600 [background-repeat:no-repeat] [background-size:1px_100%,100%_1px,1px_100%,100%_1px] [background-position:0_0,0_0,100%_0,0_100%] [background-image:repeating-linear-gradient(3deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(93deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(183deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(273deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px)] dark:[background-image:repeating-linear-gradient(3deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(93deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(183deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(273deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px)]';\n      default:\n        return 'bg-primary-50 dark:bg-black-700 text-primary-600 dark:text-primary-600 disabled:text-primary-100 hover:bg-primary-100 dark:hover:bg-black-600 [background-repeat:no-repeat] [background-size:1px_100%,100%_1px,1px_100%,100%_1px] [background-position:0_0,0_0,100%_0,0_100%] [background-image:repeating-linear-gradient(3deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(93deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(183deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(273deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px)] dark:[background-image:repeating-linear-gradient(3deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(93deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(183deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(273deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px)]';\n    }\n  }, [status, theme]);\n\n  /**\n   * Returns Tailwind classes for inline <kbd> elements that adapt to the button's status and appearance.\n   * Uses a subtle/muted approach � slightly deeper shade of the button's own color.\n   */\n  const getKbdClasses = useCallback((): string => {\n    const isFilled = !appearance || appearance === 'filled';\n\n    if (isFilled) {\n      switch (status) {\n        case 'primary':\n          return 'bg-primary-700 text-primary-100';\n        case 'secondary':\n          return 'bg-primary-100 text-primary-700 dark:bg-black-700 dark:text-primary-400';\n        case 'secondary-neutral':\n          return 'bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-black-300';\n        case 'error':\n          return 'bg-error-700 text-error-100 dark:bg-error-600 dark:text-error-100';\n        case 'error-secondary':\n          return 'bg-error-200 text-error-700 dark:bg-black-700 dark:text-error-400';\n        case 'warning':\n          return 'bg-warning-400 text-white dark:bg-warning-700 dark:text-warning-100';\n        case 'success':\n          return 'bg-success-700 text-success-100';\n        case 'publish':\n          return 'bg-teal-900 text-teal-200';\n        case 'no-background':\n          return 'bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-neutral-400';\n        default:\n          return 'bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-neutral-400';\n      }\n    }\n\n    // outline, ghost, dashed � colored text on transparent/light bg\n    switch (status) {\n      case 'primary':\n      case 'secondary':\n        return 'bg-primary-100 text-primary-800 dark:bg-primary-950 dark:text-primary-400';\n      case 'error':\n      case 'error-secondary':\n        return 'bg-error-100 text-error-700 dark:bg-error-950 dark:text-error-400';\n      case 'warning':\n        return 'bg-warning-100 text-warning-700 dark:bg-warning-950 dark:text-warning-400';\n      case 'success':\n        return 'bg-success-100 text-success-700 dark:bg-success-950 dark:text-success-400';\n      default:\n        return 'bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-neutral-400';\n    }\n  }, [status, appearance]);\n\n  const os = useOS();\n  const displayKeys = useMemo(() => {\n    if (!shortcuts?.length) return [];\n    return shortcuts.map((key) => {\n      const mapping = SHORTCUT_KEY_MAP[key];\n      if (mapping) {\n        return os === 'macos' ? mapping.macos : mapping.other;\n      }\n      return key;\n    });\n  }, [shortcuts, os]);\n\n  const renderSpinner = () => (\n    <>\n      <LoadingSpinnerIcon size={20} className='inline mr-2 text-white dark:text-white' />\n    </>\n  );\n\n  const buttonType = type || ((status === 'primary' && appearance === 'filled') ? 'submit' : type);\n\n  return (\n    <Tooltip title={tooltip} placement={tooltipPlacement} shortcuts={tooltipShortcuts} delayShow>\n      <button\n        ref={ref}\n        className={`\n        ${className || ''}\n        cursor-pointer\n        font-inter \n        font-medium \n        py-[6px] \n        px-3 \n        rounded-lg \n        text-sm\n        whitespace-nowrap\n        disabled:cursor-not-allowed\n        flex\n        items-center\n        justify-center\n        gap-1.5\n        relative\n        max-h-[32px]\n         ${appearanceStyle()}\n      `}\n        disabled={disabled || isLoading}\n        id={id}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        title={title}\n        type={buttonType}\n        autoFocus={autoFocus}\n      >\n        {isLoading && renderSpinner()}\n        {children}\n        {displayKeys.length > 0 ? (\n          <span className='inline-flex items-center gap-0.5 ml-1 flex-shrink-0'>\n            {displayKeys.map((key, index) => (\n              <kbd\n                key={index}\n                className={`inline-flex items-center justify-center min-w-[20px] h-5 px-1 rounded text-[11px] font-medium leading-none ${getKbdClasses()}`}\n              >\n                {key}\n              </kbd>\n            ))}\n          </span>\n        ) : null}\n        {options?.length ? (\n          <div onClick={(e) => e.stopPropagation()}>\n            <Dropdown\n              menu={{\n                items: options,\n              }}\n              trigger={['click']}\n              overlayClassName='row-option-cell'\n              placement='bottomRight'\n            >\n              <ChevronRightRounded className='rotate-90 text-neutral-300 hover:opacity-50' />\n            </Dropdown>\n          </div>\n        ) : null}\n        {badge ? (\n          <span className='absolute -top-2 -right-2 bg-zinc-500 text-white rounded-full min-w-[1.5rem] min-h-[1.5rem] text-xs flex justify-center items-center'>\n            {badge}\n          </span>\n        ) : null}\n      </button>\n    </Tooltip>\n  );\n});\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["Button","forwardRef","status","appearance","className","disabled","children","isLoading","title","id","onClick","onKeyDown","badge","type","options","tooltip","tooltipPlacement","shortcuts","tooltipShortcuts","theme","autoFocus","ref","appearanceStyle","useCallback","outlineStyle","ghostStyle","dashedStyle","filledStyle","getKbdClasses","os","useOS","displayKeys","useMemo","key","mapping","SHORTCUT_KEY_MAP","renderSpinner","jsx","Fragment","LoadingSpinnerIcon","buttonType","Tooltip","jsxs","index","e","Dropdown","ChevronRightRounded"],"mappings":"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"}
+{"version":3,"file":"Button.es.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import { Dropdown } from 'antd';\nimport { type ItemType } from 'antd/es/menu/interface';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport Tooltip from '../tooltip/Tooltip';\nimport { useOS, SHORTCUT_KEY_MAP } from '../../hooks/useOS';\nimport { ChevronRightRounded } from '@mui/icons-material';\nimport { LoadingSpinnerIcon } from '../icon';\n\nexport interface IButtonProps {\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  isLoading?: boolean;\n  primary?: boolean;\n  title?: string;\n  id: string;\n  status?: IButtonStatus;\n  appearance?: IButtonAppearance;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;\n  badge?: string | number;\n  type?: 'button' | 'submit' | 'reset';\n  options?: ItemType[];\n  tooltip?: string;\n  autoFocus?: boolean;\n  tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';\n  /** Array of keyboard shortcut keys to display inline in the button (e.g., ['Meta', 'S'] or ['Ctrl', 'Enter']) */\n  shortcuts?: string[];\n  /** Array of keyboard shortcut keys to display in the tooltip (e.g., ['Meta', 'S']). Falls back to shortcuts if not provided. */\n  tooltipShortcuts?: string[];\n  theme?: 'light' | 'dark';\n}\n\nexport type IButtonStatus =\n  | 'secondary-neutral'\n  | 'primary'\n  | 'secondary'\n  | 'error'\n  | 'warning'\n  | 'success'\n  | 'error-secondary'\n  | 'cancel'\n  | 'no-background'\n  | 'publish'\n  | 'default';\n\nexport type IButtonAppearance = 'filled' | 'outline' | 'ghost' | 'dashed';\n\nconst Button = forwardRef<HTMLButtonElement, IButtonProps>(({\n  status = 'primary',\n  appearance,\n  className,\n  disabled,\n  children,\n  isLoading,\n  title,\n  id,\n  onClick,\n  onKeyDown,\n  badge,\n  type = 'button',\n  options,\n  tooltip,\n  tooltipPlacement = 'top',\n  shortcuts,\n  tooltipShortcuts,\n  theme = 'light',\n  autoFocus,\n}, ref) => {\n\n  const appearanceStyle = useCallback(() => {\n    switch (appearance) {\n      case 'outline':\n        return outlineStyle();\n      case 'ghost':\n        return ghostStyle();\n      case 'dashed':\n        return dashedStyle();\n      default:\n        return filledStyle();\n    }\n  }, [appearance, status, disabled, theme]);\n\n  const filledStyle = useCallback(() => {\n    switch (status) {\n      case 'primary':\n        return 'bg-primary-600 text-white border border-transparent focus:border-primary-200 hover:bg-primary-700 disabled:opacity-60';\n\n      case 'secondary':\n        return 'bg-primary-50 dark:bg-black-800 text-primary-600 dark:hover:text-primary-400 border border-primary-200 dark:border-primary-600 hover:bg-primary-100 dark:hover:bg-black-800 focus:border-primary-200 hover:border-primary-200 dark:hover:border-primary-400 disabled:opacity-60';\n\n      case 'error':\n        return 'bg-error-600 dark:bg-error-500 text-white border border-transparent hover:bg-error-700 dark:hover:bg-error-600 focus:!border-error-300 dark:focus:!border-error-600 dark:focus:bg-error-800 disabled:opacity-60';\n\n      case 'error-secondary':\n        return 'bg-error-100 dark:bg-black-800 text-error-600 border !border-error-300 dark:!border-error-900 hover:bg-error-200 focus:!border-error-300 dark:focus:!border-error-400 disabled:opacity-60';\n\n      case 'secondary-neutral':\n        return 'bg-white dark:bg-black-800 text-neutral-900 border border-neutral-300 dark:border-black-600 dark:hover:bg-black-600 dark:text-black-200 hover:bg-neutral-100 focus:border-primary-200 disabled:opacity-60';\n\n      case 'warning':\n        return 'bg-warning-300 dark:bg-warning-600 text-white border-warning-300 border hover:bg-warning-400 disabled:opacity-60';\n\n      case 'success':\n        return 'bg-success-600 text-white border-success-600 border hover:bg-success-700 disabled:opacity-60';\n\n      case 'publish':\n        return 'bg-teal-800 text-white border-teal-800 border hover:bg-teal-900 disabled:opacity-60';\n\n      case 'no-background':\n        return 'bg-transparent text-neutral-900 dark:text-black-100 border-transparent border';\n\n      default:\n        return 'bg-white dark:bg-black-800 text-neutral-900 dark:text-white border-white border hover:bg-neutral-100 dark:hover:bg-black-600 disabled:opacity-60';\n    }\n  }, [status, disabled, theme]);\n\n  const outlineStyle = useCallback(() => {\n    switch (status) {\n      case 'primary':\n        return 'text-primary-700 dark:text-primary-600 border-primary-700 border dark:border-primary-600 hover:bg-primary-100 disabled:opacity-60';\n\n      case 'secondary':\n        return 'text-primary-700 dark:text-primary-600 border-primary-100 dark:border-primary-600 border bg-primary-50 dark:bg-black-800 hover:bg-primary-100 disabled:opacity-60';\n\n      case 'secondary-neutral':\n        return 'text-neutral-900 dark:text-white border-neutral-300 dark:border-neutral-700 border bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-600 disabled:opacity-60';\n\n      case 'error':\n        return 'text-error-600 dark:text-error-500 !border-error-600 dark:!border-error-500 border hover:bg-[#FEF3F2] disabled:opacity-60';\n\n      case 'warning':\n        return 'text-warning-300 dark:text-warning-500 border-warning-300 dark:border-warning-500 border hover:bg-[#FFFAEB] disabled:opacity-60';\n\n      case 'success':\n        return 'text-success-600 dark:text-success-500 border-success-600 dark:border-success-500 border hover:bg-[#ECFDF3] disabled:opacity-60';\n\n      default:\n        return 'bg-white dark:bg-black-800 text-neutral-900 dark:text-white border-neutral-300 dark:border-neutral-700 border hover:bg-neutral-100 dark:hover:bg-black-600 disabled:opacity-60';\n    }\n  }, [status, theme]);\n\n  const ghostStyle = useCallback(() => {\n    switch (status) {\n      case 'primary':\n        return 'text-primary-700 dark:text-primary-600 border border-transparent dark:border-transparent hover:text-primary-700 disabled:opacity-60';\n\n      case 'secondary':\n        return 'text-primary-50 dark:text-primary-900 border border-transparent dark:border-transparent hover:text-primary-100 disabled:opacity-60';\n\n      case 'error':\n        return 'text-error-600 dark:text-error-500 border border-transparent dark:border-transparent hover:text-error-600 disabled:opacity-60';\n\n      case 'warning':\n        return 'text-warning-300 dark:text-warning-500 border border-transparent dark:border-transparent hover:text-warning-400 disabled:opacity-60';\n\n      case 'success':\n        return 'text-success-600 dark:text-success-500 border border-transparent dark:border-transparent hover:text-success-700 disabled:opacity-60';\n\n      default:\n        return 'text-neutral-900 dark:text-white border border-transparent dark:border-transparent hover:text-[#667085] disabled:opacity-60';\n    }\n  }, [status, theme]);\n\n  const dashedStyle = useCallback(() => {\n    switch (status) {\n      case 'primary':\n        return 'bg-primary-50 dark:bg-black-700 text-primary-600 dark:text-primary-600 disabled:text-primary-100 hover:bg-primary-100 dark:hover:bg-black-600 [background-repeat:no-repeat] [background-size:1px_100%,100%_1px,1px_100%,100%_1px] [background-position:0_0,0_0,100%_0,0_100%] [background-image:repeating-linear-gradient(3deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(93deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(183deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(273deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px)] dark:[background-image:repeating-linear-gradient(3deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(93deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(183deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(273deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px)]';\n      default:\n        return 'bg-primary-50 dark:bg-black-700 text-primary-600 dark:text-primary-600 disabled:text-primary-100 hover:bg-primary-100 dark:hover:bg-black-600 [background-repeat:no-repeat] [background-size:1px_100%,100%_1px,1px_100%,100%_1px] [background-position:0_0,0_0,100%_0,0_100%] [background-image:repeating-linear-gradient(3deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(93deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(183deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px),repeating-linear-gradient(273deg,var(--color-primary-600),var(--color-primary-600)_10px,transparent_10px,transparent_19px,var(--color-primary-600)_19px)] dark:[background-image:repeating-linear-gradient(3deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(93deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(183deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px),repeating-linear-gradient(273deg,var(--color-primary-500),var(--color-primary-500)_10px,transparent_10px,transparent_19px,var(--color-primary-500)_19px)]';\n    }\n  }, [status, theme]);\n\n  /**\n   * Returns Tailwind classes for inline <kbd> elements that adapt to the button's status and appearance.\n   * Uses a subtle/muted approach � slightly deeper shade of the button's own color.\n   */\n  const getKbdClasses = useCallback((): string => {\n    const isFilled = !appearance || appearance === 'filled';\n\n    if (isFilled) {\n      switch (status) {\n        case 'primary':\n          return 'bg-primary-700 text-primary-100';\n        case 'secondary':\n          return 'bg-primary-100 text-primary-700 dark:bg-black-700 dark:text-primary-400';\n        case 'secondary-neutral':\n          return 'bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-black-300';\n        case 'error':\n          return 'bg-error-700 text-error-100 dark:bg-error-600 dark:text-error-100';\n        case 'error-secondary':\n          return 'bg-error-200 text-error-700 dark:bg-black-700 dark:text-error-400';\n        case 'warning':\n          return 'bg-warning-400 text-white dark:bg-warning-700 dark:text-warning-100';\n        case 'success':\n          return 'bg-success-700 text-success-100';\n        case 'publish':\n          return 'bg-teal-900 text-teal-200';\n        case 'no-background':\n          return 'bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-neutral-400';\n        default:\n          return 'bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-neutral-400';\n      }\n    }\n\n    // outline, ghost, dashed � colored text on transparent/light bg\n    switch (status) {\n      case 'primary':\n      case 'secondary':\n        return 'bg-primary-100 text-primary-800 dark:bg-primary-950 dark:text-primary-400';\n      case 'error':\n      case 'error-secondary':\n        return 'bg-error-100 text-error-700 dark:bg-error-950 dark:text-error-400';\n      case 'warning':\n        return 'bg-warning-100 text-warning-700 dark:bg-warning-950 dark:text-warning-400';\n      case 'success':\n        return 'bg-success-100 text-success-700 dark:bg-success-950 dark:text-success-400';\n      default:\n        return 'bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-neutral-400';\n    }\n  }, [status, appearance]);\n\n  const os = useOS();\n  const displayKeys = useMemo(() => {\n    if (!shortcuts?.length) return [];\n    return shortcuts.map((key) => {\n      const mapping = SHORTCUT_KEY_MAP[key];\n      if (mapping) {\n        return os === 'macos' ? mapping.macos : mapping.other;\n      }\n      return key;\n    });\n  }, [shortcuts, os]);\n\n  const renderSpinner = () => (\n    <>\n      <LoadingSpinnerIcon className='inline mr-2 text-white dark:text-white w-5 h-5' />\n    </>\n  );\n\n  const buttonType = type || ((status === 'primary' && appearance === 'filled') ? 'submit' : type);\n\n  return (\n    <Tooltip title={tooltip} placement={tooltipPlacement} shortcuts={tooltipShortcuts} delayShow>\n      <button\n        ref={ref}\n        className={`\n        ${className || ''}\n        cursor-pointer\n        font-inter \n        font-medium \n        py-1.5\n        px-2.5\n        rounded-lg \n        text-sm\n        whitespace-nowrap\n        disabled:cursor-not-allowed\n        flex\n        items-center\n        justify-center\n        gap-1.5\n        relative\n        max-h-8\n         ${appearanceStyle()}\n      `}\n        disabled={disabled || isLoading}\n        id={id}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        title={title}\n        type={buttonType}\n        autoFocus={autoFocus}\n      >\n        {isLoading && renderSpinner()}\n        {children}\n        {displayKeys.length > 0 ? (\n          <span className='inline-flex items-center gap-0.5 ml-1 flex-shrink-0'>\n            {displayKeys.map((key, index) => (\n              <kbd\n                key={index}\n                className={`inline-flex items-center justify-center min-w-5 h-5 px-1 rounded text-xs font-medium leading-none ${getKbdClasses()}`}\n              >\n                {key}\n              </kbd>\n            ))}\n          </span>\n        ) : null}\n        {options?.length ? (\n          <div onClick={(e) => e.stopPropagation()}>\n            <Dropdown\n              menu={{\n                items: options,\n              }}\n              trigger={['click']}\n              overlayClassName='row-option-cell'\n              placement='bottomRight'\n            >\n              <ChevronRightRounded className='rotate-90 text-neutral-300 hover:opacity-50' />\n            </Dropdown>\n          </div>\n        ) : null}\n        {badge ? (\n          <span className='absolute -top-2 -right-2 bg-zinc-500 text-white rounded-full min-w-6 min-h-6 text-xs flex justify-center items-center'>\n            {badge}\n          </span>\n        ) : null}\n      </button>\n    </Tooltip>\n  );\n});\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["Button","forwardRef","status","appearance","className","disabled","children","isLoading","title","id","onClick","onKeyDown","badge","type","options","tooltip","tooltipPlacement","shortcuts","tooltipShortcuts","theme","autoFocus","ref","appearanceStyle","useCallback","outlineStyle","ghostStyle","dashedStyle","filledStyle","getKbdClasses","os","useOS","displayKeys","useMemo","key","mapping","SHORTCUT_KEY_MAP","renderSpinner","jsx","Fragment","LoadingSpinnerIcon","buttonType","Tooltip","jsxs","index","e","Dropdown","ChevronRightRounded"],"mappings":"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"}

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:l,disabled:r,tooltip:s,tooltipPlacement:u="top",noborder:e,id:d,type:c="button"})=>{const i="flex items-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:s,placement:u,delayShow:!0,children:t.jsx("button",{id:d,disabled:r,className:`${i} ${b[n]} ${a||""} ${p}`,onClick:l,type:c,children:o})})};module.exports=g;
+"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;
 //# 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';\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,oBACdC,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    } 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"}

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

@@ -1,30 +1,30 @@
 import { jsx as t } from "react/jsx-runtime";
 import "react";
 import h from "../tooltip/Tooltip.es.js";
-const m = ({
+const f = ({
   children: o,
   className: a,
   variant: n = "default",
   onClick: l,
   disabled: e,
   tooltip: s,
-  tooltipPlacement: d = "top",
+  tooltipPlacement: u = "top",
   noborder: r,
-  id: u,
+  id: d,
   type: c = "button"
 }) => {
-  const b = "flex items-center", i = {
+  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`,
     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: d, delayShow: !0, children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ t(h, { title: s, placement: u, delayShow: !0, children: /* @__PURE__ */ t(
     "button",
     {
-      id: u,
+      id: d,
       disabled: e,
-      className: `${b} ${i[n]} ${a || ""} ${p}`,
+      className: `${i} ${b[n]} ${a || ""} ${p}`,
       onClick: l,
       type: c,
       children: o
@@ -32,6 +32,6 @@ const m = ({
   ) });
 };
 export {
-  m as default
+  f as default
 };
 //# sourceMappingURL=IconButton.es.js.map

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';\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,qBACdC,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    } 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;"}

package/dist/components/buttons/option-button/OptionButton.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../_virtual/index.cjs.js"),b=require("react"),F=require("../../data-display/typography/Typography.cjs.js"),V=require("../../forms/toggle/Toggle.cjs.js"),w=require("../../tooltip/Tooltip.cjs.js"),Z=require("../../../utils/utilities.cjs.js"),$=require("../../shortcut-kbd/ShortcutKbd.cjs.js"),G=({className:c="",fill:s="var(--color-primary-600)",size:i=24})=>e.jsx("svg",{className:c,width:i,height:i,viewBox:"0 0 20 20",fill:s,xmlns:"http://www.w3.org/2000/svg",children:e.jsx("g",{mask:"url(#mask0_6752_28309)",children:e.jsx("path",{d:"M8.33317 11.3333L13.2498 6.41667C13.4026 6.26389 13.5971 6.1875 13.8332 6.1875C14.0693 6.1875 14.2637 6.26389 14.4165 6.41667C14.5693 6.56944 14.6457 6.76389 14.6457 7C14.6457 7.23611 14.5693 7.43056 14.4165 7.58333L8.9165 13.0833C8.74984 13.25 8.55539 13.3333 8.33317 13.3333C8.11095 13.3333 7.9165 13.25 7.74984 13.0833L5.58317 10.9167C5.43039 10.7639 5.354 10.5694 5.354 10.3333C5.354 10.0972 5.43039 9.90278 5.58317 9.75C5.73595 9.59722 5.93039 9.52083 6.1665 9.52083C6.40262 9.52083 6.59706 9.59722 6.74984 9.75L8.33317 11.3333Z",fill:s})})}),N=({id:c,onClick:s,icon:i,text:a,className:C,isDisabled:h,onClose:d,notVisible:S,hideHoverEffect:q,leadingIcon:u,suffixRecord:m,stopPropagation:g,onToggle:n,isChecked:B=!1,highlight:v,truncateText:D=!1,showTick:L=!1,width:K="100%",tooltip:p,isFlowAvailable:M=!0,shortcuts:f,textClassName:O,chevron:k})=>{const E=b.useCallback(r=>{d&&d(),r.preventDefault(),s?.(r),g&&r.stopPropagation()},[d,s,g]),P=(r,l)=>{if(!l||!r||typeof r!="string"&&typeof r!="number")return r;const _=Z.escapeRegExp(l),A=new RegExp(`(${_?.trim()})`,"gi"),x=r?.toString()?.split(A);return e.jsxs("span",{className:"overflow-clip text-ellipsis",children:[x[0],e.jsx("span",{className:"bg-yellow-300 dark:bg-primary-100 dark:text-black-900 rounded-sm",children:x[1]}),x?.slice(2)?.join("")]})},R=b.useCallback(r=>{n?.(),r.stopPropagation()},[n]),o=["delete","remove","clear","terminate session","terminate sessions","terminate all sessions"].some(l=>a?.toLowerCase().includes(l)),y=h||!M;if(S)return null;const j=!!(s||n),T=j?"button":"div";return e.jsx(T,{id:c,className:t("w-full p-1 bg-white dark:bg-black-800 group",C,y&&"opacity-60"),...j?{onClick:n?()=>null:E,disabled:y}:{},onMouseMove:r=>r.stopPropagation(),children:e.jsxs("div",{className:t("option-button-inner flex w-full justify-start items-center gap-2 px-2 py-1 rounded-lg transition-all duration-300 ease-in-out",!q&&"hover:bg-gray-50 dark:hover:bg-black-600 hover:shadow-md dark:hover:shadow-lg dark:hover:shadow-primary-500/20"),children:[i?e.jsx("div",{className:t("h-5 w-5 flex-shrink-0 flex items-center text-neutral-900 dark:text-white transition-colors duration-300 ease-in-out",o?"group-hover:!text-red-600":"group-hover:text-primary-600 dark:group-hover:text-primary-400"),children:e.jsx(w,{placement:"top",title:p,children:i})}):null,e.jsxs("div",{className:"flex gap-2 flex-1 min-w-0 text-left justify-between items-center",children:[e.jsx("div",{className:t("flex-1 min-w-0",D&&"max-w-[150px]"),style:{width:K},children:e.jsx(F.Typography,{className:t("font-medium text-sm truncate transition-colors duration-300 ease-in-out",o?"group-hover:!text-red-600":"group-hover:!text-primary-600 dark:group-hover:!text-primary-400",O),appearance:"custom",children:v?P(a,v):a})}),m?.[a]?e.jsx("span",{className:"flex-shrink-0 text-neutral-500 dark:text-neutral-200 bg-neutral-100 dark:bg-black-700 border-[#D0D5DD] dark:border-black-700 text-xs leading-[18px] font-normal border rounded-full px-2 py-0.5",children:m[a]||""}):null,L?e.jsx("div",{className:"flex-shrink-0",children:e.jsx(G,{fill:"var(--color-primary-600)"})}):null]}),u?e.jsx(e.Fragment,{children:p?e.jsx(w,{placement:"top",title:p,children:e.jsx("div",{className:t("flex-shrink-0 transition-colors duration-300 ease-in-out",o?"group-hover:!text-red-600":"group-hover:text-primary-600 dark:group-hover:text-primary-400"),children:u})}):e.jsx("div",{className:t("flex-shrink-0 transition-colors duration-300 ease-in-out",o?"group-hover:!text-red-600":"group-hover:text-primary-600 dark:group-hover:text-primary-400"),children:u})}):null,f?e.jsx("div",{className:"flex items-center justify-end flex-shrink-0",children:e.jsx($.ShortcutKbd,{variant:"light",shortcuts:f})}):null,n?e.jsx("div",{className:"flex-shrink-0",children:e.jsx(V.Toggle,{onChange:R,isChecked:B,isDisabled:h,hideStatus:!0})}):null,k?e.jsx("div",{className:t("flex-shrink-0 flex items-center text-neutral-500 dark:text-neutral-400 transition-colors duration-300 ease-in-out",o?"group-hover:!text-red-600":"group-hover:text-primary-600 dark:group-hover:text-primary-400"),children:k}):null]})})};N.displayName="OptionButton";exports.OptionButton=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../_virtual/index.cjs.js"),b=require("react"),F=require("../../data-display/typography/Typography.cjs.js"),V=require("../../forms/toggle/Toggle.cjs.js"),w=require("../../tooltip/Tooltip.cjs.js"),Z=require("../../../utils/utilities.cjs.js"),$=require("../../shortcut-kbd/ShortcutKbd.cjs.js"),G=({className:c="",fill:s="var(--color-primary-600)",size:i=24})=>e.jsx("svg",{className:c,width:i,height:i,viewBox:"0 0 20 20",fill:s,xmlns:"http://www.w3.org/2000/svg",children:e.jsx("g",{mask:"url(#mask0_6752_28309)",children:e.jsx("path",{d:"M8.33317 11.3333L13.2498 6.41667C13.4026 6.26389 13.5971 6.1875 13.8332 6.1875C14.0693 6.1875 14.2637 6.26389 14.4165 6.41667C14.5693 6.56944 14.6457 6.76389 14.6457 7C14.6457 7.23611 14.5693 7.43056 14.4165 7.58333L8.9165 13.0833C8.74984 13.25 8.55539 13.3333 8.33317 13.3333C8.11095 13.3333 7.9165 13.25 7.74984 13.0833L5.58317 10.9167C5.43039 10.7639 5.354 10.5694 5.354 10.3333C5.354 10.0972 5.43039 9.90278 5.58317 9.75C5.73595 9.59722 5.93039 9.52083 6.1665 9.52083C6.40262 9.52083 6.59706 9.59722 6.74984 9.75L8.33317 11.3333Z",fill:s})})}),N=({id:c,onClick:s,icon:i,text:a,className:C,isDisabled:h,onClose:d,notVisible:S,hideHoverEffect:q,leadingIcon:u,suffixRecord:m,stopPropagation:g,onToggle:n,isChecked:B=!1,highlight:v,truncateText:D=!1,showTick:L=!1,width:K="100%",tooltip:p,isFlowAvailable:M=!0,shortcuts:f,textClassName:O,chevron:k})=>{const E=b.useCallback(r=>{d&&d(),r.preventDefault(),s?.(r),g&&r.stopPropagation()},[d,s,g]),P=(r,l)=>{if(!l||!r||typeof r!="string"&&typeof r!="number")return r;const _=Z.escapeRegExp(l),A=new RegExp(`(${_?.trim()})`,"gi"),x=r?.toString()?.split(A);return e.jsxs("span",{className:"overflow-clip text-ellipsis",children:[x[0],e.jsx("span",{className:"bg-yellow-300 dark:bg-primary-100 dark:text-black-900 rounded-sm",children:x[1]}),x?.slice(2)?.join("")]})},R=b.useCallback(r=>{n?.(),r.stopPropagation()},[n]),o=["delete","remove","clear","terminate session","terminate sessions","terminate all sessions"].some(l=>a?.toLowerCase().includes(l)),y=h||!M;if(S)return null;const j=!!(s||n),T=j?"button":"div";return e.jsx(T,{id:c,className:t("w-full p-1 bg-white dark:bg-black-800 group",C,y&&"opacity-60"),...j?{onClick:n?()=>null:E,disabled:y}:{},onMouseMove:r=>r.stopPropagation(),children:e.jsxs("div",{className:t("option-button-inner flex w-full justify-start items-center gap-2 px-2 py-1 rounded-lg transition-all duration-300 ease-in-out",!q&&"hover:bg-gray-50 dark:hover:bg-black-600 hover:shadow-md dark:hover:shadow-lg dark:hover:shadow-primary-500/20"),children:[i?e.jsx("div",{className:t("h-5 w-5 flex-shrink-0 flex items-center text-neutral-900 dark:text-white transition-colors duration-300 ease-in-out",o?"group-hover:!text-red-600":"group-hover:text-primary-600 dark:group-hover:text-primary-400"),children:e.jsx(w,{placement:"top",title:p,children:i})}):null,e.jsxs("div",{className:"flex gap-2 flex-1 min-w-0 text-left justify-between items-center",children:[e.jsx("div",{className:t("flex-1 min-w-0",D&&"max-w-[150px]"),style:{width:K},children:e.jsx(F.Typography,{className:t("font-medium text-sm truncate transition-colors duration-300 ease-in-out",o?"group-hover:!text-red-600":"group-hover:!text-primary-600 dark:group-hover:!text-primary-400",O),appearance:"custom",children:v?P(a,v):a})}),m?.[a]?e.jsx("span",{className:"flex-shrink-0 text-neutral-500 dark:text-neutral-200 bg-neutral-100 dark:bg-black-700 border-[#D0D5DD] dark:border-black-700 text-xs leading-4 font-normal border rounded-full px-2 py-0.5",children:m[a]||""}):null,L?e.jsx("div",{className:"flex-shrink-0",children:e.jsx(G,{fill:"var(--color-primary-600)"})}):null]}),u?e.jsx(e.Fragment,{children:p?e.jsx(w,{placement:"top",title:p,children:e.jsx("div",{className:t("flex-shrink-0 transition-colors duration-300 ease-in-out",o?"group-hover:!text-red-600":"group-hover:text-primary-600 dark:group-hover:text-primary-400"),children:u})}):e.jsx("div",{className:t("flex-shrink-0 transition-colors duration-300 ease-in-out",o?"group-hover:!text-red-600":"group-hover:text-primary-600 dark:group-hover:text-primary-400"),children:u})}):null,f?e.jsx("div",{className:"flex items-center justify-end flex-shrink-0",children:e.jsx($.ShortcutKbd,{variant:"light",shortcuts:f})}):null,n?e.jsx("div",{className:"flex-shrink-0",children:e.jsx(V.Toggle,{onChange:R,isChecked:B,isDisabled:h,hideStatus:!0})}):null,k?e.jsx("div",{className:t("flex-shrink-0 flex items-center text-neutral-500 dark:text-neutral-400 transition-colors duration-300 ease-in-out",o?"group-hover:!text-red-600":"group-hover:text-primary-600 dark:group-hover:text-primary-400"),children:k}):null]})})};N.displayName="OptionButton";exports.OptionButton=N;
 //# sourceMappingURL=OptionButton.cjs.js.map