@sio-group/form-react 0.4.2 → 0.4.3

package/dist/index.js

@@ -561,67 +561,9 @@ var Checkbox = ({
 // src/components/Fields/Input/Input.tsx
 import { memo as memo2, useMemo } from "react";
 
-// src/components/Button/index.tsx
-import React2 from "react";
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var ButtonComponent = ({
-  type = "button",
-  label,
-  onClick,
-  variant = "primary",
-  color = "default",
-  size = "md",
-  block = false,
-  loading = false,
-  disabled = false,
-  className = "",
-  ariaLabel = "",
-  style = {},
-  children
-}) => {
-  const isDisabled = disabled || loading;
-  const handleClick = (e) => {
-    if (isDisabled) {
-      e.preventDefault();
-      return;
-    }
-    onClick?.(e);
-  };
-  const buttonClasses = [
-    "btn",
-    `btn--${variant}`,
-    `btn--${size}`,
-    `btn--${color}`,
-    block && "btn--block",
-    loading && "btn--loading",
-    isDisabled && "btn--disabled",
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx4(
-    "button",
-    {
-      type,
-      onClick: handleClick,
-      className: buttonClasses,
-      style,
-      disabled: isDisabled,
-      "aria-label": ariaLabel || label,
-      "aria-busy": loading,
-      "aria-disabled": isDisabled,
-      children: loading ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-        /* @__PURE__ */ jsx4("span", { className: "btn__spinner", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx4("circle", { cx: "10", cy: "10", r: "8" }) }) }),
-        /* @__PURE__ */ jsx4("span", { className: "btn__loading-text", children: "Processing..." })
-      ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-        children,
-        label
-      ] })
-    }
-  );
-};
-var Button = React2.memo(ButtonComponent);
-
 // src/components/Fields/Input/NumberInput/index.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Button } from "@sio-group/ui-core";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var NumberInput = ({
   value,
   min,
