@tactics/toddle-styleguide 1.3.2 → 1.4.0

package/App.d.ts

@@ -1,4 +1,5 @@
+import React from 'react';
 import 'intl';
 import 'intl/locale-data/jsonp/en';
-declare function App(): JSX.Element;
+declare function App(): React.JSX.Element;
 export default App;

package/index.d.ts

@@ -57,6 +57,7 @@ import { PopOverAction } from './src/components/templates/popover-action/popover
 import { QuickMessage } from './src/components/atoms/quick-message/quick-message.component';
 import { TabView } from './src/components/organisms/tab-view/tab-view.component';
 import { Line } from './src/components/atoms/line/line.component';
+import { JournalEntry } from './src/components/organisms/journal-entry/journal-entry.component';
 import { BubbleAlignment } from './src/types/bubble-alignment.enum';
 import { KeyBoardTypes } from './src/types/keyboard-types.enum';
 import { Size } from './src/types/size.enum';
@@ -66,4 +67,4 @@ import { ToddleDateTime } from './src/utilities/toddle-datetime/toddle-datetime.
 import { ThemeCtx } from './src/context/theme.context';
 import { Scale } from './src/theme/scale/index';
 import CreateResponsiveStyle from './src/theme/responsive/index';
-export { AllCapsHeading, Avatar, BackgroundGradient, BlockedMessage, Button, Calendar, CalendarSelect, CancelLink, Check, Checkbox, ChildListItem, ContactItem, ContactRole, DateInput, DaySelect, DefaultSelect, DepartmentLogo, FilterRange, FilterTab, Footer, Heading1, Heading2, Heading3, Heading4, Icon, ImageBubble, IncrementInput, Info, LanguageButton, Line, LoadingIndicator, Logo, MessageInput, Modal, MoreInfoButton, MyChildListItem, Paragraph, PasswordInput, PersonInfoCard, Pill, Popover, PopOverAction, PressableIcon, QuickFilter, QuickMessage, Search, SelectLink, SelectListItem, SelectPicker, SmallText, Snackbar, SplitContainer, Swipe, TabView, Tag, TextBubble, TextInput, TimeLine, TimePicker, TimeTracker, TinyText, WaveBackground, WideButton, BubbleAlignment, Initials, KeyBoardTypes, Size, ThemeCtx, ToddleDateTime, VisualState, CreateResponsiveStyle, Scale, };
+export { AllCapsHeading, Avatar, BackgroundGradient, BlockedMessage, Button, Calendar, CalendarSelect, CancelLink, Check, Checkbox, ChildListItem, ContactItem, ContactRole, DateInput, DaySelect, DefaultSelect, DepartmentLogo, FilterRange, FilterTab, Footer, Heading1, Heading2, Heading3, Heading4, Icon, ImageBubble, IncrementInput, Info, JournalEntry, LanguageButton, Line, LoadingIndicator, Logo, MessageInput, Modal, MoreInfoButton, MyChildListItem, Paragraph, PasswordInput, PersonInfoCard, Pill, Popover, PopOverAction, PressableIcon, QuickFilter, QuickMessage, Search, SelectLink, SelectListItem, SelectPicker, SmallText, Snackbar, SplitContainer, Swipe, TabView, Tag, TextBubble, TextInput, TimeLine, TimePicker, TimeTracker, TinyText, WaveBackground, WideButton, BubbleAlignment, Initials, KeyBoardTypes, Size, ThemeCtx, ToddleDateTime, VisualState, CreateResponsiveStyle, Scale, };

package/index.tsx

@@ -75,6 +75,7 @@ import {PopOverAction} from './src/components/templates/popover-action/popover-a
 import {QuickMessage} from './src/components/atoms/quick-message/quick-message.component';
 import {TabView} from './src/components/organisms/tab-view/tab-view.component';
 import {Line} from './src/components/atoms/line/line.component';
