@pushwoosh/dumb-components 3.5.0 → 4.0.0

package/Button/styles.js

@@ -1,22 +1,33 @@
-import styled from 'styled-components';
-import { Color, FontSize, LineHeight, ShapeRadius, FontWeight, UnitSize } from '@pushwoosh/kit-constants';
-import { colors, createColors } from './colors';
+import styled, { css } from 'styled-components';
+import { Color, ShapeRadius, UnitSize } from '@pushwoosh/kit-constants';
+import { colorStyles } from './colors';
+import { geometryBySizeAndView } from './constants';
 export const ButtonIcon = styled.div.withConfig({
   displayName: "ButtonIcon",
   componentId: "sc-qltvdl-0"
-})(["flex:0 0 auto;"]);
+})(["display:flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:var(--btn-icon-slot);"]);
 export const ButtonContent = styled.div.withConfig({
   displayName: "ButtonContent",
   componentId: "sc-qltvdl-1"
-})(["display:grid;justify-content:start;& > div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}&:first-child{justify-content:center;}&:first-child:last-child{padding-left:6px;padding-right:6px;}&:last-child:not(:first-child){padding-right:6px;}&:first-child:not(:last-child){padding-left:6px;}"]);
+})(["display:grid;justify-content:start;padding:0 var(--btn-label-padding);& > div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}&:first-child{justify-content:center;}"]);
 export const ButtonSpinner = styled.div.withConfig({
   displayName: "ButtonSpinner",
   componentId: "sc-qltvdl-2"
 })(["position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;"]);
