@cntrl-site/sdk-nextjs 0.17.1 → 0.18.0

package/src/components/items/RichTextItem.tsx

@@ -1,5 +1,6 @@
 import { FC, useId, useMemo, useState } from 'react';
-import { ArticleItemType, CntrlColor, getLayoutStyles, TRichTextItem } from '@cntrl-site/sdk';
+import { CntrlColor } from '@cntrl-site/color';
+import { ArticleItemType, getLayoutStyles, RichTextItem as TRichTextItem } from '@cntrl-site/sdk';
 import JSXStyle from 'styled-jsx/style';
 import { ItemProps } from '../Item';
 import { useRichTextItem } from './useRichTextItem';

package/src/components/items/VideoItem.tsx

@@ -1,6 +1,7 @@
 import { FC, useId, useMemo, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
-import { ArticleItemType, CntrlColor, getLayoutStyles, TVideoItem } from '@cntrl-site/sdk';
+import { CntrlColor } from '@cntrl-site/color';
+import { ArticleItemType, getLayoutStyles, VideoItem as TVideoItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useFileItem } from './useFileItem';

package/src/components/items/VimeoEmbed.tsx

@@ -1,12 +1,11 @@
 import { FC, useId, useMemo, useState } from 'react';
 import Player from '@vimeo/player';
 import JSXStyle from 'styled-jsx/style';
-import { TVimeoEmbedItem } from '@cntrl-site/core';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useEmbedVideoItem } from './useEmbedVideoItem';
 import { useItemAngle } from '../useItemAngle';
-import { ArticleItemType, getLayoutStyles } from '@cntrl-site/sdk';
+import { ArticleItemType, getLayoutStyles, VimeoEmbedItem as TVimeoEmbedItem } from '@cntrl-site/sdk';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import { useRegisterResize } from "../../common/useRegisterResize";

package/src/components/items/YoutubeEmbed.tsx

