@fctc/sme-widget-ui 1.7.5 → 1.7.6

package/dist/index.js

@@ -4297,7 +4297,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element2 = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment32 = REACT_FRAGMENT_TYPE;
+        var Fragment33 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal2 = REACT_PORTAL_TYPE;
@@ -4356,7 +4356,7 @@ var require_react_is_development = __commonJS({
         exports2.ContextProvider = ContextProvider;
         exports2.Element = Element2;
         exports2.ForwardRef = ForwardRef;
-        exports2.Fragment = Fragment32;
+        exports2.Fragment = Fragment33;
         exports2.Lazy = Lazy;
         exports2.Memo = Memo;
         exports2.Portal = Portal2;
@@ -35276,82 +35276,136 @@ var import_jsx_runtime105 = require("react/jsx-runtime");
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
   const memoizedStatusOptions = (0, import_react66.useMemo)(() => selection, [selection]);
+  const indexInProgress = memoizedStatusOptions?.findIndex(
+    (option) => option?.[0] === defaultValue
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
     "div",
     {
       style: {
         display: "flex",
         alignItems: "center",
-        flexWrap: "wrap",
-        overflow: "hidden"
+        flexWrap: "wrap"
       },
       children: memoizedStatusOptions?.map((option, index4) => {
-        const value = option?.[0] === defaultValue;
-        return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
-          "label",
-          {
-            style: {
-              position: "relative",
-              flexShrink: 0,
-              cursor: "default",
-              height: "36px",
-              display: "flex",
-              alignItems: "center",
-              paddingLeft: "32px",
-              // pl-8
-              paddingRight: "20px",
-              // pr-[20px]
-              fontWeight: 600,
-              // font-semibold
-              fontSize: "14px",
-              background: value ? "var(--color-primary)" : "#FAFAFA",
-              color: value ? "#fff" : "#121212",
-              borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
-              // rounded-l-xl
-              borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
-              borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
-              // rounded-r-xl
-              borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
-                "input",
-                {
-                  type: "radio",
-                  checked: value,
-                  style: { display: "none" },
-                  disabled: true
-                }
-              ),
-              option[1],
-              !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: "50%",
-                    transform: "translateY(-50%) rotate(45deg)",
-                    zIndex: 2,
-                    width: "26px",
-                    height: "26px",
-                    right: "-13px",
-                    background: value ? "var(--color-primary)" : "#FAFAFA",
-                    border: value ? "none" : "1px solid rgba(0,0,0,0.04)",
-                    borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
-                    borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
-                    borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
-                    borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
+        return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_jsx_runtime105.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
+            "div",
+            {
+              style: {
+                position: "relative",
+                flexShrink: 0,
+                cursor: "default",
+                padding: "4px",
+                display: "flex",
+                alignItems: "center",
+                fontWeight: 600,
+                fontSize: "12px",
+                background: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#D5F1E0" : index4 === indexInProgress ? "#FFF" : "#F3F3F3",
+                color: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#666" : "#AEAEAE",
+                borderRadius: "16px",
+                boxShadow: index4 === indexInProgress ? "0 1px 2px 0 rgba(51, 51, 51, 0.04), 0 2px 4px 0 rgba(51, 51, 51, 0.04), 0 4px 8px -2px rgba(51, 51, 51, 0.06), 0 0 0 1px rgba(51, 51, 51, 0.04), 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06) inset" : ""
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+                  "span",
+                  {
+                    style: {
+                      backgroundColor: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#FF3F89" : "#FFF",
+                      width: 20,
+                      height: 20,
+                      display: "flex",
+                      justifyContent: "center",
+                      alignItems: "center",
+                      borderRadius: "100%"
+                    },
+                    children: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ICCheck, {}) : index4 === indexInProgress ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ICCircle, {}) : /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ICMinus, {})
                   }
-                }
-              )
-            ]
-          },
-          option?.[0]
-        );
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+                  "span",
+                  {
+                    style: {
+                      padding: "0 6px"
+                    },
+                    children: option[1]
+                  }
+                )
+              ]
+            },
+            option?.[0]
+          ),
+          !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+            "div",
+            {
+              style: {
+                height: "3px",
+                width: "6px",
+                backgroundColor: "#F3F3F3"
+              }
+            }
+          )
+        ] });
       })
     }
   );
 };
