Release v0.18.0 (#662)

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

.github/workflows/deployer.yml

@@ -0,0 +1,46 @@
+name: Build Container
+
+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@v4
+        with:
+          node-version: ${{ env.NVMRC }}
+          cache: "yarn"
+          cache-dependency-path: yarn.lock
+
+      - 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: |
+          rm -Rf node_modules/
+          rm yarn.lock
+          yarn install
+          yarn build
+          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,11 +20,21 @@ 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
         run: |
+          corepack enable
           yarn install
 
       - name: Check if build is correct
@@ -36,20 +46,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

.storybook/main.js

@@ -5,6 +5,9 @@ module.exports = {
     "../src/**/**/*.stories.mdx",
     "../src/**/**/*.stories.@(js|jsx|ts|tsx)",
   ],
+  core: {
+    disableTelemetry: true,
+  },
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",

Dockerfile

@@ -1,3 +1,4 @@
-FROM nginx
+FROM nginx:1
 
+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/Accordion/Accordion.d.ts

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

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

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+import { CSSObject } from "styled-components";
+export interface AccordionProps {
+  expanded: boolean;
+  onTitleClick: () => void;
+  id: string;
+  title: ReactNode;
+  children: ReactNode;
+  disabled?: boolean;
+  sx?: CSSObject;
+}
+export interface AccordionMainProps {
+  sx?: CSSObject;
+}
+export interface AccordionContentProps {
+  expanded: boolean;
+}

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,22 @@ export interface ApplicationLogoProps {
     | "directpv"
     | "kes"
     | "subnet"
-    | "subnetops";
-  subVariant?: "simple" | "AGPL" | "standard" | "enterprise";
+    | "subnetops"
+    | "cloud"
+    | "releases"
+    | "vmbroker"
+    | "eureka"
+    | "kms"
+    | "loadbalancer"
+    | "index"
+    | "cache"
+    | "monitor"
+    | "observe"
+    | "missioncontrol"
+    | "globalconsole"
+    | "minio"
+    | "enterprise";
+  subVariant?: "simple" | "AGPL" | "standard" | "enterprise" | "new";
   inverse?: boolean;
+  onClick?: React.MouseEventHandler<any> | undefined;
 }

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

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

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/Console/GlobalConsole.d.ts

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

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

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

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/IndexLogo/IndexLogo.d.ts

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

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

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

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

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

dist/cjs/types/components/ApplicationLogo/Logos/MinIO/MinIOEnterprise.d.ts

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

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

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

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

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

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

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

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/Autocomplete/Autocomplete.d.ts

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

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { CSSObject } from "styled-components";
+import { SelectorType } from "../../global/global.types";
+import { CommonHelpTipPlacement } from "../HelpTip/HelpTip.types";
+export interface AutocompleteProps {
+  options: SelectorType[];
+  value?: string;
+  id: string;
+  name?: string;
+  required?: boolean;
+  className?: string;
+  disabled?: boolean;
+  displayDropArrow?: boolean;
+  label?: string;
+  tooltip?: string;
+  noLabelMinWidth?: boolean;
+  placeholder?: string;
+  onChange: (newValue: string, extraValue?: any) => void;
+  sx?: CSSObject;
+  helpTip?: React.ReactNode;
+  helpTipPlacement?: CommonHelpTipPlacement;
+}

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

@@ -0,0 +1,4 @@
+import { FC, HTMLAttributes } from "react";
+import { BadgeProps } from "./Badge.types";
+declare const Badge: FC<HTMLAttributes<HTMLSpanElement> & BadgeProps>;
+export default Badge;

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

@@ -0,0 +1,16 @@
+import { CSSObject } from "styled-components";
+export interface BadgeMain {
+  invisible?: boolean;
+  max?: number;
+  showZero?: boolean;
+  badgeContent?: number;
+}
+export interface BadgeConstruct {
+  horizontalPosition?: "left" | "right";
+  verticalPosition?: "bottom" | "top";
+  sx?: CSSObject;
+  color?: "default" | "secondary" | "warn" | "alert" | "ok" | "grey";
+  shape?: "circular" | "rectangular";
+  dotOnly?: boolean;
+}
+export type BadgeProps = BadgeMain & BadgeConstruct;

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

@@ -1,8 +1,11 @@
-import { HTMLAttributes } from "react";
+import React, { HTMLAttributes } from "react";
 import { CSSObject } from "styled-components";
+import { CommonHelpTipPlacement } from "../HelpTip/HelpTip.types";
 export interface CheckboxProps extends HTMLAttributes<HTMLInputElement> {
   label?: string;
   tooltip?: string;
   overrideLabelClasses?: string;
-  overrideCheckboxStyles?: CSSObject;
+  sx?: CSSObject;
+  helpTip?: React.ReactNode;
+  helpTipPlacement?: CommonHelpTipPlacement;
 }

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,21 @@
+import React from "react";
+import { CSSObject } from "styled-components";
+import { CommonHelpTipPlacement } from "../HelpTip/HelpTip.types";
+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;
+  helpTip?: React.ReactNode;
+  helpTipPlacement?: CommonHelpTipPlacement;
+}
+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,28 @@
+import React from "react";
+import { CSSObject } from "styled-components";
+import { CommonHelpTipPlacement } from "../HelpTip/HelpTip.types";
+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;
+  helpTip?: React.ReactNode;
+  helpTipPlacement?: CommonHelpTipPlacement;
+}
+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,26 @@
 import React, { HTMLAttributes } from "react";
