@ornikar/kitt-universal 9.3.0 → 9.4.0

package/dist/index-browser-all.es.js

@@ -2,14 +2,14 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { UserIcon, CheckboxMark, XIcon, EyeOffIcon, EyeIcon, ArcIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
-import { Platform, Image, Linking, useWindowDimensions, Pressable as Pressable$1, StyleSheet, ScrollView as ScrollView$1, Modal as Modal$1, Text as Text$2, TextInput, View as View$1, Animated as Animated$1, Easing } from 'react-native';
+import { Platform, Image, StyleSheet, View as View$1, ScrollView as ScrollView$1, Linking, useWindowDimensions, Pressable as Pressable$2, Modal as Modal$1, Text as Text$2, TextInput, Animated as Animated$1, Easing } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
-import React, { cloneElement, useContext, createContext, forwardRef, useMemo, useEffect, useState, useRef, Fragment as Fragment$1, Children } from 'react';
+import React, { cloneElement, useContext, createContext, forwardRef, useState, Children, useMemo, useEffect, useRef, Fragment as Fragment$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { Text as Text$1, Image as Image$1, NativeBaseProvider, extendTheme, Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, View as View$2, ScrollView as ScrollView$2, Pressable as Pressable$2 } from 'native-base';
-import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, useAnimatedProps, withDelay, withTiming, Easing as Easing$1, withRepeat, interpolate } from 'react-native-reanimated';
+import { Text as Text$1, Pressable as Pressable$1, Image as Image$1, NativeBaseProvider, extendTheme, Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, View as View$2, ScrollView as ScrollView$2 } from 'native-base';
+import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, useDerivedValue, withTiming, useAnimatedProps, withDelay, Easing as Easing$1, withRepeat, interpolate } from 'react-native-reanimated';
 import { parse } from 'twemoji-parser';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
@@ -116,14 +116,20 @@ var KittBreakpointNameEnum;
   KittBreakpointNameEnum["WIDE"] = "wide";
 })(KittBreakpointNameEnum || (KittBreakpointNameEnum = {}));
 
-var _excluded$k = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+var _excluded$l = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
   return useContext(TypographyColorContext);
 }
+var TypographyDefaultColorContext = /*#__PURE__*/createContext(undefined);
+
+function useTypographyDefaultColor() {
+  return useContext(TypographyDefaultColorContext);
+}
 /** @deprecated use native-base instead for SSR compatibility */
 
+
 var getTypographyTypeConfigKey = function (theme) {
   var isMediumOrAbove = theme.responsive.matchWindowSize({
     minWidth: KittBreakpoints.MEDIUM
@@ -158,6 +164,11 @@ function createNativeBaseFontSize(type) {
   });
   return fontSizeForNativeBase;
 }
+
+function getNBThemeColorFromColorProps(colorName) {
+  return colorName ? "kitt.typography.".concat(colorName) : undefined;
+}
+
 function Typography(_ref) {
   var _type$base;
 
@@ -177,9 +188,10 @@ function Typography(_ref) {
   } : _ref$type,
       variant = _ref.variant,
       color = _ref.color,
-      otherProps = _objectWithoutProperties(_ref, _excluded$k);
+      otherProps = _objectWithoutProperties(_ref, _excluded$l);
 
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
+  var defaultColor = useTypographyDefaultColor();
   var hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
   var baseOrDefaultToBody = hasTypographyAncestor ? type.base : (_type$base = type.base) !== null && _type$base !== void 0 ? _type$base : 'body';
   var isHeader = isTypographyHeader(baseOrDefaultToBody, isHeaderTypographyInContext);
@@ -200,14 +212,16 @@ function Typography(_ref) {
     });
   }
 
