@bigbinary/neetoui-rn 0.0.220 → 0.0.221

package/lib/components/SocialButton.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SocialButton=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _native=require("styled-components/native");var _reactNative=require("react-native");var _appleLogo=_interopRequireDefault(require("../../assets/icons/apple-logo.svg"));var _googleLogo=_interopRequireDefault(require("../../assets/icons/google-logo.svg"));var _=require("./");var _excluded=["variant","disabled","labelStyle","isLoading"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SocialButton.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var SocialButton=function SocialButton(props){var variant=props.variant,disabled=props.disabled,labelStyle=props.labelStyle,isLoading=props.isLoading,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var capitalize=function capitalize(str){return""+str.charAt(0).toUpperCase()+str.slice(1);};return _react.default.createElement(_.Touchable,(0,_extends2.default)({rippleColor:theme.colors.background.grey800,disabled:disabled,bg:"transparent",height:48,width:"100%",borderRadius:8,borderWidth:1,borderColor:theme.colors.border.grey800,alignItems:"center",justifyContent:"center"},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:42,columnNumber:5}}),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{color:theme.colors.background.grey800,__self:_this,__source:{fileName:_jsxFileName,lineNumber:56,columnNumber:9}}):_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_.Container,{position:"absolute",left:17,__self:_this,__source:{fileName:_jsxFileName,lineNumber:59,columnNumber:11}},variant==="apple"&&_react.default.createElement(_appleLogo.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:60,columnNumber:37}}),variant==="google"&&_react.default.createElement(_googleLogo.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:61,columnNumber:38}})),_react.default.createElement(_.Typography,(0,_extends2.default)({color:theme.colors.font.primary,fontSize:"m",fontFamily:theme.fonts.sf500},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:63,columnNumber:11}}),"Continue with ",capitalize(variant))));};exports.SocialButton=SocialButton;SocialButton.propTypes=(0,_extends2.default)({},_propTypes.default.buttonStyle,_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.layout,_propTypes.default.color,{variant:_propTypes2.default.oneOf(["apple","google"]),disabled:_propTypes2.default.bool,labelStyle:_propTypes2.default.object});
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SocialButton=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _native=require("styled-components/native");var _reactNative=require("react-native");var _appleLogo=_interopRequireDefault(require("../../assets/icons/apple-logo.svg"));var _googleLogo=_interopRequireDefault(require("../../assets/icons/google-logo.svg"));var _=require("./");var _excluded=["variant","disabled","labelStyle","isLoading"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SocialButton.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var SocialButton=function SocialButton(_ref){var variant=_ref.variant,disabled=_ref.disabled,labelStyle=_ref.labelStyle,isLoading=_ref.isLoading,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var capitalize=function capitalize(str){return""+str.charAt(0).toUpperCase()+str.slice(1);};return _react.default.createElement(_.Touchable,(0,_extends2.default)({rippleColor:theme.colors.background.grey800,disabled:disabled,bg:"transparent",height:48,width:"100%",borderRadius:8,borderWidth:1,borderColor:theme.colors.border.grey800,alignItems:"center",justifyContent:"center"},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:47,columnNumber:5}}),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{color:theme.colors.background.grey800,__self:_this,__source:{fileName:_jsxFileName,lineNumber:61,columnNumber:9}}):_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_.Container,{position:"absolute",left:17,__self:_this,__source:{fileName:_jsxFileName,lineNumber:64,columnNumber:11}},variant==="apple"&&_react.default.createElement(_appleLogo.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:65,columnNumber:37}}),variant==="google"&&_react.default.createElement(_googleLogo.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:38}})),_react.default.createElement(_.Typography,(0,_extends2.default)({color:theme.colors.font.primary,fontSize:"m",fontFamily:theme.fonts.sf500},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:68,columnNumber:11}}),"Continue with ",capitalize(variant))));};exports.SocialButton=SocialButton;SocialButton.propTypes=(0,_extends2.default)({},_propTypes.default.buttonStyle,_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.layout,_propTypes.default.color,{variant:_propTypes2.default.oneOf(["apple","google"]),disabled:_propTypes2.default.bool,labelStyle:_propTypes2.default.object,isLoading:_propTypes2.default.bool});