+var ICMinus = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+        "path",
+        {
+          d: "M4 8H12",
+          stroke: "#C3C3C3",
+          "stroke-width": "1.5",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }
+      )
+    }
+  );
+};
+var ICCircle = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "8",
+      height: "8",
+      viewBox: "0 0 8 8",
+      fill: "none",
+      children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("circle", { cx: "4", cy: "4", r: "4", fill: "white" })
+    }
+  );
+};
+var ICCheck = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+        "path",
+        {
+          d: "M13.3408 5.23535L13.252 5.32324L6.88867 11.6875L6.7998 11.7764L6.71191 11.6875L2.89258 7.86914L2.80469 7.78125L2.89258 7.69238L3.74121 6.84375L3.83008 6.75586L6.7998 9.72559L12.2266 4.29785L12.3154 4.20996L13.3408 5.23535Z",
+          fill: "white",
+          stroke: "white",
+          "stroke-width": "0.25"
+        }
+      )
+    }
+  );
+};
 
 // src/widgets/basic/date-option-field/date-option.tsx
 var import_jsx_runtime106 = require("react/jsx-runtime");

package/dist/index.mjs

@@ -4297,7 +4297,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element2 = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment32 = REACT_FRAGMENT_TYPE;
+        var Fragment33 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal2 = REACT_PORTAL_TYPE;
@@ -4356,7 +4356,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element2;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment32;
+        exports.Fragment = Fragment33;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal2;
@@ -35151,86 +35151,140 @@ var StatusbarDurationField = (props) => {
 
 // src/widgets/basic/status-bar-field/option/option.tsx
 import { useMemo as useMemo11 } from "react";
-import { jsx as jsx107, jsxs as jsxs73 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx107, jsxs as jsxs73 } from "react/jsx-runtime";
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
   const memoizedStatusOptions = useMemo11(() => selection, [selection]);
+  const indexInProgress = memoizedStatusOptions?.findIndex(
+    (option) => option?.[0] === defaultValue
+  );
   return /* @__PURE__ */ jsx107(
     "div",
     {
       style: {
         display: "flex",
         alignItems: "center",
-        flexWrap: "wrap",
-        overflow: "hidden"
+        flexWrap: "wrap"
       },
       children: memoizedStatusOptions?.map((option, index4) => {
-        const value = option?.[0] === defaultValue;
-        return /* @__PURE__ */ jsxs73(
-          "label",
-          {
-            style: {
-              position: "relative",
-              flexShrink: 0,
-              cursor: "default",
-              height: "36px",
-              display: "flex",
-              alignItems: "center",
-              paddingLeft: "32px",
-              // pl-8
-              paddingRight: "20px",
-              // pr-[20px]
-              fontWeight: 600,
-              // font-semibold
-              fontSize: "14px",
-              background: value ? "var(--color-primary)" : "#FAFAFA",
-              color: value ? "#fff" : "#121212",
-              borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
-              // rounded-l-xl
-              borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
-              borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
-              // rounded-r-xl
-              borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
-            },
-            children: [
-              /* @__PURE__ */ jsx107(
-                "input",
-                {
-                  type: "radio",
-                  checked: value,
-                  style: { display: "none" },
-                  disabled: true
-                }
-              ),
-              option[1],
-              !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx107(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: "50%",
-                    transform: "translateY(-50%) rotate(45deg)",
-                    zIndex: 2,
-                    width: "26px",
-                    height: "26px",
-                    right: "-13px",
-                    background: value ? "var(--color-primary)" : "#FAFAFA",
-                    border: value ? "none" : "1px solid rgba(0,0,0,0.04)",
-                    borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
-                    borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
-                    borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
-                    borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
+        return /* @__PURE__ */ jsxs73(Fragment32, { children: [
+          /* @__PURE__ */ jsxs73(
+            "div",
+            {
+              style: {
+                position: "relative",
+                flexShrink: 0,
+                cursor: "default",
+                padding: "4px",
+                display: "flex",
+                alignItems: "center",
+                fontWeight: 600,
+                fontSize: "12px",
+                background: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#D5F1E0" : index4 === indexInProgress ? "#FFF" : "#F3F3F3",
+                color: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#666" : "#AEAEAE",
+                borderRadius: "16px",
+                boxShadow: index4 === indexInProgress ? "0 1px 2px 0 rgba(51, 51, 51, 0.04), 0 2px 4px 0 rgba(51, 51, 51, 0.04), 0 4px 8px -2px rgba(51, 51, 51, 0.06), 0 0 0 1px rgba(51, 51, 51, 0.04), 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06) inset" : ""
+              },
+              children: [
+                /* @__PURE__ */ jsx107(
+                  "span",
+                  {
+                    style: {
+                      backgroundColor: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#FF3F89" : "#FFF",
+                      width: 20,
+                      height: 20,
+                      display: "flex",
+                      justifyContent: "center",
+                      alignItems: "center",
+                      borderRadius: "100%"
+                    },
+                    children: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? /* @__PURE__ */ jsx107(ICCheck, {}) : index4 === indexInProgress ? /* @__PURE__ */ jsx107(ICCircle, {}) : /* @__PURE__ */ jsx107(ICMinus, {})
                   }
-                }
-              )
-            ]
-          },
-          option?.[0]
-        );
+                ),
+                /* @__PURE__ */ jsx107(
+                  "span",
+                  {
+                    style: {
+                      padding: "0 6px"
+                    },
+                    children: option[1]
+                  }
+                )
+              ]
+            },
+            option?.[0]
+          ),
+          !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx107(
+            "div",
+            {
+              style: {
+                height: "3px",
+                width: "6px",
+                backgroundColor: "#F3F3F3"
+              }
+            }
+          )
+        ] });
       })
     }
   );
 };
