@ornikar/kitt-universal 9.1.0 → 9.1.2

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

@@ -346,6 +346,19 @@ function Avatar(_ref6) {
   });
 }
 
+function warn(message) {
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn(message);
+  }
+}
+function deprecatedMessage(symbol, deprecation, replaceBy) {
+  var replaceMessage = replaceBy === undefined ? '' : ", please use ".concat(replaceBy, " instead");
+  warn("[Deprecation] in ".concat(symbol, ": ").concat(deprecation, " is deprecated").concat(replaceMessage, "."));
+}
+function deprecatedInComponent(component, deprecation, replaceBy) {
+  deprecatedMessage("<".concat(component, " />"), deprecation, replaceBy);
+}
+
 var hasVariant = function (button, variant) {
   return variant in button;
 };
@@ -484,16 +497,15 @@ var BaseStyledButtonPressable = /*#__PURE__*/styled.View.withConfig({
   return getVariantValuesIfExist(theme, $type, $variant).backgroundColor;
 }, function (_ref7) {
   var theme = _ref7.theme,
-      $isLarge = _ref7.$isLarge,
-      $isXLarge = _ref7.$isXLarge,
+      $size = _ref7.$size,
       $isDisabled = _ref7.$isDisabled;
   var _theme$kitt$button$co = theme.kitt.button.contentPadding,
       large = _theme$kitt$button$co.large,
       defaultPadding = _theme$kitt$button$co["default"],
       disabledPadding = _theme$kitt$button$co.disabled,
       xLarge = _theme$kitt$button$co.xLarge;
-  if ($isXLarge) return xLarge;
-  if ($isLarge) return large;
+  if ($size === 'large') return large;
+  if ($size === 'xlarge') return xLarge;
   if ($isDisabled) return disabledPadding;
   return defaultPadding;
 });
@@ -709,30 +721,51 @@ var StyledDisabled = /*#__PURE__*/styled.View.withConfig({
 });
 
 var allowedGhostTypes = ['primary', 'default'];
-var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'default' : _ref$type,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-      disabled = _ref.disabled,
-      stretch = _ref.stretch,
-      large = _ref.large,
+
+var getButtonSize = function (_ref) {
+  var large = _ref.large,
       xLarge = _ref.xLarge,
-      icon = _ref.icon,
-      _ref$iconPosition = _ref.iconPosition,
-      iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
-      testID = _ref.testID,
-      href = _ref.href,
-      hrefAttrs = _ref.hrefAttrs,
-      _ref$accessibilityRol = _ref.accessibilityRole,
-      accessibilityRole = _ref$accessibilityRol === void 0 ? 'button' : _ref$accessibilityRol,
-      onPress = _ref.onPress;
+      size = _ref.size;
+  if (large) return 'large';
+  if (xLarge) return 'xlarge';
+  return size;
+};
+
+var Button = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+      _ref2$type = _ref2.type,
+      type = _ref2$type === void 0 ? 'default' : _ref2$type,
+      _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
+      disabled = _ref2.disabled,
+      stretch = _ref2.stretch,
+      large = _ref2.large,
+      xLarge = _ref2.xLarge,
+      icon = _ref2.icon,
+      sizeProp = _ref2.size,
+      _ref2$iconPosition = _ref2.iconPosition,
+      iconPosition = _ref2$iconPosition === void 0 ? 'left' : _ref2$iconPosition,
+      testID = _ref2.testID,
+      href = _ref2.href,
+      hrefAttrs = _ref2.hrefAttrs,
+      _ref2$accessibilityRo = _ref2.accessibilityRole,
+      accessibilityRole = _ref2$accessibilityRo === void 0 ? 'button' : _ref2$accessibilityRo,
+      onPress = _ref2.onPress;
 
   if ((process.env.NODE_ENV !== "production") && variant === 'ghost' && !allowedGhostTypes.includes(type)) {
     throw new Error('variant=ghost is only allowed with type=primary or default');
   }
 
