@ornikar/kitt-universal 9.3.2 → 9.4.0

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

@@ -1,15 +1,16 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { View as View$1, Image, Pressable as Pressable$1, Linking, useWindowDimensions, TextInput, StyleSheet, ScrollView as ScrollView$1, Modal as Modal$1, Text as Text$2 } from 'react-native';
+import { View as View$1, Image, Pressable as Pressable$1, StyleSheet, ScrollView as ScrollView$1, Linking, useWindowDimensions, TextInput, Modal as Modal$1, Text as Text$2 } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import { UserIcon, CheckboxMark, EyeOffIcon, EyeIcon, ArcIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
 import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
-import { cloneElement, useContext, createContext, forwardRef, useMemo, useState, Fragment, useEffect, Children } from 'react';
+import { cloneElement, useContext, createContext, forwardRef, useState, Children, useMemo, Fragment, useEffect } from 'react';
 import { jsx, jsxs, Fragment as Fragment$1 } 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 { Text as Text$1, Pressable as Pressable$2, 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 { styled as styled$1 } from '@linaria/react';
+import Animated, { useSharedValue, useDerivedValue, withTiming, useAnimatedStyle, interpolateColor } from 'react-native-reanimated';
 import { parse } from 'twemoji-parser';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
@@ -112,14 +113,20 @@ var KittBreakpointNameEnum;
   KittBreakpointNameEnum["WIDE"] = "wide";
 })(KittBreakpointNameEnum || (KittBreakpointNameEnum = {}));
 
-var _excluded$j = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+var _excluded$k = ["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
@@ -154,6 +161,11 @@ function createNativeBaseFontSize(type) {
   });
   return fontSizeForNativeBase;
 }
+
+function getNBThemeColorFromColorProps(colorName) {
+  return colorName ? "kitt.typography.".concat(colorName) : undefined;
+}
+
 function Typography(_ref) {
   var _type$base;
 
@@ -173,9 +185,10 @@ function Typography(_ref) {
   } : _ref$type,
       variant = _ref.variant,
       color = _ref.color,
-      otherProps = _objectWithoutProperties(_ref, _excluded$j);
+      otherProps = _objectWithoutProperties(_ref, _excluded$k);
 
   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);
@@ -196,14 +209,16 @@ function Typography(_ref) {
     });
   }
 
+  var currentColor = !color && !hasTypographyAncestor ? defaultColor : color;
+
   var text = /*#__PURE__*/jsx(Text$1, _objectSpread({
     accessibilityRole: accessibilityRole || undefined,
     fontSize: 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, {
@@ -244,6 +259,7 @@ var createHeading = function (level, defaultBase) {
   return TypographyHeading;
 };
 
+Typography.SetDefaultColor = TypographyDefaultColorContext.Provider;
 Typography.Text = TypographyText;
 Typography.Paragraph = TypographyParagraph;
 Typography.Header1 = createHeading(1);
@@ -268,7 +284,7 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$i = ["size", "round", "light", "sizeVariant"];
+var _excluded$j = ["size", "round", "light", "sizeVariant"];
 
 var getInitials = function (firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
@@ -340,7 +356,7 @@ function Avatar(_ref6) {
       round = _ref6.round,
       light = _ref6.light,
       sizeVariant = _ref6.sizeVariant,
-      props = _objectWithoutProperties(_ref6, _excluded$i);
+      props = _objectWithoutProperties(_ref6, _excluded$j);
 
   return /*#__PURE__*/jsx(StyledAvatarView, {
     $size: size,
@@ -407,7 +423,7 @@ function isSubtle(type) {
   return type.startsWith('subtle');
 }
 
-var _excluded$h = ["$type", "$variant", "$isStretch", "disabled"];
+var _excluded$i = ["$type", "$variant", "$isStretch", "disabled"];
 var AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/styled$1("div")({
   name: "AnimatedButtonPressableContainer",
   "class": "kitt-u_AnimatedButtonPressableContainer_a1vkj3mh",
@@ -521,7 +537,7 @@ var AnimatedButtonPressable = /*#__PURE__*/forwardRef(function (_ref18, ref) {
       $variant = _ref18.$variant,
       $isStretch = _ref18.$isStretch,
       disabled = _ref18.disabled,
-      props = _objectWithoutProperties(_ref18, _excluded$h);
+      props = _objectWithoutProperties(_ref18, _excluded$i);
 
   return /*#__PURE__*/jsx(AnimatedButtonPressableContainer, {
     ref: ref,
@@ -576,12 +592,12 @@ var BaseStyledButtonPressable = /*#__PURE__*/styled(View$1).withConfig({
   return defaultPadding;
 });
 
-var _excluded$g = ["color"],
+var _excluded$h = ["color"],
     _excluded2$3 = ["color"];
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      props = _objectWithoutProperties(_ref, _excluded$g);
+      props = _objectWithoutProperties(_ref, _excluded$h);
 
   var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, props), {}, {
@@ -609,7 +625,7 @@ function TypographyIcon(_ref2) {
   return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread({}, props));
 }
 
-var _excluded$f = ["type", "variant", "isDisabled", "$isStretch", "icon", "children"];
+var _excluded$g = ["type", "variant", "isDisabled", "$isStretch", "icon", "children"];
 
 var getTextColorByType = function (type, variant) {
   switch (type) {
@@ -751,7 +767,7 @@ function ButtonContent(_ref7) {
       $isStretch = _ref7.$isStretch,
       icon = _ref7.icon,
       children = _ref7.children,
-      props = _objectWithoutProperties(_ref7, _excluded$f);
+      props = _objectWithoutProperties(_ref7, _excluded$g);
 
   var color = isDisabled ? 'black-light' : getTextColorByType(type, variant);
   return /*#__PURE__*/jsx(ButtonContentContainer, {
@@ -875,6 +891,315 @@ 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",
+  componentId: "kitt-universal__sc-wuv3y6-0"
+})(["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",
+  componentId: "kitt-universal__sc-wuv3y6-1"
+})(["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;
+  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;
+  }());
+  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$2, {
+    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: 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",
+  componentId: "kitt-universal__sc-17uuimx-0"
+})(["", ""], 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$f = ["direction"];
+
+function ChoicesContainer(_ref) {
+  var direction = _ref.direction,
+      props = _objectWithoutProperties(_ref, _excluded$f);
+
+  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,
@@ -1236,6 +1561,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
@@ -1653,6 +2011,7 @@ var theme = {
   breakpoints: breakpoints,
   button: button,
   card: card,
+  choices: choices,
   feedbackMessage: feedbackMessage,
   forms: forms,
   fullScreenModal: fullScreenModal,
@@ -4697,5 +5056,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.web.js.map