@fctc/sme-widget-ui 1.7.5 → 1.7.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/widgets.js CHANGED
@@ -4297,7 +4297,7 @@ var require_react_is_development = __commonJS({
4297
4297
  var ContextProvider = REACT_PROVIDER_TYPE;
4298
4298
  var Element2 = REACT_ELEMENT_TYPE;
4299
4299
  var ForwardRef = REACT_FORWARD_REF_TYPE;
4300
- var Fragment32 = REACT_FRAGMENT_TYPE;
4300
+ var Fragment33 = REACT_FRAGMENT_TYPE;
4301
4301
  var Lazy = REACT_LAZY_TYPE;
4302
4302
  var Memo = REACT_MEMO_TYPE;
4303
4303
  var Portal2 = REACT_PORTAL_TYPE;
@@ -4356,7 +4356,7 @@ var require_react_is_development = __commonJS({
4356
4356
  exports2.ContextProvider = ContextProvider;
4357
4357
  exports2.Element = Element2;
4358
4358
  exports2.ForwardRef = ForwardRef;
4359
- exports2.Fragment = Fragment32;
4359
+ exports2.Fragment = Fragment33;
4360
4360
  exports2.Lazy = Lazy;
4361
4361
  exports2.Memo = Memo;
4362
4362
  exports2.Portal = Portal2;
@@ -5778,16 +5778,6 @@ var COLORS = [
5778
5778
  }
5779
5779
  ];
5780
5780
  var DOTS = "...";
5781
- var typeStyles = {
5782
- primary: "bg-blue-500 text-white",
5783
- secondary: "bg-lime-600 text-white",
5784
- danger: "bg-[rgba(237,28,36,0.1)] text-[#F5222D]",
5785
- info: "bg-[rgba(5,152,237,0.12)] text-[rgb(5,152,237)]",
5786
- success: "bg-[rgba(46,181,83,0.1)] text-[rgb(46,181,83)]",
5787
- warning: "bg-[rgba(237,166,28,0.1)] text-[rgb(250,140,22)]",
5788
- default: "bg-[#dee2e6]",
5789
- light: "bg-white text-gray-800 shadow-md"
5790
- };
5791
5781
  var SearchType = {
5792
5782
  FILTER: "filter_by",
5793
5783
  SEARCH: "search_by",
@@ -18125,6 +18115,58 @@ var BinaryField = (props) => {
18125
18115
 
18126
18116
  // src/widgets/basic/button-badge-field/button-badge.tsx
18127
18117
  var import_jsx_runtime71 = require("react/jsx-runtime");
18118
+ var typeStyles = {
18119
+ primary: {
18120
+ backgroundColor: "#3b82f6",
18121
+ color: "#fff",
18122
+ border: "1px solid #fff"
18123
+ },
18124
+ secondary: {
18125
+ backgroundColor: "#EBF1FF",
18126
+ color: "#2597D0",
18127
+ border: "1px solid #35ADE9"
18128
+ },
18129
+ danger: {
18130
+ backgroundColor: "#FFEBEC",
18131
+ color: "#E93544",
18132
+ border: "1px solid #FB2B3D"
18133
+ },
18134
+ info: {
18135
+ backgroundColor: "rgba(5,152,237,0.12)",
18136
+ color: "rgb(5,152,237)",
18137
+ border: "1px solid rgb(5,152,237)"
18138
+ },
18139
+ success: {
18140
+ backgroundColor: "#E0FAEB",
18141
+ color: "#12AF53",
18142
+ border: "1px solid #1FC163"
18143
+ },
18144
+ warning: {
18145
+ backgroundColor: "#FFFAEB",
18146
+ color: "#E6A819)",
18147
+ border: "1px solid #F6B51E"
18148
+ },
18149
+ default: {
18150
+ backgroundColor: "#dee2e6",
18151
+ color: "#000",
18152
+ border: "1px solid #000"
18153
+ },
18154
+ light: {
18155
+ backgroundColor: "#fff",
18156
+ color: "#1f2937",
18157
+ border: "1px solid #1f2937"
18158
+ }
18159
+ };
18160
+ var baseStyle = {
18161
+ borderRadius: "4px",
18162
+ fontSize: "12px",
18163
+ padding: "4px 8px",
18164
+ width: "fit-content",
18165
+ textAlign: "center",
18166
+ fontWeight: 500,
18167
+ cursor: "pointer",
18168
+ transition: "all 0.3s ease-in-out"
18169
+ };
18128
18170
  var ButtonBadgeField = (props) => {
18129
18171
  const { defaultValue, selection, value, formValues, domainHelper } = props;
18130
18172
  const decorationSuccess = props["decoration-success"] && domainHelper.checkDomain(formValues, props["decoration-success"]);
@@ -18132,31 +18174,21 @@ var ButtonBadgeField = (props) => {
18132
18174
  const decorationDanger = props["decoration-danger"] && domainHelper.checkDomain(formValues, props["decoration-danger"]);
18133
18175
  const decorationWarning = props["decoration-warning"] && domainHelper.checkDomain(formValues, props["decoration-warning"]);
18134
18176
  const getType = () => {
18135
- if (decorationInfo) {
18136
- return typeStyles["info"];
18137
- }
18138
- if (decorationSuccess) {
18139
- return typeStyles["success"];
18140
- }
18141
- if (decorationDanger) {
18142
- return typeStyles["danger"];
18143
- }
18144
- if (decorationWarning) {
18145
- return typeStyles["warning"];
18146
- }
18177
+ if (decorationInfo) return typeStyles["info"];
18178
+ if (decorationSuccess) return typeStyles["success"];
18179
+ if (decorationDanger) return typeStyles["danger"];
18180
+ if (decorationWarning) return typeStyles["warning"];
18147
18181
  return typeStyles["default"];
18148
18182
  };
18149
- const baseStyle = "rounded-full text-xs px-[0.82rem] w-fit py-1 text-center font-medium cursor-pointer transition duration-300 ease-in-out transform";
18150
- const buttonClass = `${baseStyle} ${getType()}`;
18151
18183
  const getLabel = (value2) => {
18152
18184
  if (!value2) return "";
18153
- const item = selection?.find((item2) => {
18154
- return Array.isArray(item2) && item2[0] === value2;
18155
- });
18185
+ const item = selection?.find(
18186
+ (item2) => Array.isArray(item2) && item2[0] === value2
18187
+ );
18156
18188
  return item ? item[1] : "";
18157
18189
  };
18158
18190
  const label = getLabel(defaultValue ?? value);
18159
- return label ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: buttonClass, children: i18n_default.t(label) }) : null;
18191
+ return label ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { style: { ...baseStyle, ...getType() }, children: i18n_default.t(label) }) : null;
18160
18192
  };
18161
18193
 
18162
18194
  // src/widgets/basic/button-field/button.tsx
@@ -34900,82 +34932,136 @@ var import_jsx_runtime105 = require("react/jsx-runtime");
34900
34932
  var StatusBarOptionField = (props) => {
34901
34933
  const { selection, defaultValue } = props;
34902
34934
  const memoizedStatusOptions = (0, import_react66.useMemo)(() => selection, [selection]);
34935
+ const indexInProgress = memoizedStatusOptions?.findIndex(
34936
+ (option) => option?.[0] === defaultValue
34937
+ );
34903
34938
  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
34904
34939
  "div",
34905
34940
  {
34906
34941
  style: {
34907
34942
  display: "flex",
34908
34943
  alignItems: "center",
34909
- flexWrap: "wrap",
34910
- overflow: "hidden"
34944
+ flexWrap: "wrap"
34911
34945
  },
34912
34946
  children: memoizedStatusOptions?.map((option, index4) => {
34913
- const value = option?.[0] === defaultValue;
34914
- return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
34915
- "label",
34916
- {
34917
- style: {
34918
- position: "relative",
34919
- flexShrink: 0,
34920
- cursor: "default",
34921
- height: "36px",
34922
- display: "flex",
34923
- alignItems: "center",
34924
- paddingLeft: "32px",
34925
- // pl-8
34926
- paddingRight: "20px",
34927
- // pr-[20px]
34928
- fontWeight: 600,
34929
- // font-semibold
34930
- fontSize: "14px",
34931
- background: value ? "var(--color-primary)" : "#FAFAFA",
34932
- color: value ? "#fff" : "#121212",
34933
- borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34934
- // rounded-l-xl
34935
- borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34936
- borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
34937
- // rounded-r-xl
34938
- borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
34939
- },
34940
- children: [
34941
- /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
34942
- "input",
34943
- {
34944
- type: "radio",
34945
- checked: value,
34946
- style: { display: "none" },
34947
- disabled: true
34948
- }
34949
- ),
34950
- option[1],
34951
- !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
34952
- "div",
34953
- {
34954
- style: {
34955
- position: "absolute",
34956
- top: "50%",
34957
- transform: "translateY(-50%) rotate(45deg)",
34958
- zIndex: 2,
34959
- width: "26px",
34960
- height: "26px",
34961
- right: "-13px",
34962
- background: value ? "var(--color-primary)" : "#FAFAFA",
34963
- border: value ? "none" : "1px solid rgba(0,0,0,0.04)",
34964
- borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
34965
- borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
34966
- borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
34967
- borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
34947
+ return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_jsx_runtime105.Fragment, { children: [
34948
+ /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
34949
+ "div",
34950
+ {
34951
+ style: {
34952
+ position: "relative",
34953
+ flexShrink: 0,
34954
+ cursor: "default",
34955
+ padding: "4px",
34956
+ display: "flex",
34957
+ alignItems: "center",
34958
+ fontWeight: 600,
34959
+ fontSize: "12px",
34960
+ background: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#D5F1E0" : index4 === indexInProgress ? "#FFF" : "#F3F3F3",
34961
+ color: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#666" : "#AEAEAE",
34962
+ borderRadius: "16px",
34963
+ 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" : ""
34964
+ },
34965
+ children: [
34966
+ /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
34967
+ "span",
34968
+ {
34969
+ style: {
34970
+ backgroundColor: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#FF3F89" : "#FFF",
34971
+ width: 20,
34972
+ height: 20,
34973
+ display: "flex",
34974
+ justifyContent: "center",
34975
+ alignItems: "center",
34976
+ borderRadius: "100%"
34977
+ },
34978
+ 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, {})
34968
34979
  }
34969
- }
34970
- )
34971
- ]
34972
- },
34973
- option?.[0]
34974
- );
34980
+ ),
34981
+ /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
34982
+ "span",
34983
+ {
34984
+ style: {
34985
+ padding: "0 6px"
34986
+ },
34987
+ children: option[1]
34988
+ }
34989
+ )
34990
+ ]
34991
+ },
34992
+ option?.[0]
34993
+ ),
34994
+ !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
34995
+ "div",
34996
+ {
34997
+ style: {
34998
+ height: "3px",
34999
+ width: "6px",
35000
+ backgroundColor: "#F3F3F3"
35001
+ }
35002
+ }
35003
+ )
35004
+ ] });
34975
35005
  })
