Release v0.8.6 (#472)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>

.github/workflows/deployer.yml

@@ -0,0 +1,48 @@
+name: Workflow
+
+on:
+  release:
+    types:
+      - published
+
+concurrency:
+  group: ${{ github.workflow }}-deployer-${{ github.head_ref }}
+  cancel-in-progress: true
+
+jobs:
+  build-and-release:
+    name: "Build"
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+    steps:
+      - name: Check out Code
+        uses: actions/checkout@v3
+
+      - name: Read .nvmrc
+        id: node_version
+        run: echo "$(cat .nvmrc)" && echo "NVMRC=$(cat .nvmrc)" >> $GITHUB_ENV
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NVMRC }}
+          cache: "yarn"
+          cache-dependency-path: yarn.lock
+
+      - name: Install Dependencies
+        continue-on-error: false
+        run: |
+          yarn set version stable
+          yarn install --frozen-lockfile --immutable
+
+      - name: Log in to private Docker registry
+        run: echo "${{ secrets.REGISTRY_PASSWORD }}" | docker login ${{ secrets.REGISTRY_URL }} -u ${{ secrets.REGISTRY_USERNAME }} --password-stdin
+
+      - name: Build Storybook
+        run: |
+          yarn build-storybook 
+          docker buildx build --platform linux/amd64 --push -t registry.min.dev/minio/mds .
+          echo "${{ secrets.MDS_DEPLOYER_KUBECONFIG }}" > /tmp/kubecconfig
+          ls -l /tmp/kubecconfig
+          kubectl --kubeconfig /tmp/kubecconfig -n mds delete pod $(kubectl --kubeconfig /tmp/kubecconfig -n mds get pods | grep mds | awk '{print $1}')

.github/workflows/jobs.yml

@@ -20,7 +20,16 @@ jobs:
       matrix:
         os: [ubuntu-latest]
     steps:
-      - uses: actions/checkout@v2
+      - name: Check out Code
+        uses: actions/checkout@v3
+
+      - name: Read .nvmrc
+        id: node_version
+        run: echo "$(cat .nvmrc)" && echo "NVMRC=$(cat .nvmrc)" >> $GITHUB_ENV
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NVMRC }}
 
       - name: Install Dependencies
         continue-on-error: false
@@ -36,20 +45,3 @@ jobs:
         continue-on-error: false
         run: |
           ./check-prettier.sh
-
-  run-components-tests:
-    name: "Components validation tests"
-    needs:
-      - review-warnings-and-build
-    runs-on: ${{ matrix.os }}
-    strategy:
-      matrix:
-        os: [ubuntu-latest]
-    steps:
-      - uses: actions/checkout@v2
-
-      - name: Install Dependencies
-        run: yarn install
-
-      - name: Run Jest Tests
-        run: yarn test

.nvmrc

@@ -0,0 +1 @@
+18

Dockerfile

@@ -1,3 +1,4 @@
-FROM nginx
+FROM nginx:1.23
 
+COPY nginx.conf /etc/nginx/nginx.conf
 COPY docs /usr/share/nginx/html

Makefile

@@ -8,3 +8,6 @@ lint:
 
 test:
 	@(yarn install; yarn test;)
+
+test-warnings:
+	./check-warnings.sh

check-warnings.sh

@@ -0,0 +1,19 @@
+#!/bin/bash
+
+yell() { echo "$0: $*" >&2; }
+
+die() {
+  yell "$*"
+  cat yarn.log
+  exit 111
+}
+
+try() { "$@" &> yarn.log || die "cannot $*"; }
+
+rm -f yarn.log
+try make build
+
+if cat yarn.log | grep "Compiled with warnings"; then
+  echo "There are warnings in the code"
+  exit 1
+fi

dist/cjs/assets/index-3e3b9830.css

