@ornikar/kitt-universal 32.1.1-canary.28d1f9f68cb643b8c67559f72df59006a88da1e9.0 → 32.3.0

package/dist/index.es.web.js

@@ -11,7 +11,7 @@ import _typeof from '@babel/runtime/helpers/typeof';
 import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import { SpinnerGapRegularIcon, UserRegularIcon, XRegularIcon, ArrowLeftRegularIcon, CaretUpFillIcon, CaretDownFillIcon, MapPinRegularIcon, EyeClosedRegularIcon, EyeRegularIcon, CheckCircleFillIcon, CaretDownRegularIcon, CaretRightRegularIcon, InfoRegularIcon, WarningRegularIcon, CheckRegularIcon, WarningCircleRegularIcon, ArrowCounterClockwiseRegularIcon, InfoFillIcon, WarningCircleFillIcon, WarningFillIcon } from '@ornikar/kitt-icons/phosphor';
-import { Animated, Easing, StyleSheet, Modal, Linking, Pressable as Pressable$2, useWindowDimensions } from 'react-native';
+import { Animated, Easing, ScrollView as ScrollView$2, View as View$2, StyleSheet, Modal, Linking, Pressable as Pressable$2, useWindowDimensions } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import { createPortal } from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
@@ -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
     }
   }
 };
@@ -1921,20 +1921,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 +1934,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 +4389,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 +4433,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
@@ -4742,9 +4738,7 @@ function AnimatedChoiceItemView(_ref) {
     isPressed = _ref.isPressed,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
-    hasError = _ref.hasError,
-    _ref$shouldExpand = _ref.shouldExpand,
-    shouldExpand = _ref$shouldExpand === void 0 ? false : _ref$shouldExpand;
+    hasError = _ref.hasError;
   var theme = useTheme();
   return /*#__PURE__*/jsx(View, {
     position: "relative",
@@ -4762,8 +4756,6 @@ function AnimatedChoiceItemView(_ref) {
       isPressed: isPressed
     }),
     padding: size === 'small' ? 'kitt.2' : 'kitt.4',
-    flexGrow: shouldExpand ? 1 : undefined,
-    flexShrink: shouldExpand ? 1 : undefined,
     _web: {
       style: {
         transitionProperty: theme.kitt.choices.item.transition.property,
@@ -4800,8 +4792,6 @@ function ChoiceItem(_ref) {
     value = _ref.value,
     selected = _ref.selected,
     disabled = _ref.disabled,
-    _ref$shouldExpand = _ref.shouldExpand,
-    shouldExpand = _ref$shouldExpand === void 0 ? false : _ref$shouldExpand,
     _children = _ref.children,
     isPressedInternal = _ref.isPressedInternal,
     isHoveredInternal = _ref.isHoveredInternal,
@@ -4835,8 +4825,6 @@ function ChoiceItem(_ref) {
       checked: selected
     },
     style: style,
-    flexGrow: shouldExpand ? 1 : undefined,
-    flexShrink: shouldExpand ? 1 : undefined,
     onBlur: onBlur,
     onFocus: onFocus,
     onPress: function (e) {
@@ -4855,8 +4843,6 @@ function ChoiceItem(_ref) {
       });
       return /*#__PURE__*/jsxs(VStack, {
         space: "kitt.2",
-        flexGrow: shouldExpand ? 1 : undefined,
-        flexShrink: shouldExpand ? 1 : undefined,
         children: [/*#__PURE__*/jsxs(AnimatedChoiceItemView, {
           animatedStyles: backgroundStyles,
           isHovered: isHovered || isHoveredInternal,
@@ -4864,13 +4850,10 @@ function ChoiceItem(_ref) {
           isSelected: selected,
           isPressed: isPressed || isPressedInternal,
           hasError: hasError,
-          shouldExpand: shouldExpand,
           size: size,
           children: [/*#__PURE__*/jsxs(Stack, {
             alignItems: "center",
             space: "kitt.2",
-            flexGrow: shouldExpand ? 1 : undefined,
-            flexShrink: shouldExpand ? 1 : undefined,
             children: [icon ? /*#__PURE__*/jsx(TypographyIcon, {
               color: textColor,
               icon: icon
@@ -4899,43 +4882,33 @@ function ChoiceItem(_ref) {
 function ChoiceItemContainer(_ref) {
   var children = _ref.children,
     direction = _ref.direction,
-    shouldExpand = _ref.shouldExpand,
     isLast = _ref.isLast;
   var currentItemMarginValue = isLast ? undefined : 'kitt.3';
-  var directionFlexProps = direction === 'row' ? {
+  var flexProps = direction === 'row' ? {
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: 0
   } : {};
-  var shouldExpandFlexProps = shouldExpand ? {
-    flexGrow: 1,
-    flexShrink: 1
-  } : {};
-  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread(_objectSpread({
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     marginRight: direction === 'row' ? currentItemMarginValue : undefined,
     marginBottom: direction === 'column' ? currentItemMarginValue : undefined
-  }, directionFlexProps), shouldExpandFlexProps), {}, {
+  }, flexProps), {}, {
     children: children
   }));
 }
 
-var _excluded$D = ["direction", "shouldExpand", "contentContainerStyle"];
+var _excluded$D = ["direction", "contentContainerStyle"];
 function ChoicesContainer(_ref) {
   var direction = _ref.direction,
-    shouldExpand = _ref.shouldExpand,
     contentContainerStyle = _ref.contentContainerStyle,
     props = _objectWithoutProperties(_ref, _excluded$D);
-  var shouldExpandFlexProps = shouldExpand ? {
-    flexGrow: 1,
-    flexShrink: 1
-  } : {};
   if (direction === 'row') {
-    return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({
+    return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
       horizontal: true,
-      contentContainerStyle: shouldExpand ? shouldExpandFlexProps : contentContainerStyle
-    }, props), shouldExpandFlexProps));
+      contentContainerStyle: contentContainerStyle
+    }, props));
   }
-  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), shouldExpandFlexProps));
+  return /*#__PURE__*/jsx(View$2, _objectSpread({}, props));
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -4947,8 +4920,6 @@ function Choices(_ref2) {
     _ref2$direction = _ref2.direction,
     direction = _ref2$direction === void 0 ? 'column' : _ref2$direction,
     disabled = _ref2.disabled,
-    _ref2$shouldExpand = _ref2.shouldExpand,
-    shouldExpand = _ref2$shouldExpand === void 0 ? false : _ref2$shouldExpand,
     children = _ref2.children,
     value = _ref2.value,
     onPress = _ref2.onPress,
@@ -4967,7 +4938,6 @@ function Choices(_ref2) {
   var sharedProps = {
     type: type,
     disabled: disabled,
-    shouldExpand: shouldExpand,
     onPress: !isForm ? onPress : undefined,
     onChange: isForm ? function (newValue) {
       setCurrentValue(newValue);
@@ -4979,7 +4949,6 @@ function Choices(_ref2) {
   };
   return /*#__PURE__*/jsx(ChoicesContainer, {
     direction: direction,
-    shouldExpand: shouldExpand,
     testID: testID,
     id: id,
     style: style,
@@ -4990,7 +4959,6 @@ function Choices(_ref2) {
       }, sharedProps));
       return /*#__PURE__*/jsx(ChoiceItemContainer, {
         direction: direction,
-        shouldExpand: shouldExpand,
         isLast: index === childrenArray.length - 1,
         children: element
       }, child.key);
@@ -7953,30 +7921,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,
@@ -8004,28 +7966,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
+        })
+      }))]
+    })
   }));
 }