@onewelcome/react-lib-components 6.6.0 → 6.7.0

package/dist/esm/src/components/Notifications/Snackbar/interfaces.d.ts

@@ -1,8 +1,17 @@
 import { ButtonHTMLAttributes } from "react";
+/**
+ * @deprecated
+ */
 export type Variant = "info" | "success" | "error" | "warning";
+/**
+ * @deprecated
+ */
 export type Actions = (ButtonHTMLAttributes<HTMLButtonElement> & {
     label: string;
 })[];
+/**
+ * @deprecated
+ */
 export interface SnackbarOptionsProps {
     actions?: Actions;
     className?: string;
@@ -10,9 +19,18 @@ export interface SnackbarOptionsProps {
     duration?: number;
     onClose?: () => void;
 }
+/**
+ * @deprecated
+ */
 export interface EnqueueSnackbarProps extends SnackbarOptionsProps {
     title?: string;
     content?: string;
 }
+/**
+ * @deprecated
+ */
 export type DeprecatedEnqueueSnackbarType = (propsOrTitle: EnqueueSnackbarProps | string | undefined, content?: string, options?: SnackbarOptionsProps) => void;
+/**
+ * @deprecated
+ */
 export declare function isNewEnqueueSnackbarInterface(args: unknown): args is EnqueueSnackbarProps;

package/dist/esm/src/components/Notifications/Snackbar/useSnackbar.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated
+ */
 export declare const useSnackbar: () => {
     enqueueWarningSnackbar: import("./interfaces").DeprecatedEnqueueSnackbarType;
     enqueueErrorSnackbar: import("./interfaces").DeprecatedEnqueueSnackbarType;

package/dist/esm/src/components/_BaseStyling_/BaseStyling.d.ts

@@ -15,6 +15,7 @@ interface CSSProperties {
     colorPrimary600?: string;
     colorPrimary700?: string;
     colorPrimary900?: string;
+    colorPrimaryLight?: string;
     colorBlueGrey100?: string;
     colorBlueGrey200?: string;
     colorBlueGrey300?: string;
@@ -34,9 +35,11 @@ interface CSSProperties {
     colorLightBlue500?: string;
     colorLightBlue600?: string;
     colorShadowBlue?: string;
+    colorOrange100?: string;
     colorOrange500?: string;
     colorOrange600?: string;
     colorOrange700?: string;
+    colorRed100?: string;
     colorRed200?: string;
     colorRed500?: string;
     colorRed600?: string;
@@ -48,6 +51,7 @@ interface CSSProperties {
     defaultPressedColor?: string;
     defaultHoverColor?: string;
     defaultLineHeight?: string;
+    dataGridLineHeight?: string;
     focusBorderRadius?: string;
     buttonBorderRadius?: string;
     buttonBorderWidth?: string;
@@ -101,12 +105,44 @@ interface CSSProperties {
     modalBackdropColor?: string;
     skeletonBackgroundColor?: string;
     skeletonAnimationColorRgb?: string;
+    /**
+     * @deprecated
+     */
     snackbarTextColor?: string;
+    /**
+     * @deprecated
+     */
     snackbarInfoBackgroundColor?: string;
+    /**
+     * @deprecated
+     */
     snackbarSuccessBackgroundColor?: string;
+    /**
+     * @deprecated
+     */
     snackbarErrorBackgroundColor?: string;
+    /**
+     * @deprecated
+     */
     snackbarWarningBackgroundColor?: string;
+    /**
+     * @deprecated
+     */
     snackbarBorderRadius?: string;
+    alertTextColor?: string;
+    alertTextInvertedColor?: string;
+    alertNeutralBackgroundColor?: string;
+    alertInfoBackgroundColor?: string;
+    alertSuccessBackgroundColor?: string;
+    alertErrorBackgroundColor?: string;
+    alertWarningBackgroundColor?: string;
+    alertNeutralInvertedColor?: string;
+    alertInfoInvertedColor?: string;
+    alertSuccessInvertedColor?: string;
+    alertErrorInvertedColor?: string;
+    alertWarningInvertedColor?: string;
+    alertBorderWidth?: string;
+    alertBorderRadius?: string;
     stepperWaitingColor?: string;
     stepperWaitingHoverColor?: string;
     stepperWaitingActiveColor?: string;
@@ -174,6 +210,10 @@ interface CSSProperties {
     fontSizeSub?: string;
     fontSizeCode?: string;
     formControlFontSize?: string;
+    fileUploadBorderWidth?: string;
+    dragDropBorderStyle?: string;
+    defaultZIndex1?: string;
+    fontSizeDataGrid?: string;
 }
 export interface Props extends HTMLAttributes<HTMLDivElement> {
     children?: ReactElement[] | ReactElement | string[] | string | number[] | number;

package/dist/esm/src/components/admin/layout/MicrofrontendContainer/MicrofrontendContainer.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactElement } from "react";
+export interface Props {
+    header?: ReactElement | ReactElement[];
+    children: ReactElement | ReactElement[];
+    contentMargins?: boolean;
+    contentMaxWidth?: boolean;
+}
+export declare const MicrofrontendContainer: ({ header, children, contentMargins, contentMaxWidth, ...rest }: Props) => React.JSX.Element;

package/dist/esm/src/index.d.ts

@@ -46,7 +46,14 @@ export { useDebouncedCallback } from "./hooks/useDebouncedCallback";
 export { generateID, debounce, throttle } from "./util/helper";
 export { Modal } from "./components/Notifications/Modal/Modal";
 export type { Props as ModalProps } from "./components/Notifications/Modal/Modal";
+/**
+ * @deprecated
+ */
 export { useSnackbar } from "./components/Notifications/Snackbar/useSnackbar";
+export { useAlert } from "./components/Notifications/Alert/useAlert";
+export { AlertProvider } from "./components/Notifications/Alert/AlertProvider/AlertProvider";
+export { AlertItem, Props as AlertItemProps } from "./components/Notifications/Alert/AlertItem/AlertItem";
+export type { Props as AlertProviderProps } from "./components/Notifications/Alert/AlertProvider/AlertProvider";
 export { Dialog } from "./components/Notifications/Dialog/Dialog";
 export type { Props as DialogProps, Action as DialogAction } from "./components/Notifications/Dialog/Dialog";
 export { DiscardChangesModal } from "./components/Notifications/DiscardChangesModal/DiscardChangesModal";
@@ -108,6 +115,14 @@ export { FileUpload } from "./components/Form/FileUpload/FileUpload";
 export type { Props as FileUploadProps } from "./components/Form/FileUpload/FileUpload";
 export { MultiSelectWrapper } from "./components/Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper";
 export type { Props as MultiSelectWrapperProps } from "./components/Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper";
+export { ContentHeader } from "./components/Layout/ContentHeader/ContentHeader";
+export type { Props as ContentHeaderProps } from "./components/Layout/ContentHeader/ContentHeader";
+export { FormStepper } from "./components/Layout/FormPage/FormWithStepper/FormStepper/FormStepper";
+export type { Props as FormStepperProps, FormStepProps } from "./components/Layout/FormPage/FormWithStepper/FormStepper/FormStepper";
+export { FormSection } from "./components/Layout/FormPage/FormWithStepper/FormSection/FormSection";
+export type { Props as FormSectionProps } from "./components/Layout/FormPage/FormWithStepper/FormSection/FormSection";
+export { FormWithStepper } from "./components/Layout/FormPage/FormWithStepper/FormWithStepper";
+export type { Props as FormWithStepperProps } from "./components/Layout/FormPage/FormWithStepper/FormWithStepper";
 /** Wizard */
 export { Wizard } from "./components/Wizard/Wizard";
 export type { Props as WizardProps } from "./components/Wizard/Wizard";

package/dist/esm/src/index.esm.js

@@ -1,2 +1,2 @@
-export{BaseStyling}from"../_BaseStyling_/BaseStyling.esm.js";export{Button}from"../Button/Button.esm.js";export{Breadcrumbs}from"../Breadcrumbs/Breadcrumbs.esm.js";export{ContextMenu}from"../ContextMenu/ContextMenu.esm.js";export{ContextMenuItem}from"../ContextMenu/ContextMenuItem.esm.js";export{Link}from"../Link/Link.esm.js";export{Icon,Icons}from"../Icon/Icon.esm.js";export{IconButton}from"../Button/IconButton.esm.js";export{Tab}from"../Tabs/Tab.esm.js";export{Tabs}from"../Tabs/Tabs.esm.js";export{Tag}from"../Tag/Tag.esm.js";export{TextEllipsis}from"../TextEllipsis/TextEllipsis.esm.js";export{Tile}from"../Tiles/Tile.esm.js";export{Tiles}from"../Tiles/Tiles.esm.js";export{Tooltip}from"../Tooltip/Tooltip.esm.js";export{Typography}from"../Typography/Typography.esm.js";export{ProgressBar}from"../ProgressBar/ProgressBar.esm.js";export{Skeleton}from"../Skeleton/Skeleton.esm.js";export{StatusIndicator}from"../StatusIndicator/StatusIndicator.esm.js";export{Stepper}from"../Stepper/Stepper.esm.js";export{Pagination}from"../Pagination/Pagination.esm.js";export{useRepeater}from"./hooks/useRepeater.esm.js";export{usePosition}from"./hooks/usePosition.esm.js";export{useDebouncedCallback}from"./hooks/useDebouncedCallback.esm.js";export{debounce,generateID,throttle}from"./util/helper.esm.js";export{BaseModal as Modal}from"../Notifications/BaseModal/BaseModal.esm.js";export{useSnackbar}from"../Notifications/Snackbar/useSnackbar.esm.js";export{Dialog}from"../Notifications/Dialog/Dialog.esm.js";export{DiscardChangesModal}from"../Notifications/DiscardChangesModal/DiscardChangesModal.esm.js";export{BaseModalActions as ModalActions}from"../Notifications/BaseModal/BaseModalActions/BaseModalActions.esm.js";export{BaseModalContent as ModalContent}from"../Notifications/BaseModal/BaseModalContent/BaseModalContent.esm.js";export{BaseModalHeader as ModalHeader}from"../Notifications/BaseModal/BaseModalHeader/BaseModalHeader.esm.js";export{NotificationProvider,useNotificationContext}from"../Notifications/NotificationProvider/NotificationContext.esm.js";export{SlideInModal}from"../Notifications/SlideInModal/SlideInModal.esm.js";export{SnackbarProvider}from"../Notifications/Snackbar/SnackbarProvider/SnackbarProvider.esm.js";export{Checkbox}from"../Form/Checkbox/Checkbox.esm.js";export{Fieldset}from"../Form/Fieldset/Fieldset.esm.js";export{Form}from"../Form/Form.esm.js";export{FormControl}from"../Form/FormControl/FormControl.esm.js";export{FormGroup}from"../Form/FormGroup/FormGroup.esm.js";export{FormHelperText}from"../Form/FormHelperText/FormHelperText.esm.js";export{Input}from"../Form/Input/Input.esm.js";export{InputWrapper}from"../Form/Wrapper/InputWrapper/InputWrapper.esm.js";export{Label}from"../Form/Label/Label.esm.js";export{Radio}from"../Form/Radio/Radio.esm.js";export{RadioWrapper}from"../Form/Wrapper/RadioWrapper/RadioWrapper.esm.js";export{Select}from"../Form/Select/SingleSelect/Select.esm.js";export{MultiSelect}from"../Form/Select/MultiSelect/MultiSelect.esm.js";export{Option}from"../Form/Select/SingleSelect/Option.esm.js";export{MultiOption}from"../Form/Select/MultiSelect/MultiOption.esm.js";export{Textarea}from"../Form/Textarea/Textarea.esm.js";export{Toggle}from"../Form/Toggle/Toggle.esm.js";export{CheckboxWrapper}from"../Form/Wrapper/CheckboxWrapper/CheckboxWrapper.esm.js";export{TextareaWrapper}from"../Form/Wrapper/TextareaWrapper/TextareaWrapper.esm.js";export{SelectWrapper}from"../Form/Wrapper/SelectWrapper/SelectWrapper.esm.js";export{FileUpload}from"../Form/FileUpload/FileUpload.esm.js";export{MultiSelectWrapper}from"../Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper.esm.js";export{Wizard}from"../Wizard/Wizard.esm.js";export{WizardActions}from"../Wizard/WizardActions/WizardActions.esm.js";export{WizardSteps}from"../Wizard/WizardSteps/WizardSteps.esm.js";export{BaseWizardSteps}from"../Wizard/BaseWizardSteps/BaseWizardSteps.esm.js";export{DataGrid}from"../DataGrid/DataGrid.esm.js";export{DataGridRow}from"../DataGrid/DataGridBody/DataGridRow.esm.js";export{DataGridCell}from"../DataGrid/DataGridBody/DataGridCell.esm.js";export{Banner}from"../Notifications/Banner/Banner.esm.js";
+export{BaseStyling}from"../_BaseStyling_/BaseStyling.esm.js";export{Button}from"../Button/Button.esm.js";export{Breadcrumbs}from"../Breadcrumbs/Breadcrumbs.esm.js";export{ContextMenu}from"../ContextMenu/ContextMenu.esm.js";export{ContextMenuItem}from"../ContextMenu/ContextMenuItem.esm.js";export{Link}from"../Link/Link.esm.js";export{Icon,Icons}from"../Icon/Icon.esm.js";export{IconButton}from"../Button/IconButton.esm.js";export{Tab}from"../Tabs/Tab.esm.js";export{Tabs}from"../Tabs/Tabs.esm.js";export{Tag}from"../Tag/Tag.esm.js";export{TextEllipsis}from"../TextEllipsis/TextEllipsis.esm.js";export{Tile}from"../Tiles/Tile.esm.js";export{Tiles}from"../Tiles/Tiles.esm.js";export{Tooltip}from"../Tooltip/Tooltip.esm.js";export{Typography}from"../Typography/Typography.esm.js";export{ProgressBar}from"../ProgressBar/ProgressBar.esm.js";export{Skeleton}from"../Skeleton/Skeleton.esm.js";export{StatusIndicator}from"../StatusIndicator/StatusIndicator.esm.js";export{Stepper}from"../Stepper/Stepper.esm.js";export{Pagination}from"../Pagination/Pagination.esm.js";export{useRepeater}from"./hooks/useRepeater.esm.js";export{usePosition}from"./hooks/usePosition.esm.js";export{useDebouncedCallback}from"./hooks/useDebouncedCallback.esm.js";export{debounce,generateID,throttle}from"./util/helper.esm.js";export{BaseModal as Modal}from"../Notifications/BaseModal/BaseModal.esm.js";export{useSnackbar}from"../Notifications/Snackbar/useSnackbar.esm.js";export{useAlert}from"../Notifications/Alert/useAlert.esm.js";export{AlertProvider}from"../Notifications/Alert/AlertProvider/AlertProvider.esm.js";export{AlertItem}from"../Notifications/Alert/AlertItem/AlertItem.esm.js";export{Dialog}from"../Notifications/Dialog/Dialog.esm.js";export{DiscardChangesModal}from"../Notifications/DiscardChangesModal/DiscardChangesModal.esm.js";export{BaseModalActions as ModalActions}from"../Notifications/BaseModal/BaseModalActions/BaseModalActions.esm.js";export{BaseModalContent as ModalContent}from"../Notifications/BaseModal/BaseModalContent/BaseModalContent.esm.js";export{BaseModalHeader as ModalHeader}from"../Notifications/BaseModal/BaseModalHeader/BaseModalHeader.esm.js";export{NotificationProvider,useNotificationContext}from"../Notifications/NotificationProvider/NotificationContext.esm.js";export{SlideInModal}from"../Notifications/SlideInModal/SlideInModal.esm.js";export{SnackbarProvider}from"../Notifications/Snackbar/SnackbarProvider/SnackbarProvider.esm.js";export{Checkbox}from"../Form/Checkbox/Checkbox.esm.js";export{Fieldset}from"../Form/Fieldset/Fieldset.esm.js";export{Form}from"../Form/Form.esm.js";export{FormControl}from"../Form/FormControl/FormControl.esm.js";export{FormGroup}from"../Form/FormGroup/FormGroup.esm.js";export{FormHelperText}from"../Form/FormHelperText/FormHelperText.esm.js";export{Input}from"../Form/Input/Input.esm.js";export{InputWrapper}from"../Form/Wrapper/InputWrapper/InputWrapper.esm.js";export{Label}from"../Form/Label/Label.esm.js";export{Radio}from"../Form/Radio/Radio.esm.js";export{RadioWrapper}from"../Form/Wrapper/RadioWrapper/RadioWrapper.esm.js";export{Select}from"../Form/Select/SingleSelect/Select.esm.js";export{MultiSelect}from"../Form/Select/MultiSelect/MultiSelect.esm.js";export{Option}from"../Form/Select/SingleSelect/Option.esm.js";export{MultiOption}from"../Form/Select/MultiSelect/MultiOption.esm.js";export{Textarea}from"../Form/Textarea/Textarea.esm.js";export{Toggle}from"../Form/Toggle/Toggle.esm.js";export{CheckboxWrapper}from"../Form/Wrapper/CheckboxWrapper/CheckboxWrapper.esm.js";export{TextareaWrapper}from"../Form/Wrapper/TextareaWrapper/TextareaWrapper.esm.js";export{SelectWrapper}from"../Form/Wrapper/SelectWrapper/SelectWrapper.esm.js";export{FileUpload}from"../Form/FileUpload/FileUpload.esm.js";export{MultiSelectWrapper}from"../Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper.esm.js";export{ContentHeader}from"../Layout/ContentHeader/ContentHeader.esm.js";export{FormStepper}from"../Layout/FormPage/FormWithStepper/FormStepper/FormStepper.esm.js";export{FormSection}from"../Layout/FormPage/FormWithStepper/FormSection/FormSection.esm.js";export{FormWithStepper}from"../Layout/FormPage/FormWithStepper/FormWithStepper.esm.js";export{Wizard}from"../Wizard/Wizard.esm.js";export{WizardActions}from"../Wizard/WizardActions/WizardActions.esm.js";export{WizardSteps}from"../Wizard/WizardSteps/WizardSteps.esm.js";export{BaseWizardSteps}from"../Wizard/BaseWizardSteps/BaseWizardSteps.esm.js";export{DataGrid}from"../DataGrid/DataGrid.esm.js";export{DataGridRow}from"../DataGrid/DataGridBody/DataGridRow.esm.js";export{DataGridCell}from"../DataGrid/DataGridBody/DataGridCell.esm.js";export{Banner}from"../Notifications/Banner/Banner.esm.js";
 //# sourceMappingURL=index.esm.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "6.6.0",
+  "version": "6.7.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",

package/src/components/DataGrid/DataGrid.module.scss

@@ -15,7 +15,7 @@
  */
 
 .grid-wrapper {
-  padding: 1rem 0;
+  padding: 0.875rem 0;
 }
 
 .table-wrapper {
@@ -30,7 +30,7 @@
 }
 
 .pagination {
-  margin-top: 1rem;
+  margin-top: 0.875rem;
   padding: 0 1rem;
 }
 

package/src/components/DataGrid/DataGridBody/DataGridCell.module.scss

@@ -17,8 +17,8 @@
 @use "../../../mixins.module.scss";
 
 .cell {
-  min-height: 3.5rem;
-  padding: 0.5rem 0.625rem;
+  min-height: 3rem;
+  padding: 0.25rem 1rem;
 
   &:first-child {
     padding-left: 1rem;
@@ -28,6 +28,11 @@
     padding-right: 1rem;
   }
 
+  .text {
+    font-size: var(--font-size-data-grid);
+    line-height: var(--data-grid-line-height);
+  }
+
   .loading {
     @include mixins.skeletonLoading();
     border-radius: 0.5rem;

package/src/components/DataGrid/DataGridBody/DataGridCell.tsx

@@ -61,7 +61,7 @@ const DataGridCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Prop
     >
       {isLoading && <div className={classes["loading"]} aria-busy="true" aria-live="polite"></div>}
       {!isLoading && (
-        <Typography variant="body" tag="span">
+        <Typography className={classes["text"]} variant="body" tag="span">
           {children}
         </Typography>
       )}

package/src/components/DataGrid/DataGridBody/DataGridRow.module.scss

@@ -15,9 +15,19 @@
  */
 
 .row {
+  position: relative;
   background-color: var(--data-grid-row-background-color);
 
   &:not(.loading):hover {
     background-color: var(--data-grid-row-hover-background-color);
   }
+
+  &:not(:last-child)::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    border-bottom: 1px solid var(--light-grey-border);
+  }
 }

package/src/components/DataGrid/DataGridBody/__snapshots__/DataGridBody.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         Paweł
       </span>
@@ -18,7 +18,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         Napieracz
       </span>
@@ -27,7 +27,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         12.12.1990
       </span>
@@ -36,7 +36,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         <div
           class="context-menu"
@@ -73,7 +73,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         Michał
       </span>
@@ -82,7 +82,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         Górski
       </span>
@@ -91,7 +91,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         12.12.1994
       </span>
@@ -100,7 +100,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         <div
           class="context-menu"
@@ -137,7 +137,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         Daniel
       </span>
@@ -146,7 +146,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         Velden
       </span>
@@ -155,7 +155,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         12.12.199x
       </span>
@@ -164,7 +164,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         <div
           class="context-menu"
@@ -201,7 +201,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         Jasha
       </span>
@@ -210,7 +210,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         Joachimsthal
       </span>
@@ -219,7 +219,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         12.12.198x
       </span>
@@ -228,7 +228,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         <div
           class="context-menu"

package/src/components/DataGrid/DataGridHeader/DataGridHeader.module.scss

@@ -14,16 +14,6 @@
  *    limitations under the License.
  */
 
-.thead {
-  &::after {
-    content: "";
-    position: absolute;
-    width: calc(100% - 2rem);
-    left: 1rem;
-    border-bottom: 2px solid var(--light-grey-border);
-  }
-}
-
 .row {
   height: 2.5rem;
 }

package/src/components/DataGrid/DataGridHeader/DataGridHeader.tsx

@@ -103,7 +103,7 @@ const DataGridHeaderComponent: ForwardRefRenderFunction<HTMLTableSectionElement,
   });
 
   return (
-    <thead {...rest} ref={ref} className={classes["thead"]}>
+    <thead {...rest} ref={ref}>
       <tr className={classes["row"]}>
         {headerCells}
         {!disableContextMenuColumn && (

package/src/components/DataGrid/DataGridHeader/DataGridHeaderCell.module.scss

@@ -17,7 +17,7 @@
 .header-cell {
   font-weight: normal;
   text-align: left;
-  padding: 0 0.625rem;
+  padding: 0.625rem 0.75rem;
 
   &:first-child {
     padding-left: 1rem;
@@ -44,8 +44,8 @@
 
 .headline {
   font-family: var(--font-family);
-  font-size: var(--font-size);
-  line-height: var(--default-line-height);
+  font-size: var(--font-size-data-grid);
+  line-height: var(--data-grid-line-height);
   font-weight: 700;
   color: var(--default);
 }

package/src/components/Form/FileUpload/FileItem/FileItem.module.scss

@@ -13,19 +13,96 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-
+@use "../../../../mixins.module.scss";
 @import "../../../../mixins.module.scss";
 
 .file-item-wrapper {
-  padding: 0.5rem 1.25rem;
+  padding: 0;
   border-radius: var(--input-border-radius);
-  background-color: var(--input-background-color);
   @include transition(all, 0.2s, ease-in-out);
 
   [class*="icon"] {
     font-size: 1.25rem;
   }
 
+  & .file-list-container {
+    background-color: var(--color-blue-grey25);
+    padding: 0.25rem 0.75rem;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    min-height: 2.875rem;
+
+    .action-button-wrapper {
+      margin: 0.25rem 0;
+      display: flex;
+
+      button {
+        margin-left: 0.5rem;
+
+        span {
+          font-size: 0.875rem;
+          text-transform: capitalize;
+        }
+      }
+
+      a {
+        padding-left: 0.75rem;
+        padding-right: 1.25rem;
+        font-weight: 500;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        margin-left: 0.5rem;
+
+        span.action-icon {
+          display: flex;
+          justify-content: center;
+          width: 1.5rem;
+          margin-right: 0.25rem;
+          font-size: 0.875rem;
+          padding-left: 0;
+        }
+
+        span {
+          font-size: 0.875rem;
+          text-transform: capitalize;
+        }
+
+        &:hover {
+          color: var(--button-primary-hover-color);
+          background-color: var(--color-black10);
+        }
+
+        &:focus {
+          @include mixins.focusVisibleOutline($outlineOffset: 2px, $selectors: null);
+        }
+      }
+    }
+
+    .progress-with-action {
+      width: 100%;
+      display: flex;
+      align-items: center;
+
+      .progress-bar {
+        height: 3rem;
+        width: 100%;
+        background: transparent;
+
+        > span {
+          height: 0.3rem;
+          border-radius: var(--input-border-radius);
+        }
+
+        p {
+          font-size: 0.875rem;
+        }
+      }
+    }
+  }
+
   .progress-bar {
     background-color: var(--color-black10);
   }
@@ -39,11 +116,21 @@
     margin: 0;
     display: flex;
     align-items: center;
+    font-size: 0.875rem;
+
     .friendly-name {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+
+    &.error {
+      & span {
+        &::before {
+          color: var(--error);
+        }
+      }
+    }
   }
 
   .action-icon {
@@ -51,10 +138,30 @@
     color: var(--color-primary);
     cursor: pointer;
     padding-left: 1.25rem;
+    margin-right: 1rem;
+
+    & label,
+    & a {
+      text-transform: capitalize;
+      padding-left: 0.5rem;
+      cursor: pointer;
+      color: var(--color-primary);
+      text-decoration: none;
+    }
   }
 
   .file-icon {
     margin-right: 0.5rem;
+
+    &::before {
+      color: var(--color-primary500);
+    }
+
+    &.retry {
+      &::before {
+        color: var(--error);
+      }
+    }
   }
 
   .file-subtitle,
@@ -72,4 +179,8 @@
   .readonly {
     color: var(--greyed-out);
   }
+
+  .file-subtitle {
+    margin-left: 0;
+  }
 }