@@ -0,0 +1,174 @@
+@media (prefers-color-scheme: dark) {
+  .w-tc-editor {
+    --color-fg-default: #c9d1d9;
+    --color-canvas-subtle: #161b22;
+    --color-prettylights-syntax-comment: #8b949e;
+    --color-prettylights-syntax-entity-tag: #7ee787;
+    --color-prettylights-syntax-entity: #d2a8ff;
+    --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
+    --color-prettylights-syntax-constant: #79c0ff;
+    --color-prettylights-syntax-string: #a5d6ff;
+    --color-prettylights-syntax-keyword: #ff7b72;
+    --color-prettylights-syntax-markup-bold: #c9d1d9;
+  }
+}
+@media (prefers-color-scheme: light) {
+  .w-tc-editor {
+    --color-fg-default: #24292f;
+    --color-canvas-subtle: #f6f8fa;
+    --color-prettylights-syntax-comment: #6e7781;
+    --color-prettylights-syntax-entity-tag: #116329;
+    --color-prettylights-syntax-entity: #8250df;
+    --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
+    --color-prettylights-syntax-constant: #0550ae;
+    --color-prettylights-syntax-string: #0a3069;
+    --color-prettylights-syntax-keyword: #cf222e;
+    --color-prettylights-syntax-markup-bold: #24292f;
+  }
+}
+.w-tc-editor[data-color-mode*="dark"],
+[data-color-mode*="dark"] .w-tc-editor,
+[data-color-mode*="dark"] .w-tc-editor-var,
+body[data-color-mode*="dark"] {
+  --color-fg-default: #c9d1d9;
+  --color-canvas-subtle: #161b22;
+  --color-prettylights-syntax-comment: #8b949e;
+  --color-prettylights-syntax-entity-tag: #7ee787;
+  --color-prettylights-syntax-entity: #d2a8ff;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
+  --color-prettylights-syntax-constant: #79c0ff;
+  --color-prettylights-syntax-string: #a5d6ff;
+  --color-prettylights-syntax-keyword: #ff7b72;
+  --color-prettylights-syntax-markup-bold: #c9d1d9;
+}
+.w-tc-editor[data-color-mode*="light"],
+[data-color-mode*="light"] .w-tc-editor,
+[data-color-mode*="light"] .w-tc-editor-var,
+body[data-color-mode*="light"] {
+  --color-fg-default: #24292f;
+  --color-canvas-subtle: #f6f8fa;
+  --color-prettylights-syntax-comment: #6e7781;
+  --color-prettylights-syntax-entity-tag: #116329;
+  --color-prettylights-syntax-entity: #8250df;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
+  --color-prettylights-syntax-constant: #0550ae;
+  --color-prettylights-syntax-string: #0a3069;
+  --color-prettylights-syntax-keyword: #cf222e;
+  --color-prettylights-syntax-markup-bold: #24292f;
+}
+.w-tc-editor {
+  font-family: inherit;
+  font-size: 12px;
+  background-color: var(--color-canvas-subtle);
+  color: var(--color-fg-default);
+}
+.w-tc-editor-text,
+.w-tc-editor-preview {
+  min-height: 16px;
+}
+.w-tc-editor-preview pre {
+  margin: 0;
+  padding: 0;
+  white-space: inherit;
+  font-family: inherit;
+  font-size: inherit;
+}
+.w-tc-editor-preview pre code {
+  font-family: inherit;
+}
+.w-tc-editor code[class*="language-"] .token.cdata,
+.w-tc-editor pre[class*="language-"] .token.cdata,
+.w-tc-editor code[class*="language-"] .token.comment,
+.w-tc-editor pre[class*="language-"] .token.comment,
+.w-tc-editor code[class*="language-"] .token.doctype,
+.w-tc-editor pre[class*="language-"] .token.doctype,
+.w-tc-editor code[class*="language-"] .token.prolog,
+.w-tc-editor pre[class*="language-"] .token.prolog {
+  color: var(--color-prettylights-syntax-comment);
+}
+.w-tc-editor code[class*="language-"] .token.punctuation,
+.w-tc-editor pre[class*="language-"] .token.punctuation {
+  color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
+}
+.w-tc-editor code[class*="language-"] .namespace,
+.w-tc-editor pre[class*="language-"] .namespace {
+  opacity: 0.7;
+}
+.w-tc-editor code[class*="language-"] .token.boolean,
+.w-tc-editor pre[class*="language-"] .token.boolean,
+.w-tc-editor code[class*="language-"] .token.constant,
+.w-tc-editor pre[class*="language-"] .token.constant,
+.w-tc-editor code[class*="language-"] .token.deleted,
+.w-tc-editor pre[class*="language-"] .token.deleted,
+.w-tc-editor code[class*="language-"] .token.number,
+.w-tc-editor pre[class*="language-"] .token.number,
+.w-tc-editor code[class*="language-"] .token.symbol,
+.w-tc-editor pre[class*="language-"] .token.symbol {
+  color: var(--color-prettylights-syntax-entity-tag);
+}
+.w-tc-editor code[class*="language-"] .token.builtin,
+.w-tc-editor pre[class*="language-"] .token.builtin,
+.w-tc-editor code[class*="language-"] .token.char,
+.w-tc-editor pre[class*="language-"] .token.char,
+.w-tc-editor code[class*="language-"] .token.inserted,
+.w-tc-editor pre[class*="language-"] .token.inserted,
+.w-tc-editor code[class*="language-"] .token.selector,
+.w-tc-editor pre[class*="language-"] .token.selector,
+.w-tc-editor code[class*="language-"] .token.string,
+.w-tc-editor pre[class*="language-"] .token.string {
+  color: var(--color-prettylights-syntax-constant);
+}
+.w-tc-editor code[class*="language-"] .style .token.string,
+.w-tc-editor pre[class*="language-"] .style .token.string,
+.w-tc-editor code[class*="language-"] .token.entity,
+.w-tc-editor pre[class*="language-"] .token.entity,
+.w-tc-editor code[class*="language-"] .token.property,
+.w-tc-editor pre[class*="language-"] .token.property,
+.w-tc-editor code[class*="language-"] .token.operator,
+.w-tc-editor pre[class*="language-"] .token.operator,
+.w-tc-editor code[class*="language-"] .token.url,
+.w-tc-editor pre[class*="language-"] .token.url {
+  color: var(--color-prettylights-syntax-constant);
+}
+.w-tc-editor code[class*="language-"] .token.atrule,
+.w-tc-editor pre[class*="language-"] .token.atrule,
+.w-tc-editor code[class*="language-"] .token.property-access .token.method,
+.w-tc-editor pre[class*="language-"] .token.property-access .token.method,
+.w-tc-editor code[class*="language-"] .token.keyword,
+.w-tc-editor pre[class*="language-"] .token.keyword {
+  color: var(--color-prettylights-syntax-keyword);
+}
+.w-tc-editor code[class*="language-"] .token.function,
+.w-tc-editor pre[class*="language-"] .token.function {
+  color: var(--color-prettylights-syntax-string);
+}
+.w-tc-editor code[class*="language-"] .token.important,
+.w-tc-editor pre[class*="language-"] .token.important,
+.w-tc-editor code[class*="language-"] .token.regex,
+.w-tc-editor pre[class*="language-"] .token.regex,
+.w-tc-editor code[class*="language-"] .token.variable,
+.w-tc-editor pre[class*="language-"] .token.variable {
+  color: var(--color-prettylights-syntax-string-regexp);
+}
+.w-tc-editor code[class*="language-"] .token.bold,
+.w-tc-editor pre[class*="language-"] .token.bold,
+.w-tc-editor code[class*="language-"] .token.important,
+.w-tc-editor pre[class*="language-"] .token.important {
+  color: var(--color-prettylights-syntax-markup-bold);
+}
+.w-tc-editor code[class*="language-"] .token.tag,
+.w-tc-editor pre[class*="language-"] .token.tag {
+  color: var(--color-prettylights-syntax-entity-tag);
+}
+.w-tc-editor code[class*="language-"] .token.attr-value,
+.w-tc-editor pre[class*="language-"] .token.attr-value,
+.w-tc-editor code[class*="language-"] .token.attr-name,
+.w-tc-editor pre[class*="language-"] .token.attr-name {
+  color: var(--color-prettylights-syntax-constant);
+}
+.w-tc-editor code[class*="language-"] .token.selector .class,
+.w-tc-editor pre[class*="language-"] .token.selector .class,
+.w-tc-editor code[class*="language-"] .token.class-name,
+.w-tc-editor pre[class*="language-"] .token.class-name {
+  color: var(--color-prettylights-syntax-entity);
+}

