@synerise/ds-page-header 0.14.91 → 0.14.93

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.14.93](https://github.com/synerise/synerise-design/compare/@synerise/ds-page-header@0.14.92...@synerise/ds-page-header@0.14.93) (2024-01-17)
+
+**Note:** Version bump only for package @synerise/ds-page-header
+
+
+
+
+
+## [0.14.92](https://github.com/synerise/synerise-design/compare/@synerise/ds-page-header@0.14.91...@synerise/ds-page-header@0.14.92) (2024-01-15)
+
+**Note:** Version bump only for package @synerise/ds-page-header
+
+
+
+
+
 ## [0.14.91](https://github.com/synerise/synerise-design/compare/@synerise/ds-page-header@0.14.90...@synerise/ds-page-header@0.14.91) (2023-12-13)
 
 **Note:** Version bump only for package @synerise/ds-page-header

package/README.md

@@ -14,10 +14,11 @@ This component could be used as header of page with main title and navigation
 ## API
 
 | Property           | Description                              | Type                                                                    | Default |
-| -----------        | ---------------------------------------- | ------------------------                                                | ------- |
+| -----------        | ---------------------------------------- | ------------------------                                                |---------|
 | avatar             | Place for optional avatar component      | React.ReactNode                                                         | -       |
 | bar                | Place for optional node below header     | React.ReactNode                                                         | -       |
 | className          | Class added to the component             | string                                                                  | -       |
+| children           | The content of the component                    | React.ReactNode         | -       |
 | description        | Description of header                    | React.ReactNode / string                                                | -       |
 | goBackIcon         | Custom icon for "go back" button         | React.ReactNode                                                         | -       |
 | isolated           | Add horizontal line to separate content  | boolean                                                                 | `false` |

package/dist/PageHeader.d.ts

@@ -1,38 +1,3 @@
-import * as React from 'react';
-declare const _default: React.ForwardRefExoticComponent<{
-    title?: React.ReactNode;
-    className?: string | undefined;
-    children?: React.ReactNode;
-    rightSide?: React.ReactNode;
-    bar?: React.ReactNode;
-    tabs?: React.ReactNode;
-    avatar?: React.ReactNode;
-    description?: React.ReactNode;
-    more?: React.ReactNode;
-    onGoBack?: (() => void) | undefined;
-    goBackIcon?: React.ReactNode;
-    onClose?: (() => void) | undefined;
-    isolated?: boolean | undefined;
-    tooltip?: import("@synerise/ds-tooltip").TooltipProps | undefined;
-    tooltipIcon?: React.ReactNode;
-    handleTooltipClick?: (() => void) | undefined;
-    inlineEdit?: {
-        name?: string | undefined;
-        value: string | number;
-        maxLength?: number | undefined;
-        handleOnChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-        handleOnBlur?: React.FocusEventHandler<HTMLInputElement> | undefined;
-        handleOnEnterPress?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
-        placeholder?: string | undefined;
-        size: "small" | "normal";
-        style?: {
-            [key: string]: string | number;
-        } | undefined;
-        error?: boolean | undefined;
-        disabled?: boolean | undefined;
-        hideIcon?: boolean | undefined;
-    } | undefined;
-} & {
-    theme?: any;
-}>;
-export default _default;
+import { PageHeaderProps } from './PageHeader.types';
+declare const PageHeader: (props: PageHeaderProps) => JSX.Element;
+export default PageHeader;

package/dist/PageHeader.js

@@ -1,14 +1,13 @@
 import * as React from 'react';
-import { theme } from '@synerise/ds-core';
-import InlineEdit from '@synerise/ds-inline-edit/';
-import Icon, { CloseM, ArrowLeftM } from '@synerise/ds-icon';
-import Button from '@synerise/ds-button/';
-import { withTheme } from 'styled-components';
-import Tooltip from '@synerise/ds-tooltip';
 import * as S from './PageHeader.styles';
+import { PageHeaderBack } from './PageHeaderBack';
+import { PageHeaderInlineEdit } from './PageHeaderInlineEdit';
+import { PageHeaderClamp } from './PageHeaderClamp';
+import { PageHeaderRightSide } from './PageHeaderRightSide';
 
 var PageHeader = function PageHeader(props) {
-  var className = props.className,
+  var goBackIcon = props.goBackIcon,
+      className = props.className,
       onGoBack = props.onGoBack,
       onClose = props.onClose,
       children = props.children,
@@ -21,52 +20,26 @@ var PageHeader = function PageHeader(props) {
       inlineEdit = props.inlineEdit,
       more = props.more,
       avatar = props.avatar,
-      goBackIcon = props.goBackIcon,
       tooltip = props.tooltip,
       tooltipIcon = props.tooltipIcon,
       handleTooltipClick = props.handleTooltipClick;
-  var backIcon = goBackIcon || /*#__PURE__*/React.createElement(Icon, {
-    className: "page-header__back",
-    color: theme.palette['grey-600'],
-    component: /*#__PURE__*/React.createElement(ArrowLeftM, null),
-    size: 24
-  });
   return /*#__PURE__*/React.createElement(S.MainContainer, {
     isolated: isolated,
     className: (className || '') + " ds-page-header"
-  }, /*#__PURE__*/React.createElement(S.PageHeaderContainer, null, onGoBack && /*#__PURE__*/React.createElement(S.PageHeaderBack, null, /*#__PURE__*/React.createElement(Button, {
-    type: "ghost",
-    mode: "single-icon",
-    onClick: onGoBack
-  }, backIcon)), !!avatar && avatar, inlineEdit && /*#__PURE__*/React.createElement(S.PageHeaderInlineEdit, null, /*#__PURE__*/React.createElement(InlineEdit, {
-    input: {
-      name: inlineEdit.name,
-      value: inlineEdit.value,
-      maxLength: inlineEdit.maxLength,
-      onChange: inlineEdit.handleOnChange,
-      onBlur: inlineEdit.handleOnBlur,
-      onEnterPress: inlineEdit.handleOnEnterPress,
-      placeholder: inlineEdit.placeholder
-    },
-    size: inlineEdit.size,
-    error: inlineEdit.error,
-    disabled: inlineEdit.disabled,
-    hideIcon: inlineEdit.hideIcon,
-    style: inlineEdit.style
-  })), /*#__PURE__*/React.createElement(S.PageHeaderClamp, null, /*#__PURE__*/React.createElement(S.PageHeaderTitle, null, children || title), tooltip !== undefined && tooltipIcon && /*#__PURE__*/React.createElement(S.PageHeaderTooltipWraper, null, /*#__PURE__*/React.createElement(Tooltip, tooltip, /*#__PURE__*/React.createElement(Icon, {
-    component: tooltipIcon,
-    onClick: handleTooltipClick
-  })))), !!more && /*#__PURE__*/React.createElement(S.PageHeaderMore, null, more), !!description && /*#__PURE__*/React.createElement(S.PageHeaderDescription, null, description), /*#__PURE__*/React.createElement(S.PageHeaderRightSide, null, /*#__PURE__*/React.createElement("div", null, rightSide && rightSide, onClose && /*#__PURE__*/React.createElement(Button, {
-    type: "ghost",
-    mode: "single-icon"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    className: "page-header__close",
-    color: theme.palette['grey-500'],
-    component: /*#__PURE__*/React.createElement(CloseM, null),
-    size: 32,
-    onClick: onClose
-  }))))), !!tabs && /*#__PURE__*/React.createElement(S.PageHeaderTabsWrapper, null, tabs), !!bar && /*#__PURE__*/React.createElement(S.PageHeaderBar, null, bar));
-}; // @ts-ignore
+  }, /*#__PURE__*/React.createElement(S.PageHeaderContainer, null, onGoBack && /*#__PURE__*/React.createElement(PageHeaderBack, {
+    onGoBack: onGoBack,
+    goBackIcon: goBackIcon
+  }), !!avatar && avatar, inlineEdit && /*#__PURE__*/React.createElement(PageHeaderInlineEdit, {
+    inlineEdit: inlineEdit
+  }), /*#__PURE__*/React.createElement(PageHeaderClamp, {
+    tooltip: tooltip,
+    title: title,
+    tooltipIcon: tooltipIcon,
+    handleTooltipClick: handleTooltipClick
+  }, children), !!more && /*#__PURE__*/React.createElement(S.PageHeaderMore, null, more), !!description && /*#__PURE__*/React.createElement(S.PageHeaderDescription, null, description), /*#__PURE__*/React.createElement(PageHeaderRightSide, {
+    onClose: onClose,
+    rightSide: rightSide
+  })), !!tabs && /*#__PURE__*/React.createElement(S.PageHeaderTabsWrapper, null, tabs), !!bar && /*#__PURE__*/React.createElement(S.PageHeaderBar, null, bar));
+};
 
