diff --git a/package.json b/package.json index e8b5ab7246759..a5485c04dc1b4 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "type-check": "NODE_OPTIONS='--max-old-space-size=4096' tsc --build", "prettier-check": "prettier --check '+(e|web)/**/*.{ts,tsx,js,jsx,mts}'", "prettier-write": "prettier --write --log-level silent '+(e|web)/**/*.{ts,tsx,js,jsx,mts}'", - "process-icons": "node web/packages/design/src/Icon/script/script.js & pnpm prettier --loglevel silent --write 'web/packages/design/src/Icon/Icons/*.tsx'", + "process-icons": "node web/packages/design/src/Icon/script/script.js & pnpm prettier --log-level silent --write 'web/packages/design/src/Icon/**/*.tsx'", "nop": "exit 0" }, "private": true, diff --git a/web/packages/design/src/Icon/Icon.story.tsx b/web/packages/design/src/Icon/Icon.story.tsx new file mode 100644 index 0000000000000..87377283a0869 --- /dev/null +++ b/web/packages/design/src/Icon/Icon.story.tsx @@ -0,0 +1,51 @@ +/** + * Teleport + * Copyright (C) 2025 Gravitational, Inc. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +import { useEffect, useRef } from 'react'; +import styled from 'styled-components'; + +import { Flex } from 'design'; +import { blink } from 'design/keyframes'; + +import { Broadcast } from './Icons/Broadcast'; + +export default { + // Nest stories under Icon/Icon, so that Icon/Icons which lists all icons is the first story. + title: 'Design/Icon/Icon', +}; + +export const WithRef = () => { + const nodeRef = useRef(null); + + useEffect(() => { + nodeRef.current?.scrollIntoView({ block: 'center' }); + }, []); + + return ( + +
+ +

On the first render, the view should be scrolled to the icon.

+
+ + ); +}; + +const StyledBroadcast = styled(Broadcast)` + animation: ${blink} 1s ease-in-out infinite; +`; diff --git a/web/packages/design/src/Icon/Icon.tsx b/web/packages/design/src/Icon/Icon.tsx index 511bc47e93dc8..5d62c65cd5748 100644 --- a/web/packages/design/src/Icon/Icon.tsx +++ b/web/packages/design/src/Icon/Icon.tsx @@ -16,42 +16,40 @@ * along with this program. If not, see . */ -import React, { PropsWithChildren } from 'react'; +import React, { ForwardedRef, forwardRef, PropsWithChildren } from 'react'; import styled from 'styled-components'; import { borderRadius, color, space, SpaceProps } from 'design/system'; -export function Icon({ - size = 'medium', - children, - ...otherProps -}: PropsWithChildren) { - let iconSize = size; - if (size === 'small') { - iconSize = 16; +export const Icon = forwardRef>( + ({ size = 'medium', children, ...otherProps }, ref) => { + let iconSize = size; + if (size === 'small') { + iconSize = 16; + } + if (size === 'medium') { + iconSize = 20; + } + if (size === 'large') { + iconSize = 24; + } + if (size === 'extra-large') { + iconSize = 32; + } + return ( + + + {children} + + + ); } - if (size === 'medium') { - iconSize = 20; - } - if (size === 'large') { - iconSize = 24; - } - if (size === 'extra-large') { - iconSize = 32; - } - return ( - - - {children} - - - ); -} +); const StyledIcon = styled.span` display: inline-flex; @@ -65,6 +63,9 @@ const StyledIcon = styled.span` export type IconSize = 'small' | 'medium' | 'large' | 'extra-large' | number; +/** + * IconProps are used in each autogenerated icon component. + */ export type IconProps = SpaceProps & { size?: IconSize; color?: string; @@ -79,7 +80,11 @@ export type IconProps = SpaceProps & { className?: string; }; +/** + * Props are used on the Icon component, but not in autogenerated icon components. + */ type Props = IconProps & { children?: React.SVGProps | React.SVGProps[]; a?: any; + ref?: ForwardedRef; }; diff --git a/web/packages/design/src/Icon/Icons/Add.tsx b/web/packages/design/src/Icon/Icons/Add.tsx index 67a9d045f54bf..5c6ed4a2f4055 100644 --- a/web/packages/design/src/Icon/Icons/Add.tsx +++ b/web/packages/design/src/Icon/Icons/Add.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,10 +50,16 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Add({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Add = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/AddCircle.tsx b/web/packages/design/src/Icon/Icons/AddCircle.tsx index a45873ed1cdc5..05a61f6a7d4cd 100644 --- a/web/packages/design/src/Icon/Icons/AddCircle.tsx +++ b/web/packages/design/src/Icon/Icons/AddCircle.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function AddCircle({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const AddCircle = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/AddUsers.tsx b/web/packages/design/src/Icon/Icons/AddUsers.tsx index 4daa30af03e9e..291d1107fd1e0 100644 --- a/web/packages/design/src/Icon/Icons/AddUsers.tsx +++ b/web/packages/design/src/Icon/Icons/AddUsers.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function AddUsers({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const AddUsers = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/AlarmRing.tsx b/web/packages/design/src/Icon/Icons/AlarmRing.tsx index 3a281b895a7a2..74c7d81373360 100644 --- a/web/packages/design/src/Icon/Icons/AlarmRing.tsx +++ b/web/packages/design/src/Icon/Icons/AlarmRing.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function AlarmRing({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const AlarmRing = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -65,5 +68,5 @@ export function AlarmRing({ size = 24, color, ...otherProps }: IconProps) { /> - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/AmazonAws.tsx b/web/packages/design/src/Icon/Icons/AmazonAws.tsx index 2a7d1c3d25c93..0b95de05e7b49 100644 --- a/web/packages/design/src/Icon/Icons/AmazonAws.tsx +++ b/web/packages/design/src/Icon/Icons/AmazonAws.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,15 +50,16 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function AmazonAws({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const AmazonAws = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Apartment.tsx b/web/packages/design/src/Icon/Icons/Apartment.tsx index c7f94a1dd130f..dbacc005e643f 100644 --- a/web/packages/design/src/Icon/Icons/Apartment.tsx +++ b/web/packages/design/src/Icon/Icons/Apartment.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Apartment({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Apartment = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Apple.tsx b/web/packages/design/src/Icon/Icons/Apple.tsx index 1646852494d26..111db50141e78 100644 --- a/web/packages/design/src/Icon/Icons/Apple.tsx +++ b/web/packages/design/src/Icon/Icons/Apple.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,9 +50,15 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Apple({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Apple = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Application.tsx b/web/packages/design/src/Icon/Icons/Application.tsx index 8463784e06942..d4170c24141d0 100644 --- a/web/packages/design/src/Icon/Icons/Application.tsx +++ b/web/packages/design/src/Icon/Icons/Application.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Application({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Application = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -64,5 +67,5 @@ export function Application({ size = 24, color, ...otherProps }: IconProps) { d="M2.25 5.25C2.25 4.42157 2.92157 3.75 3.75 3.75H20.25C21.0784 3.75 21.75 4.42157 21.75 5.25V18.75C21.75 19.5784 21.0784 20.25 20.25 20.25H3.75C2.92157 20.25 2.25 19.5784 2.25 18.75V5.25ZM20.25 5.25H3.75V18.75H20.25V5.25Z" /> - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Archive.tsx b/web/packages/design/src/Icon/Icons/Archive.tsx index bb0d928fa815b..338a6a76d63b0 100644 --- a/web/packages/design/src/Icon/Icons/Archive.tsx +++ b/web/packages/design/src/Icon/Icons/Archive.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Archive({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Archive = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ArrowBack.tsx b/web/packages/design/src/Icon/Icons/ArrowBack.tsx index 0de01b394a7f4..3c083daee01fc 100644 --- a/web/packages/design/src/Icon/Icons/ArrowBack.tsx +++ b/web/packages/design/src/Icon/Icons/ArrowBack.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,16 +50,17 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ArrowBack({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const ArrowBack = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ArrowDown.tsx b/web/packages/design/src/Icon/Icons/ArrowDown.tsx index 907178413e8f6..185cdece515c9 100644 --- a/web/packages/design/src/Icon/Icons/ArrowDown.tsx +++ b/web/packages/design/src/Icon/Icons/ArrowDown.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,15 +50,16 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ArrowDown({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const ArrowDown = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ArrowFatLinesUp.tsx b/web/packages/design/src/Icon/Icons/ArrowFatLinesUp.tsx index 90f912bc95c73..45caeec4808d1 100644 --- a/web/packages/design/src/Icon/Icons/ArrowFatLinesUp.tsx +++ b/web/packages/design/src/Icon/Icons/ArrowFatLinesUp.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,17 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ArrowFatLinesUp({ - size = 24, - color, - ...otherProps -}: IconProps) { - return ( +export const ArrowFatLinesUp = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ArrowForward.tsx b/web/packages/design/src/Icon/Icons/ArrowForward.tsx index 50c9157d56b48..0453d29fc5774 100644 --- a/web/packages/design/src/Icon/Icons/ArrowForward.tsx +++ b/web/packages/design/src/Icon/Icons/ArrowForward.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,15 +50,16 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ArrowForward({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const ArrowForward = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ArrowLeft.tsx b/web/packages/design/src/Icon/Icons/ArrowLeft.tsx index a7496ae93920f..7546e06847736 100644 --- a/web/packages/design/src/Icon/Icons/ArrowLeft.tsx +++ b/web/packages/design/src/Icon/Icons/ArrowLeft.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,16 +50,17 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ArrowLeft({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const ArrowLeft = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ArrowLineLeft.tsx b/web/packages/design/src/Icon/Icons/ArrowLineLeft.tsx index 8eceb19b95985..b37403bc1694d 100644 --- a/web/packages/design/src/Icon/Icons/ArrowLineLeft.tsx +++ b/web/packages/design/src/Icon/Icons/ArrowLineLeft.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,16 +50,17 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ArrowLineLeft({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const ArrowLineLeft = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ArrowRight.tsx b/web/packages/design/src/Icon/Icons/ArrowRight.tsx index 3ac8846d4a811..53f102b391611 100644 --- a/web/packages/design/src/Icon/Icons/ArrowRight.tsx +++ b/web/packages/design/src/Icon/Icons/ArrowRight.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,15 +50,16 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ArrowRight({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const ArrowRight = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ArrowSquareOut.tsx b/web/packages/design/src/Icon/Icons/ArrowSquareOut.tsx index 309810dcea743..b8237a4b8d252 100644 --- a/web/packages/design/src/Icon/Icons/ArrowSquareOut.tsx +++ b/web/packages/design/src/Icon/Icons/ArrowSquareOut.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ArrowSquareOut({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const ArrowSquareOut = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ArrowUp.tsx b/web/packages/design/src/Icon/Icons/ArrowUp.tsx index b932ea5886975..348883c5c463d 100644 --- a/web/packages/design/src/Icon/Icons/ArrowUp.tsx +++ b/web/packages/design/src/Icon/Icons/ArrowUp.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,15 +50,16 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ArrowUp({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const ArrowUp = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ArrowsIn.tsx b/web/packages/design/src/Icon/Icons/ArrowsIn.tsx index d5e54b7bbf996..e07e1dff510cb 100644 --- a/web/packages/design/src/Icon/Icons/ArrowsIn.tsx +++ b/web/packages/design/src/Icon/Icons/ArrowsIn.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,15 +50,16 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ArrowsIn({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const ArrowsIn = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ArrowsOut.tsx b/web/packages/design/src/Icon/Icons/ArrowsOut.tsx index 215beffb58f77..1aad6fa766e9f 100644 --- a/web/packages/design/src/Icon/Icons/ArrowsOut.tsx +++ b/web/packages/design/src/Icon/Icons/ArrowsOut.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,15 +50,16 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ArrowsOut({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const ArrowsOut = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/BellRinging.tsx b/web/packages/design/src/Icon/Icons/BellRinging.tsx index 97cea1e9e506f..3a54175c3f896 100644 --- a/web/packages/design/src/Icon/Icons/BellRinging.tsx +++ b/web/packages/design/src/Icon/Icons/BellRinging.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function BellRinging({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const BellRinging = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/BookOpenText.tsx b/web/packages/design/src/Icon/Icons/BookOpenText.tsx index aa86e0a5d0f18..390229125f213 100644 --- a/web/packages/design/src/Icon/Icons/BookOpenText.tsx +++ b/web/packages/design/src/Icon/Icons/BookOpenText.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function BookOpenText({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const BookOpenText = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -65,5 +68,5 @@ export function BookOpenText({ size = 24, color, ...otherProps }: IconProps) { d="M1.93934 3.93934C2.22064 3.65804 2.60217 3.5 3 3.5H9C9.99456 3.5 10.9484 3.89509 11.6517 4.59835C11.7779 4.72456 11.8941 4.85884 12 4.99998C12.1059 4.85884 12.2221 4.72456 12.3484 4.59835C13.0516 3.89509 14.0054 3.5 15 3.5H21C21.3978 3.5 21.7794 3.65804 22.0607 3.93934C22.342 4.22065 22.5 4.60218 22.5 5V17C22.5 17.3978 22.342 17.7794 22.0607 18.0607C21.7794 18.342 21.3978 18.5 21 18.5H15C14.4033 18.5 13.831 18.7371 13.409 19.159C12.9871 19.581 12.75 20.1533 12.75 20.75C12.75 21.1642 12.4142 21.5 12 21.5C11.5858 21.5 11.25 21.1642 11.25 20.75C11.25 20.1533 11.0129 19.581 10.591 19.159C10.169 18.7371 9.59674 18.5 9 18.5H3C2.60218 18.5 2.22065 18.342 1.93934 18.0607C1.65803 17.7794 1.5 17.3978 1.5 17V5C1.5 4.60218 1.65804 4.22064 1.93934 3.93934ZM12.75 17.75V7.25C12.75 6.65326 12.9871 6.08097 13.409 5.65901C13.831 5.23705 14.4033 5 15 5L21 5V17H15C14.1839 17 13.3953 17.266 12.75 17.75ZM10.591 5.65901C11.0129 6.08097 11.25 6.65326 11.25 7.25V17.75C10.6047 17.266 9.81606 17 9 17H3V5L9 5C9.59674 5 10.169 5.23705 10.591 5.65901Z" /> - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Bots.tsx b/web/packages/design/src/Icon/Icons/Bots.tsx index d58983844689b..130d566fef584 100644 --- a/web/packages/design/src/Icon/Icons/Bots.tsx +++ b/web/packages/design/src/Icon/Icons/Bots.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,9 +50,15 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Bots({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Bots = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Broadcast.tsx b/web/packages/design/src/Icon/Icons/Broadcast.tsx index 160e232e2f3b2..903cee7d5cf57 100644 --- a/web/packages/design/src/Icon/Icons/Broadcast.tsx +++ b/web/packages/design/src/Icon/Icons/Broadcast.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Broadcast({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Broadcast = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -66,5 +69,5 @@ export function Broadcast({ size = 24, color, ...otherProps }: IconProps) { d="M8.25 12C8.25 9.92893 9.92893 8.25 12 8.25C14.0711 8.25 15.75 9.92893 15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12ZM12 9.75C10.7574 9.75 9.75 10.7574 9.75 12C9.75 13.2426 10.7574 14.25 12 14.25C13.2426 14.25 14.25 13.2426 14.25 12C14.25 10.7574 13.2426 9.75 12 9.75Z" /> - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/BroadcastSlash.tsx b/web/packages/design/src/Icon/Icons/BroadcastSlash.tsx index 9daee15d4bced..ab8e6327b4c29 100644 --- a/web/packages/design/src/Icon/Icons/BroadcastSlash.tsx +++ b/web/packages/design/src/Icon/Icons/BroadcastSlash.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function BroadcastSlash({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const BroadcastSlash = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Bubble.tsx b/web/packages/design/src/Icon/Icons/Bubble.tsx index c94ada7cff62e..b14de9605dff2 100644 --- a/web/packages/design/src/Icon/Icons/Bubble.tsx +++ b/web/packages/design/src/Icon/Icons/Bubble.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Bubble({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Bubble = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/CCAmex.tsx b/web/packages/design/src/Icon/Icons/CCAmex.tsx index 542d55fc92e10..4a37623407611 100644 --- a/web/packages/design/src/Icon/Icons/CCAmex.tsx +++ b/web/packages/design/src/Icon/Icons/CCAmex.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,15 +50,16 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function CCAmex({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const CCAmex = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/CCDiscover.tsx b/web/packages/design/src/Icon/Icons/CCDiscover.tsx index 7667482ecc24c..7598078b826e7 100644 --- a/web/packages/design/src/Icon/Icons/CCDiscover.tsx +++ b/web/packages/design/src/Icon/Icons/CCDiscover.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,15 +50,16 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function CCDiscover({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const CCDiscover = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/CCMasterCard.tsx b/web/packages/design/src/Icon/Icons/CCMasterCard.tsx index 436f1275d9755..ce752556192f8 100644 --- a/web/packages/design/src/Icon/Icons/CCMasterCard.tsx +++ b/web/packages/design/src/Icon/Icons/CCMasterCard.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,15 +50,16 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function CCMasterCard({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const CCMasterCard = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/CCStripe.tsx b/web/packages/design/src/Icon/Icons/CCStripe.tsx index b4ba6f3287ca1..98acf2536c0f8 100644 --- a/web/packages/design/src/Icon/Icons/CCStripe.tsx +++ b/web/packages/design/src/Icon/Icons/CCStripe.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,15 +50,16 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function CCStripe({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const CCStripe = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/CCVisa.tsx b/web/packages/design/src/Icon/Icons/CCVisa.tsx index 0d72543be8e63..bfd54fbfc1907 100644 --- a/web/packages/design/src/Icon/Icons/CCVisa.tsx +++ b/web/packages/design/src/Icon/Icons/CCVisa.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,15 +50,16 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function CCVisa({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const CCVisa = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Calendar.tsx b/web/packages/design/src/Icon/Icons/Calendar.tsx index 224ee96feacf9..7d8140bd01275 100644 --- a/web/packages/design/src/Icon/Icons/Calendar.tsx +++ b/web/packages/design/src/Icon/Icons/Calendar.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Calendar({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Calendar = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -64,5 +67,5 @@ export function Calendar({ size = 24, color, ...otherProps }: IconProps) { d="M17.25 2.25C17.25 1.83579 16.9142 1.5 16.5 1.5C16.0858 1.5 15.75 1.83579 15.75 2.25V3H8.25V2.25C8.25 1.83579 7.91421 1.5 7.5 1.5C7.08579 1.5 6.75 1.83579 6.75 2.25V3H4.5C3.67157 3 3 3.67157 3 4.5V19.5C3 20.3284 3.67157 21 4.5 21H19.5C20.3284 21 21 20.3284 21 19.5V4.5C21 3.67157 20.3284 3 19.5 3H17.25V2.25ZM19.5 4.5H17.25V5.25C17.25 5.66421 16.9142 6 16.5 6C16.0858 6 15.75 5.66421 15.75 5.25V4.5H8.25V5.25C8.25 5.66421 7.91421 6 7.5 6C7.08579 6 6.75 5.66421 6.75 5.25V4.5H4.5V7.5H19.5V4.5ZM4.5 9H19.5V19.5H4.5V9Z" /> - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Camera.tsx b/web/packages/design/src/Icon/Icons/Camera.tsx index a8d7d728bbb09..bb781f825356c 100644 --- a/web/packages/design/src/Icon/Icons/Camera.tsx +++ b/web/packages/design/src/Icon/Icons/Camera.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Camera({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Camera = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/CardView.tsx b/web/packages/design/src/Icon/Icons/CardView.tsx index ee0dcc238e8c9..0683805ae8db6 100644 --- a/web/packages/design/src/Icon/Icons/CardView.tsx +++ b/web/packages/design/src/Icon/Icons/CardView.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function CardView({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const CardView = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Cash.tsx b/web/packages/design/src/Icon/Icons/Cash.tsx index 83dd3b199412c..bdca4615dffa3 100644 --- a/web/packages/design/src/Icon/Icons/Cash.tsx +++ b/web/packages/design/src/Icon/Icons/Cash.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,14 +50,20 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Cash({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Cash = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Chart.tsx b/web/packages/design/src/Icon/Icons/Chart.tsx index 4baecea557d5a..222e7224e658d 100644 --- a/web/packages/design/src/Icon/Icons/Chart.tsx +++ b/web/packages/design/src/Icon/Icons/Chart.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,14 +50,20 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Chart({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Chart = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ChatBubble.tsx b/web/packages/design/src/Icon/Icons/ChatBubble.tsx index ed809e95fc934..714f83e25421d 100644 --- a/web/packages/design/src/Icon/Icons/ChatBubble.tsx +++ b/web/packages/design/src/Icon/Icons/ChatBubble.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ChatBubble({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const ChatBubble = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ChatCircleSparkle.tsx b/web/packages/design/src/Icon/Icons/ChatCircleSparkle.tsx index cd046fb281347..414ae583daaf1 100644 --- a/web/packages/design/src/Icon/Icons/ChatCircleSparkle.tsx +++ b/web/packages/design/src/Icon/Icons/ChatCircleSparkle.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,17 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ChatCircleSparkle({ - size = 24, - color, - ...otherProps -}: IconProps) { - return ( +export const ChatCircleSparkle = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Check.tsx b/web/packages/design/src/Icon/Icons/Check.tsx index f1de7010e4f3f..e82758226213e 100644 --- a/web/packages/design/src/Icon/Icons/Check.tsx +++ b/web/packages/design/src/Icon/Icons/Check.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,14 +50,20 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Check({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Check = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/CheckThick.tsx b/web/packages/design/src/Icon/Icons/CheckThick.tsx index 486e3c7aa923f..96db8cf7b63b8 100644 --- a/web/packages/design/src/Icon/Icons/CheckThick.tsx +++ b/web/packages/design/src/Icon/Icons/CheckThick.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function CheckThick({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const CheckThick = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Checks.tsx b/web/packages/design/src/Icon/Icons/Checks.tsx index d954dc9280dbc..581b12db4226a 100644 --- a/web/packages/design/src/Icon/Icons/Checks.tsx +++ b/web/packages/design/src/Icon/Icons/Checks.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,16 +50,17 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Checks({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Checks = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ChevronCircleDown.tsx b/web/packages/design/src/Icon/Icons/ChevronCircleDown.tsx index 91a7c1f7a5b16..6379f8e59d941 100644 --- a/web/packages/design/src/Icon/Icons/ChevronCircleDown.tsx +++ b/web/packages/design/src/Icon/Icons/ChevronCircleDown.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,17 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ChevronCircleDown({ - size = 24, - color, - ...otherProps -}: IconProps) { - return ( +export const ChevronCircleDown = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ChevronCircleLeft.tsx b/web/packages/design/src/Icon/Icons/ChevronCircleLeft.tsx index 104a4df38804c..e996d8edd1d57 100644 --- a/web/packages/design/src/Icon/Icons/ChevronCircleLeft.tsx +++ b/web/packages/design/src/Icon/Icons/ChevronCircleLeft.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,17 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ChevronCircleLeft({ - size = 24, - color, - ...otherProps -}: IconProps) { - return ( +export const ChevronCircleLeft = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ChevronCircleRight.tsx b/web/packages/design/src/Icon/Icons/ChevronCircleRight.tsx index 47ccf26a49971..4c3a86f8f2d2f 100644 --- a/web/packages/design/src/Icon/Icons/ChevronCircleRight.tsx +++ b/web/packages/design/src/Icon/Icons/ChevronCircleRight.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,17 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ChevronCircleRight({ - size = 24, - color, - ...otherProps -}: IconProps) { - return ( +export const ChevronCircleRight = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ChevronCircleUp.tsx b/web/packages/design/src/Icon/Icons/ChevronCircleUp.tsx index f985f5e66c6a0..dc6367605f1d0 100644 --- a/web/packages/design/src/Icon/Icons/ChevronCircleUp.tsx +++ b/web/packages/design/src/Icon/Icons/ChevronCircleUp.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,17 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ChevronCircleUp({ - size = 24, - color, - ...otherProps -}: IconProps) { - return ( +export const ChevronCircleUp = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ChevronDown.tsx b/web/packages/design/src/Icon/Icons/ChevronDown.tsx index c5af174bfec8e..907e78d1d6470 100644 --- a/web/packages/design/src/Icon/Icons/ChevronDown.tsx +++ b/web/packages/design/src/Icon/Icons/ChevronDown.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ChevronDown({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const ChevronDown = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ChevronLeft.tsx b/web/packages/design/src/Icon/Icons/ChevronLeft.tsx index 85b71f40eaadf..f50f5ff0faae5 100644 --- a/web/packages/design/src/Icon/Icons/ChevronLeft.tsx +++ b/web/packages/design/src/Icon/Icons/ChevronLeft.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ChevronLeft({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const ChevronLeft = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ChevronRight.tsx b/web/packages/design/src/Icon/Icons/ChevronRight.tsx index 7f4a6d0191a2d..fb1f999536beb 100644 --- a/web/packages/design/src/Icon/Icons/ChevronRight.tsx +++ b/web/packages/design/src/Icon/Icons/ChevronRight.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ChevronRight({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const ChevronRight = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ChevronUp.tsx b/web/packages/design/src/Icon/Icons/ChevronUp.tsx index c5fd2eb30803d..b68a8f49b9a99 100644 --- a/web/packages/design/src/Icon/Icons/ChevronUp.tsx +++ b/web/packages/design/src/Icon/Icons/ChevronUp.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ChevronUp({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const ChevronUp = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ChevronsVertical.tsx b/web/packages/design/src/Icon/Icons/ChevronsVertical.tsx index 347ff0b8b9c08..af8c404deb649 100644 --- a/web/packages/design/src/Icon/Icons/ChevronsVertical.tsx +++ b/web/packages/design/src/Icon/Icons/ChevronsVertical.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,20 +50,17 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ChevronsVertical({ - size = 24, - color, - ...otherProps -}: IconProps) { - return ( +export const ChevronsVertical = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/CircleArrowLeft.tsx b/web/packages/design/src/Icon/Icons/CircleArrowLeft.tsx index 8012d3142b1a9..061067863c128 100644 --- a/web/packages/design/src/Icon/Icons/CircleArrowLeft.tsx +++ b/web/packages/design/src/Icon/Icons/CircleArrowLeft.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,17 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function CircleArrowLeft({ - size = 24, - color, - ...otherProps -}: IconProps) { - return ( +export const CircleArrowLeft = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/CircleArrowRight.tsx b/web/packages/design/src/Icon/Icons/CircleArrowRight.tsx index 7001c924817cb..2a825ccd6a7eb 100644 --- a/web/packages/design/src/Icon/Icons/CircleArrowRight.tsx +++ b/web/packages/design/src/Icon/Icons/CircleArrowRight.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,17 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function CircleArrowRight({ - size = 24, - color, - ...otherProps -}: IconProps) { - return ( +export const CircleArrowRight = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/CircleCheck.tsx b/web/packages/design/src/Icon/Icons/CircleCheck.tsx index 39db44d733a33..7225ede5a5cc3 100644 --- a/web/packages/design/src/Icon/Icons/CircleCheck.tsx +++ b/web/packages/design/src/Icon/Icons/CircleCheck.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function CircleCheck({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const CircleCheck = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/CircleCross.tsx b/web/packages/design/src/Icon/Icons/CircleCross.tsx index aa3a24cb51552..0e3a30943ae79 100644 --- a/web/packages/design/src/Icon/Icons/CircleCross.tsx +++ b/web/packages/design/src/Icon/Icons/CircleCross.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function CircleCross({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const CircleCross = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/CirclePause.tsx b/web/packages/design/src/Icon/Icons/CirclePause.tsx index 3150774b82681..fbec5ef543a86 100644 --- a/web/packages/design/src/Icon/Icons/CirclePause.tsx +++ b/web/packages/design/src/Icon/Icons/CirclePause.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function CirclePause({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const CirclePause = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -64,5 +67,5 @@ export function CirclePause({ size = 24, color, ...otherProps }: IconProps) { d="M2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12ZM12 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 16.5563 7.44365 20.25 12 20.25C16.5563 20.25 20.25 16.5563 20.25 12C20.25 7.44365 16.5563 3.75 12 3.75Z" /> - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/CirclePlay.tsx b/web/packages/design/src/Icon/Icons/CirclePlay.tsx index c28d3546b650d..869fe0ef99ff4 100644 --- a/web/packages/design/src/Icon/Icons/CirclePlay.tsx +++ b/web/packages/design/src/Icon/Icons/CirclePlay.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function CirclePlay({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const CirclePlay = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/CircleStop.tsx b/web/packages/design/src/Icon/Icons/CircleStop.tsx index efaaa00e62d01..48d7ef006875f 100644 --- a/web/packages/design/src/Icon/Icons/CircleStop.tsx +++ b/web/packages/design/src/Icon/Icons/CircleStop.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function CircleStop({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const CircleStop = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Cli.tsx b/web/packages/design/src/Icon/Icons/Cli.tsx index 7222ba641585e..84a6243942be5 100644 --- a/web/packages/design/src/Icon/Icons/Cli.tsx +++ b/web/packages/design/src/Icon/Icons/Cli.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,14 +50,20 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Cli({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Cli = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Clipboard.tsx b/web/packages/design/src/Icon/Icons/Clipboard.tsx index b15961ca1cba0..a5f2bbf7ed6f2 100644 --- a/web/packages/design/src/Icon/Icons/Clipboard.tsx +++ b/web/packages/design/src/Icon/Icons/Clipboard.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Clipboard({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Clipboard = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -64,5 +67,5 @@ export function Clipboard({ size = 24, color, ...otherProps }: IconProps) { d="M8.64589 3C8.70142 2.93792 8.75881 2.87723 8.81802 2.81802C9.66193 1.97411 10.8065 1.5 12 1.5C13.1935 1.5 14.3381 1.97411 15.182 2.81802C15.2412 2.87723 15.2986 2.93792 15.3541 3H18.75C19.1478 3 19.5294 3.15804 19.8107 3.43934C20.092 3.72065 20.25 4.10218 20.25 4.5V20.25C20.25 20.6478 20.092 21.0294 19.8107 21.3107C19.5294 21.592 19.1478 21.75 18.75 21.75H5.25C4.85218 21.75 4.47065 21.592 4.18934 21.3107C3.90804 21.0294 3.75 20.6478 3.75 20.25V4.5C3.75 4.10217 3.90804 3.72064 4.18934 3.43934C4.47064 3.15804 4.85217 3 5.25 3H8.64589ZM9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3C12.7956 3 13.5587 3.31607 14.1213 3.87868C14.2202 3.97758 14.3115 4.08267 14.3948 4.19305C14.398 4.19746 14.4013 4.20184 14.4046 4.20617C14.7889 4.72126 15 5.34975 15 6H9C9 5.34975 9.21111 4.72126 9.59537 4.20617C9.5987 4.20183 9.60198 4.19746 9.60521 4.19305C9.6885 4.08268 9.77978 3.97758 9.87868 3.87868ZM7.75736 4.5H5.25L5.25 20.25H18.75L18.75 4.5H16.2426C16.4114 4.97731 16.5 5.48409 16.5 6V6.75C16.5 7.16421 16.1642 7.5 15.75 7.5H8.25C7.83579 7.5 7.5 7.16421 7.5 6.75V6C7.5 5.48409 7.58859 4.97731 7.75736 4.5Z" /> - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ClipboardUser.tsx b/web/packages/design/src/Icon/Icons/ClipboardUser.tsx index 367ab412e6c65..8568eed3fbac7 100644 --- a/web/packages/design/src/Icon/Icons/ClipboardUser.tsx +++ b/web/packages/design/src/Icon/Icons/ClipboardUser.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ClipboardUser({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const ClipboardUser = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Clock.tsx b/web/packages/design/src/Icon/Icons/Clock.tsx index edcea59a432c7..b1e5f61c42b0a 100644 --- a/web/packages/design/src/Icon/Icons/Clock.tsx +++ b/web/packages/design/src/Icon/Icons/Clock.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,9 +50,15 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Clock({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Clock = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Cloud.tsx b/web/packages/design/src/Icon/Icons/Cloud.tsx index a9a6177628e8e..15bada7610b11 100644 --- a/web/packages/design/src/Icon/Icons/Cloud.tsx +++ b/web/packages/design/src/Icon/Icons/Cloud.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,14 +50,20 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Cloud({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Cloud = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Cluster.tsx b/web/packages/design/src/Icon/Icons/Cluster.tsx index 0401a992421c8..f9cecdf71b635 100644 --- a/web/packages/design/src/Icon/Icons/Cluster.tsx +++ b/web/packages/design/src/Icon/Icons/Cluster.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Cluster({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Cluster = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Code.tsx b/web/packages/design/src/Icon/Icons/Code.tsx index 60d05a8959e99..dc843fa40cd41 100644 --- a/web/packages/design/src/Icon/Icons/Code.tsx +++ b/web/packages/design/src/Icon/Icons/Code.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,14 +50,20 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Code({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Code = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Cog.tsx b/web/packages/design/src/Icon/Icons/Cog.tsx index 9f1d1d4b2e5cd..78e3733610bb5 100644 --- a/web/packages/design/src/Icon/Icons/Cog.tsx +++ b/web/packages/design/src/Icon/Icons/Cog.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,9 +50,15 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Cog({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Cog = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Config.tsx b/web/packages/design/src/Icon/Icons/Config.tsx index aaa2de7747b90..d58b54ab9af50 100644 --- a/web/packages/design/src/Icon/Icons/Config.tsx +++ b/web/packages/design/src/Icon/Icons/Config.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Config({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Config = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -68,5 +71,5 @@ export function Config({ size = 24, color, ...otherProps }: IconProps) { d="M2.25 3.9C2.25 3.12257 2.79934 2.25 3.75 2.25H20.25C21.2007 2.25 21.75 3.12257 21.75 3.9V20.1C21.75 20.8774 21.2007 21.75 20.25 21.75H3.75C2.79934 21.75 2.25 20.8774 2.25 20.1V3.9ZM3.79101 3.75C3.77346 3.77438 3.75 3.82494 3.75 3.9V20.1C3.75 20.1751 3.77346 20.2256 3.79101 20.25H20.209C20.2265 20.2256 20.25 20.1751 20.25 20.1V3.9C20.25 3.82494 20.2265 3.77438 20.209 3.75H3.79101Z" /> - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Contract.tsx b/web/packages/design/src/Icon/Icons/Contract.tsx index 7a900edf4bf0b..e2c4263e20c32 100644 --- a/web/packages/design/src/Icon/Icons/Contract.tsx +++ b/web/packages/design/src/Icon/Icons/Contract.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,18 +50,19 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Contract({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Contract = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Copy.tsx b/web/packages/design/src/Icon/Icons/Copy.tsx index a27280c09fb7c..5647e8e260c53 100644 --- a/web/packages/design/src/Icon/Icons/Copy.tsx +++ b/web/packages/design/src/Icon/Icons/Copy.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,9 +50,15 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Copy({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Copy = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/CreditCard.tsx b/web/packages/design/src/Icon/Icons/CreditCard.tsx index 5911ddc3140d0..feab4fbd36da2 100644 --- a/web/packages/design/src/Icon/Icons/CreditCard.tsx +++ b/web/packages/design/src/Icon/Icons/CreditCard.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function CreditCard({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const CreditCard = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Cross.tsx b/web/packages/design/src/Icon/Icons/Cross.tsx index dc9545e4e1bb0..a7d33893527b4 100644 --- a/web/packages/design/src/Icon/Icons/Cross.tsx +++ b/web/packages/design/src/Icon/Icons/Cross.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,10 +50,16 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Cross({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Cross = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Crown.tsx b/web/packages/design/src/Icon/Icons/Crown.tsx index 4d6ccb97d9d43..a77187a9e3dbd 100644 --- a/web/packages/design/src/Icon/Icons/Crown.tsx +++ b/web/packages/design/src/Icon/Icons/Crown.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,19 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Crown({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Crown = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Database.tsx b/web/packages/design/src/Icon/Icons/Database.tsx index 7c0b1a2b14be6..793293815064b 100644 --- a/web/packages/design/src/Icon/Icons/Database.tsx +++ b/web/packages/design/src/Icon/Icons/Database.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Database({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Database = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Desktop.tsx b/web/packages/design/src/Icon/Icons/Desktop.tsx index 5ecdbec38b5a2..7e15189e5d7eb 100644 --- a/web/packages/design/src/Icon/Icons/Desktop.tsx +++ b/web/packages/design/src/Icon/Icons/Desktop.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Desktop({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Desktop = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/DeviceMobileCamera.tsx b/web/packages/design/src/Icon/Icons/DeviceMobileCamera.tsx index a1a0b628aaec1..a518902d4b9a2 100644 --- a/web/packages/design/src/Icon/Icons/DeviceMobileCamera.tsx +++ b/web/packages/design/src/Icon/Icons/DeviceMobileCamera.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,17 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function DeviceMobileCamera({ - size = 24, - color, - ...otherProps -}: IconProps) { - return ( +export const DeviceMobileCamera = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Devices.tsx b/web/packages/design/src/Icon/Icons/Devices.tsx index dd4f6037b9fc0..8ce202e259c01 100644 --- a/web/packages/design/src/Icon/Icons/Devices.tsx +++ b/web/packages/design/src/Icon/Icons/Devices.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Devices({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Devices = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Download.tsx b/web/packages/design/src/Icon/Icons/Download.tsx index 388b84d2fbed9..c75abbeda14f5 100644 --- a/web/packages/design/src/Icon/Icons/Download.tsx +++ b/web/packages/design/src/Icon/Icons/Download.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,16 +50,17 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Download({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Download = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Earth.tsx b/web/packages/design/src/Icon/Icons/Earth.tsx index 65bb7e21a4d2a..9d56b8350f9c4 100644 --- a/web/packages/design/src/Icon/Icons/Earth.tsx +++ b/web/packages/design/src/Icon/Icons/Earth.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,14 +50,20 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Earth({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Earth = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Edit.tsx b/web/packages/design/src/Icon/Icons/Edit.tsx index 57b0303d2c1ab..2d832f7e6021a 100644 --- a/web/packages/design/src/Icon/Icons/Edit.tsx +++ b/web/packages/design/src/Icon/Icons/Edit.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,9 +50,15 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Edit({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Edit = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Ellipsis.tsx b/web/packages/design/src/Icon/Icons/Ellipsis.tsx index fc4c96918955f..22ef42e8fc652 100644 --- a/web/packages/design/src/Icon/Icons/Ellipsis.tsx +++ b/web/packages/design/src/Icon/Icons/Ellipsis.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Ellipsis({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Ellipsis = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/EmailSolid.tsx b/web/packages/design/src/Icon/Icons/EmailSolid.tsx index 5360af236538e..00c4e28260939 100644 --- a/web/packages/design/src/Icon/Icons/EmailSolid.tsx +++ b/web/packages/design/src/Icon/Icons/EmailSolid.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function EmailSolid({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const EmailSolid = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/EnvelopeOpen.tsx b/web/packages/design/src/Icon/Icons/EnvelopeOpen.tsx index 0b9793cff885f..d6897f6ab90f8 100644 --- a/web/packages/design/src/Icon/Icons/EnvelopeOpen.tsx +++ b/web/packages/design/src/Icon/Icons/EnvelopeOpen.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function EnvelopeOpen({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const EnvelopeOpen = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/EqualizersVertical.tsx b/web/packages/design/src/Icon/Icons/EqualizersVertical.tsx index 540da0de4a764..0885164e6ffa7 100644 --- a/web/packages/design/src/Icon/Icons/EqualizersVertical.tsx +++ b/web/packages/design/src/Icon/Icons/EqualizersVertical.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,17 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function EqualizersVertical({ - size = 24, - color, - ...otherProps -}: IconProps) { - return ( +export const EqualizersVertical = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -67,5 +66,5 @@ export function EqualizersVertical({ - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Expand.tsx b/web/packages/design/src/Icon/Icons/Expand.tsx index 780b626486e1f..e1e9bc86467b0 100644 --- a/web/packages/design/src/Icon/Icons/Expand.tsx +++ b/web/packages/design/src/Icon/Icons/Expand.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,18 +50,19 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Expand({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Expand = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Facebook.tsx b/web/packages/design/src/Icon/Icons/Facebook.tsx index 68321b7d1c714..f2b33bfac090a 100644 --- a/web/packages/design/src/Icon/Icons/Facebook.tsx +++ b/web/packages/design/src/Icon/Icons/Facebook.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Facebook({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Facebook = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/FingerprintSimple.tsx b/web/packages/design/src/Icon/Icons/FingerprintSimple.tsx index b26fc3eae42c3..1740858bc27bc 100644 --- a/web/packages/design/src/Icon/Icons/FingerprintSimple.tsx +++ b/web/packages/design/src/Icon/Icons/FingerprintSimple.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,17 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function FingerprintSimple({ - size = 24, - color, - ...otherProps -}: IconProps) { - return ( +export const FingerprintSimple = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Floppy.tsx b/web/packages/design/src/Icon/Icons/Floppy.tsx index 3d4e535e94360..b128d539d0eeb 100644 --- a/web/packages/design/src/Icon/Icons/Floppy.tsx +++ b/web/packages/design/src/Icon/Icons/Floppy.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,18 +50,19 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Floppy({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Floppy = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/FlowArrow.tsx b/web/packages/design/src/Icon/Icons/FlowArrow.tsx index 28b67f46ead22..67c80917c0037 100644 --- a/web/packages/design/src/Icon/Icons/FlowArrow.tsx +++ b/web/packages/design/src/Icon/Icons/FlowArrow.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function FlowArrow({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const FlowArrow = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/FolderPlus.tsx b/web/packages/design/src/Icon/Icons/FolderPlus.tsx index 7aaa6cc4e0ae4..7560cfdbcc767 100644 --- a/web/packages/design/src/Icon/Icons/FolderPlus.tsx +++ b/web/packages/design/src/Icon/Icons/FolderPlus.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function FolderPlus({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const FolderPlus = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/FolderShared.tsx b/web/packages/design/src/Icon/Icons/FolderShared.tsx index bebbf3a5ea0e4..fa68d3bf9a6cc 100644 --- a/web/packages/design/src/Icon/Icons/FolderShared.tsx +++ b/web/packages/design/src/Icon/Icons/FolderShared.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function FolderShared({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const FolderShared = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/GitHub.tsx b/web/packages/design/src/Icon/Icons/GitHub.tsx index a691b48c92190..e319923a82f22 100644 --- a/web/packages/design/src/Icon/Icons/GitHub.tsx +++ b/web/packages/design/src/Icon/Icons/GitHub.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function GitHub({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const GitHub = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Google.tsx b/web/packages/design/src/Icon/Icons/Google.tsx index 9cde7f9a26e8c..0c6f4b7cee93b 100644 --- a/web/packages/design/src/Icon/Icons/Google.tsx +++ b/web/packages/design/src/Icon/Icons/Google.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Google({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Google = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Graph.tsx b/web/packages/design/src/Icon/Icons/Graph.tsx index 18cd6b75b8193..abdbf3e0b02c7 100644 --- a/web/packages/design/src/Icon/Icons/Graph.tsx +++ b/web/packages/design/src/Icon/Icons/Graph.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,10 +50,16 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Graph({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Graph = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Hashtag.tsx b/web/packages/design/src/Icon/Icons/Hashtag.tsx index 51edfdc8c9790..b27a05bdb76b4 100644 --- a/web/packages/design/src/Icon/Icons/Hashtag.tsx +++ b/web/packages/design/src/Icon/Icons/Hashtag.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Hashtag({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Hashtag = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Headset.tsx b/web/packages/design/src/Icon/Icons/Headset.tsx index 8441b61f5d17b..77bfc140bb755 100644 --- a/web/packages/design/src/Icon/Icons/Headset.tsx +++ b/web/packages/design/src/Icon/Icons/Headset.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Headset({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Headset = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Home.tsx b/web/packages/design/src/Icon/Icons/Home.tsx index 6bc2ad3fac9cc..56c30696ade72 100644 --- a/web/packages/design/src/Icon/Icons/Home.tsx +++ b/web/packages/design/src/Icon/Icons/Home.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,14 +50,20 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Home({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Home = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Info.tsx b/web/packages/design/src/Icon/Icons/Info.tsx index 2c2a05b0c084c..94502c5afef96 100644 --- a/web/packages/design/src/Icon/Icons/Info.tsx +++ b/web/packages/design/src/Icon/Icons/Info.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,9 +50,15 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Info({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Info = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Integrations.tsx b/web/packages/design/src/Icon/Icons/Integrations.tsx index 336e8c08db40f..97b6e93061d28 100644 --- a/web/packages/design/src/Icon/Icons/Integrations.tsx +++ b/web/packages/design/src/Icon/Icons/Integrations.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Integrations({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Integrations = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Invoices.tsx b/web/packages/design/src/Icon/Icons/Invoices.tsx index c655cd3a02999..155dde536a928 100644 --- a/web/packages/design/src/Icon/Icons/Invoices.tsx +++ b/web/packages/design/src/Icon/Icons/Invoices.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Invoices({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Invoices = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -64,5 +67,5 @@ export function Invoices({ size = 24, color, ...otherProps }: IconProps) { d="M3.75 3.75C3.35217 3.75 2.97064 3.90804 2.68934 4.18934C2.40804 4.47064 2.25 4.85217 2.25 5.25V19.5C2.25 19.7599 2.38459 20.0013 2.6057 20.138C2.82681 20.2746 3.10292 20.2871 3.33541 20.1708L6 18.8385L8.66459 20.1708C8.87574 20.2764 9.12426 20.2764 9.33541 20.1708L12 18.8385L14.6646 20.1708C14.8757 20.2764 15.1243 20.2764 15.3354 20.1708L18 18.8385L20.6646 20.1708C20.8971 20.2871 21.1732 20.2746 21.3943 20.138C21.6154 20.0013 21.75 19.7599 21.75 19.5V5.25C21.75 4.85218 21.592 4.47065 21.3107 4.18934C21.0294 3.90804 20.6478 3.75 20.25 3.75H3.75ZM3.75 5.25L20.25 5.25V18.2865L18.3354 17.3292C18.1243 17.2236 17.8757 17.2236 17.6646 17.3292L15 18.6615L12.3354 17.3292C12.1243 17.2236 11.8757 17.2236 11.6646 17.3292L9 18.6615L6.33541 17.3292C6.12426 17.2236 5.87574 17.2236 5.66459 17.3292L3.75 18.2865L3.75 5.25Z" /> - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Key.tsx b/web/packages/design/src/Icon/Icons/Key.tsx index 914dec7b3ffb1..06594fdb5cd41 100644 --- a/web/packages/design/src/Icon/Icons/Key.tsx +++ b/web/packages/design/src/Icon/Icons/Key.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,9 +50,15 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Key({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Key = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/KeyHole.tsx b/web/packages/design/src/Icon/Icons/KeyHole.tsx index d4de448b1c294..ad645ee5bd63e 100644 --- a/web/packages/design/src/Icon/Icons/KeyHole.tsx +++ b/web/packages/design/src/Icon/Icons/KeyHole.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function KeyHole({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const KeyHole = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Keyboard.tsx b/web/packages/design/src/Icon/Icons/Keyboard.tsx index 83d4f855aa940..a82b738caf021 100644 --- a/web/packages/design/src/Icon/Icons/Keyboard.tsx +++ b/web/packages/design/src/Icon/Icons/Keyboard.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Keyboard({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Keyboard = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -67,5 +70,5 @@ export function Keyboard({ size = 24, color, ...otherProps }: IconProps) { d="M3.04594 4.5C2.19214 4.5 1.5 5.19214 1.5 6.04594V17.9541C1.5 18.8079 2.19214 19.5 3.04594 19.5H20.9541C21.8079 19.5 22.5 18.8079 22.5 17.9541V6.04594C22.5 5.19214 21.8079 4.5 20.9541 4.5H3.04594ZM3 6.04594C3 6.02057 3.02057 6 3.04594 6H20.9541C20.9794 6 21 6.02057 21 6.04594V17.9541C21 17.9794 20.9794 18 20.9541 18H3.04594C3.02057 18 3 17.9794 3 17.9541V6.04594Z" /> - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Keypair.tsx b/web/packages/design/src/Icon/Icons/Keypair.tsx index 03b6b47d21c0d..d332e546d9c54 100644 --- a/web/packages/design/src/Icon/Icons/Keypair.tsx +++ b/web/packages/design/src/Icon/Icons/Keypair.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Keypair({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Keypair = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Kubernetes.tsx b/web/packages/design/src/Icon/Icons/Kubernetes.tsx index 5d437e3c335e8..e9fea277e12cd 100644 --- a/web/packages/design/src/Icon/Icons/Kubernetes.tsx +++ b/web/packages/design/src/Icon/Icons/Kubernetes.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Kubernetes({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Kubernetes = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Label.tsx b/web/packages/design/src/Icon/Icons/Label.tsx index 30d15b93a18a4..bf9b18ecab4a3 100644 --- a/web/packages/design/src/Icon/Icons/Label.tsx +++ b/web/packages/design/src/Icon/Icons/Label.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,14 +50,20 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Label({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Label = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Lan.tsx b/web/packages/design/src/Icon/Icons/Lan.tsx index b096de016591c..04f2dc8465353 100644 --- a/web/packages/design/src/Icon/Icons/Lan.tsx +++ b/web/packages/design/src/Icon/Icons/Lan.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,14 +50,20 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Lan({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Lan = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Laptop.tsx b/web/packages/design/src/Icon/Icons/Laptop.tsx index 19677af6c9213..6fbdc4360e141 100644 --- a/web/packages/design/src/Icon/Icons/Laptop.tsx +++ b/web/packages/design/src/Icon/Icons/Laptop.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Laptop({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Laptop = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Layout.tsx b/web/packages/design/src/Icon/Icons/Layout.tsx index d5c1852b80a21..a9ed1825bd0fb 100644 --- a/web/packages/design/src/Icon/Icons/Layout.tsx +++ b/web/packages/design/src/Icon/Icons/Layout.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,18 +50,19 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Layout({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Layout = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/License.tsx b/web/packages/design/src/Icon/Icons/License.tsx index 5e97fa4095a64..ccdac10d91f37 100644 --- a/web/packages/design/src/Icon/Icons/License.tsx +++ b/web/packages/design/src/Icon/Icons/License.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function License({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const License = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/LineSegment.tsx b/web/packages/design/src/Icon/Icons/LineSegment.tsx index d3bf34cdfd31c..a181febb58075 100644 --- a/web/packages/design/src/Icon/Icons/LineSegment.tsx +++ b/web/packages/design/src/Icon/Icons/LineSegment.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,18 +50,19 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function LineSegment({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const LineSegment = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/LineSegments.tsx b/web/packages/design/src/Icon/Icons/LineSegments.tsx index 4651cfa5974f8..4b1b2e4661853 100644 --- a/web/packages/design/src/Icon/Icons/LineSegments.tsx +++ b/web/packages/design/src/Icon/Icons/LineSegments.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,18 +50,19 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function LineSegments({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const LineSegments = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Link.tsx b/web/packages/design/src/Icon/Icons/Link.tsx index de4c3ff1e6458..d20f71ab92765 100644 --- a/web/packages/design/src/Icon/Icons/Link.tsx +++ b/web/packages/design/src/Icon/Icons/Link.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,11 +50,17 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Link({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Link = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Linkedin.tsx b/web/packages/design/src/Icon/Icons/Linkedin.tsx index ca886d25738f0..2ce67c7542812 100644 --- a/web/packages/design/src/Icon/Icons/Linkedin.tsx +++ b/web/packages/design/src/Icon/Icons/Linkedin.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Linkedin({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Linkedin = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -65,5 +68,5 @@ export function Linkedin({ size = 24, color, ...otherProps }: IconProps) { d="M2.25 3.75C2.25 2.92157 2.92157 2.25 3.75 2.25H20.25C21.0784 2.25 21.75 2.92157 21.75 3.75V20.25C21.75 21.0784 21.0784 21.75 20.25 21.75H3.75C2.92157 21.75 2.25 21.0784 2.25 20.25V3.75ZM20.25 3.75H3.75V20.25H20.25V3.75Z" /> - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Linux.tsx b/web/packages/design/src/Icon/Icons/Linux.tsx index 6ba83d5480907..a6a392b11e7ac 100644 --- a/web/packages/design/src/Icon/Icons/Linux.tsx +++ b/web/packages/design/src/Icon/Icons/Linux.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,14 +50,20 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Linux({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Linux = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ListAddCheck.tsx b/web/packages/design/src/Icon/Icons/ListAddCheck.tsx index 4434b2c203909..ff6051a33c432 100644 --- a/web/packages/design/src/Icon/Icons/ListAddCheck.tsx +++ b/web/packages/design/src/Icon/Icons/ListAddCheck.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ListAddCheck({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const ListAddCheck = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -63,5 +66,5 @@ export function ListAddCheck({ size = 24, color, ...otherProps }: IconProps) { - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ListMagnifyingGlass.tsx b/web/packages/design/src/Icon/Icons/ListMagnifyingGlass.tsx index 4442a2fef2634..fb877475f6257 100644 --- a/web/packages/design/src/Icon/Icons/ListMagnifyingGlass.tsx +++ b/web/packages/design/src/Icon/Icons/ListMagnifyingGlass.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,17 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ListMagnifyingGlass({ - size = 24, - color, - ...otherProps -}: IconProps) { - return ( +export const ListMagnifyingGlass = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -69,5 +68,5 @@ export function ListMagnifyingGlass({ d="M13.5 13.5C13.5 11.4289 15.1789 9.75 17.25 9.75C19.3211 9.75 21 11.4289 21 13.5C21 14.2642 20.7714 14.975 20.3789 15.5677L22.2803 17.4692C22.5732 17.7621 22.5732 18.237 22.2803 18.5299C21.9875 18.8228 21.5126 18.8228 21.2197 18.5299L19.3183 16.6285C18.7255 17.0213 18.0144 17.25 17.25 17.25C15.1789 17.25 13.5 15.5711 13.5 13.5ZM17.25 11.25C16.0074 11.25 15 12.2574 15 13.5C15 14.7426 16.0074 15.75 17.25 15.75C18.4926 15.75 19.5 14.7426 19.5 13.5C19.5 12.2574 18.4926 11.25 17.25 11.25Z" /> - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ListThin.tsx b/web/packages/design/src/Icon/Icons/ListThin.tsx index b36f4f0d3cf9d..c6e8f676120f8 100644 --- a/web/packages/design/src/Icon/Icons/ListThin.tsx +++ b/web/packages/design/src/Icon/Icons/ListThin.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ListThin({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const ListThin = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -63,5 +66,5 @@ export function ListThin({ size = 24, color, ...otherProps }: IconProps) { - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ListView.tsx b/web/packages/design/src/Icon/Icons/ListView.tsx index 89c936890a154..4187301593382 100644 --- a/web/packages/design/src/Icon/Icons/ListView.tsx +++ b/web/packages/design/src/Icon/Icons/ListView.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ListView({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const ListView = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -63,5 +66,5 @@ export function ListView({ size = 24, color, ...otherProps }: IconProps) { - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Lock.tsx b/web/packages/design/src/Icon/Icons/Lock.tsx index 3923fc952f4ce..b03e85dcbda03 100644 --- a/web/packages/design/src/Icon/Icons/Lock.tsx +++ b/web/packages/design/src/Icon/Icons/Lock.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,14 +50,20 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Lock({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Lock = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/LockKey.tsx b/web/packages/design/src/Icon/Icons/LockKey.tsx index a3efdab311c60..65b4043c5bcf5 100644 --- a/web/packages/design/src/Icon/Icons/LockKey.tsx +++ b/web/packages/design/src/Icon/Icons/LockKey.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function LockKey({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const LockKey = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Logout.tsx b/web/packages/design/src/Icon/Icons/Logout.tsx index fdffb67bf2e7d..fac3041b344a7 100644 --- a/web/packages/design/src/Icon/Icons/Logout.tsx +++ b/web/packages/design/src/Icon/Icons/Logout.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,16 +50,17 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Logout({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Logout = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Magnifier.tsx b/web/packages/design/src/Icon/Icons/Magnifier.tsx index f6cf426ed470e..79655e11a879e 100644 --- a/web/packages/design/src/Icon/Icons/Magnifier.tsx +++ b/web/packages/design/src/Icon/Icons/Magnifier.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Magnifier({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Magnifier = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/MagnifyingMinus.tsx b/web/packages/design/src/Icon/Icons/MagnifyingMinus.tsx index 5919e5d2ea3be..067bd5da684aa 100644 --- a/web/packages/design/src/Icon/Icons/MagnifyingMinus.tsx +++ b/web/packages/design/src/Icon/Icons/MagnifyingMinus.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,22 +50,19 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function MagnifyingMinus({ - size = 24, - color, - ...otherProps -}: IconProps) { - return ( +export const MagnifyingMinus = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/MagnifyingPlus.tsx b/web/packages/design/src/Icon/Icons/MagnifyingPlus.tsx index 802f6bd222e98..f55daafef1397 100644 --- a/web/packages/design/src/Icon/Icons/MagnifyingPlus.tsx +++ b/web/packages/design/src/Icon/Icons/MagnifyingPlus.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,18 +50,19 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function MagnifyingPlus({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const MagnifyingPlus = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Memory.tsx b/web/packages/design/src/Icon/Icons/Memory.tsx index 2ada215529af7..8eb153a6ae295 100644 --- a/web/packages/design/src/Icon/Icons/Memory.tsx +++ b/web/packages/design/src/Icon/Icons/Memory.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Memory({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Memory = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Minus.tsx b/web/packages/design/src/Icon/Icons/Minus.tsx index e8b0afa4e6e72..97727d7854100 100644 --- a/web/packages/design/src/Icon/Icons/Minus.tsx +++ b/web/packages/design/src/Icon/Icons/Minus.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,9 +50,15 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Minus({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Minus = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/MinusCircle.tsx b/web/packages/design/src/Icon/Icons/MinusCircle.tsx index fe3a181ffd912..11b3d787bae04 100644 --- a/web/packages/design/src/Icon/Icons/MinusCircle.tsx +++ b/web/packages/design/src/Icon/Icons/MinusCircle.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function MinusCircle({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const MinusCircle = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Moon.tsx b/web/packages/design/src/Icon/Icons/Moon.tsx index 06b5340f80bd6..f6e169b4ae512 100644 --- a/web/packages/design/src/Icon/Icons/Moon.tsx +++ b/web/packages/design/src/Icon/Icons/Moon.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,14 +50,20 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Moon({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Moon = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/MoreHoriz.tsx b/web/packages/design/src/Icon/Icons/MoreHoriz.tsx index e9695c13d7548..0bf7676adae6b 100644 --- a/web/packages/design/src/Icon/Icons/MoreHoriz.tsx +++ b/web/packages/design/src/Icon/Icons/MoreHoriz.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,17 +50,18 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function MoreHoriz({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const MoreHoriz = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/MoreVert.tsx b/web/packages/design/src/Icon/Icons/MoreVert.tsx index 7803bf267c4d1..8a3856fcc7dbe 100644 --- a/web/packages/design/src/Icon/Icons/MoreVert.tsx +++ b/web/packages/design/src/Icon/Icons/MoreVert.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,17 +50,18 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function MoreVert({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const MoreVert = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Mute.tsx b/web/packages/design/src/Icon/Icons/Mute.tsx index f7f29176f5306..ee416e148204c 100644 --- a/web/packages/design/src/Icon/Icons/Mute.tsx +++ b/web/packages/design/src/Icon/Icons/Mute.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,14 +50,20 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Mute({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Mute = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/NewTab.tsx b/web/packages/design/src/Icon/Icons/NewTab.tsx index dc54aca3184b8..6f45612a8f486 100644 --- a/web/packages/design/src/Icon/Icons/NewTab.tsx +++ b/web/packages/design/src/Icon/Icons/NewTab.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function NewTab({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const NewTab = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/NoteAdded.tsx b/web/packages/design/src/Icon/Icons/NoteAdded.tsx index 615c027a59d99..b0d27da43eb6b 100644 --- a/web/packages/design/src/Icon/Icons/NoteAdded.tsx +++ b/web/packages/design/src/Icon/Icons/NoteAdded.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function NoteAdded({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const NoteAdded = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Notification.tsx b/web/packages/design/src/Icon/Icons/Notification.tsx index 8525bdb063edc..46e2747a18167 100644 --- a/web/packages/design/src/Icon/Icons/Notification.tsx +++ b/web/packages/design/src/Icon/Icons/Notification.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Notification({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Notification = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/NotificationsActive.tsx b/web/packages/design/src/Icon/Icons/NotificationsActive.tsx index f2e17823b55f4..1dc75203c3169 100644 --- a/web/packages/design/src/Icon/Icons/NotificationsActive.tsx +++ b/web/packages/design/src/Icon/Icons/NotificationsActive.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,17 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function NotificationsActive({ - size = 24, - color, - ...otherProps -}: IconProps) { - return ( +export const NotificationsActive = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/PaperPlane.tsx b/web/packages/design/src/Icon/Icons/PaperPlane.tsx index da7149819be11..8d1129da5d3f7 100644 --- a/web/packages/design/src/Icon/Icons/PaperPlane.tsx +++ b/web/packages/design/src/Icon/Icons/PaperPlane.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function PaperPlane({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const PaperPlane = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Password.tsx b/web/packages/design/src/Icon/Icons/Password.tsx index 58c61e55fee4b..581b73f8d4324 100644 --- a/web/packages/design/src/Icon/Icons/Password.tsx +++ b/web/packages/design/src/Icon/Icons/Password.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,17 +50,18 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Password({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Password = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Pencil.tsx b/web/packages/design/src/Icon/Icons/Pencil.tsx index f5365bdb8f34a..e3662f001f29c 100644 --- a/web/packages/design/src/Icon/Icons/Pencil.tsx +++ b/web/packages/design/src/Icon/Icons/Pencil.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Pencil({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Pencil = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Planet.tsx b/web/packages/design/src/Icon/Icons/Planet.tsx index 094830e362e69..886b8f17b68ef 100644 --- a/web/packages/design/src/Icon/Icons/Planet.tsx +++ b/web/packages/design/src/Icon/Icons/Planet.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Planet({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Planet = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Plugs.tsx b/web/packages/design/src/Icon/Icons/Plugs.tsx index 85a0bd37e2524..cfeab94172415 100644 --- a/web/packages/design/src/Icon/Icons/Plugs.tsx +++ b/web/packages/design/src/Icon/Icons/Plugs.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,9 +50,15 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Plugs({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Plugs = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/PlugsConnected.tsx b/web/packages/design/src/Icon/Icons/PlugsConnected.tsx index c5ac04e1bc50a..9e8158669cc8f 100644 --- a/web/packages/design/src/Icon/Icons/PlugsConnected.tsx +++ b/web/packages/design/src/Icon/Icons/PlugsConnected.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function PlugsConnected({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const PlugsConnected = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Plus.tsx b/web/packages/design/src/Icon/Icons/Plus.tsx index 34e2fa1c6b449..7047e72bc4f08 100644 --- a/web/packages/design/src/Icon/Icons/Plus.tsx +++ b/web/packages/design/src/Icon/Icons/Plus.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,10 +50,16 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Plus({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Plus = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/PowerSwitch.tsx b/web/packages/design/src/Icon/Icons/PowerSwitch.tsx index 67fc1a91675ca..c020f964c482b 100644 --- a/web/packages/design/src/Icon/Icons/PowerSwitch.tsx +++ b/web/packages/design/src/Icon/Icons/PowerSwitch.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function PowerSwitch({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const PowerSwitch = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Printer.tsx b/web/packages/design/src/Icon/Icons/Printer.tsx index 3d21ae29d3ccf..f60d3e8a05c6d 100644 --- a/web/packages/design/src/Icon/Icons/Printer.tsx +++ b/web/packages/design/src/Icon/Icons/Printer.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Printer({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Printer = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Profile.tsx b/web/packages/design/src/Icon/Icons/Profile.tsx index 889c4816c6e77..333340d0ecf15 100644 --- a/web/packages/design/src/Icon/Icons/Profile.tsx +++ b/web/packages/design/src/Icon/Icons/Profile.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Profile({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Profile = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -69,5 +72,5 @@ export function Profile({ size = 24, color, ...otherProps }: IconProps) { d="M3.75 3.75C2.92157 3.75 2.25 4.42157 2.25 5.25V18.75C2.25 19.5784 2.92157 20.25 3.75 20.25H20.25C21.0784 20.25 21.75 19.5784 21.75 18.75V5.25C21.75 4.42157 21.0784 3.75 20.25 3.75H3.75ZM3.75 5.25H20.25V18.75H3.75V5.25Z" /> - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/PushPin.tsx b/web/packages/design/src/Icon/Icons/PushPin.tsx index 025f6cccc1638..75923a7e06592 100644 --- a/web/packages/design/src/Icon/Icons/PushPin.tsx +++ b/web/packages/design/src/Icon/Icons/PushPin.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function PushPin({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const PushPin = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/PushPinFilled.tsx b/web/packages/design/src/Icon/Icons/PushPinFilled.tsx index 18d06de5014de..e1c7faa378d68 100644 --- a/web/packages/design/src/Icon/Icons/PushPinFilled.tsx +++ b/web/packages/design/src/Icon/Icons/PushPinFilled.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,15 +50,16 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function PushPinFilled({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const PushPinFilled = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Question.tsx b/web/packages/design/src/Icon/Icons/Question.tsx index 6596b7ae58790..1c6cde3a1d45c 100644 --- a/web/packages/design/src/Icon/Icons/Question.tsx +++ b/web/packages/design/src/Icon/Icons/Question.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Question({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Question = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -64,5 +67,5 @@ export function Question({ size = 24, color, ...otherProps }: IconProps) { d="M12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25ZM3.75 12C3.75 7.44365 7.44365 3.75 12 3.75C16.5563 3.75 20.25 7.44365 20.25 12C20.25 16.5563 16.5563 20.25 12 20.25C7.44365 20.25 3.75 16.5563 3.75 12Z" /> - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Refresh.tsx b/web/packages/design/src/Icon/Icons/Refresh.tsx index 04e7a78e54682..a69d03c9ecdca 100644 --- a/web/packages/design/src/Icon/Icons/Refresh.tsx +++ b/web/packages/design/src/Icon/Icons/Refresh.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,15 +50,16 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Refresh({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Refresh = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Restore.tsx b/web/packages/design/src/Icon/Icons/Restore.tsx index 9ebf98fec530f..92b9e6532d2d4 100644 --- a/web/packages/design/src/Icon/Icons/Restore.tsx +++ b/web/packages/design/src/Icon/Icons/Restore.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,16 +50,17 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Restore({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Restore = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/RocketLaunch.tsx b/web/packages/design/src/Icon/Icons/RocketLaunch.tsx index 500dc5d066453..018328c2848b0 100644 --- a/web/packages/design/src/Icon/Icons/RocketLaunch.tsx +++ b/web/packages/design/src/Icon/Icons/RocketLaunch.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function RocketLaunch({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const RocketLaunch = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Rows.tsx b/web/packages/design/src/Icon/Icons/Rows.tsx index 7abbbbe61f1c1..7b6d34f119846 100644 --- a/web/packages/design/src/Icon/Icons/Rows.tsx +++ b/web/packages/design/src/Icon/Icons/Rows.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,9 +50,15 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Rows({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Rows = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Ruler.tsx b/web/packages/design/src/Icon/Icons/Ruler.tsx index 6385435788595..3b9a433db7af9 100644 --- a/web/packages/design/src/Icon/Icons/Ruler.tsx +++ b/web/packages/design/src/Icon/Icons/Ruler.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,9 +50,15 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Ruler({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Ruler = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Run.tsx b/web/packages/design/src/Icon/Icons/Run.tsx index 1849f30733505..c8151a8c4c28c 100644 --- a/web/packages/design/src/Icon/Icons/Run.tsx +++ b/web/packages/design/src/Icon/Icons/Run.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,9 +50,15 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Run({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Run = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Scan.tsx b/web/packages/design/src/Icon/Icons/Scan.tsx index 3958fcb89978f..1e18137fe68d2 100644 --- a/web/packages/design/src/Icon/Icons/Scan.tsx +++ b/web/packages/design/src/Icon/Icons/Scan.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,19 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Scan({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Scan = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Server.tsx b/web/packages/design/src/Icon/Icons/Server.tsx index 4cf45cde553c3..b07e3d373b459 100644 --- a/web/packages/design/src/Icon/Icons/Server.tsx +++ b/web/packages/design/src/Icon/Icons/Server.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Server({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Server = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Share.tsx b/web/packages/design/src/Icon/Icons/Share.tsx index 1d3ee4fc17e86..525bc3e8e312f 100644 --- a/web/packages/design/src/Icon/Icons/Share.tsx +++ b/web/packages/design/src/Icon/Icons/Share.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,14 +50,20 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Share({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Share = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ShieldCheck.tsx b/web/packages/design/src/Icon/Icons/ShieldCheck.tsx index 81e0e07c06784..3972e434d1d95 100644 --- a/web/packages/design/src/Icon/Icons/ShieldCheck.tsx +++ b/web/packages/design/src/Icon/Icons/ShieldCheck.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ShieldCheck({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const ShieldCheck = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/ShieldWarning.tsx b/web/packages/design/src/Icon/Icons/ShieldWarning.tsx index efe86555542ae..b8a1c10c32e4c 100644 --- a/web/packages/design/src/Icon/Icons/ShieldWarning.tsx +++ b/web/packages/design/src/Icon/Icons/ShieldWarning.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function ShieldWarning({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const ShieldWarning = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -64,5 +67,5 @@ export function ShieldWarning({ size = 24, color, ...otherProps }: IconProps) { d="M3.43934 4.18934C3.72064 3.90804 4.10217 3.75 4.5 3.75H19.5C19.8978 3.75 20.2794 3.90804 20.5607 4.18934C20.842 4.47065 21 4.85218 21 5.25V10.7597C21 19.1792 13.8537 21.9599 12.4706 22.4203C12.1656 22.5244 11.8348 22.5244 11.5298 22.4204C10.1444 21.9611 3 19.1829 3 10.7616V5.25C3 4.85217 3.15804 4.47064 3.43934 4.18934ZM19.5 5.25L4.5 5.25L4.5 10.7616C4.5 18.112 10.6965 20.5635 12 20.996C13.3064 20.5606 19.5 18.1058 19.5 10.7597V5.25Z" /> - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Sliders.tsx b/web/packages/design/src/Icon/Icons/Sliders.tsx index 29d00763a60db..b6e0d96106c65 100644 --- a/web/packages/design/src/Icon/Icons/Sliders.tsx +++ b/web/packages/design/src/Icon/Icons/Sliders.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Sliders({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Sliders = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/SlidersVertical.tsx b/web/packages/design/src/Icon/Icons/SlidersVertical.tsx index 1d5516cea0881..4f2fd67ddcf19 100644 --- a/web/packages/design/src/Icon/Icons/SlidersVertical.tsx +++ b/web/packages/design/src/Icon/Icons/SlidersVertical.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,17 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function SlidersVertical({ - size = 24, - color, - ...otherProps -}: IconProps) { - return ( +export const SlidersVertical = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Speed.tsx b/web/packages/design/src/Icon/Icons/Speed.tsx index b13e226a9ae67..62316da943096 100644 --- a/web/packages/design/src/Icon/Icons/Speed.tsx +++ b/web/packages/design/src/Icon/Icons/Speed.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,14 +50,20 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Speed({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Speed = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Spinner.tsx b/web/packages/design/src/Icon/Icons/Spinner.tsx index a2531e04bfa83..b659dc396ccc3 100644 --- a/web/packages/design/src/Icon/Icons/Spinner.tsx +++ b/web/packages/design/src/Icon/Icons/Spinner.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Spinner({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Spinner = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/SquaresFour.tsx b/web/packages/design/src/Icon/Icons/SquaresFour.tsx index f92dee14796cb..43a44c4841bc2 100644 --- a/web/packages/design/src/Icon/Icons/SquaresFour.tsx +++ b/web/packages/design/src/Icon/Icons/SquaresFour.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function SquaresFour({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const SquaresFour = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Stars.tsx b/web/packages/design/src/Icon/Icons/Stars.tsx index e2a3772248c42..4017a951bd74a 100644 --- a/web/packages/design/src/Icon/Icons/Stars.tsx +++ b/web/packages/design/src/Icon/Icons/Stars.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,14 +50,20 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Stars({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Stars = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Sun.tsx b/web/packages/design/src/Icon/Icons/Sun.tsx index 5d6a010667989..f813885be84f2 100644 --- a/web/packages/design/src/Icon/Icons/Sun.tsx +++ b/web/packages/design/src/Icon/Icons/Sun.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,9 +50,15 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Sun({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Sun = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/SyncAlt.tsx b/web/packages/design/src/Icon/Icons/SyncAlt.tsx index ef97c1bbf8bd5..22b5755d2f84a 100644 --- a/web/packages/design/src/Icon/Icons/SyncAlt.tsx +++ b/web/packages/design/src/Icon/Icons/SyncAlt.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,16 +50,17 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function SyncAlt({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const SyncAlt = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Table.tsx b/web/packages/design/src/Icon/Icons/Table.tsx index eeb8c2c490a2e..8a67dfdaecc70 100644 --- a/web/packages/design/src/Icon/Icons/Table.tsx +++ b/web/packages/design/src/Icon/Icons/Table.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,19 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Table({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Table = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Tablet.tsx b/web/packages/design/src/Icon/Icons/Tablet.tsx index 19bc87a1b4588..97e2de34ec170 100644 --- a/web/packages/design/src/Icon/Icons/Tablet.tsx +++ b/web/packages/design/src/Icon/Icons/Tablet.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Tablet({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Tablet = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Tags.tsx b/web/packages/design/src/Icon/Icons/Tags.tsx index 5eda6492f1d3c..24fcd68ab51b7 100644 --- a/web/packages/design/src/Icon/Icons/Tags.tsx +++ b/web/packages/design/src/Icon/Icons/Tags.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,14 +50,20 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Tags({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Tags = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Terminal.tsx b/web/packages/design/src/Icon/Icons/Terminal.tsx index d97b57aafad5f..bcbf267204420 100644 --- a/web/packages/design/src/Icon/Icons/Terminal.tsx +++ b/web/packages/design/src/Icon/Icons/Terminal.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Terminal({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Terminal = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Trash.tsx b/web/packages/design/src/Icon/Icons/Trash.tsx index 91cc228a8905b..680b7d4e88b12 100644 --- a/web/packages/design/src/Icon/Icons/Trash.tsx +++ b/web/packages/design/src/Icon/Icons/Trash.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,9 +50,15 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Trash({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Trash = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Twitter.tsx b/web/packages/design/src/Icon/Icons/Twitter.tsx index 534beaa7f8a95..f69a0902f30a3 100644 --- a/web/packages/design/src/Icon/Icons/Twitter.tsx +++ b/web/packages/design/src/Icon/Icons/Twitter.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Twitter({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Twitter = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Unarchive.tsx b/web/packages/design/src/Icon/Icons/Unarchive.tsx index 9a94dcb3efe58..db582586399d4 100644 --- a/web/packages/design/src/Icon/Icons/Unarchive.tsx +++ b/web/packages/design/src/Icon/Icons/Unarchive.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Unarchive({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Unarchive = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Unlink.tsx b/web/packages/design/src/Icon/Icons/Unlink.tsx index b37625602faf0..4e4b6ed8d5f51 100644 --- a/web/packages/design/src/Icon/Icons/Unlink.tsx +++ b/web/packages/design/src/Icon/Icons/Unlink.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Unlink({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Unlink = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -63,5 +66,5 @@ export function Unlink({ size = 24, color, ...otherProps }: IconProps) { - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Unlock.tsx b/web/packages/design/src/Icon/Icons/Unlock.tsx index 204504d9fe7ba..6f3b94037c557 100644 --- a/web/packages/design/src/Icon/Icons/Unlock.tsx +++ b/web/packages/design/src/Icon/Icons/Unlock.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Unlock({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Unlock = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Upload.tsx b/web/packages/design/src/Icon/Icons/Upload.tsx index 03b2672311be8..1cf22e0f4e46d 100644 --- a/web/packages/design/src/Icon/Icons/Upload.tsx +++ b/web/packages/design/src/Icon/Icons/Upload.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,16 +50,17 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Upload({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Upload = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/UsbDrive.tsx b/web/packages/design/src/Icon/Icons/UsbDrive.tsx index 92edd134e15da..edc1394598921 100644 --- a/web/packages/design/src/Icon/Icons/UsbDrive.tsx +++ b/web/packages/design/src/Icon/Icons/UsbDrive.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function UsbDrive({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const UsbDrive = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -64,5 +67,5 @@ export function UsbDrive({ size = 24, color, ...otherProps }: IconProps) { d="M15.4782 2.59067L11.6295 6.43932C10.738 6.32356 9.8045 6.60808 9.11968 7.29289L2.96022 13.4524C1.78865 14.6239 1.78865 16.5234 2.96022 17.695L6.30388 21.0386C7.47545 22.2102 9.37494 22.2102 10.5465 21.0386L16.706 14.8792C17.3255 14.2596 17.6174 13.4365 17.5817 12.6252L21.5472 8.65971C22.3282 7.87866 22.3282 6.61233 21.5472 5.83128L18.3066 2.59067C17.5255 1.80962 16.2592 1.80962 15.4782 2.59067ZM20.4865 6.89194L17.2459 3.65133C17.0507 3.45607 16.7341 3.45607 16.5388 3.65133L13.1212 7.06898L13.1612 7.10897C13.2303 7.16668 13.2974 7.22799 13.3623 7.29289L16.706 10.6365C16.7709 10.7014 16.8322 10.7686 16.8899 10.8377L17.0689 11.0167L20.4865 7.59905C20.6818 7.40378 20.6818 7.0872 20.4865 6.89194ZM10.1803 8.35355C10.7201 7.8138 11.5689 7.77138 12.1572 8.22631L15.7726 11.8417C16.2275 12.43 16.1851 13.2788 15.6453 13.8185L9.48586 19.978C8.90007 20.5638 7.95032 20.5638 7.36454 19.978L4.02088 16.6343C3.4351 16.0485 3.4351 15.0988 4.02088 14.513L10.1803 8.35355Z" /> - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/User.tsx b/web/packages/design/src/Icon/Icons/User.tsx index 788281c91cda3..c215423670e17 100644 --- a/web/packages/design/src/Icon/Icons/User.tsx +++ b/web/packages/design/src/Icon/Icons/User.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,14 +50,20 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function User({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const User = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/UserAdd.tsx b/web/packages/design/src/Icon/Icons/UserAdd.tsx index e3e5765d47ab9..f04141fd86832 100644 --- a/web/packages/design/src/Icon/Icons/UserAdd.tsx +++ b/web/packages/design/src/Icon/Icons/UserAdd.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function UserAdd({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const UserAdd = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/UserCircleGear.tsx b/web/packages/design/src/Icon/Icons/UserCircleGear.tsx index c17c37454bab3..16be34e4bb583 100644 --- a/web/packages/design/src/Icon/Icons/UserCircleGear.tsx +++ b/web/packages/design/src/Icon/Icons/UserCircleGear.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function UserCircleGear({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const UserCircleGear = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/UserFocus.tsx b/web/packages/design/src/Icon/Icons/UserFocus.tsx index de99762dcc5aa..f7e68aea23336 100644 --- a/web/packages/design/src/Icon/Icons/UserFocus.tsx +++ b/web/packages/design/src/Icon/Icons/UserFocus.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function UserFocus({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const UserFocus = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -66,5 +69,5 @@ export function UserFocus({ size = 24, color, ...otherProps }: IconProps) { d="M8.25 10.5C8.25 8.42893 9.92893 6.75 12 6.75C14.0711 6.75 15.75 8.42893 15.75 10.5C15.75 11.5981 15.278 12.5859 14.5259 13.2717C14.6355 13.319 14.7439 13.3695 14.851 13.423C15.7362 13.8656 16.5062 14.5083 17.1 15.3C17.3486 15.6314 17.2814 16.1015 16.95 16.35C16.6187 16.5985 16.1486 16.5314 15.9 16.2C15.446 15.5945 14.8571 15.1031 14.1802 14.7647C13.5033 14.4262 12.7569 14.25 12 14.25C11.2432 14.25 10.4968 14.4262 9.81988 14.7647C9.14296 15.1031 8.55414 15.5945 8.10004 16.2C7.85152 16.5314 7.38141 16.5985 7.05004 16.35C6.71867 16.1015 6.65152 15.6314 6.90004 15.3C7.49386 14.5083 8.26385 13.8656 9.14906 13.423C9.25613 13.3695 9.36453 13.3191 9.47413 13.2718C8.72198 12.5859 8.25 11.5981 8.25 10.5ZM12 8.25C10.7574 8.25 9.75 9.25736 9.75 10.5C9.75 11.7426 10.7574 12.75 12 12.75C13.2426 12.75 14.25 11.7426 14.25 10.5C14.25 9.25736 13.2426 8.25 12 8.25Z" /> - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/UserIdBadge.tsx b/web/packages/design/src/Icon/Icons/UserIdBadge.tsx index f340c591ea015..a6e02ffbb5599 100644 --- a/web/packages/design/src/Icon/Icons/UserIdBadge.tsx +++ b/web/packages/design/src/Icon/Icons/UserIdBadge.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function UserIdBadge({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const UserIdBadge = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/UserList.tsx b/web/packages/design/src/Icon/Icons/UserList.tsx index 49b90b8042aea..0105fc61cbee9 100644 --- a/web/packages/design/src/Icon/Icons/UserList.tsx +++ b/web/packages/design/src/Icon/Icons/UserList.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function UserList({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const UserList = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Users.tsx b/web/packages/design/src/Icon/Icons/Users.tsx index 93b0313cc4e6e..8afd0f8c86000 100644 --- a/web/packages/design/src/Icon/Icons/Users.tsx +++ b/web/packages/design/src/Icon/Icons/Users.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,9 +50,15 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Users({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Users = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/UsersTriple.tsx b/web/packages/design/src/Icon/Icons/UsersTriple.tsx index 314f934eaddc1..d1a58ea40fd72 100644 --- a/web/packages/design/src/Icon/Icons/UsersTriple.tsx +++ b/web/packages/design/src/Icon/Icons/UsersTriple.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function UsersTriple({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const UsersTriple = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Vault.tsx b/web/packages/design/src/Icon/Icons/Vault.tsx index e4389813ca53c..197c030ed97b2 100644 --- a/web/packages/design/src/Icon/Icons/Vault.tsx +++ b/web/packages/design/src/Icon/Icons/Vault.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,14 +50,20 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Vault({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Vault = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/VideoGame.tsx b/web/packages/design/src/Icon/Icons/VideoGame.tsx index 921e5c6873525..6b97c2fab375e 100644 --- a/web/packages/design/src/Icon/Icons/VideoGame.tsx +++ b/web/packages/design/src/Icon/Icons/VideoGame.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function VideoGame({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const VideoGame = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -64,5 +67,5 @@ export function VideoGame({ size = 24, color, ...otherProps }: IconProps) { d="M7.86299 3.75L7.86465 3.75H16.125C17.6168 3.75 19.0475 4.34263 20.1024 5.39753C20.9281 6.22321 21.4706 7.27916 21.6674 8.41444L23.1986 16.2894C23.323 16.9962 23.2189 17.7242 22.9014 18.3678C22.5839 19.0114 22.0696 19.5371 21.433 19.8684C20.7965 20.1998 20.0709 20.3197 19.3616 20.2106C18.6523 20.1015 17.9962 19.7692 17.4887 19.2618C17.4774 19.2506 17.4666 19.2391 17.4561 19.2272L13.7321 15H10.2678L6.54398 19.227C6.5335 19.2389 6.52264 19.2505 6.51142 19.2617C6.00386 19.769 5.34779 20.1014 4.6385 20.2104C3.9292 20.3195 3.2036 20.1997 2.56705 19.8683C1.93051 19.5369 1.41616 19.0113 1.09869 18.3677C0.781228 17.7241 0.677175 16.9961 0.801643 16.2893L0.803948 16.2762L2.33656 8.39453C2.56636 7.09633 3.24488 5.92 4.25375 5.07105C5.26441 4.2206 6.54212 3.75293 7.86299 3.75ZM15.7312 15L18.5646 18.2163C18.8444 18.4895 19.2027 18.6685 19.5896 18.728C19.9836 18.7886 20.3868 18.722 20.7404 18.5379C21.094 18.3538 21.3798 18.0618 21.5561 17.7043C21.7316 17.3485 21.7897 16.9464 21.7222 16.5556L20.9032 12.3431C20.6776 12.7063 20.4096 13.0453 20.1024 13.3525C19.0475 14.4074 17.6168 15 16.125 15H15.7312ZM20.1839 8.63936C20.1856 8.65107 20.1876 8.6628 20.1898 8.67454L20.1917 8.68429C20.2302 8.91101 20.25 9.14199 20.25 9.375C20.25 10.469 19.8154 11.5182 19.0418 12.2918C18.2682 13.0654 17.219 13.5 16.125 13.5H9.92903C9.71363 13.5 9.50864 13.5926 9.36626 13.7542L5.4355 18.2161C5.15572 18.4893 4.79736 18.6684 4.4105 18.7279C4.01644 18.7885 3.61333 18.7219 3.25969 18.5378C2.90606 18.3537 2.62031 18.0617 2.44394 17.7041C2.26847 17.3484 2.21035 16.9462 2.27786 16.5555L3.81024 8.6744L3.81271 8.66106C3.98035 7.70704 4.47839 6.84244 5.21954 6.21877C5.96048 5.59527 6.89716 5.25234 7.86551 5.25H16.125C17.219 5.25 18.2682 5.6846 19.0418 6.45819C19.6397 7.05611 20.0351 7.8187 20.1839 8.63936Z" /> - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/VolumeUp.tsx b/web/packages/design/src/Icon/Icons/VolumeUp.tsx index e73821d0d469a..8b3d1b21618f8 100644 --- a/web/packages/design/src/Icon/Icons/VolumeUp.tsx +++ b/web/packages/design/src/Icon/Icons/VolumeUp.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function VolumeUp({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const VolumeUp = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/VpnKey.tsx b/web/packages/design/src/Icon/Icons/VpnKey.tsx index 6276a9ec4ee24..f6a2e10267bf7 100644 --- a/web/packages/design/src/Icon/Icons/VpnKey.tsx +++ b/web/packages/design/src/Icon/Icons/VpnKey.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function VpnKey({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const VpnKey = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Wand.tsx b/web/packages/design/src/Icon/Icons/Wand.tsx index 2cfa8a811f68f..8e1ba8801f0a6 100644 --- a/web/packages/design/src/Icon/Icons/Wand.tsx +++ b/web/packages/design/src/Icon/Icons/Wand.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,9 +50,15 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Wand({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Wand = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Warning.tsx b/web/packages/design/src/Icon/Icons/Warning.tsx index e31c760e89565..4d126599460f5 100644 --- a/web/packages/design/src/Icon/Icons/Warning.tsx +++ b/web/packages/design/src/Icon/Icons/Warning.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Warning({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Warning = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -64,5 +67,5 @@ export function Warning({ size = 24, color, ...otherProps }: IconProps) { d="M10.09 3.34287L1.88101 17.7086C1.04292 19.1753 2.10193 21.0001 3.79114 21.0001H20.2092C21.8984 21.0001 22.9574 19.1753 22.1193 17.7086L13.9103 3.34287C13.0657 1.86488 10.9346 1.86488 10.09 3.34287ZM3.18337 18.4528L11.3924 4.08708C11.6611 3.61681 12.3392 3.61681 12.6079 4.08708L20.8169 18.4528C21.0836 18.9195 20.7466 19.5001 20.2092 19.5001H3.79114C3.25367 19.5001 2.91671 18.9195 3.18337 18.4528Z" /> - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/WarningCircle.tsx b/web/packages/design/src/Icon/Icons/WarningCircle.tsx index 3ffc90d7e30fc..82e68a0d017d5 100644 --- a/web/packages/design/src/Icon/Icons/WarningCircle.tsx +++ b/web/packages/design/src/Icon/Icons/WarningCircle.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function WarningCircle({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const WarningCircle = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( @@ -64,5 +67,5 @@ export function WarningCircle({ size = 24, color, ...otherProps }: IconProps) { d="M2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12ZM12 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 16.5563 7.44365 20.25 12 20.25C16.5563 20.25 20.25 16.5563 20.25 12C20.25 7.44365 16.5563 3.75 12 3.75Z" /> - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Wifi.tsx b/web/packages/design/src/Icon/Icons/Wifi.tsx index 0e026e1552250..7c068122e6108 100644 --- a/web/packages/design/src/Icon/Icons/Wifi.tsx +++ b/web/packages/design/src/Icon/Icons/Wifi.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,19 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Wifi({ size = 24, color, ...otherProps }: IconProps) { - return ( - +export const Wifi = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Windows.tsx b/web/packages/design/src/Icon/Icons/Windows.tsx index d8a11289af6f3..a32fd0fa48c04 100644 --- a/web/packages/design/src/Icon/Icons/Windows.tsx +++ b/web/packages/design/src/Icon/Icons/Windows.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Windows({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Windows = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Wrench.tsx b/web/packages/design/src/Icon/Icons/Wrench.tsx index 094c3a998fbf6..0cf8329385a41 100644 --- a/web/packages/design/src/Icon/Icons/Wrench.tsx +++ b/web/packages/design/src/Icon/Icons/Wrench.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Wrench({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Wrench = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/Icons/Youtube.tsx b/web/packages/design/src/Icon/Icons/Youtube.tsx index a84aaa7b6c92b..106dbc3b48c89 100644 --- a/web/packages/design/src/Icon/Icons/Youtube.tsx +++ b/web/packages/design/src/Icon/Icons/Youtube.tsx @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function Youtube({ size = 24, color, ...otherProps }: IconProps) { - return ( +export const Youtube = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( - ); -} + ) +); diff --git a/web/packages/design/src/Icon/script/IconTemplate.txt b/web/packages/design/src/Icon/script/IconTemplate.txt index e204eb99dfa0e..ff1f2a332129d 100644 --- a/web/packages/design/src/Icon/script/IconTemplate.txt +++ b/web/packages/design/src/Icon/script/IconTemplate.txt @@ -40,6 +40,8 @@ SOFTWARE. */ +import { forwardRef } from 'react'; + import { Icon, IconProps } from '../Icon'; /* @@ -48,10 +50,16 @@ THIS FILE IS GENERATED. DO NOT EDIT. */ -export function {ICON_NAME}({ size = 24, color, ...otherProps}: IconProps) { - return ( - +export const {ICON_NAME} = forwardRef( + ({ size = 24, color, ...otherProps }, ref) => ( + {PATHS} - ); -} + ) +); diff --git a/web/packages/design/src/SVGIcon/SvgIcon.story.tsx b/web/packages/design/src/SVGIcon/SvgIcon.story.tsx index 4929004984873..d7c8d9f18cfcd 100644 --- a/web/packages/design/src/SVGIcon/SvgIcon.story.tsx +++ b/web/packages/design/src/SVGIcon/SvgIcon.story.tsx @@ -16,7 +16,7 @@ * along with this program. If not, see . */ -import { ReactNode } from 'react'; +import { Fragment, ReactNode } from 'react'; import { useTheme } from 'styled-components'; import { IconCircle } from 'design/Icon/IconCircle'; @@ -38,14 +38,14 @@ export const CustomIcons = () => { const size = 64; return ( - <> + - + ); })} diff --git a/web/packages/teleport/src/Navigation/RecentHistory.tsx b/web/packages/teleport/src/Navigation/RecentHistory.tsx index e46deb50089a2..e3a4fdc929efc 100644 --- a/web/packages/teleport/src/Navigation/RecentHistory.tsx +++ b/web/packages/teleport/src/Navigation/RecentHistory.tsx @@ -16,7 +16,7 @@ * along with this program. If not, see . */ -import { useEffect, useRef, useState } from 'react'; +import { ReactNode, useEffect, useRef, useState } from 'react'; import { matchPath } from 'react-router'; import { NavLink } from 'react-router-dom'; import styled from 'styled-components'; @@ -44,7 +44,7 @@ type AnimatedItem = RecentHistoryItem & { function getIconForRoute( features: TeleportFeature[], route: string -): (props) => JSX.Element { +): (props) => ReactNode { const feature = features.find(feature => matchPath(route, { path: feature?.route?.path, @@ -166,7 +166,7 @@ function AnimatedHistoryItem({ onRemove, }: { item: AnimatedItem; - Icon: (props) => JSX.Element; + Icon: (props) => ReactNode; onRemove: () => void; }) { const [hovered, setHovered] = useState(false); diff --git a/web/packages/teleport/src/Navigation/SideNavigation/CategoryIcon.tsx b/web/packages/teleport/src/Navigation/SideNavigation/CategoryIcon.tsx index 8453fdcae2c45..1d1b4a24e673a 100644 --- a/web/packages/teleport/src/Navigation/SideNavigation/CategoryIcon.tsx +++ b/web/packages/teleport/src/Navigation/SideNavigation/CategoryIcon.tsx @@ -16,6 +16,8 @@ * along with this program. If not, see . */ +import { ReactNode } from 'react'; + import * as Icons from 'design/Icon'; import { @@ -33,7 +35,7 @@ export function CategoryIcon({ size?: number; color?: string; }) { - let Icon: ({ size, color }) => JSX.Element; + let Icon: ({ size, color }) => ReactNode; switch (category) { case NavigationCategory.Resources: Icon = Icons.Server; diff --git a/web/packages/teleport/src/Navigation/SideNavigation/Navigation.tsx b/web/packages/teleport/src/Navigation/SideNavigation/Navigation.tsx index 763cd6b2490cf..f98f008f5c559 100644 --- a/web/packages/teleport/src/Navigation/SideNavigation/Navigation.tsx +++ b/web/packages/teleport/src/Navigation/SideNavigation/Navigation.tsx @@ -18,6 +18,7 @@ import type * as history from 'history'; import React, { + ReactNode, useCallback, useEffect, useMemo, @@ -87,7 +88,7 @@ export type NavigationSubsection = { title: string; route: string; exact: boolean; - icon: (props) => JSX.Element; + icon: (props) => ReactNode; parent?: TeleportFeature; searchableTags?: string[]; /** diff --git a/web/packages/teleport/src/Sessions/SessionList/SessionList.tsx b/web/packages/teleport/src/Sessions/SessionList/SessionList.tsx index 02c8c15f36286..cbb952b7be3a1 100644 --- a/web/packages/teleport/src/Sessions/SessionList/SessionList.tsx +++ b/web/packages/teleport/src/Sessions/SessionList/SessionList.tsx @@ -16,6 +16,7 @@ * along with this program. If not, see . */ +import { ReactNode } from 'react'; import styled from 'styled-components'; import Table, { Cell } from 'design/DataTable'; @@ -99,7 +100,7 @@ export default function SessionList(props: Props) { } const kinds: { - [key in SessionKind]: { icon: (any) => JSX.Element; joinable: boolean }; + [key in SessionKind]: { icon: (any) => ReactNode; joinable: boolean }; } = { ssh: { icon: Icons.Cli, joinable: true }, k8s: { icon: Icons.Kubernetes, joinable: false }, diff --git a/web/packages/teleport/src/TopBar/DeviceTrustIcon.tsx b/web/packages/teleport/src/TopBar/DeviceTrustIcon.tsx index 4c0a25de81c9d..52bb0b92cbb87 100644 --- a/web/packages/teleport/src/TopBar/DeviceTrustIcon.tsx +++ b/web/packages/teleport/src/TopBar/DeviceTrustIcon.tsx @@ -16,6 +16,7 @@ * along with this program. If not, see . */ +import { ReactNode } from 'react'; import styled from 'styled-components'; import { Flex } from 'design'; @@ -54,7 +55,7 @@ const ShieldIcon = ({ color, ...props }: { - Icon: (props: IconProps) => JSX.Element; + Icon: (props: IconProps) => ReactNode; iconSize: number; color: string; }) => { diff --git a/web/packages/teleport/src/TopBar/TopBar.tsx b/web/packages/teleport/src/TopBar/TopBar.tsx index 696cdff2cbd42..a75c8c8608c9a 100644 --- a/web/packages/teleport/src/TopBar/TopBar.tsx +++ b/web/packages/teleport/src/TopBar/TopBar.tsx @@ -17,7 +17,7 @@ */ import type * as history from 'history'; -import React, { useCallback, useEffect, useState } from 'react'; +import React, { ReactNode, useCallback, useEffect, useState } from 'react'; import { matchPath, useHistory } from 'react-router'; import { Link } from 'react-router-dom'; import styled, { useTheme } from 'styled-components'; @@ -376,7 +376,7 @@ const MainNavItem = ({ to: string; size: number; name: string; - Icon: (props: { color: string; size: number }) => JSX.Element; + Icon: (props: { color: string; size: number }) => ReactNode; }) => { const { currentWidth } = useLayout(); const theme: Theme = useTheme(); diff --git a/web/packages/teleport/src/components/TabIcon/TabIcon.tsx b/web/packages/teleport/src/components/TabIcon/TabIcon.tsx index 1790a19bcb2ca..8b22da1727cb7 100644 --- a/web/packages/teleport/src/components/TabIcon/TabIcon.tsx +++ b/web/packages/teleport/src/components/TabIcon/TabIcon.tsx @@ -16,6 +16,7 @@ * along with this program. If not, see . */ +import { ReactNode } from 'react'; import styled from 'styled-components'; import { H3 } from 'design'; @@ -38,7 +39,7 @@ type Props = { active: boolean; onClick(): void; title: string; - Icon: (any) => JSX.Element; + Icon: (any) => ReactNode; }; const StyledTab = styled(H3)<{ active?: boolean }>` diff --git a/web/packages/teleport/src/types.ts b/web/packages/teleport/src/types.ts index 356dc95027ee1..69e909cd5011c 100644 --- a/web/packages/teleport/src/types.ts +++ b/web/packages/teleport/src/types.ts @@ -16,7 +16,7 @@ * along with this program. If not, see . */ -import React from 'react'; +import React, { ReactNode } from 'react'; import { UserPreferences } from 'gen-proto-ts/teleport/lib/teleterm/v1/service_pb'; @@ -36,7 +36,7 @@ export interface Context { export interface TeleportFeatureNavigationItem { title: NavTitle; - icon: (props) => JSX.Element; + icon: (props) => ReactNode; exact?: boolean; getLink?(clusterId: string): string; isExternalLink?: boolean;