pixelize-design-library 2.4.2-beta.62 → 2.4.2-beta.63

package/CHANGELOG.md

@@ -18,6 +18,12 @@ next major.
 
 ### Added
 
+- **`Card variant="elevated"`**: borderless, `background[50]` lifted by `shadows.card`; declares a 0 border width so it
+  never inherits an outline parent's rule.
+- **`bandOn`, `recessOn`, `cardRule`**: plane-step helpers that return the input unchanged in light and a visible step
+  off the dark plane a fill or rule sits on (`raisedRule` now matches `cardRule`'s weight).
+- **`buildDarkPalette`** takes an optional `{ planes: "lifted" | "flat" }` and `buildSurfaceRaised` an optional list of
+  filled marks to keep at 3:1.
 - **`formatDate` / `formatDateTime` / `formatDateRange`**: Intl-based date text, en-IN by default ("09 Oct 2026"),
   with `locale`, `timeZone`, `year: "never"`, `time: "12h" | "24h"` and a `fallback` (default "—") for null or
   invalid input instead of "Invalid Date". A bare `YYYY-MM-DD` is that calendar day in every zone; ranges write a
@@ -316,8 +322,8 @@ next major.
 - **`Card` `padding` is no longer Chakra's style prop** — it is omitted from the type and now takes
   the `CardPadding` steps. A consumer passing `padding={4}` gets a compile error; use `p` or `sx`.
   Staged for the next major (see Breaking); consumer blast radius not measured.
-- **`SideBar` default box-shadow transition is 260ms** (was 200ms) so it follows `collapseTransition`
-  `speed="slow"`. The width transition is unchanged.
+- **`SideBar` `collapseTransition` defaults to `{ speed: "base" }`** (200ms width and shadow, was 260ms).
+  Pass `{ speed: "slow" }` for the old pace.
 - **`StageProgress variant="stepper"` renders an `ol` of `li`** (`StepperStageProps.asListItem`).
   Visual layout is unchanged; selectors that expected a `div` list no longer match.
 - **`PdfViewer` `pdfUrl` is optional** — pass exactly one of `pdfUrl` / `getBlob`. In `getBlob` mode
@@ -373,8 +379,75 @@ next major.
   `aria-readonly`, and `m`/`mt`/`mb`/`ml`/`mr`/`mx`/`my` on the wrapper. `InputSwitch` is now a
   genuine thin wrapper — no prop it previously accepted is silently dropped.
 
+### Changed (visual)
+
+- **Elevation follows Pebble, per mode.** `shadows.sm`/`base`/`md`/`lg` are the Pebble card-press/
+  card/float/dialog stacks, with new `card`, `float`, `dialog` and `sheet` role keys. Light shadows are
+  softer and wider; dark mode gets its own heavier black ramp, so overlays cast a visible shadow on a
+  dark canvas. `xs`, `xl`, `2xl`, `inner`, `none`, `darkLg` and the focus `outline` are unchanged.
+- **`Menu` and `Popover` join the owned popup family:** radius `md` → `xl` (`RADIUS_ROLE.float`)
+  and shadow `sm` → `md` (float), like every other anchored popup. Their border stays.
+- **`fonts.mono` is a real monospace stack** (`ui-monospace, SFMono-Regular, Menlo, Consolas,
+  monospace`). It was Inter, so code and keyboard shortcuts never aligned.
+- **`Button` gray `ghost`/`outline` hover is visible.** Gray has no opacity ramp, so hover/active
+  take the list-row `active`/`selectedActive` steps (at least 1.15:1 on a card, all 9 brands x 2 modes)
+  instead of `gray.50` (1.04-1.08:1). `solid` and `gradient` hover no longer add a box-shadow; the
+  colour step carries hover.
+- **`Toaster` status-icon pulse** animates a pseudo-element's transform and opacity (scale 1 to 1.5,
+  faded out by 70%, the same 900 ms one-shot) instead of `box-shadow`, so it no longer repaints every
+  frame. The icon chip background is the same tint composited opaque over the toast surface.
+- **`Table` filter sidebar** opens on the 200 ms motion token (was 500 ms), does not animate on
+  mount, and is instant under reduced motion.
+- **`FileUpload` image thumbnails are a keyboard-operable "Preview <file name>" button**: a new tab
+  stop with the library focus ring; Enter or Space opens the preview. Each image row now has two
+  buttons (Preview and remove), so a test that queries an unnamed `getByRole("button")` inside a row
+  must name the one it means.
+- **`Menu` item highlight sits inside the menu.** A themed `MenuItem`/`MenuItemOption` is
+  `calc(100% - 2 * mx)` wide, so its hover/focus fill keeps the same 6px inset on both sides instead of
+  overhanging the menu's right edge by 6px. Menu size and row height are unchanged; a `MenuItem` given
+  its own `w`/`width` keeps that width.
+- **`Skeleton` shimmer is one depth on every brand and mode**: 1.35:1 between its two colours (the
+  mobile library's `SKELETON_SHIMMER_CONTRAST`), was 1.34-1.58:1 in light and 1.93-1.99:1 in dark. The
+  end colour is `gray[300]`'s tint settled against `gray[100]`; dark skeletons pulse much more gently.
+  An explicit `startColor`/`endColor` still wins.
+
+- **Motion comes from the tokens.** `SideBar`, `Notification`, `Toaster`, the Table settings sheet,
+  `ProfilePhotoViewer`, `TableToggle` and `StageProgress` take every duration and curve from the motion tokens
+  (colour fades 150ms, movement 200ms, enters on `MOTION_EASE_OUT`, exits on `MOTION_EASE_IN`). Most timings
+  move by under 60ms; the Table settings sheet goes from 400ms to 200ms. `Notification` cards no longer lift
+  2px on hover; the shadow still deepens.
+- **`Button` (solid, outline, ghost) and `IconButton` scale to 0.98 while pressed** (`MOTION_PRESS_SCALE`).
+  Never when disabled or loading, nor under `prefers-reduced-motion`.
+- **Dark planes carry the brand hue and separate by lift.** The dark canvas takes a faint brand tint and cards
+  (`background[50]`) sit one step (1.16:1) above it, with overlays (`surfaceRaised`) one step (1.15:1) above
+  the card; every filled mark keeps 3:1 on all three. Light mode is unchanged. A brand opts out with
+  `buildDarkPalette(light, { planes: "flat" })`. `meadow` and `rosewood` dark `accentText` move one rung
+  lighter so they clear AA on selected list rows.
+- **`zinc`:** muted text in light mode is `#515157` (was `#27272a`, 14.9:1), settled under a new 8:1 muted
+  ceiling; zinc's dark card is no longer darker than its canvas.
+- **A brand's primary never reads as danger.** `radiant`'s danger colour (`red` and `semantic.error`) is
+  crimson and `rosewood`'s primary rotates toward raspberry; a delta-E >= 10 gate in `brandIdentity.test.ts`
+  covers all 9 brands in both modes.
+- **`Button` solid primary paints `resolveFilledSurface`.** Only `zinc` dark moves: the primary fill goes from `#52525b` with
+  white ink (2.5:1 on the canvas) to `#e4e4e7` with black ink, matching `resolveFilledSurface`, the fill every other filled surface already paints.
+- **Dark mode: header strips, calendar off-days and in-card rules step visibly off the lifted planes.** Table header
+  strips (`CustomModulesTable`, `SignInActivityTable`), `DatePicker` weekly-off cells, and the rules inside cards and
+  dialogs (`Table`, `SettingRow`, `SettingsSection`, `StatCard`, `Drawer`, `Modal`, `ConfirmDialog` and the account
+  modals) now clear 1.15:1 (bands) and 1.31:1 (rules) off their plane. Light mode is unchanged.
+- **`Card` defaults to `variant="elevated"`** (borderless, `background[50]` lifted by `shadows.card`). Pass
+  `variant="outline"` for a Card that frames a table or a list of rows. Measured blast radius: 22 library `<Card>`
+  sites with no variant flip (hrms 18, account 1, tickets 3); 305 with an explicit variant are unchanged. The
+  `SettingsSection` danger zone keeps its red frame by taking `variant="outline"`.
+- **Light page canvas (`backgroundColor.base`) sits 1.09:1 below the card on all 9 brands**, so a borderless card keeps
+  its top edge (zinc and slate `#fafafa` to `#f5f5f5`, lavender `#fbfafd` to `#f5f4f8`). `main` and every other token
+  are unchanged.
+
 ### Fixed
 
+- **`Table` settings sheet** fades in place instead of dropping in when the user prefers reduced motion.
+- **`SearchSelect`**: the Select All and Add New rows are reachable from the keyboard. Arrow keys, Home and End walk
+  Select All, then the options, then Add New, and Enter runs them. Both are now `role="option"` rows, so a test that
+  counts `getAllByRole("option")` with either row shown sees one or two more.
 - **Field helper text no longer leaves a dangling `<id>-helptext` in `aria-describedby`** when a field with an
   explicit `id` sits inside a consumer `FormControl` (`TextInput` and every field rendering
   `FieldMessage`/`HelperText`).

package/COMPONENT-GOTCHAS.md

@@ -215,7 +215,7 @@ and wires `aria-controls` to them. Pick by that, never by the picture. A screen
 
 | Need | Component | Why not the others |
 | --- | --- | --- |
-| Generic bordered/padded container, no commerce semantics | `Card` | Layout wrapper with `header`/`footer` slots and a padded body — see gotcha below |
+| Generic padded container (borderless by default; `variant="outline"` for a ruled one), no commerce semantics | `Card` | Layout wrapper with `header`/`footer` slots and a padded body — see gotcha below |
 | Product tile for a grid, list or rail (photo, price, rating, swatches, quick add) | `ProductCard` | Takes the same `axes` / `variants` as `ProductDetails`; for a whole page use `ProductDetails` |
 | A KPI figure with delta and sparkline | `StatCard` | Not a product or a container |
 | Subscription/pricing-tier card (plans, billing cycle, feature list) | `PaymentCard` | Takes a `Plan` object, unrelated to `options`/`productImage` |
@@ -401,7 +401,7 @@ The wrapper is deliberately not a button; make the custom component a button, or
 | `InputTextArea` / `FileUpload` / `TextInput` | Width 500px → 100% / `maxSizeKB` 5 → 5120 / no default "Placeholder" text | `width="500px"` / — (5 KB was a bug) / — |
 | `DatePicker` (no `pickerType`) | Inference is case-sensitive: `MM` is month, `mm` minutes. `dd/MM/yyyy` was misread as date+time and showed time selects; it is now date-only | `pickerType="datetime"` |
 | `EmptyState` | Title is an `h3`; image is decorative (`alt=""`, was the title) | `titleAs`, `imageAlt` |
-| Theme `Badge` / `Card` / field labels | Badge: pill, no uppercase, default `sm`. Card: default variant `outline`. Label colour `text[700]`; helper/error row 12px | `size`/`variant` props |
+| Theme `Badge` / `Card` / field labels | Badge: pill, no uppercase, default `sm`. Card: default variant `elevated` (borderless, `shadows.card`). Label colour `text[700]`; helper/error row 12px | `size`/`variant` props |
 | `Header` | `position: sticky; top: 0`, z-index `sticky` (1100, was 1000); `rightSlot` mounts once, not per layout | — |
 | `Table` | Radius `xl`; row height 32/40/52 by density; filter button is named "Filter {label}" (tests querying "Search" break); client pagination resets to page 1 when `data.length` changes | — |
 | `KanbanBoard` | `height`/`maxH` props replace the clipping wrapper; `height="100%"` needs a parent with a definite height | — |
@@ -534,10 +534,19 @@ A popup opened inside another popup takes `zIndex="popoverNested"` (1510), never
 
 ### Your own overlay painted `background[50]` sinks into the dark canvas
 
-In dark mode `background[50]` equals the page canvas on 8 of 9 brands. Library dialogs, drawers,
-popovers and menus now paint `colors.surfaceRaised` — identical `#ffffff` in light, one elevation
-step up in dark. A custom panel, popover or `ModalContent bg=` in an app should read
-`surfaceRaised` too, and a divider inside it `raisedRule(colors)`.
+In dark mode `background[50]` is the card plane, one step above the canvas; an overlay painted with it
+merges into the cards under it. Library dialogs, drawers, popovers and menus paint `colors.surfaceRaised`,
+one step above the card in dark and identical `#ffffff` in light. A custom panel, popover or
+`ModalContent bg=` should read `surfaceRaised` too, and a divider inside it `raisedRule(colors)`.
+
+### Named fills nearly vanish on a dark card
+
+In dark mode `backgroundColor.light`, `tertiary`, `medium` and `tableHeader` sit only 1.01-1.05:1 off
+`background[50]`, `muted` 1.00-1.06:1 off `surfaceRaised`, and `boxborder[200]` 1.10-1.16:1 off a card and
+1.00-1.06:1 off `surfaceRaised`. Never paint a named canvas fill or raw `boxborder[200]` on a card or overlay:
+use `bandOn(fill, surface)` for a header strip, hover or selection tint, `recessOn(fill, surface)` for a shaded
+or off cell, `cardRule(colors)` for a rule inside a card and `raisedRule(colors)` for a rule inside an overlay.
+All four return the old value unchanged in light mode.
 
 ### `Drawer` / `Modal` / `ProfileCard` drop any child that isn't a named slot — use `portalChildren`
 
@@ -1873,6 +1882,16 @@ can outgrow the column.
   to `null`, so put a Clear action beside it if one is needed.
 - For free-text chips that are not email addresses use `TagInput`: same look as `MultiSelect`, any text, with
   your own `validate`.
+- **Button press scale matches a real `:active` only.** A `MenuButton as={Button}` held open by Chakra's
+  `data-active` keeps the darker pressed fill but does not stay at 0.98. A consumer `_active={{ transform }}`
+  loses to the press rule while the pointer is down; use `variant="unstyled"` or an `sx` `&:active` with
+  `!important`.
+
+### `Card` is borderless by default (`elevated`)
+
+A Card that frames a table or a list of rows needs `variant="outline"`. `borderColor` alone shows nothing, because
+the default border width is 0, and the outline rule is Chakra `gray[200]`, not `boxborder[200]`. Paint the page with
+`backgroundColor.base`: on `backgroundColor.main` a borderless card can be white on white.
 
 ### `Select` / `SearchSelect` multi rows have no checkbox role
 

package/DESIGN-GUIDE.md

@@ -12,15 +12,21 @@ tickets `layoutDensity.ts`), use it — it encodes these same rules. Otherwise t
 
 Calm, dense, professional SaaS admin — Linear/Stripe-dashboard, not a landing page.
 
