flipper-ui 0.35.15 → 0.36.1

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

@@ -3,5 +3,8 @@ interface IWrapper {
     margin?: number | string;
     align?: 'flex-end' | 'flex-start' | 'center';
 }
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IWrapper>> & string;
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & IWrapper, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

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

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Wrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _templateObject;
-var Wrapper = exports.Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    grid-area: actions;\n    display: flex;\n    flex: 1;\n    justify-content: ", ";\n    padding: ", ";\n    margin: ", ";\n"])), function (props) {
+var Wrapper = exports.Wrapper = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    grid-area: actions;\n    display: flex;\n    flex: 1;\n    justify-content: ", ";\n    padding: ", ";\n    margin: ", ";\n"])), function (props) {
   return props.align;
 }, function (props) {
   return props.padding;

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

@@ -1,6 +1,10 @@
-export declare const AdvertiseTypography: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+export declare const AdvertiseTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | 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<HTMLSpanElement> | null | undefined;
 }, "color" | "children" | "padding" | "margin" | "style" | "className" | "classes" | "sx" | "p" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "marginBlock" | "marginInline" | "overflow" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     component?: React.ElementType;
-} & import("../../types").DefaultProps, never>> & string & Omit<({ children, margin, padding, style, variant, ...otherProps }: import("@mui/material").TypographyProps & import("../../types").DefaultProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const AdvertiseContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@/core/surfaces/paper").IPaperProps, never>> & string & Omit<({ children, style, padding, margin, ...otherProps }: import("@/core/surfaces/paper").IPaperProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+} & import("../../types").DefaultProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const AdvertiseContainer: import("@emotion/styled").StyledComponent<import("@/core/surfaces/paper").IPaperProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

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

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AdvertiseTypography = exports.AdvertiseContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _typography = _interopRequireDefault(require("../typography"));
 var _paper = _interopRequireDefault(require("../../surfaces/paper"));
 var _theme = require("../../../theme");
 var _templateObject, _templateObject2;
 var gray = _theme.theme.colors.gray;
-var AdvertiseTypography = exports.AdvertiseTypography = (0, _styledComponents["default"])(_typography["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        border-left: 1px solid ", ";\n    }\n"])), gray[400]);
-var AdvertiseContainer = exports.AdvertiseContainer = (0, _styledComponents["default"])(_paper["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: column;\n"])));
+var AdvertiseTypography = exports.AdvertiseTypography = (0, _styled["default"])(_typography["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        border-left: 1px solid ", ";\n    }\n"])), gray[400]);
+var AdvertiseContainer = exports.AdvertiseContainer = (0, _styled["default"])(_paper["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: column;\n"])));

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

@@ -1,3 +1,9 @@
 import type { LineProps } from '.';
-export declare const Line: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, LineProps>> & string;
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Line: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & LineProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Line = exports.Container = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _theme = require("../../../theme");
 var _templateObject, _templateObject2;
 var gray = _theme.theme.colors.gray;
-var Line = exports.Line = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    height: 1px;\n    flex: 1;\n    min-height: 0.75px;\n    max-height: 3px;\n    align-self: center;\n    background-color: ", ";\n"])), function (props) {
+var Line = exports.Line = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    height: 1px;\n    flex: 1;\n    min-height: 0.75px;\n    max-height: 3px;\n    align-self: center;\n    background-color: ", ";\n"])), function (props) {
   return props.primary ? gray[500] : gray[300];
 });
-var Container = exports.Container = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n"])));
+var Container = exports.Container = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n"])));

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