dist/cjs/types/components/ActionLink/ActionLink.d.ts

@@ -0,0 +1,6 @@
+import React, { FC } from "react";
+import { ActionLinkProps } from "./ActionLink.types";
+declare const ActionLink: FC<
+  ActionLinkProps & React.ButtonHTMLAttributes<HTMLButtonElement>
+>;
+export default ActionLink;

dist/cjs/types/components/ActionLink/ActionLink.types.d.ts

@@ -0,0 +1,9 @@
+import { CSSObject } from "styled-components";
+export interface CommonActionLinkProps {
+  isLoading?: boolean;
+  label?: any;
+}
+export interface BaseActionLinkProps {
+  sx?: CSSObject;
+}
+export type ActionLinkProps = CommonActionLinkProps & BaseActionLinkProps;

dist/cjs/types/components/ActionsList/ActionsList.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ActionsListProps } from "./ActionsList.types";
+declare const ActionsList: FC<ActionsListProps>;
+export default ActionsList;

dist/cjs/types/components/ActionsList/ActionsList.types.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { CSSObject } from "styled-components";
+export interface ActionItem {
+  action: () => void;
+  label: string;
+  disabled: boolean;
+  icon: React.ReactNode;
+  tooltip: string;
+}
+export interface ActionsListProps {
+  sx?: CSSObject;
+  items: ActionItem[];
+  title: React.ReactNode;
+}
+export interface ActionsListPanelProps {
+  sx?: CSSObject;
+}
+export interface ActionButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  label: string;
+  icon: React.ReactNode;
+}

