@symbo.ls/uikit 2.11.238 → 2.11.240

package/dist/index.cjs.js

@@ -275,7 +275,7 @@ var require_cjs = __commonJS({
           isObject: () => isObject8,
           isObjectLike: () => isObjectLike3,
           isString: () => isString10,
-          isUndefined: () => isUndefined2
+          isUndefined: () => isUndefined3
         });
         module22.exports = __toCommonJS22(types_exports);
         var import_node = require_node2();
@@ -299,7 +299,7 @@ var require_cjs = __commonJS({
         var isDefined2 = (arg) => {
           return isObject8(arg) || isObjectLike3(arg) || isString10(arg) || isNumber2(arg) || isFunction22(arg) || isArray8(arg) || isObjectLike3(arg) || isBoolean(arg) || isDate(arg) || isNull(arg);
         };
-        var isUndefined2 = (arg) => {
+        var isUndefined3 = (arg) => {
           return arg === void 0;
         };
         var TYPES = {
@@ -462,7 +462,8 @@ var require_cjs = __commonJS({
         var string_exports = {};
         __export22(string_exports, {
           replaceLiteralsWithObjectFields: () => replaceLiteralsWithObjectFields2,
-          stringIncludesAny: () => stringIncludesAny
+          stringIncludesAny: () => stringIncludesAny,
+          trimStringFromSymbols: () => trimStringFromSymbols
         });
         module22.exports = __toCommonJS22(string_exports);
         var stringIncludesAny = (str, characters2) => {
@@ -473,6 +474,10 @@ var require_cjs = __commonJS({
           }
           return false;
         };
+        var trimStringFromSymbols = (str, characters2) => {
+          const pattern = new RegExp(`[${characters2.join("\\")}]`, "g");
+          return str.replace(pattern, "");
+        };
         var brackRegex = /\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g;
         var replaceLiteralsWithObjectFields2 = (str, state) => {
           if (!str.includes("{{"))
@@ -522,6 +527,7 @@ var require_cjs = __commonJS({
           clone: () => clone,
           deepClone: () => deepClone22,
           deepCloneExclude: () => deepCloneExclude,
+          deepCloneWithExtnd: () => deepCloneWithExtnd,
           deepContains: () => deepContains,
           deepDestringify: () => deepDestringify,
           deepDiff: () => deepDiff2,
@@ -652,6 +658,23 @@ var require_cjs = __commonJS({
           }
           return o;
         };
+        var deepCloneWithExtnd = (obj, excludeFrom = [], cleanUndefined = false) => {
+          const o = (0, import_types.isArray)(obj) ? [] : {};
+          for (const prop in obj) {
+            if (prop === "__proto__")
+              continue;
+            if (excludeFrom.includes(prop) || prop.startsWith("__"))
+              continue;
+            const objProp = obj[prop];
+            if (cleanUndefined && (0, import_types.isUndefined)(objProp))
+              continue;
+            if ((0, import_types.isObjectLike)(objProp)) {
+              o[prop] = deepCloneWithExtnd(objProp, excludeFrom, cleanUndefined);
+            } else
+              o[prop] = objProp;
+          }
+          return o;
+        };
         var deepStringify = (obj, stringified = {}) => {
           for (const prop in obj) {
             const objProp = obj[prop];
@@ -682,7 +705,7 @@ var require_cjs = __commonJS({
           const spaces = "  ".repeat(indent);
           let str = "{\n";
           for (const [key, value] of Object.entries(obj)) {
-            const keyNotAllowdChars = (0, import_string.stringIncludesAny)(key, ["&", "*", "-", ":", "@", ".", "/", "!"]);
+            const keyNotAllowdChars = (0, import_string.stringIncludesAny)(key, ["&", "*", "-", ":", "@", ".", "/", "!", " "]);
             const stringedKey = keyNotAllowdChars ? `'${key}'` : key;
             str += `${spaces}  ${stringedKey}: `;
             if ((0, import_types.isArray)(value)) {
@@ -1520,7 +1543,7 @@ var require_cjs = __commonJS({
       return unit === "em" || unit === "rem" || unit === "vw" || unit === "vh" || unit === "vmax" || unit === "vmin";
     };
     var import_globals = __toESM2(require_cjs7(), 1);
-    var import_utils14 = __toESM2(require_cjs22(), 1);
+    var import_utils15 = __toESM2(require_cjs22(), 1);
     var ENV = "development";
     var colorStringToRgbaArray = (color) => {
       if (color === "")
@@ -1648,11 +1671,11 @@ var require_cjs = __commonJS({
       return `rgba(${arr})`;
     };
     var getRgbTone = (rgb, tone) => {
-      if ((0, import_utils14.isString)(rgb) && rgb.includes("rgb"))
+      if ((0, import_utils15.isString)(rgb) && rgb.includes("rgb"))
         rgb = colorStringToRgbaArray(rgb).join(", ");
-      if ((0, import_utils14.isString)(rgb))
+      if ((0, import_utils15.isString)(rgb))
         rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
-      if ((0, import_utils14.isNumber)(tone))
+      if ((0, import_utils15.isNumber)(tone))
         tone += "";
       const toHex = rgbArrayToHex(rgb);
       const abs2 = tone.slice(0, 1);
@@ -2676,7 +2699,7 @@ var require_cjs = __commonJS({
       const str = `${value.join(", ")}, ${FONT_FAMILY_TYPES2[type]}`;
       return { var: CSSvar, value: str, arr: value, type };
     };
-    var import_utils15 = __toESM2(require_cjs22(), 1);
+    var import_utils152 = __toESM2(require_cjs22(), 1);
     var runThroughMedia = (FACTORY2) => {
       const CONFIG22 = getActiveConfig3();
       const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG22;
@@ -2696,7 +2719,7 @@ var require_cjs = __commonJS({
           h1Matches,
           unit
         } = FACTORY2;
-        (0, import_utils15.merge)(mediaValue, {
+        (0, import_utils152.merge)(mediaValue, {
           type,
           base,
           ratio,
@@ -2713,7 +2736,7 @@ var require_cjs = __commonJS({
           applyMediaSequenceVars(FACTORY2, prop);
           continue;
         }
-        (0, import_utils15.merge)(mediaValue, {
+        (0, import_utils152.merge)(mediaValue, {
           sequence: {},
           scales: {},
           templates: {},
@@ -3502,7 +3525,7 @@ var require_types = __commonJS({
       isObject: () => isObject4,
       isObjectLike: () => isObjectLike2,
       isString: () => isString7,
-      isUndefined: () => isUndefined2
+      isUndefined: () => isUndefined3
     });
     module2.exports = __toCommonJS2(types_exports);
     var import_node = require_node();
@@ -3526,7 +3549,7 @@ var require_types = __commonJS({
     var isDefined2 = (arg) => {
       return isObject4(arg) || isObjectLike2(arg) || isString7(arg) || isNumber(arg) || isFunction3(arg) || isArray3(arg) || isObjectLike2(arg) || isBoolean(arg) || isDate(arg) || isNull(arg);
     };
-    var isUndefined2 = (arg) => {
+    var isUndefined3 = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
@@ -3902,7 +3925,7 @@ var require_object = __commonJS({
         if (cleanUndefined && (0, import_types.isUndefined)(objProp))
           continue;
         if ((0, import_types.isObjectLike)(objProp)) {
-          o[prop] = deepClone3(objProp, excludeFrom, cleanUndefined);
+          o[prop] = deepCloneWithExtnd(objProp, excludeFrom, cleanUndefined);
         } else
           o[prop] = objProp;
       }
@@ -4696,12 +4719,12 @@ var require_on = __commonJS({
       triggerEventOnUpdate: () => triggerEventOnUpdate
     });
     module2.exports = __toCommonJS2(on_exports);
-    var import_utils14 = require_cjs2();
+    var import_utils15 = 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_utils14.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);
       }
@@ -4710,7 +4733,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_utils14.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);
       }
@@ -4721,7 +4744,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_utils14.isFunction)(appliedFunction)) {
+        if ((0, import_utils15.isFunction)(appliedFunction)) {
           node2.addEventListener(param, (event) => {
             const { state, context } = element;
             appliedFunction(event, element, state, context);
@@ -4856,10 +4879,10 @@ var require_can = __commonJS({
     });
     module2.exports = __toCommonJS2(can_exports);
     var import_report = require_cjs3();
-    var import_utils14 = require_cjs2();
+    var import_utils15 = require_cjs2();
     var canRender = (element) => {
       const tag = element.tag || "div";
-      return (0, import_utils14.isValidHtmlTag)(tag) || (0, import_report.report)("HTMLInvalidTag");
+      return (0, import_utils15.isValidHtmlTag)(tag) || (0, import_report.report)("HTMLInvalidTag");
     };
   }
 });
@@ -4925,11 +4948,11 @@ var require_methods = __commonJS({
       toggle: () => toggle
     });
     module2.exports = __toCommonJS2(methods_exports);
-    var import_utils14 = require_cjs2();
+    var import_utils15 = require_cjs2();
     var import_ignore = require_ignore();
     var parse2 = function() {
       const state = this;
-      if ((0, import_utils14.isObject)(state)) {
+      if ((0, import_utils15.isObject)(state)) {
         const obj = {};
         for (const param in state) {
           if (!import_ignore.IGNORE_STATE_PARAMS.includes(param)) {
@@ -4937,7 +4960,7 @@ var require_methods = __commonJS({
           }
         }
         return obj;
-      } else if ((0, import_utils14.isArray)(state)) {
+      } else if ((0, import_utils15.isArray)(state)) {
         return state.filter((item) => !import_ignore.IGNORE_STATE_PARAMS.includes(item));
       }
     };
@@ -4957,7 +4980,7 @@ var require_methods = __commonJS({
       const state = this;
       const element = state.__element;
       const stateKey = element.__ref.__state;
-      if ((0, import_utils14.isString)(stateKey)) {
+      if ((0, import_utils15.isString)(stateKey)) {
         element.parent.state.remove(stateKey, { isHoisted: true, ...options });
         return element.state;
       }
@@ -4970,7 +4993,7 @@ var require_methods = __commonJS({
         for (const key in state.__children) {
           const child = state.__children[key];
           if (child.state) {
-            if ((0, import_utils14.isArray)(child.state)) {
+            if ((0, import_utils15.isArray)(child.state)) {
               Object.defineProperty(child.state, "parent", {
                 value: state.parent,
                 enumerable: false,
@@ -5004,10 +5027,10 @@ var require_methods = __commonJS({
     };
     var add = function(value, options = {}) {
       const state = this;
-      if ((0, import_utils14.isArray)(state)) {
+      if ((0, import_utils15.isArray)(state)) {
         state.push(value);
         state.update(state.parse(), { overwrite: "replace", ...options });
-      } else if ((0, import_utils14.isObject)(state)) {
+      } else if ((0, import_utils15.isObject)(state)) {
         const key = Object.keys(state).length;
         state.update({ [key]: value }, options);
       }
@@ -5018,25 +5041,25 @@ var require_methods = __commonJS({
     };
     var remove = function(key, options = {}) {
       const state = this;
-      if ((0, import_utils14.isArray)(state))
-        (0, import_utils14.removeFromArray)(state, key);
-      if ((0, import_utils14.isObject)(state))
-        (0, import_utils14.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 set3 = function(val, options = {}) {
       const state = this;
-      const value = (0, import_utils14.deepCloneWithExtnd)(val);
+      const value = (0, import_utils15.deepCloneWithExtnd)(val);
       return state.clean({ preventStateUpdate: true, ...options }).update(value, { replace: true, ...options });
     };
     var reset = function(options = {}) {
       const state = this;
-      const value = (0, import_utils14.deepCloneWithExtnd)(state.parse());
+      const value = (0, import_utils15.deepCloneWithExtnd)(state.parse());
       return state.set(value, { replace: true, ...options });
     };
     var apply = function(func, options = {}) {
       const state = this;
-      if ((0, import_utils14.isFunction)(func)) {
+      if ((0, import_utils15.isFunction)(func)) {
         func(state);
         return state.update(state.parse(), { replace: true, ...options });
       }
@@ -5076,7 +5099,7 @@ var require_inherit = __commonJS({
       isState: () => isState2
     });
     module2.exports = __toCommonJS2(inherit_exports);
-    var import_utils14 = require_cjs2();
+    var import_utils15 = require_cjs2();
     var import_ignore = require_ignore();
     var getParentStateInKey = (stateKey, parentState) => {
       if (!stateKey.includes("../"))
@@ -5128,11 +5151,11 @@ var require_inherit = __commonJS({
     var createInheritedState = (element, parent) => {
       const ref = element.__ref;
       const inheritedState = findInheritedState(element, parent);
-      if ((0, import_utils14.isUndefined)(inheritedState))
+      if ((0, import_utils15.isUndefined)(inheritedState))
         return element.state;
-      if ((0, import_utils14.is)(inheritedState)("object", "array")) {
-        return (0, import_utils14.deepCloneWithExtnd)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
-      } else if ((0, import_utils14.is)(inheritedState)("string", "number", "boolean")) {
+      if ((0, import_utils15.is)(inheritedState)("object", "array")) {
+        return (0, import_utils15.deepCloneWithExtnd)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
+      } else if ((0, import_utils15.is)(inheritedState)("string", "number", "boolean")) {
         ref.__stateType = typeof inheritedState;
         return { value: inheritedState };
       }
@@ -5141,12 +5164,12 @@ var require_inherit = __commonJS({
     var checkIfInherits = (element) => {
       const ref = element.__ref;
       const stateKey = ref.__state;
-      if (stateKey && (0, import_utils14.is)(stateKey)("number", "string", "boolean"))
+      if (stateKey && (0, import_utils15.is)(stateKey)("number", "string", "boolean"))
         return true;
       return false;
     };
     var isState2 = function(state) {
-      if (!(0, import_utils14.isObjectLike)(state))
+      if (!(0, import_utils15.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;
     };
@@ -5195,7 +5218,7 @@ var require_updateState = __commonJS({
     var import_report = require_cjs3();
     var import_event = require_cjs4();
     var import_ignore = require_ignore();
-    var import_utils14 = require_cjs2();
+    var import_utils15 = require_cjs2();
     var import_inherit = require_inherit();
     var STATE_UPDATE_OPTIONS = {
       overwrite: true,
@@ -5208,7 +5231,7 @@ var require_updateState = __commonJS({
       const state = this;
       const element = state.__element;
       if (!options.updateByState)
-        (0, import_utils14.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) {
@@ -5238,10 +5261,10 @@ var require_updateState = __commonJS({
       const shallow = overwrite === "shallow";
       const merge22 = overwrite === "merge";
       if (merge22) {
-        (0, import_utils14.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
+        (0, import_utils15.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
         return;
       }
-      const overwriteFunc = shallow ? import_utils14.overwriteShallow : import_utils14.overwriteDeep;
+      const overwriteFunc = shallow ? import_utils15.overwriteShallow : import_utils15.overwriteDeep;
       overwriteFunc(state, obj, import_ignore.IGNORE_STATE_PARAMS);
     };
     var hoistStateUpdate = (state, obj, options) => {
@@ -5263,7 +5286,7 @@ var require_updateState = __commonJS({
       const changesValue = (0, import_inherit.createChangesByKey)(stateKey, passedValue);
       const targetParent = findGrandParentState || parent.state;
       if (options.replace)
-        (0, import_utils14.overwriteDeep)(targetParent, changesValue || value);
+        (0, import_utils15.overwriteDeep)(targetParent, changesValue || value);
       targetParent.update(changesValue, {
         execStateFunction: false,
         isHoisted: true,
@@ -5332,7 +5355,7 @@ var require_create = __commonJS({
     });
     module2.exports = __toCommonJS2(create_exports);
     var import_event = require_cjs4();
-    var import_utils14 = require_cjs2();
+    var import_utils15 = require_cjs2();
     var import_ignore = require_ignore();
     var import_methods = require_methods();
     var import_updateState = require_updateState();
@@ -5346,13 +5369,13 @@ var require_create = __commonJS({
       if (objectizeState === false)
         return parent.state || {};
       else
-        element.state = (0, import_utils14.deepCloneWithExtnd)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
+        element.state = (0, import_utils15.deepCloneWithExtnd)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
       const whatInitReturns = (0, import_event.triggerEventOn)("stateInit", element, options);
       if (whatInitReturns === false)
         return element.state;
       if ((0, import_inherit.checkIfInherits)(element)) {
         const inheritedState = (0, import_inherit.createInheritedState)(element, parent);
-        element.state = (0, import_utils14.isUndefined)(inheritedState) ? {} : inheritedState;
+        element.state = (0, import_utils15.isUndefined)(inheritedState) ? {} : inheritedState;
       }
       const dependentState = applyDependentState(element, element.state);
       if (dependentState)
@@ -5365,17 +5388,17 @@ var require_create = __commonJS({
       const { __ref: ref } = state;
       if (!ref)
         return;
-      const dependentState = (0, import_utils14.deepCloneWithExtnd)(ref, import_ignore.IGNORE_STATE_PARAMS);
+      const dependentState = (0, import_utils15.deepCloneWithExtnd)(ref, import_ignore.IGNORE_STATE_PARAMS);
       const newDepends = { [element.key]: dependentState };
-      ref.__depends = (0, import_utils14.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_utils14.isFunction)(state)) {
+      if ((0, import_utils15.isFunction)(state)) {
         ref.__state = state;
-        return (0, import_utils14.exec)(state, element);
-      } else if ((0, import_utils14.is)(state)("string", "number")) {
+        return (0, import_utils15.exec)(state, element);
+      } else if ((0, import_utils15.is)(state)("string", "number")) {
         ref.__state = state;
         return {};
       } else if (state === true) {
@@ -5423,7 +5446,7 @@ var require_create = __commonJS({
         __children: {},
         __root: ref.__root ? ref.__root.state : state
       };
-      if ((0, import_utils14.isArray)(state)) {
+      if ((0, import_utils15.isArray)(state)) {
         addProtoToArray(state, proto);
       } else {
         Object.setPrototypeOf(state, proto);
@@ -5493,8 +5516,8 @@ var require_cjs6 = __commonJS({
       router: () => router
     });
     module2.exports = __toCommonJS2(router_exports);
-    var import_utils14 = require_cjs2();
-    var getActiveRoute = (level = 0, route = import_utils14.window.location.pathname) => {
+    var import_utils15 = require_cjs2();
+    var getActiveRoute = (level = 0, route = import_utils15.window.location.pathname) => {
       const routeArray = route.split("/");
       const activeRoute = routeArray[level + 1];
       if (activeRoute)
@@ -5508,7 +5531,7 @@ var require_cjs6 = __commonJS({
       initialRender: false,
       scrollToTop: true,
       scrollToNode: false,
-      scrollNode: import_utils14.document && import_utils14.document.documentElement,
+      scrollNode: import_utils15.document && import_utils15.document.documentElement,
       scrollBody: false,
       useFragment: false,
       updateState: true,
@@ -5523,13 +5546,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_utils14.window.location.hash.slice(1);
+      const hashChanged = hash2 && hash2 !== import_utils15.window.location.hash.slice(1);
       const pathChanged = pathname !== lastPathname;
       lastPathname = pathname;
       if (!content)
         return;
       if (options.pushState) {
-        import_utils14.window.history.pushState(state, null, pathname + (hash2 ? `#${hash2}` : ""));
+        import_utils15.window.history.pushState(state, null, pathname + (hash2 ? `#${hash2}` : ""));
       }
       if (pathChanged || !hashChanged) {
         if (options.updateState) {
@@ -5555,7 +5578,7 @@ var require_cjs6 = __commonJS({
         });
       }
       if (hash2) {
-        const activeNode = import_utils14.document.getElementById(hash2);
+        const activeNode = import_utils15.document.getElementById(hash2);
         if (activeNode) {
           const top = activeNode.getBoundingClientRect().top + rootNode.scrollTop - options.scrollToOffset || 0;
           scrollNode.scrollTo({
@@ -5578,7 +5601,9 @@ __export(uikit_exports, {
   AvatarBundle: () => AvatarBundle,
   AvatarChooser: () => AvatarChooser,
   AvatarIndicator: () => AvatarIndicator,
+  B: () => B,
   BalanceCard: () => BalanceCard,
+  Banner: () => Banner,
   Block: () => Block,
   Box: () => Box,
   Br: () => Br,
@@ -5611,6 +5636,7 @@ __export(uikit_exports, {
   Dialog: () => Dialog,
   DialogFooter: () => DialogFooter,
   Direction: () => Direction,
+  DotList: () => DotList,
   DoubleHr: () => DoubleHr,
   DoubleUnitValue: () => DoubleUnitValue,
   DropDownButton: () => DropDownButton,
@@ -5642,6 +5668,7 @@ __export(uikit_exports, {
   Headline: () => Headline,
   Hoverable: () => Hoverable,
   Hr: () => Hr,
+  I: () => I,
   Icon: () => Icon,
   IconCommonButton: () => IconCommonButton,
   IconTab: () => IconTab,
@@ -6378,6 +6405,12 @@ var Theme = {
     columnRule: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.columnRule) && {
       columnRule: deps.transformBorder(props4.columnRule)
     },
+    filter: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.filter) && {
+      filter: props4.filter
+    },
+    mixBlendMode: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.mixBlendMode) && {
+      mixBlendMode: props4.mixBlendMode
+    },
     appearance: ({ props: props4 }) => !(0, import_utils.isUndefined)(props4.appearance) && {
       appearance: props4.appearance
     }
@@ -8331,6 +8364,7 @@ var Shape = {
 };
 
 // Atoms/Text.js
+var import_utils7 = __toESM(require_cjs2());
 var import_scratch9 = __toESM(require_cjs());
 var Text = {
   deps: { getFontSizeByKey: import_scratch9.getFontSizeByKey, getFontFamily: import_scratch9.getFontFamily },
@@ -8344,17 +8378,18 @@ var Text = {
       const { props: props4, deps } = el;
       return props4.fontSize ? deps.getFontSizeByKey(props4.fontSize) : null;
     },
-    fontFamily: ({ props: props4, deps }) => props4.fontFamily && {
+    fontFamily: ({ props: props4, deps }) => !(0, import_utils7.isUndefined)(props4.fontFamily) && {
       fontFamily: deps.getFontFamily(props4.fontFamily) || props4.fontFamily
     },
-    lineHeight: ({ props: props4 }) => props4.lineHeight && { lineHeight: props4.lineHeight },
-    // lineHeight: ({ props }) => props.lineHeight && getSpacingBasedOnRatio(props, 'lineHeight', null, ''),
-    textDecoration: ({ props: props4 }) => props4.textDecoration && { textDecoration: props4.textDecoration },
-    textTransform: ({ props: props4 }) => props4.textTransform && { textTransform: props4.textTransform },
-    whiteSpace: ({ props: props4 }) => props4.whiteSpace && { whiteSpace: props4.whiteSpace },
-    letterSpacing: ({ props: props4 }) => props4.letterSpacing && { letterSpacing: props4.letterSpacing },
-    textAlign: ({ props: props4 }) => props4.textAlign && { textAlign: props4.textAlign },
-    fontWeight: ({ props: props4 }) => props4.fontWeight && {
+    lineHeight: ({ props: props4 }) => !(0, import_utils7.isUndefined)(props4.lineHeight) && { lineHeight: props4.lineHeight },
+    // lineHeight: ({ props }) => !isUndefined(props.lineHeight) && getSpacingBasedOnRatio(props, 'lineHeight', null, ''),
+    textDecoration: ({ props: props4 }) => !(0, import_utils7.isUndefined)(props4.textDecoration) && { textDecoration: props4.textDecoration },
+    textTransform: ({ props: props4 }) => !(0, import_utils7.isUndefined)(props4.textTransform) && { textTransform: props4.textTransform },
+    whiteSpace: ({ props: props4 }) => !(0, import_utils7.isUndefined)(props4.whiteSpace) && { whiteSpace: props4.whiteSpace },
+    wordWrap: ({ props: props4 }) => !(0, import_utils7.isUndefined)(props4.wordWrap) && { wordWrap: props4.wordWrap },
+    letterSpacing: ({ props: props4 }) => !(0, import_utils7.isUndefined)(props4.letterSpacing) && { letterSpacing: props4.letterSpacing },
+    textAlign: ({ props: props4 }) => !(0, import_utils7.isUndefined)(props4.textAlign) && { textAlign: props4.textAlign },
+    fontWeight: ({ props: props4 }) => !(0, import_utils7.isUndefined)(props4.fontWeight) && {
       fontWeight: props4.fontWeight,
       fontVariationSettings: '"wght" ' + props4.fontWeight
     }
@@ -8387,10 +8422,13 @@ var Footnote = {
   tag: "span",
   props: { fontSize: "Z" }
 };
+var B = { tag: "b" };
+var I = { tag: "i" };
 
 // Atoms/Transform.js
 var Transform = {
   class: {
+    zoom: ({ props: props4 }) => props4.zoom && { zoom: props4.zoom },
     transform: ({ props: props4 }) => props4.transform && { transform: props4.transform },
     transformOrigin: ({ props: props4 }) => props4.transformOrigin && { transformOrigin: props4.transformOrigin }
   }
@@ -8405,18 +8443,18 @@ var XYZ = {
 
 // Atoms/Animation.js
 var import_scratch10 = __toESM(require_cjs());
-var import_utils7 = __toESM(require_cjs2());
+var import_utils8 = __toESM(require_cjs2());
 var applyAnimationProps = (animation, element) => {
   const { emotion: ctxEmotion } = element.context;
   const { keyframes } = ctxEmotion || emotion;
-  if ((0, import_utils7.isObject)(animation))
+  if ((0, import_utils8.isObject)(animation))
     return { animationName: keyframes(animation) };
   const { ANIMATION } = element.context && element.context.designSystem;
   const record = ANIMATION[animation];
   return keyframes(record);
 };
 var Animation = {
-  deps: { isObject: import_utils7.isObject, getTimingByKey: import_scratch10.getTimingByKey, getTimingFunction: import_scratch10.getTimingFunction, applyAnimationProps },
+  deps: { isObject: import_utils8.isObject, getTimingByKey: import_scratch10.getTimingByKey, getTimingFunction: import_scratch10.getTimingFunction, applyAnimationProps },
   class: {
     animation: (el) => el.props.animation && {
       animationName: el.deps.applyAnimationProps(el.props.animation, el),
@@ -8455,7 +8493,7 @@ var Animation = {
 };
 
 // Box/index.js
-var import_utils8 = __toESM(require_cjs2());
+var import_utils9 = __toESM(require_cjs2());
 var PropsCSS = {
   class: {
     style: ({ props: props4 }) => props4 && props4.style
@@ -8477,7 +8515,7 @@ var Box = {
     XYZ,
     Animation
   ],
-  deps: { isString: import_utils8.isString },
+  deps: { isString: import_utils9.isString },
   attr: {
     id: ({ props: props4, deps }) => deps.isString(props4.id) && props4.id,
     title: ({ props: props4, deps }) => deps.isString(props4.title) && props4.title,
@@ -8498,10 +8536,10 @@ var Circle = {
 };
 
 // Icon/index.js
-var import_utils9 = __toESM(require_cjs2());
+var import_utils10 = __toESM(require_cjs2());
 var Icon = {
   extend: Svg,
-  deps: { isString: import_utils9.isString },
+  deps: { isString: import_utils10.isString },
   props: ({ key, props: props4, parent, context, deps }) => {
     const { ICONS, useIconSprite, verbose } = context && context.designSystem;
     const { toCamelCase } = context && context.utils;
@@ -8743,145 +8781,825 @@ var TitleParagraphButton = {
   Paragraph: {}
 };
 
-// UnitValue/index.js
-var UnitValue = {
-  extend: Flex,
-  props: {
-    color: "title",
-    align: "center flex-start",
-    gap: "V",
-    fontWeight: "400",
-    "> *": { lineHeight: "1em" }
-  },
-  Value: { props: { text: "72" } },
-  Unit: { props: { text: "%" } }
-};
-var DoubleUnitValue = {
-  extend: Flex,
+// List/List.js
+var List = {
   props: {
-    align: "center flex-start",
-    gap: "Y"
-  },
-  UnitValue: {
-    Value: { text: "72" },
-    Unit: { text: "%" }
+    position: "relative",
+    overflow: "hidden",
+    round: "A",
+    minWidth: "F1",
+    theme: "dialog",
+    ":before, &:after": {
+      content: '""',
+      position: "absolute",
+      boxSize: "A2 100%",
+      zIndex: "2",
+      left: "0",
+      pointerEvents: "none"
+    },
+    ":before": {
+      top: "0",
+      background: "linear-gradient(to bottom, var(--theme-dialog-dark-background) 0%, transparent 100%)"
+    },
+    ":after": {
+      bottom: "0",
+      background: "linear-gradient(to top, var(--theme-dialog-dark-background) 0%, transparent 100%)"
+    }
   },
-  dot: {
+  Flex: {
     props: {
-      boxSize: "W W",
-      round: "100%",
-      background: "#A3A3A8"
+      flow: "column",
+      maxHeight: "F+C",
+      overflow: "auto",
+      "::-webkit-scrollbar": { display: "none" }
+    },
+    childExtend: {
+      props: {
+        padding: "Z1 A1",
+        position: "relative",
+        cursor: "pointer",
+        fontSize: "A1",
+        color: "gray4",
+        ":hover": {
+          background: "gray .92 +4"
+        },
+        childProps: { position: "relative" }
+      }
     }
-  },
-  UnitValue2: {
-    extend: UnitValue,
-    props: { gap: "X+W" },
-    Value: { text: "2" },
-    Unit: { text: "Second left" }
   }
 };
-var UnitValueWithLabel = {
-  extend: DoubleUnitValue,
-  props: { gap: "Y2" },
-  UnitValue: {
-    flow: "row-reverse",
-    fontSize: "D1",
-    fontWeight: "700",
-    color: "white",
-    Value: { text: "12,759" },
-    Unit: { text: "$" }
-  },
-  dot: null,
-  UnitValue2: {
-    props: {
-      background: "purple",
-      padding: "Z",
-      round: "Y1",
-      fontSize: "Y2",
-      gap: "0",
-      color: "white"
-    },
-    Value: { text: "+8.8" },
-    Unit: { text: "%" }
+var ListTemplate = {
+  extend: List,
+  props: { maxWidth: "F" },
+  Flex: {
+    ...[
+      { span: { text: "Item" } },
+      { span: { text: "Item" } },
+      { span: { text: "Item" } },
+      { span: { text: "Item" } },
+      { span: { text: "Item" } },
+      { span: { text: "Item" } },
+      { span: { text: "Item" } },
+      { span: { text: "Item" } },
+      { span: { text: "Item" } },
+      { span: { text: "Item" } },
+      { span: { text: "Item" } },
+      { span: { text: "Item" } },
+      { span: { text: "Item" } }
+    ]
   }
 };
-var UnitValueWithTitle = {
+var DotList = {
   extend: Flex,
   props: {
-    align: "center flex-start",
-    gap: "Y",
-    fontSize: "Z1"
+    flow: "column",
+    gap: "Y"
   },
-  Title: {
-    tag: "caption",
+  childExtend: {
+    extend: Flex,
     props: {
-      text: "balance :",
-      textTransform: "capitalize"
+      align: "center flex-start",
+      gap: "Z",
+      ":before": {
+        content: '""',
+        boxSize: "W",
+        background: "white",
+        display: "block",
+        zIndex: "20"
+      }
     }
   },
-  UnitValue: {
-    textTransform: "uppercase",
-    gap: "Y",
-    color: "currentColor",
-    Value: { text: "0" },
-    Unit: { text: "bnb" }
-  }
+  ...[{ props: { text: "Brat font" } }]
 };
 
-// Link/index.js
-var import_router = __toESM(require_cjs6());
-var Link = {
-  extend: Focusable,
-  tag: "a",
+// List/ListWithTitle.js
+var ListWithTitle = {
+  extend: Flex,
   props: {
-    aria: {},
-    fontWeight: "bold",
-    textDecoration: "none",
-    color: "currentColor",
-    draggable: false
+    flow: "column",
+    overflow: "hidden",
+    round: "A",
+    maxWidth: "F1"
   },
-  attr: {
-    href: (el) => {
-      const { context: ctx } = el;
-      const { exec: exec2 } = ctx.utils;
-      return exec2(el.props.href, el) || exec2(el.props, el).href;
-    },
-    target: ({ props: props4 }) => props4.target,
-    "aria-label": ({ props: props4 }) => props4.aria ? props4.aria.label : props4.text,
-    draggable: ({ props: props4 }) => props4.draggable
+  Title: {
+    tag: "h5",
+    props: {
+      position: "sticky",
+      top: "0",
+      zIndex: "3",
+      text: "Group name",
+      fontSize: "Z",
+      color: "gray .92 +68",
+      fontWeight: "400",
+      theme: "dialog",
+      padding: "A"
+    }
+  },
+  List: {
+    extend: List,
+    props: {
+      round: "0",
+      minWidth: "100%"
+      // theme: 'tertiary'
+    }
   }
 };
-var RouterLink = {
-  on: {
-    click: (event, el) => {
-      const { props: props4, context: ctx } = el;
-      const { href } = props4;
-      if (!href)
-        return;
-      const { utils, snippets, routerOptions } = ctx;
-      const root = el.__ref.__root;
-      const linkIsExternal = href.includes("http://") || href.includes("https://") || href.includes("mailto:") || href.includes("tel:");
-      const options = props4.routerOptions || routerOptions || {
-        scrollToOptions: { behaviour: "instant" }
-      };
-      if (href && !linkIsExternal) {
-        (snippets.router || utils.router || import_router.router)(href, root, {}, options);
-        event.preventDefault();
-      }
+var ListWithTitleTemplate = {
+  extend: ListWithTitle,
+  Title: {},
+  List: {
+    Flex: {
+      ...[
+        { span: { text: "Item" } },
+        { span: { text: "Item" } },
+        { span: { text: "Item" } },
+        { span: { text: "Item" } },
+        { span: { text: "Item" } }
+      ]
     }
   }
 };
-var RouteLink = {
-  extend: [Link, RouterLink]
-};
 
-// Video/index.js
-var Video = {
-  tag: "video",
-  childExtend: {
-    tag: "source",
-    attr: {
-      src: ({ props: props4 }) => props4.src,
+// List/GroupList.js
+var GroupList = {
+  extend: Flex,
+  props: {
+    flow: "column",
+    overflow: "hidden",
+    theme: "dialog",
+    maxHeight: "H",
+    round: "A",
+    maxWidth: "G"
+  },
+  Header: {
+    extend: Flex,
+    props: {
+      text: "Header",
+      padding: "Z2 A",
+      fontSize: "A2",
+      fontWeight: "500",
+      color: "white"
+    }
+  },
+  Groups: {
+    props: {
+      position: "relative",
+      ":before, &:after": {
+        content: '""',
+        position: "absolute",
+        boxSize: "A2 100%",
+        zIndex: "2",
+        left: "0",
+        pointerEvents: "none"
+      },
+      ":before": {
+        top: "0",
+        background: "linear-gradient(to bottom, var(--theme-dialog-dark-background) 0%, transparent 100%)"
+      },
+      ":after": {
+        bottom: "0",
+        background: "linear-gradient(to top, var(--theme-dialog-dark-background) 0%, transparent 100%)"
+      }
+    },
+    Flex: {
+      extend: Flex,
+      props: {
+        flow: "column",
+        maxHeight: "G2",
+        overflow: "auto",
+        "::-webkit-scrollbar": { display: "none" }
+      },
+      childExtend: {
+        extend: ListWithTitle,
+        props: {
+          round: "0",
+          minWidth: "100%",
+          overflow: "visible",
+          background: "transparent"
+        },
+        Title: { props: { theme: "transparent" } },
+        List: {
+          props: {
+            overflow: "visible",
+            theme: "transparent",
+            ":before": { display: "none" },
+            ":after": { display: "none" }
+          },
+          Flex: {
+            props: {
+              style: { overflowY: "visible" },
+              minHeight: "fit-content",
+              maxHeight: "fit-content",
+              childProps: {
+                ":after": { background: "gray" }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+};
+var GroupListTemplate = {
+  extend: GroupList,
+  Header: {},
+  Groups: {
+    props: {},
+    Flex: {
+      props: {},
+      ...[
+        {
+          Title: null,
+          List: {
+            props: {},
+            Flex: {
+              props: {},
+              ...[
+                { span: { text: "Item" } },
+                { span: { text: "Item" } }
+              ]
+            }
+          }
+        },
+        {
+          Title: {},
+          List: {
+            props: {},
+            Flex: {
+              props: {},
+              ...[
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
+                { span: { text: "Item" } }
+              ]
+            }
+          }
+        },
+        {
+          Title: {},
+          List: {
+            props: {},
+            Flex: {
+              props: {},
+              ...[
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
+                { span: { text: "Item" } }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  }
+};
+
+// Field/CommonField.js
+var CommonField = {
+  extend: Flex,
+  tag: "label",
+  props: {
+    flow: "column",
+    boxSize: "fit-content fit-content",
+    gap: "Z"
+  },
+  Title: {
+    props: {
+      text: "Label",
+      lineHeight: "1em",
+      padding: "- - - V2",
+      color: "gray4"
+    }
+  },
+  Field: {
+    tag: "div"
+  },
+  Hint: {
+    extend: IconText,
+    props: {
+      color: "gray4",
+      align: "center flex-start",
+      text: "",
+      fontSize: "Z1",
+      gap: "Y",
+      padding: "W - - W"
+    }
+  }
+};
+var CommonFieldTemplate = {
+  extend: CommonField,
+  Title: {},
+  Field: {
+    Icon: { props: { name: "info" } },
+    Input: {},
+    Button: { icon: "eye" }
+  },
+  Hint: {
+    Icon: { props: { name: "info" } },
+    text: "Description"
+  }
+};
+
+// Field/Field.js
+var Field = {
+  tag: "label",
+  extend: [Focusable, IconText],
+  props: {
+    minWidth: "F2+Z2",
+    maxWidth: "F2+Z2",
+    minHeight: "C+V",
+    align: "center flex-start",
+    gap: "Y",
+    boxSizing: "border-box",
+    padding: "- A - Z2",
+    round: "Z1",
+    border: "solid, gray .45 +80",
+    borderWidth: ".8px",
+    position: "relative",
+    ":focus-within": { outline: "1px solid #0474F2" },
+    Icon: {
+      fontSize: "Z2"
+    },
+    Button: {
+      padding: "0",
+      background: "transparent",
+      margin: "- - - auto",
+      fontSize: "Z2"
+    }
+  },
+  Input: {
+    props: {
+      fontSize: "Z",
+      fontWeight: "400",
+      padding: "0",
+      background: "rgba(0, 0, 0, 0)",
+      round: "0",
+      color: "title",
+      fontFamily: "avenir",
+      placeholder: "Placeholder",
+      flex: "1",
+      minHeight: "100%",
+      outline: "none !important",
+      "::placeholder": { color: "gray 1 +64" }
+    }
+  }
+};
+var FieldTemplate = {
+  extend: Field,
+  Icon: { props: { name: "info" } },
+  Input: {},
+  Button: { Icon: { name: "eye" } }
+};
+var FieldWithTitle = {
+  extend: Flex,
+  props: {
+    flow: "column",
+    boxSize: "fit-content fit-content",
+    gap: "Y1",
+    // border: '.05px solid red',
+    Hint: {
+      color: "gray 1 +64",
+      align: "center flex-start",
+      fontSize: "Y",
+      gap: "Y",
+      padding: "W Y2 - Y2"
+    }
+  },
+  Title: {
+    props: {
+      text: "Label",
+      fontSize: "Z",
+      lineHeight: "1em",
+      color: "title",
+      fontWeight: "400",
+      padding: "- Y1"
+    }
+  },
+  Field: {
+    extend: Field
+  }
+};
+var FieldWithTitleTemplate = {
+  extend: FieldWithTitle,
+  Title: {},
+  Field: {
+    Icon: { props: { name: "info" } },
+    Input: {},
+    Button: { icon: "eye" }
+  },
+  Hint: {
+    extend: IconText,
+    props: {
+      icon: "info",
+      text: "Description"
+    }
+  }
+};
+
+// Field/Search.js
+var Search = {
+  extend: Field,
+  props: {
+    maxWidth: "G3",
+    gap: "Z",
+    theme: "dialog",
+    padding: "Z+V Z+V2",
+    Icon: {
+      name: "search",
+      fontSize: "C",
+      color: "title",
+      margin: "V - - -"
+    }
+  },
+  Icon: {},
+  Input: {
+    props: {
+      placeholder: "type a command or search",
+      fontSize: "Z",
+      "::placeholder": { color: "gray 1 +68" }
+    }
+  }
+};
+var SearchWithButton = {
+  extend: Search,
+  props: {
+    Button: { fontSize: "B" }
+  },
+  Icon: {},
+  Input: { props: { ":focus ~ button": { opacity: "1" } } },
+  Button: {
+    props: {
+      opacity: "0",
+      icon: "x"
+    },
+    Icon: {
+      on: {
+        click: (e, el) => {
+          el.parent.parent.Input.node.value = "";
+        }
+      }
+    }
+  }
+};
+var SearchWithDropDownButton = {
+  extend: SearchWithButton,
+  props: {
+    theme: "tertiary",
+    maxWidth: "G3+C",
+    padding: "0 A 0 0",
+    gap: "Z"
+  },
+  DropDownButton: {},
+  Input: { props: { padding: "- - - X" } },
+  Button: {},
+  Icon: {}
+};
+
+// Field/TextAreaField.js
+var TextAreaField = {
+  tag: "label",
+  extend: Focusable,
+  props: {
+    boxSize: "fit-content",
+    border: "solid, gray .45 +80",
+    borderWidth: ".8px",
+    overflow: "hidden",
+    round: "Z1",
+    ":focus-within": { outline: "1px solid #0474F2" }
+  },
+  TextArea: {
+    tag: "textarea",
+    attr: { placeholder: "Leave us a message..." },
+    props: {
+      fontSize: "Z",
+      minWidth: "H",
+      minHeight: "D2+Y1",
+      padding: "A",
+      fontFamily: "avenir",
+      theme: "transparent",
+      border: "none",
+      outline: "none",
+      style: { resize: "none" },
+      "::placeholder": { color: "gray 1 +64" }
+    }
+  }
+};
+
+// List/GroupListWithSearch.js
+var GroupListWithSearch = {
+  extend: GroupList,
+  props: {
+    maxWidth: "G1"
+  },
+  Header: {},
+  SearchContainer: {
+    extend: Flex,
+    props: {
+      padding: "0 Z1 Y2 Z1",
+      background: "transparent"
+    },
+    Search: {
+      extend: Search,
+      props: {
+        maxWidth: "100%",
+        minWidth: "100%",
+        minHeight: "C",
+        theme: "transparent",
+        round: "Z1"
+      },
+      Icon: {
+        props: {
+          fontSize: "C",
+          color: "title"
+        }
+      },
+      Input: { fontSize: "Z" }
+    }
+  },
+  Groups: {
+    Flex: {
+      childExtend: {
+        Title: {},
+        List: {
+          Flex: {
+            childExtend: {
+              props: {}
+            }
+          }
+        }
+      }
+    }
+  }
+};
+var GroupListWithSearchTemplate = {
+  extend: GroupListWithSearch,
+  Header: {},
+  SearchContainer: {},
+  Groups: {
+    Flex: {
+      ...[
+        {
+          Title: null,
+          List: {
+            Flex: {
+              ...[
+                { span: { text: "Item" } },
+                { span: { text: "Item" } }
+              ]
+            }
+          }
+        },
+        {
+          Title: {},
+          List: {
+            Flex: {
+              ...[
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
+                { span: { text: "Item" } }
+              ]
+            }
+          }
+        },
+        {
+          Title: {},
+          List: {
+            Flex: {
+              ...[
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
+                { span: { text: "Item" } }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  }
+};
+
+// Banner/index.js
+var Banner = {
+  extend: TitleParagraph,
+  props: {
+    height: "fit-content",
+    padding: "D1 C2 C2 C1",
+    width: "100%",
+    theme: "dialog",
+    round: "0 0 Z 0"
+  },
+  Title: {
+    tag: "h1",
+    props: {
+      textTransform: "capitalize",
+      fontSize: `${120 / 16}em`,
+      fontWeight: "900",
+      padding: "- - X2 -"
+    }
+  },
+  Paragraph: {
+    props: {
+      justifyContent: "space-between",
+      // gap: 'I',
+      padding: "B1 - - -",
+      position: "relative",
+      ":before": {
+        content: '""',
+        position: "absolute",
+        boxSize: "V 100%",
+        background: "white .1",
+        top: "0",
+        round: "C"
+      }
+    },
+    list: {
+      extend: TitleParagraph,
+      props: {
+        gap: "Z2",
+        margin: "0 - - Y",
+        Paragraph: {
+          childProps: {
+            fontSize: "Z1"
+          }
+        }
+      },
+      Title: {
+        tag: "h6",
+        props: {
+          fontSize: "B",
+          color: "white .85"
+        }
+      },
+      Paragraph: {
+        ...DotList,
+        ...[{}]
+      }
+    },
+    P: {
+      text: "Our typography system ranges from impactful brand type used in marketing applications to functional type used in product. They come together to create a cohesive approach to how we communicate as a brand.",
+      maxWidth: "G3+C",
+      margin: "0",
+      letterSpacing: ".1px",
+      padding: "B - - Y",
+      fontSize: "Z2",
+      color: "white .5",
+      lineHeight: "1.6em"
+      // fontWeight: '100'
+    }
+  }
+};
+
+// UnitValue/index.js
+var UnitValue = {
+  extend: Flex,
+  props: {
+    color: "title",
+    align: "center flex-start",
+    gap: "V",
+    fontWeight: "400",
+    "> *": { lineHeight: "1em" }
+  },
+  Value: { props: { text: "72" } },
+  Unit: { props: { text: "%" } }
+};
+var DoubleUnitValue = {
+  extend: Flex,
+  props: {
+    align: "center flex-start",
+    gap: "Y"
+  },
+  UnitValue: {
+    Value: { text: "72" },
+    Unit: { text: "%" }
+  },
+  dot: {
+    props: {
+      boxSize: "W W",
+      round: "100%",
+      background: "#A3A3A8"
+    }
+  },
+  UnitValue2: {
+    extend: UnitValue,
+    props: { gap: "X+W" },
+    Value: { text: "2" },
+    Unit: { text: "Second left" }
+  }
+};
+var UnitValueWithLabel = {
+  extend: DoubleUnitValue,
+  props: { gap: "Y2" },
+  UnitValue: {
+    flow: "row-reverse",
+    fontSize: "D1",
+    fontWeight: "700",
+    color: "white",
+    Value: { text: "12,759" },
+    Unit: { text: "$" }
+  },
+  dot: null,
+  UnitValue2: {
+    props: {
+      background: "purple",
+      padding: "Z",
+      round: "Y1",
+      fontSize: "Y2",
+      gap: "0",
+      color: "white"
+    },
+    Value: { text: "+8.8" },
+    Unit: { text: "%" }
+  }
+};
+var UnitValueWithTitle = {
+  extend: Flex,
+  props: {
+    align: "center flex-start",
+    gap: "Y",
+    fontSize: "Z1"
+  },
+  Title: {
+    tag: "caption",
+    props: {
+      text: "balance :",
+      textTransform: "capitalize"
+    }
+  },
+  UnitValue: {
+    textTransform: "uppercase",
+    gap: "Y",
+    color: "currentColor",
+    Value: { text: "0" },
+    Unit: { text: "bnb" }
+  }
+};
+
+// 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) => {
+      const { context: ctx } = el;
+      const { exec: exec2 } = ctx.utils;
+      return exec2(el.props.href, el) || exec2(el.props, el).href;
+    },
+    target: ({ props: props4 }) => props4.target,
+    "aria-label": ({ props: props4 }) => props4.aria ? props4.aria.label : props4.text,
+    draggable: ({ props: props4 }) => props4.draggable
+  }
+};
+var RouterLink = {
+  on: {
+    click: (event, el) => {
+      const { props: props4, context: ctx } = el;
+      const { href } = props4;
+      if (!href)
+        return;
+      const { utils, snippets, routerOptions } = ctx;
+      const root = el.__ref.__root;
+      const linkIsExternal = href.includes("http://") || href.includes("https://") || href.includes("mailto:") || href.includes("tel:");
+      const options = props4.routerOptions || routerOptions || {
+        scrollToOptions: { behaviour: "instant" }
+      };
+      if (href && !linkIsExternal) {
+        (snippets.router || utils.router || import_router.router)(href, root, {}, options);
+        event.preventDefault();
+      }
+    }
+  }
+};
+var RouteLink = {
+  extend: [Link, RouterLink]
+};
+
+// Video/index.js
+var Video = {
+  tag: "video",
+  childExtend: {
+    tag: "source",
+    attr: {
+      src: ({ props: props4 }) => props4.src,
       controls: ({ props: props4 }) => props4.controls
     }
   },
@@ -8924,11 +9642,11 @@ var DoubleHr = {
 };
 
 // Input/Input.js
-var import_utils10 = __toESM(require_cjs2());
+var import_utils11 = __toESM(require_cjs2());
 var Input = {
   tag: "input",
   extend: [Focusable],
-  deps: { isString: import_utils10.isString, replaceLiteralsWithObjectFields: import_utils10.replaceLiteralsWithObjectFields },
+  deps: { isString: import_utils11.isString, replaceLiteralsWithObjectFields: import_utils11.replaceLiteralsWithObjectFields },
   props: {
     border: "none",
     type: "input",
@@ -9171,258 +9889,27 @@ var Select = {
   tag: "select",
   props: {
     fontSize: "A",
-    border: "none",
-    boxSizing: "border-box",
-    theme: "field",
-    cursor: "pointer"
-  },
-  childExtend: {
-    tag: "option",
-    props: {
-      value: "",
-      selected: "",
-      disabled: ""
-    },
-    attr: {
-      value: ({ props: props4 }) => props4.value,
-      selected: ({ props: props4 }) => props4.selected,
-      disabled: ({ props: props4 }) => props4.disabled
-    }
-  },
-  attr: {
-    name: ({ props: props4 }) => props4.name,
-    disabled: ({ props: props4 }) => props4.disabled
-  }
-};
-
-// Field/CommonField.js
-var CommonField = {
-  extend: Flex,
-  tag: "label",
-  props: {
-    flow: "column",
-    boxSize: "fit-content fit-content",
-    gap: "Z"
-  },
-  Title: {
-    props: {
-      text: "Label",
-      lineHeight: "1em",
-      padding: "- - - V2",
-      color: "gray4"
-    }
-  },
-  Field: {
-    tag: "div"
-  },
-  Hint: {
-    extend: IconText,
-    props: {
-      color: "gray4",
-      align: "center flex-start",
-      text: "",
-      fontSize: "Z1",
-      gap: "Y",
-      padding: "W - - W"
-    }
-  }
-};
-var CommonFieldTemplate = {
-  extend: CommonField,
-  Title: {},
-  Field: {
-    Icon: { props: { name: "info" } },
-    Input: {},
-    Button: { icon: "eye" }
-  },
-  Hint: {
-    Icon: { props: { name: "info" } },
-    text: "Description"
-  }
-};
-
-// Field/Field.js
-var Field = {
-  tag: "label",
-  extend: [Focusable, IconText],
-  props: {
-    minWidth: "F2+Z2",
-    maxWidth: "F2+Z2",
-    minHeight: "C+V",
-    align: "center flex-start",
-    gap: "Y",
-    boxSizing: "border-box",
-    padding: "- A - Z2",
-    round: "Z1",
-    border: "solid, gray .45 +80",
-    borderWidth: ".8px",
-    position: "relative",
-    ":focus-within": { outline: "1px solid #0474F2" },
-    Icon: {
-      fontSize: "Z2"
-    },
-    Button: {
-      padding: "0",
-      background: "transparent",
-      margin: "- - - auto",
-      fontSize: "Z2"
-    }
-  },
-  Input: {
-    props: {
-      fontSize: "Z",
-      fontWeight: "400",
-      padding: "0",
-      background: "rgba(0, 0, 0, 0)",
-      round: "0",
-      color: "title",
-      fontFamily: "avenir",
-      placeholder: "Placeholder",
-      flex: "1",
-      minHeight: "100%",
-      outline: "none !important",
-      "::placeholder": { color: "gray 1 +64" }
-    }
-  }
-};
-var FieldTemplate = {
-  extend: Field,
-  Icon: { props: { name: "info" } },
-  Input: {},
-  Button: { Icon: { name: "eye" } }
-};
-var FieldWithTitle = {
-  extend: Flex,
-  props: {
-    flow: "column",
-    boxSize: "fit-content fit-content",
-    gap: "Y1",
-    // border: '.05px solid red',
-    Hint: {
-      color: "gray 1 +64",
-      align: "center flex-start",
-      fontSize: "Y",
-      gap: "Y",
-      padding: "W Y2 - Y2"
-    }
-  },
-  Title: {
-    props: {
-      text: "Label",
-      fontSize: "Z",
-      lineHeight: "1em",
-      color: "title",
-      fontWeight: "400",
-      padding: "- Y1"
-    }
-  },
-  Field: {
-    extend: Field
-  }
-};
-var FieldWithTitleTemplate = {
-  extend: FieldWithTitle,
-  Title: {},
-  Field: {
-    Icon: { props: { name: "info" } },
-    Input: {},
-    Button: { icon: "eye" }
-  },
-  Hint: {
-    extend: IconText,
-    props: {
-      icon: "info",
-      text: "Description"
-    }
-  }
-};
-
-// Field/Search.js
-var Search = {
-  extend: Field,
-  props: {
-    maxWidth: "G3",
-    gap: "Z",
-    theme: "dialog",
-    padding: "Z+V Z+V2",
-    Icon: {
-      name: "search",
-      fontSize: "C",
-      color: "title",
-      margin: "V - - -"
-    }
-  },
-  Icon: {},
-  Input: {
-    props: {
-      placeholder: "type a command or search",
-      fontSize: "Z",
-      "::placeholder": { color: "gray 1 +68" }
-    }
-  }
-};
-var SearchWithButton = {
-  extend: Search,
-  props: {
-    Button: { fontSize: "B" }
-  },
-  Icon: {},
-  Input: { props: { ":focus ~ button": { opacity: "1" } } },
-  Button: {
-    props: {
-      opacity: "0",
-      icon: "x"
-    },
-    Icon: {
-      on: {
-        click: (e, el) => {
-          el.parent.parent.Input.node.value = "";
-        }
-      }
-    }
-  }
-};
-var SearchWithDropDownButton = {
-  extend: SearchWithButton,
-  props: {
-    theme: "tertiary",
-    maxWidth: "G3+C",
-    padding: "0 A 0 0",
-    gap: "Z"
-  },
-  DropDownButton: {},
-  Input: { props: { padding: "- - - X" } },
-  Button: {},
-  Icon: {}
-};
-
-// Field/TextAreaField.js
-var TextAreaField = {
-  tag: "label",
-  extend: Focusable,
-  props: {
-    boxSize: "fit-content",
-    border: "solid, gray .45 +80",
-    borderWidth: ".8px",
-    overflow: "hidden",
-    round: "Z1",
-    ":focus-within": { outline: "1px solid #0474F2" }
+    border: "none",
+    boxSizing: "border-box",
+    theme: "field",
+    cursor: "pointer"
   },
-  TextArea: {
-    tag: "textarea",
-    attr: { placeholder: "Leave us a message..." },
+  childExtend: {
+    tag: "option",
     props: {
-      fontSize: "Z",
-      minWidth: "H",
-      minHeight: "D2+Y1",
-      padding: "A",
-      fontFamily: "avenir",
-      theme: "transparent",
-      border: "none",
-      outline: "none",
-      style: { resize: "none" },
-      "::placeholder": { color: "gray 1 +64" }
+      value: "",
+      selected: "",
+      disabled: ""
+    },
+    attr: {
+      value: ({ props: props4 }) => props4.value,
+      selected: ({ props: props4 }) => props4.selected,
+      disabled: ({ props: props4 }) => props4.disabled
     }
+  },
+  attr: {
+    name: ({ props: props4 }) => props4.name,
+    disabled: ({ props: props4 }) => props4.disabled
   }
 };
 
@@ -9699,7 +10186,7 @@ var ProgressCircleWithSideUnitValue = {
 };
 
 // Range/index.js
-var import_utils11 = __toESM(require_cjs2());
+var import_utils12 = __toESM(require_cjs2());
 var import_scratch11 = __toESM(require_cjs());
 var props = {
   appearance: "none",
@@ -9767,7 +10254,7 @@ var Range = {
 };
 var returnPropertyValue = (el, property, def) => {
   const val = el.props && el.props[property];
-  const r = (0, import_utils11.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 = {
@@ -9777,7 +10264,7 @@ var RangeWithButtons = {
     on: {
       click: (ev, el, s) => {
         const parentProps = el.parent.props;
-        if ((0, import_utils11.isFunction)(parentProps.onDecrease)) {
+        if ((0, import_utils12.isFunction)(parentProps.onDecrease)) {
           parentProps.onDecrease(ev, el.parent, s);
         } else {
           const value = parseFloat(s.value);
@@ -9809,7 +10296,7 @@ var RangeWithButtons = {
     on: {
       input: (ev, el, s) => {
         const parentProps = el.parent.props;
-        if ((0, import_utils11.isFunction)(parentProps.onInput)) {
+        if ((0, import_utils12.isFunction)(parentProps.onInput)) {
           parentProps.onInput(ev, el, s);
         } else {
           s.update({ value: parseFloat(el.node.value) });
@@ -9817,7 +10304,7 @@ var RangeWithButtons = {
       },
       change: (ev, el, s) => {
         const parentProps = el.parent.props;
-        if ((0, import_utils11.isFunction)(parentProps.onChange)) {
+        if ((0, import_utils12.isFunction)(parentProps.onChange)) {
           parentProps.onChange(ev, el, s);
         } else {
           s.update({ value: parseFloat(el.node.value) });
@@ -9831,7 +10318,7 @@ var RangeWithButtons = {
     on: {
       click: (ev, el, s) => {
         const parentProps = el.parent.props;
-        if ((0, import_utils11.isFunction)(parentProps.onIncrease)) {
+        if ((0, import_utils12.isFunction)(parentProps.onIncrease)) {
           parentProps.onIncrease(ev, el.parent, s);
         } else {
           const value = parseFloat(s.value);
@@ -9867,7 +10354,7 @@ var style_default = {
 
 // Slider/index.js
 var import_scratch12 = __toESM(require_cjs());
-var import_utils12 = __toESM(require_cjs2());
+var import_utils13 = __toESM(require_cjs2());
 (0, import_scratch12.set)({
   theme: {
     sliderThumb: {
@@ -9899,7 +10386,7 @@ var RangeSlider = {
 };
 var listenProp = (el, prop, def) => {
   const val = el && el.props && el.props[prop];
-  const r = ((0, import_utils12.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 = {
@@ -9910,10 +10397,10 @@ var Slider = {
     },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils12.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 props4 = input.props;
-        const value = (0, import_utils12.isFunction)(props4.value) ? props4.value() : props4.value;
+        const value = (0, import_utils13.isFunction)(props4.value) ? props4.value() : props4.value;
         input.node.value = value;
       }
     }
@@ -9936,8 +10423,8 @@ var Slider = {
       step: (el, s) => listenProp(el, "step", 1)
     },
     on: {
-      input: (ev, el, s) => el.props && (0, import_utils12.isFunction)(el.props.input) && el.props.input(ev, el, s),
-      change: (ev, el, s) => el.props && (0, import_utils12.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: {
@@ -9947,10 +10434,10 @@ var Slider = {
     },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils12.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 props4 = input.props;
-        const value = (0, import_utils12.isFunction)(props4.value) ? props4.value() : props4.value;
+        const value = (0, import_utils13.isFunction)(props4.value) ? props4.value() : props4.value;
         input.node.value = value;
       }
     }
@@ -10167,7 +10654,7 @@ var NotificationIndicator = {
 };
 
 // Tooltip/index.js
-var import_utils13 = __toESM(require_cjs2());
+var import_utils14 = __toESM(require_cjs2());
 var Tooltip = {
   extend: Flex,
   props: {
@@ -10186,7 +10673,7 @@ var Tooltip = {
   },
   attr: { tooltip: true },
   Title: {
-    if: ({ parent, props: props4 }) => (0, import_utils13.isDefined)(parent.props.title) || props4.text,
+    if: ({ parent, props: props4 }) => (0, import_utils14.isDefined)(parent.props.title) || props4.text,
     props: ({ parent }) => ({
       width: "fit-content",
       fontWeight: 500,
@@ -10195,7 +10682,7 @@ var Tooltip = {
     })
   },
   P: {
-    if: ({ parent, props: props4 }) => (0, import_utils13.isDefined)(parent.props.description) || props4.text,
+    if: ({ parent, props: props4 }) => (0, import_utils14.isDefined)(parent.props.description) || props4.text,
     props: ({ parent }) => ({
       width: "fit-content",
       fontSize: "Z2",
@@ -10694,444 +11181,88 @@ var CompleteProcess = {
     }
   }
 };
-
-// Modal/Message.js
-var Message = {
-  extend: Modal,
-  props: {
-    maxWidth: "G3",
-    padding: "Z1 Z2 Z2 Z2"
-  },
-  Header: {
-    Title: {
-      caption: {
-        props: { text: "Message", fontSize: "C2" }
-      },
-      x: {
-        props: { padding: "V2" }
-      }
-    },
-    Paragraph: {
-      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 Apple\u2019s Sales and Refunds Policy."
-      }
-    }
-  }
-};
-
-// Modal/Pricing.js
-var Pricing = {
-  extend: Modal,
-  props: {
-    background: "gray3",
-    gap: "B",
-    minWidth: "G+B",
-    maxWidth: "G+B",
-    padding: "A1"
-  },
-  Header: null,
-  Content: {
-    props: {
-      flow: "column",
-      gap: "A1"
-    },
-    childExtend: {
-      extend: UnitValue,
-      props: {
-        justifyContent: "space-between",
-        textTransform: "capitalize",
-        color: "white"
-      }
-    },
-    ...[
-      {
-        Unit: { props: { text: "subtotal" } },
-        Value: { props: { text: "$5,499.00" } }
-      },
-      {
-        Unit: { props: { text: "Shipping" } },
-        Value: { props: { text: "Free" } }
-      },
-      {
-        Unit: { props: { text: "Savings" } },
-        Value: { props: { text: "$1,600.00" } }
-      }
-    ]
-  },
-  Footer: {
-    props: {
-      margin: "- -X -X"
-    },
-    CommonButton: {
-      flex: "1",
-      padding: "Z2 -",
-      round: "Y2",
-      theme: "secondary",
-      margin: "- -X -X",
-      Caption: {
-        text: "Add promo code",
-        fontSize: "Z",
-        fontWeight: "500"
-      }
-    }
-  }
-};
-
-// List/List.js
-var List = {
-  props: {
-    position: "relative",
-    overflow: "hidden",
-    round: "A",
-    minWidth: "F1",
-    theme: "dialog",
-    ":before, &:after": {
-      content: '""',
-      position: "absolute",
-      boxSize: "A2 100%",
-      zIndex: "2",
-      left: "0",
-      pointerEvents: "none"
-    },
-    ":before": {
-      top: "0",
-      background: "linear-gradient(to bottom, var(--theme-dialog-dark-background) 0%, transparent 100%)"
-    },
-    ":after": {
-      bottom: "0",
-      background: "linear-gradient(to top, var(--theme-dialog-dark-background) 0%, transparent 100%)"
-    }
-  },
-  Flex: {
-    props: {
-      flow: "column",
-      maxHeight: "F+C",
-      overflow: "auto",
-      "::-webkit-scrollbar": { display: "none" }
-    },
-    childExtend: {
-      props: {
-        padding: "Z1 A1",
-        position: "relative",
-        cursor: "pointer",
-        fontSize: "A1",
-        color: "gray4",
-        ":hover": {
-          background: "gray .92 +4"
-        },
-        childProps: { position: "relative" }
-      }
-    }
-  }
-};
-var ListTemplate = {
-  extend: List,
-  props: { maxWidth: "F" },
-  Flex: {
-    ...[
-      { span: { text: "Item" } },
-      { span: { text: "Item" } },
-      { span: { text: "Item" } },
-      { span: { text: "Item" } },
-      { span: { text: "Item" } },
-      { span: { text: "Item" } },
-      { span: { text: "Item" } },
-      { span: { text: "Item" } },
-      { span: { text: "Item" } },
-      { span: { text: "Item" } },
-      { span: { text: "Item" } },
-      { span: { text: "Item" } },
-      { span: { text: "Item" } }
-    ]
-  }
-};
-
-// List/ListWithTitle.js
-var ListWithTitle = {
-  extend: Flex,
-  props: {
-    flow: "column",
-    overflow: "hidden",
-    round: "A",
-    maxWidth: "F1"
-  },
-  Title: {
-    tag: "h5",
-    props: {
-      position: "sticky",
-      top: "0",
-      zIndex: "3",
-      text: "Group name",
-      fontSize: "Z",
-      color: "gray .92 +68",
-      fontWeight: "400",
-      theme: "dialog",
-      padding: "A"
-    }
-  },
-  List: {
-    extend: List,
-    props: {
-      round: "0",
-      minWidth: "100%"
-      // theme: 'tertiary'
-    }
-  }
-};
-var ListWithTitleTemplate = {
-  extend: ListWithTitle,
-  Title: {},
-  List: {
-    Flex: {
-      ...[
-        { span: { text: "Item" } },
-        { span: { text: "Item" } },
-        { span: { text: "Item" } },
-        { span: { text: "Item" } },
-        { span: { text: "Item" } }
-      ]
-    }
-  }
-};
-
-// List/GroupList.js
-var GroupList = {
-  extend: Flex,
-  props: {
-    flow: "column",
-    overflow: "hidden",
-    theme: "dialog",
-    maxHeight: "H",
-    round: "A",
-    maxWidth: "G"
-  },
-  Header: {
-    extend: Flex,
-    props: {
-      text: "Header",
-      padding: "Z2 A",
-      fontSize: "A2",
-      fontWeight: "500",
-      color: "white"
-    }
+
+// Modal/Message.js
+var Message = {
+  extend: Modal,
+  props: {
+    maxWidth: "G3",
+    padding: "Z1 Z2 Z2 Z2"
   },
-  Groups: {
-    props: {
-      position: "relative",
-      ":before, &:after": {
-        content: '""',
-        position: "absolute",
-        boxSize: "A2 100%",
-        zIndex: "2",
-        left: "0",
-        pointerEvents: "none"
-      },
-      ":before": {
-        top: "0",
-        background: "linear-gradient(to bottom, var(--theme-dialog-dark-background) 0%, transparent 100%)"
+  Header: {
+    Title: {
+      caption: {
+        props: { text: "Message", fontSize: "C2" }
       },
-      ":after": {
-        bottom: "0",
-        background: "linear-gradient(to top, var(--theme-dialog-dark-background) 0%, transparent 100%)"
+      x: {
+        props: { padding: "V2" }
       }
     },
-    Flex: {
-      extend: Flex,
+    Paragraph: {
       props: {
-        flow: "column",
-        maxHeight: "G2",
-        overflow: "auto",
-        "::-webkit-scrollbar": { display: "none" }
-      },
-      childExtend: {
-        extend: ListWithTitle,
-        props: {
-          round: "0",
-          minWidth: "100%",
-          overflow: "visible",
-          background: "transparent"
-        },
-        Title: { props: { theme: "transparent" } },
-        List: {
-          props: {
-            overflow: "visible",
-            theme: "transparent",
-            ":before": { display: "none" },
-            ":after": { display: "none" }
-          },
-          Flex: {
-            props: {
-              style: { overflowY: "visible" },
-              minHeight: "fit-content",
-              maxHeight: "fit-content",
-              childProps: {
-                ":after": { background: "gray" }
-              }
-            }
-          }
-        }
+        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 Apple\u2019s Sales and Refunds Policy."
       }
     }
   }
 };
-var GroupListTemplate = {
-  extend: GroupList,
-  Header: {},
-  Groups: {
-    props: {},
-    Flex: {
-      props: {},
-      ...[
-        {
-          Title: null,
-          List: {
-            props: {},
-            Flex: {
-              props: {},
-              ...[
-                { span: { text: "Item" } },
-                { span: { text: "Item" } }
-              ]
-            }
-          }
-        },
-        {
-          Title: {},
-          List: {
-            props: {},
-            Flex: {
-              props: {},
-              ...[
-                { span: { text: "Item" } },
-                { span: { text: "Item" } },
-                { span: { text: "Item" } }
-              ]
-            }
-          }
-        },
-        {
-          Title: {},
-          List: {
-            props: {},
-            Flex: {
-              props: {},
-              ...[
-                { span: { text: "Item" } },
-                { span: { text: "Item" } },
-                { span: { text: "Item" } },
-                { span: { text: "Item" } },
-                { span: { text: "Item" } },
-                { span: { text: "Item" } },
-                { span: { text: "Item" } },
-                { span: { text: "Item" } },
-                { span: { text: "Item" } },
-                { span: { text: "Item" } },
-                { span: { text: "Item" } },
-                { span: { text: "Item" } },
-                { span: { text: "Item" } }
-              ]
-            }
-          }
-        }
-      ]
-    }
-  }
-};
 
-// List/GroupListWithSearch.js
-var GroupListWithSearch = {
-  extend: GroupList,
+// Modal/Pricing.js
+var Pricing = {
+  extend: Modal,
   props: {
-    maxWidth: "G1"
+    background: "gray3",
+    gap: "B",
+    minWidth: "G+B",
+    maxWidth: "G+B",
+    padding: "A1"
   },
-  Header: {},
-  SearchContainer: {
-    extend: Flex,
+  Header: null,
+  Content: {
     props: {
-      padding: "0 Z1 Y2 Z1",
-      background: "transparent"
+      flow: "column",
+      gap: "A1"
     },
-    Search: {
-      extend: Search,
+    childExtend: {
+      extend: UnitValue,
       props: {
-        maxWidth: "100%",
-        minWidth: "100%",
-        minHeight: "C",
-        theme: "transparent",
-        round: "Z1"
+        justifyContent: "space-between",
+        textTransform: "capitalize",
+        color: "white"
+      }
+    },
+    ...[
+      {
+        Unit: { props: { text: "subtotal" } },
+        Value: { props: { text: "$5,499.00" } }
       },
-      Icon: {
-        props: {
-          fontSize: "C",
-          color: "title"
-        }
+      {
+        Unit: { props: { text: "Shipping" } },
+        Value: { props: { text: "Free" } }
       },
-      Input: { fontSize: "Z" }
-    }
+      {
+        Unit: { props: { text: "Savings" } },
+        Value: { props: { text: "$1,600.00" } }
+      }
+    ]
   },
-  Groups: {
-    Flex: {
-      childExtend: {
-        Title: {},
-        List: {
-          Flex: {
-            childExtend: {
-              props: {}
-            }
-          }
-        }
+  Footer: {
+    props: {
+      margin: "- -X -X"
+    },
+    CommonButton: {
+      flex: "1",
+      padding: "Z2 -",
+      round: "Y2",
+      theme: "secondary",
+      margin: "- -X -X",
+      Caption: {
+        text: "Add promo code",
+        fontSize: "Z",
+        fontWeight: "500"
       }
     }
   }
 };
-var GroupListWithSearchTemplate = {
-  extend: GroupListWithSearch,
-  Header: {},
-  SearchContainer: {},
-  Groups: {
-    Flex: {
-      ...[
-        {
-          Title: null,
-          List: {
-            Flex: {
-              ...[
-                { span: { text: "Item" } },
-                { span: { text: "Item" } }
-              ]
-            }
-          }
-        },
-        {
-          Title: {},
-          List: {
-            Flex: {
-              ...[
-                { span: { text: "Item" } },
-                { span: { text: "Item" } },
-                { span: { text: "Item" } }
-              ]
-            }
-          }
-        },
-        {
-          Title: {},
-          List: {
-            Flex: {
-              ...[
-                { span: { text: "Item" } },
-                { span: { text: "Item" } },
-                { span: { text: "Item" } },
-                { span: { text: "Item" } },
-                { span: { text: "Item" } }
-              ]
-            }
-          }
-        }
-      ]
-    }
-  }
-};
 
 // TimePicker/TimePickerItem.js
 var props2 = {