@povio/ui 0.0.7 → 0.0.9

package/dist/assets/icons/Calendar.js

@@ -12,7 +12,7 @@ const CalendarIcon = (props) => /* @__PURE__ */ jsx(
       {
         fill: "currentColor",
         fillRule: "evenodd",
-        d: "M17 2a1 1 0 1 0-2 0v1H9V2a1 1 0 0 0-2 0v1H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3h-2zm3 7V6a1 1 0 0 0-1-1h-2v1a1 1 0 1 1-2 0V5H9v1a1 1 0 0 1-2 0V5H5a1 1 0 0 0-1 1v3zM4 11h16v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z",
+        d: "M16.5 2.91a.905.905 0 0 0-.9-.91c-.497 0-.9.407-.9.91v.908H9.3V2.91A.905.905 0 0 0 8.4 2c-.497 0-.9.407-.9.91v.908H5.7C4.209 3.818 3 5.04 3 6.545v12.728C3 20.779 4.209 22 5.7 22h12.6c1.491 0 2.7-1.221 2.7-2.727V6.545c0-1.506-1.209-2.727-2.7-2.727h-1.8zm2.7 6.363V6.545a.905.905 0 0 0-.9-.909h-1.8v.91c0 .502-.403.909-.9.909a.905.905 0 0 1-.9-.91v-.909H9.3v.91c0 .502-.403.909-.9.909a.905.905 0 0 1-.9-.91v-.909H5.7c-.497 0-.9.407-.9.91v2.727zM4.8 11.09h14.4v8.182c0 .502-.403.909-.9.909H5.7a.905.905 0 0 1-.9-.91z",
         clipRule: "evenodd"
       }
     )

package/dist/assets/icons/CheckCircle.js

