@pushwoosh/dumb-components 2.9.2 → 2.9.3

package/Calendar/CalendarMonthSlider/CalendarMonthSlider.js

@@ -92,7 +92,7 @@ export const CalendarMonthSlider = ({
     },
     children: [_jsx(Viewport, {
       children: _jsx(Strip, {
-        withTransition: inTransition,
+        "$withTransition": inTransition,
         onTransitionEnd: () => {
           toBaseline(anchor);
         },

package/Calendar/CalendarMonthSlider/styles.d.ts

@@ -12,7 +12,7 @@ export declare const Root: import("styled-components").StyledComponent<"div", an
 }, "$gridAutoFlow">;
 export declare const Viewport: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Strip: import("styled-components").StyledComponent<"div", any, {
-    withTransition: boolean;
+    $withTransition: boolean;
 }, never>;
 export declare const Panel: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Arrow: import("styled-components").StyledComponent<import("react").FC<import("@pushwoosh/kit-icons").ArrowIconProps>, any, {

package/Calendar/CalendarMonthSlider/styles.js

@@ -14,8 +14,8 @@ export const Strip = styled.div.withConfig({
   displayName: "Strip",
   componentId: "sc-1qqlxvi-2"
 })(["display:grid;grid-auto-flow:column;grid-auto-columns:var(--col-width,0px);column-gap:var(--gap,0px);transform:translateX(var(--shift,0px));", ""], ({
-  withTransition
-}) => withTransition && css(["transition:transform var(--duration,150ms) ease-out;"]));
+  $withTransition
+}) => $withTransition && css(["transition:transform var(--duration,150ms) ease-out;"]));
 export const Panel = styled.div.withConfig({
   displayName: "Panel",
   componentId: "sc-1qqlxvi-3"

package/CardMetric/CardCollapse.js

@@ -6,9 +6,9 @@ export function CardCollapse(props) {
     isCollapsed
   } = props;
   return _jsx(CollapseContainer, {
-    isCollapsed: isCollapsed,
+    "$isCollapsed": isCollapsed,
     children: _jsx(CollapseInner, {
-      isCollapsed: isCollapsed,
+      "$isCollapsed": isCollapsed,
       children: children
     })
   });

package/CardMetric/CardMetric.js

@@ -33,8 +33,8 @@ export function CardMetric({
   const onMouseOver = () => setVisibleInfo(true);
   const onMouseOut = () => setVisibleInfo(false);
   return _jsxs(CardContainer, {
-    view: view,
-    focus: focus,
+    "$view": view,
+    "$focus": focus,
     ...otherProps,
     children: [(!!title || !!headerExtra) && _jsxs(CardHeader, {
       children: [_jsxs(CardHeaderLeft, {
@@ -44,12 +44,12 @@ export function CardMetric({
               setIsCollapsed(prevState => !prevState);
             }
           },
-          collapsable: collapse !== undefined,
+          "$collapsable": collapse !== undefined,
           children: [title, collapse !== undefined && _jsx(ChevronIcon, {
             direction: isCollapsed ? 'down' : 'up',
             size: "small"
           }), _jsx(CardInfo, {
-            hide: !tooltip,
+            "$hide": !tooltip,
             onMouseOver: onMouseOver,
             onMouseOut: onMouseOut,
             children: _jsx(Tooltip, {

package/CardMetric/__tests__/CardMetric.test.d.ts

@@ -0,0 +1 @@
+export {};

package/CardMetric/__tests__/CardMetric.test.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { CardMetric } from '../CardMetric';
+describe('CardMetric', () => {
+  it('styles a focused stacking card without leaking view/focus to the DOM', () => {
+    const {
+      container
+    } = render(_jsx(CardMetric, {
+      view: "stacking",
+      focus: true,
+      title: "Sent",
+      metric: 1
+    }));
+    const card = container.firstElementChild;
+    expect(card).not.toHaveAttribute('view');
+    expect(card).not.toHaveAttribute('focus');
+    expect(getComputedStyle(card).padding).toBe('24px');
+    expect(getComputedStyle(card).outlineWidth).toBe('4px');
+  });
+  it('collapses the body and marks the title clickable', () => {
+    render(_jsx(CardMetric, {
+      title: "Sent",
+      collapse: {
+        isCollapsed: true
+      },
+      children: "Body"
+    }));
+    expect(getComputedStyle(screen.getByText('Sent')).cursor).toBe('pointer');
+    expect(getComputedStyle(screen.getByText('Body').parentElement).gridTemplateRows).toBe('0fr');
+  });
+});

package/CardMetric/styles.d.ts

@@ -1,13 +1,17 @@
-import type { CardContainerProps, CardTitleProps, CollapseContainerProps } from './types';
+import type { CardContainerProps, CardTitleProps } from './types';
 export declare const CardContainer: import("styled-components").StyledComponent<"div", any, CardContainerProps, never>;
 export declare const CardHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardHeaderLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardTitle: import("styled-components").StyledComponent<"div", any, CardTitleProps, never>;
 export declare const CardInfo: import("styled-components").StyledComponent<"div", any, {
-    hide: boolean;
+    $hide: boolean;
 }, never>;
 export declare const CardMetricValue: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardExtraMetric: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CollapseContainer: import("styled-components").StyledComponent<"div", any, CollapseContainerProps, never>;
-export declare const CollapseInner: import("styled-components").StyledComponent<"div", any, CollapseContainerProps, never>;
+export declare const CollapseContainer: import("styled-components").StyledComponent<"div", any, {
+    $isCollapsed: boolean;
+}, never>;
+export declare const CollapseInner: import("styled-components").StyledComponent<"div", any, {
+    $isCollapsed: boolean;
+}, never>;

package/CardMetric/styles.js

@@ -4,22 +4,22 @@ export const CardContainer = styled.div.withConfig({
   displayName: "CardContainer",
   componentId: "sc-17snd37-0"
 })(["display:flex;color:", ";background-color:", ";flex-direction:column;scroll-margin:4px;outline-style:solid;gap:12px;padding:", ";border-radius:", ";border-bottom:", ";outline-color:", ";outline-width:", ";"], Color.MAIN, Color.CLEAR, ({
-  view
-}) => view === 'stacking' ? '24px' : '16px', ({
-  view
-}) => view === 'stacking' ? 0 : '4px', ({
-  view,
-  focus
-}) => view === 'stacking' && !focus ? `1px solid ${Color.DIVIDER}` : 'none', ({
-  focus
-}) => focus ? Color.BRIGHT : Color.DIVIDER, ({
-  view,
-  focus
+  $view
+}) => $view === 'stacking' ? '24px' : '16px', ({
+  $view
+}) => $view === 'stacking' ? 0 : '4px', ({
+  $view,
+  $focus
+}) => $view === 'stacking' && !$focus ? `1px solid ${Color.DIVIDER}` : 'none', ({
+  $focus
+}) => $focus ? Color.BRIGHT : Color.DIVIDER, ({
+  $view,
+  $focus
 }) => {
-  if (focus) {
+  if ($focus) {
     return '4px';
   }
-  if (view === 'stacking') {
+  if ($view === 'stacking') {
     return 0;
   }
   return '1px';
@@ -36,16 +36,16 @@ export const CardTitle = styled.div.withConfig({
   displayName: "CardTitle",
   componentId: "sc-17snd37-3"
 })(["display:flex;align-items:center;text-transform:uppercase;font-size:", ";color:", ";cursor:", ";gap:4px;"], FontSize.SMALL, ({
-  collapsable
-}) => collapsable ? Color.SOFT : Color.MAIN, ({
-  collapsable
-}) => collapsable ? 'pointer' : 'auto');
+  $collapsable
+}) => $collapsable ? Color.SOFT : Color.MAIN, ({
+  $collapsable
+}) => $collapsable ? 'pointer' : 'auto');
 export const CardInfo = styled.div.withConfig({
   displayName: "CardInfo",
   componentId: "sc-17snd37-4"
 })(["display:", ";cursor:pointer;"], ({
-  hide
-}) => hide ? 'none' : 'block');
+  $hide
+}) => $hide ? 'none' : 'block');
 export const CardMetricValue = styled.div.withConfig({
   displayName: "CardMetricValue",
   componentId: "sc-17snd37-5"
@@ -64,11 +64,11 @@ export const CollapseContainer = styled.div.withConfig({
   displayName: "CollapseContainer",
   componentId: "sc-17snd37-8"
 })(["display:grid;grid-template-rows:", ";transition:grid-template-rows 0.5s ease-out;"], ({
-  isCollapsed
-}) => isCollapsed ? '0fr' : '1fr');
+  $isCollapsed
+}) => $isCollapsed ? '0fr' : '1fr');
 export const CollapseInner = styled.div.withConfig({
   displayName: "CollapseInner",
   componentId: "sc-17snd37-9"
 })(["overflow:", ";"], ({
-  isCollapsed
-}) => isCollapsed ? 'hidden' : 'auto');
+  $isCollapsed
+}) => $isCollapsed ? 'hidden' : 'auto');

package/CardMetric/types.d.ts

@@ -29,11 +29,11 @@ export type CardMetricProps = {
     [key: string]: any;
 };
 export type CardContainerProps = {
-    view: 'rounded' | 'stacking';
-    focus: boolean;
+    $view: 'rounded' | 'stacking';
+    $focus: boolean;
 };
 export type CardTitleProps = {
-    collapsable: boolean;
+    $collapsable: boolean;
 };
 export type CollapseContainerProps = {
     isCollapsed: boolean;

package/DateTimePicker/__tests__/YearView.test.d.ts

@@ -0,0 +1 @@
+export {};

package/DateTimePicker/__tests__/YearView.test.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { YearView } from '../components/YearView/YearView';
+describe('YearView', () => {
+  it('makes month cells 59px tall without a height attribute', () => {
+    render(_jsx(YearView, {
+      year: "2026",
+      onChange: jest.fn(),
+      onSelect: jest.fn()
+    }));
+    const cell = screen.getAllByText(/^[A-Z][a-z]{2}$/)[0].closest('div[class]');
+    expect(cell).not.toHaveAttribute('height');
+    expect(getComputedStyle(cell).height).toBe('59px');
+  });
+});

package/DateTimePicker/components/DecadeView/DecadeView.js

@@ -24,7 +24,7 @@ export function DecadeView(props) {
       }).map((_, i) => {
         const year = firstYear + i;
         return _jsx(CellBox, {
-          height: "59px",
+          "$height": "59px",
           "$isActive": year === activeDayYear,
           onClick: () => onSelect(format(setPeriod(value, 'year', year), 'year')),
           children: year

package/DateTimePicker/components/YearView/YearView.js

@@ -25,7 +25,7 @@ export function YearView(props) {
       }).map((_, i) => {
         const month = format(setPeriod(year, 'month', i + 1), 'year-month');
         return _jsx(CellBox, {
-          height: "59px",
+          "$height": "59px",
           "$isActive": !!activeDay && isSamePeriod(month, activeDay, 'month'),
           onClick: () => onSelect(month),
           children: monthName(i + 1, 'short')

package/DateTimePicker/styles.d.ts

@@ -3,7 +3,7 @@ export declare const CellBox: import("styled-components").StyledComponent<"div",
     $isDisabled?: boolean;
     $secondary?: boolean;
     $secondActive?: boolean;
-    height?: number | string;
+    $height?: number | string;
 }, never>;
 export declare const DayHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DateInfo: import("styled-components").StyledComponent<"div", any, {}, never>;

package/DateTimePicker/styles.js

@@ -10,8 +10,8 @@ export const CellBox = styled(CalendarCellBaseStyled).withConfig({
   displayName: "CellBox",
   componentId: "sc-t3ruuk-1"
 })(["height:", ";color:", ";background-color:", ";border-radius:", ";opacity:", ";outline:", ";cursor:pointer;", " &:hover{background-color:", ";}"], ({
-  height
-}) => height || '32px', ({
+  $height
+}) => $height || '32px', ({
   $isActive
 }) => $isActive ? Color.CLEAR : Color.MAIN, ({
   $isActive

package/EditableField/EditableField.js

@@ -36,7 +36,7 @@ export function EditableField({
   return _jsxs(PopoverContainer, {
     ref: rootRef,
     children: [_jsxs(FieldBox, {
-      open: open,
+      "$open": open,
       onClick: onToggleOpen,
       ref: buttonRef,
       children: [_jsx("span", {

package/EditableField/__tests__/EditableField.test.d.ts

@@ -0,0 +1 @@
+export {};

package/EditableField/__tests__/EditableField.test.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { Color } from '@pushwoosh/kit-constants';
+import { EditableField } from '../EditableField';
+describe('EditableField', () => {
+  it('paints the open field without an `open` attribute on the div', () => {
+    render(_jsx(EditableField, {
+      value: "Campaign",
+      open: true,
+      onToggleOpen: jest.fn(),
+      onSubmit: jest.fn(),
+      onCancel: jest.fn(),
+      children: "Editor"
+    }));
+    const field = screen.getByText('Campaign').closest('div');
+    expect(field).not.toHaveAttribute('open');
+    expect(getComputedStyle(field).background.replace(/\s/g, '')).toBe(Color.MAIN.replace(/\s/g, ''));
+  });
+});

package/EditableField/styles.d.ts

@@ -1,6 +1,6 @@
 import { H5 } from '@pushwoosh/kit-typography';
 export declare const FieldBox: import("styled-components").StyledComponent<"div", any, {
-    open: boolean;
+    $open: boolean;
 }, never>;
 export declare const TitleBox: import("styled-components").StyledComponent<typeof H5, any, {}, never>;
 export declare const ButtonsGroup: import("styled-components").StyledComponent<"div", any, {

package/EditableField/styles.js

@@ -5,14 +5,14 @@ export const FieldBox = styled.div.withConfig({
   displayName: "FieldBox",
   componentId: "sc-qxboek-0"
 })(["display:flex;align-items:center;font-size:", ";line-height:", ";padding:2px 6px 2px 8px;border-radius:", ";color:", ";background:", ";box-sizing:border-box;cursor:pointer;gap:6px;svg{opacity:0.2;}&:active{opacity:0.5;}&:hover{color:", ";background:", ";svg{opacity:1;}}"], FontSize.REGULAR, LineHeight.REGULAR, ShapeRadius.CONTROL, ({
-  open
-}) => open ? Color.CLEAR : Color.MAIN, ({
-  open
-}) => open ? Color.MAIN : Color.CLEAR, ({
-  open
-}) => open ? Color.CLEAR : Color.PRIMARY_HOVER, ({
-  open
-}) => open ? Color.MAIN : 'rgba(153, 201, 255, 0.14)');
+  $open
+}) => $open ? Color.CLEAR : Color.MAIN, ({
+  $open
+}) => $open ? Color.MAIN : Color.CLEAR, ({
+  $open
+}) => $open ? Color.CLEAR : Color.PRIMARY_HOVER, ({
+  $open
+}) => $open ? Color.MAIN : 'rgba(153, 201, 255, 0.14)');
 export const TitleBox = styled(H5).withConfig({
   displayName: "TitleBox",
   componentId: "sc-qxboek-1"

package/ExternalImagePreview/ExternalImagePreview.js

@@ -35,23 +35,23 @@ export function ExternalImagePreview(props) {
     }
   };
   return _jsxs(RootBox, {
-    width: width,
-    height: height,
+    "$width": width,
+    "$height": height,
     children: [(!src || isError) && _jsx(PlaceholderWrapper, {
-      width: width,
-      height: height,
+      "$width": width,
+      "$height": height,
       children: placeholder
     }), isLoading && _jsx(PlaceholderWrapper, {
-      width: width,
-      height: height,
+      "$width": width,
+      "$height": height,
       children: _jsx(Spinner, {
         size: "small",
         color: Color.CLEAR
       })
     }), _jsx(ImgPreview, {
-      width: width,
-      height: height,
-      isHide: !src || isLoading || isError,
+      "$width": width,
+      "$height": height,
+      "$isHide": !src || isLoading || isError,
       alt: alt,
       src: src,
       onError: handleOnError,

package/ExternalImagePreview/__tests__/ExternalImagePreview.test.d.ts

@@ -0,0 +1 @@
+export {};

package/ExternalImagePreview/__tests__/ExternalImagePreview.test.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { ExternalImagePreview } from '../ExternalImagePreview';
+describe('ExternalImagePreview', () => {
+  it('sizes the image by CSS, not by width/height attributes', () => {
+    render(_jsx(ExternalImagePreview, {
+      src: "https://example.com/a.png",
+      width: 120,
+      height: 80,
+      placeholder: _jsx("i", {})
+    }));
+    const img = screen.getByRole('img');
+    expect(img).not.toHaveAttribute('width');
+    expect(img).not.toHaveAttribute('height');
+    expect(getComputedStyle(img).width).toBe('120px');
+    expect(getComputedStyle(img).height).toBe('80px');
+  });
+});

package/ExternalImagePreview/styles.d.ts

@@ -1,13 +1,13 @@
 export declare const RootBox: import("styled-components").StyledComponent<"div", any, {
-    width: string | number;
-    height: string | number;
+    $width: string | number;
+    $height: string | number;
 }, never>;
 export declare const ImgPreview: import("styled-components").StyledComponent<"img", any, {
-    width: string | number;
-    height: string | number;
-    isHide: boolean;
+    $width: string | number;
+    $height: string | number;
+    $isHide: boolean;
 }, never>;
 export declare const PlaceholderWrapper: import("styled-components").StyledComponent<"div", any, {
-    width: string | number;
-    height: string | number;
+    $width: string | number;
+    $height: string | number;
 }, never>;

package/ExternalImagePreview/styles.js

@@ -5,25 +5,25 @@ export const RootBox = styled.div.withConfig({
   displayName: "RootBox",
   componentId: "sc-irvho3-0"
 })(["position:relative;width:", ";height:", ";"], ({
-  width
-}) => toCssValue(width), ({
-  height
-}) => toCssValue(height));
+  $width
+}) => toCssValue($width), ({
+  $height
+}) => toCssValue($height));
 export const ImgPreview = styled.img.withConfig({
   displayName: "ImgPreview",
   componentId: "sc-irvho3-1"
 })(["width:", ";height:", ";border-radius:", ";opacity:", ";"], ({
-  width
-}) => toCssValue(width), ({
-  height
-}) => toCssValue(height), ShapeRadius.CONTROL, ({
-  isHide
-}) => isHide ? 0 : 1);
+  $width
+}) => toCssValue($width), ({
+  $height
+}) => toCssValue($height), ShapeRadius.CONTROL, ({
+  $isHide
+}) => $isHide ? 0 : 1);
 export const PlaceholderWrapper = styled.div.withConfig({
   displayName: "PlaceholderWrapper",
   componentId: "sc-irvho3-2"
 })(["width:", ";height:", ";display:flex;align-items:center;justify-content:center;border-radius:", ";position:absolute;top:0;left:0;background:", ";"], ({
-  width
-}) => toCssValue(width), ({
-  height
-}) => toCssValue(height), ShapeRadius.CONTROL, Color.MAIN);
+  $width
+}) => toCssValue($width), ({
+  $height
+}) => toCssValue($height), ShapeRadius.CONTROL, Color.MAIN);

package/NativeRichMediaPreview/NativeRichMediaPreview.js

@@ -240,8 +240,8 @@ export function NativeRichMediaPreview(props) {
   const shouldDim = !isLoading && dimsScreen(config);
   return _jsxs(PreviewHost, {
     ...LIGHT_ISLAND_PROPS,
-    width: width,
-    height: height,
+    "$width": width,
+    "$height": height,
     "$withBackground": withBackground,
     children: [_jsxs(ScaleViewport, {
       "$scale": scale,

package/NativeRichMediaPreview/styles.d.ts

@@ -7,8 +7,8 @@ export declare const ButtonRow: import("styled-components").StyledComponent<"div
     $border?: string;
 }, never>;
 export declare const PreviewHost: import("styled-components").StyledComponent<"div", any, {
-    width: string | number;
-    height: string | number;
+    $width: string | number;
+    $height: string | number;
     $withBackground: boolean;
 }, never>;
 export declare const ScaleViewport: import("styled-components").StyledComponent<"div", any, {

package/NativeRichMediaPreview/styles.js

@@ -23,10 +23,10 @@ export const PreviewHost = styled.div.withConfig({
 }) => $withBackground ? `1px solid ${Color.DIVIDER}` : 'none', ShapeRadius.SECTION, ({
   $withBackground
 }) => $withBackground ? Color.CLEAR : 'transparent', ({
-  width
-}) => toCssValue(width), ({
-  height
-}) => toCssValue(height), FontFamily.MAIN);
+  $width
+}) => toCssValue($width), ({
+  $height
+}) => toCssValue($height), FontFamily.MAIN);
 export const ScaleViewport = styled.div.withConfig({
   displayName: "ScaleViewport",
   componentId: "sc-mc9ykd-2"

package/PageHeader/__tests__/PageHeader.test.d.ts

@@ -0,0 +1 @@
+export {};

package/PageHeader/__tests__/PageHeader.test.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { PageHeader } from '../components/PageHeader';
+import { PageHeaderSkeleton } from '../components/PageHeaderSkeleton';
+describe('PageHeader', () => {
+  it('spaces the more-actions box only when there are actions', () => {
+    const {
+      rerender
+    } = render(_jsx(PageHeader, {
+      title: "Page",
+      moreActions: _jsx("span", {
+        children: "More"
+      }),
+      onSubmit: jest.fn()
+    }));
+    expect(getComputedStyle(screen.getByText('More').parentElement).marginRight).toBe('16px');
+    rerender(_jsx(PageHeader, {
+      title: "Page",
+      moreActions: _jsx("span", {
+        children: "More"
+      })
+    }));
+    expect(getComputedStyle(screen.getByText('More').parentElement).marginRight).toBe('0px');
+  });
+  it('sizes the skeleton blocks without width/height attributes', () => {
+    const {
+      container
+    } = render(_jsx(PageHeaderSkeleton, {}));
+    const sized = Array.from(container.querySelectorAll('div')).filter(el => getComputedStyle(el).width === '68px');
+    expect(sized).toHaveLength(2);
+    sized.forEach(el => {
+      expect(el).not.toHaveAttribute('width');
+      expect(el).not.toHaveAttribute('height');
+      expect(getComputedStyle(el).height).toBe('36px');
+    });
+  });
+});

package/PageHeader/components/AutosizeInput/AutosizeInput.js

@@ -68,7 +68,7 @@ export function AutosizeInput(props) {
     children: [_jsxs(InputBox, {
       children: [_jsx(InputStyled, {
         ref: inputRef,
-        width: width,
+        "$width": width,
         value: value,
         placeholder: placeholder,
         onKeyDown: onKeyDown,

package/PageHeader/components/AutosizeInput/styles.js

@@ -12,8 +12,8 @@ export const InputStyled = styled.input.withConfig({
   displayName: "InputStyled",
   componentId: "sc-191i2ot-2"
 })(["color:", ";width:", "px;max-width:100%;border:0;padding:0;margin:3px 4px 0 0;background:#0000;font-weight:inherit;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border-bottom:1px dashed ", ";&::placeholder{color:", ";}&:active,&:hover,&:focus{border-bottom:1px dashed ", ";outline-offset:0;outline:0;}&:hover{color:", ";cursor:pointer;}&:active{opacity:0.5;cursor:pointer;}"], Color.PRIMARY, ({
-  width
-}) => width - 10, Color.PHANTOM, Color.PHANTOM, Color.PHANTOM, Color.PRIMARY_HOVER);
+  $width
+}) => $width - 10, Color.PHANTOM, Color.PHANTOM, Color.PHANTOM, Color.PRIMARY_HOVER);
 export const RootBox = styled.div.withConfig({
   displayName: "RootBox",
   componentId: "sc-191i2ot-3"

package/PageHeader/components/AutosizeInput/types.d.ts

@@ -13,5 +13,5 @@ export interface AutosizeInputProps {
 }
 /** Internal style prop carrying the computed input width. */
 export interface InputStyledProps {
-    width: number;
+    $width: number;
 }

package/PageHeader/components/PageHeader/PageHeader.js

@@ -50,7 +50,7 @@ export function PageHeader(props) {
         })]
       }), hasActionsBox && _jsxs(ActionsBox, {
         children: [!!moreActions && _jsx(MoreActionsBox, {
-          hasActions: hasActions,
+          "$hasActions": hasActions,
           children: moreActions
         }), onCancel && _jsx(Button, {
           color: "secondary",

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

@@ -4,6 +4,6 @@ export declare const BackButton: import("styled-components").StyledComponent<"di
 export declare const TitleBox: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ActionsBox: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MoreActionsBox: import("styled-components").StyledComponent<"div", any, {
-    hasActions: boolean;
+    $hasActions: boolean;
 }, never>;
 export declare const DescriptionBox: import("styled-components").StyledComponent<typeof Paragraph, any, {}, never>;

package/PageHeader/components/PageHeader/styles.js

@@ -20,8 +20,8 @@ export const MoreActionsBox = styled.div.withConfig({
   displayName: "MoreActionsBox",
   componentId: "sc-1qwo99q-4"
 })(["display:flex;margin-right:", ";"], ({
-  hasActions
-}) => hasActions ? '16px' : '0');
+  $hasActions
+}) => $hasActions ? '16px' : '0');
 export const DescriptionBox = styled(Paragraph).withConfig({
   displayName: "DescriptionBox",
   componentId: "sc-1qwo99q-5"

package/PageHeader/components/PageHeaderEditable/PageHeaderEditable.js

@@ -66,7 +66,7 @@ export function PageHeaderEditable(props) {
         })]
       }), hasActionsBox && _jsxs(ActionsBox, {
         children: [!!moreActions && _jsx(MoreActionsBox, {
-          hasActions: hasActions,
+          "$hasActions": hasActions,
           children: moreActions
         }), onCancel && _jsx(Button, {
           color: "secondary",

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

@@ -5,6 +5,6 @@ export declare const TitleBox: import("styled-components").StyledComponent<"div"
 export declare const AutosizeInputBox: import("styled-components").StyledComponent<typeof H2, any, {}, never>;
 export declare const ActionsBox: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MoreActionsBox: import("styled-components").StyledComponent<"div", any, {
-    hasActions: boolean;
+    $hasActions: boolean;
 }, never>;
 export declare const DescriptionBox: import("styled-components").StyledComponent<typeof Paragraph, any, {}, never>;