+function geometryVars(geometry) {
+  return css(["--btn-height:", ";--btn-border:", ";--btn-padding:", ";--btn-label-padding:", ";--btn-gap:", ";--btn-icon-slot:", ";font-size:", ";line-height:", ";font-weight:", ";text-transform:", ";"], geometry.height, geometry.border, geometry.padding, geometry.labelPadding, geometry.gap, geometry.iconSlot, geometry.fontSize, geometry.lineHeight, geometry.fontWeight, geometry.textTransform);
+}
+const ghostCompactHitArea = css(["&::before{content:'';position:absolute;inset:calc((var(--btn-height) - ", ") / 2) 0;}"], UnitSize.COMPACT_HEIGHT);
 export const ButtonBox = styled.button.withConfig({
   displayName: "ButtonBox",
   componentId: "sc-qltvdl-3"
-})(["position:relative;display:inline-grid;align-items:center;grid-template-columns:", ";gap:4px;appearance:none !important;border:1px solid transparent;border-radius:", ";font-size:", ";line-height:", ";text-decoration:none;cursor:", ";user-select:none;&:hover{text-decoration:none;}&:focus{outline:none;}&:active{pointer-events:", ";}& ", "{opacity:", ";}"], props => `${props.$hasLeftIcon ? 'auto ' : ''}${props.$hasContent ? '1fr' : ''}${props.$hasRightIcon ? ' auto' : ''}`, ShapeRadius.CONTROL, FontSize.REGULAR, LineHeight.REGULAR, props => props.$isDisabled || props.$isLoading ? 'not-allowed!important' : 'pointer', props => props.$isDisabled || props.$isLoading ? 'none' : 'auto', /* sc-selector */ButtonContent, ({
+})(["", " position:relative;display:inline-grid;align-items:center;grid-template-columns:", ";gap:var(--btn-gap);box-sizing:border-box;height:var(--btn-height);padding:0 calc(var(--btn-padding) - var(--btn-border));appearance:none !important;border-style:solid;border-width:var(--btn-border) var(--btn-border-right,var(--btn-border)) var(--btn-border) var(--btn-border-left,var(--btn-border));border-radius:var(--btn-radius-left,", ") var(--btn-radius-right,", ") var(--btn-radius-right,", ") var(--btn-radius-left,", ");text-decoration:none;cursor:", ";user-select:none;&:hover{text-decoration:none;}&:focus{outline:none;}&:active{pointer-events:", ";}", " & ", "{opacity:", ";}", ""], ({
+  $size,
+  $view
+}) => geometryVars(geometryBySizeAndView[$size][$view]), props => [props.$hasLeftIcon && 'auto', props.$hasContent && 'minmax(0, 1fr)', props.$hasRightIcon && 'auto'].filter(Boolean).join(' '), ShapeRadius.CONTROL, ShapeRadius.CONTROL, ShapeRadius.CONTROL, ShapeRadius.CONTROL, props => props.$isDisabled || props.$isLoading ? 'not-allowed!important' : 'pointer', props => props.$isDisabled || props.$isLoading ? 'none' : 'auto', ({
+  $size,
+  $view
+}) => $size === 'compact' && $view === 'ghost' && ghostCompactHitArea, /* sc-selector */ButtonContent, ({
   $hideContent,
   $isLoading
 }) => {
@@ -24,85 +35,17 @@ export const ButtonBox = styled.button.withConfig({
     return 0;
   }
   return $isLoading ? 0.5 : 1;
-});
-// danger ghost --------------
-const dangerGhostColors = createColors(colors.danger.ghost);
-export const ButtonBoxDangerGhostCompact = styled(ButtonBox).withConfig({
-  displayName: "ButtonBoxDangerGhostCompact",
-  componentId: "sc-qltvdl-4"
-})(["height:16px;padding:0;font-size:", ";font-weight:", ";text-transform:uppercase;& ", "{padding:0;}", ";--danger-ghost-hover-bg-color:transparent;"], FontSize.SMALL, FontWeight.BOLD, /* sc-selector */ButtonContent, /* sc-custom "display: none;" */dangerGhostColors);
-export const ButtonBoxDangerGhostField = styled(ButtonBox).withConfig({
-  displayName: "ButtonBoxDangerGhostField",
-  componentId: "sc-qltvdl-5"
-})(["height:", ";padding:0 calc(6px - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, FontWeight.MEDIUM, /* sc-custom "display: none;" */dangerGhostColors);
-// danger shape --------------
-const dangerShapeColors = createColors(colors.danger.shape);
-export const ButtonBoxDangerShapeCompact = styled(ButtonBox).withConfig({
-  displayName: "ButtonBoxDangerShapeCompact",
-  componentId: "sc-qltvdl-6"
-})(["height:28px;padding:0 calc(6px - 1px);font-size:", ";line-height:", ";font-weight:", ";text-transform:uppercase;", ";"], FontSize.SMALL, LineHeight.SMALL, FontWeight.BOLD, /* sc-custom "display: none;" */dangerShapeColors);
-export const ButtonBoxDangerShapeField = styled(ButtonBox).withConfig({
-  displayName: "ButtonBoxDangerShapeField",
-  componentId: "sc-qltvdl-7"
-})(["height:", ";padding:0 calc(6px - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, FontWeight.MEDIUM, /* sc-custom "display: none;" */dangerShapeColors);
-// primary shape --------------
-const primaryShapeColors = createColors(colors.primary.shape);
-export const ButtonBoxPrimaryShapeCompact = styled(ButtonBox).withConfig({
-  displayName: "ButtonBoxPrimaryShapeCompact",
-  componentId: "sc-qltvdl-8"
-})(["height:28px;padding:0 calc(6px - 1px);font-size:", ";line-height:", ";font-weight:", ";text-transform:uppercase;", ";"], FontSize.SMALL, LineHeight.SMALL, FontWeight.BOLD, /* sc-custom "display: none;" */primaryShapeColors);
-export const ButtonBoxPrimaryShapeField = styled(ButtonBox).withConfig({
-  displayName: "ButtonBoxPrimaryShapeField",
-  componentId: "sc-qltvdl-9"
-})(["height:", ";padding:0 calc(6px - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, FontWeight.MEDIUM, /* sc-custom "display: none;" */primaryShapeColors);
-// primary ghost --------------
-const primaryGhostColors = createColors(colors.primary.ghost);
-export const ButtonBoxPrimaryGhostCompact = styled(ButtonBox).withConfig({
-  displayName: "ButtonBoxPrimaryGhostCompact",
-  componentId: "sc-qltvdl-10"
-})(["height:", ";padding:0;font-size:", ";line-height:", ";font-weight:", ";text-transform:uppercase;& ", "{padding:4px 0;}", ";--primary-ghost-hover-bg-color:transparent;"], UnitSize.COMPACT_HEIGHT, FontSize.SMALL, LineHeight.SMALL, FontWeight.BOLD, /* sc-selector */ButtonContent, /* sc-custom "display: none;" */primaryGhostColors);
-export const ButtonBoxPrimaryGhostField = styled(ButtonBox).withConfig({
-  displayName: "ButtonBoxPrimaryGhostField",
-  componentId: "sc-qltvdl-11"
-})(["height:", ";padding:0 calc(6px - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, FontWeight.MEDIUM, /* sc-custom "display: none;" */primaryGhostColors);
-// secondary ghost --------------
-const secondaryGhostColors = createColors(colors.secondary.ghost);
-export const ButtonBoxSecondaryGhostCompact = styled(ButtonBox).withConfig({
-  displayName: "ButtonBoxSecondaryGhostCompact",
-  componentId: "sc-qltvdl-12"
-})(["height:", ";padding:0;font-size:", ";line-height:", ";font-weight:", ";text-transform:uppercase;& ", "{padding:4px 0;}", ";--secondary-ghost-base-color:", ";--secondary-ghost-hover-bg-color:transparent;"], UnitSize.COMPACT_HEIGHT, FontSize.SMALL, LineHeight.SMALL, FontWeight.BOLD, /* sc-selector */ButtonContent, /* sc-custom "display: none;" */secondaryGhostColors, Color.SOFT);
-export const ButtonBoxSecondaryGhostField = styled(ButtonBox).withConfig({
-  displayName: "ButtonBoxSecondaryGhostField",
-  componentId: "sc-qltvdl-13"
-})(["height:", ";padding:0 calc(6px - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, FontWeight.MEDIUM, /* sc-custom "display: none;" */secondaryGhostColors);
-// secondary shape --------------
-const secondaryShapeColors = createColors(colors.secondary.shape);
-export const ButtonBoxSecondaryShapeCompact = styled(ButtonBox).withConfig({
-  displayName: "ButtonBoxSecondaryShapeCompact",
-  componentId: "sc-qltvdl-14"
-})(["height:28px;padding:0 calc(6px - 1px);font-size:", ";line-height:", ";font-weight:", ";text-transform:uppercase;", ";"], FontSize.SMALL, LineHeight.SMALL, FontWeight.MEDIUM, /* sc-custom "display: none;" */secondaryShapeColors);
-export const ButtonBoxSecondaryShapeField = styled(ButtonBox).withConfig({
-  displayName: "ButtonBoxSecondaryShapeField",
-  componentId: "sc-qltvdl-15"
-})(["height:", ";padding:0 calc(6px - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, FontWeight.MEDIUM, /* sc-custom "display: none;" */secondaryShapeColors);
+}, ({
+  $color,
+  $view,
+  $size
+}) => colorStyles[$color][$view][$size]);
 export const RemoveButtonBox = styled.button.withConfig({
   displayName: "RemoveButtonBox",
-  componentId: "sc-qltvdl-16"
+  componentId: "sc-qltvdl-4"
 })(["width:", ";height:", ";padding:0;appearance:none !important;border:none;background:transparent;cursor:pointer;color:", ";&:hover{color:", ";}&:active{color:", ";}"], UnitSize.ICON_SMALL, UnitSize.ICON_SMALL, Color.PHANTOM, Color.DANGER_HOVER, Color.DANGER_PRESSED);
 ButtonBox.displayName = 'ButtonBox';
 ButtonIcon.displayName = 'ButtonIcon';
 ButtonContent.displayName = 'ButtonContent';
 ButtonSpinner.displayName = 'ButtonSpinner';
-ButtonBoxDangerGhostCompact.displayName = 'ButtonBoxDangerGhostCompact';
-ButtonBoxDangerGhostField.displayName = 'ButtonBoxDangerGhostField';
-ButtonBoxDangerShapeCompact.displayName = 'ButtonBoxDangerShapeCompact';
-ButtonBoxDangerShapeField.displayName = 'ButtonBoxDangerShapeField';
-ButtonBoxPrimaryGhostCompact.displayName = 'ButtonBoxPrimaryGhostCompact';
-ButtonBoxPrimaryGhostField.displayName = 'ButtonBoxPrimaryGhostField';
-ButtonBoxPrimaryShapeCompact.displayName = 'ButtonBoxPrimaryShapeCompact';
-ButtonBoxPrimaryShapeField.displayName = 'ButtonBoxPrimaryShapeField';
-ButtonBoxSecondaryGhostCompact.displayName = 'ButtonBoxSecondaryGhostCompact';
-ButtonBoxSecondaryGhostField.displayName = 'ButtonBoxSecondaryGhostField';
-ButtonBoxSecondaryShapeCompact.displayName = 'ButtonBoxSecondaryShapeCompact';
-ButtonBoxSecondaryShapeField.displayName = 'ButtonBoxSecondaryShapeField';
 RemoveButtonBox.displayName = 'RemoveButtonBox';

package/Button/types.d.ts

@@ -1,14 +1,20 @@
 import type { JSX, ReactNode, Ref, ComponentType } from 'react';
+/** Visual intent of a {@link Button}. */
+export type ButtonColor = 'primary' | 'secondary' | 'danger';
+/** Height preset of a {@link Button}. */
+export type ButtonSize = 'field' | 'compact';
+/** Surface style of a {@link Button}. */
+export type ButtonView = 'shape' | 'ghost';
 /** Props shared by every {@link Button} variant, regardless of the rendered element. */
 export type RequiredButtonProps = {
     /** Ref forwarded to the underlying element; prefer the typed `boxRef` on the variant props. */
     readonly boxRef?: any;
     /** Visual intent: `primary` (main action), `secondary` (neutral), `danger` (destructive). */
-    readonly color: 'primary' | 'secondary' | 'danger';
+    readonly color: ButtonColor;
     /** Height preset: `field` (default, form-line height) or `compact` (denser). */
-    readonly size?: 'field' | 'compact';
+    readonly size?: ButtonSize;
     /** Surface style: `shape` (filled, default) or `ghost` (transparent). */
-    readonly view?: 'shape' | 'ghost';
+    readonly view?: ButtonView;
     /** Extra CSS class applied to the button element. */
     readonly className?: string;
     /** Disable interaction and render the disabled state. */

package/Calendar/CalendarMonthSlider/styles.js

@@ -37,4 +37,4 @@ export const NavButtonRight = styled.div.withConfig({
 export const StyledSelect = styled.select.withConfig({
   displayName: "StyledSelect",
   componentId: "sc-1qqlxvi-7"
-})(["appearance:none;background:transparent;border:none;padding:0;height:", ";cursor:pointer;color:", ";font-family:", ";font-size:", ";font-weight:", ";line-height:", ";text-transform:uppercase;&:hover{color:", ";}&:focus{outline:none;}"], UnitSize.COMPACT_HEIGHT, Color.SOFT, FontFamily.MAIN, FontSize.HEADING5, FontWeight.MEDIUM, LineHeight.HEADING5, Color.PRIMARY_HOVER);
+})(["appearance:none;background:transparent;border:none;padding:0;height:", ";cursor:pointer;color:", ";font-family:", ";font-size:", ";font-weight:", ";line-height:", ";text-transform:uppercase;&:hover{color:", ";}&:focus{outline:none;}"], UnitSize.COMPACT_HEIGHT, Color.SOFT, FontFamily.MAIN, FontSize.HEADING4, FontWeight.MEDIUM, LineHeight.HEADING4, Color.PRIMARY_HOVER);

package/Calendar/CalendarSuperForm/components/CalendarTimeAndTimezoneSection/CalendarTimeAndTimezoneSection.js

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
 import { Columns, Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { TimeIcon } from '@pushwoosh/kit-icons';
-import { H5, Text } from '@pushwoosh/kit-typography';
+import { H4, Text } from '@pushwoosh/kit-typography';
 import { Button } from '../../../../Button';
 import { formatTimezoneShort } from '../../../../helpers/timezones';
 import { extendPeriodStruct, formatTwoDigitNumber } from '../../../helpers';
@@ -82,7 +82,8 @@ export const CalendarTimeAndTimezoneSection = ({
         "$sizes": "1fr max-content",
         "$gap": 8,
         "$alignItems": "center",
-        children: [_jsx(H5, {
+        children: [_jsx(H4, {
+          "$textTransform": "uppercase",
           children: _jsx(Lang, {
             message: "DUMB.CALENDAR.TIME_RANGE"
           })

package/CardMetric/styles.js

@@ -49,7 +49,7 @@ export const CardInfo = styled.div.withConfig({
 export const CardMetricValue = styled.div.withConfig({
   displayName: "CardMetricValue",
   componentId: "sc-17snd37-5"
-})(["display:flex;align-items:start;justify-content:start;font-size:", ";font-weight:", ";gap:4px;"], FontSize.HEADING1, FontWeight.MEDIUM);
+})(["display:flex;align-items:start;justify-content:start;font-size:", ";font-weight:", ";gap:4px;"], FontSize.DISPLAY, FontWeight.MEDIUM);
 export const CardExtraMetric = styled.div.withConfig({
   displayName: "CardExtraMetric",
   componentId: "sc-17snd37-6"

package/CrashScreen/styles.d.ts

@@ -8,6 +8,7 @@ export declare const IconBox: import("styled-components/dist/types").IStyledComp
 export declare const TitleBox: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     readonly boxRef?: import("react").Ref<HTMLHeadingElement>;
     readonly children: import("react").ReactNode;
+    readonly $textTransform?: import("react").CSSProperties["textTransform"];
 }, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string & Omit<typeof H1, keyof import("react").Component<any, {}, any>>;

package/Drawer/components/DrawerContent/styles.js

@@ -9,7 +9,7 @@ export const DrawerHeader = styled.div.withConfig({
 export const DrawerTitle = styled.h2.withConfig({
   displayName: "DrawerTitle",
   componentId: "sc-1jmui00-1"
-})(["display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;font-size:", ";font-weight:", ";line-height:", ";letter-spacing:0;margin:0;"], FontSize.HEADING2, FontWeight.BOLD, LineHeight.HEADING2);
+})(["display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;font-size:", ";font-weight:", ";line-height:", ";letter-spacing:0;margin:0;"], FontSize.HEADING1, FontWeight.BOLD, LineHeight.HEADING1);
 /** Scrollable main content area of a {@link Drawer}. */
 export const DrawerBody = styled.div.withConfig({
   displayName: "DrawerBody",

package/DropdownMenu/components/DropdownMenuSection/DropdownMenuSection.js

@@ -22,7 +22,7 @@ export const DropdownMenuSection = ({
     children: [title && _jsx(Horizontal, {
       "$padding": "8px 12px",
       children: _jsx(Text, {
-        "$variant": "h5",
+        "$variant": "h4",
         "$color": Color.LOCKED,
         "$textTransform": "uppercase",
         children: title

package/EditableField/styles.d.ts

@@ -1,4 +1,4 @@
-import { H5 } from '@pushwoosh/kit-typography';
+import { H4 } from '@pushwoosh/kit-typography';
 export declare const FieldBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }, {
@@ -7,9 +7,10 @@ export declare const FieldBox: import("styled-components/dist/types").IStyledCom
 export declare const TitleBox: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     readonly boxRef?: import("react").Ref<HTMLHeadingElement>;
     readonly children: import("react").ReactNode;
+    readonly $textTransform?: import("react").CSSProperties["textTransform"];
 }, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}> & string & Omit<typeof H5, keyof import("react").Component<any, {}, any>>;
+}> & string & Omit<typeof H4, keyof import("react").Component<any, {}, any>>;
 export declare const ButtonsGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }, {

package/EditableField/styles.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { Color, ShapeRadius, FontSize, LineHeight } from '@pushwoosh/kit-constants';
-import { H5 } from '@pushwoosh/kit-typography';
+import { H4 } from '@pushwoosh/kit-typography';
 export const FieldBox = styled.div.withConfig({
   displayName: "FieldBox",
   componentId: "sc-qxboek-0"
@@ -13,10 +13,10 @@ export const FieldBox = styled.div.withConfig({
 }) => $open ? Color.CLEAR : Color.PRIMARY_HOVER, ({
   $open
 }) => $open ? Color.MAIN : 'rgba(153, 201, 255, 0.14)');
-export const TitleBox = styled(H5).withConfig({
+export const TitleBox = styled(H4).withConfig({
   displayName: "TitleBox",
   componentId: "sc-qxboek-1"
-})(["color:", ";margin-bottom:4px;"], Color.MAIN);
+})(["text-transform:uppercase;color:", ";margin-bottom:4px;"], Color.MAIN);
 export const ButtonsGroup = styled.div.withConfig({
   displayName: "ButtonsGroup",
   componentId: "sc-qxboek-2"

package/ExportResult/styles.d.ts

@@ -1,4 +1,4 @@
-import { H5 } from '@pushwoosh/kit-typography';
+import { H4 } from '@pushwoosh/kit-typography';
 export declare const MainInfoContainer: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("styled-components").FastOmit<Omit<Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
@@ -48,9 +48,10 @@ export declare const MainInfoContainer: import("styled-components/dist/types").I
 export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     readonly boxRef?: import("react").Ref<HTMLHeadingElement>;
     readonly children: import("react").ReactNode;
+    readonly $textTransform?: import("react").CSSProperties["textTransform"];
 }, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}> & string & Omit<typeof H5, keyof import("react").Component<any, {}, any>>;
+}> & string & Omit<typeof H4, keyof import("react").Component<any, {}, any>>;
 export declare const Subtitle: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;

package/ExportResult/styles.js

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 import { Color, FontSize, ShapeRadius } from '@pushwoosh/kit-constants';
 import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
-import { H5 } from '@pushwoosh/kit-typography';
+import { H4 } from '@pushwoosh/kit-typography';
 const colorMixin = css(["color:", ";background:", ";"], ({
   $type
 }) => {
@@ -57,7 +57,7 @@ export const MainInfoContainer = styled(Vertical).withConfig({
   displayName: "MainInfoContainer",
   componentId: "sc-1vfe25t-0"
 })(["flex:1;overflow:hidden;"]);
-export const Title = styled(H5).withConfig({
+export const Title = styled(H4).withConfig({
   displayName: "Title",
   componentId: "sc-1vfe25t-1"
 })(["font-size:", ";text-transform:uppercase;"], FontSize.SMALL);

package/FieldBox/FieldBox.js

@@ -37,7 +37,7 @@ export function FieldBox(props) {
       children: [_jsxs(TitleGroup, {
         children: [_jsxs(TitleBox, {
           children: [_jsx(Text, {
-            "$variant": "h5",
+            "$variant": "h4",
             children: title
           }), isOptional && _jsx(Text, {
             "$color": Color.LOCKED,

package/InboxPreview/components/InboxCellCarousel/styles.js

@@ -11,7 +11,7 @@ export const CarouselViewport = styled(Vertical).attrs({
 })(["cursor:pointer;"]);
 export const SlideCaption = styled(ClampText).attrs({
   $color: Color.CLEAR,
-  $variant: 'h5'
+  $variant: 'h4'
 }).withConfig({
   displayName: "SlideCaption",
   componentId: "sc-1fw4dgw-1"

package/InboxPreview/components/InboxIOSCell/InboxIOSCell.js

@@ -26,7 +26,7 @@ export function InboxIOSCell(props) {
       children: [_jsx(Text, {
         "$color": Color.MAIN,
         "$ellipsis": true,
-        "$variant": "h5",
+        "$variant": "h4",
         children: title
       }), _jsx(Vertical, {
         "$flex": 1,

package/InboxPreview/components/InboxWebCell/InboxWebCell.js

@@ -28,7 +28,7 @@ export function InboxWebCell(props) {
       children: [_jsx(Text, {
         "$color": Color.MAIN,
         "$ellipsis": true,
-        "$variant": "h5",
+        "$variant": "h4",
         children: title
       }), unread && _jsx(Vertical, {
         "$bgColor": Color.BRIGHT,

package/InboxPreview/constants.js

@@ -18,16 +18,16 @@ export const INBOX_AVATAR = {
   ios: {
     size: 30,
     radius: '50%',
-    initialVariant: 'h5'
+    initialVariant: 'h4'
   },
   android: {
     size: 40,
     radius: ShapeRadius.SECTION,
-    initialVariant: 'h4'
+    initialVariant: 'h3'
   },
   web: {
     size: 52,
     radius: ShapeRadius.SECTION,
-    initialVariant: 'h3'
+    initialVariant: 'h2'
   }
 };

package/InputFile/styles.js

@@ -11,7 +11,7 @@ export const InputFileButtonStyled = styled.div.withConfig({
 export const InputFileInputStyled = styled.input.withConfig({
   displayName: "InputFileInputStyled",
   componentId: "sc-8mwin7-2"
-})(["width:100%;height:36px;padding:0 16px;color:#555;font-size:", ";font-family:", ";line-height:1.4;background:", ";border:1px solid ", ";border-radius:4px;box-sizing:border-box;outline:none;caret-color:", ";&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{appearance:none;}&:focus{border-color:", ";}"], FontSize.HEADING4, FontFamily.MAIN, Color.CLEAR, ({
+})(["width:100%;height:36px;padding:0 16px;color:#555;font-size:", ";font-family:", ";line-height:1.4;background:", ";border:1px solid ", ";border-radius:4px;box-sizing:border-box;outline:none;caret-color:", ";&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{appearance:none;}&:focus{border-color:", ";}"], FontSize.HEADING3, FontFamily.MAIN, Color.CLEAR, ({
   color
 }) => color, Color.BRIGHT, Color.BRIGHT);
 export const InputFileInputHiddenStyled = styled(InputFileInputStyled).withConfig({

package/Modal/components/ModalTitle/styles.d.ts

@@ -1,10 +1,11 @@
-import { H3 } from '@pushwoosh/kit-typography';
+import { H2 } from '@pushwoosh/kit-typography';
 export declare const ModalTitleBox: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     readonly boxRef?: import("react").Ref<HTMLHeadingElement>;
     readonly children: import("react").ReactNode;
+    readonly $textTransform?: import("react").CSSProperties["textTransform"];
 }, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}> & string & Omit<typeof H3, keyof import("react").Component<any, {}, any>>;
+}> & string & Omit<typeof H2, keyof import("react").Component<any, {}, any>>;
 export declare const ModalTitleText: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;

package/Modal/components/ModalTitle/styles.js

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 import { FlexContainer } from '@pushwoosh/kit-helpers';
-import { H3 } from '@pushwoosh/kit-typography';
+import { H2 } from '@pushwoosh/kit-typography';
 const TITLE_GAP = '8px';
 const CLOSE_BOX_SIZE = 24;
-export const ModalTitleBox = styled(H3).withConfig({
+export const ModalTitleBox = styled(H2).withConfig({
   displayName: "ModalTitleBox",
   componentId: "sc-8qbijb-0"
 })(["display:flex;align-items:center;gap:", ";"], TITLE_GAP);

package/NativeRichMediaPreview/components/NativeRichMediaRewardPanel/styles.d.ts

@@ -22,7 +22,7 @@ export declare const CodeText: import("styled-components/dist/types").IStyledCom
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
         [key: `--${string}`]: string | number | undefined;
     }) | undefined;
-}, "children" | "key" | "slot" | "style" | "title" | "ref" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "$color" | "$variant" | "as" | "forwardedAs" | "$textAlign" | "$textTransform" | "$ellipsis"> & Partial<Pick<Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+}, "children" | "key" | "slot" | "style" | "title" | "ref" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "$color" | "$variant" | "as" | "forwardedAs" | "$textTransform" | "$textAlign" | "$ellipsis"> & Partial<Pick<Omit<import("styled-components").FastOmit<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;
 }, {
     $color?: string;
@@ -37,6 +37,6 @@ export declare const CodeText: import("styled-components/dist/types").IStyledCom
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
         [key: `--${string}`]: string | number | undefined;
     }) | undefined;
-}, "children" | "key" | "slot" | "style" | "title" | "ref" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "$color" | "$variant" | "as" | "forwardedAs" | "$textAlign" | "$textTransform" | "$ellipsis">>> & string;
+}, "children" | "key" | "slot" | "style" | "title" | "ref" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "$color" | "$variant" | "as" | "forwardedAs" | "$textTransform" | "$textAlign" | "$ellipsis">>> & string;
 export declare const RewardTitle: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("../NativeRichMediaTitle").NativeRichMediaTitleProps, "children" | "className" | "$color" | "$size" | "$textAlign" | "$clamp" | "$marginTop" | "$truncate"> & Partial<Pick<import("../NativeRichMediaTitle").NativeRichMediaTitleProps, "children" | "className" | "$color" | "$size" | "$textAlign" | "$clamp" | "$marginTop" | "$truncate">>> & string & Omit<typeof NativeRichMediaTitle, keyof import("react").Component<any, {}, any>>;
 export declare const RewardMessage: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("../NativeRichMediaText").NativeRichMediaTextProps, "children" | "className" | "$color" | "$clamp" | "$marginTop" | "$align"> & Partial<Pick<import("../NativeRichMediaText").NativeRichMediaTextProps, "children" | "className" | "$color" | "$clamp" | "$marginTop" | "$align">>> & string & Omit<typeof NativeRichMediaText, keyof import("react").Component<any, {}, any>>;

package/NativeRichMediaPreview/components/NativeRichMediaRewardPanel/styles.js

@@ -13,7 +13,7 @@ export const CodeBox = styled.div.withConfig({
   $marginTop
 }) => $marginTop !== undefined ? `margin-top: ${$marginTop}px;` : '');
 export const CodeText = styled(Text).attrs({
-  $variant: 'h3'
+  $variant: 'h2'
 }).withConfig({
   displayName: "CodeText",
   componentId: "sc-z83bc4-1"