dist/cjs/types/components/ActionsList/ObjectActionButton.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ActionButtonProps } from "./ActionsList.types";
+declare const ObjectActionButton: FC<ActionButtonProps>;
+export default ObjectActionButton;

dist/cjs/types/components/ApplicationLogo/ApplicationLogo.types.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 export interface ApplicationLogoProps {
   applicationName:
     | "console"
@@ -5,7 +6,12 @@ export interface ApplicationLogoProps {
     | "directpv"
     | "kes"
     | "subnet"
-    | "subnetops";
-  subVariant?: "simple" | "AGPL" | "standard" | "enterprise";
+    | "subnetops"
+    | "cloud"
+    | "releases"
+    | "vmbroker"
+    | "eureka";
+  subVariant?: "simple" | "AGPL" | "standard" | "enterprise" | "new";
   inverse?: boolean;
+  onClick?: React.MouseEventHandler<any> | undefined;
 }

dist/cjs/types/components/ApplicationLogo/Logos/Cloud/Cloud.d.ts

@@ -0,0 +1,4 @@
+import { FC, SVGProps } from "react";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+declare const Cloud: FC<SVGProps<any> & LogoBaseProps>;
+export default Cloud;

dist/cjs/types/components/ApplicationLogo/Logos/Eureka/Eureka.d.ts

@@ -0,0 +1,4 @@
+import { FC, SVGProps } from "react";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+declare const Eureka: FC<SVGProps<any> & LogoBaseProps>;
+export default Eureka;

dist/cjs/types/components/ApplicationLogo/Logos/Eureka/EurekaNew.d.ts

@@ -0,0 +1,4 @@
+import { FC, SVGProps } from "react";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+declare const EurekaNew: FC<SVGProps<any> & LogoBaseProps>;
+export default EurekaNew;

dist/cjs/types/components/ApplicationLogo/Logos/Releases/Releases.d.ts

@@ -0,0 +1,4 @@
+import { FC, SVGProps } from "react";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+declare const Releases: FC<SVGProps<any> & LogoBaseProps>;
+export default Releases;

dist/cjs/types/components/ApplicationLogo/Logos/VMBroker/VMBroker.d.ts

@@ -0,0 +1,4 @@
+import { FC, SVGProps } from "react";
+import { LogoBaseProps } from "../LogoBase/LogoBase.types";
+declare const VMBroker: FC<SVGProps<any> & LogoBaseProps>;
+export default VMBroker;

dist/cjs/types/components/Box/Box.types.d.ts

@@ -4,4 +4,6 @@ export interface BoxProps {
   sx?: CSSObject;
   children?: React.ReactNode;
   withBorders?: boolean;
+  customBorderPadding?: number | string;
+  useBackground?: boolean;
 }

dist/cjs/types/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { BreadcrumbsProps } from "./Breadcrumbs.types";
+declare const Breadcrumbs: FC<BreadcrumbsProps>;
+export default Breadcrumbs;

dist/cjs/types/components/Breadcrumbs/Breadcrumbs.types.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { CSSObject } from "styled-components";
+export interface BreadcrumbsProps {
+  sx?: CSSObject;
+  children: React.ReactNode;
+  additionalOptions?: React.ReactNode;
+  goBackFunction: () => void;
+}
+export interface BreadcrumbsContainerProps {
+  sx?: CSSObject;
+}

dist/cjs/types/components/Button/Button.types.d.ts

@@ -4,7 +4,7 @@ export interface ButtonProps {
   id: string;
   name?: string;
   label?: string;
-  variant?: "regular" | "callAction" | "secondary" | "text";
+  variant?: "regular" | "callAction" | "secondary" | "text" | "subAction";
   icon?: ReactNode;
   iconLocation?: "start" | "end";
   fullWidth?: boolean;

dist/cjs/types/components/Checkbox/Checkbox.types.d.ts

@@ -4,5 +4,5 @@ export interface CheckboxProps extends HTMLAttributes<HTMLInputElement> {
   label?: string;
   tooltip?: string;
   overrideLabelClasses?: string;
-  overrideCheckboxStyles?: CSSObject;
+  sx?: CSSObject;
 }

dist/cjs/types/components/CodeEditor/CodeEditor.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { CodeEditorProps } from "./CodeEditor.types";
+declare const CodeMirrorWrapper: FC<CodeEditorProps>;
+export default CodeMirrorWrapper;

dist/cjs/types/components/CodeEditor/CodeEditor.types.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { CSSObject } from "styled-components";
+export interface CodeEditorProps {
+  value: string;
+  label?: string;
+  mode?: string;
+  tooltip?: string;
+  editorHeight?: string | number;
+  onChange: (value: string) => any;
+  className?: string;
+  helpTools?: React.ReactNode;
+  sx?: CSSObject;
+}
+export interface CodeEditorBaseProps {
+  editorHeight: string | number;
+  sx?: CSSObject;
+  className?: string;
+}

dist/cjs/types/components/CommentBox/CommentBox.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { CommentBoxProps } from "./CommentBox.types";
+declare const InputBox: FC<CommentBoxProps>;
+export default InputBox;

dist/cjs/types/components/CommentBox/CommentBox.types.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { CSSObject } from "styled-components";
+export interface CommentBoxProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  id: string;
+  fullWidth?: boolean;
+  label?: string;
+  tooltip?: string;
+  sx?: CSSObject;
+  index?: number;
+  noLabelMinWidth?: boolean;
+  required?: boolean;
+  className?: string;
+  error?: string;
+}
+export interface CommentContainerProps {
+  children?: React.ReactNode;
+  sx?: CSSObject;
+  error?: boolean;
+  startIcon?: React.ReactNode;
+  className?: string;
+}
+export interface ExtraCommentProps {
+  originType?: string;
+}

dist/cjs/types/components/DataTable/ColumnsSelector.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ColumnSelectorProps } from "./DataTable.types";
+declare const ColumnsSelector: FC<ColumnSelectorProps>;
+export default ColumnsSelector;

