@brilo/base-blocks 0.1.1 → 0.1.3

package/src/blocks/groups/button-group/edit.tsx

@@ -0,0 +1,52 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {DEFAULT_ALIGNMENTS} from './constants'
+import type {ButtonGroupAlignment, ButtonGroupAttributes, ButtonGroupOptions} from './types'
+
+export function createButtonGroupEdit(options: ButtonGroupOptions) {
+  const alignments = options.alignments ?? DEFAULT_ALIGNMENTS
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: ButtonGroupAttributes
+    setAttributes: (a: Partial<ButtonGroupAttributes>) => void
+  }) {
+    const {alignment} = attributes
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: [options.blockClassName ?? 'g-button-group wp-block-section', `--align-${alignment}`],
+      containerClassName: options.containerClassName ?? 'flex gap-3 g-button-group__inner',
+      allowedBlocks: options.allowedBlocks,
+      template: options.template,
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Skupina tlačítek', 'brilo-blocks')}>
+            <ToggleGroupControl
+              label={__('Zarovnání', 'brilo-blocks')}
+              value={alignment}
+              onChange={(v) => setAttributes({alignment: v as ButtonGroupAlignment})}
+              isBlock
+            >
+              {alignments.map((a) => (
+                <ToggleGroupControlOption key={a.value} value={a.value} label={a.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/groups/button-group/editor.scss

@@ -0,0 +1,23 @@
+@layer base {
+  .g-button-group {
+    padding: 8px;
+    min-height: 44px;
+
+    &.--align-left {
+      --justify: flex-start;
+    }
+
+    &.--align-center {
+      --justify: center;
+    }
+
+    &.--align-right {
+      --justify: flex-end;
+    }
+  }
+}
+
+.g-button-group__inner {
+  flex-wrap: wrap;
+  justify-content: var(--justify, flex-start);
+}

package/src/blocks/groups/button-group/factory.tsx

@@ -0,0 +1,34 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import type {OptionArray} from '~/types'
+import {DEFAULT_ALIGNMENTS} from './constants'
+import {createButtonGroupEdit} from './edit'
+import type {ButtonGroupAttributes, ButtonGroupOptions} from './types'
+
+export type {ButtonGroupAttributes, ButtonGroupOptions}
+
+export function createButtonGroupBlock<TAlignments extends OptionArray = typeof DEFAULT_ALIGNMENTS>(
+  options: ButtonGroupOptions<TAlignments>,
+): BlockConfiguration<ButtonGroupAttributes<TAlignments[number]['value']>> {
+  const alignments = options.alignments ?? DEFAULT_ALIGNMENTS
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Skupina tlačítek', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'button',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      alignment: {
+        type: 'string',
+        default: alignments[1]?.value ?? alignments[0].value,
+        enum: alignments.map((a) => a.value),
+      },
+    },
+    edit: createButtonGroupEdit(options as unknown as ButtonGroupOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<ButtonGroupAttributes<TAlignments[number]['value']>>
+}

package/src/blocks/groups/button-group/index.ts

@@ -0,0 +1,11 @@
+export type {ButtonGroupAttributes, ButtonGroupOptions} from './types'
+export {createButtonGroupBlock} from './factory'
+
+import type {ButtonGroupOptions} from './types'
+
+export const buttonGroupDefaults: ButtonGroupOptions = {
+  name: 'brilo/button-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/basic-button'],
+  template: [['brilo/basic-button', {}]],
+}

package/src/blocks/groups/button-group/types.ts

@@ -0,0 +1,12 @@
+import type {OptionArray, BriloBlockType} from '~/types'
+import type {DEFAULT_ALIGNMENTS} from './constants'
+
+export type ButtonGroupAlignment = (typeof DEFAULT_ALIGNMENTS)[number]['value']
+
+export interface ButtonGroupAttributes<TAlignment extends string = ButtonGroupAlignment> extends Record<string, unknown> {
+  alignment: TAlignment
+}
+
+export interface ButtonGroupOptions<TAlignments extends OptionArray = typeof DEFAULT_ALIGNMENTS> extends BriloBlockType {
+  alignments?: TAlignments
+}

package/src/blocks/groups/text-and-media-group/constants.ts

@@ -0,0 +1,43 @@
+import {__} from '@wordpress/i18n'
+
+export {CONTENT_SIZES as DEFAULT_CONTENT_SIZES, HEADING_LEVELS} from '~/constants'
+
+export const DEFAULT_RATIOS = [
+  {value: '3:2', label: '3:2'},
+  {value: '4:3', label: '4:3'},
+  {value: '16:9', label: '16:9'},
+  {value: '1:1', label: '1:1'},
+  {value: '2:1', label: '2:1'},
+  {value: '3:4', label: '3:4'},
+  {value: 'auto', label: 'Auto'},
+] as const
+
+export const CHIP_POSITIONS = [
+  {value: 'top-left', label: __('Vlevo nahoře', 'brilo-blocks')},
+  {value: 'top-right', label: __('Vpravo nahoře', 'brilo-blocks')},
+  {value: 'bottom-left', label: __('Vlevo dole', 'brilo-blocks')},
+  {value: 'bottom-right', label: __('Vpravo dole', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_CHIP_VARIANTS = [
+  {value: 'primary', label: __('Primární', 'brilo-blocks')},
+  {value: 'secondary', label: __('Sekundární', 'brilo-blocks')},
+  {value: 'neutral', label: __('Neutrální', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_MEDIA_POSITIONS = [
+  {value: 'left', label: __('Vlevo', 'brilo-blocks')},
+  {value: 'right', label: __('Vpravo', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_HEADING_STYLES = [
+  {value: 'h1', label: 'H1 styl'},
+  {value: 'h2', label: 'H2 styl'},
+  {value: 'h3', label: 'H3 styl'},
+  {value: 'h4', label: 'H4 styl'},
+] as const
+
+export const DEFAULT_GRID_STYLES = [
+  {value: '1-1', label: __('Půl na půl', 'brilo-blocks')},
+  {value: '2-1', label: __('2/3 + 1/3', 'brilo-blocks')},
+] as const

package/src/blocks/groups/text-and-media-group/edit.tsx

@@ -0,0 +1,241 @@
+import {BlockControls, InspectorControls, RichText} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  TextControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+  ToolbarButton,
+  ToolbarGroup,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {ImagePickerBody, ImagePickerControl} from '~/components/ImagePicker'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {
+  CHIP_POSITIONS,
+  DEFAULT_CHIP_VARIANTS,
+  DEFAULT_CONTENT_SIZES,
+  DEFAULT_GRID_STYLES,
+  DEFAULT_HEADING_STYLES,
+  DEFAULT_MEDIA_POSITIONS,
+  DEFAULT_RATIOS,
+  HEADING_LEVELS,
+} from './constants'
+import type {
+  ChipPositions,
+  ChipVariants,
+  ContentSizes,
+  GridStyles,
+  HeadingLevels,
+  HeadingStyles,
+  MediaPositions,
+  Ratios,
+  TextAndMediaGroupAttributes,
+  TextAndMediaGroupOptions,
+} from './types'
+
+export function createTextAndMediaGroupEdit(options: TextAndMediaGroupOptions) {
+  const RATIOS = options.ratios ?? DEFAULT_RATIOS
+  const MEDIA_POSITIONS = options.mediaPositions ?? DEFAULT_MEDIA_POSITIONS
+  const GRID_STYLES = options.gridStyles ?? DEFAULT_GRID_STYLES
+  const HEADING_STYLES = options.headingStyles ?? DEFAULT_HEADING_STYLES
+  const CONTENT_SIZES = options.contentSizes ?? DEFAULT_CONTENT_SIZES
+  const CHIP_VARIANTS = options.chipVariants ?? DEFAULT_CHIP_VARIANTS
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: TextAndMediaGroupAttributes
+    setAttributes: (a: Partial<TextAndMediaGroupAttributes>) => void
+  }) {
+    const {header, mediaPosition, img, ratio, gridStyle, content} = attributes
+    const isMediaLeft = mediaPosition === 'left'
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: [
+        options.blockClassName ?? 'g-text-and-media wp-block-section',
+        `--media-${mediaPosition}`,
+        ratio && `--ratio-${ratio}`,
+        `--content-${content.size}`,
+      ],
+      containerClassName: options.containerClassName ?? 'g-text-and-media__inner-blocks',
+      allowedBlocks: options.allowedBlocks,
+      template: options.template,
+    })
+
+    const mediaColumn = (
+      <div className="g-text-and-media__media">
+        <ImagePickerBody
+          value={{id: img.id, alt: img.alt}}
+          onChange={(val) => setAttributes({img: {...img, ...val}})}
+          placeholder={__('Vybrat obrázek', 'brilo-blocks')}
+        />
+        {img.id > 0 && img.chip.title && (
+          <span className={clsx('g-text-and-media__chip', `--${img.chip.position}`, `--${img.chip.variant}`)}>{img.chip.title}</span>
+        )}
+      </div>
+    )
+
+    const textColumn = (
+      <div className="g-text-and-media__text">
+        <RichText
+          tagName="span"
+          className="g-text-and-media__overline u-text-editable"
+          value={header.overline.title}
+          onChange={(value: string) => setAttributes({header: {...header, overline: {title: value}}})}
+          placeholder={__('Overline...', 'brilo-blocks')}
+          allowedFormats={[]}
+        />
+        <RichText
+          tagName={`h${header.heading.level}` as 'h1' | 'h2' | 'h3' | 'h4'}
+          className={clsx('g-text-and-media__heading', `--heading-style-${header.heading.style}`, 'u-text-editable')}
+          value={header.heading.title}
+          onChange={(value: string) => setAttributes({header: {...header, heading: {...header.heading, title: value}}})}
+          placeholder={__('Nadpis...', 'brilo-blocks')}
+          allowedFormats={['core/bold', 'core/italic']}
+        />
+        <div {...innerBlocksProps} />
+      </div>
+    )
+
+    return (
+      <>
+        <BlockControls>
+          <ToolbarGroup>
+            <ToolbarButton
+              icon="align-pull-left"
+              label={__('Média vlevo', 'brilo-blocks')}
+              isActive={isMediaLeft}
+              onClick={() => setAttributes({mediaPosition: 'left'})}
+            />
+            <ToolbarButton
+              icon="align-pull-right"
+              label={__('Média vpravo', 'brilo-blocks')}
+              isActive={!isMediaLeft}
+              onClick={() => setAttributes({mediaPosition: 'right'})}
+            />
+          </ToolbarGroup>
+        </BlockControls>
+        <InspectorControls>
+          <PanelBody title={__('Obrázek', 'brilo-blocks')}>
+            <ImagePickerControl value={{id: img.id, alt: img.alt}} onChange={(val) => setAttributes({img: {...img, ...val}})} />
+            <ToggleGroupControl
+              label={__('Poměr stran', 'brilo-blocks')}
+              value={ratio}
+              onChange={(value) => setAttributes({ratio: value as Ratios})}
+              isBlock
+            >
+              {RATIOS.map((r) => (
+                <ToggleGroupControlOption key={r.value} value={r.value} label={r.label} />
+              ))}
+            </ToggleGroupControl>
+            <TextControl
+              label={__('URL videa', 'brilo-blocks')}
+              value={img.video.src}
+              onChange={(value: string) => setAttributes({img: {...img, video: {src: value}}})}
+            />
+          </PanelBody>
+          <PanelBody title={__('Chip', 'brilo-blocks')} initialOpen={false}>
+            <TextControl
+              label={__('Text chipu', 'brilo-blocks')}
+              value={img.chip.title}
+              onChange={(value: string) => setAttributes({img: {...img, chip: {...img.chip, title: value}}})}
+            />
+            <ToggleGroupControl
+              label={__('Pozice chipu', 'brilo-blocks')}
+              value={img.chip.position}
+              onChange={(value) => setAttributes({img: {...img, chip: {...img.chip, position: value as ChipPositions}}})}
+              isBlock
+            >
+              {CHIP_POSITIONS.map((p) => (
+                <ToggleGroupControlOption key={p.value} value={p.value} label={p.label} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              label={__('Varianta chipu', 'brilo-blocks')}
+              value={img.chip.variant}
+              onChange={(value) => setAttributes({img: {...img, chip: {...img.chip, variant: value as ChipVariants}}})}
+              isBlock
+            >
+              {CHIP_VARIANTS.map((v) => (
+                <ToggleGroupControlOption key={v.value} value={v.value} label={v.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+          <PanelBody title={__('Rozložení', 'brilo-blocks')}>
+            <ToggleGroupControl
+              label={__('Pozice médií', 'brilo-blocks')}
+              value={mediaPosition}
+              onChange={(value) => setAttributes({mediaPosition: value as MediaPositions})}
+              isBlock
+            >
+              {MEDIA_POSITIONS.map((p) => (
+                <ToggleGroupControlOption key={p.value} value={p.value} label={p.label} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              label={__('Styl mřížky', 'brilo-blocks')}
+              value={gridStyle}
+              onChange={(value) => setAttributes({gridStyle: value as GridStyles})}
+              isBlock
+            >
+              {GRID_STYLES.map((s) => (
+                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              label={__('Velikost textu', 'brilo-blocks')}
+              value={content.size}
+              onChange={(value) => setAttributes({content: {size: value as ContentSizes}})}
+              isBlock
+            >
+              {CONTENT_SIZES.map((s) => (
+                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+          <PanelBody title={__('Nadpis', 'brilo-blocks')} initialOpen={false}>
+            <ToggleGroupControl
+              label={__('Úroveň nadpisu', 'brilo-blocks')}
+              value={String(header.heading.level)}
+              onChange={(value) =>
+                setAttributes({header: {...header, heading: {...header.heading, level: Number(value) as HeadingLevels}}})
+              }
+              isBlock
+            >
+              {HEADING_LEVELS.map((l) => (
+                <ToggleGroupControlOption key={l} value={String(l)} label={`H${l}`} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              label={__('Styl nadpisu', 'brilo-blocks')}
+              value={header.heading.style}
+              onChange={(value) => setAttributes({header: {...header, heading: {...header.heading, style: value as HeadingStyles}}})}
+              isBlock
+            >
+              {HEADING_STYLES.map((s) => (
+                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div className={clsx('u-grid-responsive --col-2 g-text-and-media__grid', `--grid-style-${gridStyle}`)}>
+            {isMediaLeft ? (
+              <>
+                {mediaColumn}
+                {textColumn}
+              </>
+            ) : (
+              <>
+                {textColumn}
+                {mediaColumn}
+              </>
+            )}
+          </div>
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/groups/text-and-media-group/editor.scss

@@ -0,0 +1,123 @@
+@layer base {
+  .g-text-and-media {
+    padding: 8px;
+
+    &.--media-right .g-text-and-media__grid.--grid-style-2-1 {
+      grid-template-columns: 2fr 1fr;
+    }
+    &.--media-left .g-text-and-media__grid.--grid-style-2-1 {
+      grid-template-columns: 1fr 2fr;
+    }
+
+    &.--ratio-3\:2 {
+      --ratio: 3/2;
+    }
+    &.--ratio-4\:3 {
+      --ratio: 4/3;
+    }
+    &.--ratio-16\:9 {
+      --ratio: 16/9;
+    }
+    &.--ratio-1\:1 {
+      --ratio: 1/1;
+    }
+    &.--ratio-2\:1 {
+      --ratio: 2/1;
+    }
+    &.--ratio-3\:4 {
+      --ratio: 3/4;
+    }
+  }
+
+  .g-text-and-media__grid {
+    --grid-gap: 24px;
+    --grid-min-col-size: 240px;
+    align-items: center;
+  }
+
+  .g-text-and-media__media {
+    background: #f5f5f5;
+    border-radius: 4px;
+    min-height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+
+    .c-image-picker-body {
+      width: 100%;
+    }
+
+    .c-image-picker-body__preview img {
+      aspect-ratio: var(--ratio);
+      object-fit: cover;
+    }
+
+    .c-image-picker-body__placeholder {
+      min-height: 200px;
+    }
+  }
+
+  .g-text-and-media__text {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .g-text-and-media__overline {
+    display: block;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: #888;
+  }
+
+  .g-text-and-media__heading {
+    margin: 0;
+    font-weight: 700;
+    font-size: var(--heading-size, 24px);
+  }
+
+  .g-text-and-media__inner-blocks {
+    margin-top: 8px;
+    min-height: 40px;
+  }
+
+  .g-text-and-media__chip {
+    position: absolute;
+    padding: 4px 10px;
+    border-radius: 20px;
+    font-size: 11px;
+    font-weight: 600;
+    background: #0073aa;
+    color: #fff;
+    white-space: nowrap;
+    pointer-events: none;
+
+    &.--top-left {
+      top: 8px;
+      left: 8px;
+    }
+    &.--top-right {
+      top: 8px;
+      right: 8px;
+    }
+    &.--bottom-left {
+      bottom: 8px;
+      left: 8px;
+    }
+    &.--bottom-right {
+      bottom: 40px;
+      right: 8px;
+    }
+
+    &.--secondary {
+      background: #555d6e;
+    }
+    &.--neutral {
+      background: #e0e0e0;
+      color: #333;
+    }
+  }
+}

package/src/blocks/groups/text-and-media-group/factory.tsx

@@ -0,0 +1,100 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import type {OptionArray} from '~/types'
+import {
+  DEFAULT_CHIP_VARIANTS,
+  DEFAULT_CONTENT_SIZES,
+  DEFAULT_GRID_STYLES,
+  DEFAULT_HEADING_STYLES,
+  DEFAULT_MEDIA_POSITIONS,
+  DEFAULT_RATIOS,
+  HEADING_LEVELS,
+} from './constants'
+import {createTextAndMediaGroupEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {TextAndMediaGroupAttributes, TextAndMediaGroupOptions} from './types'
+
+export type {TextAndMediaGroupAttributes, TextAndMediaGroupOptions}
+
+export function createTextAndMediaGroupBlock<
+  TRatios extends OptionArray = typeof DEFAULT_RATIOS,
+  TMediaPositions extends OptionArray = typeof DEFAULT_MEDIA_POSITIONS,
+  TGridStyles extends OptionArray = typeof DEFAULT_GRID_STYLES,
+  THeadingStyles extends OptionArray = typeof DEFAULT_HEADING_STYLES,
+  TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES,
+  TChipVariants extends OptionArray = typeof DEFAULT_CHIP_VARIANTS,
+>(
+  options: TextAndMediaGroupOptions<TRatios, TMediaPositions, TGridStyles, THeadingStyles, TContentSizes, TChipVariants>,
+): BlockConfiguration<
+  TextAndMediaGroupAttributes<
+    TRatios[number]['value'],
+    TMediaPositions[number]['value'],
+    TGridStyles[number]['value'],
+    THeadingStyles[number]['value'],
+    TContentSizes[number]['value'],
+    TChipVariants[number]['value']
+  >
+> {
+  const ratios = options.ratios ?? DEFAULT_RATIOS
+  const mediaPositions = options.mediaPositions ?? DEFAULT_MEDIA_POSITIONS
+  const gridStyles = options.gridStyles ?? DEFAULT_GRID_STYLES
+  const headingStyles = options.headingStyles ?? DEFAULT_HEADING_STYLES
+  const contentSizes = options.contentSizes ?? DEFAULT_CONTENT_SIZES
+  const chipVariants = options.chipVariants ?? DEFAULT_CHIP_VARIANTS
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Text a média', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {
+      header: {
+        type: 'object',
+        default: {
+          heading: {title: '', level: HEADING_LEVELS[1], style: headingStyles[1]?.value ?? headingStyles[0].value},
+          overline: {title: ''},
+        },
+      },
+      mediaPosition: {
+        type: 'string',
+        default: mediaPositions[1]?.value ?? mediaPositions[0].value,
+        enum: mediaPositions.map((p) => p.value),
+      },
+      img: {
+        type: 'object',
+        default: {
+          id: 0,
+          alt: '',
+          video: {src: ''},
+          chip: {title: '', position: 'bottom-right', variant: chipVariants[0].value},
+        },
+      },
+      ratio: {
+        type: 'string',
+        default: ratios[2]?.value ?? ratios[0].value,
+        enum: ratios.map((r) => r.value),
+      },
+      gridStyle: {
+        type: 'string',
+        default: gridStyles[0].value,
+        enum: gridStyles.map((g) => g.value),
+      },
+      content: {type: 'object', default: {size: contentSizes[1]?.value ?? contentSizes[0].value}},
+    },
+    edit: createTextAndMediaGroupEdit(options as unknown as TextAndMediaGroupOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<
+    TextAndMediaGroupAttributes<
+      TRatios[number]['value'],
+      TMediaPositions[number]['value'],
+      TGridStyles[number]['value'],
+      THeadingStyles[number]['value'],
+      TContentSizes[number]['value'],
+      TChipVariants[number]['value']
+    >
+  >
+}

package/src/blocks/groups/text-and-media-group/icon.tsx

@@ -0,0 +1,37 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Text and Media Group</title>
+    <g clipPath="url(#clip0_24_1038)">
+      <rect x="0.5" y="0.5" width="10" height="8" stroke="black" fill="none" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M4.5 4L2 7L7 7L4.5 4Z" fill="black" />
+      <path d="M9 3C9 3.55228 8.55228 4 8 4C7.44772 4 7 3.55228 7 3C7 2.44772 7.44772 2 8 2C8.55228 2 9 2.44772 9 3Z" fill="black" />
+      <path d="M13 1H18V2H13V1Z" fill="black" />
+      <path d="M13 3H20V4H13V3Z" fill="black" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.5 5C13.6716 5 13 5.67157 13 6.5C13 7.32843 13.6716 8 14.5 8H18.5C19.3284 8 20 7.32843 20 6.5C20 5.67157 19.3284 5 18.5 5H14.5ZM18 6H15V7H18V6Z"
+        fill="#357AB5"
+      />
+      <rect x="9.5" y="11.5" width="10" height="8" stroke="black" fill="none" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M13.5 15L11 18L16 18L13.5 15Z" fill="black" />
+      <path
+        d="M18 14C18 14.5523 17.5523 15 17 15C16.4477 15 16 14.5523 16 14C16 13.4477 16.4477 13 17 13C17.5523 13 18 13.4477 18 14Z"
+        fill="black"
+      />
+      <path d="M0 12H5V13H0V12Z" fill="black" />
+      <path d="M0 14H7V15H0V14Z" fill="black" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.5 16C0.671573 16 0 16.6716 0 17.5C0 18.3284 0.671573 19 1.5 19H5.5C6.32843 19 7 18.3284 7 17.5C7 16.6716 6.32843 16 5.5 16H1.5ZM5 17H2V18H5V17Z"
+        fill="#357AB5"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_24_1038">
+        <rect width="20" height="20" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)