pixelize-design-library 2.4.2 → 3.0.0

package/README.md

@@ -2,6 +2,13 @@
 
 A comprehensive React component library built with TypeScript, providing a rich set of UI components for modern web applications.
 
+> **Building with this library (including via an AI assistant)?** Read
+> [COMPONENT-GOTCHAS.md](./COMPONENT-GOTCHAS.md) first — it documents known silent-failure traps
+> and which near-duplicate component to pick for what. It ships with this package, so it's
+> available at `node_modules/pixelize-design-library/COMPONENT-GOTCHAS.md` too.
+> Building a whole screen? [DESIGN-GUIDE.md](./DESIGN-GUIDE.md) (also shipped) covers page anatomy,
+> spacing, type, color roles and the four page states.
+
 ## Features
 
 - 🎨 **Modern Design System** - Consistent and beautiful components
@@ -15,24 +22,39 @@ A comprehensive React component library built with TypeScript, providing a rich
 
 Before you begin, ensure you have the following installed:
 
-- Node.js (v16 or higher)
+- Node.js (v18 or higher)
 - npm (v7 or higher) or yarn
-- React (v16.8 or higher)
+- React and React DOM `^18.3.1`
 
 ## Installation
 
-Install the library and its peer dependencies:
+Install the library, then its peer dependencies:
 
 ```bash
-npm install pixelize-design-library pixelize-authenticator
+npm install pixelize-design-library
 ```
 
-or with yarn:
-
 ```bash
-yarn add pixelize-design-library pixelize-authenticator
+npm install @chakra-ui/react@^2.8.2 @emotion/react@^11.11.4 @emotion/styled@^11.11.5 framer-motion@^10.18.0
+```
+
+`react` and `react-dom` are peers pinned to `^18.3.1`. **React 19 is not supported** — the pin
+tracks Chakra 2.8.
+
+### Versioning
+
+Everything ships on the `latest` dist-tag. Stable `3.x` takes a caret range:
+
+```json
+"pixelize-design-library": "^3.0.0"
 ```
 
+There are no prereleases from 3.0.0 onward. The old `2.4.2-beta.N` line was folded into 3.0.0; if you are
+still pinned to one, change the pin to `3.0.0`.
+
+What changed in each release, and what breaks in 3.0.0:
+[CHANGELOG.md](CHANGELOG.md).
+
 ## Quick Start
 
 ```tsx
@@ -44,7 +66,7 @@ function App() {
     <div>
       <Card>
         <TextInput placeholder="Enter your name" />
-        <Button variant="primary">Submit</Button>
+        <Button variant="solid" colorScheme="primary">Submit</Button>
       </Card>
     </div>
   );
@@ -53,6 +75,27 @@ function App() {
 export default App;
 ```
 
+## Theming and filled surfaces
+
+Nine brand presets with light/dark palettes. Wrap your app in `PixelizeThemeProvider` and read tokens
+via `useCustomTheme()`.
+
+**Do not** pair a scale's `[500]` swatch with `colors.white` or `onPrimary` for custom filled UI —
+white often fails WCAG on `[500]` and ink falls back to black (e.g. black text on red badges). Use
+library components (`Button`, `Tag`, `Badge`) or:
+
+```ts
+import { resolveFilledSurface, useCustomTheme } from "pixelize-design-library";
+
+const { colors } = useCustomTheme();
+const solid = resolveFilledSurface(colors.red, colors);
+// solid.fill, solid.color, solid.hoverFill, solid.hoverColor, …
+```
+
+Full rules for app developers and AI assistants: [`src/Theme/THEME-CONTRACT.md`](src/Theme/THEME-CONTRACT.md)
+(§ *Filled surfaces in consumer apps*). After upgrading, rebuild the library (`npm run build`) and run
+`npm run pixelize` in consumer frontends.
+
 ## Components
 
 ### Layout & Navigation
@@ -68,22 +111,24 @@ export default App;
 - **ButtonGroupIcon** - Icon-based button group
 - **Checkbox** - Checkbox input control
 - **DatePicker** - Date selection component
-- **Dropdown** - Dropdown selection component
-- **MultiSelect** - Multi-selection dropdown
+- **Dropdown** - Action menu (a menu button, not a value picker)
+- **MultiSelect** - Typed email-chip input (no options list)
 - **NumberInput** - Numeric input field
 - **PinInput** - PIN/OTP input component
 - **RadioButton** - Radio button input
 - **RadioButtonGroup** - Group of radio buttons
+- **RangeSlider** - Single or dual-thumb slider with tick marks
 - **Search** - Search input component
 - **SearchSelect** - Searchable select dropdown
-- **Select** - Single selection dropdown
-- **Switch** - Toggle switch component
+- **Select** - Native or themed popup picker, single or multi, optionally searchable
+- **ToggleSwitch** - On/off switch (`Switch` is a deprecated two-option pill)
 - **TextInput** - Text input field
 - **InputTextArea** - Multi-line text input
-- **NoteTextArea** - Rich text editor
+- **NoteTextArea** - Textarea with a title and file attach (not rich text; use `Editor`)
 
 ### Data Display
 - **Table** - Data table component
+- **MediaViewer** - Full-screen viewer for images, video, audio, PDF, Office, text and archives
 - **Timeline** - Timeline visualization
 - **Skeletons** - Loading skeleton components
 - **ProgressBar** - Progress indicator
