@bolio-ui/core 3.0.0-alpha.1 → 3.0.0

package/esm/Menu/index.js

@@ -1,8 +1,8 @@
 'use client';
 import {
   Menu_default
-} from "../chunk-XLPOECCE.js";
-import "../chunk-AG2NWQYL.js";
+} from "../chunk-FLUNRVVG.js";
+import "../chunk-WCTANCLG.js";
 import "../chunk-DSX6YDJM.js";
 import "../chunk-V57PNXMD.js";
 import "../chunk-JJFOGZ6V.js";
@@ -12,6 +12,7 @@ import "../chunk-BXDUHMWS.js";
 import "../chunk-ZRORQ2WH.js";
 import "../chunk-DGXZP4VJ.js";
 import "../chunk-3WPRUUZ6.js";
+import "../chunk-EUYSKHRS.js";
 import "../chunk-MAICNLTY.js";
 import "../chunk-UX2B3G6U.js";
 import "../chunk-V5I4ORQQ.js";

package/esm/Modal/index.js

@@ -1,21 +1,22 @@
 'use client';
 import {
   Modal_default
-} from "../chunk-6ZBFUZSL.js";
-import "../chunk-TKIUVNKP.js";
+} from "../chunk-CU6SNPIM.js";
+import "../chunk-XKJDF225.js";
 import "../chunk-F3AL4TQZ.js";
 import "../chunk-O3RTRCY5.js";
-import "../chunk-LDTDMDE6.js";
-import "../chunk-BXDUHMWS.js";
 import "../chunk-33BUV2RX.js";
 import "../chunk-GGD4BGH2.js";
+import "../chunk-LDTDMDE6.js";
+import "../chunk-BXDUHMWS.js";
 import "../chunk-ZRORQ2WH.js";
-import "../chunk-DXHNQANX.js";
+import "../chunk-TPZUTHTQ.js";
 import "../chunk-BSDZWWUS.js";
+import "../chunk-NDERASK2.js";
 import "../chunk-GJZT47MP.js";
 import "../chunk-RZBEZ26A.js";
+import "../chunk-EUYSKHRS.js";
 import "../chunk-LMDBE6T6.js";
-import "../chunk-NDERASK2.js";
 import "../chunk-MAICNLTY.js";
 import "../chunk-UX2B3G6U.js";
 import "../chunk-V5I4ORQQ.js";

package/esm/Note/Note.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { NormalTypes } from '../utils/prop-types';
+import { BolioUIThemes } from '../Themes/Presets';
 import type { AnyElement } from '../utils/types';
 export type NoteTypes = NormalTypes;
 interface Props {
@@ -12,6 +13,15 @@ interface Props {
 }
 type NativeAttrs = Omit<React.HTMLAttributes<AnyElement>, keyof Props>;
 export type NoteProps = Props & NativeAttrs;
+export declare const getStatusColor: (type: NoteTypes, { filled, light, subtle }: {
+    filled: boolean;
+    light: boolean;
+    subtle: boolean;
+}, theme: BolioUIThemes) => {
+    color: string;
+    borderColor: string;
+    bgColor: string;
+};
 export declare const NoteComponent: React.ForwardRefExoticComponent<Props & NativeAttrs & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/esm/Note/index.js

@@ -1,7 +1,8 @@
 'use client';
 import {
   Note_default
-} from "../chunk-AFBCMW2I.js";
+} from "../chunk-CGS2MT3G.js";
+import "../chunk-26KDVRFS.js";
 import "../chunk-GJZT47MP.js";
 import "../chunk-MAICNLTY.js";
 import "../chunk-UX2B3G6U.js";

package/esm/Popover/index.js

@@ -1,8 +1,8 @@
 'use client';
 import {
   Popover_default
-} from "../chunk-GGCVPMXO.js";
-import "../chunk-XF4TPE2W.js";
+} from "../chunk-Y432C24Z.js";
+import "../chunk-IL7L3BEL.js";
 import "../chunk-V57PNXMD.js";
 import "../chunk-JJFOGZ6V.js";
 import "../chunk-LDTDMDE6.js";
@@ -12,6 +12,7 @@ import "../chunk-BSDZWWUS.js";
 import "../chunk-GJZT47MP.js";
 import "../chunk-DGXZP4VJ.js";
 import "../chunk-3WPRUUZ6.js";
+import "../chunk-EUYSKHRS.js";
 import "../chunk-MAICNLTY.js";
 import "../chunk-UX2B3G6U.js";
 import "../chunk-V5I4ORQQ.js";

