@frontify/guideline-blocks-settings 0.29.0 → 0.29.1

package/dist/utilities/color/getReadableColor.es.js

@@ -1,12 +1,12 @@
-import n, { readability as d } from "@ctrl/tinycolor";
+import { TinyColor as n, readability as c } from "@ctrl/tinycolor";
 import { toShortRgba as i } from "./toShortRgba.es.js";
-const s = (r) => typeof r == "object" && ["red", "green", "blue"].every((e) => r == null ? void 0 : r.hasOwnProperty(e)), a = (r, o) => {
-  const e = s(r) ? i(r) : r, p = s(o) ? i(o) : o;
-  let t = n(e);
-  const c = n(p);
-  for (; d(t, c) < 4.5; )
-    t = t.darken(1);
-  return t.toRgbString();
+const s = (r) => typeof r == "object" && ["red", "green", "blue"].every((t) => r == null ? void 0 : r.hasOwnProperty(t)), a = (r, e) => {
+  const t = s(r) ? i(r) : r, p = s(e) ? i(e) : e;
+  let o = new n(t);
+  const d = new n(p);
+  for (; c(o, d) < 4.5; )
+    o = o.darken(1);
+  return o.toRgbString();
 };
 export {
   a as getReadableColor

package/dist/utilities/color/getReadableColor.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"getReadableColor.es.js","sources":["../../../src/utilities/color/getReadableColor.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport tinycolor, { ColorInput, readability } from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\nimport { Color } from '@frontify/sidebar-settings';\n\n/**\n * Returns darkened text color for a given background color, so that it is readable and has enough contrast (above 4.5)\n *\n * @param {Object} textColor Object of RGBA values\n * @param {Object} backgroundColor Object of RGBA values\n * @returns {string} To be used as css value\n */\n\nconst isRgbaLongFormat = (value: unknown): value is Color => {\n    const requiredKeys = ['red', 'green', 'blue'];\n    return typeof value === 'object' && requiredKeys.every((i) => value?.hasOwnProperty(i));\n};\n\nexport const getReadableColor = (textColor: unknown, backgroundColor: unknown): string => {\n    const inputTextColor = isRgbaLongFormat(textColor) ? toShortRgba(textColor) : (textColor as ColorInput);\n    const inputBackgroundColor = isRgbaLongFormat(backgroundColor)\n        ? toShortRgba(backgroundColor)\n        : (backgroundColor as ColorInput);\n    let parsedTextColor = tinycolor(inputTextColor);\n    const parsedBackgroundColor = tinycolor(inputBackgroundColor);\n\n    //darken the text color until readability is good\n    while (readability(parsedTextColor, parsedBackgroundColor) < 4.5) {\n        parsedTextColor = parsedTextColor.darken(1);\n    }\n\n    return parsedTextColor.toRgbString();\n};\n"],"names":["isRgbaLongFormat","value","i","getReadableColor","textColor","backgroundColor","inputTextColor","toShortRgba","inputBackgroundColor","parsedTextColor","tinycolor","parsedBackgroundColor","readability"],"mappings":";;AAcA,MAAMA,IAAmB,CAACC,MAEf,OAAOA,KAAU,YADH,CAAC,OAAO,SAAS,MAAM,EACK,MAAM,CAACC,MAAMD,KAAA,gBAAAA,EAAO,eAAeC,EAAE,GAG7EC,IAAmB,CAACC,GAAoBC,MAAqC;AACtF,QAAMC,IAAiBN,EAAiBI,CAAS,IAAIG,EAAYH,CAAS,IAAKA,GACzEI,IAAuBR,EAAiBK,CAAe,IACvDE,EAAYF,CAAe,IAC1BA;AACH,MAAAI,IAAkBC,EAAUJ,CAAc;AACxC,QAAAK,IAAwBD,EAAUF,CAAoB;AAG5D,SAAOI,EAAYH,GAAiBE,CAAqB,IAAI;AACvC,IAAAF,IAAAA,EAAgB,OAAO,CAAC;AAG9C,SAAOA,EAAgB;AAC3B;"}
+{"version":3,"file":"getReadableColor.es.js","sources":["../../../src/utilities/color/getReadableColor.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ColorInput, TinyColor, readability } from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\nimport { Color } from '@frontify/sidebar-settings';\n\n/**\n * Returns darkened text color for a given background color, so that it is readable and has enough contrast (above 4.5)\n *\n * @param {Object} textColor Object of RGBA values\n * @param {Object} backgroundColor Object of RGBA values\n * @returns {string} To be used as css value\n */\n\nconst isRgbaLongFormat = (value: unknown): value is Color => {\n    const requiredKeys = ['red', 'green', 'blue'];\n    return typeof value === 'object' && requiredKeys.every((i) => value?.hasOwnProperty(i));\n};\n\nexport const getReadableColor = (textColor: unknown, backgroundColor: unknown): string => {\n    const inputTextColor = isRgbaLongFormat(textColor) ? toShortRgba(textColor) : (textColor as ColorInput);\n    const inputBackgroundColor = isRgbaLongFormat(backgroundColor)\n        ? toShortRgba(backgroundColor)\n        : (backgroundColor as ColorInput);\n    let parsedTextColor = new TinyColor(inputTextColor);\n    const parsedBackgroundColor = new TinyColor(inputBackgroundColor);\n\n    //darken the text color until readability is good\n    while (readability(parsedTextColor, parsedBackgroundColor) < 4.5) {\n        parsedTextColor = parsedTextColor.darken(1);\n    }\n\n    return parsedTextColor.toRgbString();\n};\n"],"names":["isRgbaLongFormat","value","i","getReadableColor","textColor","backgroundColor","inputTextColor","toShortRgba","inputBackgroundColor","parsedTextColor","TinyColor","parsedBackgroundColor","readability"],"mappings":";;AAcA,MAAMA,IAAmB,CAACC,MAEf,OAAOA,KAAU,YADH,CAAC,OAAO,SAAS,MAAM,EACK,MAAM,CAACC,MAAMD,KAAA,gBAAAA,EAAO,eAAeC,EAAE,GAG7EC,IAAmB,CAACC,GAAoBC,MAAqC;AACtF,QAAMC,IAAiBN,EAAiBI,CAAS,IAAIG,EAAYH,CAAS,IAAKA,GACzEI,IAAuBR,EAAiBK,CAAe,IACvDE,EAAYF,CAAe,IAC1BA;AACH,MAAAI,IAAkB,IAAIC,EAAUJ,CAAc;AAC5C,QAAAK,IAAwB,IAAID,EAAUF,CAAoB;AAGhE,SAAOI,EAAYH,GAAiBE,CAAqB,IAAI;AACvC,IAAAF,IAAAA,EAAgB,OAAO,CAAC;AAG9C,SAAOA,EAAgB;AAC3B;"}

package/dist/utilities/color/isDark.es.js

@@ -1,7 +1,7 @@
-import n from "@ctrl/tinycolor";
+import { TinyColor as n } from "@ctrl/tinycolor";
 import { toShortRgba as s } from "./toShortRgba.es.js";
 const i = (r) => typeof r == "object" && ["red", "green", "blue"].every((o) => r == null ? void 0 : r.hasOwnProperty(o)), y = (r, e) => {
-  const o = i(r) ? s(r) : r, t = n(o);
+  const o = i(r) ? s(r) : r, t = new n(o);
   return e ? t.getBrightness() < e : t.isDark() || t.getAlpha() > 0.25 && t.getAlpha() < 1;
 };
 export {

package/dist/utilities/color/isDark.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"isDark.es.js","sources":["../../../src/utilities/color/isDark.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport tinycolor, { ColorInput } from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\nimport { Color } from '@frontify/sidebar-settings';\n\n/**\n * Calculates if text should be in a light color depending on color (e.g. background-color)\n *\n * @param {Object} value Object of RGBA values\n * @param {Number|undefined} threshold Threshold for the brightness\n * @returns {Boolean} Return if the color is dark\n */\n\nconst isRgbaLongFormat = (value: unknown): value is Color => {\n    const requiredKeys = ['red', 'green', 'blue'];\n    return typeof value === 'object' && requiredKeys.every((i) => value?.hasOwnProperty(i));\n};\n\nexport const isDark = (color: unknown, threshold?: number): boolean => {\n    const inputColor = isRgbaLongFormat(color) ? toShortRgba(color) : (color as ColorInput);\n    const parsedColor = tinycolor(inputColor);\n\n    if (threshold) {\n        return parsedColor.getBrightness() < threshold;\n    }\n\n    return parsedColor.isDark() || (parsedColor.getAlpha() > 0.25 && parsedColor.getAlpha() < 1);\n};\n"],"names":["isRgbaLongFormat","value","i","isDark","color","threshold","inputColor","toShortRgba","parsedColor","tinycolor"],"mappings":";;AAcA,MAAMA,IAAmB,CAACC,MAEf,OAAOA,KAAU,YADH,CAAC,OAAO,SAAS,MAAM,EACK,MAAM,CAACC,MAAMD,KAAA,gBAAAA,EAAO,eAAeC,EAAE,GAG7EC,IAAS,CAACC,GAAgBC,MAAgC;AACnE,QAAMC,IAAaN,EAAiBI,CAAK,IAAIG,EAAYH,CAAK,IAAKA,GAC7DI,IAAcC,EAAUH,CAAU;AAExC,SAAID,IACOG,EAAY,cAAkB,IAAAH,IAGlCG,EAAY,OAAa,KAAAA,EAAY,aAAa,QAAQA,EAAY,SAAa,IAAA;AAC9F;"}
+{"version":3,"file":"isDark.es.js","sources":["../../../src/utilities/color/isDark.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ColorInput, TinyColor } from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\nimport { Color } from '@frontify/sidebar-settings';\n\n/**\n * Calculates if text should be in a light color depending on color (e.g. background-color)\n *\n * @param {Object} value Object of RGBA values\n * @param {Number|undefined} threshold Threshold for the brightness\n * @returns {Boolean} Return if the color is dark\n */\n\nconst isRgbaLongFormat = (value: unknown): value is Color => {\n    const requiredKeys = ['red', 'green', 'blue'];\n    return typeof value === 'object' && requiredKeys.every((i) => value?.hasOwnProperty(i));\n};\n\nexport const isDark = (color: unknown, threshold?: number): boolean => {\n    const inputColor = isRgbaLongFormat(color) ? toShortRgba(color) : (color as ColorInput);\n    const parsedColor = new TinyColor(inputColor);\n\n    if (threshold) {\n        return parsedColor.getBrightness() < threshold;\n    }\n\n    return parsedColor.isDark() || (parsedColor.getAlpha() > 0.25 && parsedColor.getAlpha() < 1);\n};\n"],"names":["isRgbaLongFormat","value","i","isDark","color","threshold","inputColor","toShortRgba","parsedColor","TinyColor"],"mappings":";;AAcA,MAAMA,IAAmB,CAACC,MAEf,OAAOA,KAAU,YADH,CAAC,OAAO,SAAS,MAAM,EACK,MAAM,CAACC,MAAMD,KAAA,gBAAAA,EAAO,eAAeC,EAAE,GAG7EC,IAAS,CAACC,GAAgBC,MAAgC;AACnE,QAAMC,IAAaN,EAAiBI,CAAK,IAAIG,EAAYH,CAAK,IAAKA,GAC7DI,IAAc,IAAIC,EAAUH,CAAU;AAE5C,SAAID,IACOG,EAAY,cAAkB,IAAAH,IAGlCG,EAAY,OAAa,KAAAA,EAAY,aAAa,QAAQA,EAAY,SAAa,IAAA;AAC9F;"}

package/dist/utilities/color/setAlpha.es.js

@@ -1,5 +1,5 @@
-import r from "@ctrl/tinycolor";
-const n = (t, o) => r(o).setAlpha(t).toRgbString();
+import { TinyColor as r } from "@ctrl/tinycolor";
+const n = (t, o) => new r(o).setAlpha(t).toRgbString();
 export {
   n as setAlpha
 };

package/dist/utilities/color/setAlpha.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"setAlpha.es.js","sources":["../../../src/utilities/color/setAlpha.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport tinycolor from '@ctrl/tinycolor';\n\n/**\n * Sets alpha value and returns rgba string.\n *\n * @param {string} color Rgb or hex string.\n * @returns {String} To be used as css value.\n */\n\nexport const setAlpha = (alpha: number, color?: string): string => {\n    return tinycolor(color).setAlpha(alpha).toRgbString();\n};\n"],"names":["setAlpha","alpha","color","tinycolor"],"mappings":";AAWa,MAAAA,IAAW,CAACC,GAAeC,MAC7BC,EAAUD,CAAK,EAAE,SAASD,CAAK,EAAE;"}
+{"version":3,"file":"setAlpha.es.js","sources":["../../../src/utilities/color/setAlpha.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TinyColor } from '@ctrl/tinycolor';\n\n/**\n * Sets alpha value and returns rgba string.\n *\n * @param {string} color Rgb or hex string.\n * @returns {String} To be used as css value.\n */\n\nexport const setAlpha = (alpha: number, color?: string): string => {\n    return new TinyColor(color).setAlpha(alpha).toRgbString();\n};\n"],"names":["setAlpha","alpha","color","TinyColor"],"mappings":";AAWa,MAAAA,IAAW,CAACC,GAAeC,MAC7B,IAAIC,EAAUD,CAAK,EAAE,SAASD,CAAK,EAAE;"}