-- **Hierarchy comes from type and whitespace, not boxes.** One border per surface. Never nest a
-  bordered card inside a bordered card; inside a card, separate with spacing or a `Divider`.
+- **Hierarchy comes from type and whitespace, not boxes.** One surface per level. Never nest a
+  card inside a card; inside a card, separate with spacing or a `Divider`.
 - **One primary action per view.** One `variant="solid"` button in the page header; everything
   else `outline` or `ghost`. The only exception is a composer's Send button.
 - **Left-aligned, scannable.** Titles and forms left-aligned; numbers right-aligned in tables.
 - **Color means something.** Neutral by default; brand color for the primary action and selection;
   semantic color only for status. No decorative gradients, no colored section backgrounds.
-- **Borders, not shadows, for resting surfaces.** Shadows only on floating things (menus, popovers,
-  modals) and on hover of a card that is itself clickable.
+- **Content cards float, data surfaces are ruled.** `Card` is borderless by default
+  (`variant="elevated"`: `background[50]` lifted by the soft `shadows.card`). Tables, filter bars,
+  list panes and fields keep their 1px `boxborder[200]` rule; a `Card` that frames a table or a
+  list of rows takes `variant="outline"`. Heavier shadows only on floating things (menus,
+  popovers, modals) and on hover of a card that is itself clickable.
+- **Paint the page with `backgroundColor.base`.** In light mode it sits one step (1.09:1) below
+  the card, which is what gives a borderless card its top edge; `backgroundColor.main` is a
+  component surface and can be as white as the card.
 
 ## 2. Spacing (Chakra units, 1 = 4px)
 