package/esm/Select/index.js

@@ -1,20 +1,21 @@
 'use client';
 import {
   Select_default
-} from "../chunk-DIMJQLWY.js";
+} from "../chunk-XUNC7RB7.js";
 import "../chunk-JFNYQSEZ.js";
-import "../chunk-AG2NWQYL.js";
+import "../chunk-KBZEYKCZ.js";
+import "../chunk-WCTANCLG.js";
 import "../chunk-DSX6YDJM.js";
 import "../chunk-V57PNXMD.js";
 import "../chunk-JJFOGZ6V.js";
-import "../chunk-KBZEYKCZ.js";
 import "../chunk-AXYDJGTN.js";
-import "../chunk-LDTDMDE6.js";
-import "../chunk-BXDUHMWS.js";
 import "../chunk-33BUV2RX.js";
 import "../chunk-GGD4BGH2.js";
+import "../chunk-LDTDMDE6.js";
+import "../chunk-BXDUHMWS.js";
 import "../chunk-ZRORQ2WH.js";
 import "../chunk-GJZT47MP.js";
+import "../chunk-EUYSKHRS.js";
 import "../chunk-MAICNLTY.js";
 import "../chunk-UX2B3G6U.js";
 import "../chunk-V5I4ORQQ.js";

package/esm/Splitter/Splitter.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type SplitterDirection = 'horizontal' | 'vertical';
+interface Props {
+    direction?: SplitterDirection;
+    onResize?: (sizes: Array<number>) => void;
+    handleLabel?: string;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>;
+export type SplitterProps = Props & NativeAttrs;
+declare const Splitter: import("../use-scale/with-scale").ScaleComponent<HTMLDivElement, Props & NativeAttrs & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default Splitter;

package/esm/Splitter/SplitterContext.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface SplitterPanelConfig {
+    id: string;
+    setElement: (element: HTMLDivElement | null) => void;
+}
+export declare const SplitterPanelContext: React.Context<SplitterPanelConfig | null>;

package/esm/Splitter/SplitterPanel.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface Props {
+    defaultSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>;
+export type SplitterPanelProps = Props & NativeAttrs;
+declare const SplitterPanel: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default SplitterPanel;

package/esm/Splitter/index.d.ts

@@ -0,0 +1,9 @@
+import Splitter from './Splitter';
+import SplitterPanel from './SplitterPanel';
+export type SplitterComponentType = typeof Splitter & {
+    Panel: typeof SplitterPanel;
+};
+export type { SplitterProps, SplitterDirection } from './Splitter';
+export type { SplitterPanelProps } from './SplitterPanel';
+declare const _default: SplitterComponentType;
+export default _default;

package/esm/Splitter/index.js

@@ -0,0 +1,14 @@
+'use client';
+import {
+  Splitter_default
+} from "../chunk-FFEAKF3A.js";
+import "../chunk-MAICNLTY.js";
+import "../chunk-UX2B3G6U.js";
+import "../chunk-V5I4ORQQ.js";
+import "../chunk-FEA5BJ35.js";
+import "../chunk-X5PGXMVQ.js";
+import "../chunk-SZIX7BM5.js";
+import "../chunk-5KUROAEP.js";
+export {
+  Splitter_default as default
+};

package/esm/Table/Table.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableDataItemBase, TableOnCellClick, TableOnChange, TableOnRowClick, TableRowClassNameHandler } from './TableTypes';
+import { TableDataItemBase, TableKey, TableSort, TableOnCellClick, TableOnChange, TableOnRowClick, TableRowClassNameHandler } from './TableTypes';
 import { ScaleProps } from '../use-scale';
 import TableColumn from './TableColumn';
 import type { AnyElement } from '../utils/types';
@@ -20,6 +20,16 @@ interface Props<TableDataItem extends TableDataItemBase> {
     pagination?: TablePagination;
     className?: string;
     rowClassName?: TableRowClassNameHandler<TableDataItem>;
+    sort?: TableSort | null;
+    initialSort?: TableSort | null;
+    onSortChange?: (sort: TableSort | null) => void;
+    selectable?: boolean;
+    rowKey?: keyof TableDataItem | ((row: TableDataItem) => TableKey);
+    selectedKeys?: Array<TableKey>;
+    initialSelectedKeys?: Array<TableKey>;
+    onSelectionChange?: (keys: Array<TableKey>, rows: Array<TableDataItem>) => void;
+    selectRowLabel?: string;
+    selectAllLabel?: string;
 }
 type NativeAttrs = Omit<React.TableHTMLAttributes<AnyElement>, keyof Props<TableDataItemBase>>;
 export type TableProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs;

package/esm/Table/TableBody.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableDataItemBase, TableOnCellClick, TableOnRowClick, TableRowClassNameHandler } from './TableTypes';
+import { TableDataItemBase, TableKey, TableOnCellClick, TableOnRowClick, TableRowClassNameHandler } from './TableTypes';
 import type { AnyElement } from '../utils/types';
 interface Props<TableDataItem extends TableDataItemBase> {
     hover: boolean;
@@ -7,13 +7,19 @@ interface Props<TableDataItem extends TableDataItemBase> {
     onRow?: TableOnRowClick<TableDataItem>;
     onCell?: TableOnCellClick<TableDataItem>;
     data: Array<TableDataItem>;
+    keys: Array<TableKey>;
+    selection?: {
+        keys: Array<TableKey>;
+        label: string;
+        onToggle: (key: TableKey) => void;
+    };
     className?: string;
     rowClassName: TableRowClassNameHandler<TableDataItem>;
 }
 type NativeAttrs = Omit<React.HTMLAttributes<AnyElement>, keyof Props<TableDataItemBase>>;
 export type TableBodyProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs;
 declare const TableBody: {
-    <TableDataItem extends TableDataItemBase>({ data, hover, emptyText, onRow, onCell, rowClassName }: TableBodyProps<TableDataItem>): React.JSX.Element;
+    <TableDataItem extends TableDataItemBase>({ data, keys, selection, hover, emptyText, onRow, onCell, rowClassName }: TableBodyProps<TableDataItem>): React.JSX.Element;
     displayName: string;
 };
 export default TableBody;

package/esm/Table/TableColumn.d.ts

@@ -5,6 +5,8 @@ export type TableColumnProps<TableDataItem extends TableDataItemBase> = {
     label?: string;
     width?: number;
     className?: string;
+    sortable?: boolean;
+    sorter?: (a: TableDataItem, b: TableDataItem) => number;
     render?: TableColumnRender<TableDataItem>;
 };
 declare const TableColumn: {

package/esm/Table/TableHead.d.ts

@@ -1,9 +1,17 @@
 import React from 'react';
-import { TableAbstractColumn, TableDataItemBase } from './TableTypes';
+import { TableAbstractColumn, TableDataItemBase, TableSort } from './TableTypes';
 import type { AnyElement } from '../utils/types';
 interface Props<TableDataItem extends TableDataItemBase> {
     width: number;
     columns: Array<TableAbstractColumn<TableDataItem>>;
+    sort?: TableSort | null;
+    onSort?: (prop: string) => void;
+    selection?: {
+        checked: boolean;
+        indeterminate: boolean;
+        label: string;
+        onToggle: () => void;
+    };
     className?: string;
 }
 type NativeAttrs = Omit<React.HTMLAttributes<AnyElement>, keyof Props<TableDataItemBase>>;

package/esm/Table/TableSelectBox.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    checked: boolean;
+    indeterminate?: boolean;
+    label: string;
+    onChange: () => void;
+}
+declare function TableSelectBox({ checked, indeterminate, label, onChange }: Props): React.JSX.Element;
+export default TableSelectBox;

package/esm/Table/TableTypes.d.ts

@@ -2,11 +2,19 @@ import React from 'react';
 import type { AnyObject } from '../utils/types';
 export type TableDataItemBase = AnyObject;
 export type TableColumnRender<Item extends TableDataItemBase> = (value: Item[keyof Item], rowData: Item, rowIndex: number) => React.JSX.Element | void;
+export type TableSortDirection = 'asc' | 'desc';
+export type TableSort = {
+    prop: string;
+    direction: TableSortDirection;
+};
+export type TableKey = string | number;
 export type TableAbstractColumn<TableDataItem extends TableDataItemBase> = {
     prop: keyof TableDataItem;
     label: React.ReactNode | string;
     className: string;
     width?: number;
+    sortable?: boolean;
+    sorter?: (a: TableDataItem, b: TableDataItem) => number;
     renderHandler: TableColumnRender<TableDataItem>;
 };
 export type TableOnRowClick<TableDataItem> = (rowData: TableDataItem, rowIndex: number) => void;

package/esm/Table/index.d.ts

@@ -1,5 +1,5 @@
 import Table from './Table';
 export type { TableProps, TablePagination } from './Table';
 export type { TableColumnProps } from './TableColumn';
-export type { TableOnCellClick, TableAbstractColumn, TableOnChange, TableOnRowClick, TableRowClassNameHandler, TableDataItemBase, TableColumnRender } from './TableTypes';
+export type { TableOnCellClick, TableAbstractColumn, TableOnChange, TableOnRowClick, TableRowClassNameHandler, TableDataItemBase, TableColumnRender, TableKey, TableSort, TableSortDirection } from './TableTypes';
 export default Table;

package/esm/Table/index.js

@@ -1,10 +1,10 @@
 'use client';
 import {
   Table_default
-} from "../chunk-TKICX5R6.js";
+} from "../chunk-Y5CFWIGV.js";
 import "../chunk-E5EDUOQT.js";
