npm - @redneckz/wildless-cms-uni-blocks - Versions diffs - 0.3.15 → 0.3.16 - Mend

@redneckz/wildless-cms-uni-blocks 0.3.15 → 0.3.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (53) hide show

package/mobile/dist/components/Headline/constants.d.ts CHANGED Viewed

@@ -1,4 +1,10 @@
 import type { AlignType } from '../BaseTile/BaseTileProps';
 import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
 export declare const ALIGN_TEXT: Record<AlignType, string>;
-export declare const BACKGROUND_COLOR: Record<BlockVersionWithTransparent, string>;
+declare type StyleType = {
+    background: string;
+    text: string;
+    description: string;
+};
+export declare const HEADLINE_BLOCK_STYLE_MAPS: Record<BlockVersionWithTransparent, StyleType>;
+export {};

package/mobile/dist/components/Headline/constants.js CHANGED Viewed

@@ -1,13 +1,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BACKGROUND_COLOR = exports.ALIGN_TEXT = void 0;
+exports.HEADLINE_BLOCK_STYLE_MAPS = exports.ALIGN_TEXT = void 0;
 exports.ALIGN_TEXT = {
     left: 'text-left',
     center: 'text-center',
     right: 'text-right',
 };
-exports.BACKGROUND_COLOR = {
-    transparent: 'bg-transparent',
-    primary: 'bg-white',
-    secondary: 'bg-primary-main',
+exports.HEADLINE_BLOCK_STYLE_MAPS = {
+    transparent: {
+        background: 'bg-transparent',
+        text: 'text-primary-text',
+        description: 'text-primary-text',
+    },
+    primary: {
+        background: 'bg-white',
+        text: 'text-primary-text',
+        description: 'text-primary-text',
+    },
+    secondary: {
+        background: 'bg-primary-main',
+        text: 'text-white',
+        description: 'text-white/80',
+    },
 };
 //# sourceMappingURL=constants.js.map

package/mobile/dist/components/Headline/constants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/components/Headline/constants.ts"],"names":[],"mappings":";;AAGa,QAAA,UAAU,GAA8B;IACnD,IAAI,EAAE,WAAW;IACjB,MAAM,EAAE,aAAa;IACrB,KAAK,EAAE,YAAY;CACpB,CAAC;~~AAEW~~,QAAA,~~gBAAgB~~,~~GAAgD~~;~~IAC3E~~,WAAW,EAAE,gBAAgB;~~IAC7B~~,OAAO,EAAE,UAAU;~~IACnB~~,SAAS,EAAE,iBAAiB;~~CAC7B~~,CAAC"}
1	+ {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/components/Headline/constants.ts"],"names":[],"mappings":";;AAGa,QAAA,UAAU,GAA8B;IACnD,IAAI,EAAE,WAAW;IACjB,MAAM,EAAE,aAAa;IACrB,KAAK,EAAE,YAAY;CACpB,CAAC;AAQW,QAAA,yBAAyB,GAAmD;IACvF,WAAW,EAAE;QACX,UAAU,EAAE,gBAAgB;QAC5B,IAAI,EAAE,mBAAmB;QACzB,WAAW,EAAE,mBAAmB;KACjC;IACD,OAAO,EAAE;QACP,UAAU,EAAE,UAAU;QACtB,IAAI,EAAE,mBAAmB;QACzB,WAAW,EAAE,mBAAmB;KACjC;IACD,SAAS,EAAE;QACT,UAAU,EAAE,iBAAiB;QAC7B,IAAI,EAAE,YAAY;QAClB,WAAW,EAAE,eAAe;KAC7B;CACF,CAAC"}

package/mobile/dist/components/StepsBlock/StepsBlock.js CHANGED Viewed

@@ -4,21 +4,43 @@ const jsx_runtime_1 = require("@redneckz/uni-jsx/jsx-runtime");
 const uni_jsx_1 = require("@redneckz/uni-jsx");
 const Heading_1 = require("../../ui-kit/Heading/Heading");
 const Icon_1 = require("../../ui-kit/Icon/Icon");
-exports.StepsBlock = (0, uni_jsx_1.JSX)(({ className, title, description, steps, size = 'normal' }) => {
-    return ((0, jsx_runtime_1.jsxs)("section", { className: `box-border font-sans text-primary-text bg-white px-4 py-6 flex flex-col ${className || ''}`, children: [title && (0, jsx_runtime_1.jsx)(Heading_1.Heading, { headingType: "h3", className: "text-center", title: title }), description && (0, jsx_runtime_1.jsx)("p", { className: `text-m-md text-center ${title && 'mt-2'}`, children: description }), steps?.length ? ((0, jsx_runtime_1.jsx)("div", { className: `box-border py-0.5 mb-0.5 mt-5`, children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col justify-between gap-x-[101px]", children: steps.map((step, i) => renderStepTitle({ step, size, i, length: steps.length })) }) })) : null] }));
+const STEPS_BLOCK_STYLE_MAPS = {
+    primary: {
+        background: 'bg-white',
+        title: 'text-primary-text',
+        description: 'text-secondary-text',
+        iconBackground: 'bg-secondary-light',
+        iconConnector: 'bg-secondary-light',
+    },
+    secondary: {
+        background: 'bg-primary-main',
+        title: 'text-white',
+        description: 'text-white/80',
+        iconBackground: 'bg-white/30',
+        iconConnector: 'bg-white',
+    },
+};
+const styleMaps = (version) => STEPS_BLOCK_STYLE_MAPS[version];
+exports.StepsBlock = (0, uni_jsx_1.JSX)(({ className, title, description, steps, size = 'normal', version = 'primary' }) => {
+    const style = styleMaps(version);
+    return ((0, jsx_runtime_1.jsxs)("section", { className: `box-border font-sans bg-white px-4 py-6 flex flex-col
+        ${style.background} ${style.title} ${className || ''}`, children: [title && ((0, jsx_runtime_1.jsx)(Heading_1.Heading, { headingType: "h3", className: `text-center ${style.title}`, title: title })), description && ((0, jsx_runtime_1.jsx)("p", { className: `text-m-md text-center ${style.description} ${title && 'mt-2'}`, children: description })), steps?.length ? ((0, jsx_runtime_1.jsx)("div", { className: `box-border py-0.5 mb-0.5 mt-5`, children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col justify-between gap-x-[101px]", children: steps.map((step, i) => renderStepTitle({ step, size, i, length: steps.length, version: version })) }) })) : null] }));
 });
 const renderStepTitle = (params) => {
-    const { step, size, i, length } = params;
+    const { step, size, i, length, version } = params;
     const isLastStep = length - 1 === i;
     const margin = size === 'normal' ? 'ml-[34px]' : 'ml-[24px]';
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row text-center relative", children: [(0, jsx_runtime_1.jsxs)("div", { children: [renderIconArea(step, size, i), !isLastStep && (0, jsx_runtime_1.jsx)("div", { className: `min-h-8 h-full w-[2px] bg-secondary-light ${margin}` })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col justify-start relative", children: [step.label && ((0, jsx_runtime_1.jsx)("div", { className: "font-medium text-m-title-xs m-0 text-left", children: step.label })), step.description && ((0, jsx_runtime_1.jsx)("div", { className: `font-normal text-sm text-secondary-text text-left ${step.label ? 'mt-1' : ''}`, children: step.description }))] })] }, String(i)) }, String(i)));
+    const style = styleMaps(version);
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row text-center relative", children: [(0, jsx_runtime_1.jsxs)("div", { className: "overflow-hidden", children: [renderIconArea(params), !isLastStep && ((0, jsx_runtime_1.jsx)("div", { className: `min-h-8 h-full w-[2px] ${style.iconConnector} ${margin}` }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col justify-start relative", children: [step.label && ((0, jsx_runtime_1.jsx)("div", { className: "font-medium text-m-title-xs m-0 text-left", children: step.label })), step.description && ((0, jsx_runtime_1.jsx)("div", { className: `font-normal text-sm ${style.description} text-left ${step.label ? 'mt-1' : ''}`, children: step.description }))] })] }, String(i)) }, String(i)));
 };
-const renderIconArea = (step, size, i) => {
+const renderIconArea = (params) => {
+    const { step, size, i, version } = params;
+    const style = styleMaps(version);
     const iconAreaSize = size === 'normal'
         ? 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]'
         : 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]';
     const iconSize = size === 'normal' ? '38' : '27';
     const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';
-    return ((0, jsx_runtime_1.jsx)("div", { className: `${iconAreaSize} bg-secondary-light rounded-full z-10 mr-3 flex justify-center content-center`, children: (0, jsx_runtime_1.jsx)("span", { className: `font-medium text-secondary-text self-center ${iconTextSize}`, children: (step.icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: step.icon, width: iconSize, height: iconSize })) || i + 1 }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: `${iconAreaSize} ${style.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`, children: (0, jsx_runtime_1.jsx)("span", { className: `font-medium flex self-center ${style.title} ${iconTextSize}`, children: (step.icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: step.icon, width: iconSize, height: iconSize, asSVG: true })) || i + 1 }) }));
 };
 //# sourceMappingURL=StepsBlock.js.map