package/lib/components/Touchable.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Touchable=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var React=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _propTypes2=_interopRequireDefault(require("@styled-system/prop-types"));var _reactNativeMaterialRipple=_interopRequireDefault(require("react-native-material-ripple"));var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _utils=require("../utils/utils");var _excluded=["children","elevation"];var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Touchable.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var StyledRipple=(0,_native.default)(_reactNativeMaterialRipple.default)(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.buttonStyle,_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.layout,_styledSystem.color);var Touchable=React.forwardRef(function(props,ref){var children=props.children,elevation=props.elevation,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var shadowStyles=elevation?(0,_utils.getShadowStyles)(elevation):{};return React.createElement(StyledRipple,(0,_extends2.default)({rippleOpacity:0.09,rippleDuration:600,rippleContainerBorderRadius:rest.borderRadius?rest.borderRadius:0,style:shadowStyles,ref:ref},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:65,columnNumber:5}}),children);});exports.Touchable=Touchable;Touchable.propTypes=(0,_extends2.default)({},_propTypes2.default.flexbox,_propTypes2.default.space,_propTypes2.default.border,_propTypes2.default.layout,_propTypes2.default.color,_propTypes2.default.buttonStyle,{children:_propTypes.default.node});
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Touchable=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var React=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _propTypes2=_interopRequireDefault(require("@styled-system/prop-types"));var _reactNativeMaterialRipple=_interopRequireDefault(require("react-native-material-ripple"));var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _utils=require("../utils/utils");var _excluded=["children","elevation"];var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Touchable.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var StyledRipple=(0,_native.default)(_reactNativeMaterialRipple.default)(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.buttonStyle,_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.layout,_styledSystem.color);var Touchable=React.forwardRef(function(props,ref){var children=props.children,elevation=props.elevation,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var shadowStyles=elevation?(0,_utils.getShadowStyles)(elevation):{};return React.createElement(StyledRipple,(0,_extends2.default)({rippleOpacity:0.09,rippleDuration:600,rippleContainerBorderRadius:rest.borderRadius?rest.borderRadius:0,style:shadowStyles,ref:ref},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:65,columnNumber:5}}),children);});exports.Touchable=Touchable;Touchable.propTypes=(0,_extends2.default)({},_propTypes2.default.flexbox,_propTypes2.default.space,_propTypes2.default.border,_propTypes2.default.layout,_propTypes2.default.color,_propTypes2.default.buttonStyle,{children:_propTypes.default.node,elevation:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.string])});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.220",
+  "version": "0.0.221",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",

package/src/components/Accordion.js

