@ornikar/kitt-universal 32.2.1-canary.b6a558c2a534e5d22cad1dfac7725ddeca489e44.0 → 32.3.1-canary.282229fbcb79b0e70662d8927eccac40f40e40d3.0

package/dist/index.es.web.js

@@ -873,15 +873,15 @@ var card = {
   }
 };
 
-var webAnimationContentDuration$2 = 400;
-var webAnimationContentEasing$2 = {
+var webAnimationContentDuration$1 = 400;
+var webAnimationContentEasing$1 = {
   x1: 0.77,
   y1: 0,
   x2: 0.175,
   y2: 1
 };
-var webAnimationOverlayDuration$2 = 250;
-var webAnimationOverlayEasing$2 = {
+var webAnimationOverlayDuration$1 = 250;
+var webAnimationOverlayEasing$1 = {
   x1: 0.42,
   y1: 0,
   x2: 1,
@@ -916,12 +916,12 @@ var cardModal = {
   },
   animation: {
     overlay: {
-      duration: webAnimationOverlayDuration$2,
-      easing: webAnimationOverlayEasing$2
+      duration: webAnimationOverlayDuration$1,
+      easing: webAnimationOverlayEasing$1
     },
     content: {
-      duration: webAnimationContentDuration$2,
-      easing: webAnimationContentEasing$2
+      duration: webAnimationContentDuration$1,
+      easing: webAnimationContentEasing$1
     }
   }
 };
@@ -977,15 +977,15 @@ var choices = {
   }
 };
 
-var webAnimationContentDuration$1 = 400;
-var webAnimationContentEasing$1 = {
+var webAnimationContentDuration = 400;
+var webAnimationContentEasing = {
   x1: 0.77,
   y1: 0,
   x2: 0.175,
   y2: 1
 };
-var webAnimationOverlayDuration$1 = 250;
-var webAnimationOverlayEasing$1 = {
+var webAnimationOverlayDuration = 250;
+var webAnimationOverlayEasing = {
   x1: 0.42,
   y1: 0,
   x2: 1,
@@ -1007,12 +1007,12 @@ var dialogModal = {
   },
   animation: {
     overlay: {
-      duration: webAnimationOverlayDuration$1,
-      easing: webAnimationOverlayEasing$1
+      duration: webAnimationOverlayDuration,
+      easing: webAnimationOverlayEasing
     },
     content: {
-      duration: webAnimationContentDuration$1,
-      easing: webAnimationContentEasing$1
+      duration: webAnimationContentDuration,
+      easing: webAnimationContentEasing
     }
   }
 };
@@ -1070,10 +1070,10 @@ var autocomplete = {
 };
 
 var checkbox = {
-  borderWidth: 1,
-  borderRadius: 4,
-  height: 24,
-  width: 24,
+  borderWidth: 2,
+  borderRadius: 5,
+  height: 20,
+  width: 20,
   iconSize: 14,
   markColor: colors.uiBackgroundLight,
   textSpacing: 10,
@@ -1136,7 +1136,6 @@ var inputStatesStyle = {
     color: deepPurpleColorPalette.black
   },
   hover: {
-    backgroundColor: deepPurpleColorPalette['beige.1'],
     borderColor: deepPurpleColorPalette['beige.4'],
     color: deepPurpleColorPalette.black
   },
@@ -1921,20 +1920,6 @@ var forms = {
   timePicker: timePicker
 };
 
-var webAnimationContentDuration = 600;
-var webAnimationContentEasing = {
-  x1: 0.77,
-  y1: 0,
-  x2: 0.175,
-  y2: 1
-};
-var webAnimationOverlayDuration = 250;
-var webAnimationOverlayEasing = {
-  x1: 0.42,
-  y1: 0,
-  x2: 1,
-  y2: 1
-};
 var fullscreenModal = {
   header: {
     height: 56
@@ -1948,12 +1933,22 @@ var fullscreenModal = {
   },
   animation: {
     overlay: {
-      duration: webAnimationOverlayDuration,
-      easing: webAnimationOverlayEasing
+      duration: 250,
+      easing: {
+        x1: 0.42,
+        y1: 0,
+        x2: 1,
+        y2: 1
+      }
     },
     content: {
-      duration: webAnimationContentDuration,
-      easing: webAnimationContentEasing
+      duration: 600,
+      easing: {
+        x1: 0.77,
+        y1: 0,
+        x2: 0.175,
+        y2: 1
+      }
     }
   }
 };
@@ -4393,17 +4388,17 @@ var contentAnimationClassNames = {
   exit: contentAnimatioExit,
   exitActive: contentAnimatioExitActive
 };
-var opacityEnter$1 = "kitt-u_opacityEnter_o1ae40dx";
-var opacityEnterActive$1 = "kitt-u_opacityEnterActive_o1t4vl7b";
-var opacityExit$1 = "kitt-u_opacityExit_ogyytm1";
-var opacityExitActive$1 = "kitt-u_opacityExitActive_o18xvk52";
-var opacityClassNames$1 = {
-  appear: opacityEnter$1,
-  appearActive: opacityEnterActive$1,
-  enter: opacityEnter$1,
-  enterActive: opacityEnterActive$1,
-  exit: opacityExit$1,
-  exitActive: opacityExitActive$1
+var opacityEnter = "kitt-u_opacityEnter_o1ae40dx";
+var opacityEnterActive = "kitt-u_opacityEnterActive_o1t4vl7b";
+var opacityExit = "kitt-u_opacityExit_ogyytm1";
+var opacityExitActive = "kitt-u_opacityExitActive_o18xvk52";
+var opacityClassNames = {
+  appear: opacityEnter,
+  appearActive: opacityEnterActive,
+  enter: opacityEnter,
+  enterActive: opacityEnterActive,
+  exit: opacityExit,
+  exitActive: opacityExitActive
 };
 function CardModalAnimation(_ref) {
   var children = _ref.children,
@@ -4437,7 +4432,7 @@ function CardModalAnimation(_ref) {
     children: [/*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
       nodeRef: overlayRef,
       timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames$1,
+      classNames: opacityClassNames,
       children: /*#__PURE__*/jsx(Overlay, {
         ref: overlayRef,
         onPress: onClose
@@ -5438,11 +5433,30 @@ function InputPressable(_ref) {
   return /*#__PURE__*/jsx(Pressable$2, _objectSpread({}, props));
 }
 
-var inputTextContainer = "kitt-u_inputTextContainer_i1encr9g";
-function InputTextContainer(props) {
-  return /*#__PURE__*/jsx("div", _objectSpread({
-    className: inputTextContainer
-  }, props));
+function InputTextContainer(_ref) {
+  var children = _ref.children,
+    isHovered = _ref.isHovered;
+  var theme = useTheme();
+  var sx = useSx();
+  var styles = sx({
+    borderRadius: input.borderRadius
+  });
+  var animatedBackground = useAnimatedStyle(function () {
+    var baseBackgroundColor = theme.kitt.palettes.deepPurple.white;
+    var hoverBackgroundColor = theme.kitt.palettes.deepPurple['beige.1'];
+    return {
+      backgroundColor: withTiming(isHovered ? hoverBackgroundColor : baseBackgroundColor, {
+        duration: 200
+      })
+    };
+  }, [isHovered, theme]);
+  return /*#__PURE__*/jsx(Animated$1.View, {
+    style: [styles, animatedBackground],
+    children: /*#__PURE__*/jsx(View, {
+      position: "relative",
+      children: children
+    })
+  });
 }
 
 var _excluded$y = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "inputMode", "multiline", "height", "onSubmitEditing"];
@@ -5471,41 +5485,47 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var fontSizeForNativeBase = createNativeBaseFontSize({
     base: 'body-m'
   });
-  return /*#__PURE__*/jsxs(InputTextContainer, {
-    children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({
-      ref: ref,
-      multiline: multiline,
-      id: id,
-      isDisabled: internalForceState ? internalForceState === 'disabled' : disabled,
-      isHovered: internalForceState ? internalForceState === 'hover' : undefined,
-      isFocused: internalForceState ? internalForceState === 'focus' : undefined,
-      inputMode: inputMode,
-      autoComplete: autoComplete,
-      autoCorrect: autoCorrect,
-      textContentType: textContentType,
-      fontSize: fontSizeForNativeBase,
-      lineHeight:
-      // On basic text input, we set the line-height to zero for iOS to fix vertical text alignment
-      // This is a iOS only fix since having 0 as a line-height value breaks text inputs on Android
-      fontSizeForNativeBase,
-      fontWeight: "bodies.regular",
-      fontFamily: "bodies.regular",
-      py: !multiline && "web" !== 'web' ? 0 : undefined,
-      variant: variant
-    }, props), {}, {
-      height: multiline ? height : 'kitt.forms.input.minHeight',
-      onSubmitEditing: multiline ? function () {
-        return null;
-      } : onSubmitEditing
-    })), right ? /*#__PURE__*/jsx(View, {
-      position: "absolute",
-      right: 0,
-      top: 0,
-      bottom: 0,
-      justifyContent: "center",
-      padding: theme.kitt.forms.input.rightContainer.padding,
-      children: right
-    }) : null]
+  return /*#__PURE__*/jsx(Pressable, {
+    children: function (_ref2) {
+      var isHovered = _ref2.isHovered;
+      return /*#__PURE__*/jsxs(InputTextContainer, {
+        isHovered: internalForceState ? internalForceState === 'hover' : isHovered,
+        children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({
+          ref: ref,
+          multiline: multiline,
+          id: id,
+          isDisabled: internalForceState ? internalForceState === 'disabled' : disabled,
+          isHovered: internalForceState ? internalForceState === 'hover' : undefined,
+          isFocused: internalForceState ? internalForceState === 'focus' : undefined,
+          inputMode: inputMode,
+          autoComplete: autoComplete,
+          autoCorrect: autoCorrect,
+          textContentType: textContentType,
+          fontSize: fontSizeForNativeBase,
+          lineHeight:
+          // On basic text input, we set the line-height to zero for iOS to fix vertical text alignment
+          // This is a iOS only fix since having 0 as a line-height value breaks text inputs on Android
+          fontSizeForNativeBase,
+          fontWeight: "bodies.regular",
+          fontFamily: "bodies.regular",
+          py: !multiline && "web" !== 'web' ? 0 : undefined,
+          variant: variant
+        }, props), {}, {
+          height: multiline ? height : 'kitt.forms.input.minHeight',
+          onSubmitEditing: multiline ? function () {
+            return null;
+          } : onSubmitEditing
+        })), right ? /*#__PURE__*/jsx(View, {
+          position: "absolute",
+          right: 0,
+          top: 0,
+          bottom: 0,
+          justifyContent: "center",
+          padding: theme.kitt.forms.input.rightContainer.padding,
+          children: right
+        }) : null]
+      });
+    }
   });
 });
 
@@ -7925,30 +7945,24 @@ function FullscreenModalFooter(_ref) {
   }));
 }
 
+var styles$1 = {"overlay-enter":"FullscreenModalAnimation-module_overlay-enter__L1J1X","overlay-enter-active":"FullscreenModalAnimation-module_overlay-enter-active__gDEVb","overlay-exit":"FullscreenModalAnimation-module_overlay-exit__Qx1WE","overlay-exit-active":"FullscreenModalAnimation-module_overlay-exit-active__lFR3x","content-enter":"FullscreenModalAnimation-module_content-enter__JmCWa","content-enter-active":"FullscreenModalAnimation-module_content-enter-active__iaNRs","content-exit":"FullscreenModalAnimation-module_content-exit__hB0wY","content-exit-active":"FullscreenModalAnimation-module_content-exit-active__BPVPo"};
+
 var _excluded$i = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
-var slideInFromBottomEnter = "kitt-u_slideInFromBottomEnter_s1717rto";
-var slideInFromBottomEnterActive = "kitt-u_slideInFromBottomEnterActive_sux6xgc";
-var slideInFromBottomExit = "kitt-u_slideInFromBottomExit_sl0lsxt";
-var slideInFromBottomExitActive = "kitt-u_slideInFromBottomExitActive_srlzzmu";
-var slideInClassNames = {
-  appear: slideInFromBottomEnter,
-  appearActive: slideInFromBottomEnterActive,
-  enter: slideInFromBottomEnter,
-  enterActive: slideInFromBottomEnterActive,
-  exit: slideInFromBottomExit,
-  exitActive: slideInFromBottomExitActive
+var overlayClassNames = {
+  appear: styles$1['overlay-enter'],
+  appearActive: styles$1['overlay-enter-active'],
+  enter: styles$1['overlay-enter'],
+  enterActive: styles$1['overlay-enter-active'],
+  exit: styles$1['overlay-exit'],
+  exitActive: styles$1['overlay-exit-active']
 };
-var opacityEnter = "kitt-u_opacityEnter_okm44hr";
-var opacityEnterActive = "kitt-u_opacityEnterActive_o2w8t0i";
-var opacityExit = "kitt-u_opacityExit_o14r8iix";
-var opacityExitActive = "kitt-u_opacityExitActive_oim72y2";
-var opacityClassNames = {
-  appear: opacityEnter,
-  appearActive: opacityEnterActive,
-  enter: opacityEnter,
-  enterActive: opacityEnterActive,
-  exit: opacityExit,
-  exitActive: opacityExitActive
+var slideInClassNames = {
+  appear: styles$1['content-enter'],
+  appearActive: styles$1['content-enter-active'],
+  enter: styles$1['content-enter'],
+  enterActive: styles$1['content-enter-active'],
+  exit: styles$1['content-exit'],
+  exitActive: styles$1['content-exit-active']
 };
 function FullscreenModalAnimation(_ref) {
   var children = _ref.children,
@@ -7976,28 +7990,41 @@ function FullscreenModalAnimation(_ref) {
     appear: appear,
     unmountOnExit: unmountOnExit
   };
-  return /*#__PURE__*/jsxs(View, _objectSpread(_objectSpread({}, props), {}, {
-    children: [/*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
-      nodeRef: overlayRef,
-      timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames,
-      children: /*#__PURE__*/jsx(Overlay, {
-        ref: overlayRef,
-        onPress: onClose
-      })
-    })), /*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
-      nodeRef: contentRef,
-      timeout: isAnimationEnabled ? animation.content.duration : 0,
-      classNames: slideInClassNames,
-      onEnter: onEnter,
-      onEntered: onEntered,
-      onExit: onExit,
-      onExited: onExited,
-      children: /*#__PURE__*/jsx(View, {
-        ref: contentRef,
-        children: children
-      })
-    }))]
+
+  // CSS custom properties for theme-based animation values
+  var overlayEasing = animation.overlay.easing;
+  var contentEasing = animation.content.easing;
+  var cssVariables = {
+    '--overlay-duration': "".concat(animation.overlay.duration, "ms"),
+    '--overlay-easing': "cubic-bezier(".concat(overlayEasing.x1, ", ").concat(overlayEasing.y1, ", ").concat(overlayEasing.x2, ", ").concat(overlayEasing.y2, ")"),
+    '--content-duration': "".concat(animation.content.duration, "ms"),
+    '--content-easing': "cubic-bezier(".concat(contentEasing.x1, ", ").concat(contentEasing.y1, ", ").concat(contentEasing.x2, ", ").concat(contentEasing.y2, ")")
+  };
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/jsxs("div", {
+      style: cssVariables,
+      children: [/*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
+        nodeRef: overlayRef,
+        timeout: isAnimationEnabled ? animation.overlay.duration : 0,
+        classNames: overlayClassNames,
+        children: /*#__PURE__*/jsx(Overlay, {
+          ref: overlayRef,
+          onPress: onClose
+        })
+      })), /*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
+        nodeRef: contentRef,
+        timeout: isAnimationEnabled ? animation.content.duration : 0,
+        classNames: slideInClassNames,
+        onEnter: onEnter,
+        onEntered: onEntered,
+        onExit: onExit,
+        onExited: onExited,
+        children: /*#__PURE__*/jsx(View, {
+          ref: contentRef,
+          children: children
+        })
+      }))]
+    })
   }));
 }