@frontify/guideline-blocks-settings 1.0.3 → 1.0.5-alpha.0

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 { type ColorInput, TinyColor, readability } from '@ctrl/tinycolor';\nimport { type Color } from '@frontify/sidebar-settings';\n\nimport { toShortRgba } from './toShortRgba';\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":";;AAeA,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;"}
+{"version":3,"file":"getReadableColor.es.js","sources":["../../../src/utilities/color/getReadableColor.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ColorInput, TinyColor, readability } from '@ctrl/tinycolor';\nimport { type Color } from '@frontify/sidebar-settings';\n\nimport { toShortRgba } from './toShortRgba';\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":";;AAeA,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;AACP,MAAII,IAAkB,IAAIC,EAAUJ,CAAc;AAClD,QAAMK,IAAwB,IAAID,EAAUF,CAAoB;AAGhE,SAAOI,EAAYH,GAAiBE,CAAqB,IAAI;AACzD,IAAAF,IAAkBA,EAAgB,OAAO,CAAC;AAG9C,SAAOA,EAAgB,YAAA;AAC3B;"}

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 { type ColorInput, TinyColor } from '@ctrl/tinycolor';\nimport { type Color } from '@frontify/sidebar-settings';\n\nimport { toShortRgba } from './toShortRgba';\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":";;AAeA,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;"}
+{"version":3,"file":"isDark.es.js","sources":["../../../src/utilities/color/isDark.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ColorInput, TinyColor } from '@ctrl/tinycolor';\nimport { type Color } from '@frontify/sidebar-settings';\n\nimport { toShortRgba } from './toShortRgba';\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":";;AAeA,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,kBAAkBH,IAGlCG,EAAY,YAAaA,EAAY,aAAa,QAAQA,EAAY,SAAA,IAAa;AAC9F;"}

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 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;"}
+{"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":";AAWO,MAAMA,IAAW,CAACC,GAAeC,MAC7B,IAAIC,EAAUD,CAAK,EAAE,SAASD,CAAK,EAAE,YAAA;"}

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 { TinyColor } from '@ctrl/tinycolor';\nimport { type Color } from '@frontify/fondue';\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;"}
+{"version":3,"file":"toColorObject.es.js","sources":["../../../src/utilities/color/toColorObject.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TinyColor } from '@ctrl/tinycolor';\nimport { type Color } from '@frontify/fondue';\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":";AAYO,MAAMA,IAAgB,CAACC,MAA+B;AACzD,QAAM,EAAE,GAAG,GAAAC,GAAG,GAAAC,GAAG,GAAAC,MAAM,IAAIC,EAAUJ,CAAW;AAChD,SAAO,EAAE,KAAK,GAAG,OAAOC,GAAG,MAAMC,GAAG,OAAOC,EAAA;AAC/C;"}

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 { TinyColor } from '@ctrl/tinycolor';\nimport { type Color } from '@frontify/fondue';\n\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":";;AAca,MAAAA,IAAe,CAACC,MAAyB,IAAIC,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 { TinyColor } from '@ctrl/tinycolor';\nimport { type Color } from '@frontify/fondue';\n\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":";;AAcO,MAAMA,IAAe,CAACC,MAAyB,IAAIC,EAAUC,EAAYF,CAAK,CAAC,EAAE,aAAA;"}

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 { TinyColor } from '@ctrl/tinycolor';\nimport { type Color } from '@frontify/fondue';\n\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":";;AAUa,MAAAA,IAAc,CAACC,MAAyB,IAAIC,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 { TinyColor } from '@ctrl/tinycolor';\nimport { type Color } from '@frontify/fondue';\n\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":";;AAUO,MAAMA,IAAc,CAACC,MAAyB,IAAIC,EAAUC,EAAYF,CAAK,CAAC,EAAE,YAAA;"}

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 { TinyColor } from '@ctrl/tinycolor';\nimport { type Color } from '@frontify/fondue';\n\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":";;AAca,MAAAA,IAAe,CAACC,MAAyB,IAAIC,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 { TinyColor } from '@ctrl/tinycolor';\nimport { type Color } from '@frontify/fondue';\n\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":";;AAcO,MAAMA,IAAe,CAACC,MAAyB,IAAIC,EAAUC,EAAYF,CAAK,CAAC,EAAE,YAAA;"}

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

@@ -1 +1 @@
-{"version":3,"file":"toShortRgba.es.js","sources":["../../../src/utilities/color/toShortRgba.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Color } from '@frontify/fondue';\n\ntype ShortNotationColor = {\n    r: number;\n    g: number;\n    b: number;\n    a?: number;\n};\n\n/**\n * Maps color object from long to short rgba notation.\n *\n * @param {Object} Color object\n * @returns {Object} ShortNotationColor object\n */\n\nexport const toShortRgba = (color: unknown): ShortNotationColor => {\n    const isRgbaLongFormat = (value: Color) => {\n        const requiredKeys = ['red', 'green', 'blue'];\n        return typeof value === 'object' && requiredKeys.every((i) => value.hasOwnProperty(i));\n    };\n\n    const mapToShortFormat = (value: Color): ShortNotationColor => {\n        const alpha = typeof value.alpha === 'number' ? value.alpha : 1;\n        return { r: value.red, g: value.green, b: value.blue, a: alpha };\n    };\n\n    if (isRgbaLongFormat(color as Color)) {\n        return mapToShortFormat(color as Color);\n    }\n\n    return color as ShortNotationColor;\n};\n"],"names":["toShortRgba","color","isRgbaLongFormat","value","i","mapToShortFormat","alpha"],"mappings":"AAkBa,MAAAA,IAAc,CAACC,MAAuC;AACzD,QAAAC,IAAmB,CAACC,MAEf,OAAOA,KAAU,YADH,CAAC,OAAO,SAAS,MAAM,EACK,MAAM,CAACC,MAAMD,EAAM,eAAeC,CAAC,CAAC,GAGnFC,IAAmB,CAACF,MAAqC;AAC3D,UAAMG,IAAQ,OAAOH,EAAM,SAAU,WAAWA,EAAM,QAAQ;AACvD,WAAA,EAAE,GAAGA,EAAM,KAAK,GAAGA,EAAM,OAAO,GAAGA,EAAM,MAAM,GAAGG,EAAM;AAAA,EAAA;AAG/D,SAAAJ,EAAiBD,CAAc,IACxBI,EAAiBJ,CAAc,IAGnCA;AACX;"}
+{"version":3,"file":"toShortRgba.es.js","sources":["../../../src/utilities/color/toShortRgba.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Color } from '@frontify/fondue';\n\ntype ShortNotationColor = {\n    r: number;\n    g: number;\n    b: number;\n    a?: number;\n};\n\n/**\n * Maps color object from long to short rgba notation.\n *\n * @param {Object} Color object\n * @returns {Object} ShortNotationColor object\n */\n\nexport const toShortRgba = (color: unknown): ShortNotationColor => {\n    const isRgbaLongFormat = (value: Color) => {\n        const requiredKeys = ['red', 'green', 'blue'];\n        return typeof value === 'object' && requiredKeys.every((i) => value.hasOwnProperty(i));\n    };\n\n    const mapToShortFormat = (value: Color): ShortNotationColor => {\n        const alpha = typeof value.alpha === 'number' ? value.alpha : 1;\n        return { r: value.red, g: value.green, b: value.blue, a: alpha };\n    };\n\n    if (isRgbaLongFormat(color as Color)) {\n        return mapToShortFormat(color as Color);\n    }\n\n    return color as ShortNotationColor;\n};\n"],"names":["toShortRgba","color","isRgbaLongFormat","value","i","mapToShortFormat","alpha"],"mappings":"AAkBO,MAAMA,IAAc,CAACC,MAAuC;AAC/D,QAAMC,IAAmB,CAACC,MAEf,OAAOA,KAAU,YADH,CAAC,OAAO,SAAS,MAAM,EACK,MAAM,CAACC,MAAMD,EAAM,eAAeC,CAAC,CAAC,GAGnFC,IAAmB,CAACF,MAAqC;AAC3D,UAAMG,IAAQ,OAAOH,EAAM,SAAU,WAAWA,EAAM,QAAQ;AAC9D,WAAO,EAAE,GAAGA,EAAM,KAAK,GAAGA,EAAM,OAAO,GAAGA,EAAM,MAAM,GAAGG,EAAA;AAAA,EAC7D;AAEA,SAAIJ,EAAiBD,CAAc,IACxBI,EAAiBJ,CAAc,IAGnCA;AACX;"}

package/dist/utilities/moveItemInArray.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"moveItemInArray.es.js","sources":["../../src/utilities/moveItemInArray.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\n/**\n * Moves an item from the 'from' position to the 'to' position and updates the array\n *\n * @param {Array} array Array of items\n * @param {Number} from Initial index of the item\n * @param {Number} to New index of the item\n * @returns {Array} New array with the item moved to the new position\n */\nexport const moveItemInArray = <T>(array: T[], from: number, to: number): T[] => {\n    const newArray = [...array];\n    const toIndex = to < 0 ? newArray.length + to : to;\n\n    if (toIndex >= 0 && toIndex < newArray.length) {\n        const slice = newArray.splice(from, 1)[0];\n        newArray.splice(toIndex, 0, slice);\n    }\n\n    return newArray;\n};\n"],"names":["moveItemInArray","array","from","to","newArray","toIndex","slice"],"mappings":"AAUO,MAAMA,IAAkB,CAAIC,GAAYC,GAAcC,MAAoB;AACvE,QAAAC,IAAW,CAAC,GAAGH,CAAK,GACpBI,IAAUF,IAAK,IAAIC,EAAS,SAASD,IAAKA;AAEhD,MAAIE,KAAW,KAAKA,IAAUD,EAAS,QAAQ;AAC3C,UAAME,IAAQF,EAAS,OAAOF,GAAM,CAAC,EAAE,CAAC;AAC/B,IAAAE,EAAA,OAAOC,GAAS,GAAGC,CAAK;AAAA,EACrC;AAEO,SAAAF;AACX;"}
+{"version":3,"file":"moveItemInArray.es.js","sources":["../../src/utilities/moveItemInArray.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\n/**\n * Moves an item from the 'from' position to the 'to' position and updates the array\n *\n * @param {Array} array Array of items\n * @param {Number} from Initial index of the item\n * @param {Number} to New index of the item\n * @returns {Array} New array with the item moved to the new position\n */\nexport const moveItemInArray = <T>(array: T[], from: number, to: number): T[] => {\n    const newArray = [...array];\n    const toIndex = to < 0 ? newArray.length + to : to;\n\n    if (toIndex >= 0 && toIndex < newArray.length) {\n        const slice = newArray.splice(from, 1)[0];\n        newArray.splice(toIndex, 0, slice);\n    }\n\n    return newArray;\n};\n"],"names":["moveItemInArray","array","from","to","newArray","toIndex","slice"],"mappings":"AAUO,MAAMA,IAAkB,CAAIC,GAAYC,GAAcC,MAAoB;AAC7E,QAAMC,IAAW,CAAC,GAAGH,CAAK,GACpBI,IAAUF,IAAK,IAAIC,EAAS,SAASD,IAAKA;AAEhD,MAAIE,KAAW,KAAKA,IAAUD,EAAS,QAAQ;AAC3C,UAAME,IAAQF,EAAS,OAAOF,GAAM,CAAC,EAAE,CAAC;AACxC,IAAAE,EAAS,OAAOC,GAAS,GAAGC,CAAK;AAAA,EACrC;AAEA,SAAOF;AACX;"}

package/dist/utilities/react/getBackgroundColorStyles.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"getBackgroundColorStyles.es.js","sources":["../../../src/utilities/react/getBackgroundColorStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Color } from '@frontify/fondue';\nimport { type CSSProperties } from 'react';\n\nimport { toRgbaString } from '../color';\n\nexport const getBackgroundColorStyles = (backgroundColor: Color): CSSProperties => ({\n    backgroundColor: toRgbaString(backgroundColor),\n});\n"],"names":["getBackgroundColorStyles","backgroundColor","toRgbaString"],"mappings":";AAOa,MAAAA,IAA2B,CAACC,OAA2C;AAAA,EAChF,iBAAiBC,EAAaD,CAAe;AACjD;"}
+{"version":3,"file":"getBackgroundColorStyles.es.js","sources":["../../../src/utilities/react/getBackgroundColorStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Color } from '@frontify/fondue';\nimport { type CSSProperties } from 'react';\n\nimport { toRgbaString } from '../color';\n\nexport const getBackgroundColorStyles = (backgroundColor: Color): CSSProperties => ({\n    backgroundColor: toRgbaString(backgroundColor),\n});\n"],"names":["getBackgroundColorStyles","backgroundColor","toRgbaString"],"mappings":";AAOO,MAAMA,IAA2B,CAACC,OAA2C;AAAA,EAChF,iBAAiBC,EAAaD,CAAe;AACjD;"}

package/dist/utilities/react/getBorderStyles.es.js

@@ -1,8 +1,8 @@
 import { BORDER_COLOR_DEFAULT_VALUE as e } from "../../settings/defaultValues.es.js";
-import { borderStyleMap as d, BorderStyle as l } from "../../settings/types.es.js";
+import { BorderStyle as d, borderStyleMap as l } from "../../settings/types.es.js";
 import { toRgbaString as m } from "../color/toRgbaString.es.js";
-const b = (r = l.Solid, o = "1px", t = e) => ({
-  borderStyle: d[r],
+const b = (r = d.Solid, o = "1px", t = e) => ({
+  borderStyle: l[r],
   borderWidth: o,
   borderColor: m(t)
 });

package/dist/utilities/react/getBorderStyles.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"getBorderStyles.es.js","sources":["../../../src/utilities/react/getBorderStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Color } from '@frontify/fondue';\nimport { type CSSProperties } from 'react';\n\nimport { BORDER_COLOR_DEFAULT_VALUE } from '../../settings/defaultValues';\nimport { BorderStyle, borderStyleMap } from '../../settings/types';\nimport { toRgbaString } from '../color';\n\nexport const getBorderStyles = (\n    style = BorderStyle.Solid,\n    borderWidth = '1px',\n    color = BORDER_COLOR_DEFAULT_VALUE as Color,\n): CSSProperties => {\n    return {\n        borderStyle: borderStyleMap[style],\n        borderWidth,\n        borderColor: toRgbaString(color),\n    };\n};\n"],"names":["getBorderStyles","style","BorderStyle","borderWidth","color","BORDER_COLOR_DEFAULT_VALUE","borderStyleMap","toRgbaString"],"mappings":";;;AASa,MAAAA,IAAkB,CAC3BC,IAAQC,EAAY,OACpBC,IAAc,OACdC,IAAQC,OAED;AAAA,EACH,aAAaC,EAAeL,CAAK;AAAA,EACjC,aAAAE;AAAA,EACA,aAAaI,EAAaH,CAAK;AAAA;"}
+{"version":3,"file":"getBorderStyles.es.js","sources":["../../../src/utilities/react/getBorderStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Color } from '@frontify/fondue';\nimport { type CSSProperties } from 'react';\n\nimport { BORDER_COLOR_DEFAULT_VALUE } from '../../settings/defaultValues';\nimport { BorderStyle, borderStyleMap } from '../../settings/types';\nimport { toRgbaString } from '../color';\n\nexport const getBorderStyles = (\n    style = BorderStyle.Solid,\n    borderWidth = '1px',\n    color = BORDER_COLOR_DEFAULT_VALUE as Color,\n): CSSProperties => {\n    return {\n        borderStyle: borderStyleMap[style],\n        borderWidth,\n        borderColor: toRgbaString(color),\n    };\n};\n"],"names":["getBorderStyles","style","BorderStyle","borderWidth","color","BORDER_COLOR_DEFAULT_VALUE","borderStyleMap","toRgbaString"],"mappings":";;;AASO,MAAMA,IAAkB,CAC3BC,IAAQC,EAAY,OACpBC,IAAc,OACdC,IAAQC,OAED;AAAA,EACH,aAAaC,EAAeL,CAAK;AAAA,EACjC,aAAAE;AAAA,EACA,aAAaI,EAAaH,CAAK;AAAA;"}

package/dist/utilities/react/joinClassNames.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"joinClassNames.es.js","sources":["../../../src/utilities/react/joinClassNames.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\n/**\n * Cleans and joins an array of inputs with possible undefined or boolean values.\n *\n * @param {Array} classNames Array of class names\n * @returns Clean string to be used for class name.\n */\nexport const joinClassNames = (classNames: (string | undefined | boolean)[]): string =>\n    classNames.filter(Boolean).join(' ');\n"],"names":["joinClassNames","classNames"],"mappings":"AAQa,MAAAA,IAAiB,CAACC,MAC3BA,EAAW,OAAO,OAAO,EAAE,KAAK,GAAG;"}
+{"version":3,"file":"joinClassNames.es.js","sources":["../../../src/utilities/react/joinClassNames.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\n/**\n * Cleans and joins an array of inputs with possible undefined or boolean values.\n *\n * @param {Array} classNames Array of class names\n * @returns Clean string to be used for class name.\n */\nexport const joinClassNames = (classNames: (string | undefined | boolean)[]): string =>\n    classNames.filter(Boolean).join(' ');\n"],"names":["joinClassNames","classNames"],"mappings":"AAQO,MAAMA,IAAiB,CAACC,MAC3BA,EAAW,OAAO,OAAO,EAAE,KAAK,GAAG;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@frontify/guideline-blocks-settings",
   "type": "module",
-  "version": "1.0.3",
+  "version": "1.0.5-alpha.0",
   "description": "Provides types and helpers for the guideline block development",
   "author": "Frontify Developers <developers@frontify.com>",
   "repository": {
@@ -38,44 +38,45 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@frontify/fondue": "^12.11.0",
+    "@frontify/fondue": "^13.0.0-beta.8",
     "@react-aria/focus": "^3.16.2",
     "@react-stately/overlays": "^3.6.5",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@frontify/sidebar-settings": "^0.10.3"
+    "@frontify/sidebar-settings": "^0.10.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.4",
-    "@frontify/eslint-config-react": "0.17.6",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.3.0",
-    "@testing-library/user-event": "14.5.2",
-    "@types/node": "^18.19.31",
-    "@types/react": "^18.2.75",
-    "@types/react-dom": "^18.2.24",
-    "@types/sinon": "^17.0.3",
-    "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/ui": "^1.4.0",
-    "autoprefixer": "^10.4.19",
-    "cypress": "^13.7.2",
-    "cypress-real-events": "^1.12.0",
-    "eslint": "^8.57.0",
-    "eslint-plugin-notice": "^0.9.10",
-    "happy-dom": "^13.10.1",
+    "@babel/core": "^7.28.3",
+    "@frontify/eslint-config-react": "1.0.4",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "14.6.1",
+    "@types/node": "^22.18.0",
+    "@types/react": "^18.3.24",
+    "@types/react-dom": "^18.3.7",
+    "@types/sinon": "^17.0.4",
+    "@vitejs/plugin-react": "^5.0.2",
+    "@vitest/ui": "^3.2.4",
+    "autoprefixer": "^10.4.21",
+    "cypress": "^15.0.0",
+    "cypress-real-events": "^1.14.0",
+    "eslint": "^9.34.0",
+    "eslint-plugin-notice": "^1.0.0",
+    "happy-dom": "^18.0.1",
     "mitt": "^3.0.1",
     "msw": "^1.3.3",
-    "postcss": "^8.4.38",
-    "prettier": "^3.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rollup": "^4.14.1",
-    "sinon": "17.0.1",
-    "tailwindcss": "^3.4.3",
-    "typescript": "^5.4.4",
-    "vite": "^5.2.10",
-    "vite-plugin-dts": "^3.8.1",
+    "postcss": "^8.5.6",
+    "prettier": "^3.6.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup": "^4.50.0",
+    "sinon": "21.0.0",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.42.0",
+    "vite": "^5.4.19",
+    "vite-plugin-dts": "^3.9.1",
     "vite-plugin-externals": "^0.6.2",
-    "vitest": "^1.4.0"
+    "vitest": "^3.2.4"
   },
   "scripts": {
     "build": "vite build",

package/tailwind.config.ts

@@ -4,8 +4,9 @@ import containerQueryPlugin from '@tailwindcss/container-queries';
 import plugin from 'tailwindcss/plugin';
 
 module.exports = {
-    presets: [require('@frontify/fondue/tailwind')],
+    presets: [require('@frontify/fondue/legacyTokens/tailwind')],
     content: ['src/**/*.{ts,tsx}'],
+    prefix: 'tw-',
     corePlugins: {
         preflight: false,
     },

package/dist/node_modules/.pnpm/@frontify_fondue-components@19.2.0_@frontify_fondue-icons@0.17.0_react@18.3.1__@frontify_fond_2ljulupxsngf67kv3awqop75em/node_modules/@frontify/fondue-components/dist/fondue-components10.es.js

@@ -1,45 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { Root as c } from "../../../../../@radix-ui_react-separator@1.1.3_@types_react-dom@18.3.0_@types_react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-separator/dist/index.es.js";
-import { forwardRef as f } from "react";
-import { cn as v } from "./fondue-components36.es.js";
-import p from "./fondue-components49.es.js";
-import { dividerStyles as l } from "./fondue-components50.es.js";
-const h = f(
-  ({
-    "data-test-id": a = "fondue-divider",
-    direction: i = "horizontal",
-    className: o,
-    variant: r,
-    as: e = "div",
-    decorative: d,
-    ...m
-  }, s) => {
-    const n = e;
-    return /* @__PURE__ */ t(
-      c,
-      {
-        ref: s,
-        className: v(
-          l({
-            direction: i,
-            variant: r,
-            ...m
-          }),
-          p.root,
-          o
-        ),
-        "data-variant": r,
-        "data-test-id": a,
-        decorative: d,
-        "data-orientation": i,
-        asChild: !0,
-        children: /* @__PURE__ */ t(n, {})
-      }
-    );
-  }
-);
-h.displayName = "Divider";
-export {
-  h as Divider
-};
-//# sourceMappingURL=fondue-components10.es.js.map

package/dist/node_modules/.pnpm/@frontify_fondue-components@19.2.0_@frontify_fondue-icons@0.17.0_react@18.3.1__@frontify_fond_2ljulupxsngf67kv3awqop75em/node_modules/@frontify/fondue-components/dist/fondue-components10.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fondue-components10.es.js","sources":["../../../../../../../../../../node_modules/.pnpm/@frontify+fondue-components@19.2.0_@frontify+fondue-icons@0.17.0_react@18.3.1__@frontify+fond_2ljulupxsngf67kv3awqop75em/node_modules/@frontify/fondue-components/dist/fondue-components10.js"],"sourcesContent":["import { jsx as t } from \"react/jsx-runtime\";\nimport * as p from \"@radix-ui/react-separator\";\nimport { forwardRef as f } from \"react\";\nimport { cn as l } from \"./fondue-components36.js\";\nimport v from \"./fondue-components49.js\";\nimport { dividerStyles as c } from \"./fondue-components50.js\";\nconst h = f(\n  ({\n    \"data-test-id\": i = \"fondue-divider\",\n    direction: r = \"horizontal\",\n    className: a,\n    variant: o,\n    as: e = \"div\",\n    decorative: d,\n    ...m\n  }, s) => {\n    const n = e;\n    return /* @__PURE__ */ t(\n      p.Root,\n      {\n        ref: s,\n        className: l(\n          c({\n            direction: r,\n            variant: o,\n            ...m\n          }),\n          v.root,\n          a\n        ),\n        \"data-variant\": o,\n        \"data-test-id\": i,\n        decorative: d,\n        \"data-orientation\": r,\n        asChild: !0,\n        children: /* @__PURE__ */ t(n, {})\n      }\n    );\n  }\n);\nh.displayName = \"Divider\";\nexport {\n  h as Divider\n};\n//# sourceMappingURL=fondue-components10.js.map\n"],"names":["f","i","r","a","o","m","t","p.Root","l","c","v"],"mappings":";;;;;;AAMK,MAAC,IAAIA;AAAAA,EACR,CAAC;AAAA,IACC,gBAAgBC,IAAI;AAAA,IACpB,WAAWC,IAAI;AAAA,IACf,WAAWC;AAAA,IACX,SAASC;AAAA,IACT,IAAI,IAAI;AAAA,IACR,YAAY;AAAA,IACZ,GAAGC;AAAAA,EACJ,GAAE,MAAM;AACP,UAAM,IAAI;AACV,WAAuBC,gBAAAA;AAAAA,MACrBC;AAAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,WAAWC;AAAAA,UACTC,EAAE;AAAA,YACA,WAAWP;AAAA,YACX,SAASE;AAAA,YACT,GAAGC;AAAAA,UACf,CAAW;AAAA,UACDK,EAAE;AAAA,UACFP;AAAA,QACD;AAAA,QACD,gBAAgBC;AAAA,QAChB,gBAAgBH;AAAAA,QAChB,YAAY;AAAA,QACZ,oBAAoBC;AAAA,QACpB,SAAS;AAAA,QACT,UAA0BI,gBAAAA,EAAE,GAAG,EAAE;AAAA,MAClC;AAAA,IACP;AAAA,EACG;AACH;AACA,EAAE,cAAc;","x_google_ignoreList":[0]}