@atom-learning/components 6.0.0-beta.1 → 6.0.0-beta.3

package/dist/components/data-table/DataTable.d.ts

@@ -23,10 +23,19 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * Can be configured with alternating colours of rows. If you need more customisation options,
      * you can build your own implementation with `useDataTable()` and the UI-only `Table` components.
      */
-    Body: ({ striped, ...props }: {
-        color?: string | undefined;
-        content?: string | undefined;
-        translate?: "yes" | "no" | undefined;
+    Body: ({ striped, rowAction, ...props }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+        ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
+    }, "css" | "striped"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
+        striped?: boolean | "true" | "false" | undefined;
+    }, {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        reducedMotion: string;
+        allowMotion: string;
+        hover: string;
+    }> & {
         css?: import("@atom-learning/stitches-react/types/css-util").CSS<{
             sm: string;
             md: string;
@@ -388,277 +397,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
             };
         }> | undefined;
-        prefix?: string | undefined;
-        slot?: string | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined;
-        ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
-        key?: import("react").Key | null | undefined;
-        defaultChecked?: boolean | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined;
-        suppressHydrationWarning?: boolean | undefined;
-        accessKey?: string | undefined;
-        autoFocus?: boolean | undefined;
-        className?: string | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
-        contextMenu?: string | undefined;
-        dir?: string | undefined;
-        draggable?: (boolean | "true" | "false") | undefined;
-        hidden?: boolean | undefined;
-        id?: string | undefined;
-        lang?: string | undefined;
-        nonce?: string | undefined;
-        placeholder?: string | undefined;
-        spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined;
-        radioGroup?: string | undefined;
-        role?: import("react").AriaRole | undefined;
-        about?: string | undefined;
-        datatype?: string | undefined;
-        inlist?: any;
-        property?: string | undefined;
-        rel?: string | undefined;
-        resource?: string | undefined;
-        rev?: string | undefined;
-        typeof?: string | undefined;
-        vocab?: string | undefined;
-        autoCapitalize?: string | undefined;
-        autoCorrect?: string | undefined;
-        autoSave?: string | undefined;
-        itemProp?: string | undefined;
-        itemScope?: boolean | undefined;
-        itemType?: string | undefined;
-        itemID?: string | undefined;
-        itemRef?: string | undefined;
-        results?: number | undefined;
-        security?: string | undefined;
-        unselectable?: "on" | "off" | undefined;
-        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
-        is?: string | undefined;
-        "aria-activedescendant"?: string | undefined;
-        "aria-atomic"?: (boolean | "true" | "false") | undefined;
-        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
-        "aria-busy"?: (boolean | "true" | "false") | undefined;
-        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
-        "aria-colcount"?: number | undefined;
-        "aria-colindex"?: number | undefined;
-        "aria-colspan"?: number | undefined;
-        "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
-        "aria-describedby"?: string | undefined;
-        "aria-details"?: string | undefined;
-        "aria-disabled"?: (boolean | "true" | "false") | undefined;
-        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
-        "aria-errormessage"?: string | undefined;
-        "aria-expanded"?: (boolean | "true" | "false") | undefined;
-        "aria-flowto"?: string | undefined;
-        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
-        "aria-hidden"?: (boolean | "true" | "false") | undefined;
-        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
-        "aria-keyshortcuts"?: string | undefined;
-        "aria-label"?: string | undefined;
-        "aria-labelledby"?: string | undefined;
-        "aria-level"?: number | undefined;
-        "aria-live"?: "off" | "assertive" | "polite" | undefined;
-        "aria-modal"?: (boolean | "true" | "false") | undefined;
-        "aria-multiline"?: (boolean | "true" | "false") | undefined;
-        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-        "aria-orientation"?: "horizontal" | "vertical" | undefined;
-        "aria-owns"?: string | undefined;
-        "aria-placeholder"?: string | undefined;
-        "aria-posinset"?: number | undefined;
-        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
-        "aria-readonly"?: (boolean | "true" | "false") | undefined;
-        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
-        "aria-required"?: (boolean | "true" | "false") | undefined;
-        "aria-roledescription"?: string | undefined;
-        "aria-rowcount"?: number | undefined;
-        "aria-rowindex"?: number | undefined;
-        "aria-rowspan"?: number | undefined;
-        "aria-selected"?: (boolean | "true" | "false") | undefined;
-        "aria-setsize"?: number | undefined;
-        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
-        "aria-valuemax"?: number | undefined;
-        "aria-valuemin"?: number | undefined;
-        "aria-valuenow"?: number | undefined;
-        "aria-valuetext"?: string | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined;
-        onCopy?: import("react").ClipboardEventHandler<HTMLTableSectionElement> | undefined;
-        onCopyCapture?: import("react").ClipboardEventHandler<HTMLTableSectionElement> | undefined;
-        onCut?: import("react").ClipboardEventHandler<HTMLTableSectionElement> | undefined;
-        onCutCapture?: import("react").ClipboardEventHandler<HTMLTableSectionElement> | undefined;
-        onPaste?: import("react").ClipboardEventHandler<HTMLTableSectionElement> | undefined;
-        onPasteCapture?: import("react").ClipboardEventHandler<HTMLTableSectionElement> | undefined;
-        onCompositionEnd?: import("react").CompositionEventHandler<HTMLTableSectionElement> | undefined;
-        onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLTableSectionElement> | undefined;
-        onCompositionStart?: import("react").CompositionEventHandler<HTMLTableSectionElement> | undefined;
-        onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLTableSectionElement> | undefined;
-        onCompositionUpdate?: import("react").CompositionEventHandler<HTMLTableSectionElement> | undefined;
-        onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLTableSectionElement> | undefined;
-        onFocus?: import("react").FocusEventHandler<HTMLTableSectionElement> | undefined;
-        onFocusCapture?: import("react").FocusEventHandler<HTMLTableSectionElement> | undefined;
-        onBlur?: import("react").FocusEventHandler<HTMLTableSectionElement> | undefined;
-        onBlurCapture?: import("react").FocusEventHandler<HTMLTableSectionElement> | undefined;
-        onChange?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
-        onChangeCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
-        onBeforeInput?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
-        onBeforeInputCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
-        onInput?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
-        onInputCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
-        onReset?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
-        onResetCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
-        onSubmit?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
-        onSubmitCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
-        onInvalid?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
-        onInvalidCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
-        onLoad?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onLoadCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onError?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onErrorCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onKeyDown?: import("react").KeyboardEventHandler<HTMLTableSectionElement> | undefined;
-        onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLTableSectionElement> | undefined;
-        onKeyPress?: import("react").KeyboardEventHandler<HTMLTableSectionElement> | undefined;
-        onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLTableSectionElement> | undefined;
-        onKeyUp?: import("react").KeyboardEventHandler<HTMLTableSectionElement> | undefined;
-        onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLTableSectionElement> | undefined;
-        onAbort?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onAbortCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onCanPlay?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onCanPlayCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onCanPlayThrough?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onDurationChange?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onDurationChangeCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onEmptied?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onEmptiedCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onEncrypted?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onEncryptedCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onEnded?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onEndedCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onLoadedData?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onLoadedDataCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onLoadedMetadata?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onLoadStart?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onLoadStartCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onPause?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onPauseCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onPlay?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onPlayCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onPlaying?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onPlayingCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onProgress?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onProgressCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onRateChange?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onRateChangeCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onSeeked?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onSeekedCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onSeeking?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onSeekingCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onStalled?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onStalledCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onSuspend?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onSuspendCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onTimeUpdate?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onVolumeChange?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onWaiting?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onWaitingCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onAuxClick?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
-        onAuxClickCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
-        onClick?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
-        onClickCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
-        onContextMenu?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
-        onContextMenuCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
-        onDoubleClick?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
-        onDoubleClickCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
-        onDrag?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
-        onDragCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
-        onDragEnd?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
-        onDragEndCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
-        onDragEnter?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
-        onDragEnterCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
-        onDragExit?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
-        onDragExitCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
-        onDragLeave?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
-        onDragLeaveCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
-        onDragOver?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
-        onDragOverCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
-        onDragStart?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
-        onDragStartCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
-        onDrop?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
-        onDropCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
-        onMouseDown?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
-        onMouseDownCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
-        onMouseEnter?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
-        onMouseLeave?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
-        onMouseMove?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
-        onMouseMoveCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
-        onMouseOut?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
-        onMouseOutCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
-        onMouseOver?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
-        onMouseOverCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
-        onMouseUp?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
-        onMouseUpCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
-        onSelect?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onSelectCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
-        onTouchCancel?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
-        onTouchCancelCapture?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
-        onTouchEnd?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
-        onTouchEndCapture?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
-        onTouchMove?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
-        onTouchMoveCapture?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
-        onTouchStart?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
-        onTouchStartCapture?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
-        onPointerDown?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
-        onPointerDownCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
-        onPointerMove?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
-        onPointerMoveCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
-        onPointerUp?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
-        onPointerUpCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
-        onPointerCancel?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
-        onPointerCancelCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
-        onPointerEnter?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
-        onPointerEnterCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
-        onPointerLeave?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
-        onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
-        onPointerOver?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
-        onPointerOverCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
-        onPointerOut?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
-        onPointerOutCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
-        onGotPointerCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
-        onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
-        onLostPointerCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
-        onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
-        onScroll?: import("react").UIEventHandler<HTMLTableSectionElement> | undefined;
-        onScrollCapture?: import("react").UIEventHandler<HTMLTableSectionElement> | undefined;
-        onWheel?: import("react").WheelEventHandler<HTMLTableSectionElement> | undefined;
-        onWheelCapture?: import("react").WheelEventHandler<HTMLTableSectionElement> | undefined;
-        onAnimationStart?: import("react").AnimationEventHandler<HTMLTableSectionElement> | undefined;
-        onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLTableSectionElement> | undefined;
-        onAnimationEnd?: import("react").AnimationEventHandler<HTMLTableSectionElement> | undefined;
-        onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLTableSectionElement> | undefined;
-        onAnimationIteration?: import("react").AnimationEventHandler<HTMLTableSectionElement> | undefined;
-        onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLTableSectionElement> | undefined;
-        onTransitionEnd?: import("react").TransitionEventHandler<HTMLTableSectionElement> | undefined;
-        onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLTableSectionElement> | undefined;
-        striped?: boolean | "true" | "false" | ({
-            "@sm"?: boolean | "true" | "false" | undefined;
-            "@md"?: boolean | "true" | "false" | undefined;
-            "@lg"?: boolean | "true" | "false" | undefined;
-            "@xl"?: boolean | "true" | "false" | undefined;
-            "@reducedMotion"?: boolean | "true" | "false" | undefined;
-            "@allowMotion"?: boolean | "true" | "false" | undefined;
-            "@hover"?: boolean | "true" | "false" | undefined;
-            "@initial"?: boolean | "true" | "false" | undefined;
-        } & {
-            [x: string]: boolean | "true" | "false" | undefined;
-        }) | undefined;
+    }, "children"> & {
+        rowAction?: (row: Record<string, unknown>, event: import("react").MouseEvent) => void;
     }) => import("react").JSX.Element;
     /** Default table data cell implementation for `DataTable`
      *
@@ -1810,6 +1550,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
             numberOfStickyColumns?: number;
             scrollContainerCss?: import("../..").CSS;
         };
+        rowAction?: (row: Record<string, unknown>, event: import("react").MouseEvent) => void;
     } & {
         idColumn?: string;
         onDragAndDrop?: (onDragAndDropData: {
@@ -3415,7 +3156,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * Renders all visible cells as `Table.Cell`. If you need more customisation options,
      * you can build your own implementation with the UI-only `Table` components.
      */