package/mobile/dist/components/StepsBlock/StepsBlock.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepsBlock.js","sourceRoot":"","sources":["../../../src/components/StepsBlock/StepsBlock.tsx"],"names":[],"mappings":";;;AAAA,+CAAwC;~~AAGxC~~,0DAAuD;AACvD,iDAA8C;~~AAKjC~~,QAAA,UAAU,GAAG,IAAA,aAAG,EAC3B,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,GAAG,QAAQ,EAAE,EAAE,EAAE;~~IAC5D~~,OAAO,CACL,qCACE,SAAS,EAAE,~~2EACT~~,SAAS,IAAI,~~EACf~~,EAAE,~~aAED~~,KAAK,IAAI,uBAAC,iBAAO,IAAC,WAAW,EAAC,IAAI,EAAC,SAAS,~~EAAC~~,~~aAAa~~,~~EAAC~~,KAAK,EAAE,KAAK,GAAI,~~EAC3E~~,WAAW,IAAI,8BAAG,SAAS,EAAE,yBAAyB,KAAK,IAAI,MAAM,EAAE,~~YAAG~~,WAAW,~~GAAK~~,~~EAC1F~~,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CACf,gCAAK,SAAS,EAAE,+BAA+B,YAC7C,gCAAK,SAAS,EAAC,6CAA6C,YACzD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,~~CAAC~~,eAAe,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,~~CAAC~~,CAAC,~~GAC7E~~,GACF,CACP,CAAC,CAAC,CAAC,IAAI,IACA,CACX,CAAC;AACJ,CAAC,CACF,CAAC;~~AASF~~,MAAM,eAAe,GAAG,CAAC,MAA6B,EAAE,EAAE;IACxD,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;~~IAEzC~~,MAAM,UAAU,GAAG,MAAM,GAAG,CAAC,KAAK,CAAC,CAAC;IACpC,MAAM,MAAM,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC;~~IAE7D~~,OAAO,CACL,0CACE,iCAAqB,SAAS,EAAC,oCAAoC,aACjE,~~4CACG~~,~~cAAc~~,~~CAAC~~,~~IAAI~~,~~EAAE~~,~~IAAI~~,~~EAAE,~~CAAC,CAAC,~~EAC7B~~,CAAC,UAAU,IAAI,gCAAK,SAAS,EAAE,~~6CAA6C~~,MAAM,EAAE,GAAI,~~IACrF~~,EACN,iCAAK,SAAS,EAAC,sCAAsC,aAClD,IAAI,CAAC,KAAK,IAAI,CACb,gCAAK,SAAS,EAAC,2CAA2C,YAAE,IAAI,CAAC,KAAK,GAAO,CAC9E,EACA,IAAI,CAAC,WAAW,IAAI,CACnB,gCACE,SAAS,EAAE,~~qDACT~~,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EACxB,EAAE,YAED,IAAI,CAAC,WAAW,GACb,CACP,IACG,~~KAlBE~~,MAAM,CAAC,CAAC,CAAC,~~CAmBb~~,~~IApBE~~,MAAM,CAAC,CAAC,CAAC,~~CAqBb~~,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,~~IAAU~~,EAAE,~~IAAiB~~,EAAE,~~CAAS~~,EAAE,EAAE;~~IAClE~~,MAAM,YAAY,GAChB,IAAI,KAAK,QAAQ;QACf,CAAC,CAAC,6CAA6C;QAC/C,CAAC,CAAC,6CAA6C,CAAC;IAEpD,MAAM,QAAQ,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IACjD,MAAM,YAAY,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAE5E,OAAO,CACL,gCACE,SAAS,EAAE,GAAG,YAAY~~,+EAA+E~~,~~YAEzG~~,iCAAM,SAAS,EAAE~~,+CAA+C~~,YAAY,EAAE,YAC3E,CAAC,IAAI,CAAC,IAAI,IAAI,uBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,~~GAAI~~,CAAC,IAAI,CAAC,GAAG,CAAC,~~GAChF~~,GACH,CACP,CAAC;AACJ,CAAC,CAAC"}
1	+ {"version":3,"file":"StepsBlock.js","sourceRoot":"","sources":["../../../src/components/StepsBlock/StepsBlock.tsx"],"names":[],"mappings":"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"}

