@tactics/toddle-styleguide 1.2.3 → 1.2.5

package/App.tsx

@@ -68,6 +68,7 @@ import {ToddleDateTimePreview} from './src/utilities/toddle-datetime/toddle-date
 import {BackgroundGradientPreview} from './src/components/atoms/background-gradient/background-gradient.preview';
 import {PersonInfoCardPreview} from './src/components/organisms/person-info-card/person-info-card.preview';
 import {TimePickerPreview} from './src/components/molecules/time-picker/time-picker.preview';
+import {PopOverActionPreview} from './src/components/templates/popover-action/popover-action.preview';
 
 const Stack = createNativeStackNavigator();
 
@@ -83,187 +84,194 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
       }}
     >
       <ReactBtn title="Avatar" onPress={() => navigation.push('avatar')} />
-      <ReactBtn title="Button" onPress={() => navigation.push('button')} />
-      <ReactBtn title="Pill" onPress={() => navigation.push('pill')} />
-      <ReactBtn title="Snackbar" onPress={() => navigation.push('snackbar')} />
       <ReactBtn
-        title="textInputs"
-        onPress={() => navigation.push('textInputs')}
+        title="Blocked message"
+        onPress={() => navigation.push('blocked-message')}
       />
+      <ReactBtn title="Button" onPress={() => navigation.push('button')} />
+      <ReactBtn title="Calendar" onPress={() => navigation.push('calendar')} />
       <ReactBtn
-        title="textBubble"
-        onPress={() => navigation.push('textBubble')}
+        title="Calendar Select"
+        onPress={() => navigation.push('calendar-select')}
       />
       <ReactBtn
-        title="ImageBubble"
-        onPress={() => navigation.push('image-bubble')}
+        title="Cancel Link"
+        onPress={() => navigation.push('cancel-link')}
       />
+      <ReactBtn title="Checkbox" onPress={() => navigation.push('checkbox')} />
       <ReactBtn
-        title="Pressable Icon"
-        onPress={() => navigation.push('pressable-icon')}
+        title="Check Switch"
+        onPress={() => navigation.push('check-switch')}
       />
       <ReactBtn
-        title="Select-list-item"
-        onPress={() => navigation.push('select-list-item')}
+        title="Child List Item"
+        onPress={() => navigation.push('child-list-item')}
       />
       <ReactBtn
-        title="Cancel link"
-        onPress={() => navigation.push('cancel-link')}
+        title="Contact Info Card"
+        onPress={() => navigation.push('person-info-card')}
       />
       <ReactBtn
-        title="ContactItem"
+        title="Contact Item"
         onPress={() => navigation.push('contact-item')}
       />
       <ReactBtn
-        title="Check switch"
-        onPress={() => navigation.push('check-switch')}
-      />
-      <ReactBtn
-        title="Info component"
-        onPress={() => navigation.push('info')}
+        title="Contact Role"
+        onPress={() => navigation.push('contact-role')}
       />
       <ReactBtn
-        title="Wide Button"
-        onPress={() => navigation.push('wide-button')}
+        title="Date Input"
+        onPress={() => navigation.push('date-input')}
       />
       <ReactBtn
-        title="Icons Default"
-        onPress={() => navigation.push('icons default')}
+        title="Day Select"
+        onPress={() => navigation.push('day-select')}
       />
       <ReactBtn
-        title="Icons grey"
-        onPress={() => navigation.push('icons grey')}
+        title="Default Select"
+        onPress={() => navigation.push('default-select')}
       />
       <ReactBtn
-        title="Icons White"
-        onPress={() => navigation.push('icons white')}
+        title="Department Logo"
+        onPress={() => navigation.push('department-logo')}
       />
       <ReactBtn
-        title="Icons Solid"
-        onPress={() => navigation.push('icons solid')}
+        title="Filter Range"
+        onPress={() => navigation.push('filter-range')}
       />
-      <ReactBtn title="Checkbox" onPress={() => navigation.push('checkbox')} />
       <ReactBtn
-        title="TimeTracker"
-        onPress={() => navigation.push('time-tracker')}
+        title="Filter Tab"
+        onPress={() => navigation.push('filter-tab')}
       />
-      <ReactBtn title="Tag" onPress={() => navigation.push('tag')} />
+      <ReactBtn title="Footer" onPress={() => navigation.push('footer')} />
       <ReactBtn
-        title="split-container"
-        onPress={() => navigation.push('split-container')}
+        title="Gradient Background"
+        onPress={() => navigation.push('background-gradient')}
       />
