@ornikar/kitt-universal 32.4.0 → 32.5.1-canary.69cd09143dd992620decf0a9f846b68e573511e3.0

package/dist/index.es.web.js

@@ -1070,10 +1070,10 @@ var autocomplete = {
 };
 
 var checkbox = {
-  borderWidth: 2,
-  borderRadius: 5,
-  height: 20,
-  width: 20,
+  borderWidth: 1,
+  borderRadius: 4,
+  height: 24,
+  width: 24,
   iconSize: 14,
   markColor: colors.uiBackgroundLight,
   textSpacing: 10,
@@ -2018,6 +2018,7 @@ var highlight = {
     }
   },
   padding: {
+    small: spacing * 2,
     medium: spacing * 4,
     large: spacing * 6
   }
@@ -2297,6 +2298,10 @@ var typography = {
 
 var picker = {
   maxWidthFixed: 320,
+  animation: {
+    duration: 300,
+    timingFunction: 'ease-in-out'
+  },
   ios: {
     "default": _objectSpread(_objectSpread({
       fontFamily: typography.types.bodies.fontFamily["native"].regular
@@ -7949,24 +7954,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 styles$2 = {"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 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']
+  appear: styles$2['overlay-enter'],
+  appearActive: styles$2['overlay-enter-active'],
+  enter: styles$2['overlay-enter'],
+  enterActive: styles$2['overlay-enter-active'],
+  exit: styles$2['overlay-exit'],
+  exitActive: styles$2['overlay-exit-active']
 };
 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']
+  appear: styles$2['content-enter'],
+  appearActive: styles$2['content-enter-active'],
+  enter: styles$2['content-enter'],
+  enterActive: styles$2['content-enter-active'],
+  exit: styles$2['content-exit'],
+  exitActive: styles$2['content-exit-active']
 };
 function FullscreenModalAnimation(_ref) {
   var children = _ref.children,
@@ -8207,6 +8212,9 @@ function useNativeAnimation$1() {
   };
 }
 
+var getTitleTypographyType = function (size) {
+  return size === 'small' ? 'label-medium' : 'label-large';
+};
 function Highlight(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
@@ -8234,6 +8242,11 @@ function Highlight(_ref) {
     isInitialRender = _useState6[0],
     setIsInitialRender = _useState6[1];
   var highlightStyle = {
+    small: {
+      marginBottom: 'kitt.1',
+      spaceBetween: 'kitt.2',
+      contentMarginY: 8
+    },
     medium: {
       marginBottom: 'kitt.1',
       spaceBetween: 'kitt.2',
@@ -8275,8 +8288,8 @@ function Highlight(_ref) {
           children: [title && /*#__PURE__*/jsx(View, {
             marginBottom: highlightStyle[size].marginBottom,
             children: /*#__PURE__*/jsx(Typography.Text, {
-              variant: "bold",
-              base: "body-m",
+              variant: "semibold",
+              base: getTitleTypographyType(size),
               ellipsizeMode: "clip",
               children: title
             })
@@ -8310,8 +8323,8 @@ function Highlight(_ref) {
             flexShrink: 1,
             width: "100%",
             children: /*#__PURE__*/jsx(Typography.Text, {
-              variant: "bold",
-              base: "body-m",
+              variant: "semibold",
+              base: getTitleTypographyType(size),
               ellipsizeMode: "clip",
               children: title
             })
@@ -11721,6 +11734,8 @@ function PageLoader() {
   });
 }
 
+var styles$1 = {"picker-enter":"Picker-module_picker-enter__Dzs-s","picker-enter-active":"Picker-module_picker-enter-active__0hxR5","picker-exit":"Picker-module_picker-exit__Z1BjM","picker-exit-active":"Picker-module_picker-exit-active__x2C8Q"};
+
 function getBackgroundColor(_ref) {
   var isSelected = _ref.isSelected,
     isHighlighted = _ref.isHighlighted,
@@ -11802,10 +11817,12 @@ function webUseSelectReducer(state, actionAndChanges, options) {
 var _excluded$9 = ["onClick"],
   _excluded2$2 = ["ref"],
   _excluded3$2 = ["onClick", "aria-selected"];
-var enter = "kitt-u_enter_ereraf";
-var enterActive = "kitt-u_enterActive_e1jmsjrm";
-var exit = "kitt-u_exit_e1mwnccz";
-var exitActive = "kitt-u_exitActive_e1004d1h";
+var pickerClassNames = {
+  enter: styles$1['picker-enter'],
+  enterActive: styles$1['picker-enter-active'],
+  exit: styles$1['picker-exit'],
+  exitActive: styles$1['picker-exit-active']
+};
 function Picker(_ref) {
   var _refs$reference$curre;
   var children = _ref.children,
@@ -11892,6 +11909,12 @@ function Picker(_ref) {
     menuRef(currentRef);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  var theme = useTheme();
+  var animation = theme.kitt.picker.animation;
+  var cssVariables = {
+    '--overlay-duration': "".concat(animation.duration, "ms"),
+    '--overlay-timing-function': animation.timingFunction
+  };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
       width: "fit-content"
@@ -11935,50 +11958,50 @@ function Picker(_ref) {
             transitionTimingFunction: 'ease-in-out'
           }
         },
-        children: /*#__PURE__*/jsx(CSSTransition, {
-          unmountOnExit: true,
-          nodeRef: nodeRef,
-          timeout: 300,
-          "in": isOpen,
-          classNames: {
-            enter: enter,
-            enterActive: enterActive,
-            exit: exit,
-            exitActive: exitActive
-          },
-          children: /*#__PURE__*/jsx(View, {
-            ref: nodeRef,
-            paddingY: "kitt.2",
-            children: childrenArray.map(function (child, index) {
-              var currentValue = items[index];
-              if (currentValue === undefined) throw new Error("Picker: No value found for item at index ".concat(index));
-              var _getItemProps = getItemProps({
-                  item: currentValue,
-                  index: index,
-                  disabled: disabled
-                }),
-                onClick = _getItemProps.onClick,
-                ariaSelected = _getItemProps['aria-selected'],
-                itemProps = _objectWithoutProperties(_getItemProps, _excluded3$2);
-              return /*#__PURE__*/jsx(Pressable, _objectSpread(_objectSpread({}, itemProps), {}, {
-                accessibilityState: {
-                  selected: ariaSelected
-                },
-                onPress: onClick,
-                children: function (_ref2) {
-                  var isHovered = _ref2.isHovered,
-                    isFocused = _ref2.isFocused,
-                    isPressed = _ref2.isPressed;
-                  return /*#__PURE__*/jsx(PickerItem, {
-                    isSelected: checkSelectedItem(selectedItem || undefined, currentValue),
-                    isHighlighted: highlightedIndex === index,
-                    isHovered: isHovered,
-                    isFocused: isFocused,
-                    isPressed: isPressed,
-                    children: child
-                  });
+        children: /*#__PURE__*/jsx("div", {
+          style: cssVariables,
+          children: /*#__PURE__*/jsx(CSSTransition, {
+            unmountOnExit: true,
+            nodeRef: nodeRef,
+            timeout: 300,
+            "in": isOpen,
+            classNames: pickerClassNames,
+            children: /*#__PURE__*/jsx(View, {
+              ref: nodeRef,
+              paddingY: "kitt.2",
+              children: childrenArray.map(function (child, index) {
+                var currentValue = items[index];
+                if (currentValue === undefined) {
+                  throw new Error("Picker: No value found for item at index ".concat(index));
                 }
-              }), itemProps.id);
+                var _getItemProps = getItemProps({
+                    item: currentValue,
+                    index: index,
+                    disabled: disabled
+                  }),
+                  onClick = _getItemProps.onClick,
+                  ariaSelected = _getItemProps['aria-selected'],
+                  itemProps = _objectWithoutProperties(_getItemProps, _excluded3$2);
+                return /*#__PURE__*/jsx(Pressable, _objectSpread(_objectSpread({}, itemProps), {}, {
+                  accessibilityState: {
+                    selected: ariaSelected
+                  },
+                  onPress: onClick,
+                  children: function (_ref2) {
+                    var isHovered = _ref2.isHovered,
+                      isFocused = _ref2.isFocused,
+                      isPressed = _ref2.isPressed;
+                    return /*#__PURE__*/jsx(PickerItem, {
+                      isSelected: checkSelectedItem(selectedItem || undefined, currentValue),
+                      isHighlighted: highlightedIndex === index,
+                      isHovered: isHovered,
+                      isFocused: isFocused,
+                      isPressed: isPressed,
+                      children: child
+                    });
+                  }
+                }), itemProps.id);
+              })
             })
           })
         })