-import "../chunk-JJFOGZ6V.js";
 import "../chunk-HKOESPKZ.js";
+import "../chunk-JJFOGZ6V.js";
 import "../chunk-AXYDJGTN.js";
 import "../chunk-33BUV2RX.js";
 import "../chunk-GGD4BGH2.js";

package/esm/Toolbar/Toolbar.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Props {
+    orientation?: 'horizontal' | 'vertical';
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>;
+export type ToolbarProps = Props & NativeAttrs;
+declare const Toolbar: import("../use-scale/with-scale").ScaleComponent<HTMLDivElement, Props & NativeAttrs & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default Toolbar;

package/esm/Toolbar/ToolbarSeparator.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type ToolbarSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
+declare const ToolbarSeparator: React.ForwardRefExoticComponent<ToolbarSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export default ToolbarSeparator;

package/esm/Toolbar/index.d.ts

@@ -0,0 +1,9 @@
+import Toolbar from './Toolbar';
+import ToolbarSeparator from './ToolbarSeparator';
+export type ToolbarComponentType = typeof Toolbar & {
+    Separator: typeof ToolbarSeparator;
+};
+export type { ToolbarProps } from './Toolbar';
+export type { ToolbarSeparatorProps } from './ToolbarSeparator';
+declare const _default: ToolbarComponentType;
+export default _default;

package/esm/Toolbar/index.js

@@ -0,0 +1,14 @@
+'use client';
+import {
+  Toolbar_default
+} from "../chunk-Q3I54DUS.js";
+import "../chunk-MAICNLTY.js";
+import "../chunk-UX2B3G6U.js";
+import "../chunk-V5I4ORQQ.js";
+import "../chunk-FEA5BJ35.js";
+import "../chunk-X5PGXMVQ.js";
+import "../chunk-SZIX7BM5.js";
+import "../chunk-5KUROAEP.js";
+export {
+  Toolbar_default as default
+};

package/esm/Tooltip/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   Tooltip_default
-} from "../chunk-XF4TPE2W.js";
+} from "../chunk-IL7L3BEL.js";
 import "../chunk-V57PNXMD.js";
 import "../chunk-JJFOGZ6V.js";
 import "../chunk-LDTDMDE6.js";