@@ -1,7 +1,16 @@
-import MuiTableCell from '@mui/material/TableCell';
-export declare const FieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const PaginationWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TableCellRows: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@mui/material/TableCell").TableCellProps, never>> & string & Omit<typeof MuiTableCell, keyof import("react").Component<any, {}, any>>;
-export declare const RowTable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@mui/material/TableRow").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
+export declare const FieldWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const PaginationWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TableCellRows: import("@emotion/styled").StyledComponent<import("@mui/material/TableCell").TableCellProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const RowTable: import("@emotion/styled").StyledComponent<import("@mui/material/TableRow").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
     ref?: ((instance: HTMLTableRowElement | 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<HTMLTableRowElement> | null | undefined;
-}, "children" | "style" | "className" | "classes" | "sx" | "selected" | "hover">, never>> & string & Omit<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material/TableRow").TableRowTypeMap<{}, "tr">>, keyof import("react").Component<any, {}, any>>;
+}, "children" | "style" | "className" | "classes" | "sx" | "selected" | "hover"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

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

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TableCellRows = exports.RowTable = exports.PaginationWrapper = exports.FieldWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _TableCell = _interopRequireDefault(require("@mui/material/TableCell"));
 var _TableRow = _interopRequireDefault(require("@mui/material/TableRow"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var FieldWrapper = exports.FieldWrapper = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
-var PaginationWrapper = exports.PaginationWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    margin-left: 12px;\n"])));
-var TableCellRows = exports.TableCellRows = (0, _styledComponents["default"])(_TableCell["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        width: 400px;\n        height: 60px;\n        padding: 0 10px;\n    }\n"])));
-var RowTable = exports.RowTable = (0, _styledComponents["default"])(_TableRow["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    cursor: pointer;\n\n    &:hover {\n        background: -moz-linear-gradient(\n            left,\n            rgba(189, 189, 189, 0) 0%,\n            rgba(189, 189, 189, 1) 100%\n        );\n        background: -webkit-linear-gradient(\n            left,\n            rgba(189, 189, 189, 0) 0%,\n            rgba(189, 189, 189, 1) 100%\n        );\n        background: linear-gradient(\n            to right,\n            rgba(189, 189, 189, 0) 0%,\n            rgba(189, 189, 189, 1) 100%\n        );\n    }\n\n    &.no-hover {\n        background: none;\n    }\n"])));
+var FieldWrapper = exports.FieldWrapper = _styled["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
+var PaginationWrapper = exports.PaginationWrapper = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    margin-left: 12px;\n"])));
+var TableCellRows = exports.TableCellRows = (0, _styled["default"])(_TableCell["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        width: 400px;\n        height: 60px;\n        padding: 0 10px;\n    }\n"])));
+var RowTable = exports.RowTable = (0, _styled["default"])(_TableRow["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    cursor: pointer;\n\n    &:hover {\n        background: -moz-linear-gradient(\n            left,\n            rgba(189, 189, 189, 0) 0%,\n            rgba(189, 189, 189, 1) 100%\n        );\n        background: -webkit-linear-gradient(\n            left,\n            rgba(189, 189, 189, 0) 0%,\n            rgba(189, 189, 189, 1) 100%\n        );\n        background: linear-gradient(\n            to right,\n            rgba(189, 189, 189, 0) 0%,\n            rgba(189, 189, 189, 1) 100%\n        );\n    }\n\n    &.no-hover {\n        background: none;\n    }\n"])));

package/core/data-display/password-visibility/styles.d.ts

@@ -1 +1,3 @@
-export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@/core/inputs/icon-button").IconButtonProps, never>> & string & Omit<({ children, padding, margin, size, style, ...otherProps }: import("@/core/inputs/icon-button").IconButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@/core/inputs/icon-button").IconButtonProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/core/data-display/password-visibility/styles.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledButton = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _iconButton = _interopRequireDefault(require("../../inputs/icon-button"));
 var _templateObject;
-var StyledButton = exports.StyledButton = (0, _styledComponents["default"])(_iconButton["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    width: 36px !important;\n    height: 36px !important;\n"])));
+var StyledButton = exports.StyledButton = (0, _styled["default"])(_iconButton["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    width: 36px !important;\n    height: 36px !important;\n"])));

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

