@symbo.ls/uikit 2.11.189 → 2.11.194

package/dist/index.cjs.js

@@ -9427,6 +9427,7 @@ __export(domql_exports, {
   UnitValueWithTitle: () => UnitValueWithTitle,
   UploadButton: () => UploadButton,
   UploadButtonWithIcon: () => UploadButtonWithIcon,
+  UploadIcon: () => UploadIcon,
   UploadImage: () => UploadImage,
   UploadLabel: () => UploadLabel,
   UploadLabel2: () => UploadLabel2,
@@ -12534,7 +12535,7 @@ var Input = {
   props: {
     border: "none",
     type: "input",
-    // theme: 'tertiary',
+    theme: "tertiary",
     fontSize: "A",
     round: "C",
     lineHeight: 1,
@@ -12692,17 +12693,31 @@ var Textarea = {
   tag: "textarea",
   extend: [Input, Flex],
   props: {
-    border: "1px solid #3F3F43",
-    background: "transparent",
-    round: "Y+W",
-    width: "G1",
-    height: "D2+W",
-    lineHeight: 1.4,
-    placeholder: "Leave us a message...",
-    fontSize: "Y2",
-    outline: "none !important",
-    color: "white",
-    style: { resize: "none" }
+    variant: "outlined"
+  },
+  ".simple": {
+    props: {
+      theme: "tertiary",
+      round: "Z2",
+      width: "G1",
+      height: "E1",
+      lineHeight: 1.4
+    }
+  },
+  ".outlined": {
+    props: {
+      border: "1px solid #3F3F43",
+      background: "transparent",
+      round: "Y+W",
+      width: "G1",
+      height: "D2+W",
+      lineHeight: 1.4,
+      placeholder: "Leave us a message...",
+      fontSize: "Y2",
+      outline: "none !important",
+      color: "white",
+      resize: "none"
+    }
   }
 };
 var TextareaWithTitle = {
@@ -12865,12 +12880,7 @@ var NumberField = {
     minWidth: "D+Y2",
     maxWidth: "D+Y2",
     minHeight: "D+Y2",
-    padding: "0",
-    style: {
-      "input[type=number]::-webkit-inner-spin-button": {
-        "-webkit-appearance": " none"
-      }
-    }
+    padding: "0"
   },
   Input: null,
   NumberInput: {
@@ -12878,10 +12888,12 @@ var NumberField = {
     placeholder: "0",
     boxSize: "100% 100%",
     textAlign: "center",
-    borderRadius: "0",
+    round: "0",
     background: "transparent",
-    outline: "none !important",
-    color: "white"
+    color: "white",
+    "::-webkit-inner-spin-button": {
+      "-webkit-appearance": " none"
+    }
   }
 };
 
@@ -14174,6 +14186,50 @@ var Pracing = {
   }
 };
 
+// Modal/VerificationCode.js
+var VerificationCode = {
+  extend: Modal,
+  props: {
+    maxWidth: "G3",
+    gap: "A2"
+  },
+  Header: {
+    props: { gap: "A" },
+    Title: { h5: { text: "Verify your email" } },
+    Paragraph: { p: { text: "Verification code has been sent to you. Enter the code below." } }
+  },
+  Content: {
+    props: {
+      flow: "column",
+      gap: "A2"
+    },
+    Fields: {
+      extend: Flex,
+      props: {
+        justifyContent: "space-between",
+        flex: "1"
+      },
+      childExtend: NumberField,
+      ...[{}, {}, {}, {}]
+    },
+    ParagraphButton: { extend: ParagraphButton }
+  },
+  Footer: {
+    props: {
+      justifyContent: "flex-end",
+      padding: "Y2 - - -"
+    },
+    Buttons: {
+      extend: CancelConfirmButtons,
+      props: { childProps: { ":first-child": { border: "none" } } },
+      ...[
+        {},
+        { Caption: { text: "Verify" } }
+      ]
+    }
+  }
+};
+
 // List/List.js
 var List = {
   props: {
@@ -15036,6 +15092,137 @@ var TimePickerItem = {
   Button_minus: { icon: "minus" }
 };
 
+// TimePicker/node_modules/@symbo.ls/icon/index.js
+var Icon2 = {
+  extend: Svg,
+  props: ({ key, props: props4, parent, context }) => {
+    const { ICONS, useIconSprite, verbose } = context && context.designSystem;
+    const { toCamelCase } = context && context.utils;
+    const iconName = props4.inheritedString || props4.name || props4.icon || key;
+    const camelCase = toCamelCase(iconName);
+    const isArray3 = camelCase.split(/([a-z])([A-Z])/g);
+    let activeIconName;
+    if (props4.active) {
+      activeIconName = props4[".active"].name || props4[".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[isArray3[0] + isArray3[1]])
+      validIconName = isArray3[0] + isArray3[1];
+    else if (ICONS[isArray3[0]])
+      validIconName = isArray3[0];
+    else {
+      if (verbose)
+        console.warn("Can't find icon:", iconName, validIconName);
+    }
+    const iconFromLibrary = ICONS[validIconName];
+    const directSrc = parent && parent.props && parent.props.src || props4.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: Icon2,
+    if: ({ parent }) => parent.props.icon
+  },
+  Icon: {
+    props: {},
+    if: ({ props: props4 }) => props4.name || props4.icon
+  },
+  text: ({ props: props4 }) => props4.text,
+  ".reversed": {
+    props: { flow: "row-reverse" }
+  },
+  ".vertical": {
+    props: { flow: "column" }
+  }
+};
+
+// TimePicker/node_modules/@symbo.ls/button/index.js
+var Button2 = {
+  extend: [FocusableComponent, IconText2],
+  tag: "button",
+  props: {
+    fontSize: "A",
+    type: "button",
+    border: "none",
+    display: "inline-flex",
+    align: "center center",
+    textDecoration: "none",
+    lineHeight: "1",
+    whiteSpace: "nowrap",
+    padding: "Z A1",
+    fontFamily: "inherit",
+    round: "C2"
+  },
+  attr: {
+    type: ({ props: props4 }) => props4.type
+  }
+};
+var CommonButton2 = {
+  extend: Button2,
+  props: {
+    color: "white",
+    background: "blue",
+    boxSize: "fit-content",
+    padding: "A A2",
+    round: "Z2",
+    gap: "Y2",
+    position: "relative"
+  },
+  icon: {
+    props: { fontSize: "C" }
+  },
+  Caption: {
+    props: {
+      text: "Button",
+      line_height: "1em"
+    }
+  }
+};
+var CancelConfirmButtons2 = {
+  extend: Flex,
+  childExtend: {
+    extend: CommonButton2,
+    props: {
+      minWidth: "D2",
+      ":first-child": {
+        background: "transparent",
+        border: "1px solid #20202B"
+      },
+      ":last-child": {}
+    }
+  },
+  ...[
+    { Caption: { text: "No" } },
+    { Caption: { text: "Yes" } }
+  ],
+  props: {
+    gap: "Z",
+    maxWidth: "fit-content"
+  }
+};
+
 // TimePicker/TimeSwitcher.js
 var props3 = {
   boxSize: "C B2",
@@ -15048,7 +15235,7 @@ var TimeSwitcher = {
   props: props3,
   extend: Flex,
   childExtend: {
-    extend: Button,
+    extend: Button2,
     props: ({ state, key }) => ({
       active: state.activeShift === key,
       padding: "0",
@@ -15222,50 +15409,6 @@ var CommonForm = {
   }
 };
 
-// Form/VerificationCode.js
-var VerificationCode = {
-  extend: Modal,
-  props: {
-    maxWidth: "G3",
-    gap: "A2"
-  },
-  Header: {
-    props: { gap: "A" },
-    Title: { h5: { text: "Verify your email" } },
-    Paragraph: { p: { text: "Verification code has been sent to you. Enter the code below." } }
-  },
-  Content: {
-    props: {
-      flow: "column",
-      gap: "A2"
-    },
-    Fields: {
-      extend: Flex,
-      props: {
-        justifyContent: "space-between",
-        flex: "1"
-      },
-      childExtend: NumberField,
-      ...[{}, {}, {}, {}]
-    },
-    ParagraphButton: { extend: ParagraphButton }
-  },
-  Footer: {
-    props: {
-      justifyContent: "flex-end",
-      padding: "Y2 - - -"
-    },
-    Buttons: {
-      extend: CancelConfirmButtons,
-      props: { childProps: { ":first-child": { border: "none" } } },
-      ...[
-        {},
-        { Caption: { text: "Verify" } }
-      ]
-    }
-  }
-};
-
 // Form/ResetPassword.js
 var ResetPassword = {
   extend: Modal,
@@ -15281,29 +15424,25 @@ var ResetPassword = {
   Content: {
     extend: CommonForm,
     props: { gap: "B1" },
-    ...[
-      {
-        Title: { text: "Old password" },
-        Field: {},
-        Hint: null
-      },
-      {
-        Title: { text: "New password" },
-        Field: {},
-        Hint: {
-          Icon: { props: { name: "info" } },
-          text: "8 character minimum"
-        }
-      },
-      {
-        Title: { text: "Confirm new password" },
-        Field: {},
-        Hint: {
-          Icon: { props: { name: "info" } },
-          text: "8 character minimum"
-        }
+    ...[{
+      Title: { text: "Old password" },
+      Field: {},
+      Hint: null
+    }, {
+      Title: { text: "New password" },
+      Field: {},
+      Hint: {
+        Icon: { props: { name: "info" } },
+        text: "8 character minimum"
       }
-    ]
+    }, {
+      Title: { text: "Confirm new password" },
+      Field: {},
+      Hint: {
+        Icon: { props: { name: "info" } },
+        text: "8 character minimum"
+      }
+    }]
   },
   Footer: {
     props: { justifyContent: "flex-end" },
@@ -15601,6 +15740,49 @@ var UploadImage = {
     fontSize: "D"
   }
 };
+var UploadIcon = {
+  extend: [Focusable, Flex],
+  tag: "label",
+  props: {
+    position: "relative",
+    theme: "tertiary",
+    flow: "column",
+    align: "center center",
+    round: "A",
+    cursor: "pointer",
+    border: "1.6px, dashed, white 0.1",
+    padding: "B B2"
+  },
+  Input: {
+    props: {
+      type: "file",
+      position: "absolute",
+      inset: "0 0 0 0",
+      opacity: "0",
+      visibility: "hidden"
+    }
+  },
+  Icon: {
+    props: {
+      name: "upload",
+      fontSize: "B",
+      opacity: ".2"
+    }
+  },
+  P: {
+    props: {
+      text: " or click and upload from your computer",
+      flexFlow: "column",
+      flexAlign: "center center",
+      opacity: ".22",
+      margin: "0"
+    },
+    Span: {
+      text: "Drag and drop your font file",
+      display: "block"
+    }
+  }
+};
 
 // Upload/UploadButton.js
 var UploadButton = {