@ornikar/kitt-universal 9.3.2 → 9.6.0

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

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+const nativeBase = require('native-base');
+const react = require('react');
+const react$1 = require('@linaria/react');
 const BabelPluginStyledComponentsReactNative = require('react-native');
-const kittIcons = require('@ornikar/kitt-icons');
 const styled = require('styled-components/native');
-const react = require('react');
 const jsxRuntime = require('react/jsx-runtime');
-const nativeBase = require('native-base');
-const react$1 = require('@linaria/react');
+const kittIcons = require('@ornikar/kitt-icons');
 const twemojiParser = require('twemoji-parser');
 const reactNativeSafeAreaContext = require('react-native-safe-area-context');
 const reactPortal = require('react-portal');
@@ -19,36 +19,224 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 const styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const defaultIconSize = 20;
-const IconContainer$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "Icon__IconContainer",
-  componentId: "kitt-universal__sc-usm0ol-0"
-})(["color:", ";width:", "px;height:", "px;align-self:", ";"], ({
-  $color
-}) => $color, ({
-  $size
-}) => $size, ({
-  $size
-}) => $size, ({
-  $align = 'auto'
-}) => $align);
-function Icon({
-  icon,
-  size = defaultIconSize,
-  align,
-  color
-}) {
-  const clonedIcon = /*#__PURE__*/react.cloneElement(icon, {
-    color
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(IconContainer$1, {
-    $align: align,
-    $size: size,
-    $color: color,
-    children: clonedIcon
+const Stack = nativeBase.Stack;
+const VStack = nativeBase.VStack;
+const HStack = nativeBase.HStack;
+
+function warn(message) {
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn(message);
+  }
+}
+function deprecatedMessage(symbol, deprecation, replaceBy) {
+  const replaceMessage = replaceBy === undefined ? '' : `, please use ${replaceBy} instead`;
+  warn(`[Deprecation] in ${symbol}: ${deprecation} is deprecated${replaceMessage}.`);
+}
+function deprecatedInComponent(component, deprecation, replaceBy) {
+  deprecatedMessage(`<${component} />`, deprecation, replaceBy);
+}
+
+// type $Without<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
+// type $DeepPartial<T> = { [P in keyof T]?: $DeepPartial<T[P]> };
+// export function withTheme<Props extends { theme: DefaultTheme }, C>(
+//   WrappedComponent: ComponentType<Props> & C,
+// ): ComponentType<SetOptional<Props, 'theme'>> & hoistNonReactStatics.NonReactStatics<typeof WrappedComponent> {
+//   return function ThemedComponent(props) {
+//     const theme = useTheme();
+//     return (<WrappedComponent theme={theme} {...(props as any)} />) as any;
+//   };
+// }
+function withTheme(WrappedComponent) {
+  // eslint-disable-next-line prefer-arrow-callback
+  return /*#__PURE__*/react.forwardRef(function (props, ref) {
+    const theme = /*#__PURE__*/styled.useTheme();
+    return /*#__PURE__*/jsxRuntime.jsx(WrappedComponent, {
+      ref: ref,
+      theme: theme,
+      ...props
+    });
   });
 }
 
+const hasVariant = (button, variant) => {
+  return variant in button;
+};
+
+function getVariantValuesIfExist(theme, type, variant) {
+  const button = theme.kitt.button[type];
+
+  if (hasVariant(button, variant)) {
+    return button[variant];
+  }
+
+  return theme.kitt.button[type].default;
+}
+
+function isSubtle(type) {
+  return type.startsWith('subtle');
+}
+
+const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react$1.styled("div")({
+  name: "AnimatedButtonPressableContainer",
+  class: "kitt-u_AnimatedButtonPressableContainer_a1vkj3mh",
+  vars: {
+    "a1vkj3mh-0": [({
+      $isStretch
+    }) => $isStretch ? 'inherit' : 'inline-flex'],
+    "a1vkj3mh-1": [({
+      $isStretch
+    }) => $isStretch ? 'stretch' : 'baseline'],
+    "a1vkj3mh-3": [({
+      theme
+    }) => theme.kitt.button.scale.medium.hover],
+    "a1vkj3mh-4": [({
+      theme,
+      $isDisabled
+    }) => `scale(${$isDisabled ? 1 : theme.kitt.button.scale.base.active})`],
+    "a1vkj3mh-5": [({
+      theme,
+      $type,
+      $variant,
+      $isDisabled
+    }) => {
+      if ($isDisabled) return theme.kitt.button.disabled.default.hoverBackgroundColor;
+      return getVariantValuesIfExist(theme, $type, $variant).hoverBackgroundColor;
+    }],
+    "a1vkj3mh-6": [({
+      theme
+    }) => {
+      const {
+        duration,
+        timingFunction
+      } = theme.kitt.button.transition;
+      return `color, background, border-color, ${duration} ${timingFunction}`;
+    }],
+    "a1vkj3mh-7": [({
+      theme
+    }) => theme.kitt.button.borderRadius, "px"],
+    "a1vkj3mh-8": [({
+      theme
+    }) => `opacity ${theme.kitt.button.transition.duration} ${theme.kitt.button.transition.timingFunction}`],
+    "a1vkj3mh-9": [({
+      $isDisabled
+    }) => $isDisabled ? 1 : 0],
+    "a1vkj3mh-10": [({
+      theme
+    }) => `-${theme.kitt.button.borderWidth.disabled}px`],
+    "a1vkj3mh-12": [({
+      theme
+    }) => `calc(100% - ${theme.kitt.button.borderWidth.disabled * 0.5}px)`],
+    "a1vkj3mh-14": [({
+      theme
+    }) => `${theme.kitt.button.borderWidth.disabled}px solid ${theme.kitt.button.disabled.default.borderColor}`],
+    "a1vkj3mh-15": [({
+      theme,
+      $type,
+      $variant
+    }) => `${theme.kitt.button.borderWidth.focus}px solid ${getVariantValuesIfExist(theme, $type, $variant).focusBorderColor}`],
+    "a1vkj3mh-16": [({
+      theme
+    }) => `-${theme.kitt.button.borderWidth.focus}px`],
+    "a1vkj3mh-18": [({
+      theme,
+      $type,
+      $isDisabled
+    }) => {
+      if ($isDisabled) return theme.kitt.typography.colors['black-light'];
+
+      if (isSubtle($type)) {
+        return theme.kitt.button[$type].default.color;
+      }
+
+      return 'inherit';
+    }],
+    "a1vkj3mh-19": [({
+      theme,
+      $type,
+      $isDisabled
+    }) => {
+      if ($isDisabled) return theme.kitt.typography.colors['black-light'];
+
+      if (isSubtle($type)) {
+        return theme.kitt.button[$type].default.hoverColor;
+      }
+
+      return 'inherit';
+    }],
+    "a1vkj3mh-20": [({
+      theme,
+      $type,
+      $isDisabled
+    }) => {
+      if ($isDisabled) return theme.kitt.typography.colors['black-light'];
+
+      if (isSubtle($type)) {
+        return theme.kitt.button[$type].default.activeColor;
+      }
+
+      return 'inherit';
+    }]
+  }
+}));
+const AnimatedButtonPressable = /*#__PURE__*/react.forwardRef(({
+  $type,
+  $variant,
+  $isStretch,
+  disabled,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(AnimatedButtonPressableContainer, {
+    ref: ref,
+    $type: $type,
+    $variant: $variant,
+    $isDisabled: !!disabled,
+    $isStretch: $isStretch,
+    children: /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Pressable, {
+      disabled: disabled,
+      ...props
+    })
+  });
+});
+
+const BaseStyledButtonPressable = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "BaseStyledButtonPressable",
+  componentId: "kitt-universal__sc-4k8lse-0"
+})(["position:relative;min-width:", "px;max-width:", ";width:", ";min-height:", "px;border-radius:", "px;flex-direction:row;align-items:center;justify-content:center;align-self:flex-start;background-color:", ";padding:", ";"], ({
+  theme
+}) => theme.kitt.button.minWidth, ({
+  theme,
+  $isStretch
+}) => $isStretch ? '100%' : `${theme.kitt.button.maxWidth}px`, ({
+  $isStretch
+}) => $isStretch ? '100%' : 'auto', ({
+  theme
+}) => theme.kitt.button.minHeight, ({
+  theme
+}) => theme.kitt.button.borderRadius, ({
+  theme,
+  $isDisabled,
+  $type,
+  $variant
+}) => {
+  if ($isDisabled) return theme.kitt.button.disabled.default.backgroundColor;
+  return getVariantValuesIfExist(theme, $type, $variant).backgroundColor;
+}, ({
+  theme,
+  $size,
+  $isDisabled
+}) => {
+  const {
+    large,
+    default: defaultPadding,
+    disabled: disabledPadding,
+    xLarge
+  } = theme.kitt.button.contentPadding;
+  if ($size === 'large') return large;
+  if ($size === 'xlarge') return xLarge;
+  if ($isDisabled) return disabledPadding;
+  return defaultPadding;
+});
+
 const KittBreakpoints = {
   /**
    * min-width: 0
@@ -111,8 +299,14 @@ const TypographyColorContext = /*#__PURE__*/react.createContext('black');
 function useTypographyColor() {
   return react.useContext(TypographyColorContext);
 }
+const TypographyDefaultColorContext = /*#__PURE__*/react.createContext(undefined);
+
+function useTypographyDefaultColor() {
+  return react.useContext(TypographyDefaultColorContext);
+}
 /** @deprecated use native-base instead for SSR compatibility */
 
+
 const getTypographyTypeConfigKey = theme => {
   const isMediumOrAbove = theme.responsive.matchWindowSize({
     minWidth: KittBreakpoints.MEDIUM
@@ -144,6 +338,11 @@ function createNativeBaseFontSize(type) {
   });
   return fontSizeForNativeBase;
 }
+
+function getNBThemeColorFromColorProps(colorName) {
+  return colorName ? `kitt.typography.${colorName}` : undefined;
+}
+
 function Typography({
   accessibilityRole,
   base: legacyBase,
@@ -163,6 +362,7 @@ function Typography({
   ...otherProps
 }) {
   const isHeaderTypographyInContext = react.useContext(IsHeaderTypographyContext);
+  const defaultColor = useTypographyDefaultColor();
   const hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
   const baseOrDefaultToBody = hasTypographyAncestor ? type.base : type.base ?? 'body';
   const isHeader = isTypographyHeader(baseOrDefaultToBody, isHeaderTypographyInContext);
@@ -179,14 +379,16 @@ function Typography({
     });
   }
 
+  const currentColor = !color && !hasTypographyAncestor ? defaultColor : color;
+
   const text = /*#__PURE__*/jsxRuntime.jsx(nativeBase.Text, {
     accessibilityRole: accessibilityRole || undefined,
     fontSize: fontSizeForNativeBase,
     lineHeight: hasTypographyAncestor ? undefined : fontSizeForNativeBase,
     fontWeight: isHeader ? `headers.${nonNullableVariant}` : `bodies.${nonNullableVariant}`,
     fontFamily: isHeader ? `headers.${nonNullableVariant}` : `bodies.${nonNullableVariant}`,
-    color: color ? `kitt.typography.${color}` : undefined,
-    textDecorationColor: color ? `kitt.typography.${color}` : undefined,
+    color: getNBThemeColorFromColorProps(currentColor),
+    textDecorationColor: getNBThemeColorFromColorProps(currentColor),
     ...otherProps
   });
 
@@ -230,6 +432,7 @@ const createHeading = (level, defaultBase) => {
   return TypographyHeading;
 };
 
+Typography.SetDefaultColor = TypographyDefaultColorContext.Provider;
 Typography.Text = TypographyText;
 Typography.Paragraph = TypographyParagraph;
 Typography.Header1 = createHeading(1);
@@ -250,304 +453,39 @@ Typography.h3 = createHeading(3, 'header3');
 /** @deprecated use Typography.Header4 */
 
 Typography.h4 = createHeading(4, 'header4');
-/** @deprecated use Typography.Header6 */
-
-Typography.h5 = createHeading(5, 'header5');
-
-const getInitials = (firstname, lastname) => `${firstname[0]}${lastname[0]}`.toUpperCase();
-
-const StyledAvatarView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "Avatar__StyledAvatarView",
-  componentId: "kitt-universal__sc-9miubv-0"
-})(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], ({
-  theme,
-  $isRound,
-  $size,
-  $sizeVariant
-}) => {
-  if ($isRound) return `${$size / 2}px`;
-  return `${$sizeVariant === 'large' ? theme.kitt.avatar.large.borderRadius : theme.kitt.avatar.borderRadius}px`;
-}, ({
-  theme,
-  $isLight
-}) => $isLight ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar.default.backgroundColor, ({
-  $size
-}) => $size, ({
-  $size
-}) => $size);
-
-function AvatarContent({
-  size,
-  src,
-  firstname,
-  lastname,
-  alt,
-  isLight,
-  sizeVariant
-}) {
-  if (src) {
-    return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Image, {
-      source: {
-        uri: src
-      },
-      style: {
-        width: size,
-        height: size
-      },
-      accessibilityLabel: alt
-    });
-  }
-
-  if (firstname && lastname) {
-    return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-      base: sizeVariant === 'large' ? 'body-large' : 'body-small',
-      variant: sizeVariant === 'large' ? 'bold' : 'regular',
-      color: isLight ? 'black' : 'white',
-      children: getInitials(firstname, lastname)
-    });
-  }
-
-  return /*#__PURE__*/jsxRuntime.jsx(Icon, {
-    icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.UserIcon, {}),
-    color: isLight ? 'black' : 'white',
-    size: size / 2
-  });
-}
-
-function Avatar({
-  size = 40,
-  round,
-  light,
-  sizeVariant,
-  ...props
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(StyledAvatarView, {
-    $size: size,
-    $isRound: round,
-    $isLight: light,
-    $sizeVariant: sizeVariant,
-    children: /*#__PURE__*/jsxRuntime.jsx(AvatarContent, {
-      size: size,
-      isLight: light,
-      sizeVariant: sizeVariant,
-      ...props
-    })
-  });
-}
-
-function warn(message) {
-  if (process.env.NODE_ENV !== 'production') {
-    console.warn(message);
-  }
-}
-function deprecatedMessage(symbol, deprecation, replaceBy) {
-  const replaceMessage = replaceBy === undefined ? '' : `, please use ${replaceBy} instead`;
-  warn(`[Deprecation] in ${symbol}: ${deprecation} is deprecated${replaceMessage}.`);
-}
-function deprecatedInComponent(component, deprecation, replaceBy) {
-  deprecatedMessage(`<${component} />`, deprecation, replaceBy);
-}
-
-// type $Without<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
-// type $DeepPartial<T> = { [P in keyof T]?: $DeepPartial<T[P]> };
-// export function withTheme<Props extends { theme: DefaultTheme }, C>(
-//   WrappedComponent: ComponentType<Props> & C,
-// ): ComponentType<SetOptional<Props, 'theme'>> & hoistNonReactStatics.NonReactStatics<typeof WrappedComponent> {
-//   return function ThemedComponent(props) {
-//     const theme = useTheme();
-//     return (<WrappedComponent theme={theme} {...(props as any)} />) as any;
-//   };
-// }
-function withTheme(WrappedComponent) {
-  // eslint-disable-next-line prefer-arrow-callback
-  return /*#__PURE__*/react.forwardRef(function (props, ref) {
-    const theme = /*#__PURE__*/styled.useTheme();
-    return /*#__PURE__*/jsxRuntime.jsx(WrappedComponent, {
-      ref: ref,
-      theme: theme,
-      ...props
-    });
-  });
-}
-
-const hasVariant = (button, variant) => {
-  return variant in button;
-};
-
-function getVariantValuesIfExist(theme, type, variant) {
-  const button = theme.kitt.button[type];
-
-  if (hasVariant(button, variant)) {
-    return button[variant];
-  }
-
-  return theme.kitt.button[type].default;
-}
-
-function isSubtle(type) {
-  return type.startsWith('subtle');
-}
-
-const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react$1.styled("div")({
-  name: "AnimatedButtonPressableContainer",
-  class: "kitt-u_AnimatedButtonPressableContainer_a1vkj3mh",
-  vars: {
-    "a1vkj3mh-0": [({
-      $isStretch
-    }) => $isStretch ? 'inherit' : 'inline-flex'],
-    "a1vkj3mh-1": [({
-      $isStretch
-    }) => $isStretch ? 'stretch' : 'baseline'],
-    "a1vkj3mh-3": [({
-      theme
-    }) => theme.kitt.button.scale.medium.hover],
-    "a1vkj3mh-4": [({
-      theme,
-      $isDisabled
-    }) => `scale(${$isDisabled ? 1 : theme.kitt.button.scale.base.active})`],
-    "a1vkj3mh-5": [({
-      theme,
-      $type,
-      $variant,
-      $isDisabled
-    }) => {
-      if ($isDisabled) return theme.kitt.button.disabled.default.hoverBackgroundColor;
-      return getVariantValuesIfExist(theme, $type, $variant).hoverBackgroundColor;
-    }],
-    "a1vkj3mh-6": [({
-      theme
-    }) => {
-      const {
-        duration,
-        timingFunction
-      } = theme.kitt.button.transition;
-      return `color, background, border-color, ${duration} ${timingFunction}`;
-    }],
-    "a1vkj3mh-7": [({
-      theme
-    }) => theme.kitt.button.borderRadius, "px"],
-    "a1vkj3mh-8": [({
-      theme
-    }) => `opacity ${theme.kitt.button.transition.duration} ${theme.kitt.button.transition.timingFunction}`],
-    "a1vkj3mh-9": [({
-      $isDisabled
-    }) => $isDisabled ? 1 : 0],
-    "a1vkj3mh-10": [({
-      theme
-    }) => `-${theme.kitt.button.borderWidth.disabled}px`],
-    "a1vkj3mh-12": [({
-      theme
-    }) => `calc(100% - ${theme.kitt.button.borderWidth.disabled * 0.5}px)`],
-    "a1vkj3mh-14": [({
-      theme
-    }) => `${theme.kitt.button.borderWidth.disabled}px solid ${theme.kitt.button.disabled.default.borderColor}`],
-    "a1vkj3mh-15": [({
-      theme,
-      $type,
-      $variant
-    }) => `${theme.kitt.button.borderWidth.focus}px solid ${getVariantValuesIfExist(theme, $type, $variant).focusBorderColor}`],
-    "a1vkj3mh-16": [({
-      theme
-    }) => `-${theme.kitt.button.borderWidth.focus}px`],
-    "a1vkj3mh-18": [({
-      theme,
-      $type,
-      $isDisabled
-    }) => {
-      if ($isDisabled) return theme.kitt.typography.colors['black-light'];
-
-      if (isSubtle($type)) {
-        return theme.kitt.button[$type].default.color;
-      }
-
-      return 'inherit';
-    }],
-    "a1vkj3mh-19": [({
-      theme,
-      $type,
-      $isDisabled
-    }) => {
-      if ($isDisabled) return theme.kitt.typography.colors['black-light'];
-
-      if (isSubtle($type)) {
-        return theme.kitt.button[$type].default.hoverColor;
-      }
-
-      return 'inherit';
-    }],
-    "a1vkj3mh-20": [({
-      theme,
-      $type,
-      $isDisabled
-    }) => {
-      if ($isDisabled) return theme.kitt.typography.colors['black-light'];
+/** @deprecated use Typography.Header6 */
 
-      if (isSubtle($type)) {
-        return theme.kitt.button[$type].default.activeColor;
-      }
+Typography.h5 = createHeading(5, 'header5');
 
-      return 'inherit';
-    }]
-  }
-}));
-const AnimatedButtonPressable = /*#__PURE__*/react.forwardRef(({
-  $type,
-  $variant,
-  $isStretch,
-  disabled,
-  ...props
-}, ref) => {
-  return /*#__PURE__*/jsxRuntime.jsx(AnimatedButtonPressableContainer, {
-    ref: ref,
-    $type: $type,
-    $variant: $variant,
-    $isDisabled: !!disabled,
-    $isStretch: $isStretch,
-    children: /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Pressable, {
-      disabled: disabled,
-      ...props
-    })
+const defaultIconSize = 20;
+const IconContainer$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Icon__IconContainer",
+  componentId: "kitt-universal__sc-usm0ol-0"
+})(["color:", ";width:", "px;height:", "px;align-self:", ";"], ({
+  $color
+}) => $color, ({
+  $size
+}) => $size, ({
+  $size
+}) => $size, ({
+  $align = 'auto'
+}) => $align);
+function Icon({
+  icon,
+  size = defaultIconSize,
+  align,
+  color
+}) {
+  const clonedIcon = /*#__PURE__*/react.cloneElement(icon, {
+    color
   });
-});
-
-const BaseStyledButtonPressable = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "BaseStyledButtonPressable",
-  componentId: "kitt-universal__sc-4k8lse-0"
-})(["position:relative;min-width:", "px;max-width:", ";width:", ";min-height:", "px;border-radius:", "px;flex-direction:row;align-items:center;justify-content:center;align-self:flex-start;background-color:", ";padding:", ";"], ({
-  theme
-}) => theme.kitt.button.minWidth, ({
-  theme,
-  $isStretch
-}) => $isStretch ? '100%' : `${theme.kitt.button.maxWidth}px`, ({
-  $isStretch
-}) => $isStretch ? '100%' : 'auto', ({
-  theme
-}) => theme.kitt.button.minHeight, ({
-  theme
-}) => theme.kitt.button.borderRadius, ({
-  theme,
-  $isDisabled,
-  $type,
-  $variant
-}) => {
-  if ($isDisabled) return theme.kitt.button.disabled.default.backgroundColor;
-  return getVariantValuesIfExist(theme, $type, $variant).backgroundColor;
-}, ({
-  theme,
-  $size,
-  $isDisabled
-}) => {
-  const {
-    large,
-    default: defaultPadding,
-    disabled: disabledPadding,
-    xLarge
-  } = theme.kitt.button.contentPadding;
-  if ($size === 'large') return large;
-  if ($size === 'xlarge') return xLarge;
-  if ($isDisabled) return disabledPadding;
-  return defaultPadding;
-});
+  return /*#__PURE__*/jsxRuntime.jsx(IconContainer$1, {
+    $align: align,
+    $size: size,
+    $color: color,
+    children: clonedIcon
+  });
+}
 
 function TypographyIconSpecifiedColor({
   color,
@@ -689,7 +627,7 @@ function ButtonContentChildren({
   };
   return /*#__PURE__*/jsxRuntime.jsxs(StyledChildrenWithIcon, {
     children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsxRuntime.jsx(ButtonIcon, { ...buttonIconSharedProps,
-      testID: "button-left-icon",
+      testID: "button.ButtonContent.leftButtonIcon",
       icon: icon
     }) : null, /*#__PURE__*/jsxRuntime.jsx(StyledButtonText, {
       base: "body",
@@ -779,45 +717,257 @@ const Button = /*#__PURE__*/react.forwardRef(({
     throw new Error('variant=ghost is only allowed with type=primary or default');
   }
 
-  if (large || xLarge) {
-    const deprecatedProp = large ? 'large' : 'xLarge';
-    deprecatedInComponent('Button', `${deprecatedProp} prop`, 'size');
+  if (large || xLarge) {
+    const deprecatedProp = large ? 'large' : 'xLarge';
+    deprecatedInComponent('Button', `${deprecatedProp} prop`, 'size');
+  }
+
+  const size = getButtonSize({
+    large,
+    xLarge,
+    size: sizeProp
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(AnimatedButtonPressable, {
+    ref: ref,
+    accessibilityRole: accessibilityRole,
+    testID: testID,
+    href: href,
+    hrefAttrs: hrefAttrs,
+    disabled: disabled,
+    $isStretch: stretch,
+    $type: type,
+    $variant: variant,
+    onPress: onPress,
+    children: /*#__PURE__*/jsxRuntime.jsxs(BaseStyledButtonPressable, {
+      $type: type,
+      $variant: variant,
+      $isStretch: stretch,
+      $size: size,
+      $isDisabled: disabled,
+      children: [/*#__PURE__*/jsxRuntime.jsx(ButtonContent, {
+        type: type,
+        variant: variant,
+        $isStretch: stretch,
+        isDisabled: disabled,
+        icon: icon,
+        iconPosition: iconPosition,
+        children: children
+      }), null]
+    })
+  });
+});
+
+const StyledSpinningIconContainer = withTheme( /*#__PURE__*/react$1.styled("div")({
+  name: "StyledSpinningIconContainer",
+  class: "kitt-u_StyledSpinningIconContainer_ssn8o83"
+}));
+function SpinningIcon({
+  icon,
+  color
+}) {
+  const clonedIcon = /*#__PURE__*/react.cloneElement(icon, {
+    color
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(StyledSpinningIconContainer, {
+    children: clonedIcon
+  });
+}
+
+function LoaderIcon({
+  color
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(SpinningIcon, {
+    color: color,
+    icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.ArcIcon, {})
+  });
+}
+
+const View = nativeBase.View;
+const ScrollView = nativeBase.ScrollView;
+const Pressable = nativeBase.Pressable;
+
+function matchWindowSize({
+  width,
+  height
+}, {
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight
+}) {
+  const hasWidthMatched = width ? (!minWidth || width >= minWidth) && (!maxWidth || width <= maxWidth) : true;
+  const hasHeightMatched = height ? (!minHeight || height >= minHeight) && (!maxHeight || height <= maxHeight) : true;
+  return hasWidthMatched && hasHeightMatched;
+}
+function useMatchWindowSize(options) {
+  const {
+    width,
+    height
+  } = BabelPluginStyledComponentsReactNative.useWindowDimensions();
+  return matchWindowSize({
+    width,
+    height
+  }, options);
+}
+
+function ActionsItem({
+  as,
+  onPress,
+  disabled,
+  icon,
+  ...props
+}) {
+  const isMedium = useMatchWindowSize({
+    minWidth: KittBreakpoints.MEDIUM
+  });
+  const [isLoading, setIsLoading] = react.useState(false);
+  const mountedRef = react.useRef(false); // effect just for tracking mounted state, as onPress can unmount the ActionButton
+
+  react.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    children: /*#__PURE__*/jsxRuntime.jsx(as, { ...props,
+      stretch: !isMedium ? true : undefined,
+      disabled: isLoading ? true : disabled,
+      icon: isLoading ? /*#__PURE__*/jsxRuntime.jsx(LoaderIcon, {}) : icon,
+      onPress: e => {
+        (async () => {
+          if (!onPress) return;
+          setIsLoading(true);
+
+          try {
+            await onPress(e);
+
+            if (mountedRef.current) {
+              setIsLoading(false);
+            }
+          } catch (err) {
+            if (mountedRef.current) {
+              setIsLoading(false);
+            }
+
+            throw err;
+          }
+        })();
+      }
+    })
+  });
+}
+
+function ActionsButton({ ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(ActionsItem, {
+    as: Button,
+    ...props
+  });
+}
+
+function Actions({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Stack, {
+    alignItems: {
+      base: 'stretch',
+      medium: 'center'
+    },
+    direction: {
+      base: 'column',
+      medium: 'row'
+    },
+    flex: 1,
+    ...props,
+    space: "kitt.3",
+    children: children
+  });
+}
+Actions.Button = ActionsButton;
+Actions.Item = ActionsItem;
+
+const getInitials = (firstname, lastname) => `${firstname[0]}${lastname[0]}`.toUpperCase();
+
+const StyledAvatarView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Avatar__StyledAvatarView",
+  componentId: "kitt-universal__sc-9miubv-0"
+})(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], ({
+  theme,
+  $isRound,
+  $size,
+  $sizeVariant
+}) => {
+  if ($isRound) return `${$size / 2}px`;
+  return `${$sizeVariant === 'large' ? theme.kitt.avatar.large.borderRadius : theme.kitt.avatar.borderRadius}px`;
+}, ({
+  theme,
+  $isLight
+}) => $isLight ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar.default.backgroundColor, ({
+  $size
+}) => $size, ({
+  $size
+}) => $size);
+
+function AvatarContent({
+  size,
+  src,
+  firstname,
+  lastname,
+  alt,
+  isLight,
+  sizeVariant
+}) {
+  if (src) {
+    return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Image, {
+      source: {
+        uri: src
+      },
+      style: {
+        width: size,
+        height: size
+      },
+      accessibilityLabel: alt
+    });
+  }
+
+  if (firstname && lastname) {
+    return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+      base: sizeVariant === 'large' ? 'body-large' : 'body-small',
+      variant: sizeVariant === 'large' ? 'bold' : 'regular',
+      color: isLight ? 'black' : 'white',
+      children: getInitials(firstname, lastname)
+    });
   }
 
-  const size = getButtonSize({
-    large,
-    xLarge,
-    size: sizeProp
+  return /*#__PURE__*/jsxRuntime.jsx(Icon, {
+    icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.UserIcon, {}),
+    color: isLight ? 'black' : 'white',
+    size: size / 2
   });
-  return /*#__PURE__*/jsxRuntime.jsx(AnimatedButtonPressable, {
-    ref: ref,
-    accessibilityRole: accessibilityRole,
-    testID: testID,
-    href: href,
-    hrefAttrs: hrefAttrs,
-    disabled: disabled,
-    $isStretch: stretch,
-    $type: type,
-    $variant: variant,
-    onPress: onPress,
-    children: /*#__PURE__*/jsxRuntime.jsxs(BaseStyledButtonPressable, {
-      $type: type,
-      $variant: variant,
-      $isStretch: stretch,
-      $size: size,
-      $isDisabled: disabled,
-      children: [/*#__PURE__*/jsxRuntime.jsx(ButtonContent, {
-        type: type,
-        variant: variant,
-        $isStretch: stretch,
-        isDisabled: disabled,
-        icon: icon,
-        iconPosition: iconPosition,
-        children: children
-      }), null]
+}
+
+function Avatar({
+  size = 40,
+  round,
+  light,
+  sizeVariant,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledAvatarView, {
+    $size: size,
+    $isRound: round,
+    $isLight: light,
+    $sizeVariant: sizeVariant,
+    children: /*#__PURE__*/jsxRuntime.jsx(AvatarContent, {
+      size: size,
+      isLight: light,
+      sizeVariant: sizeVariant,
+      ...props
     })
   });
-});
+}
 
 const Container$3 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "Card__Container",
@@ -845,6 +995,261 @@ function Card({
   });
 }
 
+const useNativeAnimation = () => {
+  return {
+    onPressIn: () => {},
+    onPressOut: () => {},
+    backgroundStyles: undefined
+  };
+};
+
+function getCurrentTextColor({
+  isDisabled,
+  isSelected,
+  isPressed,
+  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;
+}
+
+const DisabledBorder = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "ChoiceItem__DisabledBorder",
+  componentId: "kitt-universal__sc-wuv3y6-0"
+})(["border-radius:", "px;", ";"], ({
+  theme,
+  $variant
+}) => getBorderRadius(theme.kitt.choices.item.borderRadius, $variant), ({
+  theme
+}) => {
+  const {
+    width,
+    color
+  } = theme.kitt.choices.item.disabled.border;
+  return styled.css(["border:", "px solid ", ";"], width, color);
+});
+const ChoiceItemView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "ChoiceItem__ChoiceItemView",
+  componentId: "kitt-universal__sc-wuv3y6-1"
+})(["position:relative;border-radius:", "px;background-color:", ";", ";", ""], ({
+  theme,
+  $variant
+}) => getBorderRadius(theme.kitt.choices.item.borderRadius, $variant), ({
+  theme,
+  $isHovered,
+  $isPressed,
+  $isDisabled,
+  $isSelected
+}) => {
+  const {
+    hoverWhenSelected,
+    hover,
+    disabled,
+    selected,
+    pressed,
+    default: defaultBackground
+  } = theme.kitt.choices.item.backgroundColor;
+  if ($isDisabled) return disabled;
+  if ($isSelected && $isHovered) return hoverWhenSelected;
+  if ($isPressed) return pressed;
+  if ($isHovered) return hover;
+  if ($isSelected) return selected;
+  return defaultBackground;
+}, ({
+  theme
+}) => {
+  const {
+    base,
+    small
+  } = theme.kitt.choices.item.padding;
+  return theme.responsive.ifWindowSizeMatches({
+    minWidth: KittBreakpoints.SMALL
+  }, styled.css(["padding:", "px;"], small), styled.css(["padding:", "px;"], base));
+}, ({
+  theme
+}) => {
+  const {
+    property,
+    duration,
+    timingFunction
+  } = theme.kitt.choices.item.transition;
+  return styled.css(["transition:", " ", "ms ", ";"], property, duration, timingFunction);
+});
+function ChoiceItem({
+  type = 'button',
+  value,
+  selected,
+  disabled,
+  variant,
+  children,
+  isPressedInternal,
+  isHoveredInternal,
+  onPress,
+  onChange,
+  onBlur,
+  onFocus
+}) {
+  const {
+    onPressIn,
+    onPressOut,
+    backgroundStyles
+  } = useNativeAnimation();
+
+  const handleChange = () => {
+    if (!onChange) return; // Checkbox can be toggled
+
+    if (type === 'checkbox') {
+      onChange(selected ? undefined : value);
+      return;
+    }
+
+    onChange(value);
+  };
+
+  return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
+    disabled: disabled,
+    accessibilityRole: type,
+    accessibilityState: {
+      checked: selected
+    },
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onPress: e => {
+      if (onFocus) onFocus(e);
+      if (onPress) onPress();
+      handleChange();
+      if (onBlur) onBlur(e);
+    },
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
+    children: ({
+      isHovered,
+      isPressed
+    }) => /*#__PURE__*/jsxRuntime.jsxs(ChoiceItemView, {
+      style: undefined,
+      $isHovered: isHovered || isHoveredInternal,
+      $isDisabled: disabled,
+      $isSelected: selected,
+      $isPressed: isPressed || isPressedInternal,
+      $variant: variant,
+      children: [/*#__PURE__*/jsxRuntime.jsx(Typography.SetDefaultColor, {
+        value: getCurrentTextColor({
+          isDisabled: disabled,
+          isSelected: selected || isPressedInternal,
+          isPressed,
+          isHovered: isHovered || isHoveredInternal
+        }),
+        children: children
+      }), disabled ? /*#__PURE__*/jsxRuntime.jsx(DisabledBorder, {
+        $variant: variant,
+        style: BabelPluginStyledComponentsReactNative.StyleSheet.absoluteFillObject
+      }) : null]
+    })
+  });
+}
+
+const ChoiceItemContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "ChoiceItemContainer",
+  componentId: "kitt-universal__sc-17uuimx-0"
+})(["", ""], ({
+  theme,
+  $isLast,
+  $direction
+}) => {
+  const {
+    row,
+    column
+  } = theme.kitt.choices.spacing;
+
+  if ($direction === 'row') {
+    return styled.css(["margin-right:", "px;"], $isLast ? 0 : row);
+  }
+
+  return styled.css(["margin-bottom:", "px;"], $isLast ? 0 : column);
+});
+
+function ChoicesContainer({
+  direction,
+  ...props
+}) {
+  if (direction === 'row') {
+    return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.ScrollView, {
+      horizontal: true,
+      ...props
+    });
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.View, { ...props
+  });
+}
+
+function Choices({
+  id,
+  testID,
+  type,
+  direction = 'column',
+  disabled,
+  children,
+  value,
+  variant,
+  onPress,
+  onChange,
+  onFocus,
+  onBlur
+}) {
+  const [currentValue, setCurrentValue] = react.useState(value);
+  const isForm = type && ['radio', 'checkbox'].includes(type);
+  const childrenArray = react.Children.toArray(children);
+  const sharedProps = {
+    type,
+    disabled,
+    variant,
+    onPress: !isForm ? onPress : undefined,
+    onChange: isForm ? newValue => {
+      setCurrentValue(newValue);
+      if (onChange) onChange(newValue);
+    } : undefined,
+    onFocus,
+    onBlur
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(ChoicesContainer, {
+    direction: direction,
+    testID: testID,
+    nativeID: id,
+    children: childrenArray.map((child, index) => {
+      const element = /*#__PURE__*/react.cloneElement(child, {
+        selected: isForm ? child.props.value === currentValue : undefined,
+        ...sharedProps
+      });
+      return /*#__PURE__*/jsxRuntime.jsx(ChoiceItemContainer, {
+        $direction: direction,
+        $isLast: index === childrenArray.length - 1,
+        children: element
+      }, child.key);
+    })
+  });
+}
+
+Choices.Item = ChoiceItem;
+function createChoicesComponent() {
+  return Choices;
+}
+const ButtonChoices = createChoicesComponent();
+Choices.ButtonChoices = ButtonChoices;
+const ChoicesElements = {
+  Item: ChoiceItem,
+  ButtonChoices
+};
+
 function Emoji({
   emoji,
   size,
@@ -1148,6 +1553,39 @@ const card = {
   }
 };
 
+const 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)'
+    }
+  }
+};
+
 const feedbackMessage = {
   danger: {
     backgroundColor: colors.danger
@@ -1319,8 +1757,14 @@ const input = {
 };
 
 const inputField = {
+  containerPaddingTop: 5,
+  containerPaddingBottom: 10,
+  feedbackPaddingTop: {
+    base: 5,
+    small: 10
+  },
   labelContainerPaddingBottom: 5,
-  iconMarginLeft: 6
+  labelFeedbackMarginLeft: 6
 };
 
 const inputTag = {
@@ -1561,6 +2005,7 @@ const theme = {
   breakpoints,
   button,
   card,
+  choices,
   feedbackMessage,
   forms,
   fullScreenModal,
@@ -1576,30 +2021,6 @@ const theme = {
   navigationModal
 };
 
-function matchWindowSize({
-  width,
-  height
-}, {
-  minWidth,
-  maxWidth,
-  minHeight,
-  maxHeight
-}) {
-  const hasWidthMatched = width ? (!minWidth || width >= minWidth) && (!maxWidth || width <= maxWidth) : true;
-  const hasHeightMatched = height ? (!minHeight || height >= minHeight) && (!maxHeight || height <= maxHeight) : true;
-  return hasWidthMatched && hasHeightMatched;
-}
-function useMatchWindowSize(options) {
-  const {
-    width,
-    height
-  } = BabelPluginStyledComponentsReactNative.useWindowDimensions();
-  return matchWindowSize({
-    width,
-    height
-  }, options);
-}
-
 // eslint-disable-next-line no-restricted-imports
 function createWindowSizeHelper(dimensions) {
   return {
@@ -2016,42 +2437,26 @@ function InputFeedback({
   });
 }
 
-const FieldContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "InputField__FieldContainer",
-  componentId: "kitt-universal__sc-13fkixs-0"
-})(["padding:5px 0 10px;"]);
-const FeedbackContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "InputField__FeedbackContainer",
-  componentId: "kitt-universal__sc-13fkixs-1"
-})(["", ";"], ({
-  theme
-}) => theme.responsive.ifWindowSizeMatches({
-  minWidth: KittBreakpoints.SMALL
-}, 'padding-top: 10px', 'padding-top: 5px'));
-const FieldLabelContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "InputField__FieldLabelContainer",
-  componentId: "kitt-universal__sc-13fkixs-2"
-})(["flex-direction:row;align-items:center;padding-bottom:", "px;"], ({
-  theme
-}) => theme.kitt.forms.inputField.labelContainerPaddingBottom);
-const LabelContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "InputField__LabelContainer",
-  componentId: "kitt-universal__sc-13fkixs-3"
-})(["margin-right:", "px;"], ({
-  theme
-}) => theme.kitt.forms.inputField.iconMarginLeft);
 function InputField({
   label,
   labelFeedback,
   input,
   feedback
 }) {
-  return /*#__PURE__*/jsxRuntime.jsxs(FieldContainer, {
-    children: [label ? /*#__PURE__*/jsxRuntime.jsxs(FieldLabelContainer, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(LabelContainer, {
+  const theme = /*#__PURE__*/styled.useTheme();
+  return /*#__PURE__*/jsxRuntime.jsxs(View, {
+    paddingTop: theme.kitt.forms.inputField.containerPaddingTop,
+    paddingBottom: theme.kitt.forms.inputField.containerPaddingBottom,
+    children: [label ? /*#__PURE__*/jsxRuntime.jsxs(View, {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingBottom: theme.kitt.forms.inputField.labelContainerPaddingBottom,
+      children: [/*#__PURE__*/jsxRuntime.jsx(View, {
+        marginRight: theme.kitt.forms.inputField.labelFeedbackMarginLeft,
         children: label
       }), labelFeedback]
-    }) : null, input, feedback ? /*#__PURE__*/jsxRuntime.jsx(FeedbackContainer, {
+    }) : null, input, feedback ? /*#__PURE__*/jsxRuntime.jsx(View, {
+      paddingTop: theme.kitt.forms.inputField.feedbackPaddingTop,
       children: feedback
     }) : null]
   });
@@ -2430,22 +2835,6 @@ function FullScreenModal({
 FullScreenModal.Header = FullScreenModalHeader;
 FullScreenModal.Body = FullScreenModalBody;
 
-const StyledSpinningIconContainer = withTheme( /*#__PURE__*/react$1.styled("div")({
-  name: "StyledSpinningIconContainer",
-  class: "kitt-u_StyledSpinningIconContainer_ssn8o83"
-}));
-function SpinningIcon({
-  icon,
-  color
-}) {
-  const clonedIcon = /*#__PURE__*/react.cloneElement(icon, {
-    color
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(StyledSpinningIconContainer, {
-    children: clonedIcon
-  });
-}
-
 function StyleWebWrapper({
   as,
   children,
@@ -2724,15 +3113,6 @@ ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
-function LoaderIcon({
-  color
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(SpinningIcon, {
-    color: color,
-    icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.ArcIcon, {})
-  });
-}
-
 function IconContent({
   type,
   color
@@ -3260,14 +3640,6 @@ function KittNativeBaseProvider({
   });
 }
 
-const Stack = nativeBase.Stack;
-const VStack = nativeBase.VStack;
-const HStack = nativeBase.HStack;
-
-const View = nativeBase.View;
-const ScrollView = nativeBase.ScrollView;
-const Pressable = nativeBase.Pressable;
-
 const ViewWithPadding = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "ContentPadding__ViewWithPadding",
   componentId: "kitt-universal__sc-1rprqcv-0"
@@ -4461,10 +4833,12 @@ function MatchWindowSize({
 }
 
 exports.useWindowSize = BabelPluginStyledComponentsReactNative.useWindowDimensions;
+exports.Actions = Actions;
 exports.Avatar = Avatar;
 exports.Button = Button;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
+exports.ChoicesElements = ChoicesElements;
 exports.DatePicker = DatePicker;
 exports.Emoji = Emoji;
 exports.ExternalAppLink = ExternalAppLink;
@@ -4525,6 +4899,7 @@ exports.TypographyIcon = TypographyIcon;
 exports.TypographyLink = TypographyLink;
 exports.VStack = VStack;
 exports.View = View;
+exports.createChoicesComponent = createChoicesComponent;
 exports.createWindowSizeHelper = createWindowSizeHelper;
 exports.hex2rgba = hex2rgba;
 exports.matchWindowSize = matchWindowSize;