-
-export default withTheme(PageHeader);
+export default PageHeader;

package/dist/PageHeader.styles.d.ts

@@ -2,14 +2,8 @@ export declare const MainContainer: import("styled-components").StyledComponent<
     isolated?: boolean | undefined;
 }, never>;
 export declare const PageHeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PageHeaderBack: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PageHeaderRightSide: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PageHeaderDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PageHeaderClamp: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PageHeaderTooltipWraper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PageHeaderTitle: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const PageHeaderTabsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PageHeaderBar: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PageHeaderMore: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PageHeaderInlineEdit: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PageHeaderClose: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/PageHeader.styles.js

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { macro } from '@synerise/ds-typography';
 export var MainContainer = styled.div.withConfig({
   displayName: "PageHeaderstyles__MainContainer",
   componentId: "sc-1a87wfx-0"
@@ -10,61 +9,29 @@ export var PageHeaderContainer = styled.div.withConfig({
   displayName: "PageHeaderstyles__PageHeaderContainer",
   componentId: "sc-1a87wfx-1"
 })(["width:100%;min-height:80px;padding:24px;display:flex;align-items:center;align-content:center;"]);
-export var PageHeaderBack = styled.div.withConfig({
-  displayName: "PageHeaderstyles__PageHeaderBack",
-  componentId: "sc-1a87wfx-2"
-})(["margin-right:49px;display:flex;align-items:center;position:relative;&::after{content:'';position:absolute;width:1px;height:40px;right:-25px;background-color:", ";}&&{button{display:flex;align-items:center;padding:0 4px;}}"], function (props) {
-  return props.theme.palette['grey-300'];
-});
-export var PageHeaderRightSide = styled.div.withConfig({
-  displayName: "PageHeaderstyles__PageHeaderRightSide",
-  componentId: "sc-1a87wfx-3"
-})(["display:flex;flex:1 auto;justify-content:flex-end;> div{display:flex;flex:1;justify-content:flex-end;align-items:center;flex-direction:row;> *{margin-left:8px;}}"]);
 export var PageHeaderDescription = styled.div.withConfig({
   displayName: "PageHeaderstyles__PageHeaderDescription",
-  componentId: "sc-1a87wfx-4"
+  componentId: "sc-1a87wfx-2"
 })(["margin:0 24px;font-size:13px;line-height:18px;color:", ";"], function (props) {
   return props.theme.palette['grey-500'];
 });
-export var PageHeaderClamp = styled.div.withConfig({
-  displayName: "PageHeaderstyles__PageHeaderClamp",
-  componentId: "sc-1a87wfx-5"
-})(["", ";line-height:26px;display:flex;overflow:hidden;align-items:center;color:", ";align-items:center;"], macro.h600, function (props) {
-  return props.theme.palette['grey-800'];
-});
-export var PageHeaderTooltipWraper = styled.div.withConfig({
-  displayName: "PageHeaderstyles__PageHeaderTooltipWraper",
-  componentId: "sc-1a87wfx-6"
-})([".ds-icon{margin-left:8px;svg{color:", ";fill:", ";}}"], function (props) {
-  return props.theme.palette['grey-600'];
-}, function (props) {
-  return props.theme.palette['grey-600'];
-});
-export var PageHeaderTitle = styled.span.withConfig({
-  displayName: "PageHeaderstyles__PageHeaderTitle",
-  componentId: "sc-1a87wfx-7"
-})(["display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"]);
 export var PageHeaderTabsWrapper = styled.div.withConfig({
   displayName: "PageHeaderstyles__PageHeaderTabsWrapper",
-  componentId: "sc-1a87wfx-8"
-})(["padding:0 24px;&&& .ds-tabs{padding:0px;}"]);
+  componentId: "sc-1a87wfx-3"
+})(["padding:0 24px;&&& .ds-tabs{padding:0;}"]);
 export var PageHeaderBar = styled.div.withConfig({
   displayName: "PageHeaderstyles__PageHeaderBar",
-  componentId: "sc-1a87wfx-9"
+  componentId: "sc-1a87wfx-4"
 })(["padding:12px 24px;border-top:1px solid ", ";position:relative;top:-1px;"], function (props) {
   return props.theme.palette['grey-100'];
 });
 export var PageHeaderMore = styled.div.withConfig({
   displayName: "PageHeaderstyles__PageHeaderMore",
-  componentId: "sc-1a87wfx-10"
+  componentId: "sc-1a87wfx-5"
 })(["padding:0 24px;"]);