-    Row: ({ row }: import("./DataTableRow").DataTableRowProps) => import("react").JSX.Element;
+    Row: ({ row, rowAction }: import("./DataTableRow").DataTableRowProps) => import("react").JSX.Element;
     /** Default table implementation for `DataTable`.
      *
      * Can be configured with sortable columns and different visual themes.
@@ -3425,7 +3166,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * scratch with `useDataTable` and the UI-only `Table` components.
      *
      */
-    Table: ({ sortable, striped, theme, css, scrollOptions, ...props }: import("./DataTableTable").DataTableTableProps) => import("react").JSX.Element | null;
+    Table: ({ sortable, striped, theme, css, scrollOptions, rowAction, ...props }: import("./DataTableTable").DataTableTableProps) => import("react").JSX.Element | null;
     /** Default loading implementation for remote data
      *
      * Renders a loading component while fetching the paginated data using `getAsyncData`.

package/dist/components/data-table/DataTableBody.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { Table } from '../table';
-type DataTableBodyProps = Omit<React.ComponentProps<typeof Table.Body>, 'children'>;
-export declare const DataTableBody: ({ striped, ...props }: DataTableBodyProps) => React.JSX.Element;
+type DataTableBodyProps = Omit<React.ComponentProps<typeof Table.Body>, 'children'> & {
+    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
+};
+export declare const DataTableBody: ({ striped, rowAction, ...props }: DataTableBodyProps) => React.JSX.Element;
 export {};

package/dist/components/data-table/DataTableBody.js

@@ -1,2 +1,2 @@
-import*as r from"react";import{Table as m}from"../table/Table.js";import{useDataTable as p}from"./DataTableContext.js";import{DataTable as i}from"./DataTable.js";const l=({striped:t=!1,...o})=>{const{getRowModel:a}=p();return r.createElement(m.Body,{...o,striped:t},a().rows.map(e=>r.createElement(i.Row,{row:e,key:e.id})))};export{l as DataTableBody};
+import*as o from"react";import{Table as i}from"../table/Table.js";import{useDataTable as n}from"./DataTableContext.js";import{DataTable as p}from"./DataTable.js";const l=({striped:t=!1,rowAction:r,...a})=>{const{getRowModel:m}=n();return o.createElement(i.Body,{...a,striped:t},m().rows.map(e=>o.createElement(p.Row,{row:e,key:e.id,rowAction:r})))};export{l as DataTableBody};
 //# sourceMappingURL=DataTableBody.js.map

package/dist/components/data-table/DataTableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableBody.js","sources":["../../../src/components/data-table/DataTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../table'\nimport { DataTable } from '.'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableBodyProps = Omit<\n  React.ComponentProps<typeof Table.Body>,\n  'children'\n>\n\nexport const DataTableBody = ({\n  striped = false,\n  ...props\n}: DataTableBodyProps) => {\n  const { getRowModel } = useDataTable()\n\n  return (\n    <Table.Body {...props} striped={striped}>\n      {getRowModel().rows.map((row) => {\n        return <DataTable.Row row={row} key={row.id} />\n      })}\n    </Table.Body>\n  )\n}\n"],"names":["DataTableBody","striped","props","getRowModel","useDataTable","React","Table","row","DataTable"],"mappings":"kKAWO,MAAMA,EAAgB,CAAC,CAC5B,QAAAC,EAAU,MACPC,CACL,IAA0B,CACxB,KAAM,CAAE,YAAAC,CAAY,EAAIC,IAExB,OACEC,EAAA,cAACC,EAAM,KAAN,CAAY,GAAGJ,EAAO,QAASD,CAC7BE,EAAAA,EAAAA,EAAc,KAAK,IAAKI,GAChBF,EAAA,cAACG,EAAU,IAAV,CAAc,IAAKD,EAAK,IAAKA,EAAI,EAAA,CAAI,CAC9C,CACH,CAEJ"}
+{"version":3,"file":"DataTableBody.js","sources":["../../../src/components/data-table/DataTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../table'\nimport { DataTable } from '.'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableBodyProps = Omit<\n  React.ComponentProps<typeof Table.Body>,\n  'children'\n> & {\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nexport const DataTableBody = ({\n  striped = false,\n  rowAction,\n  ...props\n}: DataTableBodyProps) => {\n  const { getRowModel } = useDataTable()\n\n  return (\n    <Table.Body {...props} striped={striped}>\n      {getRowModel().rows.map((row) => {\n        return <DataTable.Row row={row} key={row.id} rowAction={rowAction} />\n      })}\n    </Table.Body>\n  )\n}\n"],"names":["DataTableBody","striped","rowAction","props","getRowModel","useDataTable","React","Table","row","DataTable"],"mappings":"kKAaa,MAAAA,EAAgB,CAAC,CAC5B,QAAAC,EAAU,GACV,UAAAC,KACGC,CACL,IAA0B,CACxB,KAAM,CAAE,YAAAC,CAAY,EAAIC,EAAa,EAErC,OACEC,EAAA,cAACC,EAAM,KAAN,CAAY,GAAGJ,EAAO,QAASF,CAAAA,EAC7BG,EAAY,EAAE,KAAK,IAAKI,GAChBF,EAAA,cAACG,EAAU,IAAV,CAAc,IAAKD,EAAK,IAAKA,EAAI,GAAI,UAAWN,CAAW,CAAA,CACpE,CACH,CAEJ"}

package/dist/components/data-table/DataTableHeaderCell.js

@@ -1,2 +1,2 @@
-import{SortUp as a,SortDown as s}from"@atom-learning/icons";import{flexRender as m}from"@tanstack/react-table";import*as t from"react";import{Flex as l}from"../flex/Flex.js";import{Icon as p}from"../icon/Icon.js";import{Table as d}from"../table/Table.js";import{useDataTable as f}from"./DataTableContext.js";const u={asc:a,desc:s},S=({direction:e})=>t.createElement(p,{is:u[e],size:"sm",css:{position:"absolute",left:"$1"}}),g=({header:e,children:b,css:c,...i})=>{const o=e.column.getIsSorted(),{isSortable:r}=f(),n=e.column.getCanSort();return t.createElement(d.HeaderCell,{colSpan:e.colSpan,onClick:r&&n?e.column.getToggleSortingHandler():void 0,css:{cursor:r&&n?"pointer":"initial",...c},...i},t.createElement(l,{css:{alignItems:"center",...e.colSpan>1?{justifyContent:"center"}:{}}},m(e.column.columnDef.header,e.getContext()),o&&r&&t.createElement(l,{css:{position:"relative",alignItems:"center"}},t.createElement(S,{direction:o}))))};export{g as DataTableHeaderCell};
+import{ArrowUp as u,ArrowDown as b}from"@atom-learning/icons";import{styled as g}from"@atom-learning/stitches-react";import{flexRender as y}from"@tanstack/react-table";import*as t from"react";import{useHover as v}from"react-aria";import{Flex as s}from"../flex/Flex.js";import{Icon as x}from"../icon/Icon.js";import{Table as S}from"../table/Table.js";import{useDataTable as h}from"./DataTableContext.js";const D=g(S.HeaderCell,{variants:{isSortable:{true:{cursor:"pointer",position:"relative","& > *":{position:"relative"},"&:before":{content:"",position:"absolute",inset:0,opacity:0,backgroundColor:"$primary100",transition:"opacity 0.2s ease"},"&:hover:before":{opacity:.5}}}}}),k={asc:u,desc:b},w=({direction:e})=>t.createElement(x,{is:k[e],size:"sm",css:{position:"absolute",left:"$1",stroke:"$primary900"}}),C=({header:e,children:E,css:l,...c})=>{const a=e.column.getIsSorted(),{isSortable:o}=h(),i=e.column.getCanSort(),{hoverProps:m,isHovered:p}=v({}),d=(r,f)=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),f(r))},n=e.column.getToggleSortingHandler();return t.createElement(D,{isSortable:o&&i,colSpan:e.colSpan,onClick:o&&i&&n?n:void 0,onKeyDown:r=>o&&i&&n&&d(r,n),tabIndex:o&&i?0:-1,...m,css:l,...c},t.createElement(s,{align:"center",justify:e.colSpan>1?"center":"flex-start"},y(e.column.columnDef.header,e.getContext()),a&&o&&t.createElement(s,{align:"center",css:{position:"relative",width:"24px",height:"24px",ml:"$2",bg:p?"$primary200":"$primary100",borderRadius:"$0"}},t.createElement(w,{direction:a}))))};export{C as DataTableHeaderCell};
 //# sourceMappingURL=DataTableHeaderCell.js.map

package/dist/components/data-table/DataTableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableHeaderCell.js","sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { SortDown, SortUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { useDataTable } from './DataTableContext'\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n  header: Header<Record<string, unknown>, unknown>\n}\n\nconst sortIcons = {\n  asc: SortUp,\n  desc: SortDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n  <Icon\n    is={sortIcons[direction]}\n    size=\"sm\"\n    css={{ position: 'absolute', left: '$1' }}\n  />\n)\n\nexport const DataTableHeaderCell = ({\n  header,\n  children,\n  css,\n  ...props\n}: DataTableHeaderProps) => {\n  const sortDirection = header.column.getIsSorted()\n  const { isSortable: isSortableTable } = useDataTable()\n  // false for display columns, e.g. \"Actions\"\n  const isDataColumn = header.column.getCanSort()\n\n  return (\n    <Table.HeaderCell\n      colSpan={header.colSpan}\n      onClick={\n        isSortableTable && isDataColumn\n          ? header.column.getToggleSortingHandler()\n          : undefined\n      }\n      css={{\n        cursor: isSortableTable && isDataColumn ? 'pointer' : 'initial',\n        ...css\n      }}\n      {...props}\n    >\n      <Flex\n        css={{\n          alignItems: 'center',\n          ...(header.colSpan > 1 ? { justifyContent: 'center' } : {})\n        }}\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <Flex css={{ position: 'relative', alignItems: 'center' }}>\n            <SortIcon direction={sortDirection} />\n          </Flex>\n        )}\n      </Flex>\n    </Table.HeaderCell>\n  )\n}\n"],"names":["sortIcons","SortUp","SortDown","SortIcon","direction","React","Icon","DataTableHeaderCell","header","children","css","props","sortDirection","isSortableTable","useDataTable","isDataColumn","Table","Flex","flexRender"],"mappings":"oTAaA,MAAMA,EAAY,CAChB,IAAKC,EACL,KAAMC,CACR,EAEMC,EAAW,CAAC,CAAE,UAAAC,CAAU,IAC5BC,EAAA,cAACC,EAAA,CACC,GAAIN,EAAUI,GACd,KAAK,KACL,IAAK,CAAE,SAAU,WAAY,KAAM,IAAK,CAC1C,CAAA,EAGWG,EAAsB,CAAC,CAClC,OAAAC,EACA,SAAAC,EACA,IAAAC,KACGC,CACL,IAA4B,CAC1B,MAAMC,EAAgBJ,EAAO,OAAO,YAAY,EAC1C,CAAE,WAAYK,CAAgB,EAAIC,EAAa,EAE/CC,EAAeP,EAAO,OAAO,WAAW,EAE9C,OACEH,EAAA,cAACW,EAAM,WAAN,CACC,QAASR,EAAO,QAChB,QACEK,GAAmBE,EACfP,EAAO,OAAO,wBAAwB,EACtC,OAEN,IAAK,CACH,OAAQK,GAAmBE,EAAe,UAAY,UACtD,GAAGL,CACL,EACC,GAAGC,CAAAA,EAEJN,EAAA,cAACY,EAAA,CACC,IAAK,CACH,WAAY,SACZ,GAAIT,EAAO,QAAU,EAAI,CAAE,eAAgB,QAAS,EAAI,CAAA,CAC1D,CAAA,EAECU,EAAWV,EAAO,OAAO,UAAU,OAAQA,EAAO,WAAY,CAAA,EAC9DI,GAAiBC,GAChBR,EAAA,cAACY,EAAA,CAAK,IAAK,CAAE,SAAU,WAAY,WAAY,QAAS,CAAA,EACtDZ,EAAA,cAACF,EAAA,CAAS,UAAWS,EAAe,CACtC,CAEJ,CACF,CAEJ"}
+{"version":3,"file":"DataTableHeaderCell.js","sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport { styled } from '@atom-learning/stitches-react'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { useDataTable } from './DataTableContext'\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n  header: Header<Record<string, unknown>, unknown>\n}\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n  variants: {\n    isSortable: {\n      true: {\n        cursor: 'pointer',\n        position: 'relative',\n        '& > *': {\n          position: 'relative'\n        },\n        '&:before': {\n          content: '',\n          position: 'absolute',\n          inset: 0,\n          opacity: 0,\n          backgroundColor: '$primary100',\n          transition: 'opacity 0.2s ease'\n        },\n        '&:hover:before': {\n          opacity: 0.5\n        }\n      }\n    }\n  }\n})\n\nconst sortIcons = {\n  asc: ArrowUp,\n  desc: ArrowDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n  <Icon\n    is={sortIcons[direction]}\n    size=\"sm\"\n    css={{ position: 'absolute', left: '$1', stroke: '$primary900' }}\n  />\n)\n\nexport const DataTableHeaderCell = ({\n  header,\n  children,\n  css,\n  ...props\n}: DataTableHeaderProps) => {\n  const sortDirection = header.column.getIsSorted()\n  const { isSortable: isSortableTable } = useDataTable()\n  // false for display columns, e.g. \"Actions\"\n  const isDataColumn = header.column.getCanSort()\n\n  const { hoverProps, isHovered } = useHover({})\n\n  const handleKeyDown = (\n    event: React.KeyboardEvent<HTMLTableCellElement>,\n    callback: (event: unknown) => void | undefined\n  ) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      callback(event as unknown)\n    }\n  }\n\n  const headerSortingHandler = header.column.getToggleSortingHandler()\n\n  return (\n    <StyledTableHeaderCell\n      isSortable={isSortableTable && isDataColumn}\n      colSpan={header.colSpan}\n      onClick={\n        isSortableTable && isDataColumn && headerSortingHandler\n          ? headerSortingHandler\n          : undefined\n      }\n      onKeyDown={(event) =>\n        isSortableTable &&\n        isDataColumn &&\n        headerSortingHandler &&\n        handleKeyDown(event, headerSortingHandler)\n      }\n      tabIndex={isSortableTable && isDataColumn ? 0 : -1}\n      {...hoverProps}\n      css={css}\n      {...props}\n    >\n      <Flex\n        align=\"center\"\n        justify={header.colSpan > 1 ? 'center' : 'flex-start'}\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <Flex\n            align=\"center\"\n            css={{\n              position: 'relative',\n              width: '24px',\n              height: '24px',\n              ml: '$2',\n              bg: isHovered ? '$primary200' : '$primary100',\n              borderRadius: '$0'\n            }}\n          >\n            <SortIcon direction={sortDirection} />\n          </Flex>\n        )}\n      </Flex>\n    </StyledTableHeaderCell>\n  )\n}\n"],"names":["StyledTableHeaderCell","styled","Table","sortIcons","ArrowUp","ArrowDown","SortIcon","direction","React","Icon","DataTableHeaderCell","header","children","css","props","sortDirection","isSortableTable","useDataTable","isDataColumn","hoverProps","isHovered","useHover","handleKeyDown","event","callback","headerSortingHandler","Flex","flexRender"],"mappings":"mZAeA,MAAMA,EAAwBC,EAAOC,EAAM,WAAY,CACrD,SAAU,CACR,WAAY,CACV,KAAM,CACJ,OAAQ,UACR,SAAU,WACV,QAAS,CACP,SAAU,UACZ,EACA,WAAY,CACV,QAAS,GACT,SAAU,WACV,MAAO,EACP,QAAS,EACT,gBAAiB,cACjB,WAAY,mBACd,EACA,iBAAkB,CAChB,QAAS,EACX,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAAY,CAChB,IAAKC,EACL,KAAMC,CACR,EAEMC,EAAW,CAAC,CAAE,UAAAC,CAAU,IAC5BC,EAAA,cAACC,EAAA,CACC,GAAIN,EAAUI,GACd,KAAK,KACL,IAAK,CAAE,SAAU,WAAY,KAAM,KAAM,OAAQ,aAAc,CACjE,CAAA,EAGWG,EAAsB,CAAC,CAClC,OAAAC,EACA,SAAAC,EACA,IAAAC,KACGC,CACL,IAA4B,CAC1B,MAAMC,EAAgBJ,EAAO,OAAO,cAC9B,CAAE,WAAYK,CAAgB,EAAIC,EAElCC,EAAAA,EAAeP,EAAO,OAAO,aAE7B,CAAE,WAAAQ,EAAY,UAAAC,CAAU,EAAIC,EAAS,CAAE,CAAA,EAEvCC,EAAgB,CACpBC,EACAC,IACG,EACCD,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACzCA,EAAM,eAAe,EACrBC,EAASD,CAAgB,EAE7B,EAEME,EAAuBd,EAAO,OAAO,wBAAA,EAE3C,OACEH,EAAA,cAACR,EAAA,CACC,WAAYgB,GAAmBE,EAC/B,QAASP,EAAO,QAChB,QACEK,GAAmBE,GAAgBO,EAC/BA,EACA,OAEN,UAAYF,GACVP,GACAE,GACAO,GACAH,EAAcC,EAAOE,CAAoB,EAE3C,SAAUT,GAAmBE,EAAe,EAAI,GAC/C,GAAGC,EACJ,IAAKN,EACJ,GAAGC,CAAAA,EAEJN,EAAA,cAACkB,EAAA,CACC,MAAM,SACN,QAASf,EAAO,QAAU,EAAI,SAAW,YAExCgB,EAAAA,EAAWhB,EAAO,OAAO,UAAU,OAAQA,EAAO,WAAA,CAAY,EAC9DI,GAAiBC,GAChBR,EAAA,cAACkB,EAAA,CACC,MAAM,SACN,IAAK,CACH,SAAU,WACV,MAAO,OACP,OAAQ,OACR,GAAI,KACJ,GAAIN,EAAY,cAAgB,cAChC,aAAc,IAChB,GAEAZ,EAAA,cAACF,EAAA,CAAS,UAAWS,CAAAA,CAAe,CACtC,CAEJ,CACF,CAEJ"}

package/dist/components/data-table/DataTableRow.d.ts

@@ -3,5 +3,6 @@ import * as React from 'react';
 import { Table } from '../table';
 export type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {
     row: Row<Record<string, unknown>>;
+    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
 };
-export declare const DataTableRow: ({ row }: DataTableRowProps) => React.JSX.Element;
+export declare const DataTableRow: ({ row, rowAction }: DataTableRowProps) => React.JSX.Element;

package/dist/components/data-table/DataTableRow.js

@@ -1,2 +1,2 @@
-import{ChevronDown as m,ChevronRight as p}from"@atom-learning/icons";import*as t from"react";import{styled as g}from"../../stitches.js";import{Icon as b}from"../icon/Icon.js";import{Table as a}from"../table/Table.js";import{useDataTable as C}from"./DataTableContext.js";import{DataTableDataCell as w}from"./DataTableDataCell.js";import{DataTableRowSelectionCheckbox as E}from"./DataTableRowSelectionCheckbox.js";const S=g(a.Row,{bg:"initial",variants:{isSelected:{true:{bg:"$primary100 !important"}},isDisabled:{true:{opacity:"30%"}}}}),f=({row:e})=>{const{enableRowSelection:r,disabledRows:o,getCanSomeRowsExpand:i}=C(),n=!!(o!=null&&o[e.id]),d=e.getToggleExpandedHandler(),s=e.getToggleSelectedHandler(),c=()=>e.getIsSomeSelected()?"indeterminate":e.getIsSelected();return t.createElement(S,{isSelected:e.getIsSelected(),isDisabled:n},i()&&t.createElement(a.Cell,{"data-testid":`expand-icon-${e.id}`,css:{width:"$4",cursor:e.getCanExpand()?"pointer":"auto"},onClick:d},e.getCanExpand()&&t.createElement(b,{is:e.getIsExpanded()?m:p})),r&&t.createElement(a.Cell,{css:{width:"$4"}},t.createElement(E,{row:e,checked:c(),onCheckedChange:s})),e.getVisibleCells().map((l,h)=>t.createElement(w,{key:l.id,cell:l})))};export{f as DataTableRow};
+import{ChevronDown as w,ChevronRight as C}from"@atom-learning/icons";import*as a from"react";import{styled as D}from"../../stitches.js";import{Icon as E}from"../icon/Icon.js";import{Table as i}from"../table/Table.js";import{useDataTable as x}from"./DataTableContext.js";import{DataTableDataCell as S}from"./DataTableDataCell.js";import{DataTableRowSelectionCheckbox as k}from"./DataTableRowSelectionCheckbox.js";const y=D(i.Row,{bg:"initial",variants:{isSelected:{true:{bg:"$primary100 !important"}},isDisabled:{true:{opacity:"30%"}},isFocusable:{true:{"&:focus":{outline:"2px solid $primary500",outlineOffset:"-4px","& td":{bg:"transparent"}}}}}}),d=e=>e?!!(e.closest("button, a, input, select, textarea")||e.getAttribute("role")==="button"):!1,h=({row:e,rowAction:n})=>{const{enableRowSelection:m,disabledRows:l,getCanSomeRowsExpand:p}=x(),s=!!(l!=null&&l[e.id]),g=e.getToggleExpandedHandler(),u=e.getToggleSelectedHandler(),b=()=>e.getIsSomeSelected()?"indeterminate":e.getIsSelected(),c=(t,o)=>{!n||!o.target.closest("tr")||d(o.target)||n(t.original,o)},f=t=>{if(t.key==="Enter"||t.key===" "){if(d(t.target))return;t.preventDefault(),c(e,t)}if(t.key==="ArrowDown"){t.preventDefault();const o=t.target.closest("tr"),r=o==null?void 0:o.nextElementSibling;r&&r.tagName==="TR"&&r.focus()}if(t.key==="ArrowUp"){t.preventDefault();const o=t.target.closest("tr"),r=o==null?void 0:o.previousElementSibling;r&&r.tagName==="TR"&&r.focus()}};return a.createElement(y,{isSelected:e.getIsSelected(),isDisabled:s,isFocusable:!!n&&!s,...n&&{onClick:t=>c(e,t),tabIndex:0,css:{cursor:"pointer"},onKeyDown:f}},p()&&a.createElement(i.Cell,{"data-testid":`expand-icon-${e.id}`,css:{width:"$4",cursor:e.getCanExpand()?"pointer":"auto"},onClick:g},e.getCanExpand()&&a.createElement(E,{is:e.getIsExpanded()?w:C})),m&&a.createElement(i.Cell,{css:{width:"$4"}},a.createElement(k,{row:e,checked:b(),onCheckedChange:u})),e.getVisibleCells().map((t,o)=>a.createElement(S,{key:t.id,cell:t})))};export{h as DataTableRow};
 //# sourceMappingURL=DataTableRow.js.map

package/dist/components/data-table/DataTableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableRow.js","sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n  row: Row<Record<string, unknown>>\n}\n\nconst StyledRow = styled(Table.Row, {\n  bg: 'initial',\n  variants: {\n    isSelected: {\n      true: {\n        // the !important rule is needed because the bg property is set elsewhere and it's more specific than this one would be without the !important modifier.\n        bg: '$primary100 !important'\n      }\n    },\n    isDisabled: {\n      true: {\n        opacity: '30%'\n      }\n    }\n  }\n})\n\nexport const DataTableRow = ({ row }: DataTableRowProps) => {\n  const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n    useDataTable()\n\n  const isDisabled = !!disabledRows?.[row.id]\n\n  const toggleExpandHandler = row.getToggleExpandedHandler()\n  const toggleSelectHandler = row.getToggleSelectedHandler()\n\n  const getCheckedState = (): boolean | 'indeterminate' => {\n    if (row.getIsSomeSelected()) return 'indeterminate'\n    return row.getIsSelected()\n  }\n\n  return (\n    <StyledRow isSelected={row.getIsSelected()} isDisabled={isDisabled}>\n      {getCanSomeRowsExpand() && (\n        <Table.Cell\n          data-testid={`expand-icon-${row.id}`}\n          css={{ width: '$4', cursor: row.getCanExpand() ? 'pointer' : 'auto' }}\n          onClick={toggleExpandHandler}\n        >\n          {row.getCanExpand() && (\n            <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n          )}\n        </Table.Cell>\n      )}\n\n      {enableRowSelection && (\n        <Table.Cell css={{ width: '$4' }}>\n          <DataTableRowSelectionCheckbox\n            row={row}\n            checked={getCheckedState()}\n            onCheckedChange={toggleSelectHandler}\n          />\n        </Table.Cell>\n      )}\n      {row.getVisibleCells().map((cell, i) => {\n        return <DataTableDataCell key={cell.id} cell={cell} />\n      })}\n    </StyledRow>\n  )\n}\n"],"names":["StyledRow","styled","Table","DataTableRow","row","enableRowSelection","disabledRows","getCanSomeRowsExpand","useDataTable","isDisabled","toggleExpandHandler","toggleSelectHandler","getCheckedState","React","Icon","ChevronDown","ChevronRight","DataTableRowSelectionCheckbox","cell","i","DataTableDataCell"],"mappings":"4ZAgBA,MAAMA,EAAYC,EAAOC,EAAM,IAAK,CAClC,GAAI,UACJ,SAAU,CACR,WAAY,CACV,KAAM,CAEJ,GAAI,wBACN,CACF,EACA,WAAY,CACV,KAAM,CACJ,QAAS,KACX,CACF,CACF,CACF,CAAC,EAEYC,EAAe,CAAC,CAAE,IAAAC,CAAI,IAAyB,CAC1D,KAAM,CAAE,mBAAAC,EAAoB,aAAAC,EAAc,qBAAAC,CAAqB,EAC7DC,IAEIC,EAAa,CAAC,EAACH,GAAA,MAAAA,EAAeF,EAAI,KAElCM,EAAsBN,EAAI,yBAAA,EAC1BO,EAAsBP,EAAI,yBAAyB,EAEnDQ,EAAkB,IAClBR,EAAI,kBAAkB,EAAU,gBAC7BA,EAAI,gBAGb,OACES,EAAA,cAACb,EAAA,CAAU,WAAYI,EAAI,gBAAiB,WAAYK,CAAAA,EACrDF,KACCM,EAAA,cAACX,EAAM,KAAN,CACC,cAAa,eAAeE,EAAI,KAChC,IAAK,CAAE,MAAO,KAAM,OAAQA,EAAI,aAAa,EAAI,UAAY,MAAO,EACpE,QAASM,CAERN,EAAAA,EAAI,aACHS,GAAAA,EAAA,cAACC,EAAA,CAAK,GAAIV,EAAI,cAAc,EAAIW,EAAcC,CAAc,CAAA,CAEhE,EAGDX,GACCQ,EAAA,cAACX,EAAM,KAAN,CAAW,IAAK,CAAE,MAAO,IAAK,CAAA,EAC7BW,EAAA,cAACI,EAAA,CACC,IAAKb,EACL,QAASQ,IACT,gBAAiBD,EACnB,CACF,EAEDP,EAAI,kBAAkB,IAAI,CAACc,EAAMC,IACzBN,EAAA,cAACO,EAAA,CAAkB,IAAKF,EAAK,GAAI,KAAMA,CAAAA,CAAM,CACrD,CACH,CAEJ"}
+{"version":3,"file":"DataTableRow.js","sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n  row: Row<Record<string, unknown>>\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n  bg: 'initial',\n  variants: {\n    isSelected: {\n      true: {\n        // the !important rule is needed because the bg property is set elsewhere and it's more specific than this one would be without the !important modifier.\n        bg: '$primary100 !important'\n      }\n    },\n    isDisabled: {\n      true: {\n        opacity: '30%'\n      }\n    },\n    isFocusable: {\n      true: {\n        '&:focus': {\n          outline: '2px solid $primary500',\n          outlineOffset: '-4px',\n          '& td': {\n            bg: 'transparent'\n          }\n        }\n      }\n    }\n  }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n  if (!element) return false\n  if (element.closest('button, a, input, select, textarea')) return true\n  if (element.getAttribute('role') === 'button') return true\n  return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n  const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n    useDataTable()\n\n  const isDisabled = !!disabledRows?.[row.id]\n\n  const toggleExpandHandler = row.getToggleExpandedHandler()\n  const toggleSelectHandler = row.getToggleSelectedHandler()\n\n  const getCheckedState = (): boolean | 'indeterminate' => {\n    if (row.getIsSomeSelected()) return 'indeterminate'\n    return row.getIsSelected()\n  }\n\n  const handleRowClick = (\n    rowData: Row<Record<string, unknown>>,\n    event: React.MouseEvent<HTMLTableRowElement>\n  ) => {\n    if (!rowAction) return\n\n    // Skip if clicking on an interactive element\n    const rowElement = (event.target as Element).closest('tr')\n    if (!rowElement || isElementInteractive(event.target as Element)) {\n      return\n    }\n\n    rowAction(rowData.original, event)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      if (isElementInteractive(event.target as Element)) {\n        return\n      }\n      event.preventDefault()\n      handleRowClick(\n        row,\n        event as unknown as React.MouseEvent<HTMLTableRowElement>\n      )\n    }\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const nextRow = currentRow?.nextElementSibling as HTMLElement\n      if (nextRow && nextRow.tagName === 'TR') {\n        nextRow.focus()\n      }\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const previousRow = currentRow?.previousElementSibling as HTMLElement\n      if (previousRow && previousRow.tagName === 'TR') {\n        previousRow.focus()\n      }\n    }\n  }\n\n  return (\n    <StyledRow\n      isSelected={row.getIsSelected()}\n      isDisabled={isDisabled}\n      isFocusable={!!rowAction && !isDisabled}\n      {...(rowAction && {\n        onClick: (event) => handleRowClick(row, event),\n        tabIndex: 0,\n        css: { cursor: 'pointer' },\n        onKeyDown: handleKeyDown\n      })}\n    >\n      {getCanSomeRowsExpand() && (\n        <Table.Cell\n          data-testid={`expand-icon-${row.id}`}\n          css={{ width: '$4', cursor: row.getCanExpand() ? 'pointer' : 'auto' }}\n          onClick={toggleExpandHandler}\n        >\n          {row.getCanExpand() && (\n            <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n          )}\n        </Table.Cell>\n      )}\n\n      {enableRowSelection && (\n        <Table.Cell css={{ width: '$4' }}>\n          <DataTableRowSelectionCheckbox\n            row={row}\n            checked={getCheckedState()}\n            onCheckedChange={toggleSelectHandler}\n          />\n        </Table.Cell>\n      )}\n      {row.getVisibleCells().map((cell, i) => {\n        return <DataTableDataCell key={cell.id} cell={cell} />\n      })}\n    </StyledRow>\n  )\n}\n"],"names":["StyledRow","styled","Table","isElementInteractive","element","DataTableRow","row","rowAction","enableRowSelection","disabledRows","getCanSomeRowsExpand","useDataTable","isDisabled","toggleExpandHandler","toggleSelectHandler","getCheckedState","handleRowClick","rowData","event","handleKeyDown","currentRow","nextRow","previousRow","React","Icon","ChevronDown","ChevronRight","DataTableRowSelectionCheckbox","cell","i","DataTableDataCell"],"mappings":"4ZAiBA,MAAMA,EAAYC,EAAOC,EAAM,IAAK,CAClC,GAAI,UACJ,SAAU,CACR,WAAY,CACV,KAAM,CAEJ,GAAI,wBACN,CACF,EACA,WAAY,CACV,KAAM,CACJ,QAAS,KACX,CACF,EACA,YAAa,CACX,KAAM,CACJ,UAAW,CACT,QAAS,wBACT,cAAe,OACf,OAAQ,CACN,GAAI,aACN,CACF,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAAwBC,GACvBA,EACD,CAAA,EAAAA,EAAQ,QAAQ,oCAAoC,GACpDA,EAAQ,aAAa,MAAM,IAAM,UAFhB,GAMVC,EAAe,CAAC,CAAE,IAAAC,EAAK,UAAAC,CAAU,IAAyB,CACrE,KAAM,CAAE,mBAAAC,EAAoB,aAAAC,EAAc,qBAAAC,CAAqB,EAC7DC,EAAAA,EAEIC,EAAa,CAAC,EAACH,GAAA,MAAAA,EAAeH,EAAI,KAElCO,EAAsBP,EAAI,yBAAA,EAC1BQ,EAAsBR,EAAI,2BAE1BS,EAAkB,IAClBT,EAAI,kBAA4B,EAAA,gBAC7BA,EAAI,cAAc,EAGrBU,EAAiB,CACrBC,EACAC,IACG,CACC,CAACX,GAID,CADgBW,EAAM,OAAmB,QAAQ,IAAI,GACtCf,EAAqBe,EAAM,MAAiB,GAI/DX,EAAUU,EAAQ,SAAUC,CAAK,CACnC,EAEMC,EAAiBD,GAAoD,CACzE,GAAIA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,IAAK,CAC9C,GAAIf,EAAqBe,EAAM,MAAiB,EAC9C,OAEFA,EAAM,eAAe,EACrBF,EACEV,EACAY,CACF,CACF,CACA,GAAIA,EAAM,MAAQ,YAAa,CAC7BA,EAAM,iBACN,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDG,EAAUD,GAAA,YAAAA,EAAY,mBACxBC,GAAWA,EAAQ,UAAY,MACjCA,EAAQ,MAEZ,CAAA,CACA,GAAIH,EAAM,MAAQ,UAAW,CAC3BA,EAAM,eAAA,EACN,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDI,EAAcF,GAAA,KAAA,OAAAA,EAAY,uBAC5BE,GAAeA,EAAY,UAAY,MACzCA,EAAY,MAAM,CAEtB,CACF,EAEA,OACEC,EAAA,cAACvB,EAAA,CACC,WAAYM,EAAI,cAAc,EAC9B,WAAYM,EACZ,YAAa,CAAC,CAACL,GAAa,CAACK,EAC5B,GAAIL,GAAa,CAChB,QAAUW,GAAUF,EAAeV,EAAKY,CAAK,EAC7C,SAAU,EACV,IAAK,CAAE,OAAQ,SAAU,EACzB,UAAWC,CACb,GAECT,EAAqB,GACpBa,EAAA,cAACrB,EAAM,KAAN,CACC,cAAa,eAAeI,EAAI,KAChC,IAAK,CAAE,MAAO,KAAM,OAAQA,EAAI,aAAa,EAAI,UAAY,MAAO,EACpE,QAASO,CAERP,EAAAA,EAAI,aACHiB,GAAAA,EAAA,cAACC,EAAA,CAAK,GAAIlB,EAAI,cAAA,EAAkBmB,EAAcC,CAAAA,CAAc,CAEhE,EAGDlB,GACCe,EAAA,cAACrB,EAAM,KAAN,CAAW,IAAK,CAAE,MAAO,IAAK,CAC7BqB,EAAAA,EAAA,cAACI,EAAA,CACC,IAAKrB,EACL,QAASS,IACT,gBAAiBD,CACnB,CAAA,CACF,EAEDR,EAAI,kBAAkB,IAAI,CAACsB,EAAMC,IACzBN,EAAA,cAACO,EAAA,CAAkB,IAAKF,EAAK,GAAI,KAAMA,CAAM,CAAA,CACrD,CACH,CAEJ"}

package/dist/components/data-table/DataTableTable.d.ts

@@ -10,5 +10,6 @@ export type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'chil
         numberOfStickyColumns?: number;
         scrollContainerCss?: CSS;
     };
+    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
 };
-export declare const DataTableTable: ({ sortable, striped, theme, css, scrollOptions, ...props }: DataTableTableProps) => React.JSX.Element | null;
+export declare const DataTableTable: ({ sortable, striped, theme, css, scrollOptions, rowAction, ...props }: DataTableTableProps) => React.JSX.Element | null;

package/dist/components/data-table/DataTableTable.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{Table as f}from"../table/Table.js";import{DataTable as s}from"./DataTable.js";import{AsyncDataState as S}from"./DataTable.types.js";import{useDataTable as E}from"./DataTableContext.js";import{DataTableLoading as k}from"./DataTableLoading.js";const D=({sortable:l,striped:m,theme:c,css:i,scrollOptions:t={numberOfStickyColumns:0,hasStickyHeader:!1},...p})=>{const{asyncDataState:u,getTotalRows:b,getCanSomeRowsExpand:r,enableRowSelection:n,tableId:y}=E(),o=u===S.PENDING,C=!o&&b()===0,d=()=>{let a=0;return r()&&!!n?a=2:(r()||!!n)&&(a=1),`${y}_${a}_control_columns`};return C?null:e.createElement(e.Fragment,null,e.createElement(k,null),e.createElement(f,{...p,numberOfStickyColumns:t.numberOfStickyColumns,scrollContainerCss:t.scrollContainerCss,scrollContainerkey:d(),css:{...i,...o&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(s.Head,{theme:c,sortable:l,isSticky:t.hasStickyHeader,css:t.headerCss}),e.createElement(s.Body,{striped:m})))};export{D as DataTableTable};
+import*as e from"react";import{Table as S}from"../table/Table.js";import{DataTable as s}from"./DataTable.js";import{AsyncDataState as E}from"./DataTable.types.js";import{useDataTable as k}from"./DataTableContext.js";import{DataTableLoading as D}from"./DataTableLoading.js";const T=({sortable:l,striped:m,theme:c,css:i,scrollOptions:t={numberOfStickyColumns:0,hasStickyHeader:!1},rowAction:p,...u})=>{const{asyncDataState:b,getTotalRows:y,getCanSomeRowsExpand:r,enableRowSelection:n,tableId:d}=k(),o=b===E.PENDING,C=!o&&y()===0,f=()=>{let a=0;return r()&&!!n?a=2:(r()||!!n)&&(a=1),`${d}_${a}_control_columns`};return C?null:e.createElement(e.Fragment,null,e.createElement(D,null),e.createElement(S,{...u,numberOfStickyColumns:t.numberOfStickyColumns,scrollContainerCss:t.scrollContainerCss,scrollContainerkey:f(),css:{...i,...o&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(s.Head,{theme:c,sortable:l,isSticky:t.hasStickyHeader,css:t.headerCss}),e.createElement(s.Body,{striped:m,rowAction:p})))};export{T as DataTableTable};
 //# sourceMappingURL=DataTableTable.js.map

package/dist/components/data-table/DataTableTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      headerCss?: CSS\n      numberOfStickyColumns?: number\n      scrollContainerCss?: CSS\n    }\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme,\n  css,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    hasStickyHeader: false\n  },\n  ...props\n}: DataTableTableProps) => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    enableRowSelection,\n    tableId\n  } = useDataTable()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const buildScrollContainerKey = (): string => {\n    let controlColumnCount = 0\n\n    if (getCanSomeRowsExpand() && !!enableRowSelection) {\n      controlColumnCount = 2\n    } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n      controlColumnCount = 1\n    }\n\n    return `${tableId}_${controlColumnCount}_control_columns`\n  }\n\n  if (isEmpty) return null\n\n  return (\n    <>\n      <DataTableLoading />\n\n      <Table\n        {...props}\n        numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n        scrollContainerCss={scrollOptions.scrollContainerCss}\n        scrollContainerkey={buildScrollContainerKey()}\n        css={{\n          ...css,\n          ...(isPending && {\n            opacity: 0.5,\n            pointerEvents: 'none',\n            transition: 'opacity 250ms linear 150ms'\n          })\n        }}\n      >\n        <DataTable.Head\n          theme={theme}\n          sortable={sortable}\n          isSticky={scrollOptions.hasStickyHeader}\n          css={scrollOptions.headerCss}\n        />\n        <DataTable.Body striped={striped} />\n      </Table>\n    </>\n  )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","scrollOptions","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","enableRowSelection","tableId","useDataTable","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","React","DataTableLoading","Table","DataTable"],"mappings":"iRA4BO,MAAMA,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,gBAAiB,EACnB,KACGC,CACL,IAA2B,CACzB,KAAM,CACJ,eAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,mBAAAC,EACA,QAAAC,CACF,EAAIC,EAAa,EAEXC,EAAYN,IAAmBO,EAAe,QAC9CC,EAAU,CAACF,GAAaL,EAAmB,IAAA,EAE3CQ,EAA0B,IAAc,CAC5C,IAAIC,EAAqB,EAEzB,OAAIR,EAAAA,GAA0B,CAAC,CAACC,EAC9BO,EAAqB,GACZR,EAAqB,GAAK,CAAC,CAACC,KACrCO,EAAqB,GAGhB,GAAGN,KAAWM,mBACvB,EAEA,OAAIF,EAAgB,KAGlBG,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACC,EAAA,IAAiB,EAElBD,EAAA,cAACE,EAAA,CACE,GAAGd,EACJ,sBAAuBD,EAAc,sBACrC,mBAAoBA,EAAc,mBAClC,mBAAoBW,EAAwB,EAC5C,IAAK,CACH,GAAGZ,EACH,GAAIS,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAAA,EAEAK,EAAA,cAACG,EAAU,KAAV,CACC,MAAOlB,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,IAAKA,EAAc,SACrB,CAAA,EACAa,EAAA,cAACG,EAAU,KAAV,CAAe,QAASnB,CAAS,CAAA,CACpC,CACF,CAEJ"}
+{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      headerCss?: CSS\n      numberOfStickyColumns?: number\n      scrollContainerCss?: CSS\n    }\n    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme,\n  css,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    hasStickyHeader: false\n  },\n  rowAction,\n  ...props\n}: DataTableTableProps) => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    enableRowSelection,\n    tableId\n  } = useDataTable()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const buildScrollContainerKey = (): string => {\n    let controlColumnCount = 0\n\n    if (getCanSomeRowsExpand() && !!enableRowSelection) {\n      controlColumnCount = 2\n    } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n      controlColumnCount = 1\n    }\n\n    return `${tableId}_${controlColumnCount}_control_columns`\n  }\n\n  if (isEmpty) return null\n\n  return (\n    <>\n      <DataTableLoading />\n\n      <Table\n        {...props}\n        numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n        scrollContainerCss={scrollOptions.scrollContainerCss}\n        scrollContainerkey={buildScrollContainerKey()}\n        css={{\n          ...css,\n          ...(isPending && {\n            opacity: 0.5,\n            pointerEvents: 'none',\n            transition: 'opacity 250ms linear 150ms'\n          })\n        }}\n      >\n        <DataTable.Head\n          theme={theme}\n          sortable={sortable}\n          isSticky={scrollOptions.hasStickyHeader}\n          css={scrollOptions.headerCss}\n        />\n        <DataTable.Body striped={striped} rowAction={rowAction} />\n      </Table>\n    </>\n  )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","scrollOptions","rowAction","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","enableRowSelection","tableId","useDataTable","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","React","DataTableLoading","Table","DataTable"],"mappings":"iRA6Ba,MAAAA,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,gBAAiB,EACnB,EACA,UAAAC,KACGC,CACL,IAA2B,CACzB,KAAM,CACJ,eAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,mBAAAC,EACA,QAAAC,CACF,EAAIC,EAEEC,EAAAA,EAAYN,IAAmBO,EAAe,QAC9CC,EAAU,CAACF,GAAaL,EAAmB,IAAA,EAE3CQ,EAA0B,IAAc,CAC5C,IAAIC,EAAqB,EAEzB,OAAIR,KAA0B,CAAC,CAACC,EAC9BO,EAAqB,GACZR,EAAqB,GAAK,CAAC,CAACC,KACrCO,EAAqB,GAGhB,GAAGN,KAAWM,mBACvB,EAEA,OAAIF,EAAgB,KAGlBG,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAA,IAAiB,EAElBD,EAAA,cAACE,EAAA,CACE,GAAGd,EACJ,sBAAuBF,EAAc,sBACrC,mBAAoBA,EAAc,mBAClC,mBAAoBY,EACpB,EAAA,IAAK,CACH,GAAGb,EACH,GAAIU,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAEAK,EAAAA,EAAA,cAACG,EAAU,KAAV,CACC,MAAOnB,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,IAAKA,EAAc,SAAA,CACrB,EACAc,EAAA,cAACG,EAAU,KAAV,CAAe,QAASpB,EAAS,UAAWI,CAAW,CAAA,CAC1D,CACF,CAEJ"}

package/dist/components/input/Input.js

@@ -1,2 +1,2 @@
-import*as r from"react";import{styled as m}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{overrideStitchesVariantValue as u}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{disabledStyle as b}from"../../utilities/style/disabledStyle.js";import{Flex as g}from"../flex/Flex.js";import{Text as h}from"../text/Text.js";const i=m(g,{color:"$grey1000",transition:"background 100ms ease-out, borderColor 100ms ease-out",width:"100%","&::placeholder":{color:"$grey700",opacity:1},variants:{appearance:{standard:{background:"white",border:"1px solid $grey800",borderRadius:"$0","&:focus-within":{borderColor:"$blue800"}},modern:{background:"$grey100",border:"none",borderRadius:"$1","&:focus-within":{outline:"2px solid $blue800",outlineOffset:1,zIndex:1}}},size:{sm:{height:"$3"},md:{height:"$4"},lg:{height:"$5"},xl:{height:"$6"}},disabled:{true:b},state:{error:{}}},compoundVariants:[{state:"error",appearance:"standard",css:{borderColor:"$danger"}},{state:"error",appearance:"modern",css:{bg:"$dangerLight","&:focus-within":{outlineColor:"$danger"}}}]});i.displayName="InputBackground";const f=m.withConfig({shouldForwardStitchesProp:e=>["as"].includes(e)})(h,{appearance:"none",border:"none",background:"none",backgroundImage:"none",backgroundColor:"transparent",boxShadow:"none",boxSizing:"border-box","&:focus":{outline:"none"},px:"$3",size:"100%"}),x={sm:"sm",md:"md",lg:"md",xl:"lg"},p=r.forwardRef(({type:e="text",css:a,size:o,...n},t)=>{const s=r.useMemo(()=>u(o,d=>x[d]),[o]);return r.createElement(f,{ref:t,as:"input",type:e==="number"?"text":e,inputMode:e==="number"?"numeric":void 0,pattern:e==="number"?"[0-9]*":void 0,size:s,...n})});p.displayName="InputText";const c=r.forwardRef(({className:e,size:a="md",appearance:o="standard",state:n,disabled:t,css:s,...d},l)=>r.createElement(i,{size:a,appearance:o,disabled:t,state:n,css:s,className:e},r.createElement(p,{size:a,ref:l,disabled:t,...d})));c.displayName="Input";export{c as Input,i as InputBackground,p as InputText};
+import*as r from"react";import{styled as m}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{overrideStitchesVariantValue as u}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{disabledStyle as b}from"../../utilities/style/disabledStyle.js";import{Flex as g}from"../flex/Flex.js";import{Text as h}from"../text/Text.js";const i=m(g,{color:"$grey1000",transition:"background 100ms ease-out, borderColor 100ms ease-out",width:"100%","&::placeholder":{color:"$grey700",opacity:1},variants:{appearance:{standard:{background:"white",border:"1px solid $grey800",borderRadius:"$1","&:focus-within":{borderColor:"$blue800"}},modern:{background:"$grey100",border:"none",borderRadius:"$1","&:focus-within":{outline:"2px solid $blue800",outlineOffset:1,zIndex:1}}},size:{sm:{height:"$3"},md:{height:"$4"},lg:{height:"$5"},xl:{height:"$6"}},disabled:{true:b},state:{error:{}}},compoundVariants:[{state:"error",appearance:"standard",css:{borderColor:"$danger"}},{state:"error",appearance:"modern",css:{bg:"$dangerLight","&:focus-within":{outlineColor:"$danger"}}}]});i.displayName="InputBackground";const f=m.withConfig({shouldForwardStitchesProp:e=>["as"].includes(e)})(h,{appearance:"none",border:"none",background:"none",backgroundImage:"none",backgroundColor:"transparent",boxShadow:"none",boxSizing:"border-box","&:focus":{outline:"none"},px:"$3",size:"100%"}),x={sm:"sm",md:"md",lg:"md",xl:"lg"},p=r.forwardRef(({type:e="text",css:a,size:o,...n},t)=>{const s=r.useMemo(()=>u(o,d=>x[d]),[o]);return r.createElement(f,{ref:t,as:"input",type:e==="number"?"text":e,inputMode:e==="number"?"numeric":void 0,pattern:e==="number"?"[0-9]*":void 0,size:s,...n})});p.displayName="InputText";const c=r.forwardRef(({className:e,size:a="md",appearance:o="standard",state:n,disabled:t,css:s,...d},l)=>r.createElement(i,{size:a,appearance:o,disabled:t,state:n,css:s,className:e},r.createElement(p,{size:a,ref:l,disabled:t,...d})));c.displayName="Input";export{c as Input,i as InputBackground,p as InputText};
 //# sourceMappingURL=Input.js.map

package/dist/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle } from '~/utilities'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { Flex } from '../flex'\nimport { Text } from '../text'\n\nexport const InputBackground = styled(Flex, {\n  color: '$grey1000',\n  transition: 'background 100ms ease-out, borderColor 100ms ease-out',\n  width: '100%',\n  '&::placeholder': {\n    color: '$grey700',\n    opacity: 1\n  },\n  variants: {\n    appearance: {\n      standard: {\n        background: 'white',\n        border: '1px solid $grey800',\n        borderRadius: '$0',\n        '&:focus-within': {\n          borderColor: '$blue800'\n        }\n      },\n      modern: {\n        background: '$grey100',\n        border: 'none',\n        borderRadius: '$1',\n        '&:focus-within': {\n          outline: '2px solid $blue800',\n          outlineOffset: 1,\n          zIndex: 1\n        }\n      }\n    },\n    size: {\n      sm: { height: '$3' },\n      md: { height: '$4' },\n      lg: { height: '$5' },\n      xl: { height: '$6' }\n    },\n    disabled: {\n      true: disabledStyle\n    },\n    state: {\n      error: {}\n    }\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      css: { borderColor: '$danger' }\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      css: {\n        bg: '$dangerLight',\n        '&:focus-within': {\n          outlineColor: '$danger'\n        }\n      }\n    }\n  ]\n})\n\nInputBackground.displayName = 'InputBackground'\n\nconst StyledInputText = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Text as unknown as 'input', {\n  // unsets\n  appearance: 'none',\n  border: 'none',\n  background: 'none',\n  backgroundImage: 'none',\n  backgroundColor: 'transparent',\n  boxShadow: 'none', // prevent default iOS default styling\n  boxSizing: 'border-box',\n  '&:focus': {\n    outline: 'none'\n  },\n  //\n  px: '$3',\n  size: '100%'\n})\n\nexport type InputTextProps = Omit<\n  React.ComponentProps<typeof StyledInputText>,\n  'size' | 'type' | 'as'\n> & {\n  size: React.ComponentProps<typeof Text>['size']\n  // override default 'type' property to prevent Input from being used to render\n  // checkboxes, radios etc — we have dedicated components for them\n  type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search'\n  as?: never\n}\n\nconst toTextSize = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md',\n  xl: 'lg'\n}\n\nexport const InputText: React.ForwardRefExoticComponent<InputTextProps> =\n  React.forwardRef(({ type = 'text', css, size, ...rest }, ref) => {\n    const textSize = React.useMemo(\n      () => overrideStitchesVariantValue(size, (s) => toTextSize[s]),\n      [size]\n    )\n\n    return (\n      <StyledInputText\n        ref={ref}\n        as=\"input\"\n        type={type === 'number' ? 'text' : type}\n        inputMode={type === 'number' ? 'numeric' : undefined}\n        pattern={type === 'number' ? '[0-9]*' : undefined}\n        size={textSize}\n        {...rest}\n      />\n    )\n  })\n\nInputText.displayName = 'InputText'\n\ntype InputBackgroundProps = React.ComponentProps<typeof InputBackground>\nexport type InputProps = Omit<\n  React.ComponentProps<typeof InputText>,\n  'size' | 'state' | 'appearance'\n> & {\n  size?: InputBackgroundProps['size']\n  state?: InputBackgroundProps['state']\n  appearance?: InputBackgroundProps['appearance']\n}\n\nexport const Input: React.ForwardRefExoticComponent<InputProps> =\n  React.forwardRef(\n    (\n      {\n        className,\n        size = 'md',\n        appearance = 'standard',\n        state,\n        disabled,\n        css,\n        ...rest\n      },\n      ref\n    ) => {\n      return (\n        <InputBackground\n          size={size}\n          appearance={appearance}\n          disabled={disabled}\n          state={state}\n          css={css}\n          className={className}\n        >\n          <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n        </InputBackground>\n      )\n    }\n  )\n\nInput.displayName = 'Input'\n"],"names":["InputBackground","styled","Flex","disabledStyle","StyledInputText","propName","Text","toTextSize","InputText","React","type","css","size","rest","ref","textSize","overrideStitchesVariantValue","s","Input","className","appearance","state","disabled"],"mappings":"+gBASO,MAAMA,EAAkBC,EAAOC,EAAM,CAC1C,MAAO,YACP,WAAY,wDACZ,MAAO,OACP,iBAAkB,CAChB,MAAO,WACP,QAAS,CACX,EACA,SAAU,CACR,WAAY,CACV,SAAU,CACR,WAAY,QACZ,OAAQ,qBACR,aAAc,KACd,iBAAkB,CAChB,YAAa,UACf,CACF,EACA,OAAQ,CACN,WAAY,WACZ,OAAQ,OACR,aAAc,KACd,iBAAkB,CAChB,QAAS,qBACT,cAAe,EACf,OAAQ,CACV,CACF,CACF,EACA,KAAM,CACJ,GAAI,CAAE,OAAQ,IAAK,EACnB,GAAI,CAAE,OAAQ,IAAK,EACnB,GAAI,CAAE,OAAQ,IAAK,EACnB,GAAI,CAAE,OAAQ,IAAK,CACrB,EACA,SAAU,CACR,KAAMC,CACR,EACA,MAAO,CACL,MAAO,CAAA,CACT,CACF,EACA,iBAAkB,CAChB,CACE,MAAO,QACP,WAAY,WACZ,IAAK,CAAE,YAAa,SAAU,CAChC,EACA,CACE,MAAO,QACP,WAAY,SACZ,IAAK,CACH,GAAI,eACJ,iBAAkB,CAChB,aAAc,SAChB,CACF,CACF,CACF,CACF,CAAC,EAEDH,EAAgB,YAAc,kBAE9B,MAAMI,EAAkBH,EAAO,WAAW,CACxC,0BAA4BI,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAA4B,CAE7B,WAAY,OACZ,OAAQ,OACR,WAAY,OACZ,gBAAiB,OACjB,gBAAiB,cACjB,UAAW,OACX,UAAW,aACX,UAAW,CACT,QAAS,MACX,EAEA,GAAI,KACJ,KAAM,MACR,CAAC,EAaKC,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,OAAQ,IAAAC,EAAK,KAAAC,KAASC,CAAK,EAAGC,IAAQ,CAC/D,MAAMC,EAAWN,EAAM,QACrB,IAAMO,EAA6BJ,EAAOK,GAAMV,EAAWU,EAAE,EAC7D,CAACL,CAAI,CACP,EAEA,OACEH,EAAA,cAACL,EAAA,CACC,IAAKU,EACL,GAAG,QACH,KAAMJ,IAAS,SAAW,OAASA,EACnC,UAAWA,IAAS,SAAW,UAAY,OAC3C,QAASA,IAAS,SAAW,SAAW,OACxC,KAAMK,EACL,GAAGF,CAAAA,CACN,CAEJ,CAAC,EAEHL,EAAU,YAAc,YAYjB,MAAMU,EACXT,EAAM,WACJ,CACE,CACE,UAAAU,EACA,KAAAP,EAAO,KACP,WAAAQ,EAAa,WACb,MAAAC,EACA,SAAAC,EACA,IAAAX,KACGE,CACL,EACAC,IAGEL,EAAA,cAACT,EAAA,CACC,KAAMY,EACN,WAAYQ,EACZ,SAAUE,EACV,MAAOD,EACP,IAAKV,EACL,UAAWQ,CAEXV,EAAAA,EAAA,cAACD,EAAA,CAAU,KAAMI,EAAM,IAAKE,EAAK,SAAUQ,EAAW,GAAGT,CAAAA,CAAM,CACjE,CAGN,EAEFK,EAAM,YAAc"}
+{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle } from '~/utilities'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { Flex } from '../flex'\nimport { Text } from '../text'\n\nexport const InputBackground = styled(Flex, {\n  color: '$grey1000',\n  transition: 'background 100ms ease-out, borderColor 100ms ease-out',\n  width: '100%',\n  '&::placeholder': {\n    color: '$grey700',\n    opacity: 1\n  },\n  variants: {\n    appearance: {\n      standard: {\n        background: 'white',\n        border: '1px solid $grey800',\n        borderRadius: '$1',\n        '&:focus-within': {\n          borderColor: '$blue800'\n        }\n      },\n      modern: {\n        background: '$grey100',\n        border: 'none',\n        borderRadius: '$1',\n        '&:focus-within': {\n          outline: '2px solid $blue800',\n          outlineOffset: 1,\n          zIndex: 1\n        }\n      }\n    },\n    size: {\n      sm: { height: '$3' },\n      md: { height: '$4' },\n      lg: { height: '$5' },\n      xl: { height: '$6' }\n    },\n    disabled: {\n      true: disabledStyle\n    },\n    state: {\n      error: {}\n    }\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      css: { borderColor: '$danger' }\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      css: {\n        bg: '$dangerLight',\n        '&:focus-within': {\n          outlineColor: '$danger'\n        }\n      }\n    }\n  ]\n})\n\nInputBackground.displayName = 'InputBackground'\n\nconst StyledInputText = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Text as unknown as 'input', {\n  // unsets\n  appearance: 'none',\n  border: 'none',\n  background: 'none',\n  backgroundImage: 'none',\n  backgroundColor: 'transparent',\n  boxShadow: 'none', // prevent default iOS default styling\n  boxSizing: 'border-box',\n  '&:focus': {\n    outline: 'none'\n  },\n  //\n  px: '$3',\n  size: '100%'\n})\n\nexport type InputTextProps = Omit<\n  React.ComponentProps<typeof StyledInputText>,\n  'size' | 'type' | 'as'\n> & {\n  size: React.ComponentProps<typeof Text>['size']\n  // override default 'type' property to prevent Input from being used to render\n  // checkboxes, radios etc — we have dedicated components for them\n  type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search'\n  as?: never\n}\n\nconst toTextSize = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md',\n  xl: 'lg'\n}\n\nexport const InputText: React.ForwardRefExoticComponent<InputTextProps> =\n  React.forwardRef(({ type = 'text', css, size, ...rest }, ref) => {\n    const textSize = React.useMemo(\n      () => overrideStitchesVariantValue(size, (s) => toTextSize[s]),\n      [size]\n    )\n\n    return (\n      <StyledInputText\n        ref={ref}\n        as=\"input\"\n        type={type === 'number' ? 'text' : type}\n        inputMode={type === 'number' ? 'numeric' : undefined}\n        pattern={type === 'number' ? '[0-9]*' : undefined}\n        size={textSize}\n        {...rest}\n      />\n    )\n  })\n\nInputText.displayName = 'InputText'\n\ntype InputBackgroundProps = React.ComponentProps<typeof InputBackground>\nexport type InputProps = Omit<\n  React.ComponentProps<typeof InputText>,\n  'size' | 'state' | 'appearance'\n> & {\n  size?: InputBackgroundProps['size']\n  state?: InputBackgroundProps['state']\n  appearance?: InputBackgroundProps['appearance']\n}\n\nexport const Input: React.ForwardRefExoticComponent<InputProps> =\n  React.forwardRef(\n    (\n      {\n        className,\n        size = 'md',\n        appearance = 'standard',\n        state,\n        disabled,\n        css,\n        ...rest\n      },\n      ref\n    ) => {\n      return (\n        <InputBackground\n          size={size}\n          appearance={appearance}\n          disabled={disabled}\n          state={state}\n          css={css}\n          className={className}\n        >\n          <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n        </InputBackground>\n      )\n    }\n  )\n\nInput.displayName = 'Input'\n"],"names":["InputBackground","styled","Flex","disabledStyle","StyledInputText","propName","Text","toTextSize","InputText","React","type","css","size","rest","ref","textSize","overrideStitchesVariantValue","s","Input","className","appearance","state","disabled"],"mappings":"+gBASO,MAAMA,EAAkBC,EAAOC,EAAM,CAC1C,MAAO,YACP,WAAY,wDACZ,MAAO,OACP,iBAAkB,CAChB,MAAO,WACP,QAAS,CACX,EACA,SAAU,CACR,WAAY,CACV,SAAU,CACR,WAAY,QACZ,OAAQ,qBACR,aAAc,KACd,iBAAkB,CAChB,YAAa,UACf,CACF,EACA,OAAQ,CACN,WAAY,WACZ,OAAQ,OACR,aAAc,KACd,iBAAkB,CAChB,QAAS,qBACT,cAAe,EACf,OAAQ,CACV,CACF,CACF,EACA,KAAM,CACJ,GAAI,CAAE,OAAQ,IAAK,EACnB,GAAI,CAAE,OAAQ,IAAK,EACnB,GAAI,CAAE,OAAQ,IAAK,EACnB,GAAI,CAAE,OAAQ,IAAK,CACrB,EACA,SAAU,CACR,KAAMC,CACR,EACA,MAAO,CACL,MAAO,CAAA,CACT,CACF,EACA,iBAAkB,CAChB,CACE,MAAO,QACP,WAAY,WACZ,IAAK,CAAE,YAAa,SAAU,CAChC,EACA,CACE,MAAO,QACP,WAAY,SACZ,IAAK,CACH,GAAI,eACJ,iBAAkB,CAChB,aAAc,SAChB,CACF,CACF,CACF,CACF,CAAC,EAEDH,EAAgB,YAAc,kBAE9B,MAAMI,EAAkBH,EAAO,WAAW,CACxC,0BAA4BI,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAA4B,CAE7B,WAAY,OACZ,OAAQ,OACR,WAAY,OACZ,gBAAiB,OACjB,gBAAiB,cACjB,UAAW,OACX,UAAW,aACX,UAAW,CACT,QAAS,MACX,EAEA,GAAI,KACJ,KAAM,MACR,CAAC,EAaKC,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,OAAQ,IAAAC,EAAK,KAAAC,KAASC,CAAK,EAAGC,IAAQ,CAC/D,MAAMC,EAAWN,EAAM,QACrB,IAAMO,EAA6BJ,EAAOK,GAAMV,EAAWU,EAAE,EAC7D,CAACL,CAAI,CACP,EAEA,OACEH,EAAA,cAACL,EAAA,CACC,IAAKU,EACL,GAAG,QACH,KAAMJ,IAAS,SAAW,OAASA,EACnC,UAAWA,IAAS,SAAW,UAAY,OAC3C,QAASA,IAAS,SAAW,SAAW,OACxC,KAAMK,EACL,GAAGF,CAAAA,CACN,CAEJ,CAAC,EAEHL,EAAU,YAAc,YAYjB,MAAMU,EACXT,EAAM,WACJ,CACE,CACE,UAAAU,EACA,KAAAP,EAAO,KACP,WAAAQ,EAAa,WACb,MAAAC,EACA,SAAAC,EACA,IAAAX,KACGE,CACL,EACAC,IAGEL,EAAA,cAACT,EAAA,CACC,KAAMY,EACN,WAAYQ,EACZ,SAAUE,EACV,MAAOD,EACP,IAAKV,EACL,UAAWQ,CAEXV,EAAAA,EAAA,cAACD,EAAA,CAAU,KAAMI,EAAM,IAAKE,EAAK,SAAUQ,EAAW,GAAGT,CAAAA,CAAM,CACjE,CAGN,EAEFK,EAAM,YAAc"}

package/dist/components/number-input/NumberInputStepper.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as o}from"../../stitches.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import{Icon as m}from"../icon/Icon.js";import{Tooltip as r}from"../tooltip/Tooltip.js";const s=o("span",{zIndex:1}),g=o(c,{zIndex:1,height:"100% !important","&:hover":{bg:"$grey100",svg:{color:"$grey800"}},svg:{color:"$grey700"},"&:active":{bg:"$grey200",svg:{color:"$grey900"}},"&:disabled":{opacity:.3,pointerEvents:"none"},variants:{fieldAppearance:{standard:{backgroundColor:"white",borderColor:"$grey800 !important",borderRadius:"$0"},modern:{backgroundColor:"$grey100",borderColor:"$grey100 !important",borderRadius:"$1"}}}}),b=e.forwardRef((t,n)=>{const{icon:a,disabledTooltipContent:i,showTooltip:l,fieldAppearance:d="standard",...p}=t;return e.createElement(r,null,e.createElement(r.Trigger,{asChild:!0},e.createElement(s,{tabIndex:-1},e.createElement(g,{hasTooltip:!1,tabIndex:-1,appearance:"outline",fieldAppearance:d,ref:n,...p},e.createElement(m,{is:a})))),l&&e.createElement(r.Content,null,i))});export{b as NumberInputStepper};
+import*as e from"react";import{styled as o}from"../../stitches.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import{Icon as m}from"../icon/Icon.js";import{Tooltip as r}from"../tooltip/Tooltip.js";const s=o("span",{zIndex:1}),g=o(c,{borderRadius:"$1",zIndex:1,height:"100% !important","&:hover":{bg:"$grey100",svg:{color:"$grey800"}},svg:{color:"$grey700"},"&:active":{bg:"$grey200",svg:{color:"$grey900"}},"&:disabled":{opacity:.3,pointerEvents:"none"},variants:{fieldAppearance:{standard:{backgroundColor:"white",borderColor:"$grey800 !important"},modern:{backgroundColor:"$grey100",borderColor:"$grey100 !important"}}}}),b=e.forwardRef((t,n)=>{const{icon:a,disabledTooltipContent:i,showTooltip:l,fieldAppearance:p="standard",...d}=t;return e.createElement(r,null,e.createElement(r.Trigger,{asChild:!0},e.createElement(s,{tabIndex:-1},e.createElement(g,{hasTooltip:!1,tabIndex:-1,appearance:"outline",fieldAppearance:p,ref:n,...d},e.createElement(m,{is:a})))),l&&e.createElement(r.Content,null,i))});export{b as NumberInputStepper};
 //# sourceMappingURL=NumberInputStepper.js.map