jattac.libs.web.zest-button 1.3.0 → 1.5.0

package/dist/index.d.ts

@@ -37,6 +37,21 @@ interface ConfirmOptions {
     displayLabel: string;
     timeoutSecs: number;
 }
+/**
+ * A single secondary action in a ZestButton's dropdown menu. Runs through the
+ * same busy/confirm machinery as the main button, independently per item.
+ */
+interface ZestDropdownOption {
+    key?: string;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    semanticType?: SemanticType;
+    onClick?: (e: Event) => void | Promise<void>;
+    busyOptions?: BusyOptions;
+    successOptions?: SuccessOptions;
+    confirmOptions?: ConfirmOptions;
+}
 interface ZestCustomProps {
     visualOptions?: VisualOptions;
     busyOptions?: BusyOptions;
@@ -46,6 +61,12 @@ interface ZestCustomProps {
     theme?: ZestTheme;
     buttonStyle?: ZestButtonStyle;
     semanticType?: SemanticType;
+    dropdownOptions?: ZestDropdownOption[];
+    dropdownAriaLabel?: string;
+    /** Theme for the dropdown menu panel; inherits the button's own `theme` when unset. */
+    dropdownTheme?: ZestTheme;
+    /** Minimum width for the dropdown menu panel (px number or CSS length string); defaults to the split control's own rendered width. */
+    dropdownWidth?: number | string;
 }
 /**
  * All supported props
@@ -68,4 +89,4 @@ interface ZestButtonConfigProviderProps {
 declare const ZestButtonConfigProvider: React.FC<ZestButtonConfigProviderProps>;
 
 export { ZestButtonConfigProvider, ZestButton as default, useZestButtonConfig };
-export type { ConfirmOptions, CustomZestSemanticTypes, SemanticType, ZestButtonProps, ZestButtonStyle, ZestCustomProps, ZestGlobalConfig, ZestSize, ZestTheme, ZestVariant };
+export type { BusyOptions, ConfirmOptions, CustomZestSemanticTypes, SemanticType, SuccessOptions, ZestButtonProps, ZestButtonStyle, ZestCustomProps, ZestDropdownOption, ZestGlobalConfig, ZestSize, ZestTheme, ZestVariant };

package/dist/index.esm.js

@@ -1,6 +1,7 @@
-import require$$0, { useContext, useState, useRef, useEffect, useCallback } from 'react';
-import { FaSpinner } from 'react-icons/fa6';
+import require$$0, { useContext, useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
+import { FaSpinner, FaChevronDown } from 'react-icons/fa6';
 import { FaShareAlt, FaPrint, FaSyncAlt, FaUpload, FaDownload, FaArrowRight, FaTimes, FaTrash, FaEdit, FaSave, FaPlus } from 'react-icons/fa';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 
 var jsxRuntime = {exports: {}};
 
@@ -1384,8 +1385,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/* Styles/ZestButton.module.css */\n\n/* Define base variables for light mode */\n:root {\n  --zest-color-standard-bg: #1e40af;\n  --zest-color-standard-bg-hover: #1a35a0;\n  --zest-color-standard-text: white;\n  --zest-color-standard-border: #1e40af;\n\n  --zest-color-success-bg: #059669;\n  --zest-color-success-bg-hover: #047857;\n  --zest-color-success-text: white;\n  --zest-color-success-border: #059669;\n\n  --zest-color-danger-bg: #dc2626;\n  --zest-color-danger-bg-hover: #b91c1c;\n  --zest-color-danger-text: white;\n  --zest-color-danger-border: #dc2626;\n\n  --zest-color-disabled-bg: #cbd5e1;\n  --zest-color-disabled-bg-hover: #aeb9c4;\n  --zest-color-disabled-text: #6b7280;\n  --zest-color-disabled-border: #cbd5e1;\n\n  --zest-color-icon-success: #10b981;\n  --zest-color-icon-fail: #ef4444;\n}\n\n/* Dark mode adjustments via system preference */\n@media (prefers-color-scheme: dark) {\n  :root {\n    --zest-color-standard-bg: #3b82f6;\n    --zest-color-standard-bg-hover: #2563eb;\n    --zest-color-standard-text: white;\n    --zest-color-standard-border: #3b82f6;\n\n    --zest-color-success-bg: #34d399;\n    --zest-color-success-bg-hover: #10b981;\n    --zest-color-success-text: white;\n    --zest-color-success-border: #34d399;\n\n    --zest-color-danger-bg: #ef4444;\n    --zest-color-danger-bg-hover: #dc2626;\n    --zest-color-danger-text: white;\n    --zest-color-danger-border: #ef4444;\n\n    --zest-color-disabled-bg: #4b5563;\n    --zest-color-disabled-bg-hover: #6b7280;\n    --zest-color-disabled-text: #9ca3af;\n    --zest-color-disabled-border: #4b5563;\n\n    --zest-color-icon-success: #34d399;\n    --zest-color-icon-fail: #ef4444;\n  }\n}\n\n/* Theme override classes */\n.ZestButton-module_force-light__zZTIZ {\n  --zest-color-standard-bg: #1e40af;\n  --zest-color-standard-bg-hover: #1a35a0;\n  --zest-color-standard-text: white;\n  --zest-color-standard-border: #1e40af;\n\n  --zest-color-success-bg: #059669;\n  --zest-color-success-bg-hover: #047857;\n  --zest-color-success-text: white;\n  --zest-color-success-border: #059669;\n\n  --zest-color-danger-bg: #dc2626;\n  --zest-color-danger-bg-hover: #b91c1c;\n  --zest-color-danger-text: white;\n  --zest-color-danger-border: #dc2626;\n\n  --zest-color-disabled-bg: #cbd5e1;\n  --zest-color-disabled-bg-hover: #aeb9c4;\n  --zest-color-disabled-text: #6b7280;\n  --zest-color-disabled-border: #cbd5e1;\n\n  --zest-color-icon-success: #10b981;\n  --zest-color-icon-fail: #ef4444;\n}\n\n.ZestButton-module_force-dark__cx74D {\n  --zest-color-standard-bg: #3b82f6;\n  --zest-color-standard-bg-hover: #2563eb;\n  --zest-color-standard-text: white;\n  --zest-color-standard-border: #3b82f6;\n\n  --zest-color-success-bg: #34d399;\n  --zest-color-success-bg-hover: #10b981;\n  --zest-color-success-text: white;\n  --zest-color-success-border: #34d399;\n\n  --zest-color-danger-bg: #ef4444;\n  --zest-color-danger-bg-hover: #dc2626;\n  --zest-color-danger-text: white;\n  --zest-color-danger-border: #ef4444;\n\n  --zest-color-disabled-bg: #4b5563;\n  --zest-color-disabled-bg-hover: #6b7280;\n  --zest-color-disabled-text: #9ca3af;\n  --zest-color-disabled-border: #4b5563;\n\n  --zest-color-icon-success: #34d399;\n  --zest-color-icon-fail: #ef4444;\n}\n\n\n.ZestButton-module_button__KDafc {\n  font-family: \"Segoe UI\", Roboto, sans-serif;\n  font-weight: 600;\n  border-radius: 8px;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;\n  position: relative;\n  padding: 0.6em 1.2em;\n  overflow: hidden;\n  border: none; /* Default to no border, overridden by outline/dashed */\n}\n\n/* Base styles for different button styles */\n.ZestButton-module_solid__cu4tr {\n  background-color: var(--zest-color-standard-bg);\n  color: var(--zest-color-standard-text);\n}\n.ZestButton-module_solid__cu4tr:hover:not(:disabled) {\n  background-color: var(--zest-color-standard-bg-hover);\n}\n\n.ZestButton-module_outline__esgLq {\n  background-color: transparent;\n  border: 2px solid var(--zest-color-standard-border);\n  color: var(--zest-color-standard-border);\n}\n.ZestButton-module_outline__esgLq:hover:not(:disabled) {\n  background-color: var(--zest-color-standard-bg);\n  color: var(--zest-color-standard-text);\n}\n\n.ZestButton-module_text__8X1xD {\n  background-color: transparent;\n  border: none;\n  color: var(--zest-color-standard-bg);\n}\n.ZestButton-module_text__8X1xD:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-standard-bg-rgb, 30, 64, 175), 0.1); /* Fallback RGB for text hover */\n}\n\n.ZestButton-module_dashed__ebKYF {\n  background-color: transparent;\n  border: 2px dashed var(--zest-color-standard-border);\n  color: var(--zest-color-standard-border);\n}\n.ZestButton-module_dashed__ebKYF:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-standard-bg-rgb, 30, 64, 175), 0.1); /* Fallback RGB for dashed hover */\n}\n\n\n/* Variant overrides for solid style */\n.ZestButton-module_solid__cu4tr.ZestButton-module_standard__T3EGM { /* Already handled by .solid base */ }\n.ZestButton-module_solid__cu4tr.ZestButton-module_success__XEptA {\n  background-color: var(--zest-color-success-bg);\n  color: var(--zest-color-success-text);\n}\n.ZestButton-module_solid__cu4tr.ZestButton-module_success__XEptA:hover:not(:disabled) {\n  background-color: var(--zest-color-success-bg-hover);\n}\n.ZestButton-module_solid__cu4tr.ZestButton-module_danger__nJpJ- {\n  background-color: var(--zest-color-danger-bg);\n  color: var(--zest-color-danger-text);\n}\n.ZestButton-module_solid__cu4tr.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\n  background-color: var(--zest-color-danger-bg-hover);\n}\n\n/* Variant overrides for outline style */\n.ZestButton-module_outline__esgLq.ZestButton-module_standard__T3EGM { /* Already handled by .outline base */ }\n.ZestButton-module_outline__esgLq.ZestButton-module_success__XEptA {\n  border-color: var(--zest-color-success-border);\n  color: var(--zest-color-success-border);\n}\n.ZestButton-module_outline__esgLq.ZestButton-module_success__XEptA:hover:not(:disabled) {\n  background-color: var(--zest-color-success-bg);\n  color: var(--zest-color-success-text);\n}\n.ZestButton-module_outline__esgLq.ZestButton-module_danger__nJpJ- {\n  border-color: var(--zest-color-danger-border);\n  color: var(--zest-color-danger-border);\n}\n.ZestButton-module_outline__esgLq.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\n  background-color: var(--zest-color-danger-bg);\n  color: var(--zest-color-danger-text);\n}\n\n/* Variant overrides for text style */\n.ZestButton-module_text__8X1xD.ZestButton-module_standard__T3EGM { /* Already handled by .text base */ }\n.ZestButton-module_text__8X1xD.ZestButton-module_success__XEptA {\n  color: var(--zest-color-success-bg);\n}\n.ZestButton-module_text__8X1xD.ZestButton-module_success__XEptA:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-success-bg-rgb, 5, 150, 105), 0.1);\n}\n.ZestButton-module_text__8X1xD.ZestButton-module_danger__nJpJ- {\n  color: var(--zest-color-danger-bg);\n}\n.ZestButton-module_text__8X1xD.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-danger-bg-rgb, 220, 38, 38), 0.1);\n}\n\n/* Variant overrides for dashed style */\n.ZestButton-module_dashed__ebKYF.ZestButton-module_standard__T3EGM { /* Already handled by .dashed base */ }\n.ZestButton-module_dashed__ebKYF.ZestButton-module_success__XEptA {\n  border-color: var(--zest-color-success-border);\n  color: var(--zest-color-success-border);\n}\n.ZestButton-module_dashed__ebKYF.ZestButton-module_success__XEptA:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-success-bg-rgb, 5, 150, 105), 0.1);\n}\n.ZestButton-module_dashed__ebKYF.ZestButton-module_danger__nJpJ- {\n  border-color: var(--zest-color-danger-border);\n  color: var(--zest-color-danger-border);\n}\n.ZestButton-module_dashed__ebKYF.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\n  background-color: rgba(var(--zest-color-danger-bg-rgb, 220, 38, 38), 0.1);\n}\n\n\n/* Disabled state overrides for different button styles */\n.ZestButton-module_solid__cu4tr:disabled, .ZestButton-module_solid__cu4tr.ZestButton-module_disabled__gw6y3 {\n  background-color: var(--zest-color-disabled-bg);\n  color: var(--zest-color-disabled-text);\n  border-color: var(--zest-color-disabled-border);\n}\n.ZestButton-module_outline__esgLq:disabled, .ZestButton-module_outline__esgLq.ZestButton-module_disabled__gw6y3 {\n  background-color: transparent;\n  border-color: var(--zest-color-disabled-border);\n  color: var(--zest-color-disabled-text);\n}\n.ZestButton-module_text__8X1xD:disabled, .ZestButton-module_text__8X1xD.ZestButton-module_disabled__gw6y3 {\n  background-color: transparent;\n  color: var(--zest-color-disabled-text);\n}\n.ZestButton-module_dashed__ebKYF:disabled, .ZestButton-module_dashed__ebKYF.ZestButton-module_disabled__gw6y3 {\n  background-color: transparent;\n  border-color: var(--zest-color-disabled-border);\n  color: var(--zest-color-disabled-text);\n}\n\n\n/* Layout */\n.ZestButton-module_stretch__CTLNw {\n  width: 100%;\n}\n\n.ZestButton-module_sm__G1vAP {\n  font-size: 0.85rem;\n  padding: 0.4em 0.8em;\n}\n\n.ZestButton-module_md__Y-PMO {\n  font-size: 1rem;\n  padding: 0.6em 1.2em;\n}\n\n.ZestButton-module_lg__AQgdf {\n  font-size: 1.125rem;\n  padding: 0.8em 1.6em;\n}\n\n.ZestButton-module_inner__1j2Fr {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n\n.ZestButton-module_spinner__l2hLe {\n  position: absolute;\n  width: 1em;\n  height: 1em;\n  animation: ZestButton-module_spin__4asdw 0.75s linear infinite;\n  color: currentColor; /* Inherit color from button text */\n}\n\n.ZestButton-module_content__hlea3 {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5em;\n}\n\n.ZestButton-module_label__8x263 {\n  display: inline-block;\n}\n\n.ZestButton-module_icon__B3DFi {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Success + Fail Icons */\n.ZestButton-module_animatedCheck__8K4K- {\n  width: 1.25em;\n  height: 1.25em;\n  color: var(--zest-color-icon-success);\n  animation: ZestButton-module_fadeIn__iEave 0.25s ease-out;\n}\n\n.ZestButton-module_animatedX__KQnt7 {\n  width: 1.25em;\n  height: 1.25em;\n  color: var(--zest-color-icon-fail);\n  animation: ZestButton-module_fadeIn__iEave 0.25s ease-out;\n}\n\n/* Stroke animations */\n.ZestButton-module_animatedCheck__8K4K- path {\n  stroke-dasharray: 24;\n  stroke-dashoffset: 24;\n  animation: ZestButton-module_drawCheck__3DyjT 0.4s ease-out forwards;\n}\n\n.ZestButton-module_animatedX__KQnt7 line {\n  stroke-dasharray: 24;\n  stroke-dashoffset: 24;\n  animation: ZestButton-module_drawCheck__3DyjT 0.4s ease-out forwards;\n}\n\n/* New: apply spacing between left icon and text */\n.ZestButton-module_icon__B3DFi:first-child {\n  margin-right: 0.7em;\n}\n\n/* Optional override for iconRight if needed */\n.ZestButton-module_icon__B3DFi:last-child {\n  margin-left: 0.7em;\n}\n\n/* Animations */\n@keyframes ZestButton-module_spin__4asdw {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes ZestButton-module_drawCheck__3DyjT {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\n@keyframes ZestButton-module_fadeIn__iEave {\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes ZestButton-module_shakeIt__ox-R3 {\n  0%,\n  100% {\n    transform: translateX(0);\n  }\n  20%,\n  60% {\n    transform: translateX(-4px);\n  }\n  40%,\n  80% {\n    transform: translateX(4px);\n  }\n}\n\n.ZestButton-module_shake__NtIjf {\n  animation: ZestButton-module_shakeIt__ox-R3 0.4s ease;\n  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.6);\n}\n\n/* Mobile-first adjustments for hit area */\n@media (max-width: 768px) {\n  .ZestButton-module_button__KDafc {\n    min-height: 44px; /* Ensure a minimum touch target size for accessibility */\n  }\n\n  .ZestButton-module_sm__G1vAP {\n    padding: 0.6em 1em; /* Increase padding for small buttons on mobile */\n  }\n\n  .ZestButton-module_md__Y-PMO {\n    padding: 0.8em 1.4em; /* Slightly increase padding for medium buttons on mobile */\n  }\n}\n\n";
-var styles = {"force-light":"ZestButton-module_force-light__zZTIZ","force-dark":"ZestButton-module_force-dark__cx74D","button":"ZestButton-module_button__KDafc","solid":"ZestButton-module_solid__cu4tr","outline":"ZestButton-module_outline__esgLq","text":"ZestButton-module_text__8X1xD","dashed":"ZestButton-module_dashed__ebKYF","standard":"ZestButton-module_standard__T3EGM","success":"ZestButton-module_success__XEptA","danger":"ZestButton-module_danger__nJpJ-","disabled":"ZestButton-module_disabled__gw6y3","stretch":"ZestButton-module_stretch__CTLNw","sm":"ZestButton-module_sm__G1vAP","md":"ZestButton-module_md__Y-PMO","lg":"ZestButton-module_lg__AQgdf","inner":"ZestButton-module_inner__1j2Fr","spinner":"ZestButton-module_spinner__l2hLe","spin":"ZestButton-module_spin__4asdw","content":"ZestButton-module_content__hlea3","label":"ZestButton-module_label__8x263","icon":"ZestButton-module_icon__B3DFi","animatedCheck":"ZestButton-module_animatedCheck__8K4K-","fadeIn":"ZestButton-module_fadeIn__iEave","animatedX":"ZestButton-module_animatedX__KQnt7","drawCheck":"ZestButton-module_drawCheck__3DyjT","shake":"ZestButton-module_shake__NtIjf","shakeIt":"ZestButton-module_shakeIt__ox-R3"};
+var css_248z = "/* Styles/ZestButton.module.css */\r\n\r\n/* Define base variables for light mode */\r\n:root {\r\n  --zest-color-standard-bg: #1e40af;\r\n  --zest-color-standard-bg-hover: #1a35a0;\r\n  --zest-color-standard-text: white;\r\n  --zest-color-standard-border: #1e40af;\r\n\r\n  --zest-color-success-bg: #059669;\r\n  --zest-color-success-bg-hover: #047857;\r\n  --zest-color-success-text: white;\r\n  --zest-color-success-border: #059669;\r\n\r\n  --zest-color-danger-bg: #dc2626;\r\n  --zest-color-danger-bg-hover: #b91c1c;\r\n  --zest-color-danger-text: white;\r\n  --zest-color-danger-border: #dc2626;\r\n\r\n  --zest-color-disabled-bg: #cbd5e1;\r\n  --zest-color-disabled-bg-hover: #aeb9c4;\r\n  --zest-color-disabled-text: #6b7280;\r\n  --zest-color-disabled-border: #cbd5e1;\r\n\r\n  --zest-color-icon-success: #10b981;\r\n  --zest-color-icon-fail: #ef4444;\r\n}\r\n\r\n/* Shape/elevation/motion tokens (additive; no existing --zest-color-* renamed) */\r\n:root {\r\n  --zest-radius-sm: 6px;    /* menu items */\r\n  --zest-radius-md: 8px;    /* buttons, menu panel */\r\n  --zest-shadow-resting: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.04);\r\n  --zest-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);\r\n  --zest-shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.16);\r\n  --zest-focus-ring-color: #2563eb;\r\n  --zest-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.45);\r\n  --zest-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);\r\n  --zest-ease-standard: cubic-bezier(0.2, 0, 0, 1);\r\n  --zest-motion-fast: 0.15s;\r\n  --zest-motion-base: 0.2s;\r\n}\r\n\r\n/* Dark mode adjustments via system preference */\r\n@media (prefers-color-scheme: dark) {\r\n  :root {\r\n    --zest-color-standard-bg: #3b82f6;\r\n    --zest-color-standard-bg-hover: #2563eb;\r\n    --zest-color-standard-text: white;\r\n    --zest-color-standard-border: #3b82f6;\r\n\r\n    --zest-color-success-bg: #34d399;\r\n    --zest-color-success-bg-hover: #10b981;\r\n    --zest-color-success-text: white;\r\n    --zest-color-success-border: #34d399;\r\n\r\n    --zest-color-danger-bg: #ef4444;\r\n    --zest-color-danger-bg-hover: #dc2626;\r\n    --zest-color-danger-text: white;\r\n    --zest-color-danger-border: #ef4444;\r\n\r\n    --zest-color-disabled-bg: #4b5563;\r\n    --zest-color-disabled-bg-hover: #6b7280;\r\n    --zest-color-disabled-text: #9ca3af;\r\n    --zest-color-disabled-border: #4b5563;\r\n\r\n    --zest-color-icon-success: #34d399;\r\n    --zest-color-icon-fail: #ef4444;\r\n\r\n    --zest-shadow-resting: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2);\r\n    --zest-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);\r\n    --zest-focus-ring-color: #60a5fa;\r\n    --zest-focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.5);\r\n  }\r\n}\r\n\r\n/* Theme override classes */\r\n.ZestButton-module_force-light__zZTIZ {\r\n  --zest-color-standard-bg: #1e40af;\r\n  --zest-color-standard-bg-hover: #1a35a0;\r\n  --zest-color-standard-text: white;\r\n  --zest-color-standard-border: #1e40af;\r\n\r\n  --zest-color-success-bg: #059669;\r\n  --zest-color-success-bg-hover: #047857;\r\n  --zest-color-success-text: white;\r\n  --zest-color-success-border: #059669;\r\n\r\n  --zest-color-danger-bg: #dc2626;\r\n  --zest-color-danger-bg-hover: #b91c1c;\r\n  --zest-color-danger-text: white;\r\n  --zest-color-danger-border: #dc2626;\r\n\r\n  --zest-color-disabled-bg: #cbd5e1;\r\n  --zest-color-disabled-bg-hover: #aeb9c4;\r\n  --zest-color-disabled-text: #6b7280;\r\n  --zest-color-disabled-border: #cbd5e1;\r\n\r\n  --zest-color-icon-success: #10b981;\r\n  --zest-color-icon-fail: #ef4444;\r\n}\r\n\r\n.ZestButton-module_force-dark__cx74D {\r\n  --zest-color-standard-bg: #3b82f6;\r\n  --zest-color-standard-bg-hover: #2563eb;\r\n  --zest-color-standard-text: white;\r\n  --zest-color-standard-border: #3b82f6;\r\n\r\n  --zest-color-success-bg: #34d399;\r\n  --zest-color-success-bg-hover: #10b981;\r\n  --zest-color-success-text: white;\r\n  --zest-color-success-border: #34d399;\r\n\r\n  --zest-color-danger-bg: #ef4444;\r\n  --zest-color-danger-bg-hover: #dc2626;\r\n  --zest-color-danger-text: white;\r\n  --zest-color-danger-border: #ef4444;\r\n\r\n  --zest-color-disabled-bg: #4b5563;\r\n  --zest-color-disabled-bg-hover: #6b7280;\r\n  --zest-color-disabled-text: #9ca3af;\r\n  --zest-color-disabled-border: #4b5563;\r\n\r\n  --zest-color-icon-success: #34d399;\r\n  --zest-color-icon-fail: #ef4444;\r\n\r\n  --zest-shadow-resting: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2);\r\n  --zest-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);\r\n  --zest-focus-ring-color: #60a5fa;\r\n  --zest-focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.5);\r\n}\r\n\r\n\r\n.ZestButton-module_button__KDafc {\r\n  font-family: \"Segoe UI\", Roboto, sans-serif;\r\n  font-weight: 600;\r\n  border-radius: var(--zest-radius-md);\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  transition:\r\n    background-color var(--zest-motion-base) ease,\r\n    box-shadow var(--zest-motion-base) ease,\r\n    color var(--zest-motion-base) ease,\r\n    border-color var(--zest-motion-base) ease,\r\n    transform var(--zest-motion-fast) var(--zest-ease-standard);\r\n  position: relative;\r\n  padding: 0.6em 1.2em;\r\n  overflow: hidden;\r\n  border: none; /* Default to no border, overridden by outline/dashed */\r\n  box-shadow: var(--zest-shadow-resting);\r\n}\r\n\r\n.ZestButton-module_button__KDafc::-moz-focus-inner {\r\n  border: 0;\r\n  padding: 0;\r\n}\r\n\r\n.ZestButton-module_button__KDafc:hover:not(:disabled) {\r\n  box-shadow: var(--zest-shadow-hover);\r\n  transform: translateY(-1px);\r\n}\r\n\r\n.ZestButton-module_button__KDafc:active:not(:disabled) {\r\n  transform: translateY(0) scale(0.97);\r\n  transition-duration: 0.08s;\r\n}\r\n\r\n.ZestButton-module_button__KDafc:disabled {\r\n  box-shadow: none;\r\n  cursor: not-allowed;\r\n  transform: none;\r\n}\r\n\r\n.ZestButton-module_button__KDafc:focus-visible {\r\n  outline: none;\r\n  box-shadow: var(--zest-shadow-resting), var(--zest-focus-ring);\r\n}\r\n\r\n/* Base styles for different button styles */\r\n.ZestButton-module_solid__cu4tr {\r\n  background-color: var(--zest-color-standard-bg);\r\n  color: var(--zest-color-standard-text);\r\n}\r\n.ZestButton-module_solid__cu4tr:hover:not(:disabled) {\r\n  background-color: var(--zest-color-standard-bg-hover);\r\n}\r\n\r\n.ZestButton-module_outline__esgLq {\r\n  background-color: transparent;\r\n  border: 2px solid var(--zest-color-standard-border);\r\n  color: var(--zest-color-standard-border);\r\n}\r\n.ZestButton-module_outline__esgLq:hover:not(:disabled) {\r\n  background-color: var(--zest-color-standard-bg);\r\n  color: var(--zest-color-standard-text);\r\n}\r\n\r\n.ZestButton-module_text__8X1xD {\r\n  background-color: transparent;\r\n  border: none;\r\n  color: var(--zest-color-standard-bg);\r\n  box-shadow: none; /* transparent background has nothing for a shadow to sit under */\r\n}\r\n.ZestButton-module_text__8X1xD:hover:not(:disabled) {\r\n  background-color: rgba(var(--zest-color-standard-bg-rgb, 30, 64, 175), 0.1); /* Fallback RGB for text hover */\r\n  box-shadow: none;\r\n}\r\n\r\n.ZestButton-module_dashed__ebKYF {\r\n  background-color: transparent;\r\n  border: 2px dashed var(--zest-color-standard-border);\r\n  color: var(--zest-color-standard-border);\r\n}\r\n.ZestButton-module_dashed__ebKYF:hover:not(:disabled) {\r\n  background-color: rgba(var(--zest-color-standard-bg-rgb, 30, 64, 175), 0.1); /* Fallback RGB for dashed hover */\r\n}\r\n\r\n\r\n/* Variant overrides for solid style */\r\n.ZestButton-module_solid__cu4tr.ZestButton-module_standard__T3EGM { /* Already handled by .solid base */ }\r\n.ZestButton-module_solid__cu4tr.ZestButton-module_success__XEptA {\r\n  background-color: var(--zest-color-success-bg);\r\n  color: var(--zest-color-success-text);\r\n}\r\n.ZestButton-module_solid__cu4tr.ZestButton-module_success__XEptA:hover:not(:disabled) {\r\n  background-color: var(--zest-color-success-bg-hover);\r\n}\r\n.ZestButton-module_solid__cu4tr.ZestButton-module_danger__nJpJ- {\r\n  background-color: var(--zest-color-danger-bg);\r\n  color: var(--zest-color-danger-text);\r\n}\r\n.ZestButton-module_solid__cu4tr.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\r\n  background-color: var(--zest-color-danger-bg-hover);\r\n}\r\n\r\n/* Variant overrides for outline style */\r\n.ZestButton-module_outline__esgLq.ZestButton-module_standard__T3EGM { /* Already handled by .outline base */ }\r\n.ZestButton-module_outline__esgLq.ZestButton-module_success__XEptA {\r\n  border-color: var(--zest-color-success-border);\r\n  color: var(--zest-color-success-border);\r\n}\r\n.ZestButton-module_outline__esgLq.ZestButton-module_success__XEptA:hover:not(:disabled) {\r\n  background-color: var(--zest-color-success-bg);\r\n  color: var(--zest-color-success-text);\r\n}\r\n.ZestButton-module_outline__esgLq.ZestButton-module_danger__nJpJ- {\r\n  border-color: var(--zest-color-danger-border);\r\n  color: var(--zest-color-danger-border);\r\n}\r\n.ZestButton-module_outline__esgLq.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\r\n  background-color: var(--zest-color-danger-bg);\r\n  color: var(--zest-color-danger-text);\r\n}\r\n\r\n/* Variant overrides for text style */\r\n.ZestButton-module_text__8X1xD.ZestButton-module_standard__T3EGM { /* Already handled by .text base */ }\r\n.ZestButton-module_text__8X1xD.ZestButton-module_success__XEptA {\r\n  color: var(--zest-color-success-bg);\r\n}\r\n.ZestButton-module_text__8X1xD.ZestButton-module_success__XEptA:hover:not(:disabled) {\r\n  background-color: rgba(var(--zest-color-success-bg-rgb, 5, 150, 105), 0.1);\r\n}\r\n.ZestButton-module_text__8X1xD.ZestButton-module_danger__nJpJ- {\r\n  color: var(--zest-color-danger-bg);\r\n}\r\n.ZestButton-module_text__8X1xD.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\r\n  background-color: rgba(var(--zest-color-danger-bg-rgb, 220, 38, 38), 0.1);\r\n}\r\n\r\n/* Variant overrides for dashed style */\r\n.ZestButton-module_dashed__ebKYF.ZestButton-module_standard__T3EGM { /* Already handled by .dashed base */ }\r\n.ZestButton-module_dashed__ebKYF.ZestButton-module_success__XEptA {\r\n  border-color: var(--zest-color-success-border);\r\n  color: var(--zest-color-success-border);\r\n}\r\n.ZestButton-module_dashed__ebKYF.ZestButton-module_success__XEptA:hover:not(:disabled) {\r\n  background-color: rgba(var(--zest-color-success-bg-rgb, 5, 150, 105), 0.1);\r\n}\r\n.ZestButton-module_dashed__ebKYF.ZestButton-module_danger__nJpJ- {\r\n  border-color: var(--zest-color-danger-border);\r\n  color: var(--zest-color-danger-border);\r\n}\r\n.ZestButton-module_dashed__ebKYF.ZestButton-module_danger__nJpJ-:hover:not(:disabled) {\r\n  background-color: rgba(var(--zest-color-danger-bg-rgb, 220, 38, 38), 0.1);\r\n}\r\n\r\n\r\n/* Disabled state overrides for different button styles */\r\n.ZestButton-module_solid__cu4tr:disabled, .ZestButton-module_solid__cu4tr.ZestButton-module_disabled__gw6y3 {\r\n  background-color: var(--zest-color-disabled-bg);\r\n  color: var(--zest-color-disabled-text);\r\n  border-color: var(--zest-color-disabled-border);\r\n}\r\n.ZestButton-module_outline__esgLq:disabled, .ZestButton-module_outline__esgLq.ZestButton-module_disabled__gw6y3 {\r\n  background-color: transparent;\r\n  border-color: var(--zest-color-disabled-border);\r\n  color: var(--zest-color-disabled-text);\r\n}\r\n.ZestButton-module_text__8X1xD:disabled, .ZestButton-module_text__8X1xD.ZestButton-module_disabled__gw6y3 {\r\n  background-color: transparent;\r\n  color: var(--zest-color-disabled-text);\r\n}\r\n.ZestButton-module_dashed__ebKYF:disabled, .ZestButton-module_dashed__ebKYF.ZestButton-module_disabled__gw6y3 {\r\n  background-color: transparent;\r\n  border-color: var(--zest-color-disabled-border);\r\n  color: var(--zest-color-disabled-text);\r\n}\r\n\r\n\r\n/* Layout */\r\n.ZestButton-module_stretch__CTLNw {\r\n  width: 100%;\r\n}\r\n\r\n.ZestButton-module_sm__G1vAP {\r\n  font-size: 0.85rem;\r\n  padding: 0.4em 0.8em;\r\n}\r\n\r\n.ZestButton-module_md__Y-PMO {\r\n  font-size: 1rem;\r\n  padding: 0.6em 1.2em;\r\n}\r\n\r\n.ZestButton-module_lg__AQgdf {\r\n  font-size: 1.125rem;\r\n  padding: 0.8em 1.6em;\r\n}\r\n\r\n.ZestButton-module_inner__1j2Fr {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: relative;\r\n}\r\n\r\n.ZestButton-module_spinner__l2hLe {\r\n  position: absolute;\r\n  width: 1em;\r\n  height: 1em;\r\n  animation: ZestButton-module_spin__4asdw 0.75s linear infinite;\r\n  color: currentColor; /* Inherit color from button text */\r\n}\r\n\r\n.ZestButton-module_content__hlea3 {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 0.5em;\r\n}\r\n\r\n.ZestButton-module_label__8x263 {\r\n  display: inline-block;\r\n}\r\n\r\n.ZestButton-module_icon__B3DFi {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n/* Success + Fail Icons */\r\n.ZestButton-module_animatedCheck__8K4K- {\r\n  width: 1.25em;\r\n  height: 1.25em;\r\n  color: var(--zest-color-icon-success);\r\n  animation: ZestButton-module_fadeIn__iEave 0.25s ease-out;\r\n}\r\n\r\n.ZestButton-module_animatedX__KQnt7 {\r\n  width: 1.25em;\r\n  height: 1.25em;\r\n  color: var(--zest-color-icon-fail);\r\n  animation: ZestButton-module_fadeIn__iEave 0.25s ease-out;\r\n}\r\n\r\n/* Stroke animations */\r\n.ZestButton-module_animatedCheck__8K4K- path {\r\n  stroke-dasharray: 24;\r\n  stroke-dashoffset: 24;\r\n  animation: ZestButton-module_drawCheck__3DyjT 0.4s ease-out forwards;\r\n}\r\n\r\n.ZestButton-module_animatedX__KQnt7 line {\r\n  stroke-dasharray: 24;\r\n  stroke-dashoffset: 24;\r\n  animation: ZestButton-module_drawCheck__3DyjT 0.4s ease-out forwards;\r\n}\r\n\r\n/* New: apply spacing between left icon and text */\r\n.ZestButton-module_icon__B3DFi:first-child {\r\n  margin-right: 0.7em;\r\n}\r\n\r\n/* Optional override for iconRight if needed */\r\n.ZestButton-module_icon__B3DFi:last-child {\r\n  margin-left: 0.7em;\r\n}\r\n\r\n/* Animations */\r\n@keyframes ZestButton-module_spin__4asdw {\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n@keyframes ZestButton-module_drawCheck__3DyjT {\r\n  to {\r\n    stroke-dashoffset: 0;\r\n  }\r\n}\r\n\r\n@keyframes ZestButton-module_fadeIn__iEave {\r\n  from {\r\n    opacity: 0;\r\n    transform: scale(0.8);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: scale(1);\r\n  }\r\n}\r\n\r\n@keyframes ZestButton-module_shakeIt__ox-R3 {\r\n  0%,\r\n  100% {\r\n    transform: translateX(0);\r\n  }\r\n  20%,\r\n  60% {\r\n    transform: translateX(-4px);\r\n  }\r\n  40%,\r\n  80% {\r\n    transform: translateX(4px);\r\n  }\r\n}\r\n\r\n.ZestButton-module_shake__NtIjf {\r\n  animation: ZestButton-module_shakeIt__ox-R3 0.4s ease;\r\n  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.6);\r\n}\r\n\r\n/* Mobile-first adjustments for hit area */\r\n@media (max-width: 768px) {\r\n  .ZestButton-module_button__KDafc {\r\n    min-height: 44px; /* Ensure a minimum touch target size for accessibility */\r\n  }\r\n\r\n  .ZestButton-module_sm__G1vAP {\r\n    padding: 0.6em 1em; /* Increase padding for small buttons on mobile */\r\n  }\r\n\r\n  .ZestButton-module_md__Y-PMO {\r\n    padding: 0.8em 1.4em; /* Slightly increase padding for medium buttons on mobile */\r\n  }\r\n}\r\n\r\n/* ------------------------------------------------------------------ */\r\n/* Split button (zest.dropdownOptions)                                */\r\n/* ------------------------------------------------------------------ */\r\n\r\n.ZestButton-module_splitButtonContainer__UPOGd {\r\n  display: inline-flex;\r\n  align-items: stretch;\r\n}\r\n\r\n.ZestButton-module_splitButtonMain__F0cHX {\r\n  border-top-right-radius: 0;\r\n  border-bottom-right-radius: 0;\r\n  border-right: none;\r\n}\r\n\r\n.ZestButton-module_dropdownTrigger__wqBMN {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-top-left-radius: 0;\r\n  border-bottom-left-radius: 0;\r\n  padding: 0 0.7em;\r\n  min-width: 2.4em;\r\n}\r\n\r\n/* Divider between the two split-button segments, defined for all four\r\n   buttonStyles (not just solid/text) so the seam is always visible at rest.\r\n   Each dropdownTrigger also gets a persistent (not just on-hover) background\r\n   tint so the chevron reads as its own distinct, separately-clickable\r\n   region — this is the primary fix for the two segments blending together. */\r\n.ZestButton-module_dropdownTrigger__wqBMN.ZestButton-module_solid__cu4tr {\r\n  border-left: 1px solid rgba(255, 255, 255, 0.35);\r\n  background-color: rgba(0, 0, 0, 0.06);\r\n}\r\n.ZestButton-module_dropdownTrigger__wqBMN.ZestButton-module_solid__cu4tr:hover:not(:disabled) {\r\n  background-color: rgba(0, 0, 0, 0.12);\r\n}\r\n.ZestButton-module_dropdownTrigger__wqBMN.ZestButton-module_text__8X1xD {\r\n  border-left: 1px solid rgba(0, 0, 0, 0.18);\r\n  background-color: rgba(0, 0, 0, 0.035);\r\n}\r\n.ZestButton-module_dropdownTrigger__wqBMN.ZestButton-module_outline__esgLq,\r\n.ZestButton-module_dropdownTrigger__wqBMN.ZestButton-module_dashed__ebKYF {\r\n  /* outline/dashed already draw their own full border; splitButtonMain\r\n     removes its own right border below so only this left border remains\r\n     as the seam, keeping its weight consistent with solid/text. */\r\n  border-left-width: 2px;\r\n  background-color: rgba(0, 0, 0, 0.035);\r\n}\r\n\r\n.ZestButton-module_splitButtonMain__F0cHX.ZestButton-module_outline__esgLq,\r\n.ZestButton-module_splitButtonMain__F0cHX.ZestButton-module_dashed__ebKYF {\r\n  border-right: none;\r\n}\r\n\r\n.ZestButton-module_force-dark__cx74D .ZestButton-module_dropdownTrigger__wqBMN.ZestButton-module_solid__cu4tr {\r\n  background-color: rgba(255, 255, 255, 0.1);\r\n}\r\n.ZestButton-module_force-dark__cx74D .ZestButton-module_dropdownTrigger__wqBMN.ZestButton-module_solid__cu4tr:hover:not(:disabled) {\r\n  background-color: rgba(255, 255, 255, 0.18);\r\n}\r\n.ZestButton-module_force-dark__cx74D .ZestButton-module_dropdownTrigger__wqBMN.ZestButton-module_text__8X1xD,\r\n.ZestButton-module_force-dark__cx74D .ZestButton-module_dropdownTrigger__wqBMN.ZestButton-module_outline__esgLq,\r\n.ZestButton-module_force-dark__cx74D .ZestButton-module_dropdownTrigger__wqBMN.ZestButton-module_dashed__ebKYF {\r\n  background-color: rgba(255, 255, 255, 0.06);\r\n}\r\n\r\n.ZestButton-module_dropdownChevron__GMkdW {\r\n  width: 0.85em;\r\n  height: 0.85em;\r\n  transition: transform var(--zest-motion-base) var(--zest-ease-spring);\r\n}\r\n\r\n.ZestButton-module_dropdownChevronOpen__-2CEj {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n.ZestButton-module_dropdownMenuContent__wIHv- {\r\n  min-width: 180px;\r\n  width: max-content;\r\n  max-width: 320px;\r\n  padding: 0.4rem;\r\n  border-radius: var(--zest-radius-md);\r\n  background: var(--zest-color-menu-bg, #ffffff);\r\n  color: var(--zest-color-menu-text, #1f2937);\r\n  box-shadow: var(--zest-shadow-menu);\r\n  border: 1px solid rgba(0, 0, 0, 0.08);\r\n  z-index: 1000;\r\n  transform-origin: var(--radix-dropdown-menu-content-transform-origin);\r\n}\r\n\r\n.ZestButton-module_dropdownMenuContent__wIHv-[data-state=\"open\"] {\r\n  animation: ZestButton-module_dropdownMenuIn__st1Yy var(--zest-motion-base) var(--zest-ease-standard);\r\n}\r\n/* Radix unmounts Content immediately on close (no forceMount is used here),\r\n   so this closing keyframe may not get a chance to visibly play in every\r\n   browser — treat it as a graceful enhancement, not a guarantee. */\r\n.ZestButton-module_dropdownMenuContent__wIHv-[data-state=\"closed\"] {\r\n  animation: ZestButton-module_dropdownMenuOut__o45vS var(--zest-motion-fast) var(--zest-ease-standard);\r\n}\r\n\r\n@keyframes ZestButton-module_dropdownMenuIn__st1Yy {\r\n  from { opacity: 0; transform: scale(0.96); }\r\n  to { opacity: 1; transform: scale(1); }\r\n}\r\n@keyframes ZestButton-module_dropdownMenuOut__o45vS {\r\n  from { opacity: 1; transform: scale(1); }\r\n  to { opacity: 0; transform: scale(0.96); }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .ZestButton-module_dropdownMenuContent__wIHv-[data-state=\"open\"],\r\n  .ZestButton-module_dropdownMenuContent__wIHv-[data-state=\"closed\"] {\r\n    animation: none;\r\n  }\r\n  .ZestButton-module_dropdownChevron__GMkdW {\r\n    transition: none;\r\n  }\r\n  .ZestButton-module_button__KDafc {\r\n    transition: background-color var(--zest-motion-base) ease,\r\n      box-shadow var(--zest-motion-base) ease,\r\n      color var(--zest-motion-base) ease,\r\n      border-color var(--zest-motion-base) ease;\r\n  }\r\n  .ZestButton-module_button__KDafc:hover:not(:disabled),\r\n  .ZestButton-module_button__KDafc:active:not(:disabled) {\r\n    transform: none;\r\n  }\r\n}\r\n\r\n.ZestButton-module_force-dark__cx74D.ZestButton-module_dropdownMenuContent__wIHv-,\r\n.ZestButton-module_dropdownMenuContent__wIHv-.ZestButton-module_force-dark__cx74D {\r\n  background: #1f2937;\r\n  color: #f3f4f6;\r\n  border-color: rgba(255, 255, 255, 0.12);\r\n}\r\n\r\n.ZestButton-module_dropdownMenuItem__7vFFl {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5em;\r\n  padding: 0.55em 0.75em;\r\n  border-radius: var(--zest-radius-sm);\r\n  cursor: pointer;\r\n  outline: none;\r\n  font-family: \"Segoe UI\", Roboto, sans-serif;\r\n  font-size: 0.9rem;\r\n}\r\n\r\n.ZestButton-module_dropdownMenuItem__7vFFl:hover,\r\n.ZestButton-module_dropdownMenuItem__7vFFl[data-highlighted] {\r\n  background: rgba(0, 0, 0, 0.06);\r\n}\r\n\r\n.ZestButton-module_force-dark__cx74D .ZestButton-module_dropdownMenuItem__7vFFl:hover,\r\n.ZestButton-module_force-dark__cx74D .ZestButton-module_dropdownMenuItem__7vFFl[data-highlighted] {\r\n  background: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.ZestButton-module_dropdownMenuItem__7vFFl.ZestButton-module_disabled__gw6y3,\r\n.ZestButton-module_dropdownMenuItem__7vFFl[data-disabled] {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.ZestButton-module_dropdownMenuItemLabel__ArKh6 {\r\n  flex: 1;\r\n}\r\n\r\n/* Mobile-first: chevron segment always meets the 44px touch-target minimum,\r\n   independent of `size`, since it's a narrow tap target next to another one. */\r\n.ZestButton-module_dropdownTrigger__wqBMN {\r\n  min-height: 44px;\r\n}\r\n\r\n@media (min-width: 769px) {\r\n  /* Desktop-aware: once mis-tapping a neighbouring segment isn't a concern,\r\n     let the chevron shrink to match the main button's own sizing. */\r\n  .ZestButton-module_dropdownTrigger__wqBMN.ZestButton-module_sm__G1vAP {\r\n    min-height: 0;\r\n    padding: 0.4em 0.6em;\r\n  }\r\n  .ZestButton-module_dropdownTrigger__wqBMN.ZestButton-module_md__Y-PMO {\r\n    min-height: 0;\r\n    padding: 0.6em 0.7em;\r\n  }\r\n  .ZestButton-module_dropdownTrigger__wqBMN.ZestButton-module_lg__AQgdf {\r\n    min-height: 0;\r\n    padding: 0.8em 0.9em;\r\n  }\r\n}\r\n\r\n";
+var styles = {"force-light":"ZestButton-module_force-light__zZTIZ","force-dark":"ZestButton-module_force-dark__cx74D","button":"ZestButton-module_button__KDafc","solid":"ZestButton-module_solid__cu4tr","outline":"ZestButton-module_outline__esgLq","text":"ZestButton-module_text__8X1xD","dashed":"ZestButton-module_dashed__ebKYF","standard":"ZestButton-module_standard__T3EGM","success":"ZestButton-module_success__XEptA","danger":"ZestButton-module_danger__nJpJ-","disabled":"ZestButton-module_disabled__gw6y3","stretch":"ZestButton-module_stretch__CTLNw","sm":"ZestButton-module_sm__G1vAP","md":"ZestButton-module_md__Y-PMO","lg":"ZestButton-module_lg__AQgdf","inner":"ZestButton-module_inner__1j2Fr","spinner":"ZestButton-module_spinner__l2hLe","spin":"ZestButton-module_spin__4asdw","content":"ZestButton-module_content__hlea3","label":"ZestButton-module_label__8x263","icon":"ZestButton-module_icon__B3DFi","animatedCheck":"ZestButton-module_animatedCheck__8K4K-","fadeIn":"ZestButton-module_fadeIn__iEave","animatedX":"ZestButton-module_animatedX__KQnt7","drawCheck":"ZestButton-module_drawCheck__3DyjT","shake":"ZestButton-module_shake__NtIjf","shakeIt":"ZestButton-module_shakeIt__ox-R3","splitButtonContainer":"ZestButton-module_splitButtonContainer__UPOGd","splitButtonMain":"ZestButton-module_splitButtonMain__F0cHX","dropdownTrigger":"ZestButton-module_dropdownTrigger__wqBMN","dropdownChevron":"ZestButton-module_dropdownChevron__GMkdW","dropdownChevronOpen":"ZestButton-module_dropdownChevronOpen__-2CEj","dropdownMenuContent":"ZestButton-module_dropdownMenuContent__wIHv-","dropdownMenuIn":"ZestButton-module_dropdownMenuIn__st1Yy","dropdownMenuOut":"ZestButton-module_dropdownMenuOut__o45vS","dropdownMenuItem":"ZestButton-module_dropdownMenuItem__7vFFl","dropdownMenuItemLabel":"ZestButton-module_dropdownMenuItemLabel__ArKh6"};
 styleInject(css_248z);
 
 // Create the Zest Context with a default empty configuration
@@ -1738,12 +1739,139 @@ const useThemeDetection = () => {
     return systemTheme;
 };
 
+const AnimatedCheckmark$1 = () => (jsxRuntimeExports.jsx("svg", { className: styles.animatedCheck, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntimeExports.jsx("path", { d: "M5 13l4 4L19 7" }) }));
+const AnimatedX$1 = () => (jsxRuntimeExports.jsxs("svg", { className: styles.animatedX, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("path", { d: "M6 6L18 18" }), jsxRuntimeExports.jsx("path", { d: "M6 18L18 6" })] }));
+const ZestDropdownMenuItem = ({ option, disabled: externallyDisabled = false, onBusyChange, }) => {
+    const { label, icon, disabled: optionDisabled = false, onClick, busyOptions = {}, successOptions = {}, confirmOptions, } = option;
+    const { handleInternally, minBusyDurationMs, showCheckmark, showFailIcon, internalBusy, wasSuccessful, wasFailed, startBusy, endBusy, } = useBusyState({ busyOptions, successOptions });
+    const { awaitingConfirm, currentChildren, startConfirmation, stopConfirmation } = useConfirmation({
+        confirmOptions,
+        originalChildren: label,
+        onConfirmFail: () => endBusy(false),
+    });
+    useEffect(() => {
+        onBusyChange?.(internalBusy);
+    }, [internalBusy, onBusyChange]);
+    const isDisabled = externallyDisabled || optionDisabled || internalBusy;
+    const handleActivate = async (e) => {
+        if (handleInternally && typeof onClick === "function") {
+            try {
+                startBusy();
+                const startTime = Date.now();
+                await onClick(e);
+                const elapsed = Date.now() - startTime;
+                const remaining = Math.max(minBusyDurationMs - elapsed, 0);
+                if (remaining > 0) {
+                    await new Promise((resolve) => setTimeout(resolve, remaining));
+                }
+                endBusy(true);
+            }
+            catch (err) {
+                console.error(err);
+                endBusy(false);
+            }
+        }
+        else if (onClick) {
+            onClick(e);
+        }
+    };
+    const handleSelect = (e) => {
+        if (isDisabled) {
+            e.preventDefault();
+            return;
+        }
+        if (awaitingConfirm) {
+            // Keep the menu open through the confirm step; only the real
+            // activation (below) decides whether the menu is allowed to close.
+            e.preventDefault();
+            stopConfirmation();
+            void handleActivate(e);
+            return;
+        }
+        if (confirmOptions) {
+            e.preventDefault();
+            if (!onClick) {
+                console.warn("ZestButton dropdown item: 'confirmOptions' provided but 'onClick' is missing.");
+            }
+            startConfirmation();
+            return;
+        }
+        if (handleInternally) {
+            // Busy items keep the row open to show progress; Radix's default
+            // close-on-select would hide the spinner/checkmark/shake feedback.
+            e.preventDefault();
+            void handleActivate(e);
+            return;
+        }
+        // Plain synchronous item: let Radix close the menu as it normally would.
+        void handleActivate(e);
+    };
+    const renderIcon = () => {
+        if (internalBusy) {
+            return (jsxRuntimeExports.jsx("span", { className: `${styles.icon} ${styles.fadeIn}`, children: jsxRuntimeExports.jsx(FaSpinner, { className: styles.spinner }) }));
+        }
+        if (wasSuccessful && showCheckmark) {
+            return (jsxRuntimeExports.jsx("span", { className: `${styles.icon} ${styles.fadeIn}`, children: jsxRuntimeExports.jsx(AnimatedCheckmark$1, {}) }));
+        }
+        if (wasFailed && showFailIcon) {
+            return (jsxRuntimeExports.jsx("span", { className: `${styles.icon} ${styles.fadeIn}`, children: jsxRuntimeExports.jsx(AnimatedX$1, {}) }));
+        }
+        if (icon) {
+            return jsxRuntimeExports.jsx("span", { className: styles.icon, children: icon });
+        }
+        return null;
+    };
+    return (jsxRuntimeExports.jsxs(DropdownMenu.Item, { className: [
+            styles.dropdownMenuItem,
+            isDisabled ? styles.disabled : "",
+            wasFailed ? styles.shake : "",
+        ]
+            .join(" ")
+            .trim(), disabled: isDisabled, onSelect: handleSelect, children: [renderIcon(), jsxRuntimeExports.jsx("span", { className: styles.dropdownMenuItemLabel, children: currentChildren })] }));
+};
+
+const ZestDropdownMenu = ({ options, ariaLabel, open, onOpenChange, disabled = false, onAnyItemBusyChange, variant, size, buttonStyle, effectiveTheme, effectiveMenuTheme, menuMinWidth, }) => {
+    const resolvedMenuTheme = effectiveMenuTheme ?? effectiveTheme;
+    const busyKeysRef = useRef(new Set());
+    const handleItemBusyChange = useCallback((key, busy) => {
+        const busyKeys = busyKeysRef.current;
+        const wasAnyBusy = busyKeys.size > 0;
+        if (busy) {
+            busyKeys.add(key);
+        }
+        else {
+            busyKeys.delete(key);
+        }
+        const isAnyBusy = busyKeys.size > 0;
+        if (isAnyBusy !== wasAnyBusy) {
+            onAnyItemBusyChange?.(isAnyBusy);
+        }
+    }, [onAnyItemBusyChange]);
+    return (jsxRuntimeExports.jsxs(DropdownMenu.Root, { open: open, onOpenChange: onOpenChange, modal: false, children: [jsxRuntimeExports.jsx(DropdownMenu.Trigger, { asChild: true, disabled: disabled, children: jsxRuntimeExports.jsx("button", { type: "button", "aria-label": ariaLabel, disabled: disabled, className: [
+                        styles.dropdownTrigger,
+                        styles[buttonStyle],
+                        styles[variant],
+                        styles[size],
+                        disabled ? styles.disabled : "",
+                        effectiveTheme === "light" ? styles["force-light"] : styles["force-dark"],
+                    ]
+                        .join(" ")
+                        .trim(), children: jsxRuntimeExports.jsx(FaChevronDown, { className: [styles.dropdownChevron, open ? styles.dropdownChevronOpen : ""]
+                            .join(" ")
+                            .trim() }) }) }), jsxRuntimeExports.jsx(DropdownMenu.Portal, { children: jsxRuntimeExports.jsx(DropdownMenu.Content, { className: [
+                        styles.dropdownMenuContent,
+                        resolvedMenuTheme === "light" ? styles["force-light"] : styles["force-dark"],
+                    ].join(" "), style: menuMinWidth !== undefined
+                        ? { minWidth: typeof menuMinWidth === "number" ? `${menuMinWidth}px` : menuMinWidth }
+                        : undefined, sideOffset: 4, align: "end", collisionPadding: 8, children: options.map((option, index) => (jsxRuntimeExports.jsx(ZestDropdownMenuItem, { option: option, disabled: disabled, onBusyChange: (busy) => handleItemBusyChange(option.key ?? index, busy) }, option.key ?? index))) }) })] }));
+};
+
 // --- Components ---
 const AnimatedCheckmark = () => (jsxRuntimeExports.jsx("svg", { className: styles.animatedCheck, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntimeExports.jsx("path", { d: "M5 13l4 4L19 7" }) }));
 const AnimatedX = () => (jsxRuntimeExports.jsxs("svg", { className: styles.animatedX, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("path", { d: "M6 6L18 18" }), jsxRuntimeExports.jsx("path", { d: "M6 18L18 6" })] }));
 const ZestButton = ({ className = "", disabled, children, onClick, zest: localZestProps, ...props }) => {
     const effectiveZestConfig = useZestConfig(localZestProps);
-    const { visualOptions = {}, busyOptions = {}, successOptions = {}, confirmOptions, isDefault = false, theme = 'system', buttonStyle = 'solid', } = effectiveZestConfig;
+    const { visualOptions = {}, busyOptions = {}, successOptions = {}, confirmOptions, isDefault = false, theme = 'system', buttonStyle = 'solid', dropdownOptions, dropdownAriaLabel = "More options", dropdownTheme, dropdownWidth, } = effectiveZestConfig;
     const { variant = "standard", size = "md", stretch = false, iconLeft, iconRight, } = visualOptions;
     const { handleInternally, minBusyDurationMs, preventRageClick, showCheckmark, showFailIcon, internalBusy, wasSuccessful, wasFailed, startBusy, endBusy, } = useBusyState({ busyOptions, successOptions });
     const { awaitingConfirm, currentChildren, startConfirmation, stopConfirmation, } = useConfirmation({
@@ -1754,6 +1882,38 @@ const ZestButton = ({ className = "", disabled, children, onClick, zest: localZe
     const buttonRef = useRef(null);
     const systemTheme = useThemeDetection();
     const effectiveTheme = theme === 'system' ? systemTheme : theme;
+    // Dropdown menus default to light regardless of the button's own theme
+    // (product preference) — dropdownTheme only kicks in once set explicitly.
+    const effectiveDropdownTheme = dropdownTheme
+        ? dropdownTheme === 'system'
+            ? systemTheme
+            : dropdownTheme
+        : 'light';
+    const hasDropdown = Boolean(dropdownOptions && dropdownOptions.length > 0);
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+    const [anyDropdownItemBusy, setAnyDropdownItemBusy] = useState(false);
+    const splitContainerRef = useRef(null);
+    const [measuredControlWidth, setMeasuredControlWidth] = useState(undefined);
+    useLayoutEffect(() => {
+        if (!hasDropdown || !splitContainerRef.current)
+            return;
+        const el = splitContainerRef.current;
+        // A width of 0 means "not actually laid out yet" (e.g. jsdom, or a
+        // display:none ancestor) rather than a real zero-width control — treat
+        // it as unavailable so the menu falls back to its own CSS default
+        // instead of being forced to a bogus 0px minimum.
+        const initialWidth = el.getBoundingClientRect().width;
+        if (initialWidth > 0)
+            setMeasuredControlWidth(initialWidth);
+        const observer = new ResizeObserver((entries) => {
+            const width = entries[0]?.contentRect.width ?? 0;
+            if (width > 0)
+                setMeasuredControlWidth(width);
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [hasDropdown]);
+    const resolvedMenuMinWidth = dropdownWidth ?? measuredControlWidth;
     const effectiveBusy = typeof props["aria-busy"] === "boolean"
         ? Boolean(props["aria-busy"])
         : handleInternally
@@ -1761,7 +1921,8 @@ const ZestButton = ({ className = "", disabled, children, onClick, zest: localZe
             : false;
     const isDisabled = disabled ||
         effectiveBusy ||
-        (preventRageClick && (wasSuccessful || wasFailed));
+        (preventRageClick && (wasSuccessful || wasFailed)) ||
+        anyDropdownItemBusy;
     const handleClick = async (e) => {
         if (preventRageClick && internalBusy)
             return;
@@ -1803,7 +1964,7 @@ const ZestButton = ({ className = "", disabled, children, onClick, zest: localZe
         }
     };
     useEffect(() => {
-        if (!isDefault || isDisabled)
+        if (!isDefault || isDisabled || dropdownOpen)
             return;
         const listener = (e) => {
             const target = e.target;
@@ -1820,7 +1981,7 @@ const ZestButton = ({ className = "", disabled, children, onClick, zest: localZe
         };
         document.addEventListener("keydown", listener);
         return () => document.removeEventListener("keydown", listener);
-    }, [isDefault, isDisabled]);
+    }, [isDefault, isDisabled, dropdownOpen]);
     const renderLeftIcon = () => {
         if (effectiveBusy) {
             return (jsxRuntimeExports.jsx("span", { className: `${styles.icon} ${styles.fadeIn}`, children: jsxRuntimeExports.jsx(FaSpinner, { className: styles.spinner }) }));
@@ -1836,7 +1997,7 @@ const ZestButton = ({ className = "", disabled, children, onClick, zest: localZe
         }
         return null;
     };
-    return (jsxRuntimeExports.jsx("button", { ref: buttonRef, className: [
+    const buttonElement = (jsxRuntimeExports.jsx("button", { ref: buttonRef, className: [
             styles.button,
             styles[buttonStyle],
             styles[variant],
@@ -1845,8 +2006,13 @@ const ZestButton = ({ className = "", disabled, children, onClick, zest: localZe
             isDisabled ? styles.disabled : "",
             wasFailed ? styles.shake : "",
             effectiveTheme === 'light' ? styles['force-light'] : styles['force-dark'],
+            hasDropdown ? styles.splitButtonMain : "",
             className,
         ].join(" "), disabled: isDisabled, "aria-busy": effectiveBusy, onClick: handleConfirmClick, ...props, children: jsxRuntimeExports.jsxs("span", { className: styles.inner, children: [renderLeftIcon(), jsxRuntimeExports.jsxs("span", { className: styles.content, children: [currentChildren, iconRight && jsxRuntimeExports.jsx("span", { className: styles.icon, children: iconRight })] })] }) }));
+    if (!hasDropdown) {
+        return buttonElement;
+    }
+    return (jsxRuntimeExports.jsxs("div", { className: styles.splitButtonContainer, ref: splitContainerRef, children: [buttonElement, jsxRuntimeExports.jsx(ZestDropdownMenu, { options: dropdownOptions, ariaLabel: dropdownAriaLabel, open: dropdownOpen, onOpenChange: setDropdownOpen, disabled: isDisabled, onAnyItemBusyChange: setAnyDropdownItemBusy, variant: variant, size: size, buttonStyle: buttonStyle, effectiveTheme: effectiveTheme, effectiveMenuTheme: effectiveDropdownTheme, menuMinWidth: resolvedMenuMinWidth })] }));
 };
 
 const ZestButtonConfigProvider = ({ config, children }) => {