@@ -228,7 +234,8 @@ hides its primary; when only one section is empty on a populated page, that sect
 - Reaching for `SelectV2`, `SearchSelect`, `SelectSearch` in new work — all `@deprecated`.
   One picker now: `Select` (`native={false}` for the themed, searchable, multi popup).
   `Dropdown` is the exception — it is an action menu, not a picker, and is not replaced.
-- A bordered card inside a bordered card; a shadow on a resting card.
+- A card inside a card; a border on a content `Card` (it is borderless by default), or any resting
+  shadow heavier than `shadows.card`.
 - Painting a whole table cell with a status color — use a `Tag` in the cell.
 - Centered page titles, hero-sized headings, `size="lg"` buttons, or `size` props restating the default.
 - More than one solid button in a view; a destructive action without `AlertDialog`.

package/dist/Components/Button/Button.styles.js

@@ -5,18 +5,35 @@ const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const motion_1 = require("../../Theme/chakra/motion");
 const primitives_1 = require("../../Theme/tokens/primitives");
+const BUTTON_TRANSITION = [
+    (0, primitives_1.transitionFor)(["background-color", "border-color", "color", "box-shadow", "filter"]),
+    (0, primitives_1.transitionFor)(["transform"], "fast", "out"),
+].join(", ");
+const PRESS = {
+    [motion_1.MOTION_OK_QUERY]: {
+        "&:active:not(:disabled):not([data-loading]):not([aria-disabled=true])": {
+            transform: `scale(${primitives_1.MOTION_PRESS_SCALE})`,
+        },
+    },
+};
 const controlSize = (size) => {
     const { height, fontSize, paddingX } = primitives_1.BUTTON_SIZES[size];
     return { h: height, minW: height, fontSize, px: paddingX };
 };
 // NOTE: [500] alone measures ~4.2 on a dark canvas — resolved per-mode so outline/ghost/link text stays readable.
 const onCanvasText = (theme, colorScheme) => (0, accentText_1.accentTextOnCanvas)(theme.colors[colorScheme], theme.colors.backgroundColor.main);
