@ornikar/kitt-universal 32.3.1-canary.ddff29bdf3ffa500cf7658e5206d5069b23f4b45.0 → 32.4.0

package/dist/index.es.web.js

@@ -11,7 +11,7 @@ import _typeof from '@babel/runtime/helpers/typeof';
 import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import { SpinnerGapRegularIcon, UserRegularIcon, XRegularIcon, ArrowLeftRegularIcon, CaretUpFillIcon, CaretDownFillIcon, MapPinRegularIcon, EyeClosedRegularIcon, EyeRegularIcon, CheckCircleFillIcon, CaretDownRegularIcon, CaretRightRegularIcon, InfoRegularIcon, WarningRegularIcon, CheckRegularIcon, WarningCircleRegularIcon, ArrowCounterClockwiseRegularIcon, InfoFillIcon, WarningCircleFillIcon, WarningFillIcon } from '@ornikar/kitt-icons/phosphor';
-import { Animated, Easing, ScrollView as ScrollView$2, View as View$2, StyleSheet, Modal, Linking, Pressable as Pressable$2, useWindowDimensions } from 'react-native';
+import { Animated, Easing, StyleSheet, Modal, Linking, Pressable as Pressable$2, useWindowDimensions } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import { createPortal } from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
@@ -689,10 +689,6 @@ var button = {
     "default": 40,
     medium: 48
   },
