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

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

@@ -6,6 +6,7 @@
 .kitt-u_opacityEnterActive_o1t4vl7b{opacity:1;-webkit-transition:opacity 250ms cubic-bezier(0.42,0,1,1);transition:opacity 250ms cubic-bezier(0.42,0,1,1);}
 .kitt-u_opacityExit_ogyytm1{opacity:1;}
 .kitt-u_opacityExitActive_o18xvk52{opacity:0;-webkit-transition:opacity 250ms cubic-bezier(0.42,0,1,1);transition:opacity 250ms cubic-bezier(0.42,0,1,1);}
+.kitt-u_inputTextContainer_i1encr9g{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;}.kitt-u_inputTextContainer_i1encr9g > *::-ms-clear,.kitt-u_inputTextContainer_i1encr9g > *::-ms-reveal{display:none;}.kitt-u_inputTextContainer_i1encr9g > *{-webkit-transition:border-color 200ms ease-in-out,background-color 200ms ease-in-out;transition:border-color 200ms ease-in-out,background-color 200ms ease-in-out;}
 /* Overlay animation styles - uses CSS variables for theme values */
 .FullscreenModalAnimation-module_overlay-enter__L1J1X {
   opacity: 0;

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

@@ -671,6 +671,10 @@ const button = {
     default: 40,
     medium: 48
   },
+  minHeight: {
+    default: 40,
+    medium: 48
+  },
   maxHeight: 48,
   icon: {
     medium: {
@@ -1118,6 +1122,7 @@ const inputStatesStyle = {
     color: deepPurpleColorPalette.black
   },
   hover: {
+    backgroundColor: deepPurpleColorPalette['beige.1'],
     borderColor: deepPurpleColorPalette['beige.4'],
     color: deepPurpleColorPalette.black
   },
@@ -2123,8 +2128,8 @@ const typography = {
           allowedFontWeights: ['semibold']
         },
         'heading-l': {
-          fontSize: 40,
-          lineHeight: 48,
+          fontSize: 38,
+          lineHeight: 44,
           allowedFontWeights: ['semibold']
         },
         'heading-m': {
@@ -2133,14 +2138,19 @@ const typography = {
           allowedFontWeights: ['semibold']
         },
         'heading-s': {
-          fontSize: 18,
-          lineHeight: 20,
-          allowedFontWeights: ['regular', 'bold']
+          fontSize: 24,
+          lineHeight: 28,
+          allowedFontWeights: ['semibold']
         },
         'heading-xs': {
+          fontSize: 20,
+          lineHeight: 24,
+          allowedFontWeights: ['semibold']
+        },
+        'heading-xxs': {
           fontSize: 16,
-          lineHeight: 18,
-          allowedFontWeights: ['regular', 'bold']
+          lineHeight: 20,
+          allowedFontWeights: ['semibold']
         }
       }
     },
@@ -2207,17 +2217,17 @@ const typography = {
       configs: {
         'label-large': {
           fontSize: 16,
-          lineHeight: 24,
+          lineHeight: 20,
           allowedFontWeights: ['semibold']
         },
         'label-medium': {
           fontSize: 14,
-          lineHeight: 20,
+          lineHeight: 18,
           allowedFontWeights: ['semibold']
         },
         'label-small': {
           fontSize: 12,
-          lineHeight: 16,
+          lineHeight: 14,
           allowedFontWeights: ['semibold']
         }
       }
@@ -3135,7 +3145,9 @@ function AnimatedContainer$2({
     },
     width: width,
     height: height,
+    minHeight: size === 'default' ? 'kitt.button.minHeight.default' : 'kitt.button.minHeight.medium',
     alignSelf: "baseline",
+    justifyContent: "center",
     borderRadius: "kitt.button.borderRadius",
     backgroundColor: currentBackgroundColor,
     children: children
@@ -3831,6 +3843,7 @@ const Button = /*#__PURE__*/forwardRef(({
     alignSelf: createResponsiveStyleFromProp(stretch, undefined, 'flex-start'),
     minWidth: "kitt.button.minWidth",
     maxWidth: createResponsiveStyleFromProp(stretch, '100%', 'kitt.button.maxWidth'),
+    minHeight: size === 'default' ? 'kitt.button.minHeight.default' : 'kitt.button.minHeight.medium',
     maxHeight: "kitt.button.maxHeight",
     width: createResponsiveStyleFromProp(stretch, '100%', 'auto'),
     onPress: onPress,
@@ -5359,30 +5372,11 @@ function InputPressable({
   });
 }
 
-function InputTextContainer({
-  children,
-  isHovered
-}) {
-  const theme = useTheme();
-  const sx = useSx();
-  const styles = sx({
-    borderRadius: input.borderRadius
-  });
-  const animatedBackground = useAnimatedStyle(() => {
-    const baseBackgroundColor = theme.kitt.palettes.deepPurple.white;
-    const 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
-    })
+const inputTextContainer = "kitt-u_inputTextContainer_i1encr9g";
+function InputTextContainer(props) {
+  return /*#__PURE__*/jsx("div", {
+    className: inputTextContainer,
+    ...props
   });
 }
 
@@ -5406,44 +5400,39 @@ const InputText = /*#__PURE__*/forwardRef(({
   const fontSizeForNativeBase = createNativeBaseFontSize({
     base: 'body-m'
   });
-  return /*#__PURE__*/jsx(Pressable, {
-    children: ({
-      isHovered
-    }) => /*#__PURE__*/jsxs(InputTextContainer, {
-      isHovered: internalForceState ? internalForceState === 'hover' : isHovered,
-      children: [/*#__PURE__*/jsx(Input, {
-        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 ? () => 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__*/jsxs(InputTextContainer, {
+    children: [/*#__PURE__*/jsx(Input, {
+      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 ? () => 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]
   });
 });
 
@@ -9935,6 +9924,10 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         button: {
           minWidth: theme.button.minWidth,
           maxWidth: theme.button.maxWidth,
+          minHeight: {
+            default: theme.button.minHeight.default,
+            medium: theme.button.minHeight.medium
+          },
           maxHeight: theme.button.maxHeight,
           height: {
             default: theme.button.height.default,
@@ -10556,6 +10549,7 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
       'heading-m': `${theme.typography.types.headings.configs['heading-m'].fontSize}px`,
       'heading-s': `${theme.typography.types.headings.configs['heading-s'].fontSize}px`,
       'heading-xs': `${theme.typography.types.headings.configs['heading-xs'].fontSize}px`,
+      'heading-xxs': `${theme.typography.types.headings.configs['heading-xxs'].fontSize}px`,
       'body-xl': `${theme.typography.types.bodies.configs['body-xl'].fontSize}px`,
       'body-l': `${theme.typography.types.bodies.configs['body-l'].fontSize}px`,
       'body-m': `${theme.typography.types.bodies.configs['body-m'].fontSize}px`,
@@ -10579,6 +10573,7 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
       'heading-m': `${theme.typography.types.headings.configs['heading-m'].lineHeight}px`,
       'heading-s': `${theme.typography.types.headings.configs['heading-s'].lineHeight}px`,
       'heading-xs': `${theme.typography.types.headings.configs['heading-xs'].lineHeight}px`,
+      'heading-xxs': `${theme.typography.types.headings.configs['heading-xxs'].lineHeight}px`,
       'body-xl': `${theme.typography.types.bodies.configs['body-xl'].lineHeight}px`,
       'body-l': `${theme.typography.types.bodies.configs['body-l'].lineHeight}px`,
       'body-m': `${theme.typography.types.bodies.configs['body-m'].lineHeight}px`,
@@ -12406,7 +12401,7 @@ function StoryTitleLevel4({
   return /*#__PURE__*/jsx(View, {
     marginBottom: 10,
     children: /*#__PURE__*/jsx(Typography.Header4, {
-      base: "heading-s",
+      base: "body-l",
       color: useStoryBlockColor(color),
       numberOfLines: numberOfLines,
       children: children
@@ -12955,7 +12950,7 @@ function ToastContent({
     flexGrow: 1,
     flexShrink: 1,
     children: [title ? /*#__PURE__*/jsx(Typography.Text, {
-      base: "heading-xs",
+      base: "body-m",
       color: "white",
       children: title
     }) : null, description ? /*#__PURE__*/jsx(Typography.Text, {
@@ -12971,7 +12966,7 @@ function ToastContent({
       borderColor: "white",
       onPress: onPress,
       children: /*#__PURE__*/jsx(Typography.Text, {
-        base: "heading-xs",
+        base: "body-m",
         color: "white",
         children: actionLabel
       })