@pushwoosh/smart-components-kit 1.3.34 → 1.3.36

package/CampaignsConfigurationDrawer/CampaignsConfigurationDrawer.js

@@ -6,7 +6,7 @@ import { H1, H3 } from '@pushwoosh/kit-typography';
 import { Card } from './components/Card';
 import { useCanSendMessages } from './hooks';
 import { useLang } from './polyglot';
-import { CloseButtonWrap } from './styled';
+import { CloseButtonWrap } from './styles';
 export function CampaignsConfigurationDrawer(props) {
   const {
     applicationCode,

package/CampaignsConfigurationDrawer/components/Card/Card.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Color } from '@pushwoosh/kit-constants';
 import { Text } from '@pushwoosh/kit-typography';
-import { Container, IconWrap, Title } from './styled';
+import { Container, IconWrap, Title } from './styles';
 export function Card(props) {
   const {
     title,

package/CampaignsConfigurationDrawer/components/Card/{styled.js → styles.js}

@@ -3,13 +3,13 @@ import { Color, ShapeRadius, Shadow } from '@pushwoosh/kit-constants';
 import { H4 } from '@pushwoosh/kit-typography';
 export const Container = styled.a.withConfig({
   displayName: "Container",
-  componentId: "sc-l13y9a-0"
+  componentId: "sc-1r8stxq-0"
 })(["text-decoration:none;border:1px solid ", ";border-radius:", ";padding:16px;background-color:", ";box-shadow:none;min-width:250px;cursor:pointer;transition:box-shadow 0.15s ease-in;&:hover{box-shadow:", ";text-decoration:none;}&:active{box-shadow:none;opacity:0.5;text-decoration:none;}"], Color.DIVIDER, ShapeRadius.SECTION, Color.CLEAR, Shadow.LARGE);
 export const IconWrap = styled.div.withConfig({
   displayName: "IconWrap",
-  componentId: "sc-l13y9a-1"
+  componentId: "sc-1r8stxq-1"
 })(["padding:4px;border-radius:", ";background-color:", ";margin-bottom:8px;width:fit-content;"], ShapeRadius.CONTROL, Color.BRIGHT_LIGHT);
 export const Title = styled(H4).withConfig({
   displayName: "Title",
-  componentId: "sc-l13y9a-2"
+  componentId: "sc-1r8stxq-2"
 })(["margin-bottom:2px;color:", ";"], Color.MAIN);

package/CampaignsConfigurationDrawer/{styled.js → styles.js}

@@ -2,5 +2,5 @@ import styled from 'styled-components';
 import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
 export const CloseButtonWrap = styled.div.withConfig({
   displayName: "CloseButtonWrap",
-  componentId: "sc-1kf0icq-0"
+  componentId: "sc-a4d1y6-0"
 })(["padding:6px;cursor:pointer;border-radius:", ";background-color:transparent;&:hover{background-color:", ";color:", ";}"], ShapeRadius.CONTROL, Color.BRIGHT_LIGHT, Color.PRIMARY_HOVER);

package/DynamicContentPicker/DynamicContentPicker.js

@@ -8,7 +8,7 @@ import { Text } from '@pushwoosh/kit-typography';
 import ArrowIcon from './assets/arrow.svg';
 import { placementToDirection } from './helpers';
 import { Line } from './Line';
-import { Arrow, FieldPlace, TextPlace } from './styled';
+import { Arrow, FieldPlace, TextPlace } from './styles';
 import { VariedDynamicContentPickerFormSmart } from '../DynamicContentPickerForm/VariedDynamicContentPickerFormSmart';
 const initialState = {};
 const reducer = (state, action) => {

package/DynamicContentPicker/{styled.js → styles.js}

@@ -3,11 +3,11 @@ import { Color, FontSize, FontWeight, ShapeRadius } from '@pushwoosh/kit-constan
 import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 export const FieldPlace = styled(Vertical).withConfig({
   displayName: "FieldPlace",
-  componentId: "sc-1blii2o-0"
+  componentId: "sc-175bs54-0"
 })(["border:1px solid ", ";border-radius:", ";& > div:first-child{background-color:", ";}"], Color.DIVIDER, ShapeRadius.SECTION, Color.SOFT_LIGHT);
 export const TextPlace = styled.div.withConfig({
   displayName: "TextPlace",
-  componentId: "sc-1blii2o-1"
+  componentId: "sc-175bs54-1"
 })(["font-weight:", ";font-size:", ";line-height:140%;& > p{margin:4px 0;vertical-align:center;svg{vertical-align:middle;}&:first-child{margin-top:0;}&:last-child{margin-bottom:0;}}"], FontWeight.REGULAR, FontSize.REGULAR);
 const transforms = {
   left: 'scaleX(-1)',
@@ -19,7 +19,7 @@ export const Arrow = styled(Horizontal).attrs({
   $placeItems: 'center'
 }).withConfig({
   displayName: "Arrow",
-  componentId: "sc-1blii2o-2"
+  componentId: "sc-175bs54-2"
 })(["position:absolute;width:20px;height:20px;transform:", " translateX(11px);", ":0;"], ({
   $direction
 }) => transforms[$direction], ({

package/DynamicContentPickerForm/SimpleDynamicContentPickerFormSmart.js

@@ -4,7 +4,7 @@ import { Combobox, FieldBox, NativeInput, Spinner } from '@pushwoosh/dumb-compon
 import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { useDynamicContentTags } from './hooks';
 import { useLang } from './polyglot';
-import { SimpleTagPickerDiv } from './styled';
+import { SimpleTagPickerDiv } from './styles';
 import { allDynamicContentModifiers, buildOptions } from './utils';
 const defaultModifier = 'regular';
 const matchesQuery = (value, query) => value.toLowerCase().includes(query.trim().toLowerCase());

package/DynamicContentPickerForm/VariedDynamicContentPickerFormSmart.js

@@ -7,7 +7,7 @@ import { DynamicContentEventPickerForm } from './DynamicContentEventPickerForm';
 import { DynamicContentTagPickerForm } from './DynamicContentTagPickerForm';
 import { useVariedDynamicContentTags } from './hooks';
 import { useLang } from './polyglot';
-import { VariedTagPickerDiv } from './styled';
+import { VariedTagPickerDiv } from './styles';
 import { createDefaultDynamicContent } from './utils';
 const defaultVariedDynamicContent = {
   kind: 'tag',

package/DynamicContentPickerForm/{styled.js → styles.js}

@@ -7,7 +7,7 @@ export const SimpleTagPickerDiv = styled(Vertical).attrs({
   $borderRadius: ShapeRadius.CONTROL
 }).withConfig({
   displayName: "SimpleTagPickerDiv",
-  componentId: "sc-17kpm8h-0"
+  componentId: "sc-sgqri8-0"
 })(["width:240px;"]);
 export const VariedTagPickerDiv = styled(SimpleTagPickerDiv).attrs({
   $border: `1px solid ${Color.FORM}`,
@@ -15,5 +15,5 @@ export const VariedTagPickerDiv = styled(SimpleTagPickerDiv).attrs({
   $boxShadow: Shadow.REGULAR
 }).withConfig({
   displayName: "VariedTagPickerDiv",
-  componentId: "sc-17kpm8h-1"
+  componentId: "sc-sgqri8-1"
 })([""]);

package/LanguagesSelector/LanguagesSelectForm.js

@@ -5,7 +5,7 @@ import { Color } from '@pushwoosh/kit-constants';
 import { Columns, Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { Text } from '@pushwoosh/kit-typography';
 import { useLang } from './polyglot';
-import { ActionButton } from './styled';
+import { ActionButton } from './styles';
 import { fetchLastSelection, useGetLangName } from './utils';
 const AUDIENCE_HINT_MESSAGE = {
   email: 'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.EMAIL',

package/LanguagesSelector/LanguagesSelector.js

@@ -5,7 +5,7 @@ import { Horizontal } from '@pushwoosh/kit-helpers';
 import { ArrowIcon, ChevronIcon, LanguageIcon, PlusIcon } from '@pushwoosh/kit-icons';
 import { LanguagesModal } from './LanguagesModal';
 import { useLang } from './polyglot';
-import { ButtonGroup } from './styled';
+import { ButtonGroup } from './styles';
 import { useGetLangName } from './utils';
 export const LanguagesSelector = ({
   applicationCode,

package/LanguagesSelector/{styled.js → styles.js}

@@ -3,9 +3,9 @@ import { Color } from '@pushwoosh/kit-constants';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 export const ButtonGroup = styled(Horizontal).withConfig({
   displayName: "ButtonGroup",
-  componentId: "sc-1ntyrsv-0"
+  componentId: "sc-1damw8z-0"
 })(["& > *:first-child{border-radius:4px 0 0 4px;}& > *:last-child{border-radius:0 4px 4px 0;}& > *:not(:first-child){border-left:none;}"]);
 export const ActionButton = styled.button.withConfig({
   displayName: "ActionButton",
-  componentId: "sc-1ntyrsv-1"
+  componentId: "sc-1damw8z-1"
 })(["display:grid;grid-auto-flow:column;align-items:center;gap:4px;text-transform:uppercase;color:", ";background-color:transparent;height:16px;padding:0;border:none;font-size:12px;font-style:normal;font-weight:500;line-height:16px;transition:box-shadow 0.5s;cursor:pointer;&:hover{color:", ";}&:active{box-shadow:inset 0 0 0 2em ", ";}"], Color.SOFT, Color.SOFT_HOVER, Color.SOFT_LIGHT);

package/MediaStorage/CreateCropDrawer.js

@@ -8,7 +8,7 @@ import { useSPAContext } from '@pushwoosh/spa-context';
 import { useDeleteMediaFile } from './hooks';
 import { getCropCaption, getThumbUrl } from './mediaFile.utils';
 import { useLang } from './polyglot';
-import { Chips, CropStrip, CropThumb, CropThumbCaption, CropThumbDelete, FieldLabel, PreviewFrame, PreviewImage, PreviewStage, Segment, SegmentItem, SizeInput, TileImage } from './styled';
+import { Chips, CropStrip, CropThumb, CropThumbCaption, CropThumbDelete, FieldLabel, PreviewFrame, PreviewImage, PreviewStage, Segment, SegmentItem, SizeInput, TileImage } from './styles';
 const RATIOS = [{
   value: 'ASPECT_RATIO_1_1',
   label: '1:1',

package/MediaStorage/MediaStorage.js

@@ -9,7 +9,7 @@ import { CreateCropDrawer } from './CreateCropDrawer';
 import { useDeleteMediaFile, useDeleteMediaFiles } from './hooks';
 import { formatBytes, getCropCaption, getThumbUrl } from './mediaFile.utils';
 import { Lang, useLang } from './polyglot';
-import { CropBadge, Dropzone, EmptyState, Grid, HiddenInput, SelectionBar, SelectionCount, Tile, TileActions, TileCheckbox, TileImage, UsageLine, WarningBadge } from './styled';
+import { CropBadge, Dropzone, EmptyState, Grid, HiddenInput, SelectionBar, SelectionCount, Tile, TileActions, TileCheckbox, TileImage, UsageLine, WarningBadge } from './styles';
 const UPLOAD_PATH = '/api/media/upload';
 const ALLOWED_IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
 const isAllowedImage = file => {

package/MediaStorage/{styled.js → styles.js}

@@ -3,11 +3,11 @@ import { NativeInput } from '@pushwoosh/dumb-components';
 import { Color, FontSize, FontWeight } from '@pushwoosh/kit-constants';
 export const Grid = styled.div.withConfig({
   displayName: "Grid",
-  componentId: "sc-14317rj-0"
+  componentId: "sc-uu3cbo-0"
 })(["display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;"]);
 export const Tile = styled.div.withConfig({
   displayName: "Tile",
-  componentId: "sc-14317rj-1"
+  componentId: "sc-uu3cbo-1"
 })(["position:relative;border-radius:6px;overflow:hidden;border:1px solid ", ";box-shadow:", ";transition:border-color 0.15s,box-shadow 0.15s;&:hover{border-color:", ";}"], ({
   $selected
 }) => $selected ? Color.PRIMARY : Color.DIVIDER, ({
@@ -15,39 +15,39 @@ export const Tile = styled.div.withConfig({
 }) => $selected ? `0 0 0 1px ${Color.PRIMARY}` : 'none', Color.PRIMARY);
 export const TileImage = styled.img.withConfig({
   displayName: "TileImage",
-  componentId: "sc-14317rj-2"
+  componentId: "sc-uu3cbo-2"
 })(["width:100%;aspect-ratio:1;object-fit:cover;display:block;"]);
 export const CropBadge = styled.span.withConfig({
   displayName: "CropBadge",
-  componentId: "sc-14317rj-3"
+  componentId: "sc-uu3cbo-3"
 })(["position:absolute;top:6px;right:6px;font-size:10px;font-weight:", ";line-height:1;color:", ";background:", ";border-radius:20px;padding:3px 7px;pointer-events:none;"], FontWeight.BOLD, Color.CLEAR, Color.PRIMARY);
 export const WarningBadge = styled.span.withConfig({
   displayName: "WarningBadge",
-  componentId: "sc-14317rj-4"
+  componentId: "sc-uu3cbo-4"
 })(["position:absolute;bottom:0;left:0;right:0;font-size:10px;line-height:1.2;text-align:center;color:", ";background:", ";padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;"], Color.CLEAR, Color.WARNING);
 export const TileCheckbox = styled.div.withConfig({
   displayName: "TileCheckbox",
-  componentId: "sc-14317rj-5"
+  componentId: "sc-uu3cbo-5"
 })(["position:absolute;top:6px;left:6px;z-index:2;padding:2px;border-radius:4px;background:", ";"], Color.CLEAR);
 export const SelectionBar = styled.div.withConfig({
   displayName: "SelectionBar",
-  componentId: "sc-14317rj-6"
+  componentId: "sc-uu3cbo-6"
 })(["display:flex;align-items:center;gap:12px;min-height:32px;margin-bottom:12px;"]);
 export const SelectionCount = styled.span.withConfig({
   displayName: "SelectionCount",
-  componentId: "sc-14317rj-7"
+  componentId: "sc-uu3cbo-7"
 })(["font-size:", ";color:", ";"], FontSize.SMALL, Color.LOCKED);
 export const TileActions = styled.div.withConfig({
   displayName: "TileActions",
-  componentId: "sc-14317rj-8"
+  componentId: "sc-uu3cbo-8"
 })(["position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;background:rgba(0,0,0,0.45);backdrop-filter:blur(2px);opacity:0;transition:opacity 0.15s;", ":hover &{opacity:1;}@media (hover:none){opacity:1;}"], Tile);
 export const EmptyState = styled.div.withConfig({
   displayName: "EmptyState",
-  componentId: "sc-14317rj-9"
+  componentId: "sc-uu3cbo-9"
 })(["text-align:center;padding:48px 16px;color:", ";"], Color.LOCKED);
 export const Dropzone = styled.button.withConfig({
   displayName: "Dropzone",
-  componentId: "sc-14317rj-10"
+  componentId: "sc-uu3cbo-10"
 })(["width:100%;min-height:96px;margin-bottom:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;font:inherit;font-size:13px;color:", ";cursor:pointer;border:2px dashed ", ";border-radius:8px;background:", ";transition:border-color 0.15s,background 0.15s;&:hover{border-color:", ";}&:disabled{cursor:default;opacity:0.7;}"], Color.LOCKED, ({
   $dragOver
 }) => $dragOver ? Color.PRIMARY : Color.DIVIDER, ({
@@ -55,46 +55,46 @@ export const Dropzone = styled.button.withConfig({
 }) => $dragOver ? Color.SOFT_LIGHT : Color.CLEAR, Color.PRIMARY);
 export const HiddenInput = styled.input.withConfig({
   displayName: "HiddenInput",
-  componentId: "sc-14317rj-11"
+  componentId: "sc-uu3cbo-11"
 })(["display:none;"]);
 export const UsageLine = styled.div.withConfig({
   displayName: "UsageLine",
-  componentId: "sc-14317rj-12"
+  componentId: "sc-uu3cbo-12"
 })(["margin-left:auto;font-size:", ";color:", ";"], FontSize.SMALL, Color.LOCKED);
 /* ---------- CreateCropDrawer ---------- */
 export const PreviewStage = styled.div.withConfig({
   displayName: "PreviewStage",
-  componentId: "sc-14317rj-13"
+  componentId: "sc-uu3cbo-13"
 })(["display:flex;align-items:center;justify-content:center;min-height:200px;max-height:360px;padding:12px;border:1px solid ", ";border-radius:6px;overflow:hidden;background:", ";"], Color.DIVIDER, Color.SOFT_LIGHT);
 export const PreviewFrame = styled.div.withConfig({
   displayName: "PreviewFrame",
-  componentId: "sc-14317rj-14"
+  componentId: "sc-uu3cbo-14"
 })(["aspect-ratio:", ";max-width:100%;max-height:336px;overflow:hidden;border-radius:4px;"], ({
   $ratio
 }) => $ratio);
 export const PreviewImage = styled.img.withConfig({
   displayName: "PreviewImage",
-  componentId: "sc-14317rj-15"
+  componentId: "sc-uu3cbo-15"
 })(["width:100%;height:100%;object-fit:cover;display:block;"]);
 export const FieldLabel = styled.div.withConfig({
   displayName: "FieldLabel",
-  componentId: "sc-14317rj-16"
+  componentId: "sc-uu3cbo-16"
 })(["font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;color:", ";margin-bottom:6px;"], Color.LOCKED);
 export const SizeInput = styled(NativeInput).withConfig({
   displayName: "SizeInput",
-  componentId: "sc-14317rj-17"
+  componentId: "sc-uu3cbo-17"
 })(["&[readonly]{background:", ";color:", ";}"], Color.SOFT_LIGHT, Color.LOCKED);
 export const Chips = styled.div.withConfig({
   displayName: "Chips",
-  componentId: "sc-14317rj-18"
+  componentId: "sc-uu3cbo-18"
 })(["display:flex;flex-wrap:wrap;gap:7px;"]);
 export const Segment = styled.div.withConfig({
   displayName: "Segment",
-  componentId: "sc-14317rj-19"
+  componentId: "sc-uu3cbo-19"
 })(["display:inline-flex;border:1px solid ", ";border-radius:6px;overflow:hidden;"], Color.DIVIDER);
 export const SegmentItem = styled.button.withConfig({
   displayName: "SegmentItem",
-  componentId: "sc-14317rj-20"
+  componentId: "sc-uu3cbo-20"
 })(["font:inherit;font-size:13px;cursor:pointer;padding:7px 14px;border:none;background:", ";color:", ";& + &{border-left:1px solid ", ";}"], ({
   $active
 }) => $active ? Color.PRIMARY : Color.CLEAR, ({
@@ -102,17 +102,17 @@ export const SegmentItem = styled.button.withConfig({
 }) => $active ? Color.CLEAR : Color.MAIN, Color.DIVIDER);
 export const CropStrip = styled.div.withConfig({
   displayName: "CropStrip",
-  componentId: "sc-14317rj-21"
+  componentId: "sc-uu3cbo-21"
 })(["display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;"]);
 export const CropThumb = styled.div.withConfig({
   displayName: "CropThumb",
-  componentId: "sc-14317rj-22"
+  componentId: "sc-uu3cbo-22"
 })(["position:relative;width:88px;border:1px solid ", ";border-radius:6px;overflow:hidden;background:", ";"], Color.DIVIDER, Color.SOFT_LIGHT);
 export const CropThumbDelete = styled.div.withConfig({
   displayName: "CropThumbDelete",
-  componentId: "sc-14317rj-23"
+  componentId: "sc-uu3cbo-23"
 })(["position:absolute;top:4px;right:4px;opacity:0;transition:opacity 0.15s;", ":hover &{opacity:1;}@media (hover:none){opacity:1;}"], CropThumb);
 export const CropThumbCaption = styled.div.withConfig({
   displayName: "CropThumbCaption",
-  componentId: "sc-14317rj-24"
+  componentId: "sc-uu3cbo-24"
 })(["font-size:10px;text-align:center;padding:3px 2px;color:", ";"], Color.LOCKED);

package/PlatformsConfigurationDrawer/components/DesktopPage/DesktopPage.js

@@ -5,7 +5,7 @@ import { Vertical, Columns } from '@pushwoosh/kit-helpers';
 import { ArrowRoundIcon, CloseIcon, PlatformLogoIcon } from '@pushwoosh/kit-icons';
 import { H2, H4, Text } from '@pushwoosh/kit-typography';
 import { useLang } from '../../polyglot';
-import { ColumnsWrapper, BreadCrumbs, Header, Close, Card, CardIcon } from '../../styled';
+import { ColumnsWrapper, BreadCrumbs, Header, Close, Card, CardIcon } from '../../styles';
 export function DesktopPage(props) {
   const {
     application,

package/PlatformsConfigurationDrawer/components/MainPage/MainPage.js

@@ -5,7 +5,7 @@ import { Vertical, Columns } from '@pushwoosh/kit-helpers';
 import { CloseIcon, DeviceIcon, EmailIcon, WhatsappIcon, SmsIcon } from '@pushwoosh/kit-icons';
 import { H2, Paragraph, H4, Text } from '@pushwoosh/kit-typography';
 import { useLang } from '../../polyglot';
-import { Header, Close, Card, CardIcon } from '../../styled';
+import { Header, Close, Card, CardIcon } from '../../styles';
 export function MainPage(props) {
   const {
     application,

package/PlatformsConfigurationDrawer/components/MobilePage/MobilePage.js

@@ -5,7 +5,7 @@ import { Columns, Vertical } from '@pushwoosh/kit-helpers';
 import { ArrowRoundIcon, CloseIcon, PlatformLogoIcon } from '@pushwoosh/kit-icons';
 import { H2, H4, Text } from '@pushwoosh/kit-typography';
 import { useLang } from '../../polyglot';
-import { ColumnsWrapper, BreadCrumbs, Header, Close, Card, CardIcon } from '../../styled';
+import { ColumnsWrapper, BreadCrumbs, Header, Close, Card, CardIcon } from '../../styles';
 export function MobilePage(props) {
   const {
     application,

package/PlatformsConfigurationDrawer/{styled.js → styles.js}

@@ -3,25 +3,25 @@ import { Link } from '@pushwoosh/dumb-components';
 import { Color } from '@pushwoosh/kit-constants';
 export const Header = styled.div.withConfig({
   displayName: "Header",
-  componentId: "sc-1rmglxf-0"
+  componentId: "sc-1hc8gn9-0"
 })(["position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;background:", ";padding:40px 0 8px;gap:8px;"], Color.CLEAR);
 export const Close = styled.div.withConfig({
   displayName: "Close",
-  componentId: "sc-1rmglxf-1"
+  componentId: "sc-1hc8gn9-1"
 })(["display:flex;justify-content:center;align-items:center;width:36px;height:36px;cursor:pointer;"]);
 export const ColumnsWrapper = styled.div.withConfig({
   displayName: "ColumnsWrapper",
-  componentId: "sc-1rmglxf-2"
+  componentId: "sc-1hc8gn9-2"
 })(["flex:1;"]);
 export const BreadCrumbs = styled.div.withConfig({
   displayName: "BreadCrumbs",
-  componentId: "sc-1rmglxf-3"
+  componentId: "sc-1hc8gn9-3"
 })(["padding-left:56px;"]);
 export const Card = styled(Link).withConfig({
   displayName: "Card",
-  componentId: "sc-1rmglxf-4"
+  componentId: "sc-1hc8gn9-4"
 })(["display:flex;align-items:center;padding:16px;border:1px solid ", ";border-radius:8px;color:", ";gap:16px;cursor:pointer;&:hover,&:focus,&:active{color:", ";text-decoration:none;background-color:", ";}&:focus,&:active{opacity:.5;}"], Color.DIVIDER, Color.MAIN, Color.MAIN, Color.ROW_HOVER);
 export const CardIcon = styled.div.withConfig({
   displayName: "CardIcon",
-  componentId: "sc-1rmglxf-5"
+  componentId: "sc-1hc8gn9-5"
 })(["padding:4px;color:", ";background-color:", ";border-radius:8px;"], Color.PRIMARY, Color.BRIGHT_LIGHT);

package/Table/styles.js

@@ -2,6 +2,8 @@ import styled, { css } from 'styled-components';
 import { Color, FontSize, FontWeight, LineHeight, ShapeRadius } from '@pushwoosh/kit-constants';
 import { GridContainer, Horizontal, Vertical, toCssValue } from '@pushwoosh/kit-helpers';
 export const Table = styled(Vertical).withConfig({
+  shouldForwardProp: prop => !['columns', 'isBordered'].includes(prop)
+}).withConfig({
   displayName: "Table",
   componentId: "sc-1vdjaze-0"
 })(["--table-columns:", ";border:", ";border-radius:", ";background-color:", ";", " & > *:not(:last-child){border-bottom:1px solid ", ";}"], ({

package/Table/styles.test.d.ts

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

package/Table/styles.test.js

@@ -0,0 +1,48 @@
+import { createElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { ServerStyleSheet } from 'styled-components';
+import { describe, expect, it } from 'vitest';
+import { Table } from './styles';
+const render = () => {
+  const sheet = new ServerStyleSheet();
+  try {
+    const html = renderToStaticMarkup(sheet.collectStyles(createElement(Table, {
+      columns: '1fr 340px',
+      width: '100%',
+      isBordered: true
+    })));
+    return {
+      html,
+      css: sheet.getStyleTags()
+    };
+  } finally {
+    sheet.seal();
+  }
+};
+describe('Table', () => {
+  it('denies columns and isBordered in shouldForwardProp, which SC 6 uses instead of isPropValid', () => {
+    const {
+      shouldForwardProp
+    } = Table;
+    expect(shouldForwardProp?.('columns')).toBe(false);
+    expect(shouldForwardProp?.('isBordered')).toBe(false);
+    expect(shouldForwardProp?.('width')).toBe(true);
+  });
+  it('does not forward columns and isBordered to the DOM', () => {
+    const {
+      html
+    } = render();
+    expect(html).not.toMatch(/columns=/i);
+    expect(html).not.toMatch(/isbordered=/i);
+  });
+  it('keeps width as a DOM attribute', () => {
+    expect(render().html).toContain('width="100%"');
+  });
+  it('still styles from columns and isBordered', () => {
+    const {
+      css
+    } = render();
+    expect(css).toContain('--table-columns:1fr 340px');
+    expect(css).toMatch(/border:1px solid/);
+  });
+});

package/package.json

@@ -1,51 +1,42 @@
 {
   "name": "@pushwoosh/smart-components-kit",
+  "version": "1.3.36",
+  "description": "Stateful, data-connected React components shared by Pushwoosh micro-frontends",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.corp.pushwoosh.com/frontend/frontend-monorepo.git",
+    "directory": "packages/smart-components"
+  },
   "main": "index.js",
   "module": "index.js",
   "types": "index.d.ts",
   "sideEffects": false,
   "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "start": "npm run playground",
-    "dev": "`pushwoosh-engine app:command:dev`",
-    "build": "pushwoosh-engine lib:build",
-    "playground": "`pushwoosh-engine lib:command:playground`",
-    "check": "npm run check:lint && npm run check:types && npm run test",
-    "check:lint": "echo \"Run check:lint\" && NODE_ENV=production eslint src",
-    "check:lint-fix": "echo \"Run check:lint\" && NODE_ENV=production eslint src --fix",
-    "check:types": "echo \"Run check:types\" && pushwoosh-engine lib:check-types",
-    "test": "echo \"Run test\" && vitest run"
-  },
-  "pre-commit": "check",
-  "engines": {
-    "node": ">= 24",
-    "npm": ">= 7"
+    "access": "public",
+    "directory": "dist"
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@pushwoosh/dumb-components": "^2.1.1",
-    "@pushwoosh/kit-constants": "^2.0.0",
-    "@pushwoosh/kit-helpers": "^4.12.5",
+    "@pushwoosh/dumb-components": "^2.9.12",
+    "@pushwoosh/kit-constants": "^2.1.0",
+    "@pushwoosh/kit-helpers": "^4.12.7",
     "@pushwoosh/kit-icons": "^2.3.3",
-    "@pushwoosh/kit-typography": "^1.8.5",
+    "@pushwoosh/kit-typography": "^1.8.7",
     "@pushwoosh/rpc-v2-http-api-data": "^0.2.151",
-    "@pushwoosh/spa-context": "^1.7.1",
+    "@pushwoosh/spa-context": "^1.8.1",
     "idb-keyval": "^6.2.2",
     "jwt-decode": "^4.0.0",
     "react-hook-form": "^7.68.0",
     "react-router-dom": "^5.3.4"
   },
   "devDependencies": {
-    "@pushwoosh/frontend-builder-engine": "^3.1.0",
+    "@pushwoosh/frontend-builder-engine": "^3.1.3",
     "@svgr/webpack": "^8.1.0",
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.31",
+    "@types/react-dom": "^18.3.7",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.34",
     "@types/webpack-env": "^1.18.8",
-    "pre-commit": "^1.2.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "styled-components": "^5.3.11",
@@ -55,5 +46,17 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
-  "version": "1.3.34"
-}
+  "engines": {
+    "node": ">= 24"
+  },
+  "scripts": {
+    "start": "pnpm run playground",
+    "build": "pushwoosh-engine lib:build",
+    "playground": "`pushwoosh-engine lib:command:playground`",
+    "check": "pnpm run check:lint && pnpm run check:types && pnpm run test",
+    "check:lint": "echo \"Run check:lint\" && NODE_ENV=production eslint src",
+    "check:lint-fix": "echo \"Run check:lint\" && NODE_ENV=production eslint src --fix",
+    "check:types": "echo \"Run check:types\" && pushwoosh-engine lib:check-types",
+    "test": "echo \"Run test\" && vitest run"
+  }
+}