@@ -10,6 +10,7 @@ import "../chunk-ZRORQ2WH.js";
 import "../chunk-GJZT47MP.js";
 import "../chunk-DGXZP4VJ.js";
 import "../chunk-3WPRUUZ6.js";
+import "../chunk-EUYSKHRS.js";
 import "../chunk-MAICNLTY.js";
 import "../chunk-UX2B3G6U.js";
 import "../chunk-V5I4ORQQ.js";

package/esm/Tour/Tour.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export interface TourStep {
+    target?: string | HTMLElement | (() => HTMLElement | null);
+    title: React.ReactNode;
+    content: React.ReactNode;
+}
+interface Props {
+    steps: Array<TourStep>;
+    open: boolean;
+    onClose: () => void;
+    current?: number;
+    initialCurrent?: number;
+    onCurrentChange?: (index: number) => void;
+    onFinish?: () => void;
+    previousLabel?: string;
+    nextLabel?: string;
+    finishLabel?: string;
+    skipLabel?: string;
+    stepLabel?: (index: number, count: number) => string;
+    spotlightPadding?: number;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>;
+export type TourProps = Props & NativeAttrs;
+declare const Tour: React.ForwardRefExoticComponent<Props & NativeAttrs & React.RefAttributes<HTMLDivElement>>;
+export default Tour;

package/esm/Tour/index.d.ts

@@ -0,0 +1,3 @@
+import Tour from './Tour';
+export type { TourProps, TourStep } from './Tour';
+export default Tour;

package/esm/Tour/index.js

@@ -0,0 +1,24 @@
+'use client';
+import {
+  Tour_default
+} from "../chunk-SJVWKNGY.js";
+import "../chunk-AXYDJGTN.js";
+import "../chunk-BXDUHMWS.js";
+import "../chunk-ZRORQ2WH.js";
+import "../chunk-TPZUTHTQ.js";
+import "../chunk-BSDZWWUS.js";
+import "../chunk-NDERASK2.js";
+import "../chunk-GJZT47MP.js";
+import "../chunk-RZBEZ26A.js";
+import "../chunk-EUYSKHRS.js";
+import "../chunk-LMDBE6T6.js";
+import "../chunk-MAICNLTY.js";
+import "../chunk-UX2B3G6U.js";
+import "../chunk-V5I4ORQQ.js";
+import "../chunk-FEA5BJ35.js";
+import "../chunk-X5PGXMVQ.js";
+import "../chunk-SZIX7BM5.js";
+import "../chunk-5KUROAEP.js";
+export {
+  Tour_default as default
+};

package/esm/{chunk-PGQYW6YF.js → chunk-25NFUHLR.js}

@@ -4,7 +4,7 @@ import {
   ModalTitle_default,
   backdrop_default,
   use_body_scroll_default
-} from "./chunk-TKIUVNKP.js";
+} from "./chunk-XKJDF225.js";
 import {
   use_keyboard_default
 } from "./chunk-F3AL4TQZ.js";
