jattac.libs.web.zest-button 1.4.0 → 1.5.1

package/dist/index.d.ts

@@ -63,6 +63,10 @@ interface ZestCustomProps {
     semanticType?: SemanticType;
     dropdownOptions?: ZestDropdownOption[];
     dropdownAriaLabel?: string;
+    /** Theme for the dropdown menu panel, independent of the button's own `theme`; defaults to `'system'` (follows the OS/browser `prefers-color-scheme`) 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

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import require$$0, { useContext, useState, useRef, useEffect, useCallback } from 'react';
+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';
@@ -1385,8 +1385,8 @@ function styleInject(css, ref) {
   }
 }
 
-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/* 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}\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\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: 8px;\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;\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}\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}\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}\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/* .solid/.text have no border of their own — add an explicit divider so the\r\n   two segments still read as one control. .outline/.dashed already carry a\r\n   full border via their own base rule, which already serves as the divider. */\r\n.ZestButton-module_dropdownTrigger__wqBMN.ZestButton-module_solid__cu4tr {\r\n  border-left: 1px solid rgba(255, 255, 255, 0.3);\r\n}\r\n.ZestButton-module_dropdownTrigger__wqBMN.ZestButton-module_text__8X1xD {\r\n  border-left: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.ZestButton-module_dropdownChevron__GMkdW {\r\n  width: 0.85em;\r\n  height: 0.85em;\r\n  transition: transform 0.2s ease;\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: 8px;\r\n  background: var(--zest-color-menu-bg, #ffffff);\r\n  color: var(--zest-color-menu-text, #1f2937);\r\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);\r\n  border: 1px solid rgba(0, 0, 0, 0.08);\r\n  z-index: 1000;\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: 6px;\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-","dropdownMenuItem":"ZestButton-module_dropdownMenuItem__7vFFl","dropdownMenuItemLabel":"ZestButton-module_dropdownMenuItemLabel__ArKh6"};
+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   `.solid` uses `background-image` (not `background-color`) for its tint:\r\n   a two-class selector like `.dropdownTrigger.solid` always beats the\r\n   one-class `.solid`/`.solid.success`/`.solid.danger` rules regardless of\r\n   source order, so setting `background-color` here would fully replace\r\n   the variant's colour instead of darkening it — collapsing e.g. a blue\r\n   button's chevron segment to near-invisible on a light page. An image\r\n   layer composites on top of whatever colour is already set instead. */\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-image: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16));\r\n}\r\n.ZestButton-module_dropdownTrigger__wqBMN.ZestButton-module_solid__cu4tr:hover:not(:disabled) {\r\n  background-image: linear-gradient(rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.26));\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-image: linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14));\r\n}\r\n.ZestButton-module_force-dark__cx74D .ZestButton-module_dropdownTrigger__wqBMN.ZestButton-module_solid__cu4tr:hover:not(:disabled) {\r\n  background-image: linear-gradient(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.24));\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/* One-time discoverability cue: a diagonal light streak sweeps across the\r\n   chevron segment when it first mounts, so the \"there's more here\"\r\n   affordance can't be missed on first paint. Relies on `.button`'s own\r\n   `position: relative` + `overflow: hidden` (now shared via the `button`\r\n   class added to this trigger) to anchor and clip the streak. Runs once —\r\n   a plain CSS animation on an element plays automatically when that\r\n   element is inserted into the DOM, so no JS/state is needed to trigger it. */\r\n.ZestButton-module_dropdownTrigger__wqBMN::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(\r\n    115deg,\r\n    transparent 30%,\r\n    rgba(255, 255, 255, 0.65) 48%,\r\n    transparent 66%\r\n  );\r\n  background-size: 250% 250%;\r\n  background-position: -120% -120%;\r\n  pointer-events: none;\r\n  animation: ZestButton-module_dropdownTriggerDiscoverySheen__NzZA8 1.3s var(--zest-ease-standard) 0.4s 1 both;\r\n}\r\n\r\n@keyframes ZestButton-module_dropdownTriggerDiscoverySheen__NzZA8 {\r\n  0% {\r\n    background-position: -120% -120%;\r\n    opacity: 1;\r\n  }\r\n  55% {\r\n    opacity: 1;\r\n  }\r\n  100% {\r\n    background-position: 120% 120%;\r\n    opacity: 0;\r\n  }\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_dropdownTrigger__wqBMN::before {\r\n    animation: none;\r\n    content: 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","dropdownTriggerDiscoverySheen":"ZestButton-module_dropdownTriggerDiscoverySheen__NzZA8","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
@@ -1830,7 +1830,8 @@ const ZestDropdownMenuItem = ({ option, disabled: externallyDisabled = false, on
             .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, }) => {
+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;
@@ -1847,6 +1848,7 @@ const ZestDropdownMenu = ({ options, ariaLabel, open, onOpenChange, disabled = f
         }
     }, [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.button,
                         styles.dropdownTrigger,
                         styles[buttonStyle],
                         styles[variant],
@@ -1859,8 +1861,10 @@ const ZestDropdownMenu = ({ options, ariaLabel, open, onOpenChange, disabled = f
                             .join(" ")
                             .trim() }) }) }), jsxRuntimeExports.jsx(DropdownMenu.Portal, { children: jsxRuntimeExports.jsx(DropdownMenu.Content, { className: [
                         styles.dropdownMenuContent,
-                        effectiveTheme === "light" ? styles["force-light"] : styles["force-dark"],
-                    ].join(" "), 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))) }) })] }));
+                        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 ---
@@ -1868,7 +1872,7 @@ const AnimatedCheckmark = () => (jsxRuntimeExports.jsx("svg", { className: style
 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', dropdownOptions, dropdownAriaLabel = "More options", } = 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({
@@ -1879,9 +1883,37 @@ const ZestButton = ({ className = "", disabled, children, onClick, zest: localZe
     const buttonRef = useRef(null);
     const systemTheme = useThemeDetection();
     const effectiveTheme = theme === 'system' ? systemTheme : theme;
+    // Dropdown menus follow the OS/browser theme by default, independently of
+    // the button's own `theme` — mirrors effectiveTheme's own 'system' handling
+    // above. dropdownTheme has no destructure-time default because unset must
+    // behave identically to 'system', not to a static literal.
+    const resolvedDropdownTheme = dropdownTheme ?? 'system';
+    const effectiveDropdownTheme = resolvedDropdownTheme === 'system' ? systemTheme : resolvedDropdownTheme;
     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
@@ -1980,7 +2012,7 @@ const ZestButton = ({ className = "", disabled, children, onClick, zest: localZe
     if (!hasDropdown) {
         return buttonElement;
     }
-    return (jsxRuntimeExports.jsxs("div", { className: styles.splitButtonContainer, 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 })] }));
+    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 }) => {