-  minHeight: {
-    "default": 40,
-    medium: 48
-  },
   maxHeight: 48,
   icon: {
     medium: {
@@ -2146,8 +2142,8 @@ var typography = {
           allowedFontWeights: ['semibold']
         },
         'heading-l': {
-          fontSize: 38,
-          lineHeight: 44,
+          fontSize: 40,
+          lineHeight: 48,
           allowedFontWeights: ['semibold']
         },
         'heading-m': {
@@ -2156,19 +2152,14 @@ var typography = {
           allowedFontWeights: ['semibold']
         },
         'heading-s': {
-          fontSize: 24,
-          lineHeight: 28,
-          allowedFontWeights: ['semibold']
+          fontSize: 18,
+          lineHeight: 20,
+          allowedFontWeights: ['regular', 'bold']
         },
         'heading-xs': {
-          fontSize: 20,
-          lineHeight: 24,
-          allowedFontWeights: ['semibold']
-        },
-        'heading-xxs': {
           fontSize: 16,
-          lineHeight: 20,
-          allowedFontWeights: ['semibold']
+          lineHeight: 18,
+          allowedFontWeights: ['regular', 'bold']
         }
       }
     },
@@ -2235,17 +2226,17 @@ var typography = {
       configs: {
         'label-large': {
           fontSize: 16,
-          lineHeight: 20,
+          lineHeight: 24,
           allowedFontWeights: ['semibold']
         },
         'label-medium': {
           fontSize: 14,
-          lineHeight: 18,
+          lineHeight: 20,
           allowedFontWeights: ['semibold']
         },
         'label-small': {
           fontSize: 12,
-          lineHeight: 14,
+          lineHeight: 16,
           allowedFontWeights: ['semibold']
         }
       }
@@ -3166,9 +3157,7 @@ function AnimatedContainer$2(_ref) {
     },
     width: width,
     height: height,
-    minHeight: size === 'default' ? 'kitt.button.minHeight.default' : 'kitt.button.minHeight.medium',
     alignSelf: "baseline",
-    justifyContent: "center",
     borderRadius: "kitt.button.borderRadius",
     backgroundColor: currentBackgroundColor,
     children: children
@@ -3867,7 +3856,6 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     alignSelf: createResponsiveStyleFromProp(stretch, undefined, 'flex-start'),
     minWidth: "kitt.button.minWidth",
     maxWidth: createResponsiveStyleFromProp(stretch, '100%', 'kitt.button.maxWidth'),
-    minHeight: size === 'default' ? 'kitt.button.minHeight.default' : 'kitt.button.minHeight.medium',
     maxHeight: "kitt.button.maxHeight",
     width: createResponsiveStyleFromProp(stretch, '100%', 'auto'),
     onPress: onPress,
@@ -4750,7 +4738,9 @@ function AnimatedChoiceItemView(_ref) {
     isPressed = _ref.isPressed,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
-    hasError = _ref.hasError;
+    hasError = _ref.hasError,
+    _ref$shouldExpand = _ref.shouldExpand,
+    shouldExpand = _ref$shouldExpand === void 0 ? false : _ref$shouldExpand;
   var theme = useTheme();
   return /*#__PURE__*/jsx(View, {
     position: "relative",
@@ -4768,6 +4758,8 @@ function AnimatedChoiceItemView(_ref) {
       isPressed: isPressed
     }),
     padding: size === 'small' ? 'kitt.2' : 'kitt.4',
+    flexGrow: shouldExpand ? 1 : undefined,
+    flexShrink: shouldExpand ? 1 : undefined,
     _web: {
       style: {
         transitionProperty: theme.kitt.choices.item.transition.property,
@@ -4804,6 +4796,8 @@ function ChoiceItem(_ref) {
     value = _ref.value,
     selected = _ref.selected,
     disabled = _ref.disabled,
+    _ref$shouldExpand = _ref.shouldExpand,
+    shouldExpand = _ref$shouldExpand === void 0 ? false : _ref$shouldExpand,
     _children = _ref.children,
     isPressedInternal = _ref.isPressedInternal,
     isHoveredInternal = _ref.isHoveredInternal,
@@ -4837,6 +4831,8 @@ function ChoiceItem(_ref) {
       checked: selected
     },
     style: style,
+    flexGrow: shouldExpand ? 1 : undefined,
+    flexShrink: shouldExpand ? 1 : undefined,
     onBlur: onBlur,
     onFocus: onFocus,
     onPress: function (e) {
@@ -4855,6 +4851,8 @@ function ChoiceItem(_ref) {
       });
       return /*#__PURE__*/jsxs(VStack, {
         space: "kitt.2",
+        flexGrow: shouldExpand ? 1 : undefined,
+        flexShrink: shouldExpand ? 1 : undefined,
         children: [/*#__PURE__*/jsxs(AnimatedChoiceItemView, {
           animatedStyles: backgroundStyles,
           isHovered: isHovered || isHoveredInternal,
@@ -4862,10 +4860,13 @@ function ChoiceItem(_ref) {
           isSelected: selected,
           isPressed: isPressed || isPressedInternal,
           hasError: hasError,
+          shouldExpand: shouldExpand,
           size: size,
           children: [/*#__PURE__*/jsxs(Stack, {
             alignItems: "center",
             space: "kitt.2",
+            flexGrow: shouldExpand ? 1 : undefined,
+            flexShrink: shouldExpand ? 1 : undefined,
             children: [icon ? /*#__PURE__*/jsx(TypographyIcon, {
               color: textColor,
               icon: icon
@@ -4894,33 +4895,43 @@ function ChoiceItem(_ref) {
 function ChoiceItemContainer(_ref) {
   var children = _ref.children,
     direction = _ref.direction,
+    shouldExpand = _ref.shouldExpand,
     isLast = _ref.isLast;
   var currentItemMarginValue = isLast ? undefined : 'kitt.3';
-  var flexProps = direction === 'row' ? {
+  var directionFlexProps = direction === 'row' ? {
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: 0
   } : {};
-  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
+  var shouldExpandFlexProps = shouldExpand ? {
+    flexGrow: 1,
+    flexShrink: 1
+  } : {};
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread(_objectSpread({
     marginRight: direction === 'row' ? currentItemMarginValue : undefined,
     marginBottom: direction === 'column' ? currentItemMarginValue : undefined
-  }, flexProps), {}, {
+  }, directionFlexProps), shouldExpandFlexProps), {}, {
     children: children
   }));
 }
 
-var _excluded$D = ["direction", "contentContainerStyle"];
+var _excluded$D = ["direction", "shouldExpand", "contentContainerStyle"];
 function ChoicesContainer(_ref) {
   var direction = _ref.direction,
+    shouldExpand = _ref.shouldExpand,
     contentContainerStyle = _ref.contentContainerStyle,
     props = _objectWithoutProperties(_ref, _excluded$D);
+  var shouldExpandFlexProps = shouldExpand ? {
+    flexGrow: 1,
+    flexShrink: 1
+  } : {};
   if (direction === 'row') {
-    return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
+    return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({
       horizontal: true,
-      contentContainerStyle: contentContainerStyle
-    }, props));
+      contentContainerStyle: shouldExpand ? shouldExpandFlexProps : contentContainerStyle
+    }, props), shouldExpandFlexProps));
   }
-  return /*#__PURE__*/jsx(View$2, _objectSpread({}, props));
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), shouldExpandFlexProps));
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -4932,6 +4943,8 @@ function Choices(_ref2) {
     _ref2$direction = _ref2.direction,
     direction = _ref2$direction === void 0 ? 'column' : _ref2$direction,
     disabled = _ref2.disabled,
+    _ref2$shouldExpand = _ref2.shouldExpand,
+    shouldExpand = _ref2$shouldExpand === void 0 ? false : _ref2$shouldExpand,
     children = _ref2.children,
     value = _ref2.value,
     onPress = _ref2.onPress,
@@ -4950,6 +4963,7 @@ function Choices(_ref2) {
   var sharedProps = {
     type: type,
     disabled: disabled,
+    shouldExpand: shouldExpand,
     onPress: !isForm ? onPress : undefined,
     onChange: isForm ? function (newValue) {
       setCurrentValue(newValue);
@@ -4961,6 +4975,7 @@ function Choices(_ref2) {
   };
   return /*#__PURE__*/jsx(ChoicesContainer, {
     direction: direction,
+    shouldExpand: shouldExpand,
     testID: testID,
     id: id,
     style: style,
@@ -4971,6 +4986,7 @@ function Choices(_ref2) {
       }, sharedProps));
       return /*#__PURE__*/jsx(ChoiceItemContainer, {
         direction: direction,
+        shouldExpand: shouldExpand,
         isLast: index === childrenArray.length - 1,
         children: element
       }, child.key);
@@ -10117,10 +10133,6 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         button: {
           minWidth: theme.button.minWidth,
           maxWidth: theme.button.maxWidth,
-          minHeight: {
-            "default": theme.button.minHeight["default"],
-            medium: theme.button.minHeight.medium
-          },
           maxHeight: theme.button.maxHeight,
           height: {
             "default": theme.button.height["default"],
@@ -10737,7 +10749,6 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
       'heading-m': "".concat(theme.typography.types.headings.configs['heading-m'].fontSize, "px"),
       'heading-s': "".concat(theme.typography.types.headings.configs['heading-s'].fontSize, "px"),
       'heading-xs': "".concat(theme.typography.types.headings.configs['heading-xs'].fontSize, "px"),
-      'heading-xxs': "".concat(theme.typography.types.headings.configs['heading-xxs'].fontSize, "px"),
       'body-xl': "".concat(theme.typography.types.bodies.configs['body-xl'].fontSize, "px"),
       'body-l': "".concat(theme.typography.types.bodies.configs['body-l'].fontSize, "px"),
       'body-m': "".concat(theme.typography.types.bodies.configs['body-m'].fontSize, "px"),
@@ -10761,7 +10772,6 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
       'heading-m': "".concat(theme.typography.types.headings.configs['heading-m'].lineHeight, "px"),
       'heading-s': "".concat(theme.typography.types.headings.configs['heading-s'].lineHeight, "px"),
       'heading-xs': "".concat(theme.typography.types.headings.configs['heading-xs'].lineHeight, "px"),
-      'heading-xxs': "".concat(theme.typography.types.headings.configs['heading-xxs'].lineHeight, "px"),
       'body-xl': "".concat(theme.typography.types.bodies.configs['body-xl'].lineHeight, "px"),
       'body-l': "".concat(theme.typography.types.bodies.configs['body-l'].lineHeight, "px"),
       'body-m': "".concat(theme.typography.types.bodies.configs['body-m'].lineHeight, "px"),
@@ -12592,7 +12602,7 @@ function StoryTitleLevel4(_ref4) {
   return /*#__PURE__*/jsx(View, {
     marginBottom: 10,
     children: /*#__PURE__*/jsx(Typography.Header4, {
-      base: "body-l",
+      base: "heading-s",
       color: useStoryBlockColor(color),
       numberOfLines: numberOfLines,
       children: children
@@ -13145,7 +13155,7 @@ function ToastContent(_ref) {
     flexGrow: 1,
     flexShrink: 1,
     children: [title ? /*#__PURE__*/jsx(Typography.Text, {
-      base: "body-m",
+      base: "heading-xs",
       color: "white",
       children: title
     }) : null, description ? /*#__PURE__*/jsx(Typography.Text, {
@@ -13161,7 +13171,7 @@ function ToastContent(_ref) {
       borderColor: "white",
       onPress: onPress,
       children: /*#__PURE__*/jsx(Typography.Text, {
-        base: "body-m",
+        base: "heading-xs",
         color: "white",
         children: actionLabel
       })