+import {JournalEntry} from './src/components/organisms/journal-entry/journal-entry.component';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -126,6 +127,7 @@ export {
   ImageBubble,
   IncrementInput,
   Info,
+  JournalEntry,
   LanguageButton,
   Line,
   LoadingIndicator,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",
@@ -19,10 +19,10 @@
   "packageManager": "yarn@3.3.1",
   "dependencies": {
     "@callstack/react-theme-provider": "^3.0.8",
-    "@expo/config-plugins": "~6.0.2",
-    "@expo/webpack-config": "^18.1.0",
+    "@expo/config-plugins": "~7.2.2",
+    "@expo/webpack-config": "^19.0.0",
     "@miblanchard/react-native-slider": "^2.3.1",
-    "@react-native-picker/picker": "2.4.8",
+    "@react-native-picker/picker": "2.4.10",
     "@react-navigation/bottom-tabs": "^6.5.8",
     "@react-navigation/drawer": "^6.6.3",
     "@react-navigation/native": "^6.1.7",
@@ -32,30 +32,30 @@
     "@testing-library/react-native": "^12.1.2",
     "@types/luxon": "^3.3.0",
     "@types/xdate": "^0.8.32",
-    "expo": "^48.0.19",
-    "expo-font": "~11.1.1",
-    "expo-haptics": "~12.2.1",
-    "expo-linear-gradient": "~12.1.2",
-    "expo-status-bar": "~1.4.4",
+    "expo": "^49.0.0",
+    "expo-font": "~11.4.0",
+    "expo-haptics": "~12.4.0",
+    "expo-linear-gradient": "~12.3.0",
+    "expo-status-bar": "~1.6.0",
     "intl": "^1.2.5",
     "jsc-android": "^250231.0.0",
     "lottie-ios": "4.2.0",
-    "lottie-react-native": "5.1.4",
+    "lottie-react-native": "5.1.6",
     "luxon": "^3.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.71.8",
+    "react-native": "0.72.5",
     "react-native-calendar-strip": "^2.2.6",
     "react-native-calendars": "^1.1299.0",
-    "react-native-gesture-handler": "~2.9.0",
-    "react-native-pager-view": "6.1.2",
+    "react-native-gesture-handler": "~2.12.0",
+    "react-native-pager-view": "6.2.0",
     "react-native-picker-select": "^8.0.4",
-    "react-native-reanimated": "~2.14.4",
-    "react-native-safe-area-context": "4.5.0",
-    "react-native-screens": "~3.20.0",
-    "react-native-svg": "13.4.0",
+    "react-native-reanimated": "~3.3.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0",
+    "react-native-svg": "13.9.0",
     "react-native-swipe-gestures": "^1.0.5",
-    "react-native-web": "~0.18.10",
+    "react-native-web": "~0.19.6",
     "react-native-wheel-picker-expo": "^0.5.4",
     "react-test-renderer": "^18.2.0"
   },
@@ -65,7 +65,7 @@
     "@types/jest": "^29.5.2",
     "@types/luxon": "^3.3.0",
     "@types/node": "^20.3.1",
-    "@types/react": "~18.0.27",
+    "@types/react": "~18.2.14",
     "@types/react-dom": "~18.0.10",
     "@types/react-test-renderer": "^18.0.0",
     "jest": "^29.5.0",
@@ -73,6 +73,6 @@
     "prettier": "2.8.8",
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.4"
+    "typescript": "^5.1.3"
   }
 }

package/src/components/atoms/animated-wave/animated-wave.component.d.ts

@@ -1 +1,2 @@
-export declare const AnimatedWave: () => JSX.Element;
+import React from 'react';
+export declare const AnimatedWave: () => React.JSX.Element;

package/src/components/atoms/animated-wave/animated-wave.styles.d.ts

@@ -1,21 +1,21 @@
 export function Stylesheet(Context: any): {
-  container: {
-    flex: number;
-    alignItems: 'center';
-    justifyContent: 'flex-start';
-  };
-  animationContainer: {
-    width: string;
-    alignItems: 'center';
-    position: 'absolute';
-    top: number;
-    zIndex: number;
-  };
-  overlay: {
-    width: string;
-    height: string;
-    position: 'absolute';
-    top: number;
-    backgroundColor: any;
-  };
+    container: {
+        flex: number;
+        alignItems: "center";
+        justifyContent: "flex-start";
+    };
+    animationContainer: {
+        width: "100%";
+        alignItems: "center";
+        position: "absolute";
+        top: "-1%";
+        zIndex: number;
+    };
+    overlay: {
+        width: "100%";
+        height: "30%";
+        position: "absolute";
+        top: "38%";
+        backgroundColor: any;
+    };
 };

package/src/components/atoms/backdrop/backdrop.component.d.ts

@@ -1,9 +1,7 @@
+import * as React from 'react';
 type PopoverBackdropProps = {
-  isVisible: boolean;
-  touchBackDrop?: (value: boolean) => void;
+    isVisible: boolean;
+    touchBackDrop?: (value: boolean) => void;
 };