@@ -14,6 +14,9 @@ import {
 import {
   use_portal_default
 } from "./chunk-BXDUHMWS.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_scale_default,
   with_scale_default
@@ -75,6 +78,7 @@ var placementClasses = {
 };
 var DrawerWrapper = React.forwardRef(({ className = "", children, visible = false, placement, ...props }, ref) => {
   const theme = use_theme_default();
+  const surface = getSurface(theme, theme.expressiveness.shadowLarge);
   const { SCALES } = use_scale_default();
   const modalContent = useRef(null);
   useImperativeHandle(ref, () => modalContent.current);
@@ -87,10 +91,10 @@ var DrawerWrapper = React.forwardRef(({ className = "", children, visible = fals
     className
   );
   const wrapperStyle = {
-    backgroundColor: theme.palette.background,
+    backgroundColor: surface.bg,
     color: theme.palette.foreground,
     borderRadius: `calc(3 * ${theme.layout.radius})`,
-    boxShadow: theme.expressiveness.shadowLarge,
+    boxShadow: surface.shadow,
     fontSize: SCALES.font(1),
     "--drawer-wrapper-padding-left": SCALES.pl(1.3125),
     "--drawer-wrapper-padding-right": SCALES.pr(1.3125),

package/esm/{chunk-AFBCMW2I.js → chunk-26KDVRFS.js}

@@ -92,9 +92,7 @@ NoteComponent.displayName = "BolioUINote";
 var Note = with_scale_default(NoteComponent);
 var Note_default = Note;
 
-// core/Note/index.ts
-var Note_default2 = Note_default;
-
 export {
-  Note_default2 as Note_default
+  getStatusColor,
+  Note_default
 };

package/esm/{chunk-4ZGR7UMX.js → chunk-4DH6SOK4.js}

@@ -6,21 +6,24 @@ import {
   defaultToastLayout,
   useBolioUIContext
 } from "./chunk-A3BIV2QM.js";
+import {
+  use_current_state_default
+} from "./chunk-33BUV2RX.js";
 import {
   css_transition_default
 } from "./chunk-LDTDMDE6.js";
 import {
   use_portal_default
 } from "./chunk-BXDUHMWS.js";
-import {
-  use_current_state_default
-} from "./chunk-33BUV2RX.js";
 import {
   use_latest_default
 } from "./chunk-ZRORQ2WH.js";
 import {
   Button_default
-} from "./chunk-DXHNQANX.js";
+} from "./chunk-TPZUTHTQ.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_theme_default
 } from "./chunk-V5I4ORQQ.js";
@@ -156,12 +159,13 @@ var ToastItem = React2.memo(({ toast, layout }) => {
     () => getTranslateByPlacement(placement),
     [placement]
   );
+  const surface = getSurface(theme, theme.expressiveness.shadowSmall);
   const toastStyle = {
     "--toast-item-max-height": maxHeight,
     "--toast-item-color": color,
-    "--toast-item-bg": bgColor,
+    "--toast-item-bg": bgColor === theme.palette.background ? surface.bg : bgColor,
     "--toast-item-radius": theme.layout.radius,
-    "--toast-item-shadow": theme.expressiveness.shadowSmall,
+    "--toast-item-shadow": surface.shadow,
     "--toast-item-margin": margin,
     "--toast-item-padding": padding,
     "--toast-item-enter-transform": enter,

package/esm/chunk-CGS2MT3G.js

@@ -0,0 +1,10 @@
+import {
+  Note_default
+} from "./chunk-26KDVRFS.js";
+
+// core/Note/index.ts
+var Note_default2 = Note_default;
+
+export {
+  Note_default2 as Note_default
+};

package/esm/{chunk-6ZBFUZSL.js → chunk-CU6SNPIM.js}

@@ -6,7 +6,7 @@ import {
   backdrop_default,
   useModalContext,
   use_body_scroll_default
-} from "./chunk-TKIUVNKP.js";
+} from "./chunk-XKJDF225.js";
 import {
   use_keyboard_default
 } from "./chunk-F3AL4TQZ.js";
@@ -18,7 +18,10 @@ import {
 } from "./chunk-BXDUHMWS.js";
 import {
   Button_default
-} from "./chunk-DXHNQANX.js";
+} from "./chunk-TPZUTHTQ.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_scale_default,
   with_scale_default
@@ -81,11 +84,12 @@ var ModalWrapper = React.forwardRef(({ className = "", children, visible = false
       }
     }
   };
+  const surface = getSurface(theme, theme.expressiveness.shadowLarge);
   const wrapperStyle = {
-    backgroundColor: theme.palette.background,
+    backgroundColor: surface.bg,
     color: theme.palette.foreground,
     borderRadius: theme.layout.radius,
-    boxShadow: theme.expressiveness.shadowLarge,
+    boxShadow: surface.shadow,
     fontSize: SCALES.font(1),
     height: SCALES.height(1, "auto"),
     "--modal-wrapper-padding-left": SCALES.pl(1.3125),
@@ -163,15 +167,14 @@ var ModalActionComponent = React2.forwardRef(function({
   const color = useMemo(() => {
     return passive ? theme.palette.accents_5 : theme.palette.foreground;
   }, [theme.palette, passive]);
-  const bgColor = useMemo(() => {
-    return disabled ? theme.palette.accents_1 : theme.palette.background;
-  }, [theme.palette, disabled]);
+  const actionBg = theme.type === "dark" ? theme.palette.accents_2 : theme.palette.background;
+  const hoverBg = theme.type === "dark" ? theme.palette.accents_3 : theme.palette.accents_1;
   const classes = use_classes_default(ModalAction_module_css_default.action, className);
   const actionStyle = {
     fontSize: SCALES.font(0.75),
     border: "none",
     color,
-    backgroundColor: theme.palette.background,
+    backgroundColor: actionBg,
     display: "flex",
     WebkitBoxAlign: "center",
     alignItems: "center",
@@ -182,11 +185,10 @@ var ModalActionComponent = React2.forwardRef(function({
     borderRadius: 0,
     minWidth: 0,
     "--modal-action-hover-color": disabled ? color : theme.palette.foreground,
-    "--modal-action-hover-bg": disabled ? bgColor : theme.palette.accents_1
+    "--modal-action-hover-bg": disabled ? actionBg : hoverBg
   };
   const overrideProps = {
     ...props,
-    effect: false,
     ref: btnRef
   };
   return /* @__PURE__ */ jsx2(
@@ -222,6 +224,7 @@ var ModalActionsComponent = ({
 }) => {
   const theme = use_theme_default();
   const ref = useRef3(null);
+  const border = theme.type === "dark" ? theme.palette.accents_4 : theme.palette.border;
   const [height, setHeight] = useState("auto");
   useEffect2(() => {
     if (!ref.current) return;
@@ -236,10 +239,10 @@ var ModalActionsComponent = ({
         ...props,
         className: ModalActions_module_css_default.footer,
         style: {
-          borderTop: `1px solid ${theme.palette.border}`,
+          borderTop: `1px solid ${border}`,
           borderBottomLeftRadius: theme.layout.radius,
           borderBottomRightRadius: theme.layout.radius,
-          "--modal-actions-border": theme.palette.border
+          "--modal-actions-border": border
         },
         children
       }