@lerianstudio/sindarian-ui 2.0.0-beta.2 → 2.0.0-beta.21

package/dist/esm/components/ui/sidebar/sidebar-root.d.ts

@@ -1,3 +1,40 @@
 import React from 'react';
-export declare const SidebarRoot: ({ className, ...props }: React.ComponentProps<"nav">) => React.JSX.Element;
+export type SidebarRootProps = React.ComponentProps<'nav'> & {
+    /**
+     * What this rail becomes below 768px.
+     *
+     * - `'inline'` (default): nothing changes. The rail renders at every
+     *   viewport exactly as it always has, and the reader's collapsed preference
+     *   is untouched.
+     * - `'drawer'`: the inline rail is not rendered below the breakpoint and the
+     *   navigation moves into an overlay drawer that `SidebarTrigger` opens.
+     *
+     * ⛔ THE DEFAULT IS NOT A TASTE, IT IS A CONSUMER-SAFETY RULE. `SidebarTrigger`
+     * is the only way back into the drawer and it must render inside
+     * `SidebarProvider`. A consumer that has not placed one yet — which is every
+     * consumer at the moment this shipped — would get a phone with NO navigation
+     * rather than a rail that takes 63% of it, and that is strictly worse. Opt in
+     * once there is somewhere to put the trigger.
+     */
+    mobile?: 'inline' | 'drawer';
+    /**
+     * The drawer's accessible name. A dialog needs one, and it is read out when
+     * the drawer opens. Unused while `mobile` is `'inline'`.
+     */
+    mobileTitle?: string;
+};
+/**
+ * ⛔ BELOW 768px A RAIL IS NOT A LAYOUT — once a consumer opts in.
+ *
+ * The widths above are a fixed share of a flex row, so at 390px the expanded
+ * rail took 63% of the screen and left the page 146px, and the only affordance
+ * — `SidebarExpandButton` — shrinks it to 72px, which is still 18% and still
+ * permanently on screen. There was nothing that removed it.
+ *
+ * With `mobile="drawer"` the rail is replaced below the breakpoint by an
+ * overlay drawer. Escape, the backdrop click, the focus trap and returning
+ * focus to whatever opened it are Radix Dialog's, through the kit's own
+ * `Sheet`; none of that is re-implemented here.
+ */
+export declare const SidebarRoot: ({ className, id, mobile, mobileTitle, ...props }: SidebarRootProps) => React.JSX.Element;
 //# sourceMappingURL=sidebar-root.d.ts.map

package/dist/esm/components/ui/sidebar/sidebar-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-root.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sidebar/sidebar-root.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAoBzB,eAAO,MAAM,WAAW,GAAI,yBAGzB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,sBAW7B,CAAA"}
+{"version":3,"file":"sidebar-root.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sidebar/sidebar-root.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAqEzB,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,GAAI,kDAMzB,gBAAgB,sBAqHlB,CAAA"}

package/dist/esm/components/ui/sidebar/sidebar-root.js

@@ -1,20 +1,126 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
-import { useSidebar } from './sidebar-provider.js';
+import { SidebarContext, useSidebar } from './sidebar-provider.js';
 import { cn } from '../../../lib/utils.js';
+import { Sheet, SheetContent, SheetTitle } from '../sheet/index.js';
+/**
+ * ⛔ THE WIDTHS ARE TOKENS, NOT LITERALS.
+ *
+ * They were `w-[72px]` and `w-[244px]`, which a consumer could only override by
+ * winning a specificity argument with `cn`. `--sidebar-width` and
+ * `--sidebar-width-collapsed` are declared in `tokens.css`, so the default
+ * still ships with the stylesheet, and a consumer re-points either one with
+ * `className="[--sidebar-width:280px]"` ON THE RAIL, which moves the rail and
+ * the mobile drawer together (see `liftWidthOverrides` below), or with a rule
+ * on `:root`/`html`.
+ *
+ * ⚠️ A DECLARATION ON A REACT-TREE ANCESTOR REACHES THE RAIL AND NOT THE
+ * DRAWER. Custom properties inherit down the DOM tree, and the drawer is
+ * portalled to `document.body`, so a layout wrapper is not an ancestor of it.
+ * `:root` is, which is why it is named above and a wrapper is not.
+ */
 const sidebarVariants = cva('group/sidebar shadow-sidebar relative flex flex-col transition-[width] duration-300 ease-in-out', {
     variants: {
         collapsed: {
-            true: 'w-[72px]',
-            false: 'w-[244px]'
+            true: 'w-[var(--sidebar-width-collapsed)]',
+            false: 'w-[var(--sidebar-width)]'
         }
     },
     defaultVariants: {
         collapsed: false
     }
 });