-// NOTE: [50] alone measured ~1.04 (invisible) in both modes — opacity ramp fixes it where available.
+// NOTE: [50] alone measured ~1.04 (invisible) in both modes — gray borrows the row-state steps.
 const onCanvasHoverBg = (theme, colorScheme, step) => {
     const scale = theme.colors[colorScheme];
-    return "opacity" in scale ? scale.opacity[step] : scale[50];
+    if ("opacity" in scale)
+        return scale.opacity[step];
+    if (colorScheme !== "gray")
+        return scale[50];
+    const rows = (0, rowStates_1.listRowBackgrounds)(theme.colors);
+    return step === 16 ? rows.active : rows.selectedActive;
 };
 const swatch = (theme, colorScheme) => theme.colors[colorScheme];
 const buttonSolidRung = (theme, colorScheme) => (0, filledSurface_1.solidFillRung)(swatch(theme, colorScheme), theme.colors.white);
@@ -27,6 +44,21 @@ const darkerFill = (theme, colorScheme, step) => {
 };
 /** Label for the solid variant's filled bg — derived from THAT fill, since hover/active swap it. */
 const labelFor = (theme, fill) => (0, filledSurface_1.labelOnFill)(fill, theme.colors.white, theme.colors.black);
+const solidSurface = (theme, colorScheme) => {
+    if (colorScheme === "primary")
+        return (0, filledSurface_1.resolveFilledSurface)(theme.colors.primary, theme.colors);
+    const fill = theme.colors[colorScheme][buttonSolidRung(theme, colorScheme)];
+    const hoverFill = darkerFill(theme, colorScheme, 0);
+    const activeFill = darkerFill(theme, colorScheme, 1);
+    return {
+        fill,
+        color: labelFor(theme, fill),
+        hoverFill,
+        hoverColor: labelFor(theme, hoverFill),
+        activeFill,
+        activeColor: labelFor(theme, activeFill),
+    };
+};
 // NOTE: replaces Chakra's stock ring, which failed WCAG 1.4.11 on every brand — gated by focusRing.test.ts.
 const focusRing = (theme) => (0, focusRing_styles_1.focusVisibleStyles)(theme.colors);
 exports.Button = {
@@ -35,7 +67,7 @@ exports.Button = {
     baseStyle: ({ theme }) => ({
         borderRadius: "lg",
         fontWeight: 500,
-        transition: (0, primitives_1.transitionFor)(["background-color", "border-color", "color", "box-shadow", "filter"]),
+        transition: BUTTON_TRANSITION,
         ...(0, motion_1.reducedMotionSx)(),
         _disabled: {
             opacity: 0.6,
@@ -45,35 +77,32 @@ exports.Button = {
     }),
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
-            const fill = theme.colors[colorScheme][buttonSolidRung(theme, colorScheme)];
-            const hoverFill = darkerFill(theme, colorScheme, 0);
-            const activeFill = darkerFill(theme, colorScheme, 1);
-            const hoverLabel = labelFor(theme, hoverFill);
+            const s = solidSurface(theme, colorScheme);
             return {
-                bg: fill,
-                color: labelFor(theme, fill),
+                bg: s.fill,
+                color: s.color,
                 _hover: {
-                    bg: hoverFill,
-                    color: hoverLabel,
-                    boxShadow: "sm",
+                    bg: s.hoverFill,
+                    color: s.hoverColor,
                     _disabled: {
-                        bg: hoverFill, // keep hover color on loading
-                        color: hoverLabel,
+                        bg: s.hoverFill, // keep hover color on loading
+                        color: s.hoverColor,
                     },
                 },
                 _active: {
-                    bg: activeFill,
-                    color: labelFor(theme, activeFill),
+                    bg: s.activeFill,
+                    color: s.activeColor,
                     boxShadow: "none",
                 },
                 _loading: {
-                    bg: hoverFill, // keep hover color while loading
-                    color: hoverLabel,
+                    bg: s.hoverFill, // keep hover color while loading
+                    color: s.hoverColor,
                     _hover: {
-                        bg: hoverFill,
-                        color: hoverLabel,
+                        bg: s.hoverFill,
+                        color: s.hoverColor,
                     },
                 },
+                ...PRESS,
                 ...focusRing(theme),
             };
         },
@@ -94,6 +123,7 @@ exports.Button = {
                 _loading: {
                     color: ink,
                 },
+                ...PRESS,
                 ...focusRing(theme),
             };
         },
@@ -107,6 +137,7 @@ exports.Button = {
             _active: {
                 bg: onCanvasHoverBg(theme, colorScheme, 24),
             },
+            ...PRESS,
             ...focusRing(theme),
         }),
         link: ({ theme, colorScheme = "primary" }) => ({
@@ -143,7 +174,6 @@ exports.Button = {
                 _hover: {
                     bgImage: bg,
                     filter: "brightness(0.92)",
-                    boxShadow: "md",
                     _disabled: { bgImage: bg, filter: "none" },
                 },
                 _active: {

package/dist/Components/Card/CardProps.d.ts

@@ -8,14 +8,14 @@ type DeadDividerProps = {
 };
 /** Padding steps: "none" flush, "2xs" 0.375rem, "xs" 0.75rem all round, "sm" / "md" / "lg" match `size`. */
 export type CardPadding = "none" | "2xs" | "xs" | "sm" | "md" | "lg";
-/** Themed outline surface with optional header/footer slots; children and direction/align/justify apply to the body. */
+/** Themed card surface (outline rule or borderless elevated) with optional header/footer slots; direction/align/justify apply to the body. */
 export type CardProps = Omit<ChakraCardProps, "children" | "variant" | "size" | "color" | "colorScheme" | "direction" | "align" | "justify" | "padding"> & DeadDividerProps & {
     /** Rendered in CardHeader (semibold header ink) only when truthy. */
     header?: React.ReactNode;
     /** Rendered in CardFooter only when truthy. */
     footer?: React.ReactNode;
     children: React.ReactNode;
-    /** Defaults to "outline", the only token-themed one; others fall back to Chakra's stock look. */
+    /** "elevated" (default): borderless, lifted by `shadows.card`. "outline": 1px rule, no shadow, for tables and row lists. */
     variant?: "elevated" | "outline" | "filled" | "unstyled";
     /** Padding scale for header/body/footer; defaults to "md". */
     size?: "sm" | "md" | "lg";

package/dist/Components/ConfirmDialog/ConfirmDialog.js

@@ -8,6 +8,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const Button_1 = __importDefault(require("../Button/Button"));
 const TextInput_1 = __importDefault(require("../Input/TextInput"));
 const ConfirmDialog = ({ isOpen, onClose, onConfirm, title, children, icon, iconBg, iconColor, tone = "destructive", cancelLabel = "Cancel", confirmLabel = "Confirm", confirmIcon, isConfirmLoading = false, disableCancelWhilePending = true, confirmationText, confirmationLabel, bodyLayout = "flush", bodySpacing = 4, actionsPt = 0, focusCancelOnOpen = true, isCentered = true, closeOnEsc, closeOnOverlayClick, }) => {
@@ -18,6 +19,6 @@ const ConfirmDialog = ({ isOpen, onClose, onConfirm, title, children, icon, icon
     const isConfirmDisabled = isConfirmLoading || (requiresTypedConfirmation && typedText !== confirmationText);
     const actions = ((0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "flex-end", spacing: 3, pt: actionsPt, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { ref: cancelRef, label: cancelLabel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm", isDisabled: disableCancelWhilePending && isConfirmLoading }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: confirmLabel, onClick: onConfirm, colorScheme: tone === "destructive" ? "red" : "primary", size: "sm", isLoading: isConfirmLoading, isDisabled: isConfirmDisabled, leftIcon: confirmIcon })] }));
     const body = requiresTypedConfirmation ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: confirmationLabel, value: typedText, onChange: (event) => setTypedText(event.target.value) })] })) : (children);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: isCentered, closeOnEsc: closeOnEsc, closeOnOverlayClick: closeOnOverlayClick, initialFocusRef: focusCancelOnOpen ? cancelRef : undefined, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: iconBg, color: iconColor, children: icon !== null && icon !== void 0 ? icon : (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "1.05rem", fontWeight: 600, children: title })] }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 6, children: bodyLayout === "stack" ? ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: bodySpacing, align: "stretch", children: [body, actions] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [body, actions] })) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: isCentered, closeOnEsc: closeOnEsc, closeOnOverlayClick: closeOnOverlayClick, initialFocusRef: focusCancelOnOpen ? cancelRef : undefined, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: iconBg, color: iconColor, children: icon !== null && icon !== void 0 ? icon : (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "1.05rem", fontWeight: 600, children: title })] }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 6, children: bodyLayout === "stack" ? ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: bodySpacing, align: "stretch", children: [body, actions] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [body, actions] })) })] })] }));
 };
 exports.default = ConfirmDialog;