-export var PageHeaderInlineEdit = styled.div.withConfig({
-  displayName: "PageHeaderstyles__PageHeaderInlineEdit",
-  componentId: "sc-1a87wfx-11"
-})(["display:flex;margin-left:14px;"]);
 export var PageHeaderClose = styled.div.withConfig({
   displayName: "PageHeaderstyles__PageHeaderClose",
-  componentId: "sc-1a87wfx-12"
+  componentId: "sc-1a87wfx-6"
 })(["& div{margin-left:52px;display:flex;align-items:center;position:relative;&::before{content:'';position:absolute;width:1px;height:40px;left:-25px;background-color:", ";}}"], function (props) {
   return props.theme.palette['grey-300'];
 });

package/dist/PageHeaderBack/PageHeaderBack.d.ts

@@ -0,0 +1,4 @@
+import { PageHeaderProps } from 'PageHeader.types';
+type PageHeaderBackProps = Pick<PageHeaderProps, 'goBackIcon' | 'onGoBack'>;
+export declare const PageHeaderBack: ({ goBackIcon, onGoBack }: PageHeaderBackProps) => JSX.Element;
+export {};

package/dist/PageHeaderBack/PageHeaderBack.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { theme } from '@synerise/ds-core';
+import Button from '@synerise/ds-button';
+import Icon, { ArrowLeftM } from '@synerise/ds-icon';
+import * as S from './PageHeaderBack.styles';
+export var PageHeaderBack = function PageHeaderBack(_ref) {
+  var goBackIcon = _ref.goBackIcon,
+      onGoBack = _ref.onGoBack;
+  var backIcon = goBackIcon || /*#__PURE__*/React.createElement(Icon, {
+    className: "page-header__back",
+    color: theme.palette['grey-600'],
+    component: /*#__PURE__*/React.createElement(ArrowLeftM, null),
+    size: 24
+  });
+  return /*#__PURE__*/React.createElement(S.WrapperPageHeaderBack, null, /*#__PURE__*/React.createElement(Button, {
+    type: "ghost",
+    mode: "single-icon",
+    onClick: onGoBack
+  }, backIcon));
+};