34976
35006
  }
34977
35007
  );
34978
35008
  };
35009
+ var ICMinus = () => {
35010
+ return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
35011
+ "svg",
35012
+ {
35013
+ xmlns: "http://www.w3.org/2000/svg",
35014
+ width: "16",
35015
+ height: "16",
35016
+ viewBox: "0 0 16 16",
35017
+ fill: "none",
35018
+ children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
35019
+ "path",
35020
+ {
35021
+ d: "M4 8H12",
35022
+ stroke: "#C3C3C3",
35023
+ "stroke-width": "1.5",
35024
+ "stroke-linecap": "round",
35025
+ "stroke-linejoin": "round"
35026
+ }
35027
+ )
35028
+ }
35029
+ );
35030
+ };
35031
+ var ICCircle = () => {
35032
+ return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
35033
+ "svg",
35034
+ {
35035
+ xmlns: "http://www.w3.org/2000/svg",
35036
+ width: "8",
35037
+ height: "8",
35038
+ viewBox: "0 0 8 8",
35039
+ fill: "none",
35040
+ children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("circle", { cx: "4", cy: "4", r: "4", fill: "white" })
35041
+ }
35042
+ );
35043
+ };
35044
+ var ICCheck = () => {
35045
+ return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
35046
+ "svg",
35047
+ {
35048
+ xmlns: "http://www.w3.org/2000/svg",
35049
+ width: "16",
35050
+ height: "16",
35051
+ viewBox: "0 0 16 16",
35052
+ fill: "none",
35053
+ children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
35054
+ "path",
35055
+ {
35056
+ 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",
35057
+ fill: "white",
35058
+ stroke: "white",
35059
+ "stroke-width": "0.25"
35060
+ }
35061
+ )
35062
+ }
35063
+ );
35064
+ };
34979
35065
 