package/dist/Components/CustomModulesTable/CustomModulesTable.js

@@ -8,6 +8,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 const Button_1 = __importDefault(require("../Button/Button"));
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
 const EditModuleModal_1 = __importDefault(require("./EditModuleModal"));
@@ -34,20 +35,21 @@ const CustomModulesTable = ({ modules, isLoading = false, isUpdating = false, is
     const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
     const [editTarget, setEditTarget] = (0, react_1.useState)(null);
     const [deleteTarget, setDeleteTarget] = (0, react_1.useState)(null);
-    const border = colors.boxborder[200];
+    const edge = colors.boxborder[200];
     const surface = colors.background[50];
+    const rule = (0, planeStep_1.cardRule)(colors);
     const muted = colors.textMuted;
     const heading = colors.text[800];
-    const headBg = colors.backgroundColor.tableHeader;
+    const headBg = (0, planeStep_1.bandOn)(colors.backgroundColor.tableHeader, surface);
     const thStyle = {
         fontSize: "0.7rem",
         textTransform: "uppercase",
         letterSpacing: "0.04em",
         color: muted,
-        borderColor: border,
+        borderColor: rule,
         py: 3,
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: "sm", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: isLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", borderRadius: "md", startColor: colors.gray[100], endColor: colors.gray[400] }, idx))) })) : modules.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : ((0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleName }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleOwner }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: modules.map((item) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: (0, jsx_runtime_1.jsx)(react_2.Text, { noOfLines: 1, children: item.moduleName }) }) }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, justifyContent: "flex-end", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), (0, jsx_runtime_1.jsx)(EditModuleModal_1.default, { isOpen: editTarget !== null, onClose: () => setEditTarget(null), initialName: (_a = editTarget === null || editTarget === void 0 ? void 0 : editTarget.moduleName) !== null && _a !== void 0 ? _a : "", isLoading: isUpdating, onSubmit: async (name) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: edge, boxShadow: "sm", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: rule, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: isLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", borderRadius: "md", startColor: colors.gray[100], endColor: colors.gray[400] }, idx))) })) : modules.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : ((0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleName }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleOwner }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: modules.map((item) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: rule, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: (0, jsx_runtime_1.jsx)(react_2.Text, { noOfLines: 1, children: item.moduleName }) }) }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: rule, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: rule, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, justifyContent: "flex-end", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), (0, jsx_runtime_1.jsx)(EditModuleModal_1.default, { isOpen: editTarget !== null, onClose: () => setEditTarget(null), initialName: (_a = editTarget === null || editTarget === void 0 ? void 0 : editTarget.moduleName) !== null && _a !== void 0 ? _a : "", isLoading: isUpdating, onSubmit: async (name) => {
                     if (editTarget) {
                         await (onUpdateModule === null || onUpdateModule === void 0 ? void 0 : onUpdateModule({
                             moduleId: editTarget.module_id,

package/dist/Components/CustomModulesTable/EditModuleModal.js

@@ -7,6 +7,7 @@ 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 surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const Button_1 = __importDefault(require("../Button/Button"));
 const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, labels, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
@@ -15,7 +16,7 @@ const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, la
         if (isOpen)
             setName(initialName);
     }, [isOpen, initialName]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { borderRadius: "xl", overflow: "hidden", bg: colors.surfaceRaised, children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, "aria-label": labels.moduleNamePlaceholder, 
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { borderRadius: "xl", overflow: "hidden", bg: colors.surfaceRaised, children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, "aria-label": labels.moduleNamePlaceholder, 
                                 // NOTE: [200] is the decorative divider rung — a real control's outline needs 1.4.11's 3:1, from [800].
                                 borderColor: colors.boxborder[500], mb: 5 }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
 };

package/dist/Components/DatePicker/RangeDatePicker.js

@@ -49,6 +49,7 @@ const useFieldIds_1 = require("../Common/useFieldIds");
 const pickerField_1 = require("./pickerField");
 const CalendarPanel_1 = __importDefault(require("./CalendarPanel"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const textInputIconSize_1 = require("../Input/textInputIconSize");
 const TimePicker_1 = __importDefault(require("./TimePicker"));
@@ -264,7 +265,7 @@ exports.RangeDatePicker = (0, react_1.forwardRef)(function RangeDatePicker(props
                                                                 return;
                                                             }
                                                             setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
-                                                        }, dateFormat: timePickerFormat, isDisabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                                                        }, dateFormat: timePickerFormat, isDisabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 });
 exports.RangeDatePicker.displayName = "RangeDatePicker";
 exports.default = exports.RangeDatePicker;

package/dist/Components/DatePicker/SingleDatePicker.js

@@ -44,6 +44,7 @@ const date_fns_1 = require("date-fns");
 const lucide_react_1 = require("lucide-react");
 const Button_1 = __importDefault(require("../Button/Button"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const textInputIconSize_1 = require("../Input/textInputIconSize");
 const DatePickerProps_1 = require("./DatePickerProps");
@@ -1026,7 +1027,7 @@ function SingleDatePickerInner(props, ref) {
                                                 setTempDate(updatedDate);
                                                 setInputValue((0, date_fns_1.format)(updatedDate, resolvedDateFormat));
                                                 setIsTyping(false);
-                                            }, isDisabled: disabled })) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
+                                            }, isDisabled: disabled })) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
                                                     setTempDate(null);
                                                     requestClose(null);
                                                 }, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: () => requestClose(), children: "Apply" })] })] }) }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));

