@symbo.ls/create 2.11.141 → 2.11.145

package/dist/cjs/bundle/index.js

@@ -2607,6 +2607,7 @@ var require_create2 = __commonJS({
     var import_inherit = require_inherit();
     var createState = function(element, parent, options) {
       element.state = applyInitialState(element, parent, options);
+      return element.state;
     };
     var applyInitialState = function(element, parent, options) {
       const objectizeState = checkForTypes(element);
@@ -2642,20 +2643,18 @@ var require_create2 = __commonJS({
       if ((0, import_utils25.isFunction)(state)) {
         ref.__state = state;
         return (0, import_utils25.exec)(state, element);
-      }
-      if ((0, import_utils25.is)(state)("string", "number")) {
+      } else if ((0, import_utils25.is)(state)("string", "number")) {
         ref.__state = state;
         return {};
-      }
-      if (state === true) {
+      } else if (state === true) {
         ref.__state = element.key;
         return {};
-      }
-      if (state) {
+      } else if (state) {
         ref.__hasRootState = true;
         return state;
+      } else {
+        return false;
       }
-      return false;
     };
     var addProtoToArray = (state, proto) => {
       for (const key in proto) {
@@ -2696,8 +2695,9 @@ var require_create2 = __commonJS({
       } else {
         Object.setPrototypeOf(state, proto);
       }
-      if (state.parent && state.parent.__children)
+      if (state.parent && state.parent.__children) {
         state.parent.__children[element.key] = state;
+      }
     };
   }
 });
@@ -2821,6 +2821,7 @@ var require_registry = __commonJS({
       if: {},
       define: {},
       transform: {},
+      __name: {},
       __ref: {},
       __hash: {},
       __text: {},
@@ -3697,9 +3698,9 @@ var require_extend = __commonJS({
       let { extend, props: props6, context, __ref } = element;
       const COMPONENTS = context && context.components || options.components;
       if ((0, import_utils25.isString)(extend)) {
-        if (COMPONENTS && COMPONENTS[extend])
+        if (COMPONENTS && COMPONENTS[extend]) {
           extend = COMPONENTS[extend];
-        else {
+        } else {
           if (ENV2 !== "test" || ENV2 !== "development") {
             console.warn("Extend is string but component was not found:", extend);
           }
@@ -3809,8 +3810,8 @@ var require_component = __commonJS({
       };
     };
     var extendizeByKey = (element, parent, key) => {
-      const { tag, extend, props: props6, state, childExtend, childProps, on: on2 } = element;
-      const hasComponentAttrs = tag || extend || childExtend || props6 || state || on2;
+      const { tag, extend, props: props6, state, childExtend, childProps, on: on2, if: condition } = element;
+      const hasComponentAttrs = tag || extend || childExtend || props6 || state || on2 || condition;
       const componentKey = key.includes("_") ? key.split("_")[0] : key.includes(".") ? key.split(".")[0] : key;
       const extendKey = componentKey || key;
       if (!hasComponentAttrs || childProps) {
@@ -4772,18 +4773,19 @@ var require_create4 = __commonJS({
     var create2 = (element, parent, key, options = import_options3.default.create || {}) => {
       cacheOptions(element, options);
       if (checkIfPrimitive(element)) {
-        return applyValueAsText(element, parent, key);
+        element = applyValueAsText(element, parent, key);
       }
       element = redefineElement(element, parent, key, options);
       parent = redefineParent(element, parent, key);
       key = createKey(element, parent, key);
       const ref = addRef(element, parent, key);
+      ref.__initialProps = (0, import_utils25.deepClone)(element.props, []);
       applyContext(element, parent, options);
       (0, import_component.applyComponentFromContext)(element, parent, options);
       (0, import_extend.applyExtend)(element, parent, options);
       element.key = key;
       if (options.onlyResolveExtends) {
-        return onlyResolveExtends(element, parent, options);
+        return onlyResolveExtends(element, parent, key, options);
       }
       replaceOptions(element, parent, options);
       addCaching(element, parent);
@@ -4945,7 +4947,7 @@ var require_create4 = __commonJS({
         ref.__path = parentRef.__path.concat(element.key);
       }
     };
-    var onlyResolveExtends = (element, parent, options) => {
+    var onlyResolveExtends = (element, parent, key, options) => {
       const { __ref } = element;
       element.tag = (0, import_render.detectTag)(element);
       if (!__ref.__exec)
@@ -4954,23 +4956,35 @@ var require_create4 = __commonJS({
         __ref.__attr = {};
       if (!element.props)
         element.props = {};
-      (0, import_state3.createState)(element, parent, { skipApplyMethods: true, ...options });
+      (0, import_state3.createState)(element, parent);
+      const ref = __ref;
+      if ((0, import_utils25.isFunction)(element.if)) {
+        const ifPassed = element.if(element, element.state);
+        if (!ifPassed) {
+          delete ref.__if;
+        } else
+          ref.__if = true;
+      } else
+        ref.__if = true;
       (0, import_props.createProps)(element, parent);
       (0, import_component.applyVariant)(element, parent);
-      (0, import_iterate.throughInitialExec)(element, options.propsExcludedFromExec);
-      for (const param in element) {
-        const prop = element[param];
-        if ((0, import_utils25.isUndefined)(prop) || (0, import_methods.isMethod)(param) || (0, import_utils25.isObject)(import_mixins.registry[param]) || (0, import_component.isVariant)(param))
-          continue;
-        const hasDefine = element.define && element.define[param];
-        const contextHasDefine = element.context && element.context.define && element.context.define[param];
-        const optionsHasDefine = options.define && options.define[param];
-        if (import_mixins.registry[param] && !optionsHasDefine) {
-          continue;
-        } else if (element[param] && !hasDefine && !optionsHasDefine && !contextHasDefine) {
-          create2((0, import_utils25.exec)(prop, element), element, param, options);
+      if (element.tag !== "string" || element.tag !== "fragment") {
+        (0, import_iterate.throughInitialExec)(element, options.propsExcludedFromExec);
+        for (const param in element) {
+          const prop = element[param];
+          if ((0, import_utils25.isUndefined)(prop) || (0, import_methods.isMethod)(param) || (0, import_utils25.isObject)(import_mixins.registry[param]) || (0, import_component.isVariant)(param))
+            continue;
+          const hasDefine = element.define && element.define[param];
+          const contextHasDefine = element.context && element.context.define && element.context.define[param];
+          const optionsHasDefine = options.define && options.define[param];
+          if (import_mixins.registry[param] && !optionsHasDefine) {
+            continue;
+          } else if (element[param] && !hasDefine && !optionsHasDefine && !contextHasDefine) {
+            create2((0, import_utils25.exec)(prop, element), element, param, options);
+          }
         }
       }
+      parent[key || element.key] = element;
       delete element.update;
       delete element.__element;
       delete element.props.update;
@@ -14019,16 +14033,23 @@ __reExport(utilImports_exports, __toESM(require_cjs10(), 1));
 // ../../uikit/domql/index.js
 var domql_exports = {};
 __export(domql_exports, {
+  AmountWithLabel: () => AmountWithLabel,
   Animation: () => Animation,
   Avatar: () => Avatar,
   AvatarBundle: () => AvatarBundle,
+  AvatarBundleInfoSet: () => AvatarBundleInfoSet,
   AvatarChooser: () => AvatarChooser,
+  AvatarInfoSetWithButton: () => AvatarInfoSetWithButton,
+  AvatarInfoSetWithLabel: () => AvatarInfoSetWithLabel,
   AvatarWithIndicator: () => AvatarWithIndicator,
+  AvatarWithInfoSet: () => AvatarWithInfoSet,
+  BalancesIndicator: () => BalancesIndicator,
   Block: () => Block,
   Box: () => Box,
   Br: () => Br,
   Button: () => Button,
   ButtonSet: () => ButtonSet,
+  CancenConfirmButtons: () => CancenConfirmButtons,
   Caption: () => Caption,
   Card: () => Card,
   CardLabel: () => CardLabel,
@@ -14037,11 +14058,15 @@ __export(domql_exports, {
   ChatUserWithNotification: () => ChatUserWithNotification,
   ChatUserWithUploadedFile: () => ChatUserWithUploadedFile,
   CheckBoxWithLabel: () => CheckBoxWithLabel,
+  CheckMark: () => CheckMark,
   Checkbox: () => Checkbox,
   Circle: () => Circle,
   CircleButton: () => CircleButton,
   Clickable: () => Clickable,
+  CodeField: () => CodeField,
   Collection: () => Collection,
+  ConvertCard: () => ConvertCard,
+  CustomizedField: () => CustomizedField,
   DateIndicator: () => DateIndicator,
   DatePicker: () => DatePicker,
   DatePickerDay: () => DatePickerDay,
@@ -14054,10 +14079,12 @@ __export(domql_exports, {
   Dialog: () => Dialog,
   DialogFooter: () => DialogFooter,
   Direction: () => Direction,
+  DropDownWithAvatar: () => DropDownWithAvatar,
   DropdownList: () => DropdownList,
   DropdownParent: () => DropdownParent,
   Field: () => Field,
   FieldLabel: () => FieldLabel,
+  FieldWithTitle: () => FieldWithTitle,
   FileIcon: () => FileIcon,
   Flex: () => Flex,
   Focusable: () => Focusable,
@@ -14075,8 +14102,9 @@ __export(domql_exports, {
   Headline: () => Headline,
   Hoverable: () => Hoverable,
   Hr: () => Hr,
-  Icon: () => Icon2,
+  Icon: () => Icon3,
   IconText: () => IconText2,
+  IconTextWithNotification: () => IconTextWithNotification,
   Iframe: () => Iframe,
   Img: () => Img,
   IndicatorDot: () => IndicatorDot,
@@ -14089,11 +14117,15 @@ __export(domql_exports, {
   Link: () => Link,
   List: () => List,
   Media: () => Media,
+  MessageModal: () => MessageModal,
+  Modal: () => Modal,
   Notification: () => Notification,
   NotificationAlert: () => NotificationAlert,
   NumberInput: () => NumberInput,
   Overflow: () => Overflow,
   P: () => P,
+  ParagrapUnderlineLinkWithCheckbox: () => ParagrapUnderlineLinkWithCheckbox,
+  ParagraphWithUnderlineButton: () => ParagraphWithUnderlineButton,
   Picture: () => Picture,
   Pills: () => Pills,
   Position: () => Position,
@@ -14103,11 +14135,14 @@ __export(domql_exports, {
   Range: () => Range,
   RangeSlider: () => RangeSlider,
   RangeWithButtons: () => RangeWithButtons,
+  ResetCompleteModal: () => ResetCompleteModal,
   RouteLink: () => RouteLink,
   RouterLink: () => RouterLink,
   Search: () => Search,
   Select: () => Select,
   Shape: () => Shape,
+  SlideTabs: () => SlideTabs,
+  SlideTabsWithTitleParagraph: () => SlideTabsWithTitleParagraph,
   Slider: () => Slider,
   Span: () => Span,
   SquareButton: () => SquareButton,
@@ -14124,6 +14159,7 @@ __export(domql_exports, {
   TimePickerItem: () => TimePickerItem,
   TimeSwitcher: () => TimeSwitcher,
   Timing: () => Timing,
+  TitleParagraph: () => TitleParagraph,
   ToggleSwitch: () => ToggleSwitch,
   ToggleSwithWithLabel: () => ToggleSwithWithLabel,
   Tooltip: () => Tooltip,
@@ -14136,7 +14172,6 @@ __export(domql_exports, {
   UploadModalLabel: () => UploadModalLabel,
   UploadProgress: () => UploadProgress,
   UploadResult: () => UploadResult,
-  User: () => User,
   Video: () => Video,
   XYZ: () => XYZ,
   calendar: () => calendar,
@@ -15476,6 +15511,72 @@ var KangorooButton = {
   extend: Button,
   childExtend: IconText
 };
+var CancenConfirmButtons = {
+  extend: Flex,
+  childExtend: Button,
+  ...[
+    { props: { text: "Cancel" } },
+    { props: { text: "Confirm" } }
+  ],
+  props: {
+    gap: "Y",
+    childProps: {
+      fontWeight: "500",
+      color: "white",
+      padding: "A B+X",
+      ":first-child": {
+        background: "transparent"
+      },
+      ":last-child": {
+        background: "#0474F2",
+        round: "A"
+      }
+    }
+  }
+};
+
+// ../../uikit/domql/Accessories/node_modules/@symbo.ls/icon/index.js
+var Icon2 = {
+  extend: Svg,
+  props: ({ key, props: props6, parent, context }) => {
+    const { ICONS, useIconSprite, verbose } = context && context.designSystem;
+    const { toCamelCase: toCamelCase2 } = context && context.utils;
+    const iconName = props6.inheritedString || props6.name || props6.icon || key;
+    const camelCase = toCamelCase2(iconName);
+    const isArray8 = 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[isArray8[0] + isArray8[1]])
+      validIconName = isArray8[0] + isArray8[1];
+    else if (ICONS[isArray8[0]])
+      validIconName = isArray8[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" }
+};
 
 // ../../uikit/domql/Accessories/index.js
 var IndicatorDot = {
@@ -15487,16 +15588,28 @@ var IndicatorDot = {
     borderWidth: "1px"
   }
 };
+var BalancesIndicator = {
+  extend: Flex,
+  caption: { props: { text: "Balance:" } },
+  value: { props: { text: "0" } },
+  title: { props: { text: "bnb" } },
+  props: {
+    fontSize: "Z",
+    color: "rgba(163, 163, 168, 1)",
+    gap: "X",
+    title: { textTransform: "uppercase" }
+  }
+};
 var NotificationAlert = {
   span: { props: { text: "2" } },
   props: {
     background: "#0474F2",
     boxSize: "fit-content",
     padding: "- X",
-    round: "Y+V",
+    round: "Z",
+    color: "white",
     span: {
-      fontSize: "Y",
-      color: "white"
+      fontSize: "Y"
     }
   }
 };
@@ -15527,6 +15640,167 @@ var DateIndicator = {
     }
   }
 };
+var CheckMark = {
+  check: {
+    extend: Icon2,
+    props: { name: "check" }
+  },
+  props: {
+    border: "2px solid #04F214",
+    boxSize: "fit-content",
+    color: "#04F214",
+    padding: "Y+V",
+    round: "100%",
+    check: { fontSize: "G" }
+  }
+};
+
+// ../../uikit/domql/InfoSet/index.js
+var InfoSet = {
+  extend: Flex,
+  childExtend: Flex,
+  props: {
+    flow: "column",
+    childProps: {
+      title: {
+        fontSize: "Z",
+        fontWeight: "500"
+      },
+      subTitle: {
+        fontSize: "Y",
+        color: "#A3A3A8"
+      }
+    }
+  }
+};
+
+// ../../uikit/domql/Card/index.js
+var CardLabel = {
+  props: {
+    text: "-2.902x",
+    fontSize: "Y",
+    background: "#F4454E",
+    boxSize: "fit-content fit-content",
+    padding: "W Y",
+    round: "Y"
+  }
+};
+var DropDownWithAvatar = {
+  extend: Flex,
+  avatar: { extend: Avatar },
+  list: {
+    childExtend: { tag: "H6" },
+    ...[{ props: { text: "eth" } }]
+  },
+  downArrow: {
+    extend: Button,
+    props: { icon: "arrowDown" }
+  },
+  props: {
+    boxSize: "fit-content fit-content",
+    align: "center flex-start",
+    padding: "Y Z",
+    gap: "Z",
+    round: "Z",
+    background: "rgba(28, 28, 31, 1)",
+    avatar: { boxSize: "A+Y" },
+    list: {
+      childProps: {
+        fontSize: "Z",
+        textTransform: "uppercase"
+      }
+    },
+    downArrow: {
+      padding: "0",
+      background: "transparent",
+      color: "white",
+      fontSize: "Y"
+    }
+  }
+};
+var AmountWithLabel = {
+  extend: Flex,
+  amount: { props: { text: "240.59" } },
+  label: {
+    extend: CardLabel,
+    props: { text: "-0.25%" }
+  },
+  props: {
+    align: "center flex-start",
+    gap: "Y+V",
+    amount: {
+      fontSize: `${20 / 16}em`,
+      fontWeight: "700"
+    }
+  }
+};
+var Card = {
+  extend: InfoSet,
+  heading: {
+    title: { props: { text: "Total crypto assets" } },
+    icon: { extend: Icon, props: { name: "arrowUpRight" } }
+  },
+  content: {
+    extend: AmountWithLabel,
+    amount: { props: { text: "$ 12,759" } },
+    label: { props: { text: "+ 8.8%" } }
+  },
+  footer: {
+    subTitle: {
+      extend: Flex,
+      caption: { props: { text: "Last update:" } },
+      span: { props: { text: "an hour ago" } }
+    }
+  },
+  props: {
+    minWidth: "G",
+    maxWidth: "G",
+    padding: "A",
+    round: "Z+V",
+    gap: "Y",
+    style: { background: "linear-gradient(to right, rgba(4, 116, 242, 1), rgba(0, 48, 103, 1))" },
+    childProps: {
+      alignItems: "center",
+      title: { fontWeight: "700" },
+      icon: { fontSize: "C", color: "#A3A3A8" },
+      amount: { fontSize: `${24 / 16}em` },
+      label: { padding: "Y Z", background: "#04040466" },
+      subTitle: {
+        gap: "Y",
+        caption: { color: "rgba(224, 224, 226, 1)" },
+        span: { color: "rgba(233, 233, 234, 1)" }
+      }
+    },
+    heading: { justifyContent: "space-between" },
+    content: { gap: "Y" }
+  }
+};
+var ConvertCard = {
+  extend: Card,
+  heading: {
+    title: { props: { text: "From" } },
+    balance: { extend: BalancesIndicator },
+    icon: null
+  },
+  content: {
+    amount: { props: { text: "0.00" } },
+    label: null,
+    currency: { extend: DropDownWithAvatar },
+    props: { align: "center space-between" }
+  },
+  footer: null,
+  props: {
+    background: "rgba(28, 28, 31, .5)",
+    gap: "A",
+    childProps: {
+      title: {
+        color: "rgba(163, 163, 168, 1)",
+        fontWeight: "400"
+      },
+      amount: { color: "rgba(163, 163, 168, 1)" }
+    }
+  }
+};
 
 // ../../uikit/domql/Avatar/index.js
 var Avatar = {
@@ -15567,7 +15841,8 @@ var AvatarBundle = {
         margin: "0 -Y2 0 0"
       }
     }
-  }
+  },
+  ...[{}, {}]
 };
 var AvatarChooser = {
   extend: Button,
@@ -15609,29 +15884,165 @@ var AvatarChooser = {
     }
   }
 };
-
-// ../../uikit/domql/Dialog/index.js
-var Dialog = {
+var AvatarWithInfoSet = {
+  extend: Flex,
+  avatar: { extend: AvatarWithIndicator },
+  infos: {
+    extend: InfoSet,
+    ...[
+      {
+        title: { props: { text: "Erin Schleifer" } },
+        subTitle: { caption: { props: { text: "email@symbols.com" } } }
+      }
+    ]
+  },
   props: {
-    theme: "tertiary",
-    round: "Z2",
-    margin: "E",
-    overflow: "hidden",
-    padding: "- Z - -"
+    boxSize: "fit-content",
+    align: "center flex-start",
+    gap: "A",
+    infos: {
+      childProps: {
+        flow: "column",
+        subTitle: { caption: { whiteSpace: "nowrap" } }
+      }
+    }
   }
 };
-var DialogFooter = {
-  extend: Flex,
-  props: {
-    align: "center flex-end",
-    gap: "X2",
-    margin: "auto - -",
-    padding: "Y2 X2"
+var AvatarInfoSetWithLabel = {
+  extend: AvatarWithInfoSet,
+  avatar: { extend: Avatar },
+  infos: {
+    ...[
+      {
+        title: { props: { text: "ETHDOWN" } },
+        label: { extend: CardLabel },
+        subTitle: null,
+        props: { gap: "Z" }
+      },
+      {
+        subTitle: { props: { text: "Short ADA with up to 4x Leverage" } }
+      }
+    ]
   },
-  childExtend: {
-    extend: Button,
-    props: {
-      fontSize: "Z",
+  props: {
+    avatar: { boxSize: "B" },
+    infos: {
+      gap: "X",
+      childProps: {
+        flow: "row"
+      }
+    }
+  }
+};
+var AvatarInfoSetWithButton = {
+  extend: AvatarWithInfoSet,
+  avatar: { extend: Avatar },
+  infos: {
+    ...[
+      {
+        title: { props: { text: "Wallet ID" } },
+        subTitle: { caption: { props: { text: "0xfb59...d862" } } }
+      },
+      {
+        extend: Button,
+        props: { icon: "copyOutline" }
+      }
+    ]
+  },
+  props: {
+    padding: "Y A Y Y",
+    border: "1px solid #57575C",
+    round: "Z",
+    gap: "Z",
+    avatar: {
+      boxSize: "A+B",
+      round: "Y"
+    },
+    infos: {
+      flow: "row",
+      align: "center flex-start",
+      gap: "A+X",
+      childProps: {
+        title: { fontSize: "Y" },
+        ":nth-child(2)": {
+          padding: "0",
+          color: "white",
+          fontSize: "C",
+          background: "transparent"
+        }
+      }
+    }
+  }
+};
+var AvatarBundleInfoSet = {
+  extend: AvatarWithInfoSet,
+  avatar: { extend: AvatarBundle },
+  infos: {
+    ...[
+      {
+        title: { props: { text: "ETH/BNB" } },
+        label: {
+          extend: CardLabel,
+          props: { text: "1 ETH = 240.7 BNB" }
+        },
+        subTitle: null
+      }
+    ]
+  },
+  props: {
+    gap: "Z",
+    background: "#1C1C1F",
+    padding: "A A",
+    round: "Z",
+    avatar: {
+      childProps: {
+        boxSize: "A+A",
+        ":not(:first-child)": {
+          border: "solid, black 0",
+          borderWidth: "1px"
+        }
+        // style: {
+        //   '&:not(:first-child)': { border: '1px solid rgba(0, 0, 0, 0)' }
+        // }
+      }
+    },
+    infos: {
+      childProps: {
+        flow: "row",
+        gap: "Z",
+        align: "center flex-start",
+        title: { fontWeight: "700" },
+        label: {
+          background: "black",
+          padding: "Y Z"
+        }
+      }
+    }
+  }
+};
+
+// ../../uikit/domql/Dialog/index.js
+var Dialog = {
+  props: {
+    theme: "tertiary",
+    round: "Z2",
+    margin: "E",
+    overflow: "hidden",
+    padding: "- Z - -"
+  }
+};
+var DialogFooter = {
+  extend: Flex,
+  props: {
+    align: "center flex-end",
+    gap: "X2",
+    margin: "auto - -",
+    padding: "Y2 X2"
+  },
+  childExtend: {
+    extend: Button,
+    props: {
+      fontSize: "Z",
       textTransform: "uppercase",
       background: "transparent",
       "@dark": {
@@ -16503,7 +16914,7 @@ var ToggleSwithWithLabel = {
 };
 
 // ../../uikit/domql/node_modules/@symbo.ls/icon/index.js
-var Icon2 = {
+var Icon3 = {
   extend: Svg,
   props: ({ key, props: props6, parent, context }) => {
     const { ICONS, useIconSprite, verbose } = context && context.designSystem;
@@ -16552,7 +16963,7 @@ var IconText2 = {
   },
   // TODO: remove this variant
   icon: {
-    extend: Icon2,
+    extend: Icon3,
     if: ({ parent }) => parent.props.icon
   },
   Icon: {
@@ -16680,6 +17091,23 @@ var NumberInput = {
 // ../../uikit/domql/Field/node_modules/@symbo.ls/atoms/Block.js
 var import_scratch12 = __toESM(require_cjs9());
 
+// ../../uikit/domql/Field/node_modules/@symbo.ls/atoms/Flex.js
+var Flex2 = {
+  props: {
+    display: "flex"
+  },
+  class: {
+    flow: ({ props: props6 }) => props6.flow && { flexFlow: props6.flow },
+    wrap: ({ props: props6 }) => props6.wrap && { flexWrap: props6.wrap },
+    align: ({ props: props6 }) => {
+      if (typeof props6.align !== "string")
+        return;
+      const [alignItems, justifyContent] = props6.align.split(" ");
+      return { alignItems, justifyContent };
+    }
+  }
+};
+
 // ../../uikit/domql/Field/node_modules/@symbo.ls/atoms/Grid.js
 var import_scratch13 = __toESM(require_cjs9());
 
@@ -16780,6 +17208,63 @@ var Field = {
   }),
   input: { extend: [Focusable2, Input2] }
 };
+var CustomizedField = {
+  extend: Field,
+  props: {
+    background: "transparent",
+    border: "1px solid #3F3F43",
+    padding: "0",
+    minHeight: "C+W",
+    round: "Z",
+    overflow: "hidden",
+    input: {
+      background: "transparent",
+      placeholder: "placeholder",
+      color: "white",
+      fontSize: "Z",
+      round: "0",
+      "::placeholder": { textTransform: "capitalize" }
+    }
+  }
+};
+var CodeField = {
+  extend: Flex2,
+  childExtend: {
+    extend: CustomizedField,
+    props: {
+      boxSize: "D D",
+      input: {
+        type: "number",
+        placeholder: "0",
+        textAlign: "center",
+        fontSize: "E"
+      },
+      style: { "input[type=number]::-webkit-inner-spin-button": { "-webkit-appearance": " none" } }
+    }
+  },
+  ...[{}, {}, {}, {}],
+  props: {
+    align: "center flex-start",
+    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",
+      padding: "- - - Y+W"
+    }
+  }
+};
 
 // ../../uikit/domql/Video/index.js
 var Video = {
@@ -17621,55 +18106,10 @@ var Steps = {
 // ../../uikit/domql/Table/index.js
 var Table = {};
 
-// ../../uikit/domql/InfoSet/index.js
-var InfoSet = {
-  extend: Flex,
-  childExtend: Flex,
-  props: {
-    flow: "column",
-    childProps: {
-      title: {
-        fontSize: "Z",
-        fontWeight: "500"
-      },
-      subTitle: {
-        fontSize: "Y",
-        color: "#A3A3A8"
-      }
-    }
-  }
-};
-
-// ../../uikit/domql/User/index.js
-var User = {
-  extend: Flex,
-  image: { extend: AvatarWithIndicator },
-  infos: {
-    extend: InfoSet,
-    ...[
-      {
-        title: { props: { text: "Erin Schleifer" } },
-        subTitle: { caption: { props: { text: "email@symbols.com" } } }
-      }
-    ]
-  },
-  props: {
-    boxSize: "fit-content",
-    align: "center flex-start",
-    gap: "A",
-    infos: {
-      childProps: {
-        flow: "column",
-        subTitle: { caption: { whiteSpace: "nowrap" } }
-      }
-    }
-  }
-};
-
 // ../../uikit/domql/Chat/index.js
 var ChatUser = {
-  extend: User,
-  image: {},
+  extend: AvatarWithInfoSet,
+  avatar: {},
   infos: {
     ...[
       {
@@ -17684,7 +18124,7 @@ var ChatUser = {
   },
   props: {
     align: "flex-start flex-start",
-    image: { fontSize: "C" },
+    avatar: { fontSize: "C" },
     infos: {
       gap: "Y",
       childProps: {
@@ -17702,7 +18142,7 @@ var ChatUser = {
 };
 var ChatUserWithUploadedFile = {
   extend: ChatUser,
-  image: {},
+  avatar: {},
   infos: {
     ...[
       {},
@@ -17754,8 +18194,8 @@ var ChatUserWithUploadedFile = {
   }
 };
 var ChatUserWithButtonSet = {
-  extend: User,
-  image: {},
+  extend: AvatarWithInfoSet,
+  avatar: {},
   infos: {
     ...[
       {
@@ -17776,7 +18216,7 @@ var ChatUserWithButtonSet = {
     background: "#1C1C1F",
     padding: "A B",
     round: "A",
-    image: { fontSize: `${24 / 16}em` },
+    avatar: { fontSize: `${24 / 16}em` },
     infos: {
       flow: "row",
       gap: "D",
@@ -17805,7 +18245,7 @@ var ChatUserWithButtonSet = {
 };
 var ChatUserWithNotification = {
   extend: ChatUser,
-  image: {},
+  avatar: {},
   infos: {
     ...[
       {
@@ -17838,59 +18278,234 @@ var ChatUserWithNotification = {
   }
 };
 
-// ../../uikit/domql/Card/index.js
-var CardLabel = {
+// ../../uikit/domql/IconTextWithNotification/index.js
+var IconTextWithNotification = {
+  extend: Flex,
+  iconText: {
+    extend: IconText2,
+    props: {
+      icon: { name: "trash" },
+      text: "trash"
+    }
+  },
+  notification: {
+    extend: NotificationAlert,
+    props: { span: { text: "12" } }
+  },
   props: {
-    text: "-2.902x",
-    fontSize: "Y",
-    background: "#F4454E",
-    boxSize: "fit-content fit-content",
-    padding: "W Y",
-    round: "Y"
+    background: "#252527",
+    minWidth: "F+D",
+    maxWidth: "F+D",
+    round: "Z",
+    align: "center space-between",
+    padding: "Y Z",
+    iconText: {
+      gap: "Z",
+      textTransform: "capitalize",
+      icon: { fontSize: "C" }
+    },
+    notification: {
+      padding: "W Y",
+      background: "white",
+      color: "black",
+      round: "Z+W",
+      span: { fontSize: "A" }
+    }
   }
 };
-var Card = {
-  extend: InfoSet,
-  heading: {
-    title: { props: { text: "Total crypto assets" } },
-    icon: { extend: Icon, props: { name: "arrowUpRight" } }
+
+// ../../uikit/domql/TextComponents/index.js
+var TitleParagraph = {
+  extend: Flex,
+  title: {
+    tag: "h5",
+    props: { text: "Log in to your account" }
   },
-  content: {
-    extend: Flex,
-    amount: { props: { text: "$ 12,759" } },
-    percent: {
-      extend: CardLabel,
-      props: { text: "+ 8.8%" }
+  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" }
   },
-  footer: {
-    subTitle: {
-      extend: Flex,
-      caption: { props: { text: "Last update:" } },
-      span: { props: { text: "an hour ago" } }
+  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" }
+    }
+  }
+};
+
+// ../../uikit/domql/Modal/index.js
+var Modal = {
+  extend: Flex,
+  header: {
+    extend: Flex,
+    close: {
+      extend: Button,
+      props: { icon: "x" }
     }
   },
+  content: { extend: Flex },
+  footer: {},
   props: {
-    minWidth: "G",
-    maxWidth: "G",
+    background: "#1C1C1F",
     padding: "A",
+    flow: "column",
     round: "Z+V",
-    gap: "Y",
-    style: { background: "linear-gradient(to right, rgba(4, 116, 242, 1), rgba(0, 48, 103, 1))" },
-    childProps: {
+    header: {
       alignItems: "center",
-      title: { fontWeight: "700" },
-      icon: { fontSize: "C", color: "#A3A3A8" },
-      amount: { fontSize: `${24 / 16}em`, fontWeight: "700" },
-      percent: { padding: "Y Z", background: "#04040466" },
-      subTitle: {
-        gap: "Y",
-        caption: { color: "rgba(224, 224, 226, 1)" },
-        span: { color: "rgba(233, 233, 234, 1)" }
+      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" }
       }
     },
-    heading: { justifyContent: "space-between" },
-    content: { gap: "Y" }
+    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" }
+    }
+  }
+};
+
+// ../../uikit/domql/SlideTabs/index.js
+var SlideTabs = {
+  extend: Flex,
+  childExtend: Button,
+  ...[{}, {}, {}],
+  props: {
+    align: "center flex-start",
+    maxWidth: "fit-contnet",
+    gap: "Y",
+    childProps: {
+      padding: "0",
+      background: "white",
+      boxSize: "Y E+A",
+      round: "0",
+      ":first-child": { round: "E 0 0 E" },
+      ":last-child": { round: "0 E E 0" }
+    }
+  }
+};
+var SlideTabsWithTitleParagraph = {
+  extend: Flex,
+  heading: {
+    extend: TitleParagraph,
+    heading: { title: { props: { text: "Symbols" } } },
+    paragraph: { props: { text: "The easiest way to build your own website." } }
+  },
+  slides: { extend: SlideTabs },
+  props: {
+    maxWidth: "fit-contnet",
+    flow: "column",
+    gap: "B",
+    padding: "B",
+    background: "#252527",
+    heading: {
+      heading: { title: { fontSize: "C" } },
+      paragraph: { fontSize: "A" }
+    }
   }
 };
 
@@ -21856,7 +22471,13 @@ var create = async (App, options = options_default, optionsExternalFile) => {
     window.document = {};
   const doc = options.parent || options.document || document;
   const [scratchSystem2, emotion4, registry] = initEmotion(key, options);
-  const state = options.state || {};
+  let state;
+  if (options.state)
+    state = options.state;
+  else if (App && App.state)
+    state = App.state;
+  else
+    state = {};
   const pages = options.pages || {};
   const components = options.components ? { ...domql_exports, ...options.components } : domql_exports;
   const designSystem = scratchSystem2 || {};
@@ -21913,7 +22534,13 @@ var createSync = (App, options = options_default, optionsExternalFile) => {
   else
     parent = document.body;
   const [scratchSystem2, emotion4, registry] = initEmotion(key, options);
-  const state = options.state || {};
+  let state;
+  if (options.state)
+    state = options.state;
+  else if (App && App.state)
+    state = App.state;
+  else
+    state = {};
   const pages = options.pages || {};
   const components = options.components ? { ...domql_exports, ...options.components } : domql_exports;
   const designSystem = scratchSystem2 || {};

package/dist/cjs/index.js

@@ -60,7 +60,13 @@ const create = async (App, options = import_options.default, optionsExternalFile
     window.document = {};
   const doc = options.parent || options.document || document;
   const [scratchSystem, emotion, registry] = (0, import_initEmotion.initEmotion)(key, options);
-  const state = options.state || {};
+  let state;
+  if (options.state)
+    state = options.state;
+  else if (App && App.state)
+    state = App.state;
+  else
+    state = {};
   const pages = options.pages || {};
   const components = options.components ? { ...uikit, ...options.components } : uikit;
   const designSystem = scratchSystem || {};
@@ -117,7 +123,13 @@ const createSync = (App, options = import_options.default, optionsExternalFile)
   else
     parent = document.body;
   const [scratchSystem, emotion, registry] = (0, import_initEmotion.initEmotion)(key, options);
-  const state = options.state || {};
+  let state;
+  if (options.state)
+    state = options.state;
+  else if (App && App.state)
+    state = App.state;
+  else
+    state = {};
   const pages = options.pages || {};
   const components = options.components ? { ...uikit, ...options.components } : uikit;
   const designSystem = scratchSystem || {};

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@symbo.ls/create",
-  "version": "2.11.141",
+  "version": "2.11.145",
   "license": "MIT",
-  "gitHead": "62c22b7c8f9ec12deca59285a95dd0c58508c68f",
+  "gitHead": "713a4a9c9431fb0b35808e30477e968fed01bde3",
   "files": [
     "src",
     "dist"

package/src/index.js

@@ -35,7 +35,11 @@ export const create = async (App, options = DEFAULT_CREATE_OPTIONS, optionsExter
   const doc = options.parent || options.document || document
   const [scratchSystem, emotion, registry] = initEmotion(key, options)
 
-  const state = options.state || {}
+  let state
+  if (options.state) state = options.state
+  else if (App && App.state) state = App.state
+  else state = {}
+
   const pages = options.pages || {}
   const components = options.components ? { ...uikit, ...options.components } : uikit
   const designSystem = scratchSystem || {}
@@ -97,7 +101,11 @@ export const createSync = (App, options = DEFAULT_CREATE_OPTIONS, optionsExterna
 
   const [scratchSystem, emotion, registry] = initEmotion(key, options)
 
-  const state = options.state || {}
+  let state
+  if (options.state) state = options.state
+  else if (App && App.state) state = App.state
+  else state = {}
+
   const pages = options.pages || {}
   const components = options.components ? { ...uikit, ...options.components } : uikit
   const designSystem = scratchSystem || {}