+var ICMinus = () => {
+  return /* @__PURE__ */ jsx107(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      children: /* @__PURE__ */ jsx107(
+        "path",
+        {
+          d: "M4 8H12",
+          stroke: "#C3C3C3",
+          "stroke-width": "1.5",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }
+      )
+    }
+  );
+};
+var ICCircle = () => {
+  return /* @__PURE__ */ jsx107(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "8",
+      height: "8",
+      viewBox: "0 0 8 8",
+      fill: "none",
+      children: /* @__PURE__ */ jsx107("circle", { cx: "4", cy: "4", r: "4", fill: "white" })
+    }
+  );
+};
+var ICCheck = () => {
+  return /* @__PURE__ */ jsx107(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      children: /* @__PURE__ */ jsx107(
+        "path",
+        {
+          d: "M13.3408 5.23535L13.252 5.32324L6.88867 11.6875L6.7998 11.7764L6.71191 11.6875L2.89258 7.86914L2.80469 7.78125L2.89258 7.69238L3.74121 6.84375L3.83008 6.75586L6.7998 9.72559L12.2266 4.29785L12.3154 4.20996L13.3408 5.23535Z",
+          fill: "white",
+          stroke: "white",
+          "stroke-width": "0.25"
+        }
+      )
+    }
+  );
+};
 
 // src/widgets/basic/date-option-field/date-option.tsx
 import { jsx as jsx108, jsxs as jsxs74 } from "react/jsx-runtime";

package/dist/widgets.js

@@ -4297,7 +4297,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element2 = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment32 = REACT_FRAGMENT_TYPE;
+        var Fragment33 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal2 = REACT_PORTAL_TYPE;
@@ -4356,7 +4356,7 @@ var require_react_is_development = __commonJS({
         exports2.ContextProvider = ContextProvider;
         exports2.Element = Element2;
         exports2.ForwardRef = ForwardRef;
-        exports2.Fragment = Fragment32;
+        exports2.Fragment = Fragment33;
         exports2.Lazy = Lazy;
         exports2.Memo = Memo;
         exports2.Portal = Portal2;
@@ -34900,82 +34900,136 @@ var import_jsx_runtime105 = require("react/jsx-runtime");
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
   const memoizedStatusOptions = (0, import_react66.useMemo)(() => selection, [selection]);
+  const indexInProgress = memoizedStatusOptions?.findIndex(
+    (option) => option?.[0] === defaultValue
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
     "div",
     {
       style: {
         display: "flex",
         alignItems: "center",
-        flexWrap: "wrap",
-        overflow: "hidden"
+        flexWrap: "wrap"
       },
       children: memoizedStatusOptions?.map((option, index4) => {
-        const value = option?.[0] === defaultValue;
-        return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
-          "label",
-          {
-            style: {
-              position: "relative",
-              flexShrink: 0,
-              cursor: "default",
-              height: "36px",
-              display: "flex",
-              alignItems: "center",
-              paddingLeft: "32px",
-              // pl-8
-              paddingRight: "20px",
-              // pr-[20px]
-              fontWeight: 600,
-              // font-semibold
-              fontSize: "14px",
-              background: value ? "var(--color-primary)" : "#FAFAFA",
-              color: value ? "#fff" : "#121212",
-              borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
-              // rounded-l-xl
-              borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
-              borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
-              // rounded-r-xl
-              borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
-                "input",
-                {
-                  type: "radio",
-                  checked: value,
-                  style: { display: "none" },
-                  disabled: true
-                }
-              ),
-              option[1],
-              !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: "50%",
-                    transform: "translateY(-50%) rotate(45deg)",
-                    zIndex: 2,
-                    width: "26px",
-                    height: "26px",
-                    right: "-13px",
-                    background: value ? "var(--color-primary)" : "#FAFAFA",
-                    border: value ? "none" : "1px solid rgba(0,0,0,0.04)",
-                    borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
-                    borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
-                    borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
-                    borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
+        return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_jsx_runtime105.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
+            "div",
+            {
+              style: {
+                position: "relative",
+                flexShrink: 0,
+                cursor: "default",
+                padding: "4px",
+                display: "flex",
+                alignItems: "center",
+                fontWeight: 600,
+                fontSize: "12px",
+                background: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#D5F1E0" : index4 === indexInProgress ? "#FFF" : "#F3F3F3",
+                color: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#666" : "#AEAEAE",
+                borderRadius: "16px",
+                boxShadow: index4 === indexInProgress ? "0 1px 2px 0 rgba(51, 51, 51, 0.04), 0 2px 4px 0 rgba(51, 51, 51, 0.04), 0 4px 8px -2px rgba(51, 51, 51, 0.06), 0 0 0 1px rgba(51, 51, 51, 0.04), 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06) inset" : ""
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+                  "span",
+                  {
+                    style: {
+                      backgroundColor: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#FF3F89" : "#FFF",
+                      width: 20,
+                      height: 20,
+                      display: "flex",
+                      justifyContent: "center",
+                      alignItems: "center",
+                      borderRadius: "100%"
+                    },
+                    children: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ICCheck, {}) : index4 === indexInProgress ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ICCircle, {}) : /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ICMinus, {})
                   }
-                }
-              )
-            ]
-          },
-          option?.[0]
-        );
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+                  "span",
+                  {
+                    style: {
+                      padding: "0 6px"
+                    },
+                    children: option[1]
+                  }
+                )
+              ]
+            },
+            option?.[0]
+          ),
+          !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+            "div",
+            {
+              style: {
+                height: "3px",
+                width: "6px",
+                backgroundColor: "#F3F3F3"
+              }
+            }
+          )
+        ] });
       })
     }
   );
 };