package/dist/Components/DatePicker/TimeOnlyPicker.js

@@ -52,6 +52,7 @@ const TimePickerInput_1 = require("./TimePickerInput");
 const PickerPortal_1 = __importStar(require("./PickerPortal"));
 const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
 function TimeOnlyPickerInner(props, ref) {
@@ -138,7 +139,7 @@ function TimeOnlyPickerInner(props, ref) {
                                             openPicker();
                                     }, error: error, size: sizeKey }) }) }) }), (0, jsx_runtime_1.jsx)(PickerPortal_1.default, { isMounted: pickerPortal.isMounted, children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { children: [(0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: resolvedTempDate, dateFormat: dateFormat, onChange: (updatedDate) => {
                                             handleTimePickerChange(updatedDate);
-                                        } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                                        } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), children: [(0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }
 exports.TimeOnlyPicker = (0, react_1.forwardRef)(TimeOnlyPickerInner);
 exports.TimeOnlyPicker.displayName = "TimeOnlyPicker";

package/dist/Components/DatePicker/dayStates.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dayAccessibleName = exports.describeDayStates = exports.dayStateClassName = exports.DAY_CLASS = exports.resolveDayStateVisual = exports.isDayStateKey = exports.DAY_STATE_KEYS = void 0;
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 // Ascending precedence — when a day carries several keys, a later one's visual overrides an earlier one's.
 exports.DAY_STATE_KEYS = [
     "weekly-off",
@@ -12,7 +13,7 @@ exports.DAY_STATE_KEYS = [
 // NOTE: token roles per THEME-CONTRACT.md, not raw rungs — e.g. holiday uses semanticText, never semantic[500].
 const VISUALS = {
     "weekly-off": (colors) => ({
-        cellBg: colors.backgroundColor.muted,
+        cellBg: (0, planeStep_1.recessOn)(colors.backgroundColor.muted, colors.surfaceRaised),
         color: colors.textMuted,
     }),
     holiday: (colors) => ({

package/dist/Components/Drawer/Drawer.js

@@ -8,6 +8,7 @@ exports.default = Drawer;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const warnDroppedSlotChildren_1 = require("../Modal/warnDroppedSlotChildren");
 const react_2 = require("@chakra-ui/react");
 const DrawerHeader = ({ children }) => {
@@ -45,5 +46,5 @@ function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant
     const bodySlot = findSlot(children, exports.DrawerBody);
     const footerSlot = findSlot(children, exports.DrawerFooter);
     (0, warnDroppedSlotChildren_1.warnDroppedSlotChildren)("Drawer", children, [exports.DrawerHeader, exports.DrawerBody, exports.DrawerFooter]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Drawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: (_a = variant !== null && variant !== void 0 ? variant : vaiant) !== null && _a !== void 0 ? _a : "solid", id: id, initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [(0, jsx_runtime_1.jsx)(react_2.DrawerOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.DrawerContent, { ...contentProps, children: [!hideCloseButton && (0, jsx_runtime_1.jsx)(react_2.DrawerCloseButton, {}), headerSlot && ((0, jsx_runtime_1.jsx)(react_2.DrawerHeader, { borderBottomWidth: "1px", borderColor: colors.boxborder[200], ...headerSlot.props, children: headerSlot })), (0, jsx_runtime_1.jsx)(react_2.DrawerBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && ((0, jsx_runtime_1.jsx)(react_2.DrawerFooter, { borderTopWidth: "1px", borderColor: colors.boxborder[200], ...footerSlot.props, children: footerSlot })), portalChildren] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Drawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: (_a = variant !== null && variant !== void 0 ? variant : vaiant) !== null && _a !== void 0 ? _a : "solid", id: id, initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [(0, jsx_runtime_1.jsx)(react_2.DrawerOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.DrawerContent, { ...contentProps, children: [!hideCloseButton && (0, jsx_runtime_1.jsx)(react_2.DrawerCloseButton, {}), headerSlot && ((0, jsx_runtime_1.jsx)(react_2.DrawerHeader, { borderBottomWidth: "1px", borderColor: (0, surfaceRaised_1.raisedRule)(colors), ...headerSlot.props, children: headerSlot })), (0, jsx_runtime_1.jsx)(react_2.DrawerBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && ((0, jsx_runtime_1.jsx)(react_2.DrawerFooter, { borderTopWidth: "1px", borderColor: (0, surfaceRaised_1.raisedRule)(colors), ...footerSlot.props, children: footerSlot })), portalChildren] })] }));
 }

package/dist/Components/Dropdown/DropDown.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const framer_motion_1 = require("framer-motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
@@ -259,7 +260,7 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
                     color: theme.colors.accentText,
                     boxShadow: `inset 0 0 0 2px ${theme.colors.focusRing.ring}`,
                 }, borderBottom: divider
-                    ? `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${theme.colors.boxborder[200]}`
+                    ? `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${(0, surfaceRaised_1.raisedRule)(theme.colors)}`
                     : undefined, sx: { "&:last-child": { borderBottom: "none" }, ...(0, motion_2.reducedMotionSx)() }, style: ItemStyle, fontWeight: 500, children: [option.image && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: theme.colors.textMuted, style: ImageStyle })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", fontSize: rowSpec.fontSize, isTruncated: true, style: LabelStyle, children: option.label })] }, option.id))) }));
     };
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, position: "relative", display: "inline-block", children: [dropDownToggleOption(), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(MotionBox, { ref: setMenuRef, position: "fixed", zIndex: "popover", initial: prefersReducedMotion ? false : { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, style: {

package/dist/Components/FileUpload/FileUpload.js

@@ -54,12 +54,19 @@ const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
 const FileThumbnail = ({ file, radius, onPreview, }) => {
     const url = (0, useObjectUrl_1.useObjectUrl)(file);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const preview = () => url && onPreview(url);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { role: "button", tabIndex: 0, "aria-label": `Preview ${file.name}`, boxSize: "2.5rem", cursor: "pointer", position: "relative", _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(colors), _hover: {
             ".hover-icon": {
                 opacity: 1,
                 bg: "blackAlpha.500",
             },
-        }, onClick: () => url && onPreview(url), children: [(0, jsx_runtime_1.jsx)("img", { src: url, alt: file.name, style: {
+        }, onClick: preview, onKeyDown: (event) => {
+            if (event.key !== "Enter" && event.key !== " ")
+                return;
+            event.preventDefault();
+            preview();
+        }, children: [(0, jsx_runtime_1.jsx)("img", { src: url, alt: file.name, style: {
                     width: "100%",
                     height: "100%",
                     objectFit: "cover",