@fibery/ui-kit 1.29.5 → 1.31.0

package/src/icons/react/BatchActionsIcon.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import BatchActionsIconSvg from '../ast/BatchActionsIcon';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const BatchActionsIcon = (
+const BatchActionsIcon = forwardRef<SVGSVGElement, IconBaseProps>(function BatchActionsIcon(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={BatchActionsIconSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={BatchActionsIconSvg} />});
 
-BatchActionsIcon.displayName = 'BatchActionsIcon';
 export default BatchActionsIcon;

package/src/icons/react/BellCircle.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import BellCircleSvg from '../ast/BellCircle';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const BellCircle = (
+const BellCircle = forwardRef<SVGSVGElement, IconBaseProps>(function BellCircle(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={BellCircleSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={BellCircleSvg} />});
 
-BellCircle.displayName = 'BellCircle';
 export default BellCircle;

package/src/icons/react/BellFilled.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import BellFilledSvg from '../ast/BellFilled';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const BellFilled = (
+const BellFilled = forwardRef<SVGSVGElement, IconBaseProps>(function BellFilled(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={BellFilledSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={BellFilledSvg} />});
 
-BellFilled.displayName = 'BellFilled';
 export default BellFilled;

package/src/icons/react/BellOff.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import BellOffSvg from '../ast/BellOff';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const BellOff = (
+const BellOff = forwardRef<SVGSVGElement, IconBaseProps>(function BellOff(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={BellOffSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={BellOffSvg} />});
 
-BellOff.displayName = 'BellOff';
 export default BellOff;

package/src/icons/react/BellRinging.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import BellRingingSvg from '../ast/BellRinging';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const BellRinging = (
+const BellRinging = forwardRef<SVGSVGElement, IconBaseProps>(function BellRinging(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={BellRingingSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={BellRingingSvg} />});
 
-BellRinging.displayName = 'BellRinging';
 export default BellRinging;

package/src/icons/react/BellX.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import BellXSvg from '../ast/BellX';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const BellX = (
+const BellX = forwardRef<SVGSVGElement, IconBaseProps>(function BellX(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={BellXSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={BellXSvg} />});
 
-BellX.displayName = 'BellX';
 export default BellX;

package/src/icons/react/Bolt.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import BoltSvg from '../ast/Bolt';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Bolt = (
+const Bolt = forwardRef<SVGSVGElement, IconBaseProps>(function Bolt(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={BoltSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={BoltSvg} />});
 
-Bolt.displayName = 'Bolt';
 export default Bolt;

package/src/icons/react/Cards.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import CardsSvg from '../ast/Cards';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Cards = (
+const Cards = forwardRef<SVGSVGElement, IconBaseProps>(function Cards(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={CardsSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={CardsSvg} />});
 
-Cards.displayName = 'Cards';
 export default Cards;

package/src/icons/react/Chat.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import ChatSvg from '../ast/Chat';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Chat = (
+const Chat = forwardRef<SVGSVGElement, IconBaseProps>(function Chat(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={ChatSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ChatSvg} />});
 
-Chat.displayName = 'Chat';
 export default Chat;

package/src/icons/react/ChatAi.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import ChatAiSvg from '../ast/ChatAi';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const ChatAi = (
+const ChatAi = forwardRef<SVGSVGElement, IconBaseProps>(function ChatAi(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={ChatAiSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ChatAiSvg} />});
 
-ChatAi.displayName = 'ChatAi';
 export default ChatAi;

package/src/icons/react/CheckCircle.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import CheckCircleSvg from '../ast/CheckCircle';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const CheckCircle = (
+const CheckCircle = forwardRef<SVGSVGElement, IconBaseProps>(function CheckCircle(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={CheckCircleSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={CheckCircleSvg} />});
 
-CheckCircle.displayName = 'CheckCircle';
 export default CheckCircle;

package/src/icons/react/CheckCircleFilled.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import CheckCircleFilledSvg from '../ast/CheckCircleFilled';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const CheckCircleFilled = (
+const CheckCircleFilled = forwardRef<SVGSVGElement, IconBaseProps>(function CheckCircleFilled(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={CheckCircleFilledSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={CheckCircleFilledSvg} />});
 
-CheckCircleFilled.displayName = 'CheckCircleFilled';
 export default CheckCircleFilled;

package/src/icons/react/Checked.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import CheckedSvg from '../ast/Checked';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Checked = (
+const Checked = forwardRef<SVGSVGElement, IconBaseProps>(function Checked(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={CheckedSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={CheckedSvg} />});
 
-Checked.displayName = 'Checked';
 export default Checked;

package/src/icons/react/Clear.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import ClearSvg from '../ast/Clear';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Clear = (
+const Clear = forwardRef<SVGSVGElement, IconBaseProps>(function Clear(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={ClearSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ClearSvg} />});
 
-Clear.displayName = 'Clear';
 export default Clear;

package/src/icons/react/ClearValue.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import ClearValueSvg from '../ast/ClearValue';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const ClearValue = (
+const ClearValue = forwardRef<SVGSVGElement, IconBaseProps>(function ClearValue(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={ClearValueSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ClearValueSvg} />});
 
-ClearValue.displayName = 'ClearValue';
 export default ClearValue;

package/src/icons/react/Clock.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import ClockSvg from '../ast/Clock';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Clock = (
+const Clock = forwardRef<SVGSVGElement, IconBaseProps>(function Clock(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={ClockSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ClockSvg} />});
 
-Clock.displayName = 'Clock';
 export default Clock;

package/src/icons/react/ClockAlarm.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import ClockAlarmSvg from '../ast/ClockAlarm';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const ClockAlarm = (
+const ClockAlarm = forwardRef<SVGSVGElement, IconBaseProps>(function ClockAlarm(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={ClockAlarmSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ClockAlarmSvg} />});
 
-ClockAlarm.displayName = 'ClockAlarm';
 export default ClockAlarm;

package/src/icons/react/ClockForward.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import ClockForwardSvg from '../ast/ClockForward';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const ClockForward = (
+const ClockForward = forwardRef<SVGSVGElement, IconBaseProps>(function ClockForward(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={ClockForwardSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ClockForwardSvg} />});
 
-ClockForward.displayName = 'ClockForward';
 export default ClockForward;

package/src/icons/react/Close.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import CloseSvg from '../ast/Close';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Close = (
+const Close = forwardRef<SVGSVGElement, IconBaseProps>(function Close(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={CloseSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={CloseSvg} />});
 
-Close.displayName = 'Close';
 export default Close;

package/src/icons/react/ColorCoding.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import ColorCodingSvg from '../ast/ColorCoding';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const ColorCoding = (
+const ColorCoding = forwardRef<SVGSVGElement, IconBaseProps>(function ColorCoding(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={ColorCodingSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ColorCodingSvg} />});
 
-ColorCoding.displayName = 'ColorCoding';
 export default ColorCoding;

package/src/icons/react/ColorCodingFilled.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import ColorCodingFilledSvg from '../ast/ColorCodingFilled';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const ColorCodingFilled = (
+const ColorCodingFilled = forwardRef<SVGSVGElement, IconBaseProps>(function ColorCodingFilled(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={ColorCodingFilledSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ColorCodingFilledSvg} />});
 
-ColorCodingFilled.displayName = 'ColorCodingFilled';
 export default ColorCodingFilled;

package/src/icons/react/Columns.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import ColumnsSvg from '../ast/Columns';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Columns = (
+const Columns = forwardRef<SVGSVGElement, IconBaseProps>(function Columns(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={ColumnsSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ColumnsSvg} />});
 
-Columns.displayName = 'Columns';
 export default Columns;

package/src/icons/react/Columns2.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import Columns2Svg from '../ast/Columns2';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Columns2 = (
+const Columns2 = forwardRef<SVGSVGElement, IconBaseProps>(function Columns2(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={Columns2Svg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={Columns2Svg} />});
 
-Columns2.displayName = 'Columns2';
 export default Columns2;

package/src/icons/react/Columns4.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import Columns4Svg from '../ast/Columns4';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Columns4 = (
+const Columns4 = forwardRef<SVGSVGElement, IconBaseProps>(function Columns4(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={Columns4Svg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={Columns4Svg} />});
 
-Columns4.displayName = 'Columns4';
 export default Columns4;

package/src/icons/react/Copy.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import CopySvg from '../ast/Copy';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Copy = (
+const Copy = forwardRef<SVGSVGElement, IconBaseProps>(function Copy(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={CopySvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={CopySvg} />});
 
-Copy.displayName = 'Copy';
 export default Copy;

package/src/icons/react/Database.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import DatabaseSvg from '../ast/Database';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Database = (
+const Database = forwardRef<SVGSVGElement, IconBaseProps>(function Database(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={DatabaseSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={DatabaseSvg} />});
 
-Database.displayName = 'Database';
 export default Database;

package/src/icons/react/DatabaseStroke.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import DatabaseStrokeSvg from '../ast/DatabaseStroke';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const DatabaseStroke = (
+const DatabaseStroke = forwardRef<SVGSVGElement, IconBaseProps>(function DatabaseStroke(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={DatabaseStrokeSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={DatabaseStrokeSvg} />});
 
-DatabaseStroke.displayName = 'DatabaseStroke';
 export default DatabaseStroke;

package/src/icons/react/Delete.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import DeleteSvg from '../ast/Delete';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Delete = (
+const Delete = forwardRef<SVGSVGElement, IconBaseProps>(function Delete(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={DeleteSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={DeleteSvg} />});
 
-Delete.displayName = 'Delete';
 export default Delete;

package/src/icons/react/Demo.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import DemoSvg from '../ast/Demo';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Demo = (
+const Demo = forwardRef<SVGSVGElement, IconBaseProps>(function Demo(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={DemoSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={DemoSvg} />});
 
-Demo.displayName = 'Demo';
 export default Demo;

package/src/icons/react/DoubleArrowLeft.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import DoubleArrowLeftSvg from '../ast/DoubleArrowLeft';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const DoubleArrowLeft = (
+const DoubleArrowLeft = forwardRef<SVGSVGElement, IconBaseProps>(function DoubleArrowLeft(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={DoubleArrowLeftSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={DoubleArrowLeftSvg} />});
 
-DoubleArrowLeft.displayName = 'DoubleArrowLeft';
 export default DoubleArrowLeft;

package/src/icons/react/DoubleArrowRight.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import DoubleArrowRightSvg from '../ast/DoubleArrowRight';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const DoubleArrowRight = (
+const DoubleArrowRight = forwardRef<SVGSVGElement, IconBaseProps>(function DoubleArrowRight(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={DoubleArrowRightSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={DoubleArrowRightSvg} />});
 
-DoubleArrowRight.displayName = 'DoubleArrowRight';
 export default DoubleArrowRight;

package/src/icons/react/DragBlockHandle.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import DragBlockHandleSvg from '../ast/DragBlockHandle';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const DragBlockHandle = (
+const DragBlockHandle = forwardRef<SVGSVGElement, IconBaseProps>(function DragBlockHandle(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={DragBlockHandleSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={DragBlockHandleSvg} />});
 
-DragBlockHandle.displayName = 'DragBlockHandle';
 export default DragBlockHandle;

package/src/icons/react/DragBlockHandleSingle.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import DragBlockHandleSingleSvg from '../ast/DragBlockHandleSingle';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const DragBlockHandleSingle = (
+const DragBlockHandleSingle = forwardRef<SVGSVGElement, IconBaseProps>(function DragBlockHandleSingle(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={DragBlockHandleSingleSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={DragBlockHandleSingleSvg} />});
 
-DragBlockHandleSingle.displayName = 'DragBlockHandleSingle';
 export default DragBlockHandleSingle;

package/src/icons/react/DragHandle.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import DragHandleSvg from '../ast/DragHandle';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const DragHandle = (
+const DragHandle = forwardRef<SVGSVGElement, IconBaseProps>(function DragHandle(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={DragHandleSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={DragHandleSvg} />});
 
-DragHandle.displayName = 'DragHandle';
 export default DragHandle;

package/src/icons/react/DynamicFilterValue.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import DynamicFilterValueSvg from '../ast/DynamicFilterValue';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const DynamicFilterValue = (
+const DynamicFilterValue = forwardRef<SVGSVGElement, IconBaseProps>(function DynamicFilterValue(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={DynamicFilterValueSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={DynamicFilterValueSvg} />});
 
-DynamicFilterValue.displayName = 'DynamicFilterValue';
 export default DynamicFilterValue;