@ornikar/kitt-universal 9.5.0 → 9.6.0

package/dist/index-node-14.17.cjs.web.js

@@ -9,7 +9,6 @@ const BabelPluginStyledComponentsReactNative = require('react-native');
 const styled = require('styled-components/native');
 const jsxRuntime = require('react/jsx-runtime');
 const kittIcons = require('@ornikar/kitt-icons');
-const Animated = require('react-native-reanimated');
 const twemojiParser = require('twemoji-parser');
 const reactNativeSafeAreaContext = require('react-native-safe-area-context');
 const reactPortal = require('react-portal');
@@ -19,7 +18,6 @@ const addons = require('@storybook/addons');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
 const styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-const Animated__default = /*#__PURE__*/_interopDefaultLegacy(Animated);
 
 const Stack = nativeBase.Stack;
 const VStack = nativeBase.VStack;
@@ -997,6 +995,14 @@ function Card({
   });
 }
 
+const useNativeAnimation = () => {
+  return {
+    onPressIn: () => {},
+    onPressOut: () => {},
+    backgroundStyles: undefined
+  };
+};
+
 function getCurrentTextColor({
   isDisabled,
   isSelected,
@@ -1031,7 +1037,7 @@ const DisabledBorder = /*#__PURE__*/styled__default(BabelPluginStyledComponentsR
   } = theme.kitt.choices.item.disabled.border;
   return styled.css(["border:", "px solid ", ";"], width, color);
 });
