@bitrise/bitkit 9.26.3 → 9.28.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.26.3",
+  "version": "9.28.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -55,7 +55,7 @@
   "devDependencies": {
     "@babel/core": "^7.18.2",
     "@babel/parser": "^7.18.2",
-    "@bitrise/eslint-plugin": "^2.1.0",
+    "@bitrise/eslint-plugin": "2.2.0",
     "@chakra-ui/cli": "^1.9.0",
     "@chakra-ui/storybook-addon": "^1.0.3",
     "@commitlint/cli": "^16.3.0",

package/src/Components/Badge/Badge.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Badge as ChakraBadge, BadgeProps as ChakraBadgeProps } from '@chakra-ui/react';
 
 export type BadgeProps = ChakraBadgeProps;

package/src/Components/Box/Box.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box as ChakraBox, BoxProps, forwardRef } from '@chakra-ui/react';
 
 /**

package/src/Components/Button/Button.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button as ChakraButton, ButtonProps as ChakraButtonProps, forwardRef } from '@chakra-ui/react';
 import Icon, { TypeIconName } from '../Icon/Icon';
 

package/src/Components/ButtonGroup/ButtonGroup.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ButtonGroup as ChakraButtonGroup, ButtonGroupProps } from '@chakra-ui/react';
 
 export type { ButtonGroupProps };

package/src/Components/Card/Card.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable no-underscore-dangle */
-import React from 'react';
 import { forwardRef, HTMLChakraProps, useStyleConfig } from '@chakra-ui/react';
 import { Radii } from '../../Foundations/Radii/Radii';
 import { Shadows } from '../../Foundations/Shadows/Shadows';
