@ornikar/kitt-universal 7.5.0 → 7.6.0

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

@@ -124,7 +124,12 @@ function getTypographyTypeConfig(type, theme) {
 const StyledTypography = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Text).withConfig({
   displayName: "Typography__StyledTypography",
   componentId: "kitt-universal__sc-1dz700q-0"
-})(["", " ", ""], ({
+})(["", ";", " ", ""], ({
+  $textAlign
+}) => {
+  if (!$textAlign) return undefined;
+  return styled.css(["text-align:", ";"], $textAlign);
+}, ({
   theme,
   $isHeader,
   $typeForCurrentWindowSize,
@@ -135,18 +140,7 @@ const StyledTypography = /*#__PURE__*/styled__default(BabelPluginStyledComponent
     bodies
   } = theme.kitt.typography.types;
   const typeConfigKey = getTypographyTypeConfigKey(theme);
-  return `
-      /* type */
-      ${!$typeForCurrentWindowSize ? '' : `
-  font-family: ${$isHeader ? headers.fontFamily[$variant] : bodies.fontFamily[$variant]};
-  font-size: ${$isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize}px;
-  line-height: ${$isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight}px;
-    `}
-
-    /* variant */
-    font-weight: ${$isHeader ? headers.fontWeight : bodies.fontWeight[$variant]};
-    font-style: ${$isHeader ? headers.fontStyle : bodies.fontStyle[$variant]};
-  `;
+  return styled.css(["", " font-weight:", ";font-style:", ";"], !$typeForCurrentWindowSize ? '' : styled.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]);
 }, ({
   theme,
   $color
@@ -185,6 +179,7 @@ function Typography({
   large,
   variant,
   color,
+  textAlign,
   ...otherProps
 }) {
   const isHeaderTypographyInContext = react.useContext(IsHeaderTypographyContext);
@@ -199,22 +194,21 @@ function Typography({
   const typeForCurrentWindowSize = useTypographyTypeForCurrentWindowSize(baseOrDefaultToBody, small, medium, large);
   const isHeader = isTypographyHeader(typeForCurrentWindowSize, isHeaderTypographyInContext);
   const nonNullableVariant = variant ?? (isHeader ? 'bold' : 'regular');
-  const content = baseOrDefaultToBody ? /*#__PURE__*/jsxRuntime.jsx(IsHeaderTypographyContext.Provider, {
-    value: isHeader,
-    children: /*#__PURE__*/jsxRuntime.jsx(StyledTypography, {
-      $color: colorOrDefaultToBlack,
-      $isHeader: isHeader,
-      $typeForCurrentWindowSize: typeForCurrentWindowSize,
-      $variant: nonNullableVariant,
-      accessibilityRole: accessibilityRole || undefined,
-      ...otherProps
-    })
-  }) : /*#__PURE__*/jsxRuntime.jsx(StyledTypography, {
+  const sharedProps = {
     $color: colorOrDefaultToBlack,
     $isHeader: isHeader,
     $variant: nonNullableVariant,
     accessibilityRole: accessibilityRole || undefined,
+    $textAlign: textAlign,
     ...otherProps
+  };
+  const content = baseOrDefaultToBody ? /*#__PURE__*/jsxRuntime.jsx(IsHeaderTypographyContext.Provider, {
+    value: isHeader,
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledTypography, { ...sharedProps,
+      $typeForCurrentWindowSize: typeForCurrentWindowSize,
+      ...otherProps
+    })
+  }) : /*#__PURE__*/jsxRuntime.jsx(StyledTypography, { ...sharedProps
   });
   return color ? /*#__PURE__*/jsxRuntime.jsx(TypographyColorContext.Provider, {
     value: color,
@@ -1358,6 +1352,30 @@ const pageLoader = {
   }
 };
 
+const picker = {
+  ios: {
+    default: {
+      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
+    }
+  }
+};
+
 const shadows = {
   medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
 };
@@ -1457,6 +1475,7 @@ const theme = {
   iconButton,
   listItem,
   pageLoader,
+  picker,
   shadows,
   skeleton,
   tag,
@@ -3039,6 +3058,13 @@ function PageLoader() {
   });
 }
 
+function Picker() {
+  return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+    base: "body",
+    children: "Picker is not implemented for the web"
+  });
+}
+
 const StyledSkeleton = withTheme( /*#__PURE__*/react$1.styled("div")({
   name: "StyledSkeleton",
   class: "kitt-u_StyledSkeleton_sc3upcl",
@@ -3867,6 +3893,7 @@ exports.Modal = Modal;
 exports.Notification = Notification;
 exports.Overlay = Overlay;
 exports.PageLoader = PageLoader;
+exports.Picker = Picker;
 exports.Radio = Radio;
 exports.Section = DeprecatedSection;
 exports.Skeleton = Skeleton;