34980
35066
  // src/widgets/basic/date-option-field/date-option.tsx
34981
35067
  var import_jsx_runtime106 = require("react/jsx-runtime");
package/dist/widgets.mjs CHANGED
@@ -4297,7 +4297,7 @@ var require_react_is_development = __commonJS({
4297
4297
  var ContextProvider = REACT_PROVIDER_TYPE;
4298
4298
  var Element2 = REACT_ELEMENT_TYPE;
4299
4299
  var ForwardRef = REACT_FORWARD_REF_TYPE;
4300
- var Fragment32 = REACT_FRAGMENT_TYPE;
4300
+ var Fragment33 = REACT_FRAGMENT_TYPE;
4301
4301
  var Lazy = REACT_LAZY_TYPE;
4302
4302
  var Memo = REACT_MEMO_TYPE;
4303
4303
  var Portal2 = REACT_PORTAL_TYPE;
@@ -4356,7 +4356,7 @@ var require_react_is_development = __commonJS({
4356
4356
  exports.ContextProvider = ContextProvider;
4357
4357
  exports.Element = Element2;
4358
4358
  exports.ForwardRef = ForwardRef;
4359
- exports.Fragment = Fragment32;
4359
+ exports.Fragment = Fragment33;
4360
4360
  exports.Lazy = Lazy;
4361
4361
  exports.Memo = Memo;
4362
4362
  exports.Portal = Portal2;
@@ -5715,16 +5715,6 @@ var COLORS = [
5715
5715
  }
5716
5716
  ];
5717
5717
  var DOTS = "...";
5718
- var typeStyles = {
5719
- primary: "bg-blue-500 text-white",
5720
- secondary: "bg-lime-600 text-white",
5721
- danger: "bg-[rgba(237,28,36,0.1)] text-[#F5222D]",
5722
- info: "bg-[rgba(5,152,237,0.12)] text-[rgb(5,152,237)]",
5723
- success: "bg-[rgba(46,181,83,0.1)] text-[rgb(46,181,83)]",
5724
- warning: "bg-[rgba(237,166,28,0.1)] text-[rgb(250,140,22)]",
5725
- default: "bg-[#dee2e6]",
5726
- light: "bg-white text-gray-800 shadow-md"
5727
- };
5728
5718
  var SearchType = {
5729
5719
  FILTER: "filter_by",
5730
5720
  SEARCH: "search_by",
@@ -18062,6 +18052,58 @@ var BinaryField = (props) => {
18062
18052
 
18063
18053
  // src/widgets/basic/button-badge-field/button-badge.tsx
18064
18054
  import { jsx as jsx71 } from "react/jsx-runtime";
18055
+ var typeStyles = {
18056
+ primary: {
18057
+ backgroundColor: "#3b82f6",
18058
+ color: "#fff",
18059
+ border: "1px solid #fff"
18060
+ },
18061
+ secondary: {
18062
+ backgroundColor: "#EBF1FF",
18063
+ color: "#2597D0",
18064
+ border: "1px solid #35ADE9"
18065
+ },
18066
+ danger: {
18067
+ backgroundColor: "#FFEBEC",
18068
+ color: "#E93544",
18069
+ border: "1px solid #FB2B3D"
18070
+ },
18071
+ info: {
18072
+ backgroundColor: "rgba(5,152,237,0.12)",
18073
+ color: "rgb(5,152,237)",
18074
+ border: "1px solid rgb(5,152,237)"
18075
+ },
18076
+ success: {
18077
+ backgroundColor: "#E0FAEB",
18078
+ color: "#12AF53",
18079
+ border: "1px solid #1FC163"
18080
+ },
18081
+ warning: {
18082
+ backgroundColor: "#FFFAEB",
18083
+ color: "#E6A819)",
18084
+ border: "1px solid #F6B51E"
18085
+ },
18086
+ default: {
18087
+ backgroundColor: "#dee2e6",
18088
+ color: "#000",
18089
+ border: "1px solid #000"
18090
+ },
18091
+ light: {
18092
+ backgroundColor: "#fff",
18093
+ color: "#1f2937",
18094
+ border: "1px solid #1f2937"
18095
+ }
18096
+ };
18097
+ var baseStyle = {
18098
+ borderRadius: "4px",
18099
+ fontSize: "12px",
18100
+ padding: "4px 8px",
18101
+ width: "fit-content",
18102
+ textAlign: "center",
18103
+ fontWeight: 500,
18104
+ cursor: "pointer",
18105
+ transition: "all 0.3s ease-in-out"
18106
+ };
18065
18107
  var ButtonBadgeField = (props) => {
18066
18108
  const { defaultValue, selection, value, formValues, domainHelper } = props;
18067
18109
  const decorationSuccess = props["decoration-success"] && domainHelper.checkDomain(formValues, props["decoration-success"]);
@@ -18069,31 +18111,21 @@ var ButtonBadgeField = (props) => {
18069
18111
  const decorationDanger = props["decoration-danger"] && domainHelper.checkDomain(formValues, props["decoration-danger"]);
18070
18112
  const decorationWarning = props["decoration-warning"] && domainHelper.checkDomain(formValues, props["decoration-warning"]);
18071
18113
  const getType = () => {
18072
- if (decorationInfo) {
18073
- return typeStyles["info"];
18074
- }
18075
- if (decorationSuccess) {
18076
- return typeStyles["success"];
18077
- }
18078
- if (decorationDanger) {
18079
- return typeStyles["danger"];
18080
- }
18081
- if (decorationWarning) {
18082
- return typeStyles["warning"];
18083
- }
18114
+ if (decorationInfo) return typeStyles["info"];
18115
+ if (decorationSuccess) return typeStyles["success"];
18116
+ if (decorationDanger) return typeStyles["danger"];
18117
+ if (decorationWarning) return typeStyles["warning"];
18084
18118
  return typeStyles["default"];
18085
18119
  };
18086
- const baseStyle = "rounded-full text-xs px-[0.82rem] w-fit py-1 text-center font-medium cursor-pointer transition duration-300 ease-in-out transform";
18087
- const buttonClass = `${baseStyle} ${getType()}`;
18088
18120
  const getLabel = (value2) => {
18089
18121
  if (!value2) return "";
18090
- const item = selection?.find((item2) => {
18091
- return Array.isArray(item2) && item2[0] === value2;
18092
- });
18122
+ const item = selection?.find(
18123
+ (item2) => Array.isArray(item2) && item2[0] === value2
18124
+ );
18093
18125
  return item ? item[1] : "";
18094
18126
  };
18095
18127
  const label = getLabel(defaultValue ?? value);
18096
- return label ? /* @__PURE__ */ jsx71("div", { className: buttonClass, children: i18n_default.t(label) }) : null;
18128
+ return label ? /* @__PURE__ */ jsx71("div", { style: { ...baseStyle, ...getType() }, children: i18n_default.t(label) }) : null;
18097
18129
  };
18098
18130
 
18099
18131
  // src/widgets/basic/button-field/button.tsx
@@ -34833,86 +34865,140 @@ var StatusbarDurationField = (props) => {
34833
34865
 
34834
34866
  // src/widgets/basic/status-bar-field/option/option.tsx
34835
34867
  import { useMemo as useMemo11 } from "react";
34836
- import { jsx as jsx107, jsxs as jsxs73 } from "react/jsx-runtime";
34868
+ import { Fragment as Fragment32, jsx as jsx107, jsxs as jsxs73 } from "react/jsx-runtime";
34837
34869
  var StatusBarOptionField = (props) => {
34838
34870
  const { selection, defaultValue } = props;
34839
34871
  const memoizedStatusOptions = useMemo11(() => selection, [selection]);
34872
+ const indexInProgress = memoizedStatusOptions?.findIndex(
34873
+ (option) => option?.[0] === defaultValue
34874
+ );
34840
34875
  return /* @__PURE__ */ jsx107(
34841
34876
  "div",
34842
34877
  {
34843
34878
  style: {
34844
34879
  display: "flex",
34845
34880
  alignItems: "center",
34846
- flexWrap: "wrap",
34847
- overflow: "hidden"
34881
+ flexWrap: "wrap"
34848
34882
  },
34849
34883
  children: memoizedStatusOptions?.map((option, index4) => {
34850
- const value = option?.[0] === defaultValue;
34851
- return /* @__PURE__ */ jsxs73(
34852
- "label",
34853
- {
34854
- style: {
34855
- position: "relative",
34856
- flexShrink: 0,
34857
- cursor: "default",
34858
- height: "36px",
34859
- display: "flex",
34860
- alignItems: "center",
34861
- paddingLeft: "32px",
34862
- // pl-8
34863
- paddingRight: "20px",
34864
- // pr-[20px]
34865
- fontWeight: 600,
34866
- // font-semibold
34867
- fontSize: "14px",
34868
- background: value ? "var(--color-primary)" : "#FAFAFA",
34869
- color: value ? "#fff" : "#121212",
34870
- borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34871
- // rounded-l-xl
34872
- borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34873
- borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
34874
- // rounded-r-xl
34875
- borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
34876
- },
34877
- children: [
34878
- /* @__PURE__ */ jsx107(
34879
- "input",
34880
- {
34881
- type: "radio",
34882
- checked: value,
34883
- style: { display: "none" },
34884
- disabled: true
34885
- }
34886
- ),
34887
- option[1],
34888
- !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx107(
34889
- "div",
34890
- {
34891
- style: {
34892
- position: "absolute",
34893
- top: "50%",
34894
- transform: "translateY(-50%) rotate(45deg)",
34895
- zIndex: 2,
34896
- width: "26px",
34897
- height: "26px",
34898
- right: "-13px",
34899
- background: value ? "var(--color-primary)" : "#FAFAFA",
34900
- border: value ? "none" : "1px solid rgba(0,0,0,0.04)",
34901
- borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
34902
- borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
34903
- borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
34904
- borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
34884
+ return /* @__PURE__ */ jsxs73(Fragment32, { children: [
34885
+ /* @__PURE__ */ jsxs73(
34886
+ "div",
34887
+ {
34888
+ style: {
34889
+ position: "relative",
34890
+ flexShrink: 0,
34891
+ cursor: "default",
34892
+ padding: "4px",
34893
+ display: "flex",
34894
+ alignItems: "center",
34895
+ fontWeight: 600,
34896
+ fontSize: "12px",
34897
+ background: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#D5F1E0" : index4 === indexInProgress ? "#FFF" : "#F3F3F3",
34898
+ color: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#666" : "#AEAEAE",
34899
+ borderRadius: "16px",
34900
+ 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" : ""
34901
+ },
34902
+ children: [
34903
+ /* @__PURE__ */ jsx107(
34904
+ "span",
34905
+ {
34906
+ style: {
34907
+ backgroundColor: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#FF3F89" : "#FFF",
34908
+ width: 20,
34909
+ height: 20,
34910
+ display: "flex",
34911
+ justifyContent: "center",
34912
+ alignItems: "center",
34913
+ borderRadius: "100%"
34914
+ },
34915
+ children: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? /* @__PURE__ */ jsx107(ICCheck, {}) : index4 === indexInProgress ? /* @__PURE__ */ jsx107(ICCircle, {}) : /* @__PURE__ */ jsx107(ICMinus, {})
34905
34916
  }
34906
- }
34907
- )
34908
- ]
34909
- },
34910
- option?.[0]
34911
- );
34917
+ ),
34918
+ /* @__PURE__ */ jsx107(
34919
+ "span",
34920
+ {
34921
+ style: {
34922
+ padding: "0 6px"
34923
+ },
34924
+ children: option[1]
34925
+ }
34926
+ )
34927
+ ]
34928
+ },
34929
+ option?.[0]
34930
+ ),
34931
+ !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx107(
34932
+ "div",
34933
+ {
34934
+ style: {
34935
+ height: "3px",
34936
+ width: "6px",
34937
+ backgroundColor: "#F3F3F3"
34938
+ }
34939
+ }
34940
+ )
34941
+ ] });
34912
34942
  })
34913
34943
  }
34914
34944
  );
34915
34945
  };
34946
+ var ICMinus = () => {
34947
+ return /* @__PURE__ */ jsx107(
34948
+ "svg",
34949
+ {
34950
+ xmlns: "http://www.w3.org/2000/svg",
34951
+ width: "16",
34952
+ height: "16",
34953
+ viewBox: "0 0 16 16",
34954
+ fill: "none",
34955
+ children: /* @__PURE__ */ jsx107(
34956
+ "path",
34957
+ {
34958
+ d: "M4 8H12",
34959
+ stroke: "#C3C3C3",
34960
+ "stroke-width": "1.5",
34961
+ "stroke-linecap": "round",
34962
+ "stroke-linejoin": "round"
34963
+ }
34964
+ )
34965
+ }
34966
+ );
34967
+ };
34968
+ var ICCircle = () => {
34969
+ return /* @__PURE__ */ jsx107(
34970
+ "svg",
34971
+ {
34972
+ xmlns: "http://www.w3.org/2000/svg",
34973
+ width: "8",
34974
+ height: "8",
34975
+ viewBox: "0 0 8 8",
34976
+ fill: "none",
34977
+ children: /* @__PURE__ */ jsx107("circle", { cx: "4", cy: "4", r: "4", fill: "white" })
34978
+ }
34979
+ );
34980
+ };
34981
+ var ICCheck = () => {
34982
+ return /* @__PURE__ */ jsx107(
34983
+ "svg",
34984
+ {
34985
+ xmlns: "http://www.w3.org/2000/svg",
34986
+ width: "16",
34987
+ height: "16",
34988
+ viewBox: "0 0 16 16",
34989
+ fill: "none",
34990
+ children: /* @__PURE__ */ jsx107(
34991
+ "path",
34992
+ {
34993
+ 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",
34994
+ fill: "white",
34995
+ stroke: "white",
34996
+ "stroke-width": "0.25"
34997
+ }
34998
+ )
34999
+ }
35000
+ );
35001
+ };
34916
35002
 
34917
35003
  // src/widgets/basic/date-option-field/date-option.tsx
34918
35004
  import { jsx as jsx108, jsxs as jsxs74 } from "react/jsx-runtime";