dist/cjs/types/components/DataTable/DataTable.types.d.ts

@@ -1,10 +1,25 @@
 import React, { HTMLAttributes } from "react";
+import { CSSObject } from "styled-components";
+export declare const actionsTypes: readonly [
+  "view",
+  "edit",
+  "delete",
+  "description",
+  "share",
+  "cloud",
+  "console",
+  "download",
+  "disable",
+  "format",
+  "preview",
+];
+export type PredefinedActionTypes = (typeof actionsTypes)[number];
 export interface ItemActions {
-  label?: string;
-  type: string | any;
+  tooltip?: string;
+  type: PredefinedActionTypes | React.ReactNode;
   sendOnlyId?: boolean;
-  disableButtonFunction?: (itemValue: any) => boolean;
-  showLoaderFunction?: (itemValue: any) => boolean;
+  isDisabled?: boolean | ((itemValue: any) => boolean);
+  showLoader?: boolean | ((itemValue: any) => boolean);
   onClick?(valueToSend: any): any;
 }
 export interface IColumns {
@@ -47,7 +62,7 @@ export interface DataTableProps {
   columnsSelector?: boolean;
   textSelectable?: boolean;
   columnsShown?: string[];
-  onColumnChange?: (column: string, state: boolean) => any;
+  onColumnChange?: (column: string) => any;
   autoScrollToBottom?: boolean;
   infiniteScrollConfig?: IInfiniteScrollConfig;
   sortConfig?: ISortConfig;
@@ -59,15 +74,19 @@ export interface DataTableProps {
     index: number;
   }) => "deleted" | "" | React.CSSProperties;
   parentClassName?: string;
+  sx?: CSSObject;
+  rowHeight?: number;
 }
 export interface DataTableWrapperProps extends HTMLAttributes<HTMLDivElement> {
   disabled?: boolean;
   customPaperHeight?: string | number;
   noBackground?: boolean;
+  sx?: CSSObject;
+  rowHeight: number;
 }
 export interface IActionButton {
-  label?: string;
-  type: string | React.ReactNode;
+  tooltip?: string;
+  type: PredefinedActionTypes | React.ReactNode;
   onClick?: (id: string) => any;
   valueToSend: any;
   selected: boolean;
@@ -75,3 +94,15 @@ export interface IActionButton {
   idField: string;
   disabled: boolean;
 }
+export interface ColumnSelectorProps {
+  open: boolean;
+  closeTriggerAction: () => void;
+  onSelect: (column: string) => void;
+  columns: IColumns[];
+  selectedOptionIDs: string[];
+  sx?: CSSObject;
+  anchorEl?: (EventTarget & HTMLElement) | null;
+}
+export interface ColumnSelectorConstructProps {
+  sx?: CSSObject;
+}

dist/cjs/types/components/DataTable/DataTable.utils.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { IColumns, ItemActions } from "./DataTable.types";
 export declare const selectWidth = 45;
 export declare const generateColumnsMap: (
@@ -11,15 +12,29 @@ export declare const generateColumnsMap: (
   columnsSelector: boolean,
   columnsShown: string[],
   sortColumn: string,
-  sortDirection: "ASC" | "DESC" | undefined
-) => (JSX.Element | null)[];
+  sortDirection: "ASC" | "DESC" | undefined,
+) => (React.JSX.Element | null)[];
 export declare const elementActions: (
   actions: ItemActions[],
   valueToSend: any,
   selected: boolean,
-  idField: string
-) => (JSX.Element | null)[];
+  idField: string,
+) => (React.JSX.Element | null)[];
 export declare const calculateOptionsSize: (
   containerWidth: number,
-  totalOptions: number
+  totalOptions: number,
 ) => number;
