@symbo.ls/uikit 2.11.143 → 2.11.147

package/dist/index.cjs.js

@@ -4844,6 +4844,7 @@ var require_create = __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);
@@ -4879,20 +4880,18 @@ var require_create = __commonJS({
       if ((0, import_utils14.isFunction)(state)) {
         ref.__state = state;
         return (0, import_utils14.exec)(state, element);
-      }
-      if ((0, import_utils14.is)(state)("string", "number")) {
+      } else if ((0, import_utils14.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) {
@@ -4933,8 +4932,9 @@ var require_create = __commonJS({
       } else {
         Object.setPrototypeOf(state, proto);
       }
-      if (state.parent && state.parent.__children)
+      if (state.parent && state.parent.__children) {
         state.parent.__children[element.key] = state;
+      }
     };
   }
 });
@@ -10001,7 +10001,13 @@ var keySetters = {
     isSubtree ? result : result && result.selector,
     element
   ),
-  "&": (key, props6, result, element, isSubtree) => applyEndProps(
+  "&": (key, props6, result, element, isSubtree) => applyAndProps(
+    key,
+    props6,
+    isSubtree ? result : result && result.selector,
+    element
+  ),
+  ">": (key, props6, result, element, isSubtree) => applyAndProps(
     key,
     props6,
     isSubtree ? result : result && result.selector,
@@ -10077,7 +10083,7 @@ var applyMediaProps = (key, props6, result, element) => {
   result[mediaKey] = generatedClass;
   return result[mediaKey];
 };
-var applyEndProps = (key, props6, result, element) => {
+var applyAndProps = (key, props6, result, element) => {
   result[key] = convertPropsToClass(props6, result, element);
   return result[key];
 };
@@ -10469,14 +10475,15 @@ var Shape = {
 // Atoms/Text.js
 var import_scratch8 = __toESM(require_cjs());
 var Text = {
-  text: ({ key, props: props6, state }) => {
+  deps: { getFontSizeByKey: import_scratch8.getFontSizeByKey, getFontFamily: import_scratch8.getFontFamily },
+  text: ({ key, props: props6, state, deps }) => {
     if (props6.text === true)
       return state && state[key] || props6 && props6[key];
     return props6.text;
   },
   class: {
-    fontSize: ({ props: props6 }) => props6.fontSize ? (0, import_scratch8.getFontSizeByKey)(props6.fontSize) : null,
-    fontFamily: ({ props: props6 }) => props6.fontFamily && { fontFamily: (0, import_scratch8.getFontFamily)(props6.fontFamily) || props6.fontFamily },
+    fontSize: ({ props: props6, deps }) => props6.fontSize ? deps.getFontSizeByKey(props6.fontSize) : null,
+    fontFamily: ({ props: props6, deps }) => props6.fontFamily && { fontFamily: deps.getFontFamily(props6.fontFamily) || props6.fontFamily },
     lineHeight: ({ props: props6 }) => props6.lineHeight && { lineHeight: props6.lineHeight },
     // lineHeight: ({ props }) => props.lineHeight && getSpacingBasedOnRatio(props, 'lineHeight', null, ''),
     textDecoration: ({ props: props6 }) => props6.textDecoration && { textDecoration: props6.textDecoration },
@@ -11971,6 +11978,25 @@ var Circle = {
   }
 };
 
+// InfoSet/index.js
+var InfoSet = {
+  extend: Flex,
+  childExtend: Flex,
+  props: {
+    flow: "column",
+    childProps: {
+      title: {
+        fontSize: "Z",
+        fontWeight: "500"
+      },
+      subTitle: {
+        fontSize: "Y",
+        color: "#A3A3A8"
+      }
+    }
+  }
+};
+
 // Icon/index.js
 var Icon = {
   extend: Svg,
@@ -12227,26 +12253,24 @@ var CheckMark = {
   }
 };
 
-// InfoSet/index.js
-var InfoSet = {
-  extend: Flex,
-  childExtend: Flex,
+// Label/index.js
+var Label = {
+  extend: Button,
   props: {
-    flow: "column",
-    childProps: {
-      title: {
-        fontSize: "Z",
-        fontWeight: "500"
-      },
-      subTitle: {
-        fontSize: "Y",
-        color: "#A3A3A8"
-      }
-    }
+    theme: "tertiary",
+    fontSize: "Z2",
+    emoji: "\u{1F44D}",
+    text: "3",
+    padding: "X2 Z",
+    round: "C",
+    lineHeight: 1,
+    gap: "X2",
+    fontWeight: "500"
+  },
+  emoji: {
+    props: ({ parent }) => ({ text: parent.props.emoji })
   }
 };
-
-// Card/index.js
 var CardLabel = {
   props: {
     text: "-2.902x",
@@ -12257,6 +12281,21 @@ var CardLabel = {
     round: "Y"
   }
 };
+
+// Avatar/index.js
+var Avatar = {
+  extend: Img,
+  props: {
+    display: "block",
+    avatarType: "initials",
+    borderRadius: "100%",
+    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 DropDownWithAvatar = {
   extend: Flex,
   avatar: { extend: Avatar },
@@ -12290,104 +12329,6 @@ var DropDownWithAvatar = {
     }
   }
 };
-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)" }
-    }
-  }
-};
-
-// Avatar/index.js
-var Avatar = {
-  extend: Img,
-  props: {
-    display: "block",
-    avatarType: "initials",
-    borderRadius: "100%",
-    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 },
@@ -12433,6 +12374,7 @@ var AvatarChooser = {
   },
   select: {
     props: {
+      id: "avatar-chooser",
       outline: "none",
       pointerEvents: "all",
       appearance: "none",
@@ -12446,7 +12388,7 @@ var AvatarChooser = {
       margin: "0 0 0 -B1+X",
       padding: "0 A 0 B1+X"
     },
-    attr: { name: "avatar-chooser", id: "avatar-chooser" },
+    attr: { name: "avatar-chooser" },
     childExtend: { tag: "option" },
     $setPropsCollection: ({ parent }) => parent.props.options,
     on: {
@@ -14452,25 +14394,6 @@ var UploadProgress = {
   }
 };
 
-// Label/index.js
-var Label = {
-  extend: Button,
-  props: {
-    theme: "tertiary",
-    fontSize: "Z2",
-    emoji: "\u{1F44D}",
-    text: "3",
-    padding: "X2 Z",
-    round: "C",
-    lineHeight: 1,
-    gap: "X2",
-    fontWeight: "500"
-  },
-  emoji: {
-    props: ({ parent }) => ({ text: parent.props.emoji })
-  }
-};
-
 // Pills/index.js
 var Pills = {
   extend: Flex,
@@ -14850,6 +14773,91 @@ var ChatUserWithNotification = {
   }
 };
 
+// Card/index.js
+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" } }
+  },
+  contentx: {
+    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)" }
+    }
+  }
+};
+
 // IconTextWithNotification/index.js
 var IconTextWithNotification = {
   extend: Flex,