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.cjs CHANGED
@@ -106,7 +106,7 @@ var variants = {
106
106
  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"
107
107
  },
108
108
  icon: {
109
- 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"
109
+ 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"
110
110
  },
111
111
  outline: {
112
112
  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"
@@ -115,7 +115,7 @@ var variants = {
115
115
  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"
116
116
  },
117
117
  dangerOutline: {
118
- 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"
118
+ 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"
119
119
  },
120
120
  danger: {
121
121
  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"
@@ -124,22 +124,22 @@ var variants = {
124
124
  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"
125
125
  },
126
126
  successOutline: {
127
- 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"
127
+ 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"
128
128
  },
129
129
  warn: {
130
130
  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"
131
131
  },
132
132
  blue: {
133
- text: "shadow-button bg-blue-500 text-white hover:bg-blue-600 active:bg-blue-600 text-bold"
133
+ text: "shadow-button bg-blue-500 text-accent-label hover:bg-blue-600 active:bg-blue-600 text-bold"
134
134
  },
135
135
  iconSecondary: {
136
- 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"
136
+ 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"
137
137
  },
138
138
  outlineIcon: {
139
- 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"
139
+ 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"
140
140
  },
141
141
  dangerLight: {
142
- 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"
142
+ 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"
143
143
  },
144
144
  ghost: {
145
145
  text: "bg-transparent hover:bg-neutral-100 !rounded-full text-paragraph active:bg-neutral-200 disabled:opacity-50"
@@ -148,27 +148,33 @@ var variants = {
148
148
  var paddingConfig = {
149
149
  xxs: {
150
150
  normal: "",
151
- icon: ""
151
+ icon: "",
152
+ iconOnly: ""
152
153
  },
153
154
  xxsm: {
154
155
  normal: "p-[5px]",
155
- icon: "p-[5px]"
156
+ icon: "p-[5px]",
157
+ iconOnly: "p-[5px]"
156
158
  },
157
159
  xs: {
158
160
  normal: "p-2",
159
- icon: "p-2"
161
+ icon: "p-2",
162
+ iconOnly: "p-2"
160
163
  },
161
164
  sm: {
162
165
  normal: "px-3 py-[6px]",
163
- icon: "py-[6px] pl-2 pr-3"
166
+ icon: "py-[6px] pl-2 pr-3",
167
+ iconOnly: "p-[6px]"
164
168
  },
165
169
  md: {
166
170
  normal: "py-2 px-4",
167
- icon: "py-2 pl-3 pr-4"
171
+ icon: "py-2 pl-3 pr-4",
172
+ iconOnly: "p-2"
168
173
  },
169
174
  lg: {
170
175
  normal: "py-3 px-4",
171
- icon: "p-3 pr-4"
176
+ icon: "p-3 pr-4",
177
+ iconOnly: "p-3"
172
178
  }
173
179
  };
174
180
  var Button = ({
@@ -181,7 +187,7 @@ var Button = ({
181
187
  const applyGap = props.icon && props.children;
182
188
  const appliedVariant = variants[variant].text;
183
189
  const appliedSize = sizes[size];
184
- const appliedPadding = props.icon ? paddingConfig[size].icon : paddingConfig[size].normal;
190
+ const appliedPadding = props.icon ? props.children ? paddingConfig[size].icon : paddingConfig[size].iconOnly : paddingConfig[size].normal;
185
191
  const gapText = applyGap ? "gap-[6px]" : "gap-0";
186
192
  React5.useEffect(() => {
187
193
  if (!hotkey || !props.onClick) return;
@@ -212,7 +218,8 @@ var Button = ({
212
218
  {
213
219
  className: clsx9__default.default("inline-flex gap-[8px]", {
214
220
  "flex-col items-center": hotkeyPosition === "top" || hotkeyPosition === "bottom",
215
- "flex-row items-center": hotkeyPosition === "left" || hotkeyPosition === "right"
221
+ "flex-row items-center": hotkeyPosition === "left" || hotkeyPosition === "right",
222
+ "cursor-not-allowed": props.disabled || props.loading
216
223
  }),
217
224
  children: [
218
225
  hotkey && (hotkeyPosition === "top" || hotkeyPosition === "left") && /* @__PURE__ */ jsxRuntime.jsx(
@@ -236,7 +243,7 @@ var Button = ({
236
243
  ${appliedSize.text}
237
244
  ${appliedPadding}
238
245
  ${gapText}
239
- whitespace-nowrap group rounded-lg font-bold disabled:shadow-none active:shadow-none flex items-center
246
+ whitespace-nowrap group rounded-lg font-bold disabled:shadow-none active:shadow-none flex items-center disabled:pointer-events-none
240
247
  `,
241
248
  children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
242
249
  props.icon && /* @__PURE__ */ jsxRuntime.jsx(
@@ -295,7 +302,7 @@ var variants2 = {
295
302
  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]"
296
303
  },
297
304
  secondary: {
298
- 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"
305
+ 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"
299
306
  },
300
307
  link: {
301
308
  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"
@@ -304,37 +311,37 @@ var variants2 = {
304
311
  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"
305
312
  },
306
313
  icon: {
307
- 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"
314
+ 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"
308
315
  },
309
316
  iconSecondary: {
310
- 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"
317
+ 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"
311
318
  },
312
319
  outline: {
313
- 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"
320
+ 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"
314
321
  },
315
322
  dark: {
316
323
  text: "shadow-button text-white hover:bg-[#f5f5f526] active:bg-[#0a0a0a40] disabled:opacity-50 disabled:bg-transparent"
317
324
  },
318
325
  dangerLight: {
319
- 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"
326
+ 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"
320
327
  },
321
328
  danger: {
322
329
  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"
323
330
  },
324
331
  success: {
325
- 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"
332
+ 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"
326
333
  },
327
334
  warn: {
328
- 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"
335
+ 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"
329
336
  },
330
337
  blue: {
331
- text: "shadow-button bg-blue-700 text-white text-bold"
338
+ text: "shadow-button bg-blue-700 text-accent-label text-bold"
332
339
  },
333
340
  filter: {
334
341
  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"
335
342
  },
336
343
  filterActive: {
337
- 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"
344
+ 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"
338
345
  }
339
346
  };
340
347
  var ButtonLink = React5.forwardRef(
@@ -487,7 +494,7 @@ var Input = ({
487
494
  const hasError = fieldValidationMessages.some((item) => item !== void 0);
488
495
  const [showPassword, setShowPassword] = React5__namespace.default.useState(false);
489
496
  const styles = {
490
- 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]"}
497
+ 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]"}
491
498
  ${!hasError ? "border-neutral-300" : ""}`,
492
499
  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`,
493
500
  rightIcon: "absolute h-[44px] top-[1px] right-[1.5px] w-[38px] text-[22px]",
@@ -569,7 +576,7 @@ var Input = ({
569
576
  {
570
577
  onClick: () => setShowPassword(!showPassword),
571
578
  className: clsx9__default.default(
572
- " text-label cursor-pointer text-[20px] absolute right-2 top-[11px]",
579
+ "uil text-label cursor-pointer text-[20px] absolute right-2 top-1/2 -translate-y-1/2",
573
580
  {
574
581
  "uil-eye-slash": showPassword,
575
582
  "uil-eye": !showPassword
@@ -748,7 +755,7 @@ var DatePickerInput = React5.forwardRef(
748
755
  ];
749
756
  const hasError = fieldValidationMessages.some((item) => item !== void 0);
750
757
  const styles = {
751
- 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 `,
758
+ 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 `,
752
759
  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"}`,
753
760
  label: "absolute text-label text-sm",
754
761
  clear: "absolute top-[8px] right-[8px] cursor-pointer text-label text-[22px]"
@@ -797,7 +804,7 @@ var DatePickerInput = React5.forwardRef(
797
804
  id: "icon",
798
805
  className: clsx9__default.default(
799
806
  styles.icon,
800
- "flex justify-center items-center text-[20px] bg-gray-100"
807
+ "flex justify-center items-center text-[20px] bg-light-gray-100"
801
808
  ),
802
809
  children: icon
803
810
  }
@@ -912,10 +919,10 @@ var variants3 = {
912
919
  gray: "bg-neutral-100 text-neutral-400",
913
920
  dangerous: "bg-dangerous-100 text-dangerous-600",
914
921
  light: "bg-neutral-100 text-neutral-400",
915
- white: "bg-[#FFF] text-neutral-400 px-4 py-[6px] border border-light shadow-button text-paragraph",
922
+ white: "bg-surface text-neutral-400 px-4 py-[6px] border border-neutral-200 shadow-button text-paragraph",
916
923
  primary: "bg-rose-100 text-rose-800",
917
924
  dark: "bg-neutral-700 text-white",
918
- outline: "bg-white text-rose-700 border border-neutral-200",
925
+ outline: "bg-surface text-rose-700 border border-neutral-200",
919
926
  "dark-gray": "bg-neutral-100 text-neutral-600"
920
927
  };
921
928
  var Badge = ({
@@ -1211,7 +1218,7 @@ var Checkbox = ({
1211
1218
  "label",
1212
1219
  {
1213
1220
  htmlFor: registration == null ? void 0 : registration.name,
1214
- className: "cursor-pointer font-medium text-gray-700",
1221
+ className: "cursor-pointer font-medium text-paragraph",
1215
1222
  children: label
1216
1223
  }
1217
1224
  ) })
@@ -1230,9 +1237,9 @@ var FilterCalendar = ({
1230
1237
  maxDate = void 0
1231
1238
  }) => {
1232
1239
  const style = {
1233
- 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",
1240
+ 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",
1234
1241
  filterOpen: "rounded-3xl shadow-input border border-blue-500 bg-blue-100 text-blue-500",
1235
- 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"
1242
+ 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"
1236
1243
  };
1237
1244
  const [currentValue, setCurrentValue] = React5.useState([]);
1238
1245
  const [calendarLabel, setCalendarLabel] = React5.useState("");
@@ -1493,7 +1500,7 @@ var FilterCalendar = ({
1493
1500
  className: clsx9__default.default({
1494
1501
  ["text-label group-active:text-blue-500"]: !field.value && !open,
1495
1502
  ["text-blue-500"]: open && !field.value,
1496
- ["text-blue-500 group-hover:text-white group-active:text-white"]: open && field.value
1503
+ ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && field.value
1497
1504
  }),
1498
1505
  children: icon
1499
1506
  }
@@ -1505,7 +1512,7 @@ var FilterCalendar = ({
1505
1512
  {
1506
1513
  ["text-paragraph group-active:text-blue-500"]: !field.value && !open,
1507
1514
  ["text-blue-500"]: open && !field.value,
1508
- ["text-blue-500 group-hover:text-white group-active:text-white"]: open && field.value
1515
+ ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && field.value
1509
1516
  },
1510
1517
  "truncate cursor-pointer"
1511
1518
  ),
@@ -1521,7 +1528,7 @@ var FilterCalendar = ({
1521
1528
  {
1522
1529
  ["text-label group-active:text-blue-500"]: !field.value && !open,
1523
1530
  ["text-blue-500"]: open && !field.value,
1524
- ["text-blue-500 group-hover:text-white group-active:text-white"]: open && field.value
1531
+ ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && field.value
1525
1532
  },
1526
1533
  "uil uil-angle-down text-[18px]"
1527
1534
  )
@@ -1530,7 +1537,7 @@ var FilterCalendar = ({
1530
1537
  ]
1531
1538
  }
1532
1539
  ) }) }),
1533
- open && /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverPanel, { className: "p-3 whitespace-nowrap bg-white rounded-lg shadow-dropdown border-[0.5px] border-neutral-300", children: ({ close }) => {
1540
+ open && /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverPanel, { className: "p-3 whitespace-nowrap bg-surface rounded-lg shadow-dropdown border-[0.5px] border-neutral-300", children: ({ close }) => {
1534
1541
  const onClose = () => {
1535
1542
  setCurrentValue(field.value);
1536
1543
  close();
@@ -1615,7 +1622,7 @@ function InputSmall({
1615
1622
  const styles = {
1616
1623
  input: `text-p-md text-paragraph w-full outline-none placeholder:text-label`,
1617
1624
  icon: "text-label group-focus-within:text-neutral-600 m-[10px]",
1618
- 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}`,
1625
+ 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}`,
1619
1626
  clear: "pr-[5px] cursor-pointer text-label text-[16px]"
1620
1627
  };
1621
1628
  const elem = inputRef == null ? void 0 : inputRef.current;
@@ -1691,9 +1698,9 @@ var FilterOptions = ({
1691
1698
  renderOption
1692
1699
  }) => {
1693
1700
  const style = {
1694
- 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",
1701
+ 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",
1695
1702
  filterOpen: "rounded-3xl shadow-input border border-blue-500 bg-blue-100 text-blue-500",
1696
- 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"
1703
+ 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"
1697
1704
  };
1698
1705
  const [currentValue, setCurrentValue] = React5.useState(isMulti ? [] : {});
1699
1706
  const [data, setData] = React5.useState(() => options);
@@ -1745,7 +1752,7 @@ var FilterOptions = ({
1745
1752
  "relative cursor-pointer outline-none select-none p-3 rounded-lg pr-9 text-paragraph mt-1 first:mt-0 overflow-hidden w-full",
1746
1753
  {
1747
1754
  ["hover:bg-neutral-200"]: !option.disabled && !isSelected,
1748
- ["text-gray-200"]: option.disabled,
1755
+ ["text-disabled"]: option.disabled,
1749
1756
  ["bg-blue-500 hover:bg-blue-500"]: isSelected
1750
1757
  }
1751
1758
  ),
@@ -1758,7 +1765,7 @@ var FilterOptions = ({
1758
1765
  "relative cursor-pointer outline-none select-none p-3 rounded-lg pr-9 text-paragraph mt-1 first:mt-0 overflow-hidden w-full",
1759
1766
  {
1760
1767
  ["hover:bg-neutral-200"]: !option.disabled && !isSelected,
1761
- ["text-gray-200"]: option.disabled,
1768
+ ["text-disabled"]: option.disabled,
1762
1769
  ["bg-blue-500 hover:bg-blue-500"]: isSelected
1763
1770
  }
1764
1771
  ),
@@ -1768,7 +1775,7 @@ var FilterOptions = ({
1768
1775
  {
1769
1776
  className: clsx9__default.default(
1770
1777
  {
1771
- ["font-semibold text-white"]: isSelected
1778
+ ["font-semibold text-accent-label"]: isSelected
1772
1779
  },
1773
1780
  "text-wrap break-words font-normal block"
1774
1781
  ),
@@ -1780,7 +1787,7 @@ var FilterOptions = ({
1780
1787
  {
1781
1788
  className: clsx9__default.default(
1782
1789
  {
1783
- ["font-semibold text-white"]: isSelected
1790
+ ["font-semibold text-accent-label"]: isSelected
1784
1791
  },
1785
1792
  "w-[200px] whitespace-nowrap text-ellipsis overflow-hidden text-label text-p-sm block"
1786
1793
  ),
@@ -1831,7 +1838,7 @@ var FilterOptions = ({
1831
1838
  className: clsx9__default.default({
1832
1839
  ["text-label group-active:text-blue-500"]: !field.value && !open,
1833
1840
  ["text-blue-500"]: open && !field.value,
1834
- ["text-blue-500 group-hover:text-white"]: open && field.value
1841
+ ["text-blue-500 group-hover:text-accent-label"]: open && field.value
1835
1842
  }),
1836
1843
  children: icon
1837
1844
  }
@@ -1843,14 +1850,14 @@ var FilterOptions = ({
1843
1850
  {
1844
1851
  ["text-paragraph group-active:text-blue-500"]: !field.value && !open,
1845
1852
  ["text-blue-500"]: open && !field.value,
1846
- ["text-blue-500 group-hover:text-white"]: open && field.value
1853
+ ["text-blue-500 group-hover:text-accent-label"]: open && field.value
1847
1854
  },
1848
1855
  "truncate cursor-pointer"
1849
1856
  ),
1850
1857
  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
1851
1858
  }
1852
1859
  ),
1853
- isMulti && field.value && field.value.length > 0 && /* @__PURE__ */ jsxRuntime.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 }),
1860
+ isMulti && field.value && field.value.length > 0 && /* @__PURE__ */ jsxRuntime.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 }),
1854
1861
  open ? /* @__PURE__ */ jsxRuntime.jsx(
1855
1862
  "i",
1856
1863
  {
@@ -1858,7 +1865,7 @@ var FilterOptions = ({
1858
1865
  {
1859
1866
  ["text-label group-active:text-blue-500"]: !field.value && !open,
1860
1867
  ["text-blue-500"]: open && !field.value,
1861
- ["text-blue-500 group-hover:text-white"]: open && field.value
1868
+ ["text-blue-500 group-hover:text-accent-label"]: open && field.value
1862
1869
  },
1863
1870
  "uil uil-angle-up text-[18px]"
1864
1871
  )
@@ -1870,7 +1877,7 @@ var FilterOptions = ({
1870
1877
  {
1871
1878
  ["text-label group-active:text-blue-500"]: !field.value && !open,
1872
1879
  ["text-blue-500"]: open && !field.value,
1873
- ["text-blue-500 group-hover:text-white"]: open && field.value
1880
+ ["text-blue-500 group-hover:text-accent-label"]: open && field.value
1874
1881
  },
1875
1882
  "uil uil-angle-down text-[18px]"
1876
1883
  )
@@ -1879,7 +1886,7 @@ var FilterOptions = ({
1879
1886
  ]
1880
1887
  }
1881
1888
  ) }) }),
1882
- open && /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverPanel, { className: "p-3 whitespace-nowrap bg-white rounded-lg shadow-dropdown border-[0.5px] border-neutral-300", children: ({ close }) => {
1889
+ open && /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverPanel, { className: "p-3 whitespace-nowrap bg-surface rounded-lg shadow-dropdown border-[0.5px] border-neutral-300", children: ({ close }) => {
1883
1890
  const onClose = () => {
1884
1891
  setCurrentValue(field.value);
1885
1892
  close();
@@ -1899,7 +1906,7 @@ var FilterOptions = ({
1899
1906
  {
1900
1907
  static: true,
1901
1908
  className: clsx9__default.default(
1902
- "max-h-60 w-full overflow-x-hidden overflow-y-auto bg-white text-p-md focus:outline-none sm:text-sm relative",
1909
+ "max-h-60 w-full overflow-x-hidden overflow-y-auto bg-surface text-p-md focus:outline-none sm:text-sm relative",
1903
1910
  {
1904
1911
  "pr-2": options.some(
1905
1912
  (option) => option.description
@@ -1923,14 +1930,14 @@ var FilterOptions = ({
1923
1930
  }
1924
1931
  }
1925
1932
  ),
1926
- subFilters && fetch && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 pt-2 bg-white", children: subFilters.map((item, index) => {
1933
+ subFilters && fetch && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 pt-2 bg-surface", children: subFilters.map((item, index) => {
1927
1934
  const active = (item == null ? void 0 : item.id) === subFilter;
1928
1935
  return /* @__PURE__ */ jsxRuntime.jsx(
1929
1936
  "button",
1930
1937
  {
1931
1938
  className: clsx9__default.default(
1932
1939
  {
1933
- ["bg-blue-500 text-white"]: active,
1940
+ ["bg-blue-500 text-accent-label"]: active,
1934
1941
  ["text-paragraph"]: !active
1935
1942
  },
1936
1943
  `rounded-[20px] border-[0.5px] border-neutral-200 px-4 py-[6px]`
@@ -2085,7 +2092,7 @@ function InputMoney({
2085
2092
  const fieldValidationMessages = [error == null ? void 0 : error.message];
2086
2093
  const hasError = fieldValidationMessages.some((item) => item !== void 0);
2087
2094
  const styles = {
2088
- 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"}`,
2095
+ 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"}`,
2089
2096
  icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1px] w-[38px] rounded-l-lg ${hasError ? "text-dangerous-500" : "text-label"}
2090
2097
  `,
2091
2098
  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"};
@@ -2207,7 +2214,7 @@ function InputNumber({
2207
2214
  const fieldValidationMessages = [error == null ? void 0 : error.message];
2208
2215
  const hasError = fieldValidationMessages.some((item) => item !== void 0);
2209
2216
  const styles = {
2210
- 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"}`,
2217
+ 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"}`,
2211
2218
  icon: `absolute bg-neutral-100 h-[44px] top-[2px] left-[1.5px] w-[38px] rounded-l-lg ${hasError ? "text-dangerous-500" : "text-label"}
2212
2219
  `,
2213
2220
  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",
@@ -2420,7 +2427,7 @@ function InputPercentage({
2420
2427
  const fieldValidationMessages = [error == null ? void 0 : error.message];
2421
2428
  const hasError = fieldValidationMessages.some((item) => item !== void 0);
2422
2429
  const styles = {
2423
- 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"}`,
2430
+ 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"}`,
2424
2431
  icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] text-[22px] rounded-lg ${hasError ? "text-dangerous-500" : "text-label"}
2425
2432
  `,
2426
2433
  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"};
@@ -2631,7 +2638,9 @@ var ModalDialog = ({
2631
2638
  bottom: "auto",
2632
2639
  marginRight: "-50%",
2633
2640
  transform: "translate(-50%, -50%)",
2634
- border: "1px solid #E8E8E9",
2641
+ border: "1px solid var(--neutral-200)",
2642
+ background: "var(--surface)",
2643
+ color: "var(--paragraph)",
2635
2644
  padding: "20px 24px 24px 24px",
2636
2645
  borderRadius: "8px",
2637
2646
  overflow: "initial"
@@ -2658,23 +2667,33 @@ var ModalDialog = ({
2658
2667
  shouldCloseOnEsc: closeOnOverlayClick,
2659
2668
  style: customStyles6,
2660
2669
  contentLabel: "Example Modal",
2661
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx9__default.default(sizes3[size]), children: [
2662
- showHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-[6px] border-b border-b-neutral-200 flex items-center justify-between", children: [
2663
- /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-[24px] font-bold flex items-center gap-2", children: [
2664
- alertType && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx9__default.default([alertTypes[alertType]], "text-[30px]"), children: icon }),
2670
+ closeTimeoutMS: 200,
2671
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx9__default.default("modal-inner", sizes3[size]), children: [
2672
+ showHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-b-neutral-200 flex items-center justify-between ", children: [
2673
+ /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "font-title text-t-sm font-bold flex items-center gap-2", children: [
2674
+ alertType && /* @__PURE__ */ jsxRuntime.jsx(
2675
+ "div",
2676
+ {
2677
+ className: clsx9__default.default(
2678
+ alertTypes[alertType],
2679
+ "w-[26px] h-[26px] text-[26px] flex items-center justify-center shrink-0"
2680
+ ),
2681
+ children: icon
2682
+ }
2683
+ ),
2665
2684
  title
2666
2685
  ] }),
2667
- /* @__PURE__ */ jsxRuntime.jsx(
2686
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline", children: /* @__PURE__ */ jsxRuntime.jsx(
2668
2687
  Button,
2669
2688
  {
2670
2689
  onClick: onCancel,
2671
2690
  variant: "ghost",
2672
- size: "xs",
2673
- icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-times" })
2691
+ size: "md",
2692
+ icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-times text-neutral-400" })
2674
2693
  }
2675
- )
2694
+ ) })
2676
2695
  ] }),
2677
- /* @__PURE__ */ jsxRuntime.jsx("div", { children }),
2696
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children }),
2678
2697
  showFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-6 flex w-full items-center justify-between", children: [
2679
2698
  /* @__PURE__ */ jsxRuntime.jsx(
2680
2699
  "div",
@@ -2757,6 +2776,7 @@ var customStyles = {
2757
2776
  },
2758
2777
  input: (provided, state) => ({
2759
2778
  ...provided,
2779
+ color: "var(--paragraph)",
2760
2780
  paddingLeft: state.selectProps.hasIcon ? "34px" : "0px",
2761
2781
  paddingTop: state.selectProps.hasLabel ? "10px" : "0px"
2762
2782
  }),
@@ -2766,7 +2786,7 @@ var customStyles = {
2766
2786
  border: "1px solid var(--neutral-300)",
2767
2787
  boxShadow: "none",
2768
2788
  borderRadius: "8px",
2769
- background: "white",
2789
+ background: "var(--surface)",
2770
2790
  zIndex: 20
2771
2791
  }),
2772
2792
  menuList: (provided) => ({
@@ -2777,7 +2797,7 @@ var customStyles = {
2777
2797
  ...base,
2778
2798
  paddingLeft: state.selectProps.hasIcon ? "34px" : "0px",
2779
2799
  paddingTop: state.selectProps.hasLabel ? "10px" : "0",
2780
- color: state.data.value === "active" ? "#0EAF86" : state.selectProps.hasError ? "var(--dangerous-500)" : "black",
2800
+ color: state.data.value === "active" ? "#0EAF86" : state.selectProps.hasError ? "var(--dangerous-500)" : "var(--paragraph)",
2781
2801
  display: "flex"
2782
2802
  }),
2783
2803
  control: (provided, state) => ({
@@ -2789,7 +2809,7 @@ var customStyles = {
2789
2809
  borderRadius: "0.5rem",
2790
2810
  placeholder: " ",
2791
2811
  height: state.selectProps.smallField ? "30px" : "46px",
2792
- backgroundColor: state.isDisabled ? "var(--light-100)" : "white",
2812
+ backgroundColor: state.isDisabled ? "var(--light-100)" : "var(--surface)",
2793
2813
  ":hover": {
2794
2814
  border: state.selectProps.hasError ? "1px solid var(--dangerous-700)" : state.menuIsOpen ? "1px solid var(--blue-700)" : "1px solid var(--neutral-300)"
2795
2815
  }
@@ -2812,7 +2832,7 @@ var customStyles = {
2812
2832
  }
2813
2833
  }),
2814
2834
  option: (provided, state) => {
2815
- let color = state.isSelected ? "white" : (state == null ? void 0 : state.isDisabled) ? "var(--label)" : "var(--paragraph)";
2835
+ let color = state.isSelected ? "var(--accent-label)" : (state == null ? void 0 : state.isDisabled) ? "var(--label)" : "var(--paragraph)";
2816
2836
  return {
2817
2837
  ...provided,
2818
2838
  cursor: state.isDisabled ? "auto" : "pointer",
@@ -2820,7 +2840,7 @@ var customStyles = {
2820
2840
  borderRadius: "8px",
2821
2841
  margin: "4px 0px",
2822
2842
  padding: "12px",
2823
- backgroundColor: state.isSelected ? "var(--blue-500)" : "white",
2843
+ backgroundColor: state.isSelected ? "var(--blue-500)" : "var(--surface)",
2824
2844
  color,
2825
2845
  fontWeight: state.isSelected ? 700 : 400,
2826
2846
  "&:hover": {
@@ -2828,15 +2848,15 @@ var customStyles = {
2828
2848
  },
2829
2849
  "&:active": {
2830
2850
  backgroundColor: "var(--blue-500)",
2831
- color: "white",
2851
+ color: "var(--accent-label)",
2832
2852
  fontWeight: 700
2833
2853
  },
2834
2854
  "&:active i": {
2835
- color: "white",
2855
+ color: "var(--accent-label)",
2836
2856
  fontWeight: 700
2837
2857
  },
2838
2858
  " i": {
2839
- color: "white"
2859
+ color: "var(--accent-label)"
2840
2860
  }
2841
2861
  };
2842
2862
  },
@@ -3169,6 +3189,7 @@ var customStyles2 = {
3169
3189
  },
3170
3190
  input: (provided, state) => ({
3171
3191
  ...provided,
3192
+ color: "var(--paragraph)",
3172
3193
  paddingLeft: state.selectProps.hasIcon ? "34px" : "0px",
3173
3194
  paddingTop: state.selectProps.hasLabel ? "10px" : "0px"
3174
3195
  }),
@@ -3178,7 +3199,7 @@ var customStyles2 = {
3178
3199
  border: "1px solid var(--neutral-300)",
3179
3200
  boxShadow: "none",
3180
3201
  borderRadius: "8px",
3181
- background: "white",
3202
+ background: "var(--surface)",
3182
3203
  zIndex: 60
3183
3204
  }),
3184
3205
  menuList: (provided) => ({
@@ -3189,7 +3210,7 @@ var customStyles2 = {
3189
3210
  ...base,
3190
3211
  paddingLeft: state.selectProps.hasIcon ? "34px" : "0px",
3191
3212
  paddingTop: state.selectProps.hasLabel ? "10px" : "0",
3192
- color: state.data.value === "active" ? "#0EAF86" : "black",
3213
+ color: state.data.value === "active" ? "#0EAF86" : "var(--paragraph)",
3193
3214
  display: "flex"
3194
3215
  }),
3195
3216
  placeholder: (provided, state) => ({
@@ -3205,7 +3226,7 @@ var customStyles2 = {
3205
3226
  borderRadius: "0.5rem",
3206
3227
  placeholder: " ",
3207
3228
  height: "46px",
3208
- backgroundColor: state.isDisabled ? "var(--light-100)" : "white",
3229
+ backgroundColor: state.isDisabled ? "var(--light-100)" : "var(--surface)",
3209
3230
  ":hover": {
3210
3231
  border: state.selectProps.hasError ? "1px solid var(--dangerous-700)" : state.menuIsOpen ? "1px solid var(--blue-700)" : "1px solid var(--neutral-300)"
3211
3232
  }
@@ -3228,7 +3249,7 @@ var customStyles2 = {
3228
3249
  }
3229
3250
  }),
3230
3251
  option: (provided, state) => {
3231
- let color = state.isSelected ? "white" : (state == null ? void 0 : state.isDisabled) ? "var(--label)" : "var(--paragraph)";
3252
+ let color = state.isSelected ? "var(--accent-label)" : (state == null ? void 0 : state.isDisabled) ? "var(--label)" : "var(--paragraph)";
3232
3253
  return {
3233
3254
  ...provided,
3234
3255
  cursor: state.isDisabled ? "auto" : "pointer",
@@ -3236,7 +3257,7 @@ var customStyles2 = {
3236
3257
  borderRadius: "8px",
3237
3258
  margin: "4px 0px",
3238
3259
  padding: "10px 12px",
3239
- backgroundColor: state.isSelected ? "var(--blue-700)" : "white",
3260
+ backgroundColor: state.isSelected ? "var(--blue-700)" : "var(--surface)",
3240
3261
  color,
3241
3262
  fontWeight: state.isSelected ? 700 : 400,
3242
3263
  "&:hover": {
@@ -3244,15 +3265,15 @@ var customStyles2 = {
3244
3265
  },
3245
3266
  "&:active": {
3246
3267
  backgroundColor: "var(--blue-700)",
3247
- color: "white !important",
3268
+ color: "var(--accent-label) !important",
3248
3269
  fontWeight: 700
3249
3270
  },
3250
3271
  "&:active i": {
3251
- color: "white !important",
3272
+ color: "var(--accent-label) !important",
3252
3273
  fontWeight: 700
3253
3274
  },
3254
3275
  " i": {
3255
- color: "white !important"
3276
+ color: "var(--accent-label) !important"
3256
3277
  }
3257
3278
  };
3258
3279
  },
@@ -3665,7 +3686,7 @@ var Toggle = ({
3665
3686
  className: classNames(
3666
3687
  "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",
3667
3688
  checked ? "translate-x-[15px]" : "translate-x-0",
3668
- disabled ? "bg-neutral-300" : "bg-white"
3689
+ disabled ? "bg-neutral-300" : "bg-button-label"
3669
3690
  ),
3670
3691
  children: [
3671
3692
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -3785,7 +3806,7 @@ function PaginationSelect({
3785
3806
  pageSizeSelected == null ? void 0 : pageSizeSelected.name,
3786
3807
  open ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-up text-base top-[13px] pl-3 cursor-pointer text-label" }) : /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-down text-base top-[13px] pl-3 cursor-pointer text-label" })
3787
3808
  ] }),
3788
- /* @__PURE__ */ jsxRuntime.jsx(react.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) => {
3809
+ /* @__PURE__ */ jsxRuntime.jsx(react.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) => {
3789
3810
  const selected = (opt == null ? void 0 : opt.id) === (pageSizeSelected == null ? void 0 : pageSizeSelected.id);
3790
3811
  return /* @__PURE__ */ jsxRuntime.jsx(
3791
3812
  react.Combobox.Option,
@@ -3794,7 +3815,7 @@ function PaginationSelect({
3794
3815
  className: clsx9__default.default(
3795
3816
  "p-2 rounded-lg items-center justify-center cursor-pointer flex whitespace-nowrap no-underline ",
3796
3817
  {
3797
- "bg-blue-500 hover:bg-blue-500 hover:text-[#FFFFFF] text-[#FFFFFF]": selected
3818
+ "bg-blue-500 hover:bg-blue-500 hover:text-accent-label text-accent-label": selected
3798
3819
  },
3799
3820
  {
3800
3821
  "hover:bg-neutral-100 text-paragraph": !selected
@@ -3860,7 +3881,7 @@ function PaginationSelect({
3860
3881
  ),
3861
3882
  open ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-up text-base absolute top-[10px] right-2 cursor-pointer text-label" }) : /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-down text-base absolute top-[10px] right-2 cursor-pointer text-label" })
3862
3883
  ] }),
3863
- /* @__PURE__ */ jsxRuntime.jsx(react.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) => {
3884
+ /* @__PURE__ */ jsxRuntime.jsx(react.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) => {
3864
3885
  const selected = (opt == null ? void 0 : opt.id) === (pageSelected == null ? void 0 : pageSelected.id);
3865
3886
  return /* @__PURE__ */ jsxRuntime.jsx(
3866
3887
  react.Combobox.Option,
@@ -3869,7 +3890,7 @@ function PaginationSelect({
3869
3890
  className: clsx9__default.default(
3870
3891
  "p-2 rounded-lg items-center justify-center cursor-pointer flex whitespace-nowrap no-underline ",
3871
3892
  {
3872
- "bg-blue-500 hover:bg-blue-500 hover:text-[#FFFFFF] text-[#FFFFFF]": selected
3893
+ "bg-blue-500 hover:bg-blue-500 hover:text-accent-label text-accent-label": selected
3873
3894
  },
3874
3895
  {
3875
3896
  "hover:bg-neutral-100 text-paragraph": !selected
@@ -3915,7 +3936,7 @@ var TableFooter = React5__namespace.forwardRef(({ className, ...props }, ref) =>
3915
3936
  {
3916
3937
  ref,
3917
3938
  className: clsx9.clsx(
3918
- " 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",
3939
+ " 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",
3919
3940
  className
3920
3941
  ),
3921
3942
  ...props
@@ -3932,7 +3953,7 @@ var TableHead = React5__namespace.forwardRef(({ className, ...props }, ref) => /
3932
3953
  {
3933
3954
  "hover:bg-neutral-100": props.sortable
3934
3955
  },
3935
- "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",
3956
+ "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",
3936
3957
  className
3937
3958
  ),
3938
3959
  ...props
@@ -4005,10 +4026,10 @@ function DataTablePagination({
4005
4026
  (pageSizeOptions == null ? void 0 : pageSizeOptions.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(PaginationSelect, { table, pageSizeOptions }),
4006
4027
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row items-center justify-center md:justify-normal gap-2 md:gap-4", children: [
4007
4028
  footer,
4008
- selectAllOption && /* @__PURE__ */ jsxRuntime.jsx("div", { children: rowsSelected !== totalData ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:border-l border-gray-300 pl-4", children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "xxs", onClick: onSelectAll, variant: "secondary", children: [
4029
+ selectAllOption && /* @__PURE__ */ jsxRuntime.jsx("div", { children: rowsSelected !== totalData ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:border-l border-neutral-300 pl-4", children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "xxs", onClick: onSelectAll, variant: "secondary", children: [
4009
4030
  "Selecionar todos os ",
4010
4031
  totalData
4011
- ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:border-l border-gray-300 pl-4", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "xxs", onClick: onRemoveAll, variant: "secondary", children: "Desmarcar todos" }) }) })
4032
+ ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:border-l border-neutral-300 pl-4", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "xxs", onClick: onRemoveAll, variant: "secondary", children: "Desmarcar todos" }) }) })
4012
4033
  ] }),
4013
4034
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row items-center md:justify-end justify-center gap-2 flex-1", children: [
4014
4035
  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-p-md text-paragraph mr-1", children: [
@@ -4041,7 +4062,7 @@ function DataTablePagination({
4041
4062
  {
4042
4063
  style: {
4043
4064
  fontSize: "12px",
4044
- color: "#393C4D"
4065
+ color: "var(--paragraph)"
4045
4066
  },
4046
4067
  children: 1
4047
4068
  }
@@ -4076,7 +4097,7 @@ function DataTablePagination({
4076
4097
  {
4077
4098
  style: {
4078
4099
  fontSize: "12px",
4079
- color: isSelectedPage ? "#FFF" : "#393C4D"
4100
+ color: isSelectedPage ? "var(--accent-label)" : "var(--paragraph)"
4080
4101
  },
4081
4102
  children: (index + 1).toLocaleString("pt-BR")
4082
4103
  }
@@ -4105,7 +4126,7 @@ function DataTablePagination({
4105
4126
  {
4106
4127
  style: {
4107
4128
  fontSize: "12px",
4108
- color: "#393C4D"
4129
+ color: "var(--paragraph)"
4109
4130
  },
4110
4131
  children: pageCount.toLocaleString("pt-BR")
4111
4132
  }
@@ -4649,7 +4670,7 @@ var Menu = ({ triggerElement, children, className }) => {
4649
4670
  children: /* @__PURE__ */ jsxRuntime.jsx(
4650
4671
  react.MenuItems,
4651
4672
  {
4652
- 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}`,
4673
+ 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}`,
4653
4674
  children
4654
4675
  }
4655
4676
  )
@@ -4664,7 +4685,7 @@ var Item = ({ index, isActive, onClick, children }) => {
4664
4685
  className: clsx9__default.default(
4665
4686
  "h-[36px] p-2 rounded-lg items-center cursor-pointer flex whitespace-nowrap no-underline ",
4666
4687
  {
4667
- "bg-[#009EDB] hover:bg-[#009EDB] hover:text-[#FFFFFF] text-[#FFFFFF]": isActive
4688
+ "bg-blue-500 hover:bg-blue-500 hover:text-accent-label text-accent-label": isActive
4668
4689
  },
4669
4690
  {
4670
4691
  "hover:bg-neutral-100 text-paragraph": !isActive
@@ -4692,7 +4713,7 @@ var EditableButton = ({
4692
4713
  children: button
4693
4714
  }
4694
4715
  ),
4695
- showModal && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[294px] p-2 bg-white border border-neutral-300 top-14 absolute z-50 rounded-lg", children: [
4716
+ showModal && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[294px] p-2 bg-surface border border-neutral-300 top-14 absolute z-50 rounded-lg", children: [
4696
4717
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-3", children }),
4697
4718
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-3 pb-1 border-t border-neutral-200 flex items-center justify-end gap-2", children: [
4698
4719
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4783,7 +4804,7 @@ var EditableText = ({
4783
4804
  }
4784
4805
  ),
4785
4806
  showModal && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
4786
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[160px] md:w-[294px] p-2 bg-white border border-neutral-300 absolute z-[500] rounded-lg", children: [
4807
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[160px] md:w-[294px] p-2 bg-surface border border-neutral-300 absolute z-[500] rounded-lg", children: [
4787
4808
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-3 ", children }),
4788
4809
  /* @__PURE__ */ jsxRuntime.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: [
4789
4810
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4891,7 +4912,7 @@ var EditableTextSelect = ({
4891
4912
  ]
4892
4913
  }
4893
4914
  ) }),
4894
- /* @__PURE__ */ jsxRuntime.jsx(react.Menu.Items, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[294px] p-2 bg-white border border-neutral-300 absolute z-[500] rounded-lg", children: [
4915
+ /* @__PURE__ */ jsxRuntime.jsx(react.Menu.Items, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[294px] p-2 bg-surface border border-neutral-300 absolute z-[500] rounded-lg", children: [
4895
4916
  showInputSeach && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(
4896
4917
  InputSmall,
4897
4918
  {
@@ -4923,7 +4944,7 @@ var EditableTextSelect = ({
4923
4944
  className: clsx9__default.default(
4924
4945
  "p-3 mb-1 rounded-lg items-center flex whitespace-nowrap no-underline w-full",
4925
4946
  {
4926
- "bg-blue-500 hover:bg-blue-500 hover:text-[#FFFFFF] text-[#FFFFFF]": selected
4947
+ "bg-blue-500 hover:bg-blue-500 hover:text-accent-label text-accent-label": selected
4927
4948
  },
4928
4949
  {
4929
4950
  "hover:bg-neutral-100 text-paragraph": !selected
@@ -4950,9 +4971,9 @@ var EditableTextSelect = ({
4950
4971
  "span",
4951
4972
  {
4952
4973
  className: clsx9__default.default(
4953
- "group-hover:text-[#fff] ",
4974
+ "group-hover:text-accent-label ",
4954
4975
  {
4955
- "text-[#fff]": selected
4976
+ "text-accent-label": selected
4956
4977
  },
4957
4978
  {
4958
4979
  "text-blue-500": !selected
@@ -5002,7 +5023,7 @@ function ImagePreview({ open, setOpen, previewImage }) {
5002
5023
  leave: "ease-in duration-200",
5003
5024
  leaveFrom: "opacity-100 translate-y-0 sm:scale-100",
5004
5025
  leaveTo: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
5005
- children: /* @__PURE__ */ jsxRuntime.jsx(react.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full flex-1", children: [
5026
+ children: /* @__PURE__ */ jsxRuntime.jsx(react.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full flex-1", children: [
5006
5027
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between mb-2", children: [
5007
5028
  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-t-sm font-bold", children: "Pr\xE9via da imagem" }),
5008
5029
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -5528,7 +5549,7 @@ var DefaultContent = ({ formats, icon, limitMessage }) => /* @__PURE__ */ jsxRun
5528
5549
  "label",
5529
5550
  {
5530
5551
  htmlFor: "file-upload",
5531
- className: "relative leading-none cursor-pointer text-sm bg-white focus-within:outline-none",
5552
+ className: "relative leading-none cursor-pointer text-sm bg-surface focus-within:outline-none",
5532
5553
  children: /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
5533
5554
  "ou\xA0",
5534
5555
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-blue-500", children: "selecione do seu computador" })
@@ -5595,6 +5616,7 @@ var customStyles3 = {
5595
5616
  },
5596
5617
  input: (provided, state) => ({
5597
5618
  ...provided,
5619
+ color: "var(--paragraph)",
5598
5620
  outline: "none",
5599
5621
  paddingLeft: state.selectProps.hasIcon ? "2.5rem" : "0px"
5600
5622
  }),
@@ -5624,11 +5646,11 @@ var customStyles3 = {
5624
5646
  borderRadius: "8px",
5625
5647
  padding: "0px 8px",
5626
5648
  zIndex: 70,
5627
- background: "white"
5649
+ background: "var(--surface)"
5628
5650
  }),
5629
5651
  singleValue: (base, state) => ({
5630
5652
  ...base,
5631
- color: state.data.value === "active" ? "#0EAF86" : "black",
5653
+ color: state.data.value === "active" ? "#0EAF86" : "var(--paragraph)",
5632
5654
  display: "flex"
5633
5655
  }),
5634
5656
  control: (provided, state) => ({
@@ -5643,6 +5665,7 @@ var customStyles3 = {
5643
5665
  minHeight: "46px",
5644
5666
  alignItems: "end",
5645
5667
  paddingTop: "8px",
5668
+ backgroundColor: "var(--surface)",
5646
5669
  ":hover": {
5647
5670
  border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.menuIsOpen ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)"
5648
5671
  }
@@ -5669,9 +5692,9 @@ var customStyles3 = {
5669
5692
  }
5670
5693
  }),
5671
5694
  option: (provided, state) => {
5672
- let color = state.isSelected && !state.selectProps.isTargeted ? "white" : "var(--paragraph)";
5695
+ let color = state.isSelected && !state.selectProps.isTargeted ? "var(--accent-label)" : "var(--paragraph)";
5673
5696
  if (state.isDisabled) {
5674
- color = "rgba(0,0,0,0.30)";
5697
+ color = "var(--disabled)";
5675
5698
  }
5676
5699
  return {
5677
5700
  ...provided,
@@ -5679,7 +5702,7 @@ var customStyles3 = {
5679
5702
  cursor: "pointer",
5680
5703
  borderRadius: "8px",
5681
5704
  margin: "4px 0px",
5682
- backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : state.isFocused ? "var(--neutral-200)" : "white",
5705
+ backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : state.isFocused ? "var(--neutral-200)" : "var(--surface)",
5683
5706
  color,
5684
5707
  fontWeight: state.isSelected && !state.selectProps.isTargeted ? 700 : 400,
5685
5708
  "&:hover": {
@@ -5687,15 +5710,15 @@ var customStyles3 = {
5687
5710
  },
5688
5711
  "&:active": {
5689
5712
  backgroundColor: "var(--blue-500)",
5690
- color: "white",
5713
+ color: "var(--accent-label)",
5691
5714
  fontWeight: 700
5692
5715
  },
5693
5716
  "&:active svg": {
5694
- color: "white",
5717
+ color: "var(--accent-label)",
5695
5718
  fontWeight: 700
5696
5719
  },
5697
5720
  " svg": {
5698
- color: "white"
5721
+ color: "var(--accent-label)"
5699
5722
  }
5700
5723
  };
5701
5724
  },
@@ -5813,6 +5836,7 @@ var ValueContainer3 = ({ children, ...props }) => {
5813
5836
  var customStyles4 = {
5814
5837
  input: (provided) => ({
5815
5838
  ...provided,
5839
+ color: "var(--paragraph)",
5816
5840
  outline: "none",
5817
5841
  height: "100%"
5818
5842
  }),
@@ -5839,7 +5863,7 @@ var customStyles4 = {
5839
5863
  borderRadius: "8px",
5840
5864
  padding: "0px 8px",
5841
5865
  zIndex: 30,
5842
- background: "white"
5866
+ background: "var(--surface)"
5843
5867
  }),
5844
5868
  control: (provided, state) => {
5845
5869
  return {
@@ -5850,6 +5874,7 @@ var customStyles4 = {
5850
5874
  boxShadow: "none",
5851
5875
  outline: "none",
5852
5876
  borderRadius: "0.5rem",
5877
+ backgroundColor: "var(--surface)",
5853
5878
  // height: "52px",
5854
5879
  // paddingLeft: '8px',
5855
5880
  placeholder: state.selectProps.hasLabel ? " " : state.selectProps.placeholder,
@@ -6004,6 +6029,7 @@ var customStyles5 = {
6004
6029
  },
6005
6030
  input: (provided, state) => ({
6006
6031
  ...provided,
6032
+ color: "var(--paragraph)",
6007
6033
  outline: "none",
6008
6034
  paddingLeft: state.selectProps.hasIcon ? "2.5rem" : "0px"
6009
6035
  }),
@@ -6028,11 +6054,11 @@ var customStyles5 = {
6028
6054
  borderRadius: "8px",
6029
6055
  padding: "0px 8px",
6030
6056
  zIndex: 70,
6031
- background: "white"
6057
+ background: "var(--surface)"
6032
6058
  }),
6033
6059
  singleValue: (base, state) => ({
6034
6060
  ...base,
6035
- color: state.data.value === "active" ? "#0EAF86" : "black",
6061
+ color: state.data.value === "active" ? "#0EAF86" : "var(--paragraph)",
6036
6062
  display: "flex"
6037
6063
  }),
6038
6064
  control: (provided, state) => ({
@@ -6046,6 +6072,7 @@ var customStyles5 = {
6046
6072
  placeholder: " ",
6047
6073
  height: "46px",
6048
6074
  alignItems: "end",
6075
+ backgroundColor: "var(--surface)",
6049
6076
  ":hover": {
6050
6077
  border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.menuIsOpen ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)"
6051
6078
  }
@@ -6072,9 +6099,9 @@ var customStyles5 = {
6072
6099
  }
6073
6100
  }),
6074
6101
  option: (provided, state) => {
6075
- let color = state.isSelected && !state.selectProps.isTargeted ? "white" : "var(--paragraph)";
6102
+ let color = state.isSelected && !state.selectProps.isTargeted ? "var(--accent-label)" : "var(--paragraph)";
6076
6103
  if (state.isDisabled) {
6077
- color = "rgba(0,0,0,0.30)";
6104
+ color = "var(--disabled)";
6078
6105
  }
6079
6106
  return {
6080
6107
  ...provided,
@@ -6082,7 +6109,7 @@ var customStyles5 = {
6082
6109
  cursor: "pointer",
6083
6110
  borderRadius: "8px",
6084
6111
  margin: "4px 0px",
6085
- backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : state.isFocused ? "var(--neutral-200)" : "white",
6112
+ backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : state.isFocused ? "var(--neutral-200)" : "var(--surface)",
6086
6113
  color,
6087
6114
  fontWeight: state.isSelected && !state.selectProps.isTargeted ? 700 : 400,
6088
6115
  "&:hover": {
@@ -6090,15 +6117,15 @@ var customStyles5 = {
6090
6117
  },
6091
6118
  "&:active": {
6092
6119
  backgroundColor: "var(--blue-500)",
6093
- color: "white",
6120
+ color: "var(--accent-label)",
6094
6121
  fontWeight: 700
6095
6122
  },
6096
6123
  "&:active svg": {
6097
- color: "white",
6124
+ color: "var(--accent-label)",
6098
6125
  fontWeight: 700
6099
6126
  },
6100
6127
  " svg": {
6101
- color: "white"
6128
+ color: "var(--accent-label)"
6102
6129
  }
6103
6130
  };
6104
6131
  },
@@ -6531,7 +6558,7 @@ var SkeletonList = ({ loading, ...props }) => {
6531
6558
  new Array(1).fill(null).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: headerItem }, index + "second")),
6532
6559
  new Array(4).fill(null).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: tableLine }, index + "third"))
6533
6560
  ] }) }),
6534
- /* @__PURE__ */ jsxRuntime.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: [
6561
+ /* @__PURE__ */ jsxRuntime.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: [
6535
6562
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[190px] h-6 rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton__default.default, { className: "h-full" }) }),
6536
6563
  Array(5).fill(null).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: buttonPagination }, index + "buttons"))
6537
6564
  ] })
@@ -6590,54 +6617,55 @@ var SkeletonRegister = ({ loading, ...props }) => {
6590
6617
  };
6591
6618
  var variants5 = {
6592
6619
  success: {
6593
- small: "bg-success-600",
6594
- big: "bg-success-100"
6620
+ small: "bg-success-500",
6621
+ big: "border border-[1px] border-success-500"
6595
6622
  },
6596
6623
  dangerous: {
6597
- small: "bg-dangerous-600",
6598
- big: "bg-dangerous-100"
6624
+ small: "bg-dangerous-500",
6625
+ big: "border border-[1px] border-dangerous-500"
6599
6626
  },
6600
6627
  warning: {
6601
- small: "bg-warning-600",
6602
- big: "bg-warning-100"
6628
+ small: "bg-warning-500",
6629
+ big: "border border-[1px] border-warning-500"
6603
6630
  },
6604
6631
  info: {
6605
6632
  small: "bg-blue-500",
6606
- big: "bg-blue-100"
6633
+ big: "border border-[1px] border-blue-500"
6607
6634
  },
6608
6635
  gray: {
6609
6636
  small: "bg-neutral-300",
6610
- big: "bg-neutral-100"
6637
+ big: "border border-[1px] border-neutral-300"
6611
6638
  }
6612
6639
  };
6613
- var StatusBall = ({ label, variant = "info" }) => {
6614
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
6615
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
6616
- /* @__PURE__ */ jsxRuntime.jsx(
6617
- "div",
6618
- {
6619
- className: clsx9__default.default(
6620
- {
6621
- [variants5[variant].big]: true
6622
- },
6623
- "h-3 w-3 rounded-full"
6624
- )
6625
- }
6626
- ),
6627
- /* @__PURE__ */ jsxRuntime.jsx(
6628
- "div",
6629
- {
6630
- className: clsx9__default.default(
6631
- {
6632
- [variants5[variant].small]: true
6633
- },
6634
- "h-2 w-2 rounded-full absolute z-30 top-[2px] left-[2px]"
6635
- )
6636
- }
6637
- )
6638
- ] }),
6639
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-p-md text-paragraph font-normal", children: label })
6640
+ var StatusBall = ({
6641
+ label,
6642
+ variant = "info",
6643
+ labelPosition = "right"
6644
+ }) => {
6645
+ const ball = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0 h-3 w-3", children: [
6646
+ /* @__PURE__ */ jsxRuntime.jsx(
6647
+ "div",
6648
+ {
6649
+ className: clsx9__default.default(variants5[variant].big, "h-3 w-3 rounded-full")
6650
+ }
6651
+ ),
6652
+ /* @__PURE__ */ jsxRuntime.jsx(
6653
+ "div",
6654
+ {
6655
+ className: clsx9__default.default(
6656
+ variants5[variant].small,
6657
+ "h-[8px] w-[8px] rounded-full absolute z-30 top-[2px] left-[2px]"
6658
+ )
6659
+ }
6660
+ )
6640
6661
  ] });
6662
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center gap-2", children: labelPosition === "right" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
6663
+ ball,
6664
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-p-md text-paragraph font-normal", children: label })
6665
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
6666
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-p-md text-paragraph font-normal", children: label }),
6667
+ ball
6668
+ ] }) });
6641
6669
  };
6642
6670
  var Tabs = ({
6643
6671
  tabs,
@@ -6686,7 +6714,7 @@ var Tabs = ({
6686
6714
  className: ({ selected }) => clsx9__default.default(
6687
6715
  "group inline-flex rounded-t-lg font-bold text-p-md border border-neutral-200 px-6 py-3 z-20",
6688
6716
  {
6689
- "text-rose-700 border-b-0 bg-white shadow-tabs": selected,
6717
+ "text-rose-700 border-b-0 bg-surface shadow-tabs": selected,
6690
6718
  "bg-neutral-100 text-rose-700 opacity-80 shadow-tabDisabled": !selected && !tab.disabled,
6691
6719
  "text-disabled bg-neutral-100 shadow-tabDisabled": tab.disabled && !selected
6692
6720
  }
@@ -6775,7 +6803,7 @@ var TextArea = ({
6775
6803
  const fieldValidationMessages = [error == null ? void 0 : error.message];
6776
6804
  const hasError = fieldValidationMessages.some((item) => item !== void 0);
6777
6805
  const styles = {
6778
- 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"}`,
6806
+ 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"}`,
6779
6807
  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`
6780
6808
  };
6781
6809
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -6922,7 +6950,7 @@ function ControlledInput({
6922
6950
  const fieldValidationMessages = [error == null ? void 0 : error.message];
6923
6951
  const hasError = fieldValidationMessages.some((item) => item !== void 0);
6924
6952
  const styles = {
6925
- 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]"}
6953
+ 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]"}
6926
6954
  ${!hasError ? "border-neutral-300" : ""}`,
6927
6955
  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"}`,
6928
6956
  rightIcon: "absolute h-[44px] top-[1px] right-[1.5px] w-[38px] text-[22px]",