-export const SidebarRoot = ({ className, ...props }) => {
-    const { isCollapsed } = useSidebar();
-    return (_jsx("nav", { "data-slot": "sidebar-root", className: cn(sidebarVariants({ collapsed: isCollapsed }), className), "data-collapsed": isCollapsed, ...props }));
+/**
+ * Tailwind arbitrary-property classes that re-point the sidebar geometry, e.g.
+ * `[--sidebar-width:320px]` or `[--sidebar-width-collapsed:88px]`.
+ *
+ * ⚠️ ANCHORED TO A CLASS BOUNDARY, WHICH IS THE WHOLE POINT OF THE LOOKBEHIND.
+ * Unanchored it also matched the tail of `md:[--sidebar-width:320px]` and
+ * lifted it with the prefix stripped — an override a consumer scoped to
+ * ≥768px, applied unconditionally to the drawer that only exists below it.
+ */
+const WIDTH_OVERRIDE = /(?<=^|\s)\[--sidebar-width(?:-collapsed)?:[^\]]+\]/g;
+/**
+ * ⛔ THE ONE PART OF THE CONSUMER'S className THAT HAS TO CROSS THE PORTAL.
+ *
+ * `SheetContent` mounts through `SheetPortal` into `document.body`, and custom
+ * properties inherit down the DOM tree rather than the React tree. So the
+ * documented override — a class on the rail — set `--sidebar-width` on an
+ * element the drawer is not a descendant of, and the whole className that DOES
+ * travel lands on the inner `<nav>`, which is BELOW the element that reads the
+ * variable. Measured in Chromium: rail 320px, drawer 244px. Following the
+ * instruction handed to product-console produced a 280px rail on desktop and a
+ * 244px drawer on a phone, silently.
+ *
+ * ⚠️ ONLY THE GEOMETRY TOKENS. The rest of a rail className is rail-shaped —
+ * `h-full`, and the `data-[collapsed=false]:min-w-70` all eight console
+ * sidebars pass — and putting that on the sheet would reinstate the
+ * 280px-inside-a-244px-sheet overflow from the other side.
+ */
+function liftWidthOverrides(className) {
+    return className?.match(WIDTH_OVERRIDE)?.join(' ');
+}
+/**
+ * ⛔ BELOW 768px A RAIL IS NOT A LAYOUT — once a consumer opts in.
+ *
+ * The widths above are a fixed share of a flex row, so at 390px the expanded
+ * rail took 63% of the screen and left the page 146px, and the only affordance
+ * — `SidebarExpandButton` — shrinks it to 72px, which is still 18% and still
+ * permanently on screen. There was nothing that removed it.
+ *
+ * With `mobile="drawer"` the rail is replaced below the breakpoint by an
+ * overlay drawer. Escape, the backdrop click, the focus trap and returning
+ * focus to whatever opened it are Radix Dialog's, through the kit's own
+ * `Sheet`; none of that is re-implemented here.
+ */
+export const SidebarRoot = ({ className, id, mobile = 'inline', mobileTitle = 'Navigation', ...props }) => {
+    const context = useSidebar();
+    const { isCollapsed, isMobile, openMobile, setOpenMobile, restoreDrawerFocus, sidebarId } = context;
+    if (!isMobile || mobile === 'inline') {
+        return (_jsx("nav", { "data-slot": "sidebar-root", className: cn(sidebarVariants({ collapsed: isCollapsed }), className), "data-collapsed": isCollapsed, ...props, id: mobile === 'drawer' ? sidebarId : id }));
+    }
+    return (_jsx(SidebarContext.Provider, { value: { ...context, isCollapsed: false, isDrawer: true }, children: _jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, children: _jsxs(SheetContent, { side: "left", 
+                // The Sheet's own paddings are built for a form panel; a rail brings
+                // its own. `max-w-full` so a consumer widening `--sidebar-width` past
+                // the viewport still cannot push the drawer off screen. The lifted
+                // override goes LAST so it re-points the variable this element reads.
+                //
+                // ⛔ THE `max-sm:` PAIR IS NOT A DUPLICATE. `SheetContent` grew a
+                // phone step — `max-sm:w-full max-sm:px-4` — because a form panel at
+                // two fifths of a 390px screen is unreadable. A NAVIGATION drawer is
+                // the one panel that must not take it: 244px over a dimmed page is
+                // the design, and full-bleed removes the tap-outside-to-close target
+                // that every other way out of this drawer is an alternative to.
+                // tailwind-merge drops a conflicting class only when the modifiers
+                // match, so a bare `w-[…]` cannot reach `max-sm:w-full` and these two
+                // tokens are what state the exemption. Measured: without them the
+                // drawer is 390px wide with 16px of inset on a 390px phone.
+                className: cn('w-[var(--sidebar-width)] max-w-full gap-0 p-0 max-sm:w-[var(--sidebar-width)] max-sm:p-0', liftWidthOverrides(className)), "aria-describedby": undefined, 
+                // ⛔ RADIX'S OWN RESTORE GOES NOWHERE HERE. `DialogContent`
+                // preventDefaults the focus scope's restore and focuses the ref a
+                // `SheetTrigger` would have filled; this drawer is opened from provider
+                // state, so that ref is null and closing dropped focus onto `<body>`.
+                // Running first means `composeEventHandlers` skips Radix's half.
+                onCloseAutoFocus: (event) => {
+                    event.preventDefault();
+                    restoreDrawerFocus();
+                }, children: [_jsx(SheetTitle, { className: "sr-only", children: mobileTitle }), _jsx("nav", { "data-slot": "sidebar-root", "data-mobile": "true", 
+                        /* ⛔ NO `data-collapsed` HERE. The consumer className is forwarded
+                           verbatim, and all eight console sidebars pass
+                           `data-[collapsed=false]:min-w-70`; stamping the attribute armed
+                           it, giving the navigation a 280px min-width inside a 244px sheet.
+                           `min-width` resolves after `max-width`, so the sheet could not
+                           claw it back and the contents were 36px wider than the drawer.
+                           `data-mobile` already names this surface and a drawer is never
+                           collapsed, so the attribute had nothing left to say. */
+                        className: cn(sidebarVariants({ collapsed: false }), 'h-full w-full shadow-none', className), ...props, 
+                        /* ⛔ AFTER THE SPREAD, AND NOT THE CALLER'S. This is the target of
+                           `SidebarTrigger`'s `aria-controls` and the handle the provider
+                           uses to put focus back into the navigation when the viewport
+                           grows. Spread first, a caller that set `id` replaced it and left
+                           a dangling `aria-controls` — which axe reports as a CRITICAL
+                           `aria-valid-attr-value` — and a focus restore that lands on
+                           `<body>`. Both silent. */
+                        id: sidebarId })] }) }) }));
 };

