flipper-ui 0.40.3 → 0.41.0

package/core/data-display/table/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _Table = _interopRequireDefault(require("@mui/material/Table"));
@@ -15,6 +16,38 @@ var _excluded = ["style", "margin", "padding", "spacing", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var gray = _theme.theme.colors.gray;
+
+// doubled ampersand so it also wins over TableCellInteractive's own `&&`
+var SMALL_SIZE_SX = {
+  '&& thead th, && tbody th, && tbody td': {
+    fontSize: '13px',
+    padding: '6px 12px'
+  },
+  // the pagination cell keeps its own padding of 0, so the footer shrinks
+  // through the toolbar instead. 8px here plus the 4px below leave the last
+  // icon 12px from the edge, the same inset the small cells use
+  '&& tfoot .MuiTablePagination-toolbar': {
+    minHeight: '40px',
+    paddingRight: '8px'
+  },
+  // the labels are `p` elements, and their default `1em` margin is what
+  // holds the toolbar above the 40px asked for above
+  '&& tfoot .MuiTablePagination-selectLabel, && tfoot .MuiTablePagination-displayedRows': {
+    margin: 0,
+    fontSize: '13px'
+  },
+  '&& tfoot .MuiTablePagination-input': {
+    fontSize: '13px',
+    marginRight: '16px'
+  },
+  // the select arrow and the four page icons in one rule
+  '&& tfoot .MuiSvgIcon-root': {
+    fontSize: '18px'
+  },
+  '&& tfoot .MuiIconButton-root': {
+    padding: '4px'
+  }
+};
 var Table = function Table(_ref) {
   var style = _ref.style,
     margin = _ref.margin,
@@ -24,6 +57,7 @@ var Table = function Table(_ref) {
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_Table["default"], (0, _extends2["default"])({}, otherProps, {
     padding: spacing,
+    sx: [otherProps.size === 'small' && SMALL_SIZE_SX].concat((0, _toConsumableArray2["default"])(Array.isArray(otherProps.sx) ? otherProps.sx : [otherProps.sx])),
     style: _objectSpread({
       border: "1px solid ".concat(gray[300]),
       padding: padding,

package/core/data-display/table/styles.d.ts

@@ -0,0 +1,42 @@
+import type { CSSProperties } from 'react';
+export type Truncate = boolean | number | string;
+export declare const SCROLLBAR: {
+    readonly scrollbarWidth: "thin";
+    readonly scrollbarColor: `${string} transparent`;
+    readonly '&::-webkit-scrollbar': {
+        readonly width: "4px";
+        readonly height: "4px";
+    };
+    readonly '&::-webkit-scrollbar-track': {
+        readonly background: "transparent";
+    };
+    readonly '&::-webkit-scrollbar-thumb': {
+        readonly borderRadius: "2px";
+        readonly backgroundColor: string;
+    };
+    readonly '&::-webkit-scrollbar-thumb:hover': {
+        readonly backgroundColor: string;
+    };
+};
+export declare const tableFrame: (framed?: boolean, borderRadius?: number | string) => {
+    borderRadius: string;
+    boxShadow?: undefined;
+    border?: undefined;
+    '& table'?: undefined;
+    '& tbody:last-child tr:last-of-type td'?: undefined;
+    '& tfoot td'?: undefined;
+} | {
+    boxShadow: string;
+    border: string;
+    borderRadius: string;
+    '& table': {
+        border: string;
+    };
+    '& tbody:last-child tr:last-of-type td': {
+        borderBottom: string;
+    };
+    '& tfoot td': {
+        borderBottom: string;
+    };
+} | undefined;
+export declare const truncateStyle: (truncate?: Truncate) => CSSProperties | undefined;

package/core/data-display/table/styles.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.truncateStyle = exports.tableFrame = exports.SCROLLBAR = void 0;
+var _styles = require("@mui/material/styles");
+var _theme = require("../../../theme");
+var gray = _theme.theme.colors.gray;
+var DEFAULT_RADIUS = 12;
+var DEFAULT_MAX_WIDTH = 150;
+// sx reads a bare number as a theme multiple, so pin the unit
+var toPx = function toPx(value) {
+  return typeof value === 'number' ? "".concat(value, "px") : value;
+};
+var SCROLLBAR = exports.SCROLLBAR = {
+  scrollbarWidth: 'thin',
+  scrollbarColor: "".concat((0, _styles.alpha)(gray[900], 0.2), " transparent"),
+  '&::-webkit-scrollbar': {
+    width: '4px',
+    height: '4px'
+  },
+  '&::-webkit-scrollbar-track': {
+    background: 'transparent'
+  },
+  '&::-webkit-scrollbar-thumb': {
+    borderRadius: '2px',
+    backgroundColor: (0, _styles.alpha)(gray[900], 0.2)
+  },
+  '&::-webkit-scrollbar-thumb:hover': {
+    backgroundColor: (0, _styles.alpha)(gray[900], 0.35)
+  }
+};
+var tableFrame = exports.tableFrame = function tableFrame(framed, borderRadius) {
+  if (!framed) {
+    return borderRadius === undefined ? undefined : {
+      borderRadius: toPx(borderRadius)
+    };
+  }
+  return {
+    boxShadow: 'none',
+    border: "1px solid ".concat(gray[300]),
+    borderRadius: toPx(borderRadius !== null && borderRadius !== void 0 ? borderRadius : DEFAULT_RADIUS),
+    '& table': {
+      border: 'none !important'
+    },
+    // a footer below the body means the frame no longer closes the last
+    // row, so it only drops that border while the body really is last
+    '& tbody:last-child tr:last-of-type td': {
+      borderBottom: 'none'
+    },
+    // the frame draws the bottom edge, so the footer must not draw one too
+    '& tfoot td': {
+      borderBottom: 'none'
+    }
+  };
+};
+var truncateStyle = exports.truncateStyle = function truncateStyle(truncate) {
+  if (!truncate) {
+    return undefined;
+  }
+  return {
+    maxWidth: toPx(truncate === true ? DEFAULT_MAX_WIDTH : truncate),
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  };
+};

package/core/data-display/table/table-pagination.js

@@ -42,7 +42,7 @@ var TablePagination = function TablePagination(_ref) {
       padding: padding
     }, style),
     sx: {
-      borderBottom: "1px solid ".concat(gray[200], " !important;")
+      borderBottom: "1px solid ".concat(gray[200])
     },
     onPageChange: onPageChange,
     onRowsPerPageChange: onRowsPerPageChange

package/core/data-display/table-interactive/TableInteractive.d.ts

@@ -12,6 +12,10 @@ export interface ITableInteractive extends Omit<TableProps, 'children'> {
     total?: number;
     fixed?: boolean;
     active?: string;
+    maxHeight?: number | string;
+    cellPadding?: number | string;
+    framed?: boolean;
+    borderRadius?: number | string;
     headers: {
         name: string;
         label: string;

package/core/data-display/table-interactive/TableInteractive.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _table = _interopRequireDefault(require("../table"));
+var _styles = require("../table/styles");
 var _tableBody = _interopRequireDefault(require("../table/table-body"));
 var _tableFooter = _interopRequireDefault(require("../table/table-footer"));
 var _tablePagination = _interopRequireDefault(require("../table/table-pagination"));
@@ -21,6 +22,15 @@ var _theme = require("../../../theme");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var gray = _theme.theme.colors.gray;
+
+// body cells are rendered by the consumer, so they default to MUI's padding;
+// match TableCellInteractive's head instead, or the columns sit 8px apart.
+// scoped to tbody so the pagination cell in tfoot keeps its own height
+var BODY_CELL_SX = {
+  '&& tbody td': {
+    padding: '16px 8px'
+  }
+};
 var Direction = exports.Direction = /*#__PURE__*/function (Direction) {
   Direction["ASCENDENT"] = "asc";
   Direction["DESCENDENT"] = "desc";
@@ -42,9 +52,11 @@ var TableInteractive = exports.TableInteractive = function TableInteractive(prop
     headerActions: props.headerActions,
     handleOpen: props.handleOpen
   }), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
-    sx: {
+    sx: _objectSpread(_objectSpread(_objectSpread({
       overflow: 'auto'
-    }
+    }, _styles.SCROLLBAR), props.maxHeight ? {
+      maxHeight: props.maxHeight
+    } : undefined), (0, _styles.tableFrame)(props.framed, props.borderRadius))
   }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
     sx: {
       width: '100%',
@@ -55,16 +67,19 @@ var TableInteractive = exports.TableInteractive = function TableInteractive(prop
     name: props.name,
     id: 'list-' + props.name,
     className: props.className,
+    size: props.size,
+    stickyHeader: props.stickyHeader,
     style: {
       border: props.isInteractive ? 'none !important' : "1px solid ".concat(gray[300])
     },
-    sx: _objectSpread({}, props.sx)
+    sx: _objectSpread(_objectSpread({}, props.size !== 'small' && BODY_CELL_SX), props.sx)
   }, /*#__PURE__*/_react["default"].createElement(_TableInteractiveHead.TableInteractiveHead, {
     fixed: props.fixed,
     active: props.active,
     headers: props.headers,
     children: props.children,
     direction: props.direction,
+    cellPadding: props.cellPadding,
     isCollapsible: props.isCollapsible,
     visibleColumns: props.visibleColumns || [],
     onSort: props.onSort

package/core/data-display/table-interactive/TableInteractiveHead.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type ITableInteractive } from './TableInteractive';
-export type ITableInteractiveHead = Pick<ITableInteractive, 'fixed' | 'headers' | 'visibleColumns' | 'onSort' | 'active' | 'direction' | 'children' | 'isCollapsible'>;
+export type ITableInteractiveHead = Pick<ITableInteractive, 'fixed' | 'headers' | 'cellPadding' | 'visibleColumns' | 'onSort' | 'active' | 'direction' | 'children' | 'isCollapsible'>;
 export declare const TableInteractiveHead: (props: ITableInteractiveHead) => React.JSX.Element;

package/core/data-display/table-interactive/TableInteractiveHead.js

@@ -21,7 +21,7 @@ var TableInteractiveHead = exports.TableInteractiveHead = function TableInteract
     direction: props.direction,
     onSort: props.onSort && handleSort
   }, /*#__PURE__*/_react["default"].createElement(_tableRow["default"], null, props.headers.map(function (header) {
-    return (0, _utils.generateHeader)(header, visibleColumns, header.sortable, props.fixed);
+    return (0, _utils.generateHeader)(header, visibleColumns, header.sortable, props.fixed, props.cellPadding);
   }), (props.children || props.isCollapsible) && /*#__PURE__*/_react["default"].createElement(_tableCell["default"], {
     sortable: false,
     sx: {

package/core/data-display/table-interactive/TableInteractiveHeader.js

@@ -12,6 +12,7 @@ var _styles = require("./styles");
 var TableInteractiveHeader = exports.TableInteractiveHeader = function TableInteractiveHeader(props) {
   return /*#__PURE__*/_react["default"].createElement(_styles.TableHeaderContent, null, /*#__PURE__*/_react["default"].createElement("div", null, props.headerActions), /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
     padding: "4px 6px",
+    "aria-label": "Prefer\xEAncias",
     onClick: props.handleOpen
   }, /*#__PURE__*/_react["default"].createElement(_mui.IconSettings, {
     color: "primary"

package/core/data-display/table-interactive/index.d.ts

@@ -1,3 +1,5 @@
 export { TableInteractive } from './TableInteractive';
 export { getDefaultColumns, getInitialColumns, setVisibleColumns, generateHeader, getVisibleColumns, getOrderedVisibleColumns } from './utils';
 export type { ITableInteractive } from './TableInteractive';
+export { truncateStyle } from '../table/styles';
+export type { Truncate } from '../table/styles';

package/core/data-display/table-interactive/index.js

@@ -45,5 +45,12 @@ Object.defineProperty(exports, "setVisibleColumns", {
     return _utils.setVisibleColumns;
   }
 });
+Object.defineProperty(exports, "truncateStyle", {
+  enumerable: true,
+  get: function get() {
+    return _styles.truncateStyle;
+  }
+});
 var _TableInteractive = require("./TableInteractive");
-var _utils = require("./utils");
+var _utils = require("./utils");
+var _styles = require("../table/styles");

package/core/data-display/table-interactive/styles.js

@@ -12,7 +12,7 @@ var _theme = require("../../../theme");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var gray = _theme.theme.colors.gray;
 var ContentWrapper = exports.ContentWrapper = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    border-bottom: 2px solid ", ";\n"])), gray[300]);
-var TableHeaderContent = exports.TableHeaderContent = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    justify-content: flex-end;\n    gap: 4px;\n    margin: 0 0 8px 0;\n\n    & > div {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n        gap: 8px;\n    }\n"])));
+var TableHeaderContent = exports.TableHeaderContent = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    justify-content: flex-end;\n    gap: 4px;\n    margin: 0 0 8px 0;\n\n    & > div {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n        gap: 6px;\n    }\n"])));
 var ActionsWrapper = exports.ActionsWrapper = _styled["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n"])));
 var TableCellInteractive = exports.TableCellInteractive = (0, _styled["default"])(_tableCell["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        min-width: 60px;\n        max-width: ", ";\n        padding: 16px 8px;\n    }\n"])), function (props) {
   return props.fixed ? props.width : 'none';

package/core/data-display/table-interactive/table-interactive.stories.d.ts

@@ -4,3 +4,5 @@ declare const meta: Meta<typeof TableInteractive>;
 export default meta;
 type Story = StoryObj<typeof TableInteractive>;
 export declare const interactiveTable: Story;
+export declare const framed: Story;
+export declare const stickyHeader: Story;

package/core/data-display/table-interactive/utils.d.ts

@@ -11,7 +11,7 @@ export declare const getInitialColumns: (columns: {
     show: boolean;
 }[], key: string) => string[];
 export declare const setVisibleColumns: (columns: string[], key: string) => void;
-export declare const generateHeader: (header: ITableInteractive["headers"][number], visibleColumns?: string[] | undefined, sortable?: boolean, fixed?: boolean) => React.JSX.Element | null;
+export declare const generateHeader: (header: ITableInteractive["headers"][number], visibleColumns?: string[] | undefined, sortable?: boolean, fixed?: boolean, cellPadding?: number | string) => React.JSX.Element | null;
 export declare const getVisibleColumns: (headers: {
     name: string;
     label: string;

package/core/data-display/table-interactive/utils.js

@@ -36,12 +36,13 @@ var setVisibleColumns = exports.setVisibleColumns = function setVisibleColumns(c
   parsed[key] = columns;
   localStorage.setItem(STORAGE_KEY, JSON.stringify(parsed));
 };
-var generateHeader = exports.generateHeader = function generateHeader(header, visibleColumns, sortable, fixed) {
+var generateHeader = exports.generateHeader = function generateHeader(header, visibleColumns, sortable, fixed, cellPadding) {
   if (!(visibleColumns !== null && visibleColumns !== void 0 && visibleColumns.includes(header.name))) return null;
   return /*#__PURE__*/_react["default"].createElement(_styles.TableCellInteractive, {
     name: header.name,
     sortable: sortable,
     width: header.width,
+    padding: cellPadding,
     key: header.name + '-header',
     fixed: fixed ? 'fixed' : undefined
   }, header.label);

package/core/data-display/typography/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { DefaultProps } from '../../types';
 import type { TypographyProps } from '@mui/material/Typography';
-declare const Typography: ({ children, margin, padding, style, variant, ...otherProps }: TypographyProps & DefaultProps) => React.JSX.Element;
+export type ITypographyProps = TypographyProps & DefaultProps;
+declare const Typography: ({ children, margin, padding, style, sx, variant, ...otherProps }: ITypographyProps) => React.JSX.Element;
 export default Typography;

package/core/data-display/typography/index.js

@@ -7,23 +7,39 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _styles = require("@mui/material/styles");
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _excluded = ["children", "margin", "padding", "style", "variant"];
+var _typography = require("../../../theme/typography");
+var _excluded = ["children", "margin", "padding", "style", "sx", "variant"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var isTokenVariant = function isTokenVariant(variant) {
+  return variant in _typography.typographyVariants;
+};
 var Typography = function Typography(_ref) {
   var children = _ref.children,
     margin = _ref.margin,
     padding = _ref.padding,
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,
+    sx = _ref.sx,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'body2' : _ref$variant,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({}, otherProps, {
+  var _useTheme = (0, _styles.useTheme)(),
+    typography = _useTheme.typography;
+
+  // NG tokens come from the theme; keep them working when the app renders
+  // outside `ThemeProviderFlipper` or replaces the theme options
+  var fallback = isTokenVariant(variant) && !(variant in typography) ? _typography.typographyVariants[variant] : undefined;
+  return /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({}, fallback ? {
+    variantMapping: _typography.variantMapping
+  } : {}, otherProps, {
     variant: variant,
+    sx: fallback ? [fallback].concat((0, _toConsumableArray2["default"])(Array.isArray(sx) ? sx : [sx])) : sx,
     style: _objectSpread({
       margin: margin,
       padding: padding

package/core/data-display/view-mode/styles.d.ts

@@ -1,6 +1,6 @@
 export declare const ButtonFilterGroup: import("@emotion/styled").StyledComponent<import("@mui/material/ButtonGroup").ButtonGroupOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "color" | "disabled" | "size" | "children" | "style" | "className" | "classes" | "disableRipple" | "sx" | "disableFocusRipple" | "orientation" | "variant" | "disableElevation" | "fullWidth"> & {
+}, "children" | "color" | "className" | "style" | "classes" | "sx" | "variant" | "disabled" | "disableRipple" | "disableElevation" | "disableFocusRipple" | "fullWidth" | "size" | "orientation"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const WrapperEnd: import("@emotion/styled").StyledComponent<{

package/core/feedback/dialog-v2/dialog.js

@@ -15,16 +15,17 @@ var _excluded = ["open", "title", "titleAction", "text", "primaryButtonColor", "
 var _theme$colors = _theme.theme.colors,
   action = _theme$colors.action,
   primary = _theme$colors.primary;
+// The dialog keeps its own palette: here `secondary` is the cancel color,
+// not the NG green
 var themeDialog = {
+  typography: _theme.muiThemeOptions.typography,
+  components: _theme.muiThemeOptions.components,
   palette: {
     primary: {
       main: primary.main
     },
     secondary: {
       main: action.cancel
-    },
-    typography: {
-      useNextVariants: true
     }
   }
 };
@@ -64,14 +65,14 @@ var DialogV2 = function DialogV2(props) {
     PaperProps: PaperProps,
     actions: !omitActionButtons && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, haveSecondaryButton && /*#__PURE__*/_react["default"].createElement(_button["default"], {
       name: secondaryButtonName || 'secondary-button',
-      margin: "12px 6px",
+      margin: "8px 4px 12px 4px",
       onClick: secondaryButtonAction
     }, secondaryButtonText), /*#__PURE__*/_react["default"].createElement(_button["default"], {
       name: primaryButtonName || 'primary-button',
       color: primaryButtonColor,
       style: primaryButtonStyle,
       variant: "contained",
-      margin: "12px 6px",
+      margin: "8px 12px 12px 4px",
       onClick: primaryButtonAction
     }, primaryButtonText)),
     onClose: onClose

package/core/feedback/nothing-found/index.d.ts

@@ -1,6 +1,13 @@
 import React from 'react';
 import type { ReactNode } from 'react';
-export interface IProps {
+import type { ITypographyProps } from '@/core/data-display/typography';
+/**
+ * Every `Typography` prop is accepted and merged over the message defaults —
+ * `variant='h5'`, `align='center'`, `color='textSecondary'`. `variant` also
+ * sets the heading level, so `{ component: 'h2' }` keeps the `h5` type scale
+ * on an `<h2>` tag.
+ */
+export interface IProps extends Partial<ITypographyProps> {
     searchText?: string;
     customText?: ReactNode;
     buttonLabel?: string;

package/core/feedback/nothing-found/index.js

@@ -10,7 +10,14 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _typography = _interopRequireDefault(require("../../data-display/typography"));
 var _excluded = ["buttonLabel", "readonly"],
-  _excluded2 = ["customText", "searchText", "show"];
+  _excluded2 = ["customText", "searchText", "show", "variant"];
+/**
+ * Every `Typography` prop is accepted and merged over the message defaults —
+ * `variant='h5'`, `align='center'`, `color='textSecondary'`. `variant` also
+ * sets the heading level, so `{ component: 'h2' }` keeps the `h5` type scale
+ * on an `<h2>` tag.
+ */
+
 var NothingFound = function NothingFound(props) {
   var buttonLabel = props.buttonLabel,
     readonly = props.readonly,
@@ -22,10 +29,12 @@ var NothingFound = function NothingFound(props) {
     _rest$searchText = rest.searchText,
     searchText = _rest$searchText === void 0 ? '' : _rest$searchText,
     show = rest.show,
+    _rest$variant = rest.variant,
+    variant = _rest$variant === void 0 ? 'h5' : _rest$variant,
     otherProps = (0, _objectWithoutProperties2["default"])(rest, _excluded2);
   return show ? /*#__PURE__*/_react["default"].createElement(_typography["default"], (0, _extends2["default"])({
     flex: 1,
-    variant: "h5",
+    variant: variant,
     align: "center",
     color: "textSecondary",
     padding: "48px 0"

package/core/feedback/nothing-found/nothing-found.spec.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/core/feedback/progress/index.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
+import type { ReactNode } from 'react';
 import type { DefaultProps } from '../../types';
+import type { SxProps, Theme } from '@mui/material/styles';
 export interface ILinear {
     color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'inherit';
     variant?: 'buffer' | 'determinate' | 'indeterminate' | 'query';
@@ -7,20 +9,58 @@ export interface ILinear {
     primaryColor?: string;
     barPrimaryColor?: string;
     barSecondaryColor?: string;
+    /**
+     * Height of the linear bar. The fill follows it on its own, so the
+     * inner bars need no styling of their own. Default: `4`.
+     */
+    thickness?: number | string;
+    /**
+     * Corner radius of the linear bar, as CSS — `'3px'`, `'50%'`. The fill
+     * is clipped by it on its own, since the bar hides its own overflow.
+     * Default: square corners.
+     */
+    borderRadius?: string;
 }
 export interface ICircular {
     size?: string | number;
-    variant?: 'determinate' | 'indeterminate';
+    /**
+     * `buffer` and `query` are implemented by the linear bar alone. They are
+     * declared here only so the intersection with `ILinear` does not collapse
+     * to the smaller set, which made them unusable on either mode.
+     */
+    variant?: 'buffer' | 'determinate' | 'indeterminate' | 'query';
     color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'inherit';
 }
 export interface ProgressProps extends DefaultProps {
     value?: number;
     linear?: boolean;
+    /**
+     * Inline content rendered next to the progress — beside the linear bar,
+     * and inside the ring of a circular one, which falls back to beside it
+     * below 40px. It also names the progressbar, so no `ariaLabel` is needed
+     * alongside it. Block elements are unsupported: it lands inside a
+     * `Typography`.
+     */
+    label?: ReactNode;
+    /**
+     * Accessible name, required whenever there is no `label` — a progressbar
+     * with no name announces a bare percentage. Overrides `label` as the name.
+     */
+    ariaLabel?: string;
+    /**
+     * Where a circular `label` goes. Default: `'inside'` from 40px up and
+     * `'beside'` below it — informing it skips that measurement, which
+     * cannot read a `size` in `rem` or `em`. The linear bar ignores it and
+     * always renders the label beside itself.
+     */
+    labelPosition?: 'inside' | 'beside';
+    /** Merged over the styles the color props generate, never replacing them. */
+    sx?: SxProps<Theme>;
 }
 export interface IColors {
     primaryColor?: string;
     barPrimaryColor?: string;
     barSecondaryColor?: string;
 }
-declare const Progress: ({ linear, style, margin, padding, valueBuffer, primaryColor, barPrimaryColor, barSecondaryColor, ...otherProps }: ProgressProps & ICircular & ILinear) => React.JSX.Element;
+declare const Progress: ({ sx, label, linear, ariaLabel, thickness, borderRadius, labelPosition, style, margin, padding, valueBuffer, primaryColor, barPrimaryColor, barSecondaryColor, ...otherProps }: ProgressProps & ICircular & ILinear) => React.JSX.Element;
 export default Progress;