@@ -4,14 +4,14 @@ const CheckCircleIcon = (props) => /* @__PURE__ */ jsx(
   {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
-    viewBox: "0 0 25 24",
+    viewBox: "0 0 24 24",
     className: "fill-current",
     ...props,
     children: /* @__PURE__ */ jsx(
       "path",
       {
-        fill: "#16A34A",
-        d: "m11.245 14.146-2.323-2.323a.73.73 0 0 0-.522-.213.7.7 0 0 0-.532.213.72.72 0 0 0-.217.527q0 .31.217.527l2.744 2.744q.27.27.633.271.36 0 .633-.27l5.563-5.564a.73.73 0 0 0 .213-.522.7.7 0 0 0-.213-.532.72.72 0 0 0-.527-.217.72.72 0 0 0-.527.217zm1.42 7.354q-1.97 0-3.704-.748a9.6 9.6 0 0 1-3.017-2.03 9.6 9.6 0 0 1-2.032-3.016 9.25 9.25 0 0 1-.748-3.704q0-1.972.748-3.706a9.6 9.6 0 0 1 2.03-3.016 9.6 9.6 0 0 1 3.016-2.032 9.25 9.25 0 0 1 3.704-.748q1.971 0 3.706.748a9.6 9.6 0 0 1 3.017 2.03 9.6 9.6 0 0 1 2.03 3.016 9.25 9.25 0 0 1 .75 3.704q0 1.972-.749 3.706a9.6 9.6 0 0 1-2.03 3.017 9.6 9.6 0 0 1-3.016 2.03 9.25 9.25 0 0 1-3.704.749"
+        fill: "currentColor",
+        d: "m10.58 14.146-2.322-2.323a.73.73 0 0 0-.522-.213.7.7 0 0 0-.532.213.72.72 0 0 0-.217.527q0 .31.217.527l2.744 2.744q.27.27.633.271.36 0 .633-.27l5.563-5.564a.73.73 0 0 0 .212-.522.7.7 0 0 0-.212-.532.72.72 0 0 0-.527-.217.72.72 0 0 0-.527.217zm1.422 7.354a9.3 9.3 0 0 1-3.706-.748 9.6 9.6 0 0 1-3.016-2.03 9.6 9.6 0 0 1-2.032-3.016 9.25 9.25 0 0 1-.748-3.704q0-1.972.748-3.706a9.6 9.6 0 0 1 2.03-3.016 9.6 9.6 0 0 1 3.016-2.032 9.25 9.25 0 0 1 3.704-.748q1.972 0 3.706.748a9.6 9.6 0 0 1 3.017 2.03 9.6 9.6 0 0 1 2.03 3.016 9.25 9.25 0 0 1 .749 3.704q0 1.972-.748 3.706a9.6 9.6 0 0 1-2.03 3.017 9.6 9.6 0 0 1-3.016 2.03 9.25 9.25 0 0 1-3.704.749"
       }
     )
   }

package/dist/assets/icons/ChevronsLeft.js

@@ -1,5 +1,5 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-const ChevronsLeftIcon = (props) => /* @__PURE__ */ jsxs(
+import { jsx } from "react/jsx-runtime";
+const ChevronsLeftIcon = (props) => /* @__PURE__ */ jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -7,26 +7,15 @@ const ChevronsLeftIcon = (props) => /* @__PURE__ */ jsxs(
     viewBox: "0 0 24 24",
     className: "fill-current",
     ...props,
-    children: [
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M11.451 6.24896C11.783 6.5809 11.783 7.1191 11.451 7.45104L7.05208 11.85L11.451 16.249C11.783 16.5809 11.783 17.1191 11.451 17.451C11.1191 17.783 10.5809 17.783 10.249 17.451L5.24896 12.451C4.91701 12.1191 4.91701 11.5809 5.24896 11.249L10.249 6.24896C10.5809 5.91701 11.1191 5.91701 11.451 6.24896Z",
-          fill: "currentColor"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M18.451 6.24896C18.783 6.5809 18.783 7.1191 18.451 7.45104L14.0521 11.85L18.451 16.249C18.783 16.5809 18.783 17.1191 18.451 17.451C18.1191 17.783 17.5809 17.783 17.249 17.451L12.249 12.451C11.917 12.1191 11.917 11.5809 12.249 11.249L17.249 6.24896C17.5809 5.91701 18.1191 5.91701 18.451 6.24896Z",
-          fill: "currentColor"
-        }
-      )
-    ]
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M11.749 17.749a.857.857 0 0 1-1.212 0l-5.143-5.143a.857.857 0 0 1 0-1.212l5.143-5.143a.857.857 0 0 1 1.212 1.212L7.212 12l4.537 4.537a.857.857 0 0 1 0 1.212M18.749 17.749a.857.857 0 0 1-1.212 0l-5.143-5.143a.857.857 0 0 1 0-1.212l5.143-5.143a.857.857 0 0 1 1.212 1.212L14.212 12l4.537 4.537a.857.857 0 0 1 0 1.212",
+        clipRule: "evenodd"
+      }
+    )
   }
 );
 export {

package/dist/assets/icons/ChevronsRight.js

@@ -1,5 +1,5 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-const ChevronsRightIcon = (props) => /* @__PURE__ */ jsxs(
+import { jsx } from "react/jsx-runtime";
+const ChevronsRightIcon = (props) => /* @__PURE__ */ jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -7,26 +7,15 @@ const ChevronsRightIcon = (props) => /* @__PURE__ */ jsxs(
     viewBox: "0 0 24 24",
     className: "fill-current",
     ...props,
-    children: [
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M12.249 6.24896C12.5809 5.91701 13.1191 5.91701 13.451 6.24896L18.451 11.249C18.783 11.5809 18.783 12.1191 18.451 12.451L13.451 17.451C13.1191 17.783 12.5809 17.783 12.249 17.451C11.917 17.1191 11.917 16.5809 12.249 16.249L16.6479 11.85L12.249 7.45104C11.917 7.1191 11.917 6.5809 12.249 6.24896Z",
-          fill: "currentColor"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M5.24896 6.24896C5.5809 5.91701 6.1191 5.91701 6.45104 6.24896L11.451 11.249C11.783 11.5809 11.783 12.1191 11.451 12.451L6.45104 17.451C6.1191 17.783 5.5809 17.783 5.24896 17.451C4.91701 17.1191 4.91701 16.5809 5.24896 16.249L9.64792 11.85L5.24896 7.45104C4.91701 7.1191 4.91701 6.5809 5.24896 6.24896Z",
-          fill: "currentColor"
-        }
-      )
-    ]
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M12.251 6.251a.857.857 0 0 1 1.212 0l5.143 5.143a.857.857 0 0 1 0 1.212l-5.143 5.143a.857.857 0 1 1-1.212-1.212L16.788 12 12.25 7.463a.857.857 0 0 1 0-1.212M5.251 6.251a.857.857 0 0 1 1.212 0l5.143 5.143a.857.857 0 0 1 0 1.212L6.463 17.75a.857.857 0 1 1-1.212-1.212L9.788 12 5.25 7.463a.857.857 0 0 1 0-1.212",
+        clipRule: "evenodd"
+      }
+    )
   }
 );
 export {

package/dist/assets/icons/DateTime.js

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-const DateTimeIcon = (props) => /* @__PURE__ */ jsx(
+import { jsxs, jsx } from "react/jsx-runtime";
+const DateTimeIcon = (props) => /* @__PURE__ */ jsxs(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -7,17 +7,24 @@ const DateTimeIcon = (props) => /* @__PURE__ */ jsx(
     viewBox: "0 0 24 24",
     className: "fill-current",
     ...props,
-    children: /* @__PURE__ */ jsxs("g", { fill: "currentColor", children: [
-      /* @__PURE__ */ jsx("path", { d: "m18.308 18.852.567-.573-1.518-1.533v-2.291h-.81v2.618zM16.973 21q-1.7 0-2.884-1.186-1.184-1.187-1.184-2.905t1.184-2.904 2.884-1.187q1.68 0 2.853 1.197Q21 15.21 21 16.909t-1.174 2.894T16.973 21" }),
+    children: [
       /* @__PURE__ */ jsx(
         "path",
         {
+          fill: "currentColor",
+          d: "m18.37 18.852.573-.573-1.534-1.533v-2.291h-.818v2.618zM17.02 21q-1.718 0-2.914-1.186-1.197-1.187-1.197-2.905t1.197-2.904 2.914-1.187q1.699 0 2.884 1.197 1.187 1.196 1.187 2.894t-1.187 2.894T17.02 21"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          fill: "currentColor",
           fillRule: "evenodd",
-          d: "M14.2 3c.402 0 .729.333.729.744v.744h1.457c1.207 0 2.185.999 2.185 2.231v4.7a5.6 5.6 0 0 0-1.457-.235v-.746H5.457v6.694c0 .411.326.744.729.744h5.18c.088.523.247 1.023.465 1.488H6.186c-1.207 0-2.186-1-2.186-2.232V6.72c0-1.232.979-2.231 2.186-2.231h1.457v-.744c0-.411.326-.744.728-.744.403 0 .729.333.729.744v.744h4.371v-.744c0-.411.327-.744.729-.744m2.914 3.719V8.95H5.457V6.72c0-.41.326-.744.729-.744h1.457v.744c0 .41.326.744.728.744a.736.736 0 0 0 .729-.744v-.744h4.371v.744c0 .41.327.744.729.744a.736.736 0 0 0 .729-.744v-.744h1.457c.402 0 .728.333.728.744",
+          d: "M14.218 3a.74.74 0 0 1 .736.744v.744h1.473c1.22 0 2.21.999 2.21 2.231v4.7a5.7 5.7 0 0 0-1.473-.235v-.746H5.382v6.694c0 .411.33.744.736.744h5.236c.089.523.25 1.023.47 1.488H6.118a2.22 2.22 0 0 1-2.209-2.232V6.72a2.22 2.22 0 0 1 2.21-2.231H7.59v-.744c0-.411.33-.744.736-.744a.74.74 0 0 1 .737.744v.744h4.418v-.744c0-.411.33-.744.736-.744m2.946 3.719V8.95H5.382V6.72c0-.41.33-.744.736-.744h1.473v.744c0 .41.33.744.736.744a.74.74 0 0 0 .737-.744v-.744h4.418v.744c0 .41.33.744.736.744a.74.74 0 0 0 .736-.744v-.744h1.473a.74.74 0 0 1 .737.744",
           clipRule: "evenodd"
         }
       )
-    ] })
+    ]
   }
 );
 export {

package/dist/assets/icons/Drag.js

@@ -10,7 +10,7 @@ const DragIcon = (props) => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx(
       "path",
       {
-        fill: "currentColor",
+        fill: "#6D7688",
         d: "M9 19.615q-.666 0-1.14-.474A1.56 1.56 0 0 1 7.384 18q0-.666.474-1.14A1.56 1.56 0 0 1 9 16.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14A1.56 1.56 0 0 1 9 19.616m6 0q-.666 0-1.14-.474A1.56 1.56 0 0 1 13.384 18q0-.666.474-1.14A1.56 1.56 0 0 1 15 16.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14a1.56 1.56 0 0 1-1.141.475m-6-6q-.666 0-1.14-.474A1.56 1.56 0 0 1 7.384 12q0-.666.474-1.14A1.56 1.56 0 0 1 9 10.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14A1.56 1.56 0 0 1 9 13.616m6 0q-.666 0-1.14-.474A1.56 1.56 0 0 1 13.384 12q0-.666.474-1.14A1.56 1.56 0 0 1 15 10.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14a1.56 1.56 0 0 1-1.141.475m-6-6q-.666 0-1.14-.474A1.56 1.56 0 0 1 7.384 6q0-.666.474-1.14A1.56 1.56 0 0 1 9 4.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14A1.56 1.56 0 0 1 9 7.616m6 0q-.666 0-1.14-.474A1.56 1.56 0 0 1 13.384 6q0-.666.474-1.14A1.56 1.56 0 0 1 15 4.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14A1.56 1.56 0 0 1 15 7.616"
       }
     )

package/dist/assets/icons/File.js

@@ -12,7 +12,7 @@ const FileIcon = (props) => /* @__PURE__ */ jsx(
       {
         fill: "currentColor",
         fillRule: "evenodd",
-        d: "M12.9 2.1a1 1 0 0 1 .233.03l.009.003a1 1 0 0 1 .12.046q.03.013.054.027a1 1 0 0 1 .143.093q.03.023.058.049l.018.015 6.3 6.301.014.015q.015.014.029.032l.017.018q.017.025.033.048.022.03.042.062.02.035.037.073a.9.9 0 0 1 .093.388l-.001.016V19.2a2.7 2.7 0 0 1-2.7 2.7h-10.8a2.7 2.7 0 0 1-2.7-2.7V4.8a2.7 2.7 0 0 1 2.7-2.7zM6.598 3.9a.9.9 0 0 0-.9.9v14.4a.9.9 0 0 0 .9.9h10.8a.9.9 0 0 0 .9-.9v-9h-5.4a.9.9 0 0 1-.9-.9V3.9zm7.2 4.5h3.227L13.8 5.174z",
+        d: "M12.9 2.1a1 1 0 0 1 .234.03l.009.003a1 1 0 0 1 .12.046q.03.013.054.027a1 1 0 0 1 .143.093q.03.023.058.049l.018.015 6.3 6.301.014.015q.015.014.029.032l.016.018q.018.025.034.048.022.03.042.062.02.035.037.073a.9.9 0 0 1 .093.388l-.001.016V19.2a2.7 2.7 0 0 1-2.7 2.7H6.6a2.7 2.7 0 0 1-2.7-2.7V4.8a2.7 2.7 0 0 1 2.7-2.7zM6.6 3.9a.9.9 0 0 0-.9.9v14.4a.9.9 0 0 0 .9.9h10.8a.9.9 0 0 0 .9-.9v-9h-5.4a.9.9 0 0 1-.9-.9V3.9zm7.2 4.5h3.227l-3.226-3.226z",
         clipRule: "evenodd"
       }
     )

package/dist/assets/icons/Info.js

@@ -12,9 +12,7 @@ const InfoIcon = (props) => /* @__PURE__ */ jsxs(
         "path",
         {
           fill: "currentColor",
-          fillRule: "evenodd",
-          d: "M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14m-9 7a9 9 0 1 1 18 0 9 9 0 0 1-18 0",
-          clipRule: "evenodd"
+          d: "M12 7.8a1 1 0 0 1 1 1V12a1 1 0 1 1-2 0V8.8a1 1 0 0 1 1-1M12 14.2a1 1 0 1 0 0 2h.008a1 1 0 1 0 0-2z"
         }
       ),
       /* @__PURE__ */ jsx(
@@ -22,7 +20,7 @@ const InfoIcon = (props) => /* @__PURE__ */ jsxs(
         {
           fill: "currentColor",
           fillRule: "evenodd",
-          d: "M12 7.8a1 1 0 0 1 1 1V12a1 1 0 1 1-2 0V8.8a1 1 0 0 1 1-1M11 15.2a1 1 0 0 1 1-1h.008a1 1 0 1 1 0 2H12a1 1 0 0 1-1-1",
+          d: "M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0m9-7a7 7 0 1 0 0 14 7 7 0 0 0 0-14",
           clipRule: "evenodd"
         }
       )

package/dist/assets/icons/Menu.js

@@ -11,9 +11,7 @@ const MenuIcon = (props) => /* @__PURE__ */ jsx(
       "path",
       {
         fill: "currentColor",
-        fillRule: "evenodd",
-        d: "M2 12a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1M2 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1M2 18a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1",
-        clipRule: "evenodd"
+        d: "M2 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1M2 12a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1M3 17a1 1 0 1 0 0 2h18a1 1 0 1 0 0-2z"
       }
     )
   }

package/dist/assets/icons/Send.js

@@ -12,7 +12,7 @@ const SendIcon = (props) => /* @__PURE__ */ jsx(
       {
         fill: "currentColor",
         fillRule: "evenodd",
-        d: "M5.105 7.59c-1.092-1.712.764-3.773 2.58-2.865l10.973 5.486c1.474.737 1.474 2.84 0 3.578L7.685 19.276c-1.816.907-3.672-1.154-2.58-2.865L7.92 12zM17.764 12 6.79 6.513l2.815 4.411a2 2 0 0 1 0 2.152l-2.815 4.41z",
+        d: "M5.105 7.59c-1.092-1.712.764-3.774 2.58-2.866l10.973 5.487c1.474.737 1.474 2.84 0 3.578L7.685 19.275c-1.816.908-3.672-1.154-2.58-2.865L7.92 12zM17.764 12 6.79 6.513l2.815 4.41a2 2 0 0 1 0 2.153l-2.815 4.41z",
         clipRule: "evenodd"
       }
     )

package/dist/assets/icons/Upload.js

@@ -12,14 +12,14 @@ const UploadIcon = (props) => /* @__PURE__ */ jsxs(
         "path",
         {
           fill: "currentColor",
-          d: "M19.502 13.6a.9.9 0 0 1 .9.9v3.333a2.57 2.57 0 0 1-2.567 2.567H6.169a2.57 2.57 0 0 1-2.555-2.313l-.012-.254V14.5a.9.9 0 0 1 1.795-.092l.005.092v3.333l.015.15a.766.766 0 0 0 .752.617h11.666a.766.766 0 0 0 .767-.767V14.5a.9.9 0 0 1 .9-.9"
+          d: "M19.5 13.6a.9.9 0 0 1 .9.9v3.333a2.57 2.57 0 0 1-2.567 2.567H6.167a2.57 2.57 0 0 1-2.555-2.313l-.012-.254V14.5a.9.9 0 0 1 1.796-.092l.004.092v3.333l.015.15a.766.766 0 0 0 .752.617h11.666a.766.766 0 0 0 .767-.767V14.5a.9.9 0 0 1 .9-.9"
         }
       ),
       /* @__PURE__ */ jsx(
         "path",
         {
           fill: "currentColor",
-          d: "M12.041 3.602h.008q.078.003.151.02.006 0 .01.003c.17.04.32.127.436.247l4.159 4.158.061.069a.9.9 0 0 1-1.265 1.266l-.069-.062-2.63-2.63V14.5a.9.9 0 0 1-1.8 0V6.672l-2.63 2.63-.069.063A.901.901 0 0 1 7.198 8.03l4.167-4.167.069-.061a.9.9 0 0 1 .432-.192l.027-.004a1 1 0 0 1 .109-.006z"
+          d: "M12.04 3.602h.007q.078.003.151.02.006 0 .011.003c.168.04.319.127.436.247l4.158 4.158.061.069A.9.9 0 0 1 15.6 9.365l-.069-.062-2.63-2.63V14.5a.9.9 0 0 1-1.8 0V6.672l-2.63 2.63-.069.063A.901.901 0 0 1 7.196 8.03l4.167-4.167.069-.061a.9.9 0 0 1 .432-.192l.027-.004A1 1 0 0 1 12 3.6z"
         }
       )
     ]

package/dist/assets/icons/{Warningfilled.js → WarningFilled.js}

@@ -12,7 +12,7 @@ const WarningFilledIcon = (props) => /* @__PURE__ */ jsx(
       {
         fill: "currentColor",
         fillRule: "evenodd",
-        d: "M12.163 3.52a2.57 2.57 0 0 1 1.94 1.091l.09.139.001.004 7.059 11.783.008.013.079.147a2.57 2.57 0 0 1-2.274 3.702H4.93a2.568 2.568 0 0 1-2.195-3.85l.007-.012L9.801 4.754l.002-.004.09-.139a2.57 2.57 0 0 1 2.105-1.097zm-.165 11.747a.9.9 0 0 0 0 1.8h.008l.092-.005a.9.9 0 0 0 0-1.79l-.092-.005zm0-6.667a.9.9 0 0 0-.9.9v3.333l.004.093a.9.9 0 0 0 1.792 0l.004-.093V9.5l-.004-.092a.9.9 0 0 0-.896-.808",
+        d: "M12.165 3.52a2.57 2.57 0 0 1 1.94 1.091l.09.139.001.004 7.059 11.783.008.013.079.147a2.568 2.568 0 0 1-2.274 3.702H4.932a2.568 2.568 0 0 1-2.195-3.85l.007-.012L9.803 4.754l.002-.004.09-.139A2.57 2.57 0 0 1 12 3.514zM12 15.267a.9.9 0 0 0 0 1.8h.008l.092-.005a.9.9 0 0 0 0-1.79l-.092-.005zM12 8.6a.9.9 0 0 0-.9.9v3.333l.005.093a.9.9 0 0 0 1.79 0l.005-.093V9.5l-.005-.092A.9.9 0 0 0 12 8.6",
         clipRule: "evenodd"
       }
     )

package/dist/components/Menu/MenuPopover.js

@@ -8,7 +8,7 @@ const MenuPopover = ({ items, ...props }) => {
     {
       ...props,
       className: clsx("outline-none", props.className),
-      children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-list-rounding-dropdown border border-elevation-outline-default-1 shadow-5 outline-none", children: /* @__PURE__ */ jsx(Menu, { children: items.map(
+      children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-list-rounding-dropdown border border-elevation-outline-default-1 shadow-5 outline-none", children: /* @__PURE__ */ jsx(Menu, { className: "outline-none", children: items.map(
         (item, index) => !item.children || item.children.length === 0 ? /* @__PURE__ */ jsx(
           MenuItem,
           {

package/dist/components/buttons/PillButton/pillButton.cva.js

@@ -6,7 +6,7 @@ const pillButton = cva(
   [
     uiOutlineClass,
     "flex items-center justify-center",
-    "rounded-pill-rounding-default px-pill-side-default py-pill-height-default"
+    "rounded-pill-rounding-default border border-transparent px-pill-side-default py-pill-height-default"
   ],
   {
     variants: {

package/dist/components/inputs/Checkbox/checkbox.cva.js

@@ -7,7 +7,7 @@ const checkbox = cva(
     variants: {
       variant: {
         default: [
-          "border-interactive-contained-secondary-idle",
+          "m-1 border-interactive-contained-secondary-idle",
           "group-disabled:border-interactive-contained-secondary-disabled",
           "group-hover:border-interactive-contained-secondary-hover",
           "group-pressed:border-interactive-contained-secondary-pressed",

package/dist/components/inputs/DateTime/DatePicker/DatePicker.js

@@ -33,12 +33,13 @@ const DatePickerBase = (props) => {
     value,
     disableDropdown,
     className,
-    todayIcon,
     as = ui.input.as,
     hideLabel = ui.input.hideLabel,
     variant = ui.input.variant,
     size = ui.input.size,
     isClearable = ui.input.isClearable,
+    todayIcon = ui.dateInput.todayIcon,
+    shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros,
     ...rest
   } = props;
   const formFieldProps = {
@@ -57,10 +58,12 @@ const DatePickerBase = (props) => {
   const dialogState = useDatePickerState({
     ...rest,
     defaultValue: value || rest.defaultValue,
-    shouldCloseOnSelect: false
+    shouldCloseOnSelect: false,
+    shouldForceLeadingZeros
   });
   const state = useDatePickerState({
     ...rest,
+    shouldForceLeadingZeros,
     value,
     onChange: (val) => {
       if (val && (rest.minValue && val < rest?.minValue || rest?.maxValue && val > rest?.maxValue)) {
@@ -75,11 +78,11 @@ const DatePickerBase = (props) => {
   });
   const datePickerRef = useRef(null);
   const { groupProps, labelProps, fieldProps, buttonProps, dialogProps } = useDatePicker(
-    { ...rest, label },
+    { ...rest, label, shouldForceLeadingZeros },
     state,
     datePickerRef
   );
-  const { calendarProps } = useDatePicker({ ...rest, label }, dialogState, datePickerRef);
+  const { calendarProps } = useDatePicker({ ...rest, label, shouldForceLeadingZeros }, dialogState, datePickerRef);
   const { locale } = useLocale();
   const calendarState = useCalendarState({
     ...calendarProps,

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js

@@ -39,18 +39,20 @@ const DateRangePickerBase = (props) => {
     disableDropdown,
     className,
     hideSidebar,
-    todayIcon,
     hideLabel = ui.input.hideLabel,
     variant = ui.input.variant,
     as = ui.input.as,
     size = ui.input.size,
     isClearable = ui.input.isClearable,
+    todayIcon = ui.dateInput.todayIcon,
+    shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros,
     ...rest
   } = props;
   const [validationRangeError, setValidationRangeError] = useState();
-  const dialogState = useDateRangePickerState({ ...rest, value, shouldCloseOnSelect: false });
+  const dialogState = useDateRangePickerState({ ...rest, value, shouldCloseOnSelect: false, shouldForceLeadingZeros });
   const state = useDateRangePickerState({
     ...rest,
+    shouldForceLeadingZeros,
     value,
     onChange: (newValue) => {
       if (isValidRange(newValue)) {
@@ -63,11 +65,15 @@ const DateRangePickerBase = (props) => {
   });
   const dateRangePickerRef = useRef(null);
   const { groupProps, labelProps, startFieldProps, endFieldProps, buttonProps, dialogProps } = useDateRangePicker(
-    { ...rest, label },
+    { ...rest, label, shouldForceLeadingZeros },
     state,
     dateRangePickerRef
   );
-  const { calendarProps } = useDateRangePicker({ ...rest, label }, dialogState, dateRangePickerRef);
+  const { calendarProps } = useDateRangePicker(
+    { ...rest, label, shouldForceLeadingZeros },
+    dialogState,
+    dateRangePickerRef
+  );
   const { locale } = useLocale();
   const formFieldProps = {
     error: error || validationRangeError,

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js

@@ -31,12 +31,13 @@ const DateTimePickerBase = (props) => {
     value,
     disableDropdown,
     isTimeOptional,
-    todayIcon,
     hideLabel = ui.input.hideLabel,
     variant = ui.input.variant,
     as = ui.input.as,
     size = ui.input.size,
     isClearable = ui.input.isClearable,
+    todayIcon = ui.dateInput.todayIcon,
+    shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros,
     ...rest
   } = props;
   const formFieldProps = {
@@ -57,7 +58,8 @@ const DateTimePickerBase = (props) => {
     defaultValue: value || rest.defaultValue,
     shouldCloseOnSelect: false,
     granularity: "minute",
-    hideTimeZone: true
+    hideTimeZone: true,
+    shouldForceLeadingZeros
   });
   useEffect(() => {
     if (isTimeOptional && !dialogState.timeValue) {
@@ -66,6 +68,7 @@ const DateTimePickerBase = (props) => {
   }, [isTimeOptional, dialogState]);
   const state = useDatePickerState({
     ...rest,
+    shouldForceLeadingZeros,
     value,
     onChange: (val) => {
       onChange?.(val);
@@ -78,11 +81,11 @@ const DateTimePickerBase = (props) => {
   });
   const datePickerRef = useRef(null);
   const { groupProps, labelProps, fieldProps, buttonProps, dialogProps } = useDatePicker(
-    { ...rest, label, granularity: "minute", hideTimeZone: true },
+    { ...rest, label, granularity: "minute", hideTimeZone: true, shouldForceLeadingZeros },
     state,
     datePickerRef
   );
-  const { calendarProps } = useDatePicker({ ...rest, label }, dialogState, datePickerRef);
+  const { calendarProps } = useDatePicker({ ...rest, label, shouldForceLeadingZeros }, dialogState, datePickerRef);
   const { locale } = useLocale();
   const calendarState = useCalendarState({
     ...calendarProps,

package/dist/components/inputs/DateTime/shared/DatePickerInput.js

@@ -12,7 +12,8 @@ import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconBu
 import { DateField } from "./DateField.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
-import { useInputCva } from "../../shared/input.cva.js";
+import { useInputCva, inputSide } from "../../shared/input.cva.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 const DatePickerInput = ({
   ref,
   as,
@@ -32,6 +33,8 @@ const DatePickerInput = ({
   ...props
 }) => {
   const inputCva = useInputCva();
+  const uiStyle = UIStyle.useConfig();
+  const inputSideCva = uiStyle?.input?.sideCva ?? inputSide;
   const [canClear, setCanClear] = useState(false);
   const { hoverProps, isHovered } = useHover({ isDisabled });
   const [isFocused, setIsFocused] = useState(false);
@@ -55,17 +58,23 @@ const DatePickerInput = ({
   const onToday = () => {
     if (isDateTime) {
       fieldProps.onChange?.(now(getLocalTimeZone()));
+      if (endFieldProps) {
+        endFieldProps.onChange?.(now(getLocalTimeZone()));
+      }
     } else {
       fieldProps.onChange?.(today(getLocalTimeZone()));
+      if (endFieldProps) {
+        endFieldProps.onChange?.(today(getLocalTimeZone()));
+      }
     }
   };
   const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
   const style = useMemo(() => {
-    const leftPadding = as === "filter" ? `var(--spacing-input-side-default) + ${labelWidth}` : "0";
+    const paddingLeft = as === "filter" ? `calc(var(${inputSideCva({ size, type: "var" })}) + ${labelWidth}px)` : "0px";
     return {
-      paddingLeft: `calc(${leftPadding}px)`
+      paddingLeft
     };
-  }, [labelWidth, as]);
+  }, [labelWidth, as, size, inputSideCva]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -75,7 +84,9 @@ const DatePickerInput = ({
         as,
         size,
         ...props,
-        className: clsx("group/date-picker-content relative flex items-center justify-between gap-2")
+        className: clsx(
+          "group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2"
+        )
       }),
       "data-rac": "",
       "data-hovered": isHovered || void 0,

package/dist/components/inputs/DateTime/shared/DateSegmentItem.js

@@ -32,9 +32,10 @@ const DateSegmentItem = ({ segment, state, isDisabled, timePickerOnly, hidePlace
         !isDisabled && isInputEmpty && "text-text-default-3 group-focus-within:text-text-default-1",
         !isDisabled && !isInputEmpty && "text-text-default-1",
         "focus-within:outline-1 focus-within:outline-interactive-contained-primary-idle focus-within:outline-offset-1",
-        ["hour", "dayPeriod"].includes(segment.type) && !timePickerOnly && "ml-1"
+        ["hour", "dayPeriod"].includes(segment.type) && !timePickerOnly && "ml-1",
+        hidePlaceholder && "opacity-0"
       ),
-      children: !hidePlaceholder && /* @__PURE__ */ jsxs(Fragment, { children: [
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
         segment.isPlaceholder && /* @__PURE__ */ jsx(
           "span",
           {

package/dist/components/inputs/DateTime/shared/TimePickerInput.js

@@ -8,7 +8,8 @@ import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconBu
 import { TimeField } from "./TimeField.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
-import { useInputCva } from "../../shared/input.cva.js";
+import { useInputCva, inputSide } from "../../shared/input.cva.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 const TimePickerInput = ({
   ref,
   as,
@@ -25,18 +26,20 @@ const TimePickerInput = ({
   ...props
 }) => {
   const inputCva = useInputCva();
+  const uiStyle = UIStyle.useConfig();
+  const inputSideCva = uiStyle?.input?.sideCva ?? inputSide;
   const { hoverProps, isHovered } = useHover({ isDisabled });
   const [isFocused, setIsFocused] = useState(false);
   const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
   const { isFocusVisible } = useFocusVisible();
   const [labelContentRef, { width: labelWidth }] = useMeasure();
-  const hidePlaceholder = (as === "floating" || as === "filter") && !state.value && !isFocused;
+  const hidePlaceholder = as === "floating" && !state.value && !isFocused;
   const style = useMemo(() => {
-    const leftPadding = as === "filter" ? `var(--spacing-input-side-default) + ${labelWidth}` : "0";
+    const paddingLeft = as === "filter" ? `calc(var(${inputSideCva({ size, type: "var" })}) + ${labelWidth}px)` : "0px";
     return {
-      paddingLeft: `calc(${leftPadding}px)`
+      paddingLeft
     };
-  }, [labelWidth, as]);
+  }, [labelWidth, as, size, inputSideCva]);
   const canClear = state.segments.some((segment) => segment.type !== "literal" && segment.isPlaceholder === false);
   return /* @__PURE__ */ jsxs(
     "div",
@@ -47,7 +50,9 @@ const TimePickerInput = ({
         as,
         size,
         ...props,
-        className: clsx("group/date-picker-content relative flex items-center justify-between gap-2")
+        className: clsx(
+          "group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2"
+        )
       }),
       "data-rac": "",
       "data-hovered": isHovered || void 0,
@@ -60,23 +65,25 @@ const TimePickerInput = ({
       ...focusWithinProps,
       ...hoverProps,
       children: [
-        as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(
-          FormFieldLabel,
-          {
-            ref: labelContentRef,
-            as,
-            ...headerProps
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(
-          TimeField,
-          {
-            fieldProps,
-            state,
-            isDisabled,
-            hidePlaceholder
-          }
-        ) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(
+            FormFieldLabel,
+            {
+              ref: labelContentRef,
+              as,
+              ...headerProps
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(
+            TimeField,
+            {
+              fieldProps,
+              state,
+              isDisabled,
+              hidePlaceholder
+            }
+          ) })
+        ] }),
         /* @__PURE__ */ jsxs(
           "div",
           {

package/dist/components/inputs/File/FileUpload.js

@@ -16,7 +16,7 @@ import { fileUploadDropZone } from "./shared/fileUpload.cva.js";
 const FileUploadBase = (props) => {
   const { t } = useTranslation(ns);
   const {
-    ref,
+    ref: _ref,
     label,
     tooltipText,
     variant = "vertical",

package/dist/components/inputs/File/InputUpload.js

@@ -8,7 +8,7 @@ import { UIConfig } from "../../../config/uiConfig.context.js";
 import { InputUploadContent } from "./shared/InputUploadContent.js";
 import { InputUploadFilled } from "./shared/InputUploadFilled.js";
 const InputUploadBase = ({
-  ref,
+  ref: _ref,
   label,
   tooltipText,
   variant,

package/dist/components/inputs/File/shared/FileUploadContentError.js

@@ -3,7 +3,7 @@ import { clsx } from "clsx";
 import { FileTrigger } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 import { CloseIcon } from "../../../../assets/icons/Close.js";
-import { WarningFilledIcon } from "../../../../assets/icons/Warningfilled.js";
+import { WarningFilledIcon } from "../../../../assets/icons/WarningFilled.js";
 import { Button } from "../../../buttons/Button/Button.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
 import { TextButton } from "../../../buttons/TextButton/TextButton.js";