@brilo/base-blocks 0.1.16 → 0.1.17

package/build/blocks/signpost/signpost-item/index.js

@@ -2,5 +2,5 @@ export { createSignpostItemBlock } from './factory';
 export const signpostItemDefaults = {
     name: 'brilo/signpost-item',
     parent: ['brilo/signpost-group'],
-    allowedBlocks: ['core/paragraph', 'core/list', 'core/heading'],
+    allowedBlocks: ['core/paragraph', 'core/list', 'core/heading', 'core/group', 'brilo/responsive-grid-group', 'brilo/link-item'],
 };

package/build/blocks/usp/usp-group/constants.d.ts

@@ -39,55 +39,68 @@ export declare const DEFAULT_SHADOWS: readonly [{
     readonly value: 'md';
     readonly label: import("@wordpress/i18n").TransformedText<"Střední">;
 }];
-export declare const DEFAULT_ICON_SIZES: readonly [{
-    readonly value: 'xs';
-    readonly label: import("@wordpress/i18n").TransformedText<"Extra Malá">;
-    readonly description: import("@wordpress/i18n").TransformedText<"48px">;
+export declare const DEFAULT_ICON_SIZE = 88;
+export declare const ICON_SIZE_MIN = 4;
+export declare const ICON_SIZE_MAX = 128;
+export declare const DEFAULT_ICON_SIZE_PRESETS: readonly [{
+    readonly value: 8;
+    readonly label: import("@wordpress/i18n").TransformedText<"XS">;
 }, {
-    readonly value: 'sm';
-    readonly label: import("@wordpress/i18n").TransformedText<"Malá">;
-    readonly description: import("@wordpress/i18n").TransformedText<"64px">;
+    readonly value: 16;
+    readonly label: import("@wordpress/i18n").TransformedText<"SM">;
 }, {
-    readonly value: 'default';
-    readonly label: import("@wordpress/i18n").TransformedText<"Výchozí">;
-    readonly description: import("@wordpress/i18n").TransformedText<"88px">;
+    readonly value: 24;
+    readonly label: import("@wordpress/i18n").TransformedText<"MD">;
 }, {
-    readonly value: 'lg';
-    readonly label: import("@wordpress/i18n").TransformedText<"Velká">;
-    readonly description: import("@wordpress/i18n").TransformedText<"104px">;
+    readonly value: 32;
+    readonly label: import("@wordpress/i18n").TransformedText<"LG">;
 }, {
-    readonly value: 'xl';
-    readonly label: import("@wordpress/i18n").TransformedText<"Extra Velká">;
-    readonly description: import("@wordpress/i18n").TransformedText<"128px">;
+    readonly value: 48;
+    readonly label: import("@wordpress/i18n").TransformedText<"XL">;
 }];
-export declare const DEFAULT_ICON_COLORS: readonly [{
-    readonly value: 'none';
-    readonly label: import("@wordpress/i18n").TransformedText<"Žádná">;
+export declare const DEFAULT_ICON_BACKGROUND_SIZE = 88;
+export declare const ICON_BACKGROUND_SIZE_MIN = 16;
+export declare const ICON_BACKGROUND_SIZE_MAX = 240;
+export declare const DEFAULT_ICON_BACKGROUND_SIZE_PRESETS: readonly [{
+    readonly value: 48;
+    readonly label: import("@wordpress/i18n").TransformedText<"XS">;
 }, {
-    readonly value: 'primary';
-    readonly label: import("@wordpress/i18n").TransformedText<"Primární">;
+    readonly value: 64;
+    readonly label: import("@wordpress/i18n").TransformedText<"SM">;
 }, {
-    readonly value: 'secondary';
-    readonly label: import("@wordpress/i18n").TransformedText<"Sekundární">;
+    readonly value: 88;
+    readonly label: import("@wordpress/i18n").TransformedText<"Výchozí">;
 }, {
-    readonly value: 'neutral';
-    readonly label: import("@wordpress/i18n").TransformedText<"Neutrální">;
+    readonly value: 104;
+    readonly label: import("@wordpress/i18n").TransformedText<"LG">;
 }, {
-    readonly value: 'conversion';
-    readonly label: import("@wordpress/i18n").TransformedText<"Konverzní">;
+    readonly value: 128;
+    readonly label: import("@wordpress/i18n").TransformedText<"XL">;
 }];
-export declare const DEFAULT_ICON_BACKGROUNDS: readonly [{
+export declare const DEFAULT_ICON_BACKGROUND_SHAPES: readonly [{
     readonly value: 'none';
-    readonly label: import("@wordpress/i18n").TransformedText<"Žádné">;
+    readonly label: import("@wordpress/i18n").TransformedText<"Žádný">;
+}, {
+    readonly value: 'circle';
+    readonly label: import("@wordpress/i18n").TransformedText<"Kruh">;
+}, {
+    readonly value: 'triangle';
+    readonly label: import("@wordpress/i18n").TransformedText<"Trojúhelník">;
+}, {
+    readonly value: 'rhombus';
+    readonly label: import("@wordpress/i18n").TransformedText<"Kosočtverec">;
+}, {
+    readonly value: 'octagon';
+    readonly label: import("@wordpress/i18n").TransformedText<"Osmiúhelník">;
 }, {
-    readonly value: 'primary';
-    readonly label: import("@wordpress/i18n").TransformedText<"Primární">;
+    readonly value: 'bevel';
+    readonly label: import("@wordpress/i18n").TransformedText<"Zkosený">;
 }, {
-    readonly value: 'secondary';
-    readonly label: import("@wordpress/i18n").TransformedText<"Sekundární">;
+    readonly value: 'rabbet';
+    readonly label: import("@wordpress/i18n").TransformedText<"Drážkovaný">;
 }, {
-    readonly value: 'neutral';
-    readonly label: import("@wordpress/i18n").TransformedText<"Neutrální">;
+    readonly value: 'parallelogram';
+    readonly label: import("@wordpress/i18n").TransformedText<"Rovnoběžník">;
 }];
 export declare const DEFAULT_ALIGNMENTS: readonly [{
     readonly value: 'left';

package/build/blocks/usp/usp-group/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/blocks/usp/usp-group/constants.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,aAAa,IAAI,qBAAqB,EAAC,MAAM,aAAa,CAAA;AAElE,eAAO,MAAM,eAAe,YAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAU,CAAA;AAEvD,eAAO,MAAM,kBAAkB;aAC5B,KAAK,EAAE,UAAU;aAAE,KAAK;;aACxB,KAAK,EAAE,YAAY;aAAE,KAAK;EACnB,CAAA;AAEV,eAAO,MAAM,cAAc,YAAI,CAAC,EAAE,CAAC,CAAU,CAAA;AAE7C,eAAO,MAAM,sBAAsB;aAChC,KAAK,EAAE,IAAI;aAAE,KAAK,EAAE,GAAG;aAAE,WAAW;;aACpC,KAAK,EAAE,IAAI;aAAE,KAAK,EAAE,GAAG;aAAE,WAAW;;aACpC,KAAK,EAAE,IAAI;aAAE,KAAK,EAAE,GAAG;aAAE,WAAW;;aACpC,KAAK,EAAE,IAAI;aAAE,KAAK,EAAE,IAAI;aAAE,WAAW;;aACrC,KAAK,EAAE,IAAI;aAAE,KAAK,EAAE,KAAK;aAAE,WAAW;EAC/B,CAAA;AAEV,eAAO,MAAM,eAAe;aACzB,KAAK,EAAE,MAAM;aAAE,KAAK;;aACpB,KAAK,EAAE,IAAI;aAAE,KAAK;;aAClB,KAAK,EAAE,IAAI;aAAE,KAAK;EACX,CAAA;AAEV,eAAO,MAAM,kBAAkB;aAC5B,KAAK,EAAE,IAAI;aAAE,KAAK;aAAoC,WAAW;;aACjE,KAAK,EAAE,IAAI;aAAE,KAAK;aAA8B,WAAW;;aAC3D,KAAK,EAAE,SAAS;aAAE,KAAK;aAAiC,WAAW;;aACnE,KAAK,EAAE,IAAI;aAAE,KAAK;aAA+B,WAAW;;aAC5D,KAAK,EAAE,IAAI;aAAE,KAAK;aAAqC,WAAW;EAC3D,CAAA;AAEV,eAAO,MAAM,mBAAmB;aAC7B,KAAK,EAAE,MAAM;aAAE,KAAK;;aACpB,KAAK,EAAE,SAAS;aAAE,KAAK;;aACvB,KAAK,EAAE,WAAW;aAAE,KAAK;;aACzB,KAAK,EAAE,SAAS;aAAE,KAAK;;aACvB,KAAK,EAAE,YAAY;aAAE,KAAK;EACnB,CAAA;AAEV,eAAO,MAAM,wBAAwB;aAClC,KAAK,EAAE,MAAM;aAAE,KAAK;;aACpB,KAAK,EAAE,SAAS;aAAE,KAAK;;aACvB,KAAK,EAAE,WAAW;aAAE,KAAK;;aACzB,KAAK,EAAE,SAAS;aAAE,KAAK;EAChB,CAAA;AAEV,eAAO,MAAM,kBAAkB;aAC5B,KAAK,EAAE,MAAM;aAAE,KAAK;;aACpB,KAAK,EAAE,QAAQ;aAAE,KAAK;EACf,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/blocks/usp/usp-group/constants.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,aAAa,IAAI,qBAAqB,EAAC,MAAM,aAAa,CAAA;AAElE,eAAO,MAAM,eAAe,YAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAU,CAAA;AAEvD,eAAO,MAAM,kBAAkB;aAC5B,KAAK,EAAE,UAAU;aAAE,KAAK;;aACxB,KAAK,EAAE,YAAY;aAAE,KAAK;EACnB,CAAA;AAEV,eAAO,MAAM,cAAc,YAAI,CAAC,EAAE,CAAC,CAAU,CAAA;AAE7C,eAAO,MAAM,sBAAsB;aAChC,KAAK,EAAE,IAAI;aAAE,KAAK,EAAE,GAAG;aAAE,WAAW;;aACpC,KAAK,EAAE,IAAI;aAAE,KAAK,EAAE,GAAG;aAAE,WAAW;;aACpC,KAAK,EAAE,IAAI;aAAE,KAAK,EAAE,GAAG;aAAE,WAAW;;aACpC,KAAK,EAAE,IAAI;aAAE,KAAK,EAAE,IAAI;aAAE,WAAW;;aACrC,KAAK,EAAE,IAAI;aAAE,KAAK,EAAE,KAAK;aAAE,WAAW;EAC/B,CAAA;AAEV,eAAO,MAAM,eAAe;aACzB,KAAK,EAAE,MAAM;aAAE,KAAK;;aACpB,KAAK,EAAE,IAAI;aAAE,KAAK;;aAClB,KAAK,EAAE,IAAI;aAAE,KAAK;EACX,CAAA;AAEV,eAAO,MAAM,iBAAiB,KAAK,CAAA;AACnC,eAAO,MAAM,aAAa,IAAI,CAAA;AAC9B,eAAO,MAAM,aAAa,MAAM,CAAA;AAEhC,eAAO,MAAM,yBAAyB;aACnC,KAAK,EAAE,CAAC;aAAE,KAAK;;aACf,KAAK,EAAE,EAAE;aAAE,KAAK;;aAChB,KAAK,EAAE,EAAE;aAAE,KAAK;;aAChB,KAAK,EAAE,EAAE;aAAE,KAAK;;aAChB,KAAK,EAAE,EAAE;aAAE,KAAK;EACT,CAAA;AAEV,eAAO,MAAM,4BAA4B,KAAK,CAAA;AAC9C,eAAO,MAAM,wBAAwB,KAAK,CAAA;AAC1C,eAAO,MAAM,wBAAwB,MAAM,CAAA;AAE3C,eAAO,MAAM,oCAAoC;aAC9C,KAAK,EAAE,EAAE;aAAE,KAAK;;aAChB,KAAK,EAAE,EAAE;aAAE,KAAK;;aAChB,KAAK,EAAE,EAAE;aAAE,KAAK;;aAChB,KAAK,EAAE,GAAG;aAAE,KAAK;;aACjB,KAAK,EAAE,GAAG;aAAE,KAAK;EACV,CAAA;AAEV,eAAO,MAAM,8BAA8B;aACxC,KAAK,EAAE,MAAM;aAAE,KAAK;;aACpB,KAAK,EAAE,QAAQ;aAAE,KAAK;;aACtB,KAAK,EAAE,UAAU;aAAE,KAAK;;aACxB,KAAK,EAAE,SAAS;aAAE,KAAK;;aACvB,KAAK,EAAE,SAAS;aAAE,KAAK;;aACvB,KAAK,EAAE,OAAO;aAAE,KAAK;;aACrB,KAAK,EAAE,QAAQ;aAAE,KAAK;;aACtB,KAAK,EAAE,eAAe;aAAE,KAAK;EACtB,CAAA;AAEV,eAAO,MAAM,kBAAkB;aAC5B,KAAK,EAAE,MAAM;aAAE,KAAK;;aACpB,KAAK,EAAE,QAAQ;aAAE,KAAK;EACf,CAAA"}

package/build/blocks/usp/usp-group/constants.js

@@ -18,25 +18,35 @@ export const DEFAULT_SHADOWS = [
     { value: 'sm', label: __('Malý', 'brilo-blocks') },
     { value: 'md', label: __('Střední', 'brilo-blocks') },
 ];
-export const DEFAULT_ICON_SIZES = [
-    { value: 'xs', label: __('Extra Malá', 'brilo-blocks'), description: __('48px', 'brilo-blocks') },
-    { value: 'sm', label: __('Malá', 'brilo-blocks'), description: __('64px', 'brilo-blocks') },
-    { value: 'default', label: __('Výchozí', 'brilo-blocks'), description: __('88px', 'brilo-blocks') },
-    { value: 'lg', label: __('Velká', 'brilo-blocks'), description: __('104px', 'brilo-blocks') },
-    { value: 'xl', label: __('Extra Velká', 'brilo-blocks'), description: __('128px', 'brilo-blocks') },
+export const DEFAULT_ICON_SIZE = 88;
+export const ICON_SIZE_MIN = 4;
+export const ICON_SIZE_MAX = 128;
+export const DEFAULT_ICON_SIZE_PRESETS = [
+    { value: 8, label: __('XS', 'brilo-blocks') },
+    { value: 16, label: __('SM', 'brilo-blocks') },
+    { value: 24, label: __('MD', 'brilo-blocks') },
+    { value: 32, label: __('LG', 'brilo-blocks') },
+    { value: 48, label: __('XL', 'brilo-blocks') },
 ];
-export const DEFAULT_ICON_COLORS = [
-    { value: 'none', label: __('Žádná', 'brilo-blocks') },
-    { value: 'primary', label: __('Primární', 'brilo-blocks') },
-    { value: 'secondary', label: __('Sekundární', 'brilo-blocks') },
-    { value: 'neutral', label: __('Neutrální', 'brilo-blocks') },
-    { value: 'conversion', label: __('Konverzní', 'brilo-blocks') },
+export const DEFAULT_ICON_BACKGROUND_SIZE = 88;
+export const ICON_BACKGROUND_SIZE_MIN = 16;
+export const ICON_BACKGROUND_SIZE_MAX = 240;
+export const DEFAULT_ICON_BACKGROUND_SIZE_PRESETS = [
+    { value: 48, label: __('XS', 'brilo-blocks') },
+    { value: 64, label: __('SM', 'brilo-blocks') },
+    { value: 88, label: __('Výchozí', 'brilo-blocks') },
+    { value: 104, label: __('LG', 'brilo-blocks') },
+    { value: 128, label: __('XL', 'brilo-blocks') },
 ];
-export const DEFAULT_ICON_BACKGROUNDS = [
-    { value: 'none', label: __('Žádné', 'brilo-blocks') },
-    { value: 'primary', label: __('Primární', 'brilo-blocks') },
-    { value: 'secondary', label: __('Sekundární', 'brilo-blocks') },
-    { value: 'neutral', label: __('Neutrální', 'brilo-blocks') },
+export const DEFAULT_ICON_BACKGROUND_SHAPES = [
+    { value: 'none', label: __('Žádný', 'brilo-blocks') },
+    { value: 'circle', label: __('Kruh', 'brilo-blocks') },
+    { value: 'triangle', label: __('Trojúhelník', 'brilo-blocks') },
+    { value: 'rhombus', label: __('Kosočtverec', 'brilo-blocks') },
+    { value: 'octagon', label: __('Osmiúhelník', 'brilo-blocks') },
+    { value: 'bevel', label: __('Zkosený', 'brilo-blocks') },
+    { value: 'rabbet', label: __('Drážkovaný', 'brilo-blocks') },
+    { value: 'parallelogram', label: __('Rovnoběžník', 'brilo-blocks') },
 ];
 export const DEFAULT_ALIGNMENTS = [
     { value: 'left', label: __('Vlevo', 'brilo-blocks') },

package/build/blocks/usp/usp-group/edit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../../../../src/blocks/usp/usp-group/edit.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAIV,kBAAkB,EAClB,eAAe,EAOhB,MAAM,SAAS,CAAA;AAEhB,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,eAAe,oCActD;IACD,UAAU,EAAE,kBAAkB,CAAA;IAC9B,aAAa,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAA;CACxD,iCAkKF"}
+{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../../../../src/blocks/usp/usp-group/edit.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAIV,kBAAkB,EAClB,eAAe,EAMhB,MAAM,SAAS,CAAA;AA+BhB,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,eAAe,oCActD;IACD,UAAU,EAAE,kBAAkB,CAAA;IAC9B,aAAa,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAA;CACxD,iCA4MF"}

package/build/blocks/usp/usp-group/edit.js

@@ -1,24 +1,27 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InspectorControls } from '@wordpress/block-editor';
-import { PanelBody, SelectControl, ToggleControl, BaseControl, ColorPalette, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, } from '@wordpress/components';
+import { PanelBody, Button, RangeControl, BaseControl, ColorPalette, SelectControl, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useGroupBlock } from '../../../hooks/useGroupBlock';
 import { useTenantColorPalette } from '../../../hooks/useTenantColorPalette';
-import { DEFAULT_ALIGNMENTS, DEFAULT_COLUMNS, DEFAULT_CONTENT_SIZES, DEFAULT_DIRECTIONS, DEFAULT_HEADING_STYLES, DEFAULT_ICON_BACKGROUNDS, DEFAULT_ICON_COLORS, DEFAULT_ICON_SIZES, DEFAULT_SHADOWS, HEADING_LEVELS, } from './constants';
+import { DEFAULT_ALIGNMENTS, DEFAULT_COLUMNS, DEFAULT_CONTENT_SIZES, DEFAULT_DIRECTIONS, DEFAULT_HEADING_STYLES, DEFAULT_ICON_BACKGROUND_SHAPES, DEFAULT_ICON_BACKGROUND_SIZE_PRESETS, DEFAULT_ICON_SIZE_PRESETS, DEFAULT_SHADOWS, HEADING_LEVELS, ICON_BACKGROUND_SIZE_MAX, ICON_BACKGROUND_SIZE_MIN, ICON_SIZE_MAX, ICON_SIZE_MIN, } from './constants';
+function PresetSizeControl({ label, value, presets, min, max, onChange, }) {
+    return (_jsxs(BaseControl, { label: label, id: `usp-group-size-${label}`, children: [_jsx("div", { style: { display: 'flex', gap: 4, marginBottom: 8, flexWrap: 'wrap' }, children: presets.map((p) => (_jsx(Button, { variant: value === p.value ? 'primary' : 'secondary', size: "small", onClick: () => onChange(p.value), children: p.label }, p.label))) }), _jsx(RangeControl, { value: value, onChange: (v) => onChange(v !== null && v !== void 0 ? v : min), min: min, max: max, step: 1, withInputField: true })] }));
+}
 export function createUspGroupEdit(options) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const COLUMNS = (_a = options.columns) !== null && _a !== void 0 ? _a : DEFAULT_COLUMNS;
     const DIRECTIONS = (_b = options.directions) !== null && _b !== void 0 ? _b : DEFAULT_DIRECTIONS;
     const HEADING_STYLES = (_c = options.headingStyles) !== null && _c !== void 0 ? _c : DEFAULT_HEADING_STYLES;
     const SHADOWS = (_d = options.shadows) !== null && _d !== void 0 ? _d : DEFAULT_SHADOWS;
-    const ICON_SIZES = (_e = options.iconSizes) !== null && _e !== void 0 ? _e : DEFAULT_ICON_SIZES;
-    const ICON_COLORS = (_f = options.iconColors) !== null && _f !== void 0 ? _f : DEFAULT_ICON_COLORS;
-    const ICON_BACKGROUND = (_g = options.iconBackgrounds) !== null && _g !== void 0 ? _g : DEFAULT_ICON_BACKGROUNDS;
+    const ICON_SIZE_PRESETS = (_e = options.iconSizePresets) !== null && _e !== void 0 ? _e : DEFAULT_ICON_SIZE_PRESETS;
+    const ICON_BACKGROUND_SIZE_PRESETS = (_f = options.iconBackgroundSizePresets) !== null && _f !== void 0 ? _f : DEFAULT_ICON_BACKGROUND_SIZE_PRESETS;
+    const ICON_BACKGROUND_SHAPES = (_g = options.iconBackgroundShapes) !== null && _g !== void 0 ? _g : DEFAULT_ICON_BACKGROUND_SHAPES;
     const ALIGNMENTS = (_h = options.alignments) !== null && _h !== void 0 ? _h : DEFAULT_ALIGNMENTS;
     const CONTENT_SIZES = (_j = options.contentSizes) !== null && _j !== void 0 ? _j : DEFAULT_CONTENT_SIZES;
     return function Edit({ attributes, setAttributes, }) {
-        var _a, _b, _c;
+        var _a, _b;
         const { columns, headingSettings, content, style } = attributes;
         const { paletteColors } = useTenantColorPalette();
         const { blockProps, innerBlocksProps } = useGroupBlock({
@@ -30,6 +33,6 @@ export function createUspGroupEdit(options) {
             template: options.template,
             layout: { type: 'default' },
         });
-        return (_jsxs(_Fragment, { children: [_jsxs(InspectorControls, { children: [_jsxs(PanelBody, { title: __('Rozložení', 'brilo-blocks'), children: [_jsx(ToggleGroupControl, { isBlock: true, label: __('Počet sloupců', 'brilo-blocks'), value: String(columns), onChange: (v) => setAttributes({ columns: Number(v) }), children: COLUMNS.map((c) => (_jsx(ToggleGroupControlOption, { value: String(c), label: String(c) }, c))) }), _jsx(ToggleGroupControl, { isBlock: true, label: __('Směr', 'brilo-blocks'), value: style.direction, onChange: (v) => setAttributes({ style: { ...style, direction: v } }), children: DIRECTIONS.map((d) => (_jsx(ToggleGroupControlOption, { value: d.value, label: d.label }, d.value))) }), style.direction === 'vertical' && (_jsx(ToggleGroupControl, { isBlock: true, label: __('Zarovnání', 'brilo-blocks'), value: style.align, onChange: (v) => setAttributes({ style: { ...style, align: v } }), children: ALIGNMENTS.map((a) => (_jsx(ToggleGroupControlOption, { value: a.value, label: a.label }, a.value))) })), _jsx(ToggleGroupControl, { isBlock: true, label: __('Úroveň nadpisu položek', 'brilo-blocks'), value: String(headingSettings.level), onChange: (v) => setAttributes({ headingSettings: { ...headingSettings, level: Number(v) } }), children: HEADING_LEVELS.map((l) => (_jsx(ToggleGroupControlOption, { value: String(l), label: `H${l}` }, l))) }), _jsx(ToggleGroupControl, { isBlock: true, label: __('Styl nadpisu položek', 'brilo-blocks'), value: headingSettings.style, onChange: (v) => setAttributes({ headingSettings: { ...headingSettings, style: v } }), children: HEADING_STYLES.map((s) => (_jsx(ToggleGroupControlOption, { value: s.value, label: s.label, "aria-label": s.description, showTooltip: true }, s.value))) }), _jsx(ToggleGroupControl, { isBlock: true, label: __('Velikost textu', 'brilo-blocks'), value: content.size, onChange: (v) => setAttributes({ content: { size: v } }), children: CONTENT_SIZES.map((s) => (_jsx(ToggleGroupControlOption, { value: s.value, label: s.label }, s.value))) })] }), _jsxs(PanelBody, { title: __('Styl', 'brilo-blocks'), children: [_jsx(ToggleGroupControl, { isBlock: true, label: __('Stín', 'brilo-blocks'), value: style.shadow, onChange: (v) => setAttributes({ style: { ...style, shadow: v } }), children: SHADOWS.map((s) => (_jsx(ToggleGroupControlOption, { value: s.value, label: s.label }, s.value))) }), _jsx(BaseControl, { label: __('Barva okraje', 'brilo-blocks'), help: __('Bez vybrané barvy se okraj nevykreslí.', 'brilo-blocks'), id: "usp-group-border-color", children: _jsx(ColorPalette, { colors: paletteColors, value: style.borderColor || undefined, onChange: (value) => setAttributes({ style: { ...style, borderColor: value !== null && value !== void 0 ? value : '' } }) }) }), _jsx(BaseControl, { label: __('Barva pozadí', 'brilo-blocks'), id: "usp-group-background-color", children: _jsx(ColorPalette, { colors: paletteColors, value: style.backgroundColor || undefined, onChange: (value) => setAttributes({ style: { ...style, backgroundColor: value !== null && value !== void 0 ? value : '' } }) }) }), _jsx(BaseControl, { label: __('Barva textu', 'brilo-blocks'), id: "usp-group-text-color", children: _jsx(ColorPalette, { colors: paletteColors, value: style.textColor || undefined, onChange: (value) => setAttributes({ style: { ...style, textColor: value !== null && value !== void 0 ? value : '' } }) }) })] }), _jsxs(PanelBody, { title: __('Ikona', 'brilo-blocks'), initialOpen: false, children: [_jsx(ToggleGroupControl, { isBlock: true, label: __('Velikost', 'brilo-blocks'), value: style.icon.size, onChange: (v) => setAttributes({ style: { ...style, icon: { ...style.icon, size: v } } }), children: ICON_SIZES.map((s) => (_jsx(ToggleGroupControlOption, { value: s.value, label: s.label, "aria-label": s.description, showTooltip: true }, s.value))) }), _jsx(SelectControl, { label: __('Barva', 'brilo-blocks'), value: style.icon.color, options: [...ICON_COLORS], onChange: (v) => setAttributes({ style: { ...style, icon: { ...style.icon, color: v } } }) }), _jsx(SelectControl, { label: __('Pozadí', 'brilo-blocks'), value: style.icon.background, options: [...ICON_BACKGROUND], onChange: (v) => setAttributes({ style: { ...style, icon: { ...style.icon, background: v } } }) }), style.icon.background !== 'none' && (_jsx(ToggleControl, { label: __('Ohraničení ikony', 'brilo-blocks'), checked: (_c = style.icon.bordered) !== null && _c !== void 0 ? _c : false, onChange: (v) => setAttributes({ style: { ...style, icon: { ...style.icon, bordered: v } } }) }))] })] }), _jsx("div", { ...blockProps, children: _jsx("div", { ...innerBlocksProps }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsxs(InspectorControls, { children: [_jsxs(PanelBody, { title: __('Rozložení', 'brilo-blocks'), children: [_jsx(ToggleGroupControl, { isBlock: true, label: __('Počet sloupců', 'brilo-blocks'), value: String(columns), onChange: (v) => setAttributes({ columns: Number(v) }), children: COLUMNS.map((c) => (_jsx(ToggleGroupControlOption, { value: String(c), label: String(c) }, c))) }), _jsx(ToggleGroupControl, { isBlock: true, label: __('Směr', 'brilo-blocks'), value: style.direction, onChange: (v) => setAttributes({ style: { ...style, direction: v } }), children: DIRECTIONS.map((d) => (_jsx(ToggleGroupControlOption, { value: d.value, label: d.label }, d.value))) }), style.direction === 'vertical' && (_jsx(ToggleGroupControl, { isBlock: true, label: __('Zarovnání', 'brilo-blocks'), value: style.align, onChange: (v) => setAttributes({ style: { ...style, align: v } }), children: ALIGNMENTS.map((a) => (_jsx(ToggleGroupControlOption, { value: a.value, label: a.label }, a.value))) })), style.direction === 'vertical' && (_jsx(ToggleGroupControl, { isBlock: true, label: __('Zarovnání textu', 'brilo-blocks'), value: style.textAlign, onChange: (v) => { var _a; return setAttributes({ style: { ...style, textAlign: (_a = v) !== null && _a !== void 0 ? _a : '' } }); }, children: ALIGNMENTS.map((a) => (_jsx(ToggleGroupControlOption, { value: a.value, label: a.label }, a.value))) })), _jsx(ToggleGroupControl, { isBlock: true, label: __('Úroveň nadpisu položek', 'brilo-blocks'), value: String(headingSettings.level), onChange: (v) => setAttributes({ headingSettings: { ...headingSettings, level: Number(v) } }), children: HEADING_LEVELS.map((l) => (_jsx(ToggleGroupControlOption, { value: String(l), label: `H${l}` }, l))) }), _jsx(ToggleGroupControl, { isBlock: true, label: __('Styl nadpisu položek', 'brilo-blocks'), value: headingSettings.style, onChange: (v) => setAttributes({ headingSettings: { ...headingSettings, style: v } }), children: HEADING_STYLES.map((s) => (_jsx(ToggleGroupControlOption, { value: s.value, label: s.label, "aria-label": s.description, showTooltip: true }, s.value))) }), _jsx(ToggleGroupControl, { isBlock: true, label: __('Velikost textu', 'brilo-blocks'), value: content.size, onChange: (v) => setAttributes({ content: { size: v } }), children: CONTENT_SIZES.map((s) => (_jsx(ToggleGroupControlOption, { value: s.value, label: s.label }, s.value))) })] }), _jsxs(PanelBody, { title: __('Styl', 'brilo-blocks'), children: [_jsx(ToggleGroupControl, { isBlock: true, label: __('Stín', 'brilo-blocks'), value: style.shadow, onChange: (v) => setAttributes({ style: { ...style, shadow: v } }), children: SHADOWS.map((s) => (_jsx(ToggleGroupControlOption, { value: s.value, label: s.label }, s.value))) }), _jsx(BaseControl, { label: __('Barva okraje', 'brilo-blocks'), help: __('Bez vybrané barvy se okraj nevykreslí.', 'brilo-blocks'), id: "usp-group-border-color", children: _jsx(ColorPalette, { colors: paletteColors, value: style.borderColor || undefined, onChange: (value) => setAttributes({ style: { ...style, borderColor: value !== null && value !== void 0 ? value : '' } }) }) }), _jsx(BaseControl, { label: __('Barva pozadí', 'brilo-blocks'), id: "usp-group-background-color", children: _jsx(ColorPalette, { colors: paletteColors, value: style.backgroundColor || undefined, onChange: (value) => setAttributes({ style: { ...style, backgroundColor: value !== null && value !== void 0 ? value : '' } }) }) }), _jsx(BaseControl, { label: __('Barva textu', 'brilo-blocks'), id: "usp-group-text-color", children: _jsx(ColorPalette, { colors: paletteColors, value: style.textColor || undefined, onChange: (value) => setAttributes({ style: { ...style, textColor: value !== null && value !== void 0 ? value : '' } }) }) })] }), _jsxs(PanelBody, { title: __('Ikona', 'brilo-blocks'), initialOpen: false, children: [_jsx(PresetSizeControl, { label: __('Velikost', 'brilo-blocks'), value: style.icon.size, presets: ICON_SIZE_PRESETS, min: ICON_SIZE_MIN, max: ICON_SIZE_MAX, onChange: (v) => setAttributes({ style: { ...style, icon: { ...style.icon, size: v } } }) }), _jsx(BaseControl, { label: __('Barva', 'brilo-blocks'), id: "usp-group-icon-color", children: _jsx(ColorPalette, { colors: paletteColors, value: style.icon.color || undefined, onChange: (value) => setAttributes({ style: { ...style, icon: { ...style.icon, color: value !== null && value !== void 0 ? value : '' } } }) }) }), _jsx(BaseControl, { label: __('Pozadí', 'brilo-blocks'), id: "usp-group-icon-background-color", children: _jsx(ColorPalette, { colors: paletteColors, value: style.icon.background || undefined, onChange: (value) => setAttributes({ style: { ...style, icon: { ...style.icon, background: value !== null && value !== void 0 ? value : '' } } }) }) }), _jsx(PresetSizeControl, { label: __('Velikost pozadí', 'brilo-blocks'), value: style.icon.backgroundSize, presets: ICON_BACKGROUND_SIZE_PRESETS, min: ICON_BACKGROUND_SIZE_MIN, max: ICON_BACKGROUND_SIZE_MAX, onChange: (v) => setAttributes({ style: { ...style, icon: { ...style.icon, backgroundSize: v } } }) }), style.icon.background && (_jsx(SelectControl, { label: __('Tvar pozadí', 'brilo-blocks'), value: style.icon.backgroundShape, options: [...ICON_BACKGROUND_SHAPES], onChange: (v) => setAttributes({ style: { ...style, icon: { ...style.icon, backgroundShape: v } } }) })), _jsx(BaseControl, { label: __('Barva ohraničení', 'brilo-blocks'), help: __('Bez vybrané barvy se okraj nevykreslí.', 'brilo-blocks'), id: "usp-group-icon-border-color", children: _jsx(ColorPalette, { colors: paletteColors, value: style.icon.borderColor || undefined, onChange: (value) => setAttributes({ style: { ...style, icon: { ...style.icon, borderColor: value !== null && value !== void 0 ? value : '' } } }) }) }), style.icon.borderColor && (_jsx(RangeControl, { label: __('Šířka ohraničení (px)', 'brilo-blocks'), value: style.icon.borderWidth, onChange: (v) => setAttributes({ style: { ...style, icon: { ...style.icon, borderWidth: v !== null && v !== void 0 ? v : 0 } } }), min: 0, max: 10, step: 1 }))] })] }), _jsx("div", { ...blockProps, children: _jsx("div", { ...innerBlocksProps }) })] }));
     };
 }

package/build/blocks/usp/usp-group/factory.d.ts

@@ -1,7 +1,7 @@
 import type { BlockConfiguration } from '@wordpress/blocks';
 import type { NumberArray, OptionArray } from '../../../types';
-import { DEFAULT_ALIGNMENTS, DEFAULT_COLUMNS, DEFAULT_CONTENT_SIZES, DEFAULT_DIRECTIONS, DEFAULT_HEADING_STYLES, DEFAULT_ICON_BACKGROUNDS, DEFAULT_ICON_COLORS, DEFAULT_ICON_SIZES, DEFAULT_SHADOWS } from './constants';
+import { DEFAULT_ALIGNMENTS, DEFAULT_COLUMNS, DEFAULT_CONTENT_SIZES, DEFAULT_DIRECTIONS, DEFAULT_HEADING_STYLES, DEFAULT_ICON_BACKGROUND_SHAPES, DEFAULT_SHADOWS } from './constants';
 import type { UspGroupAttributes, UspGroupOptions } from './types';
 export type { UspGroupAttributes, UspGroupOptions };
-export declare function createUspGroupBlock<TColumns extends NumberArray = typeof DEFAULT_COLUMNS, TDirections extends OptionArray = typeof DEFAULT_DIRECTIONS, THeadingStyles extends OptionArray = typeof DEFAULT_HEADING_STYLES, TShadows extends OptionArray = typeof DEFAULT_SHADOWS, TIconSizes extends OptionArray = typeof DEFAULT_ICON_SIZES, TIconColors extends OptionArray = typeof DEFAULT_ICON_COLORS, TIconBackgrounds extends OptionArray = typeof DEFAULT_ICON_BACKGROUNDS, TAlignments extends OptionArray = typeof DEFAULT_ALIGNMENTS, TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES>(options: UspGroupOptions<TColumns, TDirections, THeadingStyles, TShadows, TIconSizes, TIconColors, TIconBackgrounds, TAlignments, TContentSizes>): BlockConfiguration<UspGroupAttributes<TColumns[number], TDirections[number]['value'], THeadingStyles[number]['value'], TShadows[number]['value'], TIconSizes[number]['value'], TIconColors[number]['value'], TIconBackgrounds[number]['value'], TAlignments[number]['value'], TContentSizes[number]['value']>>;
+export declare function createUspGroupBlock<TColumns extends NumberArray = typeof DEFAULT_COLUMNS, TDirections extends OptionArray = typeof DEFAULT_DIRECTIONS, THeadingStyles extends OptionArray = typeof DEFAULT_HEADING_STYLES, TShadows extends OptionArray = typeof DEFAULT_SHADOWS, TIconBackgroundShapes extends OptionArray = typeof DEFAULT_ICON_BACKGROUND_SHAPES, TAlignments extends OptionArray = typeof DEFAULT_ALIGNMENTS, TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES>(options: UspGroupOptions<TColumns, TDirections, THeadingStyles, TShadows, TIconBackgroundShapes, TAlignments, TContentSizes>): BlockConfiguration<UspGroupAttributes<TColumns[number], TDirections[number]['value'], THeadingStyles[number]['value'], TShadows[number]['value'], TIconBackgroundShapes[number]['value'], TAlignments[number]['value'], TContentSizes[number]['value']>>;
 //# sourceMappingURL=factory.d.ts.map

package/build/blocks/usp/usp-group/factory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../src/blocks/usp/usp-group/factory.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,mBAAmB,CAAA;AAEzD,OAAO,KAAK,EAAC,WAAW,EAAE,WAAW,EAAC,MAAM,SAAS,CAAA;AACrD,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,qBAAqB,EACrB,kBAAkB,EAClB,sBAAsB,EACtB,wBAAwB,EACxB,mBAAmB,EACnB,kBAAkB,EAClB,eAAe,EAEhB,MAAM,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAC,kBAAkB,EAAE,eAAe,EAAC,MAAM,SAAS,CAAA;AAEhE,YAAY,EAAC,kBAAkB,EAAE,eAAe,EAAC,CAAA;AAEjD,wBAAgB,mBAAmB,CACjC,QAAQ,SAAS,WAAW,GAAG,OAAO,eAAe,EACrD,WAAW,SAAS,WAAW,GAAG,OAAO,kBAAkB,EAC3D,cAAc,SAAS,WAAW,GAAG,OAAO,sBAAsB,EAClE,QAAQ,SAAS,WAAW,GAAG,OAAO,eAAe,EACrD,UAAU,SAAS,WAAW,GAAG,OAAO,kBAAkB,EAC1D,WAAW,SAAS,WAAW,GAAG,OAAO,mBAAmB,EAC5D,gBAAgB,SAAS,WAAW,GAAG,OAAO,wBAAwB,EACtE,WAAW,SAAS,WAAW,GAAG,OAAO,kBAAkB,EAC3D,aAAa,SAAS,WAAW,GAAG,OAAO,qBAAqB,EAEhE,OAAO,EAAE,eAAe,CACtB,QAAQ,EACR,WAAW,EACX,cAAc,EACd,QAAQ,EACR,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,aAAa,CACd,GACA,kBAAkB,CACnB,kBAAkB,CAChB,QAAQ,CAAC,MAAM,CAAC,EAChB,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAC5B,cAAc,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAC/B,QAAQ,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EACzB,UAAU,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAC3B,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAC5B,gBAAgB,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EACjC,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAC5B,aAAa,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAC/B,CACF,CA2DA"}
+{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../src/blocks/usp/usp-group/factory.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,mBAAmB,CAAA;AAEzD,OAAO,KAAK,EAAC,WAAW,EAAE,WAAW,EAAC,MAAM,SAAS,CAAA;AACrD,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,qBAAqB,EACrB,kBAAkB,EAClB,sBAAsB,EACtB,8BAA8B,EAG9B,eAAe,EAEhB,MAAM,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAC,kBAAkB,EAAE,eAAe,EAAC,MAAM,SAAS,CAAA;AAEhE,YAAY,EAAC,kBAAkB,EAAE,eAAe,EAAC,CAAA;AAEjD,wBAAgB,mBAAmB,CACjC,QAAQ,SAAS,WAAW,GAAG,OAAO,eAAe,EACrD,WAAW,SAAS,WAAW,GAAG,OAAO,kBAAkB,EAC3D,cAAc,SAAS,WAAW,GAAG,OAAO,sBAAsB,EAClE,QAAQ,SAAS,WAAW,GAAG,OAAO,eAAe,EACrD,qBAAqB,SAAS,WAAW,GAAG,OAAO,8BAA8B,EACjF,WAAW,SAAS,WAAW,GAAG,OAAO,kBAAkB,EAC3D,aAAa,SAAS,WAAW,GAAG,OAAO,qBAAqB,EAEhE,OAAO,EAAE,eAAe,CAAC,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,qBAAqB,EAAE,WAAW,EAAE,aAAa,CAAC,GAC3H,kBAAkB,CACnB,kBAAkB,CAChB,QAAQ,CAAC,MAAM,CAAC,EAChB,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAC5B,cAAc,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAC/B,QAAQ,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EACzB,qBAAqB,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EACtC,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAC5B,aAAa,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAC/B,CACF,CAiEA"}

package/build/blocks/usp/usp-group/factory.js

@@ -1,40 +1,39 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { InnerBlocks } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { DEFAULT_ALIGNMENTS, DEFAULT_COLUMNS, DEFAULT_CONTENT_SIZES, DEFAULT_DIRECTIONS, DEFAULT_HEADING_STYLES, DEFAULT_ICON_BACKGROUNDS, DEFAULT_ICON_COLORS, DEFAULT_ICON_SIZES, DEFAULT_SHADOWS, HEADING_LEVELS, } from './constants';
+import { DEFAULT_ALIGNMENTS, DEFAULT_COLUMNS, DEFAULT_CONTENT_SIZES, DEFAULT_DIRECTIONS, DEFAULT_HEADING_STYLES, DEFAULT_ICON_BACKGROUND_SHAPES, DEFAULT_ICON_BACKGROUND_SIZE, DEFAULT_ICON_SIZE, DEFAULT_SHADOWS, HEADING_LEVELS, } from './constants';
 import { createUspGroupEdit } from './edit';
 import { icon as defaultIcon } from './icon';
 export function createUspGroupBlock(options) {
-    var _a, _b, _c;
-    var _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-    const columns = (_d = options.columns) !== null && _d !== void 0 ? _d : DEFAULT_COLUMNS;
-    const directions = (_e = options.directions) !== null && _e !== void 0 ? _e : DEFAULT_DIRECTIONS;
-    const headingStyles = (_f = options.headingStyles) !== null && _f !== void 0 ? _f : DEFAULT_HEADING_STYLES;
-    const shadows = (_g = options.shadows) !== null && _g !== void 0 ? _g : DEFAULT_SHADOWS;
-    const iconSizes = (_h = options.iconSizes) !== null && _h !== void 0 ? _h : DEFAULT_ICON_SIZES;
-    const iconColors = (_j = options.iconColors) !== null && _j !== void 0 ? _j : DEFAULT_ICON_COLORS;
-    const iconBackgrounds = (_k = options.iconBackgrounds) !== null && _k !== void 0 ? _k : DEFAULT_ICON_BACKGROUNDS;
-    const alignments = (_l = options.alignments) !== null && _l !== void 0 ? _l : DEFAULT_ALIGNMENTS;
-    const contentSizes = (_m = options.contentSizes) !== null && _m !== void 0 ? _m : DEFAULT_CONTENT_SIZES;
+    var _a, _b;
+    var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    const columns = (_c = options.columns) !== null && _c !== void 0 ? _c : DEFAULT_COLUMNS;
+    const directions = (_d = options.directions) !== null && _d !== void 0 ? _d : DEFAULT_DIRECTIONS;
+    const headingStyles = (_e = options.headingStyles) !== null && _e !== void 0 ? _e : DEFAULT_HEADING_STYLES;
+    const shadows = (_f = options.shadows) !== null && _f !== void 0 ? _f : DEFAULT_SHADOWS;
+    const iconBackgroundShapes = (_g = options.iconBackgroundShapes) !== null && _g !== void 0 ? _g : DEFAULT_ICON_BACKGROUND_SHAPES;
+    const alignments = (_h = options.alignments) !== null && _h !== void 0 ? _h : DEFAULT_ALIGNMENTS;
+    const contentSizes = (_j = options.contentSizes) !== null && _j !== void 0 ? _j : DEFAULT_CONTENT_SIZES;
     return {
         name: options.name,
-        title: (_o = options.title) !== null && _o !== void 0 ? _o : __('USP Konkurenční výhody', 'brilo-blocks'),
+        title: (_k = options.title) !== null && _k !== void 0 ? _k : __('USP Konkurenční výhody', 'brilo-blocks'),
         description: options.description,
-        category: (_p = options.category) !== null && _p !== void 0 ? _p : 'layout',
+        category: (_l = options.category) !== null && _l !== void 0 ? _l : 'layout',
         ...(options.parent && { parent: options.parent }),
-        icon: (_q = options.icon) !== null && _q !== void 0 ? _q : { src: defaultIcon },
+        icon: (_m = options.icon) !== null && _m !== void 0 ? _m : { src: defaultIcon },
         supports: { html: false, customClassName: false },
+        providesContext: { 'brilo/usp-style': 'style' },
         attributes: {
             columns: {
                 type: 'number',
-                default: (_r = columns[1]) !== null && _r !== void 0 ? _r : columns[0],
+                default: (_o = columns[1]) !== null && _o !== void 0 ? _o : columns[0],
                 enum: [...columns],
             },
             headingSettings: {
                 type: 'object',
-                default: { level: HEADING_LEVELS[0], style: (_s = (_a = headingStyles[2]) === null || _a === void 0 ? void 0 : _a.value) !== null && _s !== void 0 ? _s : headingStyles[0].value },
+                default: { level: HEADING_LEVELS[0], style: (_p = (_a = headingStyles[2]) === null || _a === void 0 ? void 0 : _a.value) !== null && _p !== void 0 ? _p : headingStyles[0].value },
             },
-            content: { type: 'object', default: { size: (_t = (_b = contentSizes[1]) === null || _b === void 0 ? void 0 : _b.value) !== null && _t !== void 0 ? _t : contentSizes[0].value } },
+            content: { type: 'object', default: { size: (_q = (_b = contentSizes[1]) === null || _b === void 0 ? void 0 : _b.value) !== null && _q !== void 0 ? _q : contentSizes[0].value } },
             style: {
                 type: 'object',
                 default: {
@@ -42,10 +41,19 @@ export function createUspGroupBlock(options) {
                     card: false,
                     direction: directions[0].value,
                     align: alignments[0].value,
+                    textAlign: '',
                     borderColor: '',
                     backgroundColor: '',
                     textColor: '',
-                    icon: { size: (_u = (_c = iconSizes[2]) === null || _c === void 0 ? void 0 : _c.value) !== null && _u !== void 0 ? _u : iconSizes[0].value, color: iconColors[0].value, background: iconBackgrounds[0].value },
+                    icon: {
+                        size: DEFAULT_ICON_SIZE,
+                        color: '',
+                        background: '',
+                        backgroundSize: DEFAULT_ICON_BACKGROUND_SIZE,
+                        backgroundShape: iconBackgroundShapes[0].value,
+                        borderColor: '',
+                        borderWidth: 1,
+                    },
                 },
             },
         },

package/build/blocks/usp/usp-group/types.d.ts

@@ -1,16 +1,18 @@
 import type { BriloBlockType, NumberArray, OptionArray } from '../../../types';
-import type { DEFAULT_ALIGNMENTS, DEFAULT_COLUMNS, DEFAULT_CONTENT_SIZES, DEFAULT_DIRECTIONS, DEFAULT_HEADING_STYLES, DEFAULT_ICON_BACKGROUNDS, DEFAULT_ICON_COLORS, DEFAULT_ICON_SIZES, DEFAULT_SHADOWS, HEADING_LEVELS } from './constants';
+import type { DEFAULT_ALIGNMENTS, DEFAULT_COLUMNS, DEFAULT_CONTENT_SIZES, DEFAULT_DIRECTIONS, DEFAULT_HEADING_STYLES, DEFAULT_ICON_BACKGROUND_SHAPES, DEFAULT_SHADOWS, HEADING_LEVELS } from './constants';
 export type UspColumns = (typeof DEFAULT_COLUMNS)[number];
 export type UspDirection = (typeof DEFAULT_DIRECTIONS)[number]['value'];
 export type UspHeadingLevel = (typeof HEADING_LEVELS)[number];
 export type UspHeadingStyle = (typeof DEFAULT_HEADING_STYLES)[number]['value'];
 export type UspShadow = (typeof DEFAULT_SHADOWS)[number]['value'];
 export type UspAlignment = (typeof DEFAULT_ALIGNMENTS)[number]['value'];
-export type UspIconSize = (typeof DEFAULT_ICON_SIZES)[number]['value'];
-export type UspIconColor = (typeof DEFAULT_ICON_COLORS)[number]['value'];
-export type UspIconBackground = (typeof DEFAULT_ICON_BACKGROUNDS)[number]['value'];
 export type UspContentSize = (typeof DEFAULT_CONTENT_SIZES)[number]['value'];
-export interface UspGroupAttributes<TColumn extends number = UspColumns, TDirection extends string = UspDirection, THeadingStyle extends string = UspHeadingStyle, TShadow extends string = UspShadow, TIconSize extends string = UspIconSize, TIconColor extends string = UspIconColor, TIconBackground extends string = UspIconBackground, TAlignment extends string = UspAlignment, TContentSize extends string = UspContentSize> extends Record<string, unknown> {
+export type UspIconBackgroundShape = (typeof DEFAULT_ICON_BACKGROUND_SHAPES)[number]['value'];
+export interface UspSizePreset {
+    value: number;
+    label: string;
+}
+export interface UspGroupAttributes<TColumn extends number = UspColumns, TDirection extends string = UspDirection, THeadingStyle extends string = UspHeadingStyle, TShadow extends string = UspShadow, TIconBackgroundShape extends string = UspIconBackgroundShape, TAlignment extends string = UspAlignment, TContentSize extends string = UspContentSize> extends Record<string, unknown> {
     columns: TColumn;
     headingSettings: {
         level: UspHeadingLevel;
@@ -24,26 +26,30 @@ export interface UspGroupAttributes<TColumn extends number = UspColumns, TDirect
         card: boolean;
         direction: TDirection;
         align: TAlignment;
+        textAlign: string;
         borderColor: string;
         backgroundColor: string;
         textColor: string;
         icon: {
-            size: TIconSize;
-            color: TIconColor;
-            background: TIconBackground;
-            bordered?: boolean;
+            size: number;
+            color: string;
+            background: string;
+            backgroundSize: number;
+            backgroundShape: TIconBackgroundShape;
+            borderColor: string;
+            borderWidth: number;
         };
     };
 }
-export interface UspGroupOptions<TColumns extends NumberArray = typeof DEFAULT_COLUMNS, TDirections extends OptionArray = typeof DEFAULT_DIRECTIONS, THeadingStyles extends OptionArray = typeof DEFAULT_HEADING_STYLES, TShadows extends OptionArray = typeof DEFAULT_SHADOWS, TIconSizes extends OptionArray = typeof DEFAULT_ICON_SIZES, TIconColors extends OptionArray = typeof DEFAULT_ICON_COLORS, TIconBackgrounds extends OptionArray = typeof DEFAULT_ICON_BACKGROUNDS, TAlignments extends OptionArray = typeof DEFAULT_ALIGNMENTS, TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES> extends BriloBlockType {
+export interface UspGroupOptions<TColumns extends NumberArray = typeof DEFAULT_COLUMNS, TDirections extends OptionArray = typeof DEFAULT_DIRECTIONS, THeadingStyles extends OptionArray = typeof DEFAULT_HEADING_STYLES, TShadows extends OptionArray = typeof DEFAULT_SHADOWS, TIconBackgroundShapes extends OptionArray = typeof DEFAULT_ICON_BACKGROUND_SHAPES, TAlignments extends OptionArray = typeof DEFAULT_ALIGNMENTS, TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES> extends BriloBlockType {
     allowedBlocks: string[];
     columns?: TColumns;
     directions?: TDirections;
     headingStyles?: THeadingStyles;
     shadows?: TShadows;
-    iconSizes?: TIconSizes;
-    iconColors?: TIconColors;
-    iconBackgrounds?: TIconBackgrounds;
+    iconSizePresets?: readonly UspSizePreset[];
+    iconBackgroundSizePresets?: readonly UspSizePreset[];
+    iconBackgroundShapes?: TIconBackgroundShapes;
     alignments?: TAlignments;
     contentSizes?: TContentSizes;
 }

package/build/blocks/usp/usp-group/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/blocks/usp/usp-group/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/blocks/usp/usp-group/types.ts"],"names":[],"mappings":"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"}

package/build/blocks/usp/usp-item/buildPreviewStyle.d.ts

@@ -0,0 +1,25 @@
+export interface UspSharedStyle {
+    direction?: string;
+    align?: string;
+    textAlign?: string;
+    shadow?: string;
+    borderColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    icon?: {
+        size?: number;
+        color?: string;
+        background?: string;
+        backgroundSize?: number;
+        backgroundShape?: string;
+        borderColor?: string;
+        borderWidth?: number;
+    };
+}
+export interface UspPreviewStyle {
+    rootClassName: string;
+    iconClassName: string;
+    cssVars: Record<string, string>;
+}
+export declare function buildUspPreviewStyle(shared?: UspSharedStyle, resolveHex?: (value: string) => string): UspPreviewStyle;
+//# sourceMappingURL=buildPreviewStyle.d.ts.map

package/build/blocks/usp/usp-item/buildPreviewStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildPreviewStyle.d.ts","sourceRoot":"","sources":["../../../../src/blocks/usp/usp-item/buildPreviewStyle.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE;QACL,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,WAAW,CAAC,EAAE,MAAM,CAAA;KACrB,CAAA;CACF;AAED,MAAM,WAAW,eAAe;IAC9B,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAChC;AAED,wBAAgB,oBAAoB,CAAC,MAAM,CAAC,EAAE,cAAc,EAAE,UAAU,GAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAyB,GAAG,eAAe,CAsCvI"}

package/build/blocks/usp/usp-item/buildPreviewStyle.js

@@ -0,0 +1,30 @@
+import clsx from 'clsx';
+export function buildUspPreviewStyle(shared, resolveHex = (value) => value) {
+    var _a;
+    if (!shared) {
+        return { rootClassName: '', iconClassName: '', cssVars: {} };
+    }
+    const icon = (_a = shared.icon) !== null && _a !== void 0 ? _a : {};
+    const rootClassName = clsx(shared.direction && `--direction-${shared.direction}`, shared.align && `--align-${shared.align}`, shared.textAlign && `--body-align-${shared.textAlign}`, shared.shadow && shared.shadow !== 'none' && `--shadow --shadow-${shared.shadow}`, icon.background && '--icon-background', icon.color && '--icon-color', icon.borderColor && '--icon-bordered', shared.backgroundColor && '--background-color', shared.borderColor && '--border', shared.textColor && '--text-color');
+    const iconClassName = clsx(icon.backgroundShape && icon.backgroundShape !== 'none' && `--background-shape --background-shape-${icon.backgroundShape}`);
+    const cssVars = {};
+    if (shared.borderColor)
+        cssVars['--border-color'] = resolveHex(shared.borderColor);
+    if (shared.backgroundColor)
+        cssVars['--background-color'] = resolveHex(shared.backgroundColor);
+    if (shared.textColor)
+        cssVars['--text-color'] = resolveHex(shared.textColor);
+    if (icon.background)
+        cssVars['--icon-background-color'] = resolveHex(icon.background);
+    if (icon.color)
+        cssVars['--icon-color'] = resolveHex(icon.color);
+    if (icon.size)
+        cssVars['--icon-size'] = `${icon.size}px`;
+    if (icon.backgroundSize)
+        cssVars['--icon-background-size'] = `${icon.backgroundSize}px`;
+    if (icon.borderColor) {
+        cssVars['--icon-outline-color'] = resolveHex(icon.borderColor);
+        cssVars['--icon-outline-width'] = `${icon.borderWidth || 1}px`;
+    }
+    return { rootClassName, iconClassName, cssVars };
+}

package/build/blocks/usp/usp-item/edit.d.ts

@@ -1,6 +1,10 @@
+import { type UspSharedStyle } from './buildPreviewStyle';
 import type { UspItemAttributes, UspItemOptions } from './types';
-export declare function createUspItemEdit(options: UspItemOptions): ({ attributes, setAttributes, }: {
+export declare function createUspItemEdit(options: UspItemOptions): ({ attributes, setAttributes, context, }: {
     attributes: UspItemAttributes;
     setAttributes: (a: Partial<UspItemAttributes>) => void;
+    context?: {
+        'brilo/usp-style'?: UspSharedStyle;
+    };
 }) => import("react").JSX.Element;
 //# sourceMappingURL=edit.d.ts.map

package/build/blocks/usp/usp-item/edit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../../../../src/blocks/usp/usp-item/edit.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAC,iBAAiB,EAAE,cAAc,EAAC,MAAM,SAAS,CAAA;AAE9D,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,cAAc,oCAIpD;IACD,UAAU,EAAE,iBAAiB,CAAA;IAC7B,aAAa,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;CACvD,iCA+CF"}
+{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../../../../src/blocks/usp/usp-item/edit.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAuB,KAAK,cAAc,EAAC,MAAM,qBAAqB,CAAA;AAE7E,OAAO,KAAK,EAAC,iBAAiB,EAAE,cAAc,EAAC,MAAM,SAAS,CAAA;AAE9D,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,cAAc,6CAKpD;IACD,UAAU,EAAE,iBAAiB,CAAA;IAC7B,aAAa,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACtD,OAAO,CAAC,EAAE;QAAC,iBAAiB,CAAC,EAAE,cAAc,CAAA;KAAC,CAAA;CAC/C,iCAwDF"}

package/build/blocks/usp/usp-item/edit.js

@@ -4,11 +4,15 @@ import { PanelBody, ToggleControl, TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { ItemIconControl, ItemIconPreview } from '../../../components/ItemIconControl';
+import { useTenantColorPalette } from '../../../hooks/useTenantColorPalette';
+import { buildUspPreviewStyle } from './buildPreviewStyle';
 import { ICON_TYPES } from './constants';
 export function createUspItemEdit(options) {
-    return function Edit({ attributes, setAttributes, }) {
+    return function Edit({ attributes, setAttributes, context, }) {
         const { title, content, url, icon } = attributes;
-        const blockProps = useBlockProps({ className: 'i-usp' });
-        return (_jsxs(_Fragment, { children: [_jsxs(InspectorControls, { children: [_jsx(PanelBody, { title: __('Ikona', 'brilo-blocks'), children: _jsx(ItemIconControl, { icon: icon, setAttributes: setAttributes, iconTypes: ICON_TYPES, options: options }) }), _jsxs(PanelBody, { title: __('Odkaz', 'brilo-blocks'), initialOpen: false, children: [_jsx(TextControl, { label: __('URL', 'brilo-blocks'), value: url.src, onChange: (v) => setAttributes({ url: { ...url, src: v } }) }), _jsx(ToggleControl, { label: __('Otevřít v nové záložce', 'brilo-blocks'), checked: url.blank, onChange: (v) => setAttributes({ url: { ...url, blank: v } }) })] })] }), _jsx("div", { ...blockProps, children: _jsxs("div", { className: "i-usp__inner wp-block-inner", children: [_jsx(ItemIconPreview, { icon: icon, className: "i-usp__icon", setAttributes: setAttributes, options: options }), _jsxs("div", { className: clsx('i-usp__body', 'grow'), children: [_jsx(RichText, { tagName: "h3", className: "i-usp__title u-text-editable", value: title, onChange: (v) => setAttributes({ title: v }), placeholder: __('Nadpis...', 'brilo-blocks'), allowedFormats: ['core/bold', 'core/italic'] }), _jsx(RichText, { tagName: "p", className: "i-usp__content u-text-editable", value: content, onChange: (v) => setAttributes({ content: v }), placeholder: __('Popis...', 'brilo-blocks') })] })] }) })] }));
+        const { resolveHex } = useTenantColorPalette();
+        const { rootClassName, iconClassName, cssVars } = buildUspPreviewStyle(context === null || context === void 0 ? void 0 : context['brilo/usp-style'], resolveHex);
+        const blockProps = useBlockProps({ className: clsx('i-usp', rootClassName), style: cssVars });
+        return (_jsxs(_Fragment, { children: [_jsxs(InspectorControls, { children: [_jsx(PanelBody, { title: __('Ikona', 'brilo-blocks'), children: _jsx(ItemIconControl, { icon: icon, setAttributes: setAttributes, iconTypes: ICON_TYPES, options: options }) }), _jsxs(PanelBody, { title: __('Odkaz', 'brilo-blocks'), initialOpen: false, children: [_jsx(TextControl, { label: __('URL', 'brilo-blocks'), value: url.src, onChange: (v) => setAttributes({ url: { ...url, src: v } }) }), _jsx(ToggleControl, { label: __('Otevřít v nové záložce', 'brilo-blocks'), checked: url.blank, onChange: (v) => setAttributes({ url: { ...url, blank: v } }) })] })] }), _jsx("div", { ...blockProps, children: _jsxs("div", { className: "i-usp__inner wp-block-inner", children: [_jsx(ItemIconPreview, { icon: icon, className: "i-usp__icon", modifierClassName: iconClassName, style: cssVars, setAttributes: setAttributes, options: options }), _jsxs("div", { className: clsx('i-usp__body', 'grow'), children: [_jsx(RichText, { tagName: "h3", className: "i-usp__title u-text-editable", value: title, onChange: (v) => setAttributes({ title: v }), placeholder: __('Nadpis...', 'brilo-blocks'), allowedFormats: ['core/bold', 'core/italic'] }), _jsx(RichText, { tagName: "p", className: "i-usp__content u-text-editable", value: content, onChange: (v) => setAttributes({ content: v }), placeholder: __('Popis...', 'brilo-blocks') })] })] }) })] }));
     };
 }

package/build/blocks/usp/usp-item/factory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../src/blocks/usp/usp-item/factory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,mBAAmB,CAAA;AAIzD,OAAO,KAAK,EAAC,iBAAiB,EAAE,cAAc,EAAC,MAAM,SAAS,CAAA;AAE9D,YAAY,EAAC,iBAAiB,EAAE,cAAc,EAAC,CAAA;AAE/C,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,cAAc,GAAG,kBAAkB,CAAC,iBAAiB,CAAC,CAqBjG"}
+{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../src/blocks/usp/usp-item/factory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,mBAAmB,CAAA;AAIzD,OAAO,KAAK,EAAC,iBAAiB,EAAE,cAAc,EAAC,MAAM,SAAS,CAAA;AAE9D,YAAY,EAAC,iBAAiB,EAAE,cAAc,EAAC,CAAA;AAE/C,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,cAAc,GAAG,kBAAkB,CAAC,iBAAiB,CAAC,CAsBjG"}

package/build/blocks/usp/usp-item/factory.js

@@ -11,6 +11,7 @@ export function createUspItemBlock(options) {
         ...(options.parent && { parent: options.parent }),
         icon: (_c = options.icon) !== null && _c !== void 0 ? _c : 'star-filled',
         supports: { html: false, customClassName: false },
+        usesContext: ['brilo/usp-style'],
         attributes: {
             title: { type: 'string', default: '' },
             content: { type: 'string', default: '' },

package/build/components/ItemIconControl/ItemIconPreview.d.ts

@@ -1,3 +1,3 @@
 import type { ItemIconPreviewProps } from './types';
-export declare function ItemIconPreview({ icon, className, options, setAttributes }: ItemIconPreviewProps): import("react").JSX.Element;
+export declare function ItemIconPreview({ icon, className, modifierClassName, style, options, setAttributes }: ItemIconPreviewProps): import("react").JSX.Element;
 //# sourceMappingURL=ItemIconPreview.d.ts.map

package/build/components/ItemIconControl/ItemIconPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemIconPreview.d.ts","sourceRoot":"","sources":["../../../src/components/ItemIconControl/ItemIconPreview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,SAAS,CAAA;AAGjD,wBAAgB,eAAe,CAAC,EAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,aAAa,EAAC,EAAE,oBAAoB,+BAsF9F"}
+{"version":3,"file":"ItemIconPreview.d.ts","sourceRoot":"","sources":["../../../src/components/ItemIconControl/ItemIconPreview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,SAAS,CAAA;AAGjD,wBAAgB,eAAe,CAAC,EAAC,IAAI,EAAE,SAAS,EAAE,iBAAiB,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAC,EAAE,oBAAoB,+BAsFxH"}