+var ICMinus = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+        "path",
+        {
+          d: "M4 8H12",
+          stroke: "#C3C3C3",
+          "stroke-width": "1.5",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }
+      )
+    }
+  );
+};
+var ICCircle = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "8",
+      height: "8",
+      viewBox: "0 0 8 8",
+      fill: "none",
+      children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("circle", { cx: "4", cy: "4", r: "4", fill: "white" })
+    }
+  );
+};
+var ICCheck = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+        "path",
+        {
+          d: "M13.3408 5.23535L13.252 5.32324L6.88867 11.6875L6.7998 11.7764L6.71191 11.6875L2.89258 7.86914L2.80469 7.78125L2.89258 7.69238L3.74121 6.84375L3.83008 6.75586L6.7998 9.72559L12.2266 4.29785L12.3154 4.20996L13.3408 5.23535Z",
+          fill: "white",
+          stroke: "white",
+          "stroke-width": "0.25"
+        }
+      )
+    }
+  );
+};
 
 // src/widgets/basic/date-option-field/date-option.tsx
 var import_jsx_runtime106 = require("react/jsx-runtime");

package/dist/widgets.mjs

@@ -4297,7 +4297,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element2 = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment32 = REACT_FRAGMENT_TYPE;
+        var Fragment33 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal2 = REACT_PORTAL_TYPE;
@@ -4356,7 +4356,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element2;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment32;
+        exports.Fragment = Fragment33;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal2;
@@ -34833,86 +34833,140 @@ var StatusbarDurationField = (props) => {
 
 // src/widgets/basic/status-bar-field/option/option.tsx
 import { useMemo as useMemo11 } from "react";
-import { jsx as jsx107, jsxs as jsxs73 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx107, jsxs as jsxs73 } from "react/jsx-runtime";
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
   const memoizedStatusOptions = useMemo11(() => selection, [selection]);
+  const indexInProgress = memoizedStatusOptions?.findIndex(
+    (option) => option?.[0] === defaultValue
+  );
   return /* @__PURE__ */ jsx107(
     "div",
     {
       style: {
         display: "flex",
         alignItems: "center",
-        flexWrap: "wrap",
-        overflow: "hidden"
+        flexWrap: "wrap"
       },
       children: memoizedStatusOptions?.map((option, index4) => {
-        const value = option?.[0] === defaultValue;
-        return /* @__PURE__ */ jsxs73(
-          "label",
-          {
-            style: {
-              position: "relative",
-              flexShrink: 0,
-              cursor: "default",
-              height: "36px",
-              display: "flex",
-              alignItems: "center",
-              paddingLeft: "32px",
-              // pl-8
-              paddingRight: "20px",
-              // pr-[20px]
-              fontWeight: 600,
-              // font-semibold
-              fontSize: "14px",
-              background: value ? "var(--color-primary)" : "#FAFAFA",
-              color: value ? "#fff" : "#121212",
-              borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
-              // rounded-l-xl
-              borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
-              borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
-              // rounded-r-xl
-              borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
-            },
-            children: [
-              /* @__PURE__ */ jsx107(
-                "input",
-                {
-                  type: "radio",
-                  checked: value,
-                  style: { display: "none" },
-                  disabled: true
-                }
-              ),
-              option[1],
-              !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx107(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: "50%",
-                    transform: "translateY(-50%) rotate(45deg)",
-                    zIndex: 2,
-                    width: "26px",
-                    height: "26px",
-                    right: "-13px",
-                    background: value ? "var(--color-primary)" : "#FAFAFA",
-                    border: value ? "none" : "1px solid rgba(0,0,0,0.04)",
-                    borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
-                    borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
-                    borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
-                    borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
+        return /* @__PURE__ */ jsxs73(Fragment32, { children: [
+          /* @__PURE__ */ jsxs73(
+            "div",
+            {
+              style: {
+                position: "relative",
+                flexShrink: 0,
+                cursor: "default",
+                padding: "4px",
+                display: "flex",
+                alignItems: "center",
+                fontWeight: 600,
+                fontSize: "12px",
+                background: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#D5F1E0" : index4 === indexInProgress ? "#FFF" : "#F3F3F3",
+                color: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#666" : "#AEAEAE",
+                borderRadius: "16px",
+                boxShadow: index4 === indexInProgress ? "0 1px 2px 0 rgba(51, 51, 51, 0.04), 0 2px 4px 0 rgba(51, 51, 51, 0.04), 0 4px 8px -2px rgba(51, 51, 51, 0.06), 0 0 0 1px rgba(51, 51, 51, 0.04), 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06) inset" : ""
+              },
+              children: [
+                /* @__PURE__ */ jsx107(
+                  "span",
+                  {
+                    style: {
+                      backgroundColor: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#FF3F89" : "#FFF",
+                      width: 20,
+                      height: 20,
+                      display: "flex",
+                      justifyContent: "center",
+                      alignItems: "center",
+                      borderRadius: "100%"
+                    },
+                    children: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? /* @__PURE__ */ jsx107(ICCheck, {}) : index4 === indexInProgress ? /* @__PURE__ */ jsx107(ICCircle, {}) : /* @__PURE__ */ jsx107(ICMinus, {})
                   }
-                }
-              )
-            ]
-          },
-          option?.[0]
-        );
+                ),
+                /* @__PURE__ */ jsx107(
+                  "span",
+                  {
+                    style: {
+                      padding: "0 6px"
+                    },
+                    children: option[1]
+                  }
+                )
+              ]
+            },
+            option?.[0]
+          ),
+          !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx107(
+            "div",
+            {
+              style: {
+                height: "3px",
+                width: "6px",
+                backgroundColor: "#F3F3F3"
+              }
+            }
+          )
+        ] });
       })
     }
   );
 };