+export declare const isPredefinedAction: (
+  val: any,
+) => val is
+  | "view"
+  | "console"
+  | "cloud"
+  | "format"
+  | "edit"
+  | "delete"
+  | "description"
+  | "share"
+  | "download"
+  | "disable"
+  | "preview";

dist/cjs/types/components/DropdownSelector/DropdownSelector.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { DropdownSelectorProps } from "./DropdownSelector.types";
+declare const DropdownSelector: FC<DropdownSelectorProps>;
+export default DropdownSelector;

dist/cjs/types/components/DropdownSelector/DropdownSelector.types.d.ts

@@ -0,0 +1,14 @@
+import { SelectorType } from "../../global/global.types";
+import { CSSObject } from "styled-components";
+export interface DropdownSelectorProps {
+  id: string;
+  options: SelectorType[];
+  selectedOption?: string;
+  onSelect: (value: string, extraValue?: any) => void;
+  hideTriggerAction: () => void;
+  open: boolean;
+  anchorEl?: (EventTarget & HTMLElement) | null;
+}
+export interface DropDownBlockProps {
+  sx: CSSObject;
+}

dist/cjs/types/components/ExpandOptionsButton/ExpandOptionsButton.d.ts

@@ -0,0 +1,6 @@
+import React, { FC } from "react";
+import { ExpandOptionsButtonProps } from "./ExpandOptionsButton.types";
+declare const ExpandOptionsButton: FC<
+  ExpandOptionsButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
+>;
+export default ExpandOptionsButton;

dist/cjs/types/components/ExpandOptionsButton/ExpandOptionsButton.types.d.ts

@@ -0,0 +1,9 @@
+import { CSSObject } from "styled-components";
+export interface ExpandOptionsButtonProps {
+  label: string;
+  open: boolean;
+  sx?: CSSObject;
+}
+export interface ConstructExpandOptionsProps {
+  sx?: CSSObject;
+}

dist/cjs/types/components/FormLayout/FormLayout.types.d.ts

@@ -6,4 +6,6 @@ export interface FormLayoutProps {
   title?: string;
   icon?: React.ReactNode;
   helpBox?: React.ReactNode;
+  withBorders?: boolean;
+  containerPadding?: boolean;
 }

dist/cjs/types/components/HelpBox/HelpBox.types.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 export interface HelpBoxProps {
-  iconComponent: any;
+  iconComponent?: any;
   title: string | React.ReactNode;
   help: any;
 }

dist/cjs/types/components/IconButton/IconButton.types.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
 import { CSSObject } from "styled-components";
-export interface IconButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface IconBase {
   label?: string;
   size?: "small" | "medium" | "large" | string;
   sx?: CSSObject;
   children: React.ReactNode;
 }
+export type IconButtonProps = IconBase &
+  React.ButtonHTMLAttributes<HTMLButtonElement>;

dist/cjs/types/components/Icons/AGPLV3DarkLogo.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const AGPLV3DarkLogo: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const AGPLV3DarkLogo: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default AGPLV3DarkLogo;

dist/cjs/types/components/Icons/AGPLV3LightLogo.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const AGPLV3LightLogo: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const AGPLV3LightLogo: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default AGPLV3LightLogo;

dist/cjs/types/components/Icons/AGPLV3Logo.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const AGPLV3Logo: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const AGPLV3Logo: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default AGPLV3Logo;

dist/cjs/types/components/Icons/AccessRuleIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const AccessRuleIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const AccessRuleIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default AccessRuleIcon;

dist/cjs/types/components/Icons/AccountIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const AccountIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const AccountIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default AccountIcon;

dist/cjs/types/components/Icons/AddAccessRuleIcon.d.ts

@@ -1,5 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
 declare const AddAccessRuleIcon: (
-  props: SVGProps<SVGSVGElement>
-) => JSX.Element;
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default AddAccessRuleIcon;

dist/cjs/types/components/Icons/AddFolderIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const AddFolderIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const AddFolderIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default AddFolderIcon;

dist/cjs/types/components/Icons/AddIcon.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const AddIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const AddIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default AddIcon;

dist/cjs/types/components/Icons/AddMembersToGroupIcon.d.ts

@@ -1,5 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
 declare const AddMembersToGroupIcon: (
-  props: SVGProps<SVGSVGElement>
-) => JSX.Element;
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default AddMembersToGroupIcon;