+      <ReactBtn title="Headings" onPress={() => navigation.push('headings')} />
       <ReactBtn
-        title="Select Picker"
-        onPress={() => navigation.push('select-picker')}
+        title="Icons Default"
+        onPress={() => navigation.push('icons default')}
       />
-      <ReactBtn title="Popover" onPress={() => navigation.push('popover')} />
       <ReactBtn
-        title="Filter Tab"
-        onPress={() => navigation.push('filter tab')}
+        title="Icons Grey"
+        onPress={() => navigation.push('icons grey')}
       />
       <ReactBtn
-        title="Child list item"
-        onPress={() => navigation.push('child-list-item')}
+        title="Icons Solid"
+        onPress={() => navigation.push('icons solid')}
       />
-      <ReactBtn title="Timeline" onPress={() => navigation.push('timeline')} />
       <ReactBtn
-        title="Filter range"
-        onPress={() => navigation.push('filter-range')}
+        title="Icons White"
+        onPress={() => navigation.push('icons white')}
       />
-      <ReactBtn title="Calendar" onPress={() => navigation.push('calendar')} />
       <ReactBtn
-        title="quickFilter"
-        onPress={() => navigation.push('quick-filter')}
+        title="Image Bubble"
+        onPress={() => navigation.push('image-bubble')}
       />
       <ReactBtn
         title="Increment input"
         onPress={() => navigation.push('increment-input')}
       />
-      <ReactBtn title="swiper" onPress={() => navigation.push('swiper')} />
-      <ReactBtn title="logo" onPress={() => navigation.push('logo')} />
       <ReactBtn
-        title="Date input"
-        onPress={() => navigation.push('date-input')}
+        title="Info Component"
+        onPress={() => navigation.push('info')}
       />
       <ReactBtn
-        title="daySelect"
-        onPress={() => navigation.push('day-select')}
+        title="Language Button"
+        onPress={() => navigation.push('language-button')}
       />
-      <ReactBtn title="search" onPress={() => navigation.push('search')} />
       <ReactBtn
-        title="Blocked message"
-        onPress={() => navigation.push('blocked-message')}
+        title="Loading Indicator"
+        onPress={() => navigation.push('loading-indicator')}
       />
+      <ReactBtn title="Logo" onPress={() => navigation.push('logo')} />
       <ReactBtn
-        title="departmentLogo"
-        onPress={() => navigation.push('departmentLogo')}
+        title="Message Input"
+        onPress={() => navigation.push('message-input')}
       />
+      <ReactBtn title="Modal" onPress={() => navigation.push('modal')} />
       <ReactBtn
-        title="Contact role"
-        onPress={() => navigation.push('contact-role')}
+        title="More Info Button"
+        onPress={() => navigation.push('more-info-button')}
       />
       <ReactBtn
-        title="calendarSelect"
-        onPress={() => navigation.push('calendar-select')}
+        title="My Child List Item"
+        onPress={() => navigation.push('my-child-list-item')}
       />
-      <ReactBtn title="footer" onPress={() => navigation.push('footer')} />
       <ReactBtn
-        title="Default select"
-        onPress={() => navigation.push('default-select')}
+        title="Paragraphs"
+        onPress={() => navigation.push('paragraphs')}
       />
       <ReactBtn
-        title="Password Input Field"
+        title="Password Input"
         onPress={() => navigation.push('password-input')}
       />
+      <ReactBtn title="Pill" onPress={() => navigation.push('pill')} />
+      <ReactBtn title="Popover" onPress={() => navigation.push('popover')} />
       <ReactBtn
-        title="Message input"
-        onPress={() => navigation.push('message-input')}
+        title="Popover Action"
+        onPress={() => navigation.push('popover-action')}
       />
-      <ReactBtn title="Headings" onPress={() => navigation.push('headings')} />
       <ReactBtn
-        title="Paragraphs"
-        onPress={() => navigation.push('paragraphs')}
+        title="Pressable Icon"
+        onPress={() => navigation.push('pressable-icon')}
       />
       <ReactBtn
-        title="My child list item"
-        onPress={() => navigation.push('my-child-list-item')}
+        title="Quick Filter"
+        onPress={() => navigation.push('quick-filter')}
       />
       <ReactBtn
-        title="Select link"
+        title="Search Input"
+        onPress={() => navigation.push('search')}
+      />
+      <ReactBtn
+        title="Select Link"
         onPress={() => navigation.push('select-link')}
       />
       <ReactBtn
