@symbo.ls/uikit 2.11.141 → 2.11.143

package/dist/index.cjs.js

@@ -9256,16 +9256,23 @@ var require_cjs6 = __commonJS({
 // index.js
 var domql_exports = {};
 __export(domql_exports, {
+  AmountWithLabel: () => AmountWithLabel,
   Animation: () => Animation,
   Avatar: () => Avatar,
   AvatarBundle: () => AvatarBundle,
+  AvatarBundleInfoSet: () => AvatarBundleInfoSet,
   AvatarChooser: () => AvatarChooser,
+  AvatarInfoSetWithButton: () => AvatarInfoSetWithButton,
+  AvatarInfoSetWithLabel: () => AvatarInfoSetWithLabel,
   AvatarWithIndicator: () => AvatarWithIndicator,
+  AvatarWithInfoSet: () => AvatarWithInfoSet,
+  BalancesIndicator: () => BalancesIndicator,
   Block: () => Block,
   Box: () => Box,
   Br: () => Br,
   Button: () => Button,
   ButtonSet: () => ButtonSet,
+  CancenConfirmButtons: () => CancenConfirmButtons,
   Caption: () => Caption,
   Card: () => Card,
   CardLabel: () => CardLabel,
@@ -9274,11 +9281,15 @@ __export(domql_exports, {
   ChatUserWithNotification: () => ChatUserWithNotification,
   ChatUserWithUploadedFile: () => ChatUserWithUploadedFile,
   CheckBoxWithLabel: () => CheckBoxWithLabel,
+  CheckMark: () => CheckMark,
   Checkbox: () => Checkbox,
   Circle: () => Circle,
   CircleButton: () => CircleButton,
   Clickable: () => Clickable,
+  CodeField: () => CodeField,
   Collection: () => Collection,
+  ConvertCard: () => ConvertCard,
+  CustomizedField: () => CustomizedField,
   DateIndicator: () => DateIndicator,
   DatePicker: () => DatePicker,
   DatePickerDay: () => DatePickerDay,
@@ -9291,10 +9302,12 @@ __export(domql_exports, {
   Dialog: () => Dialog,
   DialogFooter: () => DialogFooter,
   Direction: () => Direction,
+  DropDownWithAvatar: () => DropDownWithAvatar,
   DropdownList: () => DropdownList,
   DropdownParent: () => DropdownParent,
   Field: () => Field,
   FieldLabel: () => FieldLabel,
+  FieldWithTitle: () => FieldWithTitle,
   FileIcon: () => FileIcon,
   Flex: () => Flex,
   Focusable: () => Focusable,
@@ -9312,8 +9325,9 @@ __export(domql_exports, {
   Headline: () => Headline,
   Hoverable: () => Hoverable,
   Hr: () => Hr,
-  Icon: () => Icon2,
+  Icon: () => Icon3,
   IconText: () => IconText2,
+  IconTextWithNotification: () => IconTextWithNotification,
   Iframe: () => Iframe,
   Img: () => Img,
   IndicatorDot: () => IndicatorDot,
@@ -9326,11 +9340,15 @@ __export(domql_exports, {
   Link: () => Link,
   List: () => List,
   Media: () => Media,
+  MessageModal: () => MessageModal,
+  Modal: () => Modal,
   Notification: () => Notification,
   NotificationAlert: () => NotificationAlert,
   NumberInput: () => NumberInput,
   Overflow: () => Overflow,
   P: () => P,
+  ParagrapUnderlineLinkWithCheckbox: () => ParagrapUnderlineLinkWithCheckbox,
+  ParagraphWithUnderlineButton: () => ParagraphWithUnderlineButton,
   Picture: () => Picture,
   Pills: () => Pills,
   Position: () => Position,
@@ -9340,11 +9358,14 @@ __export(domql_exports, {
   Range: () => Range,
   RangeSlider: () => RangeSlider,
   RangeWithButtons: () => RangeWithButtons,
+  ResetCompleteModal: () => ResetCompleteModal,
   RouteLink: () => RouteLink,
   RouterLink: () => RouterLink,
   Search: () => Search,
   Select: () => Select,
   Shape: () => Shape,
+  SlideTabs: () => SlideTabs,
+  SlideTabsWithTitleParagraph: () => SlideTabsWithTitleParagraph,
   Slider: () => Slider,
   Span: () => Span,
   SquareButton: () => SquareButton,
@@ -9361,6 +9382,7 @@ __export(domql_exports, {
   TimePickerItem: () => TimePickerItem,
   TimeSwitcher: () => TimeSwitcher,
   Timing: () => Timing,
+  TitleParagraph: () => TitleParagraph,
   ToggleSwitch: () => ToggleSwitch,
   ToggleSwithWithLabel: () => ToggleSwithWithLabel,
   Tooltip: () => Tooltip,
@@ -9373,7 +9395,6 @@ __export(domql_exports, {
   UploadModalLabel: () => UploadModalLabel,
   UploadProgress: () => UploadProgress,
   UploadResult: () => UploadResult,
-  User: () => User,
   Video: () => Video,
   XYZ: () => XYZ,
   calendar: () => calendar,
@@ -12062,6 +12083,72 @@ var KangorooButton = {
   extend: Button,
   childExtend: IconText
 };
+var CancenConfirmButtons = {
+  extend: Flex,
+  childExtend: Button,
+  ...[
+    { props: { text: "Cancel" } },
+    { props: { text: "Confirm" } }
+  ],
+  props: {
+    gap: "Y",
+    childProps: {
+      fontWeight: "500",
+      color: "white",
+      padding: "A B+X",
+      ":first-child": {
+        background: "transparent"
+      },
+      ":last-child": {
+        background: "#0474F2",
+        round: "A"
+      }
+    }
+  }
+};
+
+// Accessories/node_modules/@symbo.ls/icon/index.js
+var Icon2 = {
+  extend: Svg,
+  props: ({ key, props: props6, parent, context }) => {
+    const { ICONS, useIconSprite, verbose } = context && context.designSystem;
+    const { toCamelCase } = 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" }
+};
 
 // Accessories/index.js
 var IndicatorDot = {
@@ -12073,16 +12160,28 @@ var IndicatorDot = {
     borderWidth: "1px"
   }
 };
+var BalancesIndicator = {
+  extend: Flex,
+  caption: { props: { text: "Balance:" } },
+  value: { props: { text: "0" } },
+  title: { props: { text: "bnb" } },
+  props: {
+    fontSize: "Z",
+    color: "rgba(163, 163, 168, 1)",
+    gap: "X",
+    title: { textTransform: "uppercase" }
+  }
+};
 var NotificationAlert = {
   span: { props: { text: "2" } },
   props: {
     background: "#0474F2",
     boxSize: "fit-content",
     padding: "- X",
-    round: "Y+V",
+    round: "Z",
+    color: "white",
     span: {
-      fontSize: "Y",
-      color: "white"
+      fontSize: "Y"
     }
   }
 };
@@ -12113,6 +12212,167 @@ var DateIndicator = {
     }
   }
 };
+var CheckMark = {
+  check: {
+    extend: Icon2,
+    props: { name: "check" }
+  },
+  props: {
+    border: "2px solid #04F214",
+    boxSize: "fit-content",
+    color: "#04F214",
+    padding: "Y+V",
+    round: "100%",
+    check: { fontSize: "G" }
+  }
+};
+
+// InfoSet/index.js
+var InfoSet = {
+  extend: Flex,
+  childExtend: Flex,
+  props: {
+    flow: "column",
+    childProps: {
+      title: {
+        fontSize: "Z",
+        fontWeight: "500"
+      },
+      subTitle: {
+        fontSize: "Y",
+        color: "#A3A3A8"
+      }
+    }
+  }
+};
+
+// Card/index.js
+var CardLabel = {
+  props: {
+    text: "-2.902x",
+    fontSize: "Y",
+    background: "#F4454E",
+    boxSize: "fit-content fit-content",
+    padding: "W Y",
+    round: "Y"
+  }
+};
+var DropDownWithAvatar = {
+  extend: Flex,
+  avatar: { extend: Avatar },
+  list: {
+    childExtend: { tag: "H6" },
+    ...[{ props: { text: "eth" } }]
+  },
+  downArrow: {
+    extend: Button,
+    props: { icon: "arrowDown" }
+  },
+  props: {
+    boxSize: "fit-content fit-content",
+    align: "center flex-start",
+    padding: "Y Z",
+    gap: "Z",
+    round: "Z",
+    background: "rgba(28, 28, 31, 1)",
+    avatar: { boxSize: "A+Y" },
+    list: {
+      childProps: {
+        fontSize: "Z",
+        textTransform: "uppercase"
+      }
+    },
+    downArrow: {
+      padding: "0",
+      background: "transparent",
+      color: "white",
+      fontSize: "Y"
+    }
+  }
+};
+var AmountWithLabel = {
+  extend: Flex,
+  amount: { props: { text: "240.59" } },
+  label: {
+    extend: CardLabel,
+    props: { text: "-0.25%" }
+  },
+  props: {
+    align: "center flex-start",
+    gap: "Y+V",
+    amount: {
+      fontSize: `${20 / 16}em`,
+      fontWeight: "700"
+    }
+  }
+};
+var Card = {
+  extend: InfoSet,
+  heading: {
+    title: { props: { text: "Total crypto assets" } },
+    icon: { extend: Icon, props: { name: "arrowUpRight" } }
+  },
+  content: {
+    extend: AmountWithLabel,
+    amount: { props: { text: "$ 12,759" } },
+    label: { props: { text: "+ 8.8%" } }
+  },
+  footer: {
+    subTitle: {
+      extend: Flex,
+      caption: { props: { text: "Last update:" } },
+      span: { props: { text: "an hour ago" } }
+    }
+  },
+  props: {
+    minWidth: "G",
+    maxWidth: "G",
+    padding: "A",
+    round: "Z+V",
+    gap: "Y",
+    style: { background: "linear-gradient(to right, rgba(4, 116, 242, 1), rgba(0, 48, 103, 1))" },
+    childProps: {
+      alignItems: "center",
+      title: { fontWeight: "700" },
+      icon: { fontSize: "C", color: "#A3A3A8" },
+      amount: { fontSize: `${24 / 16}em` },
+      label: { padding: "Y Z", background: "#04040466" },
+      subTitle: {
+        gap: "Y",
+        caption: { color: "rgba(224, 224, 226, 1)" },
+        span: { color: "rgba(233, 233, 234, 1)" }
+      }
+    },
+    heading: { justifyContent: "space-between" },
+    content: { gap: "Y" }
+  }
+};
+var ConvertCard = {
+  extend: Card,
+  heading: {
+    title: { props: { text: "From" } },
+    balance: { extend: BalancesIndicator },
+    icon: null
+  },
+  content: {
+    amount: { props: { text: "0.00" } },
+    label: null,
+    currency: { extend: DropDownWithAvatar },
+    props: { align: "center space-between" }
+  },
+  footer: null,
+  props: {
+    background: "rgba(28, 28, 31, .5)",
+    gap: "A",
+    childProps: {
+      title: {
+        color: "rgba(163, 163, 168, 1)",
+        fontWeight: "400"
+      },
+      amount: { color: "rgba(163, 163, 168, 1)" }
+    }
+  }
+};
 
 // Avatar/index.js
 var Avatar = {
@@ -12153,7 +12413,8 @@ var AvatarBundle = {
         margin: "0 -Y2 0 0"
       }
     }
-  }
+  },
+  ...[{}, {}]
 };
 var AvatarChooser = {
   extend: Button,
@@ -12195,6 +12456,142 @@ var AvatarChooser = {
     }
   }
 };
+var AvatarWithInfoSet = {
+  extend: Flex,
+  avatar: { 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" } }
+      }
+    }
+  }
+};
+var AvatarInfoSetWithLabel = {
+  extend: AvatarWithInfoSet,
+  avatar: { extend: Avatar },
+  infos: {
+    ...[
+      {
+        title: { props: { text: "ETHDOWN" } },
+        label: { extend: CardLabel },
+        subTitle: null,
+        props: { gap: "Z" }
+      },
+      {
+        subTitle: { props: { text: "Short ADA with up to 4x Leverage" } }
+      }
+    ]
+  },
+  props: {
+    avatar: { boxSize: "B" },
+    infos: {
+      gap: "X",
+      childProps: {
+        flow: "row"
+      }
+    }
+  }
+};
+var AvatarInfoSetWithButton = {
+  extend: AvatarWithInfoSet,
+  avatar: { extend: Avatar },
+  infos: {
+    ...[
+      {
+        title: { props: { text: "Wallet ID" } },
+        subTitle: { caption: { props: { text: "0xfb59...d862" } } }
+      },
+      {
+        extend: Button,
+        props: { icon: "copyOutline" }
+      }
+    ]
+  },
+  props: {
+    padding: "Y A Y Y",
+    border: "1px solid #57575C",
+    round: "Z",
+    gap: "Z",
+    avatar: {
+      boxSize: "A+B",
+      round: "Y"
+    },
+    infos: {
+      flow: "row",
+      align: "center flex-start",
+      gap: "A+X",
+      childProps: {
+        title: { fontSize: "Y" },
+        ":nth-child(2)": {
+          padding: "0",
+          color: "white",
+          fontSize: "C",
+          background: "transparent"
+        }
+      }
+    }
+  }
+};
+var AvatarBundleInfoSet = {
+  extend: AvatarWithInfoSet,
+  avatar: { extend: AvatarBundle },
+  infos: {
+    ...[
+      {
+        title: { props: { text: "ETH/BNB" } },
+        label: {
+          extend: CardLabel,
+          props: { text: "1 ETH = 240.7 BNB" }
+        },
+        subTitle: null
+      }
+    ]
+  },
+  props: {
+    gap: "Z",
+    background: "#1C1C1F",
+    padding: "A A",
+    round: "Z",
+    avatar: {
+      childProps: {
+        boxSize: "A+A",
+        ":not(:first-child)": {
+          border: "solid, black 0",
+          borderWidth: "1px"
+        }
+        // style: {
+        //   '&:not(:first-child)': { border: '1px solid rgba(0, 0, 0, 0)' }
+        // }
+      }
+    },
+    infos: {
+      childProps: {
+        flow: "row",
+        gap: "Z",
+        align: "center flex-start",
+        title: { fontWeight: "700" },
+        label: {
+          background: "black",
+          padding: "Y Z"
+        }
+      }
+    }
+  }
+};
 
 // Dialog/index.js
 var Dialog = {
@@ -13089,7 +13486,7 @@ var ToggleSwithWithLabel = {
 };
 
 // node_modules/@symbo.ls/icon/index.js
-var Icon2 = {
+var Icon3 = {
   extend: Svg,
   props: ({ key, props: props6, parent, context }) => {
     const { ICONS, useIconSprite, verbose } = context && context.designSystem;
@@ -13138,7 +13535,7 @@ var IconText2 = {
   },
   // TODO: remove this variant
   icon: {
-    extend: Icon2,
+    extend: Icon3,
     if: ({ parent }) => parent.props.icon
   },
   Icon: {
@@ -13266,6 +13663,23 @@ var NumberInput = {
 // Field/node_modules/@symbo.ls/atoms/Block.js
 var import_scratch10 = __toESM(require_cjs());
 
+// Field/node_modules/@symbo.ls/atoms/Flex.js
+var Flex2 = {
+  props: {
+    display: "flex"
+  },
+  class: {
+    flow: ({ props: props6 }) => props6.flow && { flexFlow: props6.flow },
+    wrap: ({ props: props6 }) => props6.wrap && { flexWrap: props6.wrap },
+    align: ({ props: props6 }) => {
+      if (typeof props6.align !== "string")
+        return;
+      const [alignItems, justifyContent] = props6.align.split(" ");
+      return { alignItems, justifyContent };
+    }
+  }
+};
+
 // Field/node_modules/@symbo.ls/atoms/Grid.js
 var import_scratch11 = __toESM(require_cjs());
 
@@ -13366,6 +13780,63 @@ var Field = {
   }),
   input: { extend: [Focusable2, Input2] }
 };
+var CustomizedField = {
+  extend: Field,
+  props: {
+    background: "transparent",
+    border: "1px solid #3F3F43",
+    padding: "0",
+    minHeight: "C+W",
+    round: "Z",
+    overflow: "hidden",
+    input: {
+      background: "transparent",
+      placeholder: "placeholder",
+      color: "white",
+      fontSize: "Z",
+      round: "0",
+      "::placeholder": { textTransform: "capitalize" }
+    }
+  }
+};
+var CodeField = {
+  extend: Flex2,
+  childExtend: {
+    extend: CustomizedField,
+    props: {
+      boxSize: "D D",
+      input: {
+        type: "number",
+        placeholder: "0",
+        textAlign: "center",
+        fontSize: "E"
+      },
+      style: { "input[type=number]::-webkit-inner-spin-button": { "-webkit-appearance": " none" } }
+    }
+  },
+  ...[{}, {}, {}, {}],
+  props: {
+    align: "center flex-start",
+    gap: "A"
+  }
+};
+var FieldWithTitle = {
+  extend: Flex2,
+  title: {
+    tag: "h6",
+    props: { text: "Old password" }
+  },
+  field: { extend: CustomizedField },
+  props: {
+    flow: "column",
+    gap: "Y",
+    title: {
+      fontSize: "Z",
+      color: "#CFCFD1",
+      padding: "- - - Y+W"
+    }
+  }
+};
 
 // Video/index.js
 var Video = {
@@ -14207,55 +14678,10 @@ var Steps = {
 // Table/index.js
 var Table = {};
 
-// InfoSet/index.js
-var InfoSet = {
-  extend: Flex,
-  childExtend: Flex,
-  props: {
-    flow: "column",
-    childProps: {
-      title: {
-        fontSize: "Z",
-        fontWeight: "500"
-      },
-      subTitle: {
-        fontSize: "Y",
-        color: "#A3A3A8"
-      }
-    }
-  }
-};
-
-// 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" } }
-      }
-    }
-  }
-};
-
 // Chat/index.js
 var ChatUser = {
-  extend: User,
-  image: {},
+  extend: AvatarWithInfoSet,
+  avatar: {},
   infos: {
     ...[
       {
@@ -14270,7 +14696,7 @@ var ChatUser = {
   },
   props: {
     align: "flex-start flex-start",
-    image: { fontSize: "C" },
+    avatar: { fontSize: "C" },
     infos: {
       gap: "Y",
       childProps: {
@@ -14288,7 +14714,7 @@ var ChatUser = {
 };
 var ChatUserWithUploadedFile = {
   extend: ChatUser,
-  image: {},
+  avatar: {},
   infos: {
     ...[
       {},
@@ -14340,8 +14766,8 @@ var ChatUserWithUploadedFile = {
   }
 };
 var ChatUserWithButtonSet = {
-  extend: User,
-  image: {},
+  extend: AvatarWithInfoSet,
+  avatar: {},
   infos: {
     ...[
       {
@@ -14362,7 +14788,7 @@ var ChatUserWithButtonSet = {
     background: "#1C1C1F",
     padding: "A B",
     round: "A",
-    image: { fontSize: `${24 / 16}em` },
+    avatar: { fontSize: `${24 / 16}em` },
     infos: {
       flow: "row",
       gap: "D",
@@ -14391,7 +14817,7 @@ var ChatUserWithButtonSet = {
 };
 var ChatUserWithNotification = {
   extend: ChatUser,
-  image: {},
+  avatar: {},
   infos: {
     ...[
       {
@@ -14424,59 +14850,234 @@ var ChatUserWithNotification = {
   }
 };
 
-// Card/index.js
-var CardLabel = {
+// IconTextWithNotification/index.js
+var IconTextWithNotification = {
+  extend: Flex,
+  iconText: {
+    extend: IconText2,
+    props: {
+      icon: { name: "trash" },
+      text: "trash"
+    }
+  },
+  notification: {
+    extend: NotificationAlert,
+    props: { span: { text: "12" } }
+  },
   props: {
-    text: "-2.902x",
-    fontSize: "Y",
-    background: "#F4454E",
-    boxSize: "fit-content fit-content",
-    padding: "W Y",
-    round: "Y"
+    background: "#252527",
+    minWidth: "F+D",
+    maxWidth: "F+D",
+    round: "Z",
+    align: "center space-between",
+    padding: "Y Z",
+    iconText: {
+      gap: "Z",
+      textTransform: "capitalize",
+      icon: { fontSize: "C" }
+    },
+    notification: {
+      padding: "W Y",
+      background: "white",
+      color: "black",
+      round: "Z+W",
+      span: { fontSize: "A" }
+    }
   }
 };
-var Card = {
-  extend: InfoSet,
-  heading: {
-    title: { props: { text: "Total crypto assets" } },
-    icon: { extend: Icon, props: { name: "arrowUpRight" } }
+
+// TextComponents/index.js
+var TitleParagraph = {
+  extend: Flex,
+  title: {
+    tag: "h5",
+    props: { text: "Log in to your account" }
   },
-  content: {
-    extend: Flex,
-    amount: { props: { text: "$ 12,759" } },
-    percent: {
-      extend: CardLabel,
-      props: { text: "+ 8.8%" }
+  paragraph: {
+    tag: "p",
+    props: { text: "Enter your email address and password to log in." }
+  },
+  props: {
+    flow: "column",
+    gap: "Y",
+    maxWidth: "fit-content",
+    heading: { title: { fontSize: "D" } },
+    paragraph: {
+      fontSize: "Z",
+      padding: "0",
+      margin: "0",
+      color: "#E0E0E2"
     }
+  }
+};
+var ParagraphWithUnderlineButton = {
+  extend: Flex,
+  p: { props: { text: "Didnt get the code?" } },
+  underlined: {
+    extend: Button,
+    props: { text: "Click to reset" }
   },
-  footer: {
-    subTitle: {
-      extend: Flex,
-      caption: { props: { text: "Last update:" } },
-      span: { props: { text: "an hour ago" } }
+  props: {
+    align: "center flex-start",
+    gap: "Z",
+    fontSize: "Z",
+    p: { color: "#A3A3A8" },
+    underlined: {
+      padding: "0",
+      background: "transparent",
+      color: "#E0E0E2",
+      cursor: "pointer",
+      textDecoration: "underline",
+      fontWeight: "500"
+    }
+  }
+};
+var ParagrapUnderlineLinkWithCheckbox = {
+  extend: Flex,
+  checkBox: { extend: Checkbox },
+  paragraph: { extend: ParagraphWithUnderlineButton },
+  props: {
+    align: "center flex-start",
+    gap: "X",
+    checkBox: {
+      Flex: { boxSize: "A+X" }
+    }
+  }
+};
+
+// Modal/index.js
+var Modal = {
+  extend: Flex,
+  header: {
+    extend: Flex,
+    close: {
+      extend: Button,
+      props: { icon: "x" }
     }
   },
+  content: { extend: Flex },
+  footer: {},
   props: {
-    minWidth: "G",
-    maxWidth: "G",
+    background: "#1C1C1F",
     padding: "A",
+    flow: "column",
     round: "Z+V",
-    gap: "Y",
-    style: { background: "linear-gradient(to right, rgba(4, 116, 242, 1), rgba(0, 48, 103, 1))" },
-    childProps: {
+    header: {
       alignItems: "center",
-      title: { fontWeight: "700" },
-      icon: { fontSize: "C", color: "#A3A3A8" },
-      amount: { fontSize: `${24 / 16}em`, fontWeight: "700" },
-      percent: { padding: "Y Z", background: "#04040466" },
-      subTitle: {
-        gap: "Y",
-        caption: { color: "rgba(224, 224, 226, 1)" },
-        span: { color: "rgba(233, 233, 234, 1)" }
+      title: { fontSize: "B" },
+      close: {
+        margin: "- - - auto",
+        background: "transparent",
+        color: "white",
+        fontSize: "D",
+        padding: "0"
+      }
+    }
+  }
+};
+var ResetCompleteModal = {
+  extend: Modal,
+  header: {},
+  content: {
+    icon: { extend: CheckMark },
+    titleParagraph: {
+      extend: TitleParagraph,
+      title: { props: { text: "Reset complete!" } },
+      paragraph: { props: { text: "Your request has been approved!" } }
+    }
+  },
+  footer: {
+    button: {
+      extend: Button,
+      props: { text: "Done" }
+    }
+  },
+  props: {
+    minWidth: "G+E",
+    maxWidth: "G+E",
+    gap: "B",
+    content: {
+      flow: "column",
+      align: "center center",
+      gap: "B",
+      titleParagraph: {
+        align: "center center",
+        title: { fontSize: "B" }
       }
     },
-    heading: { justifyContent: "space-between" },
-    content: { gap: "Y" }
+    footer: {
+      minWidth: "100%",
+      button: {
+        background: "#0474F2",
+        color: "white",
+        minWidth: "100%",
+        padding: "A -",
+        round: "A"
+      }
+    }
+  }
+};
+var MessageModal = {
+  extend: Modal,
+  header: {
+    title: {
+      tag: "h5",
+      props: { text: "Message" }
+    },
+    close: {}
+  },
+  content: {
+    p: {
+      props: { text: "Yes. If you change your mind and no longer wish to keep your iPhone, you have the option to return it to us. The returned iPhone must be in good condition and in the original packaging, which contains all accessories, manuals and instructions. Returns are subject to Apples Sales and Refunds Policy." }
+    }
+  },
+  footer: null,
+  props: {
+    minWidth: "G+E",
+    maxWidth: "G+E",
+    content: {
+      p: { fontSize: "Z" }
+    }
+  }
+};
+
+// SlideTabs/index.js
+var SlideTabs = {
+  extend: Flex,
+  childExtend: Button,
+  ...[{}, {}, {}],
+  props: {
+    align: "center flex-start",
+    maxWidth: "fit-contnet",
+    gap: "Y",
+    childProps: {
+      padding: "0",
+      background: "white",
+      boxSize: "Y E+A",
+      round: "0",
+      ":first-child": { round: "E 0 0 E" },
+      ":last-child": { round: "0 E E 0" }
+    }
+  }
+};
+var SlideTabsWithTitleParagraph = {
+  extend: Flex,
+  heading: {
+    extend: TitleParagraph,
+    heading: { title: { props: { text: "Symbols" } } },
+    paragraph: { props: { text: "The easiest way to build your own website." } }
+  },
+  slides: { extend: SlideTabs },
+  props: {
+    maxWidth: "fit-contnet",
+    flow: "column",
+    gap: "B",
+    padding: "B",
+    background: "#252527",
+    heading: {
+      heading: { title: { fontSize: "C" } },
+      paragraph: { fontSize: "A" }
+    }
   }
 };
 /*! Bundled license information: