@ornikar/kitt-universal 21.0.2 → 22.0.0

package/dist/index.es.web.js

@@ -870,9 +870,6 @@ var typography = {
     warning: colors.warning
   },
   types: {
-    get header() {
-      throw new Error('typography.types.header is deprecated, use typography.type.headings instead');
-    },
     headings: {
       fontFamily: {
         "native": {
@@ -906,9 +903,6 @@ var 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": {
@@ -1696,7 +1690,9 @@ function ActionCardContentWrapper(_ref) {
       style: sharedTransform
     },
     _web: {
-      style: sharedTransform
+      style: {
+        transform: "translateY(".concat(translateY, "px)")
+      }
     },
     width: "100%",
     backgroundColor: "kitt.actionCard.".concat(themeName, ".").concat(state, ".backgroundColor"),
@@ -1898,9 +1894,7 @@ function AnimatedContainer$1(_ref) {
         transitionTimingFunction: timingFunction,
         /* Simplifies the animation to just the front of the object – avoid blurry scale */
         backfaceVisibility: 'hidden',
-        transform: [{
-          scale: currentScale
-        }]
+        transform: "scale(".concat(currentScale, ")")
       }
     },
     width: createResponsiveStyleFromProp(isStretch, '100%', 'auto'),
@@ -2124,7 +2118,7 @@ var createHeading = function (level, defaultBase) {
       accessibilityRole: "header",
       base: defaultBase
     }, props), {}, {
-      accessibilityLevel: level
+      "aria-level": level
     }));
   }
   TypographyHeading.displayName = "TypographyHeading".concat(level);