-        title="More info button"
-        onPress={() => navigation.push('more-info-button')}
+        title="Select List Item"
+        onPress={() => navigation.push('select-list-item')}
       />
       <ReactBtn
-        title="Language button"
-        onPress={() => navigation.push('language-button')}
+        title="Select Picker"
+        onPress={() => navigation.push('select-picker')}
       />
-      <ReactBtn title="Modal" onPress={() => navigation.push('modal')} />
+      <ReactBtn title="Snackbar" onPress={() => navigation.push('snackbar')} />
       <ReactBtn
-        title="Loading indicator"
-        onPress={() => navigation.push('loading-indicator')}
+        title="Split Container"
+        onPress={() => navigation.push('split-container')}
       />
+      <ReactBtn title="Swiper" onPress={() => navigation.push('swiper')} />
+      <ReactBtn title="Tag" onPress={() => navigation.push('tag')} />
       <ReactBtn
-        title="Wave background"
-        onPress={() => navigation.push('wave')}
+        title="Text Bubble"
+        onPress={() => navigation.push('textBubble')}
       />
       <ReactBtn
-        title="Toddle DateTime"
-        onPress={() => navigation.push('toddle-datetime')}
+        title="Text Inputs"
+        onPress={() => navigation.push('textInputs')}
       />
       <ReactBtn
-        title="Gradient background"
-        onPress={() => navigation.push('background-gradient')}
+        title="Time Picker"
+        onPress={() => navigation.push('time-picker')}
       />
       <ReactBtn
-        title="Contact info card"
-        onPress={() => navigation.push('person-info-card')}
+        title="Time Tracker"
+        onPress={() => navigation.push('time-tracker')}
       />
+      <ReactBtn title="Timeline" onPress={() => navigation.push('timeline')} />
       <ReactBtn
-        title="Time picker"
-        onPress={() => navigation.push('time-picker')}
+        title="Toddle DateTime"
+        onPress={() => navigation.push('toddle-datetime')}
+      />
+      <ReactBtn
+        title="Wave Background"
+        onPress={() => navigation.push('wave')}
+      />
+      <ReactBtn
+        title="Wide Button"
+        onPress={() => navigation.push('wide-button')}
       />
     </ScrollView>
   );
