@pushwoosh/dumb-components 2.9.1 → 2.9.3

package/PageHeader/components/PageHeaderEditable/styles.js

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

package/PageHeader/components/PageHeaderSkeleton/PageHeaderSkeleton.js

@@ -6,18 +6,18 @@ export function PageHeaderSkeleton() {
     children: [_jsxs(Horizontal, {
       "$gap": 16,
       children: [_jsx(SkeletonStyled, {}), _jsx(SkeletonStyled, {
-        width: 60
+        "$width": 60
       }), _jsx(SkeletonStyled, {
-        width: 60
+        "$width": 60
       })]
     }), _jsxs(Horizontal, {
       "$gap": 16,
       children: [_jsx(SkeletonStyled, {
-        width: 68,
-        height: 36
+        "$width": 68,
+        "$height": 36
       }), _jsx(SkeletonStyled, {
-        width: 68,
-        height: 36
+        "$width": 68,
+        "$height": 36
       })]
     })]
   });

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

@@ -1,5 +1,5 @@
 export declare const RootBox: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SkeletonStyled: import("styled-components").StyledComponent<"div", any, {
-    width?: number;
-    height?: number;
+    $width?: number;
+    $height?: number;
 }, never>;

package/PageHeader/components/PageHeaderSkeleton/styles.js

@@ -9,7 +9,7 @@ export const SkeletonStyled = styled.div.withConfig({
   displayName: "SkeletonStyled",
   componentId: "sc-1idyyj7-1"
 })(["width:", ";height:", ";padding:4px 0;background:", ";border-radius:", ";animation:", " 1s ease-in-out infinite;opacity:0.1;"], ({
-  width
-}) => width ? `${width}px` : '24px', ({
-  height
-}) => height ? `${height}px` : '24px', Color.SOFT, ShapeRadius.CONTROL, animation);
+  $width
+}) => $width ? `${$width}px` : '24px', ({
+  $height
+}) => $height ? `${$height}px` : '24px', Color.SOFT, ShapeRadius.CONTROL, animation);

package/PushPreview/PushPreview.js