package/dist/utilities/color/toColorObject.es.js

@@ -1,9 +1,9 @@
-import c from "@ctrl/tinycolor";
-const a = (o) => {
-  const { r, g: t, b: e, a: n } = c(o);
-  return { red: r, green: t, blue: e, alpha: n };
+import { TinyColor as l } from "@ctrl/tinycolor";
+const b = (o) => {
+  const { r, g: e, b: t, a: n } = new l(o);
+  return { red: r, green: e, blue: t, alpha: n };
 };
 export {
-  a as toColorObject
+  b as toColorObject
 };
 //# sourceMappingURL=toColorObject.es.js.map

package/dist/utilities/color/toColorObject.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"toColorObject.es.js","sources":["../../../src/utilities/color/toColorObject.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport tinycolor from '@ctrl/tinycolor';\n\n/**\n * Maps color strings to color objects.\n *\n * @param {String} String representing color\n * @returns {Color} Color object\n */\n\nexport const toColorObject = (colorString: string): Color => {\n    const { r, g, b, a } = tinycolor(colorString);\n    return { red: r, green: g, blue: b, alpha: a };\n};\n"],"names":["toColorObject","colorString","g","b","a","tinycolor"],"mappings":";AAYa,MAAAA,IAAgB,CAACC,MAA+B;AACzD,QAAM,EAAE,GAAG,GAAAC,GAAG,GAAAC,GAAG,GAAAC,MAAMC,EAAUJ,CAAW;AACrC,SAAA,EAAE,KAAK,GAAG,OAAOC,GAAG,MAAMC,GAAG,OAAOC;AAC/C;"}
+{"version":3,"file":"toColorObject.es.js","sources":["../../../src/utilities/color/toColorObject.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport { TinyColor } from '@ctrl/tinycolor';\n\n/**\n * Maps color strings to color objects.\n *\n * @param {String} String representing color\n * @returns {Color} Color object\n */\n\nexport const toColorObject = (colorString: string): Color => {\n    const { r, g, b, a } = new TinyColor(colorString);\n    return { red: r, green: g, blue: b, alpha: a };\n};\n"],"names":["toColorObject","colorString","g","b","a","TinyColor"],"mappings":";AAYa,MAAAA,IAAgB,CAACC,MAA+B;AACnD,QAAA,EAAE,GAAG,GAAAC,GAAG,GAAAC,GAAG,GAAAC,MAAM,IAAIC,EAAUJ,CAAW;AACzC,SAAA,EAAE,KAAK,GAAG,OAAOC,GAAG,MAAMC,GAAG,OAAOC;AAC/C;"}