@@ -93,13 +138,18 @@ export default App;
 - **ApexPieChart** - Pie chart component
 
 ### Feedback & Status
-- **AlertDialog** - Alert dialog component *(New)*
-- **Loading** - Loading spinner component
+- **AlertDialog** - Confirm dialog for destructive actions
+- **ConfirmDialog** - Cancel/Confirm prompt, with optional typed confirmation
+- **NotificationBell** - Badge/bell button
+  - **NotificationPanel** / **NotificationList** / **NotificationItem** - the tray, its body and one row
+- **Loading** - Blocking loading overlay (`Backdrop` for a lighter scrim)
+- **Spinner** - Themed inline spinner
 - **Toaster** - Toast notification system
   - **useToaster** - Hook for toast management
 - **ToolTip** - Tooltip component
 
 ### User & Profile
+- **Avatar** / **AvatarGroup** - Fill derived from `name`, so it follows brand and dark mode
 - **ProfileCard** - User profile card
 - **ProfilePhotoViewer** - Profile photo viewer
 - **VerifyEmailOtp** - Email verification component
@@ -107,6 +157,9 @@ export default App;
 ### Editor
 - **Editor** - Rich text editor component
 
+The lists above are the common components. Every export, including the helpers, hooks and tokens, is
+in the [Exports index](#exports-index).
+
 ## Usage Examples
 
 ### Basic Button Usage
@@ -117,12 +170,8 @@ import { Button } from 'pixelize-design-library';
 function MyComponent() {
   return (
     <div>
-      <Button variant="primary" size="medium">
-        Primary Button
-      </Button>
-      <Button variant="secondary" size="large">
-        Secondary Button
-      </Button>
+      <Button variant="solid" colorScheme="primary">Primary Button</Button>
+      <Button variant="outline" colorScheme="gray">Secondary Button</Button>
     </div>
   );
 }
@@ -131,6 +180,7 @@ function MyComponent() {
 ### Form with Validation
 
 ```tsx
+import { useState } from 'react';
 import { TextInput, Button, Card } from 'pixelize-design-library';
 
 function LoginForm() {
@@ -143,17 +193,17 @@ function LoginForm() {
         label="Email"
         type="email"
         value={email}
-        onChange={setEmail}
+        onChange={(e) => setEmail(e.target.value)}
         required
       />
       <TextInput
         label="Password"
         type="password"
         value={password}
-        onChange={setPassword}
+        onChange={(e) => setPassword(e.target.value)}
         required
       />
-      <Button variant="primary" type="submit">
+      <Button variant="solid" colorScheme="primary" type="submit">
         Login
       </Button>
     </Card>
@@ -167,14 +217,15 @@ function LoginForm() {
 import { Table } from 'pixelize-design-library';
 
 const columns = [
-  { key: 'name', title: 'Name' },
-  { key: 'email', title: 'Email' },
-  { key: 'role', title: 'Role' }
+  { id: 'name', label: 'Name' },
+  { id: 'email', label: 'Email' },
+  { id: 'role', label: 'Role' }
 ];
 
+// every row needs a unique id
 const data = [
-  { name: 'John Doe', email: 'john@example.com', role: 'Admin' },
-  { name: 'Jane Smith', email: 'jane@example.com', role: 'User' }
+  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' }
 ];
 
 function DataTable() {
@@ -182,8 +233,8 @@ function DataTable() {
     <Table
       columns={columns}
       data={data}
-      pagination
-      searchable
+      paginationMode="client"
+      isGlobalSearch
     />
   );
 }
@@ -191,8 +242,8 @@ function DataTable() {
 
 ## Theming
 
-The library ships **7 brand themes** (`lavender`, `meadow`, `radiant`, `skyline`, `slate`,
-`emerald`, `rosewood`), each with a **light and a dark palette**.
+The library ships **9 brand themes** (`lavender`, `meadow`, `radiant`, `skyline`, `slate`,
+`emerald`, `rosewood`, `storefront`, `zinc`), each with a **light and a dark palette**.
 
 ### Existing apps (unchanged)
 
@@ -233,6 +284,9 @@ function Root() {
 | `defaultMode` | `"system"` | `"light"` \| `"dark"` \| `"system"` |
 | `storageKey` | `"pixelize-theme"` | localStorage key |
 | `disablePersistence` | `false` | Don't read/write localStorage |
+| `onBrandChange` / `onModeChange` | — | Fire on user-driven changes only |
+| `themeOverrides` | — | Chakra theme object merged over the brand theme |
+| `reducedMotion` | `"components"` | `"global"` applies one reduced-motion rule to the whole document |
 
 ### Reading or changing the theme in code
 
@@ -276,7 +330,7 @@ const myDark = buildDarkPalette(lightPalettes.emerald);
 All components are built with TypeScript and include full type definitions:
 
 ```tsx
-import { ButtonProps } from 'pixelize-design-library';
+import { Button, ButtonProps } from 'pixelize-design-library';
 
 interface CustomButtonProps extends ButtonProps {
   customProp?: string;
@@ -330,11 +384,41 @@ transpiled by your bundler rather than imported by bare Node. In Next.js:
 module.exports = { transpilePackages: ['pixelize-design-library'] };
 ```
 
+## Exports index
+
+Every value the package root exports, so an export is never invisible to a developer or an LLM that
+only has this package. For how to use a component see [DESIGN-GUIDE.md](./DESIGN-GUIDE.md) and
+[COMPONENT-GOTCHAS.md](./COMPONENT-GOTCHAS.md); props are documented in the `*Props` types. This
+block is generated: after adding or removing an export run
+`UPDATE_README_EXPORTS=1 npx jest src/readmeExportsIndex.test.ts --coverage=false`.
+
+<!-- exports-index:start -->
+
+**Components and primitives (256)**
+
+`Accordian`, `Accordion`, `AddressCard`, `AddressCardGroup`, `Alert`, `AlertDescription`, `AlertDialog`, `AlertIcon`, `AlertTitle`, `ApexAreaChart`, `ApexBarChart`, `ApexLineChart`, `ApexPieChart`, `ApexPolarChart`, `ApexRadialChart`, `AppSwitcher`, `AppearanceSettings`, `AudioRecorder`, `Avatar`, `AvatarGroup`, `Backdrop`, `Badge`, `BagBar`, `Box`, `Breadcrumbs`, `BulkSelectionBar`, `Button`, `ButtonGroupIcon`, `CalendarGrid`, `Card`, `CartItem`, `Center`, `ChakraProvider`, `Checkbox`, `ChoiceCard`, `ChoiceCardGroup`, `CircularProgress`, `Collapse`, `ConfirmDialog`, `ContactForm`, `Container`, `CopyButton`, `CouponField`, `CustomModulesTable`, `DatePicker`, `DescriptionList`, `DetailSections`, `Divider`, `Drawer`, `DrawerBody`, `DrawerFooter`, `DrawerHeader`, `Dropdown`, `Editor`, `EmptyState`, `ErrorState`, `FeedbackForm`, `FieldMessage`, `FieldSelectModal`, `FilePreview`, `FilePreviewTrigger`, `FileUpload`, `FileUploader`, `FilterBar`, `FilterSidebar`, `FilteredEmptyState`, `Flex`, `FormControl`, `FormDrawer`, `FormErrorMessage`, `FormField`, `FormHelperText`, `FormLabel`, `FormWrapper`, `Grid`, `GridItem`, `Header`, `HeaderActions`, `Heading`, `Hide`, `Icon`, `IconButton`, `Image`, `InputSwitch`, `InputTextArea`, `KanbanActions`, `KanbanBoard`, `Kbd`, `KbdShortcut`, `LauncherSearchEngine`, `LauncherTrigger`, `LazyWrapper`, `LimitReachedModal`, `Link`, `List`, `ListIcon`, `ListItem`, `Loading`, `MediaAudioPlayer`, `MediaDocumentStage`, `MediaGallery`, `MediaImageViewer`, `MediaLightbox`, `MediaScrubber`, `MediaStatusPanel`, `MediaVideoPlayer`, `MediaViewer`, `Menu`, `MenuButton`, `MenuDivider`, `MenuGroup`, `MenuItem`, `MenuItemOption`, `MenuList`, `MenuOptionGroup`, `Modal`, `ModalBody`, `ModalFooter`, `ModalHeader`, `MoreItems`, `MultiSelect`, `NavLauncher`, `NavigationBar`, `NewTabLink`, `NoteTextArea`, `Notification`, `NotificationBell`, `NotificationItem`, `NotificationList`, `NotificationPanel`, `NumberInput`, `OffersList`, `OptionChip`, `OrderStatusTimeline`, `OrderSummary`, `OrderedList`, `OrgSwitcher`, `OrganizationDetails`, `OverflowToolTip`, `PageHeader`, `Pagination`, `PaymentCard`, `PaymentOption`, `PaymentOptionGroup`, `PdfViewer`, `PersonChip`, `PhoneNumberInput`, `PinInput`, `PinToggle`, `PincodeChecker`, `PixelizeThemeProvider`, `PlanBadge`, `PlanPill`, `Popover`, `PopoverArrow`, `PopoverBody`, `PopoverCloseButton`, `PopoverContent`, `PopoverFooter`, `PopoverHeader`, `PopoverTrigger`, `Portal`, `PriceBlock`, `ProductBadges`, `ProductCard`, `ProductCardGrid`, `ProductCardSkeleton`, `ProductDetails`, `ProfileCard`, `ProfileCardBody`, `ProfileCardFooter`, `ProfileCardHeader`, `ProfilePhotoViewer`, `ProgressBar`, `QuantityStepper`, `QueryStateBoundary`, `QuickAddSheet`, `RadioButton`, `RadioButtonGroup`, `RangeSlider`, `Rating`, `Reorder`, `ReviewList`, `ReviewSummary`, `RolesPermission`, `SaveBar`, `ScrollToTop`, `ScrollbarBox`, `Search`, `SearchSelect`, `SectionRail`, `SegmentedControl`, `Select`, `SelectSearch`, `SelectV2`, `SettingRow`, `SettingsSection`, `Show`, `SideBar`, `SignInActivityTable`, `SimpleGrid`, `Skeletons`, `SkipLink`, `Slider`, `Spacer`, `SpecTable`, `Spinner`, `Stack`, `StageItem`, `StageProgress`, `StatCard`, `StatusTag`, `StickyBuyBar`, `StockStatus`, `Switch`, `Tab`, `TabList`, `TabPanel`, `TabPanels`, `Table`, `TableContainer`, `TableRoot`, `TableToggle`, `Tabs`, `Tag`, `TagInput`, `Tbody`, `Td`, `Text`, `TextInput`, `Tfoot`, `Th`, `Thead`, `ThemeSwitcher`, `ThemesList`, `TimePicker`, `Timeline`, `Toaster`, `ToggleSwitch`, `ToolTip`, `Tr`, `TrustBadges`, `UnorderedList`, `UpgradeButton`, `UserDetails`, `VariantSelector`, `VerifyEmailOtp`, `VisuallyHidden`, `WishlistToggle`, `Wizard`, `WizardDialog`, `WorkspaceTray`, `WorkspaceTrayPreview`, `WorkspaceWindow`, `Wrap`, `WrapItem`
+
+**Hooks (18)**
+
+`useAnchoredPanelHeight`, `useAppSwitcherShortcut`, `useBreakpointValue`, `useChartTheme`, `useCustomTheme`, `useDebouncedCallback`, `useDebouncedValue`, `useDisclosure`, `useFieldIds`, `useFileViewer`, `useFontSizeSync`, `useIsTruncated`, `useMediaQuery`, `usePrefersReducedMotion`, `useSidebarPrefs`, `useThemeMode`, `useToaster`, `useToken`
+
+**Constants (45)**
+
+`AA_NON_TEXT`, `AA_NORMAL_TEXT`, `ACCENT_GRADIENT`, `AVATAR_SEEDS`, `BORDER_WIDTHS`, `CALENDAR_DAY_CLASS`, `CATEGORICAL_SERIES`, `CONTROL_SIZES`, `CONTROL_SIZE_NAMES`, `DARK_CANVAS_LUMINANCE`, `DAY_STATE_KEYS`, `DEFAULT_CONTROL_SIZE`, `DEFAULT_DATE_FALLBACK`, `DEFAULT_FONT_SIZE`, `DISABLED_OPACITY`, `EMAIL_REGEX`, `FOCUS_HALO_WIDTH`, `FOCUS_RING_WIDTH`, `FOCUS_VISIBLE_OVER_STATE`, `FONT_SIZE_OPTIONS`, `LOW_STOCK_THRESHOLD`, `MAX_ZOOM`, `MIN_ZOOM`, `MOTION_BEZIER`, `MOTION_EASE`, `MOTION_EASE_IN`, `MOTION_EASE_OUT`, `MOTION_KEEP_CLASS`, `MOTION_LOOP_MS`, `MOTION_MS`, `MOTION_PRESS_SCALE`, `NUMERIC_TEXT`, `OVERLAY_BLUR`, `PIXELIZE_SUITE`, `PLAYBACK_SPEEDS`, `RADIUS_ROLE`, `RAISED_OVERLAY`, `REDUCED_MOTION_QUERY`, `SCRIM_OPACITY`, `SCROLLBAR_WIDTH`, `SEEK_STEP_SECONDS`, `STATUS_INK`, `TEXT_STYLES`, `TONES`, `ZOOM_STEP`
+
+**Helpers and tokens (185)**
+
+`HStack`, `VStack`, `accentTextOnCanvas`, `accentTextOnPlanes`, `appInitials`, `avatarFillFor`, `avatarScaleKeyFor`, `bandOn`, `brandThemes`, `buildDarkPalette`, `buildFileItems`, `buildFocusRing`, `buildMediaItems`, `buildSuiteApps`, `buildSurfaceRaised`, `cardRule`, `chartAxisLabelColor`, `chartInk`, `chartMode`, `chipBorder`, `chipFill`, `chipHtml`, `chipify`, `clearChunkReloadGuard`, `compositeOver`, `contrastRatio`, `controlSizeStyles`, `countMedia`, `createAccountHandoff`, `createEnumLabelResolver`, `darkPalettes`, `darkerFillRung`, `debounce`, `default`, `defaultMediaAudioPlayerLabels`, `defaultMediaDocumentStageLabels`, `defaultMediaGalleryLabels`, `defaultMediaImageViewerLabels`, `defaultMediaLightboxLabels`, `defaultMediaVideoPlayerLabels`, `defaultMediaViewerLabels`, `defaultPaginationLabels`, `defaultValidationMessages`, `describeDayStates`, `discountAmount`, `discountPercent`, `downloadBlob`, `extendTheme`, `extractTokens`, `fieldControlStyles`, `fieldLabelStyles`, `fieldMessageStyles`, `fieldSurfaces`, `fieldToken`, `fileKind`, `filterApps`, `findVariant`, `firstAvailableSelection`, `firstInvalidStep`, `flattenScreens`, `focusRingShadow`, `focusVisibleRing`, `focusVisibleStyles`, `formatCount`, `formatDate`, `formatDateRange`, `formatDateTime`, `formatPlanElapsed`, `formatPlanExpiry`, `formatPlanRemaining`, `formatPrice`, `formatRelativeTime`, `formatShortcut`, `getApiErrorMessage`, `getApiErrorStatus`, `getCategoricalSeriesColors`, `getDefaultSeriesColors`, `globalScrollbarStyles`, `gradientCss`, `groupConsecutive`, `hexToHsl`, `hexToRgb`, `hexToRgba`, `highlightSegments`, `hslToHex`, `hslToRgb`, `humanize`, `initialsFor`, `inkSafeGradient`, `inkSafeGradientToken`, `installPreloadErrorReload`, `isAllowedReturnUrl`, `isChunkLoadError`, `isControlSize`, `isDarkCanvas`, `isDayStateKey`, `isFontSize`, `isOptionAvailable`, `isTone`, `labelOnFill`, `labelOnSeries`, `lazyWithRetry`, `liftToContrast`, `lightPalettes`, `listRowBackgrounds`, `matchesShortcut`, `meetsBodyText`, `mergeRefs`, `mix`, `motionTransition`, `onFilled`, `onGradient`, `optionRowCursorSx`, `optionRowDescriptionInk`, `optionRowFill`, `optionRowInk`, `optionRowWeight`, `overlayScrim`, `overlayScrimStyles`, `palettes`, `pickAccentText`, `placeholderInk`, `placeholderInkOn`, `planPreview`, `priceRange`, `rafThrottle`, `raisedRule`, `recessOn`, `reducedMotionSx`, `relativeLuminance`, `remainingStock`, `resolveAvatarColorway`, `resolveAvatarFill`, `resolveDayStateVisual`, `resolveFilledSurface`, `resolveFontSize`, `resolveGradient`, `resolveMediaUrl`, `resolvePlanBadge`, `resolveReturnUrl`, `resolveSoftTone`, `resolveStatusTone`, `resolveSuiteApps`, `rgbToHex`, `rgbToHsl`, `ruleOn`, `safeFileName`, `scrollbarStyles`, `searchLauncher`, `searchLauncherSections`, `sectionizeByDay`, `selectionComplete`, `serializeChips`, `setRef`, `settleBetween`, `shadowsFor`, `solidFillRung`, `splitMonthsAndDays`, `statusGradient`, `stockState`, `themeNames`, `toCsv`, `toWords`, `toneInk`, `toneScale`, `toneToColorScheme`, `toneToSemantic`, `tooltipSurface`, `transitionFor`, `unitPrice`, `unknownTokens`, `validateEmail`, `validateFile`, `validateFileSize`, `validateFileType`, `validatePassword`, `validatePositiveNumber`, `validateRequired`, `validateVideoFile`, `validateVideoFileType`, `validateYoutubeUrl`, `withFocusRing`, `withLightness`, `withOutlineRung`, `wizardTransition`
+
+<!-- exports-index:end -->
+
 ## Demo app
 
 `npm start` runs a local component explorer on `http://localhost:5173` — every exported
 component on its own page, with live variants, an interactive playground for editing props,
-and a generated props reference.
+and a generated props reference. The **Page examples** section shows full screens (dashboard,
+records list, record detail, settings, pipeline, inbox, app launcher, wizard, template editor,
+storefront) built only from library exports, each with its loading, empty and error states.
 
 ```bash
 npm install

package/dist/Components/Accordion/Accordion.d.ts

@@ -1,3 +1,4 @@
 import { AccordionProps } from "./AccordionProps";
+/** Chakra Accordion wrapper for header/content pairs; FilterSidebar composes this directly for its collapsible filter sections. */
 declare const Accordion: ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
 export default Accordion;

package/dist/Components/Accordion/Accordion.js

@@ -6,7 +6,11 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
 const accordionColors_1 = require("./accordionColors");
+const HEADER_ACTION_RIGHT = "3.25rem";
+/** Chakra Accordion wrapper for header/content pairs; FilterSidebar composes this directly for its collapsible filter sections. */
 const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const isDark = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main);
@@ -14,20 +18,20 @@ const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion,
     const headingColor = colors.text[800];
     const bodyColor = colors.text[600];
     const { expandedBg, softHover } = (0, react_1.useMemo)(() => (0, accordionColors_1.getAccordionHoverColors)(colors, isDark), [colors, isDark]);
+    const focusRing = (0, react_1.useMemo)(() => (0, accordionColors_1.accordionFocusRing)(colors), [colors]);
     return ((0, jsx_runtime_1.jsx)(react_2.Accordion, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
             var _a;
-            return ((0, jsx_runtime_1.jsx)(react_2.AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "xl", bg: colors.background[50], mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: colors.boxborder[200] }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
-                    var _a, _b, _c;
-                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { children: (0, jsx_runtime_1.jsxs)(react_2.AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: "background 0.15s ease", _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: {
-                                        boxShadow: "none",
-                                        outline: `0.125rem solid ${colors.primary[300]}`,
-                                        outlineOffset: "-0.125rem",
-                                    }, ...item.buttonProps, sx: {
-                                        ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.buttonStyle,
-                                        "&:hover": {
-                                            ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.hoverbuttonStyle,
-                                        },
-                                    }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "md", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease, color 0.2s ease, background 0.2s ease", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.panelStyle, children: item.content })] }));
+            return ((0, jsx_runtime_1.jsx)(react_2.AccordionItem, { border: "1px solid", borderColor: border, borderRadius: "xl", bg: colors.background[50], boxShadow: "none", mb: 3, overflow: "hidden", _last: { mb: 0 }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
+                    var _a, _b, _c, _d, _e;
+                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "h2", position: item.headerAction ? "relative" : undefined, sx: item.headerAction
+                                    ? { "&:hover > button": { background: isExpanded ? expandedBg : softHover, ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.hoverbuttonStyle } }
+                                    : undefined, children: [(0, jsx_runtime_1.jsxs)(react_2.AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "sm", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: focusRing, ...item.buttonProps, sx: {
+                                            ...(0, motion_2.reducedMotionSx)(),
+                                            ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.buttonStyle,
+                                            "&:hover": {
+                                                ...(_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.hoverbuttonStyle,
+                                            },
+                                        }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "lg", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: (0, motion_1.transitionFor)(["transform", "color", "background-color"], "base"), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }), item.headerAction && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", top: "50%", right: HEADER_ACTION_RIGHT, transform: "translateY(-50%)", align: "center", sx: (_d = item.customStyles) === null || _d === void 0 ? void 0 : _d.headerActionStyle, children: item.headerAction }))] }), (0, jsx_runtime_1.jsx)(react_2.AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "sm", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.panelStyle, children: item.content })] }));
                 } }, idx));
         }) }));
 };

package/dist/Components/Accordion/AccordionProps.d.ts

@@ -1,15 +1,31 @@
 import { AccordionProps as ChakraAccordionProps, AccordionItemProps, AccordionButtonProps, AccordionPanelProps } from "@chakra-ui/react";
+/** Chakra's AccordionProps plus the header/content rows to render; each row can override its own button/panel/item styles. */
 export type AccordionProps = ChakraAccordionProps & {
+    /** One entry per accordion row, rendered in order. */
     items: {
+        /** Always-visible content of the row's toggle button. */
         header: React.ReactNode;
+        /** Panel body, shown while the row is expanded. */
         content: React.ReactNode;
+        /** Spread after the built-in style props (incl. `_hover`) — `bg`/`_hover` here replace, not merge, the expanded/hover highlight. */
         buttonProps?: AccordionButtonProps;
+        /** A control over the header's trailing edge, beside the button (a button inside a button is invalid); the header hover stays lit while the pointer is on it. Reserve its width in `header`. */
+        headerAction?: React.ReactNode;
+        /** Props spread onto the row's panel. */
         panelProps?: AccordionPanelProps;
+        /** Props spread onto the row's item wrapper. */
         itemProps?: AccordionItemProps;
+        /** Inline style overrides per part of this row. */
         customStyles?: {
+            /** Inline style for the header button. */
             buttonStyle?: React.CSSProperties;
+            /** Inline style applied to the header button on hover. */
             hoverbuttonStyle?: React.CSSProperties;
+            /** Overrides the action's default `right` (button padding + chevron slot); set it when `buttonStyle` changes the button padding. */
+            headerActionStyle?: React.CSSProperties;
+            /** Inline style for the panel. */
             panelStyle?: React.CSSProperties;
+            /** Inline style for the item wrapper. */
             itemStyle?: React.CSSProperties;
         };
     }[];

package/dist/Components/Accordion/accordionColors.d.ts

@@ -3,3 +3,9 @@ export declare const getAccordionHoverColors: (colors: PaletteProps, isDark: boo
     expandedBg: string;
     softHover: string;
 };
+/** The Button's two-tone `focusRing`, drawn inset because the item clips overflow. */
+export declare const accordionFocusRing: (colors: Pick<PaletteProps, "focusRing">) => {
+    outline: string;
+    outlineOffset: string;
+    boxShadow: string;
+};

package/dist/Components/Accordion/accordionColors.js

@@ -1,21 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAccordionHoverColors = void 0;
+exports.accordionFocusRing = exports.getAccordionHoverColors = void 0;
 const color_1 = require("../../Theme/tokens/builders/color");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
-/**
- * Same perceptibility floor the SideBar ladder uses — a state a user cannot see is not a state.
- * Light mode `softHover` measured 1.042-1.105 across all 9 brands (invisible) while dark sat at
- * 1.58-1.85; `expandedBg` (`primary.opacity[8]`, an 8%-alpha tint) is the same bug class — an
- * 8% tint composited over a near-white canvas is itself near-white. Both are resolved against
- * the rest surface so light and dark actually agree on "you can see this".
- */
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+// NOTE: light softHover measured 1.04-1.11 (invisible) unresolved — both modes now resolve against the rest surface.
 const MIN_HOVER_STEP = 1.15;
 const getAccordionHoverColors = (colors, isDark) => {
     if (isDark) {
-        // primary.opacity[8] composited over the dark canvas collapses to ~1.07:1 (near-black on
-        // near-black) — gray[200] is an opaque rung that stays visibly above canvas (~1.6:1) without
-        // being as loud as the gray[300] hover fill FilterSidebar/Table already use.
         return {
             expandedBg: colors.gray[200],
             softHover: colors.gray[200],
@@ -29,3 +21,10 @@ const getAccordionHoverColors = (colors, isDark) => {
     };
 };
 exports.getAccordionHoverColors = getAccordionHoverColors;
+/** The Button's two-tone `focusRing`, drawn inset because the item clips overflow. */
+const accordionFocusRing = (colors) => ({
+    outline: "2px solid transparent",
+    outlineOffset: "-2px",
+    boxShadow: (0, focusRing_styles_1.insetFocusRingShadow)(colors),
+});
+exports.accordionFocusRing = accordionFocusRing;

package/dist/Components/AddressCard/AddressCard.d.ts

@@ -0,0 +1,4 @@
+import type { AddressCardProps } from "./AddressCardProps";
+/** Tonal delivery-address card: name, tags, lines and calm Edit/Remove actions; selection is a ring plus a check. */
+declare const AddressCard: ({ value, name, phone, lines, tag, isDefault, note, selected, onSelect, onEdit, onRemove, disabled, labels, "data-testid": testId, }: AddressCardProps) => import("react/jsx-runtime").JSX.Element;
+export default AddressCard;

package/dist/Components/AddressCard/AddressCard.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
+const selectable_1 = require("../CheckoutKit/selectable");
+const Button_1 = __importDefault(require("../Button/Button"));
+const Tag_1 = __importDefault(require("../Tag/Tag"));
+const DEFAULT_LABELS = { default: "Default", edit: "Edit", remove: "Remove" };
+/** Tonal delivery-address card: name, tags, lines and calm Edit/Remove actions; selection is a ring plus a check. */
+const AddressCard = ({ value, name, phone, lines, tag, isDefault = false, note, selected, onSelect, onEdit, onRemove, disabled = false, labels, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const uid = (0, react_1.useId)();
+    const nameId = `${uid}-name`;
+    const bodyId = `${uid}-body`;
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const { isSelected, interactive, inGroup, ringed, props } = (0, selectable_1.useSelectable)({ value, selected, disabled, onSelect });
+    const selectable = inGroup || !!onSelect;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", "data-testid": testId, "data-selected": isSelected || undefined, ...(0, selectable_1.selectableSurface)(colors, { selected: isSelected && selectable, disabled, interactive, ringed }), children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { ...props, "data-radio": true, "aria-disabled": selectable && disabled ? true : undefined, "aria-labelledby": props.role ? nameId : undefined, "aria-describedby": props.role ? bodyId : undefined, gap: 3, p: 4, pb: onEdit || onRemove ? 2 : 4, borderRadius: "2xl", cursor: interactive ? "pointer" : "default", outline: "none", align: "flex-start", children: [selectable && ((0, jsx_runtime_1.jsx)(react_2.Box, { mt: 0.5, children: (0, jsx_runtime_1.jsx)(selectable_1.RadioIndicator, { selected: isSelected }) })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 1, flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", id: nameId, fontSize: "sm", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], children: name }), tag && (0, jsx_runtime_1.jsx)(Tag_1.default, { label: tag, size: "xs", tone: "neutral" }), isDefault && (0, jsx_runtime_1.jsx)(Tag_1.default, { label: copy.default, size: "xs", tone: "neutral" })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { id: bodyId, children: [lines.map((line) => ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "sm", lineHeight: 1.5, color: colors.text[800], children: line }, line))), phone && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", mt: 1, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, sx: typography_1.NUMERIC_TEXT, children: phone })), note && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", mt: 1, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: note }))] })] })] }), (onEdit || onRemove) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 1, pl: selectable ? "2.75rem" : 1, pr: 2, pb: 2, children: [onEdit && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onEdit, "aria-label": `${copy.edit} address: ${name}`, children: copy.edit })), onRemove && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove} address: ${name}`, children: copy.remove }))] }))] }));
+};
+exports.default = AddressCard;