package/dist/PageHeaderBack/PageHeaderBack.styles.d.ts

@@ -0,0 +1 @@
+export declare const WrapperPageHeaderBack: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/PageHeaderBack/PageHeaderBack.styles.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+export var WrapperPageHeaderBack = styled.div.withConfig({
+  displayName: "PageHeaderBackstyles__WrapperPageHeaderBack",
+  componentId: "sc-107ccyu-0"
+})(["margin-right:49px;display:flex;align-items:center;position:relative;&::after{content:'';position:absolute;width:1px;height:40px;right:-25px;background-color:", ";}&&{button{display:flex;align-items:center;padding:0 4px;}}"], function (props) {
+  return props.theme.palette['grey-300'];
+});

package/dist/PageHeaderBack/index.d.ts

@@ -0,0 +1 @@
+export * from './PageHeaderBack';

package/dist/PageHeaderBack/index.js

@@ -0,0 +1 @@
+export * from './PageHeaderBack';

package/dist/PageHeaderClamp/PageHeaderClamp.d.ts

@@ -0,0 +1,4 @@
+import { PageHeaderProps } from '../PageHeader.types';
+type PageHeaderClampProps = Pick<PageHeaderProps, 'tooltip' | 'children' | 'title' | 'tooltipIcon' | 'handleTooltipClick'>;
+export declare const PageHeaderClamp: ({ tooltip, children, title, tooltipIcon, handleTooltipClick, }: PageHeaderClampProps) => JSX.Element;
+export {};

