@symbo.ls/scratch 2.11.212 → 2.11.216

package/dist/cjs/index.js

@@ -66,9 +66,9 @@ var require_cjs = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/key.js
+// ../../node_modules/@domql/utils/dist/cjs/key.js
 var require_key = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/key.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/key.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -105,9 +105,9 @@ var require_key = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/env.js
+// ../../node_modules/@domql/utils/dist/cjs/env.js
 var require_env = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/env.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/env.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -143,9 +143,9 @@ var require_env = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/globals.js
+// ../../node_modules/@domql/utils/dist/cjs/globals.js
 var require_globals = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/globals.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/globals.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -179,9 +179,9 @@ var require_globals = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/node.js
+// ../../node_modules/@domql/utils/dist/cjs/node.js
 var require_node = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/node.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/node.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -216,9 +216,9 @@ var require_node = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/types.js
+// ../../node_modules/@domql/utils/dist/cjs/types.js
 var require_types = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/types.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/types.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -241,47 +241,47 @@ var require_types = __commonJS({
     __export2(types_exports, {
       TYPES: () => TYPES,
       is: () => is,
-      isArray: () => isArray6,
+      isArray: () => isArray7,
       isBoolean: () => isBoolean,
       isDefined: () => isDefined2,
       isFunction: () => isFunction2,
       isNot: () => isNot,
       isNull: () => isNull,
       isNumber: () => isNumber2,
-      isObject: () => isObject7,
+      isObject: () => isObject8,
       isObjectLike: () => isObjectLike3,
-      isString: () => isString9,
+      isString: () => isString10,
       isUndefined: () => isUndefined
     });
     module2.exports = __toCommonJS2(types_exports);
     var import_node = require_node();
-    var isObject7 = (arg) => {
+    var isObject8 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object" && arg.constructor === Object;
     };
-    var isString9 = (arg) => typeof arg === "string";
+    var isString10 = (arg) => typeof arg === "string";
     var isNumber2 = (arg) => typeof arg === "number";
     var isFunction2 = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
     var isNull = (arg) => arg === null;
-    var isArray6 = (arg) => Array.isArray(arg);
+    var isArray7 = (arg) => Array.isArray(arg);
     var isObjectLike3 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object";
     };
     var isDefined2 = (arg) => {
-      return isObject7(arg) || isObjectLike3(arg) || isString9(arg) || isNumber2(arg) || isFunction2(arg) || isArray6(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
+      return isObject8(arg) || isObjectLike3(arg) || isString10(arg) || isNumber2(arg) || isFunction2(arg) || isArray7(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
       boolean: isBoolean,
-      array: isArray6,
-      object: isObject7,
-      string: isString9,
+      array: isArray7,
+      object: isObject8,
+      string: isString10,
       number: isNumber2,
       null: isNull,
       function: isFunction2,
@@ -303,9 +303,9 @@ var require_types = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/array.js
+// ../../node_modules/@domql/utils/dist/cjs/array.js
 var require_array = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/array.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/array.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -402,9 +402,9 @@ var require_array = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/string.js
+// ../../node_modules/@domql/utils/dist/cjs/string.js
 var require_string = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/string.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/string.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -462,9 +462,9 @@ var require_string = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/object.js
+// ../../node_modules/@domql/utils/dist/cjs/object.js
 var require_object = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/object.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/object.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -914,9 +914,9 @@ var require_object = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/function.js
+// ../../node_modules/@domql/utils/dist/cjs/function.js
 var require_function = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/function.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/function.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -989,9 +989,9 @@ var require_function = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/log.js
+// ../../node_modules/@domql/utils/dist/cjs/log.js
 var require_log = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/log.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/log.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1030,9 +1030,9 @@ var require_log = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/cookie.js
+// ../../node_modules/@domql/utils/dist/cjs/cookie.js
 var require_cookie = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/cookie.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/cookie.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1086,9 +1086,9 @@ var require_cookie = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/tags.js
+// ../../node_modules/@domql/utils/dist/cjs/tags.js
 var require_tags = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/tags.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/tags.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1251,9 +1251,9 @@ var require_tags = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/index.js
+// ../../node_modules/@domql/utils/dist/cjs/index.js
 var require_cjs2 = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/index.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1307,6 +1307,7 @@ __export(src_exports, {
   MEDIA: () => MEDIA,
   RESET: () => RESET,
   SEQUENCE: () => SEQUENCE,
+  SHADOW: () => SHADOW,
   SPACING: () => SPACING,
   SVG: () => SVG,
   SVG_DATA: () => SVG_DATA,
@@ -1350,6 +1351,7 @@ __export(src_exports, {
   getRgbTone: () => getRgbTone,
   getSequenceValue: () => getSequenceValue,
   getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
+  getShadow: () => getShadow,
   getSpacingBasedOnRatio: () => getSpacingBasedOnRatio,
   getSpacingByKey: () => getSpacingByKey,
   getTheme: () => getTheme,
@@ -1384,12 +1386,14 @@ __export(src_exports, {
   setInCustomFontMedia: () => setInCustomFontMedia,
   setMediaTheme: () => setMediaTheme,
   setSVG: () => setSVG,
+  setShadow: () => setShadow,
   setTheme: () => setTheme,
   setValue: () => setValue,
   setVariables: () => setVariables,
   splitTransition: () => splitTransition,
   transformBackgroundImage: () => transformBackgroundImage,
   transformBorder: () => transformBorder,
+  transformBoxShadow: () => transformBoxShadow,
   transformDuration: () => transformDuration,
   transformShadow: () => transformShadow,
   transformTextStroke: () => transformTextStroke,
@@ -1685,6 +1689,7 @@ __export(defaultConfig_exports, {
   MEDIA: () => MEDIA,
   RESET: () => RESET,
   SEQUENCE: () => SEQUENCE,
+  SHADOW: () => SHADOW,
   SPACING: () => SPACING,
   SVG: () => SVG,
   SVG_DATA: () => SVG_DATA,
@@ -1807,6 +1812,9 @@ var GRADIENT = {};
 // src/defaultConfig/theme.js
 var THEME = {};
 
+// src/defaultConfig/shadow.js
+var SHADOW = {};
+
 // src/defaultConfig/icons.js
 var ICONS = {};
 
@@ -2018,19 +2026,21 @@ var getSequenceValue = (value = "A", sequenceProps) => {
   const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
   let absValue = isNegative ? letterVal.slice(1) : letterVal;
   let mediaName = "";
-  if (absValue.includes("-")) {
-    mediaName = "-" + absValue.split("-")[1].toLowerCase();
-    absValue = absValue.split("-")[0];
+  if (absValue.includes("_")) {
+    mediaName = "_" + absValue.split("_")[1].toLowerCase();
+    absValue = absValue.split("_")[0];
   }
-  const varValue = (v) => `var(${prefix}${v}${mediaName})`;
+  const varValue = (v) => startsWithDashOrLetterRegex.test(v) ? `var(${prefix}${v}${mediaName})` : v;
   if (absValue.includes("+")) {
-    const args = absValue.split("+");
-    const [first, second] = args;
+    const [first, second] = absValue.split("+");
     const joint = `${varValue(first)} + ${varValue(second)}`;
     return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
+  } else if (absValue.includes("*")) {
+    const [first, second] = absValue.split("*");
+    const joint = `${varValue(first)} * ${varValue(second)}`;
+    return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
   } else if (absValue.includes("-")) {
-    const args = absValue.split("-");
-    const [first, second] = args;
+    const [first, second] = absValue.split("-");
     const joint = `${varValue(first)} - ${varValue(second)}`;
     return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
   }
@@ -2096,14 +2106,14 @@ var applySequenceVars = (props, mediaName, options = {}) => {
       let underMediaQuery = CSS_VARS2[`@media ${query}`];
       if (!underMediaQuery)
         underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
-      underMediaQuery[item.variable] = `var(${item.variable + "-" + mediaName})`;
-      CSS_VARS2[item.variable + "-" + mediaName] = value;
+      underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
+      CSS_VARS2[item.variable + "_" + mediaName] = value;
     } else {
       if (options.useDefault === false) {
         CSS_VARS2[item.variable] = value;
       } else {
-        CSS_VARS2[item.variable + "-default"] = value;
-        CSS_VARS2[item.variable] = `var(${item.variable + "-default"})`;
+        CSS_VARS2[item.variable + "_default"] = value;
+        CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
       }
     }
   }
@@ -2184,6 +2194,7 @@ __export(system_exports, {
   getFontSizeByKey: () => getFontSizeByKey,
   getMediaColor: () => getMediaColor,
   getMediaTheme: () => getMediaTheme,
+  getShadow: () => getShadow,
   getSpacingBasedOnRatio: () => getSpacingBasedOnRatio,
   getSpacingByKey: () => getSpacingByKey,
   getTheme: () => getTheme,
@@ -2197,6 +2208,7 @@ __export(system_exports, {
   setIcon: () => setIcon,
   setMediaTheme: () => setMediaTheme,
   setSVG: () => setSVG,
+  setShadow: () => setShadow,
   setTheme: () => setTheme
 });
 
@@ -2288,8 +2300,13 @@ var setColor = (val, key, suffix) => {
   }
   if ((0, import_utils9.isObject)(val)) {
     const obj = {};
-    for (const variant in val)
-      obj[variant] = setColor(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
+    for (const variant in val) {
+      obj[variant] = setColor(
+        val[variant],
+        key,
+        variant.slice(0, 1) === "@" ? variant.slice(1) : variant
+      );
+    }
     return obj;
   }
   const CSSVar = `--color-${key}` + (suffix ? `-${suffix}` : "");
@@ -2747,6 +2764,93 @@ var getSpacingBasedOnRatio = (props, propertyName, val) => {
   return getSpacingByKey(value, propertyName);
 };
 
+// src/system/shadow.js
+var import_utils20 = __toESM(require_cjs2(), 1);
+var setShadow = (value, key, suffix, prefers) => {
+  const CONFIG2 = getActiveConfig();
+  if ((0, import_utils20.isArray)(value)) {
+    return {
+      "@light": setShadow(value[0], key, "light"),
+      "@dark": setShadow(value[1], key, "dark")
+    };
+  }
+  if ((0, import_utils20.isObject)(value)) {
+    const obj = {};
+    for (const variant in value) {
+      obj[variant] = setShadow(
+        value[variant],
+        key,
+        variant.startsWith("@") ? variant.slice(1) : variant
+      );
+    }
+    return obj;
+  }
+  if ((0, import_utils20.isString)(value) && value.includes(",")) {
+    value = value.split(",").map((v) => {
+      v = v.trim();
+      if (v.startsWith("--"))
+        return `var(${v})`;
+      if (getColor(v).length > 2)
+        return getColor(v);
+      if (v.includes("px") || v.slice(-2) === "em")
+        return v;
+      const arr = v.split(" ");
+      if (!arr.length)
+        return v;
+      return arr.map((v2) => getSpacingByKey(v2, "shadow").shadow).join(" ");
+    }).join(" ");
+  }
+  const CSSVar = `--shadow-${key}` + (suffix ? `-${suffix}` : "");
+  if (CONFIG2.useVariable) {
+    CONFIG2.CSS_VARS[CSSVar] = value;
+  }
+  return {
+    var: CSSVar,
+    value
+  };
+};
+var getShadow = (value, globalTheme) => {
+  const CONFIG2 = getActiveConfig();
+  if (!globalTheme)
+    globalTheme = CONFIG2.globalTheme;
+  if (!(0, import_utils20.isString)(value)) {
+    if (CONFIG2.verbose)
+      console.warn(value, "- type for color is not valid");
+    return;
+  }
+  if (value.slice(0, 2) === "--")
+    return `var(${value})`;
+  const [name] = (0, import_utils20.isArray)(value) ? value : value.split(" ");
+  const { SHADOW: SHADOW2 } = CONFIG2;
+  const val = SHADOW2[name];
+  const isObj = (0, import_utils20.isObject)(val);
+  if (!val) {
+    if (CONFIG2.verbose)
+      console.warn("Can't find color ", name);
+    return value;
+  }
+  if (globalTheme) {
+    if (val[globalTheme])
+      return val[globalTheme].value;
+    else if (CONFIG2.verbose)
+      console.warn(value, " - does not have ", globalTheme);
+  }
+  if (isObj && val.value)
+    return val.value;
+  if (isObj) {
+    const obj = {};
+    for (const mediaName in val) {
+      const query = CONFIG2.MEDIA[mediaName.slice(1)];
+      const media = `@media screen and ${query}`;
+      obj[media] = val.value;
+    }
+    return obj;
+  }
+  if (CONFIG2.verbose)
+    console.warn("Can't find color", value);
+  return value;
+};
+
 // src/system/timing.js
 var applyTimingSequence = () => {
   const CONFIG2 = getActiveConfig();
@@ -2770,11 +2874,11 @@ var getTimingByKey = (value, property = "timing") => {
 };
 
 // src/system/document.js
-var import_utils22 = __toESM(require_cjs2(), 1);
+var import_utils23 = __toESM(require_cjs2(), 1);
 var applyDocument = () => {
   const CONFIG2 = getActiveConfig();
   const { DOCUMENT: DOCUMENT2, FONT_FAMILY: FONT_FAMILY2, THEME: THEME2, TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
-  return (0, import_utils22.merge)(DOCUMENT2, {
+  return (0, import_utils23.merge)(DOCUMENT2, {
     theme: THEME2.document,
     fontFamily: getDefaultOrFirstKey(FONT_FAMILY2),
     fontSize: TYPOGRAPHY2.base,
@@ -2858,7 +2962,7 @@ var appendSVG = (lib, options = DEF_OPTIONS) => {
 };
 
 // src/system/reset.js
-var import_utils25 = __toESM(require_cjs2(), 1);
+var import_utils26 = __toESM(require_cjs2(), 1);
 var applyReset = (reset = {}) => {
   const CONFIG2 = getActiveConfig();
   const { RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG2;
@@ -2880,8 +2984,8 @@ var applyReset = (reset = {}) => {
     const { body, ...templates } = TYPOGRAPHY2.templates;
     const globalTheme = CONFIG2.useDocumentTheme ? getMediaTheme("document", `@${CONFIG2.globalTheme}`) : {};
     if (RESET2.html)
-      (0, import_utils25.overwriteDeep)(RESET2.html, globalTheme);
-    return (0, import_utils25.deepMerge)((0, import_utils25.merge)(RESET2, reset), {
+      (0, import_utils26.overwriteDeep)(RESET2.html, globalTheme);
+    return (0, import_utils26.deepMerge)((0, import_utils26.merge)(RESET2, reset), {
       html: {
         position: "absolute",
         // overflow: 'hidden',
@@ -2920,7 +3024,7 @@ var applyReset = (reset = {}) => {
 };
 
 // src/transforms/index.js
-var import_utils26 = __toESM(require_cjs2(), 1);
+var import_utils27 = __toESM(require_cjs2(), 1);
 var isBorderStyle = (str) => [
   "none",
   "hidden",
@@ -2960,21 +3064,10 @@ var transformTextStroke = (stroke) => {
     return v;
   }).join(" ");
 };
-var transformShadow = (shadows) => shadows.split("|").map((shadow) => {
-  return shadow.split(", ").map((v) => {
-    v = v.trim();
-    if (v.slice(0, 2) === "--")
-      return `var(${v})`;
-    if (getColor(v).length > 2)
-      return getColor(v);
-    if (v.includes("px") || v.slice(-2) === "em")
-      return v;
-    const arr = v.split(" ");
-    if (!arr.length)
-      return v;
-    return arr.map((v2) => getSpacingByKey(v2, "shadow").shadow).join(" ");
-  }).join(" ");
-}).join(",");
+var transformShadow = (sh, globalTheme) => {
+  return sh.split(",").map((shadow) => getShadow(shadow, globalTheme)).join(",");
+};
+var transformBoxShadow = (sh, globalTheme) => getShadow(sh, globalTheme);
 var transformBackgroundImage = (backgroundImage, globalTheme) => {
   const CONFIG2 = getActiveConfig();
   return backgroundImage.split(", ").map((v) => {
@@ -2991,7 +3084,7 @@ var transformBackgroundImage = (backgroundImage, globalTheme) => {
     return v;
   }).join(" ");
 };
-var transfromGap = (gap) => (0, import_utils26.isString)(gap) && gap.split(" ").map((v) => getSpacingByKey(v, "gap").gap).join(" ");
+var transfromGap = (gap) => (0, import_utils27.isString)(gap) && gap.split(" ").map((v) => getSpacingByKey(v, "gap").gap).join(" ");
 var transformTransition = (transition) => {
   const arr = transition.split(" ");
   if (!arr.length)
@@ -3009,7 +3102,7 @@ var transformTransition = (transition) => {
   }).join(" ");
 };
 var transformDuration = (duration, props, propertyName) => {
-  if (!(0, import_utils26.isString)(duration))
+  if (!(0, import_utils27.isString)(duration))
     return;
   return duration.split(",").map((v) => getTimingByKey(v).timing || v).join(",");
 };
@@ -3021,9 +3114,9 @@ var splitTransition = (transition) => {
 };
 
 // src/set.js
-var import_utils27 = __toESM(require_cjs2(), 1);
+var import_utils28 = __toESM(require_cjs2(), 1);
 var setCases = (val, key) => {
-  if ((0, import_utils27.isFunction)(val))
+  if ((0, import_utils28.isFunction)(val))
     return val();
   return val;
 };
@@ -3039,6 +3132,7 @@ var VALUE_TRANSFORMERS = {
   svg_data: setSameValue,
   typography: setSameValue,
   cases: setCases,
+  shadow: setShadow,
   spacing: setSameValue,
   media: setSameValue,
   timing: setSameValue,