nexaas-ui-components 1.0.63 → 1.0.67

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.
Files changed (8) hide show
  1. package/dist/index.cjs +189 -161
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +1 -1
  4. package/dist/index.d.cts +2 -1
  5. package/dist/index.d.ts +2 -1
  6. package/dist/index.js +189 -161
  7. package/dist/index.js.map +1 -1
  8. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -74,7 +74,7 @@ var variants = {
74
74
  text: "shadow-button bg-surface border-[0.5px] border-neutral-300 text-neutral-600 hover:bg-neutral-100 hover:text-neutral-600 active:text-neutral-600 active:bg-neutral-200 active:shadow-none disabled:text-neutral-400 disabled:opacity-50"
75
75
  },
76
76
  icon: {
77
- text: "shadow-button gap-1 bg-white border-[0.5px] border-neutral-300 text-neutral-500 hover:bg-[#f5f5f5] hover:text-neutral-600 active:bg-neutral-100 active:text-neutral-600 disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50 active:shadow-none"
77
+ text: "shadow-button gap-1 bg-surface border-[0.5px] border-neutral-300 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-600 active:bg-neutral-100 active:text-neutral-600 disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-surface disabled:opacity-50 active:shadow-none"
78
78
  },
79
79
  outline: {
80
80
  text: "shadow-button bg-surface border-[0.5px] border-rose-500 text-rose-500 hover:bg-rose-50 hover:text-rose-600 active:bg-rose-100 active:text-rose-600 disabled:bg-surface disabled:border-[0.5px] disabled:border-rose-700 disabled:opacity-50 active:shadow-none"
@@ -83,7 +83,7 @@ var variants = {
83
83
  text: "text-left text-blue-500 hover:text-blue-600 hover:underline active:text-blue-600 disabled:text-blue-400 disabled:no-underline outline-none focus:outline-none shadow-none font-normal"
84
84
  },
85
85
  dangerOutline: {
86
- text: "shadow-button text-dangerous-500 bg-surface border-[0.5px] border-dangerous-300 hover:bg-dangerous-100 hover:text-dangerous-600 active:bg-dangerous-500 active:text-white disabled:opacity-50 disabled:bg-white disabled:text-dangerous-500 active:shadow-none"
86
+ text: "shadow-button text-dangerous-500 bg-surface border-[0.5px] border-dangerous-300 hover:bg-dangerous-100 hover:text-dangerous-600 active:bg-dangerous-500 active:text-white disabled:opacity-50 disabled:bg-surface disabled:text-dangerous-500 active:shadow-none"
87
87
  },
88
88
  danger: {
89
89
  text: "shadow-button text-white bg-gradient-to-b from-danger-start to-danger-end hover:from-[#fe6464] hover:to-[#e24e4e] active:from-dangerous-600 active:to-dangerous-600 disabled:opacity-50 disabled:from-dangerous-500 disabled:to-dangerous-500 active:shadow-none"
@@ -92,22 +92,22 @@ var variants = {
92
92
  text: "shadow-button text-white bg-gradient-to-b from-success-start to-success-end hover:from-[#40f09b] hover:to-[#28c67a] active:from-success-600 active:to-success-600 disabled:opacity-50 disabled:from-success-start disabled:to-success-end active:shadow-none"
93
93
  },
94
94
  successOutline: {
95
- text: "active:shadow-none shadow-green-sm text-green-500 font-bold bg-white border-[0.5px] border-green-500 hover:bg-green-100 active:bg-green-100 active:text-white disabled:opacity-50 disabled:bg-white disabled:text-green-500"
95
+ text: "active:shadow-none shadow-green-sm text-green-500 font-bold bg-surface border-[0.5px] border-green-500 hover:bg-green-100 active:bg-green-100 active:text-white disabled:opacity-50 disabled:bg-surface disabled:text-green-500"
96
96
  },
97
97
  warn: {
98
98
  text: "shadow-button text-white bg-gradient-to-b from-warning-start to-warning-end hover:from-[#febd5b] hover:to-[#f4a52e] active:from-warning-600 active:to-warning-600 disabled:opacity-50 disabled:from-warning-start disabled:to-warning-end active:shadow-none"
99
99
  },
100
100
  blue: {
101
- text: "shadow-button bg-blue-500 text-white hover:bg-blue-600 active:bg-blue-600 text-bold"
101
+ text: "shadow-button bg-blue-500 text-accent-label hover:bg-blue-600 active:bg-blue-600 text-bold"
102
102
  },
103
103
  iconSecondary: {
104
- text: "border-[1px] border-none text-white active:bg-[#0A0A0A40]/20 hover:bg-[#F5F5F526]/10 hover:text-white disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50 active:shadow-none"
104
+ text: "border-[1px] border-none text-white active:bg-[#0A0A0A40]/20 hover:bg-[#F5F5F526]/10 hover:text-white disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-surface disabled:opacity-50 active:shadow-none"
105
105
  },
106
106
  outlineIcon: {
107
- text: "bg-white text-rose-500 hover:shadow-button hover:text-rose-600 active:bg-rose-500 active:text-white disabled:text-neutral-400 disabled:border-disabled disabled:bg-white disabled:opacity-50 active:shadow-none"
107
+ text: "bg-surface text-rose-500 hover:shadow-button hover:text-rose-600 active:bg-rose-500 active:text-white disabled:text-neutral-400 disabled:border-disabled disabled:bg-surface disabled:opacity-50 active:shadow-none"
108
108
  },
109
109
  dangerLight: {
110
- text: "active:shadow-none shadow-red-sm text-danger-500 font-bold bg-white border-[0.5px] border-dangerous-300 hover:bg-dangerous-100 active:bg-danger-500 active:text-white disabled:opacity-50 disabled:bg-white disabled:text-danger-500"
110
+ text: "active:shadow-none shadow-red-sm text-danger-500 font-bold bg-surface border-[0.5px] border-dangerous-300 hover:bg-dangerous-100 active:bg-danger-500 active:text-white disabled:opacity-50 disabled:bg-surface disabled:text-danger-500"
111
111
  },
112
112
  ghost: {
113
113
  text: "bg-transparent hover:bg-neutral-100 !rounded-full text-paragraph active:bg-neutral-200 disabled:opacity-50"
@@ -116,27 +116,33 @@ var variants = {
116
116
  var paddingConfig = {
117
117
  xxs: {
118
118
  normal: "",
119
- icon: ""
119
+ icon: "",
120
+ iconOnly: ""
120
121
  },
121
122
  xxsm: {
122
123
  normal: "p-[5px]",
123
- icon: "p-[5px]"
124
+ icon: "p-[5px]",
125
+ iconOnly: "p-[5px]"
124
126
  },
125
127
  xs: {
126
128
  normal: "p-2",
127
- icon: "p-2"
129
+ icon: "p-2",
130
+ iconOnly: "p-2"
128
131
  },
129
132
  sm: {
130
133
  normal: "px-3 py-[6px]",
131
- icon: "py-[6px] pl-2 pr-3"
134
+ icon: "py-[6px] pl-2 pr-3",
135
+ iconOnly: "p-[6px]"
132
136
  },
133
137
  md: {
134
138
  normal: "py-2 px-4",
135
- icon: "py-2 pl-3 pr-4"
139
+ icon: "py-2 pl-3 pr-4",
140
+ iconOnly: "p-2"
136
141
  },
137
142
  lg: {
138
143
  normal: "py-3 px-4",
139
- icon: "p-3 pr-4"
144
+ icon: "p-3 pr-4",
145
+ iconOnly: "p-3"
140
146
  }
141
147
  };
142
148
  var Button = ({
@@ -149,7 +155,7 @@ var Button = ({
149
155
  const applyGap = props.icon && props.children;
150
156
  const appliedVariant = variants[variant].text;
151
157
  const appliedSize = sizes[size];
152
- const appliedPadding = props.icon ? paddingConfig[size].icon : paddingConfig[size].normal;
158
+ const appliedPadding = props.icon ? props.children ? paddingConfig[size].icon : paddingConfig[size].iconOnly : paddingConfig[size].normal;
153
159
  const gapText = applyGap ? "gap-[6px]" : "gap-0";
154
160
  useEffect(() => {
155
161
  if (!hotkey || !props.onClick) return;
@@ -180,7 +186,8 @@ var Button = ({
180
186
  {
181
187
  className: clsx9("inline-flex gap-[8px]", {
182
188
  "flex-col items-center": hotkeyPosition === "top" || hotkeyPosition === "bottom",
183
- "flex-row items-center": hotkeyPosition === "left" || hotkeyPosition === "right"
189
+ "flex-row items-center": hotkeyPosition === "left" || hotkeyPosition === "right",
190
+ "cursor-not-allowed": props.disabled || props.loading
184
191
  }),
185
192
  children: [
186
193
  hotkey && (hotkeyPosition === "top" || hotkeyPosition === "left") && /* @__PURE__ */ jsx(
@@ -204,7 +211,7 @@ var Button = ({
204
211
  ${appliedSize.text}
205
212
  ${appliedPadding}
206
213
  ${gapText}
207
- whitespace-nowrap group rounded-lg font-bold disabled:shadow-none active:shadow-none flex items-center
214
+ whitespace-nowrap group rounded-lg font-bold disabled:shadow-none active:shadow-none flex items-center disabled:pointer-events-none
208
215
  `,
209
216
  children: /* @__PURE__ */ jsxs(Fragment, { children: [
210
217
  props.icon && /* @__PURE__ */ jsx(
@@ -263,7 +270,7 @@ var variants2 = {
263
270
  text: "shadow-button text-button-label bg-gradient-to-b hover:text-white from-rose-start to-rose-end active:bg-gradient-to-b active:from-rose-800 active:to-rose-800 disabled:bg-gradient-to-b disabled:from-rose-800 disabled:to-rose-800 disabled:opacity-50 hover:from-[#FD467F] hover:to-[#DF4573]"
264
271
  },
265
272
  secondary: {
266
- text: "shadow-button bg-white border-[0.5px] border-paragraph text-blue-500 hover:text-blue-600 hover:bg-[#f5f5f5] active:text-blue-600 active:bg-light-gray-100 disabled:text-neutral-400 disabled:bg-white disabled:border-[0.5px] disabled:border-neutral-400"
273
+ text: "shadow-button bg-surface border-[0.5px] border-paragraph text-blue-500 hover:text-blue-600 hover:bg-neutral-100 active:text-blue-600 active:bg-light-gray-100 disabled:text-neutral-400 disabled:bg-surface disabled:border-[0.5px] disabled:border-neutral-400"
267
274
  },
268
275
  link: {
269
276
  text: "text-blue-500 hover:text-blue-600 hover:underline border-none active:text-blue-600 active:underline disabled:text-blue-500 disabled:no-underline shadow-none font-normal"
@@ -272,37 +279,37 @@ var variants2 = {
272
279
  text: "text-dangerous-500 hover:text-dangerous-600 hover:underline border-none active:text-dangerous-600 active:underline disabled:text-dangerous-500 disabled:no-underline shadow-none font-normal"
273
280
  },
274
281
  icon: {
275
- text: "bg-white border-[0.5px] border-neutral-300 text-blue-500 hover:text-blue-600 hover:bg-[#f5f5f5] active:text-blue-600 active:bg-light-gray-100 disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50"
282
+ text: "bg-surface border-[0.5px] border-neutral-300 text-blue-500 hover:text-blue-600 hover:bg-neutral-100 active:text-blue-600 active:bg-light-gray-100 disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-surface disabled:opacity-50"
276
283
  },
277
284
  iconSecondary: {
278
- text: "border-[1px] border-none text-white active:bg-[#0A0A0A40]/20 hover:bg-[#F5F5F526]/10 hover:text-white disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50"
285
+ text: "border-[1px] border-none text-white active:bg-[#0A0A0A40]/20 hover:bg-[#F5F5F526]/10 hover:text-white disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-surface disabled:opacity-50"
279
286
  },
280
287
  outline: {
281
- text: "shadow-button bg-white border-[0.5px] border-rose-700 text-blue-500 hover:text-blue-600 hover:bg-[#f5f5f5] active:text-blue-600 active:bg-light-gray-100 disabled:text-rose-700 disabled:bg-white disabled:border-[0.5px] disabled:border-rose-700 disabled:opacity-50"
288
+ text: "shadow-button bg-surface border-[0.5px] border-rose-700 text-blue-500 hover:text-blue-600 hover:bg-neutral-100 active:text-blue-600 active:bg-light-gray-100 disabled:text-rose-700 disabled:bg-surface disabled:border-[0.5px] disabled:border-rose-700 disabled:opacity-50"
282
289
  },
283
290
  dark: {
284
291
  text: "shadow-button text-white hover:bg-[#f5f5f526] active:bg-[#0a0a0a40] disabled:opacity-50 disabled:bg-transparent"
285
292
  },
286
293
  dangerLight: {
287
- text: "shadow-button text-dangerous-700 font-bold bg-white border-[0.5px] border-dangerous-700 hover:bg-dangerous-100 active:bg-dangerous-700 active:text-white disabled:opacity-50 disabled:bg-white disabled:text-dangerous-700"
294
+ text: "shadow-button text-dangerous-700 font-bold bg-surface border-[0.5px] border-dangerous-700 hover:bg-dangerous-100 active:bg-dangerous-700 active:text-white disabled:opacity-50 disabled:bg-surface disabled:text-dangerous-700"
288
295
  },
289
296
  danger: {
290
297
  text: "shadow-button text-white bg-gradient-to-b from-danger-start to-danger-end hover:from-[#FD6363] hover:to-[#E34E4E] active:from-dangerous-800 active:to-dangerous-800 disabled:opacity-50 disabled:from-dangerous-700 disabled:to-dangerous-700"
291
298
  },
292
299
  success: {
293
- text: "shadow-button text-white bg-gradient-to-b from-success-start to-success-end hover:from-[#3FF09B] hover:to-[#27C579] active:from-success-800 active:to-success-800 disabled:opacity-50 disabled:from-success-700 disabled:to-success-700"
300
+ text: "shadow-button text-white bg-gradient-to-b from-success-start to-success-end hover:from-[#3FF09B] hover:to-[#27C579] active:from-success-600 active:to-success-600 disabled:opacity-50 disabled:from-success-500 disabled:to-success-500"
294
301
  },
295
302
  warn: {
296
- text: "shadow-button text-white bg-gradient-to-b from-warning-start to-warning-end hover:from-[#FEBD5D] hover:to-[#F4A42D] active:from-warning-800 active:to-warning-800 disabled:opacity-50 disabled:from-warning-700 disabled:to-warning-700"
303
+ text: "shadow-button text-white bg-gradient-to-b from-warning-start to-warning-end hover:from-[#FEBD5D] hover:to-[#F4A42D] active:from-warning-600 active:to-warning-600 disabled:opacity-50 disabled:from-warning-500 disabled:to-warning-500"
297
304
  },
298
305
  blue: {
299
- text: "shadow-button bg-blue-700 text-white text-bold"
306
+ text: "shadow-button bg-blue-700 text-accent-label text-bold"
300
307
  },
301
308
  filter: {
302
309
  text: "shadow-button rounded-3xl border border-neutral-300 text-blue-500 hover:text-blue-600 hover:bg-light-gray-100 active:border active:border-blue-700 active:text-blue-600 active:bg-blue-100 focus:border focus:border-blue-700 focus:text-blue-500 focus:bg-blue-100"
303
310
  },
304
311
  filterActive: {
305
- text: "shadow-button rounded-3xl border border-blue-700 text-blue-500 bg-blue-100 shadow-button hover:bg-blue-700 hover:text-white active:text-white active:bg-blue-900 active:border-blue-900 focus:text-white focus:bg-blue-900 focus:border-blue-900"
312
+ text: "shadow-button rounded-3xl border border-blue-700 text-blue-500 bg-blue-100 shadow-button hover:bg-blue-700 hover:text-accent-label active:text-accent-label active:bg-blue-900 active:border-blue-900 focus:text-accent-label focus:bg-blue-900 focus:border-blue-900"
306
313
  }
307
314
  };
308
315
  var ButtonLink = forwardRef(
@@ -455,7 +462,7 @@ var Input = ({
455
462
  const hasError = fieldValidationMessages.some((item) => item !== void 0);
456
463
  const [showPassword, setShowPassword] = React5__default.useState(false);
457
464
  const styles = {
458
- input: `text-p-md pl-2 peer shadow-input border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1 focus-visible:border-blue-500 ${label ? "pt-[22px]" : "pt-[10px]"}
465
+ input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1 focus-visible:border-blue-500 ${label ? "pt-[22px]" : "pt-[10px]"}
459
466
  ${!hasError ? "border-neutral-300" : ""}`,
460
467
  icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] rounded-l-lg text-[20px] ${hasError ? "text-dangerous-500" : "text-label peer-focus:text-blue-500"} peer-focus:border-blue-500`,
461
468
  rightIcon: "absolute h-[44px] top-[1px] right-[1.5px] w-[38px] text-[22px]",
@@ -537,7 +544,7 @@ var Input = ({
537
544
  {
538
545
  onClick: () => setShowPassword(!showPassword),
539
546
  className: clsx9(
540
- " text-label cursor-pointer text-[20px] absolute right-2 top-[11px]",
547
+ "uil text-label cursor-pointer text-[20px] absolute right-2 top-1/2 -translate-y-1/2",
541
548
  {
542
549
  "uil-eye-slash": showPassword,
543
550
  "uil-eye": !showPassword
@@ -716,7 +723,7 @@ var DatePickerInput = forwardRef(
716
723
  ];
717
724
  const hasError = fieldValidationMessages.some((item) => item !== void 0);
718
725
  const styles = {
719
- input: `text-p-md border border-neutral-300 rounded block pb-[10px] h-[46px] w-full disabled:bg-light-gray-100 focus:border-blue-500 `,
726
+ input: `text-p-md text-paragraph bg-surface border border-neutral-300 rounded block pb-[10px] h-[46px] w-full disabled:bg-light-gray-100 focus:border-blue-500 `,
720
727
  icon: `absolute bg-light-gray-100 h-[44px] w-[38px] top-[1px] left-[1px] rounded-l-lg rounded-r-none ${hasError ? "text-dangerous-700" : "text-label"}`,
721
728
  label: "absolute text-label text-sm",
722
729
  clear: "absolute top-[8px] right-[8px] cursor-pointer text-label text-[22px]"
@@ -765,7 +772,7 @@ var DatePickerInput = forwardRef(
765
772
  id: "icon",
766
773
  className: clsx9(
767
774
  styles.icon,
768
- "flex justify-center items-center text-[20px] bg-gray-100"
775
+ "flex justify-center items-center text-[20px] bg-light-gray-100"
769
776
  ),
770
777
  children: icon
771
778
  }
@@ -880,10 +887,10 @@ var variants3 = {
880
887
  gray: "bg-neutral-100 text-neutral-400",
881
888
  dangerous: "bg-dangerous-100 text-dangerous-600",
882
889
  light: "bg-neutral-100 text-neutral-400",
883
- white: "bg-[#FFF] text-neutral-400 px-4 py-[6px] border border-light shadow-button text-paragraph",
890
+ white: "bg-surface text-neutral-400 px-4 py-[6px] border border-neutral-200 shadow-button text-paragraph",
884
891
  primary: "bg-rose-100 text-rose-800",
885
892
  dark: "bg-neutral-700 text-white",
886
- outline: "bg-white text-rose-700 border border-neutral-200",
893
+ outline: "bg-surface text-rose-700 border border-neutral-200",
887
894
  "dark-gray": "bg-neutral-100 text-neutral-600"
888
895
  };
889
896
  var Badge = ({
@@ -1179,7 +1186,7 @@ var Checkbox = ({
1179
1186
  "label",
1180
1187
  {
1181
1188
  htmlFor: registration == null ? void 0 : registration.name,
1182
- className: "cursor-pointer font-medium text-gray-700",
1189
+ className: "cursor-pointer font-medium text-paragraph",
1183
1190
  children: label
1184
1191
  }
1185
1192
  ) })
@@ -1198,9 +1205,9 @@ var FilterCalendar = ({
1198
1205
  maxDate = void 0
1199
1206
  }) => {
1200
1207
  const style = {
1201
- filter: "rounded-3xl shadow-input bg-white hover:bg-neutral-100 border border-[0.5px] border-neutral-300 active:text-blue-500 active:bg-blue-100 active:border-blue-500",
1208
+ filter: "rounded-3xl shadow-input bg-surface hover:bg-neutral-100 border border-[0.5px] border-neutral-300 active:text-blue-500 active:bg-blue-100 active:border-blue-500",
1202
1209
  filterOpen: "rounded-3xl shadow-input border border-blue-500 bg-blue-100 text-blue-500",
1203
- filterActive: "rounded-3xl border border-blue-500 text-blue-500 bg-blue-100 shadow-input hover:bg-blue-500 hover:text-white active:text-white active:bg-blue-600 active:border-blue-600"
1210
+ filterActive: "rounded-3xl border border-blue-500 text-blue-500 bg-blue-100 shadow-input hover:bg-blue-500 hover:text-accent-label active:text-accent-label active:bg-blue-600 active:border-blue-600"
1204
1211
  };
1205
1212
  const [currentValue, setCurrentValue] = useState([]);
1206
1213
  const [calendarLabel, setCalendarLabel] = useState("");
@@ -1461,7 +1468,7 @@ var FilterCalendar = ({
1461
1468
  className: clsx9({
1462
1469
  ["text-label group-active:text-blue-500"]: !field.value && !open,
1463
1470
  ["text-blue-500"]: open && !field.value,
1464
- ["text-blue-500 group-hover:text-white group-active:text-white"]: open && field.value
1471
+ ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && field.value
1465
1472
  }),
1466
1473
  children: icon
1467
1474
  }
@@ -1473,7 +1480,7 @@ var FilterCalendar = ({
1473
1480
  {
1474
1481
  ["text-paragraph group-active:text-blue-500"]: !field.value && !open,
1475
1482
  ["text-blue-500"]: open && !field.value,
1476
- ["text-blue-500 group-hover:text-white group-active:text-white"]: open && field.value
1483
+ ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && field.value
1477
1484
  },
1478
1485
  "truncate cursor-pointer"
1479
1486
  ),
@@ -1489,7 +1496,7 @@ var FilterCalendar = ({
1489
1496
  {
1490
1497
  ["text-label group-active:text-blue-500"]: !field.value && !open,
1491
1498
  ["text-blue-500"]: open && !field.value,
1492
- ["text-blue-500 group-hover:text-white group-active:text-white"]: open && field.value
1499
+ ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && field.value
1493
1500
  },
1494
1501
  "uil uil-angle-down text-[18px]"
1495
1502
  )
@@ -1498,7 +1505,7 @@ var FilterCalendar = ({
1498
1505
  ]
1499
1506
  }
1500
1507
  ) }) }),
1501
- open && /* @__PURE__ */ jsx(Float.Content, { children: /* @__PURE__ */ jsx(PopoverPanel, { className: "p-3 whitespace-nowrap bg-white rounded-lg shadow-dropdown border-[0.5px] border-neutral-300", children: ({ close }) => {
1508
+ open && /* @__PURE__ */ jsx(Float.Content, { children: /* @__PURE__ */ jsx(PopoverPanel, { className: "p-3 whitespace-nowrap bg-surface rounded-lg shadow-dropdown border-[0.5px] border-neutral-300", children: ({ close }) => {
1502
1509
  const onClose = () => {
1503
1510
  setCurrentValue(field.value);
1504
1511
  close();
@@ -1583,7 +1590,7 @@ function InputSmall({
1583
1590
  const styles = {
1584
1591
  input: `text-p-md text-paragraph w-full outline-none placeholder:text-label`,
1585
1592
  icon: "text-label group-focus-within:text-neutral-600 m-[10px]",
1586
- wrapper: `shadow-input border border-neutral-300 focus-within:border-blue-500 group rounded-lg h-9 w-full text-paragraph flex items-center justify-between disabled:bg-neutral-100 ${disabled ? "bg-neutral-100" : "bg-white"} ${className}`,
1593
+ wrapper: `shadow-input border border-neutral-300 focus-within:border-blue-500 group rounded-lg h-9 w-full text-paragraph flex items-center justify-between disabled:bg-neutral-100 ${disabled ? "bg-neutral-100" : "bg-surface"} ${className}`,
1587
1594
  clear: "pr-[5px] cursor-pointer text-label text-[16px]"
1588
1595
  };
1589
1596
  const elem = inputRef == null ? void 0 : inputRef.current;
@@ -1659,9 +1666,9 @@ var FilterOptions = ({
1659
1666
  renderOption
1660
1667
  }) => {
1661
1668
  const style = {
1662
- filter: "rounded-3xl shadow-input bg-white hover:bg-neutral-100 border border-[0.5px] border-neutral-300 active:text-blue-500 active:bg-blue-100 active:border-blue-500",
1669
+ filter: "rounded-3xl shadow-input bg-surface hover:bg-neutral-100 border border-[0.5px] border-neutral-300 active:text-blue-500 active:bg-blue-100 active:border-blue-500",
1663
1670
  filterOpen: "rounded-3xl shadow-input border border-blue-500 bg-blue-100 text-blue-500",
1664
- filterActive: "rounded-3xl border border-blue-500 text-blue-500 bg-blue-100 shadow-input hover:bg-blue-500 hover:text-white active:text-white active:bg-blue-600 active:border-blue-600"
1671
+ filterActive: "rounded-3xl border border-blue-500 text-blue-500 bg-blue-100 shadow-input hover:bg-blue-500 hover:text-accent-label active:text-accent-label active:bg-blue-600 active:border-blue-600"
1665
1672
  };
1666
1673
  const [currentValue, setCurrentValue] = useState(isMulti ? [] : {});
1667
1674
  const [data, setData] = useState(() => options);
@@ -1713,7 +1720,7 @@ var FilterOptions = ({
1713
1720
  "relative cursor-pointer outline-none select-none p-3 rounded-lg pr-9 text-paragraph mt-1 first:mt-0 overflow-hidden w-full",
1714
1721
  {
1715
1722
  ["hover:bg-neutral-200"]: !option.disabled && !isSelected,
1716
- ["text-gray-200"]: option.disabled,
1723
+ ["text-disabled"]: option.disabled,
1717
1724
  ["bg-blue-500 hover:bg-blue-500"]: isSelected
1718
1725
  }
1719
1726
  ),
@@ -1726,7 +1733,7 @@ var FilterOptions = ({
1726
1733
  "relative cursor-pointer outline-none select-none p-3 rounded-lg pr-9 text-paragraph mt-1 first:mt-0 overflow-hidden w-full",
1727
1734
  {
1728
1735
  ["hover:bg-neutral-200"]: !option.disabled && !isSelected,
1729
- ["text-gray-200"]: option.disabled,
1736
+ ["text-disabled"]: option.disabled,
1730
1737
  ["bg-blue-500 hover:bg-blue-500"]: isSelected
1731
1738
  }
1732
1739
  ),
@@ -1736,7 +1743,7 @@ var FilterOptions = ({
1736
1743
  {
1737
1744
  className: clsx9(
1738
1745
  {
1739
- ["font-semibold text-white"]: isSelected
1746
+ ["font-semibold text-accent-label"]: isSelected
1740
1747
  },
1741
1748
  "text-wrap break-words font-normal block"
1742
1749
  ),
@@ -1748,7 +1755,7 @@ var FilterOptions = ({
1748
1755
  {
1749
1756
  className: clsx9(
1750
1757
  {
1751
- ["font-semibold text-white"]: isSelected
1758
+ ["font-semibold text-accent-label"]: isSelected
1752
1759
  },
1753
1760
  "w-[200px] whitespace-nowrap text-ellipsis overflow-hidden text-label text-p-sm block"
1754
1761
  ),
@@ -1799,7 +1806,7 @@ var FilterOptions = ({
1799
1806
  className: clsx9({
1800
1807
  ["text-label group-active:text-blue-500"]: !field.value && !open,
1801
1808
  ["text-blue-500"]: open && !field.value,
1802
- ["text-blue-500 group-hover:text-white"]: open && field.value
1809
+ ["text-blue-500 group-hover:text-accent-label"]: open && field.value
1803
1810
  }),
1804
1811
  children: icon
1805
1812
  }
@@ -1811,14 +1818,14 @@ var FilterOptions = ({
1811
1818
  {
1812
1819
  ["text-paragraph group-active:text-blue-500"]: !field.value && !open,
1813
1820
  ["text-blue-500"]: open && !field.value,
1814
- ["text-blue-500 group-hover:text-white"]: open && field.value
1821
+ ["text-blue-500 group-hover:text-accent-label"]: open && field.value
1815
1822
  },
1816
1823
  "truncate cursor-pointer"
1817
1824
  ),
1818
1825
  children: isMulti ? label : ((_a2 = field == null ? void 0 : field.value) == null ? void 0 : _a2.id) ? (_b2 = field == null ? void 0 : field.value) == null ? void 0 : _b2.label : label
1819
1826
  }
1820
1827
  ),
1821
- isMulti && field.value && field.value.length > 0 && /* @__PURE__ */ jsx("div", { className: "bg-blue-500 text-white text-p-xs px-1 py-[2px] rounded group-hover:bg-blue-500", children: field.value.length }),
1828
+ isMulti && field.value && field.value.length > 0 && /* @__PURE__ */ jsx("div", { className: "bg-blue-500 text-accent-label text-p-xs px-1 py-[2px] rounded group-hover:bg-blue-500", children: field.value.length }),
1822
1829
  open ? /* @__PURE__ */ jsx(
1823
1830
  "i",
1824
1831
  {
@@ -1826,7 +1833,7 @@ var FilterOptions = ({
1826
1833
  {
1827
1834
  ["text-label group-active:text-blue-500"]: !field.value && !open,
1828
1835
  ["text-blue-500"]: open && !field.value,
1829
- ["text-blue-500 group-hover:text-white"]: open && field.value
1836
+ ["text-blue-500 group-hover:text-accent-label"]: open && field.value
1830
1837
  },
1831
1838
  "uil uil-angle-up text-[18px]"
1832
1839
  )
@@ -1838,7 +1845,7 @@ var FilterOptions = ({
1838
1845
  {
1839
1846
  ["text-label group-active:text-blue-500"]: !field.value && !open,
1840
1847
  ["text-blue-500"]: open && !field.value,
1841
- ["text-blue-500 group-hover:text-white"]: open && field.value
1848
+ ["text-blue-500 group-hover:text-accent-label"]: open && field.value
1842
1849
  },
1843
1850
  "uil uil-angle-down text-[18px]"
1844
1851
  )
@@ -1847,7 +1854,7 @@ var FilterOptions = ({
1847
1854
  ]
1848
1855
  }
1849
1856
  ) }) }),
1850
- open && /* @__PURE__ */ jsx(Float.Content, { children: /* @__PURE__ */ jsx(PopoverPanel, { className: "p-3 whitespace-nowrap bg-white rounded-lg shadow-dropdown border-[0.5px] border-neutral-300", children: ({ close }) => {
1857
+ open && /* @__PURE__ */ jsx(Float.Content, { children: /* @__PURE__ */ jsx(PopoverPanel, { className: "p-3 whitespace-nowrap bg-surface rounded-lg shadow-dropdown border-[0.5px] border-neutral-300", children: ({ close }) => {
1851
1858
  const onClose = () => {
1852
1859
  setCurrentValue(field.value);
1853
1860
  close();
@@ -1867,7 +1874,7 @@ var FilterOptions = ({
1867
1874
  {
1868
1875
  static: true,
1869
1876
  className: clsx9(
1870
- "max-h-60 w-full overflow-x-hidden overflow-y-auto bg-white text-p-md focus:outline-none sm:text-sm relative",
1877
+ "max-h-60 w-full overflow-x-hidden overflow-y-auto bg-surface text-p-md focus:outline-none sm:text-sm relative",
1871
1878
  {
1872
1879
  "pr-2": options.some(
1873
1880
  (option) => option.description
@@ -1891,14 +1898,14 @@ var FilterOptions = ({
1891
1898
  }
1892
1899
  }
1893
1900
  ),
1894
- subFilters && fetch && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 pt-2 bg-white", children: subFilters.map((item, index) => {
1901
+ subFilters && fetch && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 pt-2 bg-surface", children: subFilters.map((item, index) => {
1895
1902
  const active = (item == null ? void 0 : item.id) === subFilter;
1896
1903
  return /* @__PURE__ */ jsx(
1897
1904
  "button",
1898
1905
  {
1899
1906
  className: clsx9(
1900
1907
  {
1901
- ["bg-blue-500 text-white"]: active,
1908
+ ["bg-blue-500 text-accent-label"]: active,
1902
1909
  ["text-paragraph"]: !active
1903
1910
  },
1904
1911
  `rounded-[20px] border-[0.5px] border-neutral-200 px-4 py-[6px]`
@@ -2053,7 +2060,7 @@ function InputMoney({
2053
2060
  const fieldValidationMessages = [error == null ? void 0 : error.message];
2054
2061
  const hasError = fieldValidationMessages.some((item) => item !== void 0);
2055
2062
  const styles = {
2056
- input: `text-p-md pl-2 peer text-paragraph shadow-input border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
2063
+ input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
2057
2064
  icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1px] w-[38px] rounded-l-lg ${hasError ? "text-dangerous-500" : "text-label"}
2058
2065
  `,
2059
2066
  label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0"};
@@ -2175,7 +2182,7 @@ function InputNumber({
2175
2182
  const fieldValidationMessages = [error == null ? void 0 : error.message];
2176
2183
  const hasError = fieldValidationMessages.some((item) => item !== void 0);
2177
2184
  const styles = {
2178
- input: `text-p-md pl-2 peer shadow-input border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1 ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
2185
+ input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1 ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
2179
2186
  icon: `absolute bg-neutral-100 h-[44px] top-[2px] left-[1.5px] w-[38px] rounded-l-lg ${hasError ? "text-dangerous-500" : "text-label"}
2180
2187
  `,
2181
2188
  label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0",
@@ -2388,7 +2395,7 @@ function InputPercentage({
2388
2395
  const fieldValidationMessages = [error == null ? void 0 : error.message];
2389
2396
  const hasError = fieldValidationMessages.some((item) => item !== void 0);
2390
2397
  const styles = {
2391
- input: `text-p-md pl-2 peer shadow-input border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1 ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
2398
+ input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1 ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
2392
2399
  icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] text-[22px] rounded-lg ${hasError ? "text-dangerous-500" : "text-label"}
2393
2400
  `,
2394
2401
  label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0"};
@@ -2599,7 +2606,9 @@ var ModalDialog = ({
2599
2606
  bottom: "auto",
2600
2607
  marginRight: "-50%",
2601
2608
  transform: "translate(-50%, -50%)",
2602
- border: "1px solid #E8E8E9",
2609
+ border: "1px solid var(--neutral-200)",
2610
+ background: "var(--surface)",
2611
+ color: "var(--paragraph)",
2603
2612
  padding: "20px 24px 24px 24px",
2604
2613
  borderRadius: "8px",
2605
2614
  overflow: "initial"
@@ -2626,23 +2635,33 @@ var ModalDialog = ({
2626
2635
  shouldCloseOnEsc: closeOnOverlayClick,
2627
2636
  style: customStyles6,
2628
2637
  contentLabel: "Example Modal",
2629
- children: /* @__PURE__ */ jsxs("div", { className: clsx9(sizes3[size]), children: [
2630
- showHeader && /* @__PURE__ */ jsxs("div", { className: "pb-[6px] border-b border-b-neutral-200 flex items-center justify-between", children: [
2631
- /* @__PURE__ */ jsxs("h3", { className: "text-[24px] font-bold flex items-center gap-2", children: [
2632
- alertType && /* @__PURE__ */ jsx("div", { className: clsx9([alertTypes[alertType]], "text-[30px]"), children: icon }),
2638
+ closeTimeoutMS: 200,
2639
+ children: /* @__PURE__ */ jsxs("div", { className: clsx9("modal-inner", sizes3[size]), children: [
2640
+ showHeader && /* @__PURE__ */ jsxs("div", { className: "border-b border-b-neutral-200 flex items-center justify-between ", children: [
2641
+ /* @__PURE__ */ jsxs("h3", { className: "font-title text-t-sm font-bold flex items-center gap-2", children: [
2642
+ alertType && /* @__PURE__ */ jsx(
2643
+ "div",
2644
+ {
2645
+ className: clsx9(
2646
+ alertTypes[alertType],
2647
+ "w-[26px] h-[26px] text-[26px] flex items-center justify-center shrink-0"
2648
+ ),
2649
+ children: icon
2650
+ }
2651
+ ),
2633
2652
  title
2634
2653
  ] }),
2635
- /* @__PURE__ */ jsx(
2654
+ /* @__PURE__ */ jsx("div", { className: "inline", children: /* @__PURE__ */ jsx(
2636
2655
  Button,
2637
2656
  {
2638
2657
  onClick: onCancel,
2639
2658
  variant: "ghost",
2640
- size: "xs",
2641
- icon: /* @__PURE__ */ jsx("i", { className: "uil uil-times" })
2659
+ size: "md",
2660
+ icon: /* @__PURE__ */ jsx("i", { className: "uil uil-times text-neutral-400" })
2642
2661
  }
2643
- )
2662
+ ) })
2644
2663
  ] }),
2645
- /* @__PURE__ */ jsx("div", { children }),
2664
+ /* @__PURE__ */ jsx("div", { className: "mt-4", children }),
2646
2665
  showFooter && /* @__PURE__ */ jsxs("div", { className: "pt-6 flex w-full items-center justify-between", children: [
2647
2666
  /* @__PURE__ */ jsx(
2648
2667
  "div",
@@ -2725,6 +2744,7 @@ var customStyles = {
2725
2744
  },
2726
2745
  input: (provided, state) => ({
2727
2746
  ...provided,
2747
+ color: "var(--paragraph)",
2728
2748
  paddingLeft: state.selectProps.hasIcon ? "34px" : "0px",
2729
2749
  paddingTop: state.selectProps.hasLabel ? "10px" : "0px"
2730
2750
  }),
@@ -2734,7 +2754,7 @@ var customStyles = {
2734
2754
  border: "1px solid var(--neutral-300)",
2735
2755
  boxShadow: "none",
2736
2756
  borderRadius: "8px",
2737
- background: "white",
2757
+ background: "var(--surface)",
2738
2758
  zIndex: 20
2739
2759
  }),
2740
2760
  menuList: (provided) => ({
@@ -2745,7 +2765,7 @@ var customStyles = {
2745
2765
  ...base,
2746
2766
  paddingLeft: state.selectProps.hasIcon ? "34px" : "0px",
2747
2767
  paddingTop: state.selectProps.hasLabel ? "10px" : "0",
2748
- color: state.data.value === "active" ? "#0EAF86" : state.selectProps.hasError ? "var(--dangerous-500)" : "black",
2768
+ color: state.data.value === "active" ? "#0EAF86" : state.selectProps.hasError ? "var(--dangerous-500)" : "var(--paragraph)",
2749
2769
  display: "flex"
2750
2770
  }),
2751
2771
  control: (provided, state) => ({
@@ -2757,7 +2777,7 @@ var customStyles = {
2757
2777
  borderRadius: "0.5rem",
2758
2778
  placeholder: " ",
2759
2779
  height: state.selectProps.smallField ? "30px" : "46px",
2760
- backgroundColor: state.isDisabled ? "var(--light-100)" : "white",
2780
+ backgroundColor: state.isDisabled ? "var(--light-100)" : "var(--surface)",
2761
2781
  ":hover": {
2762
2782
  border: state.selectProps.hasError ? "1px solid var(--dangerous-700)" : state.menuIsOpen ? "1px solid var(--blue-700)" : "1px solid var(--neutral-300)"
2763
2783
  }
@@ -2780,7 +2800,7 @@ var customStyles = {
2780
2800
  }
2781
2801
  }),
2782
2802
  option: (provided, state) => {
2783
- let color = state.isSelected ? "white" : (state == null ? void 0 : state.isDisabled) ? "var(--label)" : "var(--paragraph)";
2803
+ let color = state.isSelected ? "var(--accent-label)" : (state == null ? void 0 : state.isDisabled) ? "var(--label)" : "var(--paragraph)";
2784
2804
  return {
2785
2805
  ...provided,
2786
2806
  cursor: state.isDisabled ? "auto" : "pointer",
@@ -2788,7 +2808,7 @@ var customStyles = {
2788
2808
  borderRadius: "8px",
2789
2809
  margin: "4px 0px",
2790
2810
  padding: "12px",
2791
- backgroundColor: state.isSelected ? "var(--blue-500)" : "white",
2811
+ backgroundColor: state.isSelected ? "var(--blue-500)" : "var(--surface)",
2792
2812
  color,
2793
2813
  fontWeight: state.isSelected ? 700 : 400,
2794
2814
  "&:hover": {
@@ -2796,15 +2816,15 @@ var customStyles = {
2796
2816
  },
2797
2817
  "&:active": {
2798
2818
  backgroundColor: "var(--blue-500)",
2799
- color: "white",
2819
+ color: "var(--accent-label)",
2800
2820
  fontWeight: 700
2801
2821
  },
2802
2822
  "&:active i": {
2803
- color: "white",
2823
+ color: "var(--accent-label)",
2804
2824
  fontWeight: 700
2805
2825
  },
2806
2826
  " i": {
2807
- color: "white"
2827
+ color: "var(--accent-label)"
2808
2828
  }
2809
2829
  };
2810
2830
  },
@@ -3137,6 +3157,7 @@ var customStyles2 = {
3137
3157
  },
3138
3158
  input: (provided, state) => ({
3139
3159
  ...provided,
3160
+ color: "var(--paragraph)",
3140
3161
  paddingLeft: state.selectProps.hasIcon ? "34px" : "0px",
3141
3162
  paddingTop: state.selectProps.hasLabel ? "10px" : "0px"
3142
3163
  }),
@@ -3146,7 +3167,7 @@ var customStyles2 = {
3146
3167
  border: "1px solid var(--neutral-300)",
3147
3168
  boxShadow: "none",
3148
3169
  borderRadius: "8px",
3149
- background: "white",
3170
+ background: "var(--surface)",
3150
3171
  zIndex: 60
3151
3172
  }),
3152
3173
  menuList: (provided) => ({
@@ -3157,7 +3178,7 @@ var customStyles2 = {
3157
3178
  ...base,
3158
3179
  paddingLeft: state.selectProps.hasIcon ? "34px" : "0px",
3159
3180
  paddingTop: state.selectProps.hasLabel ? "10px" : "0",
3160
- color: state.data.value === "active" ? "#0EAF86" : "black",
3181
+ color: state.data.value === "active" ? "#0EAF86" : "var(--paragraph)",
3161
3182
  display: "flex"
3162
3183
  }),
3163
3184
  placeholder: (provided, state) => ({
@@ -3173,7 +3194,7 @@ var customStyles2 = {
3173
3194
  borderRadius: "0.5rem",
3174
3195
  placeholder: " ",
3175
3196
  height: "46px",
3176
- backgroundColor: state.isDisabled ? "var(--light-100)" : "white",
3197
+ backgroundColor: state.isDisabled ? "var(--light-100)" : "var(--surface)",
3177
3198
  ":hover": {
3178
3199
  border: state.selectProps.hasError ? "1px solid var(--dangerous-700)" : state.menuIsOpen ? "1px solid var(--blue-700)" : "1px solid var(--neutral-300)"
3179
3200
  }
@@ -3196,7 +3217,7 @@ var customStyles2 = {
3196
3217
  }
3197
3218
  }),
3198
3219
  option: (provided, state) => {
3199
- let color = state.isSelected ? "white" : (state == null ? void 0 : state.isDisabled) ? "var(--label)" : "var(--paragraph)";
3220
+ let color = state.isSelected ? "var(--accent-label)" : (state == null ? void 0 : state.isDisabled) ? "var(--label)" : "var(--paragraph)";
3200
3221
  return {
3201
3222
  ...provided,
3202
3223
  cursor: state.isDisabled ? "auto" : "pointer",
@@ -3204,7 +3225,7 @@ var customStyles2 = {
3204
3225
  borderRadius: "8px",
3205
3226
  margin: "4px 0px",
3206
3227
  padding: "10px 12px",
3207
- backgroundColor: state.isSelected ? "var(--blue-700)" : "white",
3228
+ backgroundColor: state.isSelected ? "var(--blue-700)" : "var(--surface)",
3208
3229
  color,
3209
3230
  fontWeight: state.isSelected ? 700 : 400,
3210
3231
  "&:hover": {
@@ -3212,15 +3233,15 @@ var customStyles2 = {
3212
3233
  },
3213
3234
  "&:active": {
3214
3235
  backgroundColor: "var(--blue-700)",
3215
- color: "white !important",
3236
+ color: "var(--accent-label) !important",
3216
3237
  fontWeight: 700
3217
3238
  },
3218
3239
  "&:active i": {
3219
- color: "white !important",
3240
+ color: "var(--accent-label) !important",
3220
3241
  fontWeight: 700
3221
3242
  },
3222
3243
  " i": {
3223
- color: "white !important"
3244
+ color: "var(--accent-label) !important"
3224
3245
  }
3225
3246
  };
3226
3247
  },
@@ -3633,7 +3654,7 @@ var Toggle = ({
3633
3654
  className: classNames(
3634
3655
  "pointer-events-none relative inline-block -top-[2px] right-[2px] h-[14px] w-[14px] transform rounded-full shadow ring-0 transition duration-200 ease-in-out",
3635
3656
  checked ? "translate-x-[15px]" : "translate-x-0",
3636
- disabled ? "bg-neutral-300" : "bg-white"
3657
+ disabled ? "bg-neutral-300" : "bg-button-label"
3637
3658
  ),
3638
3659
  children: [
3639
3660
  /* @__PURE__ */ jsx(
@@ -3753,7 +3774,7 @@ function PaginationSelect({
3753
3774
  pageSizeSelected == null ? void 0 : pageSizeSelected.name,
3754
3775
  open ? /* @__PURE__ */ jsx("i", { className: "uil uil-angle-up text-base top-[13px] pl-3 cursor-pointer text-label" }) : /* @__PURE__ */ jsx("i", { className: "uil uil-angle-down text-base top-[13px] pl-3 cursor-pointer text-label" })
3755
3776
  ] }),
3756
- /* @__PURE__ */ jsx(Combobox.Options, { className: "w-full outline-none max-h-[200px] overflow-auto border-[0.5px] mt-1 color-neutral-300 flex flex-col gap-y-2 p-1 absolute right-0 bottom-12 z-[999] rounded-lg bg-white", children: pageSizesOptions == null ? void 0 : pageSizesOptions.map((opt) => {
3777
+ /* @__PURE__ */ jsx(Combobox.Options, { className: "w-full outline-none max-h-[200px] overflow-auto border-[0.5px] mt-1 color-neutral-300 flex flex-col gap-y-2 p-1 absolute right-0 bottom-12 z-[999] rounded-lg bg-surface", children: pageSizesOptions == null ? void 0 : pageSizesOptions.map((opt) => {
3757
3778
  const selected = (opt == null ? void 0 : opt.id) === (pageSizeSelected == null ? void 0 : pageSizeSelected.id);
3758
3779
  return /* @__PURE__ */ jsx(
3759
3780
  Combobox.Option,
@@ -3762,7 +3783,7 @@ function PaginationSelect({
3762
3783
  className: clsx9(
3763
3784
  "p-2 rounded-lg items-center justify-center cursor-pointer flex whitespace-nowrap no-underline ",
3764
3785
  {
3765
- "bg-blue-500 hover:bg-blue-500 hover:text-[#FFFFFF] text-[#FFFFFF]": selected
3786
+ "bg-blue-500 hover:bg-blue-500 hover:text-accent-label text-accent-label": selected
3766
3787
  },
3767
3788
  {
3768
3789
  "hover:bg-neutral-100 text-paragraph": !selected
@@ -3828,7 +3849,7 @@ function PaginationSelect({
3828
3849
  ),
3829
3850
  open ? /* @__PURE__ */ jsx("i", { className: "uil uil-angle-up text-base absolute top-[10px] right-2 cursor-pointer text-label" }) : /* @__PURE__ */ jsx("i", { className: "uil uil-angle-down text-base absolute top-[10px] right-2 cursor-pointer text-label" })
3830
3851
  ] }),
3831
- /* @__PURE__ */ jsx(Combobox.Options, { className: "w-full outline-none max-h-[200px] overflow-auto border-[0.5px] mt-1 color-neutral-300 flex flex-col gap-y-2 p-1 absolute right-0 bottom-12 z-[999] rounded-lg bg-white", children: pagesOptions.map((opt) => {
3852
+ /* @__PURE__ */ jsx(Combobox.Options, { className: "w-full outline-none max-h-[200px] overflow-auto border-[0.5px] mt-1 color-neutral-300 flex flex-col gap-y-2 p-1 absolute right-0 bottom-12 z-[999] rounded-lg bg-surface", children: pagesOptions.map((opt) => {
3832
3853
  const selected = (opt == null ? void 0 : opt.id) === (pageSelected == null ? void 0 : pageSelected.id);
3833
3854
  return /* @__PURE__ */ jsx(
3834
3855
  Combobox.Option,
@@ -3837,7 +3858,7 @@ function PaginationSelect({
3837
3858
  className: clsx9(
3838
3859
  "p-2 rounded-lg items-center justify-center cursor-pointer flex whitespace-nowrap no-underline ",
3839
3860
  {
3840
- "bg-blue-500 hover:bg-blue-500 hover:text-[#FFFFFF] text-[#FFFFFF]": selected
3861
+ "bg-blue-500 hover:bg-blue-500 hover:text-accent-label text-accent-label": selected
3841
3862
  },
3842
3863
  {
3843
3864
  "hover:bg-neutral-100 text-paragraph": !selected
@@ -3883,7 +3904,7 @@ var TableFooter = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE
3883
3904
  {
3884
3905
  ref,
3885
3906
  className: clsx(
3886
- " flex flex-col md:flex-row gap-2 md:gap-0 justify-between items-center py-4 px-6 bg-white w-full h-full border border-neutral-200 rounded-t-lg",
3907
+ " flex flex-col md:flex-row gap-2 md:gap-0 justify-between items-center py-4 px-6 bg-surface w-full h-full border border-neutral-200 rounded-t-lg",
3887
3908
  className
3888
3909
  ),
3889
3910
  ...props
@@ -3900,7 +3921,7 @@ var TableHead = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__
3900
3921
  {
3901
3922
  "hover:bg-neutral-100": props.sortable
3902
3923
  },
3903
- "text-p-md z-[50] bg-white font-normal text-neutral-700 p-4 text-left border-t border-b border-neutral-200 first:border-l last:border-r first:rounded-tl-lg first:rounded-bl-lg last:rounded-tr-lg last:rounded-br-lg",
3924
+ "text-p-md z-[50] bg-surface font-normal text-neutral-700 p-4 text-left border-t border-b border-neutral-200 first:border-l last:border-r first:rounded-tl-lg first:rounded-bl-lg last:rounded-tr-lg last:rounded-br-lg",
3904
3925
  className
3905
3926
  ),
3906
3927
  ...props
@@ -3973,10 +3994,10 @@ function DataTablePagination({
3973
3994
  (pageSizeOptions == null ? void 0 : pageSizeOptions.length) > 0 && /* @__PURE__ */ jsx(PaginationSelect, { table, pageSizeOptions }),
3974
3995
  /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row items-center justify-center md:justify-normal gap-2 md:gap-4", children: [
3975
3996
  footer,
3976
- selectAllOption && /* @__PURE__ */ jsx("div", { children: rowsSelected !== totalData ? /* @__PURE__ */ jsx("div", { className: "md:border-l border-gray-300 pl-4", children: /* @__PURE__ */ jsxs(Button, { size: "xxs", onClick: onSelectAll, variant: "secondary", children: [
3997
+ selectAllOption && /* @__PURE__ */ jsx("div", { children: rowsSelected !== totalData ? /* @__PURE__ */ jsx("div", { className: "md:border-l border-neutral-300 pl-4", children: /* @__PURE__ */ jsxs(Button, { size: "xxs", onClick: onSelectAll, variant: "secondary", children: [
3977
3998
  "Selecionar todos os ",
3978
3999
  totalData
3979
- ] }) }) : /* @__PURE__ */ jsx("div", { className: "md:border-l border-gray-300 pl-4", children: /* @__PURE__ */ jsx(Button, { size: "xxs", onClick: onRemoveAll, variant: "secondary", children: "Desmarcar todos" }) }) })
4000
+ ] }) }) : /* @__PURE__ */ jsx("div", { className: "md:border-l border-neutral-300 pl-4", children: /* @__PURE__ */ jsx(Button, { size: "xxs", onClick: onRemoveAll, variant: "secondary", children: "Desmarcar todos" }) }) })
3980
4001
  ] }),
3981
4002
  /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row items-center md:justify-end justify-center gap-2 flex-1", children: [
3982
4003
  /* @__PURE__ */ jsxs("span", { className: "text-p-md text-paragraph mr-1", children: [
@@ -4009,7 +4030,7 @@ function DataTablePagination({
4009
4030
  {
4010
4031
  style: {
4011
4032
  fontSize: "12px",
4012
- color: "#393C4D"
4033
+ color: "var(--paragraph)"
4013
4034
  },
4014
4035
  children: 1
4015
4036
  }
@@ -4044,7 +4065,7 @@ function DataTablePagination({
4044
4065
  {
4045
4066
  style: {
4046
4067
  fontSize: "12px",
4047
- color: isSelectedPage ? "#FFF" : "#393C4D"
4068
+ color: isSelectedPage ? "var(--accent-label)" : "var(--paragraph)"
4048
4069
  },
4049
4070
  children: (index + 1).toLocaleString("pt-BR")
4050
4071
  }
@@ -4073,7 +4094,7 @@ function DataTablePagination({
4073
4094
  {
4074
4095
  style: {
4075
4096
  fontSize: "12px",
4076
- color: "#393C4D"
4097
+ color: "var(--paragraph)"
4077
4098
  },
4078
4099
  children: pageCount.toLocaleString("pt-BR")
4079
4100
  }
@@ -4617,7 +4638,7 @@ var Menu = ({ triggerElement, children, className }) => {
4617
4638
  children: /* @__PURE__ */ jsx(
4618
4639
  MenuItems,
4619
4640
  {
4620
- className: `border-[0.5px] mt-1 color-neutral-300 flex min-w-[200px] flex-col gap-y-2 p-3 absolute right-0 z-[999] rounded-lg shadow-[2px_4px_8px_rgba(57,60,77,0.1)] bg-white cursor-default ${className}`,
4641
+ className: `border-[0.5px] mt-1 color-neutral-300 flex min-w-[200px] flex-col gap-y-2 p-3 absolute right-0 z-[999] rounded-lg shadow-[2px_4px_8px_rgba(57,60,77,0.1)] bg-surface cursor-default ${className}`,
4621
4642
  children
4622
4643
  }
4623
4644
  )
@@ -4632,7 +4653,7 @@ var Item = ({ index, isActive, onClick, children }) => {
4632
4653
  className: clsx9(
4633
4654
  "h-[36px] p-2 rounded-lg items-center cursor-pointer flex whitespace-nowrap no-underline ",
4634
4655
  {
4635
- "bg-[#009EDB] hover:bg-[#009EDB] hover:text-[#FFFFFF] text-[#FFFFFF]": isActive
4656
+ "bg-blue-500 hover:bg-blue-500 hover:text-accent-label text-accent-label": isActive
4636
4657
  },
4637
4658
  {
4638
4659
  "hover:bg-neutral-100 text-paragraph": !isActive
@@ -4660,7 +4681,7 @@ var EditableButton = ({
4660
4681
  children: button
4661
4682
  }
4662
4683
  ),
4663
- showModal && /* @__PURE__ */ jsxs("div", { className: "max-w-[294px] p-2 bg-white border border-neutral-300 top-14 absolute z-50 rounded-lg", children: [
4684
+ showModal && /* @__PURE__ */ jsxs("div", { className: "max-w-[294px] p-2 bg-surface border border-neutral-300 top-14 absolute z-50 rounded-lg", children: [
4664
4685
  /* @__PURE__ */ jsx("div", { className: "pb-3", children }),
4665
4686
  /* @__PURE__ */ jsxs("div", { className: "pt-3 pb-1 border-t border-neutral-200 flex items-center justify-end gap-2", children: [
4666
4687
  /* @__PURE__ */ jsx(
@@ -4751,7 +4772,7 @@ var EditableText = ({
4751
4772
  }
4752
4773
  ),
4753
4774
  showModal && /* @__PURE__ */ jsxs("div", { children: [
4754
- /* @__PURE__ */ jsxs("div", { className: "w-[160px] md:w-[294px] p-2 bg-white border border-neutral-300 absolute z-[500] rounded-lg", children: [
4775
+ /* @__PURE__ */ jsxs("div", { className: "w-[160px] md:w-[294px] p-2 bg-surface border border-neutral-300 absolute z-[500] rounded-lg", children: [
4755
4776
  /* @__PURE__ */ jsx("div", { className: "pb-3 ", children }),
4756
4777
  /* @__PURE__ */ jsxs("div", { className: "pt-3 pb-1 border-t border-neutral-200 flex flex-col md:flex-row md:items-center md:justify-end gap-2", children: [
4757
4778
  /* @__PURE__ */ jsx(
@@ -4859,7 +4880,7 @@ var EditableTextSelect = ({
4859
4880
  ]
4860
4881
  }
4861
4882
  ) }),
4862
- /* @__PURE__ */ jsx(Menu$1.Items, { children: /* @__PURE__ */ jsxs("div", { className: "w-[294px] p-2 bg-white border border-neutral-300 absolute z-[500] rounded-lg", children: [
4883
+ /* @__PURE__ */ jsx(Menu$1.Items, { children: /* @__PURE__ */ jsxs("div", { className: "w-[294px] p-2 bg-surface border border-neutral-300 absolute z-[500] rounded-lg", children: [
4863
4884
  showInputSeach && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(
4864
4885
  InputSmall,
4865
4886
  {
@@ -4891,7 +4912,7 @@ var EditableTextSelect = ({
4891
4912
  className: clsx9(
4892
4913
  "p-3 mb-1 rounded-lg items-center flex whitespace-nowrap no-underline w-full",
4893
4914
  {
4894
- "bg-blue-500 hover:bg-blue-500 hover:text-[#FFFFFF] text-[#FFFFFF]": selected
4915
+ "bg-blue-500 hover:bg-blue-500 hover:text-accent-label text-accent-label": selected
4895
4916
  },
4896
4917
  {
4897
4918
  "hover:bg-neutral-100 text-paragraph": !selected
@@ -4918,9 +4939,9 @@ var EditableTextSelect = ({
4918
4939
  "span",
4919
4940
  {
4920
4941
  className: clsx9(
4921
- "group-hover:text-[#fff] ",
4942
+ "group-hover:text-accent-label ",
4922
4943
  {
4923
- "text-[#fff]": selected
4944
+ "text-accent-label": selected
4924
4945
  },
4925
4946
  {
4926
4947
  "text-blue-500": !selected
@@ -4970,7 +4991,7 @@ function ImagePreview({ open, setOpen, previewImage }) {
4970
4991
  leave: "ease-in duration-200",
4971
4992
  leaveFrom: "opacity-100 translate-y-0 sm:scale-100",
4972
4993
  leaveTo: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
4973
- children: /* @__PURE__ */ jsx(Dialog.Panel, { className: "flex flex-col min-w-[350px] min-h-[250px] relative transform overflow-hidden rounded-lg bg-white p-6 text-left shadow-xl transition-all", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full flex-1", children: [
4994
+ children: /* @__PURE__ */ jsx(Dialog.Panel, { className: "flex flex-col min-w-[350px] min-h-[250px] relative transform overflow-hidden rounded-lg bg-surface p-6 text-left shadow-xl transition-all", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full flex-1", children: [
4974
4995
  /* @__PURE__ */ jsxs("div", { className: "flex justify-between mb-2", children: [
4975
4996
  /* @__PURE__ */ jsx("h2", { className: "text-t-sm font-bold", children: "Pr\xE9via da imagem" }),
4976
4997
  /* @__PURE__ */ jsx(
@@ -5496,7 +5517,7 @@ var DefaultContent = ({ formats, icon, limitMessage }) => /* @__PURE__ */ jsx("d
5496
5517
  "label",
5497
5518
  {
5498
5519
  htmlFor: "file-upload",
5499
- className: "relative leading-none cursor-pointer text-sm bg-white focus-within:outline-none",
5520
+ className: "relative leading-none cursor-pointer text-sm bg-surface focus-within:outline-none",
5500
5521
  children: /* @__PURE__ */ jsxs("p", { children: [
5501
5522
  "ou\xA0",
5502
5523
  /* @__PURE__ */ jsx("span", { className: "text-blue-500", children: "selecione do seu computador" })
@@ -5563,6 +5584,7 @@ var customStyles3 = {
5563
5584
  },
5564
5585
  input: (provided, state) => ({
5565
5586
  ...provided,
5587
+ color: "var(--paragraph)",
5566
5588
  outline: "none",
5567
5589
  paddingLeft: state.selectProps.hasIcon ? "2.5rem" : "0px"
5568
5590
  }),
@@ -5592,11 +5614,11 @@ var customStyles3 = {
5592
5614
  borderRadius: "8px",
5593
5615
  padding: "0px 8px",
5594
5616
  zIndex: 70,
5595
- background: "white"
5617
+ background: "var(--surface)"
5596
5618
  }),
5597
5619
  singleValue: (base, state) => ({
5598
5620
  ...base,
5599
- color: state.data.value === "active" ? "#0EAF86" : "black",
5621
+ color: state.data.value === "active" ? "#0EAF86" : "var(--paragraph)",
5600
5622
  display: "flex"
5601
5623
  }),
5602
5624
  control: (provided, state) => ({
@@ -5611,6 +5633,7 @@ var customStyles3 = {
5611
5633
  minHeight: "46px",
5612
5634
  alignItems: "end",
5613
5635
  paddingTop: "8px",
5636
+ backgroundColor: "var(--surface)",
5614
5637
  ":hover": {
5615
5638
  border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.menuIsOpen ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)"
5616
5639
  }
@@ -5637,9 +5660,9 @@ var customStyles3 = {
5637
5660
  }
5638
5661
  }),
5639
5662
  option: (provided, state) => {
5640
- let color = state.isSelected && !state.selectProps.isTargeted ? "white" : "var(--paragraph)";
5663
+ let color = state.isSelected && !state.selectProps.isTargeted ? "var(--accent-label)" : "var(--paragraph)";
5641
5664
  if (state.isDisabled) {
5642
- color = "rgba(0,0,0,0.30)";
5665
+ color = "var(--disabled)";
5643
5666
  }
5644
5667
  return {
5645
5668
  ...provided,
@@ -5647,7 +5670,7 @@ var customStyles3 = {
5647
5670
  cursor: "pointer",
5648
5671
  borderRadius: "8px",
5649
5672
  margin: "4px 0px",
5650
- backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : state.isFocused ? "var(--neutral-200)" : "white",
5673
+ backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : state.isFocused ? "var(--neutral-200)" : "var(--surface)",
5651
5674
  color,
5652
5675
  fontWeight: state.isSelected && !state.selectProps.isTargeted ? 700 : 400,
5653
5676
  "&:hover": {
@@ -5655,15 +5678,15 @@ var customStyles3 = {
5655
5678
  },
5656
5679
  "&:active": {
5657
5680
  backgroundColor: "var(--blue-500)",
5658
- color: "white",
5681
+ color: "var(--accent-label)",
5659
5682
  fontWeight: 700
5660
5683
  },
5661
5684
  "&:active svg": {
5662
- color: "white",
5685
+ color: "var(--accent-label)",
5663
5686
  fontWeight: 700
5664
5687
  },
5665
5688
  " svg": {
5666
- color: "white"
5689
+ color: "var(--accent-label)"
5667
5690
  }
5668
5691
  };
5669
5692
  },
@@ -5781,6 +5804,7 @@ var ValueContainer3 = ({ children, ...props }) => {
5781
5804
  var customStyles4 = {
5782
5805
  input: (provided) => ({
5783
5806
  ...provided,
5807
+ color: "var(--paragraph)",
5784
5808
  outline: "none",
5785
5809
  height: "100%"
5786
5810
  }),
@@ -5807,7 +5831,7 @@ var customStyles4 = {
5807
5831
  borderRadius: "8px",
5808
5832
  padding: "0px 8px",
5809
5833
  zIndex: 30,
5810
- background: "white"
5834
+ background: "var(--surface)"
5811
5835
  }),
5812
5836
  control: (provided, state) => {
5813
5837
  return {
@@ -5818,6 +5842,7 @@ var customStyles4 = {
5818
5842
  boxShadow: "none",
5819
5843
  outline: "none",
5820
5844
  borderRadius: "0.5rem",
5845
+ backgroundColor: "var(--surface)",
5821
5846
  // height: "52px",
5822
5847
  // paddingLeft: '8px',
5823
5848
  placeholder: state.selectProps.hasLabel ? " " : state.selectProps.placeholder,
@@ -5972,6 +5997,7 @@ var customStyles5 = {
5972
5997
  },
5973
5998
  input: (provided, state) => ({
5974
5999
  ...provided,
6000
+ color: "var(--paragraph)",
5975
6001
  outline: "none",
5976
6002
  paddingLeft: state.selectProps.hasIcon ? "2.5rem" : "0px"
5977
6003
  }),
@@ -5996,11 +6022,11 @@ var customStyles5 = {
5996
6022
  borderRadius: "8px",
5997
6023
  padding: "0px 8px",
5998
6024
  zIndex: 70,
5999
- background: "white"
6025
+ background: "var(--surface)"
6000
6026
  }),
6001
6027
  singleValue: (base, state) => ({
6002
6028
  ...base,
6003
- color: state.data.value === "active" ? "#0EAF86" : "black",
6029
+ color: state.data.value === "active" ? "#0EAF86" : "var(--paragraph)",
6004
6030
  display: "flex"
6005
6031
  }),
6006
6032
  control: (provided, state) => ({
@@ -6014,6 +6040,7 @@ var customStyles5 = {
6014
6040
  placeholder: " ",
6015
6041
  height: "46px",
6016
6042
  alignItems: "end",
6043
+ backgroundColor: "var(--surface)",
6017
6044
  ":hover": {
6018
6045
  border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.menuIsOpen ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)"
6019
6046
  }
@@ -6040,9 +6067,9 @@ var customStyles5 = {
6040
6067
  }
6041
6068
  }),
6042
6069
  option: (provided, state) => {
6043
- let color = state.isSelected && !state.selectProps.isTargeted ? "white" : "var(--paragraph)";
6070
+ let color = state.isSelected && !state.selectProps.isTargeted ? "var(--accent-label)" : "var(--paragraph)";
6044
6071
  if (state.isDisabled) {
6045
- color = "rgba(0,0,0,0.30)";
6072
+ color = "var(--disabled)";
6046
6073
  }
6047
6074
  return {
6048
6075
  ...provided,
@@ -6050,7 +6077,7 @@ var customStyles5 = {
6050
6077
  cursor: "pointer",
6051
6078
  borderRadius: "8px",
6052
6079
  margin: "4px 0px",
6053
- backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : state.isFocused ? "var(--neutral-200)" : "white",
6080
+ backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : state.isFocused ? "var(--neutral-200)" : "var(--surface)",
6054
6081
  color,
6055
6082
  fontWeight: state.isSelected && !state.selectProps.isTargeted ? 700 : 400,
6056
6083
  "&:hover": {
@@ -6058,15 +6085,15 @@ var customStyles5 = {
6058
6085
  },
6059
6086
  "&:active": {
6060
6087
  backgroundColor: "var(--blue-500)",
6061
- color: "white",
6088
+ color: "var(--accent-label)",
6062
6089
  fontWeight: 700
6063
6090
  },
6064
6091
  "&:active svg": {
6065
- color: "white",
6092
+ color: "var(--accent-label)",
6066
6093
  fontWeight: 700
6067
6094
  },
6068
6095
  " svg": {
6069
- color: "white"
6096
+ color: "var(--accent-label)"
6070
6097
  }
6071
6098
  };
6072
6099
  },
@@ -6499,7 +6526,7 @@ var SkeletonList = ({ loading, ...props }) => {
6499
6526
  new Array(1).fill(null).map((_, index) => /* @__PURE__ */ jsx("div", { children: headerItem }, index + "second")),
6500
6527
  new Array(4).fill(null).map((_, index) => /* @__PURE__ */ jsx("div", { children: tableLine }, index + "third"))
6501
6528
  ] }) }),
6502
- /* @__PURE__ */ jsxs("div", { className: "py-4 px-6 sticky bottom-0 bg-white w-full border border-neutral-200 rounded-t-lg flex items-center gap-3 justify-end", children: [
6529
+ /* @__PURE__ */ jsxs("div", { className: "py-4 px-6 sticky bottom-0 bg-surface w-full border border-neutral-200 rounded-t-lg flex items-center gap-3 justify-end", children: [
6503
6530
  /* @__PURE__ */ jsx("div", { className: "w-[190px] h-6 rounded-md", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }) }),
6504
6531
  Array(5).fill(null).map((_, index) => /* @__PURE__ */ jsx("div", { children: buttonPagination }, index + "buttons"))
6505
6532
  ] })
@@ -6558,54 +6585,55 @@ var SkeletonRegister = ({ loading, ...props }) => {
6558
6585
  };
6559
6586
  var variants5 = {
6560
6587
  success: {
6561
- small: "bg-success-600",
6562
- big: "bg-success-100"
6588
+ small: "bg-success-500",
6589
+ big: "border border-[1px] border-success-500"
6563
6590
  },
6564
6591
  dangerous: {
6565
- small: "bg-dangerous-600",
6566
- big: "bg-dangerous-100"
6592
+ small: "bg-dangerous-500",
6593
+ big: "border border-[1px] border-dangerous-500"
6567
6594
  },
6568
6595
  warning: {
6569
- small: "bg-warning-600",
6570
- big: "bg-warning-100"
6596
+ small: "bg-warning-500",
6597
+ big: "border border-[1px] border-warning-500"
6571
6598
  },
6572
6599
  info: {
6573
6600
  small: "bg-blue-500",
6574
- big: "bg-blue-100"
6601
+ big: "border border-[1px] border-blue-500"
6575
6602
  },
6576
6603
  gray: {
6577
6604
  small: "bg-neutral-300",
6578
- big: "bg-neutral-100"
6605
+ big: "border border-[1px] border-neutral-300"
6579
6606
  }
6580
6607
  };
6581
- var StatusBall = ({ label, variant = "info" }) => {
6582
- return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
6583
- /* @__PURE__ */ jsxs("div", { className: "relative", children: [
6584
- /* @__PURE__ */ jsx(
6585
- "div",
6586
- {
6587
- className: clsx9(
6588
- {
6589
- [variants5[variant].big]: true
6590
- },
6591
- "h-3 w-3 rounded-full"
6592
- )
6593
- }
6594
- ),
6595
- /* @__PURE__ */ jsx(
6596
- "div",
6597
- {
6598
- className: clsx9(
6599
- {
6600
- [variants5[variant].small]: true
6601
- },
6602
- "h-2 w-2 rounded-full absolute z-30 top-[2px] left-[2px]"
6603
- )
6604
- }
6605
- )
6606
- ] }),
6607
- /* @__PURE__ */ jsx("span", { className: "text-p-md text-paragraph font-normal", children: label })
6608
+ var StatusBall = ({
6609
+ label,
6610
+ variant = "info",
6611
+ labelPosition = "right"
6612
+ }) => {
6613
+ const ball = /* @__PURE__ */ jsxs("div", { className: "relative shrink-0 h-3 w-3", children: [
6614
+ /* @__PURE__ */ jsx(
6615
+ "div",
6616
+ {
6617
+ className: clsx9(variants5[variant].big, "h-3 w-3 rounded-full")
6618
+ }
6619
+ ),
6620
+ /* @__PURE__ */ jsx(
6621
+ "div",
6622
+ {
6623
+ className: clsx9(
6624
+ variants5[variant].small,
6625
+ "h-[8px] w-[8px] rounded-full absolute z-30 top-[2px] left-[2px]"
6626
+ )
6627
+ }
6628
+ )
6608
6629
  ] });
6630
+ return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-2", children: labelPosition === "right" ? /* @__PURE__ */ jsxs(Fragment, { children: [
6631
+ ball,
6632
+ /* @__PURE__ */ jsx("span", { className: "text-p-md text-paragraph font-normal", children: label })
6633
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
6634
+ /* @__PURE__ */ jsx("span", { className: "text-p-md text-paragraph font-normal", children: label }),
6635
+ ball
6636
+ ] }) });
6609
6637
  };
6610
6638
  var Tabs = ({
6611
6639
  tabs,
@@ -6654,7 +6682,7 @@ var Tabs = ({
6654
6682
  className: ({ selected }) => clsx9(
6655
6683
  "group inline-flex rounded-t-lg font-bold text-p-md border border-neutral-200 px-6 py-3 z-20",
6656
6684
  {
6657
- "text-rose-700 border-b-0 bg-white shadow-tabs": selected,
6685
+ "text-rose-700 border-b-0 bg-surface shadow-tabs": selected,
6658
6686
  "bg-neutral-100 text-rose-700 opacity-80 shadow-tabDisabled": !selected && !tab.disabled,
6659
6687
  "text-disabled bg-neutral-100 shadow-tabDisabled": tab.disabled && !selected
6660
6688
  }
@@ -6743,7 +6771,7 @@ var TextArea = ({
6743
6771
  const fieldValidationMessages = [error == null ? void 0 : error.message];
6744
6772
  const hasError = fieldValidationMessages.some((item) => item !== void 0);
6745
6773
  const styles = {
6746
- input: `border border-neutral-800 rounded-lg block pb-[10px] pt-[18px] w-full disabled:bg-neutral-100 focus-visible:border-blue-500 focus-visible:border-1 text-p-md peer shadow-input pl-2 outline-none ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 text-paragraph"}`,
6774
+ input: `border border-neutral-800 rounded-lg block pb-[10px] pt-[18px] w-full bg-surface disabled:bg-neutral-100 focus-visible:border-blue-500 focus-visible:border-1 text-p-md peer shadow-input pl-2 outline-none ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 text-paragraph"}`,
6747
6775
  label: `cursor-text absolute text-label top-[0.70rem] z-10 transform origin-[0] -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-3 left-2.5`
6748
6776
  };
6749
6777
  return /* @__PURE__ */ jsxs("div", { children: [
@@ -6890,7 +6918,7 @@ function ControlledInput({
6890
6918
  const fieldValidationMessages = [error == null ? void 0 : error.message];
6891
6919
  const hasError = fieldValidationMessages.some((item) => item !== void 0);
6892
6920
  const styles = {
6893
- input: `text-p-md pl-2 peer shadow-input border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1 focus-visible:border-blue-500 ${label ? "pt-[22px]" : "pt-[10px]"}
6921
+ input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1 focus-visible:border-blue-500 ${label ? "pt-[22px]" : "pt-[10px]"}
6894
6922
  ${!hasError ? "border-neutral-300" : ""}`,
6895
6923
  icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] rounded-l-lg text-[20px] ${hasError ? "text-dangerous-500" : "text-label"}`,
6896
6924
  rightIcon: "absolute h-[44px] top-[1px] right-[1.5px] w-[38px] text-[22px]",