package/dist/utilities/color/toHex8String.es.js

@@ -1,7 +1,7 @@
-import t from "@ctrl/tinycolor";
+import { TinyColor as t } from "@ctrl/tinycolor";
 import { toShortRgba as r } from "./toShortRgba.es.js";
-const n = (o) => t(r(o)).toHex8String();
+const e = (o) => new t(r(o)).toHex8String();
 export {
-  n as toHex8String
+  e as toHex8String
 };
 //# sourceMappingURL=toHex8String.es.js.map

package/dist/utilities/color/toHex8String.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"toHex8String.es.js","sources":["../../../src/utilities/color/toHex8String.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport tinycolor from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\n\n/**\n * Maps color object of rgba values to hex alpha string.\n *\n * @param {Object} Color object\n * @returns {String} To be used as css value.\n */\n\nexport const toHex8String = (color: Color): string => tinycolor(toShortRgba(color)).toHex8String();\n"],"names":["toHex8String","color","tinycolor","toShortRgba"],"mappings":";;AAaa,MAAAA,IAAe,CAACC,MAAyBC,EAAUC,EAAYF,CAAK,CAAC,EAAE,aAAa;"}
+{"version":3,"file":"toHex8String.es.js","sources":["../../../src/utilities/color/toHex8String.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport { TinyColor } from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\n\n/**\n * Maps color object of rgba values to hex alpha string.\n *\n * @param {Object} Color object\n * @returns {String} To be used as css value.\n */\n\nexport const toHex8String = (color: Color): string => new TinyColor(toShortRgba(color)).toHex8String();\n"],"names":["toHex8String","color","TinyColor","toShortRgba"],"mappings":";;AAaa,MAAAA,IAAe,CAACC,MAAyB,IAAIC,EAAUC,EAAYF,CAAK,CAAC,EAAE,aAAa;"}

