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

package/dist/index-node-22.17.es.web.css

@@ -45,10 +45,28 @@
   transition: transform var(--content-duration) var(--content-easing);
 }
 
-.kitt-u_enter_ereraf{-webkit-transform:translateY(8px);-ms-transform:translateY(8px);transform:translateY(8px);opacity:0;}
-.kitt-u_enterActive_e1jmsjrm{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;}
-.kitt-u_exit_e1mwnccz{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}
-.kitt-u_exitActive_e1004d1h{-webkit-transform:translateY(8px);-ms-transform:translateY(8px);transform:translateY(8px);opacity:0;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;}
+.Picker-module_picker-enter__Dzs-s {
+  transform: translateY(8px);
+  opacity: 0;
+}
+
+.Picker-module_picker-enter-active__0hxR5 {
+  transform: translateY(0);
+  opacity: 1;
+  transition: all var(--overlay-duration) var(--overlay-timing-function);
+}
+
+.Picker-module_picker-exit__Z1BjM {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.Picker-module_picker-exit-active__x2C8Q {
+  transform: translateY(8px);
+  opacity: 0;
+  transition: all var(--overlay-duration) var(--overlay-timing-function);
+}
+
 /* overrides :global(a) in Link styles.module.css */
 .TypographyLinkWebWrapper-module_displayUnderline__KxwMp > * {
   text-decoration: underline;

package/dist/index-node-22.17.es.web.mjs

@@ -1052,10 +1052,10 @@ const autocomplete = {
 };
 
 const checkbox = {
-  borderWidth: 2,
-  borderRadius: 5,
-  height: 20,
-  width: 20,
+  borderWidth: 1,
+  borderRadius: 4,
+  height: 24,
+  width: 24,
   iconSize: 14,
   markColor: colors.uiBackgroundLight,
   textSpacing: 10,
@@ -2000,6 +2000,7 @@ const highlight = {
     }
   },
   padding: {
+    small: spacing * 2,
     medium: spacing * 4,
     large: spacing * 6
   }
@@ -2279,6 +2280,10 @@ const typography = {
 
 const picker = {
   maxWidthFixed: 320,
+  animation: {
+    duration: 300,
+    timingFunction: 'ease-in-out'
+  },
   ios: {
     default: {
       fontFamily: typography.types.bodies.fontFamily.native.regular,
@@ -7761,23 +7766,23 @@ function FullscreenModalFooter({
   });
 }
 
-const 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"};
+const 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"};
 
 const 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']
 };
 const 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({
   children,
@@ -8027,6 +8032,9 @@ function useNativeAnimation$1() {
   };
 }
 
+const getTitleTypographyType = size => {
+  return size === 'small' ? 'label-medium' : 'label-large';
+};
 function Highlight({
   variant = 'primary',
   canCollapse = false,
@@ -8041,6 +8049,11 @@ function Highlight({
   const [contentHeight, setContentHeight] = useState(0);
   const [isInitialRender, setIsInitialRender] = useState(true);
   const highlightStyle = {
+    small: {
+      marginBottom: 'kitt.1',
+      spaceBetween: 'kitt.2',
+      contentMarginY: 8
+    },
     medium: {
       marginBottom: 'kitt.1',
       spaceBetween: 'kitt.2',
@@ -8083,8 +8096,8 @@ function Highlight({
           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
             })
@@ -8119,8 +8132,8 @@ function Highlight({
             flexShrink: 1,
             width: "100%",
             children: /*#__PURE__*/jsx(Typography.Text, {
-              variant: "bold",
-              base: "body-m",
+              variant: "semibold",
+              base: getTitleTypographyType(size),
               ellipsizeMode: "clip",
               children: title
             })
@@ -11538,6 +11551,8 @@ function PageLoader() {
   });
 }
 
+const 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({
   isSelected,
   isHighlighted,
@@ -11622,10 +11637,12 @@ function webUseSelectReducer(state, actionAndChanges, options) {
   }
 }
 
-const enter = "kitt-u_enter_ereraf";
-const enterActive = "kitt-u_enterActive_e1jmsjrm";
-const exit = "kitt-u_exit_e1mwnccz";
-const exitActive = "kitt-u_exitActive_e1004d1h";
+const 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({
   children,
   renderTrigger,
@@ -11711,6 +11728,14 @@ function Picker({
     menuRef(currentRef);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  const theme = useTheme();
+  const {
+    animation
+  } = theme.kitt.picker;
+  const cssVariables = {
+    '--overlay-duration': `${animation.duration}ms`,
+    '--overlay-timing-function': animation.timingFunction
+  };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(View, {
       width: "fit-content",
@@ -11755,53 +11780,53 @@ function Picker({
             transitionTimingFunction: 'ease-in-out'
           }
         },
-        children: /*#__PURE__*/jsx(CSSTransition, {
-          unmountOnExit: true,
-          nodeRef: nodeRef,
-          timeout: 300,
-          in: isOpen,
-          classNames: {
-            enter,
-            enterActive,
-            exit,
-            exitActive
-          },
-          children: /*#__PURE__*/jsx(View, {
-            ref: nodeRef,
-            paddingY: "kitt.2",
-            children: childrenArray.map((child, index) => {
-              const currentValue = items[index];
-              if (currentValue === undefined) throw new Error(`Picker: No value found for item at index ${index}`);
-              const {
-                onClick,
-                'aria-selected': ariaSelected,
-                ...itemProps
-              } = getItemProps({
-                item: currentValue,
-                index,
-                disabled
-              });
-              return /*#__PURE__*/jsx(Pressable, {
-                ...itemProps,
-                accessibilityState: {
-                  selected: ariaSelected
-                },
-                onPress: onClick,
-                children: ({
-                  isHovered,
-                  isFocused,
-                  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((child, index) => {
+                const currentValue = items[index];
+                if (currentValue === undefined) {
+                  throw new Error(`Picker: No value found for item at index ${index}`);
                 }
-              }, itemProps.id);
+                const {
+                  onClick,
+                  'aria-selected': ariaSelected,
+                  ...itemProps
+                } = getItemProps({
+                  item: currentValue,
+                  index,
+                  disabled
+                });
+                return /*#__PURE__*/jsx(Pressable, {
+                  ...itemProps,
+                  accessibilityState: {
+                    selected: ariaSelected
+                  },
+                  onPress: onClick,
+                  children: ({
+                    isHovered,
+                    isFocused,
+                    isPressed
+                  }) => {
+                    return /*#__PURE__*/jsx(PickerItem, {
+                      isSelected: checkSelectedItem(selectedItem || undefined, currentValue),
+                      isHighlighted: highlightedIndex === index,
+                      isHovered: isHovered,
+                      isFocused: isFocused,
+                      isPressed: isPressed,
+                      children: child
+                    });
+                  }
+                }, itemProps.id);
+              })
             })
           })
         })