+import { CSSObject } from "styled-components";
+import { SortDirectionType } from "react-virtualized";
+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 {
@@ -26,8 +42,12 @@ export interface IInfiniteScrollConfig {
   }) => Promise<any>;
   recordsCount: number;
 }
+export interface ITableSortInfo {
+  sortBy: string;
+  sortDirection: SortDirectionType;
+}
 export interface ISortConfig {
-  triggerSort: (val: any) => any;
+  onSortClick: (val: ITableSortInfo) => any;
   currentSort: string;
   currentDirection: "ASC" | "DESC" | undefined;
 }
@@ -47,10 +67,9 @@ 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;
   disabled?: boolean;
   onSelectAll?: () => void;
   rowStyle?: ({
@@ -59,15 +78,21 @@ export interface DataTableProps {
     index: number;
   }) => "deleted" | "" | React.CSSProperties;
   parentClassName?: string;
+  sx?: CSSObject;
+  rowHeight?: number;
+  sortEnabled?: boolean | string[] | ISortConfig;
+  sortCallBack?: (info: ITableSortInfo) => void;
 }
 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 +100,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,4 +1,6 @@
-import { IColumns, ItemActions } from "./DataTable.types";
+import React from "react";
+import { SortDirectionType } from "react-virtualized";
+import { IColumns, ISortConfig, ItemActions } from "./DataTable.types";
 export declare const selectWidth = 45;
 export declare const generateColumnsMap: (
   columns: IColumns[],
@@ -10,16 +12,22 @@ export declare const generateColumnsMap: (
   idField: string,
   columnsSelector: boolean,
   columnsShown: string[],
-  sortColumn: string,
-  sortDirection: "ASC" | "DESC" | undefined
-) => (JSX.Element | null)[];
+  sortColumns: boolean | string[] | ISortConfig,
+  currentSortColumn: string | undefined,
+  currentSortDirection: "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 sortRecords: (
+  records: any[],
+  sortColumn: string | undefined,
+  sortDirection: SortDirectionType,
+) => any[];

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

@@ -1,4 +1,18 @@
 import { FC } from "react";
 import { IActionButton } from "./DataTable.types";
+export declare const isPredefinedAction: (
+  val: any,
+) => val is
+  | "view"
+  | "console"
+  | "cloud"
+  | "format"
+  | "edit"
+  | "delete"
+  | "description"
+  | "share"
+  | "download"
+  | "disable"
+  | "preview";
 declare const TableActionButton: FC<IActionButton>;
 export default TableActionButton;

dist/cjs/types/components/DateTimeInput/DateSelector.d.ts

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

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

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

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