package/dist/esm/components/ui/sidebar/sidebar-trigger.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { IconButton } from '../icon-button/index.js';
+export type SidebarTriggerProps = React.ComponentProps<typeof IconButton>;
+/**
+ * The control that opens the mobile drawer.
+ *
+ * Hidden from 768px up by default, because above it the rail is already on
+ * screen and a second way to reach it is a second thing to explain; a consumer
+ * that wants it everywhere passes its own display class.
+ *
+ * ⛔ THE BREAKPOINT IS IN PIXELS, AND `md:hidden` IS NOT A SPELLING OF IT.
+ *
+ * Whether the rail became a drawer is decided by `SIDEBAR_MOBILE_QUERY`, which
+ * is `not (min-width: 768px)` — pixels. `md:` is 48rem, and rem inside a MEDIA
+ * QUERY resolves against the browser's default font size rather than anything
+ * the page declares, so the two flip at different widths the moment a reader
+ * changes that setting. At Chrome's "Small" (12px) `md:` turns over at 576px
+ * while the drawer still turns over at 768px: every window between them showed
+ * NO RAIL AND NO HAMBURGER, which is a console with no navigation at all.
+ * Measured on product-console; the band is four of this package's own fixtures
+ * in `scripts/measure-phone-shapes.mjs`. At "Very large" (20px) the same
+ * mismatch runs the other way and 768–959px drew both.
+ *
+ * `min-[768px]:hidden` is the exact complement of that query, at every font
+ * size AND at any sub-pixel precision — which is why the query next door is
+ * spelled as a negation rather than as `(max-width: 767px)`: that pair leaves
+ * the open interval (767, 768) matched by neither, and a viewport there draws
+ * the rail plus a hamburger that opens nothing.
+ *
+ * ⚠️ THE PROPERTY IS ABOUT THE TWO MEDIA DECISIONS, NOT ABOUT THE FIRST PAINT.
+ * The harness enforces one of the two and never neither or both, which holds
+ * wherever `isMobile` has been read. `isMobile` starts false on purpose — there
+ * is no viewport on the server — and is corrected in an effect, so on a phone
+ * the first painted frame shows the inline rail while this control is already
+ * on screen. That one hydration is the deliberate price of hydration safety,
+ * documented on `SidebarProvider`'s own effect, and predates this class.
+ *
+ * ⚠️ `aria-controls` IS SET ONLY WHILE THE DRAWER EXISTS. Radix unmounts the
+ * dialog content when closed, and a reference to an element that is not in the
+ * DOM is what axe-core reports as a CRITICAL `aria-valid-attr-value` — the same
+ * defect the Autocomplete panel was repaired for (console-sdk#150). A toggle
+ * with `aria-expanded="false"` and no `aria-controls` is complete on its own.
+ */
+export declare const SidebarTrigger: ({ className, onClick, "aria-label": ariaLabel, ...props }: SidebarTriggerProps) => React.JSX.Element;
+//# sourceMappingURL=sidebar-trigger.d.ts.map

package/dist/esm/components/ui/sidebar/sidebar-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-trigger.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sidebar/sidebar-trigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAG3C,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAA;AAEzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,cAAc,GAAI,2DAK5B,mBAAmB,sBAqBrB,CAAA"}

package/dist/esm/components/ui/sidebar/sidebar-trigger.js

