@symbo.ls/uikit 2.11.154 → 2.11.156

package/dist/index.cjs.js

@@ -12219,7 +12219,7 @@ __export(domql_exports, {
   Br: () => Br,
   Button: () => Button,
   ButtonSet: () => ButtonSet,
-  CancenConfirmButtons: () => CancenConfirmButtons,
+  CancelConfirmButtons: () => CancelConfirmButtons,
   Caption: () => Caption,
   Card: () => Card,
   CardLabel: () => CardLabel,
@@ -12274,8 +12274,8 @@ __export(domql_exports, {
   Headline: () => Headline,
   Hoverable: () => Hoverable,
   Hr: () => Hr,
-  Icon: () => Icon4,
-  IconText: () => IconText3,
+  Icon: () => Icon3,
+  IconText: () => IconText2,
   IconTextWithNotification: () => IconTextWithNotification,
   Iframe: () => Iframe,
   Img: () => Img,
@@ -12291,6 +12291,9 @@ __export(domql_exports, {
   Media: () => Media,
   MessageModal: () => MessageModal,
   Modal: () => Modal,
+  ModalContent: () => ModalContent,
+  ModalFooter: () => ModalFooter,
+  ModalHeader: () => ModalHeader,
   ModalWithTitleParagraph: () => ModalWithTitleParagraph,
   Notification: () => Notification,
   NotificationAlert: () => NotificationAlert,
@@ -15064,7 +15067,7 @@ var KangorooButton = {
   extend: Button,
   childExtend: IconText
 };
-var CancenConfirmButtons = {
+var CancelConfirmButtons = {
   extend: Flex,
   childExtend: Button,
   ...[
@@ -15491,6 +15494,61 @@ var AvatarBundleInfoSet = {
   }
 };
 
+// TextComponents/index.js
+var TitleParagraph = {
+  extend: Flex,
+  title: {
+    tag: "h5",
+    props: { text: "Log in to your account" }
+  },
+  P: {
+    fontSize: "Z",
+    padding: "0",
+    margin: "0",
+    color: "#E0E0E2",
+    text: "Enter your email address and password to log in."
+  },
+  props: {
+    flow: "column",
+    gap: "Y",
+    maxWidth: "fit-content",
+    title: { fontSize: "D" }
+  }
+};
+var ParagraphWithUnderlineButton = {
+  extend: Flex,
+  props: {
+    align: "center flex-start",
+    gap: "Z",
+    fontSize: "Z"
+  },
+  P: {
+    color: "#A3A3A8",
+    margin: "0",
+    text: "Didnt get the code?"
+  },
+  Button: {
+    text: "Click to resend",
+    padding: "0",
+    background: "transparent",
+    color: "#E0E0E2",
+    cursor: "pointer",
+    textDecoration: "underline",
+    fontWeight: "500"
+  }
+};
+var ParagrapUnderlineLinkWithCheckbox = {
+  extend: Flex,
+  Checkbox: {
+    Flex: { boxSize: "A+X" }
+  },
+  ParagraphWithUnderlineButton: {},
+  props: {
+    align: "center flex-start",
+    gap: "X"
+  }
+};
+
 // Dialog/index.js
 var Dialog = {
   props: {
@@ -16436,44 +16494,6 @@ var import_utils8 = __toESM(require_cjs2());
 // Modal/node_modules/@symbo.ls/atoms/Position.js
 var import_scratch15 = __toESM(require_cjs6());
 
-// Modal/node_modules/@symbo.ls/atoms/Svg.js
-var Svg2 = {
-  tag: "svg",
-  props: {
-    style: { "*": { fill: "currentColor" } }
-  },
-  attr: {
-    xmlns: "http://www.w3.org/2000/svg",
-    "xmlns:xlink": "http://www.w3.org/1999/xlink"
-  },
-  html: ({ key, props: props6, context, ...el }) => {
-    const { designSystem, utils } = context;
-    const SVG = designSystem && designSystem.SVG;
-    const useSvgSprite = props6.spriteId || context.designSystem && context.designSystem.useSvgSprite;
-    const useSVGSymbol = (icon) => `<use xlink:href="#${icon}" />`;
-    const init = utils && utils.init;
-    if (!useSvgSprite && props6.src)
-      return props6.src;
-    const spriteId = props6.spriteId;
-    if (spriteId)
-      return useSVGSymbol(spriteId);
-    const symbolId = Symbol.for(props6.src);
-    let SVGKey = SVG[symbolId];
-    if (SVGKey && SVG[SVGKey])
-      return useSVGSymbol(SVGKey);
-    SVGKey = SVG[symbolId] = Math.random();
-    if (props6.src) {
-      init({
-        svg: { [SVGKey]: props6.src }
-      }, {
-        document: context.document,
-        emotion: context.emotion
-      });
-    }
-    return useSVGSymbol(SVGKey);
-  }
-};
-
 // Modal/node_modules/@symbo.ls/atoms/Shape/index.js
 var import_utils9 = __toESM(require_cjs2());
 var import_scratch16 = __toESM(require_cjs6());
@@ -16609,61 +16629,6 @@ var emotion2 = createEmotion6();
 // Modal/node_modules/@symbo.ls/atoms/Animation.js
 var { keyframes: keyframes2 } = emotion2;
 
-// TextComponents/index.js
-var TitleParagraph = {
-  extend: Flex,
-  title: {
-    tag: "h5",
-    props: { text: "Log in to your account" }
-  },
-  P: {
-    fontSize: "Z",
-    padding: "0",
-    margin: "0",
-    color: "#E0E0E2",
-    text: "Enter your email address and password to log in."
-  },
-  props: {
-    flow: "column",
-    gap: "Y",
-    maxWidth: "fit-content",
-    title: { fontSize: "D" }
-  }
-};
-var ParagraphWithUnderlineButton = {
-  extend: Flex,
-  props: {
-    align: "center flex-start",
-    gap: "Z",
-    fontSize: "Z"
-  },
-  P: {
-    color: "#A3A3A8",
-    margin: "0",
-    text: "Didnt get the code?"
-  },
-  Button: {
-    text: "Click to resend",
-    padding: "0",
-    background: "transparent",
-    color: "#E0E0E2",
-    cursor: "pointer",
-    textDecoration: "underline",
-    fontWeight: "500"
-  }
-};
-var ParagrapUnderlineLinkWithCheckbox = {
-  extend: Flex,
-  Checkbox: {
-    Flex: { boxSize: "A+X" }
-  },
-  ParagraphWithUnderlineButton: {},
-  props: {
-    align: "center flex-start",
-    gap: "X"
-  }
-};
-
 // Field/node_modules/@symbo.ls/atoms/Block.js
 var import_scratch19 = __toESM(require_cjs());
 
@@ -16985,126 +16950,77 @@ var CodeField = {
 };
 var FieldWithTitle = {
   extend: Flex3,
-  title: { tag: "h6", props: { text: "Old password" } },
-  field: { extend: CustomizedField },
   props: {
     flow: "column",
-    gap: "Y",
-    title: {
+    gap: "Y"
+  },
+  Title: {
+    tag: "h6",
+    props: {
+      text: "Old password",
       fontSize: "Z",
       color: "#CFCFD1",
       fontWeight: "400"
-    },
-    subTitle: {
-      fontSize: "Z",
-      gap: "X+V",
-      padding: "X - - -",
-      icon: { boxSize: "Z+X Z+X" }
     }
+  },
+  CustomizedField: {
+    fontSize: "Z",
+    gap: "X+V",
+    padding: "X - - -",
+    icon: { boxSize: "Z+X Z+X" }
   }
 };
 
-// Modal/node_modules/@symbo.ls/icon/index.js
-var Icon3 = {
-  extend: Svg2,
-  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 isArray7 = 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[isArray7[0] + isArray7[1]])
-      validIconName = isArray7[0] + isArray7[1];
-    else if (ICONS[isArray7[0]])
-      validIconName = isArray7[0];
-    else {
-      if (verbose)
-        console.warn("Can't find icon:", iconName, validIconName);
+// Modal/index.js
+var ModalHeader = {
+  extend: Flex2,
+  props: {},
+  title: {
+    props: {
+      fontSize: "B"
     }
-    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" }
+  close: {
+    extend: Button,
+    props: {
+      icon: "x",
+      margin: "- - - auto",
+      background: "transparent",
+      color: "white",
+      fontSize: "D",
+      padding: "0"
+    }
+  }
 };
-var IconText2 = {
+var ModalContent = {
   extend: Flex2,
   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" }
+    flow: "column"
+  }
+};
+var ModalFooter = {
+  extend: Flex2,
+  props: {
+    flow: "column"
   }
 };
-
-// Modal/index.js
 var Modal = {
   extend: Flex2,
-  header: {
-    extend: Flex2,
-    close: {
-      extend: Button,
-      props: { icon: "x" }
-    }
-  },
-  content: { extend: Flex2 },
-  footer: { extend: Flex2 },
   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" }
-  }
+    round: "Z+V"
+  },
+  ModalHeader: {},
+  ModalContent: {},
+  ModalFooter: {}
 };
 var ModalWithTitleParagraph = {
   extend: Modal,
-  header: { heading: { extend: TitleParagraph } },
-  props: {
-    header: {
+  ModalHeader: {
+    props: {},
+    TitleParagraph: {
       alignItems: "flex-start",
       heading: {
         gap: "A",
@@ -17115,26 +17031,14 @@ var ModalWithTitleParagraph = {
 };
 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: {
+    gap: "B"
+  },
+  ModalHeader: {},
+  ModalContent: {
+    props: {
       flow: "column",
       align: "center center",
       gap: "B",
@@ -17143,7 +17047,14 @@ var ResetCompleteModal = {
         title: { fontSize: "B" }
       }
     },
-    footer: {
+    CheckMark: {},
+    TitleParagraph: {
+      title: { text: "Reset complete!" },
+      paragraph: { text: "Your request has been approved!" }
+    }
+  },
+  ModalFooter: {
+    props: {
       minWidth: "100%",
       button: {
         background: "#0474F2",
@@ -17152,42 +17063,63 @@ var ResetCompleteModal = {
         padding: "A -",
         round: "A"
       }
+    },
+    Button: {
+      props: { text: "Done" }
     }
   }
 };
 var MessageModal = {
   extend: Modal,
-  header: {
+  props: {
+    minWidth: "G+E",
+    maxWidth: "G+E"
+  },
+  ModalHeader: {
     title: {
       tag: "h5",
       props: { text: "Message" }
     },
     close: {}
   },
-  content: {
+  ModalContent: {
+    props: {
+      p: { fontSize: "Z" }
+    },
     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" } }
-  }
+  ModalFooter: null
 };
 var ChangePasswordModal = {
   extend: ModalWithTitleParagraph,
-  header: {},
-  content: {
-    childExtend: { extend: FieldWithTitle },
+  props: {
+    minWidth: "H",
+    maxWidth: "H",
+    gap: "B"
+  },
+  ModalHeader: {},
+  ModalContent: {
+    props: {
+      flow: "column",
+      gap: "B",
+      childProps: {
+        field: {
+          width: "100%",
+          input: { type: "password" }
+        }
+      }
+    },
+    childExtend: FieldWithTitle,
     ...[
-      { title: { props: { text: "Old password" } } },
       {
-        title: { props: { text: "New password" } },
-        field: { input: {} },
-        subTitle: {
-          extend: IconText2,
+        Title: { props: { text: "Old password" } }
+      },
+      {
+        Title: { props: { text: "New password" } },
+        CustomizedField: { input: {} },
+        IconText: {
           props: {
             icon: { name: "info" },
             text: "8 character minimum",
@@ -17197,60 +17129,55 @@ var ChangePasswordModal = {
         }
       },
       {
-        title: { props: { text: "Confirm new password" } },
-        field: {
+        Title: { props: { text: "Confirm new password" } },
+        CustomizedField: {
           input: {}
         },
-        subTitle: {
-          extend: IconText2,
-          props: {
-            icon: { name: "info" },
-            text: "8 character minimum",
-            align: "center flex-start",
-            boxSize: "fit-content"
-          }
+        IconText: {
+          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" }
-        }
-      }
+  ModalFooter: {
+    props: {
+      justifyContent: "flex-end"
     },
-    footer: { justifyContent: "flex-end" }
+    CancelConfirmButtons: {
+      ...[{}, { text: "Reset password" }]
+    }
   }
 };
 var VerificationCodeModal = {
   extend: ModalWithTitleParagraph,
-  header: {
+  props: {
+    maxWidth: "G+E",
+    minWidth: "G+E",
+    gap: "B"
+  },
+  ModalHeader: {
+    props: {},
     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 }
+  ModalContent: {
+    props: {
+      gap: "B"
+    },
+    CodeField: {},
+    ParagraphWithUnderlineButton: {}
   },
-  footer: { "CancenConfirmButtons.1": { ...[{}, { text: "Verify" }] } },
-  props: {
-    maxWidth: "G+E",
-    minWidth: "G+E",
-    gap: "B",
-    content: { gap: "B" },
-    footer: {
+  ModalFooter: {
+    props: {
       justifyContent: "flex-end"
+    },
+    CancelConfirmButtons: {
+      ...[{}, { text: "Verify" }]
     }
   }
 };
@@ -17322,12 +17249,11 @@ var ContactForm = {
       },
       message: { extend: TextareaWithTitle }
     },
-    checkParagraph: {
-      extend: ParagrapUnderlineLinkWithCheckbox,
-      checkBox: {},
-      paragraph: {
-        p: { props: { text: "You agree to " } },
-        underlined: { props: { text: "privacy policy" } }
+    ParagrapUnderlineLinkWithCheckbox: {
+      CheckBox: {},
+      ParagraphWithUnderlineButton: {
+        P: { text: "You agree to " },
+        Button: { text: "privacy policy" }
       }
     }
   },
@@ -17387,7 +17313,7 @@ var ContactForm = {
 };
 
 // node_modules/@symbo.ls/icon/index.js
-var Icon4 = {
+var Icon3 = {
   extend: Svg,
   props: ({ key, props: props6, parent, context }) => {
     const { ICONS, useIconSprite, verbose } = context && context.designSystem;
@@ -17428,7 +17354,7 @@ var Icon4 = {
   },
   attr: { viewBox: "0 0 24 24" }
 };
-var IconText3 = {
+var IconText2 = {
   extend: Flex,
   props: {
     align: "center center",
@@ -17436,7 +17362,7 @@ var IconText3 = {
   },
   // TODO: remove this variant
   icon: {
-    extend: Icon4,
+    extend: Icon3,
     if: ({ parent }) => parent.props.icon
   },
   Icon: {
@@ -18583,7 +18509,7 @@ var ConvertCard = {
 var IconTextWithNotification = {
   extend: Flex,
   iconText: {
-    extend: IconText3,
+    extend: IconText2,
     props: {
       icon: { name: "trash" },
       text: "trash"
@@ -18616,7 +18542,7 @@ var IconTextWithNotification = {
 };
 
 // SlideTabs/node_modules/@symbo.ls/icon/index.js
-var Icon5 = {
+var Icon4 = {
   extend: Svg,
   props: ({ key, props: props6, parent, context }) => {
     const { ICONS, useIconSprite, verbose } = context && context.designSystem;
@@ -18657,7 +18583,7 @@ var Icon5 = {
   },
   attr: { viewBox: "0 0 24 24" }
 };
-var IconText4 = {
+var IconText3 = {
   extend: Flex,
   props: {
     align: "center center",
@@ -18665,7 +18591,7 @@ var IconText4 = {
   },
   // TODO: remove this variant
   icon: {
-    extend: Icon5,
+    extend: Icon4,
     if: ({ parent }) => parent.props.icon
   },
   Icon: {
@@ -18683,7 +18609,7 @@ var IconText4 = {
 
 // SlideTabs/node_modules/@symbo.ls/button/index.js
 var Button2 = {
-  extend: [FocusableComponent, IconText4],
+  extend: [FocusableComponent, IconText3],
   tag: "button",
   props: {
     fontSize: "A",
@@ -18702,7 +18628,7 @@ var Button2 = {
     type: ({ props: props6 }) => props6.type
   }
 };
-var CancenConfirmButtons2 = {
+var CancenConfirmButtons = {
   extend: Flex,
   childExtend: Button2,
   ...[