@tactics/toddle-styleguide 1.2.9 → 1.3.0

package/App.tsx

@@ -71,6 +71,8 @@ import {TimePickerPreview} from './src/components/molecules/time-picker/time-pic
 import {PopOverActionPreview} from './src/components/templates/popover-action/popover-action.preview';
 import {QuickMessagePreview} from './src/components/atoms/quick-message/quick-message.preview';
 import {TabViewPreview} from './src/components/organisms/tab-view/tab-view.preview';
+import {LinePreview} from './src/components/atoms/line/line.preview';
+import {JournalEntryPreview} from './src/components/organisms/journal-entry/journal-entry.preview';
 
 const Stack = createNativeStackNavigator();
 
@@ -179,10 +181,15 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="Info Component"
         onPress={() => navigation.push('info')}
       />
+      <ReactBtn
+        title="Journal Entry"
+        onPress={() => navigation.push('journal-entry')}
+      />
       <ReactBtn
         title="Language Button"
         onPress={() => navigation.push('language-button')}
       />
+      <ReactBtn title="Line" onPress={() => navigation.push('line')} />
       <ReactBtn
         title="Loading Indicator"
         onPress={() => navigation.push('loading-indicator')}
@@ -371,9 +378,13 @@ function App() {
             {() => <IncrementInputPreview />}
           </Stack.Screen>
           <Stack.Screen name="info">{() => <InfoPreview />}</Stack.Screen>
+          <Stack.Screen name="journal-entry">
+            {() => <JournalEntryPreview />}
+          </Stack.Screen>
           <Stack.Screen name="language-button">
             {() => <LanguageButtonPreview />}
           </Stack.Screen>
+          <Stack.Screen name="line">{() => <LinePreview />}</Stack.Screen>
           <Stack.Screen name="loading-indicator">
             {() => <LoadingIndicatorPreview />}
           </Stack.Screen>

package/index.d.ts

@@ -56,6 +56,7 @@ import { TimePicker } from './src/components/molecules/time-picker/time-picker.c
 import { PopOverAction } from './src/components/templates/popover-action/popover-action.component';
 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 { BubbleAlignment } from './src/types/bubble-alignment.enum';
 import { KeyBoardTypes } from './src/types/keyboard-types.enum';
 import { Size } from './src/types/size.enum';
@@ -65,4 +66,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, 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, 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

@@ -74,6 +74,7 @@ import {TimePicker} from './src/components/molecules/time-picker/time-picker.com
 import {PopOverAction} from './src/components/templates/popover-action/popover-action.component';
 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';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -126,6 +127,7 @@ export {
   IncrementInput,
   Info,
   LanguageButton,
+  Line,
   LoadingIndicator,
   Logo,
   MessageInput,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "1.2.9",
+  "version": "1.3.0",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

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

@@ -1,6 +1,9 @@
 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) => JSX.Element;
+export {Backdrop as Backdrop};

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

@@ -804,7 +804,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Vrijdag 4 Augustus 2023 "
+            accessibilityLabel=" Vrijdag 4 Augustus 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -836,10 +836,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,
@@ -859,9 +855,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#7B93DB",
-                  },
                 ]
               }
             >
@@ -1307,7 +1300,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Donderdag 10 Augustus 2023 "
+            accessibilityLabel="today Donderdag 10 Augustus 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1339,6 +1332,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,
@@ -1358,6 +1355,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -4175,8 +4175,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Vrijdag 4 Augustus 2023 "
-            accessibilityRole="button"
+            accessibilityLabel=" Vrijdag 4 Augustus 2023 "
             accessibilityState={
               {
                 "busy": undefined,
@@ -4207,10 +4206,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,
@@ -4231,7 +4226,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#7B93DB",
+                    "color": "#9AA5B1",
                   },
                 ]
               }
