@pushwoosh/dumb-components 1.1.99 → 1.1.100

package/Banner/styles.js

@@ -1,6 +1,6 @@
 import { rgba } from 'polished';
 import styled from 'styled-components';
-import { Spacing, ShapeRadius, FontWeight } from '@pushwoosh/kit-constants';
+import { ShapeRadius, FontWeight } from '@pushwoosh/kit-constants';
 import { colors } from './colors';
 export const BannerSpinner = styled.div.withConfig({
   displayName: "BannerSpinner",
@@ -30,15 +30,15 @@ export const BannerContent = styled.div.withConfig({
   componentId: "sc-9uu4ap-4"
 })(["flex-grow:1;padding:", ";color:", ";"], ({
   $hasChildren
-}) => $hasChildren ? Spacing.S5 : `${Spacing.S3} ${Spacing.S5}`, colors.error.shape.base.color);
+}) => $hasChildren ? '16px' : '8px 16px', colors.error.shape.base.color);
 export const IconContainer = styled.div.withConfig({
   displayName: "IconContainer",
   componentId: "sc-9uu4ap-5"
-})(["display:flex;align-items:center;justify-content:center;padding:0 ", ";border-radius:", " 0 0 ", ";"], Spacing.S3, ShapeRadius.SECTION, ShapeRadius.SECTION);
+})(["display:flex;align-items:center;justify-content:center;padding:0 8px;border-radius:", " 0 0 ", ";"], ShapeRadius.SECTION, ShapeRadius.SECTION);
 export const BannerShape = styled(BannerBox).withConfig({
   displayName: "BannerShape",
   componentId: "sc-9uu4ap-6"
-})(["background:", ";", "{color:", ";background:", ";}", "{color:", ";background:", ";;border-radius:", ";&:hover{text-decoration:none;background:", ";border-radius:", ";}}", "{color:", ";> *{&:hover{text-decoration:none;background:", ";border-radius:", ";}}}"], props => colors[props.$type].shape.base.bgColor, IconContainer, props => colors[props.$type].shape.iconArea.color, props => colors[props.$type].shape.iconArea.bgColor, ActionButton, props => colors[props.$type].shape.iconArea.bgColor, props => props.$isLoading ? colors[props.$type].shape.base.bgColor : 'initial', props => props.$isLoading ? ShapeRadius.CONTROL : 'initial', props => colors[props.$type].shape.hover.bgColor, ShapeRadius.CONTROL, CloseButton, props => colors[props.$type].shape.iconArea.bgColor, props => colors[props.$type].shape.hover.bgColor, Spacing.S5);
+})(["background:", ";", "{color:", ";background:", ";}", "{color:", ";background:", ";;border-radius:", ";&:hover{text-decoration:none;background:", ";border-radius:", ";}}", "{color:", ";> *{&:hover{text-decoration:none;background:", ";border-radius:16px;}}}"], props => colors[props.$type].shape.base.bgColor, IconContainer, props => colors[props.$type].shape.iconArea.color, props => colors[props.$type].shape.iconArea.bgColor, ActionButton, props => colors[props.$type].shape.iconArea.bgColor, props => props.$isLoading ? colors[props.$type].shape.base.bgColor : 'initial', props => props.$isLoading ? ShapeRadius.CONTROL : 'initial', props => colors[props.$type].shape.hover.bgColor, ShapeRadius.CONTROL, CloseButton, props => colors[props.$type].shape.iconArea.bgColor, props => colors[props.$type].shape.hover.bgColor);
 export const BannerGhost = styled(BannerBox).withConfig({
   displayName: "BannerGhost",
   componentId: "sc-9uu4ap-7"

package/Button/styles.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Color, FontSize, LineHeight, Spacing, ShapeRadius, FontWeight, UnitSize } from '@pushwoosh/kit-constants';
+import { Color, FontSize, LineHeight, ShapeRadius, FontWeight, UnitSize } from '@pushwoosh/kit-constants';
 import { colors, createColors } from './colors';
 export const ButtonIcon = styled.div.withConfig({
   displayName: "ButtonIcon",
@@ -8,7 +8,7 @@ export const ButtonIcon = styled.div.withConfig({
 export const ButtonContent = styled.div.withConfig({
   displayName: "ButtonContent",
   componentId: "sc-qltvdl-1"
-})(["display:grid;justify-content:start;& > div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}&:first-child{justify-content:center;}&:first-child:last-child{padding-left:", ";padding-right:", ";}&:last-child:not(:first-child){padding-right:", ";}&:first-child:not(:last-child){padding-left:", ";}"], Spacing.S2, Spacing.S2, Spacing.S2, Spacing.S2);
+})(["display:grid;justify-content:start;& > div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}&:first-child{justify-content:center;}&:first-child:last-child{padding-left:6px;padding-right:6px;}&:last-child:not(:first-child){padding-right:6px;}&:first-child:not(:last-child){padding-left:6px;}"]);
 export const ButtonSpinner = styled.div.withConfig({
   displayName: "ButtonSpinner",
   componentId: "sc-qltvdl-2"
@@ -16,7 +16,7 @@ export const ButtonSpinner = styled.div.withConfig({
 export const ButtonBox = styled.button.withConfig({
   displayName: "ButtonBox",
   componentId: "sc-qltvdl-3"
-})(["position:relative;display:inline-grid;grid-template-columns:", ";gap:", ";align-items:center;appearance:none !important;border:1px solid transparent;border-radius:", ";font-size:", ";line-height:", ";text-decoration:none;cursor:", ";user-select:none;&:hover{text-decoration:none;}&:focus{outline:none;}&:active{pointer-events:", ";}& ", "{opacity:", ";}"], props => `${props.$hasLeftIcon ? 'auto ' : ''}${props.$hasContent ? '1fr' : ''}${props.$hasRightIcon ? ' auto' : ''}`, Spacing.S1, ShapeRadius.CONTROL, FontSize.REGULAR, LineHeight.REGULAR, props => props.$isDisabled || props.$isLoading ? 'not-allowed!important' : 'pointer', props => props.$isDisabled || props.$isLoading ? 'none' : 'auto', /* sc-selector */ButtonContent, ({
+})(["position:relative;display:inline-grid;align-items:center;grid-template-columns:", ";gap:4px;appearance:none !important;border:1px solid transparent;border-radius:", ";font-size:", ";line-height:", ";text-decoration:none;cursor:", ";user-select:none;&:hover{text-decoration:none;}&:focus{outline:none;}&:active{pointer-events:", ";}& ", "{opacity:", ";}"], props => `${props.$hasLeftIcon ? 'auto ' : ''}${props.$hasContent ? '1fr' : ''}${props.$hasRightIcon ? ' auto' : ''}`, ShapeRadius.CONTROL, FontSize.REGULAR, LineHeight.REGULAR, props => props.$isDisabled || props.$isLoading ? 'not-allowed!important' : 'pointer', props => props.$isDisabled || props.$isLoading ? 'none' : 'auto', /* sc-selector */ButtonContent, ({
   $hideContent,
   $isLoading
 }) => {
@@ -34,27 +34,27 @@ export const ButtonBoxDangerGhostCompact = styled(ButtonBox).withConfig({
 export const ButtonBoxDangerGhostField = styled(ButtonBox).withConfig({
   displayName: "ButtonBoxDangerGhostField",
   componentId: "sc-qltvdl-5"
-})(["height:", ";padding:0 calc(", " - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, Spacing.S2, FontWeight.MEDIUM, /* sc-custom "display: none;" */dangerGhostColors);
+})(["height:", ";padding:0 calc(6px - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, FontWeight.MEDIUM, /* sc-custom "display: none;" */dangerGhostColors);
 // danger shape --------------
 const dangerShapeColors = createColors(colors.danger.shape);
 export const ButtonBoxDangerShapeCompact = styled(ButtonBox).withConfig({
   displayName: "ButtonBoxDangerShapeCompact",
   componentId: "sc-qltvdl-6"
-})(["height:28px;padding:0 calc(", " - 1px);font-size:", ";font-weight:", ";text-transform:uppercase;", ";"], Spacing.S2, FontSize.SMALL, FontWeight.BOLD, /* sc-custom "display: none;" */dangerShapeColors);
+})(["height:28px;padding:0 calc(6px - 1px);font-size:", ";font-weight:", ";text-transform:uppercase;", ";"], FontSize.SMALL, FontWeight.BOLD, /* sc-custom "display: none;" */dangerShapeColors);
 export const ButtonBoxDangerShapeField = styled(ButtonBox).withConfig({
   displayName: "ButtonBoxDangerShapeField",
   componentId: "sc-qltvdl-7"
-})(["height:", ";padding:0 calc(", " - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, Spacing.S2, FontWeight.MEDIUM, /* sc-custom "display: none;" */dangerShapeColors);
+})(["height:", ";padding:0 calc(6px - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, FontWeight.MEDIUM, /* sc-custom "display: none;" */dangerShapeColors);
 // primary shape --------------
 const primaryShapeColors = createColors(colors.primary.shape);
 export const ButtonBoxPrimaryShapeCompact = styled(ButtonBox).withConfig({
   displayName: "ButtonBoxPrimaryShapeCompact",
   componentId: "sc-qltvdl-8"
-})(["height:28px;padding:0 calc(", " - 1px);font-size:", ";font-weight:", ";text-transform:uppercase;", ";"], Spacing.S2, FontSize.SMALL, FontWeight.BOLD, /* sc-custom "display: none;" */primaryShapeColors);
+})(["height:28px;padding:0 calc(6px - 1px);font-size:", ";font-weight:", ";text-transform:uppercase;", ";"], FontSize.SMALL, FontWeight.BOLD, /* sc-custom "display: none;" */primaryShapeColors);
 export const ButtonBoxPrimaryShapeField = styled(ButtonBox).withConfig({
   displayName: "ButtonBoxPrimaryShapeField",
   componentId: "sc-qltvdl-9"
-})(["height:", ";padding:0 calc(", " - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, Spacing.S2, FontWeight.MEDIUM, /* sc-custom "display: none;" */primaryShapeColors);
+})(["height:", ";padding:0 calc(6px - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, FontWeight.MEDIUM, /* sc-custom "display: none;" */primaryShapeColors);
 // primary ghost --------------
 const primaryGhostColors = createColors(colors.primary.ghost);
 export const ButtonBoxPrimaryGhostCompact = styled(ButtonBox).withConfig({
@@ -64,7 +64,7 @@ export const ButtonBoxPrimaryGhostCompact = styled(ButtonBox).withConfig({
 export const ButtonBoxPrimaryGhostField = styled(ButtonBox).withConfig({
   displayName: "ButtonBoxPrimaryGhostField",
   componentId: "sc-qltvdl-11"
-})(["height:", ";padding:0 calc(", " - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, Spacing.S2, FontWeight.MEDIUM, /* sc-custom "display: none;" */primaryGhostColors);
+})(["height:", ";padding:0 calc(6px - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, FontWeight.MEDIUM, /* sc-custom "display: none;" */primaryGhostColors);
 // secondary ghost --------------
 const secondaryGhostColors = createColors(colors.secondary.ghost);
 export const ButtonBoxSecondaryGhostCompact = styled(ButtonBox).withConfig({
@@ -74,17 +74,17 @@ export const ButtonBoxSecondaryGhostCompact = styled(ButtonBox).withConfig({
 export const ButtonBoxSecondaryGhostField = styled(ButtonBox).withConfig({
   displayName: "ButtonBoxSecondaryGhostField",
   componentId: "sc-qltvdl-13"
-})(["height:", ";padding:0 calc(", " - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, Spacing.S2, FontWeight.MEDIUM, /* sc-custom "display: none;" */secondaryGhostColors);
+})(["height:", ";padding:0 calc(6px - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, FontWeight.MEDIUM, /* sc-custom "display: none;" */secondaryGhostColors);
 // secondary shape --------------
 const secondaryShapeColors = createColors(colors.secondary.shape);
 export const ButtonBoxSecondaryShapeCompact = styled(ButtonBox).withConfig({
   displayName: "ButtonBoxSecondaryShapeCompact",
   componentId: "sc-qltvdl-14"
-})(["height:28px;padding:0 calc(", " - 1px);font-size:", ";font-weight:", ";text-transform:uppercase;", ";"], Spacing.S2, FontSize.SMALL, FontWeight.MEDIUM, /* sc-custom "display: none;" */secondaryShapeColors);
+})(["height:28px;padding:0 calc(6px - 1px);font-size:", ";font-weight:", ";text-transform:uppercase;", ";"], FontSize.SMALL, FontWeight.MEDIUM, /* sc-custom "display: none;" */secondaryShapeColors);
 export const ButtonBoxSecondaryShapeField = styled(ButtonBox).withConfig({
   displayName: "ButtonBoxSecondaryShapeField",
   componentId: "sc-qltvdl-15"
-})(["height:", ";padding:0 calc(", " - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, Spacing.S2, FontWeight.MEDIUM, /* sc-custom "display: none;" */secondaryShapeColors);
+})(["height:", ";padding:0 calc(6px - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, FontWeight.MEDIUM, /* sc-custom "display: none;" */secondaryShapeColors);
 ButtonBox.displayName = 'ButtonBox';
 ButtonIcon.displayName = 'ButtonIcon';
 ButtonContent.displayName = 'ButtonContent';

package/CardMetric/styles.js

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
-import { Color, Spacing, FontSize, FontWeight } from '@pushwoosh/kit-constants';
+import { Color, FontSize, FontWeight } from '@pushwoosh/kit-constants';
 export const CardContainer = styled.div.withConfig({
   displayName: "CardContainer",
   componentId: "sc-17snd37-0"
-})(["display:flex;color:", ";background-color:white;flex-direction:column;scroll-margin:4px;outline-style:solid;gap:", ";padding:", ";border-radius:", ";border-bottom:", ";outline-color:", ";outline-width:", ";"], Color.MAIN, Spacing.S4, ({
+})(["display:flex;color:", ";background-color:white;flex-direction:column;scroll-margin:4px;outline-style:solid;gap:12px;padding:", ";border-radius:", ";border-bottom:", ";outline-color:", ";outline-width:", ";"], Color.MAIN, ({
   view
 }) => view === 'stacking' ? '24px' : '16px', ({
   view
@@ -27,19 +27,19 @@ export const CardContainer = styled.div.withConfig({
 export const CardHeader = styled.div.withConfig({
   displayName: "CardHeader",
   componentId: "sc-17snd37-1"
-})(["display:flex;justify-content:space-between;align-items:start;gap:", ";"], Spacing.S3);
+})(["display:flex;justify-content:space-between;align-items:start;gap:8px;"]);
 export const CardHeaderLeft = styled.div.withConfig({
   displayName: "CardHeaderLeft",
   componentId: "sc-17snd37-2"
-})(["display:flex;flex-direction:column;flex:1;gap:", ";"], Spacing.S3);
+})(["display:flex;flex-direction:column;flex:1;gap:8px;"]);
 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:", ";"], FontSize.SMALL, ({
+})(["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', Spacing.S1);
+}) => collapsable ? 'pointer' : 'auto');
 export const CardInfo = styled.div.withConfig({
   displayName: "CardInfo",
   componentId: "sc-17snd37-4"
@@ -49,7 +49,7 @@ export const CardInfo = styled.div.withConfig({
 export const CardMetricValue = styled.div.withConfig({
   displayName: "CardMetricValue",
   componentId: "sc-17snd37-5"
-})(["display:flex;align-items:start;justify-content:start;font-size:", ";font-weight:", ";gap:", ";"], FontSize.HEADING1, FontWeight.MEDIUM, Spacing.S1);
+})(["display:flex;align-items:start;justify-content:start;font-size:", ";font-weight:", ";gap:4px;"], FontSize.HEADING1, FontWeight.MEDIUM);
 export const CardExtraMetric = styled.div.withConfig({
   displayName: "CardExtraMetric",
   componentId: "sc-17snd37-6"

package/DateTimePicker/components/DatePicker/DatePicker.js

@@ -11,6 +11,7 @@ export function DatePicker(props) {
     userInputDay,
     minDate,
     maxDate,
+    isDisabled,
     slotAfterMonth,
     onChange
   } = props;
@@ -22,7 +23,9 @@ export function DatePicker(props) {
       setView('month');
     }
   }, [userInputDay]);
-  return React.createElement(CalendarBox, null, view === 'month' && React.createElement(Vertical, {
+  return React.createElement(CalendarBox, {
+    "$disabled": isDisabled
+  }, view === 'month' && React.createElement(Vertical, {
     "$gap": 16
   }, React.createElement(MonthView, {
     month: month,

package/DateTimePicker/components/DatePicker/types.d.ts

@@ -4,6 +4,7 @@ export interface DatePickerProps {
     userInputDay?: string;
     minDate?: Date | string;
     maxDate?: Date | string;
+    isDisabled?: boolean;
     slotAfterMonth?: () => ReactNode | null;
     onChange: (day: string) => void;
 }

package/DateTimePicker/styles.d.ts

@@ -193,4 +193,6 @@ export declare const SingleInputFrame: import("styled-components").StyledCompone
     $hasHint: boolean;
     $isDisabled?: boolean;
 }, "$gridAutoFlow" | "$alignItems" | "$padding">;
-export declare const CalendarBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CalendarBox: import("styled-components").StyledComponent<"div", any, {
+    $disabled?: boolean;
+}, never>;

package/DateTimePicker/styles.js

@@ -61,4 +61,6 @@ export const SingleInputFrame = styled(InputFrame).withConfig({
 export const CalendarBox = styled.div.withConfig({
   displayName: "CalendarBox",
   componentId: "sc-t3ruuk-7"
-})(["width:282px;background-color:", ";padding:16px;border:1px solid ", ";border-radius:", ";box-shadow:", ";box-sizing:border-box;z-index:1;"], Color.CLEAR, Color.FORM, ShapeRadius.CONTROL, Shadow.REGULAR);
+})(["width:282px;background-color:", ";padding:16px;border:1px solid ", ";border-radius:", ";box-shadow:", ";box-sizing:border-box;pointer-events:", ";z-index:1;"], Color.CLEAR, Color.FORM, ShapeRadius.CONTROL, Shadow.REGULAR, ({
+  $disabled
+}) => $disabled ? 'none' : 'auto');

package/Drawer/components/DrawerContent/styles.js

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
-import { Color, Spacing, FontSize, FontWeight, LineHeight } from '@pushwoosh/kit-constants';
+import { Color, FontSize, FontWeight, LineHeight } from '@pushwoosh/kit-constants';
 export const DrawerHeader = styled.div.withConfig({
   displayName: "DrawerHeader",
   componentId: "sc-1jmui00-0"
-})(["padding:", " ", " ", ";background:", ";"], Spacing.S11, Spacing.S11, Spacing.S3, Color.CLEAR);
+})(["padding:40px 40px 8px;background:", ";"], Color.CLEAR);
 export const DrawerTitle = styled.h2.withConfig({
   displayName: "DrawerTitle",
   componentId: "sc-1jmui00-1"
@@ -11,4 +11,4 @@ export const DrawerTitle = styled.h2.withConfig({
 export const DrawerBody = styled.div.withConfig({
   displayName: "DrawerBody",
   componentId: "sc-1jmui00-2"
-})(["flex:1;padding:0 ", " ", ";background:", ";overflow-y:auto;"], Spacing.S11, Spacing.S11, Color.CLEAR);
+})(["flex:1;padding:0 40px 40px;background:", ";overflow-y:auto;"], Color.CLEAR);

package/EditableField/styles.js

@@ -1,10 +1,10 @@
 import styled from 'styled-components';
-import { Color, ShapeRadius, Spacing, FontSize, LineHeight } from '@pushwoosh/kit-constants';
+import { Color, ShapeRadius, FontSize, LineHeight } from '@pushwoosh/kit-constants';
 import { H5 } from '@pushwoosh/kit-typography';
 export const FieldBox = styled.div.withConfig({
   displayName: "FieldBox",
   componentId: "sc-qxboek-0"
-})(["display:flex;align-items:center;font-size:", ";line-height:", ";padding:", " ", " ", " ", ";gap:", ";border-radius:", ";color:", ";background:", ";box-sizing:border-box;cursor:pointer;svg{opacity:0.2;}&:active{opacity:0.5;}&:hover{color:", ";background:", ";svg{opacity:1;}}"], FontSize.REGULAR, LineHeight.REGULAR, Spacing.S0, Spacing.S2, Spacing.S0, Spacing.S3, Spacing.S2, ShapeRadius.CONTROL, ({
+})(["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
@@ -16,10 +16,10 @@ export const FieldBox = styled.div.withConfig({
 export const TitleBox = styled(H5).withConfig({
   displayName: "TitleBox",
   componentId: "sc-qxboek-1"
-})(["color:", ";margin-bottom:", ";"], Color.MAIN, Spacing.S1);
+})(["color:", ";margin-bottom:4px;"], Color.MAIN);
 export const ButtonsGroup = styled.div.withConfig({
   displayName: "ButtonsGroup",
   componentId: "sc-qxboek-2"
-})(["display:flex;margin-top:", ";opacity:", ";gap:", ";"], Spacing.S5, ({
+})(["display:flex;margin-top:16px;opacity:", ";gap:8px;"], ({
   $isLoading
-}) => $isLoading ? '0.5' : '1', Spacing.S3);
+}) => $isLoading ? '0.5' : '1');

package/FieldBox/styles.d.ts

@@ -1,4 +1,3 @@
-import { Spacing } from '@pushwoosh/kit-constants';
 import { Link as LinkBase } from '../Link';
 export declare const TitleBox: import("styled-components").StyledComponent<"div", any, {
     $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
@@ -58,6 +57,6 @@ export declare const TitleBox: import("styled-components").StyledComponent<"div"
 } & {
     $alignItems: string;
     $justifyContent: string;
-    $gap: Spacing;
+    $gap: number;
 }, "$gridAutoFlow" | "$alignItems" | "$gap" | "$justifyContent">;
 export declare const Link: import("styled-components").StyledComponent<typeof LinkBase, any, {}, never>;

package/FieldBox/styles.js

@@ -1,11 +1,11 @@
 import styled from 'styled-components';
-import { Color, Spacing } from '@pushwoosh/kit-constants';
+import { Color } from '@pushwoosh/kit-constants';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 import { Link as LinkBase } from '../Link';
 export const TitleBox = styled(Horizontal).attrs({
   $alignItems: 'center',
   $justifyContent: 'start',
-  $gap: Spacing.S1
+  $gap: 4
 }).withConfig({
   displayName: "TitleBox",
   componentId: "sc-lzrphm-0"

package/InputFile/styles.js

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
-import { Color, Spacing, FontSize, FontFamily, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Color, FontSize, FontFamily, ShapeRadius } from '@pushwoosh/kit-constants';
 export const InputFileFieldsStyled = styled.div.withConfig({
   displayName: "InputFileFieldsStyled",
   componentId: "sc-8mwin7-0"
-})(["display:flex;position:relative;gap:", ";"], Spacing.S5);
+})(["display:flex;position:relative;gap:16px;"]);
 export const InputFileButtonStyled = styled.div.withConfig({
   displayName: "InputFileButtonStyled",
   componentId: "sc-8mwin7-1"
@@ -11,7 +11,7 @@ export const InputFileButtonStyled = styled.div.withConfig({
 export const InputFileInputStyled = styled.input.withConfig({
   displayName: "InputFileInputStyled",
   componentId: "sc-8mwin7-2"
-})(["width:100%;height:36px;padding:0 ", ";color:#555;font-size:", ";font-family:", ";line-height:1.4;background:", ";border:1px solid ", ";border-radius:4px;box-sizing:border-box;outline:none;caret-color:", ";&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{appearance:none;}&:focus{border-color:", ";}"], Spacing.S5, FontSize.HEADING4, FontFamily.MAIN, Color.CLEAR, ({
+})(["width:100%;height:36px;padding:0 16px;color:#555;font-size:", ";font-family:", ";line-height:1.4;background:", ";border:1px solid ", ";border-radius:4px;box-sizing:border-box;outline:none;caret-color:", ";&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{appearance:none;}&:focus{border-color:", ";}"], FontSize.HEADING4, FontFamily.MAIN, Color.CLEAR, ({
   color
 }) => color, Color.BRIGHT, Color.BRIGHT);
 export const InputFileInputHiddenStyled = styled(InputFileInputStyled).withConfig({
@@ -21,7 +21,7 @@ export const InputFileInputHiddenStyled = styled(InputFileInputStyled).withConfi
 export const InputFileErrorStyled = styled.div.withConfig({
   displayName: "InputFileErrorStyled",
   componentId: "sc-8mwin7-4"
-})(["margin:", " 0;padding:", " ", ";border:1px solid ", ";border-radius:", ";color:", ";background:", ";"], Spacing.S5, Spacing.S4, Spacing.S6, Color.DANGER, ShapeRadius.DIALOG, Color.DANGER, Color.DANGER_LIGHT);
+})(["margin:16px 0;padding:12px 20px;border:1px solid ", ";border-radius:", ";color:", ";background:", ";"], Color.DANGER, ShapeRadius.DIALOG, Color.DANGER, Color.DANGER_LIGHT);
 InputFileFieldsStyled.displayName = 'InputFileFieldsStyled';
 InputFileButtonStyled.displayName = 'InputFileButtonStyled';
 InputFileInputStyled.displayName = 'InputFileInputStyled';

package/Modal/components/Modal/styles.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import styled, { createGlobalStyle } from 'styled-components';
-import { ShapeRadius, Spacing } from '@pushwoosh/kit-constants';
+import { ShapeRadius } from '@pushwoosh/kit-constants';
 const animationTimeout = 300;
 export const LockBody = createGlobalStyle(["body{overflow:hidden;position:relative;height:100%;}"]);
 export const ModalBox = styled.div.withConfig({
@@ -13,7 +13,7 @@ export const ModalBox = styled.div.withConfig({
 export const ModalInner = styled.div.withConfig({
   displayName: "ModalInner",
   componentId: "sc-lejcgu-1"
-})(["display:flex;justify-content:center;width:100vw;height:100vh;padding:", " 0;"], Spacing.S13);
+})(["display:flex;justify-content:center;width:100vw;height:100vh;padding:56px 0;"]);
 function ModalBoxBase(props) {
   const {
     isOpen,
@@ -37,9 +37,9 @@ export const ModalBoxTrans = styled(ModalBoxBase).withConfig({
 export const ModalContainer = styled.div.withConfig({
   displayName: "ModalContainer",
   componentId: "sc-lejcgu-3"
-})(["display:inline-flex;flex-direction:column;align-items:stretch;justify-content:flex-start;position:relative;width:", ";height:calc(100vh - 2 * ", ");vertical-align:middle;z-index:10;& > *{&:first-child{border-top-left-radius:", ";border-top-right-radius:", ";}&:last-child{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}}"], ({
+})(["display:inline-flex;flex-direction:column;align-items:stretch;justify-content:flex-start;position:relative;width:", ";height:calc(100vh - 2 * 56px);vertical-align:middle;z-index:10;& > *{&:first-child{border-top-left-radius:", ";border-top-right-radius:", ";}&:last-child{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}}"], ({
   $width
-}) => $width, Spacing.S13, ShapeRadius.DIALOG, ShapeRadius.DIALOG, ShapeRadius.DIALOG, ShapeRadius.DIALOG);
+}) => $width, ShapeRadius.DIALOG, ShapeRadius.DIALOG, ShapeRadius.DIALOG, ShapeRadius.DIALOG);
 ModalBox.displayName = 'ModalBox';
 ModalInner.displayName = 'ModalInner';
 ModalContainer.displayName = 'ModalContainer';

package/Modal/components/ModalContent/styles.js

@@ -1,10 +1,10 @@
 import styled from 'styled-components';
-import { Color, Spacing } from '@pushwoosh/kit-constants';
+import { Color } from '@pushwoosh/kit-constants';
 import { Vertical } from '@pushwoosh/kit-helpers';
 export const ModalHeader = styled.div.withConfig({
   displayName: "ModalHeader",
   componentId: "sc-1b5r517-0"
-})(["padding:", " ", " ", ";background-color:", ";"], Spacing.S7, Spacing.S7, Spacing.S3, Color.CLEAR);
+})(["padding:24px 24px 8px;background-color:", ";"], Color.CLEAR);
 ModalHeader.displayName = 'ModalHeader';
 export const ModalBodyGroup = styled(Vertical).withConfig({
   displayName: "ModalBodyGroup",
@@ -14,16 +14,16 @@ ModalBodyGroup.displayName = 'ModalBodyGroup';
 export const ModalBodyItem = styled.div.withConfig({
   displayName: "ModalBodyItem",
   componentId: "sc-1b5r517-2"
-})(["padding:", " ", ";background-color:", ";"], ({
+})(["padding:", " 24px;background-color:", ";"], ({
   $vPadding
-}) => $vPadding ? Spacing.S7 : 0, Spacing.S7, Color.CLEAR);
+}) => $vPadding ? '24px' : 0, Color.CLEAR);
 export const ModalBody = styled.div.withConfig({
   displayName: "ModalBody",
   componentId: "sc-1b5r517-3"
-})(["background-color:", ";overflow-y:auto;&:not(:has(> ", ")){padding:", ";&:not(:first-child){padding-top:0;}}"], Color.CLEAR, ModalBodyGroup, Spacing.S7);
+})(["background-color:", ";overflow-y:auto;&:not(:has(> ", ")){padding:24px;&:not(:first-child){padding-top:0;}}"], Color.CLEAR, ModalBodyGroup);
 ModalBody.displayName = 'ModalBody';
 export const ModalFooter = styled.div.withConfig({
   displayName: "ModalFooter",
   componentId: "sc-1b5r517-4"
-})(["padding:", ";background-color:", ";border-top:1px solid ", ";"], Spacing.S7, Color.CLEAR, Color.DIVIDER);
+})(["padding:24px;background-color:", ";border-top:1px solid ", ";"], Color.CLEAR, Color.DIVIDER);
 ModalFooter.displayName = 'ModalFooter';

package/NumberPicker/styles.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Color, ShapeRadius, Spacing, UnitSize } from '@pushwoosh/kit-constants';
+import { Color, ShapeRadius, UnitSize } from '@pushwoosh/kit-constants';
 export const InputStyled = styled.input.attrs({
   type: 'text'
 }).withConfig({
@@ -9,13 +9,13 @@ export const InputStyled = styled.input.attrs({
 export const Hint = styled.div.withConfig({
   displayName: "Hint",
   componentId: "sc-vq8xnz-1"
-})(["display:flex;align-items:center;font-size:100%;line-height:initial;padding-right:", ";color:", ";pointer-events:none;"], Spacing.S3, Color.PHANTOM);
+})(["display:flex;align-items:center;font-size:100%;line-height:initial;padding-right:8px;color:", ";pointer-events:none;"], Color.PHANTOM);
 export const SingleInputFrame = styled.div.withConfig({
   displayName: "SingleInputFrame",
   componentId: "sc-vq8xnz-2"
-})(["display:inline-grid;grid-template-columns:", ";box-sizing:border-box;align-items:center;height:", ";position:relative;padding-left:", ";color:", ";border:1px solid ", ";border-radius:", ";background-color:", ";cursor:pointer;pointer-events:", ";&:focus-within{border-color:", ";}& > input{color:", ";height:34px;border:none;padding:0;outline:none;line-height:140%;}& > div:last-of-type{height:34px;padding-left:1px;background-color:", ";border-radius:0 ", " ", " 0;& > div{display:flex;justify-content:center;align-items:center;color:", ";background-color:", ";cursor:pointer;&:hover > *{transform:scale(1.3);}&:first-of-type{border-top-right-radius:", ";}&:last-of-type{border-bottom-right-radius:", ";}}}"], ({
+})(["display:inline-grid;grid-template-columns:", ";box-sizing:border-box;align-items:center;height:", ";position:relative;padding-left:12px;color:", ";border:1px solid ", ";border-radius:", ";background-color:", ";cursor:pointer;pointer-events:", ";&:focus-within{border-color:", ";}& > input{color:", ";height:34px;border:none;padding:0;outline:none;line-height:140%;}& > div:last-of-type{height:34px;padding-left:1px;background-color:", ";border-radius:0 ", " ", " 0;& > div{display:flex;justify-content:center;align-items:center;color:", ";background-color:", ";cursor:pointer;&:hover > *{transform:scale(1.3);}&:first-of-type{border-top-right-radius:", ";}&:last-of-type{border-bottom-right-radius:", ";}}}"], ({
   $hasHint
-}) => $hasHint ? '1fr max-content 21px' : '1fr 21px', UnitSize.FIELD_HEIGHT, Spacing.S4, ({
+}) => $hasHint ? '1fr max-content 21px' : '1fr 21px', UnitSize.FIELD_HEIGHT, ({
   $empty
 }) => $empty ? Color.BRIGHT : Color.MAIN, ({
   $error

package/PageHeader/components/AutosizeInput/styles.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Color, Spacing, FontSize, FontWeight } from '@pushwoosh/kit-constants';
+import { Color, FontSize, FontWeight } from '@pushwoosh/kit-constants';
 export const PromptBox = styled.div.withConfig({
   displayName: "PromptBox",
   componentId: "sc-191i2ot-0"
@@ -11,9 +11,9 @@ export const InputBox = styled.div.withConfig({
 export const InputStyled = styled.input.withConfig({
   displayName: "InputStyled",
   componentId: "sc-191i2ot-2"
-})(["color:#0e72e5;width:", "px;max-width:100%;border:0;padding:0;margin:3px ", " 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:#0e72e5;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;}"], ({
   width
-}) => width - 10, Spacing.S1, Color.PHANTOM, Color.PHANTOM, Color.PHANTOM, Color.PRIMARY_HOVER);
+}) => 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/PageHeaderError/styles.js

@@ -1,19 +1,19 @@
 import styled from 'styled-components';
-import { Color, Spacing, FontSize, FontWeight, LineHeight } from '@pushwoosh/kit-constants';
+import { Color, FontSize, FontWeight, LineHeight } from '@pushwoosh/kit-constants';
 import { H4 } from '@pushwoosh/kit-typography';
 import { Button } from '../../../Button';
 export const RootBox = styled.div.withConfig({
   displayName: "RootBox",
   componentId: "sc-1lsctcc-0"
-})(["display:flex;align-items:center;padding-right:", ";margin-top:", ";background:", ";"], Spacing.S3, Spacing.S5, Color.DANGER_LIGHT);
+})(["display:flex;align-items:center;padding-right:8px;margin-top:16px;background:", ";"], Color.DANGER_LIGHT);
 export const ErrorIconBox = styled.div.withConfig({
   displayName: "ErrorIconBox",
   componentId: "sc-1lsctcc-1"
-})(["display:flex;align-items:center;justify-content:center;width:32px;height:36px;padding:", ";border-radius:4px 0 0 4px;background:", ";"], Spacing.S3, Color.DANGER);
+})(["display:flex;align-items:center;justify-content:center;width:32px;height:36px;padding:8px;border-radius:4px 0 0 4px;background:", ";"], Color.DANGER);
 export const ErrorText = styled(H4).withConfig({
   displayName: "ErrorText",
   componentId: "sc-1lsctcc-2"
-})(["padding:", " ", ";"], Spacing.S3, Spacing.S4);
+})(["padding:8px 12px;"]);
 export const ResolveError = styled(Button).withConfig({
   displayName: "ResolveError",
   componentId: "sc-1lsctcc-3"

package/PageHeader/components/PageHeaderSkeleton/styles.js

@@ -1,5 +1,5 @@
 import styled, { keyframes } from 'styled-components';
-import { Color, Spacing, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
 const animation = keyframes(["0%{opacity:0.2;}50%{opacity:0.1;}100%{opacity:0.2;}"]);
 export const RootBox = styled.div.withConfig({
   displayName: "RootBox",
@@ -8,8 +8,8 @@ export const RootBox = styled.div.withConfig({
 export const SkeletonStyled = styled.div.withConfig({
   displayName: "SkeletonStyled",
   componentId: "sc-1idyyj7-1"
-})(["width:", ";height:", ";padding:", " 0;background:", ";border-radius:", ";animation:", " 1s ease-in-out infinite;opacity:0.1;"], ({
+})(["width:", ";height:", ";padding:4px 0;background:", ";border-radius:", ";animation:", " 1s ease-in-out infinite;opacity:0.1;"], ({
   width
-}) => width ? `${width}px` : Spacing.S7, ({
+}) => width ? `${width}px` : '24px', ({
   height
-}) => height ? `${height}px` : Spacing.S7, Spacing.S1, Color.SOFT, ShapeRadius.CONTROL, animation);
+}) => height ? `${height}px` : '24px', Color.SOFT, ShapeRadius.CONTROL, animation);

package/Pagination/styles.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Color, FontSize, FontWeight, ShapeRadius, Spacing, UnitSize } from '@pushwoosh/kit-constants';
+import { Color, FontSize, FontWeight, ShapeRadius, UnitSize } from '@pushwoosh/kit-constants';
 const PaginationControl = styled.button.withConfig({
   displayName: "PaginationControl",
   componentId: "sc-o79vko-0"
@@ -15,7 +15,7 @@ export const PaginationBox = styled.div.withConfig({
 export const PaginationArrow = styled(PaginationControl).withConfig({
   displayName: "PaginationArrow",
   componentId: "sc-o79vko-2"
-})(["padding:0 ", ";&:first-child{border-radius:", " 0 0 ", ";}&:last-child{border-right:1px solid ", ";border-radius:0 ", " ", " 0;}"], Spacing.S2, ShapeRadius.CONTROL, ShapeRadius.CONTROL, Color.DIVIDER, ShapeRadius.CONTROL, ShapeRadius.CONTROL);
+})(["padding:0 6px;&:first-child{border-radius:", " 0 0 ", ";}&:last-child{border-right:1px solid ", ";border-radius:0 ", " ", " 0;}"], ShapeRadius.CONTROL, ShapeRadius.CONTROL, Color.DIVIDER, ShapeRadius.CONTROL, ShapeRadius.CONTROL);
 export const PaginationDivider = styled.div.withConfig({
   displayName: "PaginationDivider",
   componentId: "sc-o79vko-3"
@@ -23,7 +23,7 @@ export const PaginationDivider = styled.div.withConfig({
 export const PaginationButton = styled(PaginationControl).withConfig({
   displayName: "PaginationButton",
   componentId: "sc-o79vko-4"
-})(["padding:0 ", ";&:disabled{background-color:", ";color:", ";}"], Spacing.S4, ({
+})(["padding:0 12px;&:disabled{background-color:", ";color:", ";}"], ({
   $isActive
 }) => $isActive ? Color.MAIN : Color.CLEAR, ({
   $isActive

package/ProgressBar/styles.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Color, FontSize, ShapeRadius, Spacing } from '@pushwoosh/kit-constants';
+import { Color, FontSize, ShapeRadius } from '@pushwoosh/kit-constants';
 import { H5 } from '@pushwoosh/kit-typography';
 export const ProgressLine = styled.div.withConfig({
   displayName: "ProgressLine",
@@ -8,7 +8,7 @@ export const ProgressLine = styled.div.withConfig({
 export const ProgressLineContainer = styled.div.withConfig({
   displayName: "ProgressLineContainer",
   componentId: "sc-jfhkho-1"
-})(["padding:", " 0;"], Spacing.S1);
+})(["padding:4px 0;"]);
 export const ProgressBarActive = styled(ProgressLine).withConfig({
   displayName: "ProgressBarActive",
   componentId: "sc-jfhkho-2"
@@ -20,13 +20,13 @@ export const ProgressBarActive = styled(ProgressLine).withConfig({
 export const Container = styled.div.withConfig({
   displayName: "Container",
   componentId: "sc-jfhkho-3"
-})(["display:flex;align-items:center;width:100%;gap:", ";"], Spacing.S4);
+})(["display:flex;align-items:center;width:100%;gap:12px;"]);
 export const SpinnerContainer = styled.div.withConfig({
   displayName: "SpinnerContainer",
   componentId: "sc-jfhkho-4"
-})(["background-color:", ";border-radius:", ";padding:", ";"], ({
+})(["background-color:", ";border-radius:", ";padding:4px;"], ({
   $backgroundColor
-}) => $backgroundColor, ShapeRadius.CONTROL, Spacing.S1);
+}) => $backgroundColor, ShapeRadius.CONTROL);
 export const ProgressBoxContainer = styled.div.withConfig({
   displayName: "ProgressBoxContainer",
   componentId: "sc-jfhkho-5"
@@ -34,7 +34,7 @@ export const ProgressBoxContainer = styled.div.withConfig({
 export const LoadingHeader = styled.div.withConfig({
   displayName: "LoadingHeader",
   componentId: "sc-jfhkho-6"
-})(["display:flex;gap:", ";align-items:center;justify-content:space-between;"], Spacing.S2);
+})(["display:flex;align-items:center;justify-content:space-between;gap:6px;"]);
 export const LoadingText = styled(H5).withConfig({
   displayName: "LoadingText",
   componentId: "sc-jfhkho-7"

package/SortButton/styles.js

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
-import { Color, FontSize, FontWeight, LineHeight, Spacing } from '@pushwoosh/kit-constants';
+import { Color, FontSize, FontWeight, LineHeight } from '@pushwoosh/kit-constants';
 export const SortButtonBox = styled.button.withConfig({
   displayName: "SortButtonBox",
   componentId: "sc-dasl5x-0"
-})(["display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;padding:0;color:", ";border:none;background-color:transparent;font-size:", ";font-weight:", ";line-height:", ";text-transform:uppercase;&:hover{color:", ";}&:active{color:", ";}& span{margin:0 ", " 0 0;}"], ({
+})(["display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;padding:0;color:", ";border:none;background-color:transparent;font-size:", ";font-weight:", ";line-height:", ";text-transform:uppercase;&:hover{color:", ";}&:active{color:", ";}& span{margin:0 4px 0 0;}"], ({
   $isActive
-}) => $isActive ? Color.MAIN : Color.LOCKED, FontSize.HEADING5, FontWeight.MEDIUM, LineHeight.HEADING5, Color.PRIMARY_HOVER, Color.PRIMARY_PRESSED, Spacing.S1);
+}) => $isActive ? Color.MAIN : Color.LOCKED, FontSize.HEADING5, FontWeight.MEDIUM, LineHeight.HEADING5, Color.PRIMARY_HOVER, Color.PRIMARY_PRESSED);
 SortButtonBox.displayName = 'SortButtonBox';

package/StatisticCard/styles.js

@@ -1,14 +1,14 @@
 import styled from 'styled-components';
-import { Color, FontWeight, ShapeRadius, Spacing } from '@pushwoosh/kit-constants';
+import { Color, FontWeight, ShapeRadius } from '@pushwoosh/kit-constants';
 import { H2, H5 } from '@pushwoosh/kit-typography';
 export const Container = styled.div.withConfig({
   displayName: "Container",
   componentId: "sc-12f82mq-0"
-})(["position:relative;display:flex;flex-direction:column;align-items:flex-start;border-radius:", ";width:", ";background:", ";padding:", ";border:", ";cursor:", ";"], ShapeRadius.SECTION, ({
+})(["position:relative;display:flex;flex-direction:column;align-items:flex-start;border-radius:", ";width:", ";background:", ";padding:16px;border:", ";cursor:", ";"], ShapeRadius.SECTION, ({
   $width
 }) => $width || 'fit-content', ({
   $selectable
-}) => $selectable ? Color.CLEAR : Color.SOFT_LIGHT, Spacing.S5, ({
+}) => $selectable ? Color.CLEAR : Color.SOFT_LIGHT, ({
   $active,
   $selectable
 }) => {

package/Switch/styles.js

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { Spacing, Color, FontSize, FontWeight } from '@pushwoosh/kit-constants';
+import { Color, FontSize, FontWeight } from '@pushwoosh/kit-constants';
 const defineColorBackgroundBox = css(["", ""], props => {
   if (props.isDisabled && !props.enabled) {
     return Color.CLEAR;
@@ -53,10 +53,10 @@ export const Box = styled.div.attrs({
 export const Circle = styled.div.withConfig({
   displayName: "Circle",
   componentId: "sc-csdrg2-2"
-})(["margin:0 ", ";width:12px;height:12px;background:", ";border-radius:50%;"], Spacing.S0, defineColorCircle);
+})(["margin:0 2px;width:12px;height:12px;background:", ";border-radius:50%;"], defineColorCircle);
 export const Label = styled.div.withConfig({
   displayName: "Label",
   componentId: "sc-csdrg2-3"
-})(["display:flex;align-items:center;margin-left:", ";color:", ";font-size:", ";font-weight:", ";margin:", ";"], Spacing.S3, Color.MAIN, FontSize.REGULAR, FontWeight.MEDIUM, ({
+})(["display:flex;align-items:center;color:", ";font-size:", ";font-weight:", ";margin:", ";"], Color.MAIN, FontSize.REGULAR, FontWeight.MEDIUM, ({
   labelPosition
-}) => labelPosition === 'left' ? `0 ${Spacing.S3} 0` : `0  0 0 ${Spacing.S3}`);
+}) => labelPosition === 'left' ? '0 8px 0' : '0 0 0 8px');

package/Tabs/components/TabBase/styles.js

@@ -1,13 +1,13 @@
 import styled, { css } from 'styled-components';
-import { Color, Shadow, ShapeRadius, Spacing } from '@pushwoosh/kit-constants';
+import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
 import { H4 } from '@pushwoosh/kit-typography';
 const tabBodyHover = css(["&:hover{color:", ";background-color:", ";}"], Color.PRIMARY_HOVER, Color.BRIGHT_LIGHT);
 export const TabBody = styled.div.withConfig({
   displayName: "TabBody",
   componentId: "sc-133yrgu-0"
-})(["display:flex;justify-content:center;align-items:center;position:relative;padding:", " ", " ", " ", ";background-color:", ";border-radius:", ";box-shadow:", ";cursor:", ";user-select:none;white-space:nowrap;color:", ";", ""], Spacing.S2, ({
+})(["display:flex;justify-content:center;align-items:center;position:relative;padding:6px ", " 6px 16px;background-color:", ";border-radius:", ";box-shadow:", ";cursor:", ";user-select:none;white-space:nowrap;color:", ";", ""], ({
   $hasIcon
-}) => $hasIcon ? Spacing.S4 : Spacing.S5, Spacing.S2, Spacing.S5, ({
+}) => $hasIcon ? '12px' : '16px', ({
   $isActive
 }) => $isActive ? Color.CLEAR : 'transparent', ShapeRadius.CONTROL, ({
   $isActive
@@ -38,4 +38,4 @@ export const TabButtonLabel = styled(H4).withConfig({
 export const TabIconBox = styled.div.withConfig({
   displayName: "TabIconBox",
   componentId: "sc-133yrgu-3"
-})(["margin-left:", ";"], Spacing.S1);
+})(["margin-left:4px;"]);

package/package.json

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