@symbo.ls/uikit 2.11.76 → 2.11.78

package/dist/index.cjs.js

@@ -14246,10 +14246,15 @@ var DialogFooter = {
   childExtend: {
     extend: Button,
     props: {
-      theme: "primary @dark .color-only",
       fontSize: "Z",
       textTransform: "uppercase",
       background: "transparent",
+      "@dark": {
+        theme: "primary @dark .color-only"
+      },
+      "@light": {
+        theme: "primary @light .color-only"
+      },
       "&": {
         padding: "Z A"
       },
@@ -14447,13 +14452,20 @@ var DatePickerMonthsSlider = {
         position: "absolute",
         zIndex: "35",
         background: "transparent",
-        color: "#0079FD",
         ":first-child": { left: "18px" },
         ":last-child": { right: "18px" }
       }
     }
   },
-  Button_left: { icon: "arrowLeft" },
+  Button_left: {
+    icon: "arrowLeft",
+    "@dark": {
+      theme: "primary @dark .color-only"
+    },
+    "@light": {
+      theme: "primary @light .color-only"
+    }
+  },
   Flex: {
     props: {
       flex: "1",
@@ -14497,7 +14509,15 @@ var DatePickerMonthsSlider = {
       ];
     }
   },
-  Button_right: { icon: "arrowRight" }
+  Button_right: {
+    icon: "arrowRight",
+    "@dark": {
+      theme: "primary @dark .color-only"
+    },
+    "@light": {
+      theme: "primary @light .color-only"
+    }
+  }
 };
 
 // Datepicker/weekdays.js
@@ -14878,25 +14898,12 @@ var templateDefault = {
   boxSize: "fit-content fit-content",
   ":hover": { background: "#252527" },
   input: {
+    display: "none",
     ":checked + div": {
-      background: "#0474F2",
+      theme: "primary",
       border: "none"
     },
-    ":checked + div > svg": { opacity: "1" },
-    display: "none"
-  },
-  checkbox: {
-    align: "center center",
-    border: "1px solid #E9E9EA",
-    boxSize: "B B",
-    round: "Y",
-    Icon: {
-      height: "Z Z2",
-      color: "white",
-      name: "check",
-      opacity: "0",
-      transition: "opacity .15s ease"
-    }
+    ":checked + div > svg": { opacity: "1" }
   }
 };
 var Checkbox = {
@@ -14906,11 +14913,34 @@ var Checkbox = {
     attr: {
       type: "checkbox",
       checked: ({ parent }) => parent.props.checked
+    },
+    on: {
+      render: ({ parent, node: node2 }) => {
+        const { indeterminate } = parent.props;
+        console.log(indeterminate);
+        node2.indeterminate = indeterminate;
+      },
+      update: ({ parent, node: node2 }) => {
+        const { indeterminate } = parent.props;
+        console.log(indeterminate);
+        node2.indeterminate = indeterminate;
+      }
     }
   },
-  checkbox: {
-    extend: "Flex",
-    Icon: {}
+  Flex: {
+    props: {
+      align: "center center",
+      border: "1px solid #E9E9EA",
+      boxSize: "B B",
+      round: "Y"
+    },
+    Icon: {
+      height: "Z Z2",
+      color: "white",
+      name: "check",
+      opacity: "0",
+      transition: "opacity .15s ease"
+    }
   }
 };
 var CheckBoxWithLabel = {
@@ -14927,7 +14957,7 @@ var CheckBoxWithLabel = {
 // Form/Radio.js
 var templateDefault2 = {
   input: { ":checked + div > div": { opacity: "1" } },
-  checkbox: {
+  Flex: {
     round: "100%",
     circle: {
       boxSize: "Y2 Y2",
@@ -14942,7 +14972,7 @@ var Radio = {
   extend: Checkbox,
   props: templateDefault2,
   input: { attr: { type: "radio" } },
-  checkbox: {
+  Flex: {
     Icon: null,
     circle: {}
   }
@@ -14962,9 +14992,14 @@ var RadioWithLabel = {
 var templateDefault3 = {
   padding: "Y",
   round: "B",
-  input: { ":checked + div": { justifyContent: "flex-end", background: "#47FF09" } },
+  input: {
+    ":checked + div": {
+      justifyContent: "flex-end",
+      theme: "primary"
+    }
+  },
   ":hover > div": { opacity: "1" },
-  checkbox: {
+  Flex: {
     boxSize: "B C",
     padding: "- W",
     round: "D",
@@ -14977,9 +15012,7 @@ var templateDefault3 = {
       boxSize: "A1 A1",
       round: "100%",
       background: "white",
-      style: {
-        boxShadow: "1px 1px 8px rgba(0, 0, 0, 0.2)"
-      }
+      boxShadow: "1px, 1px, 8px, rgba(0, 0, 0, 0.2)"
     }
   }
 };
@@ -14987,7 +15020,7 @@ var ToggleSwitch = {
   extend: Checkbox,
   props: templateDefault3,
   input: {},
-  checkbox: {
+  Flex: {
     Icon: null,
     circle: {}
   }
@@ -15684,14 +15717,16 @@ var Upload = {
     round: "A",
     cursor: "pointer",
     border: "1.6px, dashed, white 0.1",
-    padding: "B B2"
+    padding: "B B2",
+    Input: {
+      position: "absolute",
+      inset: "0 0 0 0",
+      opacity: "0",
+      visibility: "hidden"
+    }
   },
   Input: {
-    type: "file",
-    position: "absolute",
-    inset: "0 0 0 0",
-    opacity: "0",
-    visibility: "hidden"
+    type: "file"
   },
   Icon: {
     name: "upload",
@@ -15740,15 +15775,23 @@ var Pills = {
   },
   childExtend: {
     props: (el, s) => ({
-      active: parseInt(el.key) === (el.parent.props.active || s.active),
-      theme: "tertiary",
+      active: parseInt(el.key) === parseInt(s.active || el.parent.props.active),
       boxSize: "Y2",
       round: "A",
+      "!active": {
+        theme: "tertiary"
+      },
       ".active": {
         theme: "primary"
       }
-    })
-  }
+    }),
+    on: {
+      click: (e, el, s) => {
+        s.update({ active: parseInt(el.key) });
+      }
+    }
+  },
+  $setCollection: ({ props: props7, state }) => new Array(props7.qty).fill({})
 };
 
 // Select/index.js