@ornikar/kitt-universal 21.0.2 → 22.0.0

package/dist/index-node-18.18.cjs.web.js

@@ -858,9 +858,6 @@ const typography = {
     warning: colors.warning
   },
   types: {
-    get header() {
-      throw new Error('typography.types.header is deprecated, use typography.type.headings instead');
-    },
     headings: {
       fontFamily: {
         native: {
@@ -894,9 +891,6 @@ const typography = {
         'heading-xxs': createTypographyConfig(16, 1.3)
       }
     },
-    get 'headers-impact'() {
-      throw new Error('typography.types.headers-impact is deprecated, use typography.type.headings-impact instead');
-    },
     'headings-impact': {
       fontFamily: {
         native: {
@@ -1682,7 +1676,9 @@ function ActionCardContentWrapper({
       style: sharedTransform
     },
     _web: {
-      style: sharedTransform
+      style: {
+        transform: `translateY(${translateY}px)`
+      }
     },
     width: "100%",
     backgroundColor: `kitt.actionCard.${themeName}.${state}.backgroundColor`,
@@ -1886,9 +1882,7 @@ function AnimatedContainer$1({
         transitionTimingFunction: timingFunction,
         /* Simplifies the animation to just the front of the object – avoid blurry scale */
         backfaceVisibility: 'hidden',
-        transform: [{
-          scale: currentScale
-        }]
+        transform: `scale(${currentScale})`
       }
     },
     width: createResponsiveStyleFromProp(isStretch, '100%', 'auto'),
@@ -2104,7 +2098,7 @@ const createHeading = (level, defaultBase) => {
       accessibilityRole: "header",
       base: defaultBase,
       ...props,
-      accessibilityLevel: level
+      "aria-level": level
     });
   }
   TypographyHeading.displayName = `TypographyHeading${level}`;
@@ -2694,7 +2688,7 @@ function AvatarContent({
       width: size,
       height: size,
       alt: alt,
-      accessibilityLabel: alt
+      "aria-label": alt
     });
   }
   if (firstname && lastname) {
@@ -3332,7 +3326,7 @@ function Choices({
   return /*#__PURE__*/jsxRuntime.jsx(ChoicesContainer, {
     direction: direction,
     testID: testID,
-    nativeID: id,
+    id: id,
     children: childrenArray.map((child, index) => {
       const element = /*#__PURE__*/react.cloneElement(child, {
         selected: isForm ? child.props.value === currentValue : undefined,
@@ -3533,7 +3527,7 @@ function Emoji({
     testID: testID,
     size: size,
     alt: emojiData.text,
-    accessibilityLabel: emojiData.text,
+    "aria-label": emojiData.text,
     source: {
       uri: emojiData.url
     },
@@ -3704,7 +3698,7 @@ const InputText = /*#__PURE__*/react.forwardRef(({
   autoCorrect = true,
   textContentType = 'none',
   autoComplete = 'off',
-  keyboardType = 'default',
+  inputMode = 'none',
   multiline,
   onSubmitEditing,
   ...props
@@ -3717,11 +3711,11 @@ const InputText = /*#__PURE__*/react.forwardRef(({
     children: [/*#__PURE__*/jsxRuntime.jsx(nativeBase.Input, {
       ref: ref,
       multiline: multiline,
-      nativeID: id,
+      id: id,
       isDisabled: internalForceState ? internalForceState === 'disabled' : disabled,
       isHovered: internalForceState ? internalForceState === 'hover' : undefined,
       isFocused: internalForceState ? internalForceState === 'focus' : undefined,
-      keyboardType: keyboardType,
+      inputMode: inputMode,
       autoComplete: autoComplete,
       autoCorrect: autoCorrect,
       textContentType: textContentType,
@@ -4096,7 +4090,7 @@ const Checkbox = /*#__PURE__*/react.forwardRef(({
   const theme = useTheme();
   return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
     ref: ref,
-    nativeID: id,
+    id: id,
     testID: testID,
     accessibilityRole: "checkbox",
     accessibilityState: {
@@ -4171,8 +4165,8 @@ const Checkbox = /*#__PURE__*/react.forwardRef(({
   });
 });
 
-function getReturnKeyTypeForNumericInput(returnKeyType) {
-  return returnKeyType;
+function getEnterKeyHintForNumericInput(enterKeyHint) {
+  return enterKeyHint;
 }
 
 function prefixWithZero$1(value, maxLength = 2) {
@@ -4382,7 +4376,7 @@ const InputPart = /*#__PURE__*/react.forwardRef(({
   isFocusedInternal,
   isHoveredInternal,
   isPressedInternal,
-  returnKeyType,
+  enterKeyHint,
   onChange,
   onBlur,
   onSubmitEditing
@@ -4399,8 +4393,8 @@ const InputPart = /*#__PURE__*/react.forwardRef(({
     value: value,
     placeholder: placeholder,
     disabled: disabled,
-    keyboardType: "numeric",
-    returnKeyType: returnKeyType,
+    inputMode: "numeric",
+    enterKeyHint: enterKeyHint,
     textAlign: "center",
     onChange: onChange,
     onBlur: onBlur,
@@ -4434,7 +4428,7 @@ const KeyboardDatePicker = /*#__PURE__*/react.forwardRef(({
   isFocusedInternal,
   isHoveredInternal,
   isPressedInternal,
-  returnKeyType,
+  enterKeyHint,
   onChange,
   onBlur,
   onFocus,
@@ -4483,7 +4477,7 @@ const KeyboardDatePicker = /*#__PURE__*/react.forwardRef(({
   };
   return /*#__PURE__*/jsxRuntime.jsx(View, {
     testID: testID,
-    nativeID: id,
+    id: id,
     children: /*#__PURE__*/jsxRuntime.jsxs(HStack, {
       space: "kitt.2",
       children: [/*#__PURE__*/jsxRuntime.jsx(PartContainer, {
@@ -4495,7 +4489,7 @@ const KeyboardDatePicker = /*#__PURE__*/react.forwardRef(({
           ...sharedInputPartProps,
           placeholder: placeholder?.day,
           value: state.displayedDay,
-          returnKeyType: getReturnKeyTypeForNumericInput('next'),
+          enterKeyHint: getEnterKeyHintForNumericInput('next'),
           onChange: e => {
             const nextDay = stringToNumber(e.nativeEvent.text);
             dispatch({
@@ -4523,7 +4517,7 @@ const KeyboardDatePicker = /*#__PURE__*/react.forwardRef(({
           ...sharedInputPartProps,
           placeholder: placeholder?.month,
           value: state.displayedMonth,
-          returnKeyType: getReturnKeyTypeForNumericInput('next'),
+          enterKeyHint: getEnterKeyHintForNumericInput('next'),
           onChange: e => {
             const nextMonth = stringToNumber(e.nativeEvent.text);
             dispatch({
@@ -4551,7 +4545,7 @@ const KeyboardDatePicker = /*#__PURE__*/react.forwardRef(({
           ...sharedInputPartProps,
           placeholder: placeholder?.year,
           value: state.displayedYear,
-          returnKeyType: returnKeyType ? getReturnKeyTypeForNumericInput(returnKeyType) : undefined,
+          enterKeyHint: enterKeyHint ? getEnterKeyHintForNumericInput(enterKeyHint) : undefined,
           onChange: e => {
             const nextYear = stringToNumber(e.nativeEvent.text);
             dispatch({
@@ -4886,9 +4880,7 @@ function InputAddressOption({
 }) {
   const sharedTransform = {
     style: {
-      transform: [{
-        translateY: 4
-      }]
+      transform: 'translateY(4)'
     }
   };
   return /*#__PURE__*/jsxRuntime.jsx(Autocomplete.Option, {
@@ -4986,7 +4978,7 @@ const InputEmail = /*#__PURE__*/react.forwardRef((props, ref) => {
   return /*#__PURE__*/jsxRuntime.jsx(InputText, {
     ref: ref,
     autoComplete: "email",
-    keyboardType: "email-address",
+    inputMode: "email",
     textContentType: "emailAddress",
     autoCapitalize: "none",
     ...props
@@ -5093,7 +5085,7 @@ function prefixWithZero(value, phoneNumberLength) {
   return value.padStart(phoneNumberLength, '0');
 }
 const InputPhone = /*#__PURE__*/react.forwardRef(({
-  returnKeyType,
+  enterKeyHint,
   autoComplete = 'tel',
   phoneNumberLength = 10,
   value,
@@ -5101,13 +5093,13 @@ const InputPhone = /*#__PURE__*/react.forwardRef(({
   ...props
 }, ref) => {
   const [currentValue, setCurrentValue] = react.useState(value);
-  const currentReturnKeyType = returnKeyType ? getReturnKeyTypeForNumericInput(returnKeyType) : undefined;
+  const currentEnterKeyHint = enterKeyHint ? getEnterKeyHintForNumericInput(enterKeyHint) : undefined;
   return /*#__PURE__*/jsxRuntime.jsx(InputText, {
     ref: ref,
     ...props,
     value: currentValue,
-    keyboardType: "phone-pad",
-    returnKeyType: currentReturnKeyType,
+    inputMode: "tel",
+    enterKeyHint: currentEnterKeyHint,
     autoComplete: autoComplete,
     textContentType: "telephoneNumber",
     onChange: event => {
@@ -5185,7 +5177,7 @@ function Label({
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
     base: "body",
-    nativeID: undefined,
+    id: undefined,
     children: /*#__PURE__*/jsxRuntime.jsx("label", {
       id: id,
       htmlFor: htmlFor,
@@ -5208,7 +5200,7 @@ function InnerCircle({
     backgroundColor: "kitt.forms.radio.innerCircle.backgroundColor",
     _web: {
       style: {
-        transform: sharedTransform,
+        transform: `scale(${isChecked ? 1 : 0}))`,
         transitionProperty: 'all',
         transitionDuration: theme.kitt.forms.radio.transition.duration,
         transitionTimingFunction: theme.kitt.forms.radio.transition.timingFunction
@@ -5312,7 +5304,7 @@ const Radio = /*#__PURE__*/react.forwardRef(({
   return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
     ref: ref,
     testID: testID,
-    nativeID: id,
+    id: id,
     disabled: disabled,
     accessibilityRole: "radio",
     "aria-checked": checked,
@@ -5988,9 +5980,7 @@ function AnimatedScale({
         transitionTimingFunction: timingFunction,
         /* Simplifies the animation to just the front of the object – avoid blurry scale */
         backfaceVisibility: 'hidden',
-        transform: [{
-          scale: isDisabled ? 1 : currentScale
-        }]
+        transform: `scale(${isDisabled ? 1 : currentScale})`
       }
     },
     children: children
@@ -6023,7 +6013,7 @@ function IconButton({
   color = 'black',
   disabled,
   testID,
-  accessibilityLabel,
+  ariaLabel,
   accessibilityRole = 'button',
   isHoveredInternal,
   isPressedInternal,
@@ -6041,14 +6031,12 @@ function IconButton({
     disabled: disabled,
     width: "kitt.iconButton.width",
     height: "kitt.iconButton.height",
-    accessibilityLabel: accessibilityLabel,
+    "aria-label": ariaLabel,
     accessibilityRole: accessibilityRole,
     _web: {
       style: {
         backfaceVisibility: 'hidden',
-        transform: [{
-          translate3d: '0'
-        }]
+        transform: 'translate3d(0px)'
       }
     },
     borderRadius: "kitt.iconButton.borderRadius",
@@ -8582,9 +8570,8 @@ function Picker({
         paddingY: isOpen ? 'kitt.2' : undefined,
         _web: {
           style: {
-            transform: [{
-              translate3d: `${tooltipX}px, ${tooltipY}px, 0`
-            }],
+            transform: `translate3d(${tooltipX}px, ${tooltipY}px, 0)`,
+            visibility: isOpen ? 'visible' : 'hidden',
             transitionDuration: '300ms',
             transitionProperty: 'opacity, padding',
             transitionTimingFunction: 'ease-in-out'
@@ -8597,9 +8584,7 @@ function Picker({
           shadow: "kitt.picker.web.optionsContainer.shadow",
           _web: {
             style: {
-              transform: [{
-                translateY: isOpen ? 0 : 8
-              }],
+              transform: `translateY(${isOpen ? 0 : 8})`,
               visibility: isOpen ? 'visible' : 'hidden',
               transitionDuration: '300ms',
               transitionTimingFunction: 'ease-in-out'
@@ -9531,9 +9516,6 @@ const Arrow = /*#__PURE__*/react.forwardRef(({
   display
 }, ref) => {
   const theme = useTheme();
-  const transformStyle = [{
-    rotate: position === 'bottom' ? '180deg' : '0deg'
-  }];
   return /*#__PURE__*/jsxRuntime.jsx(View, {
     ref: ref,
     display: display || {
@@ -9545,7 +9527,7 @@ const Arrow = /*#__PURE__*/react.forwardRef(({
     left: left,
     top: top,
     style: {
-      transform: transformStyle
+      transform: `rotate(${position === 'bottom' ? '180deg' : '0deg'})`
     },
     children: /*#__PURE__*/jsxRuntime.jsx(SvgArrowinline, {
       color: theme.kitt.tooltip.backgroundColor,
@@ -9709,7 +9691,7 @@ function Tooltip({
     }), /*#__PURE__*/jsxRuntime.jsx(reactPortal.Portal, {
       children: /*#__PURE__*/jsxRuntime.jsx(View, {
         ref: floating,
-        accessibilityHidden: !isVisible,
+        "aria-hidden": !isVisible,
         paddingX: {
           base: 'kitt.4',
           small: 0
@@ -9723,16 +9705,16 @@ function Tooltip({
           small: 'kitt.tooltip.maxWidth'
         },
         opacity: isVisible ? 'kitt.tooltip.opacity' : 0,
-        pointerEvents: isVisible || isCursorOnTooltip ? 'auto' : 'none',
+        style: {
+          pointerEvents: isVisible || isCursorOnTooltip ? 'auto' : 'none'
+        },
         position: strategy,
         zIndex: zIndex,
         top: 0,
         left: 0,
         _web: {
           style: {
-            transform: [{
-              translate3d: isBase && !fullWidth ? `0, ${tooltipY}px, 0` : `${tooltipX}px, ${tooltipY}px, 0`
-            }],
+            transform: `translate3d(${isBase && !fullWidth ? `0, ${tooltipY}px, 0` : `${tooltipX}px, ${tooltipY}px, 0`})`,
             visibility: isVisible ? 'visible' : 'hidden',
             transitionDuration,
             transitionProperty: theme.kitt.tooltip.transition[themePart].property,
@@ -9746,9 +9728,7 @@ function Tooltip({
         children: /*#__PURE__*/jsxRuntime.jsxs(View, {
           _web: {
             style: {
-              transform: [{
-                scale: isVisible ? 1 : 0.8
-              }],
+              transform: `scale(${isVisible ? 1 : 0.8})`,
               transitionDuration: isVisible ? '0' : transitionDuration,
               transitionProperty: 'all',
               transitionTimingFunction,
@@ -9846,7 +9826,6 @@ function TypographyEmoji({
     emoji: emoji,
     alignSelf: "center",
     _web: {
-      // @ts-expect-error -- transform expects number, but string works on web
       style: {
         transform: 'translateY(20%)'
       },