package/mobile/dist/components/StepsBlock/StepsBlockContent.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 import type { SizeVersion } from '../../model/SizeVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 /**
  * @title Шаг
  */
@@ -27,4 +28,5 @@ export interface StepsBlockContent {
      */
     steps?: Step[];
     size?: SizeVersion;
+    version?: BlockVersion;
 }

package/mobile/lib/components/Headline/Headline.js CHANGED Viewed

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
 import { Heading } from '../../ui-kit/Heading/Heading.js';
 import { Img } from '../../ui-kit/Img/Img.js';
-import { ALIGN_TEXT, BACKGROUND_COLOR } from './constants.js';
+import { ALIGN_TEXT, HEADLINE_BLOCK_STYLE_MAPS } from './constants.js';
 export const Headline = JSX(({ bgColorHeadline = 'transparent', className = '', title, description, image, align = 'left', }) => {
-    return (_jsxs("section", { className: `px-4 py-6 ${BACKGROUND_COLOR[bgColorHeadline]} ${className}`, children: [title && (_jsx(Heading, { headingType: "h2", className: `text-primary-text ${ALIGN_TEXT[align]}`, title: title })), description && (_jsx("p", { className: `font-normal text-m-md ${ALIGN_TEXT[align]} ${title ? 'mt-2.5' : ''}`, children: description })), image?.src && (_jsx("div", { className: "mt-5 mx-auto flex justify-center", children: _jsx(Img, { image: image }) }))] }));
+    const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
+    return (_jsxs("section", { className: `px-4 py-6 ${STYLE_MAPS.background} ${className}`, children: [title && (_jsx(Heading, { headingType: "h2", className: `${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })), description && (_jsx("p", { className: `font-normal text-m-md ${STYLE_MAPS.description} ${ALIGN_TEXT[align]} ${title ? 'mt-2.5' : ''}`, children: description })), image?.src && (_jsx("div", { className: "mt-5 mx-auto flex justify-center", children: _jsx(Img, { image: image }) }))] }));
 });
 //# sourceMappingURL=Headline.js.map

package/mobile/lib/components/Headline/Headline.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Headline.js","sourceRoot":"","sources":["../../../src/components/Headline/Headline.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,~~gBAAgB~~,EAAE,MAAM,aAAa,CAAC;~~AAK3D~~,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CACzB,CAAC,EACC,eAAe,GAAG,aAAa,EAC/B,SAAS,GAAG,EAAE,EACd,KAAK,EACL,WAAW,EACX,KAAK,EACL,KAAK,GAAG,MAAM,GACf,EAAE,EAAE;IACH,OAAO,CACL,mBAAS,SAAS,EAAE,aAAa,~~gBAAgB~~,CAAC,~~eAAe~~,~~CAAC,~~IAAI,SAAS,EAAE,~~aAC9E~~,KAAK,IAAI,CACR,KAAC,OAAO,IACN,WAAW,EAAC,IAAI,EAChB,SAAS,EAAE,~~qBAAqB~~,UAAU,CAAC,KAAK,CAAC,EAAE,~~EACnD~~,KAAK,EAAE,KAAK,GACZ,CACH,EACA,WAAW,IAAI,CACd,~~YAAG~~,SAAS,EAAE,yBAAyB,UAAU,CAAC,KAAK,CAAC,~~IAAI~~,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,~~EAAE~~,EAAE,~~YAChF~~,WAAW,GACV,CACL,EACA,KAAK,EAAE,GAAG,IAAI,CACb,cAAK,SAAS,EAAC,kCAAkC,YAC/C,KAAC,GAAG,IAAC,KAAK,EAAE,KAAK,GAAI,GACjB,CACP,IACO,CACX,CAAC;AACJ,CAAC,CACF,CAAC"}
1	+ {"version":3,"file":"Headline.js","sourceRoot":"","sources":["../../../src/components/Headline/Headline.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAKpE,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CACzB,CAAC,EACC,eAAe,GAAG,aAAa,EAC/B,SAAS,GAAG,EAAE,EACd,KAAK,EACL,WAAW,EACX,KAAK,EACL,KAAK,GAAG,MAAM,GACf,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,yBAAyB,CAAC,eAAe,CAAC,CAAC;IAC9D,OAAO,CACL,mBAAS,SAAS,EAAE,aAAa,UAAU,CAAC,UAAU,IAAI,SAAS,EAAE,aAClE,KAAK,IAAI,CACR,KAAC,OAAO,IACN,WAAW,EAAC,IAAI,EAChB,SAAS,EAAE,GAAG,UAAU,CAAC,IAAI,IAAI,UAAU,CAAC,KAAK,CAAC,EAAE,EACpD,KAAK,EAAE,KAAK,GACZ,CACH,EACA,WAAW,IAAI,CACd,YACE,SAAS,EAAE,yBAAyB,UAAU,CAAC,WAAW,IAAI,UAAU,CAAC,KAAK,CAAC,IAC7E,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EACrB,EAAE,YAED,WAAW,GACV,CACL,EACA,KAAK,EAAE,GAAG,IAAI,CACb,cAAK,SAAS,EAAC,kCAAkC,YAC/C,KAAC,GAAG,IAAC,KAAK,EAAE,KAAK,GAAI,GACjB,CACP,IACO,CACX,CAAC;AACJ,CAAC,CACF,CAAC"}

package/mobile/lib/components/Headline/constants.d.ts CHANGED Viewed

@@ -1,4 +1,10 @@
 import type { AlignType } from '../BaseTile/BaseTileProps';
 import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
 export declare const ALIGN_TEXT: Record<AlignType, string>;
-export declare const BACKGROUND_COLOR: Record<BlockVersionWithTransparent, string>;
+declare type StyleType = {
+    background: string;
+    text: string;
+    description: string;
+};
+export declare const HEADLINE_BLOCK_STYLE_MAPS: Record<BlockVersionWithTransparent, StyleType>;
+export {};

package/mobile/lib/components/Headline/constants.js CHANGED Viewed

@@ -3,9 +3,21 @@ export const ALIGN_TEXT = {
     center: 'text-center',
     right: 'text-right',
 };
-export const BACKGROUND_COLOR = {
-    transparent: 'bg-transparent',
-    primary: 'bg-white',
-    secondary: 'bg-primary-main',
+export const HEADLINE_BLOCK_STYLE_MAPS = {
+    transparent: {
+        background: 'bg-transparent',
+        text: 'text-primary-text',
+        description: 'text-primary-text',
+    },
+    primary: {
+        background: 'bg-white',
+        text: 'text-primary-text',
+        description: 'text-primary-text',
+    },
+    secondary: {
+        background: 'bg-primary-main',
+        text: 'text-white',
+        description: 'text-white/80',
+    },
 };
 //# sourceMappingURL=constants.js.map

package/mobile/lib/components/Headline/constants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/components/Headline/constants.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,UAAU,GAA8B;IACnD,IAAI,EAAE,WAAW;IACjB,MAAM,EAAE,aAAa;IACrB,KAAK,EAAE,YAAY;CACpB,CAAC;~~AAEF~~,MAAM,CAAC,MAAM,~~gBAAgB~~,~~GAAgD~~;~~IAC3E~~,WAAW,EAAE,gBAAgB;~~IAC7B~~,OAAO,EAAE,UAAU;~~IACnB~~,SAAS,EAAE,iBAAiB;~~CAC7B~~,CAAC"}
1	+ {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/components/Headline/constants.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,UAAU,GAA8B;IACnD,IAAI,EAAE,WAAW;IACjB,MAAM,EAAE,aAAa;IACrB,KAAK,EAAE,YAAY;CACpB,CAAC;AAQF,MAAM,CAAC,MAAM,yBAAyB,GAAmD;IACvF,WAAW,EAAE;QACX,UAAU,EAAE,gBAAgB;QAC5B,IAAI,EAAE,mBAAmB;QACzB,WAAW,EAAE,mBAAmB;KACjC;IACD,OAAO,EAAE;QACP,UAAU,EAAE,UAAU;QACtB,IAAI,EAAE,mBAAmB;QACzB,WAAW,EAAE,mBAAmB;KACjC;IACD,SAAS,EAAE;QACT,UAAU,EAAE,iBAAiB;QAC7B,IAAI,EAAE,YAAY;QAClB,WAAW,EAAE,eAAe;KAC7B;CACF,CAAC"}

package/mobile/lib/components/StepsBlock/StepsBlock.js CHANGED Viewed

@@ -2,21 +2,43 @@ import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
 import { Heading } from '../../ui-kit/Heading/Heading.js';
 import { Icon } from '../../ui-kit/Icon/Icon.js';
-export const StepsBlock = JSX(({ className, title, description, steps, size = 'normal' }) => {
-    return (_jsxs("section", { className: `box-border font-sans text-primary-text bg-white px-4 py-6 flex flex-col ${className || ''}`, children: [title && _jsx(Heading, { headingType: "h3", className: "text-center", title: title }), description && _jsx("p", { className: `text-m-md text-center ${title && 'mt-2'}`, children: description }), steps?.length ? (_jsx("div", { className: `box-border py-0.5 mb-0.5 mt-5`, children: _jsx("div", { className: "flex flex-col justify-between gap-x-[101px]", children: steps.map((step, i) => renderStepTitle({ step, size, i, length: steps.length })) }) })) : null] }));
+const STEPS_BLOCK_STYLE_MAPS = {
+    primary: {
+        background: 'bg-white',
+        title: 'text-primary-text',
+        description: 'text-secondary-text',
+        iconBackground: 'bg-secondary-light',
+        iconConnector: 'bg-secondary-light',
+    },
+    secondary: {
+        background: 'bg-primary-main',
+        title: 'text-white',
+        description: 'text-white/80',
+        iconBackground: 'bg-white/30',
+        iconConnector: 'bg-white',
+    },
+};
+const styleMaps = (version) => STEPS_BLOCK_STYLE_MAPS[version];
+export const StepsBlock = JSX(({ className, title, description, steps, size = 'normal', version = 'primary' }) => {
+    const style = styleMaps(version);
+    return (_jsxs("section", { className: `box-border font-sans bg-white px-4 py-6 flex flex-col
+        ${style.background} ${style.title} ${className || ''}`, children: [title && (_jsx(Heading, { headingType: "h3", className: `text-center ${style.title}`, title: title })), description && (_jsx("p", { className: `text-m-md text-center ${style.description} ${title && 'mt-2'}`, children: description })), steps?.length ? (_jsx("div", { className: `box-border py-0.5 mb-0.5 mt-5`, children: _jsx("div", { className: "flex flex-col justify-between gap-x-[101px]", children: steps.map((step, i) => renderStepTitle({ step, size, i, length: steps.length, version: version })) }) })) : null] }));
 });
 const renderStepTitle = (params) => {
-    const { step, size, i, length } = params;
+    const { step, size, i, length, version } = params;
     const isLastStep = length - 1 === i;
     const margin = size === 'normal' ? 'ml-[34px]' : 'ml-[24px]';
-    return (_jsx("div", { children: _jsxs("div", { className: "flex flex-row text-center relative", children: [_jsxs("div", { children: [renderIconArea(step, size, i), !isLastStep && _jsx("div", { className: `min-h-8 h-full w-[2px] bg-secondary-light ${margin}` })] }), _jsxs("div", { className: "flex flex-col justify-start relative", children: [step.label && (_jsx("div", { className: "font-medium text-m-title-xs m-0 text-left", children: step.label })), step.description && (_jsx("div", { className: `font-normal text-sm text-secondary-text text-left ${step.label ? 'mt-1' : ''}`, children: step.description }))] })] }, String(i)) }, String(i)));
+    const style = styleMaps(version);
+    return (_jsx("div", { children: _jsxs("div", { className: "flex flex-row text-center relative", children: [_jsxs("div", { className: "overflow-hidden", children: [renderIconArea(params), !isLastStep && (_jsx("div", { className: `min-h-8 h-full w-[2px] ${style.iconConnector} ${margin}` }))] }), _jsxs("div", { className: "flex flex-col justify-start relative", children: [step.label && (_jsx("div", { className: "font-medium text-m-title-xs m-0 text-left", children: step.label })), step.description && (_jsx("div", { className: `font-normal text-sm ${style.description} text-left ${step.label ? 'mt-1' : ''}`, children: step.description }))] })] }, String(i)) }, String(i)));
 };
-const renderIconArea = (step, size, i) => {
+const renderIconArea = (params) => {
+    const { step, size, i, version } = params;
+    const style = styleMaps(version);
     const iconAreaSize = size === 'normal'
         ? 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]'
         : 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]';
     const iconSize = size === 'normal' ? '38' : '27';
     const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';
-    return (_jsx("div", { className: `${iconAreaSize} bg-secondary-light rounded-full z-10 mr-3 flex justify-center content-center`, children: _jsx("span", { className: `font-medium text-secondary-text self-center ${iconTextSize}`, children: (step.icon && _jsx(Icon, { name: step.icon, width: iconSize, height: iconSize })) || i + 1 }) }));
+    return (_jsx("div", { className: `${iconAreaSize} ${style.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`, children: _jsx("span", { className: `font-medium flex self-center ${style.title} ${iconTextSize}`, children: (step.icon && _jsx(Icon, { name: step.icon, width: iconSize, height: iconSize, asSVG: true })) || i + 1 }) }));
 };
 //# sourceMappingURL=StepsBlock.js.map

package/mobile/lib/components/StepsBlock/StepsBlock.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepsBlock.js","sourceRoot":"","sources":["../../../src/components/StepsBlock/StepsBlock.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;~~AAGxC~~,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;~~AAK9C~~,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAC3B,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,GAAG,QAAQ,EAAE,EAAE,EAAE;~~IAC5D~~,OAAO,CACL,mBACE,SAAS,EAAE,~~2EACT~~,SAAS,IAAI,~~EACf~~,EAAE,~~aAED~~,KAAK,IAAI,KAAC,OAAO,IAAC,WAAW,EAAC,IAAI,EAAC,SAAS,~~EAAC~~,~~aAAa~~,~~EAAC~~,KAAK,EAAE,KAAK,GAAI,~~EAC3E~~,WAAW,IAAI,YAAG,SAAS,EAAE,yBAAyB,KAAK,IAAI,MAAM,EAAE,~~YAAG~~,WAAW,~~GAAK~~,~~EAC1F~~,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CACf,cAAK,SAAS,EAAE,+BAA+B,YAC7C,cAAK,SAAS,EAAC,6CAA6C,YACzD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,~~CAAC~~,eAAe,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,~~CAAC~~,CAAC,~~GAC7E~~,GACF,CACP,CAAC,CAAC,CAAC,IAAI,IACA,CACX,CAAC;AACJ,CAAC,CACF,CAAC;~~AASF~~,MAAM,eAAe,GAAG,CAAC,MAA6B,EAAE,EAAE;IACxD,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;~~IAEzC~~,MAAM,UAAU,GAAG,MAAM,GAAG,CAAC,KAAK,CAAC,CAAC;IACpC,MAAM,MAAM,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC;~~IAE7D~~,OAAO,CACL,wBACE,eAAqB,SAAS,EAAC,oCAAoC,aACjE,~~0BACG~~,~~cAAc~~,~~CAAC~~,~~IAAI~~,~~EAAE~~,~~IAAI~~,~~EAAE,~~CAAC,CAAC,~~EAC7B~~,CAAC,UAAU,IAAI,cAAK,SAAS,EAAE,~~6CAA6C~~,MAAM,EAAE,GAAI,~~IACrF~~,EACN,eAAK,SAAS,EAAC,sCAAsC,aAClD,IAAI,CAAC,KAAK,IAAI,CACb,cAAK,SAAS,EAAC,2CAA2C,YAAE,IAAI,CAAC,KAAK,GAAO,CAC9E,EACA,IAAI,CAAC,WAAW,IAAI,CACnB,cACE,SAAS,EAAE,~~qDACT~~,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EACxB,EAAE,YAED,IAAI,CAAC,WAAW,GACb,CACP,IACG,~~KAlBE~~,MAAM,CAAC,CAAC,CAAC,~~CAmBb~~,~~IApBE~~,MAAM,CAAC,CAAC,CAAC,~~CAqBb~~,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,~~IAAU~~,EAAE,~~IAAiB~~,EAAE,~~CAAS~~,EAAE,EAAE;~~IAClE~~,MAAM,YAAY,GAChB,IAAI,KAAK,QAAQ;QACf,CAAC,CAAC,6CAA6C;QAC/C,CAAC,CAAC,6CAA6C,CAAC;IAEpD,MAAM,QAAQ,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IACjD,MAAM,YAAY,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAE5E,OAAO,CACL,cACE,SAAS,EAAE,GAAG,YAAY~~,+EAA+E~~,~~YAEzG~~,eAAM,SAAS,EAAE~~,+CAA+C~~,YAAY,EAAE,YAC3E,CAAC,IAAI,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,~~GAAI~~,CAAC,IAAI,CAAC,GAAG,CAAC,~~GAChF~~,GACH,CACP,CAAC;AACJ,CAAC,CAAC"}
1	+ {"version":3,"file":"StepsBlock.js","sourceRoot":"","sources":["../../../src/components/StepsBlock/StepsBlock.tsx"],"names":[],"mappings":"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"}

package/mobile/lib/components/StepsBlock/StepsBlockContent.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 import type { SizeVersion } from '../../model/SizeVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 /**
  * @title Шаг
  */
@@ -27,4 +28,5 @@ export interface StepsBlockContent {
      */
     steps?: Step[];
     size?: SizeVersion;
+    version?: BlockVersion;
 }

package/mobile/src/components/Headline/Headline.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { ALIGN_TEXT, BACKGROUND_COLOR } from './constants';
+import { ALIGN_TEXT, HEADLINE_BLOCK_STYLE_MAPS } from './constants';
 import type { HeadlineContent } from './HeadlineContent';
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
@@ -17,17 +17,22 @@ export const Headline = JSX<HeadlineProps>(
     image,
     align = 'left',
   }) => {
+    const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
     return (
-      <section className={`px-4 py-6 ${BACKGROUND_COLOR[bgColorHeadline]} ${className}`}>
+      <section className={`px-4 py-6 ${STYLE_MAPS.background} ${className}`}>
         {title && (
           <Heading
             headingType="h2"
-            className={`text-primary-text ${ALIGN_TEXT[align]}`}
+            className={`${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`}
             title={title}
           />
         )}
         {description && (
-          <p className={`font-normal text-m-md ${ALIGN_TEXT[align]} ${title ? 'mt-2.5' : ''}`}>
+          <p
+            className={`font-normal text-m-md ${STYLE_MAPS.description} ${ALIGN_TEXT[align]} ${
+              title ? 'mt-2.5' : ''
+            }`}
+          >
             {description}
           </p>
         )}

package/mobile/src/components/Headline/constants.ts CHANGED Viewed

@@ -7,8 +7,26 @@ export const ALIGN_TEXT: Record<AlignType, string> = {
   right: 'text-right',
 };
-export const BACKGROUND_COLOR: Record<BlockVersionWithTransparent, string> = {
-  transparent: 'bg-transparent',
-  primary: 'bg-white',
-  secondary: 'bg-primary-main',
+type StyleType = {
+  background: string;
+  text: string;
+  description: string;
+};
+export const HEADLINE_BLOCK_STYLE_MAPS: Record<BlockVersionWithTransparent, StyleType> = {
+  transparent: {
+    background: 'bg-transparent',
+    text: 'text-primary-text',
+    description: 'text-primary-text',
+  },
+  primary: {
+    background: 'bg-white',
+    text: 'text-primary-text',
+    description: 'text-primary-text',
+  },
+  secondary: {
+    background: 'bg-primary-main',
+    text: 'text-white',
+    description: 'text-white/80',
+  },
 };

package/mobile/src/components/StepsBlock/StepsBlock.tsx CHANGED Viewed

@@ -1,26 +1,62 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { SizeVersion } from '../../model/SizeVersion';
-import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
+import type { SizeVersion } from '../../model/SizeVersion';
+import type { UniBlockProps } from '../../types';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
+import type { BlockVersion } from '../../model/BlockVersion';
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
+type StyleType = {
+  background: string;
+  title: string;
+  description: string;
+  iconBackground: string;
+  iconConnector: string;
+};
+const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
+  primary: {
+    background: 'bg-white',
+    title: 'text-primary-text',
+    description: 'text-secondary-text',
+    iconBackground: 'bg-secondary-light',
+    iconConnector: 'bg-secondary-light',
+  },
+  secondary: {
+    background: 'bg-primary-main',
+    title: 'text-white',
+    description: 'text-white/80',
+    iconBackground: 'bg-white/30',
+    iconConnector: 'bg-white',
+  },
+};
+const styleMaps = (version: BlockVersion): StyleType => STEPS_BLOCK_STYLE_MAPS[version];
 export const StepsBlock = JSX<StepsBlockProps>(
-  ({ className, title, description, steps, size = 'normal' }) => {
+  ({ className, title, description, steps, size = 'normal', version = 'primary' }) => {
+    const style = styleMaps(version);
     return (
       <section
-        className={`box-border font-sans text-primary-text bg-white px-4 py-6 flex flex-col ${
-          className || ''
-        }`}
+        className={`box-border font-sans bg-white px-4 py-6 flex flex-col
+        ${style.background} ${style.title} ${className || ''}`}
       >
-        {title && <Heading headingType="h3" className="text-center" title={title} />}
-        {description && <p className={`text-m-md text-center ${title && 'mt-2'}`}>{description}</p>}
+        {title && (
+          <Heading headingType="h3" className={`text-center ${style.title}`} title={title} />
+        )}
+        {description && (
+          <p className={`text-m-md text-center ${style.description} ${title && 'mt-2'}`}>
+            {description}
+          </p>
+        )}
         {steps?.length ? (
           <div className={`box-border py-0.5 mb-0.5 mt-5`}>
             <div className="flex flex-col justify-between gap-x-[101px]">
-              {steps.map((step, i) => renderStepTitle({ step, size, i, length: steps.length }))}
+              {steps.map((step, i) =>
+                renderStepTitle({ step, size, i, length: steps.length, version: version }),
+              )}
             </div>
           </div>
         ) : null}
@@ -34,20 +70,23 @@ interface RenderStepTitleParams {
   size: SizeVersion;
   i: number;
   length: number;
+  version: BlockVersion;
 }
 const renderStepTitle = (params: RenderStepTitleParams) => {
-  const { step, size, i, length } = params;
+  const { step, size, i, length, version } = params;
   const isLastStep = length - 1 === i;
   const margin = size === 'normal' ? 'ml-[34px]' : 'ml-[24px]';
+  const style = styleMaps(version);
   return (
     <div key={String(i)}>
       <div key={String(i)} className="flex flex-row text-center relative">
-        <div>
-          {renderIconArea(step, size, i)}
-          {!isLastStep && <div className={`min-h-8 h-full w-[2px] bg-secondary-light ${margin}`} />}
+        <div className="overflow-hidden">
+          {renderIconArea(params)}
+          {!isLastStep && (
+            <div className={`min-h-8 h-full w-[2px] ${style.iconConnector} ${margin}`} />
+          )}
         </div>
         <div className="flex flex-col justify-start relative">
           {step.label && (
@@ -55,7 +94,7 @@ const renderStepTitle = (params: RenderStepTitleParams) => {
           )}
           {step.description && (
             <div
-              className={`font-normal text-sm text-secondary-text text-left ${
+              className={`font-normal text-sm ${style.description} text-left ${
                 step.label ? 'mt-1' : ''
               }`}
             >
@@ -68,7 +107,9 @@ const renderStepTitle = (params: RenderStepTitleParams) => {
   );
 };
-const renderIconArea = (step: Step, size: SizeVersion, i: number) => {
+const renderIconArea = (params: RenderStepTitleParams) => {
+  const { step, size, i, version } = params;
+  const style = styleMaps(version);
   const iconAreaSize =
     size === 'normal'
       ? 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]'
@@ -79,10 +120,10 @@ const renderIconArea = (step: Step, size: SizeVersion, i: number) => {
   return (
     <div
-      className={`${iconAreaSize} bg-secondary-light rounded-full z-10 mr-3 flex justify-center content-center`}
+      className={`${iconAreaSize} ${style.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`}
     >
-      <span className={`font-medium text-secondary-text self-center ${iconTextSize}`}>
-        {(step.icon && <Icon name={step.icon} width={iconSize} height={iconSize} />) || i + 1}
+      <span className={`font-medium flex self-center ${style.title} ${iconTextSize}`}>
+        {(step.icon && <Icon name={step.icon} width={iconSize} height={iconSize} asSVG />) || i + 1}
       </span>
     </div>
   );

package/mobile/src/components/StepsBlock/StepsBlockContent.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 import type { SizeVersion } from '../../model/SizeVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 /**
  * @title Шаг
@@ -30,4 +30,5 @@ export interface StepsBlockContent {
    */
   steps?: Step[];
   size?: SizeVersion; // TODO: mobile content
+  version?: BlockVersion; // TODO: mobile content
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.15",
+  "version": "0.3.16",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/Headline/Headline.mobile.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { ALIGN_TEXT, BACKGROUND_COLOR } from './constants';
+import { ALIGN_TEXT, HEADLINE_BLOCK_STYLE_MAPS } from './constants';
 import type { HeadlineContent } from './HeadlineContent';
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
@@ -17,17 +17,22 @@ export const Headline = JSX<HeadlineProps>(
     image,
     align = 'left',
   }) => {
+    const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
     return (
-      <section className={`px-4 py-6 ${BACKGROUND_COLOR[bgColorHeadline]} ${className}`}>
+      <section className={`px-4 py-6 ${STYLE_MAPS.background} ${className}`}>
         {title && (
           <Heading
             headingType="h2"
-            className={`text-primary-text ${ALIGN_TEXT[align]}`}
+            className={`${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`}
             title={title}
           />
         )}
         {description && (
-          <p className={`font-normal text-m-md ${ALIGN_TEXT[align]} ${title ? 'mt-2.5' : ''}`}>
+          <p
+            className={`font-normal text-m-md ${STYLE_MAPS.description} ${ALIGN_TEXT[align]} ${
+              title ? 'mt-2.5' : ''
+            }`}
+          >
             {description}
           </p>
         )}

package/src/components/Headline/Headline.tsx CHANGED Viewed

@@ -2,15 +2,16 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { ALIGN_TEXT, BACKGROUND_COLOR } from './constants';
+import { ALIGN_TEXT, HEADLINE_BLOCK_STYLE_MAPS } from './constants';
 import type { HeadlineContent } from './HeadlineContent';
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 export const Headline = JSX<HeadlineProps>(
   ({ bgColorHeadline = 'transparent', align = 'left', className = '', title, description }) => {
+    const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
     return (
-      <section className={`p-[50px] ${BACKGROUND_COLOR[bgColorHeadline]} ${className}`}>
+      <section className={`p-[50px] ${STYLE_MAPS.background} ${className}`}>
         {title && (
           <Heading
             headingType="h2"

package/src/components/Headline/constants.ts CHANGED Viewed

@@ -7,8 +7,26 @@ export const ALIGN_TEXT: Record<AlignType, string> = {
   right: 'text-right',
 };
-export const BACKGROUND_COLOR: Record<BlockVersionWithTransparent, string> = {
-  transparent: 'bg-transparent',
-  primary: 'bg-white',
-  secondary: 'bg-primary-main',
+type StyleType = {
+  background: string;
+  text: string;
+  description: string;
+};
+export const HEADLINE_BLOCK_STYLE_MAPS: Record<BlockVersionWithTransparent, StyleType> = {
+  transparent: {
+    background: 'bg-transparent',
+    text: 'text-primary-text',
+    description: 'text-primary-text',
+  },
+  primary: {
+    background: 'bg-white',
+    text: 'text-primary-text',
+    description: 'text-primary-text',
+  },
+  secondary: {
+    background: 'bg-primary-main',
+    text: 'text-white',
+    description: 'text-white/80',
+  },
 };