@@ -0,0 +1,57 @@
+import React from "react";
+import { DateTime } from "luxon";
+import { CSSObject } from "styled-components";
+import { CommonHelpTipPlacement } from "../HelpTip/HelpTip.types";
+export interface DateTimeInputMain {
+  pickerStartComponent?: React.ReactNode;
+  className?: string;
+  label?: string;
+  required?: boolean;
+  tooltip?: string;
+  disabled?: boolean;
+  openPickerIcon?: "arrow" | React.ReactNode;
+  displayFormat?: string;
+  helpTip?: React.ReactNode;
+  helpTipPlacement?: CommonHelpTipPlacement;
+  noLabelMinWidth?: boolean;
+  pickerSx?: CSSObject;
+}
+export interface DateTimeConstruct {
+  id: string;
+  sx?: CSSObject;
+  mode?: "all" | "date";
+  value: DateTime | null;
+  onChange: (value: DateTime | null) => void;
+  minDate?: DateTime;
+  maxDate?: DateTime;
+  usePortal?: boolean;
+}
+export interface DateTimeSelectorMain {
+  open?: boolean;
+  anchorEl?: (EventTarget & HTMLElement) | null;
+  onClose?: () => void;
+}
+export interface TimeSelectorProps {
+  value: DateTime | null;
+  onChange: (value: DateTime | null) => void;
+  completeCallback?: () => void;
+  timeFormat?: "12h" | "24h";
+  secondsSelector: boolean;
+}
+export interface DateSelectorProps {
+  minDate?: DateTime;
+  maxDate?: DateTime;
+  value: DateTime | null;
+  onChange: (value: DateTime | null) => void;
+}
+export interface StylesOverrideProps {
+  isPortal: boolean;
+  mode: "all" | "date";
+  sx?: CSSObject;
+}
+export type DateTimeInputProps = DateTimeInputMain &
+  DateTimeConstruct &
+  TimeSelectorProps;
+export type DateTimeSelectorProps = DateTimeSelectorMain &
+  DateTimeConstruct &
+  TimeSelectorProps;

dist/cjs/types/components/DateTimeInput/DateTimeSelector.d.ts

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

dist/cjs/types/components/DateTimeInput/TimeSelector.d.ts

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

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,28 @@
+import React from "react";
+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,
+    label?: string,
+    selectedIndex?: number,
+  ) => void;
+  hideTriggerAction: () => void;
+  open: boolean;
+  anchorEl?: (EventTarget & HTMLElement) | null;
+  anchorOrigin?: "start" | "end";
+  useAnchorWidth?: boolean;
+}
+export interface DropDownBlockProps {
+  useAnchorWidth: boolean;
+  sx: CSSObject;
+}
+export interface DropdownItemProps {
+  icon?: React.ReactNode;
+  label: string;
+  indicator?: React.ReactNode;
+}

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/FileSelector/FileSelector.d.ts

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

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { CSSObject } from "styled-components";
+import { CommonHelpTipPlacement } from "../HelpTip/HelpTip.types";
+export interface FileSelectorProps {
+  label: string;
+  onChange: (
+    event: React.ChangeEvent<HTMLInputElement>,
+    fileName: string,
+    data?: string,
+  ) => void;
+  returnEncodedData?: boolean;
+  id: string;
+  name: string;
+  disabled?: boolean;
+  tooltip?: string;
+  required?: boolean;
+  error?: string;
+  accept?: string;
+  value: string;
+  className?: string;
+  noLabelMinWidth?: boolean;
+  sx?: CSSObject;
+  helpTip?: React.ReactNode;
+  helpTipPlacement?: CommonHelpTipPlacement;
+}
+export interface FileSelectorConstructorProps {
+  children?: React.ReactNode;
+  sx?: CSSObject;
+  error?: boolean;
+  startIcon?: React.ReactNode;
+  className?: string;
+}

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

@@ -0,0 +1 @@
+export declare const fileProcess: (evt: any, callback: any) => void;

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/HelpTip/HelpTip.d.ts

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

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

@@ -0,0 +1,16 @@
+import React from "react";
+export type CommonHelpTipPlacement = "bottom" | "left" | "right" | "top";
+export interface HelpTipProps {
+  children: any;
+  content: React.ReactNode;
+  errorProps?: any;
+  placement?: CommonHelpTipPlacement;
+}
+export interface HelpTipBuild {
+  placement: CommonHelpTipPlacement;
+}
+export interface HelpTipConstructProps {
+  placement: CommonHelpTipPlacement;
+  content: React.ReactNode;
+  anchorEl: (EventTarget & HTMLSpanElement) | null;
+}

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/AttachFileIcon.d.ts

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

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/AutoModeIcon.d.ts

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

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;