@symbo.ls/create 2.11.135 → 2.11.138

package/dist/cjs/bundle/index.js

@@ -1707,14 +1707,14 @@ var require_classList = __commonJS({
     var classList_exports = {};
     __export2(classList_exports, {
       applyClassListOnNode: () => applyClassListOnNode2,
-      assignClass: () => assignClass,
+      assignKeyAsClassname: () => assignKeyAsClassname,
       classList: () => classList2,
       classify: () => classify2,
       default: () => classList_default
     });
     module2.exports = __toCommonJS2(classList_exports);
     var import_utils25 = require_cjs();
-    var assignClass = (element) => {
+    var assignKeyAsClassname = (element) => {
       const { key } = element;
       if (element.class === true)
         element.class = key;
@@ -1829,7 +1829,7 @@ var require_set = __commonJS({
     });
     module2.exports = __toCommonJS2(set_exports);
     var import_utils25 = require_cjs();
-    var import_create = __toESM2(require_create3(), 1);
+    var import_create = __toESM2(require_create4(), 1);
     var import_options3 = __toESM2(require_options(), 1);
     var import_mixins = require_mixins();
     var import_content = require_content();
@@ -2572,9 +2572,9 @@ var require_updateState = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/state/dist/cjs/createState.js
-var require_createState = __commonJS({
-  "../../node_modules/@domql/state/dist/cjs/createState.js"(exports, module2) {
+// ../../node_modules/@domql/state/dist/cjs/create.js
+var require_create2 = __commonJS({
+  "../../node_modules/@domql/state/dist/cjs/create.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -2593,11 +2593,12 @@ var require_createState = __commonJS({
       return to;
     };
     var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
-    var createState_exports = {};
-    __export2(createState_exports, {
+    var create_exports = {};
+    __export2(create_exports, {
+      applyInitialState: () => applyInitialState,
       createState: () => createState
     });
-    module2.exports = __toCommonJS2(createState_exports);
+    module2.exports = __toCommonJS2(create_exports);
     var import_event = require_cjs3();
     var import_utils25 = require_cjs();
     var import_ignore = require_ignore();
@@ -2605,7 +2606,9 @@ var require_createState = __commonJS({
     var import_updateState = require_updateState();
     var import_inherit = require_inherit();
     var createState = function(element, parent, options) {
-      const skipApplyMethods = Boolean(options && options.skipApplyMethods);
+      element.state = applyInitialState(element, parent, options);
+    };
+    var applyInitialState = function(element, parent, options) {
       const objectizeState = checkForTypes(element);
       if (objectizeState === false)
         return parent.state || {};
@@ -2621,14 +2624,6 @@ var require_createState = __commonJS({
       const dependentState = applyDependentState(element, element.state);
       if (dependentState)
         element.state = dependentState;
-      if (skipApplyMethods) {
-        if (element.parent && element.parent.state) {
-          element.state.parent = element.parent.state;
-        } else {
-          element.state.parent = {};
-        }
-        return element.state;
-      }
       applyMethods(element);
       (0, import_event.triggerEventOn)("stateCreated", element);
       return element.state;
@@ -2701,7 +2696,7 @@ var require_createState = __commonJS({
       } else {
         Object.setPrototypeOf(state, proto);
       }
-      if (state.parent)
+      if (state.parent && state.parent.__children)
         state.parent.__children[element.key] = state;
     };
   }
@@ -2728,7 +2723,7 @@ var require_cjs5 = __commonJS({
     var state_exports = {};
     module2.exports = __toCommonJS2(state_exports);
     __reExport2(state_exports, require_ignore(), module2.exports);
-    __reExport2(state_exports, require_createState(), module2.exports);
+    __reExport2(state_exports, require_create2(), module2.exports);
     __reExport2(state_exports, require_updateState(), module2.exports);
     __reExport2(state_exports, require_methods(), module2.exports);
     __reExport2(state_exports, require_inherit(), module2.exports);
@@ -3215,7 +3210,7 @@ var require_inherit2 = __commonJS({
 });
 
 // ../../node_modules/@domql/element/dist/cjs/props/create.js
-var require_create2 = __commonJS({
+var require_create3 = __commonJS({
   "../../node_modules/@domql/element/dist/cjs/props/create.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
@@ -3282,9 +3277,11 @@ var require_create2 = __commonJS({
     };
     var createProps = function(element, parent, cached) {
       const propsStack = cached || createPropsStack(element, parent);
-      const { __ref } = element;
+      const { __ref: ref } = element;
+      if (!ref.__if)
+        return;
       if (propsStack.length) {
-        __ref.__props = propsStack;
+        ref.__props = propsStack;
         syncProps(propsStack, element);
         element.props.update = update;
       }
@@ -3323,7 +3320,7 @@ var require_update = __commonJS({
       updateProps: () => updateProps
     });
     module2.exports = __toCommonJS2(update_exports);
-    var import_create = require_create2();
+    var import_create = require_create3();
     var import_inherit = require_inherit2();
     var updateProps = (newProps, element, parent) => {
       const { __ref } = element;
@@ -3361,7 +3358,7 @@ var require_props = __commonJS({
     var props_exports = {};
     module2.exports = __toCommonJS2(props_exports);
     __reExport2(props_exports, require_ignore2(), module2.exports);
-    __reExport2(props_exports, require_create2(), module2.exports);
+    __reExport2(props_exports, require_create3(), module2.exports);
     __reExport2(props_exports, require_inherit2(), module2.exports);
     __reExport2(props_exports, require_update(), module2.exports);
   }
@@ -3840,6 +3837,8 @@ var require_component = __commonJS({
     };
     var applyComponentFromContext = (element, parent, options) => {
       const { context } = element;
+      if (!context || !context.components)
+        return;
       const { components } = context;
       const { extend } = element;
       const execExtend = (0, import_utils25.exec)(extend, element);
@@ -4067,13 +4066,15 @@ var require_applyParam = __commonJS({
     var import_utils25 = require_cjs();
     var import_mixins = require_mixins();
     var applyParam = (param, element, options) => {
-      const { node: node2, context } = element;
+      const { node: node2, context, __ref: ref } = element;
       const prop = element[param];
       const DOMQLProperty = import_mixins.registry[param];
       const DOMQLPropertyFromContext = context && context.registry && context.registry[param];
       const isGlobalTransformer = DOMQLPropertyFromContext || DOMQLProperty;
       const hasDefine = element.define && element.define[param];
       const hasContextDefine = context && context.define && context.define[param];
+      if (!ref.__if)
+        return;
       if (isGlobalTransformer && !hasContextDefine) {
         if ((0, import_utils25.isFunction)(isGlobalTransformer)) {
           isGlobalTransformer(prop, element, node2, options);
@@ -4126,7 +4127,7 @@ var require_node2 = __commonJS({
     var import_event = require_cjs3();
     var import_render = require_cjs4();
     var import_methods = require_methods2();
-    var import_create = __toESM2(require_create3(), 1);
+    var import_create = __toESM2(require_create4(), 1);
     var import_iterate = require_iterate();
     var import_mixins = require_mixins();
     var import_applyParam = require_applyParam();
@@ -4150,8 +4151,6 @@ var require_node2 = __commonJS({
         if ((0, import_utils25.isFunction)(node2.setAttribute))
           node2.setAttribute("key", element.key);
       }
-      if (!ref.__if)
-        return element;
       if (element.tag !== "string" || element.tag !== "fragment") {
         (0, import_iterate.throughInitialDefine)(element);
         (0, import_iterate.throughInitialExec)(element);
@@ -4631,7 +4630,7 @@ var require_update2 = __commonJS({
     var import_props = require_props();
     var import_state3 = require_cjs5();
     var import_utils26 = require_utils();
-    var import_create = __toESM2(require_create3(), 1);
+    var import_create = __toESM2(require_create4(), 1);
     var import_iterate = require_iterate();
     var import_mixins = require_mixins();
     var import_applyParam = require_applyParam();
@@ -4883,7 +4882,7 @@ var require_set2 = __commonJS({
 });
 
 // ../../node_modules/@domql/element/dist/cjs/create.js
-var require_create3 = __commonJS({
+var require_create4 = __commonJS({
   "../../node_modules/@domql/element/dist/cjs/create.js"(exports, module2) {
     "use strict";
     var __create2 = Object.create;
@@ -4919,7 +4918,6 @@ var require_create3 = __commonJS({
     });
     module2.exports = __toCommonJS2(create_exports);
     var import_node = __toESM2(require_node2(), 1);
-    var import_utils25 = require_cjs();
     var import_tree = require_tree();
     var import_registry = require_cjs6();
     var import_event = require_cjs3();
@@ -4933,19 +4931,52 @@ var require_create3 = __commonJS({
     var import_set = require_set2();
     var import_classList = require_classList();
     var import_iterate = require_iterate();
+    var import_utils25 = require_cjs();
     var import_options3 = __toESM2(require_options(), 1);
     var import_component = require_component();
     var ENV2 = "development";
     var create2 = (element, parent, key, options = import_options3.default.create || {}) => {
-      if (options && !import_options3.default.create) {
-        import_options3.default.create = options;
-        import_options3.default.create.context = element.context || options.context;
+      cacheOptions(element, options);
+      if (checkIfPrimitive(element)) {
+        return 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);
+      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);
+      }
+      replaceOptions(element, parent, options);
+      addCaching(element, parent);
+      (0, import_set.addMethods)(element, parent);
+      (0, import_state3.createState)(element, parent);
+      createIfConditionFlag(element, parent);
+      if (element.node && ref.__if) {
+        return (0, import_render.assignNode)(element, parent, key);
+      }
+      (0, import_props.createProps)(element, parent);
+      (0, import_component.applyVariant)(element, parent);
+      const onInit = (0, import_event.triggerEventOn)("init", element, options);
+      if (onInit === false)
+        return element;
+      (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
+      (0, import_classList.assignKeyAsClassname)(element);
+      renderElement(element, parent, options);
+      addElementIntoParentChildren(element, parent);
+      (0, import_event.triggerEventOn)("complete", element, options);
+      return element;
+    };
+    var createBasedOnType = (element, parent, key, options) => {
       if (element === void 0) {
         if (ENV2 === "test" || ENV2 === "development") {
           console.warn(key, "element is undefined in", parent && parent.__ref && parent.__ref.path);
         }
-        element = {};
+        return {};
       }
       if ((0, import_utils25.isString)(key) && key.slice(0, 2 === "__")) {
         if (ENV2 === "test" || ENV2 === "development") {
@@ -4955,65 +4986,58 @@ var require_create3 = __commonJS({
       if (element === null)
         return;
       if (element === true)
-        element = { text: true };
+        return { text: true };
       if (element.__hash) {
-        element = { extend: element };
+        return { extend: element };
       }
-      if (!parent)
-        parent = import_tree.ROOT;
-      if ((0, import_utils25.isNode)(parent)) {
-        parent = import_tree.ROOT[`${key}_parent`] = { key: ":root", node: parent };
+      return element;
+    };
+    var redefineElement = (element, parent, key, options) => {
+      const elementWrapper = createBasedOnType(element, parent, key, options);
+      if ((0, import_component.checkIfKeyIsComponent)(key)) {
+        return (0, import_component.applyKeyComponentAsExtend)(elementWrapper, parent, key);
       }
-      if (checkIfPrimitive(element)) {
-        element = applyValueAsText(element, parent, key);
+      if (checkIfMedia(key)) {
+        return applyMediaProps2(elementWrapper, parent, key);
       }
-      const assignedKey = (key || element.key || (0, import_utils25.createKey)()).toString();
-      if ((0, import_component.checkIfKeyIsComponent)(assignedKey)) {
-        element = (0, import_component.applyKeyComponentAsExtend)(element, parent, assignedKey);
+      return elementWrapper;
+    };
+    var redefineParent = (element, parent, key, options) => {
+      if (!parent)
+        return import_tree.ROOT;
+      if ((0, import_utils25.isNode)(parent)) {
+        const parentNodeWrapper = { key: ":root", node: parent };
+        import_tree.ROOT[`${key}_parent`] = parentNodeWrapper;
+        return parentNodeWrapper;
       }
-      if (checkIfMedia(assignedKey)) {
-        element = applyMediaProps2(element, parent, assignedKey);
+      return parent;
+    };
+    var cacheOptions = (element, options) => {
+      if (options && !import_options3.default.create) {
+        import_options3.default.create = options;
+        import_options3.default.create.context = element.context || options.context;
       }
+    };
+    var createKey = (element, parent, key) => {
+      return (key || element.key || (0, import_utils25.generateKey)()).toString();
+    };
+    var addRef = (element, parent) => {
       if (element.__ref)
         element.__ref.origin = element;
       else
         element.__ref = { origin: element };
-      const __ref = element.__ref;
-      applyContext(element, parent, options);
-      const { context } = element;
-      if (context && context.components) {
-        (0, import_component.applyComponentFromContext)(element, parent, options);
-      }
-      (0, import_extend.applyExtend)(element, parent, options);
-      element.key = assignedKey;
-      if (options.onlyResolveExtends) {
-        return onlyResolveExtends(element, parent, options);
-      }
+      return element.__ref;
+    };
+    var replaceOptions = (element, parent, options) => {
       if (Object.keys(options).length) {
         import_mixins.registry.defaultOptions = options;
         if (options.ignoreChildExtend)
           delete options.ignoreChildExtend;
       }
-      addCaching(element, parent);
-      (0, import_set.addMethods)(element, parent);
-      element.state = (0, import_state3.createState)(element, parent);
-      checkIf(element, parent);
-      if (element.node && __ref.__if) {
-        return (0, import_render.assignNode)(element, parent, assignedKey);
-      }
-      if (__ref.__if)
-        (0, import_props.createProps)(element, parent);
-      (0, import_component.applyVariant)(element, parent);
-      const initReturns = (0, import_event.triggerEventOn)("init", element, options);
-      if (initReturns === false)
-        return element;
-      (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
-      (0, import_classList.assignClass)(element);
-      renderElement(element, parent, options);
+    };
+    var addElementIntoParentChildren = (element, parent) => {
       if (parent.__ref && parent.__ref.__children)
         parent.__ref.__children.push(element.key);
-      (0, import_event.triggerEventOn)("complete", element, options);
-      return element;
     };
     var renderElement = (element, parent, options) => {
       const { __ref: ref, key } = element;
@@ -5042,7 +5066,7 @@ var require_create3 = __commonJS({
       if (!element.context)
         element.context = parent.context || options.context || import_tree.ROOT.context;
     };
-    var checkIf = (element, parent) => {
+    var createIfConditionFlag = (element, parent) => {
       const { __ref: ref } = element;
       if ((0, import_utils25.isFunction)(element.if)) {
         const ifPassed = element.if(element, element.state);
@@ -5096,8 +5120,6 @@ var require_create3 = __commonJS({
         __ref.__attr = {};
       if (!element.props)
         element.props = {};
-      if (!element.state)
-        element.state = element.parent.state || {};
       (0, import_state3.createState)(element, parent, { skipApplyMethods: true, ...options });
       (0, import_props.createProps)(element, parent);
       (0, import_component.applyVariant)(element, parent);
@@ -5115,13 +5137,10 @@ var require_create3 = __commonJS({
           create2((0, import_utils25.exec)(prop, element), element, param, options);
         }
       }
-      delete element.parent;
       delete element.update;
       delete element.__element;
       delete element.props.update;
       delete element.props.__element;
-      delete element.state.__element;
-      delete element.state.__element;
       if (!options.keepRef)
         delete element.__ref;
       return element;
@@ -5232,7 +5251,7 @@ var require_cjs9 = __commonJS({
     });
     module2.exports = __toCommonJS2(element_exports);
     var import_tree = require_tree();
-    var import_create = __toESM2(require_create3(), 1);
+    var import_create = __toESM2(require_create4(), 1);
     var import_node = __toESM2(require_node2(), 1);
     var import_define3 = __toESM2(require_define(), 1);
     var import_update = __toESM2(require_update2(), 1);
@@ -14170,18 +14189,26 @@ __export(domql_exports, {
   Avatar: () => Avatar,
   AvatarBundle: () => AvatarBundle,
   AvatarChooser: () => AvatarChooser,
+  AvatarWithIndicator: () => AvatarWithIndicator,
   Block: () => Block,
   Box: () => Box,
   Br: () => Br,
   Button: () => Button,
   ButtonSet: () => ButtonSet,
   Caption: () => Caption,
+  Card: () => Card,
+  CardLabel: () => CardLabel,
+  ChatUser: () => ChatUser,
+  ChatUserWithButtonSet: () => ChatUserWithButtonSet,
+  ChatUserWithNotification: () => ChatUserWithNotification,
+  ChatUserWithUploadedFile: () => ChatUserWithUploadedFile,
   CheckBoxWithLabel: () => CheckBoxWithLabel,
   Checkbox: () => Checkbox,
   Circle: () => Circle,
   CircleButton: () => CircleButton,
   Clickable: () => Clickable,
   Collection: () => Collection,
+  DateIndicator: () => DateIndicator,
   DatePicker: () => DatePicker,
   DatePickerDay: () => DatePickerDay,
   DatePickerGrid: () => DatePickerGrid,
@@ -14218,6 +14245,8 @@ __export(domql_exports, {
   IconText: () => IconText2,
   Iframe: () => Iframe,
   Img: () => Img,
+  IndicatorDot: () => IndicatorDot,
+  InfoSet: () => InfoSet,
   Input: () => Input2,
   Interaction: () => Interaction,
   Italic: () => Italic,
@@ -14227,6 +14256,7 @@ __export(domql_exports, {
   List: () => List,
   Media: () => Media,
   Notification: () => Notification,
+  NotificationAlert: () => NotificationAlert,
   NumberInput: () => NumberInput,
   Overflow: () => Overflow,
   P: () => P,
@@ -14252,6 +14282,7 @@ __export(domql_exports, {
   Subhead: () => Subhead,
   Svg: () => Svg,
   Tab: () => Tab,
+  Table: () => Table,
   Text: () => Text,
   Textarea: () => Textarea,
   Theme: () => Theme,
@@ -14271,6 +14302,7 @@ __export(domql_exports, {
   UploadModalLabel: () => UploadModalLabel,
   UploadProgress: () => UploadProgress,
   UploadResult: () => UploadResult,
+  User: () => User,
   Video: () => Video,
   XYZ: () => XYZ,
   calendar: () => calendar,
@@ -15611,6 +15643,57 @@ var KangorooButton = {
   childExtend: IconText
 };
 
+// ../../uikit/domql/Accessories/index.js
+var IndicatorDot = {
+  props: {
+    boxSize: "Y+V1",
+    background: "#04F214",
+    round: "100%",
+    border: "solid, black 0",
+    borderWidth: "1px"
+  }
+};
+var NotificationAlert = {
+  span: { props: { text: "2" } },
+  props: {
+    background: "#0474F2",
+    boxSize: "fit-content",
+    padding: "- X",
+    round: "Y+V",
+    span: {
+      fontSize: "Y",
+      color: "white"
+    }
+  }
+};
+var DateIndicator = {
+  extend: Flex,
+  days: { ...[{ props: { text: "monday" } }] },
+  time: {
+    extend: Flex,
+    hour: { props: { text: "2" } },
+    ":after": { content: ":" },
+    minutes: { props: { text: "20" } }
+  },
+  timeFormat: {
+    ...[
+      { props: { text: "am" } },
+      { props: { text: "pm", display: "none" } }
+    ]
+  },
+  props: {
+    gap: "Y",
+    childProps: {
+      fontWeight: "400",
+      color: "#A3A3A8"
+    },
+    days: { childProps: { textTransform: "capitalize" } },
+    timeFormat: {
+      textTransform: "uppercase"
+    }
+  }
+};
+
 // ../../uikit/domql/Avatar/index.js
 var Avatar = {
   extend: Img,
@@ -15618,13 +15701,27 @@ var Avatar = {
     display: "block",
     avatarType: "initials",
     borderRadius: "100%",
-    boxSize: "B",
+    boxSize: "A+A",
     cursor: "pointer"
   },
   attr: {
     src: ({ key, props: props6 }) => props6.src || `https://avatars.dicebear.com/api/${props6.avatarType || "adventurer-neutral"}/${props6.key || key}.svg`
   }
 };
+var AvatarWithIndicator = {
+  avatar: { extend: Avatar },
+  indicator: { extend: IndicatorDot },
+  props: {
+    boxSize: "fit-content fit-content",
+    round: "100%",
+    position: "relative",
+    indicator: {
+      position: "absolute",
+      bottom: "0",
+      right: "0"
+    }
+  }
+};
 var AvatarBundle = {
   extend: Flex,
   childExtend: {
@@ -17500,8 +17597,8 @@ var Pills = {
       }
     }),
     on: {
-      click: (e, el, s) => {
-        s.update({ active: parseInt(el.key) });
+      click: (e, el) => {
+        el.state.update({ active: parseInt(el.key) });
       }
     }
   },
@@ -17685,6 +17782,282 @@ var Steps = {
   $setPropsCollection: ({ props: props6 }) => props6.options
 };
 
+// ../../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: {},
+  infos: {
+    ...[
+      {
+        title: {},
+        subTitle: {
+          extend: DateIndicator,
+          caption: null
+        }
+      },
+      { chatText: { props: { text: "Can you please review the latest design?" } } }
+    ]
+  },
+  props: {
+    align: "flex-start flex-start",
+    image: { fontSize: "C" },
+    infos: {
+      gap: "Y",
+      childProps: {
+        flow: "row",
+        align: "center space-between",
+        chatText: {
+          fontSize: "Z",
+          background: "#252527",
+          padding: "Z+W2 A+W",
+          round: "Z+W2"
+        }
+      }
+    }
+  }
+};
+var ChatUserWithUploadedFile = {
+  extend: ChatUser,
+  image: {},
+  infos: {
+    ...[
+      {},
+      {
+        chatText: null,
+        uploadedFile: {
+          extend: UploadResult,
+          FileIcon: {},
+          Flex: {
+            H6: { text: "File.jpg" },
+            caption: {
+              extend: Flex,
+              value: { props: { text: "1.2" } },
+              mb: "mb"
+            },
+            Captions: null,
+            UploadProgress: null
+          }
+        }
+      }
+    ]
+  },
+  props: {
+    infos: {
+      childProps: {
+        uploadedFile: {
+          background: "#1C1C1F",
+          minWidth: "G",
+          align: "center flex-start",
+          FileIcon: {
+            background: "#3F3F43",
+            boxSize: `${54 / 16}em`,
+            Icon: { fontSize: `${24 / 16}em` }
+          },
+          Flex: {
+            H6: {
+              fontSize: "Z",
+              fontWeight: "500"
+            },
+            caption: {
+              fontSize: "Z",
+              color: "#A3A3A8",
+              textTransform: "uppercase"
+            }
+          }
+        }
+      }
+    }
+  }
+};
+var ChatUserWithButtonSet = {
+  extend: User,
+  image: {},
+  infos: {
+    ...[
+      {
+        title: { props: { text: "Justin Dorwart" } },
+        subTitle: { caption: { props: { text: "Active now" } } }
+      },
+      {
+        extend: ButtonSet,
+        ...[
+          { props: { icon: "phone" } },
+          { props: { icon: "video" } },
+          { props: { icon: "info" } }
+        ]
+      }
+    ]
+  },
+  props: {
+    background: "#1C1C1F",
+    padding: "A B",
+    round: "A",
+    image: { fontSize: `${24 / 16}em` },
+    infos: {
+      flow: "row",
+      gap: "D",
+      alignItems: "center",
+      childProps: {
+        "&:last-child": {
+          flow: "row",
+          gap: "Y+V",
+          "& > button": {
+            boxSize: "B+Y",
+            background: "#141416",
+            round: "A",
+            "& > svg": {
+              fontSize: "C",
+              color: "white"
+            }
+          }
+        },
+        title: {
+          fontSize: "C",
+          fontWeight: "700"
+        }
+      }
+    }
+  }
+};
+var ChatUserWithNotification = {
+  extend: ChatUser,
+  image: {},
+  infos: {
+    ...[
+      {
+        title: {},
+        subTitle: { days: null }
+      },
+      {
+        chatText: { props: { text: "Hey team, Ive finished the re..." } },
+        notification: { extend: NotificationAlert }
+      }
+    ]
+  },
+  props: {
+    background: "#141416",
+    padding: "A",
+    round: "Z",
+    infos: {
+      childProps: {
+        ":last-child": { gap: "D" },
+        title: { fontSize: "A" },
+        chatText: {
+          padding: "0",
+          background: "transparent",
+          color: "#A3A3A8",
+          minWidth: "F+C",
+          maxWidth: "F+C"
+        }
+      }
+    }
+  }
+};
+
+// ../../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 Card = {
+  extend: InfoSet,
+  heading: {
+    title: { props: { text: "Total crypto assets" } },
+    icon: { extend: Icon, props: { name: "arrowUpRight" } }
+  },
+  content: {
+    extend: Flex,
+    amount: { props: { text: "$ 12,759" } },
+    percent: {
+      extend: CardLabel,
+      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`, 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)" }
+      }
+    },
+    heading: { justifyContent: "space-between" },
+    content: { gap: "Y" }
+  }
+};
+
 // src/define.js
 var defaultDefine = {
   routes: (param) => param,
@@ -21643,6 +22016,8 @@ var create = async (App, options = options_default, optionsExternalFile) => {
   if (appIsKey)
     App = {};
   await fetchSync(key, options);
+  if (typeof document === "undefined")
+    window.document = {};
   const doc = options.parent || options.document || document;
   const [scratchSystem2, emotion4, registry] = initEmotion(key, options);
   const state = options.state || {};
@@ -21692,7 +22067,15 @@ var createSync = (App, options = options_default, optionsExternalFile) => {
   const key = options.key || SYMBOLS_KEY || (appIsKey ? App : "");
   if (appIsKey)
     App = {};
-  const doc = options.parent || options.document || document;
+  if (typeof document === "undefined")
+    document = { body: {} };
+  let parent;
+  if (options.parent)
+    parent = options.parent;
+  else if (options.document)
+    parent = options.document;
+  else
+    parent = document.body;
   const [scratchSystem2, emotion4, registry] = initEmotion(key, options);
   const state = options.state || {};
   const pages = options.pages || {};
@@ -21703,7 +22086,7 @@ var createSync = (App, options = options_default, optionsExternalFile) => {
   const extend = applySyncDebug([App], options);
   const domqlApp = import_domql.default.create({
     extend,
-    //routes: options.pages,
+    // routes: options.pages,
     state,
     context: {
       key,
@@ -21716,11 +22099,11 @@ var createSync = (App, options = options_default, optionsExternalFile) => {
       define: define2,
       registry,
       emotion: emotion4,
-      //routerOptions,
-      document: doc
+      // routerOptions,
+      document
     }
-  }, doc.body, key, {
-    //extend: [uikit.Box],
+  }, parent, key, {
+    // extend: [uikit.Box],
     verbose: options.verbose,
     ...options.domqlOptions
   });

package/dist/cjs/index.js

@@ -56,6 +56,8 @@ const create = async (App, options = import_options.default, optionsExternalFile
   if (appIsKey)
     App = {};
   await (0, import_ferchOnCreate.fetchSync)(key, options);
+  if (typeof document === "undefined")
+    window.document = {};
   const doc = options.parent || options.document || document;
   const [scratchSystem, emotion, registry] = (0, import_initEmotion.initEmotion)(key, options);
   const state = options.state || {};
@@ -105,7 +107,15 @@ const createSync = (App, options = import_options.default, optionsExternalFile)
   const key = options.key || SYMBOLS_KEY || (appIsKey ? App : "");
   if (appIsKey)
     App = {};
-  const doc = options.parent || options.document || document;
+  if (typeof document === "undefined")
+    document = { body: {} };
+  let parent;
+  if (options.parent)
+    parent = options.parent;
+  else if (options.document)
+    parent = options.document;
+  else
+    parent = document.body;
   const [scratchSystem, emotion, registry] = (0, import_initEmotion.initEmotion)(key, options);
   const state = options.state || {};
   const pages = options.pages || {};
@@ -116,7 +126,7 @@ const createSync = (App, options = import_options.default, optionsExternalFile)
   const extend = (0, import_syncExtend.applySyncDebug)([App], options);
   const domqlApp = import_domql.default.create({
     extend,
-    //routes: options.pages,
+    // routes: options.pages,
     state,
     context: {
       key,
@@ -129,11 +139,11 @@ const createSync = (App, options = import_options.default, optionsExternalFile)
       define,
       registry,
       emotion,
-      //routerOptions,
-      document: doc
+      // routerOptions,
+      document
     }
-  }, doc.body, key, {
-    //extend: [uikit.Box],
+  }, parent, key, {
+    // extend: [uikit.Box],
     verbose: options.verbose,
     ...options.domqlOptions
   });

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@symbo.ls/create",
-  "version": "2.11.135",
+  "version": "2.11.138",
   "license": "MIT",
-  "gitHead": "dc141236d426b13d6bb17214df425fcf21f7a2fc",
+  "gitHead": "d106932603cf5402acd55e4c03b8163f9beccc5c",
   "files": [
     "src",
     "dist"

package/src/index.js

@@ -31,6 +31,7 @@ export const create = async (App, options = DEFAULT_CREATE_OPTIONS, optionsExter
   if (appIsKey) App = {}
   await fetchSync(key, options)
 
+  if (typeof (document) === 'undefined') window.document = {}
   const doc = options.parent || options.document || document
   const [scratchSystem, emotion, registry] = initEmotion(key, options)
 
@@ -87,7 +88,13 @@ export const createSync = (App, options = DEFAULT_CREATE_OPTIONS, optionsExterna
 
   if (appIsKey) App = {}
 
-  const doc = options.parent || options.document || document
+  // Set parent
+  if (typeof (document) === 'undefined') document = { body: {} }
+  let parent
+  if (options.parent) parent = options.parent
+  else if (options.document) parent = options.document
+  else parent = document.body
+
   const [scratchSystem, emotion, registry] = initEmotion(key, options)
 
   const state = options.state || {}
@@ -97,12 +104,12 @@ export const createSync = (App, options = DEFAULT_CREATE_OPTIONS, optionsExterna
   const snippets = { ...utils, ...utils.scratchUtils, ...(options.snippets || {}) }
   const define = options.define || defaultDefine
 
-  //const routerOptions = initRouter(App, options) // eslint-disable-line
+  // const routerOptions = initRouter(App, options) // eslint-disable-line
   const extend = applySyncDebug([App], options)
 
   const domqlApp = DOM.create({
     extend,
-    //routes: options.pages,
+    // routes: options.pages,
     state,
     context: {
       key,
@@ -115,11 +122,11 @@ export const createSync = (App, options = DEFAULT_CREATE_OPTIONS, optionsExterna
       define,
       registry,
       emotion,
-      //routerOptions,
-      document: doc
+      // routerOptions,
+      document
     }
-  }, doc.body, key, {
-    //extend: [uikit.Box],
+  }, parent, key, {
+    // extend: [uikit.Box],
     verbose: options.verbose,
     ...options.domqlOptions
   })