@@ -29,9 +29,7 @@ var TableCell = function TableCell(_ref) {
     active = _useContext.active,
     direction = _useContext.direction;
   var handleSort = function handleSort() {
-    if (onSort) {
-      onSort(otherProps.name || '');
-    }
+    onSort === null || onSort === void 0 || onSort(otherProps.name || '');
   };
   return /*#__PURE__*/_react["default"].createElement(_TableCell["default"], (0, _extends2["default"])({}, otherProps, {
     style: _objectSpread({

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ITableInteractive } from './TableInteractive';
+export type ITableDialogPreferences = Pick<ITableInteractive, 'open' | 'headers' | 'columnsTemporary' | 'onCancel' | 'onConfirm' | 'setColumnsTemporary'>;
+export declare const TableDialogPreferences: ({ open, headers, columnsTemporary, onCancel, onConfirm, setColumnsTemporary }: ITableDialogPreferences) => React.JSX.Element;

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

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableDialogPreferences = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireDefault(require("react"));
+var _Switch = _interopRequireDefault(require("@mui/material/Switch"));
+var _dialog = _interopRequireDefault(require("../../feedback/dialog"));
+var _actions = _interopRequireDefault(require("../actions"));
+var _typography = _interopRequireDefault(require("../typography"));
+var _styles = require("./styles");
+var TableDialogPreferences = exports.TableDialogPreferences = function TableDialogPreferences(_ref) {
+  var _ref$open = _ref.open,
+    open = _ref$open === void 0 ? false : _ref$open,
+    headers = _ref.headers,
+    _ref$columnsTemporary = _ref.columnsTemporary,
+    columnsTemporary = _ref$columnsTemporary === void 0 ? [] : _ref$columnsTemporary,
+    onCancel = _ref.onCancel,
+    onConfirm = _ref.onConfirm,
+    setColumnsTemporary = _ref.setColumnsTemporary;
+  var handleChangeTemporaryColumns = function handleChangeTemporaryColumns(name) {
+    setColumnsTemporary === null || setColumnsTemporary === void 0 || setColumnsTemporary(function (prev) {
+      return prev.includes(name) ? prev.filter(function (col) {
+        return col !== name;
+      }) : [].concat((0, _toConsumableArray2["default"])(prev), [name]);
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement(_dialog["default"], {
+    fullWidth: true,
+    open: open,
+    maxWidth: "sm",
+    title: "Prefer\xEAncias",
+    content: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_typography["default"], {
+      variant: "body1",
+      fontWeight: 500,
+      margin: "0 0 16px 0"
+    }, "Selecione o conte\xFAdo a ser exibido"), headers.map(function (it) {
+      return /*#__PURE__*/_react["default"].createElement(_styles.ContentWrapper, {
+        key: it.name
+      }, /*#__PURE__*/_react["default"].createElement(_typography["default"], null, it.label), /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+        color: "primary",
+        name: it.name,
+        slotProps: {
+          input: {
+            'aria-label': it.label
+          }
+        },
+        checked: columnsTemporary.includes(it.name),
+        onChange: function onChange() {
+          return handleChangeTemporaryColumns(it.name);
+        }
+      }));
+    })),
+    actions: /*#__PURE__*/_react["default"].createElement(_actions["default"], {
+      margin: "0 16px 16px 16px",
+      onCancel: onCancel,
+      onConfirm: onConfirm !== null && onConfirm !== void 0 ? onConfirm : function () {}
+    })
+  });
+};

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { Dispatch, ReactNode, SetStateAction } from 'react';
+export declare enum Direction {
+    ASCENDENT = "asc",
+    DESCENDENT = "desc"
+}
+export interface ITableInteractive {
+    name: string;
+    page?: number;
+    open?: boolean;
+    total?: number;
+    active?: string;
+    headers: {
+        name: string;
+        label: string;
+    }[];
+    paginated?: boolean;
+    rowsPerPage?: number;
+    direction?: Direction;
+    isInteractive?: boolean;
+    isCollapsible?: boolean;
+    visibleColumns?: string[];
+    columnsTemporary?: string[];
+    valuesInvoices?: Record<string, unknown>[];
+    headerActions?: React.JSX.Element | undefined;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    handleOpen?: () => void;
+    onSort?(id: string): void;
+    setPage?: Dispatch<SetStateAction<number>>;
+    setRowsPerPage?: Dispatch<SetStateAction<number>>;
+    children?: (item: Record<string, unknown>) => ReactNode;
+    setColumnsTemporary?: (value: SetStateAction<string[]>) => void;
+    rowsContent: () => React.JSX.Element | React.JSX.Element[] | undefined;
+}
+export declare const TableInteractive: (props: ITableInteractive) => React.JSX.Element;

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

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableInteractive = exports.Direction = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _table = _interopRequireDefault(require("../table"));
+var _tableBody = _interopRequireDefault(require("../table/table-body"));
+var _tableFooter = _interopRequireDefault(require("../table/table-footer"));
+var _tablePagination = _interopRequireDefault(require("../table/table-pagination"));
+var _tableRow = _interopRequireDefault(require("../table/table-row"));
+var _TableDialogPreferences = require("./TableDialogPreferences");
+var _TableInteractiveHead = require("./TableInteractiveHead");
+var _TableInteractiveHeader = require("./TableInteractiveHeader");
+var _TablePaginationActions = require("./TablePaginationActions");
+var Direction = exports.Direction = /*#__PURE__*/function (Direction) {
+  Direction["ASCENDENT"] = "asc";
+  Direction["DESCENDENT"] = "desc";
+  return Direction;
+}({});
+var TableInteractive = exports.TableInteractive = function TableInteractive(props) {
+  var _props$rowsPerPage, _props$page, _props$rowsPerPage2;
+  var handlePageCount = function handlePageCount() {
+    if (props.valuesInvoices) {
+      return Number(props.valuesInvoices.length);
+    }
+    return Number(props.total) || 0;
+  };
+  var count = handlePageCount();
+  var rowsPerPage = (_props$rowsPerPage = props.rowsPerPage) !== null && _props$rowsPerPage !== void 0 ? _props$rowsPerPage : 10;
+  var maxPage = Math.max(0, Math.ceil(count / rowsPerPage) - 1);
+  var page = Math.min((_props$page = props.page) !== null && _props$page !== void 0 ? _props$page : 0, maxPage);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, props.isInteractive && /*#__PURE__*/_react["default"].createElement(_TableInteractiveHeader.TableInteractiveHeader, {
+    headerActions: props.headerActions,
+    handleOpen: props.handleOpen
+  }), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    sx: {
+      overflow: 'auto'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    sx: {
+      width: '100%',
+      display: 'table',
+      tableLayout: 'fixed'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_table["default"], {
+    name: props.name,
+    id: 'list-' + props.name
+  }, /*#__PURE__*/_react["default"].createElement(_TableInteractiveHead.TableInteractiveHead, {
+    active: props.active,
+    headers: props.headers,
+    children: props.children,
+    direction: props.direction,
+    isCollapsible: props.isCollapsible,
+    visibleColumns: props.visibleColumns || [],
+    onSort: props.onSort
+  }), /*#__PURE__*/_react["default"].createElement(_tableBody["default"], null, props.rowsContent()), props.paginated && /*#__PURE__*/_react["default"].createElement(_tableFooter["default"], null, /*#__PURE__*/_react["default"].createElement(_tableRow["default"], null, /*#__PURE__*/_react["default"].createElement(_tablePagination["default"], {
+    page: page,
+    count: count,
+    rowsPerPage: (_props$rowsPerPage2 = props.rowsPerPage) !== null && _props$rowsPerPage2 !== void 0 ? _props$rowsPerPage2 : 10,
+    rowsPerPageOptions: [10, 25, 50, 100],
+    ActionsComponent: _TablePaginationActions.TablePaginationActions,
+    onPageChange: function onPageChange(_, page) {
+      var _props$setPage;
+      (_props$setPage = props.setPage) === null || _props$setPage === void 0 || _props$setPage.call(props, page);
+    },
+    onRowsPerPageChange: function onRowsPerPageChange(event) {
+      var _props$setPage2, _props$setRowsPerPage;
+      (_props$setPage2 = props.setPage) === null || _props$setPage2 === void 0 || _props$setPage2.call(props, 0);
+      (_props$setRowsPerPage = props.setRowsPerPage) === null || _props$setRowsPerPage === void 0 || _props$setRowsPerPage.call(props, parseInt(event.target.value, 10));
+    }
+  })))))), /*#__PURE__*/_react["default"].createElement(_TableDialogPreferences.TableDialogPreferences, {
+    open: props.open,
+    headers: props.headers,
+    columnsTemporary: props.columnsTemporary,
+    setColumnsTemporary: props.setColumnsTemporary,
+    onCancel: props.onCancel,
+    onConfirm: props.onConfirm
+  }));
+};

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

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

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

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableInteractiveHead = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _tableCell = _interopRequireDefault(require("../table/table-cell"));
+var _tableHead = _interopRequireDefault(require("../table/table-head"));
+var _tableRow = _interopRequireDefault(require("../table/table-row"));
+var _utils = require("./utils");
+var TableInteractiveHead = exports.TableInteractiveHead = function TableInteractiveHead(props) {
+  var visibleColumns = (0, _utils.getVisibleColumns)(props.headers, props.visibleColumns);
+  var handleSort = function handleSort(name) {
+    var _props$onSort;
+    (_props$onSort = props.onSort) === null || _props$onSort === void 0 || _props$onSort.call(props, name);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_tableHead["default"], {
+    active: props.active,
+    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);
+  }), (props.children || props.isCollapsible) && /*#__PURE__*/_react["default"].createElement(_tableCell["default"], null)));
+};

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ITableInteractive } from './TableInteractive';
+export type ITableInteractiveHeader = Pick<ITableInteractive, 'handleOpen' | 'headerActions'>;
+export declare const TableInteractiveHeader: (props: ITableInteractiveHeader) => React.JSX.Element;

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

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableInteractiveHeader = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _iconButton = _interopRequireDefault(require("../../inputs/icon-button"));
+var _mui = require("../../../icons/mui");
+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",
+    onClick: props.handleOpen
+  }, /*#__PURE__*/_react["default"].createElement(_mui.IconSettings, {
+    color: "primary"
+  })));
+};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { MouseEvent } from 'react';
+interface TablePaginationActionsProps {
+    page: number;
+    count: number;
+    rowsPerPage: number;
+    onPageChange: (event: MouseEvent<HTMLButtonElement>, newPage: number) => void;
+}
+export declare const TablePaginationActions: (props: TablePaginationActionsProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TablePaginationActions = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _iconButton = _interopRequireDefault(require("../../inputs/icon-button"));
+var _mui = require("../../../icons/mui");
+var TablePaginationActions = exports.TablePaginationActions = function TablePaginationActions(props) {
+  var count = props.count,
+    page = props.page,
+    rowsPerPage = props.rowsPerPage,
+    onPageChange = props.onPageChange;
+  var handleFirstPageButtonClick = function handleFirstPageButtonClick(event) {
+    onPageChange(event, 0);
+  };
+  var handleBackButtonClick = function handleBackButtonClick(event) {
+    onPageChange(event, page - 1);
+  };
+  var handleNextButtonClick = function handleNextButtonClick(event) {
+    onPageChange(event, page + 1);
+  };
+  var handleLastPageButtonClick = function handleLastPageButtonClick(event) {
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    sx: {
+      flexShrink: 0,
+      margin: '0 0 0 16px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
+    "aria-label": "first page",
+    disabled: page === 0,
+    onClick: handleFirstPageButtonClick
+  }, /*#__PURE__*/_react["default"].createElement(_mui.IconFirstPage, null)), /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
+    "aria-label": "previous page",
+    disabled: page === 0,
+    onClick: handleBackButtonClick
+  }, /*#__PURE__*/_react["default"].createElement(_mui.IconNavigateBefore, null)), /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
+    "aria-label": "next page",
+    disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+    onClick: handleNextButtonClick
+  }, /*#__PURE__*/_react["default"].createElement(_mui.IconNavigateNext, null)), /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
+    "aria-label": "last page",
+    disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+    onClick: handleLastPageButtonClick
+  }, /*#__PURE__*/_react["default"].createElement(_mui.IconLastPage, null)));
+};

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