-declare const Backdrop: ({
-  isVisible,
-  touchBackDrop,
-}: PopoverBackdropProps) => JSX.Element;
-export {Backdrop as Backdrop};
+declare const Backdrop: ({ isVisible, touchBackDrop }: PopoverBackdropProps) => React.JSX.Element;
+export { Backdrop as Backdrop };

package/src/components/atoms/backdrop/backdrop.styles.d.ts

@@ -1,11 +1,11 @@
 export function Stylesheet(Context: any): {
-  element: {
-    width: string;
-    height: string;
-    backgroundColor: any;
-    zIndex: number;
-    position: 'absolute';
-    top: number;
-    left: number;
-  };
+    element: {
+        width: "100%";
+        height: "100%";
+        backgroundColor: any;
+        zIndex: number;
+        position: "absolute";
+        top: number;
+        left: number;
+    };
 };

package/src/components/atoms/background-gradient/background-gradient.component.d.ts

@@ -1 +1,2 @@
-export declare const BackgroundGradient: () => JSX.Element;
+import React from 'react';
+export declare const BackgroundGradient: () => React.JSX.Element;

package/src/components/atoms/background-gradient/background-gradient.preview.d.ts

@@ -1 +1,2 @@
-export declare const BackgroundGradientPreview: ({}: {}) => JSX.Element;
+import React from 'react';
+export declare const BackgroundGradientPreview: ({}: {}) => React.JSX.Element;

package/src/components/atoms/background-gradient/background-gradient.styles.d.ts

@@ -1,8 +1,8 @@
 export function Stylesheet(): {
-  rootContainer: {
-    width: string;
-    height: string;
-    position: 'absolute';
-    zIndex: number;
-  };
+    rootContainer: {
+        width: "100%";
+        height: "100%";
+        position: "absolute";
+        zIndex: number;
+    };
 };

package/src/components/atoms/calendar/__snapshots__/calendar.test.js.snap

@@ -1381,7 +1381,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Vrijdag 11 Augustus 2023 "
+            accessibilityLabel=" Vrijdag 11 Augustus 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1413,10 +1413,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -1436,9 +1432,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#7B93DB",
-                  },
                 ]
               }
             >
@@ -1641,7 +1634,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Maandag 14 Augustus 2023 "
+            accessibilityLabel="today Maandag 14 Augustus 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1673,6 +1666,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -1692,6 +1689,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -4766,8 +4766,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Vrijdag 11 Augustus 2023 "
-            accessibilityRole="button"
+            accessibilityLabel=" Vrijdag 11 Augustus 2023 "
             accessibilityState={
               {
                 "busy": undefined,
@@ -4798,10 +4797,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -4822,7 +4817,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#7B93DB",
+                    "color": "#9AA5B1",
                   },
                 ]
               }
@@ -5030,7 +5025,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Maandag 14 Augustus 2023 "
+            accessibilityLabel="today Maandag 14 Augustus 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -5061,6 +5057,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -5081,7 +5081,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#9AA5B1",
+                    "color": "#7B93DB",
                   },
                 ]
               }

package/src/components/atoms/calendar/calendar.component.d.ts

@@ -1,14 +1,10 @@
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import React from 'react';
+import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
 type CalendarProps = {
-  onDayPress: (day: ToddleDateTime) => void;
-  selected: ToddleDateTime;
-  minDate?: string;
-  maxDate?: string;
+    onDayPress: (day: ToddleDateTime) => void;
+    selected: ToddleDateTime;
+    minDate?: string;
+    maxDate?: string;
 };
-export declare const Calendar: ({
-  onDayPress,
-  selected,
-  minDate,
-  maxDate,
-}: CalendarProps) => JSX.Element;
+export declare const Calendar: ({ onDayPress, selected, minDate, maxDate, }: CalendarProps) => React.JSX.Element;
 export {};

package/src/components/atoms/calendar/calendar.preview.d.ts

@@ -1 +1,2 @@
-export declare const CalendarPreview: ({}: {}) => JSX.Element;
+import React from 'react';
+export declare const CalendarPreview: ({}: {}) => React.JSX.Element;

package/src/components/atoms/check-switch/check-switch.component.d.ts

@@ -1,6 +1,7 @@
+import * as React from 'react';
 type CheckProps = {
-  value: boolean;
-  onToggle: () => void;
+    value: boolean;
+    onToggle: () => void;
 };
