@symbo.ls/uikit 2.11.147 → 2.11.148

package/dist/index.cjs.js

@@ -9276,6 +9276,7 @@ __export(domql_exports, {
   Caption: () => Caption,
   Card: () => Card,
   CardLabel: () => CardLabel,
+  ChangePasswordModal: () => ChangePasswordModal,
   ChatUser: () => ChatUser,
   ChatUserWithButtonSet: () => ChatUserWithButtonSet,
   ChatUserWithNotification: () => ChatUserWithNotification,
@@ -9288,6 +9289,7 @@ __export(domql_exports, {
   Clickable: () => Clickable,
   CodeField: () => CodeField,
   Collection: () => Collection,
+  ContactForm: () => ContactForm,
   ConvertCard: () => ConvertCard,
   CustomizedField: () => CustomizedField,
   DateIndicator: () => DateIndicator,
@@ -9342,6 +9344,7 @@ __export(domql_exports, {
   Media: () => Media,
   MessageModal: () => MessageModal,
   Modal: () => Modal,
+  ModalWithTitleParagraph: () => ModalWithTitleParagraph,
   Notification: () => Notification,
   NotificationAlert: () => NotificationAlert,
   NumberInput: () => NumberInput,
@@ -9377,6 +9380,7 @@ __export(domql_exports, {
   Table: () => Table,
   Text: () => Text,
   Textarea: () => Textarea,
+  TextareaWithTitle: () => TextareaWithTitle,
   Theme: () => Theme,
   TimePicker: () => TimePicker,
   TimePickerItem: () => TimePickerItem,
@@ -9395,6 +9399,7 @@ __export(domql_exports, {
   UploadModalLabel: () => UploadModalLabel,
   UploadProgress: () => UploadProgress,
   UploadResult: () => UploadResult,
+  VerificationCodeModal: () => VerificationCodeModal,
   Video: () => Video,
   XYZ: () => XYZ,
   calendar: () => calendar,
@@ -12118,6 +12123,7 @@ var CancenConfirmButtons = {
   ],
   props: {
     gap: "Y",
+    maxWidth: "fit-content",
     childProps: {
       fontWeight: "500",
       color: "white",
@@ -13427,178 +13433,65 @@ var ToggleSwithWithLabel = {
   FieldLabel: { padding: "Z - - -" }
 };
 
-// node_modules/@symbo.ls/icon/index.js
-var Icon3 = {
-  extend: Svg,
-  props: ({ key, props: props6, parent, context }) => {
-    const { ICONS, useIconSprite, verbose } = context && context.designSystem;
-    const { toCamelCase } = context && context.utils;
-    const iconName = props6.inheritedString || props6.name || props6.icon || key;
-    const camelCase = toCamelCase(iconName);
-    const isArray5 = 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[isArray5[0] + isArray5[1]])
-      validIconName = isArray5[0] + isArray5[1];
-    else if (ICONS[isArray5[0]])
-      validIconName = isArray5[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" }
-};
-var IconText2 = {
+// TextComponents/index.js
+var TitleParagraph = {
   extend: Flex,
-  props: {
-    align: "center center",
-    lineHeight: 1
-  },
-  // TODO: remove this variant
-  icon: {
-    extend: Icon3,
-    if: ({ parent }) => parent.props.icon
-  },
-  Icon: {
-    props: {},
-    if: ({ props: props6 }) => props6.name || props6.icon
+  title: {
+    tag: "h5",
+    props: { text: "Log in to your account" }
   },
-  text: ({ props: props6 }) => props6.text,
-  ".reversed": {
-    props: { flow: "row-reverse" }
+  paragraph: {
+    tag: "p",
+    props: { text: "Enter your email address and password to log in." }
   },
-  ".vertical": {
-    props: { flow: "column" }
+  props: {
+    flow: "column",
+    gap: "Y",
+    maxWidth: "fit-content",
+    title: { fontSize: "D" },
+    paragraph: {
+      fontSize: "Z",
+      padding: "0",
+      margin: "0",
+      color: "#E0E0E2"
+    }
   }
 };
-var FileIcon = {
+var ParagraphWithUnderlineButton = {
   extend: Flex,
-  props: {
-    theme: "tertiary",
-    boxSize: "C1",
-    align: "center center",
-    round: "Z"
+  p: { props: { text: "Didnt get the code?" } },
+  underlined: {
+    extend: Button,
+    props: { text: "Click to resend" }
   },
-  Icon: {
-    fontSize: "B",
-    margin: "auto",
-    icon: "file"
-  }
-};
-
-// Link/index.js
-var import_router = __toESM(require_cjs6());
-var Link = {
-  extend: Focusable,
-  tag: "a",
   props: {
-    aria: {},
-    fontWeight: "bold",
-    textDecoration: "none",
-    color: "currentColor",
-    draggable: false
-  },
-  attr: {
-    href: (el, s, ctx) => {
-      const { exec: exec3 } = ctx.utils;
-      return exec3(el.props.href, el) || exec3(el.props, el).href;
+    align: "center flex-start",
+    gap: "Z",
+    fontSize: "Z",
+    p: {
+      color: "#A3A3A8",
+      margin: "0"
     },
-    target: ({ props: props6 }) => props6.target,
-    "aria-label": ({ props: props6 }) => props6.aria ? props6.aria.label : props6.text,
-    draggable: ({ props: props6 }) => props6.draggable
-  }
-};
-var RouterLink = {
-  on: {
-    click: (event, el, s, ctx) => {
-      const { props: props6 } = el;
-      const { href } = props6;
-      if (!href)
-        return;
-      const { utils, routerOptions } = ctx;
-      const { router } = utils;
-      const root = el.__ref.__root;
-      console.log(href);
-      const linkIsExternal = href.includes("http://") || href.includes("https://") || href.includes("mailto:") || href.includes("tel:");
-      const options = props6.routerOptions || routerOptions || {
-        scrollToOptions: { behaviour: "instant" }
-      };
-      if (href && !linkIsExternal) {
-        (router || import_router.router)(href, root, {}, options);
-        event.preventDefault();
-      }
+    underlined: {
+      padding: "0",
+      background: "transparent",
+      color: "#E0E0E2",
+      cursor: "pointer",
+      textDecoration: "underline",
+      fontWeight: "500"
     }
   }
 };
-var RouteLink = {
-  extend: [Link, RouterLink]
-};
-
-// Input/index.js
-var import_utils7 = __toESM(require_cjs2());
-var Input2 = {
-  extend: [Focusable],
-  tag: "input",
-  deps: { isString: import_utils7.isString, replaceLiteralsWithObjectFields: import_utils7.replaceLiteralsWithObjectFields },
-  props: {
-    border: "none",
-    type: "input",
-    theme: "tertiary",
-    fontSize: "A",
-    round: "C",
-    lineHeight: 1,
-    fontFamily: "smbls",
-    padding: "Z A"
-  },
-  attr: {
-    pattern: ({ props: props6 }) => props6.pattern,
-    minlength: ({ props: props6 }) => props6.minlength,
-    maxlength: ({ props: props6 }) => props6.maxlength,
-    name: ({ props: props6 }) => props6.name,
-    autocomplete: ({ props: props6 }) => props6.autocomplete,
-    placeholder: ({ props: props6 }) => props6.placeholder,
-    value: ({ props: props6, state, deps }) => {
-      const { isString: isString7, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields2 } = deps;
-      if (isString7(props6.value) && props6.value.includes("{{"))
-        return replaceLiteralsWithObjectFields2(props6.value, state);
-      return props6.value;
-    },
-    disabled: ({ props: props6 }) => props6.disabled || null,
-    readonly: ({ props: props6 }) => props6.readonly,
-    required: ({ props: props6 }) => props6.required,
-    type: ({ props: props6 }) => props6.type
-  }
-};
-var NumberInput = {
-  extend: Input2,
+var ParagrapUnderlineLinkWithCheckbox = {
+  extend: Flex,
+  checkBox: { extend: Checkbox },
+  paragraph: { extend: ParagraphWithUnderlineButton },
   props: {
-    type: "number"
-  },
-  attr: {
-    step: ({ props: props6 }) => props6.step,
-    min: ({ props: props6 }) => props6.min,
-    max: ({ props: props6 }) => props6.max
+    align: "center flex-start",
+    gap: "X",
+    checkBox: {
+      Flex: { boxSize: "A+X" }
+    }
   }
 };
 
@@ -13626,7 +13519,7 @@ var Flex2 = {
 var import_scratch11 = __toESM(require_cjs());
 
 // Field/node_modules/@symbo.ls/atoms/Media.js
-var import_utils8 = __toESM(require_cjs2());
+var import_utils7 = __toESM(require_cjs2());
 
 // Field/node_modules/@symbo.ls/atoms/Theme.js
 var import_scratch14 = __toESM(require_cjs());
@@ -13666,13 +13559,13 @@ var Focusable2 = {
 
 // Field/node_modules/@symbo.ls/atoms/Collection.js
 var import_state2 = __toESM(require_cjs5());
-var import_utils9 = __toESM(require_cjs2());
+var import_utils8 = __toESM(require_cjs2());
 
 // Field/node_modules/@symbo.ls/atoms/Position.js
 var import_scratch15 = __toESM(require_cjs());
 
 // Field/node_modules/@symbo.ls/atoms/Shape/index.js
-var import_utils10 = __toESM(require_cjs2());
+var import_utils9 = __toESM(require_cjs2());
 var import_scratch16 = __toESM(require_cjs());
 
 // Field/node_modules/@symbo.ls/atoms/Text.js
@@ -13680,7 +13573,7 @@ var import_scratch17 = __toESM(require_cjs());
 
 // Field/node_modules/@symbo.ls/atoms/Animation.js
 var import_scratch18 = __toESM(require_cjs());
-var import_utils11 = __toESM(require_cjs2());
+var import_utils10 = __toESM(require_cjs2());
 
 // Field/node_modules/@symbo.ls/emotion/index.js
 var createEmotion4 = (key = "smbls", container) => {
@@ -13692,93 +13585,584 @@ var emotion2 = createEmotion4();
 // Field/node_modules/@symbo.ls/atoms/Animation.js
 var { keyframes: keyframes2 } = emotion2;
 
-// Field/index.js
-var Field = {
-  extend: [IconText],
-  props: ({ state, key }) => ({
-    value: state[key],
-    depth: 16,
-    placeholder: "",
-    padding: "A B",
-    round: "C",
-    type: "text",
-    position: "relative",
-    width: "G",
-    appearance: "none",
-    outline: 0,
-    border: "none",
-    cursor: "pointer",
-    fontFamily: "inherit",
-    boxSizing: "border-box",
-    input: {
-      width: "100%",
-      height: "100%",
-      border: "none"
-    },
-    svg: {
-      position: "absolute",
-      right: "A"
-    }
-  }),
-  input: { extend: [Focusable2, Input2] }
-};
-var CustomizedField = {
-  extend: Field,
+// Input/index.js
+var import_utils11 = __toESM(require_cjs2());
+var Input2 = {
+  extend: [Focusable],
+  tag: "input",
+  deps: { isString: import_utils11.isString, replaceLiteralsWithObjectFields: import_utils11.replaceLiteralsWithObjectFields },
   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" }
-    }
+    border: "none",
+    type: "input",
+    theme: "tertiary",
+    fontSize: "A",
+    round: "C",
+    lineHeight: 1,
+    fontFamily: "smbls",
+    padding: "Z A"
+  },
+  attr: {
+    pattern: ({ props: props6 }) => props6.pattern,
+    minlength: ({ props: props6 }) => props6.minlength,
+    maxlength: ({ props: props6 }) => props6.maxlength,
+    name: ({ props: props6 }) => props6.name,
+    autocomplete: ({ props: props6 }) => props6.autocomplete,
+    placeholder: ({ props: props6 }) => props6.placeholder,
+    value: ({ props: props6, state, deps }) => {
+      const { isString: isString7, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields2 } = deps;
+      if (isString7(props6.value) && props6.value.includes("{{"))
+        return replaceLiteralsWithObjectFields2(props6.value, state);
+      return props6.value;
+    },
+    disabled: ({ props: props6 }) => props6.disabled || null,
+    readonly: ({ props: props6 }) => props6.readonly,
+    required: ({ props: props6 }) => props6.required,
+    type: ({ props: props6 }) => props6.type
   }
 };
+var NumberInput = {
+  extend: Input2,
+  props: {
+    type: "number"
+  },
+  attr: {
+    step: ({ props: props6 }) => props6.step,
+    min: ({ props: props6 }) => props6.min,
+    max: ({ props: props6 }) => props6.max
+  }
+};
+
+// Field/index.js
+var Field = {
+  extend: [IconText],
+  props: ({ state, key }) => ({
+    value: state[key],
+    depth: 16,
+    placeholder: "",
+    padding: "A B",
+    round: "C",
+    type: "text",
+    position: "relative",
+    width: "G",
+    appearance: "none",
+    outline: 0,
+    border: "none",
+    cursor: "pointer",
+    fontFamily: "inherit",
+    boxSizing: "border-box",
+    input: {
+      width: "100%",
+      height: "100%",
+      border: "none"
+    },
+    svg: {
+      position: "absolute",
+      right: "A"
+    }
+  }),
+  input: { extend: [Focusable2, Input2] }
+};
+var CustomizedField = {
+  extend: Field,
+  props: {
+    padding: "0",
+    round: "0",
+    input: {
+      background: "transparent",
+      border: "1px solid #3F3F43",
+      round: "Z",
+      minHeight: "C+W",
+      color: "white"
+    }
+  },
+  input: { props: { placeholder: "placeholder" } }
+};
 var CodeField = {
   extend: Flex2,
   childExtend: {
     extend: CustomizedField,
     props: {
-      boxSize: "D D",
+      boxSize: "D+Z D+Z",
       input: {
         type: "number",
         placeholder: "0",
         textAlign: "center",
-        fontSize: "E"
+        fontSize: "E",
+        round: "Y"
+      },
+      style: { "input[type=number]::-webkit-inner-spin-button": { "-webkit-appearance": " none" } }
+    }
+  },
+  ...[{}, {}, {}, {}],
+  props: {
+    align: "center space-between",
+    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",
+      fontWeight: "400"
+    },
+    subTitle: {
+      fontSize: "Z",
+      gap: "X+V",
+      padding: "X - - -",
+      icon: { boxSize: "Z+X Z+X" }
+    }
+  }
+};
+
+// node_modules/@symbo.ls/icon/index.js
+var Icon3 = {
+  extend: Svg,
+  props: ({ key, props: props6, parent, context }) => {
+    const { ICONS, useIconSprite, verbose } = context && context.designSystem;
+    const { toCamelCase } = context && context.utils;
+    const iconName = props6.inheritedString || props6.name || props6.icon || key;
+    const camelCase = toCamelCase(iconName);
+    const isArray5 = 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[isArray5[0] + isArray5[1]])
+      validIconName = isArray5[0] + isArray5[1];
+    else if (ICONS[isArray5[0]])
+      validIconName = isArray5[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" }
+};
+var IconText2 = {
+  extend: Flex,
+  props: {
+    align: "center center",
+    lineHeight: 1
+  },
+  // TODO: remove this variant
+  icon: {
+    extend: Icon3,
+    if: ({ parent }) => parent.props.icon
+  },
+  Icon: {
+    props: {},
+    if: ({ props: props6 }) => props6.name || props6.icon
+  },
+  text: ({ props: props6 }) => props6.text,
+  ".reversed": {
+    props: { flow: "row-reverse" }
+  },
+  ".vertical": {
+    props: { flow: "column" }
+  }
+};
+var FileIcon = {
+  extend: Flex,
+  props: {
+    theme: "tertiary",
+    boxSize: "C1",
+    align: "center center",
+    round: "Z"
+  },
+  Icon: {
+    fontSize: "B",
+    margin: "auto",
+    icon: "file"
+  }
+};
+
+// Modal/index.js
+var Modal = {
+  extend: Flex,
+  header: {
+    extend: Flex,
+    close: {
+      extend: Button,
+      props: { icon: "x" }
+    }
+  },
+  content: { extend: Flex },
+  footer: { extend: Flex },
+  props: {
+    background: "#1C1C1F",
+    padding: "A",
+    flow: "column",
+    round: "Z+V",
+    header: {
+      title: { fontSize: "B" },
+      close: {
+        margin: "- - - auto",
+        background: "transparent",
+        color: "white",
+        fontSize: "D",
+        padding: "0"
+      }
+    },
+    content: { flow: "column" }
+  }
+};
+var ModalWithTitleParagraph = {
+  extend: Modal,
+  header: { heading: { extend: TitleParagraph } },
+  props: {
+    header: {
+      alignItems: "flex-start",
+      heading: {
+        gap: "A",
+        title: { fontSize: "B" }
+      }
+    }
+  }
+};
+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" }
+      }
+    },
+    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" } }
+  }
+};
+var ChangePasswordModal = {
+  extend: ModalWithTitleParagraph,
+  header: {},
+  content: {
+    childExtend: { extend: FieldWithTitle },
+    ...[
+      { title: { props: { text: "Old password" } } },
+      {
+        title: { props: { text: "New password" } },
+        field: { input: {} },
+        subTitle: {
+          extend: IconText2,
+          props: {
+            icon: { name: "info" },
+            text: "8 character minimum",
+            align: "center flex-start",
+            boxSize: "fit-content"
+          }
+        }
+      },
+      {
+        title: { props: { text: "Confirm new password" } },
+        field: {
+          input: {}
+        },
+        subTitle: {
+          extend: IconText2,
+          props: {
+            icon: { name: "info" },
+            text: "8 character minimum",
+            align: "center flex-start",
+            boxSize: "fit-content"
+          }
+        }
+      }
+    ]
+  },
+  footer: { "CancenConfirmButtons.1": { ...[{}, { text: "Reset password" }] } },
+  props: {
+    minWidth: "H",
+    maxWidth: "H",
+    gap: "B",
+    content: {
+      flow: "column",
+      gap: "B",
+      childProps: {
+        field: {
+          width: "100%",
+          input: { type: "password" }
+        }
+      }
+    },
+    footer: { justifyContent: "flex-end" }
+  }
+};
+var VerificationCodeModal = {
+  extend: ModalWithTitleParagraph,
+  header: {
+    heading: {
+      title: { props: { text: "Verify your email" } },
+      paragraph: { props: { text: "Verification code has been sent to you. Enter the code below." } }
+    }
+  },
+  content: {
+    codeField: { extend: CodeField },
+    paragraph: { extend: ParagraphWithUnderlineButton }
+  },
+  footer: { "CancenConfirmButtons.1": { ...[{}, { text: "Verify" }] } },
+  props: {
+    maxWidth: "G+E",
+    minWidth: "G+E",
+    gap: "B",
+    content: { gap: "B" },
+    footer: {
+      justifyContent: "flex-end"
+    }
+  }
+};
+
+// Textarea/index.js
+var Textarea = {
+  extend: [Input2],
+  tag: "textarea",
+  props: {
+    theme: "tertiary",
+    round: "Z2",
+    width: "G1",
+    height: "E1",
+    lineHeight: 1.4
+  }
+};
+var TextareaWithTitle = {
+  extend: Flex,
+  title: { tag: "h5", props: { text: "Message" } },
+  textArea: { extend: Textarea },
+  props: {
+    flow: "column",
+    gap: "Y",
+    title: {
+      fontSize: "Z",
+      color: "#CFCFD1",
+      fontWeight: "400"
+    },
+    textArea: {
+      background: "transparent",
+      border: "1px solid #3F3F43",
+      round: "Z",
+      minHeight: "D",
+      color: "white"
+    }
+  }
+};
+
+// Form/ContactForm.js
+var ContactForm = {
+  extend: ModalWithTitleParagraph,
+  header: {
+    heading: {
+      title: { props: { text: "We\u2019d love to help" } },
+      paragraph: { props: { text: "Reach out and we\u2019ll get in touch within 24 hours." } }
+    }
+  },
+  content: {
+    fields: {
+      extend: Flex,
+      names: {
+        extend: Flex,
+        childExtend: FieldWithTitle,
+        ...[
+          {
+            title: { props: { text: "First name" } },
+            field: { input: { props: { placeholder: "First name" } } }
+          },
+          {
+            title: { props: { text: "Last name" } },
+            field: { input: { props: { placeholder: "Last name" } } }
+          }
+        ]
       },
-      style: { "input[type=number]::-webkit-inner-spin-button": { "-webkit-appearance": " none" } }
+      mail: {
+        extend: FieldWithTitle,
+        title: { props: { text: "Email" } },
+        field: { input: { props: { placeholder: "example@email.com" } } }
+      },
+      message: { extend: TextareaWithTitle }
+    },
+    checkParagraph: {
+      extend: ParagrapUnderlineLinkWithCheckbox,
+      checkBox: {},
+      paragraph: {
+        p: { props: { text: "You agree to " } },
+        underlined: { props: { text: "privacy policy" } }
+      }
+    }
+  },
+  footer: {
+    sendButton: {
+      extend: Button,
+      props: { text: "Send message" }
     }
   },
-  ...[{}, {}, {}, {}],
   props: {
-    align: "center flex-start",
-    gap: "A"
+    padding: "B",
+    minWidth: "H+C",
+    maxWidth: "H+C",
+    header: {
+      heading: {
+        gap: "Y",
+        title: {
+          fontSize: `${24 / 16}em`,
+          fontWeight: "800"
+        }
+      }
+    },
+    content: {
+      padding: "B - A -",
+      fields: {
+        flow: "column",
+        gap: "A",
+        names: {
+          gap: "B+Z",
+          childProps: {
+            width: "50%",
+            field: { width: "100%" }
+          }
+        },
+        mail: { field: { width: "100%" } },
+        message: { textArea: { width: "100%" } }
+      },
+      checkParagraph: {
+        padding: "A - - -",
+        paragraph: {
+          p: { color: "#E0E0E2" },
+          underlined: { fontWeight: "400" }
+        }
+      }
+    },
+    footer: {
+      sendButton: {
+        background: "#0474F2",
+        color: "white",
+        minWidth: "100%",
+        padding: "A -",
+        round: "Z",
+        fontWeight: "500"
+      }
+    }
   }
 };
-var FieldWithTitle = {
-  extend: Flex2,
-  title: {
-    tag: "h6",
-    props: { text: "Old password" }
-  },
-  field: { extend: CustomizedField },
+
+// Link/index.js
+var import_router = __toESM(require_cjs6());
+var Link = {
+  extend: Focusable,
+  tag: "a",
   props: {
-    flow: "column",
-    gap: "Y",
-    title: {
-      fontSize: "Z",
-      color: "#CFCFD1",
-      padding: "- - - Y+W"
+    aria: {},
+    fontWeight: "bold",
+    textDecoration: "none",
+    color: "currentColor",
+    draggable: false
+  },
+  attr: {
+    href: (el, s, ctx) => {
+      const { exec: exec3 } = ctx.utils;
+      return exec3(el.props.href, el) || exec3(el.props, el).href;
+    },
+    target: ({ props: props6 }) => props6.target,
+    "aria-label": ({ props: props6 }) => props6.aria ? props6.aria.label : props6.text,
+    draggable: ({ props: props6 }) => props6.draggable
+  }
+};
+var RouterLink = {
+  on: {
+    click: (event, el, s, ctx) => {
+      const { props: props6 } = el;
+      const { href } = props6;
+      if (!href)
+        return;
+      const { utils, routerOptions } = ctx;
+      const { router } = utils;
+      const root = el.__ref.__root;
+      console.log(href);
+      const linkIsExternal = href.includes("http://") || href.includes("https://") || href.includes("mailto:") || href.includes("tel:");
+      const options = props6.routerOptions || routerOptions || {
+        scrollToOptions: { behaviour: "instant" }
+      };
+      if (href && !linkIsExternal) {
+        (router || import_router.router)(href, root, {}, options);
+        event.preventDefault();
+      }
     }
   }
 };
+var RouteLink = {
+  extend: [Link, RouterLink]
+};
 
 // Video/index.js
 var Video = {
@@ -14116,19 +14500,6 @@ var TooltipParent = {
   }
 };
 
-// Textarea/index.js
-var Textarea = {
-  extend: [Input2],
-  tag: "textarea",
-  props: {
-    theme: "tertiary",
-    round: "Z2",
-    width: "G1",
-    height: "E1",
-    lineHeight: 1.4
-  }
-};
-
 // Upload/UploadResult.js
 var Captions = {
   extend: Flex,
@@ -14894,161 +15265,6 @@ var IconTextWithNotification = {
   }
 };
 
-// TextComponents/index.js
-var TitleParagraph = {
-  extend: Flex,
-  title: {
-    tag: "h5",
-    props: { text: "Log in to your account" }
-  },
-  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" }
-  },
-  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" }
-    }
-  }
-};
-
-// Modal/index.js
-var Modal = {
-  extend: Flex,
-  header: {
-    extend: Flex,
-    close: {
-      extend: Button,
-      props: { icon: "x" }
-    }
-  },
-  content: { extend: Flex },
-  footer: {},
-  props: {
-    background: "#1C1C1F",
-    padding: "A",
-    flow: "column",
-    round: "Z+V",
-    header: {
-      alignItems: "center",
-      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" }
-      }
-    },
-    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" }
-    }
-  }
-};
-
 // SlideTabs/index.js
 var SlideTabs = {
   extend: Flex,