@fattureincloud/fic-design-system 0.10.0 → 0.10.2-tmp

package/dist/components/carousel/components/common/media/Media.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface MediaProps {
+    src: string;
+    className?: string;
+    showVideoControls?: boolean;
+}
+declare const Media: ({ src, className, showVideoControls }: MediaProps) => JSX.Element;
+export default Media;

package/dist/components/carousel/components/common/media/utils.d.ts

@@ -0,0 +1 @@
+export declare const isVideo: (src: string) => boolean;

package/dist/components/carousel/components/common/styled.d.ts

@@ -0,0 +1,2 @@
+export declare const FlexRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FlexColumn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/carousel/components/fullscreenMedia/FullscreenMedia.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface Props {
+    src: string;
+    isOpen: boolean;
+    close: () => void;
+}
+declare const FullscreenMedia: ({ src, isOpen, close }: Props) => JSX.Element;
+export default FullscreenMedia;

package/dist/components/carousel/components/fullscreenMedia/styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ModalPropsInterface } from 'components/modals/types';
+import { Modal } from '../../../modals';
+export declare const ImageModal: import("styled-components").StyledComponent<typeof Modal, import("styled-components").DefaultTheme, ModalPropsInterface & {
+    children: React.ReactNode;
+}, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<({ className, color, icon, isDisabled, onClick, type }: import("../../../buttons").IconButtonProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const ImageWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Image: import("styled-components").StyledComponent<({ src, className, showVideoControls }: import("../common/media/Media").MediaProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;

package/dist/components/carousel/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Carousel } from './Carousel';
+export { CarouselProps } from './types';

package/dist/components/carousel/styled.d.ts

@@ -0,0 +1 @@
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/carousel/types.d.ts

@@ -0,0 +1,3 @@
+export interface CarouselProps {
+    media: string[];
+}

package/dist/components/dropdown/DropdownImpl.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { DropdownProps } from './types';
-declare const DropdownImpl: ({ className, content, fullWidth, maxWidth, maxHeight, minWidthAsTrigger, placement, renderContent, renderTrigger, triggerStyles, title, forceOpen, disableArrowNavigation, isDisabled, emptyState, onOpen, withPadding, offsetY, forceClose, onClose, }: DropdownProps) => JSX.Element;
+declare const DropdownImpl: ({ className, content, fullWidth, maxWidth, maxHeight, minWidthAsTrigger, placement, renderContent, renderTrigger, triggerStyles, title, forceOpen, disableArrowNavigation, isDisabled, emptyState, onOpen, withPadding, offsetY, forceClose, onClose, sideButton, }: DropdownProps) => JSX.Element;
 export default DropdownImpl;

package/dist/components/dropdown/dropdown.stories.d.ts

@@ -3,5 +3,6 @@ import { Meta } from '@storybook/react';
 import { DropdownProps } from './types';
 export declare const Simple: () => JSX.Element;
 export declare const WithKnobs: () => JSX.Element;
+export declare const WithButton: () => JSX.Element;
 declare const DropdownStories: Meta<DropdownProps>;
 export default DropdownStories;

package/dist/components/dropdown/styled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const WithButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const LeftButton: import("styled-components").StyledComponent<({ className, color, fullWidth, href, iconLeft, iconRight, isDisabled, isLoading, onClick, size, target, text, type, }: import("../buttons").ButtonProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const RightButton: import("styled-components").StyledComponent<({ className, color, fullWidth, href, iconLeft, iconRight, isDisabled, isLoading, onClick, size, target, text, type, }: import("../buttons").ButtonProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;

package/dist/components/dropdown/types.d.ts

@@ -1,5 +1,6 @@
 import { Placement } from '@popperjs/core/lib/enums';
 import React, { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+import { ButtonProps } from '../buttons';
 import { IconProps } from '../icon';
 export declare type TitleProps = {
     text: string;
@@ -27,6 +28,7 @@ export declare type DropdownProps = {
     withPadding?: boolean;
     offsetY?: number;
     forceClose?: boolean;
+    sideButton?: Pick<ButtonProps, 'text' | 'iconLeft' | 'iconRight' | 'onClick'>;
 };
 export declare type DropdownItemType = 'default' | 'danger' | 'success' | 'warning' | 'link';
 export interface DropdownItemProps {

package/dist/components/newTable/Table.d.ts

@@ -29,6 +29,8 @@ import { TableProps } from './types';
  * @param {function} onRowClick Callback called after a click on a row, returns the row
  * @param {number} rowIdHighlight id of the row that will be highlighted
  * @param {number} actionColumnWidth used to determine the width of the action column
+ * @param {string} columnsBreakpointWidth fixed length that columns get below the breakpoint set with {tableBreakpoint} prop
+ * @param {string} tableBreakpoint table breakpoint below which the columns of the table get a fixed length
  */
-declare const Table: <T>({ data, columns, isSelectable, toggles, onTogglesChange, headerSize, isTogglesSortable, sortable, sortDescFirst, enableSettings, settingsDropdownConfig, rowActions, bulkActions, isLoading, allSelectedCTA, noPagination, pageSize: pageLength, listSize, paginationPreviousText, paginationNextText, onPaginationChange, uniqueId, onSort, renderEmptyState, onRowClick, bodyHeight, totalPages, rowIdHighlight, rowHighlightColor, rowSelection, onRowSelection, forceHideSettings, renderBulkActions, preSettedTableSettings, onChangeTableSettings, notRemovableColumns, rowSize, actionColumnWidth, disableScrollX, resetPageIndex, }: TableProps<T>) => JSX.Element;
+declare const Table: <T>({ data, columns, isSelectable, toggles, onTogglesChange, headerSize, isTogglesSortable, sortable, sortDescFirst, enableSettings, settingsDropdownConfig, rowActions, bulkActions, isLoading, allSelectedCTA, noPagination, pageSize: pageLength, listSize, paginationPreviousText, paginationNextText, onPaginationChange, uniqueId, onSort, renderEmptyState, onRowClick, bodyHeight, totalPages, rowIdHighlight, rowHighlightColor, rowSelection, onRowSelection, forceHideSettings, renderBulkActions, preSettedTableSettings, onChangeTableSettings, notRemovableColumns, rowSize, actionColumnWidth, resetPageIndex, columnsBreakpointWidth, tableBreakpoint, }: TableProps<T>) => JSX.Element;
 export default Table;

package/dist/components/newTable/components/body/Body.d.ts

@@ -7,7 +7,8 @@ interface BodyProps<T> extends Pick<TableProps<T>, 'rowSize' | 'bodyHeight' | 'r
     onRowClick?: (row: Row<T>) => void;
     pageIndex: number;
     actionColumnWidth: number;
-    disableScrollX?: boolean;
+    fixedWidthCells: boolean;
+    columnsBreakpointWidth: string;
 }
-declare const Body: <T>({ rows, rowSize, isLoading, onRowClick, bodyHeight, rowIdHighlight, rowHighlightColor, pageIndex, actionColumnWidth, disableScrollX, }: BodyProps<T>) => JSX.Element;
+declare const Body: <T>({ rows, rowSize, isLoading, onRowClick, bodyHeight, rowIdHighlight, rowHighlightColor, pageIndex, actionColumnWidth, fixedWidthCells, columnsBreakpointWidth, }: BodyProps<T>) => JSX.Element;
 export default Body;

package/dist/components/newTable/components/cell/Cell.d.ts

@@ -9,6 +9,8 @@ interface Props<T> {
     isLoading?: boolean;
     onRowClick?: (row: Row<T>) => void;
     actionColumnWidth: number;
+    fixedWidthCells: boolean;
+    columnsBreakpointWidth: string;
 }
-declare const Cell: <T>({ cell, row, hover, rowSize, isLoading, onRowClick, actionColumnWidth }: Props<T>) => JSX.Element;
+declare const Cell: <T>({ cell, row, hover, rowSize, isLoading, onRowClick, actionColumnWidth, fixedWidthCells, columnsBreakpointWidth, }: Props<T>) => JSX.Element;
 export default Cell;

package/dist/components/newTable/components/cell/customCell/CustomCell.d.ts

@@ -8,6 +8,8 @@ declare type Props<CellProps> = {
     rowSize?: RowSize;
     actionColumnWidth: number;
     onRowClick?: (row: Row<CellProps>) => void;
+    fixedWidthCells: boolean;
+    columnsBreakpointWidth: string;
 } & CustomCellProps & AccessorColumnDef<CellProps> & ActionColumnDef<CellProps> & AdditionalColumnDef<CellProps>;
-declare const CustomCell: <CellProps>({ content, isEditable, tag, unitSymbol, headline, leadingIcon, avatar, actionType, row, rowSize, onActionChange, isToggled, hover, onChange, trailingMicroTag, minWidth, rowActions, context, onRowClick, maxWidth, align, disableClick, actionColumnWidth, }: Props<CellProps>) => JSX.Element;
+declare const CustomCell: <CellProps>({ content, isEditable, tag, unitSymbol, headline, leadingIcon, avatar, actionType, row, rowSize, onActionChange, isToggled, hover, onChange, trailingMicroTag, minWidth, rowActions, context, onRowClick, maxWidth, align, disableClick, actionColumnWidth, fixedWidthCells, columnsBreakpointWidth, }: Props<CellProps>) => JSX.Element;
 export default CustomCell;

package/dist/components/newTable/components/cell/styled.d.ts

@@ -3,6 +3,8 @@ export declare const Td: import("styled-components").StyledComponent<"div", impo
     minWidth?: number | undefined;
     maxWidth?: number | undefined;
     align?: "center" | "left" | "right" | undefined;
+    fixedWidthCells: boolean;
+    columnsBreakpointWidth: string;
 }, never>;
 export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const LeadingIconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/newTable/components/header/Header.d.ts

@@ -17,6 +17,8 @@ interface HeaderProps<T> {
     onChangeTableSettings?: onChangeTableSettings;
     isLoading: boolean;
     actionColumnWidth: number;
+    fixedWidthCells: boolean;
+    columnsBreakpointWidth: string;
 }
-declare const Header: <T>({ headerGroup, headerSize, onSort, forceHideSettings, rowSelection, setRowSelection, preSettedTableSettings, onChangeTableSettings, notRemovableColumns, isLoading, actionColumnWidth, }: HeaderProps<T>) => JSX.Element;
+declare const Header: <T>({ headerGroup, headerSize, onSort, forceHideSettings, rowSelection, setRowSelection, preSettedTableSettings, onChangeTableSettings, notRemovableColumns, isLoading, actionColumnWidth, fixedWidthCells, columnsBreakpointWidth, }: HeaderProps<T>) => JSX.Element;
 export default Header;

package/dist/components/newTable/components/header/headerCell/HeaderCell.d.ts

@@ -15,6 +15,8 @@ interface HeaderCellProps<T> {
     onChangeTableSettings?: onChangeTableSettings;
     isLoading: boolean;
     actionColumnWidth: number;
+    fixedWidthCells: boolean;
+    columnsBreakpointWidth: string;
 }
-declare const HeaderCell: <T>({ header, headerSize, onSort, customSorted, setCustomSorted, forceHideSettings, rowSelection, setRowSelection, notRemovableColumns, dimensionRow, onChangeTableSettings, isLoading, actionColumnWidth, }: HeaderCellProps<T>) => JSX.Element;
+declare const HeaderCell: <T>({ header, headerSize, onSort, customSorted, setCustomSorted, forceHideSettings, rowSelection, setRowSelection, notRemovableColumns, dimensionRow, onChangeTableSettings, isLoading, actionColumnWidth, fixedWidthCells, columnsBreakpointWidth, }: HeaderCellProps<T>) => JSX.Element;
 export default HeaderCell;

package/dist/components/newTable/components/header/headerCell/styled.d.ts

@@ -6,6 +6,9 @@ export declare const Th: import("styled-components").StyledComponent<"div", impo
     maxWidth?: number | undefined;
     sortable: boolean;
     isActionColumn: boolean;
+    isCheckboxColumn: boolean;
+    fixedWidthCells: boolean;
+    columnsBreakpointWidth: string;
 }, never>;
 export declare const TextHeaderCellWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const ActionCell: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/newTable/components/row/Row.d.ts

@@ -9,6 +9,8 @@ interface TrProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLTa
     isRowHighlighted: boolean;
     rowHighlightColor?: TableProps<T>['rowHighlightColor'];
     actionColumnWidth: number;
+    fixedWidthCells: boolean;
+    columnsBreakpointWidth: string;
 }
-declare const Tr: <T>({ row, isLoading, onRowClick, isRowHighlighted, rowHighlightColor, defaultRowSize, actionColumnWidth, }: TrProps<T>) => JSX.Element;
+declare const Tr: <T>({ row, isLoading, onRowClick, isRowHighlighted, rowHighlightColor, defaultRowSize, actionColumnWidth, fixedWidthCells, columnsBreakpointWidth, }: TrProps<T>) => JSX.Element;
 export default Tr;

package/dist/components/newTable/styled.d.ts

@@ -4,3 +4,4 @@ export declare const ScrollableContent: import("styled-components").StyledCompon
 export declare const TableWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const SortIndicator: import("styled-components").StyledComponent<({ onClick, isDisabled, ...props }: import("../icon").IconProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 export declare const PaginationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const HeaderBodyWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/newTable/types.d.ts

@@ -52,8 +52,9 @@ export interface TableProps<T> {
     notRemovableColumns?: string[];
     onChangeTableSettings?: onChangeTableSettings;
     actionColumnWidth?: number;
-    disableScrollX?: boolean;
     resetPageIndex?: boolean;
+    columnsBreakpointWidth?: string;
+    tableBreakpoint?: number;
 }
 export declare type onChangeTableSettings = (key: keyof PreSettedTableSettings, valueChange: Pick<PreSettedTableSettings, 'orderColumns' | 'dimensionRow' | 'notVisibleColumns'>) => void;
 export interface PreSettedTableSettings {

package/dist/index.css

@@ -1,128 +1,154 @@
-.DS-ReactTable {
-  position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  overflow: hidden;
+:root {
+    --columns-breakpoint-width: 100px; /* default value */
+    --table-breakpoint: px100; /* relates to TableBreakpoints enum */
 }
 
-.DS-ReactTable .DS-rt-table {
-  -webkit-box-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  width: 100%;
-  border-collapse: collapse;
-  overflow-x: auto;
-  overflow-y: hidden;
+.Table-container {
+    container-type: inline-size;
+    container-name: var(--table-breakpoint);
 }
 
-.DS-ReactTable .DS-rt-thead {
-  -webkit-box-flex: 1;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  cursor: default;
-}
+/* width breakpoints corresponds to TableBreakpoints enum */
+@container px100 (width < 100px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 
-.DS-ReactTable .DS-rt-thead .DS-rt-th {
-  position: relative;
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 }
-.DS-ReactTable .DS-rt-thead .DS-rt-td {
-  line-height: normal;
-  position: relative;
+
+@container px200 (width < 200px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 }
 
-.DS-ReactTable .DS-rt-thead .DS-rt-resizable-header:last-child {
-  overflow: hidden;
+@container px300 (width < 300px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 }
-.DS-ReactTable .DS-rt-thead .DS-rt-resizable-header-content {
-  overflow: hidden;
-  text-overflow: ellipsis;
+
+@container px400 (width < 400px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 }
 
-.DS-ReactTable .DS-rt-thead.DS-header .DS-rt-th:after {
-  content: "";
-  display: block;
-  position: absolute;
+@container px500 (width < 500px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 }
 
-.DS-ReactTable .DS-rt-tbody {
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
+@container px600 (width < 600px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 }
 
-.DS-ReactTable .DS-rt-tbody .DS-rt-tr-group {
-  flex: none;
+@container px700 (width < 700px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 }
 
-.DS-ReactTable .DS-rt-tr-group {
-  -webkit-box-flex: 1;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  cursor: pointer;
+@container px800 (width < 800px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 }
 
-.DS-ReactTable .DS-rt-tr {
-  flex: 1 0 auto;
-  display: inline-flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-content: center;
-  justify-content: center;
-  align-items: center;
+@container px900 (width < 900px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 }
 
-.DS-ReactTable .DS-rt-th {
-  -webkit-box-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  white-space: nowrap;
-  vertical-align: middle;
-  align-self: center;
-  overflow: hidden;
+@container px1000 (width < 1000px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 }
 
-.DS-ReactTable .DS-rt-td {
-  -webkit-box-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  align-self: center;
-  overflow: hidden;
+@container px1100 (width < 1100px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 }
+
+@container px1200 (width < 1200px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}

package/dist/index.d.ts

@@ -49,6 +49,7 @@ export { ThemeProvider } from './components/themeProvider';
 export { ShortcutTip, ShortcutTipProps, Tip, TipPalette, TipProps, TipType } from './components/tip';
 export { Toast, ToastPalette, toastPalette, ToastProps, ToastType } from './components/toast';
 export { Tooltip, TooltipPalette, TooltipProps } from './components/tooltip';
+export { Carousel } from './components/carousel';
 export * from './components/verticalTabs';
 export { autocompleteYellow } from './styles/defaultPalette/colors/others';
 export { Theme } from './styles/theme';