@@ -0,0 +1,3 @@
+export { TableInteractive } from './TableInteractive';
+export { getInitialColumns, setVisibleColumns, generateHeader, getVisibleColumns, getOrderedVisibleColumns } from './utils';
+export type { ITableInteractive } from './TableInteractive';

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

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TableInteractive", {
+  enumerable: true,
+  get: function get() {
+    return _TableInteractive.TableInteractive;
+  }
+});
+Object.defineProperty(exports, "generateHeader", {
+  enumerable: true,
+  get: function get() {
+    return _utils.generateHeader;
+  }
+});
+Object.defineProperty(exports, "getInitialColumns", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getInitialColumns;
+  }
+});
+Object.defineProperty(exports, "getOrderedVisibleColumns", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getOrderedVisibleColumns;
+  }
+});
+Object.defineProperty(exports, "getVisibleColumns", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getVisibleColumns;
+  }
+});
+Object.defineProperty(exports, "setVisibleColumns", {
+  enumerable: true,
+  get: function get() {
+    return _utils.setVisibleColumns;
+  }
+});
+var _TableInteractive = require("./TableInteractive");
+var _utils = require("./utils");

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

@@ -0,0 +1,8 @@
+export declare const ContentWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TableHeaderContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableHeaderContent = exports.ContentWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _theme = require("../../../theme");
+var _templateObject, _templateObject2;
+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: 8px;\n    margin: 0 0 8px 0;\n\n    & > div {\n        display: flex;\n        justify-content: flex-end;\n        gap: 8px;\n    }\n"])));

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TableInteractive } from '../table-interactive/TableInteractive';
+declare const meta: Meta<typeof TableInteractive>;
+export default meta;
+type Story = StoryObj<typeof TableInteractive>;
+export declare const interactiveTable: Story;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { ITableInteractive } from './TableInteractive';
+export declare const STORAGE_KEY = "visible-columns";
+export declare const getInitialColumns: (columns: {
+    name: string;
+    label: string;
+    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) => React.JSX.Element | null;
+export declare const getVisibleColumns: (headers: {
+    name: string;
+    label: string;
+}[], visibleColumns?: string[] | undefined) => string[];
+export declare const getOrderedVisibleColumns: (headers: {
+    name: string;
+    label: string;
+}[], visibleColumns?: string[] | undefined) => string[];