@symbo.ls/uikit 2.11.192 → 2.11.194

package/dist/index.cjs.js

@@ -12693,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 = {
@@ -12777,9 +12791,16 @@ var Select = {
 var Field = {
   extend: IconText,
   props: {
+    minWidth: "G",
+    maxWidth: "G",
+    minHeight: "C+X",
     align: "center flex-start",
     gap: "Y+W",
     boxSizing: "border-box",
+    padding: "- Z+W",
+    round: "Y+W",
+    border: "1px solid #3F3F43",
+    overflow: "hidden",
     position: "relative",
     Button: {
       padding: "0",
@@ -12789,18 +12810,15 @@ var Field = {
     }
   },
   Input: {
-    padding: "- Z+W",
-    round: "Y+W",
-    border: "1px solid #3F3F43",
-    minWidth: "G",
-    maxWidth: "100%",
-    minHeight: "C+X",
-    width: "100%",
+    padding: "0",
     background: "transparent",
+    round: "0",
     color: "white",
     fontFamily: "avenir",
     placeholder: "Placeholder",
     flex: "1",
+    minHeight: "100%",
+    outline: "none !important",
     fontWeight: "400"
   }
 };
@@ -14168,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: {
@@ -15030,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",
@@ -15042,7 +15235,7 @@ var TimeSwitcher = {
   props: props3,
   extend: Flex,
   childExtend: {
-    extend: Button,
+    extend: Button2,
     props: ({ state, key }) => ({
       active: state.activeShift === key,
       padding: "0",
@@ -15216,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,