+  var currentColor = !color && !hasTypographyAncestor ? defaultColor : color;
+
   var text = /*#__PURE__*/jsx(Text$1, _objectSpread({
     accessibilityRole: accessibilityRole || undefined,
     fontSize: fontSizeForNativeBase,
-    lineHeight: fontSizeForNativeBase,
+    lineHeight: hasTypographyAncestor ? undefined : fontSizeForNativeBase,
     fontWeight: isHeader ? "headers.".concat(nonNullableVariant) : "bodies.".concat(nonNullableVariant),
     fontFamily: isHeader ? "headers.".concat(nonNullableVariant) : "bodies.".concat(nonNullableVariant),
-    color: color ? "kitt.typography.".concat(color) : undefined,
-    textDecorationColor: color ? "kitt.typography.".concat(color) : undefined
+    color: getNBThemeColorFromColorProps(currentColor),
+    textDecorationColor: getNBThemeColorFromColorProps(currentColor)
   }, otherProps));
 
   var content = baseOrDefaultToBody ? /*#__PURE__*/jsx(IsHeaderTypographyContext.Provider, {
@@ -248,6 +262,7 @@ var createHeading = function (level, defaultBase) {
   return TypographyHeading;
 };
 
+Typography.SetDefaultColor = TypographyDefaultColorContext.Provider;
 Typography.Text = TypographyText;
 Typography.Paragraph = TypographyParagraph;
 Typography.Header1 = createHeading(1);
@@ -272,7 +287,7 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$j = ["size", "round", "light", "sizeVariant"];
+var _excluded$k = ["size", "round", "light", "sizeVariant"];
 
 var getInitials = function (firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
@@ -343,7 +358,7 @@ function Avatar(_ref6) {
       round = _ref6.round,
       light = _ref6.light,
       sizeVariant = _ref6.sizeVariant,
-      props = _objectWithoutProperties(_ref6, _excluded$j);
+      props = _objectWithoutProperties(_ref6, _excluded$k);
 
   return /*#__PURE__*/jsx(StyledAvatarView, {
     $size: size,
@@ -522,12 +537,12 @@ var BaseStyledButtonPressable = /*#__PURE__*/styled.View.withConfig({
   return defaultPadding;
 });
 
-var _excluded$i = ["color"],
+var _excluded$j = ["color"],
     _excluded2$3 = ["color"];
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      props = _objectWithoutProperties(_ref, _excluded$i);
+      props = _objectWithoutProperties(_ref, _excluded$j);
 
   var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, props), {}, {
@@ -559,7 +574,7 @@ function isSubtle(type) {
   return type.startsWith('subtle');
 }
 
-var _excluded$h = ["type", "variant", "isDisabled", "$isStretch", "icon", "children"];
+var _excluded$i = ["type", "variant", "isDisabled", "$isStretch", "icon", "children"];
 
 var getTextColorByType = function (type, variant) {
   switch (type) {
@@ -701,7 +716,7 @@ function ButtonContent(_ref7) {
       $isStretch = _ref7.$isStretch,
       icon = _ref7.icon,
       children = _ref7.children,
-      props = _objectWithoutProperties(_ref7, _excluded$h);
+      props = _objectWithoutProperties(_ref7, _excluded$i);
 
   var color = isDisabled ? 'black-light' : getTextColorByType(type, variant);
   return /*#__PURE__*/jsx(ButtonContentContainer, {
@@ -837,6 +852,313 @@ function Card(_ref6) {
   });
 }
 
+function getCurrentTextColor(_ref) {
+  var isDisabled = _ref.isDisabled,
+      isSelected = _ref.isSelected,
+      isPressed = _ref.isPressed,
+      isHovered = _ref.isHovered;
+  if (isDisabled) return 'black-light';
+  if (isSelected && isHovered) return 'white';
+  if (isSelected || isPressed) return 'white';
+  return 'black';
+}
+
+function getBorderRadius(defaultRadius, variant) {
+  // The clean way to have the rounded effect would have been to know the children height since radius >= height * 0.5
+  // We don't control over the height of the rendered children we just go with a arbitrary really high value
+  if (variant === 'rounded') return 800;
+  return defaultRadius;
+}
+
+var DisabledBorder = /*#__PURE__*/styled(View$1).withConfig({
+  displayName: "ChoiceItem__DisabledBorder"
+})(["border-radius:", "px;", ";"], function (_ref2) {
+  var theme = _ref2.theme,
+      $variant = _ref2.$variant;
+  return getBorderRadius(theme.kitt.choices.item.borderRadius, $variant);
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  var _theme$kitt$choices$i = theme.kitt.choices.item.disabled.border,
+      width = _theme$kitt$choices$i.width,
+      color = _theme$kitt$choices$i.color;
+  return css(["border:", "px solid ", ";"], width, color);
+});
+var ChoiceItemView = /*#__PURE__*/styled(Animated.View).withConfig({
+  displayName: "ChoiceItem__ChoiceItemView"
+})(["position:relative;border-radius:", "px;background-color:", ";", ";", ""], function (_ref4) {
+  var theme = _ref4.theme,
+      $variant = _ref4.$variant;
+  return getBorderRadius(theme.kitt.choices.item.borderRadius, $variant);
+}, function (_ref5) {
+  var theme = _ref5.theme,
+      $isHovered = _ref5.$isHovered,
+      $isPressed = _ref5.$isPressed,
+      $isDisabled = _ref5.$isDisabled,
+      $isSelected = _ref5.$isSelected;
+  var _theme$kitt$choices$i2 = theme.kitt.choices.item.backgroundColor,
+      hoverWhenSelected = _theme$kitt$choices$i2.hoverWhenSelected,
+      hover = _theme$kitt$choices$i2.hover,
+      disabled = _theme$kitt$choices$i2.disabled,
+      selected = _theme$kitt$choices$i2.selected,
+      pressed = _theme$kitt$choices$i2.pressed,
+      defaultBackground = _theme$kitt$choices$i2["default"];
+  if ($isDisabled) return disabled;
+  if ($isSelected && $isHovered) return hoverWhenSelected;
+  if ($isPressed) return pressed;
+  if ($isHovered) return hover;
+  if ($isSelected) return selected;
+  return defaultBackground;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  var _theme$kitt$choices$i3 = theme.kitt.choices.item.padding,
+      base = _theme$kitt$choices$i3.base,
+      small = _theme$kitt$choices$i3.small;
+  return theme.responsive.ifWindowSizeMatches({
+    minWidth: KittBreakpoints.SMALL
+  }, css(["padding:", "px;"], small), css(["padding:", "px;"], base));
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  if (Platform.OS !== 'web') return undefined;
+  var _theme$kitt$choices$i4 = theme.kitt.choices.item.transition,
+      property = _theme$kitt$choices$i4.property,
+      duration = _theme$kitt$choices$i4.duration,
+      timingFunction = _theme$kitt$choices$i4.timingFunction;
+  return css(["transition:", " ", "ms ", ";"], property, duration, timingFunction);
+});
+function ChoiceItem(_ref8) {
+  var _ref8$type = _ref8.type,
+      type = _ref8$type === void 0 ? 'button' : _ref8$type,
+      value = _ref8.value,
+      selected = _ref8.selected,
+      disabled = _ref8.disabled,
+      variant = _ref8.variant,
+      _children = _ref8.children,
+      isPressedInternal = _ref8.isPressedInternal,
+      isHoveredInternal = _ref8.isHoveredInternal,
+      onPress = _ref8.onPress,
+      onChange = _ref8.onChange,
+      onBlur = _ref8.onBlur,
+      onFocus = _ref8.onFocus;
+  var theme = /*#__PURE__*/useTheme();
+  var pressed = useSharedValue(Boolean(isPressedInternal));
+  var progress = useDerivedValue(function () {
+    var _f = function () {
+      return withTiming(pressed.value ? 1 : 0, {
+        duration: theme.kitt.choices.item.transition.duration
+      });
+    };
+
+    _f._closure = {
+      withTiming: withTiming,
+      pressed: pressed,
+      theme: {
+        kitt: {
+          choices: {
+            item: {
+              transition: {
+                duration: theme.kitt.choices.item.transition.duration
+              }
+            }
+          }
+        }
+      }
+    };
+    _f.asString = "function _f(){const{withTiming,pressed,theme}=jsThis._closure;{return withTiming(pressed.value?1:0,{duration:theme.kitt.choices.item.transition.duration});}}";
+    _f.__workletHash = 1120030177160;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Choices/ChoiceItem.tsx (180:35)";
+    return _f;
+  }());
+  var backgroundStyles = useAnimatedStyle(function () {
+    var _f = function () {
+      var _theme$kitt$choices$i5 = theme.kitt.choices.item.backgroundColor,
+          defaultBg = _theme$kitt$choices$i5["default"],
+          pressedBg = _theme$kitt$choices$i5.pressed,
+          selectedBg = _theme$kitt$choices$i5.selected,
+          disabledBg = _theme$kitt$choices$i5.disabled;
+      if (disabled) return {
+        backgroundColor: disabledBg
+      };
+      if (selected) return {
+        backgroundColor: selectedBg
+      };
+      return {
+        backgroundColor: interpolateColor(progress.value, [0, 1], [defaultBg, pressedBg])
+      };
+    };
+
+    _f._closure = {
+      theme: {
+        kitt: {
+          choices: {
+            item: {
+              backgroundColor: theme.kitt.choices.item.backgroundColor
+            }
+          }
+        }
+      },
+      disabled: disabled,
+      selected: selected,
+      interpolateColor: interpolateColor,
+      progress: progress
+    };
+    _f.asString = "function _f(){const{theme,disabled,selected,interpolateColor,progress}=jsThis._closure;{const{default:defaultBg,pressed:pressedBg,selected:selectedBg,disabled:disabledBg}=theme.kitt.choices.item.backgroundColor;if(disabled)return{backgroundColor:disabledBg};if(selected)return{backgroundColor:selectedBg};return{backgroundColor:interpolateColor(progress.value,[0,1],[defaultBg,pressedBg])};}}";
+    _f.__workletHash = 15506726129309;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Choices/ChoiceItem.tsx (184:44)";
+    return _f;
+  }());
+
+  var handleChange = function () {
+    if (!onChange) return; // Checkbox can be toggled
+
+    if (type === 'checkbox') {
+      onChange(selected ? undefined : value);
+      return;
+    }
+
+    onChange(value);
+  };
+
+  return /*#__PURE__*/jsx(Pressable$1, {
+    disabled: disabled,
+    accessibilityRole: type,
+    accessibilityState: {
+      checked: selected
+    },
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onPress: function handlePress(e) {
+      if (onFocus) onFocus(e);
+      if (onPress) onPress();
+      handleChange();
+      if (onBlur) onBlur(e);
+    },
+    onPressIn: function onPressIn() {
+      pressed.value = true;
+    },
+    onPressOut: function onPressOut() {
+      pressed.value = false;
+    },
+    children: function children(_ref9) {
+      var isHovered = _ref9.isHovered,
+          isPressed = _ref9.isPressed;
+      return /*#__PURE__*/jsxs(ChoiceItemView, {
+        style: Platform.OS !== 'web' ? [backgroundStyles] : undefined,
+        $isHovered: isHovered || isHoveredInternal,
+        $isDisabled: disabled,
+        $isSelected: selected,
+        $isPressed: isPressed || isPressedInternal,
+        $variant: variant,
+        children: [/*#__PURE__*/jsx(Typography.SetDefaultColor, {
+          value: getCurrentTextColor({
+            isDisabled: disabled,
+            isSelected: selected || isPressedInternal,
+            isPressed: isPressed,
+            isHovered: isHovered || isHoveredInternal
+          }),
+          children: _children
+        }), disabled ? /*#__PURE__*/jsx(DisabledBorder, {
+          $variant: variant,
+          style: StyleSheet.absoluteFillObject
+        }) : null]
+      });
+    }
+  });
+}
+
+var ChoiceItemContainer = /*#__PURE__*/styled(View$1).withConfig({
+  displayName: "ChoiceItemContainer"
+})(["", ""], function (_ref) {
+  var theme = _ref.theme,
+      $isLast = _ref.$isLast,
+      $direction = _ref.$direction;
+  var _theme$kitt$choices$s = theme.kitt.choices.spacing,
+      row = _theme$kitt$choices$s.row,
+      column = _theme$kitt$choices$s.column;
+
+  if ($direction === 'row') {
+    return css(["margin-right:", "px;"], $isLast ? 0 : row);
+  }
+
+  return css(["margin-bottom:", "px;"], $isLast ? 0 : column);
+});
+
+var _excluded$h = ["direction"];
+
+function ChoicesContainer(_ref) {
+  var direction = _ref.direction,
+      props = _objectWithoutProperties(_ref, _excluded$h);
+
+  if (direction === 'row') {
+    return /*#__PURE__*/jsx(ScrollView$1, _objectSpread({
+      horizontal: true
+    }, props));
+  }
+
+  return /*#__PURE__*/jsx(View$1, _objectSpread({}, props));
+}
+
+function Choices(_ref2) {
+  var id = _ref2.id,
+      testID = _ref2.testID,
+      type = _ref2.type,
+      _ref2$direction = _ref2.direction,
+      direction = _ref2$direction === void 0 ? 'column' : _ref2$direction,
+      disabled = _ref2.disabled,
+      children = _ref2.children,
+      value = _ref2.value,
+      variant = _ref2.variant,
+      onPress = _ref2.onPress,
+      onChange = _ref2.onChange,
+      onFocus = _ref2.onFocus,
+      onBlur = _ref2.onBlur;
+
+  var _useState = useState(value),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentValue = _useState2[0],
+      setCurrentValue = _useState2[1];
+
+  var isForm = type && ['radio', 'checkbox'].includes(type);
+  var childrenArray = Children.toArray(children);
+  var sharedProps = {
+    type: type,
+    disabled: disabled,
+    variant: variant,
+    onPress: !isForm ? onPress : undefined,
+    onChange: isForm ? function handleChange(newValue) {
+      setCurrentValue(newValue);
+      if (onChange) onChange(newValue);
+    } : undefined,
+    onFocus: onFocus,
+    onBlur: onBlur
+  };
+  return /*#__PURE__*/jsx(ChoicesContainer, {
+    direction: direction,
+    testID: testID,
+    nativeID: id,
+    children: childrenArray.map(function (child, index) {
+      var element = /*#__PURE__*/cloneElement(child, _objectSpread({
+        selected: isForm ? child.props.value === currentValue : undefined
+      }, sharedProps));
+      return /*#__PURE__*/jsx(ChoiceItemContainer, {
+        $direction: direction,
+        $isLast: index === childrenArray.length - 1,
+        children: element
+      }, child.key);
+    })
+  });
+}
+
+Choices.Item = ChoiceItem;
+function createChoicesComponent() {
+  return Choices;
+}
+var ButtonChoices = createChoicesComponent();
+Choices.ButtonChoices = ButtonChoices;
+var ChoicesElements = {
+  Item: ChoiceItem,
+  ButtonChoices: ButtonChoices
+};
+
 function Emoji(_ref) {
   var emoji = _ref.emoji,
       size = _ref.size,
@@ -1221,6 +1543,39 @@ var card = {
   }
 };
 
+var choices = {
+  spacing: {
+    row: 12,
+    column: 12
+  },
+  item: {
+    borderRadius: 10,
+    padding: {
+      base: 16,
+      small: 24
+    },
+    backgroundColor: {
+      "default": lateOceanColorPalette.black50,
+      disabled: colors.disabled,
+      selected: colors.primary,
+      pressed: lateOceanColorPalette.lateOceanLight1,
+      hover: lateOceanColorPalette.black100,
+      hoverWhenSelected: lateOceanColorPalette.lateOceanLight1
+    },
+    disabled: {
+      border: {
+        width: 2,
+        color: lateOceanColorPalette.black100
+      }
+    },
+    transition: {
+      property: 'all',
+      duration: 300,
+      timingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
+    }
+  }
+};
+
 var feedbackMessage = {
   danger: {
     backgroundColor: colors.danger
@@ -1638,6 +1993,7 @@ var theme = {
   breakpoints: breakpoints,
   button: button,
   card: card,
+  choices: choices,
   feedbackMessage: feedbackMessage,
   forms: forms,
   fullScreenModal: fullScreenModal,
@@ -1999,7 +2355,7 @@ function DatePickerAndroid(_ref) {
 }
 
 // Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
-var OverlayPressable = /*#__PURE__*/styled(Pressable$1).withConfig({
+var OverlayPressable = /*#__PURE__*/styled(Pressable$2).withConfig({
   displayName: "Overlay__OverlayPressable"
 })(function (_ref) {
   var theme = _ref.theme;
@@ -2800,7 +3156,7 @@ function InputIcon(_ref) {
 function InputPressable(_ref) {
   var props = _extends({}, _ref);
 
-  return /*#__PURE__*/jsx(Pressable$1, _objectSpread({}, props));
+  return /*#__PURE__*/jsx(Pressable$2, _objectSpread({}, props));
 }
 
 var _excluded$8 = ["isPasswordDefaultVisible", "right"];
@@ -3308,7 +3664,7 @@ function ListItem(_ref5) {
       onPress = _ref5.onPress,
       rest = _objectWithoutProperties(_ref5, _excluded$5);
 
-  var Wrapper = onPress ? Pressable$1 : Fragment$1;
+  var Wrapper = onPress ? Pressable$2 : Fragment$1;
   var wrapperProps = onPress ? _objectSpread({
     accessibilityRole: 'button',
     onPress: onPress
@@ -3560,8 +3916,13 @@ var createKittSpaces = function (spacing) {
   }
 
   return sizes;
-}; // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type -- let typescript infer types
+}; // reset native-base to be able to set size / space as a number
+// https://docs.nativebase.io/next/default-theme#h2-size
+
 
+var overridenNativeBaseSizeandSpaceScale = Object.fromEntries([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96, 0.5, 1.5, 2.5, 3.5].map(function (value) {
+  return [value, value];
+})); // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type -- let typescript infer types
 
 var createKittNativeBaseCustomTheme = function (theme) {
   var spaces = createKittSpaces(theme.spacing);
@@ -3574,10 +3935,8 @@ var createKittNativeBaseCustomTheme = function (theme) {
     radii: {
       'kitt.borderRadius': theme.card.borderRadius
     },
-    sizes: _objectSpread(_objectSpread({}, spaces), Object.fromEntries([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64, 78, 80, 96, 0.5, 1.5, 2.5, 3.5].map(function (value) {
-      return [value, value];
-    }))),
-    space: spaces,
+    sizes: _objectSpread(_objectSpread({}, spaces), overridenNativeBaseSizeandSpaceScale),
+    space: _objectSpread(_objectSpread({}, spaces), overridenNativeBaseSizeandSpaceScale),
     breakpoints: {
       // kitt breakpoints
       base: KittBreakpoints.BASE,
@@ -3698,7 +4057,7 @@ var HStack = HStack$1;
 
 var View = View$2;
 var ScrollView = ScrollView$2;
-var Pressable = Pressable$2;
+var Pressable = Pressable$1;
 
 var _excluded$4 = ["children"];
 var ViewWithPadding = /*#__PURE__*/styled(View$1).withConfig({
@@ -5029,7 +5388,7 @@ function Tooltip(_ref) {
   return /*#__PURE__*/jsxs(TooltipContainer, {
     children: [/*#__PURE__*/jsx(View$1, {
       ref: reference,
-      children: /*#__PURE__*/jsx(Pressable$1, {
+      children: /*#__PURE__*/jsx(Pressable$2, {
         accessibilityRole: "button",
         onPress: function handlePress() {
           pressed.value = !pressed.value;
@@ -5260,5 +5619,5 @@ function MatchWindowSize(_ref) {
   return children;
 }
 
-export { Avatar, Button, Card, Checkbox, DatePicker, Emoji, ExternalAppLink, ExternalLink, Flex, FullScreenModal, HStack, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MatchWindowSize, Message, Modal, ModalBehaviour, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, Radio, ScrollView, DeprecatedSection as Section, Skeleton, SpinningIcon, Stack, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, View, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
+export { Avatar, Button, Card, Checkbox, ChoicesElements, DatePicker, Emoji, ExternalAppLink, ExternalLink, Flex, FullScreenModal, HStack, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MatchWindowSize, Message, Modal, ModalBehaviour, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, Radio, ScrollView, DeprecatedSection as Section, Skeleton, SpinningIcon, Stack, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, View, createChoicesComponent, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
 //# sourceMappingURL=index-browser-all.es.js.map