@@ -4688,7 +4683,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Donderdag 10 Augustus 2023 "
+            accessibilityLabel="today Donderdag 10 Augustus 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -4719,6 +4715,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,
@@ -4739,7 +4739,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,9 +1,14 @@
-import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
+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) => JSX.Element;
 export {};

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

@@ -1,6 +1,6 @@
 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) => JSX.Element;
 export {};

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) => JSX.Element;
+export {Footer as Footer};

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

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

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

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

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

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

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

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

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

@@ -1,2 +1,10 @@
-import { TextProperties } from '../../../../types/text-properties.type';
-export declare const Heading4: ({ bold, children, textColor, textAlign, addStyle, numberOfLines, ellipsizeMode, }: TextProperties) => JSX.Element;
+import {TextProperties} from '../../../../types/text-properties.type';
+export declare const Heading4: ({
+  bold,
+  children,
+  textColor,
+  textAlign,
+  addStyle,
+  numberOfLines,
+  ellipsizeMode,
+}: TextProperties) => 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,8 +1,11 @@
-import { ImageSourcePropType } from 'react-native';
-import { BubbleAlignment } from '../../../types/bubble-alignment.enum';
+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) => JSX.Element;
+export {ImageBubble as ImageBubble};

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

@@ -1,7 +1,11 @@
 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) => JSX.Element;
 export {};

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

@@ -0,0 +1,12 @@
+type Orientation = 'horizontal' | 'vertical';
+interface LineProps {
+  color?: string;
+  thickness?: number;
+  orientation?: Orientation;
+}
+export declare const Line: ({
+  color,
+  thickness,
+  orientation,
+}: LineProps) => JSX.Element;
+export {};

package/src/components/atoms/line/line.component.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import {View} from 'react-native';
+import {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './line.styles';
+
+type Orientation = 'horizontal' | 'vertical';
+
+interface LineProps {
+  color?: string;
+  thickness?: number;
+  orientation?: Orientation;
+}
+
+export const Line = ({
+  color,
+  thickness = 1,
+  orientation = 'horizontal',
+}: LineProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, color, orientation, thickness);
+  return <View style={styles.container} />;
+};

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

@@ -0,0 +1 @@
+export declare const LinePreview: () => JSX.Element;

package/src/components/atoms/line/line.preview.tsx

