@ornikar/kitt-universal 7.3.0 → 7.6.0

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

@@ -99,7 +99,7 @@ var KittBreakpointsMax = {
   LARGE: KittBreakpoints.WIDE - 1
 };
 
-var _excluded$g = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
+var _excluded$g = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color", "textAlign"];
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -131,19 +131,23 @@ function getTypographyTypeConfig(type, theme) {
 var StyledTypography = /*#__PURE__*/styled(Text$1).withConfig({
   displayName: "Typography__StyledTypography",
   componentId: "kitt-universal__sc-1dz700q-0"
-})(["", " ", ""], function (_ref) {
-  var theme = _ref.theme,
-      $isHeader = _ref.$isHeader,
-      $typeForCurrentWindowSize = _ref.$typeForCurrentWindowSize,
-      $variant = _ref.$variant;
+})(["", ";", " ", ""], function (_ref) {
+  var $textAlign = _ref.$textAlign;
+  if (!$textAlign) return undefined;
+  return css(["text-align:", ";"], $textAlign);
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      $isHeader = _ref2.$isHeader,
+      $typeForCurrentWindowSize = _ref2.$typeForCurrentWindowSize,
+      $variant = _ref2.$variant;
   var _theme$kitt$typograph = theme.kitt.typography.types,
       headers = _theme$kitt$typograph.headers,
       bodies = _theme$kitt$typograph.bodies;
   var typeConfigKey = getTypographyTypeConfigKey(theme);
-  return "\n      /* type */\n      ".concat(!$typeForCurrentWindowSize ? '' : "\n  font-family: ".concat($isHeader ? headers.fontFamily[$variant] : bodies.fontFamily[$variant], ";\n  font-size: ").concat($isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize, "px;\n  line-height: ").concat($isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight, "px;\n    "), "\n\n    /* variant */\n    font-weight: ").concat($isHeader ? headers.fontWeight : bodies.fontWeight[$variant], ";\n    font-style: ").concat($isHeader ? headers.fontStyle : bodies.fontStyle[$variant], ";\n  ");
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      $color = _ref2.$color;
+  return css(["", " font-weight:", ";font-style:", ";"], !$typeForCurrentWindowSize ? '' : css(["font-family:", ";font-size:", "px;line-height:", "px;"], $isHeader ? headers.fontFamily[$variant] : bodies.fontFamily[$variant], $isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize, $isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight), $isHeader ? headers.fontWeight : bodies.fontWeight[$variant], $isHeader ? headers.fontStyle : bodies.fontStyle[$variant]);
+}, function (_ref3) {
+  var theme = _ref3.theme,
+      $color = _ref3.$color;
   if (!$color) return '';
   return css(["color:", ";text-decoration-color:", ";"], theme.kitt.typography.colors[$color], theme.kitt.typography.colors[$color]);
 });
@@ -156,9 +160,9 @@ function useTypographyTypeForCurrentWindowSize(base, small, medium, large) {
   if (small && width >= KittBreakpoints.SMALL) return small;
   return base;
 }
-function getTypographyInheritedOrDefaultValuesBasedOnExistingAncestors(hasTypographyAncestor, _ref3) {
-  var base = _ref3.base,
-      color = _ref3.color;
+function getTypographyInheritedOrDefaultValuesBasedOnExistingAncestors(hasTypographyAncestor, _ref4) {
+  var base = _ref4.base,
+      color = _ref4.color;
   // return the props set or undefined. In case of undefined, the value will be inherited from its parents.
   if (hasTypographyAncestor) return {
     base: base,
@@ -169,15 +173,16 @@ function getTypographyInheritedOrDefaultValuesBasedOnExistingAncestors(hasTypogr
     color: color !== null && color !== void 0 ? color : 'black'
   };
 }
-function Typography(_ref4) {
-  var accessibilityRole = _ref4.accessibilityRole,
-      base = _ref4.base,
-      small = _ref4.small,
-      medium = _ref4.medium,
-      large = _ref4.large,
-      variant = _ref4.variant,
-      color = _ref4.color,
-      otherProps = _objectWithoutProperties(_ref4, _excluded$g);
+function Typography(_ref5) {
+  var accessibilityRole = _ref5.accessibilityRole,
+      base = _ref5.base,
+      small = _ref5.small,
+      medium = _ref5.medium,
+      large = _ref5.large,
+      variant = _ref5.variant,
+      color = _ref5.color,
+      textAlign = _ref5.textAlign,
+      otherProps = _objectWithoutProperties(_ref5, _excluded$g);
 
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
   var hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
@@ -192,21 +197,21 @@ function Typography(_ref4) {
   var typeForCurrentWindowSize = useTypographyTypeForCurrentWindowSize(baseOrDefaultToBody, small, medium, large);
   var isHeader = isTypographyHeader(typeForCurrentWindowSize, isHeaderTypographyInContext);
   var nonNullableVariant = variant !== null && variant !== void 0 ? variant : isHeader ? 'bold' : 'regular';
-  var content = baseOrDefaultToBody ? /*#__PURE__*/jsx(IsHeaderTypographyContext.Provider, {
-    value: isHeader,
-    children: /*#__PURE__*/jsx(StyledTypography, _objectSpread({
-      $color: colorOrDefaultToBlack,
-      $isHeader: isHeader,
-      $typeForCurrentWindowSize: typeForCurrentWindowSize,
-      $variant: nonNullableVariant,
-      accessibilityRole: accessibilityRole || undefined
-    }, otherProps))
-  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread({
+
+  var sharedProps = _objectSpread({
     $color: colorOrDefaultToBlack,
     $isHeader: isHeader,
     $variant: nonNullableVariant,
-    accessibilityRole: accessibilityRole || undefined
-  }, otherProps));
+    accessibilityRole: accessibilityRole || undefined,
+    $textAlign: textAlign
+  }, otherProps);
+
+  var content = baseOrDefaultToBody ? /*#__PURE__*/jsx(IsHeaderTypographyContext.Provider, {
+    value: isHeader,
+    children: /*#__PURE__*/jsx(StyledTypography, _objectSpread(_objectSpread({}, sharedProps), {}, {
+      $typeForCurrentWindowSize: typeForCurrentWindowSize
+    }, otherProps))
+  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread({}, sharedProps));
   return color ? /*#__PURE__*/jsx(TypographyColorContext.Provider, {
     value: color,
     children: content
@@ -1377,6 +1382,30 @@ var pageLoader = {
   }
 };
 
+var picker = {
+  ios: {
+    "default": _objectSpread(_objectSpread({
+      fontFamily: typography.types.bodies.fontFamily.regular
+    }, typography.types.bodies.configs.body.baseAndSmall), {}, {
+      fontSize: 16,
+      color: typography.colors['black-light']
+    }),
+    selected: {
+      color: typography.colors.primary
+    }
+  },
+  android: {
+    padding: '12px 24px',
+    "default": {
+      backgroundColor: colors.transparent
+    },
+    selected: {
+      backgroundColor: colors.primary,
+      color: typography.colors.white
+    }
+  }
+};
+
 var shadows = {
   medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
 };
@@ -1476,6 +1505,7 @@ var theme = {
   iconButton: iconButton,
   listItem: listItem,
   pageLoader: pageLoader,
+  picker: picker,
   shadows: shadows,
   skeleton: skeleton,
   tag: tag,
@@ -2046,6 +2076,7 @@ function InputPassword(_ref) {
     autoCorrect: false,
     secureTextEntry: !isVisible,
     right: right || /*#__PURE__*/jsx(InputPressable, {
+      hitSlop: 20,
       accessibilityRole: "button",
       onPress: function onPress() {
         return setIsVisible(function (prev) {
@@ -3142,6 +3173,13 @@ function PageLoader() {
   });
 }
 
+function Picker() {
+  return /*#__PURE__*/jsx(Typography.Text, {
+    base: "body",
+    children: "Picker is not implemented for the web"
+  });
+}
+
 var StyledSkeleton = withTheme( /*#__PURE__*/styled$1("div")({
   name: "StyledSkeleton",
   "class": "kitt-u_StyledSkeleton_sc3upcl",
@@ -3973,5 +4011,5 @@ function MatchWindowSize(_ref) {
   return children;
 }
 
-export { Avatar, Button, Card, Checkbox, DatePicker, Emoji, 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, 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, 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 };
 //# sourceMappingURL=index-browser-all.es.web.js.map