@@ -2722,7 +2716,7 @@ function AvatarContent(_ref) {
       width: size,
       height: size,
       alt: alt,
-      accessibilityLabel: alt
+      "aria-label": alt
     });
   }
   if (firstname && lastname) {
@@ -3353,7 +3347,7 @@ function Choices(_ref2) {
   return /*#__PURE__*/jsx(ChoicesContainer, {
     direction: direction,
     testID: testID,
-    nativeID: id,
+    id: id,
     children: childrenArray.map(function (child, index) {
       var element = /*#__PURE__*/cloneElement(child, _objectSpread({
         selected: isForm ? child.props.value === currentValue : undefined
@@ -3555,7 +3549,7 @@ function Emoji(_ref) {
     testID: testID,
     size: size,
     alt: emojiData.text,
-    accessibilityLabel: emojiData.text,
+    "aria-label": emojiData.text,
     source: {
       uri: emojiData.url
     },
@@ -3752,7 +3746,7 @@ function InputTextContainer(props) {
   }, props));
 }
 
-var _excluded$u = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing"];
+var _excluded$u = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "inputMode", "multiline", "onSubmitEditing"];
 var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
     right = _ref.right;
@@ -3768,8 +3762,8 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     textContentType = _ref$textContentType === void 0 ? 'none' : _ref$textContentType,
     _ref$autoComplete = _ref.autoComplete,
     autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
-    _ref$keyboardType = _ref.keyboardType,
-    keyboardType = _ref$keyboardType === void 0 ? 'default' : _ref$keyboardType,
+    _ref$inputMode = _ref.inputMode,
+    inputMode = _ref$inputMode === void 0 ? 'none' : _ref$inputMode,
     multiline = _ref.multiline,
     onSubmitEditing = _ref.onSubmitEditing,
     props = _objectWithoutProperties(_ref, _excluded$u);
@@ -3781,11 +3775,11 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({
       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,
@@ -4152,7 +4146,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var theme = useTheme();
   return /*#__PURE__*/jsx(Pressable, {
     ref: ref,
-    nativeID: id,
+    id: id,
     testID: testID,
     accessibilityRole: "checkbox",
     accessibilityState: {
@@ -4228,8 +4222,8 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-function getReturnKeyTypeForNumericInput(returnKeyType) {
-  return returnKeyType;
+function getEnterKeyHintForNumericInput(enterKeyHint) {
+  return enterKeyHint;
 }
 
 function prefixWithZero$1(value) {
@@ -4425,7 +4419,7 @@ var InputPart = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     isFocusedInternal = _ref2.isFocusedInternal,
     isHoveredInternal = _ref2.isHoveredInternal,
     isPressedInternal = _ref2.isPressedInternal,
-    returnKeyType = _ref2.returnKeyType,
+    enterKeyHint = _ref2.enterKeyHint,
     onChange = _ref2.onChange,
     onBlur = _ref2.onBlur,
     onSubmitEditing = _ref2.onSubmitEditing;
@@ -4441,8 +4435,8 @@ var InputPart = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     value: value,
     placeholder: placeholder,
     disabled: disabled,
-    keyboardType: "numeric",
-    returnKeyType: returnKeyType,
+    inputMode: "numeric",
+    enterKeyHint: enterKeyHint,
     textAlign: "center",
     onChange: onChange,
     onBlur: onBlur,
@@ -4463,7 +4457,7 @@ function PartContainer(_ref) {
   });
 }
 
-var _excluded$r = ["id", "value", "testID", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "returnKeyType", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
+var _excluded$r = ["id", "value", "testID", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "enterKeyHint", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
 var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
     value = _ref.value,
@@ -4476,7 +4470,7 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isFocusedInternal = _ref.isFocusedInternal,
     isHoveredInternal = _ref.isHoveredInternal,
     isPressedInternal = _ref.isPressedInternal,
-    returnKeyType = _ref.returnKeyType,
+    enterKeyHint = _ref.enterKeyHint,
     onChange = _ref.onChange,
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
@@ -4527,7 +4521,7 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   };
   return /*#__PURE__*/jsx(View, {
     testID: testID,
-    nativeID: id,
+    id: id,
     children: /*#__PURE__*/jsxs(HStack, {
       space: "kitt.2",
       children: [/*#__PURE__*/jsx(PartContainer, {
@@ -4539,7 +4533,7 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
         }, sharedInputPartProps), {}, {
           placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.day,
           value: state.displayedDay,
-          returnKeyType: getReturnKeyTypeForNumericInput('next'),
+          enterKeyHint: getEnterKeyHintForNumericInput('next'),
           onChange: function (e) {
             var nextDay = stringToNumber(e.nativeEvent.text);
             dispatch({
@@ -4570,7 +4564,7 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
         }, sharedInputPartProps), {}, {
           placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.month,
           value: state.displayedMonth,
-          returnKeyType: getReturnKeyTypeForNumericInput('next'),
+          enterKeyHint: getEnterKeyHintForNumericInput('next'),
           onChange: function (e) {
             var nextMonth = stringToNumber(e.nativeEvent.text);
             dispatch({
@@ -4601,7 +4595,7 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
         }, sharedInputPartProps), {}, {
           placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.year,
           value: state.displayedYear,
-          returnKeyType: returnKeyType ? getReturnKeyTypeForNumericInput(returnKeyType) : undefined,
+          enterKeyHint: enterKeyHint ? getEnterKeyHintForNumericInput(enterKeyHint) : undefined,
           onChange: function (e) {
             var nextYear = stringToNumber(e.nativeEvent.text);
             dispatch({
@@ -5019,9 +5013,7 @@ function InputAddressOption(_ref) {
   var item = _ref.item;
   var sharedTransform = {
     style: {
-      transform: [{
-        translateY: 4
-      }]
+      transform: 'translateY(4)'
     }
   };
   return /*#__PURE__*/jsx(Autocomplete.Option, {
@@ -5122,7 +5114,7 @@ var InputEmail = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/jsx(InputText, _objectSpread({
     ref: ref,
     autoComplete: "email",
-    keyboardType: "email-address",
+    inputMode: "email",
     textContentType: "emailAddress",
     autoCapitalize: "none"
   }, props));
@@ -5227,7 +5219,7 @@ var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
-var _excluded$m = ["returnKeyType", "autoComplete", "phoneNumberLength", "value", "onChange"];
+var _excluded$m = ["enterKeyHint", "autoComplete", "phoneNumberLength", "value", "onChange"];
 function isPhoneNumberValid(number) {
   return isValidNumber(number);
 }
@@ -5235,7 +5227,7 @@ function prefixWithZero(value, phoneNumberLength) {
   return value.padStart(phoneNumberLength, '0');
 }
 var InputPhone = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var returnKeyType = _ref.returnKeyType,
+  var enterKeyHint = _ref.enterKeyHint,
     _ref$autoComplete = _ref.autoComplete,
     autoComplete = _ref$autoComplete === void 0 ? 'tel' : _ref$autoComplete,
     _ref$phoneNumberLengt = _ref.phoneNumberLength,
@@ -5247,13 +5239,13 @@ var InputPhone = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     currentValue = _useState2[0],
     setCurrentValue = _useState2[1];
-  var currentReturnKeyType = returnKeyType ? getReturnKeyTypeForNumericInput(returnKeyType) : undefined;
+  var currentEnterKeyHint = enterKeyHint ? getEnterKeyHintForNumericInput(enterKeyHint) : undefined;
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
   }, props), {}, {
     value: currentValue,
-    keyboardType: "phone-pad",
-    returnKeyType: currentReturnKeyType,
+    inputMode: "tel",
+    enterKeyHint: currentEnterKeyHint,
     autoComplete: autoComplete,
     textContentType: "telephoneNumber",
     onChange: function handleChange(event) {
@@ -5326,7 +5318,7 @@ function Label(_ref) {
     children = _ref.children;
   return /*#__PURE__*/jsx(Typography.Text, {
     base: "body",
-    nativeID: undefined,
+    id: undefined,
     children: /*#__PURE__*/jsx("label", {
       id: id,
       htmlFor: htmlFor,
@@ -5348,7 +5340,7 @@ function InnerCircle(_ref) {
     backgroundColor: "kitt.forms.radio.innerCircle.backgroundColor",
     _web: {
       style: {
-        transform: sharedTransform,
+        transform: "scale(".concat(isChecked ? 1 : 0, "))"),
         transitionProperty: 'all',
         transitionDuration: theme.kitt.forms.radio.transition.duration,
         transitionTimingFunction: theme.kitt.forms.radio.transition.timingFunction
@@ -5448,7 +5440,7 @@ var Radio = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/jsx(Pressable, {
     ref: ref,
     testID: testID,
-    nativeID: id,
+    id: id,
     disabled: disabled,
     accessibilityRole: "radio",
     "aria-checked": checked,
@@ -6101,9 +6093,7 @@ function AnimatedScale(_ref) {
         transitionTimingFunction: timingFunction,
         /* Simplifies the animation to just the front of the object – avoid blurry scale */
         backfaceVisibility: 'hidden',
-        transform: [{
-          scale: isDisabled ? 1 : currentScale
-        }]
+        transform: "scale(".concat(isDisabled ? 1 : currentScale, ")")
       }
     },
     children: children
@@ -6137,7 +6127,7 @@ function IconButton(_ref) {
     color = _ref$color === void 0 ? 'black' : _ref$color,
     disabled = _ref.disabled,
     testID = _ref.testID,
-    accessibilityLabel = _ref.accessibilityLabel,
+    ariaLabel = _ref.ariaLabel,
     _ref$accessibilityRol = _ref.accessibilityRole,
     accessibilityRole = _ref$accessibilityRol === void 0 ? 'button' : _ref$accessibilityRol,
     isHoveredInternal = _ref.isHoveredInternal,
@@ -6154,14 +6144,12 @@ function IconButton(_ref) {
     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",
@@ -8691,9 +8679,8 @@ function Picker(_ref) {
         paddingY: isOpen ? 'kitt.2' : undefined,
         _web: {
           style: {
-            transform: [{
-              translate3d: "".concat(tooltipX, "px, ").concat(tooltipY, "px, 0")
-            }],
+            transform: "translate3d(".concat(tooltipX, "px, ").concat(tooltipY, "px, 0)"),
+            visibility: isOpen ? 'visible' : 'hidden',
             transitionDuration: '300ms',
             transitionProperty: 'opacity, padding',
             transitionTimingFunction: 'ease-in-out'
@@ -8706,9 +8693,7 @@ function Picker(_ref) {
           shadow: "kitt.picker.web.optionsContainer.shadow",
           _web: {
             style: {
-              transform: [{
-                translateY: isOpen ? 0 : 8
-              }],
+              transform: "translateY(".concat(isOpen ? 0 : 8, ")"),
               visibility: isOpen ? 'visible' : 'hidden',
               transitionDuration: '300ms',
               transitionTimingFunction: 'ease-in-out'
@@ -9648,9 +9633,6 @@ var Arrow = /*#__PURE__*/forwardRef(function (_ref, ref) {
     left = _ref.left,
     display = _ref.display;
   var theme = useTheme();
-  var transformStyle = [{
-    rotate: position === 'bottom' ? '180deg' : '0deg'
-  }];
   return /*#__PURE__*/jsx(View, {
     ref: ref,
     display: display || {
@@ -9662,7 +9644,7 @@ var Arrow = /*#__PURE__*/forwardRef(function (_ref, ref) {
     left: left,
     top: top,
     style: {
-      transform: transformStyle
+      transform: "rotate(".concat(position === 'bottom' ? '180deg' : '0deg', ")")
     },
     children: /*#__PURE__*/jsx(SvgArrowinline, {
       color: theme.kitt.tooltip.backgroundColor,
@@ -9831,7 +9813,7 @@ function Tooltip(_ref) {
     }), /*#__PURE__*/jsx(Portal, {
       children: /*#__PURE__*/jsx(View, {
         ref: floating,
-        accessibilityHidden: !isVisible,
+        "aria-hidden": !isVisible,
         paddingX: {
           base: 'kitt.4',
           small: 0
@@ -9845,16 +9827,16 @@ function Tooltip(_ref) {
           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, ".concat(tooltipY, "px, 0") : "".concat(tooltipX, "px, ").concat(tooltipY, "px, 0")
-            }],
+            transform: "translate3d(".concat(isBase && !fullWidth ? "0, ".concat(tooltipY, "px, 0") : "".concat(tooltipX, "px, ").concat(tooltipY, "px, 0"), ")"),
             visibility: isVisible ? 'visible' : 'hidden',
             transitionDuration: transitionDuration,
             transitionProperty: theme.kitt.tooltip.transition[themePart].property,
@@ -9868,9 +9850,7 @@ function Tooltip(_ref) {
         children: /*#__PURE__*/jsxs(View, {
           _web: {
             style: {
-              transform: [{
-                scale: isVisible ? 1 : 0.8
-              }],
+              transform: "scale(".concat(isVisible ? 1 : 0.8, ")"),
               transitionDuration: isVisible ? '0' : transitionDuration,
               transitionProperty: 'all',
               transitionTimingFunction: transitionTimingFunction,
@@ -9966,7 +9946,6 @@ function TypographyEmoji(_ref3) {
     emoji: emoji,
     alignSelf: "center",
     _web: {
-      // @ts-expect-error -- transform expects number, but string works on web
       style: {
         transform: 'translateY(20%)'
       },