@@ -284,156 +292,159 @@ function App() {
             {(props) => <HomeScreen {...props} />}
           </Stack.Screen>
           <Stack.Screen name="avatar">{() => <AvatarPreview />}</Stack.Screen>
-          <Stack.Screen name="button">{() => <ButtonPreview />}</Stack.Screen>
-          <Stack.Screen name="pill">{() => <PillPreview />}</Stack.Screen>
-          <Stack.Screen name="snackbar">
-            {() => <SnackbarPreview />}
-          </Stack.Screen>
-          <Stack.Screen name="textInputs">
-            {() => <TextInputPreview />}
+          <Stack.Screen name="background-gradient">
+            {() => <BackgroundGradientPreview />}
           </Stack.Screen>
-          <Stack.Screen name="textBubble">
-            {() => <TextBubblePreview />}
+          <Stack.Screen name="blocked-message">
+            {() => <BlockedMessagePreview />}
           </Stack.Screen>
-          <Stack.Screen name="image-bubble">
-            {() => <ImageBubblePreview />}
+          <Stack.Screen name="button">{() => <ButtonPreview />}</Stack.Screen>
+          <Stack.Screen name="calendar">
+            {() => <CalendarPreview />}
           </Stack.Screen>
-          <Stack.Screen name="pressable-icon">
-            {() => <PressableIconPreview />}
+          <Stack.Screen name="calendar-select">
+            {() => <CalendarSelectPreview />}
           </Stack.Screen>
           <Stack.Screen name="cancel-link">
             {() => <CancelLinkPreview />}
           </Stack.Screen>
-          <Stack.Screen name="contact-item">
-            {() => <ContactItemPreview />}
-          </Stack.Screen>
-          <Stack.Screen name="wide-button">
-            {() => <WideButtonPreview />}
+          <Stack.Screen name="checkbox">
+            {() => <CheckboxPreview />}
           </Stack.Screen>
-          <Stack.Screen name="info">{() => <InfoPreview />}</Stack.Screen>
           <Stack.Screen name="check-switch">
             {() => <CheckPreview />}
           </Stack.Screen>
-          <Stack.Screen name="icons default">
-            {() => <IconOutlineDefaultPreview />}
-          </Stack.Screen>
-          <Stack.Screen name="icons grey">
-            {() => <IconOutlineGreyPreview />}
-          </Stack.Screen>
-          <Stack.Screen name="icons white">
-            {() => <IconOutlineWhitePreview />}
-          </Stack.Screen>
-          <Stack.Screen name="icons solid">
-            {() => <IconSolidPreview />}
+          <Stack.Screen name="child-list-item">
+            {() => <ChildListItemPreview />}
           </Stack.Screen>
-          <Stack.Screen name="select-list-item">
-            {() => <SelectListItemPreview />}
+          <Stack.Screen name="contact-item">
+            {() => <ContactItemPreview />}
           </Stack.Screen>
-          <Stack.Screen name="popover" options={{headerShown: false}}>
-            {() => <PopoverPreview />}
+          <Stack.Screen name="contact-role">
+            {() => <ContactRolePreview />}
           </Stack.Screen>
-          <Stack.Screen name="filter tab">
-            {() => <FilterTabPreview />}
+          <Stack.Screen name="date-input">
+            {() => <DateInputPreview />}
           </Stack.Screen>
-          <Stack.Screen name="checkbox">
-            {() => <CheckboxPreview />}
+          <Stack.Screen name="day-select">
+            {() => <DaySelectPreview />}
           </Stack.Screen>
-          <Stack.Screen name="time-tracker">
-            {() => <TimeTrackerPreview />}
+          <Stack.Screen name="default-select">
+            {() => <DefaultSelectPreview />}
           </Stack.Screen>
-          <Stack.Screen name="tag">{() => <TagPreview />}</Stack.Screen>
-          <Stack.Screen name="split-container">
-            {() => <SplitContainerPreview />}
+          <Stack.Screen name="department-logo">
+            {() => <DepartmentLogoPreview />}
           </Stack.Screen>
-          <Stack.Screen name="select-picker">
-            {() => <SelectPickerPreview />}
+          <Stack.Screen name="filter-tab">
+            {() => <FilterTabPreview />}
           </Stack.Screen>
-          <Stack.Screen name="calendar">
-            {() => <CalendarPreview />}
+          <Stack.Screen name="filter-range">
+            {() => <FilterRangePreview />}
           </Stack.Screen>
-          <Stack.Screen name="quick-filter">
-            {() => <QuickFilterPreview />}
+          <Stack.Screen name="footer">{() => <FooterPreview />}</Stack.Screen>
+          <Stack.Screen name="headings">
+            {() => <HeadingsPreview />}
           </Stack.Screen>
-          <Stack.Screen name="date-input">
-            {() => <DateInputPreview />}
+          <Stack.Screen name="icons default">
+            {() => <IconOutlineDefaultPreview />}
           </Stack.Screen>
-          <Stack.Screen name="child-list-item">
-            {() => <ChildListItemPreview />}
+          <Stack.Screen name="icons grey">
+            {() => <IconOutlineGreyPreview />}
           </Stack.Screen>
-          <Stack.Screen name="timeline">
-            {() => <TimeLinePreview />}
+          <Stack.Screen name="icons solid">
+            {() => <IconSolidPreview />}
           </Stack.Screen>
-          <Stack.Screen name="filter-range">
-            {() => <FilterRangePreview />}
+          <Stack.Screen name="icons white">
+            {() => <IconOutlineWhitePreview />}
           </Stack.Screen>
-          <Stack.Screen name="day-select">
-            {() => <DaySelectPreview />}
+          <Stack.Screen name="image-bubble">
+            {() => <ImageBubblePreview />}
           </Stack.Screen>
           <Stack.Screen name="increment-input">
             {() => <IncrementInputPreview />}
           </Stack.Screen>
-          <Stack.Screen name="swiper">{() => <SwipePreview />}</Stack.Screen>
+          <Stack.Screen name="info">{() => <InfoPreview />}</Stack.Screen>
+          <Stack.Screen name="language-button">
+            {() => <LanguageButtonPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="loading-indicator">
+            {() => <LoadingIndicatorPreview />}
+          </Stack.Screen>
           <Stack.Screen name="logo">{() => <LogoPreview />}</Stack.Screen>
-          <Stack.Screen name="contact-role">
-            {() => <ContactRolePreview />}
+          <Stack.Screen name="message-input">
+            {() => <MessageInputPreview />}
           </Stack.Screen>
-          <Stack.Screen name="search">{() => <SearchPreview />}</Stack.Screen>
-          <Stack.Screen name="blocked-message">
-            {() => <BlockedMessagePreview />}
+          <Stack.Screen name="modal">{() => <ModalPreview />}</Stack.Screen>
+          <Stack.Screen name="more-info-button">
+            {() => <MoreInfoButtonPreview />}
           </Stack.Screen>
-          <Stack.Screen name="departmentLogo">
-            {() => <DepartmentLogoPreview />}
+          <Stack.Screen name="my-child-list-item">
+            {() => <MyChildListItemPreview />}
           </Stack.Screen>
-          <Stack.Screen name="calendar-select">
-            {() => <CalendarSelectPreview />}
+          <Stack.Screen name="paragraphs">
+            {() => <ParagraphComponentsPreview />}
           </Stack.Screen>
           <Stack.Screen name="password-input">
             {() => <PasswordInputPreview />}
           </Stack.Screen>
-          <Stack.Screen name="footer">{() => <FooterPreview />}</Stack.Screen>
-          <Stack.Screen name="default-select">
-            {() => <DefaultSelectPreview />}
+          <Stack.Screen name="person-info-card">
+            {() => <PersonInfoCardPreview />}
           </Stack.Screen>
-          <Stack.Screen name="message-input">
-            {() => <MessageInputPreview />}
+          <Stack.Screen name="pill">{() => <PillPreview />}</Stack.Screen>
+          <Stack.Screen name="popover" options={{headerShown: false}}>
+            {() => <PopoverPreview />}
           </Stack.Screen>
-          <Stack.Screen name="headings">
-            {() => <HeadingsPreview />}
+          <Stack.Screen name="popover-action" options={{headerShown: false}}>
+            {() => <PopOverActionPreview />}
           </Stack.Screen>
-          <Stack.Screen name="paragraphs">
-            {() => <ParagraphComponentsPreview />}
+          <Stack.Screen name="pressable-icon">
+            {() => <PressableIconPreview />}
           </Stack.Screen>
-          <Stack.Screen name="my-child-list-item">
-            {() => <MyChildListItemPreview />}
+          <Stack.Screen name="quick-filter">
+            {() => <QuickFilterPreview />}
           </Stack.Screen>
+          <Stack.Screen name="search">{() => <SearchPreview />}</Stack.Screen>
           <Stack.Screen name="select-link">
             {() => <SelectLinkPreview />}
           </Stack.Screen>
-          <Stack.Screen name="more-info-button">
-            {() => <MoreInfoButtonPreview />}
-          </Stack.Screen>
-          <Stack.Screen name="language-button">
-            {() => <LanguageButtonPreview />}
+          <Stack.Screen name="select-list-item">
+            {() => <SelectListItemPreview />}
           </Stack.Screen>
-          <Stack.Screen name="modal">{() => <ModalPreview />}</Stack.Screen>
-          <Stack.Screen name="wave">
-            {() => <WaveBackgroundPreview />}
+          <Stack.Screen name="select-picker">
+            {() => <SelectPickerPreview />}
           </Stack.Screen>
-          <Stack.Screen name="loading-indicator">
-            {() => <LoadingIndicatorPreview />}
+          <Stack.Screen name="snackbar">
+            {() => <SnackbarPreview />}
           </Stack.Screen>
-          <Stack.Screen name="toddle-datetime">
-            {() => <ToddleDateTimePreview />}
+          <Stack.Screen name="split-container">
+            {() => <SplitContainerPreview />}
           </Stack.Screen>
-          <Stack.Screen name="background-gradient">
-            {() => <BackgroundGradientPreview />}
+          <Stack.Screen name="swiper">{() => <SwipePreview />}</Stack.Screen>
+          <Stack.Screen name="tag">{() => <TagPreview />}</Stack.Screen>
+          <Stack.Screen name="textBubble">
+            {() => <TextBubblePreview />}
           </Stack.Screen>
-          <Stack.Screen name="person-info-card">
-            {() => <PersonInfoCardPreview />}
+          <Stack.Screen name="textInputs">
+            {() => <TextInputPreview />}
           </Stack.Screen>
           <Stack.Screen name="time-picker">
             {() => <TimePickerPreview />}
           </Stack.Screen>
+          <Stack.Screen name="time-tracker">
+            {() => <TimeTrackerPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="timeline">
+            {() => <TimeLinePreview />}
+          </Stack.Screen>
+          <Stack.Screen name="toddle-datetime">
+            {() => <ToddleDateTimePreview />}
+          </Stack.Screen>
+          <Stack.Screen name="wave">
+            {() => <WaveBackgroundPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="wide-button">
+            {() => <WideButtonPreview />}
+          </Stack.Screen>
         </Stack.Navigator>
       </NavigationContainer>
     </ThemeCtx.Provider>

package/index.d.ts

@@ -53,6 +53,7 @@ import { WaveBackground } from './src/components/molecules/wave-background/wave.
 import { BackgroundGradient } from './src/components/atoms/background-gradient/background-gradient.component';
 import { PersonInfoCard } from './src/components/organisms/person-info-card/person-info-card.component';
 import { TimePicker } from './src/components/molecules/time-picker/time-picker.component';
+import { PopOverAction } from './src/components/templates/popover-action/popover-action.component';
 import { BubbleAlignment } from './src/types/bubble-alignment.enum';
 import { KeyBoardTypes } from './src/types/keyboard-types.enum';
 import { Size } from './src/types/size.enum';
@@ -62,4 +63,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 { Initials, BubbleAlignment, KeyBoardTypes, Size, Scale, CreateResponsiveStyle, VisualState, ThemeCtx, ToddleDateTime, Avatar, Button, CancelLink, Check, Checkbox, ChildListItem, ContactItem, FilterTab, SplitContainer, ImageBubble, Info, Pill, Popover, PressableIcon, QuickFilter, Search, SelectListItem, Snackbar, Tag, TextBubble, TextInput, TimeTracker, WideButton, Icon, Calendar, IncrementInput, Swipe, Logo, DaySelect, BlockedMessage, DepartmentLogo, ContactRole, TimeLine, SelectPicker, CalendarSelect, DateInput, FilterRange, Footer, DefaultSelect, PasswordInput, MessageInput, Heading1, Heading2, Heading3, Heading4, AllCapsHeading, Paragraph, SmallText, TinyText, SelectLink, MyChildListItem, MoreInfoButton, LanguageButton, Modal, LoadingIndicator, WaveBackground, BackgroundGradient, PersonInfoCard, TimePicker, };
+export { Initials, BubbleAlignment, KeyBoardTypes, Size, Scale, CreateResponsiveStyle, VisualState, ThemeCtx, ToddleDateTime, Avatar, Button, CancelLink, Check, Checkbox, ChildListItem, ContactItem, FilterTab, SplitContainer, ImageBubble, Info, Pill, Popover, PressableIcon, QuickFilter, Search, SelectListItem, Snackbar, Tag, TextBubble, TextInput, TimeTracker, WideButton, Icon, Calendar, IncrementInput, Swipe, Logo, DaySelect, BlockedMessage, DepartmentLogo, ContactRole, TimeLine, SelectPicker, CalendarSelect, DateInput, FilterRange, Footer, DefaultSelect, PasswordInput, MessageInput, Heading1, Heading2, Heading3, Heading4, AllCapsHeading, Paragraph, SmallText, TinyText, SelectLink, MyChildListItem, MoreInfoButton, LanguageButton, Modal, LoadingIndicator, WaveBackground, BackgroundGradient, PersonInfoCard, TimePicker, PopOverAction, };

package/index.tsx

@@ -71,6 +71,7 @@ import {WaveBackground} from './src/components/molecules/wave-background/wave.co
 import {BackgroundGradient} from './src/components/atoms/background-gradient/background-gradient.component';
 import {PersonInfoCard} from './src/components/organisms/person-info-card/person-info-card.component';
 import {TimePicker} from './src/components/molecules/time-picker/time-picker.component';
+import {PopOverAction} from './src/components/templates/popover-action/popover-action.component';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -162,4 +163,5 @@ export {
   BackgroundGradient,
   PersonInfoCard,
   TimePicker,
+  PopOverAction,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",
@@ -48,13 +48,13 @@
     "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-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-swipe-gestures": "^1.0.5",
-    "react-native-swiper": "^1.6.0",
     "react-native-web": "~0.18.10",
     "react-native-wheel-picker-expo": "^0.5.4",
     "react-test-renderer": "^18.2.0"

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

@@ -1,5 +1,6 @@
 type PopoverBackdropProps = {
     isVisible: boolean;
+    touchBackDrop?: (value: boolean) => void;
 };
-declare const Backdrop: ({ isVisible }: PopoverBackdropProps) => JSX.Element;
+declare const Backdrop: ({ isVisible, touchBackDrop }: PopoverBackdropProps) => JSX.Element;
 export { Backdrop as Backdrop };