@descope/web-components-ui 1.0.94 → 1.0.96

package/dist/cjs/index.cjs.js

@@ -15,6 +15,16 @@ const kebabCase = (str) =>
 
 const kebabCaseJoin = (...args) => kebabCase(args.filter((arg) => !!arg).join('-'));
 
+const isUrl = (maybeUrl) => {
+	try {
+		new URL(maybeUrl);
+
+		return true;
+	} catch (e) {
+		return false;
+	}
+};
+
 const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
 
 const getCssVarName = (...args) =>
@@ -75,9 +85,20 @@ const transformTheme = (theme, path, getTransformation) => {
 const stringifyArray = (strArr) =>
 	strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
 
+const getCssVarValue = (val) => {
+	switch (true) {
+		case Array.isArray(val):
+			return stringifyArray(val)
+		case isUrl(val):
+			return `url(${val})`
+		default:
+			return val
+	}
+};
+
 const themeToCSSVarsObj = (theme) =>
 	transformTheme(theme, [], (path, val) => ({
-		[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val
+		[getVarName(path)]: getCssVarValue(val)
 	}));
 
 const getThemeRefs = (theme, prefix) =>

package/dist/cjs/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../src/constants.js","../../src/helpers/index.js","../../src/helpers/componentHelpers.js","../../src/helpers/themeHelpers/componentsThemeManager.js","../../src/helpers/themeHelpers/index.js"],"sourcesContent":["export const DESCOPE_PREFIX = 'descope';\nexport const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3\nexport const BASE_THEME_SECTION = 'host'\nexport const PORTAL_THEME_PREFIX = '@'","\nexport const kebabCase = (str) =>\n\tstr\n\t\t.replace(/([a-z])([A-Z])/g, '$1-$2')\n\t\t.replace(/[\\s_.]+/g, '-')\n\t\t.toLowerCase();\n\nexport const kebabCaseJoin = (...args) => kebabCase(args.filter((arg) => !!arg).join('-'));\n\nexport const compose = (...fns) =>\n\t(val) =>\n\t\tfns.reduceRight((res, fn) => fn(res), val);\n\nexport const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1)\n\nexport const isFunction = (maybeFunc) => typeof maybeFunc === 'function'","import { kebabCaseJoin } from '.';\nimport { DESCOPE_PREFIX } from '../constants';\n\nexport const observeAttributes = (\n\tele,\n\tcallback,\n\t{ excludeAttrs = [], includeAttrs = [] }\n) => {\n\t// sync all attrs on init\n\tconst filteredAttrs = Array.from(ele.attributes)\n\t\t.filter((attr) =>\n\t\t\t!excludeAttrs.includes(attr.name) &&\n\t\t\t(!includeAttrs.length || includeAttrs.includes(attr.name))\n\t\t)\n\t\t.map((attr) => attr.name)\n\n\tcallback(filteredAttrs);\n\n\tconst observer = new MutationObserver((mutationsList) => {\n\t\tfor (const mutation of mutationsList) {\n\t\t\tif (\n\t\t\t\tmutation.type === 'attributes' &&\n\t\t\t\t!excludeAttrs.includes(mutation.attributeName) &&\n\t\t\t\t(!includeAttrs.length || includeAttrs.includes(mutation.attributeName))\n\t\t\t) {\n\t\t\t\tcallback([mutation.attributeName]);\n\t\t\t}\n\t\t}\n\t});\n\n\tobserver.observe(ele, { attributes: true });\n};\n\n// calling the callback with this object: { addedNodes, removedNodes }\nexport const observeChildren = (\n\tele,\n\tcallback,\n) => {\n\tcallback({ addedNodes: Array.from(ele.children), removedNodes: [] });\n\n\tconst observer = new MutationObserver((mutationsList) => {\n\t\tfor (const mutation of mutationsList) {\n\t\t\tif (mutation.type === 'childList') {\n\t\t\t\tcallback(mutation);\n\t\t\t}\n\t\t}\n\t});\n\n\tobserver.observe(ele, { childList: true });\n};\n\nconst createSyncAttrsCb =\n\t(srcEle, targetEle, mapAttrs = {}) =>\n\t\t(attrNames) => {\n\t\t\tattrNames.forEach((attrName) => {\n\t\t\t\tconst targetAttrName = mapAttrs[attrName] || attrName;\n\t\t\t\tconst srcAttrVal = srcEle.getAttribute(attrName);\n\t\t\t\tif (srcAttrVal !== null) {\n\t\t\t\t\tif (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {\n\t\t\t\t\t\ttargetEle.setAttribute(targetAttrName, srcAttrVal);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\ttargetEle.removeAttribute(targetAttrName);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\nexport const syncAttrs = (ele1, ele2, options) => {\n\tobserveAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);\n\tobserveAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);\n};\n\nexport const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);\n\nexport const getCssVarName = (...args) =>\n\t`--${kebabCaseJoin(...args)}`;\n\nexport const forwardAttrs = (source, dest, options = {}) => {\n\tobserveAttributes(\n\t\tsource,\n\t\tcreateSyncAttrsCb(source, dest, options.mapAttrs),\n\t\toptions\n\t);\n};\n\nexport const forwardProps = (src, target, props = []) => {\n\tif (!props.length) return;\n\n\tconst config = props.reduce((acc, prop) => Object.assign(acc, {\n\t\t[prop]: {\n\t\t\tget() {\n\t\t\t\treturn src[prop]\n\t\t\t},\n\t\t\tset(v) {\n\t\t\t\tsrc[prop] = v\n\t\t\t}\n\t\t}\n\t}), {})\n\n\tObject.defineProperties(target, config)\n}\n","\nclass ComponentsThemeManager {\n  static mountOnPropName = 'DescopeThemeManager';\n\n  #themes = {};\n\n  #currentThemeName = 'light';\n\n  #callbacks = new Set();\n\n  #notify() {\n    this.#callbacks.forEach(cb => cb?.());\n  };\n\n  get currentThemeName() {\n    return this.#currentThemeName;\n  }\n\n  set currentThemeName(themeName) {\n    this.#currentThemeName = themeName;\n    this.#notify();\n  }\n\n  get currentTheme() {\n    return this.#themes[this.currentThemeName];\n  }\n\n  onCurrentThemeChange(cb) {\n    this.#callbacks.add(cb);\n\n    return () => { this.#callbacks.delete(cb); };\n  };\n\n  set themes(themes) {\n    this.#themes = themes;\n    this.#notify();\n  }\n}\n\nexport const componentsThemeManager = new ComponentsThemeManager()\n","import merge from 'lodash.merge';\nimport set from 'lodash.set';\nimport { BASE_THEME_SECTION, DESCOPE_PREFIX, PORTAL_THEME_PREFIX } from '../../constants';\nimport { kebabCase } from '..';\nimport { getComponentName, getCssVarName } from '../componentHelpers';\n\nconst getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);\n\nconst transformTheme = (theme, path, getTransformation) => {\n\treturn Object.entries(theme).reduce((acc, [key, val]) => {\n\t\tif (val?.constructor !== Object) {\n\t\t\treturn merge(acc, getTransformation(path.concat(key), val));\n\t\t} else {\n\t\t\treturn merge(acc, transformTheme(val, [...path, key], getTransformation));\n\t\t}\n\t}, {});\n};\n\nconst stringifyArray = (strArr) =>\n\tstrArr.map((str) => (str.includes(' ') ? `\"${str}\"` : str)).join(', ');\n\nexport const themeToCSSVarsObj = (theme) =>\n\ttransformTheme(theme, [], (path, val) => ({\n\t\t[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val\n\t}));\n\nexport const getThemeRefs = (theme, prefix) =>\n\ttransformTheme(theme, [], (path) =>\n\t\tset({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)\n\t);\n\nexport const globalsThemeToStyle = (theme, themeName = '') => `\n*[data-theme=\"${themeName}\"] {\n\t${Object.entries(themeToCSSVarsObj(theme)).reduce(\n\t(acc, entry) => (acc += `${entry.join(':')};\\n`),\n\t''\n)}\n}\n`;\n\nconst componentsThemeToStyleObj = (componentsTheme) =>\n\ttransformTheme(componentsTheme, [], (path, val) => {\n\t\tconst [component, ...restPath] = path;\n\t\tconst property = restPath.pop();\n\t\tconst componentName = getComponentName(component);\n\n\t\t// we need a support for portal components theme (e.g. overlay)\n\t\t// this allows us to generate those themes under different sections\n\t\t// if the theme has root level attribute that starts with #\n\t\t// we are generating a new theme\n\t\tlet themeName = BASE_THEME_SECTION\n\n\t\tif (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {\n\t\t\tthemeName = restPath.shift();\n\t\t}\n\n\t\t// do not start with underscore -> key:value, must have 2 no underscore attrs in a row\n\t\t// starts with underscore -> attribute selector\n\t\tconst attrsSelector = restPath.reduce((acc, section, idx) => {\n\t\t\tif (section.startsWith('_'))\n\t\t\t\treturn (acc += `[${kebabCase(section.replace(/^_/, ''))}=\"true\"]`);\n\n\t\t\tconst nextSection = restPath[idx + 1];\n\n\t\t\tif (typeof nextSection !== 'string' || nextSection.startsWith('_')) {\n\t\t\t\tconsole.error(\n\t\t\t\t\t'theme generator',\n\t\t\t\t\t`your theme structure is invalid, attribute \"${section}\" is followed by \"${nextSection}\" which is not allowed`\n\t\t\t\t);\n\t\t\t\treturn acc;\n\t\t\t}\n\n\t\t\treturn (acc += `[${kebabCase(section)}=\"${restPath\n\t\t\t\t.splice(idx + 1, 1)\n\t\t\t\t.join('')}\"]`);\n\t\t}, '');\n\n\t\tlet selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;\n\n\t\treturn {\n\t\t\t[componentName]: {\n\t\t\t\t[themeName]: {\n\t\t\t\t\t[selector]: {\n\t\t\t\t\t\t[property]: val\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t});\n\n\nexport const createComponentsTheme = (componentsTheme) => {\n\tconst styleObj = componentsThemeToStyleObj(componentsTheme);\n\n\treturn Object.keys(styleObj).reduce(\n\t\t(acc, componentName) => {\n\t\t\tconst componentThemes = styleObj[componentName];\n\n\t\t\treturn Object.assign(acc, {\n\t\t\t\t[componentName]: Object.keys(componentThemes)\n\t\t\t\t\t.reduce((acc, theme) =>\n\t\t\t\t\t\tObject.assign(acc, { [theme]: componentsThemeToStyle(componentThemes[theme]) }),\n\t\t\t\t\t\t{})\n\t\t\t})\n\t\t},\n\t\t{}\n\t);\n}\n\nconst componentsThemeToStyle = (componentsTheme) =>\n\tObject.entries(componentsTheme).reduce(\n\t\t(acc, [selector, vars]) =>\n\t\t(acc += `${selector} { \\n${Object.entries(\n\t\t\tvars\n\t\t)\n\t\t\t.map(([key, val]) => `${key}: ${val}`)\n\t\t\t.join(';\\n')} \\n}\\n\\n`),\n\t\t''\n\t);\n\nexport const themeToStyle = ({ globals, components }, themeName) => ({\n\tglobals: globalsThemeToStyle(globals, themeName),\n\tcomponents: createComponentsTheme(components)\n});\n\nconst useVar = (varName) => `var(${varName})`;\n\nexport const createHelperVars = (theme, prefix) => {\n\tconst res = transformTheme(theme, [], (path, value) => {\n\t\tconst modifiedPath = [...path];\n\t\tconst property = modifiedPath.splice(-1);\n\t\tconst varName = getCssVarName(prefix, property);\n\n\t\tconst vars = { [property]: varName };\n\t\tconst theme = set({}, [...modifiedPath, varName], value);\n\t\tconst useVars = { [property]: useVar(varName) };\n\n\t\treturn { theme, useVars, vars };\n\t});\n\n\treturn [res.theme, res.useVars, res.vars];\n};\n\nexport { componentsThemeManager } from './componentsThemeManager'\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../src/constants.js","../../src/helpers/index.js","../../src/helpers/componentHelpers.js","../../src/helpers/themeHelpers/componentsThemeManager.js","../../src/helpers/themeHelpers/index.js"],"sourcesContent":["export const DESCOPE_PREFIX = 'descope';\nexport const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3\nexport const BASE_THEME_SECTION = 'host'\nexport const PORTAL_THEME_PREFIX = '@'","\nexport const kebabCase = (str) =>\n\tstr\n\t\t.replace(/([a-z])([A-Z])/g, '$1-$2')\n\t\t.replace(/[\\s_.]+/g, '-')\n\t\t.toLowerCase();\n\nexport const kebabCaseJoin = (...args) => kebabCase(args.filter((arg) => !!arg).join('-'));\n\nexport const compose = (...fns) =>\n\t(val) =>\n\t\tfns.reduceRight((res, fn) => fn(res), val);\n\nexport const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1)\n\nexport const isFunction = (maybeFunc) => typeof maybeFunc === 'function';\n\nexport const isUrl = (maybeUrl) => {\n\ttry {\n\t\tnew URL(maybeUrl)\n\n\t\treturn true;\n\t} catch (e) {\n\t\treturn false;\n\t}\n}","import { kebabCaseJoin } from '.';\nimport { DESCOPE_PREFIX } from '../constants';\n\nexport const observeAttributes = (\n\tele,\n\tcallback,\n\t{ excludeAttrs = [], includeAttrs = [] }\n) => {\n\t// sync all attrs on init\n\tconst filteredAttrs = Array.from(ele.attributes)\n\t\t.filter((attr) =>\n\t\t\t!excludeAttrs.includes(attr.name) &&\n\t\t\t(!includeAttrs.length || includeAttrs.includes(attr.name))\n\t\t)\n\t\t.map((attr) => attr.name)\n\n\tcallback(filteredAttrs);\n\n\tconst observer = new MutationObserver((mutationsList) => {\n\t\tfor (const mutation of mutationsList) {\n\t\t\tif (\n\t\t\t\tmutation.type === 'attributes' &&\n\t\t\t\t!excludeAttrs.includes(mutation.attributeName) &&\n\t\t\t\t(!includeAttrs.length || includeAttrs.includes(mutation.attributeName))\n\t\t\t) {\n\t\t\t\tcallback([mutation.attributeName]);\n\t\t\t}\n\t\t}\n\t});\n\n\tobserver.observe(ele, { attributes: true });\n};\n\n// calling the callback with this object: { addedNodes, removedNodes }\nexport const observeChildren = (\n\tele,\n\tcallback,\n) => {\n\tcallback({ addedNodes: Array.from(ele.children), removedNodes: [] });\n\n\tconst observer = new MutationObserver((mutationsList) => {\n\t\tfor (const mutation of mutationsList) {\n\t\t\tif (mutation.type === 'childList') {\n\t\t\t\tcallback(mutation);\n\t\t\t}\n\t\t}\n\t});\n\n\tobserver.observe(ele, { childList: true });\n};\n\nconst createSyncAttrsCb =\n\t(srcEle, targetEle, mapAttrs = {}) =>\n\t\t(attrNames) => {\n\t\t\tattrNames.forEach((attrName) => {\n\t\t\t\tconst targetAttrName = mapAttrs[attrName] || attrName;\n\t\t\t\tconst srcAttrVal = srcEle.getAttribute(attrName);\n\t\t\t\tif (srcAttrVal !== null) {\n\t\t\t\t\tif (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {\n\t\t\t\t\t\ttargetEle.setAttribute(targetAttrName, srcAttrVal);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\ttargetEle.removeAttribute(targetAttrName);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\nexport const syncAttrs = (ele1, ele2, options) => {\n\tobserveAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);\n\tobserveAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);\n};\n\nexport const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);\n\nexport const getCssVarName = (...args) =>\n\t`--${kebabCaseJoin(...args)}`;\n\nexport const forwardAttrs = (source, dest, options = {}) => {\n\tobserveAttributes(\n\t\tsource,\n\t\tcreateSyncAttrsCb(source, dest, options.mapAttrs),\n\t\toptions\n\t);\n};\n\nexport const forwardProps = (src, target, props = []) => {\n\tif (!props.length) return;\n\n\tconst config = props.reduce((acc, prop) => Object.assign(acc, {\n\t\t[prop]: {\n\t\t\tget() {\n\t\t\t\treturn src[prop]\n\t\t\t},\n\t\t\tset(v) {\n\t\t\t\tsrc[prop] = v\n\t\t\t}\n\t\t}\n\t}), {})\n\n\tObject.defineProperties(target, config)\n}\n","\nclass ComponentsThemeManager {\n  static mountOnPropName = 'DescopeThemeManager';\n\n  #themes = {};\n\n  #currentThemeName = 'light';\n\n  #callbacks = new Set();\n\n  #notify() {\n    this.#callbacks.forEach(cb => cb?.());\n  };\n\n  get currentThemeName() {\n    return this.#currentThemeName;\n  }\n\n  set currentThemeName(themeName) {\n    this.#currentThemeName = themeName;\n    this.#notify();\n  }\n\n  get currentTheme() {\n    return this.#themes[this.currentThemeName];\n  }\n\n  onCurrentThemeChange(cb) {\n    this.#callbacks.add(cb);\n\n    return () => { this.#callbacks.delete(cb); };\n  };\n\n  set themes(themes) {\n    this.#themes = themes;\n    this.#notify();\n  }\n}\n\nexport const componentsThemeManager = new ComponentsThemeManager()\n","import merge from 'lodash.merge';\nimport set from 'lodash.set';\nimport { BASE_THEME_SECTION, DESCOPE_PREFIX, PORTAL_THEME_PREFIX } from '../../constants';\nimport { isUrl, kebabCase } from '..';\nimport { getComponentName, getCssVarName } from '../componentHelpers';\n\nconst getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);\n\nconst transformTheme = (theme, path, getTransformation) => {\n\treturn Object.entries(theme).reduce((acc, [key, val]) => {\n\t\tif (val?.constructor !== Object) {\n\t\t\treturn merge(acc, getTransformation(path.concat(key), val));\n\t\t} else {\n\t\t\treturn merge(acc, transformTheme(val, [...path, key], getTransformation));\n\t\t}\n\t}, {});\n};\n\nconst stringifyArray = (strArr) =>\n\tstrArr.map((str) => (str.includes(' ') ? `\"${str}\"` : str)).join(', ');\n\nconst getCssVarValue = (val) => {\n\tswitch (true) {\n\t\tcase Array.isArray(val):\n\t\t\treturn stringifyArray(val)\n\t\tcase isUrl(val):\n\t\t\treturn `url(${val})`\n\t\tdefault:\n\t\t\treturn val\n\t}\n}\n\nexport const themeToCSSVarsObj = (theme) =>\n\ttransformTheme(theme, [], (path, val) => ({\n\t\t[getVarName(path)]: getCssVarValue(val)\n\t}));\n\nexport const getThemeRefs = (theme, prefix) =>\n\ttransformTheme(theme, [], (path) =>\n\t\tset({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)\n\t);\n\nexport const globalsThemeToStyle = (theme, themeName = '') => `\n*[data-theme=\"${themeName}\"] {\n\t${Object.entries(themeToCSSVarsObj(theme)).reduce(\n\t(acc, entry) => (acc += `${entry.join(':')};\\n`),\n\t''\n)}\n}\n`;\n\nconst componentsThemeToStyleObj = (componentsTheme) =>\n\ttransformTheme(componentsTheme, [], (path, val) => {\n\t\tconst [component, ...restPath] = path;\n\t\tconst property = restPath.pop();\n\t\tconst componentName = getComponentName(component);\n\n\t\t// we need a support for portal components theme (e.g. overlay)\n\t\t// this allows us to generate those themes under different sections\n\t\t// if the theme has root level attribute that starts with #\n\t\t// we are generating a new theme\n\t\tlet themeName = BASE_THEME_SECTION\n\n\t\tif (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {\n\t\t\tthemeName = restPath.shift();\n\t\t}\n\n\t\t// do not start with underscore -> key:value, must have 2 no underscore attrs in a row\n\t\t// starts with underscore -> attribute selector\n\t\tconst attrsSelector = restPath.reduce((acc, section, idx) => {\n\t\t\tif (section.startsWith('_'))\n\t\t\t\treturn (acc += `[${kebabCase(section.replace(/^_/, ''))}=\"true\"]`);\n\n\t\t\tconst nextSection = restPath[idx + 1];\n\n\t\t\tif (typeof nextSection !== 'string' || nextSection.startsWith('_')) {\n\t\t\t\tconsole.error(\n\t\t\t\t\t'theme generator',\n\t\t\t\t\t`your theme structure is invalid, attribute \"${section}\" is followed by \"${nextSection}\" which is not allowed`\n\t\t\t\t);\n\t\t\t\treturn acc;\n\t\t\t}\n\n\t\t\treturn (acc += `[${kebabCase(section)}=\"${restPath\n\t\t\t\t.splice(idx + 1, 1)\n\t\t\t\t.join('')}\"]`);\n\t\t}, '');\n\n\t\tlet selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;\n\n\t\treturn {\n\t\t\t[componentName]: {\n\t\t\t\t[themeName]: {\n\t\t\t\t\t[selector]: {\n\t\t\t\t\t\t[property]: val\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t});\n\n\nexport const createComponentsTheme = (componentsTheme) => {\n\tconst styleObj = componentsThemeToStyleObj(componentsTheme);\n\n\treturn Object.keys(styleObj).reduce(\n\t\t(acc, componentName) => {\n\t\t\tconst componentThemes = styleObj[componentName];\n\n\t\t\treturn Object.assign(acc, {\n\t\t\t\t[componentName]: Object.keys(componentThemes)\n\t\t\t\t\t.reduce((acc, theme) =>\n\t\t\t\t\t\tObject.assign(acc, { [theme]: componentsThemeToStyle(componentThemes[theme]) }),\n\t\t\t\t\t\t{})\n\t\t\t})\n\t\t},\n\t\t{}\n\t);\n}\n\nconst componentsThemeToStyle = (componentsTheme) =>\n\tObject.entries(componentsTheme).reduce(\n\t\t(acc, [selector, vars]) =>\n\t\t(acc += `${selector} { \\n${Object.entries(\n\t\t\tvars\n\t\t)\n\t\t\t.map(([key, val]) => `${key}: ${val}`)\n\t\t\t.join(';\\n')} \\n}\\n\\n`),\n\t\t''\n\t);\n\nexport const themeToStyle = ({ globals, components }, themeName) => ({\n\tglobals: globalsThemeToStyle(globals, themeName),\n\tcomponents: createComponentsTheme(components)\n});\n\nconst useVar = (varName) => `var(${varName})`;\n\nexport const createHelperVars = (theme, prefix) => {\n\tconst res = transformTheme(theme, [], (path, value) => {\n\t\tconst modifiedPath = [...path];\n\t\tconst property = modifiedPath.splice(-1);\n\t\tconst varName = getCssVarName(prefix, property);\n\n\t\tconst vars = { [property]: varName };\n\t\tconst theme = set({}, [...modifiedPath, varName], value);\n\t\tconst useVars = { [property]: useVar(varName) };\n\n\t\treturn { theme, useVars, vars };\n\t});\n\n\treturn [res.theme, res.useVars, res.vars];\n};\n\nexport { componentsThemeManager } from './componentsThemeManager'\n"],"names":[],"mappings":"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"}

package/dist/index.esm.js

@@ -25,6 +25,16 @@ const compose = (...fns) =>
 
 const isFunction = (maybeFunc) => typeof maybeFunc === 'function';
 
+const isUrl = (maybeUrl) => {
+	try {
+		new URL(maybeUrl);
+
+		return true;
+	} catch (e) {
+		return false;
+	}
+};
+
 const DESCOPE_PREFIX = 'descope';
 const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
 const BASE_THEME_SECTION = 'host';
@@ -413,6 +423,35 @@ const draggableMixin = (superclass) =>
 			}
 		}
 