-export declare const Check: ({value, onToggle}: CheckProps) => JSX.Element;
+export declare const Check: ({ value, onToggle }: CheckProps) => React.JSX.Element;
 export {};

package/src/components/atoms/check-switch/check-switch.preview.d.ts

@@ -1 +1,2 @@
-export declare const CheckPreview: ({}: {}) => JSX.Element;
+import React from 'react';
+export declare const CheckPreview: ({}: {}) => React.JSX.Element;

package/src/components/atoms/footer/footer.component.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import {ViewStyle} from 'react-native';
-import {AnimateStyle} from 'react-native-reanimated';
+import { ViewStyle } from 'react-native';
+import { AnimateStyle } from 'react-native-reanimated';
 type FooterProps = {
-  children: React.ReactNode;
-  animatedStyle?: AnimateStyle<ViewStyle>;
+    children: React.ReactNode;
+    animatedStyle?: AnimateStyle<ViewStyle>;
 };
-declare const Footer: ({children, animatedStyle}: FooterProps) => JSX.Element;
-export {Footer as Footer};
+declare const Footer: ({ children, animatedStyle }: FooterProps) => React.JSX.Element;
+export { Footer as Footer };

package/src/components/atoms/footer/footer.preview.d.ts

@@ -1 +1,2 @@
-export declare const FooterPreview: ({}: {}) => JSX.Element;
+import React from 'react';
+export declare const FooterPreview: ({}: {}) => React.JSX.Element;

package/src/components/atoms/footer/footer.styles.d.ts

@@ -1,15 +1,14 @@
 export function Stylesheet(context: any): {
-  container: {
-    flexDirection: 'row';
-    alignItems: 'center';
-    justifyContent: 'center';
-    backgroundColor: any;
-    borderTopColor: any;
-    borderTopStyle: string;
-    borderTopWidth: number;
-    height: number;
-    width: string;
-    position: 'absolute';
-    bottom: number;
-  };
+    container: {
+        flexDirection: "row";
+        alignItems: "center" | "flex-start";
+        justifyContent: "center";
+        paddingTop: number;
+        backgroundColor: any;
+        borderTopColor: any;
+        borderStyle: "solid";
+        borderTopWidth: number;
+        height: number;
+        width: "100%";
+    };
 };

package/src/components/atoms/heading-components/all-caps-heading/all-caps-heading.component.d.ts

@@ -1,10 +1,3 @@
-import {TextProperties} from '../../../../types/text-properties.type';
-export declare const AllCapsHeading: ({
-  bold,
-  children,
-  textColor,
-  textAlign,
-  numberOfLines,
-  ellipsizeMode,
-  addStyle,
-}: TextProperties) => JSX.Element;
+import React from 'react';
+import { TextProperties } from '../../../../types/text-properties.type';
+export declare const AllCapsHeading: ({ bold, children, textColor, textAlign, numberOfLines, ellipsizeMode, addStyle, }: TextProperties) => React.JSX.Element;

package/src/components/atoms/heading-components/heading1/heading1.component.d.ts

@@ -1,10 +1,3 @@
-import {TextProperties} from '../../../../types/text-properties.type';
-export declare const Heading1: ({
-  bold,
-  children,
-  textColor,
-  textAlign,
-  addStyle,
-  ellipsizeMode,
-  numberOfLines,
-}: TextProperties) => JSX.Element;
+import React from 'react';
+import { TextProperties } from '../../../../types/text-properties.type';
+export declare const Heading1: ({ bold, children, textColor, textAlign, addStyle, ellipsizeMode, numberOfLines, }: TextProperties) => React.JSX.Element;

package/src/components/atoms/heading-components/heading2/heading2.component.d.ts

@@ -1,10 +1,3 @@
-import {TextProperties} from '../../../../types/text-properties.type';
-export declare const Heading2: ({
-  bold,
-  children,
-  textColor,
-  textAlign,
-  numberOfLines,
-  ellipsizeMode,
-  addStyle,
-}: TextProperties) => JSX.Element;
+import React from 'react';
+import { TextProperties } from '../../../../types/text-properties.type';
+export declare const Heading2: ({ bold, children, textColor, textAlign, numberOfLines, ellipsizeMode, addStyle, }: TextProperties) => React.JSX.Element;

package/src/components/atoms/heading-components/heading3/heading3.component.d.ts