package/dist/utilities/color/toHexString.es.js

@@ -1,7 +1,7 @@
-import t from "@ctrl/tinycolor";
+import { TinyColor as t } from "@ctrl/tinycolor";
 import { toShortRgba as r } from "./toShortRgba.es.js";
-const n = (o) => t(r(o)).toHexString();
+const e = (o) => new t(r(o)).toHexString();
 export {
-  n as toHexString
+  e as toHexString
 };
 //# sourceMappingURL=toHexString.es.js.map

package/dist/utilities/color/toHexString.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"toHexString.es.js","sources":["../../../src/utilities/color/toHexString.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport tinycolor from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\n\n/**\n * Maps color object of rgba values to hex alpha string.\n */\nexport const toHexString = (color: Color): string => tinycolor(toShortRgba(color)).toHexString();\n"],"names":["toHexString","color","tinycolor","toShortRgba"],"mappings":";;AASa,MAAAA,IAAc,CAACC,MAAyBC,EAAUC,EAAYF,CAAK,CAAC,EAAE,YAAY;"}
+{"version":3,"file":"toHexString.es.js","sources":["../../../src/utilities/color/toHexString.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport { TinyColor } from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\n\n/**\n * Maps color object of rgba values to hex alpha string.\n */\nexport const toHexString = (color: Color): string => new TinyColor(toShortRgba(color)).toHexString();\n"],"names":["toHexString","color","TinyColor","toShortRgba"],"mappings":";;AASa,MAAAA,IAAc,CAACC,MAAyB,IAAIC,EAAUC,EAAYF,CAAK,CAAC,EAAE,YAAY;"}

