@pushwoosh/dumb-components 1.1.17 → 1.1.19

package/Badge/styles.js

@@ -1,10 +1,10 @@
 import styled from 'styled-components';
-import { Color, FontSize, FontWeight, FontFamily, LineHeight, ShapeRadius, Spacing } from '@pushwoosh/kit-constants';
+import { Color, FontSize, FontWeight, FontFamily, LineHeight, ShapeRadius } from '@pushwoosh/kit-constants';
 import { BadgeColorToColorMap, BadgeColorToLightColorMap } from './maps';
 export const BadgeBox = styled.div.withConfig({
   displayName: "BadgeBox",
   componentId: "sc-6ptm8-0"
-})(["display:inline-block;width:fit-content;padding:", " ", ";border-radius:", ";color:", ";background-color:", ";font-size:", ";font-family:", ";font-weight:", ";line-height:", ";text-transform:uppercase;user-select:none;"], Spacing.S0, Spacing.S2, ShapeRadius.CONTROL, ({
+})(["display:inline-block;width:fit-content;padding:2px 6px;border-radius:", ";color:", ";background-color:", ";font-size:", ";font-family:", ";font-weight:", ";line-height:", ";text-transform:uppercase;user-select:none;"], ShapeRadius.CONTROL, ({
   $isSaturated,
   $color
 }) => $isSaturated ? Color.CLEAR : BadgeColorToColorMap[$color], ({

package/Banner/styles.js

@@ -9,7 +9,7 @@ export const BannerSpinner = styled.div.withConfig({
 export const ActionButton = styled.button.withConfig({
   displayName: "ActionButton",
   componentId: "sc-9uu4ap-1"
-})(["appearance:none !important;border:none;background:initial;cursor:pointer;padding:", ";position:relative;font-weight:", ";white-space:nowrap;height:fit-content;> span{visibility:", ";}opacity:", ";"], Spacing.S2, FontWeight.BOLD, ({
+})(["appearance:none !important;border:none;background:initial;cursor:pointer;padding:6px;position:relative;font-weight:", ";white-space:nowrap;height:fit-content;> span{visibility:", ";}opacity:", ";"], FontWeight.BOLD, ({
   $isLoading
 }) => $isLoading ? 'hidden' : 'visible', ({
   $isPressed,
@@ -18,7 +18,7 @@ export const ActionButton = styled.button.withConfig({
 export const CloseButton = styled.button.withConfig({
   displayName: "CloseButton",
   componentId: "sc-9uu4ap-2"
-})(["appearance:none !important;border:none;background:initial;cursor:pointer;padding:0 ", " 0 0;height:fit-content;align-self:center;opacity:", ";"], Spacing.S3, props => props.$isPressed ? 0.5 : 1);
+})(["appearance:none !important;border:none;background:initial;cursor:pointer;padding:0 8px 0 0;height:fit-content;align-self:center;opacity:", ";"], props => props.$isPressed ? 0.5 : 1);
 export const BannerBox = styled.div.withConfig({
   displayName: "BannerBox",
   componentId: "sc-9uu4ap-3"
@@ -42,4 +42,4 @@ export const BannerShape = styled(BannerBox).withConfig({
 export const BannerGhost = styled(BannerBox).withConfig({
   displayName: "BannerGhost",
   componentId: "sc-9uu4ap-7"
-})(["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].ghost.base.bgColor, IconContainer, props => colors[props.$type].ghost.iconArea.color, props => rgba(colors[props.$type].ghost.iconArea.bgColor, 0.14), ActionButton, props => colors[props.$type].ghost.iconArea.color, props => props.$isLoading ? colors[props.$type].ghost.base.bgColor : 'initial', props => props.$isLoading ? ShapeRadius.CONTROL : 'initial', props => colors[props.$type].ghost.hover.bgColor, ShapeRadius.CONTROL, CloseButton, props => colors[props.$type].ghost.iconArea.color, props => colors[props.$type].ghost.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].ghost.base.bgColor, IconContainer, props => colors[props.$type].ghost.iconArea.color, props => rgba(colors[props.$type].ghost.iconArea.bgColor, 0.14), ActionButton, props => colors[props.$type].ghost.iconArea.color, props => props.$isLoading ? colors[props.$type].ghost.base.bgColor : 'initial', props => props.$isLoading ? ShapeRadius.CONTROL : 'initial', props => colors[props.$type].ghost.hover.bgColor, ShapeRadius.CONTROL, CloseButton, props => colors[props.$type].ghost.iconArea.color, props => colors[props.$type].ghost.hover.bgColor);

package/Checkbox/Checkbox.js

@@ -1,38 +1,66 @@
-import React, { useRef, useEffect } from 'react';
-import { NativeLabel, NativeCheckbox } from './styles';
+import React, { useRef, useEffect, useState } from 'react';
+import { Color } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { HelpRoundIcon } from '@pushwoosh/kit-icons';
+import { NativeLabel, NativeCheckbox, IconWrapper } from './styles';
+import { Tooltip } from '../Tooltip';
+let counter = 0;
 export function Checkbox(props) {
   const {
     label,
     id,
     name,
     value,
-    color,
+    type = 'normal',
     activeCheckboxColor,
+    tooltip,
     isChecked,
     isDisabled,
     isIndeterminate,
-    onChange,
-    className
+    onChange
   } = props;
   const checkboxRef = useRef(null);
+  const [localId] = useState(() => {
+    if (id) {
+      return id;
+    }
+    const newCounter = counter++;
+    return `checkbox-id-${newCounter}`;
+  });
   useEffect(() => {
     if (checkboxRef.current) {
       checkboxRef.current.indeterminate = isIndeterminate ?? false;
     }
   }, [checkboxRef, isIndeterminate]);
-  return React.createElement(NativeLabel, {
-    htmlFor: id,
-    "$color": color,
-    className: className
+  const checkboxMarkup = React.createElement(NativeLabel, {
+    htmlFor: localId,
+    "$color": isDisabled ? Color.LOCKED : Color.MAIN
+  }, React.createElement(Horizontal, {
+    "$padding": 3
   }, React.createElement(NativeCheckbox, {
     type: "checkbox",
-    id: id,
+    id: localId,
     ref: checkboxRef,
     value: value,
-    color: activeCheckboxColor,
     name: name,
+    "$color": activeCheckboxColor,
     checked: isChecked,
     disabled: isDisabled,
+    "$type": type,
     onChange: event => onChange === null || onChange === void 0 ? void 0 : onChange(event.currentTarget.checked)
-  }), label && React.createElement("span", null, label));
+  })), label && React.createElement("span", null, label));
+  if (tooltip) {
+    return React.createElement(Horizontal, {
+      "$gap": 4,
+      "$alignItems": "start"
+    }, checkboxMarkup, React.createElement(Tooltip, {
+      content: tooltip
+    }, React.createElement(IconWrapper, {
+      "$padding": "4px 0"
+    }, React.createElement(HelpRoundIcon, {
+      size: "small",
+      view: "lined"
+    }))));
+  }
+  return checkboxMarkup;
 }

package/Checkbox/maps.d.ts

@@ -1,3 +1,9 @@
-import { Color } from '@pushwoosh/kit-constants';
-import type { TextColor } from './types';
-export declare const ColorMap: Record<TextColor, Color>;
+import { type CheckboxType } from './types';
+type CheckboxColorSet = {
+    checked: string;
+    notChecked: string;
+    hover: string;
+    checkmarkHover: string;
+};
+export declare const ColorByType: Record<CheckboxType, CheckboxColorSet>;
+export {};

package/Checkbox/maps.js

@@ -1,7 +1,15 @@
 import { Color } from '@pushwoosh/kit-constants';
-export const ColorMap = {
-  main: Color.MAIN,
-  primary: Color.PRIMARY,
-  danger: Color.DANGER,
-  current: Color.CURRENT
+export const ColorByType = {
+  normal: {
+    checked: Color.PRIMARY,
+    notChecked: Color.PHANTOM,
+    hover: Color.PRIMARY_HOVER,
+    checkmarkHover: Color.PHANTOM
+  },
+  error: {
+    checked: Color.DANGER,
+    notChecked: Color.DANGER,
+    hover: Color.DANGER_HOVER,
+    checkmarkHover: Color.DANGER_HOVER
+  }
 };

package/Checkbox/styles.d.ts

@@ -1,9 +1,66 @@
-import type { TextColor } from './types';
+import { type CheckboxType } from './types';
 export declare const NativeCheckbox: import("styled-components").StyledComponent<"input", any, {
     type: "checkbox";
 } & {
-    color?: string;
+    $color?: string;
+    $type: CheckboxType;
 }, "type">;
 export declare const NativeLabel: import("styled-components").StyledComponent<"label", any, {
-    $color?: TextColor;
+    $color: string;
 }, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $bgColor?: string | undefined;
+    $border?: string | ({
+        top?: string | undefined;
+        right?: string | undefined;
+        bottom?: string | undefined;
+        left?: string | undefined;
+    } | {
+        horizontal: string;
+        top?: string | undefined;
+        bottom?: string | undefined;
+    } | {
+        vertical: string;
+        right?: string | undefined;
+        left?: string | undefined;
+    }) | undefined;
+    $borderRadius?: (string | number) | undefined;
+    $boxShadow?: string | undefined;
+    $gap?: (string | number) | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $padding?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+}, "$gridAutoFlow">;

package/Checkbox/styles.js

@@ -1,17 +1,43 @@
 import styled from 'styled-components';
-import { Color, Spacing, FontSize, LineHeight } from '@pushwoosh/kit-constants';
-import { ColorMap } from './maps';
+import { Color, FontSize, LineHeight } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { ColorByType } from './maps';
 export const NativeCheckbox = styled.input.attrs({
   type: 'checkbox'
 }).withConfig({
   displayName: "NativeCheckbox",
   componentId: "sc-1lw3rny-0"
-})(["--active:", ";--active-inner:", ";--focus:2px rgba(39,94,254,.3);--border:#BBC1E1;--border-hover:#275EFE;--default-background:", ";--disabled:#F6F8FF;--disabled-inner:#E1E6F9;appearance:none;-webkit-appearance:none;-moz-appearance:none;width:18px;height:18px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:2px solid var(--bc,var(--border));border-radius:4px;box-sizing:border-box;background:var(--background,var(--default-background));transition:background 0.3s,border-color 0.3s,box-shadow 0.2s;&:checked{--background:var(--active);--bc:var(--active);--d-o:.3s;--d-t:.6s;--o:1;--r:43deg;}&:disabled{--background:var(--disabled);cursor:not-allowed;opacity:0.9;}&:disabled:checked{--background:var(--disabled-inner);--bc:var(--border);}&:hover:not(:checked):not(:disabled){--bc:var(--border-hover);}&:focus{box-shadow:0 0 0 var(--focus);}&:after{content:\"\";display:block;position:absolute;transition:transform var(--d-t,0.3s),opacity var(--d-o,0.2s);opacity:var(--o,0);width:4px;height:8px;border:1px solid var(--active-inner);border-top:0;border-left:0;left:5px;top:1px;transform:rotate(var(--r,20deg)) scale(1.4);}&:indeterminate{--background:var(--active);--bc:var(--active);}&:indeterminate:after{width:11.5px;height:1.5px;top:6.25px;left:1.3px;border:none;background-color:var(--active-inner);transform:none;opacity:var(--o,1);transition:width var(--d-t,0.3s),height var(--d-o,0.2s),opacity var(--d-o,0.2s);}&:disabled + span{cursor:not-allowed;}"], ({
-  color
-}) => color ?? Color.PRIMARY, Color.CLEAR, Color.CLEAR);
+})(["appearance:none;-webkit-appearance:none;-moz-appearance:none;width:18px;height:18px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:", ";border-radius:4px;box-sizing:border-box;background-color:", ";transition:background 0.3s,border-color 0.3s,box-shadow 0.2s;&:checked{background-color:", ";border-color:", ";--d-o:.3s;--d-t:.6s;--o:1;--r:43deg;}&:not(:checked):disabled{border-color:", ";background-color:", ";cursor:not-allowed;}&:disabled:is(:checked,:indeterminate){background-color:", ";border-color:", ";cursor:not-allowed;}&:hover:is(:checked,:indeterminate):not(:disabled){--o:0.5;border-color:", ";background-color:", ";}&:hover:not(:checked):not(:disabled):not(:indeterminate){--o:0.5;--checkmark-color:", ";--d-o:.3s;--d-t:.6s;--o:0.5;--r:43deg;}&:after{content:\"\";display:block;position:absolute;transition:transform var(--d-t,0.3s),opacity var(--d-o,0.2s);opacity:var(--o,0);width:4px;height:8px;border:1px solid var(--checkmark-color,", ");border-top:0;border-left:0;left:5px;top:1px;transform:rotate(var(--r,20deg)) scale(1.4);}&:indeterminate{background-color:", ";border-color:", ";}&:indeterminate:after{width:11.5px;height:1.5px;top:6.25px;left:1.3px;border:none;transform:none;background-color:", ";opacity:var(--o,1);transition:width var(--d-t,0.3s),height var(--d-o,0.2s),opacity var(--d-o,0.2s);}&:disabled + span{cursor:not-allowed;}"], ({
+  $type
+}) => `2px solid ${ColorByType[$type].notChecked}`, Color.CLEAR, ({
+  $type,
+  $color
+}) => $color ?? ColorByType[$type].checked, ({
+  $type,
+  $color
+}) => $color ?? ColorByType[$type].checked, Color.LOCKED, Color.DIVIDER, Color.LOCKED, Color.LOCKED, ({
+  $type,
+  $color
+}) => $color ?? ColorByType[$type].hover, ({
+  $type,
+  $color
+}) => $color ?? ColorByType[$type].hover, ({
+  $type,
+  $color
+}) => $color ? Color.PHANTOM : ColorByType[$type].checkmarkHover, Color.CLEAR, ({
+  $type,
+  $color
+}) => $color ?? ColorByType[$type].checked, ({
+  $type,
+  $color
+}) => $color ?? ColorByType[$type].checked, Color.CLEAR);
 export const NativeLabel = styled.label.withConfig({
   displayName: "NativeLabel",
   componentId: "sc-1lw3rny-1"
-})(["font-size:", ";line-height:", ";", " user-select:none;& > ", "{margin:1px;&:not(:last-child){margin-right:", ";}}"], FontSize.REGULAR, LineHeight.REGULAR, ({
+})(["font-size:", ";line-height:", ";", " user-select:none;display:flex;gap:8px;align-items:start;&:has(input:not(:disabled)){cursor:pointer;}&:has(input:disabled){cursor:not-allowed;}& > span{padding:2px 0;}span{max-width:800px;white-space:normal;overflow-wrap:break-word;}& > ", "{margin:1px;}"], FontSize.REGULAR, LineHeight.REGULAR, ({
   $color
-}) => $color && `color: ${ColorMap[$color]};`, NativeCheckbox, Spacing.S3);
+}) => `color: ${$color};`, NativeCheckbox);
+export const IconWrapper = styled(Horizontal).withConfig({
+  displayName: "IconWrapper",
+  componentId: "sc-1lw3rny-2"
+})(["color:", ";&:hover{color:", ";cursor:pointer;}"], Color.PHANTOM, Color.PRIMARY_HOVER);

package/Checkbox/types.d.ts

@@ -1,15 +1,15 @@
 import type { ReactNode } from 'react';
-export type TextColor = 'main' | 'primary' | 'danger' | 'current';
+export type CheckboxType = 'normal' | 'error';
 export type CheckboxProps = {
     label?: ReactNode;
     id?: string;
     name?: string;
     value?: string | number;
-    color?: TextColor;
-    activeCheckboxColor?: string;
+    type?: CheckboxType;
     isChecked?: boolean;
     isDisabled?: boolean;
     isIndeterminate?: boolean;
+    tooltip?: string;
+    activeCheckboxColor?: string;
     onChange?: (checked: boolean) => void;
-    className?: string;
 };

package/Radio/Radio.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 import { HelpRoundIcon } from '@pushwoosh/kit-icons';
-import { InputContainer, NativeLabel, NativeRadio } from './styles';
+import { IconWrapper, InputContainer, NativeLabel, NativeRadio } from './styles';
 import { Tooltip } from '../Tooltip';
 let counter = 0;
 export function Radio(props) {
@@ -52,12 +52,11 @@ export function Radio(props) {
       "$alignItems": "start"
     }, radioMarkup, React.createElement(Tooltip, {
       content: tooltip
-    }, React.createElement(Horizontal, {
+    }, React.createElement(IconWrapper, {
       "$padding": size === 'compact' ? 0 : '4px 0'
     }, React.createElement(HelpRoundIcon, {
       size: "small",
-      view: "lined",
-      color: Color.PHANTOM
+      view: "lined"
     }))));
   }
   return radioMarkup;

package/Radio/styles.d.ts

@@ -65,3 +65,59 @@ export declare const NativeLabel: import("styled-components").StyledComponent<"l
     $color: string;
     $size: RadioSize;
 }, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $bgColor?: string | undefined;
+    $border?: string | ({
+        top?: string | undefined;
+        right?: string | undefined;
+        bottom?: string | undefined;
+        left?: string | undefined;
+    } | {
+        horizontal: string;
+        top?: string | undefined;
+        bottom?: string | undefined;
+    } | {
+        vertical: string;
+        right?: string | undefined;
+        left?: string | undefined;
+    }) | undefined;
+    $borderRadius?: (string | number) | undefined;
+    $boxShadow?: string | undefined;
+    $gap?: (string | number) | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $padding?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+}, "$gridAutoFlow">;

package/Radio/styles.js

@@ -53,4 +53,8 @@ export const NativeLabel = styled.label.withConfig({
   $size
 }) => $size === 'compact' ? '6px' : '8px', ({
   $size
-}) => $size === 'compact' ? '0px' : '2px 0');
+}) => $size === 'compact' ? '0px' : '2px 0');
+export const IconWrapper = styled(Horizontal).withConfig({
+  displayName: "IconWrapper",
+  componentId: "sc-34lgtl-3"
+})(["color:", ";&:hover{color:", ";cursor:pointer;}"], Color.PHANTOM, Color.PRIMARY_HOVER);

package/Table/components/DataTable/DataTable.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Color, Spacing } from '@pushwoosh/kit-constants';
+import { Color } from '@pushwoosh/kit-constants';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 import { WarningRoundIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
@@ -38,14 +38,14 @@ export function DataTable(props) {
     allLimits: [10, 20, 50, 100],
     padding: paginationPadding
   }, data.loading && React.createElement(Horizontal, {
-    "$gap": Spacing.S1,
-    "$alignItems": "center"
+    "$alignItems": "center",
+    "$gap": 4
   }, React.createElement(Spinner, {
     size: "medium",
     color: Color.LOCKED
   }), React.createElement(LockedText, null, "Loading...")), !data.loading && data.error && React.createElement(Horizontal, {
-    "$gap": Spacing.S1,
-    "$alignItems": "center"
+    "$alignItems": "center",
+    "$gap": 4
   }, React.createElement(WarningRoundIcon, {
     size: "medium",
     view: "lined",
@@ -54,14 +54,14 @@ export function DataTable(props) {
     "$color": Color.WARNING
   }, "Request is failed")), !data.loading && !data.error && (((_data$value2 = data.value) === null || _data$value2 === void 0 ? void 0 : _data$value2.total) ?? 0) > 0 && React.createElement(Horizontal, {
     "$placeItems": "center",
-    "$gap": Spacing.S1
+    "$gap": 4
   }, "Result:", React.createElement(LockedText, null, `${(_data$value3 = data.value) === null || _data$value3 === void 0 ? void 0 : _data$value3.total} item${(((_data$value4 = data.value) === null || _data$value4 === void 0 ? void 0 : _data$value4.total) ?? 0) > 1 ? 's' : ''}`)), !data.loading && !data.error && (((_data$value5 = data.value) === null || _data$value5 === void 0 ? void 0 : _data$value5.total) ?? 0) === 0 && !isFiltered && React.createElement(Horizontal, {
     "$placeItems": "center"
   }, React.createElement(LockedText, null, "No items yet")), !data.loading && (((_data$value6 = data.value) === null || _data$value6 === void 0 || (_data$value6 = _data$value6.items) === null || _data$value6 === void 0 ? void 0 : _data$value6.length) ?? 0) === 0 && isFiltered && React.createElement(Horizontal, {
-    "$gap": Spacing.S5
+    "$gap": 16
   }, !data.error && React.createElement(Horizontal, {
     "$placeItems": "center",
-    "$gap": Spacing.S1
+    "$gap": 4
   }, "Result:", React.createElement(LockedText, null, "No match found")), React.createElement(Button, {
     color: "primary",
     view: "ghost",

package/Tabs/components/TabBar/styles.js

@@ -1,12 +1,12 @@
 import styled from 'styled-components';
-import { Color, Spacing } from '@pushwoosh/kit-constants';
+import { Color } from '@pushwoosh/kit-constants';
 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:", ";overflow:hidden;"], ({
+})(["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, Spacing.S1);
+}) => hasTitle ? 'max-content 1fr' : '1fr', Color.SOFT_LIGHT);
 export const TabBarTitleBox = styled.div.withConfig({
   displayName: "TabBarTitleBox",
   componentId: "sc-pu8yhh-1"
-})(["display:flex;align-items:center;position:relative;padding:0 ", " 0 ", ";"], Spacing.S4, Spacing.S5);
+})(["display:flex;align-items:center;position:relative;padding:0 12px 0 16px;"]);

package/Tabs/components/TabBarScrollableFrame/styles.js

@@ -1,15 +1,15 @@
 import styled from 'styled-components';
-import { Color, Shadow, ShapeRadius, Spacing } from '@pushwoosh/kit-constants';
+import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
 export const TabBarArrowContainer = styled.div.withConfig({
   displayName: "TabBarArrowContainer",
   componentId: "sc-1sonok9-0"
-})(["position:absolute;top:0;", ":0;display:flex;align-items:center;height:32px;cursor:pointer;color:", ";background-color:", ";box-shadow:", ";border-radius:", ";padding:", " ", ";&:hover{color:", ";}"], ({
+})(["position:absolute;top:0;", ":0;display:flex;align-items:center;height:32px;cursor:pointer;color:", ";background-color:", ";box-shadow:", ";border-radius:", ";padding:8px 4px;&:hover{color:", ";}"], ({
   $right
-}) => $right ? 'right' : 'left', Color.MAIN, Color.CLEAR, Shadow.SMALL, ShapeRadius.CONTROL, Spacing.S3, Spacing.S1, Color.PRIMARY_HOVER);
+}) => $right ? 'right' : 'left', Color.MAIN, Color.CLEAR, Shadow.SMALL, ShapeRadius.CONTROL, Color.PRIMARY_HOVER);
 export const TabBarWindow = styled.div.withConfig({
   displayName: "TabBarWindow",
   componentId: "sc-1sonok9-1"
-})(["position:relative;height:32px;width:100%;"]);
+})(["position:relative;width:100%;height:32px;overflow:hidden;"]);
 export const TabsListContentBase = styled.div.withConfig({
   displayName: "TabsListContentBase",
   componentId: "sc-1sonok9-2"
@@ -17,9 +17,9 @@ export const TabsListContentBase = styled.div.withConfig({
 export const TabBarContent = styled(TabsListContentBase).withConfig({
   displayName: "TabBarContent",
   componentId: "sc-1sonok9-3"
-})(["left:", "px;gap:", ";"], ({
+})(["left:", "px;gap:4px;"], ({
   left
-}) => left, Spacing.S1);
+}) => left);
 export const TabBarFrame = styled.div.withConfig({
   displayName: "TabBarFrame",
   componentId: "sc-1sonok9-4"

package/Tooltip/styles.js

@@ -1,11 +1,11 @@
 import Tippy from '@tippyjs/react';
 import styled from 'styled-components';
-import { Color, FontSize, ShapeRadius, Spacing } from '@pushwoosh/kit-constants';
+import { Color, FontSize, ShapeRadius } from '@pushwoosh/kit-constants';
 import { getBottomPosition, getLeftPosition, getRightPosition, getTopPosition, getTransform } from './maps';
 export const TooltipBox = styled(Tippy).withConfig({
   displayName: "TooltipBox",
   componentId: "sc-1hariht-0"
-})(["&::after{content:\"\";position:absolute;top:", ";right:", ";bottom:", ";left:", ";width:10px;height:10px;margin:auto;border-radius:2px;background-color:", ";transform:", ";}&.tippy-box{position:static;display:block;padding:", ";color:", ";background-color:", ";border-radius:", ";font-size:", ";line-height:inherit;outline:0;transition:none;}.tippy-content{position:static;padding:0;z-index:auto;}.tippy-arrow{display:none;}"], ({
+})(["&::after{content:\"\";position:absolute;top:", ";right:", ";bottom:", ";left:", ";width:10px;height:10px;margin:auto;border-radius:2px;background-color:", ";transform:", ";}&.tippy-box{position:static;display:block;padding:12px;color:", ";background-color:", ";border-radius:", ";font-size:", ";line-height:inherit;outline:0;transition:none;}.tippy-content{position:static;padding:0;z-index:auto;}.tippy-arrow{display:none;}"], ({
   $position,
   $arrowOffset
 }) => getTopPosition($position, $arrowOffset), ({
@@ -19,4 +19,4 @@ export const TooltipBox = styled(Tippy).withConfig({
   $arrowOffset
 }) => getLeftPosition($position, $arrowOffset), Color.MAIN, ({
   $position
-}) => getTransform($position), Spacing.S4, Color.CLEAR, Color.MAIN, ShapeRadius.DIALOG, FontSize.REGULAR);
+}) => getTransform($position), Color.CLEAR, Color.MAIN, ShapeRadius.DIALOG, FontSize.REGULAR);

package/native/Input.js

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
-import { Color, FontSize, LineHeight, Spacing, ShapeRadius, UnitSize } from '@pushwoosh/kit-constants';
+import { Color, FontSize, LineHeight, ShapeRadius, UnitSize } from '@pushwoosh/kit-constants';
 export const NativeInput = styled.input.withConfig({
   displayName: "NativeInput",
   componentId: "sc-oqkcxd-0"
-})(["height:", ";padding:0 calc(", " - 1px);border:1px solid ", ";border-radius:", ";font-size:", ";line-height:", ";background-color:", ";&:focus{outline:none;border-color:", ";}&:disabled{background-color:", ";}&::placeholder{color:", ";}"], UnitSize.FIELD_HEIGHT, Spacing.S4, ({
+})(["height:", ";padding:0 calc(12px - 1px);border:1px solid ", ";border-radius:", ";font-size:", ";line-height:", ";background-color:", ";&:focus{outline:none;border-color:", ";}&:disabled{background-color:", ";}&::placeholder{color:", ";}"], UnitSize.FIELD_HEIGHT, ({
   $isErrored
 }) => $isErrored ? Color.DANGER : Color.FORM, ShapeRadius.CONTROL, FontSize.REGULAR, LineHeight.REGULAR, Color.CLEAR, Color.BRIGHT, Color.FROZEN, Color.PHANTOM);

package/native/Select.js

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
-import { Color, FontSize, ShapeRadius, Spacing, UnitSize } from '@pushwoosh/kit-constants';
+import { Color, FontSize, ShapeRadius, UnitSize } from '@pushwoosh/kit-constants';
 export const NativeSelect = styled.select.withConfig({
   displayName: "NativeSelect",
   componentId: "sc-1fsh619-0"
-})(["height:", ";padding:0 ", " 0 ", ";border:1px solid ", ";border-radius:", ";font-size:", ";color:", ";background-color:", ";background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 16px) calc(1em + 1px),calc(100% - 11px) calc(1em + 1px);background-size:5px 5px;background-repeat:no-repeat;appearance:none;&:hover{border-color:", ";}&:focus{outline:none;border:1px solid ", ";}&:read-only{border:1px solid ", ";}&:disabled{background-color:", ";cursor:not-allowed;}&:read-only{border:1px solid ", ";}&:read-only:hover{border-color:", ";}&::placeholder{color:", ";}"], UnitSize.FIELD_HEIGHT, Spacing.S7, Spacing.S4, Color.FORM, ShapeRadius.CONTROL, FontSize.REGULAR, Color.MAIN, Color.CLEAR, Color.PHANTOM, Color.BRIGHT, Color.FORM, Color.FROZEN, ({
+})(["height:", ";padding:0 24px 0 12px;border:1px solid ", ";border-radius:", ";font-size:", ";color:", ";background-color:", ";background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 16px) calc(1em + 1px),calc(100% - 11px) calc(1em + 1px);background-size:5px 5px;background-repeat:no-repeat;appearance:none;&:hover{border-color:", ";}&:focus{outline:none;border:1px solid ", ";}&:read-only{border:1px solid ", ";}&:disabled{background-color:", ";cursor:not-allowed;}&:read-only{border:1px solid ", ";}&:read-only:hover{border-color:", ";}&::placeholder{color:", ";}"], UnitSize.FIELD_HEIGHT, Color.FORM, ShapeRadius.CONTROL, FontSize.REGULAR, Color.MAIN, Color.CLEAR, Color.PHANTOM, Color.BRIGHT, Color.FORM, Color.FROZEN, ({
   $isErrored
 }) => $isErrored ? Color.DANGER : Color.FORM, ({
   $isErrored

package/native/Textarea.js

@@ -1,14 +1,14 @@
 import styled from 'styled-components';
-import { Color, FontSize, LineHeight, Spacing, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Color, FontSize, LineHeight, ShapeRadius } from '@pushwoosh/kit-constants';
 export const NativeTextarea = styled.textarea.withConfig({
   displayName: "NativeTextarea",
   componentId: "sc-1xe83i4-0"
-})(["width:", ";min-width:", ";max-width:", ";min-height:56px;padding:", " ", ";border:1px solid ", ";border-radius:", ";font-size:", ";line-height:", ";background-color:", ";&:focus{outline:none;border-color:", ";}&:disabled{background-color:", ";}&::placeholder{color:", ";}"], ({
+})(["width:", ";min-width:", ";max-width:", ";min-height:56px;padding:8px 12px;border:1px solid ", ";border-radius:", ";font-size:", ";line-height:", ";background-color:", ";&:focus{outline:none;border-color:", ";}&:disabled{background-color:", ";}&::placeholder{color:", ";}"], ({
   $width
 }) => $width || '100%', ({
   $width
 }) => $width || '180px', ({
   $width
-}) => $width || '100%', Spacing.S3, Spacing.S4, ({
+}) => $width || '100%', ({
   $isErrored
 }) => $isErrored ? Color.DANGER : Color.FORM, ShapeRadius.CONTROL, FontSize.REGULAR, LineHeight.REGULAR, Color.CLEAR, Color.BRIGHT, Color.FROZEN, Color.PHANTOM);

package/package.json

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