@@ -0,0 +1,54 @@
+import {View} from 'react-native';
+import {Line} from './line.component';
+import {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+
+export const LinePreview = () => {
+  const context = useContext(ThemeCtx);
+  return (
+    <View style={{flex: 1, gap: 24, padding: 32, backgroundColor: 'white'}}>
+      <Line />
+      <Line
+        color={context.colors.main[5]}
+        orientation={'horizontal'}
+        thickness={2}
+      />
+      <Line
+        color={context.colors.main[9]}
+        orientation={'horizontal'}
+        thickness={3}
+      />
+      <View
+        style={{
+          flex: 1,
+          flexDirection: 'row',
+          justifyContent: 'space-around',
+          alignItems: 'center',
+        }}
+      >
+        <Line
+          color={context.colors.main[7]}
+          orientation={'vertical'}
+          thickness={14}
+        />
+        <Line
+          color={context.colors.main[0]}
+          orientation={'vertical'}
+          thickness={6}
+        />
+      </View>
+      <View style={{flex: 1, gap: 24}}>
+        <Line
+          color={context.colors.main[5]}
+          orientation={'horizontal'}
+          thickness={6}
+        />
+        <Line
+          color={context.colors.main[9]}
+          orientation={'horizontal'}
+          thickness={12}
+        />
+      </View>
+    </View>
+  );
+};

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

@@ -0,0 +1,12 @@
+export function Stylesheet(
+  context: any,
+  color: any,
+  orientation: any,
+  thickness: any
+): {
+  container: {
+    backgroundColor: any;
+    height: any;
+    width: any;
+  };
+};

package/src/components/atoms/line/line.styles.js

@@ -0,0 +1,10 @@
+import {StyleSheet} from 'react-native';
+
+export const Stylesheet = (context, color, orientation, thickness) =>
+  StyleSheet.create({
+    container: {
+      backgroundColor: color ? color : context.colors.ui.xlightgrey,
+      height: orientation === 'horizontal' ? thickness : '100%',
+      width: orientation === 'vertical' ? thickness : '100%',
+    },
+  });

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

@@ -1,6 +1,6 @@
 type logoProps = {
-    colorIsWhite?: boolean;
-    big?: boolean;
+  colorIsWhite?: boolean;
+  big?: boolean;
 };
-declare const Logo: ({ colorIsWhite, big }: logoProps) => JSX.Element;
-export { Logo as Logo };
+declare const Logo: ({colorIsWhite, big}: logoProps) => JSX.Element;
+export {Logo as Logo};

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

@@ -1,4 +1,4 @@
-import { Paragraph } from './paragraph/paragraph.component';
-import { SmallText } from './small-text/small-text.component';
-import { TinyText } from './tiny-text/tiny-text.component';
-export { Paragraph, SmallText, TinyText };
+import {Paragraph} from './paragraph/paragraph.component';
+import {SmallText} from './small-text/small-text.component';
+import {TinyText} from './tiny-text/tiny-text.component';
+export {Paragraph, SmallText, TinyText};

package/src/components/atoms/paragraph-components/paragraph/paragraph.component.d.ts

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

package/src/components/atoms/paragraph-components/small-text/small-text.component.d.ts

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

package/src/components/atoms/paragraph-components/tiny-text/tiny-text.component.d.ts

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

package/src/components/atoms/quick-message/quick-message.component.d.ts

@@ -1,8 +1,13 @@
-import { PressableProps } from 'react-native';
+import {PressableProps} from 'react-native';
 interface QuickMessageProps extends PressableProps {
-    message: string;
-    setMessage: (value: string) => void;
-    selectedMessage: boolean;
+  message: string;
+  setMessage: (value: string) => void;
+  selectedMessage: boolean;
 }
-export declare const QuickMessage: ({ message, setMessage, selectedMessage, ...props }: QuickMessageProps) => JSX.Element;
+export declare const QuickMessage: ({
+  message,
+  setMessage,
+  selectedMessage,
+  ...props
+}: QuickMessageProps) => JSX.Element;
 export {};

package/src/components/atoms/quick-message/quick-message.styles.d.ts

@@ -1,14 +1,17 @@
-export function Stylesheet(context: any, selectedMessage: any): {
-    container: {
-        width: string;
-        backgroundColor: any;
-        paddingTop: number;
-        paddingBottom: number;
-        paddingRight: number;
-        paddingLeft: number;
-        borderBottomLeftRadius: number;
-        borderTopLeftRadius: number;
-        borderTopRightRadius: number;
-        borderBottomRightRadius: number;
-    };
+export function Stylesheet(
+  context: any,
+  selectedMessage: any
+): {
+  container: {
+    width: string;
+    backgroundColor: any;
+    paddingTop: number;
+    paddingBottom: number;
+    paddingRight: number;
+    paddingLeft: number;
+    borderBottomLeftRadius: number;
+    borderTopLeftRadius: number;
+    borderTopRightRadius: number;
+    borderBottomRightRadius: number;
+  };
 };

package/src/components/atoms/split-container/split-container.component.d.ts

@@ -1,7 +1,10 @@
 import * as React from 'react';
 type splitContainerProps = {
-    element1: React.ReactNode;
-    element2?: React.ReactNode;
+  element1: React.ReactNode;
+  element2?: React.ReactNode;
 };
-declare const SplitContainer: ({ element1, element2 }: splitContainerProps) => JSX.Element;
-export { SplitContainer as SplitContainer };
+declare const SplitContainer: ({
+  element1,
+  element2,
+}: splitContainerProps) => JSX.Element;
+export {SplitContainer as SplitContainer};