package/dist/PageHeaderClamp/PageHeaderClamp.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Tooltip from '@synerise/ds-tooltip';
+import Icon from '@synerise/ds-icon';
+import * as S from './PageHeaderClamp.styles';
+export var PageHeaderClamp = function PageHeaderClamp(_ref) {
+  var tooltip = _ref.tooltip,
+      children = _ref.children,
+      title = _ref.title,
+      tooltipIcon = _ref.tooltipIcon,
+      handleTooltipClick = _ref.handleTooltipClick;
+  return /*#__PURE__*/React.createElement(S.WrapperPageHeaderClamp, null, /*#__PURE__*/React.createElement(S.PageHeaderTitle, null, children || title), tooltip !== undefined && tooltipIcon && /*#__PURE__*/React.createElement(S.PageHeaderTooltipWraper, null, /*#__PURE__*/React.createElement(Tooltip, tooltip, /*#__PURE__*/React.createElement(Icon, {
+    component: tooltipIcon,
+    onClick: handleTooltipClick
+  }))));
+};

package/dist/PageHeaderClamp/PageHeaderClamp.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const WrapperPageHeaderClamp: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PageHeaderTitle: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const PageHeaderTooltipWraper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/PageHeaderClamp/PageHeaderClamp.styles.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import { macro } from '@synerise/ds-typography';
+export var WrapperPageHeaderClamp = styled.div.withConfig({
+  displayName: "PageHeaderClampstyles__WrapperPageHeaderClamp",
+  componentId: "at80a6-0"
+})(["", ";line-height:26px;display:flex;overflow:hidden;align-items:center;color:", ";"], macro.h600, function (props) {
+  return props.theme.palette['grey-800'];
+});
+export var PageHeaderTitle = styled.span.withConfig({
+  displayName: "PageHeaderClampstyles__PageHeaderTitle",
+  componentId: "at80a6-1"
+})(["display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"]);
+export var PageHeaderTooltipWraper = styled.div.withConfig({
+  displayName: "PageHeaderClampstyles__PageHeaderTooltipWraper",
+  componentId: "at80a6-2"
+})([".ds-icon{margin-left:8px;svg{color:", ";fill:", ";}}"], function (props) {
+  return props.theme.palette['grey-600'];
+}, function (props) {
+  return props.theme.palette['grey-600'];
+});

package/dist/PageHeaderClamp/index.d.ts

@@ -0,0 +1 @@
+export * from './PageHeaderClamp';

package/dist/PageHeaderClamp/index.js

@@ -0,0 +1 @@
+export * from './PageHeaderClamp';

package/dist/PageHeaderInlineEdit/PageHeaderInlineEdit.d.ts

@@ -0,0 +1,4 @@
+import type { PageHeaderProps } from '../PageHeader.types';
+type PageHeaderInlineEditProps = Required<Pick<PageHeaderProps, 'inlineEdit'>>;
+export declare const PageHeaderInlineEdit: ({ inlineEdit }: PageHeaderInlineEditProps) => JSX.Element;
+export {};

package/dist/PageHeaderInlineEdit/PageHeaderInlineEdit.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import InlineEdit from '@synerise/ds-inline-edit/';
+import * as S from './PageHeaderInlineEdit.styles';
+export var PageHeaderInlineEdit = function PageHeaderInlineEdit(_ref) {
+  var inlineEdit = _ref.inlineEdit;
+  return /*#__PURE__*/React.createElement(S.WrapperPageHeaderInlineEdit, null, /*#__PURE__*/React.createElement(InlineEdit, {
+    input: {
+      name: inlineEdit.name,
+      value: inlineEdit.value,
+      maxLength: inlineEdit.maxLength,
+      onChange: inlineEdit.handleOnChange,
+      onBlur: inlineEdit.handleOnBlur,
+      onEnterPress: inlineEdit.handleOnEnterPress,
+      placeholder: inlineEdit.placeholder
+    },
+    size: inlineEdit.size,
+    error: inlineEdit.error,
+    disabled: inlineEdit.disabled,
+    hideIcon: inlineEdit.hideIcon,
+    style: inlineEdit.style
+  }));
+};