dist/cjs/types/components/Icons/AddNewTagIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const AddNewTagIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const AddNewTagIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default AddNewTagIcon;

dist/cjs/types/components/Icons/AlertCloseIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const AlertCloseIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const AlertCloseIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default AlertCloseIcon;

dist/cjs/types/components/Icons/AlertIcon.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const AlertIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const AlertIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default AlertIcon;

dist/cjs/types/components/Icons/AllBucketsIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const AllBucketsIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const AllBucketsIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default AllBucketsIcon;

dist/cjs/types/components/Icons/ArrowDropDown.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const ArrowDropUp: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const ArrowDropUp: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default ArrowDropUp;

dist/cjs/types/components/Icons/ArrowDropUp.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const ArrowDropUp: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const ArrowDropUp: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default ArrowDropUp;

dist/cjs/types/components/Icons/ArrowIcon.d.ts

@@ -1,3 +1,3 @@
-import { SVGProps } from "react";
-declare const ArrowIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+import React, { SVGProps } from "react";
+declare const ArrowIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default ArrowIcon;

dist/cjs/types/components/Icons/ArrowRightIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const ArrowRightIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const ArrowRightIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default ArrowRightIcon;

dist/cjs/types/components/Icons/ArrowRightLink.d.ts

@@ -1,3 +1,5 @@
-import { SVGProps } from "react";
-declare const ArrowRightLink: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+import React, { SVGProps } from "react";
+declare const ArrowRightLink: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default ArrowRightLink;

dist/cjs/types/components/Icons/AudioIcon.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { SVGProps } from "react";
+declare const AudioIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default AudioIcon;

dist/cjs/types/components/Icons/AudioIconMute.d.ts

@@ -0,0 +1,5 @@
+import React, { SVGProps } from "react";
+declare const AudioIconMute: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
+export default AudioIconMute;

dist/cjs/types/components/Icons/AzureTierIcon.d.ts

@@ -1,3 +1,5 @@
-import { SVGProps } from "react";
-declare const AzureTierIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+import React, { SVGProps } from "react";
+declare const AzureTierIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default AzureTierIcon;

dist/cjs/types/components/Icons/AzureTierIconXs.d.ts

@@ -1,3 +1,5 @@
-import { SVGProps } from "react";
-declare const AzureTierIconXs: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+import React, { SVGProps } from "react";
+declare const AzureTierIconXs: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default AzureTierIconXs;

dist/cjs/types/components/Icons/BackCaretIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const BackCaretIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const BackCaretIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default BackCaretIcon;

dist/cjs/types/components/Icons/BackIcon.d.ts

@@ -1,3 +1,3 @@
-import { SVGProps } from "react";
-declare const BackIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+import React, { SVGProps } from "react";
+declare const BackIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default BackIcon;

dist/cjs/types/components/Icons/BackSettingsIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const BackSettingsIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const BackSettingsIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default BackSettingsIcon;

dist/cjs/types/components/Icons/BoxArrowDown.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const BoxArrowDown: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const BoxArrowDown: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default BoxArrowDown;

dist/cjs/types/components/Icons/BoxArrowUp.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const BoxArrowUp: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const BoxArrowUp: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default BoxArrowUp;

dist/cjs/types/components/Icons/BucketEncryptionIcon.d.ts

@@ -1,5 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
 declare const BucketEncryptionIcon: (
-  props: SVGProps<SVGSVGElement>
-) => JSX.Element;
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default BucketEncryptionIcon;

dist/cjs/types/components/Icons/BucketQuotaIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const BucketQuotaIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const BucketQuotaIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default BucketQuotaIcon;

dist/cjs/types/components/Icons/BucketReplicationIcon.d.ts

@@ -1,5 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
 declare const BucketReplicationIcon: (
-  props: SVGProps<SVGSVGElement>
-) => JSX.Element;
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default BucketReplicationIcon;

dist/cjs/types/components/Icons/BucketsIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const BucketsIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const BucketsIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default BucketsIcon;

dist/cjs/types/components/Icons/CalendarIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const CalendarIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const CalendarIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default CalendarIcon;

dist/cjs/types/components/Icons/CallHomeFeatureIcon.d.ts

@@ -1,5 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
 declare const CallHomeFeatureIcon: (
-  props: SVGProps<SVGSVGElement>
-) => JSX.Element;
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default CallHomeFeatureIcon;

dist/cjs/types/components/Icons/CancelledAudioIcon.d.ts

@@ -0,0 +1,5 @@
+import React, { SVGProps } from "react";
+declare const CancelledAudioIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
+export default CancelledAudioIcon;