@@ -677,7 +619,7 @@ var NumberInput = ({
     }
     onChange(value2);
   };
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs3(
     InputWrapper_default,
     {
       type,
@@ -693,7 +635,7 @@ var NumberInput = ({
       className,
       style,
       children: [
-        spinner && spinner === "horizontal" && /* @__PURE__ */ jsx5(
+        spinner && spinner === "horizontal" && /* @__PURE__ */ jsx4(
           Button,
           {
             type: "button",
@@ -705,8 +647,8 @@ var NumberInput = ({
             label: "-"
           }
         ),
-        /* @__PURE__ */ jsx5(Icon, { icon }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx4(Icon, { icon }),
+        /* @__PURE__ */ jsx4(
           "input",
           {
             type: "number",
@@ -739,7 +681,7 @@ var NumberInput = ({
             style: spinner && spinner === "horizontal" ? { textAlign: "center" } : {}
           }
         ),
-        spinner && (spinner === "horizontal" ? /* @__PURE__ */ jsx5(
+        spinner && (spinner === "horizontal" ? /* @__PURE__ */ jsx4(
           Button,
           {
             type: "button",
@@ -750,8 +692,8 @@ var NumberInput = ({
             "aria-label": "Increase value",
             label: "+"
           }
-        ) : /* @__PURE__ */ jsxs4("div", { className: "form-field__spinner", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx5(
+        ) : /* @__PURE__ */ jsxs3("div", { className: "form-field__spinner", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx4(
             Button,
             {
               type: "button",
@@ -761,7 +703,7 @@ var NumberInput = ({
               label: "\u25B2"
             }
           ),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx4(
             Button,
             {
               type: "button",
@@ -778,7 +720,7 @@ var NumberInput = ({
 };
 
 // src/components/Fields/Input/RangeInput/index.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var RangeInput = ({
   value,
   min,
@@ -805,7 +747,7 @@ var RangeInput = ({
   className,
   style
 }) => {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs4(
     InputWrapper_default,
     {
       type,
@@ -821,9 +763,9 @@ var RangeInput = ({
       className,
       style,
       children: [
-        /* @__PURE__ */ jsx6(Icon, { icon }),
-        showValue && /* @__PURE__ */ jsx6("span", { className: "form-field__range-value", children: Number(value) }),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx5(Icon, { icon }),
+        showValue && /* @__PURE__ */ jsx5("span", { className: "form-field__range-value", children: Number(value) }),
+        /* @__PURE__ */ jsx5(
           "input",
           {
             type,
@@ -857,110 +799,111 @@ var RangeInput = ({
 
 // src/components/Fields/Input/DateInput/index.tsx
 import { useRef } from "react";
+import { Button as Button2 } from "@sio-group/ui-core";
 
 // src/utils/custom-icons.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var CustomIcons = {
-  Date: () => /* @__PURE__ */ jsxs6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx7("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2", stroke: "currentColor", fill: "none" }),
-    /* @__PURE__ */ jsx7("line", { x1: "8", y1: "2", x2: "8", y2: "6", stroke: "currentColor" }),
-    /* @__PURE__ */ jsx7("line", { x1: "16", y1: "2", x2: "16", y2: "6", stroke: "currentColor" }),
-    /* @__PURE__ */ jsx7("line", { x1: "3", y1: "10", x2: "21", y2: "10", stroke: "currentColor" })
+  Date: () => /* @__PURE__ */ jsxs5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx6("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2", stroke: "currentColor", fill: "none" }),
+    /* @__PURE__ */ jsx6("line", { x1: "8", y1: "2", x2: "8", y2: "6", stroke: "currentColor" }),
+    /* @__PURE__ */ jsx6("line", { x1: "16", y1: "2", x2: "16", y2: "6", stroke: "currentColor" }),
+    /* @__PURE__ */ jsx6("line", { x1: "3", y1: "10", x2: "21", y2: "10", stroke: "currentColor" })
   ] }),
-  Time: () => /* @__PURE__ */ jsxs6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ jsx7("polyline", { points: "12 6 12 12 16 14" }),
-    /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor", fillOpacity: "0.3", stroke: "none" })
+  Time: () => /* @__PURE__ */ jsxs5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx6("polyline", { points: "12 6 12 12 16 14" }),
+    /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor", fillOpacity: "0.3", stroke: "none" })
   ] }),
-  DateTime: () => /* @__PURE__ */ jsxs6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx7("rect", { x: "2", y: "3", width: "14", height: "14", rx: "2", ry: "2" }),
-    /* @__PURE__ */ jsx7("line", { x1: "5", y1: "2", x2: "5", y2: "5" }),
-    /* @__PURE__ */ jsx7("line", { x1: "13", y1: "2", x2: "13", y2: "5" }),
-    /* @__PURE__ */ jsx7("line", { x1: "2", y1: "7", x2: "16", y2: "7" }),
-    /* @__PURE__ */ jsx7("circle", { cx: "19", cy: "15", r: "4" }),
-    /* @__PURE__ */ jsx7("polyline", { points: "19 13 19 15 21 16" })
+  DateTime: () => /* @__PURE__ */ jsxs5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx6("rect", { x: "2", y: "3", width: "14", height: "14", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx6("line", { x1: "5", y1: "2", x2: "5", y2: "5" }),
+    /* @__PURE__ */ jsx6("line", { x1: "13", y1: "2", x2: "13", y2: "5" }),
+    /* @__PURE__ */ jsx6("line", { x1: "2", y1: "7", x2: "16", y2: "7" }),
+    /* @__PURE__ */ jsx6("circle", { cx: "19", cy: "15", r: "4" }),
+    /* @__PURE__ */ jsx6("polyline", { points: "19 13 19 15 21 16" })
   ] }),
-  FileUpload: () => /* @__PURE__ */ jsxs6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx7("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
-    /* @__PURE__ */ jsx7("polyline", { points: "13 2 13 9 20 9" }),
-    /* @__PURE__ */ jsx7("path", { d: "M12 12v6m0-6 2 2m-2-2-2 2" })
+  FileUpload: () => /* @__PURE__ */ jsxs5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx6("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
+    /* @__PURE__ */ jsx6("polyline", { points: "13 2 13 9 20 9" }),
+    /* @__PURE__ */ jsx6("path", { d: "M12 12v6m0-6 2 2m-2-2-2 2" })
   ] }),
-  CloudUpload: () => /* @__PURE__ */ jsxs6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx7("path", { d: "M12 16v-6m0 0-2 2m2-2 2 2" }),
-    /* @__PURE__ */ jsx7("path", { d: "M16 16h3a4 4 0 0 0 0-8h-1.5A5.5 5.5 0 0 0 7 9a5 5 0 0 0-1 9.8" })
+  CloudUpload: () => /* @__PURE__ */ jsxs5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx6("path", { d: "M12 16v-6m0 0-2 2m2-2 2 2" }),
+    /* @__PURE__ */ jsx6("path", { d: "M16 16h3a4 4 0 0 0 0-8h-1.5A5.5 5.5 0 0 0 7 9a5 5 0 0 0-1 9.8" })
   ] }),
-  TrashIcon: () => /* @__PURE__ */ jsxs6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx7("path", { d: "M3 6h18" }),
-    /* @__PURE__ */ jsx7("rect", { x: "6", y: "6", width: "12", height: "14", rx: "1", ry: "1" }),
-    /* @__PURE__ */ jsx7("path", { d: "M9 3h6" }),
-    /* @__PURE__ */ jsx7("path", { d: "M10 3v3M14 3v3" }),
-    /* @__PURE__ */ jsx7("line", { x1: "10", y1: "10", x2: "10", y2: "16" }),
-    /* @__PURE__ */ jsx7("line", { x1: "14", y1: "10", x2: "14", y2: "16" })
+  TrashIcon: () => /* @__PURE__ */ jsxs5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx6("path", { d: "M3 6h18" }),
+    /* @__PURE__ */ jsx6("rect", { x: "6", y: "6", width: "12", height: "14", rx: "1", ry: "1" }),
+    /* @__PURE__ */ jsx6("path", { d: "M9 3h6" }),
+    /* @__PURE__ */ jsx6("path", { d: "M10 3v3M14 3v3" }),
+    /* @__PURE__ */ jsx6("line", { x1: "10", y1: "10", x2: "10", y2: "16" }),
+    /* @__PURE__ */ jsx6("line", { x1: "14", y1: "10", x2: "14", y2: "16" })
   ] }),
-  SimpleTrashIcon: () => /* @__PURE__ */ jsxs6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx7("path", { d: "M3 6h18" }),
-    /* @__PURE__ */ jsx7("rect", { x: "6", y: "8", width: "12", height: "12", rx: "1", ry: "1" }),
-    /* @__PURE__ */ jsx7("path", { d: "M9 4h6" })
+  SimpleTrashIcon: () => /* @__PURE__ */ jsxs5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx6("path", { d: "M3 6h18" }),
+    /* @__PURE__ */ jsx6("rect", { x: "6", y: "8", width: "12", height: "12", rx: "1", ry: "1" }),
+    /* @__PURE__ */ jsx6("path", { d: "M9 4h6" })
   ] }),
-  DeleteTrashIcon: () => /* @__PURE__ */ jsxs6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx7("path", { d: "M3 6h18" }),
-    /* @__PURE__ */ jsx7("rect", { x: "6", y: "6", width: "12", height: "14", rx: "1", ry: "1" }),
-    /* @__PURE__ */ jsx7("path", { d: "M9 3h6" }),
-    /* @__PURE__ */ jsx7("path", { d: "M10 3v3M14 3v3" }),
-    /* @__PURE__ */ jsx7("line", { x1: "9", y1: "10", x2: "15", y2: "16" }),
-    /* @__PURE__ */ jsx7("line", { x1: "15", y1: "10", x2: "9", y2: "16" })
+  DeleteTrashIcon: () => /* @__PURE__ */ jsxs5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx6("path", { d: "M3 6h18" }),
+    /* @__PURE__ */ jsx6("rect", { x: "6", y: "6", width: "12", height: "14", rx: "1", ry: "1" }),
+    /* @__PURE__ */ jsx6("path", { d: "M9 3h6" }),
+    /* @__PURE__ */ jsx6("path", { d: "M10 3v3M14 3v3" }),
+    /* @__PURE__ */ jsx6("line", { x1: "9", y1: "10", x2: "15", y2: "16" }),
+    /* @__PURE__ */ jsx6("line", { x1: "15", y1: "10", x2: "9", y2: "16" })
   ] }),
-  FileIcon: () => /* @__PURE__ */ jsxs6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx7("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
-    /* @__PURE__ */ jsx7("polyline", { points: "13 2 13 9 20 9" })
+  FileIcon: () => /* @__PURE__ */ jsxs5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx6("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
+    /* @__PURE__ */ jsx6("polyline", { points: "13 2 13 9 20 9" })
   ] }),
-  Word: () => /* @__PURE__ */ jsxs6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx7("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
-    /* @__PURE__ */ jsx7("polyline", { points: "13 2 13 9 20 9" }),
-    /* @__PURE__ */ jsx7("line", { x1: "8", y1: "13", x2: "16", y2: "13" }),
-    /* @__PURE__ */ jsx7("line", { x1: "8", y1: "16", x2: "16", y2: "16" }),
-    /* @__PURE__ */ jsx7("line", { x1: "8", y1: "19", x2: "13", y2: "19" })
+  Word: () => /* @__PURE__ */ jsxs5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx6("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
+    /* @__PURE__ */ jsx6("polyline", { points: "13 2 13 9 20 9" }),
+    /* @__PURE__ */ jsx6("line", { x1: "8", y1: "13", x2: "16", y2: "13" }),
+    /* @__PURE__ */ jsx6("line", { x1: "8", y1: "16", x2: "16", y2: "16" }),
+    /* @__PURE__ */ jsx6("line", { x1: "8", y1: "19", x2: "13", y2: "19" })
   ] }),
-  Excel: () => /* @__PURE__ */ jsxs6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx7("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
-    /* @__PURE__ */ jsx7("polyline", { points: "13 2 13 9 20 9" }),
-    /* @__PURE__ */ jsx7("rect", { x: "7", y: "12", width: "10", height: "7", rx: "1" }),
-    /* @__PURE__ */ jsx7("line", { x1: "7", y1: "15.5", x2: "17", y2: "15.5" }),
-    /* @__PURE__ */ jsx7("line", { x1: "11.5", y1: "12", x2: "11.5", y2: "19" })
+  Excel: () => /* @__PURE__ */ jsxs5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx6("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
+    /* @__PURE__ */ jsx6("polyline", { points: "13 2 13 9 20 9" }),
+    /* @__PURE__ */ jsx6("rect", { x: "7", y: "12", width: "10", height: "7", rx: "1" }),
+    /* @__PURE__ */ jsx6("line", { x1: "7", y1: "15.5", x2: "17", y2: "15.5" }),
+    /* @__PURE__ */ jsx6("line", { x1: "11.5", y1: "12", x2: "11.5", y2: "19" })
   ] }),
-  PowerPoint: () => /* @__PURE__ */ jsxs6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx7("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
-    /* @__PURE__ */ jsx7("polyline", { points: "13 2 13 9 20 9" }),
-    /* @__PURE__ */ jsx7("rect", { x: "7", y: "12", width: "10", height: "7", rx: "1" }),
-    /* @__PURE__ */ jsx7("path", { d: "M9 17l2-3 2 2 2-3" })
+  PowerPoint: () => /* @__PURE__ */ jsxs5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx6("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
+    /* @__PURE__ */ jsx6("polyline", { points: "13 2 13 9 20 9" }),
+    /* @__PURE__ */ jsx6("rect", { x: "7", y: "12", width: "10", height: "7", rx: "1" }),
+    /* @__PURE__ */ jsx6("path", { d: "M9 17l2-3 2 2 2-3" })
   ] }),
-  Pdf: () => /* @__PURE__ */ jsxs6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx7("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
-    /* @__PURE__ */ jsx7("polyline", { points: "13 2 13 9 20 9" }),
-    /* @__PURE__ */ jsx7("rect", { x: "7", y: "14", width: "10", height: "4", rx: "1" })
+  Pdf: () => /* @__PURE__ */ jsxs5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx6("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
+    /* @__PURE__ */ jsx6("polyline", { points: "13 2 13 9 20 9" }),
+    /* @__PURE__ */ jsx6("rect", { x: "7", y: "14", width: "10", height: "4", rx: "1" })
   ] }),
-  Image: () => /* @__PURE__ */ jsxs6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx7("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
-    /* @__PURE__ */ jsx7("polyline", { points: "13 2 13 9 20 9" }),
-    /* @__PURE__ */ jsx7("circle", { cx: "9", cy: "13", r: "1.5" }),
-    /* @__PURE__ */ jsx7("path", { d: "M7 18l3-3 2 2 3-3 2 4" })
+  Image: () => /* @__PURE__ */ jsxs5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx6("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
+    /* @__PURE__ */ jsx6("polyline", { points: "13 2 13 9 20 9" }),
+    /* @__PURE__ */ jsx6("circle", { cx: "9", cy: "13", r: "1.5" }),
+    /* @__PURE__ */ jsx6("path", { d: "M7 18l3-3 2 2 3-3 2 4" })
   ] }),
-  Audio: () => /* @__PURE__ */ jsxs6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx7("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
-    /* @__PURE__ */ jsx7("polyline", { points: "13 2 13 9 20 9" }),
-    /* @__PURE__ */ jsx7("path", { d: "M8 16v-2" }),
-    /* @__PURE__ */ jsx7("path", { d: "M10 17v-4" }),
-    /* @__PURE__ */ jsx7("path", { d: "M12 18v-6" }),
-    /* @__PURE__ */ jsx7("path", { d: "M14 17v-4" }),
-    /* @__PURE__ */ jsx7("path", { d: "M16 16v-2" })
+  Audio: () => /* @__PURE__ */ jsxs5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx6("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
+    /* @__PURE__ */ jsx6("polyline", { points: "13 2 13 9 20 9" }),
+    /* @__PURE__ */ jsx6("path", { d: "M8 16v-2" }),
+    /* @__PURE__ */ jsx6("path", { d: "M10 17v-4" }),
+    /* @__PURE__ */ jsx6("path", { d: "M12 18v-6" }),
+    /* @__PURE__ */ jsx6("path", { d: "M14 17v-4" }),
+    /* @__PURE__ */ jsx6("path", { d: "M16 16v-2" })
   ] }),
-  Video: () => /* @__PURE__ */ jsxs6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx7("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
-    /* @__PURE__ */ jsx7("polyline", { points: "13 2 13 9 20 9" }),
-    /* @__PURE__ */ jsx7("rect", { x: "7", y: "12", width: "8", height: "6", rx: "1" }),
-    /* @__PURE__ */ jsx7("polygon", { points: "11 14 14 15 11 16" })
+  Video: () => /* @__PURE__ */ jsxs5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx6("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
+    /* @__PURE__ */ jsx6("polyline", { points: "13 2 13 9 20 9" }),
+    /* @__PURE__ */ jsx6("rect", { x: "7", y: "12", width: "8", height: "6", rx: "1" }),
+    /* @__PURE__ */ jsx6("polygon", { points: "11 14 14 15 11 16" })
   ] }),
-  Globe: () => /* @__PURE__ */ jsxs6(
+  Globe: () => /* @__PURE__ */ jsxs5(
     "svg",
     {
       width: "20",
@@ -972,16 +915,16 @@ var CustomIcons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx7("path", { d: "M2 12h20" }),
-        /* @__PURE__ */ jsx7("path", { d: "M12 2a15.3 15.3 0 0 1 0 20 15.3 15.3 0 0 1 0-20z" })
+        /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx6("path", { d: "M2 12h20" }),
+        /* @__PURE__ */ jsx6("path", { d: "M12 2a15.3 15.3 0 0 1 0 20 15.3 15.3 0 0 1 0-20z" })
       ]
     }
   )
 };
 
 // src/components/Fields/Input/DateInput/index.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var DateInput = ({
   value,
   min,
@@ -1016,7 +959,7 @@ var DateInput = ({
       }
     }
   };
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs6(
     InputWrapper_default,
     {
       type,
@@ -1032,8 +975,8 @@ var DateInput = ({
       className,
       style,
       children: [
-        /* @__PURE__ */ jsx8(Icon, { icon }),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx7(Icon, { icon }),
+        /* @__PURE__ */ jsx7(
           "input",
           {
             ref: inputRef,
@@ -1059,8 +1002,8 @@ var DateInput = ({
             "aria-label": label || placeholder
           }
         ),
-        /* @__PURE__ */ jsx8(
-          Button,
+        /* @__PURE__ */ jsx7(
+          Button2,
           {
             className: "form-field__action",
             type: "button",
@@ -1077,6 +1020,7 @@ var DateInput = ({
 
 // src/components/Fields/Input/FileInput/index.tsx
 import { isValidFile } from "@sio-group/form-validation";
+import { Button as Button3 } from "@sio-group/ui-core";
 
 // src/utils/get-accept-string.ts
 var getAccept = (accept) => {
@@ -1164,7 +1108,7 @@ var FileTypeIcon = (mime) => {
 };
 
 // src/components/Fields/Input/FileInput/index.tsx
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var FileInput = ({
   value,
   onChange,
@@ -1226,8 +1170,8 @@ var FileInput = ({
     onChange(fileList);
     if (onError) onError(errorList ?? []);
   };
-  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
-    /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
+    /* @__PURE__ */ jsxs7(
       InputWrapper_default,
       {
         type,
@@ -1243,8 +1187,8 @@ var FileInput = ({
         className,
         style,
         children: [
-          /* @__PURE__ */ jsx9(Icon, { icon }),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx8(Icon, { icon }),
+          /* @__PURE__ */ jsx8(
             "input",
             {
               type,
@@ -1268,8 +1212,8 @@ var FileInput = ({
               multiple
             }
           ),
-          /* @__PURE__ */ jsx9(
-            Button,
+          /* @__PURE__ */ jsx8(
+            Button3,
             {
               className: "form-field__action",
               type: "button",
@@ -1285,16 +1229,16 @@ var FileInput = ({
         ]
       }
     ),
-    currentFiles.length !== 0 && /* @__PURE__ */ jsxs8("div", { className: "form-field__upload-file-section", children: [
-      currentFiles.map((file, index) => /* @__PURE__ */ jsxs8("div", { className: "form-field__upload-file", children: [
-        /* @__PURE__ */ jsxs8("div", { className: "form-field__upload-file-label", children: [
+    currentFiles.length !== 0 && /* @__PURE__ */ jsxs7("div", { className: "form-field__upload-file-section", children: [
+      currentFiles.map((file, index) => /* @__PURE__ */ jsxs7("div", { className: "form-field__upload-file", children: [
+        /* @__PURE__ */ jsxs7("div", { className: "form-field__upload-file-label", children: [
           FileTypeIcon(file.type || "text/uri-list"),
-          /* @__PURE__ */ jsxs8("span", { children: [
+          /* @__PURE__ */ jsxs7("span", { children: [
             file.name,
             file.size ? ` (${getFileSize(file.size)})` : ""
           ] })
         ] }),
-        /* @__PURE__ */ jsx9("div", { className: "form-field__upload-file__buttons", children: /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx8("div", { className: "form-field__upload-file__buttons", children: /* @__PURE__ */ jsx8(
           "button",
           {
             type: "button",
@@ -1304,7 +1248,7 @@ var FileInput = ({
           }
         ) })
       ] }, index)),
-      /* @__PURE__ */ jsx9("div", { className: "form-field__upload-buttons", children: /* @__PURE__ */ jsxs8(
+      /* @__PURE__ */ jsx8("div", { className: "form-field__upload-buttons", children: /* @__PURE__ */ jsxs7(
         "button",
         {
           type: "button",
@@ -1312,7 +1256,7 @@ var FileInput = ({
           onClick: handleRemoveAll,
           children: [
             CustomIcons.TrashIcon(),
-            /* @__PURE__ */ jsx9("span", { children: "Verwijder alles" })
+            /* @__PURE__ */ jsx8("span", { children: "Verwijder alles" })
           ]
         }
       ) })
@@ -1321,7 +1265,7 @@ var FileInput = ({
 };
 
 // src/components/Fields/Input/TextInput/index.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var TextInput = ({
   value,
   onChange,
@@ -1344,7 +1288,7 @@ var TextInput = ({
   className,
   style
 }) => {
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs8(
     InputWrapper_default,
     {
       type,
@@ -1360,8 +1304,8 @@ var TextInput = ({
       className,
       style,
       children: [
-        /* @__PURE__ */ jsx10(Icon, { icon }),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx9(Icon, { icon }),
+        /* @__PURE__ */ jsx9(
           "input",
           {
             type,
@@ -1389,24 +1333,24 @@ var TextInput = ({
 };
 
 // src/components/Fields/Input/Input.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var Input = memo2(
   (props) => {
     const { type = "text" } = props;
     return useMemo(() => {
       switch (props.type) {
         case "number":
-          return /* @__PURE__ */ jsx11(NumberInput, { ...props });
+          return /* @__PURE__ */ jsx10(NumberInput, { ...props });
         case "range":
-          return /* @__PURE__ */ jsx11(RangeInput, { ...props });
+          return /* @__PURE__ */ jsx10(RangeInput, { ...props });
         case "date":
         case "time":
         case "datetime-local":
-          return /* @__PURE__ */ jsx11(DateInput, { ...props });
+          return /* @__PURE__ */ jsx10(DateInput, { ...props });
         case "file":
-          return /* @__PURE__ */ jsx11(FileInput, { ...props });
+          return /* @__PURE__ */ jsx10(FileInput, { ...props });
         case "hidden":
-          return /* @__PURE__ */ jsx11(
+          return /* @__PURE__ */ jsx10(
             "input",
             {
               type: props.type,
@@ -1416,14 +1360,14 @@ var Input = memo2(
             }
           );
         default:
-          return /* @__PURE__ */ jsx11(TextInput, { ...props });
+          return /* @__PURE__ */ jsx10(TextInput, { ...props });
       }
     }, [type, props]);
   }
 );
 
 // src/components/Fields/Radio/index.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var Radio = ({
   value,
   onChange,
@@ -1445,7 +1389,7 @@ var Radio = ({
   className,
   style
 }) => {
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs9(
     InputWrapper_default,
     {
       type,
@@ -1461,16 +1405,16 @@ var Radio = ({
       style,
       hideLayout: true,
       children: [
-        /* @__PURE__ */ jsx12(Icon, { icon }),
+        /* @__PURE__ */ jsx11(Icon, { icon }),
         options.filter((option) => typeof option === "string" || !option.hide).map((option) => {
           const opt = typeof option === "string" ? { value: option, label: option } : option;
-          return /* @__PURE__ */ jsxs10(
+          return /* @__PURE__ */ jsxs9(
             "label",
             {
               htmlFor: `${id}-${opt.value}`,
               className: value === opt.value ? "form-field--has-value" : "",
               children: [
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx11(
                   "input",
                   {
                     name,
@@ -1486,7 +1430,7 @@ var Radio = ({
                     disabled: opt.disabled || disabled
                   }
                 ),
-                /* @__PURE__ */ jsx12("div", { children: opt.label })
+                /* @__PURE__ */ jsx11("div", { children: opt.label })
               ]
             },
             opt.value
@@ -1498,7 +1442,7 @@ var Radio = ({
 };
 
 // src/components/Fields/Select/index.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var Select = ({
   value,
   onChange,
@@ -1525,13 +1469,13 @@ var Select = ({
 }) => {
   const renderOption = (option) => {
     if (typeof option === "string") {
-      return /* @__PURE__ */ jsx13("option", { value: option, children: option }, option);
+      return /* @__PURE__ */ jsx12("option", { value: option, children: option }, option);
     }
     if ("options" in option) {
-      return /* @__PURE__ */ jsx13("optgroup", { label: option.label, children: option.options.map(renderOption) }, option.label);
+      return /* @__PURE__ */ jsx12("optgroup", { label: option.label, children: option.options.map(renderOption) }, option.label);
     }
     if (option.hide) return null;
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx12(
       "option",
       {
         value: option.value,
@@ -1541,7 +1485,7 @@ var Select = ({
       option.value
     );
   };
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs10(
     InputWrapper_default,
     {
       type,
@@ -1557,8 +1501,8 @@ var Select = ({
       className: `${className ?? ""} ${multiple ? "form-field__select-multiple" : "form-field__select-single"}`,
       style,
       children: [
-        /* @__PURE__ */ jsx13(Icon, { icon }),
-        /* @__PURE__ */ jsxs11(
+        /* @__PURE__ */ jsx12(Icon, { icon }),
+        /* @__PURE__ */ jsxs10(
           "select",
           {
             name,
@@ -1584,7 +1528,7 @@ var Select = ({
             multiple,
             "aria-label": label || placeholder,
             children: [
-              placeholder && /* @__PURE__ */ jsxs11("option", { value: "", selected: true, disabled: true, children: [
+              placeholder && /* @__PURE__ */ jsxs10("option", { value: "", selected: true, disabled: true, children: [
                 placeholder,
                 !label && required ? " *" : ""
               ] }),
@@ -1598,7 +1542,7 @@ var Select = ({
 };
 
 // src/components/Fields/Textarea/index.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var Textarea = ({
   value,
   onChange,
@@ -1623,7 +1567,7 @@ var Textarea = ({
   className,
   style
 }) => {
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs11(
     InputWrapper_default,
     {
       type,
@@ -1639,8 +1583,8 @@ var Textarea = ({
       className,
       style,
       children: [
-        /* @__PURE__ */ jsx14(Icon, { icon }),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx13(Icon, { icon }),
+        /* @__PURE__ */ jsx13(
           "textarea",
           {
             name,
@@ -1668,76 +1612,12 @@ var Textarea = ({
   );
 };
 
-// src/components/Link/index.tsx
-import React4 from "react";
-import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
-var LinkComponent = ({
-  label,
-  to = "#",
-  onClick,
-  color = "default",
-  size = "md",
-  block = false,
-  loading = false,
-  disabled = false,
-  className = "",
-  ariaLabel = "",
-  navigate,
-  external = false,
-  style = {},
-  children
-}) => {
-  const isDisabled = disabled || loading;
-  const isExternal = external || /^(https?:|mailto:|tel:|ftp:)/.test(to);
-  const handleClick = (e) => {
-    if (isDisabled) {
-      e.preventDefault();
-      return;
-    }
-    onClick?.(e);
-    if (!isExternal && navigate) {
-      e.preventDefault();
-      navigate();
-    }
-  };
-  const linkClasses = [
-    "link",
-    `link--${color}`,
-    `btn--${size}`,
-    block && "link--block",
-    loading && "link--loading",
-    isDisabled && "link--disabled",
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx15(
-    "a",
-    {
-      href: isDisabled ? void 0 : to,
-      onClick: handleClick,
-      className: linkClasses,
-      style,
-      "aria-label": ariaLabel || label,
-      "aria-busy": loading,
-      "aria-disabled": isDisabled,
-      target: isExternal ? "_blank" : void 0,
-      rel: isExternal ? "noopener noreferrer" : void 0,
-      children: loading ? /* @__PURE__ */ jsxs13(Fragment3, { children: [
-        /* @__PURE__ */ jsx15("span", { className: "btn__spinner", "aria-hidden": "true", children: /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx15("circle", { cx: "10", cy: "10", r: "8" }) }) }),
-        /* @__PURE__ */ jsx15("span", { className: "btn__loading-text", children: "Processing..." })
-      ] }) : /* @__PURE__ */ jsxs13(Fragment3, { children: [
-        children,
-        label && /* @__PURE__ */ jsx15("span", { className: "btn__label", children: label })
-      ] })
-    }
-  );
-};
-var Link = React4.memo(LinkComponent);
-
 // src/components/Form.tsx
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Link, Button as Button4 } from "@sio-group/ui-core";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 import { createElement } from "react";
-var DefaultContainer = ({ children }) => /* @__PURE__ */ jsx16("div", { children });
-var DefaultButtonContainer = ({ children }) => /* @__PURE__ */ jsx16("div", { className: "btn-group", children });
+var DefaultContainer = ({ children }) => /* @__PURE__ */ jsx14("div", { children });
+var DefaultButtonContainer = ({ children }) => /* @__PURE__ */ jsx14("div", { className: "btn-group", children });
 var Form = ({
   fields,
   layout = [],
@@ -1784,7 +1664,7 @@ var Form = ({
       case "hidden":
         return /* @__PURE__ */ createElement(Input, { ...register(field.name, field, renderLayout), key: field.name });
       default:
-        return /* @__PURE__ */ jsxs14("div", { children: [
+        return /* @__PURE__ */ jsxs12("div", { children: [
           field.type,
           " to implement"
         ] }, field.name);
@@ -1796,7 +1676,7 @@ var Form = ({
     const content = target.map((element) => {
       if ("fields" in element) {
         const classes = getColumnClasses(element.layout, element.layout?.className);
-        return /* @__PURE__ */ jsx16(
+        return /* @__PURE__ */ jsx14(
           "div",
           {
             className: classes,
@@ -1811,7 +1691,7 @@ var Form = ({
       }
       return loadElement(element, hasLayout);
     });
-    return hasLayout ? /* @__PURE__ */ jsx16("div", { className: "sio-row", children: content }) : content;
+    return hasLayout ? /* @__PURE__ */ jsx14("div", { className: "sio-row", children: content }) : content;
   };
   const fieldMap = useMemo2(() => {
     const map = /* @__PURE__ */ new Map();
@@ -1827,12 +1707,12 @@ var Form = ({
     reset();
   };
   const renderButton = (props, i) => {
-    return props.type === "link" ? /* @__PURE__ */ createElement(Link, { ...props, key: i }) : /* @__PURE__ */ createElement(Button, { ...props, key: i });
+    return props.type === "link" ? /* @__PURE__ */ createElement(Link, { ...props, key: i }) : /* @__PURE__ */ createElement(Button4, { ...props, key: i });
   };
   const renderButtons = () => {
-    return submitShow || cancelShow || buttons.length ? /* @__PURE__ */ jsxs14(ButtonContainer, { children: [
-      submitShow && /* @__PURE__ */ jsx16(
-        Button,
+    return submitShow || cancelShow || buttons.length ? /* @__PURE__ */ jsxs12(ButtonContainer, { children: [
+      submitShow && /* @__PURE__ */ jsx14(
+        Button4,
         {
           type: "submit",
           onClick: handleSubmit,
@@ -1842,32 +1722,29 @@ var Form = ({
           disabled: !isValid() || !extraValidation(getValues())
         }
       ),
-      cancelShow && /* @__PURE__ */ jsx16(
-        Button,
+      cancelShow && /* @__PURE__ */ jsx14(
+        Button4,
         {
           type: "button",
           onClick: handleCancel,
           variant: "secondary",
-          label: cancelLabel,
-          disabled: !isDirty()
+          label: cancelLabel
         }
       ),
       buttons?.map(renderButton)
     ] }) : null;
   };
-  return /* @__PURE__ */ jsxs14("form", { className, style, noValidate: true, children: [
-    /* @__PURE__ */ jsx16(Container, { children: renderFields() }),
+  return /* @__PURE__ */ jsxs12("form", { className, style, noValidate: true, children: [
+    /* @__PURE__ */ jsx14(Container, { children: renderFields() }),
     renderButtons()
   ] });
 };
 export {
-  Button,
   Checkbox,
   DateInput,
   FileInput,
   Form,
   Input,
-  Link,
   NumberInput,
   Radio,
   RangeInput,