@@ -32,6 +30,7 @@ const Card = forwardRef<CardProps, 'div'>((props, ref) => {
     (properties as HTMLChakraProps<'button'>).type = 'button';
   }
   if (props.as === 'a' || props.as === 'button') {
+    // eslint-disable-next-line no-underscore-dangle
     properties._hover = {
       boxShadow: '0 0 0px 2px var(--colors-purple-50)',
     };

package/src/Components/Card/CardContent.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Box, { BoxProps } from '../Box/Box';
 
 export type CardContentProps = BoxProps;

package/src/Components/CloseButton/CloseButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   forwardRef,
   CloseButton as ChakraCloseButton,

package/src/Components/ColorButton/ColorButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button as ChakraButton, ButtonProps as ChakraButtonProps, forwardRef, useStyleConfig } from '@chakra-ui/react';
 
 export interface ColorButtonProps extends ChakraButtonProps {

package/src/Components/Dialog/Dialog.stories.tsx

@@ -0,0 +1,57 @@
+import { Story, ComponentMeta } from '@storybook/react';
+import Button from '../Button/Button';
+import Dialog, { DialogProps, useDialog } from './Dialog';
+import DialogBody from './DialogBody';
+import DialogFooter from './DialogFooter';
+
+export default {
+  title: 'Components/Dialog',
+  component: Dialog,
+} as ComponentMeta<typeof Dialog>;
+
+const TextContent = () => (
+  <p>
+    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
+    of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
+    into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
+    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+    PageMaker including versions of Lorem Ipsum.
+  </p>
+);
+
+interface StoryType extends DialogProps {
+  lotsOfContent: boolean;
+}
+
+export const WithProps: Story<StoryType> = ({ lotsOfContent, ...props }: StoryType) => {
+  const state = useDialog();
+
+  return (
+    <>
+      <Button onClick={state.onOpen}>Open Dialog</Button>
+
+      <Dialog {...props} state={state}>
+        <DialogBody>
+          {[...Array(lotsOfContent ? 10 : 1)].map((_key, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <TextContent key={index} />
+          ))}
+        </DialogBody>
+        <DialogFooter>
+          <Button marginRight="auto" variant="tertiary">
+            Tertiary
+          </Button>
+          <Button variant="secondary">Secondary</Button>
+          <Button>Primary</Button>
+        </DialogFooter>
+      </Dialog>
+    </>
+  );
+};
+
+WithProps.args = {
+  ...Dialog.defaultProps,
+  title: 'Title',
+  lotsOfContent: false,
+  dataTestid: 'test-modal',
+};

package/src/Components/Dialog/Dialog.theme.ts

@@ -0,0 +1,74 @@
+import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+
+const DialogTheme: SystemStyleObject = {
+  baseStyle: {
+    overlay: {
+      backgroundColor: 'rgba(0, 0, 0, .5)',
+    },
+    dialogContainer: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'flex-start',
+      overflow: 'auto',
+    },
+    dialog: {
+      borderRadius: '8',
+      backgroundColor: 'neutral.100',
+      boxShadow: 'large',
+      marginY: '128',
+    },
+    header: {
+      padding: '24',
+      paddingLeft: '30',
+    },
+    closeButton: {
+      position: 'absolute',
+      top: '22',
+      right: '22',
+      width: '40',
+      height: '40',
+      padding: '8',
+      borderRadius: '8',
+    },
+    body: {
+      flex: 1,
+      paddingX: '32',
+    },
+    footer: {
+      display: 'flex',
+      justifyContent: 'end',
+      gap: '16',
+      padding: '32',
+      paddingTop: '48',
+    },
+  },
+  sizes: {
+    small: {
+      dialog: {
+        maxWidth: '30rem',
+      },
+    },
+    medium: {
+      dialog: {
+        maxWidth: '40rem',
+      },
+    },
+    large: {
+      dialog: {
+        maxWidth: '50rem',
+      },
+    },
+    full: {
+      dialog: {
+        maxW: '100vw',
+        minH: '100vh',
+        '@supports(min-height: -webkit-fill-available)': {
+          minH: '-webkit-fill-available',
+        },
+        borderRadius: 0,
+      },
+    },
+  },
+};
+
+export default DialogTheme;

package/src/Components/Dialog/Dialog.tsx

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalCloseButton,
+  ModalHeader,
+  useBreakpointValue,
+  useDisclosure,
+} from '@chakra-ui/react';
+import Icon from '../Icon/Icon';
+import Text from '../Text/Text';
+
+type DialogState = {
+  isOpen: boolean;
+  onClose(): void;
+  onOpen?(): void;
+};
+
+export const useDialog = (): DialogState => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  return {
+    isOpen,
+    onClose,
+    onOpen,
+  };
+};
+export interface DialogProps {
+  children: ReactNode;
+  dataTestid?: string;
+  size?: 'small' | 'medium' | 'large';
+  state: DialogState;
+  title: string;
+}
+
+const Dialog = ({ children, dataTestid, state, size, title }: DialogProps) => {
+  const dialogSize = useBreakpointValue({ mobile: 'full', desktop: size });
+  return (
+    <Modal closeOnOverlayClick={false} isOpen={state.isOpen} onClose={state.onClose} size={dialogSize}>
+      <ModalOverlay />
+      <ModalContent data-testid={dataTestid}>
+        <ModalHeader>
+          <Text as="h1" size="5">
+            {title}
+          </Text>
+        </ModalHeader>
+        <ModalCloseButton>
+          <Icon name="CloseSmall" />
+        </ModalCloseButton>
+        {children}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+Dialog.defaultProps = {
+  size: 'medium',
+} as DialogProps;
+
+export default Dialog;

package/src/Components/Dialog/DialogBody.tsx

@@ -0,0 +1,9 @@
+import { ModalBody, ModalBodyProps } from '@chakra-ui/react';
+
+export type DialogBodyProps = ModalBodyProps;
+
+const DialogBody = (props: DialogBodyProps) => {
+  return <ModalBody {...props} />;
+};
+
+export default DialogBody;

package/src/Components/Dialog/DialogFooter.tsx

@@ -0,0 +1,9 @@
+import { ModalFooter, ModalFooterProps } from '@chakra-ui/react';
+
+export type DialogFooterProps = ModalFooterProps;
+
+const DialogFooter = (props: DialogFooterProps) => {
+  return <ModalFooter {...props} />;
+};
+
+export default DialogFooter;

package/src/Components/Divider/Divider.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Divider as ChakraDivider, DividerProps as ChakraDividerProps } from '@chakra-ui/react';
 
 export interface DividerProps extends ChakraDividerProps {

package/src/Components/EmptyState/EmptyState.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { ReactNode } from 'react';
 import { useMultiStyleConfig } from '@chakra-ui/react';
 import Box, { BoxProps } from '../Box/Box';
 import Icon, { TypeIconName } from '../Icon/Icon';
 import Text from '../Text/Text';
 
 export interface EmptyStateProps extends BoxProps {
-  description?: React.ReactNode;
+  description?: ReactNode;
   iconName: TypeIconName;
   maxContentWidth?: string;
   title: string;

package/src/Components/Icon/Icon.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { forwardRef, IconProps as ChakraIconProps } from '@chakra-ui/react';
 import * as bigIcons from '../Icons/24x24';
 import * as smallIcons from '../Icons/16x16';

package/src/Components/IconButton/IconButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { IconButton as ChakraIconButton, IconButtonProps as ChakraIconButtonProps, forwardRef } from '@chakra-ui/react';
 import Icon, { TypeIconName } from '../Icon/Icon';
 import Tooltip from '../Tooltip/Tooltip';

package/src/Components/Icons/16x16/Addons.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const Addons = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/AddonsTuorqouise.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const AddonsTuorqouise = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/AddonsViolet.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const AddonsViolet = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/AddonsWhite.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const AddonsWhite = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/Anchor.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const Anchor = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/Android.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const Android = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/App.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const App = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/Apple.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const Apple = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/AppleFill.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const AppleFill = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/ArrowBack.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const ArrowBack = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/ArrowDown.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const ArrowDown = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/ArrowForward.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const ArrowForward = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/ArrowQuit.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const ArrowQuit = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/ArrowUp.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const ArrowUp = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/BackArrow.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const BackArrow = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/Badge3rdParty.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const Badge3rdParty = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/BadgeBitrise.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const BadgeBitrise = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/Bell.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const Bell = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/Bitbot.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const Bitbot = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/BitbotError.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const BitbotError = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/BitbucketBlue.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 import { useIconId } from '../utils';
 

package/src/Components/Icons/16x16/BitbucketPlain.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const BitbucketPlain = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/BitbucketShadedWhite.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 import { useIconId } from '../utils';
 

package/src/Components/Icons/16x16/Book.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const Book = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/Branch.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const Branch = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/Bug.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const Bug = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/Build.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const Build = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/BuildstatusAborted.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const BuildstatusAborted = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/BuildstatusAbortedSolid.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const BuildstatusAbortedSolid = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/BuildstatusFailed.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const BuildstatusFailed = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/BuildstatusFailedSolid.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const BuildstatusFailedSolid = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/BuildstatusLoading.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const BuildstatusLoading = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/BuildstatusLoadingAnimated.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const BuildstatusLoadingAnimated = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/BuildstatusNeverbuilt.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const BuildstatusNeverbuilt = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/BuildstatusProgressEggplant.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 import { useIconId } from '../utils';
 

package/src/Components/Icons/16x16/BuildstatusProgressWhite.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const BuildstatusProgressWhite = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/BuildstatusSuccessful.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const BuildstatusSuccessful = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/BuildstatusSuccessfulSolid.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const BuildstatusSuccessfulSolid = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/Bulletpoint.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const Bulletpoint = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/Cache.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const Cache = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/Calendar.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const Calendar = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/ChangePlan.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const ChangePlan = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/Chat.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const Chat = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/ChatMessage.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const ChatMessage = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/ChevronDown.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const ChevronDown = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/ChevronLeft.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const ChevronLeft = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/ChevronRight.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const ChevronRight = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/ChevronUp.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const ChevronUp = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/Clock.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const Clock = forwardRef<IconProps, 'svg'>((props, ref) => (

package/src/Components/Icons/16x16/CloseSmall.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const CloseSmall = forwardRef<IconProps, 'svg'>((props, ref) => (