@pushwoosh/dumb-components 1.1.16 → 1.1.18

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/EmailTemplatePreview/helpers.js

@@ -1,12 +1,12 @@
 export function replaceLocalization(str, values) {
-  const re = /{{([0-9A-Za-z_ \-.[\]]+)\|(text|html|color)\|([^}]*)?}}/g;
+  const re = /{{([^|{}]+)\|(text|html|color)\|([^}]*)?}}/g;
   return str.replace(re, (_, key, _type, defaultValue) => {
     return (key in values ? values[key] : defaultValue) || '';
   });
 }
 export function replacePlaceholders(str, values) {
   const allAvailableModifiers = ['CapitalizeFirst', 'CapitalizeAllFirst', 'UPPERCASE', 'lowercase', 'regular', 'cent', 'dollar', 'comma', 'euro', 'jpy', 'lira', 'M-d-y', 'm-d-y', 'M d y', 'M d Y', 'l', 'M d', 'H:i', 'm-d-y H:i'];
-  const re = new RegExp(`{([0-9A-Za-z_ \\-]{1,64})\\|(${allAvailableModifiers.join('|')})(?:\\|([^}]*))?}`, 'g');
+  const re = new RegExp(`{([^|{}]{1,64})\\|(${allAvailableModifiers.join('|')})(?:\\|([^}]*))?}`, 'g');
   return str.replace(re, (_, key, _modifier, defaultValue) => {
     return (key in values ? values[key] : defaultValue) || '';
   });

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.16",
+  "version": "1.1.18",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",