@@ -0,0 +1,53 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Menu } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+import { IconButton } from '../icon-button/index.js';
+import { useSidebar } from './sidebar-provider.js';
+/**
+ * The control that opens the mobile drawer.
+ *
+ * Hidden from 768px up by default, because above it the rail is already on
+ * screen and a second way to reach it is a second thing to explain; a consumer
+ * that wants it everywhere passes its own display class.
+ *
+ * ⛔ THE BREAKPOINT IS IN PIXELS, AND `md:hidden` IS NOT A SPELLING OF IT.
+ *
+ * Whether the rail became a drawer is decided by `SIDEBAR_MOBILE_QUERY`, which
+ * is `not (min-width: 768px)` — pixels. `md:` is 48rem, and rem inside a MEDIA
+ * QUERY resolves against the browser's default font size rather than anything
+ * the page declares, so the two flip at different widths the moment a reader
+ * changes that setting. At Chrome's "Small" (12px) `md:` turns over at 576px
+ * while the drawer still turns over at 768px: every window between them showed
+ * NO RAIL AND NO HAMBURGER, which is a console with no navigation at all.
+ * Measured on product-console; the band is four of this package's own fixtures
+ * in `scripts/measure-phone-shapes.mjs`. At "Very large" (20px) the same
+ * mismatch runs the other way and 768–959px drew both.
+ *
+ * `min-[768px]:hidden` is the exact complement of that query, at every font
+ * size AND at any sub-pixel precision — which is why the query next door is
+ * spelled as a negation rather than as `(max-width: 767px)`: that pair leaves
+ * the open interval (767, 768) matched by neither, and a viewport there draws
+ * the rail plus a hamburger that opens nothing.
+ *
+ * ⚠️ THE PROPERTY IS ABOUT THE TWO MEDIA DECISIONS, NOT ABOUT THE FIRST PAINT.
+ * The harness enforces one of the two and never neither or both, which holds
+ * wherever `isMobile` has been read. `isMobile` starts false on purpose — there
+ * is no viewport on the server — and is corrected in an effect, so on a phone
+ * the first painted frame shows the inline rail while this control is already
+ * on screen. That one hydration is the deliberate price of hydration safety,
+ * documented on `SidebarProvider`'s own effect, and predates this class.
+ *
+ * ⚠️ `aria-controls` IS SET ONLY WHILE THE DRAWER EXISTS. Radix unmounts the
+ * dialog content when closed, and a reference to an element that is not in the
+ * DOM is what axe-core reports as a CRITICAL `aria-valid-attr-value` — the same
+ * defect the Autocomplete panel was repaired for (console-sdk#150). A toggle
+ * with `aria-expanded="false"` and no `aria-controls` is complete on its own.
+ */
+export const SidebarTrigger = ({ className, onClick, 'aria-label': ariaLabel = 'Open navigation', ...props }) => {
+    const { openMobile, setOpenMobile, sidebarId } = useSidebar();
+    return (_jsx(IconButton, { type: "button", variant: "outline", "data-slot": "sidebar-trigger", "aria-label": ariaLabel, "aria-expanded": openMobile, "aria-controls": openMobile ? sidebarId : undefined, className: cn('min-[768px]:hidden', className), onClick: (event) => {
+            onClick?.(event);
+            setOpenMobile(!openMobile);
+        }, ...props, children: _jsx(Menu, { "aria-hidden": true }) }));
+};

package/dist/esm/components/ui/textarea/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../../lib/utils.js';
 function Textarea({ className, ...props }) {
-    return (_jsx("textarea", { className: cn('border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex w-full rounded-md border px-3 py-2 text-base focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden', 'read-only:bg-muted read-only:cursor-default read-only:caret-transparent read-only:opacity-50 read-only:select-text read-only:focus:ring-0 read-only:focus:ring-offset-0 read-only:focus:outline-hidden', 'disabled:cursor-not-allowed disabled:opacity-50', className), ...props }));
+    return (_jsx("textarea", { className: cn('border-input-border bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex w-full rounded-md border px-3 py-2 text-base focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden', 'read-only:bg-muted read-only:cursor-default read-only:caret-transparent read-only:opacity-50 read-only:select-text read-only:focus:ring-0 read-only:focus:ring-offset-0 read-only:focus:outline-hidden', 'disabled:cursor-not-allowed disabled:opacity-50', className), ...props }));
 }
 export { Textarea };

package/dist/esm/components/ui/toast/toaster.d.ts

@@ -1,3 +1,5 @@
+import type { ComponentProps } from 'react';
+import { Toaster as SonnerToaster } from 'sonner';
 type ToasterProps = {
     /**
      * Forces the toast theme. Omit it inside a `ThemeProvider` to follow the
@@ -5,7 +7,9 @@ type ToasterProps = {
      * leaving the light/dark call to sonner's own media query.
      */
     theme?: 'light' | 'dark' | 'system';
+    /** Where the toast stack sits on screen. Defaults to `'bottom-right'`. */
+    position?: ComponentProps<typeof SonnerToaster>['position'];
 };