package/dist/Components/AddressCard/AddressCardGroup.d.ts

@@ -0,0 +1,4 @@
+import type { AddressCardGroupProps } from "./AddressCardProps";
+/** Radiogroup wrapper for `AddressCard`s. */
+declare const AddressCardGroup: (props: AddressCardGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default AddressCardGroup;

package/dist/Components/AddressCard/AddressCardGroup.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const selectable_1 = require("../CheckoutKit/selectable");
+/** Radiogroup wrapper for `AddressCard`s. */
+const AddressCardGroup = (props) => (0, jsx_runtime_1.jsx)(selectable_1.SelectableGroup, { ...props });
+exports.default = AddressCardGroup;

package/dist/Components/AddressCard/AddressCardProps.d.ts

@@ -0,0 +1,58 @@
+import type { ReactNode } from "react";
+/** Visible copy; override every string for another language. */
+export interface AddressCardLabels {
+    /** Text of the tag shown when `isDefault` is set. */
+    default: string;
+    /** Edit button text; also the verb in its accessible name. */
+    edit: string;
+    /** Remove button text; also the verb in its accessible name. */
+    remove: string;
+}
+/** A saved delivery address. Inside an `AddressCardGroup` it is a radio keyed by `value`; alone, `onSelect` makes it a toggle button. */
+export interface AddressCardProps {
+    /** Identifies the card inside an `AddressCardGroup`; required there. */
+    value?: string;
+    /** Recipient name, shown bold; also the card's accessible name when selectable. */
+    name: string;
+    /** Recipient phone, shown in tabular figures under the address lines. */
+    phone?: string;
+    /** Address lines in order, e.g. ["12 Palm Grove, Indiranagar", "Bengaluru, Karnataka 560038"]. */
+    lines: string[];
+    /** Short place tag such as "Home" or "Work". */
+    tag?: string;
+    /** Adds a "Default" tag. */
+    isDefault?: boolean;
+    /** Muted line under the address, e.g. "Delivers by Thu, 9 Oct". */
+    note?: ReactNode;
+    /** Standalone selection state; ignored inside a group, where the group's value decides. */
+    selected?: boolean;
+    /** Called when the card is chosen; also fires inside a group, after the group updates. */
+    onSelect?: () => void;
+    /** Shows an Edit button when set; called on click. */
+    onEdit?: () => void;
+    /** Shows a Remove button when set; called on click. */
+    onRemove?: () => void;
+    /** Dims the card, drops it from the tab order and ignores selection; Edit and Remove still work. */
+    disabled?: boolean;
+    /** Overrides the default English strings; unset keys keep their default. */
+    labels?: Partial<AddressCardLabels>;
+    /** Test id on the card's outer element. */
+    "data-testid"?: string;
+}
+/** Radiogroup of `AddressCard`s with a roving tab stop; arrow keys move focus and selection together. */
+export interface AddressCardGroupProps {
+    /** Selected card's `value`; controls the group when set. */
+    value?: string;
+    /** Initially selected `value` when the group is uncontrolled. */
+    defaultValue?: string;
+    /** Called with the new `value` when selection changes by click or arrow key. */
+    onValueChange?: (value: string) => void;
+    /** Direct `AddressCard` children; wrapping them in another component hides their `value` from the roving tab stop. */
+    children: ReactNode;
+    /** Accessible name of the radiogroup; give this or `aria-labelledby`. */
+    "aria-label"?: string;
+    /** Id of the element that names the radiogroup. */
+    "aria-labelledby"?: string;
+    /** Test id on the radiogroup element. */
+    "data-testid"?: string;
+}

package/dist/Components/AlertDialog/AlertDialog.d.ts

@@ -1,3 +1,4 @@
 import { AlertDialogsProps } from "./AlertDialogProps";
-declare const AlertDialog: ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText, cancelButtonText, isConfirmLoading, onConfirm, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, key, }: AlertDialogsProps) => import("react/jsx-runtime").JSX.Element;
+/** Renders a fixed Cancel/Confirm AlertDialog from title+content props — not a substitute for Modal when you need custom footer buttons or slots. */
+declare const AlertDialog: ({ isOpen, onClose, leastDestructiveRef, closeOnOverlayClick, closeOnEsc, content, title, confirmButtonText, cancelButtonText, isConfirmLoading, onConfirm, tone, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, }: AlertDialogsProps) => import("react/jsx-runtime").JSX.Element;
 export default AlertDialog;