+var ICMinus = () => {
+  return /* @__PURE__ */ jsx107(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      children: /* @__PURE__ */ jsx107(
+        "path",
+        {
+          d: "M4 8H12",
+          stroke: "#C3C3C3",
+          "stroke-width": "1.5",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }
+      )
+    }
+  );
+};
+var ICCircle = () => {
+  return /* @__PURE__ */ jsx107(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "8",
+      height: "8",
+      viewBox: "0 0 8 8",
+      fill: "none",
+      children: /* @__PURE__ */ jsx107("circle", { cx: "4", cy: "4", r: "4", fill: "white" })
+    }
+  );
+};
+var ICCheck = () => {
+  return /* @__PURE__ */ jsx107(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      children: /* @__PURE__ */ jsx107(
+        "path",
+        {
+          d: "M13.3408 5.23535L13.252 5.32324L6.88867 11.6875L6.7998 11.7764L6.71191 11.6875L2.89258 7.86914L2.80469 7.78125L2.89258 7.69238L3.74121 6.84375L3.83008 6.75586L6.7998 9.72559L12.2266 4.29785L12.3154 4.20996L13.3408 5.23535Z",
+          fill: "white",
+          stroke: "white",
+          "stroke-width": "0.25"
+        }
+      )
+    }
+  );
+};
 
 // src/widgets/basic/date-option-field/date-option.tsx
 import { jsx as jsx108, jsxs as jsxs74 } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fctc/sme-widget-ui",
-  "version": "1.7.5",
+  "version": "1.7.6",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",