@symbo.ls/uikit 2.11.146 → 2.11.148

package/dist/index.cjs.js

@@ -1387,7 +1387,7 @@ var require_cjs = __commonJS({
       setVariables: () => setVariables
     });
     var import_globals = __toESM2(require_cjs7(), 1);
-    var import_utils15 = __toESM2(require_cjs22(), 1);
+    var import_utils14 = __toESM2(require_cjs22(), 1);
     var ENV = "development";
     var colorStringToRgbaArray = (color) => {
       if (color === "")
@@ -1515,9 +1515,9 @@ var require_cjs = __commonJS({
       return `rgba(${arr})`;
     };
     var getRgbTone = (rgb, tone) => {
-      if ((0, import_utils15.isString)(rgb))
+      if ((0, import_utils14.isString)(rgb))
         rgb = rgb.split(", ").map((v) => parseFloat(v));
-      if ((0, import_utils15.isNumber)(tone))
+      if ((0, import_utils14.isNumber)(tone))
         tone += "";
       const toHex = rgbArrayToHex(rgb);
       const abs2 = tone.slice(0, 1);
@@ -2451,7 +2451,7 @@ var require_cjs = __commonJS({
       const str = `${value.join(", ")}, ${FONT_FAMILY_TYPES2[type]}`;
       return { var: CSSvar, value: str, arr: value, type };
     };
-    var import_utils152 = __toESM2(require_cjs22(), 1);
+    var import_utils15 = __toESM2(require_cjs22(), 1);
     var runThroughMedia = (props6) => {
       const CONFIG22 = getActiveConfig3();
       const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG22;
@@ -2459,7 +2459,7 @@ var require_cjs = __commonJS({
         const mediaProps = props6[prop];
         if (prop.slice(0, 1) === "@") {
           const { type, base, ratio, range, subSequence, h1Matches, unit } = props6;
-          (0, import_utils152.merge)(mediaProps, {
+          (0, import_utils15.merge)(mediaProps, {
             type,
             base,
             ratio,
@@ -3159,14 +3159,14 @@ var require_types = __commonJS({
       isNot: () => isNot3,
       isNull: () => isNull,
       isNumber: () => isNumber,
-      isObject: () => isObject6,
+      isObject: () => isObject5,
       isObjectLike: () => isObjectLike3,
       isString: () => isString7,
       isUndefined: () => isUndefined
     });
     module2.exports = __toCommonJS2(types_exports);
     var import_node = require_node();
-    var isObject6 = (arg) => {
+    var isObject5 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object" && arg.constructor === Object;
@@ -3183,7 +3183,7 @@ var require_types = __commonJS({
       return typeof arg === "object";
     };
     var isDefined = (arg) => {
-      return isObject6(arg) || isObjectLike3(arg) || isString7(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;
@@ -3191,7 +3191,7 @@ var require_types = __commonJS({
     var TYPES = {
       boolean: isBoolean,
       array: isArray5,
-      object: isObject6,
+      object: isObject5,
       string: isString7,
       number: isNumber,
       null: isNull,
@@ -4221,12 +4221,12 @@ var require_on = __commonJS({
       triggerEventOnUpdate: () => triggerEventOnUpdate
     });
     module2.exports = __toCommonJS2(on_exports);
-    var import_utils15 = require_cjs2();
+    var import_utils14 = require_cjs2();
     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_utils15.isFunction)(element.on[param])) {
+      if (element.on && (0, import_utils14.isFunction)(element.on[param])) {
         const { state, context } = element;
         return applyEvent(element.on[param], element, state, context, options);
       }
@@ -4235,7 +4235,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_utils15.isFunction)(element.on[param])) {
+      if (element.on && (0, import_utils14.isFunction)(element.on[param])) {
         const { state, context } = element;
         return applyEventUpdate(element.on[param], updatedObj, element, state, context, options);
       }
@@ -4246,7 +4246,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_utils15.isFunction)(appliedFunction)) {
+        if ((0, import_utils14.isFunction)(appliedFunction)) {
           const { state, context } = element;
           node2.addEventListener(param, (event) => appliedFunction(event, element, state, context));
         }
@@ -4379,10 +4379,10 @@ var require_can = __commonJS({
     });
     module2.exports = __toCommonJS2(can_exports);
     var import_report = require_cjs3();
-    var import_utils15 = require_cjs2();
+    var import_utils14 = require_cjs2();
     var canRender = (element) => {
       const tag = element.tag || "div";
-      return (0, import_utils15.isValidHtmlTag)(tag) || (0, import_report.report)("HTMLInvalidTag");
+      return (0, import_utils14.isValidHtmlTag)(tag) || (0, import_report.report)("HTMLInvalidTag");
     };
   }
 });
@@ -4447,11 +4447,11 @@ var require_methods = __commonJS({
       toggle: () => toggle
     });
     module2.exports = __toCommonJS2(methods_exports);
-    var import_utils15 = require_cjs2();
+    var import_utils14 = require_cjs2();
     var import_ignore = require_ignore();
     var parse2 = function() {
       const state = this;
-      if ((0, import_utils15.isObject)(state)) {
+      if ((0, import_utils14.isObject)(state)) {
         const obj = {};
         for (const param in state) {
           if (!import_ignore.IGNORE_STATE_PARAMS.includes(param)) {
@@ -4459,7 +4459,7 @@ var require_methods = __commonJS({
           }
         }
         return obj;
-      } else if ((0, import_utils15.isArray)(state)) {
+      } else if ((0, import_utils14.isArray)(state)) {
         return state.filter((item) => !import_ignore.IGNORE_STATE_PARAMS.includes(item));
       }
     };
@@ -4479,7 +4479,7 @@ var require_methods = __commonJS({
       const state = this;
       const element = state.__element;
       const stateKey = element.__ref.__state;
-      if ((0, import_utils15.isString)(stateKey)) {
+      if ((0, import_utils14.isString)(stateKey)) {
         element.parent.state.remove(stateKey, { isHoisted: true, ...options });
         return element.state;
       }
@@ -4514,10 +4514,10 @@ var require_methods = __commonJS({
     };
     var add = function(value, options = {}) {
       const state = this;
-      if ((0, import_utils15.isArray)(state)) {
+      if ((0, import_utils14.isArray)(state)) {
         state.push(value);
         state.update(state.parse(), { overwrite: "replace", ...options });
-      } else if ((0, import_utils15.isObject)(state)) {
+      } else if ((0, import_utils14.isObject)(state)) {
         const key = Object.keys(state).length;
         state.update({ [key]: value }, options);
       }
@@ -4528,10 +4528,10 @@ var require_methods = __commonJS({
     };
     var remove = function(key, options = {}) {
       const state = this;
-      if ((0, import_utils15.isArray)(state))
-        (0, import_utils15.removeFromArray)(state, key);
-      if ((0, import_utils15.isObject)(state))
-        (0, import_utils15.removeFromObject)(state, key);
+      if ((0, import_utils14.isArray)(state))
+        (0, import_utils14.removeFromArray)(state, key);
+      if ((0, import_utils14.isObject)(state))
+        (0, import_utils14.removeFromObject)(state, key);
       return state.update(state.parse(), { replace: true, ...options });
     };
     var set2 = function(value, options = {}) {
@@ -4540,7 +4540,7 @@ var require_methods = __commonJS({
     };
     var apply = function(func, options = {}) {
       const state = this;
-      if ((0, import_utils15.isFunction)(func)) {
+      if ((0, import_utils14.isFunction)(func)) {
         func(state);
         return state.update(state, { replace: true, ...options });
       }
@@ -4580,7 +4580,7 @@ var require_inherit = __commonJS({
       isState: () => isState3
     });
     module2.exports = __toCommonJS2(inherit_exports);
-    var import_utils15 = require_cjs2();
+    var import_utils14 = require_cjs2();
     var import_ignore = require_ignore();
     var getParentStateInKey = (stateKey, parentState) => {
       if (!stateKey.includes("../"))
@@ -4634,9 +4634,9 @@ var require_inherit = __commonJS({
       const inheritedState = findInheritedState(element, parent);
       if (!inheritedState)
         return element.state;
-      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")) {
+      if ((0, import_utils14.is)(inheritedState)("object", "array")) {
+        return (0, import_utils14.deepClone)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
+      } else if ((0, import_utils14.is)(inheritedState)("string", "number")) {
         ref.__stateType = "string";
         return { value: inheritedState };
       }
@@ -4645,12 +4645,12 @@ var require_inherit = __commonJS({
     var checkIfInherits = (element) => {
       const ref = element.__ref;
       const stateKey = ref.__state;
-      if (!stateKey || (0, import_utils15.isNot)(stateKey)("number", "string"))
+      if (!stateKey || (0, import_utils14.isNot)(stateKey)("number", "string"))
         return false;
       return true;
     };
     var isState3 = function(state) {
-      if (!(0, import_utils15.isObjectLike)(state))
+      if (!(0, import_utils14.isObjectLike)(state))
         return false;
       return state.update && state.parse && state.clean && state.create && state.parent && state.destroy && state.rootUpdate && state.parentUpdate && state.toggle && state.add && state.apply && state.__element && state.__children;
     };
@@ -4699,7 +4699,7 @@ var require_updateState = __commonJS({
     var import_report = require_cjs3();
     var import_event = require_cjs4();
     var import_ignore = require_ignore();
-    var import_utils15 = require_cjs2();
+    var import_utils14 = require_cjs2();
     var import_inherit = require_inherit();
     var STATE_UPDATE_OPTIONS = {
       overwrite: true,
@@ -4713,7 +4713,7 @@ var require_updateState = __commonJS({
       const state = this;
       const element = state.__element;
       if (!options.updateByState)
-        (0, import_utils15.merge)(options, STATE_UPDATE_OPTIONS);
+        (0, import_utils14.merge)(options, STATE_UPDATE_OPTIONS);
       if (!state.__element)
         (0, import_report.report)("ElementOnStateIsNotDefined");
       if (options.preventInheritAtCurrentState === true) {
@@ -4743,10 +4743,10 @@ var require_updateState = __commonJS({
       const shallow = overwrite === "shallow";
       const merge22 = overwrite === "merge";
       if (merge22) {
-        (0, import_utils15.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
+        (0, import_utils14.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
         return;
       }
-      const overwriteFunc = shallow ? import_utils15.overwriteShallow : import_utils15.overwriteDeep;
+      const overwriteFunc = shallow ? import_utils14.overwriteShallow : import_utils14.overwriteDeep;
       overwriteFunc(state, obj, import_ignore.IGNORE_STATE_PARAMS);
     };
     var hoistStateUpdate = (state, obj, options) => {
@@ -4837,7 +4837,7 @@ var require_create = __commonJS({
     });
     module2.exports = __toCommonJS2(create_exports);
     var import_event = require_cjs4();
-    var import_utils15 = require_cjs2();
+    var import_utils14 = require_cjs2();
     var import_ignore = require_ignore();
     var import_methods = require_methods();
     var import_updateState = require_updateState();
@@ -4851,7 +4851,7 @@ var require_create = __commonJS({
       if (objectizeState === false)
         return parent.state || {};
       else
-        element.state = (0, import_utils15.deepClone)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
+        element.state = (0, import_utils14.deepClone)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
       const whatInitReturns = (0, import_event.triggerEventOn)("stateInit", element, options);
       if (whatInitReturns === false)
         return element.state;
@@ -4870,17 +4870,17 @@ var require_create = __commonJS({
       const { __ref: ref } = state;
       if (!ref)
         return;
-      const dependentState = (0, import_utils15.deepClone)(ref, import_ignore.IGNORE_STATE_PARAMS);
+      const dependentState = (0, import_utils14.deepClone)(ref, import_ignore.IGNORE_STATE_PARAMS);
       const newDepends = { [element.key]: dependentState };
-      ref.__depends = (0, import_utils15.isObject)(ref.__depends) ? { ...ref.__depends, ...newDepends } : newDepends;
+      ref.__depends = (0, import_utils14.isObject)(ref.__depends) ? { ...ref.__depends, ...newDepends } : newDepends;
       return dependentState;
     };
     var checkForTypes = (element) => {
       const { state, __ref: ref } = element;
-      if ((0, import_utils15.isFunction)(state)) {
+      if ((0, import_utils14.isFunction)(state)) {
         ref.__state = state;
-        return (0, import_utils15.exec)(state, element);
-      } else if ((0, import_utils15.is)(state)("string", "number")) {
+        return (0, import_utils14.exec)(state, element);
+      } else if ((0, import_utils14.is)(state)("string", "number")) {
         ref.__state = state;
         return {};
       } else if (state === true) {
@@ -4927,7 +4927,7 @@ var require_create = __commonJS({
         __children: {},
         __root: ref.__root ? ref.__root.state : state
       };
-      if ((0, import_utils15.isArray)(state)) {
+      if ((0, import_utils14.isArray)(state)) {
         addProtoToArray(state, proto);
       } else {
         Object.setPrototypeOf(state, proto);
@@ -4984,7 +4984,7 @@ var require_moment = __commonJS({
       function isArray5(input) {
         return input instanceof Array || Object.prototype.toString.call(input) === "[object Array]";
       }
-      function isObject6(input) {
+      function isObject5(input) {
         return input != null && Object.prototype.toString.call(input) === "[object Object]";
       }
       function hasOwnProp(a, b) {
@@ -5232,7 +5232,7 @@ var require_moment = __commonJS({
         var res = extend({}, parentConfig), prop;
         for (prop in childConfig) {
           if (hasOwnProp(childConfig, prop)) {
-            if (isObject6(parentConfig[prop]) && isObject6(childConfig[prop])) {
+            if (isObject5(parentConfig[prop]) && isObject5(childConfig[prop])) {
               res[prop] = {};
               extend(res[prop], parentConfig[prop]);
               extend(res[prop], childConfig[prop]);
@@ -5244,7 +5244,7 @@ var require_moment = __commonJS({
           }
         }
         for (prop in parentConfig) {
-          if (hasOwnProp(parentConfig, prop) && !hasOwnProp(childConfig, prop) && isObject6(parentConfig[prop])) {
+          if (hasOwnProp(parentConfig, prop) && !hasOwnProp(childConfig, prop) && isObject5(parentConfig[prop])) {
             res[prop] = extend({}, res[prop]);
           }
         }
@@ -7027,7 +7027,7 @@ var require_moment = __commonJS({
             return parseInt(obj, 10);
           });
           configFromArray(config);
-        } else if (isObject6(input)) {
+        } else if (isObject5(input)) {
           configFromObject(config);
         } else if (isNumber(input)) {
           config._d = new Date(input);
@@ -7045,7 +7045,7 @@ var require_moment = __commonJS({
           strict = locale2;
           locale2 = void 0;
         }
-        if (isObject6(input) && isObjectEmpty(input) || isArray5(input) && input.length === 0) {
+        if (isObject5(input) && isObjectEmpty(input) || isArray5(input) && input.length === 0) {
           input = void 0;
         }
         c._isAMomentObject = true;
@@ -7464,7 +7464,7 @@ var require_moment = __commonJS({
         return isMoment(input) || isDate(input) || isString7(input) || isNumber(input) || isNumberOrStringArray(input) || isMomentInputObject(input) || input === null || input === void 0;
       }
       function isMomentInputObject(input) {
-        var objectTest = isObject6(input) && !isObjectEmpty(input), propertyTest = false, properties = [
+        var objectTest = isObject5(input) && !isObjectEmpty(input), propertyTest = false, properties = [
           "years",
           "year",
           "y",
@@ -7506,7 +7506,7 @@ var require_moment = __commonJS({
         return arrayTest && dataTypeTest;
       }
       function isCalendarSpec(input) {
-        var objectTest = isObject6(input) && !isObjectEmpty(input), propertyTest = false, properties = [
+        var objectTest = isObject5(input) && !isObjectEmpty(input), propertyTest = false, properties = [
           "sameDay",
           "nextDay",
           "lastDay",
@@ -9176,8 +9176,8 @@ var require_cjs6 = __commonJS({
       router: () => router
     });
     module2.exports = __toCommonJS2(router_exports);
-    var import_utils15 = require_cjs2();
-    var getActiveRoute = (level = 0, route = import_utils15.window.location.pathname) => {
+    var import_utils14 = require_cjs2();
+    var getActiveRoute = (level = 0, route = import_utils14.window.location.pathname) => {
       const routeArray = route.split("/");
       const activeRoute = routeArray[level + 1];
       if (activeRoute)
@@ -9191,7 +9191,7 @@ var require_cjs6 = __commonJS({
       initialRender: false,
       scrollToTop: true,
       scrollToNode: false,
-      scrollNode: import_utils15.document && import_utils15.document.documentElement,
+      scrollNode: import_utils14.document && import_utils14.document.documentElement,
       scrollBody: false,
       useFragment: false,
       updateState: true,
@@ -9206,13 +9206,13 @@ var require_cjs6 = __commonJS({
       const route = getActiveRoute(options.level, pathname);
       const content = element.routes[route || "/"] || element.routes["/*"];
       const scrollNode = options.scrollToNode ? rootNode : options.scrollNode;
-      const hashChanged = hash2 && hash2 !== import_utils15.window.location.hash.slice(1);
+      const hashChanged = hash2 && hash2 !== import_utils14.window.location.hash.slice(1);
       const pathChanged = pathname !== lastPathname;
       lastPathname = pathname;
       if (!content)
         return;
       if (options.pushState) {
-        import_utils15.window.history.pushState(state, null, pathname + (hash2 ? `#${hash2}` : ""));
+        import_utils14.window.history.pushState(state, null, pathname + (hash2 ? `#${hash2}` : ""));
       }
       if (pathChanged || !hashChanged) {
         if (options.updateState) {
@@ -9238,7 +9238,7 @@ var require_cjs6 = __commonJS({
         });
       }
       if (hash2) {
-        const activeNode = import_utils15.document.getElementById(hash2);
+        const activeNode = import_utils14.document.getElementById(hash2);
         if (activeNode) {
           const top = activeNode.getBoundingClientRect().top + rootNode.scrollTop - options.scrollToOffset || 0;
           scrollNode.scrollTo({
@@ -9276,6 +9276,7 @@ __export(domql_exports, {
   Caption: () => Caption,
   Card: () => Card,
   CardLabel: () => CardLabel,
+  ChangePasswordModal: () => ChangePasswordModal,
   ChatUser: () => ChatUser,
   ChatUserWithButtonSet: () => ChatUserWithButtonSet,
   ChatUserWithNotification: () => ChatUserWithNotification,
@@ -9288,6 +9289,7 @@ __export(domql_exports, {
   Clickable: () => Clickable,
   CodeField: () => CodeField,
   Collection: () => Collection,
+  ContactForm: () => ContactForm,
   ConvertCard: () => ConvertCard,
   CustomizedField: () => CustomizedField,
   DateIndicator: () => DateIndicator,
@@ -9342,6 +9344,7 @@ __export(domql_exports, {
   Media: () => Media,
   MessageModal: () => MessageModal,
   Modal: () => Modal,
+  ModalWithTitleParagraph: () => ModalWithTitleParagraph,
   Notification: () => Notification,
   NotificationAlert: () => NotificationAlert,
   NumberInput: () => NumberInput,
@@ -9377,6 +9380,7 @@ __export(domql_exports, {
   Table: () => Table,
   Text: () => Text,
   Textarea: () => Textarea,
+  TextareaWithTitle: () => TextareaWithTitle,
   Theme: () => Theme,
   TimePicker: () => TimePicker,
   TimePickerItem: () => TimePickerItem,
@@ -9395,6 +9399,7 @@ __export(domql_exports, {
   UploadModalLabel: () => UploadModalLabel,
   UploadProgress: () => UploadProgress,
   UploadResult: () => UploadResult,
+  VerificationCodeModal: () => VerificationCodeModal,
   Video: () => Video,
   XYZ: () => XYZ,
   calendar: () => calendar,
@@ -10473,12 +10478,11 @@ var Shape = {
 };
 
 // Atoms/Text.js
-var import_utils4 = __toESM(require_cjs2());
 var import_scratch8 = __toESM(require_cjs());
 var Text = {
-  deps: { isObject: import_utils4.isObject, getFontSizeByKey: import_scratch8.getFontSizeByKey, getFontFamily: import_scratch8.getFontFamily },
+  deps: { getFontSizeByKey: import_scratch8.getFontSizeByKey, getFontFamily: import_scratch8.getFontFamily },
   text: ({ key, props: props6, state, deps }) => {
-    if (deps.isObject(props6) && props6.text === true)
+    if (props6.text === true)
       return state && state[key] || props6 && props6[key];
     return props6.text;
   },
@@ -10542,7 +10546,7 @@ var XYZ = {
 
 // Atoms/Animation.js
 var import_scratch9 = __toESM(require_cjs());
-var import_utils6 = __toESM(require_cjs2());
+var import_utils5 = __toESM(require_cjs2());
 
 // ../../node_modules/@emotion/sheet/dist/emotion-sheet.browser.esm.js
 function sheetForTag(tag) {
@@ -11893,7 +11897,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];
@@ -11938,7 +11942,7 @@ var Animation = {
 };
 
 // Box/index.js
-var import_utils7 = __toESM(require_cjs2());
+var import_utils6 = __toESM(require_cjs2());
 var PropsCSS = {
   class: {
     style: ({ props: props6 }) => props6 && props6.style
@@ -11961,8 +11965,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,
@@ -12119,6 +12123,7 @@ var CancenConfirmButtons = {
   ],
   props: {
     gap: "Y",
+    maxWidth: "fit-content",
     childProps: {
       fontWeight: "500",
       color: "white",
@@ -12375,6 +12380,7 @@ var AvatarChooser = {
   },
   select: {
     props: {
+      id: "avatar-chooser",
       outline: "none",
       pointerEvents: "all",
       appearance: "none",
@@ -12388,7 +12394,7 @@ var AvatarChooser = {
       margin: "0 0 0 -B1+X",
       padding: "0 A 0 B1+X"
     },
-    attr: { name: "avatar-chooser", id: "avatar-chooser" },
+    attr: { name: "avatar-chooser" },
     childExtend: { tag: "option" },
     $setPropsCollection: ({ parent }) => parent.props.options,
     on: {
@@ -13427,178 +13433,65 @@ var ToggleSwithWithLabel = {
   FieldLabel: { padding: "Z - - -" }
 };
 
-// node_modules/@symbo.ls/icon/index.js
-var Icon3 = {
-  extend: Svg,
-  props: ({ key, props: props6, parent, context }) => {
-    const { ICONS, useIconSprite, verbose } = context && context.designSystem;
-    const { toCamelCase } = context && context.utils;
-    const iconName = props6.inheritedString || props6.name || props6.icon || key;
-    const camelCase = toCamelCase(iconName);
-    const isArray5 = camelCase.split(/([a-z])([A-Z])/g);
-    let activeIconName;
-    if (props6.active) {
-      activeIconName = props6[".active"].name || props6[".active"].icon;
-    }
-    if (parent && parent.props && parent.props.active && parent.props[".active"] && parent.props[".active"].icon) {
-      activeIconName = parent.props[".active"].icon.name || parent.props[".active"].icon.icon || parent.props[".active"].icon;
-    }
-    let validIconName;
-    if (ICONS[activeIconName])
-      validIconName = activeIconName;
-    if (ICONS[camelCase])
-      validIconName = camelCase;
-    else if (ICONS[isArray5[0] + isArray5[1]])
-      validIconName = isArray5[0] + isArray5[1];
-    else if (ICONS[isArray5[0]])
-      validIconName = isArray5[0];
-    else {
-      if (verbose)
-        console.warn("Can't find icon:", iconName, validIconName);
-    }
-    const iconFromLibrary = ICONS[validIconName];
-    const directSrc = parent && parent.props && parent.props.src || props6.src;
-    return {
-      width: "A",
-      height: "A",
-      display: "inline-block",
-      spriteId: useIconSprite && validIconName,
-      src: iconFromLibrary || directSrc || ICONS.noIcon,
-      style: { fill: "currentColor" }
-    };
-  },
-  attr: { viewBox: "0 0 24 24" }
-};
-var IconText2 = {
+// TextComponents/index.js
+var TitleParagraph = {
   extend: Flex,
-  props: {
-    align: "center center",
-    lineHeight: 1
-  },
-  // TODO: remove this variant
-  icon: {
-    extend: Icon3,
-    if: ({ parent }) => parent.props.icon
-  },
-  Icon: {
-    props: {},
-    if: ({ props: props6 }) => props6.name || props6.icon
+  title: {
+    tag: "h5",
+    props: { text: "Log in to your account" }
   },
-  text: ({ props: props6 }) => props6.text,
-  ".reversed": {
-    props: { flow: "row-reverse" }
+  paragraph: {
+    tag: "p",
+    props: { text: "Enter your email address and password to log in." }
   },
-  ".vertical": {
-    props: { flow: "column" }
+  props: {
+    flow: "column",
+    gap: "Y",
+    maxWidth: "fit-content",
+    title: { fontSize: "D" },
+    paragraph: {
+      fontSize: "Z",
+      padding: "0",
+      margin: "0",
+      color: "#E0E0E2"
+    }
   }
 };
-var FileIcon = {
+var ParagraphWithUnderlineButton = {
   extend: Flex,
-  props: {
-    theme: "tertiary",
-    boxSize: "C1",
-    align: "center center",
-    round: "Z"
+  p: { props: { text: "Didnt get the code?" } },
+  underlined: {
+    extend: Button,
+    props: { text: "Click to resend" }
   },
-  Icon: {
-    fontSize: "B",
-    margin: "auto",
-    icon: "file"
-  }
-};
-
-// Link/index.js
-var import_router = __toESM(require_cjs6());
-var Link = {
-  extend: Focusable,
-  tag: "a",
   props: {
-    aria: {},
-    fontWeight: "bold",
-    textDecoration: "none",
-    color: "currentColor",
-    draggable: false
-  },
-  attr: {
-    href: (el, s, ctx) => {
-      const { exec: exec3 } = ctx.utils;
-      return exec3(el.props.href, el) || exec3(el.props, el).href;
+    align: "center flex-start",
+    gap: "Z",
+    fontSize: "Z",
+    p: {
+      color: "#A3A3A8",
+      margin: "0"
     },
-    target: ({ props: props6 }) => props6.target,
-    "aria-label": ({ props: props6 }) => props6.aria ? props6.aria.label : props6.text,
-    draggable: ({ props: props6 }) => props6.draggable
-  }
-};
-var RouterLink = {
-  on: {
-    click: (event, el, s, ctx) => {
-      const { props: props6 } = el;
-      const { href } = props6;
-      if (!href)
-        return;
-      const { utils, routerOptions } = ctx;
-      const { router } = utils;
-      const root = el.__ref.__root;
-      console.log(href);
-      const linkIsExternal = href.includes("http://") || href.includes("https://") || href.includes("mailto:") || href.includes("tel:");
-      const options = props6.routerOptions || routerOptions || {
-        scrollToOptions: { behaviour: "instant" }
-      };
-      if (href && !linkIsExternal) {
-        (router || import_router.router)(href, root, {}, options);
-        event.preventDefault();
-      }
+    underlined: {
+      padding: "0",
+      background: "transparent",
+      color: "#E0E0E2",
+      cursor: "pointer",
+      textDecoration: "underline",
+      fontWeight: "500"
     }
   }
 };
-var RouteLink = {
-  extend: [Link, RouterLink]
-};
-
-// Input/index.js
-var import_utils8 = __toESM(require_cjs2());
-var Input2 = {
-  extend: [Focusable],
-  tag: "input",
-  deps: { isString: import_utils8.isString, replaceLiteralsWithObjectFields: import_utils8.replaceLiteralsWithObjectFields },
-  props: {
-    border: "none",
-    type: "input",
-    theme: "tertiary",
-    fontSize: "A",
-    round: "C",
-    lineHeight: 1,
-    fontFamily: "smbls",
-    padding: "Z A"
-  },
-  attr: {
-    pattern: ({ props: props6 }) => props6.pattern,
-    minlength: ({ props: props6 }) => props6.minlength,
-    maxlength: ({ props: props6 }) => props6.maxlength,
-    name: ({ props: props6 }) => props6.name,
-    autocomplete: ({ props: props6 }) => props6.autocomplete,
-    placeholder: ({ props: props6 }) => props6.placeholder,
-    value: ({ props: props6, state, deps }) => {
-      const { isString: isString7, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields2 } = deps;
-      if (isString7(props6.value) && props6.value.includes("{{"))
-        return replaceLiteralsWithObjectFields2(props6.value, state);
-      return props6.value;
-    },
-    disabled: ({ props: props6 }) => props6.disabled || null,
-    readonly: ({ props: props6 }) => props6.readonly,
-    required: ({ props: props6 }) => props6.required,
-    type: ({ props: props6 }) => props6.type
-  }
-};
-var NumberInput = {
-  extend: Input2,
+var ParagrapUnderlineLinkWithCheckbox = {
+  extend: Flex,
+  checkBox: { extend: Checkbox },
+  paragraph: { extend: ParagraphWithUnderlineButton },
   props: {
-    type: "number"
-  },
-  attr: {
-    step: ({ props: props6 }) => props6.step,
-    min: ({ props: props6 }) => props6.min,
-    max: ({ props: props6 }) => props6.max
+    align: "center flex-start",
+    gap: "X",
+    checkBox: {
+      Flex: { boxSize: "A+X" }
+    }
   }
 };
 
@@ -13626,7 +13519,7 @@ var Flex2 = {
 var import_scratch11 = __toESM(require_cjs());
 
 // Field/node_modules/@symbo.ls/atoms/Media.js
-var import_utils9 = __toESM(require_cjs2());
+var import_utils7 = __toESM(require_cjs2());
 
 // Field/node_modules/@symbo.ls/atoms/Theme.js
 var import_scratch14 = __toESM(require_cjs());
@@ -13666,13 +13559,13 @@ var Focusable2 = {
 
 // Field/node_modules/@symbo.ls/atoms/Collection.js
 var import_state2 = __toESM(require_cjs5());
-var import_utils10 = __toESM(require_cjs2());
+var import_utils8 = __toESM(require_cjs2());
 
 // 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_cjs2());
+var import_utils9 = __toESM(require_cjs2());
 var import_scratch16 = __toESM(require_cjs());
 
 // Field/node_modules/@symbo.ls/atoms/Text.js
@@ -13680,7 +13573,7 @@ var import_scratch17 = __toESM(require_cjs());
 
 // Field/node_modules/@symbo.ls/atoms/Animation.js
 var import_scratch18 = __toESM(require_cjs());
-var import_utils12 = __toESM(require_cjs2());
+var import_utils10 = __toESM(require_cjs2());
 
 // Field/node_modules/@symbo.ls/emotion/index.js
 var createEmotion4 = (key = "smbls", container) => {
@@ -13692,93 +13585,584 @@ var emotion2 = createEmotion4();
 // Field/node_modules/@symbo.ls/atoms/Animation.js
 var { keyframes: keyframes2 } = emotion2;
 
-// Field/index.js
-var Field = {
-  extend: [IconText],
-  props: ({ state, key }) => ({
-    value: state[key],
-    depth: 16,
-    placeholder: "",
-    padding: "A B",
-    round: "C",
-    type: "text",
-    position: "relative",
-    width: "G",
-    appearance: "none",
-    outline: 0,
-    border: "none",
-    cursor: "pointer",
-    fontFamily: "inherit",
-    boxSizing: "border-box",
-    input: {
-      width: "100%",
-      height: "100%",
-      border: "none"
-    },
-    svg: {
-      position: "absolute",
-      right: "A"
-    }
-  }),
-  input: { extend: [Focusable2, Input2] }
-};
-var CustomizedField = {
-  extend: Field,
+// Input/index.js
+var import_utils11 = __toESM(require_cjs2());
+var Input2 = {
+  extend: [Focusable],
+  tag: "input",
+  deps: { isString: import_utils11.isString, replaceLiteralsWithObjectFields: import_utils11.replaceLiteralsWithObjectFields },
   props: {
-    background: "transparent",
-    border: "1px solid #3F3F43",
-    padding: "0",
-    minHeight: "C+W",
-    round: "Z",
-    overflow: "hidden",
+    border: "none",
+    type: "input",
+    theme: "tertiary",
+    fontSize: "A",
+    round: "C",
+    lineHeight: 1,
+    fontFamily: "smbls",
+    padding: "Z A"
+  },
+  attr: {
+    pattern: ({ props: props6 }) => props6.pattern,
+    minlength: ({ props: props6 }) => props6.minlength,
+    maxlength: ({ props: props6 }) => props6.maxlength,
+    name: ({ props: props6 }) => props6.name,
+    autocomplete: ({ props: props6 }) => props6.autocomplete,
+    placeholder: ({ props: props6 }) => props6.placeholder,
+    value: ({ props: props6, state, deps }) => {
+      const { isString: isString7, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields2 } = deps;
+      if (isString7(props6.value) && props6.value.includes("{{"))
+        return replaceLiteralsWithObjectFields2(props6.value, state);
+      return props6.value;
+    },
+    disabled: ({ props: props6 }) => props6.disabled || null,
+    readonly: ({ props: props6 }) => props6.readonly,
+    required: ({ props: props6 }) => props6.required,
+    type: ({ props: props6 }) => props6.type
+  }
+};
+var NumberInput = {
+  extend: Input2,
+  props: {
+    type: "number"
+  },
+  attr: {
+    step: ({ props: props6 }) => props6.step,
+    min: ({ props: props6 }) => props6.min,
+    max: ({ props: props6 }) => props6.max
+  }
+};
+
+// Field/index.js
+var Field = {
+  extend: [IconText],
+  props: ({ state, key }) => ({
+    value: state[key],
+    depth: 16,
+    placeholder: "",
+    padding: "A B",
+    round: "C",
+    type: "text",
+    position: "relative",
+    width: "G",
+    appearance: "none",
+    outline: 0,
+    border: "none",
+    cursor: "pointer",
+    fontFamily: "inherit",
+    boxSizing: "border-box",
+    input: {
+      width: "100%",
+      height: "100%",
+      border: "none"
+    },
+    svg: {
+      position: "absolute",
+      right: "A"
+    }
+  }),
+  input: { extend: [Focusable2, Input2] }
+};
+var CustomizedField = {
+  extend: Field,
+  props: {
+    padding: "0",
+    round: "0",
     input: {
       background: "transparent",
-      placeholder: "placeholder",
-      color: "white",
-      fontSize: "Z",
-      round: "0",
-      "::placeholder": { textTransform: "capitalize" }
+      border: "1px solid #3F3F43",
+      round: "Z",
+      minHeight: "C+W",
+      color: "white"
     }
-  }
+  },
+  input: { props: { placeholder: "placeholder" } }
 };
 var CodeField = {
   extend: Flex2,
   childExtend: {
     extend: CustomizedField,
     props: {
-      boxSize: "D D",
+      boxSize: "D+Z D+Z",
       input: {
         type: "number",
         placeholder: "0",
         textAlign: "center",
-        fontSize: "E"
+        fontSize: "E",
+        round: "Y"
+      },
+      style: { "input[type=number]::-webkit-inner-spin-button": { "-webkit-appearance": " none" } }
+    }
+  },
+  ...[{}, {}, {}, {}],
+  props: {
+    align: "center space-between",
+    gap: "A"
+  }
+};
+var FieldWithTitle = {
+  extend: Flex2,
+  title: { tag: "h6", props: { text: "Old password" } },
+  field: { extend: CustomizedField },
+  props: {
+    flow: "column",
+    gap: "Y",
+    title: {
+      fontSize: "Z",
+      color: "#CFCFD1",
+      fontWeight: "400"
+    },
+    subTitle: {
+      fontSize: "Z",
+      gap: "X+V",
+      padding: "X - - -",
+      icon: { boxSize: "Z+X Z+X" }
+    }
+  }
+};
+
+// node_modules/@symbo.ls/icon/index.js
+var Icon3 = {
+  extend: Svg,
+  props: ({ key, props: props6, parent, context }) => {
+    const { ICONS, useIconSprite, verbose } = context && context.designSystem;
+    const { toCamelCase } = context && context.utils;
+    const iconName = props6.inheritedString || props6.name || props6.icon || key;
+    const camelCase = toCamelCase(iconName);
+    const isArray5 = camelCase.split(/([a-z])([A-Z])/g);
+    let activeIconName;
+    if (props6.active) {
+      activeIconName = props6[".active"].name || props6[".active"].icon;
+    }
+    if (parent && parent.props && parent.props.active && parent.props[".active"] && parent.props[".active"].icon) {
+      activeIconName = parent.props[".active"].icon.name || parent.props[".active"].icon.icon || parent.props[".active"].icon;
+    }
+    let validIconName;
+    if (ICONS[activeIconName])
+      validIconName = activeIconName;
+    if (ICONS[camelCase])
+      validIconName = camelCase;
+    else if (ICONS[isArray5[0] + isArray5[1]])
+      validIconName = isArray5[0] + isArray5[1];
+    else if (ICONS[isArray5[0]])
+      validIconName = isArray5[0];
+    else {
+      if (verbose)
+        console.warn("Can't find icon:", iconName, validIconName);
+    }
+    const iconFromLibrary = ICONS[validIconName];
+    const directSrc = parent && parent.props && parent.props.src || props6.src;
+    return {
+      width: "A",
+      height: "A",
+      display: "inline-block",
+      spriteId: useIconSprite && validIconName,
+      src: iconFromLibrary || directSrc || ICONS.noIcon,
+      style: { fill: "currentColor" }
+    };
+  },
+  attr: { viewBox: "0 0 24 24" }
+};
+var IconText2 = {
+  extend: Flex,
+  props: {
+    align: "center center",
+    lineHeight: 1
+  },
+  // TODO: remove this variant
+  icon: {
+    extend: Icon3,
+    if: ({ parent }) => parent.props.icon
+  },
+  Icon: {
+    props: {},
+    if: ({ props: props6 }) => props6.name || props6.icon
+  },
+  text: ({ props: props6 }) => props6.text,
+  ".reversed": {
+    props: { flow: "row-reverse" }
+  },
+  ".vertical": {
+    props: { flow: "column" }
+  }
+};
+var FileIcon = {
+  extend: Flex,
+  props: {
+    theme: "tertiary",
+    boxSize: "C1",
+    align: "center center",
+    round: "Z"
+  },
+  Icon: {
+    fontSize: "B",
+    margin: "auto",
+    icon: "file"
+  }
+};
+
+// Modal/index.js
+var Modal = {
+  extend: Flex,
+  header: {
+    extend: Flex,
+    close: {
+      extend: Button,
+      props: { icon: "x" }
+    }
+  },
+  content: { extend: Flex },
+  footer: { extend: Flex },
+  props: {
+    background: "#1C1C1F",
+    padding: "A",
+    flow: "column",
+    round: "Z+V",
+    header: {
+      title: { fontSize: "B" },
+      close: {
+        margin: "- - - auto",
+        background: "transparent",
+        color: "white",
+        fontSize: "D",
+        padding: "0"
+      }
+    },
+    content: { flow: "column" }
+  }
+};
+var ModalWithTitleParagraph = {
+  extend: Modal,
+  header: { heading: { extend: TitleParagraph } },
+  props: {
+    header: {
+      alignItems: "flex-start",
+      heading: {
+        gap: "A",
+        title: { fontSize: "B" }
+      }
+    }
+  }
+};
+var ResetCompleteModal = {
+  extend: Modal,
+  header: {},
+  content: {
+    icon: { extend: CheckMark },
+    titleParagraph: {
+      extend: TitleParagraph,
+      title: { props: { text: "Reset complete!" } },
+      paragraph: { props: { text: "Your request has been approved!" } }
+    }
+  },
+  footer: {
+    button: {
+      extend: Button,
+      props: { text: "Done" }
+    }
+  },
+  props: {
+    minWidth: "G+E",
+    maxWidth: "G+E",
+    gap: "B",
+    content: {
+      flow: "column",
+      align: "center center",
+      gap: "B",
+      titleParagraph: {
+        align: "center center",
+        title: { fontSize: "B" }
+      }
+    },
+    footer: {
+      minWidth: "100%",
+      button: {
+        background: "#0474F2",
+        color: "white",
+        minWidth: "100%",
+        padding: "A -",
+        round: "A"
+      }
+    }
+  }
+};
+var MessageModal = {
+  extend: Modal,
+  header: {
+    title: {
+      tag: "h5",
+      props: { text: "Message" }
+    },
+    close: {}
+  },
+  content: {
+    p: {
+      props: { text: "Yes. If you change your mind and no longer wish to keep your iPhone, you have the option to return it to us. The returned iPhone must be in good condition and in the original packaging, which contains all accessories, manuals and instructions. Returns are subject to Apples Sales and Refunds Policy." }
+    }
+  },
+  footer: null,
+  props: {
+    minWidth: "G+E",
+    maxWidth: "G+E",
+    content: { p: { fontSize: "Z" } }
+  }
+};
+var ChangePasswordModal = {
+  extend: ModalWithTitleParagraph,
+  header: {},
+  content: {
+    childExtend: { extend: FieldWithTitle },
+    ...[
+      { title: { props: { text: "Old password" } } },
+      {
+        title: { props: { text: "New password" } },
+        field: { input: {} },
+        subTitle: {
+          extend: IconText2,
+          props: {
+            icon: { name: "info" },
+            text: "8 character minimum",
+            align: "center flex-start",
+            boxSize: "fit-content"
+          }
+        }
+      },
+      {
+        title: { props: { text: "Confirm new password" } },
+        field: {
+          input: {}
+        },
+        subTitle: {
+          extend: IconText2,
+          props: {
+            icon: { name: "info" },
+            text: "8 character minimum",
+            align: "center flex-start",
+            boxSize: "fit-content"
+          }
+        }
+      }
+    ]
+  },
+  footer: { "CancenConfirmButtons.1": { ...[{}, { text: "Reset password" }] } },
+  props: {
+    minWidth: "H",
+    maxWidth: "H",
+    gap: "B",
+    content: {
+      flow: "column",
+      gap: "B",
+      childProps: {
+        field: {
+          width: "100%",
+          input: { type: "password" }
+        }
+      }
+    },
+    footer: { justifyContent: "flex-end" }
+  }
+};
+var VerificationCodeModal = {
+  extend: ModalWithTitleParagraph,
+  header: {
+    heading: {
+      title: { props: { text: "Verify your email" } },
+      paragraph: { props: { text: "Verification code has been sent to you. Enter the code below." } }
+    }
+  },
+  content: {
+    codeField: { extend: CodeField },
+    paragraph: { extend: ParagraphWithUnderlineButton }
+  },
+  footer: { "CancenConfirmButtons.1": { ...[{}, { text: "Verify" }] } },
+  props: {
+    maxWidth: "G+E",
+    minWidth: "G+E",
+    gap: "B",
+    content: { gap: "B" },
+    footer: {
+      justifyContent: "flex-end"
+    }
+  }
+};
+
+// Textarea/index.js
+var Textarea = {
+  extend: [Input2],
+  tag: "textarea",
+  props: {
+    theme: "tertiary",
+    round: "Z2",
+    width: "G1",
+    height: "E1",
+    lineHeight: 1.4
+  }
+};
+var TextareaWithTitle = {
+  extend: Flex,
+  title: { tag: "h5", props: { text: "Message" } },
+  textArea: { extend: Textarea },
+  props: {
+    flow: "column",
+    gap: "Y",
+    title: {
+      fontSize: "Z",
+      color: "#CFCFD1",
+      fontWeight: "400"
+    },
+    textArea: {
+      background: "transparent",
+      border: "1px solid #3F3F43",
+      round: "Z",
+      minHeight: "D",
+      color: "white"
+    }
+  }
+};
+
+// Form/ContactForm.js
+var ContactForm = {
+  extend: ModalWithTitleParagraph,
+  header: {
+    heading: {
+      title: { props: { text: "We\u2019d love to help" } },
+      paragraph: { props: { text: "Reach out and we\u2019ll get in touch within 24 hours." } }
+    }
+  },
+  content: {
+    fields: {
+      extend: Flex,
+      names: {
+        extend: Flex,
+        childExtend: FieldWithTitle,
+        ...[
+          {
+            title: { props: { text: "First name" } },
+            field: { input: { props: { placeholder: "First name" } } }
+          },
+          {
+            title: { props: { text: "Last name" } },
+            field: { input: { props: { placeholder: "Last name" } } }
+          }
+        ]
       },
-      style: { "input[type=number]::-webkit-inner-spin-button": { "-webkit-appearance": " none" } }
+      mail: {
+        extend: FieldWithTitle,
+        title: { props: { text: "Email" } },
+        field: { input: { props: { placeholder: "example@email.com" } } }
+      },
+      message: { extend: TextareaWithTitle }
+    },
+    checkParagraph: {
+      extend: ParagrapUnderlineLinkWithCheckbox,
+      checkBox: {},
+      paragraph: {
+        p: { props: { text: "You agree to " } },
+        underlined: { props: { text: "privacy policy" } }
+      }
+    }
+  },
+  footer: {
+    sendButton: {
+      extend: Button,
+      props: { text: "Send message" }
     }
   },
-  ...[{}, {}, {}, {}],
   props: {
-    align: "center flex-start",
-    gap: "A"
+    padding: "B",
+    minWidth: "H+C",
+    maxWidth: "H+C",
+    header: {
+      heading: {
+        gap: "Y",
+        title: {
+          fontSize: `${24 / 16}em`,
+          fontWeight: "800"
+        }
+      }
+    },
+    content: {
+      padding: "B - A -",
+      fields: {
+        flow: "column",
+        gap: "A",
+        names: {
+          gap: "B+Z",
+          childProps: {
+            width: "50%",
+            field: { width: "100%" }
+          }
+        },
+        mail: { field: { width: "100%" } },
+        message: { textArea: { width: "100%" } }
+      },
+      checkParagraph: {
+        padding: "A - - -",
+        paragraph: {
+          p: { color: "#E0E0E2" },
+          underlined: { fontWeight: "400" }
+        }
+      }
+    },
+    footer: {
+      sendButton: {
+        background: "#0474F2",
+        color: "white",
+        minWidth: "100%",
+        padding: "A -",
+        round: "Z",
+        fontWeight: "500"
+      }
+    }
   }
 };
-var FieldWithTitle = {
-  extend: Flex2,
-  title: {
-    tag: "h6",
-    props: { text: "Old password" }
-  },
-  field: { extend: CustomizedField },
+
+// Link/index.js
+var import_router = __toESM(require_cjs6());
+var Link = {
+  extend: Focusable,
+  tag: "a",
   props: {
-    flow: "column",
-    gap: "Y",
-    title: {
-      fontSize: "Z",
-      color: "#CFCFD1",
-      padding: "- - - Y+W"
+    aria: {},
+    fontWeight: "bold",
+    textDecoration: "none",
+    color: "currentColor",
+    draggable: false
+  },
+  attr: {
+    href: (el, s, ctx) => {
+      const { exec: exec3 } = ctx.utils;
+      return exec3(el.props.href, el) || exec3(el.props, el).href;
+    },
+    target: ({ props: props6 }) => props6.target,
+    "aria-label": ({ props: props6 }) => props6.aria ? props6.aria.label : props6.text,
+    draggable: ({ props: props6 }) => props6.draggable
+  }
+};
+var RouterLink = {
+  on: {
+    click: (event, el, s, ctx) => {
+      const { props: props6 } = el;
+      const { href } = props6;
+      if (!href)
+        return;
+      const { utils, routerOptions } = ctx;
+      const { router } = utils;
+      const root = el.__ref.__root;
+      console.log(href);
+      const linkIsExternal = href.includes("http://") || href.includes("https://") || href.includes("mailto:") || href.includes("tel:");
+      const options = props6.routerOptions || routerOptions || {
+        scrollToOptions: { behaviour: "instant" }
+      };
+      if (href && !linkIsExternal) {
+        (router || import_router.router)(href, root, {}, options);
+        event.preventDefault();
+      }
     }
   }
 };
+var RouteLink = {
+  extend: [Link, RouterLink]
+};
 
 // Video/index.js
 var Video = {
@@ -13805,7 +14189,7 @@ var Video = {
 };
 
 // Range/index.js
-var import_utils13 = __toESM(require_cjs2());
+var import_utils12 = __toESM(require_cjs2());
 var import_scratch19 = __toESM(require_cjs());
 var props4 = {
   appearance: "none",
@@ -13873,7 +14257,7 @@ var Range = {
 };
 var listenProp = (el, prop, def) => {
   const val = el.props && el.props[prop];
-  const r = (0, import_utils13.isFunction)(val) ? val(el, el.state) : val !== void 0 ? val : def !== void 0 ? def : 50;
+  const r = (0, import_utils12.isFunction)(val) ? val(el, el.state) : val !== void 0 ? val : def !== void 0 ? def : 50;
   return r + "";
 };
 var RangeWithButtons = {
@@ -13882,7 +14266,7 @@ var RangeWithButtons = {
     props: { theme: "tertiary", icon: "minus" },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils13.isFunction)(el.props.onClick) && el.props.onClick(ev, el, s);
+        el.props && (0, import_utils12.isFunction)(el.props.onClick) && el.props.onClick(ev, el, s);
       }
     }
   },
@@ -13903,8 +14287,8 @@ var RangeWithButtons = {
       step: (el, s) => listenProp(el, "step", 1)
     },
     on: {
-      input: (ev, el, s) => el.props && (0, import_utils13.isFunction)(el.props.onInput) && el.props.onInput(ev, el, el.state),
-      change: (ev, el, s) => el.props && (0, import_utils13.isFunction)(el.props.onChange) && el.props.onChange(ev, el, el.state)
+      input: (ev, el, s) => el.props && (0, import_utils12.isFunction)(el.props.onInput) && el.props.onInput(ev, el, el.state),
+      change: (ev, el, s) => el.props && (0, import_utils12.isFunction)(el.props.onChange) && el.props.onChange(ev, el, el.state)
     }
   },
   plus: {
@@ -13912,7 +14296,7 @@ var RangeWithButtons = {
     props: { theme: "tertiary", icon: "plus" },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils13.isFunction)(el.props.onClick) && el.props.onClick(ev, el, el.state);
+        el.props && (0, import_utils12.isFunction)(el.props.onClick) && el.props.onClick(ev, el, el.state);
       }
     }
   }
@@ -13939,7 +14323,7 @@ var style_default = {
 
 // Slider/index.js
 var import_scratch20 = __toESM(require_cjs());
-var import_utils14 = __toESM(require_cjs2());
+var import_utils13 = __toESM(require_cjs2());
 (0, import_scratch20.set)({
   theme: {
     sliderThumb: {
@@ -13971,7 +14355,7 @@ var RangeSlider = {
 };
 var listenProp2 = (el, prop, def) => {
   const val = el && el.props && el.props[prop];
-  const r = ((0, import_utils14.isFunction)(val) ? val() : val) || (def !== void 0 ? def : 50);
+  const r = ((0, import_utils13.isFunction)(val) ? val() : val) || (def !== void 0 ? def : 50);
   return r;
 };
 var Slider = {
@@ -13982,10 +14366,10 @@ var Slider = {
     },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils14.isFunction)(el.props.click) && el.props.click(ev, el, s);
+        el.props && (0, import_utils13.isFunction)(el.props.click) && el.props.click(ev, el, s);
         const input = el.parent.input;
         const props6 = input.props;
-        const value = (0, import_utils14.isFunction)(props6.value) ? props6.value() : props6.value;
+        const value = (0, import_utils13.isFunction)(props6.value) ? props6.value() : props6.value;
         input.node.value = value;
       }
     }
@@ -14008,8 +14392,8 @@ var Slider = {
       step: (el, s) => listenProp2(el, "step", 1)
     },
     on: {
-      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)
+      input: (ev, el, s) => el.props && (0, import_utils13.isFunction)(el.props.input) && el.props.input(ev, el, s),
+      change: (ev, el, s) => el.props && (0, import_utils13.isFunction)(el.props.change) && el.props.change(ev, el, s)
     }
   },
   button1: {
@@ -14019,10 +14403,10 @@ var Slider = {
     },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils14.isFunction)(el.props.click) && el.props.click(ev, el, s);
+        el.props && (0, import_utils13.isFunction)(el.props.click) && el.props.click(ev, el, s);
         const input = el.parent.input;
         const props6 = input.props;
-        const value = (0, import_utils14.isFunction)(props6.value) ? props6.value() : props6.value;
+        const value = (0, import_utils13.isFunction)(props6.value) ? props6.value() : props6.value;
         input.node.value = value;
       }
     }
@@ -14116,19 +14500,6 @@ var TooltipParent = {
   }
 };
 
-// Textarea/index.js
-var Textarea = {
-  extend: [Input2],
-  tag: "textarea",
-  props: {
-    theme: "tertiary",
-    round: "Z2",
-    width: "G1",
-    height: "E1",
-    lineHeight: 1.4
-  }
-};
-
 // Upload/UploadResult.js
 var Captions = {
   extend: Flex,
@@ -14796,7 +15167,7 @@ var Card = {
     title: { props: { text: "Total crypto assets" } },
     icon: { extend: Icon, props: { name: "arrowUpRight" } }
   },
-  content: {
+  contentx: {
     extend: AmountWithLabel,
     amount: { props: { text: "$ 12,759" } },
     label: { props: { text: "+ 8.8%" } }
@@ -14894,161 +15265,6 @@ var IconTextWithNotification = {
   }
 };
 
-// TextComponents/index.js
-var TitleParagraph = {
-  extend: Flex,
-  title: {
-    tag: "h5",
-    props: { text: "Log in to your account" }
-  },
-  paragraph: {
-    tag: "p",
-    props: { text: "Enter your email address and password to log in." }
-  },
-  props: {
-    flow: "column",
-    gap: "Y",
-    maxWidth: "fit-content",
-    heading: { title: { fontSize: "D" } },
-    paragraph: {
-      fontSize: "Z",
-      padding: "0",
-      margin: "0",
-      color: "#E0E0E2"
-    }
-  }
-};
-var ParagraphWithUnderlineButton = {
-  extend: Flex,
-  p: { props: { text: "Didnt get the code?" } },
-  underlined: {
-    extend: Button,
-    props: { text: "Click to reset" }
-  },
-  props: {
-    align: "center flex-start",
-    gap: "Z",
-    fontSize: "Z",
-    p: { color: "#A3A3A8" },
-    underlined: {
-      padding: "0",
-      background: "transparent",
-      color: "#E0E0E2",
-      cursor: "pointer",
-      textDecoration: "underline",
-      fontWeight: "500"
-    }
-  }
-};
-var ParagrapUnderlineLinkWithCheckbox = {
-  extend: Flex,
-  checkBox: { extend: Checkbox },
-  paragraph: { extend: ParagraphWithUnderlineButton },
-  props: {
-    align: "center flex-start",
-    gap: "X",
-    checkBox: {
-      Flex: { boxSize: "A+X" }
-    }
-  }
-};
-
-// Modal/index.js
-var Modal = {
-  extend: Flex,
-  header: {
-    extend: Flex,
-    close: {
-      extend: Button,
-      props: { icon: "x" }
-    }
-  },
-  content: { extend: Flex },
-  footer: {},
-  props: {
-    background: "#1C1C1F",
-    padding: "A",
-    flow: "column",
-    round: "Z+V",
-    header: {
-      alignItems: "center",
-      title: { fontSize: "B" },
-      close: {
-        margin: "- - - auto",
-        background: "transparent",
-        color: "white",
-        fontSize: "D",
-        padding: "0"
-      }
-    }
-  }
-};
-var ResetCompleteModal = {
-  extend: Modal,
-  header: {},
-  content: {
-    icon: { extend: CheckMark },
-    titleParagraph: {
-      extend: TitleParagraph,
-      title: { props: { text: "Reset complete!" } },
-      paragraph: { props: { text: "Your request has been approved!" } }
-    }
-  },
-  footer: {
-    button: {
-      extend: Button,
-      props: { text: "Done" }
-    }
-  },
-  props: {
-    minWidth: "G+E",
-    maxWidth: "G+E",
-    gap: "B",
-    content: {
-      flow: "column",
-      align: "center center",
-      gap: "B",
-      titleParagraph: {
-        align: "center center",
-        title: { fontSize: "B" }
-      }
-    },
-    footer: {
-      minWidth: "100%",
-      button: {
-        background: "#0474F2",
-        color: "white",
-        minWidth: "100%",
-        padding: "A -",
-        round: "A"
-      }
-    }
-  }
-};
-var MessageModal = {
-  extend: Modal,
-  header: {
-    title: {
-      tag: "h5",
-      props: { text: "Message" }
-    },
-    close: {}
-  },
-  content: {
-    p: {
-      props: { text: "Yes. If you change your mind and no longer wish to keep your iPhone, you have the option to return it to us. The returned iPhone must be in good condition and in the original packaging, which contains all accessories, manuals and instructions. Returns are subject to Apples Sales and Refunds Policy." }
-    }
-  },
-  footer: null,
-  props: {
-    minWidth: "G+E",
-    maxWidth: "G+E",
-    content: {
-      p: { fontSize: "Z" }
-    }
-  }
-};
-
 // SlideTabs/index.js
 var SlideTabs = {
   extend: Flex,