+  if (large || xLarge) {
+    var deprecatedProp = large ? 'large' : 'xLarge';
+    deprecatedInComponent('Button', "".concat(deprecatedProp, " prop"), 'size');
+  }
+
+  var size = getButtonSize({
+    large: large,
+    xLarge: xLarge,
+    size: sizeProp
+  });
   return /*#__PURE__*/jsx(AnimatedButtonPressable, {
     ref: ref,
     accessibilityRole: accessibilityRole,
@@ -748,8 +781,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       $type: type,
       $variant: variant,
       $isStretch: stretch,
-      $isLarge: large,
-      $isXLarge: xLarge,
+      $size: size,
       $isDisabled: disabled,
       children: [/*#__PURE__*/jsx(ButtonContent, {
         type: type,
@@ -1274,7 +1306,7 @@ var typography = {
       },
       fontWeight: {
         regular: 400,
-        bold: 700
+        bold: Platform.OS === 'web' ? 700 : 400
       },
       fontStyle: {
         regular: 'normal',
@@ -3444,6 +3476,143 @@ function Message(_ref) {
   });
 }
 
+var createKittSpaces = function (spacing) {
+  var sizes = {};
+
+  for (var size = 1; size <= 64; size++) {
+    sizes["kitt.".concat(size)] = size * spacing;
+  }
+
+  return sizes;
+}; // 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);
+  return extendTheme({
+    colors: {
+      kitt: _objectSpread(_objectSpread({}, theme.colors), {}, {
+        typography: theme.typography.colors
+      })
+    },
+    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,
+    breakpoints: {
+      // kitt breakpoints
+      base: KittBreakpoints.BASE,
+      small: KittBreakpoints.SMALL,
+      medium: KittBreakpoints.MEDIUM,
+      large: KittBreakpoints.LARGE,
+      wide: KittBreakpoints.WIDE,
+      // native base default naming
+      sm: Number.MAX_SAFE_INTEGER,
+      md: Number.MAX_SAFE_INTEGER,
+      lg: Number.MAX_SAFE_INTEGER,
+      xl: Number.MAX_SAFE_INTEGER,
+      '2xl': Number.MAX_SAFE_INTEGER
+    },
+    fontSizes: {
+      baseAndSmall: {
+        header1: "".concat(theme.typography.types.headers.configs.header1.baseAndSmall.fontSize, "px"),
+        header2: "".concat(theme.typography.types.headers.configs.header2.baseAndSmall.fontSize, "px"),
+        header3: "".concat(theme.typography.types.headers.configs.header3.baseAndSmall.fontSize, "px"),
+        header4: "".concat(theme.typography.types.headers.configs.header4.baseAndSmall.fontSize, "px"),
+        header5: "".concat(theme.typography.types.headers.configs.header5.baseAndSmall.fontSize, "px"),
+        'body-large': "".concat(theme.typography.types.bodies.configs['body-large'].baseAndSmall.fontSize, "px"),
+        'body-medium': "".concat(theme.typography.types.bodies.configs['body-medium'].baseAndSmall.fontSize, "px"),
+        body: "".concat(theme.typography.types.bodies.configs.body.baseAndSmall.fontSize, "px"),
+        'body-small': "".concat(theme.typography.types.bodies.configs['body-small'].baseAndSmall.fontSize, "px"),
+        'body-xsmall': "".concat(theme.typography.types.bodies.configs['body-xsmall'].baseAndSmall.fontSize, "px")
+      },
+      mediumAndWide: {
+        header1: "".concat(theme.typography.types.headers.configs.header1.mediumAndWide.fontSize, "px"),
+        header2: "".concat(theme.typography.types.headers.configs.header2.mediumAndWide.fontSize, "px"),
+        header3: "".concat(theme.typography.types.headers.configs.header3.mediumAndWide.fontSize, "px"),
+        header4: "".concat(theme.typography.types.headers.configs.header4.mediumAndWide.fontSize, "px"),
+        header5: "".concat(theme.typography.types.headers.configs.header5.mediumAndWide.fontSize, "px"),
+        'body-large': "".concat(theme.typography.types.bodies.configs['body-large'].mediumAndWide.fontSize, "px"),
+        'body-medium': "".concat(theme.typography.types.bodies.configs['body-medium'].mediumAndWide.fontSize, "px"),
+        body: "".concat(theme.typography.types.bodies.configs.body.mediumAndWide.fontSize, "px"),
+        'body-small': "".concat(theme.typography.types.bodies.configs['body-small'].mediumAndWide.fontSize, "px"),
+        'body-xsmall': "".concat(theme.typography.types.bodies.configs['body-xsmall'].mediumAndWide.fontSize, "px")
+      }
+    },
+    lineHeights: {
+      baseAndSmall: {
+        header1: theme.typography.types.headers.configs.header1.baseAndSmall.lineHeight,
+        header2: theme.typography.types.headers.configs.header2.baseAndSmall.lineHeight,
+        header3: theme.typography.types.headers.configs.header3.baseAndSmall.lineHeight,
+        header4: theme.typography.types.headers.configs.header4.baseAndSmall.lineHeight,
+        header5: theme.typography.types.headers.configs.header5.baseAndSmall.lineHeight,
+        'body-large': theme.typography.types.bodies.configs['body-large'].baseAndSmall.lineHeight,
+        'body-medium': theme.typography.types.bodies.configs['body-medium'].baseAndSmall.lineHeight,
+        body: theme.typography.types.bodies.configs.body.baseAndSmall.lineHeight,
+        'body-small': theme.typography.types.bodies.configs['body-small'].baseAndSmall.lineHeight,
+        'body-xsmall': theme.typography.types.bodies.configs['body-xsmall'].baseAndSmall.lineHeight
+      },
+      mediumAndWide: {
+        header1: theme.typography.types.headers.configs.header1.mediumAndWide.lineHeight,
+        header2: theme.typography.types.headers.configs.header2.mediumAndWide.lineHeight,
+        header3: theme.typography.types.headers.configs.header3.mediumAndWide.lineHeight,
+        header4: theme.typography.types.headers.configs.header4.mediumAndWide.lineHeight,
+        header5: theme.typography.types.headers.configs.header5.mediumAndWide.lineHeight,
+        'body-large': theme.typography.types.bodies.configs['body-large'].mediumAndWide.lineHeight,
+        'body-medium': theme.typography.types.bodies.configs['body-medium'].mediumAndWide.lineHeight,
+        body: theme.typography.types.bodies.configs.body.mediumAndWide.lineHeight,
+        'body-small': theme.typography.types.bodies.configs['body-small'].mediumAndWide.lineHeight,
+        'body-xsmall': theme.typography.types.bodies.configs['body-xsmall'].mediumAndWide.lineHeight
+      }
+    },
+    fontWeights: {
+      headers: {
+        regular: theme.typography.types.headers.fontWeight,
+        bold: theme.typography.types.headers.fontWeight
+      },
+      bodies: theme.typography.types.bodies.fontWeight
+    },
+    fonts: {
+      headers: theme.typography.types.headers.fontFamily,
+      bodies: theme.typography.types.bodies.fontFamily
+    },
+    components: {
+      Text: {
+        baseStyle: {
+          _light: {
+            color: 'kitt.typography.black'
+          },
+          _dark: {
+            color: 'kitt.typography.white'
+          },
+          fontFamily: theme.typography.types.bodies.fontFamily.regular,
+          fontStyle: theme.typography.types.bodies.fontStyle.regular,
+          fontWeight: theme.typography.types.bodies.fontWeight.regular,
+          fontSize: undefined,
+          lineHeight: theme.typography.types.bodies.configs.body.baseAndSmall.lineHeight
+        }
+      }
+    }
+  });
+};
+function KittNativeBaseProvider(_ref) {
+  var theme = _ref.theme,
+      isSSR = _ref.isSSR,
+      children = _ref.children;
+  var kittTheme = theme.kitt;
+  var nativeBaseCustomTheme = useMemo(function () {
+    return createKittNativeBaseCustomTheme(kittTheme);
+  }, [kittTheme]);
+  return /*#__PURE__*/jsx(NativeBaseProvider, {
+    theme: nativeBaseCustomTheme,
+    isSSR: isSSR,
+    children: children
+  });
+}
+
 function Notification(_ref) {
   var type = _ref.type,
       children = _ref.children,
@@ -4745,143 +4914,6 @@ var hex2rgba = function (hex) {
   return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
 };
 
-var createKittSpaces = function (spacing) {
-  var sizes = {};
-
-  for (var size = 1; size <= 64; size++) {
-    sizes["kitt.".concat(size)] = size * spacing;
-  }
-
-  return sizes;
-}; // 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);
-  return extendTheme({
-    colors: {
-      kitt: _objectSpread(_objectSpread({}, theme.colors), {}, {
-        typography: theme.typography.colors
-      })
-    },
-    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,
-    breakpoints: {
-      // kitt breakpoints
-      base: KittBreakpoints.BASE,
-      small: KittBreakpoints.SMALL,
-      medium: KittBreakpoints.MEDIUM,
-      large: KittBreakpoints.LARGE,
-      wide: KittBreakpoints.WIDE,
-      // native base default naming
-      sm: Number.MAX_SAFE_INTEGER,
-      md: Number.MAX_SAFE_INTEGER,
-      lg: Number.MAX_SAFE_INTEGER,
-      xl: Number.MAX_SAFE_INTEGER,
-      '2xl': Number.MAX_SAFE_INTEGER
-    },
-    fontSizes: {
-      baseAndSmall: {
-        header1: "".concat(theme.typography.types.headers.configs.header1.baseAndSmall.fontSize, "px"),
-        header2: "".concat(theme.typography.types.headers.configs.header2.baseAndSmall.fontSize, "px"),
-        header3: "".concat(theme.typography.types.headers.configs.header3.baseAndSmall.fontSize, "px"),
-        header4: "".concat(theme.typography.types.headers.configs.header4.baseAndSmall.fontSize, "px"),
-        header5: "".concat(theme.typography.types.headers.configs.header5.baseAndSmall.fontSize, "px"),
-        'body-large': "".concat(theme.typography.types.bodies.configs['body-large'].baseAndSmall.fontSize, "px"),
-        'body-medium': "".concat(theme.typography.types.bodies.configs['body-medium'].baseAndSmall.fontSize, "px"),
-        body: "".concat(theme.typography.types.bodies.configs.body.baseAndSmall.fontSize, "px"),
-        'body-small': "".concat(theme.typography.types.bodies.configs['body-small'].baseAndSmall.fontSize, "px"),
-        'body-xsmall': "".concat(theme.typography.types.bodies.configs['body-xsmall'].baseAndSmall.fontSize, "px")
-      },
-      mediumAndWide: {
-        header1: "".concat(theme.typography.types.headers.configs.header1.mediumAndWide.fontSize, "px"),
-        header2: "".concat(theme.typography.types.headers.configs.header2.mediumAndWide.fontSize, "px"),
-        header3: "".concat(theme.typography.types.headers.configs.header3.mediumAndWide.fontSize, "px"),
-        header4: "".concat(theme.typography.types.headers.configs.header4.mediumAndWide.fontSize, "px"),
-        header5: "".concat(theme.typography.types.headers.configs.header5.mediumAndWide.fontSize, "px"),
-        'body-large': "".concat(theme.typography.types.bodies.configs['body-large'].mediumAndWide.fontSize, "px"),
-        'body-medium': "".concat(theme.typography.types.bodies.configs['body-medium'].mediumAndWide.fontSize, "px"),
-        body: "".concat(theme.typography.types.bodies.configs.body.mediumAndWide.fontSize, "px"),
-        'body-small': "".concat(theme.typography.types.bodies.configs['body-small'].mediumAndWide.fontSize, "px"),
-        'body-xsmall': "".concat(theme.typography.types.bodies.configs['body-xsmall'].mediumAndWide.fontSize, "px")
-      }
-    },
-    lineHeights: {
-      baseAndSmall: {
-        header1: theme.typography.types.headers.configs.header1.baseAndSmall.lineHeight,
-        header2: theme.typography.types.headers.configs.header2.baseAndSmall.lineHeight,
-        header3: theme.typography.types.headers.configs.header3.baseAndSmall.lineHeight,
-        header4: theme.typography.types.headers.configs.header4.baseAndSmall.lineHeight,
-        header5: theme.typography.types.headers.configs.header5.baseAndSmall.lineHeight,
-        'body-large': theme.typography.types.bodies.configs['body-large'].baseAndSmall.lineHeight,
-        'body-medium': theme.typography.types.bodies.configs['body-medium'].baseAndSmall.lineHeight,
-        body: theme.typography.types.bodies.configs.body.baseAndSmall.lineHeight,
-        'body-small': theme.typography.types.bodies.configs['body-small'].baseAndSmall.lineHeight,
-        'body-xsmall': theme.typography.types.bodies.configs['body-xsmall'].baseAndSmall.lineHeight
-      },
-      mediumAndWide: {
-        header1: theme.typography.types.headers.configs.header1.mediumAndWide.lineHeight,
-        header2: theme.typography.types.headers.configs.header2.mediumAndWide.lineHeight,
-        header3: theme.typography.types.headers.configs.header3.mediumAndWide.lineHeight,
-        header4: theme.typography.types.headers.configs.header4.mediumAndWide.lineHeight,
-        header5: theme.typography.types.headers.configs.header5.mediumAndWide.lineHeight,
-        'body-large': theme.typography.types.bodies.configs['body-large'].mediumAndWide.lineHeight,
-        'body-medium': theme.typography.types.bodies.configs['body-medium'].mediumAndWide.lineHeight,
-        body: theme.typography.types.bodies.configs.body.mediumAndWide.lineHeight,
-        'body-small': theme.typography.types.bodies.configs['body-small'].mediumAndWide.lineHeight,
-        'body-xsmall': theme.typography.types.bodies.configs['body-xsmall'].mediumAndWide.lineHeight
-      }
-    },
-    fontWeights: {
-      headers: {
-        regular: theme.typography.types.headers.fontWeight,
-        bold: theme.typography.types.headers.fontWeight
-      },
-      bodies: theme.typography.types.bodies.fontWeight
-    },
-    fonts: {
-      headers: theme.typography.types.headers.fontFamily,
-      bodies: theme.typography.types.bodies.fontFamily
-    },
-    components: {
-      Text: {
-        baseStyle: {
-          _light: {
-            color: 'kitt.typography.black'
-          },
-          _dark: {
-            color: 'kitt.typography.white'
-          },
-          fontFamily: theme.typography.types.bodies.fontFamily.regular,
-          fontStyle: theme.typography.types.bodies.fontStyle.regular,
-          fontWeight: theme.typography.types.bodies.fontWeight.regular,
-          fontSize: undefined,
-          lineHeight: theme.typography.types.bodies.configs.body.baseAndSmall.lineHeight
-        }
-      }
-    }
-  });
-};
-function KittNativeBaseProvider(_ref) {
-  var theme = _ref.theme,
-      isSSR = _ref.isSSR,
-      children = _ref.children;
-  var kittTheme = theme.kitt;
-  var nativeBaseCustomTheme = useMemo(function () {
-    return createKittNativeBaseCustomTheme(kittTheme);
-  }, [kittTheme]);
-  return /*#__PURE__*/jsx(NativeBaseProvider, {
-    theme: nativeBaseCustomTheme,
-    isSSR: isSSR,
-    children: children
-  });
-}
-
 function KittThemeProvider(_ref) {
   var isSSR = _ref.isSSR,
       children = _ref.children;
@@ -4922,5 +4954,5 @@ function MatchWindowSize(_ref) {
   return children;
 }
 
-export { Avatar, Button, Card, Checkbox, DatePicker, Emoji, ExternalAppLink, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MatchWindowSize, Message, Modal, Notification, Overlay, PageLoader, Picker, Radio, DeprecatedSection as Section, Skeleton, SpinningIcon, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
+export { Avatar, Button, Card, Checkbox, DatePicker, Emoji, ExternalAppLink, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MatchWindowSize, Message, Modal, Notification, Overlay, PageLoader, Picker, Radio, DeprecatedSection as Section, Skeleton, SpinningIcon, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
 //# sourceMappingURL=index-browser-all.es.js.map