@symbo.ls/uikit 2.11.263 → 2.11.267

package/dist/index.cjs.js

@@ -1570,12 +1570,12 @@ var require_cjs2 = __commonJS({
           isDefined: () => isDefined2,
           isFunction: () => isFunction22,
           isNot: () => isNot2,
-          isNull: () => isNull,
+          isNull: () => isNull2,
           isNumber: () => isNumber3,
           isObject: () => isObject8,
           isObjectLike: () => isObjectLike3,
           isString: () => isString10,
-          isUndefined: () => isUndefined4
+          isUndefined: () => isUndefined22
         });
         module22.exports = __toCommonJS22(types_exports);
         var import_node = require_node2();
@@ -1588,7 +1588,7 @@ var require_cjs2 = __commonJS({
         var isNumber3 = (arg) => typeof arg === "number";
         var isFunction22 = (arg) => typeof arg === "function";
         var isBoolean = (arg) => arg === true || arg === false;
-        var isNull = (arg) => arg === null;
+        var isNull2 = (arg) => arg === null;
         var isArray9 = (arg) => Array.isArray(arg);
         var isDate = (d) => d instanceof Date;
         var isObjectLike3 = (arg) => {
@@ -1597,9 +1597,9 @@ var require_cjs2 = __commonJS({
           return typeof arg === "object";
         };
         var isDefined2 = (arg) => {
-          return isObject8(arg) || isObjectLike3(arg) || isString10(arg) || isNumber3(arg) || isFunction22(arg) || isArray9(arg) || isObjectLike3(arg) || isBoolean(arg) || isDate(arg) || isNull(arg);
+          return isObject8(arg) || isObjectLike3(arg) || isString10(arg) || isNumber3(arg) || isFunction22(arg) || isArray9(arg) || isObjectLike3(arg) || isBoolean(arg) || isDate(arg) || isNull2(arg);
         };
-        var isUndefined4 = (arg) => {
+        var isUndefined22 = (arg) => {
           return arg === void 0;
         };
         var TYPES = {
@@ -1609,7 +1609,7 @@ var require_cjs2 = __commonJS({
           string: isString10,
           date: isDate,
           number: isNumber3,
-          null: isNull,
+          null: isNull2,
           function: isFunction22,
           objectLike: isObjectLike3,
           node: import_node.isNode,
@@ -3429,7 +3429,7 @@ var require_cjs2 = __commonJS({
     var getSequenceValuePropertyPair = (value, propertyName, sequenceProps) => {
       if (typeof value !== "string") {
         console.warn(propertyName, value, "is not a string");
-        return {};
+        return { [propertyName]: value };
       }
       if (value === "-" || value === "")
         return {};
@@ -3942,22 +3942,24 @@ var require_cjs2 = __commonJS({
       else
         return val;
     };
-    var getMediaTheme2 = (val, mod) => {
-      const CONFIG22 = getActiveConfig3();
-      if ((0, import_utils112.isString)(val) && val.slice(0, 2) === "--")
-        val = getMediaTheme2(val.slice(2));
-      if (!val || !(0, import_utils112.isString)(val)) {
-        if (CONFIG22.verbose)
-          console.warn(val, "- theme is not string");
+    var getMediaTheme2 = (value, modifier) => {
+      const activeConfig = getActiveConfig3();
+      if ((0, import_utils112.isString)(value) && value.slice(0, 2) === "--") {
+        value = getMediaTheme2(value.slice(2));
+      }
+      if (!value || !(0, import_utils112.isString)(value)) {
+        if (activeConfig.verbose) {
+          console.warn(`${value} - Theme is not a string`);
+        }
         return;
       }
-      const [name, ...modifier] = (0, import_utils112.isArray)(val) ? val : val.split(" ");
-      let value = CONFIG22.THEME[name];
-      if (value && (modifier || mod)) {
-        value = findModifier(value, modifier.length ? modifier : mod);
+      const [themeName, ...themeModifiers] = (0, import_utils112.isArray)(value) ? value : value.split(" ");
+      let themeValue = activeConfig.THEME[themeName];
+      if (themeValue && (themeModifiers || modifier)) {
+        themeValue = findModifier(themeValue, themeModifiers.length ? themeModifiers : modifier);
       }
-      const r = recursiveTheme(value);
-      return r;
+      const resolvedTheme = recursiveTheme(themeValue);
+      return resolvedTheme;
     };
     var import_utils122 = __toESM2(require_cjs22(), 1);
     var setFont = (val, key) => {
@@ -4531,8 +4533,8 @@ var require_cjs2 = __commonJS({
       return (prop.includes("width") || prop.includes("height")) && !prop.includes("border");
     };
     var transformSize2 = (propertyName, val, props4 = {}, opts = {}) => {
-      let value = val !== void 0 ? val : props4[propertyName];
-      if (value === void 0)
+      let value = val || props4[propertyName];
+      if ((0, import_utils27.isUndefined)(value) && (0, import_utils27.isNull)(value))
         return;
       const shouldScaleBoxSize = props4.scaleBoxSize;
       const isBoxSize = checkIfBoxSize(propertyName);
@@ -5634,12 +5636,11 @@ __export(uikit_exports, {
   CheckStep: () => CheckStep,
   CheckSteps: () => CheckSteps,
   Checkbox: () => Checkbox,
-  CheckboxTitleParagraph: () => CheckboxTitleParagraph,
+  CheckboxHgroup: () => CheckboxHgroup,
   Circle: () => Circle,
   CircleButton: () => CircleButton,
   Clickable: () => Clickable,
   Collection: () => Collection,
-  CommonButton: () => CommonButton,
   CommonField: () => CommonField,
   CommonFieldTemplate: () => CommonFieldTemplate,
   CommonForm: () => CommonForm,
@@ -5664,6 +5665,7 @@ __export(uikit_exports, {
   FieldWithTitleTemplate: () => FieldWithTitleTemplate,
   FileIcon: () => FileIcon,
   Flex: () => Flex,
+  FlexButton: () => FlexButton,
   Focusable: () => Focusable,
   FocusableComponent: () => FocusableComponent,
   Footnote: () => Footnote,
@@ -5681,11 +5683,14 @@ __export(uikit_exports, {
   H5: () => H5,
   H6: () => H6,
   Headline: () => Headline,
+  Hgroup: () => Hgroup,
+  HgroupButton: () => HgroupButton,
+  HgroupRows: () => HgroupRows,
   Hoverable: () => Hoverable,
   Hr: () => Hr,
   I: () => I,
   Icon: () => Icon,
-  IconCommonButton: () => IconCommonButton,
+  IconFlexButton: () => IconFlexButton,
   IconTab: () => IconTab,
   IconText: () => IconText,
   IcontextButton: () => IcontextButton,
@@ -5698,7 +5703,7 @@ __export(uikit_exports, {
   Label: () => Label,
   LabelButton: () => LabelButton,
   LineSteps: () => LineSteps,
-  LineStepsWithTitleParagraph: () => LineStepsWithTitleParagraph,
+  LineStepsWithHgroup: () => LineStepsWithHgroup,
   Link: () => Link,
   List: () => List,
   ListTemplate: () => ListTemplate,
@@ -5728,11 +5733,11 @@ __export(uikit_exports, {
   ProgressLineWithUnitValue: () => ProgressLineWithUnitValue,
   Pseudo: () => Pseudo,
   Radio: () => Radio,
+  RadioHgroup: () => RadioHgroup,
   RadioIndicator: () => RadioIndicator,
   RadioIndicatorWithLabel: () => RadioIndicatorWithLabel,
   RadioStep: () => RadioStep,
   RadioSteps: () => RadioSteps,
-  RadioTitleParagraph: () => RadioTitleParagraph,
   Range: () => Range,
   RangeSlider: () => RangeSlider,
   RangeWithButtons: () => RangeWithButtons,
@@ -5767,11 +5772,8 @@ __export(uikit_exports, {
   TimeSwitcher: () => TimeSwitcher,
   Timing: () => Timing,
   Title: () => Title,
-  TitleParagraph: () => TitleParagraph,
-  TitleParagraphButton: () => TitleParagraphButton,
-  TitleParagraphRows: () => TitleParagraphRows,
   Toggle: () => Toggle,
-  ToggleTitleParagraph: () => ToggleTitleParagraph,
+  ToggleHgroup: () => ToggleHgroup,
   Tooltip: () => Tooltip,
   TooltipHidden: () => TooltipHidden,
   TooltipParent: () => TooltipParent,
@@ -6362,8 +6364,15 @@ var Theme = {
       const globalTheme = deps.getSystemTheme(element);
       if (!props4.theme)
         return;
-      const getMediaTheme2 = deps.getMediaTheme(props4.theme, `@${props4.themeModifier || globalTheme}`);
-      return getMediaTheme2;
+      const hasSubtheme = props4.theme.includes(" ") && !props4.theme.includes("@");
+      const globalThemeForced = `@${props4.themeModifier || globalTheme}`;
+      if (hasSubtheme) {
+        const themeAppliedInVal = props4.theme.split(" ");
+        themeAppliedInVal.splice(1, 0, globalThemeForced);
+        return deps.getMediaTheme(themeAppliedInVal);
+      } else if (props4.theme.includes("@{globalTheme}"))
+        props4.theme.replace("@{globalTheme}", globalThemeForced);
+      return deps.getMediaTheme(props4.theme, `@${props4.themeModifier || globalTheme}`);
     },
     color: (element) => {
       const { props: props4, deps } = element;
@@ -8745,9 +8754,10 @@ var FileIcon = {
 // Indicator/StatusIndicator.js
 var StatusIndicator = {
   props: {
-    boxSize: "Z+V",
-    background: "green2",
+    widthRange: "Z+V",
+    theme: "field",
     round: "100%",
+    aspectRatio: "1/1",
     border: "solid, gray",
     borderWidth: "2px"
   }
@@ -8790,8 +8800,7 @@ var CountIndicator = {
   props: {
     text: "2",
     theme: "primary",
-    boxSize: "A1",
-    minWidth: "fit-content",
+    widthRange: "A1",
     boxSizing: "content-box",
     lineHeight: "1em",
     padding: "X",
@@ -8841,14 +8850,14 @@ var SuccessIndicator = {
   }
 };
 
-// TitleParagraph/index.js
-var TitleParagraph = {
+// Hgroup/index.js
+var Hgroup = {
   extend: Flex,
+  tag: "hgroup",
   props: { flow: "column", gap: "Y" },
   Title: {
     extend: Flex,
     props: {
-      lineHeight: "1em",
       fontWeight: "700",
       alignItems: "center"
     }
@@ -8857,7 +8866,6 @@ var TitleParagraph = {
     extend: Flex,
     props: {
       margin: "0",
-      fontWeight: "400",
       color: "caption",
       "> p": { margin: "0" }
     }
@@ -8877,18 +8885,19 @@ var TitleParagraph = {
   //   })
   // }
 };
-var TitleParagraphRows = {
-  extend: TitleParagraph,
+var HgroupRows = {
+  extend: Hgroup,
   Title: {
     extend: Flex,
-    props: { align: "center space-between" }
+    props: { color: "title", align: "center space-between" }
   },
   Paragraph: {
-    extend: Flex
+    extend: Flex,
+    props: { color: "paragraph", align: "center space-between" }
   }
 };
-var TitleParagraphButton = {
-  extend: TitleParagraphRows,
+var HgroupButton = {
+  extend: HgroupRows,
   Title: {
     props: { justifyContent: "space-between" },
     Span: {},
@@ -8944,7 +8953,6 @@ var List = {
         padding: "Z1 A1",
         position: "relative",
         cursor: "pointer",
-        fontSize: "A1",
         color: "caption",
         ":hover": {
           background: "gray .92 +4"
@@ -9017,7 +9025,6 @@ var ListWithTitle = {
       top: "0",
       zIndex: "3",
       text: "Group name",
-      fontSize: "Z",
       color: "gray .92 +68",
       fontWeight: "400",
       theme: "dialog",
@@ -9267,7 +9274,6 @@ var Field = {
   },
   Input: {
     props: {
-      fontSize: "Z",
       fontWeight: "400",
       padding: "0",
       background: "rgba(0, 0, 0, 0)",
@@ -9298,7 +9304,7 @@ var FieldWithTitle = {
     Hint: {
       color: "gray 1 +64",
       align: "center flex-start",
-      fontSize: "Y",
+      fontSize: "Z2",
       gap: "Y",
       padding: "W Y2 - Y2"
     }
@@ -9306,7 +9312,6 @@ var FieldWithTitle = {
   Title: {
     props: {
       text: "Label",
-      fontSize: "Z",
       lineHeight: "1em",
       color: "title",
       fontWeight: "400",
@@ -9337,24 +9342,24 @@ var FieldWithTitleTemplate = {
 // Field/Search.js
 var Search = {
   extend: Field,
+  tag: "search",
   props: {
     maxWidth: "G3",
     gap: "Z",
     theme: "dialog",
-    padding: "Z+V Z+V2",
-    Icon: {
+    padding: "Z+V Z+V2"
+  },
+  Form: {
+    IconButton: {
       name: "search",
-      fontSize: "C",
       color: "title",
       margin: "V - - -"
-    }
-  },
-  Icon: {},
-  Input: {
-    props: {
-      placeholder: "type a command or search",
-      fontSize: "Z",
-      "::placeholder": { color: "gray 1 +68" }
+    },
+    Input: {
+      props: {
+        placeholder: "type a command or search",
+        "::placeholder": { color: "paragraph" }
+      }
     }
   }
 };
@@ -9363,17 +9368,19 @@ var SearchWithButton = {
   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 = "";
+  Form: {
+    Icon: {},
+    Input: { props: { ":focus ~ button": { opacity: "1" } } },
+    Button: {
+      props: {
+        opacity: "0",
+        icon: "x"
+      },
+      Icon: {
+        on: {
+          click: (e, el) => {
+            el.parent.parent.Input.node.value = "";
+          }
         }
       }
     }
@@ -9409,7 +9416,6 @@ var TextAreaField = {
     tag: "textarea",
     attr: { placeholder: "Leave us a message..." },
     props: {
-      fontSize: "Z",
       minWidth: "H",
       minHeight: "D2+Y1",
       padding: "A",
@@ -9520,7 +9526,7 @@ var GroupListWithSearchTemplate = {
 
 // Banner/index.js
 var Banner = {
-  extend: TitleParagraph,
+  extend: Hgroup,
   props: {
     height: "fit-content",
     padding: "D2+Z D+Y2 D D",
@@ -9582,7 +9588,7 @@ var Banner = {
       }
     },
     Flex: {
-      extend: TitleParagraph,
+      extend: Hgroup,
       props: {
         gap: "A2",
         alignSelf: "flex-end",
@@ -9628,6 +9634,7 @@ var DoubleUnitValue = {
   extend: Flex,
   props: {
     align: "center flex-start",
+    color: "caption",
     gap: "Y"
   },
   UnitValue: {
@@ -9638,11 +9645,10 @@ var DoubleUnitValue = {
     props: {
       boxSize: "W W",
       round: "100%",
-      background: "#A3A3A8"
+      background: "currentColor"
     }
   },
-  UnitValue2: {
-    extend: UnitValue,
+  UnitValue_2: {
     props: { gap: "X+W" },
     Value: { text: "2" },
     Unit: { text: "Second left" }
@@ -9653,18 +9659,16 @@ var UnitValueWithLabel = {
   props: { gap: "Y2" },
   UnitValue: {
     flow: "row-reverse",
-    fontSize: "D1",
     fontWeight: "700",
     Value: { text: "12,759" },
     Unit: { text: "$" }
   },
   dot: null,
-  UnitValue2: {
+  UnitValue_2: {
     props: {
-      theme: "secondary",
+      theme: "field",
       padding: "Z",
       round: "Y1",
-      fontSize: "Y2",
       gap: "0"
     },
     Value: { text: "+8.8" },
@@ -9893,7 +9897,7 @@ var Checkbox = {
     }
   }
 };
-var CheckboxTitleParagraph = {
+var CheckboxHgroup = {
   extend: Flex,
   tag: "label",
   props: {
@@ -9902,7 +9906,7 @@ var CheckboxTitleParagraph = {
     gap: "A"
   },
   Checkbox: { tag: "div" },
-  TitleParagraphRows: {
+  HgroupRows: {
     gap: "Z1",
     margin: "Y - - -"
   }
@@ -9933,8 +9937,8 @@ var Radio = {
     Icon: null
   }
 };
-var RadioTitleParagraph = {
-  extend: CheckboxTitleParagraph,
+var RadioHgroup = {
+  extend: CheckboxHgroup,
   Checkbox: null,
   Radio: {}
 };
@@ -9952,8 +9956,8 @@ var Toggle = {
   },
   Flex: {
     props: {
-      boxSize: "A+X B+Z",
-      padding: "- W",
+      boxSize: "A1 B1",
+      padding: "- W_default",
       round: "D",
       align: "center flex-start",
       theme: "field",
@@ -9970,8 +9974,8 @@ var Toggle = {
     Icon: null
   }
 };
-var ToggleTitleParagraph = {
-  extend: CheckboxTitleParagraph,
+var ToggleHgroup = {
+  extend: CheckboxHgroup,
   Checkbox: null,
   Toggle: {}
 };
@@ -10022,7 +10026,7 @@ var TextareaWithButton = {
     round: "Z2",
     minHeight: "fit-content"
   },
-  IconCommonButton: {
+  IconFlexButton: {
     props: {
       background: "blue",
       Icon: { name: "send" }
@@ -10101,7 +10105,7 @@ var KangorooButton = {
   extend: Button,
   childExtend: IconText
 };
-var CommonButton = {
+var FlexButton = {
   extend: Button,
   props: {
     theme: "primary",
@@ -10114,22 +10118,22 @@ var CommonButton = {
   Icon: {
     props: { fontSize: "B1" }
   },
-  text: "Button"
+  Text: { text: "Button" }
 };
-var IconCommonButton = {
-  extend: CommonButton,
+var IconFlexButton = {
+  extend: FlexButton,
   props: {
     icon: "smile",
     boxSize: "fit-content fit-content",
     padding: "Z2",
     theme: "tertiary"
   },
-  caption: null
+  Text: null
 };
 var ButtonSet = {
   tag: "nav",
   extend: Flex,
-  childExtend: IconCommonButton
+  childExtend: IconFlexButton
 };
 var CancelConfirmButtons = {
   extend: Flex,
@@ -10138,7 +10142,7 @@ var CancelConfirmButtons = {
     maxWidth: "fit-content"
   },
   childExtend: {
-    extend: CommonButton,
+    extend: FlexButton,
     props: {
       ":first-child": {
         theme: "transparent",
@@ -10147,12 +10151,12 @@ var CancelConfirmButtons = {
     }
   },
   ...[
-    { caption: { props: { text: "No" } } },
-    { caption: { props: { text: "Yes" } } }
+    { Text: "No" },
+    { Text: "Yes" }
   ]
 };
 var IcontextButton = {
-  extend: CommonButton,
+  extend: FlexButton,
   props: {
     position: "relative",
     theme: "tertiary",
@@ -10161,7 +10165,7 @@ var IcontextButton = {
   }
 };
 var DropDownButton = {
-  extend: CommonButton,
+  extend: FlexButton,
   props: {
     gap: "X2",
     boxSize: "fit-content fit-content",
@@ -10171,7 +10175,7 @@ var DropDownButton = {
     Icon: {
       fontSize: "D"
     },
-    caption: { text: "All" }
+    Text: { text: "All" }
   }
 };
 var DropDownButtonWithAvatar = {
@@ -10201,12 +10205,12 @@ var PlusMinusButtons = {
     gap: "A"
   },
   Minus: {
-    extend: IconCommonButton,
+    extend: IconFlexButton,
     props: { icon: "minus" }
   },
   Value: { props: { text: "1" } },
   Plus: {
-    extend: IconCommonButton,
+    extend: IconFlexButton,
     props: { icon: "plus" }
   }
 };
@@ -10250,7 +10254,8 @@ var ProgressLineWithUnitValue = {
 // Progress/ProgressCircle.js
 var ProgressCircle = {
   props: {
-    boxSize: "D D",
+    widthRange: "D",
+    aspectRatio: "1 / 1",
     position: "relative",
     ":after": {
       content: '""',
@@ -10311,7 +10316,7 @@ var ProgressCircleWithSideUnitValue = {
   extend: Flex,
   props: {
     align: "center flex-start",
-    boxSize: "fit-content fit-content",
+    boxSize: "fit-content",
     gap: "Y"
   },
   ProgressCircle: {
@@ -10321,7 +10326,7 @@ var ProgressCircleWithSideUnitValue = {
       height: "calc(100% - 5px)"
     }
   },
-  UnitValue: { fontSize: "Y1" }
+  UnitValue: {}
 };
 
 // Range/index.js
@@ -10399,7 +10404,7 @@ var returnPropertyValue = (el, property, def) => {
 var RangeWithButtons = {
   minus: {
     extend: SquareButton,
-    props: { theme: "secondary", icon: "minus" },
+    props: { theme: "field", icon: "minus" },
     on: {
       click: (ev, el, s) => {
         const parentProps = el.parent.props;
@@ -10453,7 +10458,7 @@ var RangeWithButtons = {
   },
   plus: {
     extend: SquareButton,
-    props: { theme: "secondary", icon: "plus" },
+    props: { theme: "field", icon: "plus" },
     on: {
       click: (ev, el, s) => {
         const parentProps = el.parent.props;
@@ -10588,7 +10593,8 @@ var Label = {
   extend: Flex,
   props: {
     text: "-2.902x",
-    fontSize: "X2",
+    fontSize: "Z",
+    theme: "tertiary",
     boxSize: "fit-content fit-content",
     padding: "W2 Y2",
     round: "Y1",
@@ -10615,7 +10621,7 @@ var LabelButton = {
 var CardLabel = {
   props: {
     text: "-2.902x",
-    fontSize: "Y",
+    fontSize: "Z",
     background: "#F4454E",
     boxSize: "fit-content fit-content",
     padding: "W Y",
@@ -10644,9 +10650,10 @@ var AvatarIndicator = {
   },
   Avatar: {},
   StatusIndicator: {
+    theme: "success",
     position: "absolute",
-    bottom: "V",
-    right: "-V"
+    bottom: "0",
+    right: "0"
   }
 };
 
@@ -10656,10 +10663,10 @@ var AvatarBundle = {
   props: {
     childProps: {
       "@light": {
-        border: "X, var(--theme-document-light-background), solid"
+        border: "2px, var(--theme-document-light-background), solid"
       },
       "@dark": {
-        border: "X, var(--theme-document-dark-background), solid"
+        border: "2px, var(--theme-document-dark-background), solid"
       },
       ":not(:last-child)": {
         margin: "0 -Y2 0 0"
@@ -10698,7 +10705,6 @@ var AvatarChooser = {
       height: "100%",
       background: "none",
       color: "currentColor",
-      fontSize: "Z2",
       lineHeight: 1,
       padding: "- B - Y1",
       zIndex: "2",
@@ -10795,6 +10801,7 @@ var import_utils15 = __toESM(require_cjs());
 var Tooltip = {
   extend: Flex,
   props: {
+    theme: "dialog",
     background: "black",
     flow: "column",
     shape: "tooltip",
@@ -10933,21 +10940,21 @@ var Tab = {
     padding: "Z Z1"
   },
   Icon: {},
-  caption: {},
+  Text: "Caption",
   CountIndicator: {
-    fontSize: "Y1",
+    fontSize: "Z1",
     text: "19",
     margin: "- - - X1"
   }
 };
 var IconTab = {
-  extend: IconCommonButton,
+  extend: IconFlexButton,
   Span: null,
   CountIndicator: {
+    fontSize: "Z",
     position: "absolute",
     top: "-Y2",
     right: "-Y2",
-    fontSize: "X",
     text: "19"
   }
 };
@@ -11088,7 +11095,7 @@ var LineSteps = {
     { props: { value: 0 } }
   ]
 };
-var LineStepsWithTitleParagraph = {
+var LineStepsWithHgroup = {
   extend: Flex,
   props: {
     flow: "column",
@@ -11098,7 +11105,7 @@ var LineStepsWithTitleParagraph = {
     boxSize: "fit-content",
     gap: "A1"
   },
-  TitleParagraph: {
+  Hgroup: {
     gap: "Y1",
     Title: {
       text: "Symbols",
@@ -11123,8 +11130,7 @@ var ParagraphButton = {
   extend: Flex,
   props: {
     alignItems: "center",
-    gap: "Y2",
-    fontSize: "Y1"
+    gap: "Y2"
   },
   P: {
     props: {
@@ -11202,7 +11208,6 @@ var DialogFooter = {
   childExtend: {
     extend: Button,
     props: {
-      fontSize: "Z",
       textTransform: "uppercase",
       background: "transparent",
       "@dark": {
@@ -11236,42 +11241,31 @@ var Modal = {
   props: {
     flow: "column",
     boxSize: "fit-content",
+    align: "stretch flex-start",
     minWidth: "G3",
     position: "relative",
-    padding: "Z1 Z2",
+    padding: "Z2 A2",
     round: "A1"
   },
-  Header: {
-    extend: TitleParagraph,
+  ModalHeader: {
+    extend: Hgroup,
     props: {
       minWidth: "100%",
       gap: "A"
     },
     Title: {
       props: { align: "center space-between" },
-      caption: {
-        props: {
-          text: "Title",
-          fontSize: "D",
-          padding: "W2 W2 - W2"
-        }
+      Text: {
+        text: "Title"
       },
-      x: {
-        extend: Button,
-        props: {
-          icon: "x",
-          fontSize: "B2",
-          boxSize: "fit-content",
-          theme: "transparent",
-          padding: "0"
-        }
+      SquareButton_x: {
+        icon: "x",
+        theme: "transparent"
       }
     },
     Paragraph: {
       props: {
-        fontSize: "Z",
-        color: "caption",
-        padding: "- Y"
+        color: "caption"
       }
     }
   }
@@ -11281,36 +11275,32 @@ var Modal = {
 var CompleteProcess = {
   extend: Modal,
   props: {
-    alignItems: "center",
-    gap: "B",
-    padding: "A A A+V A"
+    align: "center",
+    gap: "B"
   },
-  Header: {
+  ModalHeader: {
     Title: {
-      caption: null,
-      x: { props: { margin: "- - - auto" } }
+      Text: null,
+      SquareButton_x: { margin: "- - - auto" }
     },
     Paragraph: null
   },
-  SuccessIndicator: { fontSize: "F2" },
-  TitleParagraph: {
+  SuccessIndicator: { fontSize: "D" },
+  Hgroup: {
     alignItems: "center",
     gap: "Y",
     Title: {
-      text: "Reset complete!",
-      fontSize: "D1"
+      text: "Reset complete!"
     },
     Paragraph: {
-      text: "Your request has been approved!",
-      fontSize: "Z",
-      color: "title"
+      text: "Your request has been approved!"
     }
   },
-  CommonButton: {
+  FlexButton: {
     minWidth: "100%",
     margin: "Y - - -",
-    text: "Done",
-    fontWeight: "500"
+    fontWeight: "500",
+    Text: { text: "Done" }
   }
 };
 
@@ -11318,16 +11308,15 @@ var CompleteProcess = {
 var Message = {
   extend: Modal,
   props: {
-    maxWidth: "G3",
-    padding: "Z1 Z2 Z2 Z2"
+    maxWidth: "G3"
   },
-  Header: {
+  ModalHeader: {
     Title: {
-      caption: {
-        props: { text: "Message", fontSize: "C2" }
+      Text: {
+        text: "Message"
       },
-      x: {
-        props: { padding: "V2" }
+      SquareButton_x: {
+        padding: "V2"
       }
     },
     Paragraph: {
@@ -11348,7 +11337,7 @@ var Pricing = {
     maxWidth: "G+B",
     padding: "A1"
   },
-  Header: null,
+  ModalHeader: null,
   Content: {
     props: {
       flow: "column",
@@ -11376,18 +11365,17 @@ var Pricing = {
       }
     ]
   },
-  Footer: {
+  ModalFooter: {
     props: {
       margin: "- -X -X"
     },
-    CommonButton: {
+    FlexButton: {
       flex: "1",
       padding: "Z2 -",
       round: "Y2",
-      theme: "secondary",
+      theme: "field",
       margin: "- -X -X",
       text: "Add promo code",
-      fontSize: "Z",
       fontWeight: "500"
     }
   }
@@ -11420,7 +11408,7 @@ var TimePickerItem = {
     max: 24,
     placeholder: "00",
     appearance: "textfield",
-    theme: "secondary",
+    theme: "field",
     "::-webkit-inner-spin-button": {
       style: { appearance: "none" },
       margin: 0
@@ -11439,7 +11427,7 @@ var props3 = {
   flow: "column",
   overflow: "hidden",
   round: "Z",
-  theme: "secondary"
+  theme: "field"
 };
 var TimeSwitcher = {
   props: props3,
@@ -11605,15 +11593,13 @@ var CommonForm = {
     boxSizing: "border-box",
     padding: "A+V A"
   },
-  Header: {
+  ModalHeader: {
     props: { gap: "Z" },
     Title: {
-      caption: { props: { padding: "Y W2 - W2" } },
-      x: {
-        props: {
-          margin: "-Y+V - - -",
-          fontSize: "C"
-        }
+      Text: {},
+      SquareButton_x: {
+        margin: "-Y+V - - -",
+        fontSize: "C"
       }
     }
   },
@@ -11798,47 +11784,43 @@ var VerificationCode = {
 var ResetPassword = {
   extend: CommonForm,
   props: { minWidth: "G3+D" },
-  Header: {
+  ModalHeader: {
     Title: { caption: { props: { text: "Choose new password" } } },
     Paragraph: { props: { text: "Almost done. Enter your new password and you\u2019re all set" } }
   },
   Form: {
     Fields: {
-      ...[
-        {
-          Title: { props: { text: "Old password" } },
-          Field: {}
-        },
-        {
-          Title: { props: { text: "New password" } },
-          Field: {},
-          Hint: {
-            extend: IconText,
-            props: {
-              icon: "info",
-              text: "8 character minimum"
-            }
+      ...[{
+        Title: { props: { text: "Old password" } },
+        Field: {}
+      }, {
+        Title: { props: { text: "New password" } },
+        Field: {},
+        Hint: {
+          extend: IconText,
+          props: {
+            icon: "info",
+            text: "8 character minimum"
           }
-        },
-        {
-          Title: { props: { text: "Confirm new password" } },
-          Field: {},
-          Hint: {
-            extend: IconText,
-            props: {
-              icon: "info",
-              text: "8 character minimum"
-            }
+        }
+      }, {
+        Title: { props: { text: "Confirm new password" } },
+        Field: {},
+        Hint: {
+          extend: IconText,
+          props: {
+            icon: "info",
+            text: "8 character minimum"
           }
         }
-      ]
+      }]
     },
     Submit: {
       extend: CancelConfirmButtons,
       props: { justifyContent: "flex-end" },
       ...[
-        { caption: { props: { text: "Cancel" } } },
-        { caption: { props: { text: "Reset password" } } }
+        { Text: "Cancel" },
+        { Text: "Reset password" }
       ]
     }
   }
@@ -11847,8 +11829,8 @@ var ResetPassword = {
 // Form/ContactForm.js
 var ContactForm = {
   extend: CommonForm,
-  Header: {
-    Title: { caption: { props: { text: "We\u2019d love to help" } } },
+  ModalHeader: {
+    Title: { Text: { text: "We\u2019d love to help" } },
     Paragraph: { props: { text: "Reach out and we\u2019ll get in touch within 24 hours." } }
   },
   Form: {
@@ -11881,7 +11863,7 @@ var ContactForm = {
     },
     ParagraphButtonWithCheckbox: { padding: "Z1 Z - Z" },
     Submit: {
-      extend: CommonButton,
+      extend: FlexButton,
       text: "Send message"
     }
   }
@@ -11891,7 +11873,7 @@ var ContactForm = {
 var SignUp = {
   extend: CommonForm,
   props: { minWidth: "H" },
-  Header: {
+  ModalHeader: {
     Title: { caption: { props: { text: "Create your account" } } },
     Paragraph: { props: { text: "Let\u2019s get started with your 30 days free trial" } }
   },
@@ -11935,7 +11917,7 @@ var SignUp = {
       justifyContent: "flex-end"
     },
     Submit: {
-      extend: CommonButton,
+      extend: FlexButton,
       text: "Create an account"
     }
   }
@@ -11945,7 +11927,7 @@ var SignUp = {
 var LogIn = {
   extend: CommonForm,
   props: { minWidth: "G3+C1" },
-  Header: {
+  ModalHeader: {
     Title: { caption: { props: { text: "Log in to your account" } } },
     Paragraph: { props: { text: "Enter your email address and password to log in." } }
   },
@@ -11984,13 +11966,13 @@ var LogIn = {
       }
     },
     Submit: {
-      extend: CommonButton,
+      extend: FlexButton,
       props: { margin: "A - - -" },
       text: "Sign in"
     }
   },
   DoubleHr: {},
-  Footer: {
+  ModalFooter: {
     extend: Flex,
     props: {
       flow: "column",
@@ -12066,16 +12048,13 @@ var UploadIcon = {
 
 // Upload/UploadButton.js
 var UploadButton = {
-  extend: CommonButton,
+  extend: FlexButton,
   props: {
     position: "relative",
-    theme: "transparent",
     padding: "0",
-    color: "#0474F2",
+    theme: "field @{globalTheme} .color-only",
     boxSize: "fit-content fit-content",
-    overflow: "hidden",
-    cursor: "pointer",
-    text: "Choose file"
+    cursor: "pointer"
   },
   Input: {
     type: "file",
@@ -12086,16 +12065,16 @@ var UploadButton = {
     left: "0",
     opacity: "0",
     cursor: "pointer"
-  }
+  },
+  Text: "Browse files"
 };
 var UploadButtonWithBackground = {
   extend: UploadButton,
   props: {
-    fontFamily: "Avenir",
-    theme: "primary",
+    theme: "field",
     padding: "Z2 A1"
   },
-  caption: { props: { text: "Browse files" } }
+  Text: "Browse files"
 };
 
 // Upload/UploadLabel.js
@@ -12114,10 +12093,10 @@ var UploadLabel = {
   },
   Icon: {
     name: "file",
-    fontSize: "I1",
-    color: "#818186"
+    fontSize: "D",
+    theme: "field .color-only"
   },
-  TitleParagraph: {
+  Hgroup: {
     props: {
       align: "center flex-start",
       gap: "Z",
@@ -12130,12 +12109,10 @@ var UploadLabel = {
         fontWeight: "400",
         gap: "Y2",
         align: "center flex-start",
-        fontSize: "Z1",
         color: "title"
       },
       UploadButton: {
         caption: {
-          fontSize: "A1",
           fontWeight: "500"
         }
       }
@@ -12155,7 +12132,7 @@ var UploadLabel2 = {
     gap: "B"
   },
   Icon: {},
-  TitleParagraph: { Title: { UploadButton: null } },
+  Hgroup: { Title: { UploadButton: null } },
   UploadButtonWithBackground: {
     padding: "A C",
     margin: "Z - - -",
@@ -12177,7 +12154,6 @@ var UploadFooter = {
       icon: "info",
       text: "Support",
       gap: "Y",
-      fontSize: "Z",
       fontWeight: "400"
     }
   },
@@ -12189,19 +12165,14 @@ var UploadFooter = {
         ":first-child": {
           theme: "tertiary",
           padding: "- A1"
-        },
-        caption: {
-          fontSize: "Z2",
-          fontWeight: "400",
-          letterSpacing: ".3px"
         }
       }
     },
     ...[
-      { caption: { props: { text: "Cancel" } } },
+      { Text: "Cancel" },
       {
         extend: UploadButtonWithBackground,
-        caption: { props: { text: "Attach file" } }
+        Text: "Attach file"
       }
     ]
   }
@@ -12213,16 +12184,13 @@ var UploadModal = {
     round: "A1",
     padding: "A"
   },
-  Header: {
+  ModalHeader: {
     Title: {
-      caption: {
-        props: {
-          text: "File Upload",
-          fontSize: "C"
-        }
+      Text: {
+        text: "File Upload"
       },
-      x: {
-        props: { margin: "-V2 - - -" }
+      SquareButton_x: {
+        margin: "-V2 - - -"
       }
     },
     Paragraph: null
@@ -12236,18 +12204,18 @@ var UploadModal = {
 };
 var UploadModal2 = {
   extend: UploadModal,
-  Header: {},
+  ModalHeader: {},
   UploadLabel: null,
   UploadLabel2: {
     width: "100%",
     Icon: {},
-    TitleParagraph: {},
+    Hgroup: {},
     UploadButtonWithBackground: { theme: "tertiary" }
   }
 };
 var UploadModal3 = {
   extend: UploadModal2,
-  Header: {},
+  ModalHeader: {},
   UploadLabel2: {},
   UploadFooter: {
     props: { padding: "0" },
@@ -12262,7 +12230,7 @@ var UploadModal3 = {
 };
 var UploadModal4 = {
   extend: UploadModal3,
-  Header: {},
+  ModalHeader: {},
   UploadLabel2: {},
   UploadingProcess4: {
     minWidth: "100%"
@@ -12282,29 +12250,24 @@ var UploadingProcess = {
   },
   Image: { extend: UploadImage },
   Flex: {
-    extend: TitleParagraph,
+    extend: Hgroup,
     props: {
       justifyContent: "space-between",
       padding: "W2 -"
     },
     Title: {
       props: { justifyContent: "space-between" },
-      caption: {
-        props: {
-          text: "Image.jpg",
-          fontSize: "Z2"
-        }
+      Text: {
+        text: "Image.jpg",
+        fontSize: "Z2"
       },
-      x: {
-        extend: Button,
-        props: {
-          icon: "x",
-          fontSize: "B",
-          boxSize: "fit-content",
-          padding: "0",
-          theme: "transparent",
-          margin: "- -V1 - -"
-        }
+      SquareButton_x: {
+        icon: "x",
+        fontSize: "B",
+        boxSize: "fit-content",
+        padding: "0",
+        theme: "transparent",
+        margin: "- -V1 - -"
       }
     },
     Paragraph: {
@@ -12312,7 +12275,7 @@ var UploadingProcess = {
         flow: "column",
         gap: "Y2"
       },
-      DoubleUnitValue: { fontSize: "Y" },
+      DoubleUnitValue: { fontSize: "Z2" },
       ProgressLine: {}
     }
   }
@@ -12327,7 +12290,6 @@ var UploadedProcess = {
       span: {
         props: {
           text: "Done",
-          fontSize: "Y",
           lineHeight: "1em",
           color: "title",
           display: "block"
@@ -12355,7 +12317,7 @@ var UploadingProcess2 = {
     Paragraph: {
       ProgressLineWithUnitValue: {
         ProgressLine: {},
-        UnitValue: { fontSize: "Y1" }
+        UnitValue: { fontSize: "Z1" }
       },
       DoubleUnitValue: null,
       ProgressLine: null
@@ -12393,19 +12355,17 @@ var UploadingProcess3 = {
       gap: "Z"
     },
     Title: {
-      caption: {
-        props: { fontSize: "Z2" }
+      Text: {
+        fontSize: "Z2"
       },
-      x: {
-        props: {
-          position: "absolute",
-          top: "50%",
-          right: "B+W1",
-          transform: "translate(50%, -50%)",
-          padding: "Y",
-          fontSize: "A1",
-          theme: "tertiary"
-        }
+      SquareButton_x: {
+        position: "absolute",
+        top: "50%",
+        right: "B+W1",
+        transform: "translate(50%, -50%)",
+        padding: "Y",
+        fontSize: "A1",
+        theme: "tertiary"
       }
     },
     Paragraph: {
@@ -12459,7 +12419,6 @@ var UploadingProcess4 = {
         text: "Uploading . . .",
         margin: "0",
         padding: "0",
-        fontSize: "Y1",
         color: "title"
       },
       ProgressCircleWithSideUnitValue: null
@@ -12502,12 +12461,10 @@ var User = {
     gap: "Y1",
     align: "center flex-start"
   },
-  Avatar: {
-    extend: AvatarIndicator,
-    Avatar: { props: { boxSize: "C+V" } }
+  AvatarIndicator: {
+    Avatar: { boxSize: "C+V" }
   },
-  Notes: {
-    extend: TitleParagraph,
+  Hgroup: {
     props: {
       justifyContent: "center",
       gap: "W2",
@@ -12515,13 +12472,12 @@ var User = {
     },
     Title: {
       props: {
-        fontSize: "A1",
         fontWeight: "500"
       }
     },
     Paragraph: {
       props: {
-        fontSize: "Z",
+        fontSize: "Z1",
         alignItems: "center"
       }
     }
@@ -12541,7 +12497,8 @@ var ChatUser = {
       time: {
         extend: UnitValue,
         props: {
-          fontSize: "X1",
+          fontSize: "Z1",
+          color: "paragraph",
           gap: "X2"
         },
         Unit: { props: { text: "2:22" } },
@@ -12559,10 +12516,7 @@ var ChatUser = {
           whiteSpace: "nowrap"
         }
       },
-      notification: {
-        extend: CountIndicator,
-        props: { fontSize: "X2" }
-      }
+      CountIndicator: {}
     }
   }
 };
@@ -12581,27 +12535,24 @@ var UserButtonSet = {
   User: {
     padding: "0",
     gap: "Y2",
-    Avatar: { fontSize: "A1" },
+    Avatar: { fontSize: "A" },
     Notes: {
       margin: "W - - -",
       gap: "X2",
       Title: {
-        text: "Group",
-        fontSize: "C1"
+        text: "Group"
       },
       Paragraph: {
-        text: "Active now",
-        fontSize: "Y",
-        padding: "- - - W1"
+        text: "Active now"
       }
     }
   },
   ButtonSet: {
     props: { gap: "Y2" },
     ...[
-      { props: { Icon: { name: "phone" } } },
-      { props: { Icon: { name: "video" } } },
-      { props: { Icon: { name: "moreHorizontal" } } }
+      { props: { icon: "phone" } },
+      { props: { icon: "video" } },
+      { props: { icon: "moreHorizontal" } }
     ]
   }
 };
@@ -12621,10 +12572,10 @@ var UserButtonSetCircle = {
 var UserMessage = {
   extend: User,
   props: { gap: "Z", theme: "transparent" },
-  Avatar: {},
-  Notes: {
-    Title: null,
+  AvatarIndicator: {},
+  Hgroup: {
     props: { margin: "0" },
+    Title: null,
     Paragraph: {
       props: {
         text: "Can you please review the latest design?",
@@ -12658,7 +12609,7 @@ var UserWithLabel = {
       tag: "p",
       props: {
         text: "Short ETH with up to 4x Leverage",
-        fontSize: "Y1"
+        fontSize: "Z1"
       }
     }
   }
@@ -12689,19 +12640,17 @@ var UserWithButton = {
       props: { gap: "X" },
       Title: {
         props: {
-          text: "Wallet ID",
-          fontSize: "Y1"
+          text: "Wallet ID"
         }
       },
       Paragraph: {
         props: {
-          text: "0xfb59...d862",
-          fontSize: "Y1"
+          text: "0xfb59...d862"
         }
       }
     }
   },
-  IconCommonButton: {
+  IconFlexButton: {
     background: "transparent",
     theme: null,
     color: "currentColor",
@@ -12733,7 +12682,7 @@ var Card = {
 
 // Card/BalanceCard.js
 var BalanceCard = {
-  extend: [Card, TitleParagraph],
+  extend: [Card, Hgroup],
   props: {
     theme: "card .secondary",
     gap: "Z2",
@@ -12831,7 +12780,7 @@ var StepCard = {
       boxSize: "E"
     }
   },
-  LineStepsWithTitleParagraph: {
+  LineStepsWithHgroup: {
     position: "absolute",
     left: "0",
     bottom: "0",
@@ -12843,7 +12792,7 @@ var StepCard = {
 
 // Card/ConvertCard.js
 var ConvertCard = {
-  extend: [Card, TitleParagraph],
+  extend: [Card, Hgroup],
   props: {
     minWidth: "G1_default",
     theme: "dialog",
@@ -12862,12 +12811,7 @@ var ConvertCard = {
         text: "From"
       }
     },
-    balance: {
-      extend: UnitValueWithTitle,
-      props: {
-        // border: '1px sol'
-      }
-    }
+    UnitValueWithTitle: {}
   },
   Paragraph: {
     props: {
@@ -12878,43 +12822,14 @@ var ConvertCard = {
     value: {
       props: {
         text: "0.00",
-        fontSize: "E2"
+        fontSize: "C1"
       }
     },
-    dropDownButton: {
-      extend: DropDownButtonWithAvatar,
-      props: {
-        theme: "tertiary",
-        margin: "- -V"
-      }
+    DropDownButtonWithAvatar: {
+      theme: "tertiary",
+      margin: "- -V"
     }
   }
-  // props: {
-  //   boxSize: 'fit-content',
-  //   gap: 'A',
-  //   padding: 'Z2'
-  // },
-  // Title: {
-  //   props: { gap: 'F' },
-  //   caption: {
-  //     props: {
-  //       text: 'From',
-  //       fontSize: 'Z1',
-  //       fontWeight: '400'
-  //     }
-  //   },
-  //   UnitValueWithTitle: { props: { fontWeight: '400' } }
-  // },
-  // Paragraph: {
-  //   props: { align: 'center space-between' },
-  //   Value: {
-  //     props: {
-  //       text: '0.00',
-  //       fontSize: 'E2'
-  //     }
-  //   },
-  //   DropDownButtonWithAvatar: { theme: 'card .child' }
-  // }
 };
 
 // Card/CurrencyConvertCard.js
@@ -12948,13 +12863,13 @@ var CurrencyConvert = {
       props: {
         theme: "tertiary",
         Paragraph: {
-          dropDownButton: { theme: "secondary" }
+          dropDownButton: { theme: "field" }
         }
       }
     },
     ...[{}, {}]
   },
-  CommonButton: {
+  FlexButton: {
     minWidth: "100%",
     margin: "Z - - -",
     text: "convert",