@@ -1,12 +1,11 @@
 import { FC, useEffect, useId, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
-import { TYoutubeEmbedItem } from '@cntrl-site/core';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { getYoutubeId } from '../../utils/getValidYoutubeUrl';
 import { useEmbedVideoItem } from './useEmbedVideoItem';
 import { useItemAngle } from '../useItemAngle';
-import { ArticleItemType, getLayoutStyles } from '@cntrl-site/sdk';
+import { ArticleItemType, getLayoutStyles, YoutubeEmbedItem as TYoutubeEmbedItem } from '@cntrl-site/sdk';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { useYouTubeIframeApi } from '../../utils/Youtube/useYouTubeIframeApi';

package/src/components/items/useEmbedVideoItem.ts

@@ -1,8 +1,8 @@
-import { TVimeoEmbedItem, TYoutubeEmbedItem } from '@cntrl-site/core';
+import { VimeoEmbedItem, YoutubeEmbedItem } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
 import { useLayoutContext } from '../useLayoutContext';
 
-export const useEmbedVideoItem = (item: TVimeoEmbedItem | TYoutubeEmbedItem, sectionId: string) => {
+export const useEmbedVideoItem = (item: VimeoEmbedItem | YoutubeEmbedItem, sectionId: string) => {
   const layoutId = useLayoutContext();
   const radius = useKeyframeValue(
     item,

package/src/components/items/useFileItem.ts

@@ -1,10 +1,10 @@
-import { TImageItem, TVideoItem } from '@cntrl-site/sdk';
+import { ImageItem, VideoItem } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
 import { useLayoutContext } from '../useLayoutContext';
 
 const defaultColor = 'rgba(0, 0, 0, 1)';
 
-export const useFileItem = (item: TImageItem | TVideoItem, sectionId: string) => {
+export const useFileItem = (item: ImageItem | VideoItem, sectionId: string) => {
   const layoutId = useLayoutContext();
   const radius = useKeyframeValue(
     item,

package/src/components/items/useRectangleItem.ts

@@ -1,10 +1,10 @@
-import { TRectangleItem } from '@cntrl-site/sdk';
+import { RectangleItem } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
 import { useLayoutContext } from '../useLayoutContext';
 
 const defaultColor = 'rgba(0, 0, 0, 1)';
 
-export const useRectangleItem = (item: TRectangleItem, sectionId: string) => {
+export const useRectangleItem = (item: RectangleItem, sectionId: string) => {
   const layoutId = useLayoutContext();
   const radius = useKeyframeValue(
     item,

package/src/components/items/useRichTextItem.ts

@@ -1,18 +1,12 @@
-import { TRichTextItem, TTypePresetEntry } from '@cntrl-site/sdk';
+import { RichTextItem } from '@cntrl-site/sdk';
 import { RichTextConverter } from '../../utils/RichTextConverter/RichTextConverter';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { ReactNode } from 'react';
-import { useLayoutContext } from '../useLayoutContext';
 
 const richTextConverter = new RichTextConverter();
 
-export const useRichTextItem = (item: TRichTextItem): [ReactNode[], string, TTypePresetEntry | null] => {
-  const layoutId = useLayoutContext();
-  const { layouts, typePresets } = useCntrlContext();
-  const presetId = layoutId ? item.layoutParams[layoutId].preset : null;
-  const preset = presetId
-    ? typePresets?.presets.find(p => p.id === presetId) ?? null
-    : null;
+export const useRichTextItem = (item: RichTextItem): [ReactNode[], string] => {
+  const { layouts } = useCntrlContext();
   const [content, styles] = richTextConverter.toHtml(item, layouts);
-  return [content, styles, preset];
+  return [content, styles];
 };

package/src/components/items/useRichTextItemValues.ts

@@ -1,10 +1,10 @@
 import { useKeyframeValue } from '../../common/useKeyframeValue';
-import { TRichTextItem } from '@cntrl-site/sdk';
+import { RichTextItem } from '@cntrl-site/sdk';
 import { useLayoutContext } from '../useLayoutContext';
 
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 1)';
 
-export const useRichTextItemValues = (item: TRichTextItem, sectionId: string) => {
+export const useRichTextItemValues = (item: RichTextItem, sectionId: string) => {
   const layoutId = useLayoutContext();
   const { angle } = useKeyframeValue(
     item,

package/src/components/items/useStickyItemTop.ts

@@ -1,9 +1,8 @@
-import { AnchorSide, TArticleItemAny } from '@cntrl-site/sdk';
+import { ItemAny } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
-import { getAnchoredItemTop } from '../../utils/getAnchoredItemTop';
 import { useLayoutContext } from '../useLayoutContext';
 
-export function useStickyItemTop(item: TArticleItemAny, sectionHeightMap: Record<string, string>, sectionId: string) {
+export function useStickyItemTop(item: ItemAny, sectionHeightMap: Record<string, string>, sectionId: string) {
   const layoutId = useLayoutContext();
   const { top } = useKeyframeValue<{ top: number; left: number }>(
     item,
@@ -16,7 +15,5 @@ export function useStickyItemTop(item: TArticleItemAny, sectionHeightMap: Record
     [layoutId]
   );
   const sticky = layoutId ? item.sticky[layoutId] : undefined;
-  const sectionHeight = layoutId ? sectionHeightMap[layoutId] : '0vh';
-  const anchorSide = layoutId ? item.area[layoutId].anchorSide : AnchorSide.Top;
-  return sticky ? `${getAnchoredItemTop(top - sticky.from, sectionHeight, anchorSide)}` : 0
+  return sticky ? top - sticky.from : 0
 }

package/src/components/useItemAngle.ts

@@ -1,7 +1,7 @@
-import { TArticleItemAny } from '@cntrl-site/sdk';
+import { ItemAny } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
 
-export const useItemAngle = (item: TArticleItemAny, sectionId: string) => {
+export const useItemAngle = (item: ItemAny, sectionId: string) => {
   const { angle } = useKeyframeValue(
     item,
     (item, layoutId) => ({ angle: layoutId ? item.area[layoutId].angle : 0 }),

package/src/components/useItemDimensions.ts

@@ -1,4 +1,4 @@
-import { TArticleItemAny } from '@cntrl-site/sdk';
+import { ItemAny } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
 import { useLayoutContext } from './useLayoutContext';
 
@@ -11,7 +11,7 @@ const defaultArea = {
   zIndex: 0
 };
 
-export const useItemDimensions = (item: TArticleItemAny, sectionId: string) => {
+export const useItemDimensions = (item: ItemAny, sectionId: string) => {
   const layoutId = useLayoutContext();
   const { width, height } = useKeyframeValue<{ width: number; height: number }>(
     item,

package/src/components/useItemPosition.ts

@@ -1,9 +1,9 @@
-import { AnchorSide, TArticleItemAny } from '@cntrl-site/sdk';
+import { AnchorSide, ItemAny } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
 import { getItemTopStyle } from '../utils/getItemTopStyle';
 import { useLayoutContext } from './useLayoutContext';
 
-export const useItemPosition = (item: TArticleItemAny, sectionId: string) => {
+export const useItemPosition = (item: ItemAny, sectionId: string) => {
   const layoutId = useLayoutContext();
   const { top, left } = useKeyframeValue<{ top: number; left: number }>(
     item,

package/src/components/useItemScale.ts

@@ -1,8 +1,8 @@
-import { ScaleAnchor, TArticleItemAny } from '@cntrl-site/sdk';
+import { ScaleAnchor, ItemAny } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
 import { useLayoutContext } from './useLayoutContext';
 
-export const useItemScale = (item: TArticleItemAny, sectionId: string) => {
+export const useItemScale = (item: ItemAny, sectionId: string) => {
   const layoutId = useLayoutContext();
   const { scale } = useKeyframeValue(
     item,

package/src/components/useSectionColor.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { CntrlColor } from '@cntrl-site/sdk';
+import { CntrlColor } from '@cntrl-site/color';
 import { useLayoutContext } from './useLayoutContext';
 
 type LayoutIdentifier = string;

package/src/components/useSectionHeightMap.ts

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import { CntrlContext } from '../provider/CntrlContext';
-import { TLayout, TSectionHeight } from '@cntrl-site/sdk';
+import { Layout, SectionHeight } from '@cntrl-site/sdk';
 import { getSectionHeight } from './Section';
 
 export const useSectionHeightData = (sectionId: string): Record<string, string> => {
@@ -10,10 +10,10 @@ export const useSectionHeightData = (sectionId: string): Record<string, string>
   return sectionHeightData ? getSectionHeightMap(sectionHeightData) : getDefaultHeightData(layouts);
 };
 
-export function getSectionHeightMap(sectionHeight: Record<string, TSectionHeight>): Record<string, string> {
+export function getSectionHeightMap(sectionHeight: Record<string, SectionHeight>): Record<string, string> {
   return Object.fromEntries(Object.entries(sectionHeight).map(([sectionId, heightData]) => [sectionId, getSectionHeight(heightData)]));
 }
 
-function getDefaultHeightData(layouts: TLayout[]) {
+function getDefaultHeightData(layouts: Layout[]) {
   return layouts.reduce((acc, layout) => ({...acc, [layout.id]: '0'}), {});
 }

package/src/provider/CntrlSdkContext.ts

@@ -1,23 +1,21 @@
 import { CustomItemRegistry } from './CustomItemRegistry';
-import { TArticle, TArticleSection, TLayout, TProject, TSectionHeight, TTypePresets } from '@cntrl-site/sdk';
+import { Article, Section, Layout, Project, SectionHeight } from '@cntrl-site/sdk';
 import { CustomSectionRegistry } from './CustomSectionRegistry';
 
 interface SdkContextInitProps {
-  typePresets: TTypePresets;
-  project: TProject;
-  article: TArticle;
+  project: Project;
+  article: Article;
 }
 
 export class CntrlSdkContext {
-  private _typePresets?: TTypePresets;
-  private _layouts: TLayout[] = [];
-  private sectionHeightMap: Map<string, Record<string, TSectionHeight>> = new Map();
+  private _layouts: Layout[] = [];
+  private sectionHeightMap: Map<string, Record<string, SectionHeight>> = new Map();
   constructor(
     public readonly customItems: CustomItemRegistry,
     public readonly customSections: CustomSectionRegistry
   ) {}
 
-  async resolveSectionData(sections: TArticleSection[]): Promise<Record<string, any>> {
+  async resolveSectionData(sections: Section[]): Promise<Record<string, any>> {
     const resolvers = sections.map(section => {
       const resolver = section.name ? this.customSections.getResolver(section.name) : undefined;
       if (!resolver) return;
@@ -31,21 +29,16 @@ export class CntrlSdkContext {
     );
   }
 
-  init({ project, typePresets, article }: SdkContextInitProps) {
-    this.setTypePresets(typePresets);
+  init({ project, article }: SdkContextInitProps) {
     this.setLayouts(project.layouts);
     this.setSectionsHeight(article.sections);
   }
 
-  setTypePresets(typePresets: TTypePresets) {
-    this._typePresets = typePresets;
-  }
-
-  setLayouts(layouts: TLayout[]) {
+  setLayouts(layouts: Layout[]) {
     this._layouts = layouts;
   }
 
-  setSectionsHeight(sections: TArticleSection[]) {
+  setSectionsHeight(sections: Section[]) {
     for (const section of sections) {
       this.sectionHeightMap.set(section.id, section.height)
     }
@@ -56,13 +49,9 @@ export class CntrlSdkContext {
     return sectionHeightData;
   }
 
-  get layouts(): TLayout[] {
+  get layouts(): Layout[] {
     return this._layouts;
   }
-
-  get typePresets(): TTypePresets | undefined {
-    return this._typePresets;
-  }
 }
 
 function isDefined<T>(value: T): value is Exclude<T, undefined> {

package/src/provider/Keyframes.ts

@@ -1,8 +1,8 @@
-import { TKeyframeAny } from '@cntrl-site/sdk';
+import { KeyframeAny } from '@cntrl-site/sdk';
 
 export class Keyframes {
   constructor(
-    private keyframes: TKeyframeAny[] = []
+    private keyframes: KeyframeAny[] = []
   ) {}
 
   getItemKeyframes(itemId: string) {

package/src/utils/Animator/Animator.ts

@@ -1,9 +1,10 @@
-import { KeyframeType, TKeyframeValueMap, CntrlColor } from '@cntrl-site/sdk';
+import { KeyframeType, KeyframeValueMap } from '@cntrl-site/sdk';
+import { CntrlColor } from '@cntrl-site/color';
 import { binSearchInsertAt, createInsert } from '../binSearchInsertAt';
 
 export interface AnimationData<T extends KeyframeType> {
   position: number;
-  value: TKeyframeValueMap[T];
+  value: KeyframeValueMap[T];
   type: T;
 }
 
@@ -31,9 +32,9 @@ export class Animator {
   }
 
   getDimensions(
-    values: TKeyframeValueMap[KeyframeType.Dimensions],
+    values: KeyframeValueMap[KeyframeType.Dimensions],
     pos: number
-  ): TKeyframeValueMap[KeyframeType.Dimensions] {
+  ): KeyframeValueMap[KeyframeType.Dimensions] {
     const keyframes = this.keyframesMap[KeyframeType.Dimensions];
     if (!keyframes || !keyframes.length) return values;
     if (keyframes.length === 1) {
@@ -51,9 +52,9 @@ export class Animator {
   }
 
   getPositions(
-    values: TKeyframeValueMap[KeyframeType.Position],
+    values: KeyframeValueMap[KeyframeType.Position],
     pos: number
-  ): TKeyframeValueMap[KeyframeType.Position] {
+  ): KeyframeValueMap[KeyframeType.Position] {
     const keyframes = this.keyframesMap[KeyframeType.Position];
     if (!keyframes || !keyframes.length) return values;
     if (keyframes.length === 1) {
@@ -71,9 +72,9 @@ export class Animator {
   }
 
   getColor(
-    values: TKeyframeValueMap[KeyframeType.Color],
+    values: KeyframeValueMap[KeyframeType.Color],
     pos: number
-  ): TKeyframeValueMap[KeyframeType.Color] {
+  ): KeyframeValueMap[KeyframeType.Color] {
     const keyframes = this.keyframesMap[KeyframeType.Color];
     if (!keyframes || !keyframes.length) return values;
     if (keyframes.length === 1) {
@@ -89,9 +90,9 @@ export class Animator {
   }
 
   getBorderColor(
-    values: TKeyframeValueMap[KeyframeType.BorderColor],
+    values: KeyframeValueMap[KeyframeType.BorderColor],
     pos: number
-  ): TKeyframeValueMap[KeyframeType.BorderColor] {
+  ): KeyframeValueMap[KeyframeType.BorderColor] {
     const keyframes = this.keyframesMap[KeyframeType.BorderColor];
     if (!keyframes || !keyframes.length) return values;
     if (keyframes.length === 1) {
@@ -107,9 +108,9 @@ export class Animator {
   }
 
   getRadius(
-    values: TKeyframeValueMap[KeyframeType.BorderRadius],
+    values: KeyframeValueMap[KeyframeType.BorderRadius],
     pos: number
-  ): TKeyframeValueMap[KeyframeType.BorderRadius] {
+  ): KeyframeValueMap[KeyframeType.BorderRadius] {
     const keyframes = this.keyframesMap[KeyframeType.BorderRadius];
     if (!keyframes || !keyframes.length) return values;
     if (keyframes.length === 1) {
@@ -125,9 +126,9 @@ export class Animator {
   }
 
   getBorderWidth(
-    values: TKeyframeValueMap[KeyframeType.BorderWidth],
+    values: KeyframeValueMap[KeyframeType.BorderWidth],
     pos: number
-  ): TKeyframeValueMap[KeyframeType.BorderWidth] {
+  ): KeyframeValueMap[KeyframeType.BorderWidth] {
     const keyframes = this.keyframesMap[KeyframeType.BorderWidth];
     if (!keyframes || !keyframes.length) return values;
     if (keyframes.length === 1) {
@@ -143,9 +144,9 @@ export class Animator {
   }
 
   getRotation(
-    values: TKeyframeValueMap[KeyframeType.Rotation],
+    values: KeyframeValueMap[KeyframeType.Rotation],
     pos: number
-  ): TKeyframeValueMap[KeyframeType.Rotation] {
+  ): KeyframeValueMap[KeyframeType.Rotation] {
     const keyframes = this.keyframesMap[KeyframeType.Rotation];
     if (!keyframes || !keyframes.length) return values;
     if (keyframes.length === 1) {
@@ -161,9 +162,9 @@ export class Animator {
   }
 
   getOpacity(
-    values: TKeyframeValueMap[KeyframeType.Opacity],
+    values: KeyframeValueMap[KeyframeType.Opacity],
     pos: number
-  ): TKeyframeValueMap[KeyframeType.Opacity] {
+  ): KeyframeValueMap[KeyframeType.Opacity] {
     const keyframes = this.keyframesMap[KeyframeType.Opacity];
     if (!keyframes || !keyframes.length) return values;
     if (keyframes.length === 1) {
@@ -179,9 +180,9 @@ export class Animator {
   }
 
   getScale(
-    values: TKeyframeValueMap[KeyframeType.Scale],
+    values: KeyframeValueMap[KeyframeType.Scale],
     pos: number
-  ): TKeyframeValueMap[KeyframeType.Scale] {
+  ): KeyframeValueMap[KeyframeType.Scale] {
     const keyframes = this.keyframesMap[KeyframeType.Scale];
     if (!keyframes || !keyframes.length) return values;
     if (keyframes.length === 1) {
@@ -197,9 +198,9 @@ export class Animator {
   }
 
   getBlur(
-    values: TKeyframeValueMap[KeyframeType.Blur],
+    values: KeyframeValueMap[KeyframeType.Blur],
     pos: number
-  ): TKeyframeValueMap[KeyframeType.Blur] {
+  ): KeyframeValueMap[KeyframeType.Blur] {
     const keyframes = this.keyframesMap[KeyframeType.Blur];
     if (!keyframes || !keyframes.length) return values;
     if (keyframes.length === 1) {
@@ -215,9 +216,9 @@ export class Animator {
   }
 
   getBackdropBlur(
-    values: TKeyframeValueMap[KeyframeType.BackdropBlur],
+    values: KeyframeValueMap[KeyframeType.BackdropBlur],
     pos: number
-  ): TKeyframeValueMap[KeyframeType.BackdropBlur] {
+  ): KeyframeValueMap[KeyframeType.BackdropBlur] {
     const keyframes = this.keyframesMap[KeyframeType.BackdropBlur];
     if (!keyframes || !keyframes.length) return values;
     if (keyframes.length === 1) {
@@ -233,9 +234,9 @@ export class Animator {
   }
 
   getTextColor(
-    values: TKeyframeValueMap[KeyframeType.TextColor],
+    values: KeyframeValueMap[KeyframeType.TextColor],
     pos: number
-  ): TKeyframeValueMap[KeyframeType.TextColor] {
+  ): KeyframeValueMap[KeyframeType.TextColor] {
     const keyframes = this.keyframesMap[KeyframeType.TextColor];
     if (!keyframes || !keyframes.length) return values;
     if (keyframes.length === 1) {
@@ -251,9 +252,9 @@ export class Animator {
   }
 
   getLetterSpacing(
-    values: TKeyframeValueMap[KeyframeType.LetterSpacing],
+    values: KeyframeValueMap[KeyframeType.LetterSpacing],
     pos: number
-  ): TKeyframeValueMap[KeyframeType.LetterSpacing] {
+  ): KeyframeValueMap[KeyframeType.LetterSpacing] {
     const keyframes = this.keyframesMap[KeyframeType.LetterSpacing];
     if (!keyframes || !keyframes.length) return values;
     if (keyframes.length === 1) {
@@ -276,9 +277,9 @@ export class Animator {
   }
 
   getWordSpacing(
-    values: TKeyframeValueMap[KeyframeType.WordSpacing],
+    values: KeyframeValueMap[KeyframeType.WordSpacing],
     pos: number
-  ): TKeyframeValueMap[KeyframeType.WordSpacing] {
+  ): KeyframeValueMap[KeyframeType.WordSpacing] {
     const keyframes = this.keyframesMap[KeyframeType.WordSpacing];
     if (!keyframes || !keyframes.length) return values;
     if (keyframes.length === 1) {

package/src/utils/HoverStyles/HoverStyles.ts

@@ -1,9 +1,10 @@
-import { THoverParams, ArticleItemType, CntrlColor, AnchorSide, TItemHoverState } from '@cntrl-site/sdk';
+import { HoverParams, ArticleItemType, AnchorSide, ItemHoverState } from '@cntrl-site/sdk';
+import { CntrlColor } from '@cntrl-site/color';
 import { getItemTopStyle } from '../getItemTopStyle';
 
 type UnionToIntersection<U> = (U extends any ? (arg: U) => void : never) extends (arg: infer I) => void ? I : never;
 type HoverParamsGetter = (value: any, anchorSide?: AnchorSide) => string;
-type ItemHoverParams = Omit<UnionToIntersection<TItemHoverState>, 'autoplay'>;
+type ItemHoverParams = Omit<UnionToIntersection<ItemHoverState>, 'autoplay'>;
 
 const hoverTransformationMap: Record<keyof ItemHoverParams, HoverParamsGetter> = {
   'width': (width: number) => `width: ${width * 100}vw !important;`,
@@ -50,7 +51,7 @@ export function getTransitions<T extends ArticleItemType>(
   if (!hover) return 'unset';
   const transitionValues = values.reduce<string[]>((acc, valueName) => {
     if (valueName in hover && hover[valueName] !== undefined) {
-      const hoverProperties = hover[valueName] as THoverParams<string | number>;
+      const hoverProperties = hover[valueName] as HoverParams<string | number>;
       return [
         ...acc,
         `${CSSPropertyNameMap[valueName]} ${hoverProperties!.duration}ms ${hoverProperties!.timing} ${hoverProperties!.delay}ms`
@@ -70,7 +71,7 @@ export function getHoverStyles<T extends ArticleItemType>(
   if (!hover) return '';
   const hoverValues = values.reduce<string[]>((acc, valueName) => {
     if (valueName in hover && hover[valueName] !== undefined) {
-      const hoverProperties = hover[valueName] as THoverParams<string | number>;
+      const hoverProperties = hover[valueName] as HoverParams<string | number>;
       return [
         ...acc,
         hoverTransformationMap[valueName](hoverProperties.value, anchorSide)

package/src/utils/RichTextConverter/RichTextConverter.tsx

@@ -1,13 +1,14 @@
 import { ReactElement, ReactNode } from 'react';
+import { CntrlColor } from '@cntrl-site/color';
 import {
-  CntrlColor,
   getLayoutMediaQuery,
-  RichText,
   TextTransform,
-  TLayout,
-  TRichTextItem,
+  Layout,
+  RichTextItem,
   VerticalAlign,
-  TextAlign
+  TextAlign,
+  RichTextStyle,
+  RichTextEntity
 } from '@cntrl-site/sdk';
 import { LinkWrapper } from '../../components/LinkWrapper';
 import { getFontFamilyValue } from '../getFontFamilyValue';
@@ -38,8 +39,8 @@ export const FontStyles: Record<string, Record<string, string>> = {
 
 export class RichTextConverter {
   toHtml(
-    richText: TRichTextItem,
-    layouts: TLayout[]
+    richText: RichTextItem,
+    layouts: Layout[]
   ): [ReactNode[], string] {
     const { text, blocks = [] } = richText.commonParams;
     const root: ReactElement[] = [];
@@ -175,7 +176,7 @@ export class RichTextConverter {
     return ranges.map(r => `${r.start},${r.end}`).join(' ');
   }
 
-  private normalizeStyles(styles: RichText.Style[], entities: RichText.Entity[]): StyleGroup[] | undefined {
+  private normalizeStyles(styles: RichTextStyle[], entities: RichTextEntity[]): StyleGroup[] | undefined {
     const styleGroups: StyleGroup[] = [];
     const dividers = [...styles, ...entities].reduce((ds, s) => {
       ds.add(s.start);
@@ -199,7 +200,7 @@ export class RichTextConverter {
     return styleGroups;
   }
 
-  private groupEntities(entities: RichText.Entity[], styleGroups?: StyleGroup[]): EntitiesGroup[] | undefined {
+  private groupEntities(entities: RichTextEntity[], styleGroups?: StyleGroup[]): EntitiesGroup[] | undefined {
     const entitiesGroups: EntitiesGroup[] = [];
     if (!entities.length && !styleGroups) return;
     if (!styleGroups || styleGroups.length === 0) {

package/lib/utils/generateTypePresetStyles/generateTypePresetStyles.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateTypePresetStyles = void 0;
-const sdk_1 = require("@cntrl-site/sdk");
-const reEmptyLines = /^\s*\n/gm;
-function generateTypePresetStyles(preset, layouts) {
-    const sorted = layouts.slice().sort((a, b) => a.startsWith - b.startsWith);
-    const stylesStr = (`
-    ${preset.presets.map(p => (`
-.cntrl-preset-${p.id} {
-  font-family: ${p.fontFamily};
-  ${p.fontStyle.length > 0 ? `font-style: ${p.fontStyle};` : ''}
-  font-weight: ${p.fontWeight};
-}
-  ${sorted.map(l => (`
-${(0, sdk_1.getLayoutMediaQuery)(l.id, sorted)} {
-  .cntrl-preset-${p.id} {
-    font-size: ${p.fontSize / l.exemplary * 100}vw;
-    line-height: ${p.lineHeight / l.exemplary * 100}vw;
-    letter-spacing: ${p.letterSpacing / l.exemplary * 100}vw;
-    word-spacing: ${p.wordSpacing / l.exemplary * 100}vw;
-    color: ${sdk_1.CntrlColor.parse(p.color).toCss()};
-  }
-}`)).join('\n')}`)).join('\n')}`);
-    return stylesStr.replace(reEmptyLines, '');
-}
-exports.generateTypePresetStyles = generateTypePresetStyles;

package/src/utils/generateTypePresetStyles/__mock__/layoutsMock.ts

@@ -1,43 +0,0 @@
-import { TLayout } from '@cntrl-site/sdk';
-
-const sampleGrid = {
-  columnsAmount: 0,
-  beatHeight: 0,
-  beatMultiplier: 1,
-  maxWidth: 0,
-  columnWidth: 0.01,
-  gutterWidth: 0.001
-};
-
-export const layoutsMock: TLayout[] = [
-  {
-    id: 'tablet',
-    exemplary: 768,
-    startsWith: 768,
-    title: 'Tablet',
-    icon: 'any',
-    grid: sampleGrid,
-    disabled: false,
-    locked: false
-  },
-  {
-    id: 'desktop',
-    exemplary: 1440,
-    startsWith: 1024,
-    title: 'Desktop',
-    icon: 'any',
-    grid: sampleGrid,
-    disabled: false,
-    locked: false
-  },
-  {
-    id: 'mobile',
-    exemplary: 375,
-    startsWith: 0,
-    title: 'Mobile',
-    icon: 'any',
-    grid: sampleGrid,
-    disabled: false,
-    locked: false
-  }
-];