@symbo.ls/uikit 2.11.119 → 2.11.122

package/dist/index.cjs.js

@@ -521,7 +521,7 @@ var require_cjs = __commonJS({
           return arr;
         };
         var createNestedObject = (arr, lastValue) => {
-          let nestedObject = {};
+          const nestedObject = {};
           if (arr.length === 0) {
             return lastValue;
           }
@@ -560,7 +560,7 @@ var require_cjs = __commonJS({
         var __toCommonJS22 = (mod) => __copyProps22(__defProp22({}, "__esModule", { value: true }), mod);
         var string_exports = {};
         __export22(string_exports, {
-          replaceLiteralsWithObjectFields: () => replaceLiteralsWithObjectFields3,
+          replaceLiteralsWithObjectFields: () => replaceLiteralsWithObjectFields2,
           stringIncludesAny: () => stringIncludesAny
         });
         module22.exports = __toCommonJS22(string_exports);
@@ -572,19 +572,24 @@ var require_cjs = __commonJS({
           }
           return false;
         };
-        var replaceLiteralsWithObjectFields3 = (str, state) => {
+        var replaceLiteralsWithObjectFields2 = (str, state) => {
+          if (!str.includes("{{"))
+            return str;
           return str.replace(/\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g, (_, parentPath, variable) => {
             if (parentPath) {
-              const parentLevels = parentPath.split("../").filter(Boolean).length;
+              const parentLevels = parentPath.match(/\.\.\//g).length;
               let parentState = state;
               for (let i = 0; i < parentLevels; i++) {
                 parentState = parentState.parent;
+                if (!parentState) {
+                  return "";
+                }
               }
               const value = parentState[variable.trim()];
-              return value ? `${value}` : "";
+              return value !== void 0 ? `${value}` : "";
             } else {
               const value = state[variable.trim()];
-              return value ? `${value}` : "";
+              return value !== void 0 ? `${value}` : "";
             }
           });
         };
@@ -658,6 +663,8 @@ var require_cjs = __commonJS({
         };
         var merge5 = (element, obj, excludeFrom = []) => {
           for (const e in obj) {
+            if (e === "__proto__")
+              continue;
             if (excludeFrom.includes(e) || e.startsWith("__"))
               continue;
             const elementProp = element[e];
@@ -670,6 +677,8 @@ var require_cjs = __commonJS({
         };
         var deepMerge3 = (element, extend, excludeFrom = []) => {
           for (const e in extend) {
+            if (e === "__proto__")
+              continue;
             if (excludeFrom.includes(e) || e.startsWith("__"))
               continue;
             const elementProp = element[e];
@@ -718,6 +727,8 @@ var require_cjs = __commonJS({
         var deepClone22 = (obj, excludeFrom = []) => {
           const o = (0, import_types.isArray)(obj) ? [] : {};
           for (const prop in obj) {
+            if (prop === "__proto__")
+              continue;
             if (excludeFrom.includes(prop) || prop.startsWith("__"))
               continue;
             let objProp = obj[prop];
@@ -819,6 +830,8 @@ var require_cjs = __commonJS({
         };
         var deepDestringify = (obj, stringified = {}) => {
           for (const prop in obj) {
+            if (prop === "__proto__")
+              continue;
             const objProp = obj[prop];
             if ((0, import_types.isString)(objProp)) {
               if (objProp.includes("=>") || objProp.includes("function") || objProp.startsWith("(")) {
@@ -937,6 +950,8 @@ var require_cjs = __commonJS({
         };
         var overwriteDeep2 = (obj, params, excludeFrom = []) => {
           for (const e in params) {
+            if (e === "__proto__")
+              continue;
             if (excludeFrom.includes(e) || e.startsWith("__"))
               continue;
             const objProp = obj[e];
@@ -1264,7 +1279,7 @@ var require_cjs = __commonJS({
       setVariables: () => setVariables
     });
     var import_globals = __toESM2(require_cjs10(), 1);
-    var import_utils16 = __toESM2(require_cjs42(), 1);
+    var import_utils15 = __toESM2(require_cjs42(), 1);
     var ENV = "development";
     var colorStringToRgbaArray = (color) => {
       if (color === "")
@@ -1392,9 +1407,9 @@ var require_cjs = __commonJS({
       return `rgba(${arr})`;
     };
     var getRgbTone = (rgb, tone) => {
-      if ((0, import_utils16.isString)(rgb))
+      if ((0, import_utils15.isString)(rgb))
         rgb = rgb.split(", ").map((v) => parseFloat(v));
-      if ((0, import_utils16.isNumber)(tone))
+      if ((0, import_utils15.isNumber)(tone))
         tone += "";
       const toHex = rgbArrayToHex(rgb);
       const abs2 = tone.slice(0, 1);
@@ -3185,7 +3200,7 @@ var require_types = __commonJS({
       isNumber: () => isNumber,
       isObject: () => isObject5,
       isObjectLike: () => isObjectLike3,
-      isString: () => isString8,
+      isString: () => isString7,
       isUndefined: () => isUndefined,
       isValidHtmlTag: () => isValidHtmlTag
     });
@@ -3198,7 +3213,7 @@ var require_types = __commonJS({
         return false;
       return typeof arg === "object" && arg.constructor === Object;
     };
-    var isString8 = (arg) => typeof arg === "string";
+    var isString7 = (arg) => typeof arg === "string";
     var isNumber = (arg) => typeof arg === "number";
     var isFunction3 = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
@@ -3210,7 +3225,7 @@ var require_types = __commonJS({
       return typeof arg === "object";
     };
     var isDefined = (arg) => {
-      return isObject5(arg) || isObjectLike3(arg) || isString8(arg) || isNumber(arg) || isFunction3(arg) || isArray5(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
+      return isObject5(arg) || isObjectLike3(arg) || isString7(arg) || isNumber(arg) || isFunction3(arg) || isArray5(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
@@ -3219,7 +3234,7 @@ var require_types = __commonJS({
       boolean: isBoolean,
       array: isArray5,
       object: isObject5,
-      string: isString8,
+      string: isString7,
       number: isNumber,
       null: isNull,
       function: isFunction3,
@@ -3322,7 +3337,7 @@ var require_array = __commonJS({
       return arr;
     };
     var createNestedObject = (arr, lastValue) => {
-      let nestedObject = {};
+      const nestedObject = {};
       if (arr.length === 0) {
         return lastValue;
       }
@@ -3363,7 +3378,7 @@ var require_string = __commonJS({
     var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
     var string_exports = {};
     __export2(string_exports, {
-      replaceLiteralsWithObjectFields: () => replaceLiteralsWithObjectFields3,
+      replaceLiteralsWithObjectFields: () => replaceLiteralsWithObjectFields2,
       stringIncludesAny: () => stringIncludesAny
     });
     module2.exports = __toCommonJS2(string_exports);
@@ -3375,19 +3390,24 @@ var require_string = __commonJS({
       }
       return false;
     };
-    var replaceLiteralsWithObjectFields3 = (str, state) => {
+    var replaceLiteralsWithObjectFields2 = (str, state) => {
+      if (!str.includes("{{"))
+        return str;
       return str.replace(/\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g, (_, parentPath, variable) => {
         if (parentPath) {
-          const parentLevels = parentPath.split("../").filter(Boolean).length;
+          const parentLevels = parentPath.match(/\.\.\//g).length;
           let parentState = state;
           for (let i = 0; i < parentLevels; i++) {
             parentState = parentState.parent;
+            if (!parentState) {
+              return "";
+            }
           }
           const value = parentState[variable.trim()];
-          return value ? `${value}` : "";
+          return value !== void 0 ? `${value}` : "";
         } else {
           const value = state[variable.trim()];
-          return value ? `${value}` : "";
+          return value !== void 0 ? `${value}` : "";
         }
       });
     };
@@ -3463,6 +3483,8 @@ var require_object = __commonJS({
     };
     var merge5 = (element, obj, excludeFrom = []) => {
       for (const e in obj) {
+        if (e === "__proto__")
+          continue;
         if (excludeFrom.includes(e) || e.startsWith("__"))
           continue;
         const elementProp = element[e];
@@ -3475,6 +3497,8 @@ var require_object = __commonJS({
     };
     var deepMerge = (element, extend, excludeFrom = []) => {
       for (const e in extend) {
+        if (e === "__proto__")
+          continue;
         if (excludeFrom.includes(e) || e.startsWith("__"))
           continue;
         const elementProp = element[e];
@@ -3523,6 +3547,8 @@ var require_object = __commonJS({
     var deepClone3 = (obj, excludeFrom = []) => {
       const o = (0, import_types.isArray)(obj) ? [] : {};
       for (const prop in obj) {
+        if (prop === "__proto__")
+          continue;
         if (excludeFrom.includes(prop) || prop.startsWith("__"))
           continue;
         let objProp = obj[prop];
@@ -3624,6 +3650,8 @@ var require_object = __commonJS({
     };
     var deepDestringify = (obj, stringified = {}) => {
       for (const prop in obj) {
+        if (prop === "__proto__")
+          continue;
         const objProp = obj[prop];
         if ((0, import_types.isString)(objProp)) {
           if (objProp.includes("=>") || objProp.includes("function") || objProp.startsWith("(")) {
@@ -3742,6 +3770,8 @@ var require_object = __commonJS({
     };
     var overwriteDeep = (obj, params, excludeFrom = []) => {
       for (const e in params) {
+        if (e === "__proto__")
+          continue;
         if (excludeFrom.includes(e) || e.startsWith("__"))
           continue;
         const objProp = obj[e];
@@ -4006,12 +4036,12 @@ var require_on = __commonJS({
       triggerEventOnUpdate: () => triggerEventOnUpdate
     });
     module2.exports = __toCommonJS2(on_exports);
-    var import_utils16 = require_cjs5();
+    var import_utils15 = require_cjs5();
     var applyEvent = (param, element, state, context, options) => {
       return param(element, state || element.state, context || element.context, options);
     };
     var triggerEventOn = (param, element, options) => {
-      if (element.on && (0, import_utils16.isFunction)(element.on[param])) {
+      if (element.on && (0, import_utils15.isFunction)(element.on[param])) {
         const { state, context } = element;
         return applyEvent(element.on[param], element, state, context, options);
       }
@@ -4020,7 +4050,7 @@ var require_on = __commonJS({
       return param(updatedObj, element, state || element.state, context || element.context, options);
     };
     var triggerEventOnUpdate = (param, updatedObj, element, options) => {
-      if (element.on && (0, import_utils16.isFunction)(element.on[param])) {
+      if (element.on && (0, import_utils15.isFunction)(element.on[param])) {
         const { state, context } = element;
         return applyEventUpdate(element.on[param], updatedObj, element, state, context, options);
       }
@@ -4031,7 +4061,7 @@ var require_on = __commonJS({
         if (param === "init" || param === "beforeClassAssign" || param === "render" || param === "renderRouter" || param === "attachNode" || param === "stateInit" || param === "stateCreated" || param === "initStateUpdated" || param === "stateUpdated" || param === "initUpdate" || param === "update")
           continue;
         const appliedFunction = element.on[param];
-        if ((0, import_utils16.isFunction)(appliedFunction)) {
+        if ((0, import_utils15.isFunction)(appliedFunction)) {
           const { state, context } = element;
           node2.addEventListener(param, (event) => appliedFunction(event, element, state, context));
         }
@@ -4164,10 +4194,10 @@ var require_can = __commonJS({
     });
     module2.exports = __toCommonJS2(can_exports);
     var import_report = require_cjs6();
-    var import_utils16 = require_cjs5();
+    var import_utils15 = require_cjs5();
     var canRender = (element) => {
       const tag = element.tag || "div";
-      return (0, import_utils16.isValidHtmlTag)(tag) || (0, import_report.report)("HTMLInvalidTag");
+      return (0, import_utils15.isValidHtmlTag)(tag) || (0, import_report.report)("HTMLInvalidTag");
     };
   }
 });
@@ -4232,11 +4262,11 @@ var require_methods = __commonJS({
       toggle: () => toggle
     });
     module2.exports = __toCommonJS2(methods_exports);
-    var import_utils16 = require_cjs5();
+    var import_utils15 = require_cjs5();
     var import_ignore = require_ignore();
     var parse2 = function() {
       const state = this;
-      if ((0, import_utils16.isObject)(state)) {
+      if ((0, import_utils15.isObject)(state)) {
         const obj = {};
         for (const param in state) {
           if (!import_ignore.IGNORE_STATE_PARAMS.includes(param)) {
@@ -4244,7 +4274,7 @@ var require_methods = __commonJS({
           }
         }
         return obj;
-      } else if ((0, import_utils16.isArray)(state)) {
+      } else if ((0, import_utils15.isArray)(state)) {
         return state.filter((item) => !import_ignore.IGNORE_STATE_PARAMS.includes(item));
       }
     };
@@ -4264,7 +4294,7 @@ var require_methods = __commonJS({
       const state = this;
       const element = state.__element;
       const stateKey = element.__ref.__state;
-      if ((0, import_utils16.isString)(stateKey)) {
+      if ((0, import_utils15.isString)(stateKey)) {
         element.parent.state.remove(stateKey, { isHoisted: true, ...options });
         return element.state;
       }
@@ -4299,10 +4329,10 @@ var require_methods = __commonJS({
     };
     var add = function(value, options = {}) {
       const state = this;
-      if ((0, import_utils16.isArray)(state)) {
+      if ((0, import_utils15.isArray)(state)) {
         state.push(value);
         state.update(state.parse(), { overwrite: "replace", ...options });
-      } else if ((0, import_utils16.isObject)(state)) {
+      } else if ((0, import_utils15.isObject)(state)) {
         const key = Object.keys(state).length;
         state.update({ [key]: value }, options);
       }
@@ -4313,10 +4343,10 @@ var require_methods = __commonJS({
     };
     var remove = function(key, options = {}) {
       const state = this;
-      if ((0, import_utils16.isArray)(state))
-        (0, import_utils16.removeFromArray)(state, key);
-      if ((0, import_utils16.isObject)(state))
-        (0, import_utils16.removeFromObject)(state, key);
+      if ((0, import_utils15.isArray)(state))
+        (0, import_utils15.removeFromArray)(state, key);
+      if ((0, import_utils15.isObject)(state))
+        (0, import_utils15.removeFromObject)(state, key);
       return state.update(state.parse(), { replace: true, ...options });
     };
     var set2 = function(value, options = {}) {
@@ -4325,7 +4355,7 @@ var require_methods = __commonJS({
     };
     var apply = function(func, options = {}) {
       const state = this;
-      if ((0, import_utils16.isFunction)(func)) {
+      if ((0, import_utils15.isFunction)(func)) {
         func(state);
         return state.update(state, { replace: true, ...options });
       }
@@ -4365,7 +4395,7 @@ var require_inherit = __commonJS({
       isState: () => isState3
     });
     module2.exports = __toCommonJS2(inherit_exports);
-    var import_utils16 = require_cjs5();
+    var import_utils15 = require_cjs5();
     var import_ignore = require_ignore();
     var getParentStateInKey = (stateKey, parentState) => {
       if (!stateKey.includes("../"))
@@ -4385,12 +4415,15 @@ var require_inherit = __commonJS({
       for (let i = 0; i < arrLength; i++) {
         const childKey = arr[i];
         const grandChildKey = arr[i + 1];
-        const childInParent = parentState[childKey];
-        if (childInParent && childInParent[grandChildKey]) {
-          stateKey = grandChildKey;
-          parentState = childInParent;
-        } else
+        if (childKey === "__proto__" || grandChildKey === "__proto__")
           return;
+        let childInParent = parentState[childKey];
+        if (!childInParent)
+          childInParent = parentState[childKey] = {};
+        if (!childInParent[grandChildKey])
+          childInParent[grandChildKey] = {};
+        stateKey = grandChildKey;
+        parentState = childInParent;
       }
       if (options.returnParent)
         return parentState;
@@ -4416,9 +4449,9 @@ var require_inherit = __commonJS({
       const inheritedState = findInheritedState(element, parent);
       if (!inheritedState)
         return element.state;
-      if ((0, import_utils16.is)(inheritedState)("object", "array")) {
-        return (0, import_utils16.deepClone)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
-      } else if ((0, import_utils16.is)(inheritedState)("string", "number")) {
+      if ((0, import_utils15.is)(inheritedState)("object", "array")) {
+        return (0, import_utils15.deepClone)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
+      } else if ((0, import_utils15.is)(inheritedState)("string", "number")) {
         ref.__stateType = "string";
         return { value: inheritedState };
       }
@@ -4427,15 +4460,15 @@ var require_inherit = __commonJS({
     var checkIfInherits = (element) => {
       const ref = element.__ref;
       const stateKey = ref.__state;
-      if (!stateKey || (0, import_utils16.isNot)(stateKey)("number", "string"))
+      if (!stateKey || (0, import_utils15.isNot)(stateKey)("number", "string"))
         return false;
       return true;
     };
     var isState3 = function(state) {
-      if (!(0, import_utils16.isObjectLike)(state))
+      if (!(0, import_utils15.isObjectLike)(state))
         return false;
       const keys = Object.keys(state);
-      return (0, import_utils16.arrayContainsOtherArray)(keys, ["update", "parse", "clean", "create", "parent", "rootUpdate"]);
+      return (0, import_utils15.arrayContainsOtherArray)(keys, ["update", "parse", "clean", "create", "parent", "rootUpdate"]);
     };
     var createChangesByKey = (path, value) => {
       if (!path) {
@@ -4482,7 +4515,7 @@ var require_updateState = __commonJS({
     var import_report = require_cjs6();
     var import_event = require_cjs7();
     var import_ignore = require_ignore();
-    var import_utils16 = require_cjs5();
+    var import_utils15 = require_cjs5();
     var import_inherit = require_inherit();
     var STATE_UPDATE_OPTIONS = {
       overwrite: true,
@@ -4496,7 +4529,7 @@ var require_updateState = __commonJS({
       const state = this;
       const element = state.__element;
       if (!options.updateByState)
-        (0, import_utils16.merge)(options, STATE_UPDATE_OPTIONS);
+        (0, import_utils15.merge)(options, STATE_UPDATE_OPTIONS);
       if (!state.__element)
         (0, import_report.report)("ElementOnStateIsNotDefined");
       if (options.preventInheritAtCurrentState === true) {
@@ -4526,10 +4559,10 @@ var require_updateState = __commonJS({
       const shallow = overwrite === "shallow";
       const merge22 = overwrite === "merge";
       if (merge22) {
-        (0, import_utils16.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
+        (0, import_utils15.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
         return;
       }
-      const overwriteFunc = shallow ? import_utils16.overwriteShallow : import_utils16.overwriteDeep;
+      const overwriteFunc = shallow ? import_utils15.overwriteShallow : import_utils15.overwriteDeep;
       overwriteFunc(state, obj, import_ignore.IGNORE_STATE_PARAMS);
     };
     var hoistStateUpdate = (state, obj, options) => {
@@ -4619,7 +4652,7 @@ var require_createState = __commonJS({
     });
     module2.exports = __toCommonJS2(createState_exports);
     var import_event = require_cjs7();
-    var import_utils16 = require_cjs5();
+    var import_utils15 = require_cjs5();
     var import_ignore = require_ignore();
     var import_methods = require_methods();
     var import_updateState = require_updateState();
@@ -4630,7 +4663,7 @@ var require_createState = __commonJS({
       if (objectizeState === false)
         return parent.state || {};
       else
-        element.state = (0, import_utils16.deepClone)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
+        element.state = (0, import_utils15.deepClone)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
       const whatInitReturns = (0, import_event.triggerEventOn)("stateInit", element, options);
       if (whatInitReturns === false)
         return element.state;
@@ -4645,7 +4678,7 @@ var require_createState = __commonJS({
         if (element.parent && element.parent.state) {
           element.state.parent = element.parent.state;
         } else {
-          element.state.parent = element.state;
+          element.state.parent = {};
         }
         return element.state;
       }
@@ -4657,18 +4690,18 @@ var require_createState = __commonJS({
       const { __ref: ref } = state;
       if (!ref)
         return;
-      const dependentState = (0, import_utils16.deepClone)(ref, import_ignore.IGNORE_STATE_PARAMS);
+      const dependentState = (0, import_utils15.deepClone)(ref, import_ignore.IGNORE_STATE_PARAMS);
       const newDepends = { [element.key]: dependentState };
-      ref.__depends = (0, import_utils16.isObject)(ref.__depends) ? { ...ref.__depends, ...newDepends } : newDepends;
+      ref.__depends = (0, import_utils15.isObject)(ref.__depends) ? { ...ref.__depends, ...newDepends } : newDepends;
       return dependentState;
     };
     var checkForTypes = (element) => {
       const { state, __ref: ref } = element;
-      if ((0, import_utils16.isFunction)(state)) {
+      if ((0, import_utils15.isFunction)(state)) {
         ref.__state = state;
-        return (0, import_utils16.exec)(state, element);
+        return (0, import_utils15.exec)(state, element);
       }
-      if ((0, import_utils16.is)(state)("string", "number")) {
+      if ((0, import_utils15.is)(state)("string", "number")) {
         ref.__state = state;
         return {};
       }
@@ -7228,11 +7261,11 @@ var require_moment = __commonJS({
         }
       }
       var add = createAdder(1, "add"), subtract = createAdder(-1, "subtract");
-      function isString8(input) {
+      function isString7(input) {
         return typeof input === "string" || input instanceof String;
       }
       function isMomentInput(input) {
-        return isMoment(input) || isDate(input) || isString8(input) || isNumber(input) || isNumberOrStringArray(input) || isMomentInputObject(input) || input === null || input === void 0;
+        return isMoment(input) || isDate(input) || isString7(input) || isNumber(input) || isNumberOrStringArray(input) || isMomentInputObject(input) || input === null || input === void 0;
       }
       function isMomentInputObject(input) {
         var objectTest = isObject5(input) && !isObjectEmpty(input), propertyTest = false, properties = [
@@ -7271,7 +7304,7 @@ var require_moment = __commonJS({
         var arrayTest = isArray5(input), dataTypeTest = false;
         if (arrayTest) {
           dataTypeTest = input.filter(function(item) {
-            return !isNumber(item) && isString8(input);
+            return !isNumber(item) && isString7(input);
           }).length === 0;
         }
         return arrayTest && dataTypeTest;
@@ -9108,6 +9141,7 @@ __export(domql_exports, {
   Slider: () => Slider,
   Span: () => Span,
   SquareButton: () => SquareButton,
+  Steps: () => Steps,
   Strong: () => Strong,
   Subhead: () => Subhead,
   Svg: () => Svg,
@@ -10203,15 +10237,11 @@ var Shape = {
 };
 
 // Atoms/Text.js
-var import_utils4 = __toESM(require_cjs5());
 var import_scratch8 = __toESM(require_cjs());
 var Text = {
   text: ({ key, props: props6, state }) => {
     if (props6.text === true)
       return state && state[key] || props6 && props6[key];
-    if ((0, import_utils4.isString)(props6.text) && props6.text.includes("{{")) {
-      return (0, import_utils4.replaceLiteralsWithObjectFields)(props6.text, state);
-    }
     return props6.text;
   },
   class: {
@@ -10274,7 +10304,7 @@ var XYZ = {
 
 // Atoms/Animation.js
 var import_scratch9 = __toESM(require_cjs());
-var import_utils6 = __toESM(require_cjs5());
+var import_utils5 = __toESM(require_cjs5());
 
 // ../../node_modules/@emotion/sheet/dist/emotion-sheet.browser.esm.js
 function sheetForTag(tag) {
@@ -11625,7 +11655,7 @@ var emotion = createEmotion3();
 // Atoms/Animation.js
 var { keyframes } = emotion;
 var applyAnimationProps = (animation, element) => {
-  if ((0, import_utils6.isObject)(animation))
+  if ((0, import_utils5.isObject)(animation))
     return { animationName: keyframes(animation) };
   const { ANIMATION } = element.context && element.context.designSystem;
   const record = ANIMATION[animation];
@@ -11670,7 +11700,7 @@ var Animation = {
 };
 
 // Box/index.js
-var import_utils7 = __toESM(require_cjs5());
+var import_utils6 = __toESM(require_cjs5());
 var PropsCSS = {
   class: {
     style: ({ props: props6 }) => props6 && props6.style
@@ -11693,8 +11723,8 @@ var Box = {
     Animation
   ],
   attr: {
-    id: ({ props: props6 }) => (0, import_utils7.isString)(props6.id) && props6.id,
-    title: ({ props: props6 }) => (0, import_utils7.isString)(props6.title) && props6.title,
+    id: ({ props: props6 }) => (0, import_utils6.isString)(props6.id) && props6.id,
+    title: ({ props: props6 }) => (0, import_utils6.isString)(props6.title) && props6.title,
     contentEditable: ({ props: props6 }) => props6.contentEditable || props6.contenteditable,
     dir: ({ props: props6 }) => props6.dir,
     draggable: ({ props: props6 }) => props6.draggable,
@@ -12912,7 +12942,7 @@ var RouteLink = {
 };
 
 // Input/index.js
-var import_utils8 = __toESM(require_cjs5());
+var import_utils7 = __toESM(require_cjs5());
 var Input2 = {
   extend: [Focusable],
   tag: "input",
@@ -12934,8 +12964,8 @@ var Input2 = {
     autocomplete: ({ props: props6 }) => props6.autocomplete,
     placeholder: ({ props: props6 }) => props6.placeholder,
     value: ({ props: props6, state }) => {
-      if ((0, import_utils8.isString)(props6.value) && props6.value.includes("{{"))
-        return (0, import_utils8.replaceLiteralsWithObjectFields)(props6.value, state);
+      if ((0, import_utils7.isString)(props6.value) && props6.value.includes("{{"))
+        return (0, import_utils7.replaceLiteralsWithObjectFields)(props6.value, state);
       return props6.value;
     },
     disabled: ({ props: props6 }) => props6.disabled || null,
@@ -12963,7 +12993,7 @@ var import_scratch10 = __toESM(require_cjs());
 var import_scratch11 = __toESM(require_cjs());
 
 // Field/node_modules/@symbo.ls/atoms/Media.js
-var import_utils9 = __toESM(require_cjs5());
+var import_utils8 = __toESM(require_cjs5());
 
 // Field/node_modules/@symbo.ls/atoms/Theme.js
 var import_scratch14 = __toESM(require_cjs());
@@ -13003,13 +13033,13 @@ var Focusable2 = {
 
 // Field/node_modules/@symbo.ls/atoms/Collection.js
 var import_state2 = __toESM(require_cjs8());
-var import_utils10 = __toESM(require_cjs5());
+var import_utils9 = __toESM(require_cjs5());
 
 // Field/node_modules/@symbo.ls/atoms/Position.js
 var import_scratch15 = __toESM(require_cjs());
 
 // Field/node_modules/@symbo.ls/atoms/Shape/index.js
-var import_utils11 = __toESM(require_cjs5());
+var import_utils10 = __toESM(require_cjs5());
 var import_scratch16 = __toESM(require_cjs());
 
 // Field/node_modules/@symbo.ls/atoms/Text.js
@@ -13017,7 +13047,7 @@ var import_scratch17 = __toESM(require_cjs());
 
 // Field/node_modules/@symbo.ls/atoms/Animation.js
 var import_scratch18 = __toESM(require_cjs());
-var import_utils13 = __toESM(require_cjs5());
+var import_utils12 = __toESM(require_cjs5());
 
 // Field/node_modules/@emotion/hash/dist/emotion-hash.esm.js
 function murmur22(str) {
@@ -13575,7 +13605,7 @@ var Video = {
 };
 
 // Range/index.js
-var import_utils14 = __toESM(require_cjs5());
+var import_utils13 = __toESM(require_cjs5());
 var import_scratch19 = __toESM(require_cjs());
 var props4 = {
   appearance: "none",
@@ -13643,7 +13673,7 @@ var Range = {
 };
 var listenProp = (el, prop, def) => {
   const val = el.props && el.props[prop];
-  const r = (0, import_utils14.isFunction)(val) ? val(el, el.state) : val !== void 0 ? val : def !== void 0 ? def : 50;
+  const r = (0, import_utils13.isFunction)(val) ? val(el, el.state) : val !== void 0 ? val : def !== void 0 ? def : 50;
   return r + "";
 };
 var RangeWithButtons = {
@@ -13652,7 +13682,7 @@ var RangeWithButtons = {
     props: { theme: "tertiary", icon: "minus" },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils14.isFunction)(el.props.onClick) && el.props.onClick(ev, el, s);
+        el.props && (0, import_utils13.isFunction)(el.props.onClick) && el.props.onClick(ev, el, s);
       }
     }
   },
@@ -13673,8 +13703,8 @@ var RangeWithButtons = {
       step: (el, s) => listenProp(el, "step", 1)
     },
     on: {
-      input: (ev, el, s) => el.props && (0, import_utils14.isFunction)(el.props.onInput) && el.props.onInput(ev, el, s),
-      change: (ev, el, s) => el.props && (0, import_utils14.isFunction)(el.props.onChange) && el.props.onChange(ev, el, s)
+      input: (ev, el, s) => el.props && (0, import_utils13.isFunction)(el.props.onInput) && el.props.onInput(ev, el, s),
+      change: (ev, el, s) => el.props && (0, import_utils13.isFunction)(el.props.onChange) && el.props.onChange(ev, el, s)
     }
   },
   plus: {
@@ -13682,7 +13712,7 @@ var RangeWithButtons = {
     props: { theme: "tertiary", icon: "plus" },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils14.isFunction)(el.props.onClick) && el.props.onClick(ev, el, s);
+        el.props && (0, import_utils13.isFunction)(el.props.onClick) && el.props.onClick(ev, el, s);
       }
     }
   }
@@ -13709,7 +13739,7 @@ var style_default = {
 
 // Slider/index.js
 var import_scratch20 = __toESM(require_cjs());
-var import_utils15 = __toESM(require_cjs5());
+var import_utils14 = __toESM(require_cjs5());
 (0, import_scratch20.set)({
   theme: {
     sliderThumb: {
@@ -13741,7 +13771,7 @@ var RangeSlider = {
 };
 var listenProp2 = (el, prop, def) => {
   const val = el && el.props && el.props[prop];
-  const r = ((0, import_utils15.isFunction)(val) ? val() : val) || (def !== void 0 ? def : 50);
+  const r = ((0, import_utils14.isFunction)(val) ? val() : val) || (def !== void 0 ? def : 50);
   return r;
 };
 var Slider = {
@@ -13752,10 +13782,10 @@ var Slider = {
     },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils15.isFunction)(el.props.click) && el.props.click(ev, el, s);
+        el.props && (0, import_utils14.isFunction)(el.props.click) && el.props.click(ev, el, s);
         const input = el.parent.input;
         const props6 = input.props;
-        const value = (0, import_utils15.isFunction)(props6.value) ? props6.value() : props6.value;
+        const value = (0, import_utils14.isFunction)(props6.value) ? props6.value() : props6.value;
         input.node.value = value;
       }
     }
@@ -13778,8 +13808,8 @@ var Slider = {
       step: (el, s) => listenProp2(el, "step", 1)
     },
     on: {
-      input: (ev, el, s) => el.props && (0, import_utils15.isFunction)(el.props.input) && el.props.input(ev, el, s),
-      change: (ev, el, s) => el.props && (0, import_utils15.isFunction)(el.props.change) && el.props.change(ev, el, s)
+      input: (ev, el, s) => el.props && (0, import_utils14.isFunction)(el.props.input) && el.props.input(ev, el, s),
+      change: (ev, el, s) => el.props && (0, import_utils14.isFunction)(el.props.change) && el.props.change(ev, el, s)
     }
   },
   button1: {
@@ -13789,10 +13819,10 @@ var Slider = {
     },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils15.isFunction)(el.props.click) && el.props.click(ev, el, s);
+        el.props && (0, import_utils14.isFunction)(el.props.click) && el.props.click(ev, el, s);
         const input = el.parent.input;
         const props6 = input.props;
-        const value = (0, import_utils15.isFunction)(props6.value) ? props6.value() : props6.value;
+        const value = (0, import_utils14.isFunction)(props6.value) ? props6.value() : props6.value;
         input.node.value = value;
       }
     }
@@ -14326,6 +14356,66 @@ var Search = {
     }
   }
 };
+
+// Steps/index.js
+var Step = {
+  tag: "label",
+  extend: Flex,
+  props: {
+    cursor: "pointer",
+    align: "center flex-start"
+  },
+  Input: {
+    type: "checkbox",
+    display: "none",
+    ":checked + div": {
+      theme: "primary",
+      border: "none"
+    },
+    ":checked + div > svg": { opacity: "1" },
+    ":checked ~ span": {
+      theme: "primary"
+    }
+  },
+  Flex: {
+    props: {
+      boxSize: "B1",
+      border: "2px solid #313141",
+      round: "100%",
+      align: "center center"
+    },
+    Icon: {
+      fontSize: "C2",
+      opacity: "0",
+      name: "checkmark"
+    }
+  },
+  Caption: ({ key }) => ({
+    text: "Step " + (parseInt(key) + 1),
+    padding: "- Y2 - Z1"
+  }),
+  Span_line: {
+    if: ({ parent }) => parent.key !== "0",
+    props: {
+      boxSize: "2px D",
+      background: "#313141",
+      margin: "- A - -",
+      order: -1,
+      round: "Z"
+    }
+  }
+};
+var Steps = {
+  extend: Flex,
+  props: {
+    position: "relative",
+    gap: "Y2",
+    zIndex: "2",
+    options: [{}, {}, {}, {}]
+  },
+  childExtend: Step,
+  $setPropsCollection: ({ props: props6 }) => props6.options
+};
 /*! Bundled license information:
 
 moment/moment.js: