@ornikar/kitt-universal 9.5.0 → 9.6.0

package/dist/index-browser-all.es.web.js

@@ -13,7 +13,6 @@ import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { ArcIcon, UserIcon, CheckboxMark, EyeOffIcon, EyeIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
-import Animated, { useSharedValue, useDerivedValue, withTiming, useAnimatedStyle, interpolateColor } from 'react-native-reanimated';
 import { parse } from 'twemoji-parser';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Portal } from 'react-portal';
@@ -1062,6 +1061,14 @@ function Card(_ref6) {
   });
 }
 
+var useNativeAnimation = function () {
+  return {
+    onPressIn: function onPressIn() {},
+    onPressOut: function onPressOut() {},
+    backgroundStyles: undefined
+  };
+};
+
 function getCurrentTextColor(_ref) {
   var isDisabled = _ref.isDisabled,
       isSelected = _ref.isSelected,
@@ -1094,7 +1101,7 @@ var DisabledBorder = /*#__PURE__*/styled$1(View$1).withConfig({
       color = _theme$kitt$choices$i.color;
   return css(["border:", "px solid ", ";"], width, color);
 });
-var ChoiceItemView = /*#__PURE__*/styled$1(Animated.View).withConfig({
+var ChoiceItemView = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "ChoiceItem__ChoiceItemView",
   componentId: "kitt-universal__sc-wuv3y6-1"
 })(["position:relative;border-radius:", "px;background-color:", ";", ";", ""], function (_ref4) {
@@ -1150,73 +1157,10 @@ function ChoiceItem(_ref8) {
       onChange = _ref8.onChange,
       onBlur = _ref8.onBlur,
       onFocus = _ref8.onFocus;
-  var theme = /*#__PURE__*/useTheme();
-  var pressed = useSharedValue(Boolean(isPressedInternal));
-  var progress = useDerivedValue(function () {
-    var _f = function () {
-      return withTiming(pressed.value ? 1 : 0, {
-        duration: theme.kitt.choices.item.transition.duration
-      });
-    };
-
-    _f._closure = {
-      withTiming: withTiming,
-      pressed: 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;
-  }());
-  useAnimatedStyle(function () {
-    var _f = function () {
-      var _theme$kitt$choices$i5 = theme.kitt.choices.item.backgroundColor,
-          defaultBg = _theme$kitt$choices$i5["default"],
-          pressedBg = _theme$kitt$choices$i5.pressed,
-          selectedBg = _theme$kitt$choices$i5.selected,
-          disabledBg = _theme$kitt$choices$i5.disabled;
-      if (disabled) return {
-        backgroundColor: disabledBg
-      };
-      if (selected) return {
-        backgroundColor: selectedBg
-      };
-      return {
-        backgroundColor: interpolateColor(progress.value, [0, 1], [defaultBg, pressedBg])
-      };
-    };
 
-    _f._closure = {
-      theme: {
-        kitt: {
-          choices: {
-            item: {
-              backgroundColor: theme.kitt.choices.item.backgroundColor
-            }
-          }
-        }
-      },
-      disabled: disabled,
-      selected: selected,
-      interpolateColor: interpolateColor,
-      progress: 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;
-  }());
+  var _useNativeAnimation = useNativeAnimation(),
+      onPressIn = _useNativeAnimation.onPressIn,
+      onPressOut = _useNativeAnimation.onPressOut;
 
   var handleChange = function () {
     if (!onChange) return; // Checkbox can be toggled
@@ -1243,12 +1187,8 @@ function ChoiceItem(_ref8) {
       handleChange();
       if (onBlur) onBlur(e);
     },
-    onPressIn: function onPressIn() {
-      pressed.value = true;
-    },
-    onPressOut: function onPressOut() {
-      pressed.value = false;
-    },
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
     children: function children(_ref9) {
       var isHovered = _ref9.isHovered,
           isPressed = _ref9.isPressed;
@@ -1940,8 +1880,14 @@ var input = {
 };
 
 var inputField = {
+  containerPaddingTop: 5,
+  containerPaddingBottom: 10,
+  feedbackPaddingTop: {
+    base: 5,
+    small: 10
+  },
   labelContainerPaddingBottom: 5,
-  iconMarginLeft: 6
+  labelFeedbackMarginLeft: 6
 };
 
 var inputTag = {
@@ -2644,44 +2590,25 @@ function InputFeedback(_ref) {
   });
 }
 
-var FieldContainer = /*#__PURE__*/styled$1(View$1).withConfig({
-  displayName: "InputField__FieldContainer",
-  componentId: "kitt-universal__sc-13fkixs-0"
-})(["padding:5px 0 10px;"]);
-var FeedbackContainer = /*#__PURE__*/styled$1(View$1).withConfig({
-  displayName: "InputField__FeedbackContainer",
-  componentId: "kitt-universal__sc-13fkixs-1"
-})(["", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.responsive.ifWindowSizeMatches({
-    minWidth: KittBreakpoints.SMALL
-  }, 'padding-top: 10px', 'padding-top: 5px');
-});
-var FieldLabelContainer = /*#__PURE__*/styled$1(View$1).withConfig({
-  displayName: "InputField__FieldLabelContainer",
-  componentId: "kitt-universal__sc-13fkixs-2"
-})(["flex-direction:row;align-items:center;padding-bottom:", "px;"], function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.forms.inputField.labelContainerPaddingBottom;
-});
-var LabelContainer = /*#__PURE__*/styled$1(View$1).withConfig({
-  displayName: "InputField__LabelContainer",
-  componentId: "kitt-universal__sc-13fkixs-3"
-})(["margin-right:", "px;"], function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.forms.inputField.iconMarginLeft;
-});
-function InputField(_ref4) {
-  var label = _ref4.label,
-      labelFeedback = _ref4.labelFeedback,
-      input = _ref4.input,
-      feedback = _ref4.feedback;
-  return /*#__PURE__*/jsxs(FieldContainer, {
-    children: [label ? /*#__PURE__*/jsxs(FieldLabelContainer, {
-      children: [/*#__PURE__*/jsx(LabelContainer, {
+function InputField(_ref) {
+  var label = _ref.label,
+      labelFeedback = _ref.labelFeedback,
+      input = _ref.input,
+      feedback = _ref.feedback;
+  var theme = /*#__PURE__*/useTheme();
+  return /*#__PURE__*/jsxs(View, {
+    paddingTop: theme.kitt.forms.inputField.containerPaddingTop,
+    paddingBottom: theme.kitt.forms.inputField.containerPaddingBottom,
+    children: [label ? /*#__PURE__*/jsxs(View, {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingBottom: theme.kitt.forms.inputField.labelContainerPaddingBottom,
+      children: [/*#__PURE__*/jsx(View, {
+        marginRight: theme.kitt.forms.inputField.labelFeedbackMarginLeft,
         children: label
       }), labelFeedback]
-    }) : null, input, feedback ? /*#__PURE__*/jsx(FeedbackContainer, {
+    }) : null, input, feedback ? /*#__PURE__*/jsx(View, {
+      paddingTop: theme.kitt.forms.inputField.feedbackPaddingTop,
       children: feedback
     }) : null]
   });