Release v1.0.4 (#1105)

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

.github/workflows/deployer.yml

@@ -23,24 +23,21 @@ jobs:
       - name: Read .nvmrc
         id: node_version
         run: echo "$(cat .nvmrc)" && echo "NVMRC=$(cat .nvmrc)" >> $GITHUB_ENV
-      - name: Enable Corepack
-        run: corepack enable
+
       - uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NVMRC }}
           cache: "yarn"
           cache-dependency-path: yarn.lock
 
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ secrets.REGISTRY_URL }}
-          username: ${{ secrets.REGISTRY_USERNAME }}
-          password: ${{ secrets.REGISTRY_PASSWORD }}
+      - 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 install --immutable
+          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 .

.github/workflows/jobs.yml

@@ -35,7 +35,7 @@ jobs:
         continue-on-error: false
         run: |
           corepack enable
-          yarn install --immutable
+          yarn install
 
       - name: Check if build is correct
         continue-on-error: false

.gitignore

@@ -12,11 +12,3 @@ node_modules/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-.yarn/*
-!.yarn/cache
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions

.prettierrc.json

@@ -1 +0,0 @@
-{}

.storybook/main.js

@@ -2,11 +2,9 @@ import remarkGfm from "remark-gfm";
 
 module.exports = {
   stories: ["../src/**/**/*.mdx", "../src/**/**/*.stories.@(js|jsx|ts|tsx)"],
-
   core: {
     disableTelemetry: true,
   },
-
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
@@ -25,15 +23,9 @@ module.exports = {
     "@storybook/addon-webpack5-compiler-babel",
     "@chromatic-com/storybook",
   ],
-
   framework: {
     name: "@storybook/react-webpack5",
     options: {},
   },
-
   docs: {},
-
-  typescript: {
-    reactDocgen: "react-docgen-typescript",
-  },
 };

.yarnrc.yml

@@ -1,3 +0,0 @@
-checksumBehavior: reset
-
-nodeLinker: node-modules

check-prettier.sh

@@ -1,3 +1,4 @@
 #!/bin/bash
 
-yarn dlx prettier --check ./src
+yarn install
+yarn prettier --check ./src

dist/assets/fonts/Geist/LICENSE.TXT

@@ -1,92 +0,0 @@
-Geist Sans and Geist Mono Font
-(C) 2023 Vercel, made in collaboration with basement.studio
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is available with a FAQ at: http://scripts.sil.org/OFL and copied below
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded,
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION AND CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

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.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/ApplicationLogo/Logos/LogoBase/LogoBase.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { LogoBaseProps } from "./LogoBase.types";
+declare const LogoBase: import("styled-components").StyledComponent<
+  "svg",
+  any,
+  React.SVGProps<any> & LogoBaseProps,
+  never
+>;
+export default LogoBase;

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

@@ -0,0 +1,21 @@
+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/BackLink/BackLink.types.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { CSSProperties } from "styled-components";
+export interface BackLinkProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  sx?: CSSProperties;
+  label?: string;
+}

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

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

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { CSSObject } from "styled-components";
+export interface BoxProps {
+  sx?: CSSObject;
+  children?: React.ReactNode;
+  withBorders?: boolean;
+  customBorderPadding?: number | string;
+  useBackground?: boolean;
+}

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

@@ -0,0 +1,19 @@
+import { MouseEventHandler, ReactNode } from "react";
+import { CSSObject } from "styled-components";
+export interface ButtonProps {
+  id: string;
+  name?: string;
+  label?: string;
+  variant?: "regular" | "callAction" | "secondary" | "text" | "subAction";
+  icon?: ReactNode;
+  iconLocation?: "start" | "end";
+  fullWidth?: boolean;
+  disabled?: boolean;
+  collapseOnSmall?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  children?: ReactNode | string;
+  sx?: CSSObject;
+}
+export interface ConstructProps {
+  parentChildren: ReactNode | string | undefined;
+}

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

@@ -0,0 +1,11 @@
+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;
+  sx?: CSSObject;
+  helpTip?: React.ReactNode;
+  helpTipPlacement?: CommonHelpTipPlacement;
+}

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

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

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

@@ -0,0 +1,114 @@
+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 {
+  tooltip?: string;
+  type: PredefinedActionTypes | React.ReactNode;
+  sendOnlyId?: boolean;
+  isDisabled?: boolean | ((itemValue: any) => boolean);
+  showLoader?: boolean | ((itemValue: any) => boolean);
+  onClick?(valueToSend: any): any;
+}
+export interface IColumns {
+  label: string;
+  elementKey?: string;
+  renderFunction?: (input: any) => any;
+  renderFullObject?: boolean;
+  globalClass?: any;
+  rowClass?: any;
+  width?: number;
+  headerTextAlign?: string;
+  contentTextAlign?: string;
+  enableSort?: boolean;
+}
+export interface IInfiniteScrollConfig {
+  loadMoreRecords: (indexElements: {
+    startIndex: number;
+    stopIndex: number;
+  }) => Promise<any>;
+  recordsCount: number;
+}
+export interface ITableSortInfo {
+  sortBy: string;
+  sortDirection: SortDirectionType;
+}
+export interface ISortConfig {
+  onSortClick: (val: ITableSortInfo) => any;
+  currentSort: string;
+  currentDirection: "ASC" | "DESC" | undefined;
+}
+export interface DataTableProps {
+  itemActions?: ItemActions[] | null;
+  columns: IColumns[];
+  onSelect?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  idField?: string;
+  isLoading?: boolean;
+  loadingMessage?: React.ReactNode;
+  records: any[];
+  entityName?: string;
+  selectedItems?: string[];
+  customEmptyMessage?: string;
+  customPaperHeight?: string;
+  noBackground?: boolean;
+  columnsSelector?: boolean;
+  textSelectable?: boolean;
+  columnsShown?: string[];
+  onColumnChange?: (column: string) => any;
+  autoScrollToBottom?: boolean;
+  infiniteScrollConfig?: IInfiniteScrollConfig;
+  disabled?: boolean;
+  onSelectAll?: () => void;
+  rowStyle?: ({
+    index,
+  }: {
+    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 {
+  tooltip?: string;
+  type: PredefinedActionTypes | React.ReactNode;
+  onClick?: (id: string) => any;
+  valueToSend: any;
+  selected: boolean;
+  sendOnlyId?: boolean;
+  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

@@ -0,0 +1,33 @@
+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[],
+  containerWidth: number,
+  actionsWidth: number,
+  hasSelect: boolean,
+  hasActions: boolean,
+  selectedItems: string[],
+  idField: string,
+  columnsSelector: boolean,
+  columnsShown: string[],
+  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,
+) => (React.JSX.Element | null)[];
+export declare const calculateOptionsSize: (
+  containerWidth: number,
+  totalOptions: number,
+) => number;
+export declare const sortRecords: (
+  records: any[],
+  sortColumn: string | undefined,
+  sortDirection: SortDirectionType,
+) => any[];

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

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import { IActionButton, PredefinedActionTypes } from "./DataTable.types";
+export declare const isPredefinedAction: (
+  val: any,
+) => val is PredefinedActionTypes;
+declare const TableActionButton: FC<IActionButton>;
+export default TableActionButton;

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/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;
+}