dist/cjs/types/components/Icons/CancelledIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const CancelledIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const CancelledIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default CancelledIcon;

dist/cjs/types/components/Icons/CertificateIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const CertificateIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const CertificateIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default CertificateIcon;

dist/cjs/types/components/Icons/ChangeAccessPolicyIcon.d.ts

@@ -1,5 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
 declare const ChangeAccessPolicyIcon: (
-  props: SVGProps<SVGSVGElement>
-) => JSX.Element;
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default ChangeAccessPolicyIcon;

dist/cjs/types/components/Icons/ChangePasswordIcon.d.ts

@@ -1,5 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
 declare const ChangePasswordIcon: (
-  props: SVGProps<SVGSVGElement>
-) => JSX.Element;
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default ChangePasswordIcon;

dist/cjs/types/components/Icons/ChatIcon.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { SVGProps } from "react";
+declare const ChatIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default ChatIcon;

dist/cjs/types/components/Icons/CircleIcon.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const CircleIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const CircleIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default CircleIcon;

dist/cjs/types/components/Icons/ClosePanelIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const ClosePanelIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const ClosePanelIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default ClosePanelIcon;

dist/cjs/types/components/Icons/CloudIcon.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const CloudIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const CloudIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default CloudIcon;

dist/cjs/types/components/Icons/ClustersIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const ClustersIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const ClustersIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default ClustersIcon;

dist/cjs/types/components/Icons/CollapseCaret.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const CollapseCaret: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const CollapseCaret: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default CollapseCaret;

dist/cjs/types/components/Icons/CollapseIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const CollapseIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const CollapseIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default CollapseIcon;

dist/cjs/types/components/Icons/CollapseMenuIcon.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+declare const CollapseMenuIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
+export default CollapseMenuIcon;

dist/cjs/types/components/Icons/ComputerLineIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const ComputerLineIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const ComputerLineIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default ComputerLineIcon;

dist/cjs/types/components/Icons/ConfigurationsListIcon.d.ts

@@ -1,5 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
 declare const ConfigurationsListIcon: (
-  props: SVGProps<SVGSVGElement>
-) => JSX.Element;
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default ConfigurationsListIcon;

dist/cjs/types/components/Icons/ConfirmDeleteIcon.d.ts

@@ -1,5 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
 declare const ConfirmDeleteIcon: (
-  props: SVGProps<SVGSVGElement>
-) => JSX.Element;
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default ConfirmDeleteIcon;

dist/cjs/types/components/Icons/ConfirmModalIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const ConfirmModalIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const ConfirmModalIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default ConfirmModalIcon;

dist/cjs/types/components/Icons/ConsoleAgpl.d.ts

@@ -1,3 +1,5 @@
-import { SVGProps } from "react";
-declare const ConsoleAgpl: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+import React, { SVGProps } from "react";
+declare const ConsoleAgpl: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default ConsoleAgpl;

dist/cjs/types/components/Icons/ConsoleEnterprise.d.ts

@@ -1,5 +1,5 @@
-import { SVGProps } from "react";
+import React, { SVGProps } from "react";
 declare const ConsoleEnterprise: (
-  props: SVGProps<SVGSVGElement>
-) => JSX.Element;
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default ConsoleEnterprise;

dist/cjs/types/components/Icons/ConsoleIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const ConsoleIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const ConsoleIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default ConsoleIcon;

dist/cjs/types/components/Icons/ConsoleStandard.d.ts

@@ -1,3 +1,5 @@
-import { SVGProps } from "react";
-declare const ConsoleStandard: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+import React, { SVGProps } from "react";
+declare const ConsoleStandard: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default ConsoleStandard;

dist/cjs/types/components/Icons/CopyIcon.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const CopyIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const CopyIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default CopyIcon;

dist/cjs/types/components/Icons/CreateGroupIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const CreateGroupIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const CreateGroupIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default CreateGroupIcon;

dist/cjs/types/components/Icons/CreateIcon.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const CreateIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const CreateIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default CreateIcon;

dist/cjs/types/components/Icons/CreateNewPathIcon.d.ts

@@ -1,5 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
 declare const CreateNewPathIcon: (
-  props: SVGProps<SVGSVGElement>
-) => JSX.Element;
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default CreateNewPathIcon;

dist/cjs/types/components/Icons/CreateUserIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const CreateUserIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const CreateUserIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default CreateUserIcon;

dist/cjs/types/components/Icons/DashboardIcon.d.ts

@@ -1,3 +1,6 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const DashboardIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const DashboardIcon: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
 export default DashboardIcon;

dist/cjs/types/components/Icons/DeleteIcon.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { SVGProps } from "react";
-declare const DeleteIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const DeleteIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default DeleteIcon;