package/dist/utilities/color/toRgbaString.es.js

@@ -1,7 +1,7 @@
-import t from "@ctrl/tinycolor";
+import { TinyColor as t } from "@ctrl/tinycolor";
 import { toShortRgba as r } from "./toShortRgba.es.js";
-const m = (o) => t(r(o)).toRgbString();
+const n = (o) => new t(r(o)).toRgbString();
 export {
-  m as toRgbaString
+  n as toRgbaString
 };
 //# sourceMappingURL=toRgbaString.es.js.map

package/dist/utilities/color/toRgbaString.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"toRgbaString.es.js","sources":["../../../src/utilities/color/toRgbaString.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport tinycolor from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\n\n/**\n * Maps color object of rgba values to rgba string.\n *\n * @param {Object} Color object\n * @returns {String} To be used as css value.\n */\n\nexport const toRgbaString = (color: Color): string => tinycolor(toShortRgba(color)).toRgbString();\n"],"names":["toRgbaString","color","tinycolor","toShortRgba"],"mappings":";;AAaa,MAAAA,IAAe,CAACC,MAAyBC,EAAUC,EAAYF,CAAK,CAAC,EAAE,YAAY;"}
+{"version":3,"file":"toRgbaString.es.js","sources":["../../../src/utilities/color/toRgbaString.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport { TinyColor } from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\n\n/**\n * Maps color object of rgba values to rgba string.\n *\n * @param {Object} Color object\n * @returns {String} To be used as css value.\n */\n\nexport const toRgbaString = (color: Color): string => new TinyColor(toShortRgba(color)).toRgbString();\n"],"names":["toRgbaString","color","TinyColor","toShortRgba"],"mappings":";;AAaa,MAAAA,IAAe,CAACC,MAAyB,IAAIC,EAAUC,EAAYF,CAAK,CAAC,EAAE,YAAY;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontify/guideline-blocks-settings",
-  "version": "0.29.0",
+  "version": "0.29.1",
   "description": "Provides types and helpers for the guideline block development",
   "sideEffects": false,
   "main": "dist/index.umd.js",
@@ -30,8 +30,8 @@
     "@types/react-dom": "^18.2.7",
     "@types/sinon": "^10.0.16",
     "@vitejs/plugin-react": "^4.0.4",
-    "autoprefixer": "^10.4.14",
-    "cypress": "^12.17.3",
+    "autoprefixer": "^10.4.15",
+    "cypress": "^13.1.0",
     "cypress-real-events": "^1.10.1",
     "eslint": "^8.48.0",
     "eslint-plugin-notice": "^0.9.10",
@@ -45,25 +45,25 @@
     "rollup": "^3.28.1",
     "sinon": "15.2.0",
     "tailwindcss": "^3.3.3",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "vite": "^4.4.9",
     "vite-plugin-dts": "^3.5.3",
     "vite-plugin-externals": "^0.6.2",
     "vitest": "^0.34.3"
   },
   "dependencies": {
-    "@ctrl/tinycolor": "^3.6.0",
+    "@ctrl/tinycolor": "^4.0.2",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
-    "@frontify/fondue": "12.0.0-beta.312",
-    "@react-aria/focus": "^3.13.0",
-    "@react-stately/overlays": "^3.6.0",
+    "@frontify/fondue": "12.0.0-beta.314",
+    "@react-aria/focus": "^3.14.0",
+    "@react-stately/overlays": "^3.6.1",
     "@udecode/plate": "^21.5.0",
     "slate": "^0.94.1",
-    "slate-react": "^0.98.2",
-    "@frontify/app-bridge": "3.0.0-beta.88",
-    "@frontify/sidebar-settings": "0.6.5"
+    "slate-react": "^0.98.3",
+    "@frontify/app-bridge": "3.0.0-beta.89",
+    "@frontify/sidebar-settings": "0.6.6"
   },
   "peerDependencies": {
     "react": "^18",

package/src/components/Attachments/Attachments.spec.ct.tsx

@@ -4,7 +4,7 @@ import { AssetDummy, getAppBridgeBlockStub } from '@frontify/app-bridge';
 import { mount } from 'cypress/react18';
 import { Attachments as AttachmentsComponent } from './Attachments';
 import { AttachmentsProps } from './types';
-import { SinonStub } from 'cypress/types/sinon';
+import type { SinonStub } from 'sinon';
 
 const FlyoutButtonSelector = '[data-test-id="attachments-flyout-button"]';
 const AssetInputSelector = '[data-test-id="asset-input-placeholder"]';

package/src/components/BlockItemWrapper/BlockItemWrapper.tsx

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { joinClassNames } from '../../utilities';
 import { Toolbar } from './Toolbar';
 import { BlockItemWrapperProps, ToolbarItem } from './types';
@@ -15,7 +15,7 @@ export const BlockItemWrapper = ({
     shouldFillContainer,
     outlineOffset = 2,
     shouldBeShown = false,
-}: PropsWithChildren<BlockItemWrapperProps>) => {
+}: BlockItemWrapperProps) => {
     const [isFlyoutOpen, setIsFlyoutOpen] = useState(shouldBeShown);
     const [isFlyoutDisabled, setIsFlyoutDisabled] = useState(false);
     const wrapperRef = useRef<HTMLDivElement>(null);

package/src/components/BlockItemWrapper/types.ts

@@ -1,8 +1,10 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { MenuItemStyle } from '@frontify/fondue';
+import type { ReactNode } from 'react';
 
 export type BlockItemWrapperProps = {
+    children: ReactNode;
     shouldHideWrapper?: boolean;
     shouldHideComponent?: boolean;
     toolbarItems: (ToolbarItem | undefined)[];

package/src/components/Link/LinkSelector/LinkSelector.spec.ct.tsx

@@ -9,7 +9,7 @@ import {
 } from '@frontify/app-bridge';
 import { mount } from 'cypress/react18';
 import { LinkSelector } from './LinkSelector';
-import { SinonStub } from 'cypress/types/sinon';
+import type { SinonStub } from 'sinon';
 
 const LinkSelectorSelector = '[data-test-id="internal-link-selector"]';
 const LinkSelectorButtonSelector = '[data-test-id="internal-link-selector"] > button';

package/src/components/RichTextEditor/RichTextEditor.spec.ct.tsx

@@ -3,7 +3,7 @@
 import { DocumentApiDummy, getAppBridgeBlockStub } from '@frontify/app-bridge';
 import { PluginComposer } from '@frontify/fondue';
 import { mount } from 'cypress/react18';
-import { SinonStub } from 'cypress/types/sinon';
+import type { SinonStub } from 'sinon';
 import { ButtonPlugin, LinkPlugin, RichTextEditor, TextStyles } from '.';
 import { convertToRteValue } from '../../helpers';
 

package/src/components/RichTextEditor/plugins/styles.ts

@@ -4,7 +4,7 @@ import type { CSSProperties } from 'react';
 import { LINK_PLUGIN } from './LinkPlugin/id';
 import { BlockButtonStyles } from './ButtonPlugin';
 
-export const enum TextStyles {
+export enum TextStyles {
     heading1 = 'heading1',
     heading2 = 'heading2',
     heading3 = 'heading3',

package/src/utilities/color/getReadableColor.ts

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import tinycolor, { ColorInput, readability } from '@ctrl/tinycolor';
+import { ColorInput, TinyColor, readability } from '@ctrl/tinycolor';
 import { toShortRgba } from './toShortRgba';
 import { Color } from '@frontify/sidebar-settings';
 
@@ -22,8 +22,8 @@ export const getReadableColor = (textColor: unknown, backgroundColor: unknown):
     const inputBackgroundColor = isRgbaLongFormat(backgroundColor)
         ? toShortRgba(backgroundColor)
         : (backgroundColor as ColorInput);
-    let parsedTextColor = tinycolor(inputTextColor);
-    const parsedBackgroundColor = tinycolor(inputBackgroundColor);
+    let parsedTextColor = new TinyColor(inputTextColor);
+    const parsedBackgroundColor = new TinyColor(inputBackgroundColor);
 
     //darken the text color until readability is good
     while (readability(parsedTextColor, parsedBackgroundColor) < 4.5) {

package/src/utilities/color/isDark.ts

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import tinycolor, { ColorInput } from '@ctrl/tinycolor';
+import { ColorInput, TinyColor } from '@ctrl/tinycolor';
 import { toShortRgba } from './toShortRgba';
 import { Color } from '@frontify/sidebar-settings';
 
@@ -19,7 +19,7 @@ const isRgbaLongFormat = (value: unknown): value is Color => {
 
 export const isDark = (color: unknown, threshold?: number): boolean => {
     const inputColor = isRgbaLongFormat(color) ? toShortRgba(color) : (color as ColorInput);
-    const parsedColor = tinycolor(inputColor);
+    const parsedColor = new TinyColor(inputColor);
 
     if (threshold) {
         return parsedColor.getBrightness() < threshold;

package/src/utilities/color/setAlpha.ts

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import tinycolor from '@ctrl/tinycolor';
+import { TinyColor } from '@ctrl/tinycolor';
 
 /**
  * Sets alpha value and returns rgba string.
@@ -10,5 +10,5 @@ import tinycolor from '@ctrl/tinycolor';
  */
 
 export const setAlpha = (alpha: number, color?: string): string => {
-    return tinycolor(color).setAlpha(alpha).toRgbString();
+    return new TinyColor(color).setAlpha(alpha).toRgbString();
 };

package/src/utilities/color/toColorObject.ts

@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { Color } from '@frontify/fondue';
-import tinycolor from '@ctrl/tinycolor';
+import { TinyColor } from '@ctrl/tinycolor';
 
 /**
  * Maps color strings to color objects.
@@ -11,6 +11,6 @@ import tinycolor from '@ctrl/tinycolor';
  */
 
 export const toColorObject = (colorString: string): Color => {
-    const { r, g, b, a } = tinycolor(colorString);
+    const { r, g, b, a } = new TinyColor(colorString);
     return { red: r, green: g, blue: b, alpha: a };
 };

package/src/utilities/color/toHex8String.ts

@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { Color } from '@frontify/fondue';
-import tinycolor from '@ctrl/tinycolor';
+import { TinyColor } from '@ctrl/tinycolor';
 import { toShortRgba } from './toShortRgba';
 
 /**
@@ -11,4 +11,4 @@ import { toShortRgba } from './toShortRgba';
  * @returns {String} To be used as css value.
  */
 
-export const toHex8String = (color: Color): string => tinycolor(toShortRgba(color)).toHex8String();
+export const toHex8String = (color: Color): string => new TinyColor(toShortRgba(color)).toHex8String();

package/src/utilities/color/toHexString.ts

@@ -1,10 +1,10 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { Color } from '@frontify/fondue';
-import tinycolor from '@ctrl/tinycolor';
+import { TinyColor } from '@ctrl/tinycolor';
 import { toShortRgba } from './toShortRgba';
 
 /**
  * Maps color object of rgba values to hex alpha string.
  */
-export const toHexString = (color: Color): string => tinycolor(toShortRgba(color)).toHexString();
+export const toHexString = (color: Color): string => new TinyColor(toShortRgba(color)).toHexString();

package/src/utilities/color/toRgbaString.ts

@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { Color } from '@frontify/fondue';
-import tinycolor from '@ctrl/tinycolor';
+import { TinyColor } from '@ctrl/tinycolor';
 import { toShortRgba } from './toShortRgba';
 
 /**
@@ -11,4 +11,4 @@ import { toShortRgba } from './toShortRgba';
  * @returns {String} To be used as css value.
  */
 
-export const toRgbaString = (color: Color): string => tinycolor(toShortRgba(color)).toRgbString();
+export const toRgbaString = (color: Color): string => new TinyColor(toShortRgba(color)).toRgbString();

package/tsconfig.json

@@ -6,7 +6,7 @@
         "alwaysStrict": true,
         "isolatedModules": true,
         "module": "ESNext",
-        "moduleResolution": "node",
+        "moduleResolution": "bundler",
         "noImplicitAny": true,
         "noImplicitReturns": true,
         "noImplicitThis": true,