+		get #isDraggable() {
+			return this.hasAttribute('draggable') && this.getAttribute('draggable') !== 'false'
+		}
+
+		init() {
+
+			// because we are delegating the focus from the outer component, 
+			// the D&D is not working well in the page editor
+			// in order to solve it we are making the inner component focusable on mouse down
+			// and removing it on complete
+			this.addEventListener('mousedown', (e) => {
+				if (this.#isDraggable) {
+					this.baseElement.setAttribute('tabindex', '-1');
+
+					const onComplete = () => {
+						this.baseElement.removeAttribute('tabindex');
+
+						e.target.removeEventListener('mouseup', onComplete);
+						e.target.removeEventListener('dragend', onComplete);
+					};
+
+					e.target.addEventListener('mouseup', onComplete, { once: true });
+					e.target.addEventListener('dragend', onComplete, { once: true });
+				}
+			});
+
+			super.init?.();
+		}
+
 		attributeChangedCallback(attrName, oldValue, newValue) {
 			super.attributeChangedCallback?.(attrName, oldValue, newValue);
 			if (attrName === 'draggable') {
@@ -4834,9 +4873,20 @@ const transformTheme = (theme, path, getTransformation) => {
 const stringifyArray = (strArr) =>
 	strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
 
+const getCssVarValue = (val) => {
+	switch (true) {
+		case Array.isArray(val):
+			return stringifyArray(val)
+		case isUrl(val):
+			return `url(${val})`
+		default:
+			return val
+	}
+};
+
 const themeToCSSVarsObj = (theme) =>
 	transformTheme(theme, [], (path, val) => ({
-		[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val
+		[getVarName(path)]: getCssVarValue(val)
 	}));
 
 const getThemeRefs = (theme, prefix) =>