@@ -29,7 +29,7 @@ export function PushPreview({
   const icon = pushPreset?.icon || appIcon || PREVIEW_ICON_URL;
   if (isLoading) {
     return _jsx(PushBox, {
-      view: view,
+      "$view": view,
       "$loading": true
     });
   }
@@ -41,7 +41,7 @@ export function PushPreview({
   }
   return _jsxs(PushBox, {
     ...LIGHT_ISLAND_PROPS,
-    view: view,
+    "$view": view,
     "$width": width,
     "$loading": isLoading,
     children: [_jsx(PushIcon, {
@@ -59,8 +59,8 @@ export function PushPreview({
           flat: true
         })
       }), _jsxs(PushDescription, {
-        view: view,
-        locked: !pushPreset || !content,
+        "$view": view,
+        "$locked": !pushPreset || !content,
         children: [content && _jsx(RichMessageViewer, {
           flat: view === 'compact',
           value: content

package/PushPreview/__tests__/PushPreview.test.d.ts

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

package/PushPreview/__tests__/PushPreview.test.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { Color } from '@pushwoosh/kit-constants';
+import { PushPreview } from '../PushPreview';
+describe('PushPreview', () => {
+  it('wraps the extended description and keeps view off the DOM', () => {
+    const {
+      container
+    } = render(_jsx(PushPreview, {
+      view: "extended",
+      pushPreset: null
+    }));
+    const description = screen.getByText('Message is empty…');
+    expect(container.querySelector('[view]')).toBeNull();
+    expect(getComputedStyle(description).whiteSpace).toBe('normal');
+  });
+  it('greys out the silent-push texts without a `locked` attribute', () => {
+    const {
+      container
+    } = render(_jsx(PushPreview, {
+      view: "silent"
+    }));
+    expect(container.querySelector('[locked]')).toBeNull();
+    expect(getComputedStyle(screen.getByText('Silent push notification')).color.replace(/\s/g, '')).toBe(Color.LOCKED.replace(/\s/g, ''));
+  });
+});

package/PushPreview/components/MissedContentPreview/MissedContentPreview.js

@@ -6,7 +6,7 @@ import { Lang } from '../../polyglot';
 import { PushBox, IconContainer, PushTitle, PushDescription } from '../../styles';
 export function MissedContentPreview() {
   return _jsxs(PushBox, {
-    view: "compact",
+    "$view": "compact",
     children: [_jsx(IconContainer, {
       children: _jsx(CloseIcon, {
         size: "small",
@@ -14,12 +14,12 @@ export function MissedContentPreview() {
       })
     }), _jsxs(Vertical, {
       children: [_jsx(PushTitle, {
-        locked: true,
+        "$locked": true,
         children: _jsx(Lang, {
           message: "DUMB.PUSH_PREVIEW.CONTENT_MISSED"
         })
       }), _jsx(PushDescription, {
-        locked: true,
+        "$locked": true,
         children: _jsx(Lang, {
           message: "DUMB.PUSH_PREVIEW.HINT"
         })

package/PushPreview/components/SilentPushPreview/SilentPushPreview.js

@@ -5,7 +5,7 @@ import { NotificationIcon } from '@pushwoosh/kit-icons';
 import { PushBox, IconContainer, PushTitle, PushDescription } from '../../styles';
 export function SilentPushPreview() {
   return _jsxs(PushBox, {
-    view: "silent",
+    "$view": "silent",
     children: [_jsx(IconContainer, {
       children: _jsx(NotificationIcon, {
         size: "small",
@@ -15,10 +15,10 @@ export function SilentPushPreview() {
       })
     }), _jsxs(Vertical, {
       children: [_jsx(PushTitle, {
-        locked: true,
+        "$locked": true,
         children: "Silent push notification"
       }), _jsx(PushDescription, {
-        locked: true,
+        "$locked": true,
         children: "There is no content to preview"
       })]
     })]

package/PushPreview/styles.d.ts

@@ -16,16 +16,16 @@ export declare const PushBox: import("styled-components").StyledComponent<"div",
     $padding: number;
     $gap: number;
 } & {
-    view: PushPreviewView;
+    $view: PushPreviewView;
     $width?: string | number;
     $loading?: boolean;
 }, "$gridAutoFlow" | "$padding" | "$alignItems" | "$gap" | "$justifyContent">;
 export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PushIcon: import("styled-components").StyledComponent<"img", any, {}, never>;
 export declare const PushTitle: import("styled-components").StyledComponent<"div", any, {
-    locked?: boolean;
+    $locked?: boolean;
 }, never>;
 export declare const PushDescription: import("styled-components").StyledComponent<"div", any, {
-    view?: PushPreviewView;
-    locked?: boolean;
+    $view?: PushPreviewView;
+    $locked?: boolean;
 }, never>;

package/PushPreview/styles.js

@@ -14,8 +14,8 @@ export const PushBox = styled(Horizontal).attrs({
 }) => $width ? toCssValue($width) : '100%', ShapeRadius.SECTION, ({
   $loading
 }) => $loading ? 'none' : `1px solid ${Color.DIVIDER}`, ({
-  view
-}) => view === 'extended' ? Shadow.LARGE : 'none', ({
+  $view
+}) => $view === 'extended' ? Shadow.LARGE : 'none', ({
   $loading
 }) => $loading ? Color.SOFT_LIGHT : Color.CLEAR);
 export const IconContainer = styled.div.withConfig({
@@ -30,13 +30,13 @@ export const PushTitle = styled.div.withConfig({
   displayName: "PushTitle",
   componentId: "sc-185rvhg-3"
 })(["color:", ";font-size:", ";font-weight:", ";line-height:", ";white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"], ({
-  locked
-}) => locked ? Color.LOCKED : Color.MAIN, FontSize.SMALL, FontWeight.MEDIUM, LineHeight.SMALL);
+  $locked
+}) => $locked ? Color.LOCKED : Color.MAIN, FontSize.SMALL, FontWeight.MEDIUM, LineHeight.SMALL);
 export const PushDescription = styled.div.withConfig({
   displayName: "PushDescription",
   componentId: "sc-185rvhg-4"
 })(["color:", ";font-size:", ";font-weight:", ";line-height:", ";white-space:", ";text-overflow:ellipsis;overflow:hidden;"], ({
-  locked
-}) => locked ? Color.LOCKED : Color.MAIN, FontSize.SMALL, FontWeight.REGULAR, LineHeight.SMALL, ({
-  view
-}) => view === 'extended' ? 'normal' : 'nowrap');
+  $locked
+}) => $locked ? Color.LOCKED : Color.MAIN, FontSize.SMALL, FontWeight.REGULAR, LineHeight.SMALL, ({
+  $view
+}) => $view === 'extended' ? 'normal' : 'nowrap');

package/RadioCard/RadioCard.js

@@ -24,8 +24,8 @@ export function RadioCard(props) {
   } = props;
   return _jsxs(RootBox, {
     "$width": width,
-    isActive: isActive,
-    isDisabled: isDisabled,
+    "$isActive": isActive,
+    "$isDisabled": isDisabled,
     onClick: isDisabled ? undefined : onClick,
     children: [_jsxs(Vertical, {
       "$gap": 0,

package/RadioCard/__tests__/RadioCard.test.d.ts

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

package/RadioCard/__tests__/RadioCard.test.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { RadioCard } from '../RadioCard';
+describe('RadioCard', () => {
+  it('outlines the active card and dims the disabled one', () => {
+    const {
+      container,
+      rerender
+    } = render(_jsx(RadioCard, {
+      title: "Pro",
+      isActive: true,
+      onClick: jest.fn()
+    }));
+    const card = () => container.firstElementChild;
+    expect(getComputedStyle(card()).outline).toMatch(/^2px solid/);
+    rerender(_jsx(RadioCard, {
+      title: "Pro",
+      isDisabled: true,
+      onClick: jest.fn()
+    }));
+    expect(getComputedStyle(card()).opacity).toBe('0.5');
+  });
+});

package/RadioCard/styles.d.ts

@@ -17,7 +17,7 @@ export declare const RootBox: import("styled-components").StyledComponent<"div",
     $borderRadius: ShapeRadius;
     $gap: number;
 } & {
-    isActive?: boolean;
-    isDisabled?: boolean;
+    $isActive?: boolean;
+    $isDisabled?: boolean;
     $width: string | number;
 }, "$gridAutoFlow" | "$bgColor" | "$borderRadius" | "$padding" | "$alignItems" | "$gap">;

package/RadioCard/styles.js

@@ -13,13 +13,13 @@ export const RootBox = styled(Vertical).attrs({
 })(["width:", ";height:100%;box-sizing:border-box;outline:", ";cursor:", ";opacity:", ";pointer-events:", ";&:hover{background:", ";}"], ({
   $width
 }) => toCssValue($width), ({
-  isActive
-}) => isActive ? `2px solid ${Color.PRIMARY}` : `1px solid ${Color.DIVIDER}`, ({
-  isDisabled
-}) => isDisabled ? 'default' : 'pointer', ({
-  isDisabled
-}) => isDisabled ? 0.5 : 1, ({
-  isDisabled
-}) => isDisabled ? 'none' : 'auto', ({
-  isDisabled
-}) => isDisabled ? Color.CLEAR : Color.ROW_HOVER);
+  $isActive
+}) => $isActive ? `2px solid ${Color.PRIMARY}` : `1px solid ${Color.DIVIDER}`, ({
+  $isDisabled
+}) => $isDisabled ? 'default' : 'pointer', ({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1, ({
+  $isDisabled
+}) => $isDisabled ? 'none' : 'auto', ({
+  $isDisabled
+}) => $isDisabled ? Color.CLEAR : Color.ROW_HOVER);

package/RichmediaPreview/RichmediaPreview.js

@@ -34,8 +34,8 @@ export function RichmediaPreview(props) {
   });
   return _jsx(RichMediaPreviewContainer, {
     ...LIGHT_ISLAND_PROPS,
-    width: width,
-    height: height,
+    "$width": width,
+    "$height": height,
     "$isLoading": isLoading,
     "$placeItems": "center",
     children: isLoading ? _jsx(Spinner, {

package/RichmediaPreview/__tests__/RichmediaPreview.test.d.ts

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

package/RichmediaPreview/__tests__/RichmediaPreview.test.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { RichmediaPreview } from '../RichmediaPreview';
+describe('RichmediaPreview', () => {
+  it('sizes the container without width/height attributes', () => {
+    const {
+      container
+    } = render(_jsx(RichmediaPreview, {
+      name: "rm",
+      params: {},
+      content: "",
+      width: 300,
+      height: 500
+    }));
+    const box = container.firstElementChild;
+    expect(box).not.toHaveAttribute('width');
+    expect(box).not.toHaveAttribute('height');
+    expect(getComputedStyle(box).width).toBe('300px');
+    expect(getComputedStyle(box).height).toBe('500px');
+  });
+});

package/RichmediaPreview/styles.d.ts

@@ -11,8 +11,8 @@ export declare const RichMediaPreviewContainer: import("styled-components").Styl
 } & {
     $gridAutoFlow: string;
 } & {
-    width: string | number;
-    height: string | number;
+    $width: string | number;
+    $height: string | number;
     $isLoading?: boolean;
 }, "$gridAutoFlow">;
 export declare const RichMediaPreviewIframe: import("styled-components").StyledComponent<typeof SandboxedHtmlFrame, any, {}, never>;

package/RichmediaPreview/styles.js

@@ -6,10 +6,10 @@ export const RichMediaPreviewContainer = styled(Vertical).withConfig({
   displayName: "RichMediaPreviewContainer",
   componentId: "sc-1ci6l2b-0"
 })(["position:relative;border:1px solid #ddd;width:", ";height:", ";border-radius:", ";background-color:", ";margin:0 auto;overflow:hidden;"], ({
-  width
-}) => toCssValue(width), ({
-  height
-}) => toCssValue(height), ShapeRadius.SECTION, ({
+  $width
+}) => toCssValue($width), ({
+  $height
+}) => toCssValue($height), ShapeRadius.SECTION, ({
   $isLoading
 }) => $isLoading ? Color.FROZEN : Color.CLEAR);
 export const RichMediaPreviewIframe = styled(SandboxedHtmlFrame).withConfig({

package/Spinner/Spinner.js

@@ -20,7 +20,7 @@ export function Spinner(props) {
   }
   return _jsx(SpinnerBox, {
     ...rest,
-    size: size,
+    "$size": size,
     ref: boxRef,
     children: _jsx(SpinnerAnimate, {
       children: _jsx(Icon, {})

package/Spinner/__tests__/Spinner.test.d.ts

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

package/Spinner/__tests__/Spinner.test.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { Spinner } from '../Spinner';
+describe('Spinner', () => {
+  it('sizes the box from `size` without leaking it to the DOM', () => {
+    const {
+      container
+    } = render(_jsx(Spinner, {
+      size: "medium"
+    }));
+    const box = container.firstElementChild;
+    expect(box).not.toHaveAttribute('size');
+    expect(getComputedStyle(box).width).toBe('24px');
+  });
+});

package/Spinner/styles.d.ts

@@ -1,5 +1,5 @@
 import type { SpinnerProps } from './types';
 export declare const SpinnerBox: import("styled-components").StyledComponent<"div", any, {
-    size: SpinnerProps["size"];
+    $size: SpinnerProps["size"];
 }, never>;
 export declare const SpinnerAnimate: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Spinner/styles.js

@@ -9,10 +9,10 @@ export const SpinnerBox = styled.div.withConfig({
   displayName: "SpinnerBox",
   componentId: "sc-y39y31-0"
 })(["width:", ";height:", ";color:", ";line-height:0;user-select:none;", ""], ({
-  size
-}) => SizeInPxBySpinnerSizeMap[size], ({
-  size
-}) => SizeInPxBySpinnerSizeMap[size], ({
+  $size
+}) => SizeInPxBySpinnerSizeMap[$size], ({
+  $size
+}) => SizeInPxBySpinnerSizeMap[$size], ({
   color
 }) => color || Color.CURRENT, ({
   color

package/Switch/Switch.js

@@ -20,18 +20,18 @@ export function Switch({
     }
   }, [isDisabled, onChange]);
   return _jsxs(Container, {
-    labelPosition: labelPosition,
-    isDisabled: isDisabled,
+    "$labelPosition": labelPosition,
+    "$isDisabled": isDisabled,
     onClick: handleClick,
     children: [_jsx(Box, {
-      enabled: enabled,
-      isDisabled: isDisabled,
+      "$enabled": enabled,
+      "$isDisabled": isDisabled,
       children: _jsx(Circle, {
-        enabled: enabled,
-        isDisabled: isDisabled
+        "$enabled": enabled,
+        "$isDisabled": isDisabled
       })
     }), children && _jsx(Label, {
-      labelPosition: labelPosition,
+      "$labelPosition": labelPosition,
       children: children
     })]
   });

package/Switch/styles.js

@@ -1,34 +1,34 @@
 import styled, { css } from 'styled-components';
 import { Color, FontSize, FontWeight } from '@pushwoosh/kit-constants';
 const defineColorBackgroundBox = css(["", ""], props => {
-  if (props.isDisabled && !props.enabled) {
+  if (props.$isDisabled && !props.$enabled) {
     return Color.CLEAR;
   }
-  if (props.isDisabled && props.enabled) {
+  if (props.$isDisabled && props.$enabled) {
     return Color.LOCKED;
   }
-  if (props.enabled) {
+  if (props.$enabled) {
     return Color.PRIMARY_HOVER;
   }
   return Color.CLEAR;
 });
 const defineColorBorderBox = css(["", ""], props => {
-  if (props.isDisabled) {
+  if (props.$isDisabled) {
     return Color.LOCKED;
   }
-  if (props.enabled) {
+  if (props.$enabled) {
     return Color.PRIMARY_HOVER;
   }
   return Color.PHANTOM;
 });
 const defineColorCircle = css(["", ""], props => {
-  if (props.isDisabled && props.enabled) {
+  if (props.$isDisabled && props.$enabled) {
     return Color.CLEAR;
   }
-  if (props.isDisabled && !props.enabled) {
+  if (props.$isDisabled && !props.$enabled) {
     return Color.LOCKED;
   }
-  if (!props.isDisabled && props.enabled) {
+  if (!props.$isDisabled && props.$enabled) {
     return Color.CLEAR;
   }
   return Color.MAIN;
@@ -38,20 +38,20 @@ export const Container = styled.div.withConfig({
   displayName: "Container",
   componentId: "sc-csdrg2-0"
 })(["display:flex;align-items:center;flex-direction:", ";cursor:", ";"], ({
-  labelPosition
-}) => labelPosition === 'left' ? 'row-reverse' : 'row', ({
-  isDisabled
-}) => isDisabled ? 'not-allowed' : 'pointer');
+  $labelPosition
+}) => $labelPosition === 'left' ? 'row-reverse' : 'row', ({
+  $isDisabled
+}) => $isDisabled ? 'not-allowed' : 'pointer');
 export const Box = styled.div.attrs({
   tabIndex: '0'
 }).withConfig({
   displayName: "Box",
   componentId: "sc-csdrg2-1"
 })(["display:flex;align-items:center;justify-content:", ";width:36px;height:20px;border:2px solid ", ";border-radius:10px;background-color:", ";outline:none;cursor:pointer;", ""], ({
-  enabled
-}) => enabled ? 'flex-end' : 'flex-start', defineColorBorderBox, defineColorBackgroundBox, ({
-  isDisabled
-}) => isDisabled ? '' : cssActive);
+  $enabled
+}) => $enabled ? 'flex-end' : 'flex-start', defineColorBorderBox, defineColorBackgroundBox, ({
+  $isDisabled
+}) => $isDisabled ? '' : cssActive);
 export const Circle = styled.div.withConfig({
   displayName: "Circle",
   componentId: "sc-csdrg2-2"
@@ -60,5 +60,5 @@ export const Label = styled.div.withConfig({
   displayName: "Label",
   componentId: "sc-csdrg2-3"
 })(["display:flex;align-items:center;color:", ";font-size:", ";font-weight:", ";margin:", ";"], Color.MAIN, FontSize.REGULAR, FontWeight.MEDIUM, ({
-  labelPosition
-}) => labelPosition === 'left' ? '0 8px 0' : '0 0 0 8px');
+  $labelPosition
+}) => $labelPosition === 'left' ? '0 8px 0' : '0 0 0 8px');

package/Switch/types.d.ts

@@ -14,11 +14,11 @@ export interface SwitchProps {
 }
 /** Internal style props carrying the label side and the disabled state. */
 export interface AlignProps {
-    labelPosition?: string;
-    isDisabled?: boolean;
+    $labelPosition?: string;
+    $isDisabled?: boolean;
 }
 /** Internal style prop carrying the toggle state. */
 export interface ComponentProps {
-    enabled: boolean;
-    isDisabled?: boolean;
+    $enabled: boolean;
+    $isDisabled?: boolean;
 }

package/Tabs/__tests__/TabBar.test.d.ts

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

package/Tabs/__tests__/TabBar.test.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { Tab, TabBar, Tabs } from '..';
+describe('TabBar', () => {
+  it('adds a title column only when a title is given, without a hasTitle attribute', () => {
+    render(_jsx(Tabs, {
+      activeCode: "a",
+      onChange: jest.fn(),
+      children: _jsx(TabBar, {
+        title: "Title",
+        "data-testid": "bar",
+        children: _jsx(Tab, {
+          code: "a",
+          children: "A"
+        })
+      })
+    }));
+    const bar = screen.getByTestId('bar');
+    expect(bar).not.toHaveAttribute('hastitle');
+    expect(getComputedStyle(bar).gridTemplateColumns).toBe('max-content 1fr');
+  });
+  it('uses a single column without a title', () => {
+    render(_jsx(Tabs, {
+      activeCode: "a",
+      onChange: jest.fn(),
+      children: _jsx(TabBar, {
+        "data-testid": "bar",
+        children: _jsx(Tab, {
+          code: "a",
+          children: "A"
+        })
+      })
+    }));
+    expect(getComputedStyle(screen.getByTestId('bar')).gridTemplateColumns).toBe('1fr');
+  });
+});

package/Tabs/components/TabBar/TabBar.js

@@ -15,7 +15,7 @@ export const TabBar = forwardRef((props, ref) => {
     ...rest
   } = props;
   return _jsxs(TabBarContainer, {
-    hasTitle: !!title,
+    "$hasTitle": !!title,
     ref: ref,
     ...rest,
     children: [title && _jsx(TabBarTitleBox, {

package/Tabs/components/TabBar/styles.d.ts

@@ -1,5 +1,5 @@
 export declare const TabBarContainer: import("styled-components").StyledComponent<"div", any, {
-    hasTitle: boolean;
+    $hasTitle: boolean;
 }, never>;
 export declare const TabBarTitleBox: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TabBarStretchedContent: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Tabs/components/TabBar/styles.js

@@ -4,8 +4,8 @@ export const TabBarContainer = styled.div.withConfig({
   displayName: "TabBarContainer",
   componentId: "sc-pu8yhh-0"
 })(["position:relative;display:grid;grid-template-columns:", ";width:100%;height:40px;background:", ";border-radius:8px;padding:4px;overflow:hidden;"], ({
-  hasTitle
-}) => hasTitle ? 'max-content 1fr' : '1fr', Color.SOFT_LIGHT);
+  $hasTitle
+}) => $hasTitle ? 'max-content 1fr' : '1fr', Color.SOFT_LIGHT);
 export const TabBarTitleBox = styled.div.withConfig({
   displayName: "TabBarTitleBox",
   componentId: "sc-pu8yhh-1"

package/Tabs/components/TabBarScrollableFrame/TabBarScrollableFrame.js

@@ -55,7 +55,7 @@ export const TabBarScrollableFrame = forwardRef(({
       "$clipRight": canScrollRight,
       ref: windowRef,
       children: _jsx(TabBarContent, {
-        left: scrollLeft,
+        "$left": scrollLeft,
         ref: contentRef,
         children: children
       })

package/Tabs/components/TabBarScrollableFrame/styles.d.ts

@@ -7,6 +7,6 @@ export declare const TabBarWindow: import("styled-components").StyledComponent<"
 }, never>;
 export declare const TabsListContentBase: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TabBarContent: import("styled-components").StyledComponent<"div", any, {
-    left: number;
+    $left: number;
 }, never>;
 export declare const TabBarFrame: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Tabs/components/TabBarScrollableFrame/styles.js

@@ -23,8 +23,8 @@ export const TabBarContent = styled(TabsListContentBase).withConfig({
   displayName: "TabBarContent",
   componentId: "sc-1sonok9-3"
 })(["left:", "px;gap:4px;"], ({
-  left
-}) => left);
+  $left
+}) => $left);
 export const TabBarFrame = styled.div.withConfig({
   displayName: "TabBarFrame",
   componentId: "sc-1sonok9-4"