-const ChoiceItemView = /*#__PURE__*/styled__default(Animated__default.View).withConfig({
+const ChoiceItemView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "ChoiceItem__ChoiceItemView",
   componentId: "kitt-universal__sc-wuv3y6-1"
 })(["position:relative;border-radius:", "px;background-color:", ";", ";", ""], ({
@@ -1092,74 +1098,11 @@ function ChoiceItem({
   onBlur,
   onFocus
 }) {
-  const theme = /*#__PURE__*/styled.useTheme();
-  const pressed = Animated.useSharedValue(Boolean(isPressedInternal));
-  const progress = Animated.useDerivedValue(function () {
-    const _f = function () {
-      return Animated.withTiming(pressed.value ? 1 : 0, {
-        duration: theme.kitt.choices.item.transition.duration
-      });
-    };
-
-    _f._closure = {
-      withTiming: Animated.withTiming,
-      pressed,
-      theme: {
-        kitt: {
-          choices: {
-            item: {
-              transition: {
-                duration: theme.kitt.choices.item.transition.duration
-              }
-            }
-          }
-        }
-      }
-    };
-    _f.asString = "function _f(){const{withTiming,pressed,theme}=jsThis._closure;{return withTiming(pressed.value?1:0,{duration:theme.kitt.choices.item.transition.duration});}}";
-    _f.__workletHash = 1120030177160;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Choices/ChoiceItem.tsx (180:35)";
-    return _f;
-  }());
-  Animated.useAnimatedStyle(function () {
-    const _f = function () {
-      const {
-        default: defaultBg,
-        pressed: pressedBg,
-        selected: selectedBg,
-        disabled: disabledBg
-      } = theme.kitt.choices.item.backgroundColor;
-      if (disabled) return {
-        backgroundColor: disabledBg
-      };
-      if (selected) return {
-        backgroundColor: selectedBg
-      };
-      return {
-        backgroundColor: Animated.interpolateColor(progress.value, [0, 1], [defaultBg, pressedBg])
-      };
-    };
-
-    _f._closure = {
-      theme: {
-        kitt: {
-          choices: {
-            item: {
-              backgroundColor: theme.kitt.choices.item.backgroundColor
-            }
-          }
-        }
-      },
-      disabled,
-      selected,
-      interpolateColor: Animated.interpolateColor,
-      progress
-    };
-    _f.asString = "function _f(){const{theme,disabled,selected,interpolateColor,progress}=jsThis._closure;{const{default:defaultBg,pressed:pressedBg,selected:selectedBg,disabled:disabledBg}=theme.kitt.choices.item.backgroundColor;if(disabled)return{backgroundColor:disabledBg};if(selected)return{backgroundColor:selectedBg};return{backgroundColor:interpolateColor(progress.value,[0,1],[defaultBg,pressedBg])};}}";
-    _f.__workletHash = 15506726129309;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Choices/ChoiceItem.tsx (184:44)";
-    return _f;
-  }());
+  const {
+    onPressIn,
+    onPressOut,
+    backgroundStyles
+  } = useNativeAnimation();
 
   const handleChange = () => {
     if (!onChange) return; // Checkbox can be toggled
@@ -1186,12 +1129,8 @@ function ChoiceItem({
       handleChange();
       if (onBlur) onBlur(e);
     },
-    onPressIn: () => {
-      pressed.value = true;
-    },
-    onPressOut: () => {
-      pressed.value = false;
-    },
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
     children: ({
       isHovered,
       isPressed
@@ -1818,8 +1757,14 @@ const input = {
 };
 
 const inputField = {
+  containerPaddingTop: 5,
+  containerPaddingBottom: 10,
+  feedbackPaddingTop: {
+    base: 5,
+    small: 10
+  },
   labelContainerPaddingBottom: 5,
-  iconMarginLeft: 6
+  labelFeedbackMarginLeft: 6
 };
 
 const inputTag = {
@@ -2492,42 +2437,26 @@ function InputFeedback({
   });
 }
 
-const FieldContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "InputField__FieldContainer",
-  componentId: "kitt-universal__sc-13fkixs-0"
-})(["padding:5px 0 10px;"]);
-const FeedbackContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "InputField__FeedbackContainer",
-  componentId: "kitt-universal__sc-13fkixs-1"
-})(["", ";"], ({
-  theme
-}) => theme.responsive.ifWindowSizeMatches({
-  minWidth: KittBreakpoints.SMALL
-}, 'padding-top: 10px', 'padding-top: 5px'));
-const FieldLabelContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "InputField__FieldLabelContainer",
-  componentId: "kitt-universal__sc-13fkixs-2"
-})(["flex-direction:row;align-items:center;padding-bottom:", "px;"], ({
-  theme
-}) => theme.kitt.forms.inputField.labelContainerPaddingBottom);
-const LabelContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "InputField__LabelContainer",
-  componentId: "kitt-universal__sc-13fkixs-3"
-})(["margin-right:", "px;"], ({
-  theme
-}) => theme.kitt.forms.inputField.iconMarginLeft);
 function InputField({
   label,
   labelFeedback,
   input,
   feedback
 }) {
-  return /*#__PURE__*/jsxRuntime.jsxs(FieldContainer, {
-    children: [label ? /*#__PURE__*/jsxRuntime.jsxs(FieldLabelContainer, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(LabelContainer, {
+  const theme = /*#__PURE__*/styled.useTheme();
+  return /*#__PURE__*/jsxRuntime.jsxs(View, {
+    paddingTop: theme.kitt.forms.inputField.containerPaddingTop,
+    paddingBottom: theme.kitt.forms.inputField.containerPaddingBottom,
+    children: [label ? /*#__PURE__*/jsxRuntime.jsxs(View, {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingBottom: theme.kitt.forms.inputField.labelContainerPaddingBottom,
+      children: [/*#__PURE__*/jsxRuntime.jsx(View, {
+        marginRight: theme.kitt.forms.inputField.labelFeedbackMarginLeft,
         children: label
       }), labelFeedback]
-    }) : null, input, feedback ? /*#__PURE__*/jsxRuntime.jsx(FeedbackContainer, {
+    }) : null, input, feedback ? /*#__PURE__*/jsxRuntime.jsx(View, {
+      paddingTop: theme.kitt.forms.inputField.feedbackPaddingTop,
       children: feedback
     }) : null]
   });