package/dist/PageHeaderInlineEdit/PageHeaderInlineEdit.styles.d.ts

@@ -0,0 +1 @@
+export declare const WrapperPageHeaderInlineEdit: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/PageHeaderInlineEdit/PageHeaderInlineEdit.styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export var WrapperPageHeaderInlineEdit = styled.div.withConfig({
+  displayName: "PageHeaderInlineEditstyles__WrapperPageHeaderInlineEdit",
+  componentId: "sc-13xsyjb-0"
+})(["display:flex;margin-left:14px;"]);

package/dist/PageHeaderInlineEdit/index.d.ts

@@ -0,0 +1 @@
+export * from './PageHeaderInlineEdit';

package/dist/PageHeaderInlineEdit/index.js

@@ -0,0 +1 @@
+export * from './PageHeaderInlineEdit';

package/dist/PageHeaderRightSide/PageHeaderRightSide.d.ts

@@ -0,0 +1,4 @@
+import type { PageHeaderProps } from '../PageHeader.types';
+type PageHeaderRightSideProps = Pick<PageHeaderProps, 'rightSide' | 'onClose' | 'title' | 'tooltipIcon' | 'handleTooltipClick'>;
+export declare const PageHeaderRightSide: ({ rightSide, onClose }: PageHeaderRightSideProps) => JSX.Element;
+export {};

package/dist/PageHeaderRightSide/PageHeaderRightSide.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Button from '@synerise/ds-button';
+import Icon, { CloseM } from '@synerise/ds-icon';
+import { theme } from '@synerise/ds-core';
+import * as S from './PageHeaderRightSide.styles';
+export var PageHeaderRightSide = function PageHeaderRightSide(_ref) {
+  var rightSide = _ref.rightSide,
+      onClose = _ref.onClose;
+  return /*#__PURE__*/React.createElement(S.WrapperPageHeaderRightSide, null, /*#__PURE__*/React.createElement("div", null, rightSide && rightSide, onClose && /*#__PURE__*/React.createElement(Button, {
+    type: "ghost",
+    mode: "single-icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: "page-header__close",
+    color: theme.palette['grey-500'],
+    component: /*#__PURE__*/React.createElement(CloseM, null),
+    size: 32,
+    onClick: onClose
+  }))));
+};

package/dist/PageHeaderRightSide/PageHeaderRightSide.styles.d.ts

@@ -0,0 +1 @@
+export declare const WrapperPageHeaderRightSide: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/PageHeaderRightSide/PageHeaderRightSide.styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export var WrapperPageHeaderRightSide = styled.div.withConfig({
+  displayName: "PageHeaderRightSidestyles__WrapperPageHeaderRightSide",
+  componentId: "hvehfk-0"
+})(["display:flex;flex:1 auto;justify-content:flex-end;> div{display:flex;flex:1;justify-content:flex-end;align-items:center;flex-direction:row;> *{margin-left:8px;}}"]);

package/dist/PageHeaderRightSide/index.d.ts

@@ -0,0 +1 @@
+export * from './PageHeaderRightSide';

package/dist/PageHeaderRightSide/index.js

@@ -0,0 +1 @@
+export * from './PageHeaderRightSide';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-page-header",
-  "version": "0.14.91",
+  "version": "0.14.93",
   "description": "Page-Header UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -33,12 +33,12 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.18.9",
-    "@synerise/ds-icon": "^0.58.9",
-    "@synerise/ds-inline-edit": "^0.6.91",
-    "@synerise/ds-tooltip": "^0.14.13",
+    "@synerise/ds-button": "^0.18.11",
+    "@synerise/ds-icon": "^0.59.1",
+    "@synerise/ds-inline-edit": "^0.6.93",
+    "@synerise/ds-tooltip": "^0.14.15",
     "@synerise/ds-typography": "^0.14.1",
-    "@synerise/ds-utils": "^0.24.23"
+    "@synerise/ds-utils": "^0.24.24"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -50,5 +50,5 @@
     "@testing-library/react": "10.0.1",
     "@testing-library/user-event": "^10.3.1"
   },
-  "gitHead": "76edb4723a30c59f1a54f666f66fcd814de0af70"
+  "gitHead": "16918244eff3f4e37db24ae3d90687d4e6a233a4"
 }