@pushwoosh/kit-typography 1.10.0 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/kit-typography",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "React component for build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",

package/text/Text.d.ts

@@ -1,13 +1,15 @@
+import type { CSSProperties } from 'react';
 import { type TypographyVariant } from '../map';
 /**
- * Inline text in any typography variant: `$variant`, plus `$color`, `$uppercase` and `$ellipsis`.
+ * Inline text in any typography variant: `$variant`, plus `$color`, `$textAlign`, `$textTransform` and `$ellipsis`.
  * `$ellipsis` needs a bounded width — it makes the span `inline-block` at `max-width: 100%`.
  */
 export declare const Text: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+    style?: CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }, {
     $color?: string;
-    $uppercase?: boolean;
+    $textAlign?: CSSProperties["textAlign"];
+    $textTransform?: CSSProperties["textTransform"];
     $ellipsis?: boolean;
     $variant?: TypographyVariant;
 }>> & string;

package/text/Text.js

@@ -1,18 +1,20 @@
 import styled from 'styled-components';
 import { variants } from '../map';
 /**
- * Inline text in any typography variant: `$variant`, plus `$color`, `$uppercase` and `$ellipsis`.
+ * Inline text in any typography variant: `$variant`, plus `$color`, `$textAlign`, `$textTransform` and `$ellipsis`.
  * `$ellipsis` needs a bounded width — it makes the span `inline-block` at `max-width: 100%`.
  */
 export const Text = styled.span.withConfig({
   displayName: "Text",
   componentId: "sc-s3ssy9-0"
-})(["", " ", " ", " ", ""], ({
+})(["", " ", " ", " ", " ", ""], ({
   $color
 }) => $color && `color: ${$color};`, ({
   $variant = 'standard'
 }) => variants[$variant], ({
-  $uppercase
-}) => $uppercase && 'text-transform: uppercase;', ({
+  $textTransform
+}) => $textTransform && `text-transform: ${$textTransform};`, ({
   $ellipsis
-}) => $ellipsis && 'text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block; max-width: 100%;');
+}) => $ellipsis && 'text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block; max-width: 100%;', ({
+  $textAlign
+}) => $textAlign && `text-align: ${$textAlign}; display: block;`);