@@ -1,10 +1,3 @@
-import {TextProperties} from '../../../../types/text-properties.type';
-export declare const Heading3: ({
-  bold,
-  children,
-  textColor,
-  textAlign,
-  addStyle,
-  numberOfLines,
-  ellipsizeMode,
-}: TextProperties) => JSX.Element;
+import React from 'react';
+import { TextProperties } from '../../../../types/text-properties.type';
+export declare const Heading3: ({ bold, children, textColor, textAlign, addStyle, numberOfLines, ellipsizeMode, }: TextProperties) => React.JSX.Element;

package/src/components/atoms/heading-components/heading4/heading4.component.d.ts

@@ -1,10 +1,3 @@
-import {TextProperties} from '../../../../types/text-properties.type';
-export declare const Heading4: ({
-  bold,
-  children,
-  textColor,
-  textAlign,
-  addStyle,
-  numberOfLines,
-  ellipsizeMode,
-}: TextProperties) => JSX.Element;
+import React from 'react';
+import { TextProperties } from '../../../../types/text-properties.type';
+export declare const Heading4: ({ bold, children, textColor, textAlign, addStyle, numberOfLines, ellipsizeMode, }: TextProperties) => React.JSX.Element;

package/src/components/atoms/heading-components/headings.preview.d.ts

@@ -1 +1,2 @@
-export declare const HeadingsPreview: ({}: {}) => JSX.Element;
+import React from 'react';
+export declare const HeadingsPreview: ({}: {}) => React.JSX.Element;

package/src/components/atoms/heading-components/index.d.ts

@@ -1,6 +1,6 @@
-import {Heading1} from './heading1/heading1.component';
-import {Heading2} from './heading2/heading2.component';
-import {Heading3} from './heading3/heading3.component';
-import {Heading4} from './heading4/heading4.component';
-import {AllCapsHeading} from './all-caps-heading/all-caps-heading.component';
-export {AllCapsHeading, Heading1, Heading2, Heading3, Heading4};
+import { Heading1 } from './heading1/heading1.component';
+import { Heading2 } from './heading2/heading2.component';
+import { Heading3 } from './heading3/heading3.component';
+import { Heading4 } from './heading4/heading4.component';
+import { AllCapsHeading } from './all-caps-heading/all-caps-heading.component';
+export { AllCapsHeading, Heading1, Heading2, Heading3, Heading4 };

package/src/components/atoms/image-bubble/image-bubble.component.d.ts

@@ -1,11 +1,9 @@
-import {ImageSourcePropType} from 'react-native';
-import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
+import * as React from 'react';
+import { ImageSourcePropType } from 'react-native';
+import { BubbleAlignment } from '../../../types/bubble-alignment.enum';
 type ImageBubbleProps = {
-  source: ImageSourcePropType;
-  bubbleAlignment: BubbleAlignment;
+    source: ImageSourcePropType;
+    bubbleAlignment: BubbleAlignment;
 };
-declare const ImageBubble: ({
-  source,
-  bubbleAlignment,
-}: ImageBubbleProps) => JSX.Element;
-export {ImageBubble as ImageBubble};
+declare const ImageBubble: ({ source, bubbleAlignment }: ImageBubbleProps) => React.JSX.Element;
+export { ImageBubble as ImageBubble };

package/src/components/atoms/image-bubble/image-bubble.preview.d.ts

@@ -1 +1,2 @@
-export declare const ImageBubblePreview: ({}: {}) => JSX.Element;
+import React from 'react';
+export declare const ImageBubblePreview: ({}: {}) => React.JSX.Element;

package/src/components/atoms/increment-input/increment-input.component.d.ts

@@ -1,11 +1,8 @@
+import React from 'react';
 type IncrementInputProps = {
-  value: number;
-  maxValue?: number;
-  onPress: (number: number) => void;
+    value: number;
+    maxValue?: number;
+    onPress: (number: number) => void;
 };
-export declare const IncrementInput: ({
-  value,
-  onPress,
-  maxValue,
-}: IncrementInputProps) => JSX.Element;
+export declare const IncrementInput: ({ value, onPress, maxValue, }: IncrementInputProps) => React.JSX.Element;
 export {};

package/src/components/atoms/increment-input/increment-input.preview.d.ts

@@ -1 +1,2 @@
-export declare const IncrementInputPreview: ({}: {}) => JSX.Element;
+import React from 'react';
+export declare const IncrementInputPreview: ({}: {}) => React.JSX.Element;