-export declare function Toaster({ theme }: ToasterProps): import("react").JSX.Element;
+export declare function Toaster({ theme, position }: ToasterProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=toaster.d.ts.map

package/dist/esm/components/ui/toast/toaster.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/toast/toaster.tsx"],"names":[],"mappings":"AAMA,KAAK,YAAY,GAAG;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;CACpC,CAAA;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAqB9C"}
+{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/toast/toaster.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,QAAQ,CAAA;AAKjD,KAAK,YAAY,GAAG;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;IACnC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,UAAU,CAAC,CAAA;CAC5D,CAAA;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,QAAyB,EAAE,EAAE,YAAY,+BAqBzE"}

package/dist/esm/components/ui/toast/toaster.js

@@ -1,12 +1,13 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Toaster as SonnerToaster } from 'sonner';
+import { DEFAULT_DURATION } from '../../../hooks/use-toast.js';
 import { useOptionalTheme } from '../../../theme/theme-provider.js';
-export function Toaster({ theme }) {
+export function Toaster({ theme, position = 'bottom-right' }) {
     // Optional read: a Toaster mounted outside any ThemeProvider must still
     // render, so this cannot go through `useTheme`, which throws.
     const themeContext = useOptionalTheme();
-    return (_jsx(SonnerToaster, { theme: theme ?? themeContext?.resolvedTheme ?? 'system', position: "bottom-right", visibleToasts: 3, duration: 10000, expand: false, closeButton: true, richColors: false, offset: 16, gap: 8, toastOptions: {
+    return (_jsx(SonnerToaster, { theme: theme ?? themeContext?.resolvedTheme ?? 'system', position: position, visibleToasts: 3, duration: DEFAULT_DURATION, expand: false, closeButton: true, richColors: false, offset: 16, gap: 8, toastOptions: {
             className: 'font-sans !text-sm !font-medium'
         } }));
 }

package/dist/esm/enterprise/data-table/index.d.ts

@@ -1,13 +1,53 @@
-import { type ColumnDef, type OnChangeFn, type RowData, type RowSelectionState, type SortingState } from '@tanstack/react-table';
+import { type ColumnDef, type OnChangeFn, type RowData, type RowSelectionState, type SortingState, type VisibilityState } from '@tanstack/react-table';
 import { type EmptyStateProps } from '../empty-state/index.js';
 /**
- * Per-column opt-in for ledger numeric alignment. Set `meta: { numeric: true }`
- * on a money/number `ColumnDef` and DataTable right-aligns both the header and
- * its body cells (mono tabular figures).
+ * Per-column channel into the cells DataTable renders on the consumer's behalf:
+ * how a column aligns, what classes it carries on head and body, and whether it
+ * renders its own `<td>` at all. The member names are frozen by plan
+ * 2026-09-21-console-simplification C9.
  */
 declare module '@tanstack/react-table' {
     interface ColumnMeta<TData extends RowData, TValue> {
+        /**
+         * Ledger numeric treatment: right-aligns the header and its body cells and
+         * gives the body mono tabular figures. `align` overrides the alignment half
+         * on its own — the figures stay mono.
+         */
         numeric?: boolean;
+        /**
+         * Column alignment, header and body. Beats `numeric`'s implicit right, so a
+         * money column can read left or centre without losing its figure treatment.
+         * With `renderOwnCell` it reaches the header only — the body cell is the
+         * consumer's, and so is aligning it.
+         */
+        align?: 'left' | 'right' | 'center';
+        /**
+         * Extra classes on this column's `<th>`, merged AFTER the table-level
+         * `headClassName` so one column can override what the table set for all.
+         */
+        headerClassName?: string;
+        /**
+         * Extra classes on this column's body `<td>`, merged after the numeric and
+         * density treatments. IGNORED when `renderOwnCell` is set: there is no cell
+         * of the table's left to carry them. Use `headerClassName` for the `<th>`,
+         * which the table still owns either way.
+         */
+        className?: string;
+        /**
+         * The column's `cell` renderer emits its own `<td>`; DataTable renders it
+         * bare rather than wrapping it. The HEADER is still the table's `<th>` —
+         * nothing about owning a body cell makes a column own its header, and a
+         * table whose head and body disagree on cell count is broken markup.
+         *
+         * So the split is by element, not by column: the head still takes `align`,
+         * `numeric`, `headerClassName` and the declared width, because the `<th>`
+         * is the table's to style; the BODY takes none of them, because the `<td>`
+         * is the consumer's. A money column declaring `align: 'right'` therefore
+         * gets a right-aligned header and must right-align its own cell to match —
+         * leave the cell's alignment out and the figures sit under a heading that
+         * points somewhere else.
+         */
+        renderOwnCell?: boolean;
     }
 }
 /**
@@ -71,6 +111,35 @@ type SortingProps = {
     /** Controlled sort updater (TanStack `OnChangeFn`). */
     onSortingChange: OnChangeFn<SortingState>;
 };
+/**
+ * Column visibility is controlled but, deliberately, NOT a required pair — a
+ * departure from the two unions above, and not drift. Those two are unions
+ * because each has an `enable*` flag whose "on" state is meaningless without
+ * the controlled pair. TanStack has no enable flag for visibility: the model is
+ * always running, and the only shipped consumer passes STATE WITH NO UPDATER,
+ * because a separate dropdown owns the state on the page. Requiring the pair
+ * would refuse that usage.
+ *
+ * What the union does forbid is the updater ALONE: TanStack reads an
+ * `on[State]Change` callback as a declaration of controlled state, so a
+ * callback with no `columnVisibility` freezes visibility at its initial value
+ * while the callback keeps firing. Prop names frozen by plan
+ * 2026-09-21-console-simplification C9.
+ *
+ * Omit both and the table keeps its own visibility state, exactly as before.
+ */
+type ColumnVisibilityProps = {
+    /** Controlled column-visibility state (TanStack `VisibilityState`). */
+    columnVisibility: VisibilityState;
+    /**
+     * Controlled updater (TanStack `OnChangeFn`). Optional: a consumer may
+     * drive the state from outside the table entirely.
+     */
+    onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
+} | {
+    columnVisibility?: undefined;
+    onColumnVisibilityChange?: undefined;
+};
 type DataTableBaseProps<TData> = {
     columns: ColumnDef<TData, unknown>[];
     data: TData[];
@@ -117,7 +186,8 @@ type DataTableBaseProps<TData> = {
     /**
      * Extra classes merged onto every header cell, after the kit label voice —
      * so a caller can override the voice's size/tracking/color for one table
-     * without restating the cluster. Per-column alignment stays `meta.numeric`.
+     * without restating the cluster. Per column, `meta.headerClassName` merges
+     * after this one and `meta.align` / `meta.numeric` own the alignment.
      */
     headClassName?: string;
     /**
@@ -127,7 +197,7 @@ type DataTableBaseProps<TData> = {
      */
     footer?: React.ReactNode;
 };
-export type DataTableProps<TData> = DataTableBaseProps<TData> & RowSelectionProps<TData> & SortingProps;
-export declare function DataTable<TData>({ columns, data, loading, skeletonRows, loadingLabel, empty, getRowId, flush, density, enableRowSelection, rowSelection, onRowSelectionChange, getRowSelectionLabel, enableSorting, sorting, onSortingChange, onRowActivate, rowHref, className, headClassName, footer }: DataTableProps<TData>): import("react").JSX.Element;
+export type DataTableProps<TData> = DataTableBaseProps<TData> & RowSelectionProps<TData> & SortingProps & ColumnVisibilityProps;
+export declare function DataTable<TData>({ columns, data, loading, skeletonRows, loadingLabel, empty, getRowId, flush, density, enableRowSelection, rowSelection, onRowSelectionChange, getRowSelectionLabel, enableSorting, sorting, onSortingChange, columnVisibility, onColumnVisibilityChange, onRowActivate, rowHref, className, headClassName, footer }: DataTableProps<TData>): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/enterprise/data-table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/data-table/index.tsx"],"names":[],"mappings":"AAuDA,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,UAAU,EAEf,KAAK,OAAO,EACZ,KAAK,iBAAiB,EACtB,KAAK,YAAY,EAElB,MAAM,uBAAuB,CAAA;AAc9B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAGjE;;;;GAIG;AACH,OAAO,QAAQ,uBAAuB,CAAC;IAIrC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,OAAO,CAAC,EAAE,OAAO,CAAA;KAClB;CACF;AAED;;;;;;;;GAQG;AACH,KAAK,iBAAiB,CAAC,KAAK,IACxB;IACE,kBAAkB,CAAC,EAAE,KAAK,CAAA;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,oBAAoB,CAAC,EAAE,KAAK,CAAA;IAC5B,oBAAoB,CAAC,EAAE,KAAK,CAAA;CAC7B,GACD;IACE,kBAAkB,EAAE,IAAI,CAAA;IACxB,kFAAkF;IAClF,YAAY,EAAE,iBAAiB,CAAA;IAC/B,4DAA4D;IAC5D,oBAAoB,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAA;IACnD;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAA;CAC9C,CAAA;AAEL;;;;;;;;;;;;;;;;GAgBG;AACH,KAAK,YAAY,GACb;IACE,aAAa,CAAC,EAAE,KAAK,CAAA;IACrB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,eAAe,CAAC,EAAE,KAAK,CAAA;CACxB,GACD;IACE,aAAa,EAAE,IAAI,CAAA;IACnB;;;;;OAKG;IACH,OAAO,EAAE,YAAY,CAAA;IACrB,uDAAuD;IACvD,eAAe,EAAE,UAAU,CAAC,YAAY,CAAC,CAAA;CAC1C,CAAA;AAEL,KAAK,kBAAkB,CAAC,KAAK,IAAI;IAC/B,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAA;IACpC,IAAI,EAAE,KAAK,EAAE,CAAA;IACb,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iGAAiG;IACjG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;IACnC;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;IACpC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,cAAc,CAAC,KAAK,IAAI,kBAAkB,CAAC,KAAK,CAAC,GAC3D,iBAAiB,CAAC,KAAK,CAAC,GACxB,YAAY,CAAA;AA8Fd,wBAAgB,SAAS,CAAC,KAAK,EAAE,EAC/B,OAAO,EACP,IAAI,EACJ,OAAe,EACf,YAAgB,EAChB,YAAmC,EACnC,KAAK,EACL,QAAQ,EACR,KAAa,EACb,OAAuB,EACvB,kBAA0B,EAC1B,YAAY,EACZ,oBAAoB,EACpB,oBAAoB,EACpB,aAAqB,EACrB,OAAO,EACP,eAAe,EACf,aAAa,EACb,OAAO,EACP,SAAS,EACT,aAAa,EACb,MAAM,EACP,EAAE,cAAc,CAAC,KAAK,CAAC,+BAyTvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/data-table/index.tsx"],"names":[],"mappings":"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"}

package/dist/esm/enterprise/data-table/index.js

@@ -52,7 +52,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * activation. Keydown events originating from interactive children (links,
  * buttons, checkboxes, form fields) are never hijacked.
  */
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '../../components/ui/table/index.js';
 import { Skeleton } from '../../components/ui/skeleton/index.js';
@@ -62,8 +62,21 @@ import { EmptyState } from '../empty-state/index.js';
 import { readPreferredColumnSize, UNSIZED_DEFAULT_COLUMN } from './column-size.js';
 const SELECTION_COLUMN_ID = '__select__';
 const CHECKBOX_CLASS = 'accent-primary block size-4';
-/** Right-aligned mono treatment for `meta: { numeric: true }` columns. */
-const NUMERIC_CELL_CLASS = 'text-right font-mono tabular-nums';
+/** Figure treatment for `meta: { numeric: true }` columns; the alignment half
+ * lives in ALIGN_CELL_CLASS so `meta.align` can override one without the other. */
+const NUMERIC_FIGURE_CLASS = 'font-mono tabular-nums';
+/**
+ * Body-cell alignment, one class per direction rather than a single string with
+ * `text-right` baked in: an explicit `meta.align` has to beat `numeric` by
+ * choosing the class, not by out-ordering it — tailwind-merge resolving two
+ * conflicting alignment utilities by source order is not a contract worth
+ * relying on.
+ */
+const ALIGN_CELL_CLASS = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right'
+};
 /**
  * Keydown events whose target sits inside one of these are never hijacked
  * by the row-level keyboard handler — Space in a checkbox and Enter on an
@@ -113,7 +126,7 @@ function createSelectionColumn(getLabel) {
         cell: ({ row }) => _jsx(RowSelectionCheckbox, { row: row, getLabel: getLabel })
     };
 }
-export function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLabel = 'Loading table rows', empty, getRowId, flush = false, density = 'comfortable', enableRowSelection = false, rowSelection, onRowSelectionChange, getRowSelectionLabel, enableSorting = false, sorting, onSortingChange, onRowActivate, rowHref, className, headClassName, footer }) {
+export function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLabel = 'Loading table rows', empty, getRowId, flush = false, density = 'comfortable', enableRowSelection = false, rowSelection, onRowSelectionChange, getRowSelectionLabel, enableSorting = false, sorting, onSortingChange, columnVisibility, onColumnVisibilityChange, onRowActivate, rowHref, className, headClassName, footer }) {
     const tableColumns = useMemo(() => enableRowSelection
         ? [createSelectionColumn(getRowSelectionLabel), ...columns]
         : columns, [columns, enableRowSelection, getRowSelectionLabel]);
@@ -139,12 +152,33 @@ export function DataTable({ columns, data, loading = false, skeletonRows = 8, lo
         manualSorting: true,
         enableSorting,
         onSortingChange: enableSorting ? onSortingChange : undefined,
+        // ⛔ EACH VISIBILITY ENTRY IS GUARDED ON ITS OWN PROP, NEVER ON THE OTHER.
+        //
+        // TanStack merges options as `{...defaultOptions, ...options}` and state as
+        // `{...internalState, ...options.state}`, both plain spreads — so a key
+        // present and holding `undefined` OVERWRITES what it was meant to leave
+        // alone. `onColumnVisibilityChange: undefined` replaces the feature's own
+        // `makeStateUpdater`, and `setColumnVisibility` reads
+        // `options.onColumnVisibilityChange == null ? void 0 : ...`, so it (and
+        // every `column.toggleVisibility` behind it) becomes a silent no-op.
+        // `columnVisibility: undefined` replaces the table's initial `{}`, so a
+        // consumer reading the slice gets `undefined` instead of an empty object.
+        //
+        // Guarding the UPDATER on the STATE put that `undefined` back for the
+        // union's first arm — state with no updater, which is the shipped console
+        // usage, where a separate dropdown owns the state. A table that passes
+        // neither prop is uncontrolled, exactly as before.
+        ...(onColumnVisibilityChange !== undefined && { onColumnVisibilityChange }),
         state: {
             rowSelection: enableRowSelection ? (rowSelection ?? {}) : undefined,
-            sorting: enableSorting ? (sorting ?? []) : undefined
+            sorting: enableSorting ? (sorting ?? []) : undefined,
+            ...(columnVisibility !== undefined && { columnVisibility })
         }
     });
-    const colCount = tableColumns.length;
+    // Visible, not declared: the skeleton grid and the empty row's colSpan have
+    // to match the header the table actually rendered, and a hidden column is in
+    // `tableColumns` but in no `<th>`.
+    const colCount = table.getVisibleLeafColumns().length;
     const dataRows = table.getRowModel().rows;
     const rowCount = dataRows.length;
     // Compact density overrides only THIS table's cell padding (tailwind-merge
@@ -262,13 +296,13 @@ export function DataTable({ columns, data, loading = false, skeletonRows = 8, lo
                     : rowCount === 0
                         ? 'No rows'
                         : `${rowCount} rows` }), _jsxs(Table, { "aria-busy": loading ? 'true' : undefined, children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: "hover:bg-transparent", children: headerGroup.headers.map((header) => {
-                                const numeric = header.column.columnDef.meta?.numeric;
-                                return (_jsx(TableHead, { align: numeric ? 'right' : undefined, "aria-sort": header.isPlaceholder
+                                const meta = header.column.columnDef.meta;
+                                return (_jsx(TableHead, { align: meta?.align ?? (meta?.numeric ? 'right' : undefined), "aria-sort": header.isPlaceholder
                                         ? undefined
                                         : ariaSortFor(header.column), 
                                     // Only a column that DECLARED sizing gets an inline width;
                                     // everything else keeps the auto table layout it has today.
-                                    style: readPreferredColumnSize(header.column), className: cn(LABEL_VOICE_CLASS, headDensityClass, header.column.id === SELECTION_COLUMN_ID && 'w-10', headClassName), children: header.isPlaceholder
+                                    style: readPreferredColumnSize(header.column), className: cn(LABEL_VOICE_CLASS, headDensityClass, header.column.id === SELECTION_COLUMN_ID && 'w-10', headClassName, meta?.headerClassName), children: header.isPlaceholder
                                         ? null
                                         : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
                             }) }, headerGroup.id))) }), _jsx(TableBody, { children: loading ? (Array.from({ length: skeletonRows }).map((_, rowIndex) => (_jsx(TableRow, { className: "hover:bg-transparent", children: Array.from({ length: colCount }).map((__, cellIndex) => (_jsx(TableCell, { className: cellDensityClass, children: _jsx(Skeleton, { className: "h-4 w-full max-w-[160px]" }) }, `skeleton-${rowIndex}-${cellIndex}`))) }, `skeleton-${rowIndex}`)))) : rowCount === 0 ? (_jsx(TableRow, { className: "hover:bg-transparent", children: _jsx(TableCell, { colSpan: colCount, className: "p-0", children: _jsx(EmptyState, { title: empty?.title ?? 'Nothing here yet', description: empty?.description, icon: empty?.icon, action: empty?.action, 
@@ -291,7 +325,18 @@ export function DataTable({ columns, data, loading = false, skeletonRows = 8, lo
                                 ? (event) => handleRowKeyDown(event, row, rowIndex)
                                 : undefined, className: keyboardNav ? ROW_FOCUS_CLASS : undefined, "data-state": enableRowSelection && row.getIsSelected()
                                 ? 'selected'
-                                : undefined, children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { style: readPreferredColumnSize(cell.column), className: cn(cell.column.columnDef.meta?.numeric && NUMERIC_CELL_CLASS, cellDensityClass, cell.column.id === SELECTION_COLUMN_ID && 'w-10'), onClick: cell.column.id === SELECTION_COLUMN_ID
-                                    ? stopPropagation
-                                    : undefined, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) }), footer ? _jsx(TableFooter, { children: footer }) : null] })] }));
+                                : undefined, children: row.getVisibleCells().map((cell) => {
+                                const meta = cell.column.columnDef.meta;
+                                const content = flexRender(cell.column.columnDef.cell, cell.getContext());
+                                // The column owns its `<td>`: render the consumer's cell bare.
+                                // The kit's selection column is built here and carries no
+                                // meta, so it can never take this path.
+                                if (meta?.renderOwnCell) {
+                                    return _jsx(Fragment, { children: content }, cell.id);
+                                }
+                                const align = meta?.align ?? (meta?.numeric ? 'right' : undefined);
+                                return (_jsx(TableCell, { style: readPreferredColumnSize(cell.column), className: cn(meta?.numeric && NUMERIC_FIGURE_CLASS, align && ALIGN_CELL_CLASS[align], cellDensityClass, cell.column.id === SELECTION_COLUMN_ID && 'w-10', meta?.className), onClick: cell.column.id === SELECTION_COLUMN_ID
+                                        ? stopPropagation
+                                        : undefined, children: content }, cell.id));
+                            }) }, row.id)))) }), footer ? _jsx(TableFooter, { children: footer }) : null] })] }));
 }

package/dist/esm/enterprise/date-range-picker/index.js

@@ -89,12 +89,12 @@ export function DateRangePicker({ value, onValueChange, fromId, toId, fromLabel,
         });
     };
     const triggerClass = cn(
-    // border-shadcn-400, not border-input: `--input` is a SURFACE token and is
-    // white in the light theme, so the trigger had no visible edge next to the
-    // Input and Select it sits with. font-sans, not font-mono: the dates are
+    // border-input-border, not border-input: `--input` is a SURFACE token and
+    // is white in the light theme, so the trigger had no visible edge next to
+    // the Input and Select it sits with. font-sans, not font-mono: the dates are
     // figures in the body face with tabular figures, like every other figure in
     // the console.
-    'border-shadcn-400 bg-card hover:bg-secondary focus-visible:ring-ring flex h-9 items-center gap-2 rounded-md border px-3 text-left font-sans text-sm tabular-nums transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none sm:w-40', invalid && 'border-destructive', 
+    'border-input-border bg-card hover:bg-secondary focus-visible:ring-ring flex h-9 items-center gap-2 rounded-md border px-3 text-left font-sans text-sm tabular-nums transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none sm:w-40', invalid && 'border-destructive', 
     // Conditional rather than `disabled:` variants, matching how this file
     // already applies `border-destructive`: with the prop absent the class
     // string stays byte-identical to what consumers render today.

package/dist/esm/enterprise/number-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/number-input/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,wDAAwD;IACxD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,+EAA+E;IAC/E,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,sDAAsD;IACtD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAmED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAgBpE;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAMxE;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EACb,GAAG,EACH,GAAG,EACH,IAAQ,EACR,SAAS,EACT,MAAM,EACN,QAAgB,EAChB,EAAE,EACF,SAAS,EACT,WAAW,EACX,YAAY,EAAE,SAAS,EACvB,kBAAkB,EAAE,eAAe,EACpC,EAAE,gBAAgB,qBAgJlB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/number-input/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,wDAAwD;IACxD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,+EAA+E;IAC/E,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,sDAAsD;IACtD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAmED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAgBpE;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAMxE;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EACb,GAAG,EACH,GAAG,EACH,IAAQ,EACR,SAAS,EACT,MAAM,EACN,QAAgB,EAChB,EAAE,EACF,SAAS,EACT,WAAW,EACX,YAAY,EAAE,SAAS,EACvB,kBAAkB,EAAE,eAAe,EACpC,EAAE,gBAAgB,qBA2JlB"}