@pushwoosh/dumb-components 4.5.0 → 4.5.1

package/PageHeader/components/PageHeader/PageHeader.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { UnitSize } from '@pushwoosh/kit-constants';
-import { Columns, Horizontal } from '@pushwoosh/kit-helpers';
+import { Columns } from '@pushwoosh/kit-helpers';
 import { ArrowRoundIcon } from '@pushwoosh/kit-icons';
 import { H1 } from '@pushwoosh/kit-typography';
 import { Button } from '../../../Button';
 import { PageHeaderError } from '../PageHeaderError';
-import { RootBox, BackButton, TitleBox, TitleWithExtraBox, TitleWrapBox, TitleExtraBox, DescriptionBox, ActionsBox, MoreActionsBox } from './styles';
+import { RootBox, BackButton, TitleBox, TitleWithExtraBox, TitleWrapBox, TitleCell, TitleExtraBox, DescriptionBox, ActionsBox, MoreActionsBox } from './styles';
 /**
  * Page-level header with a title, optional back arrow, description, inline error bar
  * and submit/cancel/extra actions.
@@ -49,9 +48,7 @@ export function PageHeader(props) {
       "$gap": 24,
       children: [titleExtra ? _jsxs(TitleWithExtraBox, {
         children: [backButton, _jsxs(TitleWrapBox, {
-          children: [_jsx(Horizontal, {
-            "$minHeight": UnitSize.FIELD_HEIGHT,
-            "$alignItems": "center",
+          children: [_jsx(TitleCell, {
             children: _jsx(H1, {
               children: title
             })

package/PageHeader/components/PageHeader/styles.d.ts

@@ -18,6 +18,9 @@ export declare const TitleWithExtraBox: import("styled-components/dist/types").I
         [key: `--${string}`]: string | number | undefined;
     }) | undefined;
 }> & string;
+export declare const TitleCell: 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;
 export declare const TitleWrapBox: 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/PageHeader/components/PageHeader/styles.js

@@ -19,25 +19,29 @@ export const TitleWithExtraBox = styled(TitleBox).withConfig({
   displayName: "TitleWithExtraBox",
   componentId: "sc-1qwo99q-3"
 })(["align-items:flex-start;flex-shrink:1;min-width:0;"]);
+export const TitleCell = styled.div.withConfig({
+  displayName: "TitleCell",
+  componentId: "sc-1qwo99q-4"
+})(["display:flex;align-items:center;min-height:", ";"], UnitSize.FIELD_HEIGHT);
 export const TitleWrapBox = styled.div.withConfig({
   displayName: "TitleWrapBox",
-  componentId: "sc-1qwo99q-4"
-})(["display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:calc(8px - (", " - ", ") / 2);min-width:0;&:has([", "]){--page-header-extra-inset:", "px;}&:has([", "]){flex-wrap:nowrap;}"], UnitSize.FIELD_HEIGHT, TITLE_LINE_HEIGHT, PAGE_HEADER_INSET_ATTRIBUTE, STEP_CELL_INSET, PAGE_HEADER_RENAME_ATTRIBUTE);
+  componentId: "sc-1qwo99q-5"
+})(["display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:calc(8px - (", " - ", ") / 2);min-width:0;&:has([", "]){--page-header-extra-inset:", "px;}&:has([", "]){flex-wrap:nowrap;& > ", "{flex-shrink:0;}}"], UnitSize.FIELD_HEIGHT, TITLE_LINE_HEIGHT, PAGE_HEADER_INSET_ATTRIBUTE, STEP_CELL_INSET, PAGE_HEADER_RENAME_ATTRIBUTE, TitleCell);
 export const TitleExtraBox = styled.div.withConfig({
   displayName: "TitleExtraBox",
-  componentId: "sc-1qwo99q-5"
+  componentId: "sc-1qwo99q-6"
 })(["display:flex;align-items:center;min-width:0;margin-left:calc(-1 * var(--page-header-extra-inset,0px));"]);
 export const ActionsBox = styled.div.withConfig({
   displayName: "ActionsBox",
-  componentId: "sc-1qwo99q-6"
+  componentId: "sc-1qwo99q-7"
 })(["display:flex;justify-content:flex-end;gap:8px;"]);
 export const MoreActionsBox = styled.div.withConfig({
   displayName: "MoreActionsBox",
-  componentId: "sc-1qwo99q-7"
+  componentId: "sc-1qwo99q-8"
 })(["display:flex;margin-right:", ";"], ({
   $hasActions
 }) => $hasActions ? '16px' : '0');
 export const DescriptionBox = styled(Paragraph).withConfig({
   displayName: "DescriptionBox",
-  componentId: "sc-1qwo99q-8"
+  componentId: "sc-1qwo99q-9"
 })(["margin-top:16px;"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",