@@ -1,3 +1,4 @@
+/* eslint-disable react-native/no-inline-styles */
 import React, {
   useContext,
   useState,
@@ -89,104 +90,108 @@ const AccordionBody = ({ isExpanded, children }) => {
  *
  */
 
-export const Accordion = React.forwardRef((props, ref) => {
-  const {
-    header,
-    noBorder = false,
-    iconProp = {},
-    onStateChanged,
-    children,
-    position = "bottom",
-    shouldShowToggle = true,
-    ...rest
-  } = props;
-  const { name, Label, size, color } = iconProp;
-  const theme = useContext(ThemeContext);
-  const [isExpanded, setExpanded] = useState(false);
-  const animationController = useRef(
-    new Animated.Value(isExpanded ? 1 : 0)
-  ).current;
-
-  useEffect(() => {
-    Animated.timing(animationController, {
-      duration: 300,
-      toValue: isExpanded ? 1 : 0,
-      useNativeDriver: false,
-    }).start(() => {
-      !!onStateChanged && onStateChanged(isExpanded);
+export const Accordion = React.forwardRef(
+  (
+    {
+      header,
+      noBorder = false,
+      iconProp = {},
+      onStateChanged,
+      children,
+      position = "bottom",
+      shouldShowToggle = true,
+      ...rest
+    },
+    ref
+  ) => {
+    const { name, Label, size, color } = iconProp;
+    const theme = useContext(ThemeContext);
+    const [isExpanded, setExpanded] = useState(false);
+    const animationController = useRef(
+      new Animated.Value(isExpanded ? 1 : 0)
+    ).current;
+
+    useEffect(() => {
+      Animated.timing(animationController, {
+        duration: 300,
+        toValue: isExpanded ? 1 : 0,
+        useNativeDriver: false,
+      }).start(() => {
+        !!onStateChanged && onStateChanged(isExpanded);
+      });
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isExpanded]);
+
+    const handleAnimation = () => {
+      setExpanded(!isExpanded);
+    };
+
+    useImperativeHandle(ref, () => ({
+      toggleAccordion: handleAnimation,
+      openAccordion: () => setExpanded(true),
+      closeAccordion: () => setExpanded(false),
+    }));
+
+    const arrowAngle = animationController.interpolate({
+      inputRange: [0, 1],
+      outputRange: ["0rad", `${Math.PI}rad`],
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isExpanded]);
 
-  const handleAnimation = () => {
-    setExpanded(!isExpanded);
-  };
-
-  useImperativeHandle(ref, () => ({
-    toggleAccordion: handleAnimation,
-    openAccordion: () => setExpanded(true),
-    closeAccordion: () => setExpanded(false),
-  }));
-
-  const arrowAngle = animationController.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["0rad", `${Math.PI}rad`],
-  });
-
-  return (
-    <Container
-      {...(!noBorder && {
-        borderColor: "border.grey400",
-        borderWidth: 1,
-        borderRadius: 8,
-      })}
-      width="100%"
-      padding={12}
-      {...rest}
-    >
-      {position === "top" && (
-        <AccordionBody isExpanded={isExpanded}>{children}</AccordionBody>
-      )}
-      <TouchableOpacity
-        rippleOpacity={0}
-        style={styles.accordionContainer}
-        onPress={() => {
-          handleAnimation();
-        }}
+    return (
+      <Container
+        {...(!noBorder && {
+          borderColor: "border.grey400",
+          borderWidth: 1,
+          borderRadius: 8,
+        })}
+        width="100%"
+        padding={12}
+        {...rest}
       >
-        {!!header && <Container flexGrow={1}>{header()}</Container>}
-        {!!shouldShowToggle && (
-          <Container
-            alignItems="center"
-            justifyContent="center"
-            flexDirection="row"
-            px={1}
-          >
-            {Label && <Label />}
-            <Animated.View
-              style={{
-                alignItems: "flex-end",
-                transform: [{ rotateZ: arrowAngle }],
-              }}
+        {position === "top" && (
+          <AccordionBody isExpanded={isExpanded}>{children}</AccordionBody>
+        )}
+        <TouchableOpacity
+          rippleOpacity={0}
+          style={styles.accordionContainer}
+          onPress={() => {
+            handleAnimation();
+          }}
+        >
+          {!!header && <Container flexGrow={1}>{header()}</Container>}
+          {!!shouldShowToggle && (
+            <Container
+              alignItems="center"
+              justifyContent="center"
+              flexDirection="row"
+              px={1}
             >
-              <Container>
-                <Icon
-                  name={name ?? "ri-arrow-down-s-line"}
-                  color={color ?? theme.colors.font.grey700}
-                  size={size ?? 24}
-                />
-              </Container>
-            </Animated.View>
-          </Container>
+              {Label && <Label />}
+              <Animated.View
+                style={{
+                  alignItems: "flex-end",
+                  transform: [{ rotateZ: arrowAngle }],
+                }}
+              >
+                <Container>
+                  <Icon
+                    name={name ?? "ri-arrow-down-s-line"}
+                    color={color ?? theme.colors.font.grey700}
+                    size={size ?? 24}
+                  />
+                </Container>
+              </Animated.View>
+            </Container>
+          )}
+        </TouchableOpacity>
+
+        {position === "bottom" && (
+          <AccordionBody isExpanded={isExpanded}>{children}</AccordionBody>
         )}
-      </TouchableOpacity>
-
-      {position === "bottom" && (
-        <AccordionBody isExpanded={isExpanded}>{children}</AccordionBody>
-      )}
-    </Container>
-  );
-});
+      </Container>
+    );
+  }
+);
 
 AccordionBody.propTypes = {
   isExpanded: PropTypes.bool.isRequired,

package/src/components/Button.js

@@ -68,21 +68,20 @@ export const BUTTON_VARIANTS = Object.freeze({
  *
  */
 
-export const Button = props => {
-  const {
-    variant,
-    label,
-    labelStyle,
-    RightIcon,
-    LeftIcon,
-    disabled,
-    isLoading,
-    loadingText,
-    fontFamily,
-    color,
-    fontSize,
-    ...rest
-  } = props;
+export const Button = ({
+  variant,
+  label,
+  labelStyle,
+  RightIcon,
+  LeftIcon,
+  disabled,
+  isLoading,
+  loadingText,
+  fontFamily,
+  color,
+  fontSize,
+  ...rest
+}) => {
   const theme = useContext(ThemeContext);
   const width = variant === "text" || variant === "danger-text" ? null : "100%";
 
@@ -254,4 +253,7 @@ Button.propTypes = {
    * To show loading text along with the loading indicator on the button.
    */
   loadingText: PropTypes.string,
+  fontFamily: PropTypes.string,
+  color: PropTypes.string,
+  fontSize: PropTypes.string,
 };

package/src/components/ButtonGroup.js

@@ -36,7 +36,9 @@ export const ButtonGroup = ({
   buttonItems,
   onPress,
   currentActiveBtn,
-  ...rest
+  wrapperStyle,
+  buttonStyle,
+  buttonTextStyle,
 }) => {
   return (
     <Container
@@ -47,7 +49,7 @@ export const ButtonGroup = ({
       flexDirection="row"
       justifyContent="space-between"
       alignSelf="center"
-      {...rest.wrapperStyle}
+      {...wrapperStyle}
     >
       {buttonItems.map(item => {
         return (
@@ -61,11 +63,11 @@ export const ButtonGroup = ({
                 onPress(item);
               }
             }}
-            {...rest.buttonStyle}
+            {...buttonStyle}
           >
             <Typography
               color={item === currentActiveBtn ? inActiveColor : activeColor}
-              {...rest.buttonTextStyle}
+              {...buttonTextStyle}
             >
               {item}
             </Typography>

package/src/components/Calendar.js

@@ -32,8 +32,7 @@ import { Calendar as RNCalender } from "react-native-calendars";
  * Checkout <a href=" https://www.npmjs.com/package/react-native-calendars">react-native-calendars</a> package for all the available props
  */
 
-export const Calendar = props => {
-  const { selectedDate, ...rest } = props;
+export const Calendar = ({ selectedDate, ...rest }) => {
   delete rest.markedDates;
   const theme = useContext(ThemeContext);
   const isCurrentDay = dayjs(selectedDate).isSame(dayjs(), "D");

package/src/components/Chip.js

@@ -61,7 +61,8 @@ export const Chip = ({
   isDisabled,
   closeIconSize,
   closeIcon,
-  ...rest
+  containerStyle,
+  closeIconContainerStyle,
 }) => {
   return (
     <Touchable
@@ -73,7 +74,7 @@ export const Chip = ({
       disabled={!onChipPress || isDisabled}
       {...(variant && variantStyleObj[variant])}
       {...(isDisabled && { opacity: 0.5 })}
-      {...rest.containerStyle}
+      {...containerStyle}
     >
       {LeftIcon && <LeftIcon />}
       <Typography mx={2} fontFamily="sf400" color={labelColor}>
@@ -85,7 +86,7 @@ export const Chip = ({
           borderRadius={10}
           disabled={isDisabled}
           onPress={onClose}
-          {...rest.closeIconContainerStyle}
+          {...closeIconContainerStyle}
         >
           <Icon name={closeIcon} size={closeIconSize} color={closeIconColor} />
         </Touchable>
@@ -149,4 +150,6 @@ Chip.propTypes = {
    * Whether the chip is disabled. A disabled chip has a overlay and onPress is not called on touch.
    */
   isDisabled: PropTypes.bool,
+  containerStyle: PropTypes.object,
+  closeIconContainerStyle: PropTypes.object,
 };

package/src/components/FAB.js

@@ -99,4 +99,13 @@ FAB.propTypes = {
    * Function to execute on press.
    */
   onPress: PropTypes.func.isRequired,
+  /**
+   * String to set background color.
+   */
+  bg: PropTypes.string,
+  /**
+   * Boolean to disable button.
+   */
+  disabled: PropTypes.bool,
+  variant: PropTypes.string,
 };

package/src/components/Input.js

@@ -94,23 +94,22 @@ const AnimatedLabel = Animated.createAnimatedComponent(Typography);
  *
  */
 
-export const Input = props => {
-  const {
-    label,
-    value = "",
-    onChangeText = () => {},
-    onBlur = () => {},
-    errorMessage = null,
-    PrefixIcon,
-    SuffixIcon,
-    autoFocus = false,
-    disabled = false,
-    noBorder = false,
-    showInputAccessoryView = true,
-    textAlignVertical = "top",
-    ...rest
-  } = props;
-
+export const Input = ({
+  label,
+  value = "",
+  onChangeText = () => {},
+  onBlur = () => {},
+  errorMessage = null,
+  PrefixIcon,
+  SuffixIcon,
+  autoFocus = false,
+  disabled = false,
+  noBorder = false,
+  showInputAccessoryView = true,
+  textAlignVertical = "top",
+  containerProps,
+  ...rest
+}) => {
   const { width } = useWindowDimensions();
   const colors = useContext(ThemeContext).colors;
   const inputRef = useRef();
@@ -203,7 +202,7 @@ export const Input = props => {
           justifyContent="space-between"
           {...(!rest.inputProps?.multiline && { height: 58 })}
           overflow="hidden"
-          {...rest.containerProps}
+          {...containerProps}
         >
           {!!PrefixIcon && (
             <View pl={2}>

package/src/components/MultiSelect.js

@@ -1,3 +1,4 @@
+/* eslint-disable react-native/no-inline-styles */
 import React, { useContext, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import {
@@ -24,13 +25,7 @@ import {
   position,
 } from "styled-system";
 
-import {
-  BottomSheet,
-  CheckBox,
-  Container,
-  Touchable,
-  Alert,
-} from "@components";
+import { BottomSheet, CheckBox, Container, Alert } from "@components";
 
 const Typography = styled.Text`
   ${textStyle}
@@ -133,41 +128,6 @@ MultiSelectItem.propTypes = {
   confirmationAlertObj: PropTypes.object,
 };
 
-const DropdownItem = ({
-  label,
-  onPress,
-  defaultDropdownItemHeight,
-  itemContainerStyle,
-  itemLabelStyle,
-}) => {
-  return (
-    <Touchable bg="background.white" onPress={onPress}>
-      <Container
-        height={defaultDropdownItemHeight}
-        p={2}
-        {...itemContainerStyle}
-      >
-        <Typography
-          fontFamily="sf400"
-          fontSize="s"
-          color="font.grey"
-          {...itemLabelStyle}
-        >
-          {label}
-        </Typography>
-      </Container>
-    </Touchable>
-  );
-};
-
-DropdownItem.propTypes = {
-  label: PropTypes.string,
-  onPress: PropTypes.func,
-  defaultDropdownItemHeight: PropTypes.number,
-  itemContainerStyle: PropTypes.object,
-  itemLabelStyle: PropTypes.object,
-};
-
 const AnimatedLabel = Animated.createAnimatedComponent(Typography);
 
 /**
@@ -564,10 +524,6 @@ MultiSelect.propTypes = {
    * Show loader while creating a searched option not present in the options list
    */
   showCreateOptionLoader: PropTypes.bool,
-  /**
-   * Custom label for creating searched option not present in the options list
-   */
-  createOptionLabel: PropTypes.string,
   /**
    * Callback when create searched option is pressed
    */
@@ -592,10 +548,6 @@ MultiSelect.propTypes = {
    * To customise dropdown item container styles.
    */
   itemContainerStyle: PropTypes.object,
-  /**
-   * To customise dropdown item text styles.
-   */
-  itemLabelStyle: PropTypes.object,
   /**
    * To customise item container styles for multi selected items.
    */
@@ -608,22 +560,6 @@ MultiSelect.propTypes = {
    * To customise confirmation alert popup.
    */
   confirmationAlertObj: PropTypes.object,
-  /**
-   * To customise search input container style.
-   */
-  searchInputContainerStyle: PropTypes.object,
-  /**
-   * To customise search input style.
-   */
-  searchInputStyle: PropTypes.object,
-  /**
-   * To customise empty options placeholder container style.
-   */
-  emptyOptionsContainerStyle: PropTypes.object,
-  /**
-   * To customise empty options placeholder text style.
-   */
-  emptyOptionsLabelStyle: PropTypes.object,
   /**
    * To customise empty options placeholder container style.
    */
@@ -694,7 +630,6 @@ MultiSelect.defaultProps = {
   isSearchable: false,
   showCreateOption: false,
   showCreateOptionLoader: false,
-  createOptionLabel: null,
   onPressCreateOption: () => {},
   onDonePress: () => {},
   maxItemSize: 5,

package/src/components/NotificationPreferenceList.js

@@ -74,16 +74,14 @@ import { Container, Typography, Divider, ToggleSwitch } from "@components";
  *
  */
 
-export const NotificationPreferenceList = props => {
-  const {
-    data,
-    itemWrapperProps,
-    itemContainerProps,
-    labelContainerProps,
-    labelProps,
-    ...rest
-  } = props;
-
+export const NotificationPreferenceList = ({
+  data,
+  itemWrapperProps,
+  itemContainerProps,
+  labelContainerProps,
+  labelProps,
+  ...rest
+}) => {
   return (
     <Container bg="background.secondary" borderRadius={8} {...rest}>
       {data?.map((item, index) => {

package/src/components/OrganizationItem.js

@@ -27,17 +27,16 @@ import { ThemeContext } from "styled-components/native";
  *
  */
 
-export const OrganizationItem = props => {
-  const {
-    label,
-    labelContainerProps,
-    iconContainerProps,
-    iconProps,
-    labelProps,
-    name,
-    nameProps,
-    ...rest
-  } = props;
+export const OrganizationItem = ({
+  label,
+  labelContainerProps,
+  iconContainerProps,
+  iconProps,
+  labelProps,
+  name,
+  nameProps,
+  ...rest
+}) => {
   const theme = useContext(ThemeContext);
   return (
     <Container

package/src/components/RichTextEditor.js

@@ -158,4 +158,6 @@ RichTextEditor.propTypes = {
    * Object which can be used to pass other supported props by the RichToolbar.
    */
   toolBarProps: PropTypes.object,
+  editorWrapperStyle: PropTypes.object,
+  toolbarWrapperStyle: PropTypes.object,
 };