package/dist/Components/AlertDialog/AlertDialog.js

@@ -1,10 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const AlertDialog = ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText = "Yes", cancelButtonText = "No", isConfirmLoading, onConfirm, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, key, }) => {
-    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.AlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, children: [(0, jsx_runtime_1.jsx)(react_1.AlertDialogOverlay, {}), (0, jsx_runtime_1.jsxs)(react_1.AlertDialogContent, { bg: colors.background[50], sx: ContentStyle, children: [(0, jsx_runtime_1.jsx)(react_1.AlertDialogHeader, { sx: headerStyle, children: title }), (0, jsx_runtime_1.jsx)(react_1.AlertDialogCloseButton, { sx: closeButtonStyle }), (0, jsx_runtime_1.jsx)(react_1.AlertDialogBody, { sx: bodyStyle, children: content }), (0, jsx_runtime_1.jsxs)(react_1.AlertDialogFooter, { sx: footerStyle, children: [(0, jsx_runtime_1.jsx)(react_1.Button, { ref: leastDestructiveRef, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm", sx: button1Style, children: cancelButtonText }), (0, jsx_runtime_1.jsx)(react_1.Button, { colorScheme: "primary", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style, children: confirmButtonText })] })] })] }, key));
-};
+const Button_1 = __importDefault(require("../Button/Button"));
+/** Renders a fixed Cancel/Confirm AlertDialog from title+content props — not a substitute for Modal when you need custom footer buttons or slots. */
+const AlertDialog = ({ isOpen, onClose, leastDestructiveRef, closeOnOverlayClick, closeOnEsc, content, title, confirmButtonText = "Confirm", cancelButtonText = "Cancel", isConfirmLoading, onConfirm, tone = "default", ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, }) => ((0, jsx_runtime_1.jsxs)(react_1.AlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [(0, jsx_runtime_1.jsx)(react_1.AlertDialogOverlay, {}), (0, jsx_runtime_1.jsxs)(react_1.AlertDialogContent, { sx: ContentStyle, children: [(0, jsx_runtime_1.jsx)(react_1.AlertDialogHeader, { sx: headerStyle, children: title }), (0, jsx_runtime_1.jsx)(react_1.AlertDialogCloseButton, { sx: closeButtonStyle }), (0, jsx_runtime_1.jsx)(react_1.AlertDialogBody, { sx: bodyStyle, children: content }), (0, jsx_runtime_1.jsxs)(react_1.AlertDialogFooter, { sx: footerStyle, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { ref: leastDestructiveRef, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm", sx: button1Style, label: cancelButtonText }), (0, jsx_runtime_1.jsx)(Button_1.default, { colorScheme: tone === "danger" ? "red" : "primary", onClick: onConfirm, isLoading: isConfirmLoading, size: "sm", sx: button2Style, label: confirmButtonText })] })] })] }));
 exports.default = AlertDialog;